界面修改
This commit is contained in:
DESKTOP-GMUNQ1B\k
parent
5a769016c6
commit
856e037e6c
@ -1,204 +1,206 @@
|
||||
<template>
|
||||
<view :class="'wf-page wf-page'+type">
|
||||
<!-- left -->
|
||||
<view>
|
||||
<view id="left" v-if="leftList.length">
|
||||
<view v-for="(item,index) in leftList" :key="index"
|
||||
class="wf-item" @tap="itemTap(item)">
|
||||
<WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- right -->
|
||||
<view>
|
||||
<view id="right" v-if="rightList.length">
|
||||
<view v-for="(item,index) in rightList" :key="index"
|
||||
class="wf-item" @tap="itemTap(item)">
|
||||
<WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="'wf-page wf-page'+type">
|
||||
<!-- left -->
|
||||
<view>
|
||||
<view id="left" v-if="leftList.length">
|
||||
<view v-for="(item,index) in leftList" :key="index" class="wf-item" @tap="itemTap(item)">
|
||||
<WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- right -->
|
||||
<view>
|
||||
<view id="right" v-if="rightList.length">
|
||||
<view v-for="(item,index) in rightList" :key="index" class="wf-item" @tap="itemTap(item)">
|
||||
<WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import WaterfallsFlowItem from '../WaterfallsFlowItem/WaterfallsFlowItem.vue'
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import WaterfallsFlowItem from '../WaterfallsFlowItem/WaterfallsFlowItem.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
WaterfallsFlowItem
|
||||
},
|
||||
props: {
|
||||
// 瀑布流列表
|
||||
wfList: {
|
||||
type: Array,
|
||||
require: true
|
||||
},
|
||||
updateNum: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: 0
|
||||
export default {
|
||||
components: {
|
||||
WaterfallsFlowItem
|
||||
},
|
||||
isStore: {
|
||||
type: [String, Number],
|
||||
default: '1'
|
||||
props: {
|
||||
// 瀑布流列表
|
||||
wfList: {
|
||||
type: Array,
|
||||
require: true
|
||||
},
|
||||
updateNum: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
isStore: {
|
||||
type: [String, Number],
|
||||
default: '1'
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
allList: [], // 全部列表
|
||||
leftList: [], // 左边列表
|
||||
rightList: [], // 右边列表
|
||||
mark: 0, // 列表标记
|
||||
boxHeight: [], // 下标0和1分别为左列和右列高度
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听列表数据变化
|
||||
wfList: {
|
||||
handler(nVal,oVal){
|
||||
// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
|
||||
if (!this.wfList.length ||
|
||||
(this.wfList.length === this.updateNum && this.wfList.length <= this.allList.length)) {
|
||||
this.allList = [];
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
this.boxHeight = [];
|
||||
this.mark = 0;
|
||||
}
|
||||
|
||||
// 如果列表有值，调用waterfall方法
|
||||
if (this.wfList.length) {
|
||||
this.allList = this.wfList;
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
this.boxHeight = [];
|
||||
this.allList.forEach((v, i) => {
|
||||
if(this.allList.length < 3 || (this.allList.length <= 7 && this.allList.length - i > 1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
|
||||
if(i % 2){
|
||||
this.rightList.push(v);
|
||||
}else{
|
||||
this.leftList.push(v);
|
||||
data() {
|
||||
return {
|
||||
allList: [], // 全部列表
|
||||
leftList: [], // 左边列表
|
||||
rightList: [], // 右边列表
|
||||
mark: 0, // 列表标记
|
||||
boxHeight: [], // 下标0和1分别为左列和右列高度
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听列表数据变化
|
||||
wfList: {
|
||||
handler(nVal, oVal) {
|
||||
// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
|
||||
if (!this.wfList.length ||
|
||||
(this.wfList.length === this.updateNum && this.wfList.length <= this.allList.length)) {
|
||||
this.allList = [];
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
this.boxHeight = [];
|
||||
this.mark = 0;
|
||||
}
|
||||
|
||||
// 如果列表有值，调用waterfall方法
|
||||
if (this.wfList.length) {
|
||||
this.allList = this.wfList;
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
this.boxHeight = [];
|
||||
this.allList.forEach((v, i) => {
|
||||
if (this.allList.length < 3 || (this.allList.length <= 7 && this.allList.length - i >
|
||||
1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
|
||||
if (i % 2) {
|
||||
this.rightList.push(v);
|
||||
} else {
|
||||
this.leftList.push(v);
|
||||
}
|
||||
}
|
||||
});
|
||||
if (this.allList.length < 3) {
|
||||
this.mark = this.allList.length + 1;
|
||||
} else if (this.allList.length <= 7) {
|
||||
this.mark = this.allList.length - 1;
|
||||
} else {
|
||||
this.mark = this.allList.length - 2;
|
||||
}
|
||||
if (this.mark < this.allList.length) {
|
||||
this.waterFall()
|
||||
}
|
||||
});
|
||||
if(this.allList.length < 3){
|
||||
this.mark = this.allList.length+1;
|
||||
}else if(this.allList.length <= 7){
|
||||
this.mark = this.allList.length - 1;
|
||||
}else{
|
||||
this.mark = this.allList.length - 2;
|
||||
}
|
||||
if(this.mark < this.allList.length){
|
||||
this.waterFall()
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
// 监听标记，当标记发生变化，则执行下一个item排序
|
||||
mark() {
|
||||
const len = this.allList.length;
|
||||
if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
|
||||
this.waterFall();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 瀑布流排序
|
||||
waterFall() {
|
||||
const i = this.mark;
|
||||
if (i == 0) {
|
||||
// 初始化，从左边开始插入
|
||||
this.leftList.push(this.allList[i]);
|
||||
// 更新左边列表高度
|
||||
this.getViewHeight(0);
|
||||
} else if (i == 1) {
|
||||
// 第二个item插入，默认为右边插入
|
||||
this.rightList.push(this.allList[i]);
|
||||
// 更新右边列表高度
|
||||
this.getViewHeight(1);
|
||||
} else {
|
||||
// 根据左右列表高度判断下一个item应该插入哪边
|
||||
if (!this.boxHeight.length) {
|
||||
this.rightList.length < this.leftList.length ?
|
||||
this.rightList.push(this.allList[i]) :
|
||||
this.leftList.push(this.allList[i]);
|
||||
} else {
|
||||
const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
|
||||
if (leftOrRight) {
|
||||
this.rightList.push(this.allList[i])
|
||||
} else {
|
||||
this.leftList.push(this.allList[i])
|
||||
}
|
||||
}
|
||||
// 更新插入列表高度
|
||||
this.getViewHeight();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep:true
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
|
||||
// 监听标记，当标记发生变化，则执行下一个item排序
|
||||
mark() {
|
||||
const len = this.allList.length;
|
||||
if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
|
||||
this.waterFall();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 瀑布流排序
|
||||
waterFall() {
|
||||
const i = this.mark;
|
||||
if (i == 0) {
|
||||
// 初始化，从左边开始插入
|
||||
this.leftList.push(this.allList[i]);
|
||||
// 更新左边列表高度
|
||||
this.getViewHeight(0);
|
||||
} else if (i == 1) {
|
||||
// 第二个item插入，默认为右边插入
|
||||
this.rightList.push(this.allList[i]);
|
||||
// 更新右边列表高度
|
||||
this.getViewHeight(1);
|
||||
} else {
|
||||
// 根据左右列表高度判断下一个item应该插入哪边
|
||||
if(!this.boxHeight.length){
|
||||
this.rightList.length < this.leftList.length
|
||||
? this.rightList.push(this.allList[i])
|
||||
: this.leftList.push(this.allList[i]);
|
||||
} else {
|
||||
const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
|
||||
if (leftOrRight) {
|
||||
this.rightList.push(this.allList[i])
|
||||
} else {
|
||||
this.leftList.push(this.allList[i])
|
||||
}
|
||||
}
|
||||
// 更新插入列表高度
|
||||
this.getViewHeight();
|
||||
}
|
||||
},
|
||||
// 获取列表高度
|
||||
getViewHeight() {
|
||||
// 使用nextTick，确保页面更新结束后，再请求高度
|
||||
this.$nextTick(() => {
|
||||
setTimeout(()=>{
|
||||
uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
|
||||
res ? this.boxHeight[1] = res.height : '';
|
||||
uni.createSelectorQuery().in(this).select('#left').boundingClientRect(res => {
|
||||
res ? this.boxHeight[0] = res.height : '';
|
||||
this.mark = this.mark + 1;
|
||||
}).exec();
|
||||
}).exec();
|
||||
},100)
|
||||
})
|
||||
},
|
||||
// item点击
|
||||
itemTap(item) {
|
||||
this.$emit('itemTap', item)
|
||||
},
|
||||
// item点击
|
||||
goShop(item) {
|
||||
this.$emit('goShop', item)
|
||||
// 获取列表高度
|
||||
getViewHeight() {
|
||||
// 使用nextTick，确保页面更新结束后，再请求高度
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
|
||||
res ? this.boxHeight[1] = res.height : '';
|
||||
uni.createSelectorQuery().in(this).select('#left').boundingClientRect(
|
||||
res => {
|
||||
res ? this.boxHeight[0] = res.height : '';
|
||||
this.mark = this.mark + 1;
|
||||
}).exec();
|
||||
}).exec();
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
// item点击
|
||||
itemTap(item) {
|
||||
this.$emit('itemTap', item)
|
||||
},
|
||||
// item点击
|
||||
goShop(item) {
|
||||
this.$emit('goShop', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$page-padding: 10px;
|
||||
$grid-gap: 10px;
|
||||
$page-padding: 10px;
|
||||
$grid-gap: 10px;
|
||||
|
||||
.wf-page {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: $grid-gap;
|
||||
}
|
||||
.wf-item {
|
||||
width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
|
||||
padding-bottom: $grid-gap;
|
||||
}
|
||||
.wf-page1 .wf-item{
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.wf-item-page{
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
</style>
|
||||
.wf-page {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: $grid-gap;
|
||||
}
|
||||
|
||||
.wf-item {
|
||||
width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
|
||||
padding-bottom: $grid-gap;
|
||||
}
|
||||
|
||||
.wf-page1 .wf-item {
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.wf-item-page {
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,50 @@
|
||||
<template>
|
||||
<view class='recommend'>
|
||||
<view class="common-hd">
|
||||
<view class="title" :style="{ 'background-image': `url(${domain}/static/images/index-title.png)`}">为你推荐</view>
|
||||
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/137f4202403091116454932.webp" mode=""></image>
|
||||
</view>
|
||||
|
||||
<!-- nav导航 -->
|
||||
<view class="nav">
|
||||
<view class="nav-item">
|
||||
<view class="nav-item-up">
|
||||
<image src="../../static/images/dong.gif" mode=""></image>
|
||||
</view>
|
||||
<view class="nav-item-down">
|
||||
<view class="nav-item-down-title">里海云仓</view>
|
||||
<view class="nav-item-down-desc">供销物资市场</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-item">
|
||||
<view class="nav-item-up">
|
||||
<image src="../../static/images/dong.gif" mode=""></image>
|
||||
</view>
|
||||
<view class="nav-item-down">
|
||||
<view class="nav-item-down-title">供销云市场</view>
|
||||
<view class="nav-item-down-desc">综合线上大市场</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-item">
|
||||
<view class="nav-item-up">
|
||||
<image src="../../static/images/dong.gif" mode=""></image>
|
||||
</view>
|
||||
<view class="nav-item-down">
|
||||
<view class="nav-item-down-title">名优特产</view>
|
||||
<view class="nav-item-down-desc">地方特色特产</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- tab导航 -->
|
||||
<view class="tabs">
|
||||
<block v-for="(item,indx) in tabsArr" :key="indx">
|
||||
<view :class="{'tabs-item-active':item.val==currTabs}" class="tabs-item" @click="changeTab(item.val)">
|
||||
<view class="tabs-item-main">{{item.name}}</view>
|
||||
<view class="tabs-item-sub">{{item.desc}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class='recommendList' :class="indexP?'on':''">
|
||||
<WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" />
|
||||
</view>
|
||||
@ -19,14 +61,26 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import {mapGetters} from "vuex";
|
||||
import { goShopDetail } from '@/libs/order.js'
|
||||
import {initiateAssistApi} from '@/api/activity.js';
|
||||
import {toLogin} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
import {
|
||||
initiateAssistApi
|
||||
} from '@/api/activity.js';
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
export default {
|
||||
components:{WaterfallsFlow},
|
||||
components: {
|
||||
WaterfallsFlow
|
||||
},
|
||||
computed: mapGetters(['uid']),
|
||||
props: {
|
||||
hostProduct: {
|
||||
@ -35,11 +89,11 @@
|
||||
return [];
|
||||
}
|
||||
},
|
||||
indexP:{
|
||||
indexP: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isLogin:{
|
||||
isLogin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
@ -47,29 +101,52 @@
|
||||
data() {
|
||||
return {
|
||||
domain: HTTP_REQUEST_URL,
|
||||
tabsArr: [{
|
||||
name: '全部',
|
||||
desc: '猜你喜欢',
|
||||
val: 1
|
||||
}, {
|
||||
name: '里海云仓',
|
||||
desc: '大家都在买',
|
||||
val: 2
|
||||
}, {
|
||||
name: '云市场',
|
||||
desc: '商户汇聚',
|
||||
val: 3
|
||||
}, {
|
||||
name: '名优特产',
|
||||
desc: '特色农副',
|
||||
val: 4
|
||||
}],
|
||||
currTabs: 1
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
onPullDownRefresh(){
|
||||
onPullDownRefresh() {
|
||||
// 模拟上拉刷新
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
const newList = this.hostProduct.reverse();
|
||||
this.hostProduct = newList;
|
||||
uni.stopPullDownRefresh();
|
||||
},500)
|
||||
}, 500)
|
||||
},
|
||||
methods: {
|
||||
goDetail(item){
|
||||
|
||||
changeTab(e) {
|
||||
this.currTabs = e;
|
||||
},
|
||||
|
||||
goDetail(item) {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
if (this.isLogin) {
|
||||
if (this.isLogin) {
|
||||
initiateAssistApi(item.activity_id).then(res => {
|
||||
let id = res.data.product_assist_set_id;
|
||||
uni.hideLoading();
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/assist_detail/index?id=' + id
|
||||
});
|
||||
});
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
@ -77,7 +154,7 @@
|
||||
})
|
||||
});
|
||||
} else {
|
||||
toLogin();
|
||||
toLogin();
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -91,7 +168,14 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 118rpx;
|
||||
|
||||
image {
|
||||
width: 340rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 42rpx;
|
||||
padding: 0 80rpx;
|
||||
font-size: 34rpx;
|
||||
color: $theme-color;
|
||||
@ -101,14 +185,102 @@
|
||||
background-position: left center;
|
||||
}
|
||||
}
|
||||
|
||||
// 里海云仓 供销云市场 名优特产
|
||||
.nav {
|
||||
display: flex;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.nav-item {
|
||||
width: 33.3%;
|
||||
overflow: hidden;
|
||||
border-radius: 20rpx;
|
||||
|
||||
&:not(:nth-last-child(1)) {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.nav-item-up {
|
||||
width: 100%;
|
||||
height: 198rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item-down {
|
||||
height: 102rpx;
|
||||
padding: 12rpx 0 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(to right, #72BE53 0%, #46B03A 100%);
|
||||
|
||||
.nav-item-down-title {
|
||||
margin-bottom: 4rpx;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.nav-item-down-desc {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 -20rpx 30rpx;
|
||||
|
||||
.tabs-item {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.tabs-item-main {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-family: PingFangSC-Medium, PingFangSC-Medium;
|
||||
}
|
||||
|
||||
.tabs-item-sub {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-item-active {
|
||||
.tabs-item-main {
|
||||
color: #40AE36;
|
||||
}
|
||||
|
||||
.tabs-item-sub {
|
||||
padding: 0 12rpx;
|
||||
background-color: #40AE36;
|
||||
color: #fff;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recommend .recommendList {
|
||||
padding: 0 20rpx;
|
||||
min-height: 100rpx;
|
||||
}
|
||||
.recommend .recommendList.on{
|
||||
|
||||
.recommend .recommendList.on {
|
||||
padding: 0;
|
||||
}
|
||||
/deep/.looming-gray{
|
||||
|
||||
/deep/.looming-gray {
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
43
pages.json
43
pages.json
@ -22,45 +22,47 @@
|
||||
"scrollIndicator": false //禁用原生导航栏
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
}, {
|
||||
"path": "pages/whole_sale/index",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTitleText": "批发",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/gather/gather",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTitleText": "工作台"
|
||||
"navigationBarTitleText": "工作台",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
}, {
|
||||
"path": "pages/order_addcart/order_addcart",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTitleText": "购物车"
|
||||
}
|
||||
},
|
||||
{
|
||||
}, {
|
||||
"path": "pages/plant_grass/index",
|
||||
"style": {
|
||||
// "navigationStyle": "custom",
|
||||
"navigationBarTitleText": "种草社区"
|
||||
}
|
||||
},
|
||||
{
|
||||
}, {
|
||||
"path": "pages/user/index",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTitleText": "个人中心",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
}, {
|
||||
"path": "pages/small_page/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "微页面"
|
||||
// "navigationStyle": "custom",
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
}, {
|
||||
"path": "pages/goods_details/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
@ -1441,7 +1443,7 @@
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#282828",
|
||||
"selectedColor": "#E93323",
|
||||
"selectedColor": "#40AE36",
|
||||
"borderStyle": "white",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [{
|
||||
@ -1450,13 +1452,12 @@
|
||||
"selectedIconPath": "static/images/1-002.png",
|
||||
"text": "首页"
|
||||
},
|
||||
// {
|
||||
// "pagePath": "pages/goods_cate/goods_cate"
|
||||
// ,
|
||||
// "iconPath": "static/images/2-001.png",
|
||||
// "selectedIconPath": "static/images/2-002.png",
|
||||
// "text": "分类"
|
||||
// },
|
||||
{
|
||||
"pagePath": "pages/whole_sale/index",
|
||||
"iconPath": "static/images/2-001.png",
|
||||
"selectedIconPath": "static/images/2-002.png",
|
||||
"text": "批发"
|
||||
},
|
||||
// {
|
||||
// "pagePath": "pages/plant_grass/index",
|
||||
// "iconPath": "static/images/5-001.png",
|
||||
|
||||
@ -1,19 +1,194 @@
|
||||
<style lang="scss" scoped>
|
||||
.gather {
|
||||
.gather-header {
|
||||
background-color: #40AE36;
|
||||
|
||||
.location {
|
||||
height: 98rpx;
|
||||
padding: 0 28rpx;
|
||||
|
||||
.box {
|
||||
height: 98rpx;
|
||||
}
|
||||
|
||||
.town_name {
|
||||
color: #fff;
|
||||
margin-left: 18rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiperBg {
|
||||
z-index: 1;
|
||||
|
||||
.colorBg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 130rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page_swiper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 10rpx;
|
||||
overflow-x: hidden;
|
||||
z-index: 8;
|
||||
padding: 0 10rpx;
|
||||
|
||||
swiper-item {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.swiper-item,
|
||||
image,
|
||||
.acea-row.row-between-wrapper {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
swiper {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: auto;
|
||||
|
||||
&.scalex {
|
||||
/deep/.uni-swiper-slide-frame {
|
||||
transform: translate(0, 0) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
transform: scale(0.93);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
swiper-item.active,
|
||||
swiper-item.scalex {
|
||||
image {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/*用来包裹所有的小圆点 */
|
||||
.dots {
|
||||
width: 156rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
left: 320rpx;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*未选中时的小圆点样式 */
|
||||
.dot {
|
||||
width: 16rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 6rpx;
|
||||
background-color: rgba(255, 255, 255, .4);
|
||||
|
||||
/*选中以后的小圆点样式 */
|
||||
&.active {
|
||||
width: 32rpx;
|
||||
height: 6rpx;
|
||||
background-color: rgba(255, 255, 255, .4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 68rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
image {
|
||||
width: 340rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 42rpx;
|
||||
padding: 0 80rpx;
|
||||
font-size: 34rpx;
|
||||
color: $theme-color;
|
||||
font-weight: bold;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: left center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="gather">
|
||||
<u-empty :show="jurisdiction" mode="permission" :text="emptyText"
|
||||
icon="http://cdn.uviewui.com/uview/empty/permission.png"></u-empty>
|
||||
<view class="business com special_work" v-if="jurisdiction == false">
|
||||
<view class="title project">
|
||||
<view>更多功能</view>
|
||||
<view v-if="!editFlag" class="edit" @click="editFlag = true">编辑</view>
|
||||
<view v-else class="edit" @click="editComfirm">完成</view>
|
||||
|
||||
<!--顶部定位-->
|
||||
<view class="gather-header">
|
||||
<view style="height: var(--status-bar-height);"></view>
|
||||
<view class="location">
|
||||
<view class="box flex_a_c_j_sb">
|
||||
<view class="place_wrapper flex_a_c" @click="changeMap">
|
||||
<view class="iconfont icon-weizhi" style="color:#fff;font-size:40rpx;"></view>
|
||||
<view class="town_name">{{street||'定位中' }}</view>
|
||||
</view>
|
||||
<view class="flex_a_c_j_sb">
|
||||
<navigator style="margin-right: 30rpx;" url="/pages/chat/customer_list/index?type=0"
|
||||
hover-class="none">
|
||||
<view class="iconfont icon-saoma" style="color:#fff;font-size:40rpx;"> </view>
|
||||
</navigator>
|
||||
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
|
||||
<view class="iconfont icon-xiaoxi" style="color:#fff;font-size:40rpx;"> </view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!--轮播图-->
|
||||
<view class="swiperBg">
|
||||
<view class="swiper page_swiper">
|
||||
<swiper :autoplay="false" :circular="circular" :interval="intervals" :duration="duration"
|
||||
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" :current="swiperCur"
|
||||
style="height:330rpx;margin: 0 auto;width:710rpx;" @change="swiperChange"
|
||||
:class="{ scalex:isScale }">
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<swiper-item :class="{ active: index == swiperCur,scalex:isScale }">
|
||||
<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
|
||||
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e2f0520240203154207556.png"
|
||||
class="slide-image aa" style="height:330rpx;" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<view class="dots">
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<view class="dot" :class="index == swiperCur ? ' active' : ''"></view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="title-img">
|
||||
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/807b8202403111125379295.webp" mode=""></image>
|
||||
</view>
|
||||
|
||||
<view class="business com special_work" v-if="jurisdiction == false">
|
||||
<view class="content">
|
||||
<block v-if="nowMenuList.length > 0">
|
||||
<u-transition v-for="(item, index) in nowMenuList" :key="item.name" show>
|
||||
<view class="examine" @click="
|
||||
editFlag ? removeMenu(item) : clickMenu(item)
|
||||
">
|
||||
<view class="examine" @click="editFlag ? removeMenu(item) : clickMenu(item)">
|
||||
<image class="icon_img" :src="item.pic" mode="aspectFit">
|
||||
</image>
|
||||
<u-icon v-if="editFlag" class="icon" name="minus-circle-fill" color="red"></u-icon>
|
||||
@ -21,8 +196,15 @@
|
||||
</view>
|
||||
</u-transition>
|
||||
</block>
|
||||
<view v-else-if="!editFlag" @click="editFlag = true"
|
||||
style="text-align: center; width: 100%; color: #aaa">还没有应用,点我添加应用</view>
|
||||
<view class="add-box examine"
|
||||
style="display: flex;justify-content: center;flex-direction: column;align-items: center;"
|
||||
@click="editFlag = true">
|
||||
<view class="add-box-icon"
|
||||
style="margin-bottom: 14rpx; width:84rpx;height:84rpx;border: 2rpx solid #40AE36;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;">
|
||||
<u-icon name="plus" size="25" :bold="true" color="#40AE36"></u-icon>
|
||||
</view>
|
||||
<text>添加应用</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="editFlag" class="business com special_work edit_card">
|
||||
@ -55,9 +237,9 @@
|
||||
import {
|
||||
Toast
|
||||
} from '@/libs/uniApi';
|
||||
import {
|
||||
applet
|
||||
} from '@/api/public.js';
|
||||
import {
|
||||
applet
|
||||
} from '@/api/public.js';
|
||||
// #ifdef APP-PLUS
|
||||
import uniMP from '@/utils/uniMP.js';
|
||||
// #endif
|
||||
@ -65,6 +247,9 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrls: [{
|
||||
img: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e2f0520240203154207556.png'
|
||||
}],
|
||||
locationArr: ({}),
|
||||
isshow: false,
|
||||
emptyText: '暂无可用应用',
|
||||
@ -95,13 +280,12 @@
|
||||
...mapGetters(['userInfo', 'location', 'isLogin'])
|
||||
},
|
||||
created() {},
|
||||
onLoad() {
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.emptyText = '暂无可用应用'
|
||||
this.jurisdiction = false
|
||||
this.initAllAppLet();
|
||||
this.initAllAppLet();
|
||||
} else {
|
||||
this.emptyText = '请登录'
|
||||
this.jurisdiction = true
|
||||
@ -112,8 +296,7 @@
|
||||
this.getUserInfo()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
beforeDestroy() {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
@ -132,9 +315,9 @@
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
onHide() {
|
||||
uni.$emit('showLoading', false);
|
||||
},
|
||||
onHide() {
|
||||
uni.$emit('showLoading', false);
|
||||
},
|
||||
methods: {
|
||||
scrolling() {
|
||||
// 滚动条距文档顶部的距离
|
||||
@ -177,15 +360,15 @@
|
||||
|
||||
|
||||
},
|
||||
initAllAppLet(){
|
||||
applet().then(res=>{
|
||||
this.AllMenuList = res.data;
|
||||
this.initMenu();
|
||||
// this.showControllerAllLet();
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
initAllAppLet() {
|
||||
applet().then(res => {
|
||||
this.AllMenuList = res.data;
|
||||
this.initMenu();
|
||||
// this.showControllerAllLet();
|
||||
}).catch(e => {
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
// 根据类型来判断是否显示
|
||||
showControllerAllLet() {
|
||||
let user;
|
||||
@ -208,18 +391,18 @@
|
||||
initMenu() {
|
||||
let nowMenu = uni.getStorageSync('gatherMenuList');
|
||||
try {
|
||||
let list = JSON.parse(nowMenu||'[]');
|
||||
let now = [];
|
||||
let all = [];
|
||||
let list = JSON.parse(nowMenu || '[]');
|
||||
let now = [];
|
||||
let all = [];
|
||||
this.AllMenuList.forEach((item) => {
|
||||
if(list.find(t => t.name == item.name)?.name != item.name) all.push(item);
|
||||
else now.push(item)
|
||||
if (list.find(t => t.name == item.name)?.name != item.name) all.push(item);
|
||||
else now.push(item)
|
||||
})
|
||||
this.AllMenuList = all;
|
||||
this.nowMenuList = now;
|
||||
this.AllMenuList = all;
|
||||
this.nowMenuList = now;
|
||||
} catch (e) {
|
||||
this.nowMenuList = [];
|
||||
console.log(e);
|
||||
console.log(e);
|
||||
}
|
||||
},
|
||||
clickMenu(data) {
|
||||
@ -246,9 +429,9 @@
|
||||
},
|
||||
getUniMp(data) {
|
||||
let that = this;
|
||||
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
if(data.version) return uniMP.loadAppletMP(data);
|
||||
if (data.version) return uniMP.loadAppletMP(data);
|
||||
else switch (data.type) {
|
||||
case 1:
|
||||
uniMP.loadMP(data.data);
|
||||
@ -426,7 +609,7 @@
|
||||
.special_work {
|
||||
// padding: 17.54rpx;
|
||||
width: 694.74rpx;
|
||||
padding-top: 30rpx;
|
||||
padding-top: 30rpx;
|
||||
border-radius: 17.54rpx;
|
||||
// box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
|
||||
|
||||
@ -529,37 +712,37 @@
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.location {
|
||||
background-color: #f6f6f6;
|
||||
width: 680rpx;
|
||||
height: 150rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
border-radius: 20rpx;
|
||||
left: 50%;
|
||||
margin-left: -340rpx;
|
||||
margin-top: 80rpx;
|
||||
padding-left: 20rpx;
|
||||
// .location {
|
||||
// background-color: #f6f6f6;
|
||||
// width: 680rpx;
|
||||
// height: 150rpx;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// z-index: 9999;
|
||||
// border-radius: 20rpx;
|
||||
// left: 50%;
|
||||
// margin-left: -340rpx;
|
||||
// margin-top: 80rpx;
|
||||
// padding-left: 20rpx;
|
||||
|
||||
.locationa {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
// .locationa {
|
||||
// font-size: 28rpx;
|
||||
// color: #000;
|
||||
// font-weight: 500;
|
||||
// margin-top: 30rpx;
|
||||
// margin-bottom: 15rpx;
|
||||
// }
|
||||
|
||||
.locationb {
|
||||
font-size: 20rpx;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
// .locationb {
|
||||
// font-size: 20rpx;
|
||||
// color: #5a5a5a;
|
||||
// }
|
||||
|
||||
.locationx {
|
||||
color: #000;
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 20rpx;
|
||||
}
|
||||
}
|
||||
// .locationx {
|
||||
// color: #000;
|
||||
// position: absolute;
|
||||
// top: 10rpx;
|
||||
// right: 20rpx;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
565
pages/gather/gather_backup.vue
Normal file
565
pages/gather/gather_backup.vue
Normal file
@ -0,0 +1,565 @@
|
||||
<template>
|
||||
<view class="gather">
|
||||
<u-empty :show="jurisdiction" mode="permission" :text="emptyText"
|
||||
icon="http://cdn.uviewui.com/uview/empty/permission.png"></u-empty>
|
||||
<view class="business com special_work" v-if="jurisdiction == false">
|
||||
<view class="title project">
|
||||
<view>更多功能</view>
|
||||
<view v-if="!editFlag" class="edit" @click="editFlag = true">编辑</view>
|
||||
<view v-else class="edit" @click="editComfirm">完成</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<block v-if="nowMenuList.length > 0">
|
||||
<u-transition v-for="(item, index) in nowMenuList" :key="item.name" show>
|
||||
<view class="examine" @click="
|
||||
editFlag ? removeMenu(item) : clickMenu(item)
|
||||
">
|
||||
<image class="icon_img" :src="item.pic" mode="aspectFit">
|
||||
</image>
|
||||
<u-icon v-if="editFlag" class="icon" name="minus-circle-fill" color="red"></u-icon>
|
||||
<text class="text">{{ item.name }}</text>
|
||||
</view>
|
||||
</u-transition>
|
||||
</block>
|
||||
<view v-else-if="!editFlag" @click="editFlag = true"
|
||||
style="text-align: center; width: 100%; color: #aaa">还没有应用,点我添加应用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="editFlag" class="business com special_work edit_card">
|
||||
<view class="title project" style="padding: 0 28rpx">
|
||||
<view>编辑功能</view>
|
||||
<view class="edit2" @click="editComfirm">完成</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<u-transition v-for="(item, index) in AllMenuList" :key="item.name" show>
|
||||
<view class="examine" @click="pushMenu(item)">
|
||||
<image class="icon_img" :src="item.pic" mode="aspectFit"> </image>
|
||||
<u-icon class="icon" name="plus-circle-fill"></u-icon>
|
||||
<text class="text">{{ item.name }}</text>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapGetters
|
||||
} from 'vuex'
|
||||
import {
|
||||
getStoreList,
|
||||
getUserInfo
|
||||
} from '@/api/user.js'
|
||||
import {
|
||||
Toast
|
||||
} from '@/libs/uniApi';
|
||||
import {
|
||||
applet
|
||||
} from '@/api/public.js';
|
||||
// #ifdef APP-PLUS
|
||||
import uniMP from '@/utils/uniMP.js';
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
locationArr: ({}),
|
||||
isshow: false,
|
||||
emptyText: '暂无可用应用',
|
||||
jurisdiction: false, // 是否有权限
|
||||
mer_id: '',
|
||||
userInfoData: {
|
||||
mer_info: {
|
||||
type_id: 0
|
||||
}
|
||||
},
|
||||
prefix: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/11/',
|
||||
isShow: false,
|
||||
isFshow: false,
|
||||
street: '',
|
||||
// 编辑中标记
|
||||
editFlag: false,
|
||||
// 所有菜单的按钮
|
||||
AllMenuList: [],
|
||||
nowMenuList: [],
|
||||
street: '',
|
||||
showPicker: false,
|
||||
columnData: [],
|
||||
isFshow: false,
|
||||
backColor: 'rgba(252, 252, 252, 0)'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo', 'location', 'isLogin'])
|
||||
},
|
||||
created() {},
|
||||
onLoad() {
|
||||
},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.emptyText = '暂无可用应用'
|
||||
this.jurisdiction = false
|
||||
this.initAllAppLet();
|
||||
} else {
|
||||
this.emptyText = '请登录'
|
||||
this.jurisdiction = true
|
||||
}
|
||||
this.getUserInfo();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getUserInfo()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
// #ifdef APP-PLUS
|
||||
onPageScroll(e) {
|
||||
const scrollTop = e.scrollTop;
|
||||
if (scrollTop <= 20) {
|
||||
this.backColor = 'rgba(252, 252, 252, 0)'
|
||||
this.isFshow = false
|
||||
} else if (20 < scrollTop && scrollTop <= 100) {
|
||||
this.backColor = 'rgba(252, 252, 252, .5)'
|
||||
this.isFshow = true
|
||||
} else if (scrollTop > 100) {
|
||||
this.backColor = 'rgba(252, 252, 252, 1)'
|
||||
this.isFshow = true
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
onHide() {
|
||||
uni.$emit('showLoading', false);
|
||||
},
|
||||
methods: {
|
||||
scrolling() {
|
||||
// 滚动条距文档顶部的距离
|
||||
let scrollTop =
|
||||
window.pageYOffset ||
|
||||
document.documentElement.scrollTop ||
|
||||
document.body.scrollTop;
|
||||
// 滚动条滚动的距离
|
||||
let scrollStep = scrollTop - this.oldScrollTop;
|
||||
// console.log("header 滚动距离 ", scrollTop);
|
||||
// 更新——滚动前，滚动条距文档顶部的距离
|
||||
this.oldScrollTop = scrollTop;
|
||||
|
||||
//变量windowHeight是可视区的高度
|
||||
let windowHeight =
|
||||
document.documentElement.clientHeight || document.body.clientHeight;
|
||||
//变量scrollHeight是滚动条的总高度
|
||||
let scrollHeight =
|
||||
document.documentElement.scrollHeight || document.body.scrollHeight;
|
||||
|
||||
//滚动条到底部的条件
|
||||
if (scrollTop + windowHeight == scrollHeight) {
|
||||
//你想做的事情
|
||||
// console.log("header 你已经到底部了");
|
||||
}
|
||||
|
||||
|
||||
if (scrollTop <= 20) {
|
||||
this.backColor = 'rgba(252, 252, 252, 0)'
|
||||
this.isFshow = false
|
||||
} else if (20 < scrollTop && scrollTop <= 100) {
|
||||
this.backColor = 'rgba(252, 252, 252, .5)'
|
||||
this.isFshow = true
|
||||
} else if (scrollTop > 100) {
|
||||
this.backColor = 'rgba(252, 252, 252, 1)'
|
||||
this.isFshow = true
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
initAllAppLet(){
|
||||
applet().then(res=>{
|
||||
this.AllMenuList = res.data;
|
||||
this.initMenu();
|
||||
// this.showControllerAllLet();
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
// 根据类型来判断是否显示
|
||||
showControllerAllLet() {
|
||||
let user;
|
||||
if (typeof this.$store.state.app.userInfo == 'string') {
|
||||
user = JSON.parse(this.$store.state.app.userInfo)
|
||||
} else user = JSON.parse(JSON.stringify(this.$store.state.app.userInfo))
|
||||
if (user?.show_controller_applet) {
|
||||
this.AllMenuList.push({
|
||||
name: '大屏控制',
|
||||
icon: '/static/applet/dp.png',
|
||||
data: {
|
||||
id: '__UNI__83ABA97',
|
||||
url: 'https://ceshi-worker-task.lihaink.cn/uploads/files/20231016/20231016112144fac6d9128.wgt',
|
||||
},
|
||||
type: 4,
|
||||
})
|
||||
}
|
||||
},
|
||||
// 初始化菜单
|
||||
initMenu() {
|
||||
let nowMenu = uni.getStorageSync('gatherMenuList');
|
||||
try {
|
||||
let list = JSON.parse(nowMenu||'[]');
|
||||
let now = [];
|
||||
let all = [];
|
||||
this.AllMenuList.forEach((item) => {
|
||||
if(list.find(t => t.name == item.name)?.name != item.name) all.push(item);
|
||||
else now.push(item)
|
||||
})
|
||||
this.AllMenuList = all;
|
||||
this.nowMenuList = now;
|
||||
} catch (e) {
|
||||
this.nowMenuList = [];
|
||||
console.log(e);
|
||||
}
|
||||
},
|
||||
clickMenu(data) {
|
||||
this.getUniMp(data);
|
||||
},
|
||||
// 添加菜单
|
||||
pushMenu(data) {
|
||||
this.nowMenuList.push(data);
|
||||
this.AllMenuList = this.AllMenuList.filter((item) => {
|
||||
return item.name != data.name;
|
||||
})
|
||||
},
|
||||
// 移除菜单
|
||||
removeMenu(data) {
|
||||
this.AllMenuList.push(data);
|
||||
this.nowMenuList = this.nowMenuList.filter((item) => {
|
||||
return item.name != data.name;
|
||||
})
|
||||
},
|
||||
// 编辑完成
|
||||
editComfirm() {
|
||||
this.editFlag = false;
|
||||
uni.setStorageSync('gatherMenuList', JSON.stringify(this.nowMenuList));
|
||||
},
|
||||
getUniMp(data) {
|
||||
let that = this;
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
if(data.version) return uniMP.loadAppletMP(data);
|
||||
else switch (data.type) {
|
||||
case 1:
|
||||
uniMP.loadMP(data.data);
|
||||
break;
|
||||
case 2:
|
||||
uniMP.loadMPx(data.data);
|
||||
break;
|
||||
case 3:
|
||||
uniMP.loadMPurl(data.data);
|
||||
break;
|
||||
case 4:
|
||||
uniMP.loadMPdns(data.data);
|
||||
break;
|
||||
}
|
||||
return;
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
// if (type == 2) {
|
||||
// this.navigator(`/pages/moreProject/moreProject`);
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// icon: 'none',
|
||||
// title: 'H5不支持打开小程序'
|
||||
// })
|
||||
// }
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: 'H5不支持打开小程序'
|
||||
})
|
||||
// #endif
|
||||
|
||||
},
|
||||
navigator(url, t) {
|
||||
// if (this.userInfoData.is_wsxx === 0 && t != '商户设置') return Toast("请完善商户信息");
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
getUserInfo: function() {
|
||||
let that = this;
|
||||
getUserInfo().then(res => {
|
||||
that.userInfoData = res.data;
|
||||
that.$store.commit('SET_USERINFO', res.data);
|
||||
// console.log(res.data.service);
|
||||
if (res.data.service == null) {
|
||||
// console.log('123');
|
||||
this.isShow = false
|
||||
} else {
|
||||
this.isShow = true
|
||||
this.mer_id = res.data.service.mer_id
|
||||
}
|
||||
|
||||
if (!res.data.mer_info) {
|
||||
that.$set(this, 'jurisdiction', false);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.gather {
|
||||
padding-bottom: 164.91rpx;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sitebox {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 3s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.site-box1 {
|
||||
width: 706rpx;
|
||||
/* #ifdef MP || APP-PLUS */
|
||||
height: 160rpx;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
height: 120rpx;
|
||||
/* #endif */
|
||||
margin-bottom: 26.32rpx;
|
||||
position: absolute;
|
||||
top: 45rpx;
|
||||
left: 20rpx;
|
||||
|
||||
z-index: 999;
|
||||
|
||||
// 位置
|
||||
.place_wrapper {
|
||||
color: #fff;
|
||||
margin-right: 0rpx;
|
||||
|
||||
font-size: 30rpx;
|
||||
|
||||
.town_name {
|
||||
margin-left: 21rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 35.09rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.site-box {
|
||||
width: 100%;
|
||||
/* #ifdef MP || APP-PLUS */
|
||||
height: 160rpx;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
height: 120rpx;
|
||||
/* #endif */
|
||||
margin-bottom: 26.32rpx;
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
/* #ifdef MP || APP-PLUS */
|
||||
padding-top: 75rpx;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
padding-top: 25rpx;
|
||||
/* #endif */
|
||||
// background-color: #e5e5e5;
|
||||
// background: url("@/static/images/bg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-right: 20rpx;
|
||||
|
||||
// 位置
|
||||
.place_wrapper {
|
||||
color: #fff;
|
||||
margin-right: 24.56rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
.town_name {
|
||||
margin-left: 21rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
opacity: 0;
|
||||
font-size: 30rpx;
|
||||
font-size: 35.09rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.top_box {
|
||||
// padding-top: 180rpx;
|
||||
background: linear-gradient(#36a2ff, #fff);
|
||||
}
|
||||
|
||||
.com {
|
||||
margin-left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.business {
|
||||
width: 694.74rpx;
|
||||
// margin-bottom: 175rpx;
|
||||
}
|
||||
|
||||
.special_work {
|
||||
// padding: 17.54rpx;
|
||||
width: 694.74rpx;
|
||||
padding-top: 30rpx;
|
||||
border-radius: 17.54rpx;
|
||||
// box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
|
||||
|
||||
.title {
|
||||
font-size: 31.58rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 38.6rpx;
|
||||
}
|
||||
|
||||
.project {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.edit {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
|
||||
&::after {
|
||||
content: ">";
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.edit2 {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
// justify-content: space-between;
|
||||
|
||||
.examine {
|
||||
margin-bottom: 35rpx;
|
||||
width: 173.68rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
// margin: 0 0 33.33rpx 33.33rpx !important;
|
||||
|
||||
.icon_img {
|
||||
width: 83.16rpx;
|
||||
height: 83.16rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: -5rpx;
|
||||
right: 25rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 26.32rpx;
|
||||
margin-top: 21.05rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 29.82rpx;
|
||||
color: #a4a4a4;
|
||||
}
|
||||
}
|
||||
|
||||
.cont_jus {
|
||||
margin-top: 56.14rpx;
|
||||
justify-content: flex-start;
|
||||
|
||||
&:first-child {
|
||||
// margin-right: 33rpx;
|
||||
}
|
||||
|
||||
.examine {
|
||||
margin-right: 48rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit_card {
|
||||
background-color: #fff;
|
||||
padding-top: 28rpx;
|
||||
}
|
||||
|
||||
.rotate-box {
|
||||
transform: rotate(0deg);
|
||||
transition: transform .5s ease-out;
|
||||
}
|
||||
|
||||
.rotate-box:active {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.location {
|
||||
background-color: #f6f6f6;
|
||||
width: 680rpx;
|
||||
height: 150rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
border-radius: 20rpx;
|
||||
left: 50%;
|
||||
margin-left: -340rpx;
|
||||
margin-top: 80rpx;
|
||||
padding-left: 20rpx;
|
||||
|
||||
.locationa {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.locationb {
|
||||
font-size: 20rpx;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
.locationx {
|
||||
color: #000;
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
697
pages/index/component/homeComb_backup.vue
Normal file
697
pages/index/component/homeComb_backup.vue
Normal file
@ -0,0 +1,697 @@
|
||||
<template>
|
||||
<view class="page_count">
|
||||
<view class="bg-img">
|
||||
<img :src="bgColor" alt="">
|
||||
</view>
|
||||
<!--搜索-->
|
||||
<view :class="{scrolled:isScrolled}" class="my-main">
|
||||
<view style="height: var(--status-bar-height);"></view>
|
||||
<view class="location">
|
||||
<view class="box flex_a_c_j_sb">
|
||||
<view class="place_wrapper flex_a_c" @click="changeMap">
|
||||
<view class="iconfont icon-weizhi" style="color:#fff;"></view>
|
||||
<view class="town_name">{{street||'定位中' }}</view>
|
||||
</view>
|
||||
<view class="flex_a_c_j_sb">
|
||||
<navigator style="margin-right: 30rpx;" url="/pages/chat/customer_list/index?type=0" hover-class="none">
|
||||
<view class="iconfont icon-saoma" style="color:#fff;"> </view>
|
||||
</navigator>
|
||||
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
|
||||
<view class="iconfont icon-xiaoxi" style="color:#fff;"> </view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<view>
|
||||
<view class="header">
|
||||
<view class="sys-head tui-skeleton" :style="{ height: statusBarHeight }"></view>
|
||||
<view class="serch-box tui-skeleton">
|
||||
<view class="serch-wrapper flex">
|
||||
<view v-if="logoConfig || site_logo" class="logo skeleton-rect"><image :src="logoConfig || site_logo" mode="widthFix"></image></view>
|
||||
<navigator v-if="hotWords.length > 0" :url="'/pages/columnGoods/goods_search/index?searchVal='+searchVal" :class="(logoConfig || site_logo) ? 'input' : 'uninput'"
|
||||
hover-class="none" class="skeleton-rect box">
|
||||
<view class='swiperTxt'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true"
|
||||
circular="true" @change="textChange">
|
||||
<block v-for="(item,index) in hotWords" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view class='acea-row row-between-wrapper'>
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1'>{{item.val}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
</navigator>
|
||||
<navigator v-else url="/pages/columnGoods/goods_search/index" :class="(logoConfig || site_logo) ? 'input' : 'uninput'"
|
||||
hover-class="none" class="skeleton-rect">
|
||||
搜索商品
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
</navigator>
|
||||
<!-- <navigator class="btn skeleton-rect" url="/pages/chat/customer_list/index?type=0" hover-class="none">
|
||||
<view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
|
||||
<text class="iconnum" v-if="userInfo.total_unread">{{ userInfo.total_unread }}</text>
|
||||
</navigator> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="'height:'+isTop+'px'"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP || APP-PLUS -->
|
||||
<view>
|
||||
<view class="mp-header" id="home">
|
||||
<!-- <view class="sys-head tui-skeleton" :style="{ height: statusBarHeight }"></view> -->
|
||||
<view class="serch-box tui-skeleton">
|
||||
<view class="serch-wrapper flex">
|
||||
<!-- <view v-if="logoConfig || site_logo" class="logo skeleton-rect"><image :src="logoConfig || site_logo" mode="widthFix"></image></view> -->
|
||||
<navigator v-if="hotWords.length > 0" :url="'/pages/columnGoods/goods_search/index?searchVal='+searchVal" :class="(logoConfig || site_logo) ? 'input' : 'uninput'"
|
||||
hover-class="none" class="skeleton-rect box">
|
||||
<view class='swiperTxt'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true"
|
||||
circular="true" @change="textChange">
|
||||
<block v-for="(item,index) in hotWords" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view class='acea-row row-between-wrapper'>
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1'>{{item.val}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
</navigator>
|
||||
<navigator v-else url="/pages/columnGoods/goods_search/index" :class="(logoConfig || site_logo) ? 'input' : 'uninput'"
|
||||
hover-class="none" class="skeleton-rect">
|
||||
搜索商品
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="'height:'+(marTop + 10)+'px;'"></view>
|
||||
<!-- <view :style="'height:'+statusBarHeight"></view> -->
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!--选项卡-->
|
||||
<view v-if="tabTitle.length>0" style="visibility: hidden;" :style="{ height: navHeight + 'px' }"></view>
|
||||
<view v-if="tabTitle.length>0" class="navTabBox tabNav" :class="{bgwhite:isScrolled}" :style="'top:'+isTop+'px'">
|
||||
<view class="longTab" :style='"width:"+mainWidth+"px"'>
|
||||
<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation :scroll-left="tabLeft" show-scrollbar="true">
|
||||
<view class="longItem" :data-index="index" :class="index===tabClick?'click':''" @click="changeTab(item,index)" v-for="(item,index) in tabTitle" :key="index" :id="'id'+index">{{item.info[0].value}}</view>
|
||||
<view class="underlineBox" :style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
|
||||
<view class="underline"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--轮播图-->
|
||||
<view class="swiperBg" :style="{ marginTop: swiperTop+'px'}">
|
||||
<view style="height: 50rpx;"></view>
|
||||
<block>
|
||||
<view class="swiper page_swiper" v-if="imgUrls.length">
|
||||
<swiper
|
||||
:autoplay="true"
|
||||
:circular="circular"
|
||||
:interval="intervals"
|
||||
:duration="duration"
|
||||
indicator-color="rgba(255,255,255,0.6)"
|
||||
indicator-active-color="#fff"
|
||||
:current="swiperCur"
|
||||
previous-margin="30rpx"
|
||||
next-margin="30rpx"
|
||||
:style="'height:'+(imageH+10)+'rpx;'"
|
||||
@change="swiperChange"
|
||||
:class="{ scalex:isScale }"
|
||||
>
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<swiper-item :class="{ active: index == swiperCur,scalex:isScale }">
|
||||
<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
|
||||
<image :src="item.img" class="slide-image aa" :style="'height:'+ imageH +'rpx;'" mode="aspectFill"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<view class="dots">
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<view class="dot" :class="index == swiperCur ? ' active' : ''"></view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
||||
import { configMap } from '@/utils';
|
||||
export default {
|
||||
name: 'homeComb',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isScrolled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isScale: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isMenu: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
userInfo: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
computed: configMap({site_logo: ''}),
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: statusBarHeight,
|
||||
scrollHeight: 0,
|
||||
autoplay: true,
|
||||
interval: this.dataConfig.titleConfig.value * 1000 || 2500,
|
||||
duration: 500,
|
||||
marTop: 50,
|
||||
searchH: 0,
|
||||
logoConfig: this.dataConfig.logoConfig.url,
|
||||
hotWords: this.dataConfig.hotWords.list || [],
|
||||
tabClick: 0, //导航栏被点击
|
||||
isLeft: 0, //导航栏下划线位置
|
||||
isWidth: 0, //每个导航栏占位
|
||||
mainWidth: 0,
|
||||
tabLeft:0,
|
||||
swiperIndex:0,
|
||||
childIndex:0,
|
||||
childID:0,
|
||||
tabTitle:this.dataConfig.listConfig.list || [],
|
||||
fixedTop: 0,
|
||||
isTop: 0,
|
||||
navHeight: 38,
|
||||
indicatorDots: false,
|
||||
circular: true,
|
||||
autoplay: true,
|
||||
intervals: 3000,
|
||||
duration: 500,
|
||||
imgUrls: [], //图片轮播数据
|
||||
imageH: 0,
|
||||
swiperCur: 0,
|
||||
swiperType: 1,
|
||||
searchVal: this.dataConfig.hotWords && this.dataConfig.hotWords.list[0]['val'] || '',
|
||||
bgColor: this.dataConfig.swiperConfig.list && this.dataConfig.swiperConfig.list[0]['img'],
|
||||
tabId: false,
|
||||
isCategory: false,
|
||||
swiperTop: 0,
|
||||
isFixed: true,
|
||||
street: ''
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
imageH(nVal,oVal){
|
||||
this.imageH = nVal
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var that = this
|
||||
// 获取设备宽度
|
||||
uni.getSystemInfo({
|
||||
success(e) {
|
||||
that.mainWidth = e.windowWidth
|
||||
that.isWidth = (e.windowWidth-65) / 8
|
||||
}
|
||||
})
|
||||
setTimeout((e) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
if(that.tabTitle.length>0){
|
||||
query.select('.navTabBox').boundingClientRect(data => {
|
||||
that.navHeight = data.height > 42 ? data.height : 42
|
||||
}).exec();
|
||||
}else{
|
||||
that.navHeight = 0
|
||||
}
|
||||
// #ifdef H5
|
||||
query.select('.header').boundingClientRect(data => {
|
||||
that.isTop = data.height
|
||||
that.marTop = data.height
|
||||
}).exec();
|
||||
// #endif
|
||||
// #ifdef MP || APP-PLUS
|
||||
// #ifdef APP-PLUS
|
||||
const menuButton = 0
|
||||
//#endif
|
||||
// #ifdef MP
|
||||
const menuButton = uni.getMenuButtonBoundingClientRect();
|
||||
//#endif
|
||||
query
|
||||
.select('.serch-box')
|
||||
.boundingClientRect(data => {
|
||||
this.marTop = data.height
|
||||
}).exec();
|
||||
//#endif
|
||||
}, 500)
|
||||
that.isTop = (uni.getSystemInfoSync().statusBarHeight + this.marTop)
|
||||
that.imgUrls = that.dataConfig.swiperConfig.list
|
||||
that.$nextTick(function() {
|
||||
setTimeout((e) => {
|
||||
// #ifdef H5
|
||||
that.swiperTop = that.navHeight+that.marTop
|
||||
//#endif
|
||||
// #ifdef MP || APP-PLUS
|
||||
that.swiperTop = that.navHeight + uni.getSystemInfoSync().statusBarHeight + that.marTop
|
||||
//#endif
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
mounted(){
|
||||
let that = this;
|
||||
if(that.tabTitle.length>0 && that.tabTitle[0]['value'] != '推荐'){
|
||||
that.tabTitle.unshift({
|
||||
img: '',
|
||||
info: [{value: "推荐"},{value: false}]
|
||||
})
|
||||
}
|
||||
that.$nextTick(function() {
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.imgUrls[0].img),
|
||||
success: function(res) {
|
||||
if (res && res.height > 0) {
|
||||
let height = res.height * ((750-20) / res.width)
|
||||
that.$set(that, 'imageH', height);
|
||||
} else {
|
||||
that.$set(that, 'imageH', 375);
|
||||
}
|
||||
},
|
||||
fail: function(error) {
|
||||
that.$set(that, 'imageH', 375);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
goDetail(url){
|
||||
let urls = url.info[1].value
|
||||
this.$util.JumpPath(urls);
|
||||
},
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf("https://") > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
swiperChange(e) {
|
||||
let { current, source } = e.detail;
|
||||
if (source === 'autoplay' || source === 'touch') {
|
||||
this.swiperCur = e.detail.current;
|
||||
this.bgColor = this.imgUrls[e.detail.current]['img']
|
||||
}
|
||||
},
|
||||
textChange(e) {
|
||||
let { current, source } = e.detail;
|
||||
if (source === 'autoplay' || source === 'touch') {
|
||||
this.searchVal = this.hotWords[e.detail.current]['val']
|
||||
}
|
||||
},
|
||||
/**显示全部分类*/
|
||||
showCategory() {
|
||||
this.isCategory = true;
|
||||
},
|
||||
/*跳转为页面*/
|
||||
changeTab(item, index) {
|
||||
if(this.tabClick == index) return
|
||||
this.tabClick = index //设置导航点击了哪一个
|
||||
this.isLeft = index * this.isWidth + 16 //设置下划线位置
|
||||
this.tabId = item.info[1].value
|
||||
this.bgColor = this.tabId ? item.img : this.dataConfig.swiperConfig.list[0]['img']
|
||||
this.imgUrls = this.tabId ? [{img:item.img}] : this.dataConfig.swiperConfig.list
|
||||
this.$emit('changeDiy', this.tabId);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page_count {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
/* #ifdef MP || APP-PLUS */
|
||||
z-index: -1;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
z-index: 0;
|
||||
/* #endif */
|
||||
z-index: 0;
|
||||
filter: blur(0);
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(30rpx);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.my-main{
|
||||
// transition: background-color .5s ease;
|
||||
.location{
|
||||
padding: 10rpx 28rpx 0 28rpx;
|
||||
.town_name{
|
||||
color: #fff;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiperTxt {
|
||||
width: 300rpx;
|
||||
line-height: 64rpx;
|
||||
height: 64rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.swiperTxt .text {
|
||||
width: 480rpx;
|
||||
}
|
||||
.swiperTxt .text .newsTitle {
|
||||
width: 300rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.swiperTxt swiper {
|
||||
height: 100%;
|
||||
}
|
||||
.header {
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
.btn {
|
||||
position: relative;
|
||||
margin-left: 30rpx;
|
||||
.iconfont {
|
||||
font-size: 45rpx;
|
||||
}
|
||||
}
|
||||
.iconnum {
|
||||
min-width: 14rpx;
|
||||
color: #E93323;
|
||||
background: #fff;
|
||||
border-radius: 15rpx;
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: -10rpx;
|
||||
font-size: 10px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.serch-wrapper {
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx 20rpx 30rpx;
|
||||
.logo {
|
||||
width: 133rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
image {
|
||||
width: 133rpx;
|
||||
height: 66rpx;
|
||||
}
|
||||
.box{
|
||||
flex: 1;
|
||||
}
|
||||
.input,.uninput {
|
||||
line-height: 64rpx;
|
||||
height: 64rpx;
|
||||
padding: 0 0 0 30rpx;
|
||||
background: rgba(0,0,0,.2);
|
||||
color: #fff;
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 0;
|
||||
color: #eeeeee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mp-header {
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
.box{
|
||||
flex: 1;
|
||||
}
|
||||
.serch-box{
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.serch-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding: 0 50rpx 20rpx 30rpx;
|
||||
padding: 0 28rpx;
|
||||
height: 76rpx;
|
||||
.logo {
|
||||
width: 133rpx;
|
||||
margin-right: 20rpx;
|
||||
line-height: 0;
|
||||
}
|
||||
image {
|
||||
width: 118rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
.input,.uninput {
|
||||
display: flex;
|
||||
/* #ifdef MP */
|
||||
flex: 0;
|
||||
/* #endif */
|
||||
/* #ifdef APP-PLUS */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
padding: 0 50rpx 0 30rpx;
|
||||
background: rgba(0,0,0,.2);
|
||||
border-radius: 100rpx;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 0;
|
||||
color: #eeeeee;
|
||||
}
|
||||
}
|
||||
/* #ifdef MP */
|
||||
.uninput{
|
||||
max-width: 500rpx;
|
||||
}
|
||||
.input{
|
||||
max-width: 340rpx;
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
.tabNav {
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
.navTabBox {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
padding: 0 30rpx;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
scroll-view{
|
||||
width:100%;
|
||||
padding-right: 30rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
.click {
|
||||
color: white;
|
||||
}
|
||||
.longTab {
|
||||
.longItem{
|
||||
height: 50upx;
|
||||
display: inline-block;
|
||||
line-height: 50upx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
max-width: 160rpx;
|
||||
margin-right: 30rpx;
|
||||
position: relative;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
&.click{
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
&::after{
|
||||
content: '';
|
||||
transition: .5s;
|
||||
width: 33rpx;
|
||||
height: 4rpx;
|
||||
background: #FFFFFF;
|
||||
position: absolute;
|
||||
bottom: -4rpx;
|
||||
left: 50%;
|
||||
margin-left: -16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.scrolled{
|
||||
z-index: 5000;
|
||||
position: fixed;
|
||||
min-height: 90rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
// background: #fff!important;
|
||||
background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/23bd9202402271611232730.png');
|
||||
background-color: #f1f1f1; /* 设置背景色 */
|
||||
background-size: 100% 100%; /* 让背景图片铺满整个盒子 */
|
||||
background-repeat: no-repeat; /* 不重复 */
|
||||
transition: background-color .5s ease;
|
||||
.longItem,.click,.category text{
|
||||
color: #000000!important;
|
||||
}
|
||||
.navTabBox,.mp-header,.header{
|
||||
// transition: background-color .5s ease;
|
||||
// background: #ffffff;
|
||||
}
|
||||
.btn .iconfont{
|
||||
color: #333333!important;
|
||||
}
|
||||
.iconnum{
|
||||
background: #333333!important;
|
||||
}
|
||||
.underline{
|
||||
background: #000000!important;
|
||||
}
|
||||
.click{
|
||||
&::after{
|
||||
background-color:#fff!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiperBg {
|
||||
z-index: 1;
|
||||
margin-top: 10rpx;
|
||||
padding-bottom: 30rpx;
|
||||
.colorBg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 130rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.page_swiper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 10rpx;
|
||||
overflow-x: hidden;
|
||||
z-index: 8;
|
||||
padding: 0 10rpx;
|
||||
swiper-item{
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.swiper-item, image, .acea-row.row-between-wrapper {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
swiper{
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: auto;
|
||||
&.scalex{
|
||||
/deep/.uni-swiper-slide-frame{
|
||||
transform: translate(0,0)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
image {
|
||||
transform: scale(0.93);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
swiper-item.active, swiper-item.scalex{
|
||||
image {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
/*用来包裹所有的小圆点 */
|
||||
.dots {
|
||||
width: 156rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
left: 320rpx;
|
||||
bottom: 0;
|
||||
}
|
||||
/*未选中时的小圆点样式 */
|
||||
.dot {
|
||||
width: 16rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 6rpx;
|
||||
background-color: rgba(255,255,255,.4);
|
||||
/*选中以后的小圆点样式 */
|
||||
&.active {
|
||||
width: 32rpx;
|
||||
height: 6rpx;
|
||||
background-color: rgba(255,255,255,.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.dot0 .uni-swiper-dots-horizontal{
|
||||
left: 10%;
|
||||
}
|
||||
/deep/.dot1 .uni-swiper-dots-horizontal{
|
||||
left: 50%;
|
||||
}
|
||||
/deep/.dot2 .uni-swiper-dots-horizontal{
|
||||
left: 90%;
|
||||
}
|
||||
</style>
|
||||
1731
pages/index/index-backup.vue
Normal file
1731
pages/index/index-backup.vue
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1239
pages/order_addcart/order_addcart_backup.vue
Normal file
1239
pages/order_addcart/order_addcart_backup.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -768,7 +768,7 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 35rpx 0 0rpx;
|
||||
background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
|
||||
background-image: linear-gradient(to left, #72BE53 0%, #46B03A 100%);
|
||||
|
||||
&.svip-card {
|
||||
padding: 35rpx 0 120rpx;
|
||||
@ -1016,7 +1016,7 @@
|
||||
|
||||
.iconfont {
|
||||
font-size: 62rpx;
|
||||
color: var(--view-theme);
|
||||
color: #40AE36;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1112,7 +1112,7 @@
|
||||
|
||||
.order-status-num {
|
||||
background-color: #fff;
|
||||
color: var(--view-theme);
|
||||
color: #40AE36;
|
||||
border-radius: 200rpx;
|
||||
position: absolute;
|
||||
right: -12rpx;
|
||||
@ -1125,14 +1125,13 @@
|
||||
height: 30rpx;
|
||||
padding: 0 8rpx;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--view-theme);
|
||||
border: 1px solid #40AE36;
|
||||
}
|
||||
}
|
||||
|
||||
.sys-head {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
@ -1140,7 +1139,7 @@
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
|
||||
background-image: linear-gradient(to left, #72BE53 0%, #46B03A 100%);
|
||||
background-size: 100% auto;
|
||||
background-position: left bottom;
|
||||
}
|
||||
|
||||
@ -1201,13 +1201,13 @@
|
||||
if (item.valConfig.tabData == 0) {
|
||||
if (item.name == 'times') {
|
||||
item.value = dayjs(new Date(Number(new Date()
|
||||
.getTime()))).format('HH:mm');
|
||||
.getTime()))).format('HH:mm');
|
||||
} else if (item.name == 'dates') {
|
||||
item.value = dayjs(new Date(Number(new Date()
|
||||
.getTime()))).format('YYYY-MM-DD');
|
||||
.getTime()))).format('YYYY-MM-DD');
|
||||
} else {
|
||||
let current = dayjs(new Date(Number(new Date()
|
||||
.getTime()))).format('HH:mm');
|
||||
.getTime()))).format('HH:mm');
|
||||
item.value = current + ' - ' + current;
|
||||
}
|
||||
} else {
|
||||
@ -1918,7 +1918,7 @@
|
||||
}
|
||||
|
||||
.t-color {
|
||||
color: var(--view-theme);
|
||||
color: #40AE36;
|
||||
}
|
||||
|
||||
.order-submission .address .addressCon .setaddress {
|
||||
@ -2032,7 +2032,7 @@
|
||||
}
|
||||
|
||||
.order-submission .virtual_form .item-require {
|
||||
color: red;
|
||||
color: #40AE36;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
@ -2200,14 +2200,14 @@
|
||||
}
|
||||
|
||||
.order-submission .wrapper .item .list .payItem.on {
|
||||
border-color: var(--view-theme);
|
||||
color: var(--view-theme);
|
||||
border-color: #40AE36;
|
||||
color: #40AE36;
|
||||
}
|
||||
|
||||
.order-submission .wrapper .item .list .payItem .name {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border-right: 1px solid #eee;
|
||||
border-right: 1px solid #40AE36;
|
||||
justify-content: left;
|
||||
padding-left: 80rpx;
|
||||
}
|
||||
@ -2255,7 +2255,7 @@
|
||||
}
|
||||
|
||||
.order-submission .moneyList .item .money {
|
||||
color: #868686;
|
||||
color: #40AE36;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -2298,7 +2298,7 @@
|
||||
}
|
||||
|
||||
.pColor {
|
||||
color: var(--view-priceColor);
|
||||
color: #40AE36;
|
||||
}
|
||||
|
||||
.order-submission .footer .settlement {
|
||||
@ -2306,7 +2306,7 @@
|
||||
color: #fff;
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
background-color: var(--view-theme);
|
||||
background-color: #40AE36;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
@ -2422,7 +2422,7 @@
|
||||
|
||||
.price {
|
||||
margin-top: 20rpx;
|
||||
color: var(--view-priceColor);
|
||||
color: #40AE36;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
@ -2567,11 +2567,11 @@
|
||||
padding-right: 30rpx;
|
||||
padding-bottom: 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: #282828;
|
||||
color: #40AE36;
|
||||
|
||||
.price {
|
||||
margin-left: 10rpx;
|
||||
color: var(--view-priceColor);
|
||||
color: #40AE36;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
|
||||
@ -2630,11 +2630,11 @@
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: var(--view-theme);
|
||||
color: #40AE36;
|
||||
}
|
||||
|
||||
.map_text {
|
||||
color: var(--view-theme);
|
||||
color: #40AE36;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
317
pages/whole_sale/index.vue
Normal file
317
pages/whole_sale/index.vue
Normal file
@ -0,0 +1,317 @@
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #F8F9FA;
|
||||
}
|
||||
|
||||
.wholeSale {
|
||||
.wholeSale-header {
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #40AE36;
|
||||
|
||||
.scrollview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 98rpx;
|
||||
padding-left: 32rpx;
|
||||
|
||||
.scrollview-item {
|
||||
margin-right: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.scrollview-active {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: -6rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
height: 6rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wholeSale-con {
|
||||
margin: 0 30rpx;
|
||||
|
||||
.search_content {
|
||||
margin-bottom: 40rpx;
|
||||
height: 70rpx;
|
||||
padding: 2px 2px 2px 21.05rpx;
|
||||
border-radius: 80rpx;
|
||||
background: #EDEFF2;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
.search_content_wrap {
|
||||
width: 100%;
|
||||
|
||||
.icon-sousuo {
|
||||
font-size: 26.32rpx;
|
||||
font-weight: bold;
|
||||
color: #c8c7c6;
|
||||
margin-right: 17.54rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.search_btn {
|
||||
width: 106rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
background: #40AE36;
|
||||
border-radius: 100px;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 70rpx;
|
||||
|
||||
.category-wrap {
|
||||
display: flex;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 38rpx;
|
||||
|
||||
text {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.category-item-active {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: -6rpx;
|
||||
width: 100%;
|
||||
height: 6rpx;
|
||||
background-color: #40AE36;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cate {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.cate-wrap {
|
||||
display: flex;
|
||||
padding-bottom: 8rpx;
|
||||
|
||||
.cate-item {
|
||||
|
||||
text {
|
||||
padding: 4rpx 16rpx;
|
||||
white-space: nowrap;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.cate-item-active {
|
||||
text {
|
||||
color: #40AE36;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comprehensive {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 50rpx;
|
||||
|
||||
[class^=comprehensive-] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
margin-right: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.loudou {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="wholeSale">
|
||||
|
||||
<!-- 顶部 -->
|
||||
<view class="wholeSale-header">
|
||||
<!-- 适配不同机 -->
|
||||
<view style="height: var(--status-bar-height);"></view>
|
||||
|
||||
<!-- 滚动tab -->
|
||||
<scroll-view scroll-x="true" :scroll-top="100" :show-scrollbar="false" scroll-into-view="a1">
|
||||
<view class="scrollview">
|
||||
<block v-for="(item,indx) in tabsArr" :key="indx">
|
||||
<view class="scrollview-item" :id="'a' + indx"
|
||||
:class="{'scrollview-active':tabsCurr == item.val}" @click="tabsChange(item.val)">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 内容 -->
|
||||
<view class="wholeSale-con">
|
||||
<!-- 搜索 -->
|
||||
<navigator url="/pages/columnGoods/goods_search/index" hover-class="none"
|
||||
class="search_content flex_a_c_j_sb">
|
||||
<view class="flex_a_c search_content_wrap">
|
||||
<view class="iconfont icon-sousuo" style="font-size: 39rpx;"></view>
|
||||
<input type="text" placeholder="搜索您需要批发进货的产品名称" placeholder-style="font-size: 30rpx;color:#999;"
|
||||
disabled>
|
||||
</view>
|
||||
<button class="search_btn">搜索</button>
|
||||
</navigator>
|
||||
|
||||
<!-- 商品大分类 -->
|
||||
<view class="category">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="category-wrap">
|
||||
<block v-for="(item,index) in 10" :key="index">
|
||||
<view class="category-item category-item-active">
|
||||
<u-image width="108rpx" height="108rpx" shape="circle" :lazy-load="true">
|
||||
<template v-slot:loading>
|
||||
<u-loading-icon color="#999" size="15" />
|
||||
</template>
|
||||
</u-image>
|
||||
<text>水果蔬菜</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 商品小分类 -->
|
||||
<view class="cate">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="cate-wrap">
|
||||
<block v-for="(item,index) in 10" :key="index">
|
||||
<view class="cate-item" :class="{'cate-item-active':index == 0}">
|
||||
<text>水果</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 综合查询 -->
|
||||
<view class="comprehensive">
|
||||
<view class="comprehensive-price">
|
||||
<text>价格</text>
|
||||
<image src="../../static/new_define/priceChange.png"></image>
|
||||
</view>
|
||||
<view class="comprehensive-sales_num">
|
||||
<text>销量</text>
|
||||
</view>
|
||||
<view class="comprehensive-discount">
|
||||
<text>抵扣</text>
|
||||
<image class="loudou" src="../../static/new_define/loudou.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 流水瀑布 -->
|
||||
<WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
|
||||
export default {
|
||||
components: {
|
||||
WaterfallsFlow
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabsArr: [{
|
||||
name: '里海云仓批发',
|
||||
val: 1
|
||||
}, {
|
||||
name: '供销云市场批发',
|
||||
val: 2
|
||||
}, {
|
||||
name: '名优特产批发',
|
||||
val: 3
|
||||
}],
|
||||
tabsCurr: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabsChange(e) {
|
||||
this.tabsCurr = e;
|
||||
},
|
||||
goDetail(item) {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
if (this.isLogin) {
|
||||
initiateAssistApi(item.activity_id).then(res => {
|
||||
let id = res.data.product_assist_set_id;
|
||||
uni.hideLoading();
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/assist_detail/index?id=' + id
|
||||
});
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
})
|
||||
});
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 6.0 KiB |
BIN
static/images/组 21508@2x.png
Normal file
BIN
static/images/组 21508@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
static/new_define/loudou.png
Normal file
BIN
static/new_define/loudou.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 427 B |
BIN
static/new_define/priceChange.png
Normal file
BIN
static/new_define/priceChange.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 329 B |
Loading…
x
Reference in New Issue
Block a user