purchase-let/pages/index/index.vue

1262 lines
31 KiB
Vue
Raw Normal View History

2024-06-14 17:19:26 +08:00
<style lang="scss" scoped>
2024-06-22 20:26:36 +08:00
.share-btn {
display: flex;
align-items: center;
position: fixed;
width: 60rpx;
z-index: 20;
::v-deep.u-button {
border: 0;
border-color: transparent;
.u-icon__icon {
font-size: 60rpx !important;
color: #030303;
}
2024-06-14 17:19:26 +08:00
}
2024-06-14 16:31:41 +08:00
}
</style>
2024-04-25 18:02:30 +08:00
<template>
2024-06-03 18:25:34 +08:00
<view class="content">
<up-navbar placeholder style="z-index: 10080;">
<template #left>
2024-06-18 10:51:12 +08:00
<view class="store-info">
2024-06-12 10:04:00 +08:00
<view style="display: flex;font-size: 30rpx;font-weight: bold;">
2024-07-03 16:50:12 +08:00
<text v-if=" vipList.includes(userStore.userInfo.user_ship) || shareInfo.store_id"
2024-06-28 11:24:16 +08:00
style="max-width: 400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
2024-07-03 16:50:12 +08:00
<text v-if="vipList.includes(userStore.userInfo.user_ship)">
2024-06-28 11:24:16 +08:00
{{ (userStore.userInfo.real_name || userStore.userInfo.nickname) + '的供销个人门店' }}</text>
<text v-else>
{{(shareInfo.real_name || (userStore.userInfo.real_name || userStore.userInfo.nickname)) + '的供销个人门店' }}</text>
</text>
2024-06-17 20:47:54 +08:00
<text v-else
2024-06-22 19:58:02 +08:00
style="max-width: 400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{
STORE_INFO.store_name }}</text>
2024-06-12 10:04:00 +08:00
<up-icon name="arrow-right"></up-icon>
</view>
</view>
2024-06-03 18:25:34 +08:00
</template>
</up-navbar>
2024-06-22 19:58:02 +08:00
<view class="share-btn"
:style="{ height: btns.height + 'px', top: btns.top + 'px', left: (btns.left - 40) + 'px' }">
2024-06-14 17:19:26 +08:00
<up-button icon="share-square" openType="share" plain size="large" loadingSize="100" />
2024-06-14 16:31:41 +08:00
</view>
2024-06-03 18:25:34 +08:00
<view class="navbar">
<view style="width: 400rpx;">
<up-search placeholder="请输入商品" @search="searchKeyword" @clear="searchKeyword" v-model="keyword"
:showAction="false"></up-search>
</view>
2024-06-26 14:21:00 +08:00
<view class="nav-item" @click="navTo(`/pages/cart/cart`)">
2024-06-03 18:25:34 +08:00
<image src="@/static/tab/ba.png"></image>
<text>购物车</text>
</view>
<view class="nav-item" @click="navTo('/pagesOrder/order/order?type=0')">
<image src="@/static/tab/da.png"></image>
<text>我的订单</text>
2024-06-22 19:58:02 +08:00
<view class="badge" v-if="userStore.userInfo.no_writeoff">{{ userStore.userInfo.no_writeoff }}</view>
2024-06-03 18:25:34 +08:00
</view>
<view class="nav-item" @click="navTo('/pages/my/my')">
<image src="@/static/tab/ca.png"></image>
<text>个人中心</text>
</view>
</view>
2024-06-27 18:27:31 +08:00
<view class='headScoll' ref='headscroll' :style="{ height: isScroll ? '0' : '170rpx' }">
2024-06-03 18:25:34 +08:00
<scroll-view class="head-view" scroll-x @scrolltolower="getgoodClassList(0)">
<view class="list">
2024-06-22 19:58:02 +08:00
<view class="item" :class="{ 'item-active': topActive === item.id }"
2024-06-03 18:25:34 +08:00
v-for="(item, index) in goodClassList" :key="index" @click="changeOne(item, index)">
<view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image></view>
2024-06-22 19:58:02 +08:00
<view class="c-text u-line-1">{{ item.name }}</view>
2024-06-03 18:25:34 +08:00
</view>
<view class="item" style="width: 80rpx;height: 20rpx;">
</view>
</view>
</scroll-view>
2024-06-22 19:58:02 +08:00
<view class="r-btn" @click="show = 1">
2024-06-03 18:25:34 +08:00
<view></view>
<view></view>
<up-icon name="list"></up-icon>
</view>
</view>
2024-06-22 19:58:02 +08:00
<viewPopup nav v-if="show === 1" @close="show = 0">
2024-06-03 18:25:34 +08:00
<view class="cateOne">
<view class="head-title">全部分类</view>
<scroll-view scroll-y style="height: 600rpx;">
<view class="list">
2024-06-22 19:58:02 +08:00
<view class="item" :class="{ 'item-active': topActive === item.id }"
2024-06-03 18:25:34 +08:00
v-for="(item, index) in goodClassList" :key="index" @click="changeOne(item, index)">
<view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image>
</view>
2024-06-22 19:58:02 +08:00
<view class="c-text u-line-1">{{ item.name }}</view>
2024-06-03 18:25:34 +08:00
</view>
</view>
</scroll-view>
</view>
</viewPopup>
<view class="scroll-box">
<scroll-view class="left" scroll-y @scrolltolower="getgoodClassList(topActive)">
2024-06-22 19:58:02 +08:00
<view class="item u-line-1" :class="{ 'item-active': leftActive === item.id }"
v-for="(item, index) in goodClassTow" :key="index" @click="changeTwo(item, index)">{{ item.name }}
2024-06-03 18:25:34 +08:00
</view>
<view style="width: 100%;height: 450rpx;"></view>
</scroll-view>
<view class="right">
<view class="classify">
<scroll-view style="height: 90rpx;" scroll-x @scrolltolower="getgoodClassList(leftActive)">
<view class="classify-list">
2024-06-22 20:26:36 +08:00
<view class="classify-list-item u-line-1"
:class="{ 'item-active': rightActive === item.id }"
2024-06-03 18:25:34 +08:00
v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
2024-06-22 19:58:02 +08:00
{{ item.name }}
2024-06-03 18:25:34 +08:00
</view>
<view style="width: 70rpx;flex-shrink: 0;"></view>
</view>
</scroll-view>
2024-06-22 19:58:02 +08:00
<view class="done" @click="show = 2">
2024-06-03 18:25:34 +08:00
<up-icon name="arrow-down"></up-icon>
</view>
<view class="order-by">
2024-06-22 20:26:36 +08:00
<view class="item" :class="{ 'order-active': where.order == '' }" @click="changeOrder('')">综合
</view>
2024-06-25 16:07:40 +08:00
<view class="item" style="display: flex;align-items: center;"
:class="{ 'order-active': where.order == 'desc' || where.order == 'asc' }"
@click="changeOrder(where.order == 'asc' ? 'desc' : 'asc')">
价格
<view style="color: black;">
<up-icon name="arrow-up-fill" :color="where.order=='asc'?'#20b128':'' "
size="8"></up-icon>
<up-icon name="arrow-down-fill" :color="where.order=='desc'?'#20b128':'' "
size="8"></up-icon>
</view>
</view>
2024-06-22 19:58:02 +08:00
<view class="item" :class="{ 'order-active': where.order == 'sales' }"
@click="changeOrder('sales')">销量
</view>
2024-06-03 18:25:34 +08:00
</view>
</view>
2024-06-22 19:58:02 +08:00
<viewPopup v-if="show === 2" @close="show = 0">
2024-06-03 18:25:34 +08:00
<view class="cateOne">
<scroll-view scroll-y style="height: 230rpx;" @scrolltolower="getgoodClassList(leftActive)">
<view class="classify-list">
<view class="classify-list-item u-line-1"
2024-06-22 19:58:02 +08:00
:class="{ 'item-active': rightActive === item.id }"
2024-06-22 20:26:36 +08:00
v-for="(item, index) in goodClassThree" :key="index"
@click="changeThree(item, index)">
2024-06-22 19:58:02 +08:00
{{ item.name }}
2024-06-03 18:25:34 +08:00
</view>
</view>
</scroll-view>
</view>
</viewPopup>
2024-06-22 20:26:36 +08:00
<scroll-view class="list" id='drag_area' style="overscroll-behavior: none;" @scroll="hideHeadView"
scroll-y @scrolltolower="loadMoreGood">
<view class="shop-item" v-for="(item, index) in goodList" :key="item.id"
@click="openGoodPopup(item)">
2024-06-20 16:28:19 +08:00
<view class="shop-img"
2024-06-22 19:58:02 +08:00
:style="{ backgroundImage: `url(${item.image}?x-oss-process=image/format,webp)` }">
2024-06-03 18:25:34 +08:00
</view>
2024-06-25 16:58:51 +08:00
2024-06-03 18:25:34 +08:00
<view class="shop-content">
2024-06-25 17:07:20 +08:00
<view class="goods-name" style="font-size: 28rpx;color: #060606;">
2024-06-25 16:58:51 +08:00
{{ item.store_name }}
</view>
2024-06-25 18:07:52 +08:00
<view class="shop-content-li" v-if="priceKey.off_activity==1">
2024-07-05 18:18:02 +08:00
<view class="shop-content-li-l">
售价
2024-06-26 10:20:37 +08:00
</view>
2024-06-25 17:30:21 +08:00
<view class="shop-content-li-r" style="color:#FC452F ;"><text
2024-06-25 18:07:52 +08:00
style="font-size: 30rpx;">{{item[priceKey.price]}}</text>/{{ item.unit_name }}
2024-06-25 17:30:21 +08:00
</view>
2024-07-10 16:03:34 +08:00
<view class="tag" v-if="item.tag">
2024-06-26 10:20:37 +08:00
<view class="icon" />
2024-07-10 16:03:34 +08:00
{{item.tag}}
2024-06-25 17:30:21 +08:00
</view>
2024-06-25 16:58:51 +08:00
</view>
2024-07-10 16:03:34 +08:00
<view class="shop-content-li" style="color: #999999;" v-if="priceKey.off_activity==1">
2024-06-26 15:53:52 +08:00
<view class="shop-content-li-l">原价</view>
2024-06-26 10:20:37 +08:00
<view class="shop-content-li-r line-through">{{item[priceKey.op_price]}}</view>
2024-07-10 16:03:34 +08:00
</view>
2024-06-26 14:06:40 +08:00
<view class="shop-content-li" v-else>
2024-06-26 15:53:52 +08:00
<view class="shop-content-li-l">售价</view>
2024-06-26 14:06:40 +08:00
<view class="shop-content-li-r" style="color:#FC452F ;"><text
style="font-size: 28rpx;">{{item[priceKey.op_price]}}</text>
</view>
</view>
2024-06-26 18:55:10 +08:00
<view class="shop-content-li" style="justify-content: space-between;"
v-if="item.store_info">
2024-06-25 17:30:21 +08:00
<view style="display: flex;">
2024-06-26 15:53:52 +08:00
<view class="shop-content-li-l">规格</view>
2024-06-26 18:55:10 +08:00
<view class="shop-content-li-r">{{ item.store_info }}</view>
2024-06-25 17:30:21 +08:00
</view>
2024-06-26 18:55:10 +08:00
2024-06-25 16:58:51 +08:00
</view>
2024-06-26 10:20:37 +08:00
<view class="shop-content-li" style="justify-content: space-between;" v-if="item.batch">
<view style="display: flex;">
<view class="shop-content-li-l">起批量</view>
<view class="shop-content-li-r">{{ item.batch }}{{ item.unit_name }}起卖</view>
2024-06-22 20:26:36 +08:00
</view>
2024-06-26 18:55:10 +08:00
<!-- <view class="btn">
2024-06-03 18:25:34 +08:00
<u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
2024-06-26 18:55:10 +08:00
</view> -->
</view>
<view class="shopconetent-btn">
<u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
2024-06-03 18:25:34 +08:00
</view>
2024-06-26 10:20:37 +08:00
</view>
2024-06-03 18:25:34 +08:00
</view>
2024-06-20 11:53:55 +08:00
<view style="width: 100%;height: 470rpx;"></view>
2024-06-03 18:25:34 +08:00
</scroll-view>
</view>
</view>
<view class="fiexd-btn-box">
<view class="price-info">
<view class="row">
<view>合计</view>
2024-06-27 17:39:25 +08:00
<view class="price">¥<text style="font-size: 36rpx;">{{ cartInfo.pay_price }}</text></view>
2024-06-03 18:25:34 +08:00
</view>
2024-06-27 18:27:31 +08:00
<view style="font-size: 22rpx;color: #F55726;padding-left: 60rpx;"
v-if="cartInfo.msg&&cartInfo.total_price>0">
2024-06-25 13:44:10 +08:00
{{cartInfo.msg }}
</view>
2024-06-03 18:25:34 +08:00
</view>
<view class="btn">
2024-06-27 20:15:39 +08:00
<up-button color="#20b128" :disabled="cartInfo.pay_price<=0" @click="settleAccounts"> 支付</up-button>
2024-06-03 18:25:34 +08:00
</view>
2024-07-01 18:08:14 +08:00
<view class="cart" @tap.stop="navTo('/pages/cart/cart')" s>
2024-06-03 18:25:34 +08:00
<image src="@/static/icon/cart.png"></image>
2024-06-22 19:58:02 +08:00
<view class="badge">{{ cartInfo.count }}</view>
2024-06-03 18:25:34 +08:00
</view>
</view>
2024-07-10 16:03:34 +08:00
<goodPopup ref="goodRef" :priceKey='priceKey' :show="showGoodPopup" @close="showGoodPopup = false"
@change="changeGood" />
2024-06-26 14:06:40 +08:00
<u-overlay :show="showOverlay" @click="showOverlay = false">
<view class="warp">
<view class="rect" @tap.stop>
<view class="rect-tit">
温馨提示
</view>
<view class="rect-contetn">
2024-06-27 20:15:39 +08:00
只需再凑满 {{500- cartInfo.pay_price}} 即可享受采购金额10%的品牌礼品兑换券错过此次机会则无礼品券
2024-06-26 14:06:40 +08:00
</view>
<view class="rect-btn">
<view style="width: 236rpx;">
2024-06-27 20:15:39 +08:00
<up-button @click="abandActive">放弃礼品券</up-button>
2024-06-26 14:06:40 +08:00
</view>
<view style="width: 236rpx;">
<up-button color="#20b128" @click="showOverlay=false">继续采购</up-button>
</view>
</view>
</view>
</view>
</u-overlay>
2024-06-03 18:25:34 +08:00
</view>
2024-04-25 18:02:30 +08:00
</template>
<script setup>
2024-06-22 20:26:36 +08:00
import {
onLoad,
onShow,
onShareAppMessage,
} from "@dcloudio/uni-app"
import {
reactive,
ref,
onMounted,
} from "vue"
import {
goodListApi,
goodClassListApi
} from "@/api/good.js"
import {
cartCreateApi,
cartChangeApi,
cartListApi
} from "@/api/cart.js";
import {
productLogApi,
userInfoApi,
2024-06-24 15:03:11 +08:00
getStoreInfo,
loginUpdateUserApi
2024-06-22 20:26:36 +08:00
} from "@/api/user.js";
import viewPopup from "@/components/viewPopup.vue"
import goodPopup from "@/components/goodPopup.vue"
import useCartStore from "@/store/cart.js"
import {
getCurrentInstance
} from 'vue';
import {
shopDetailApi
} from "@/api/multipleShop.js";
import useUserStore from "@/store/user";
2024-07-11 16:46:19 +08:00
const vipList = reactive([1, 2, 3, 4, 5, 6, 7, 8])
2024-06-22 20:26:36 +08:00
const userStore = useUserStore();
const STORE_INFO = reactive({
2024-06-24 14:07:32 +08:00
id: '',
store_name: ""
2024-06-22 20:26:36 +08:00
})
2024-06-25 18:07:52 +08:00
const priceKey = reactive({
off_activity: "",
op_price: "",
price: ""
})
2024-06-22 20:26:36 +08:00
const getStoreInfoFn = () => {
if (uni.getStorageSync('STORE_INFO').length) {
let data = JSON.parse(uni.getStorageSync('STORE_INFO'))
for (let key in data) {
STORE_INFO[key] = data[key]
}
2024-06-18 11:17:39 +08:00
}
2024-06-22 20:26:36 +08:00
getStoreInfo().then(res => {
uni.setStorageSync("STORE_INFO", JSON.stringify(res.data));
let data = res.data;
for (let key in data) {
STORE_INFO[key] = data[key]
}
2024-06-25 18:24:35 +08:00
getgoodClassList(0);
getGoodList();
2024-06-22 20:26:36 +08:00
})
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
// 分享给好友
onShareAppMessage(() => {
let shareStr = '?id=' + STORE_INFO.id;
2024-07-03 16:50:12 +08:00
if (vipList.includes(userStore.userInfo.user_ship)) {
2024-06-22 20:26:36 +08:00
shareStr = shareStr + '&spread_uid=' + userStore.userInfo.id + '&real_name=' + (userStore.userInfo
.real_name || userStore.userInfo.nickname)
2024-06-15 18:41:12 +08:00
}
2024-06-22 20:26:36 +08:00
let shareInfo = {
title: (userStore.userInfo.real_name || userStore.userInfo.nickname) + '的供销个人门店',
path: '/pages/index/index' + shareStr,
imageUrl: STORE_INFO.image || '',
success() {
uni.$u.toast('分享成功');
},
fail() {
uni.$u.toast('分享失败');
}
};
return shareInfo;
2024-06-13 18:08:15 +08:00
})
2024-06-22 20:26:36 +08:00
/*商品列表滚动隐藏头部导航 */
const targetHeight = ref(0)
let scoHeight = 0
const isScroll = ref(false)
let lastScollTop = 0
const hideHeadView = (e) => {
if (e.detail.scrollTop < 100) return
if (e.detail.scrollTop <= 0 || e.detail.scrollTop > targetHeight.value)
return
isScroll.value = e.detail.scrollTop > lastScollTop
lastScollTop = e.detail.scrollTop
}
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
/*商品列表滚动隐藏头部导航结束 */
const cartStore = useCartStore();
const show = ref(0);
const topActive = ref(0);
const changeOne = async (item, index) => {
2024-06-27 17:39:25 +08:00
where.value.top_cate_id = item.id
delete where.value.two_cate_id // 删除二级分类的id, 因为切换一级分类时, 二级分类的id应该为空, 否则会获取到错误的商品列表数据
2024-06-22 20:26:36 +08:00
topActive.value = item.id;
show.value = 0;
goodClassTow.value = item?.children || [];
goodClassThree.value = goodClassTow.value[0]?.children || [];
leftActive.value = goodClassTow.value[0]?.id || '';
rightActive.value = goodClassThree.value[0]?.id || '';
getGoodList();
if (!item.isLoading && item.id) getgoodClassList(topActive.value, 2); // 判断是否加载过数据, 加载过则不进行加载,节约资源
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
const leftActive = ref(0);
const changeTwo = (item, index) => {
2024-06-27 17:39:25 +08:00
console.log(item)
where.value.two_cate_id = item.id
2024-06-22 20:26:36 +08:00
isScroll.value = false;
getWXDom(instance)
leftActive.value = item.id;
show.value = 0;
goodClassThree.value = item?.children || [];
rightActive.value = goodClassThree.value[0]?.id || '';
getGoodList();
if (!item.isLoading && item.id) getgoodClassList(leftActive.value, 3); // 判断是否加载过数据, 加载过则不进行加载,节约资源
}
const rightActive = ref(0);
const changeThree = (item, index) => {
rightActive.value = item.id;
show.value = 0;
getGoodList();
}
const addCart = (product_id, cart_num) => { //加入购物车
2024-07-02 14:04:26 +08:00
console.log("触发了加入购物车")
2024-06-22 20:26:36 +08:00
cartCreateApi({
2024-06-29 18:25:37 +08:00
type: 1,
2024-06-22 20:26:36 +08:00
cart_num: cart_num,
is_new: 0, // 是否直接购买0否1是
// goods_id: id,
store_id: STORE_INFO.id,
product_id: product_id
}).then(res => {
getCartList();
}).catch(err => {
uni.$u.toast(err.msg || '添加失败')
})
}
const keyword = ref('');
const searchKeyword = () => {
where.value.name = keyword.value;
where.value.store_name = keyword.value;
getGoodList();
}
const changeOrder = (order) => {
2024-06-25 16:07:40 +08:00
switch (order) {
case 'asc':
where.value.field = 'price'
break;
case 'desc':
where.value.field = 'price'
break;
case 'sales':
where.value.field = 'sales'
break;
default:
where.value.field = ''
}
2024-06-22 20:26:36 +08:00
where.value.order = order;
getGoodList();
}
const where = ref({
page_no: 1,
page_size: 15,
name: '',
order: '',
store_name: '',
2024-06-25 16:07:40 +08:00
store_id: '',
field: "",
2024-06-22 19:58:02 +08:00
})
2024-06-22 20:26:36 +08:00
const loading = ref(true);
const goodList = ref([]);
const getGoodList = (loadmore = false) => {
2024-06-26 14:06:40 +08:00
where.value.store_id = STORE_INFO.id; // 店铺id
2024-06-22 20:26:36 +08:00
loading.value = true;
let class_id = rightActive.value || leftActive.value || topActive.value || '';
let class_all = '';
// 若分类没有选中时,则直接查询上一级分类
if (rightActive.value == '') class_all = leftActive.value;
if (leftActive.value == '') class_all = topActive.value;
if (topActive.value == '') class_all = '';
if (class_all) class_id = ""; //只能带其中一个
if (loadmore) where.value.page_no++;
else where.value.page_no = 1;
2024-06-27 17:39:25 +08:00
let data = {
2024-06-22 20:26:36 +08:00
...where.value,
class_all: class_all,
class: class_id,
cate_id: class_id,
2024-06-27 17:39:25 +08:00
// top_cate_id: "",
// two_cate_id: ""
}
goodListApi(data).then(res => {
2024-06-25 18:07:52 +08:00
for (let key in res.data.extend) {
priceKey[key] = res.data.extend[key]
}
2024-06-26 14:21:00 +08:00
uni.setStorageSync("PRICE_KEY", JSON.stringify(priceKey))
2024-06-22 20:26:36 +08:00
if (loadmore) goodList.value.push(...res.data.lists);
else goodList.value = res.data.lists;
})
}
// 商品列表触底
const loadMoreGood = () => {
getWXDom(instance)
getGoodList(true);
}
const goodClassList = ref([]); // 一级分类
const goodClassTow = ref([]); // 二级分类
const goodClassThree = ref([]); // 三级分类
const classMap = new Map();
const getgoodClassList = (pid = 0, three = 1) => {
let page_no = classMap.get(pid) || 1;
goodClassListApi({
pid: pid,
page_no: page_no,
page_size: 30,
level: three,
2024-06-24 14:07:32 +08:00
store_id: STORE_INFO.id // 店铺id用于获取店铺分类列表如果为空则获取全部分类列表否则获取店铺分类列表。
2024-06-22 20:26:36 +08:00
}).then(res => {
if (pid == 0) { // 加载一级分类时设置全部分类
if (!res.data?.lists?.length) return;
res.data?.lists?.unshift({
2024-06-03 18:25:34 +08:00
id: "",
name: "全部",
2024-06-22 20:26:36 +08:00
pic: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png",
children: []
2024-06-03 18:25:34 +08:00
})
2024-06-22 20:26:36 +08:00
res.data.lists = res.data.lists.map(item => {
if (!item.children) item.children = [];
item.children?.unshift({
2024-06-03 18:25:34 +08:00
id: "",
2024-06-22 20:26:36 +08:00
pid: item.id, //子分类的全部选项其实就是它本身
2024-06-03 18:25:34 +08:00
name: "全部",
})
2024-06-22 20:26:36 +08:00
item.children = item.children.map(t => {
if (!t.children) t.children = [];
t.children?.unshift({
2024-06-03 18:25:34 +08:00
id: "",
2024-06-22 20:26:36 +08:00
pid: t.id,
2024-06-03 18:25:34 +08:00
name: "全部",
})
2024-06-22 20:26:36 +08:00
return t;
})
return item;
2024-06-03 18:25:34 +08:00
})
2024-06-22 20:26:36 +08:00
// 给所有子级分配
goodClassList.value = [...goodClassList.value, ...res.data?.lists];
goodClassTow.value = goodClassList.value[0]?.children || [];
goodClassThree.value = goodClassTow.value[0]?.children || [];
topActive.value = goodClassList.value[0]?.id;
leftActive.value = goodClassTow.value[0]?.id;
rightActive.value = goodClassThree.value[0]?.id;
2024-06-22 19:58:02 +08:00
} else {
2024-06-22 20:26:36 +08:00
let flag = 1;
goodClassList.value.forEach(item => { // 给相应的一级分类添加子菜单
if (item.id == pid) {
if (!item.children) {
item.children = [];
item.children.unshift({
id: "",
pid: item.id,
name: "全部",
})
}
item.children = [...item.children, ...res.data.lists];
item.isLoading = true;
goodClassTow.value = item.children;
flag = 0;
}
})
if (flag) goodClassTow.value.forEach(item => { //给响应的二级子分类添加菜单
if (item.id == pid) {
if (!item.children) {
item.children = [];
item.children.unshift({
id: "",
pid: item.id,
name: "全部",
})
}
item.children = [...item.children, ...res.data.lists];
item.isLoading = true;
goodClassThree.value = item.children;
}
2024-06-22 19:58:02 +08:00
})
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
page_no++;
classMap.set(pid, page_no);
})
}
2024-06-05 18:45:30 +08:00
2024-06-22 20:26:36 +08:00
const navTo = (url) => {
if (!userStore.token || !userStore.userInfo.mobile) return uni.showModal({
content: '您需要先登录才可使用该功能, 是否前去登录',
success: (e) => {
if (e.confirm) {
userStore.setToken('');
userStore.setUserInfo({});
uni.navigateTo({
url: '/pages/login/login'
})
} else {
userStore.setToken('');
userStore.setUserInfo({});
}
}
})
2024-06-27 20:15:39 +08:00
if (!url) return;
2024-06-22 20:26:36 +08:00
uni.navigateTo({
url: url
})
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
// 选择商品相关
const showGoodPopup = ref(false);
const goodRef = ref(null);
const goodData = ref({});
const openGoodPopup = (item) => { // 打开数量/重量弹窗
2024-06-27 20:15:39 +08:00
navTo(false)
if (!userStore.token || !userStore.userInfo.mobile) return;
2024-06-22 20:26:36 +08:00
goodData.value = item;
goodRef.value.setData(item);
showGoodPopup.value = true;
//统计商品的访问记录
productLogApi({
product_id: item.product_id,
cate_id: item.cate_id,
store_id: STORE_INFO.id
2024-06-22 19:58:02 +08:00
});
2024-06-22 20:26:36 +08:00
};
const changeGood = (data) => { // 确定选择商品重量
showGoodPopup.value = false;
2024-07-02 14:04:26 +08:00
if (!data.types) return
2024-06-22 20:26:36 +08:00
if (!userStore.token) return uni.showModal({
content: '您需要先登录才可使用该功能, 是否前去登录',
success: (e) => {
if (e.confirm) {
userStore.setToken('');
userStore.setUserInfo({});
uni.navigateTo({
url: '/pages/login/login'
})
} else {
userStore.setToken('');
userStore.setUserInfo({});
}
},
});
2024-07-02 14:04:26 +08:00
console.log('data', data)
2024-06-22 20:26:36 +08:00
addCart(data.product_id, data.cart_num);
2024-06-03 18:25:34 +08:00
}
2024-06-26 14:06:40 +08:00
2024-06-22 20:26:36 +08:00
// 结算
2024-06-26 14:06:40 +08:00
const showOverlay = ref(false); // 遮罩层显示状态
const abandActive = () => {
showOverlay.value = false
uni.navigateTo({
url: '/pagesOrder/settle/settle'
})
}
2024-06-22 20:26:36 +08:00
const settleAccounts = () => {
2024-06-26 14:06:40 +08:00
if (+cartInfo.value.pay_price < 500) return showOverlay.value = true;
2024-06-22 20:26:36 +08:00
uni.navigateTo({
url: '/pagesOrder/settle/settle'
})
}
// 购物车相关
const cartInfo = ref({
total_price: '0.00',
pay_price: 0,
2024-06-25 13:44:10 +08:00
count: 0,
msg: ''
2024-06-22 20:26:36 +08:00
})
const getCartList = (res) => {
cartListApi({
page_no: 1,
page_size: 100,
}).then(res => {
cartInfo.value = {
total_price: res.data?.extend?.total_price || '0.00',
pay_price: res.data?.extend?.pay_price || '0.00',
2024-06-25 13:44:10 +08:00
msg: res.data?.extend?.msg || '',
2024-06-22 20:26:36 +08:00
count: res.data?.count || 0
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
cartStore.setCartList(res.data?.lists.map(item => item.id))
})
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
// 胶囊布局
const btns = ref({
height: 0,
top: 0,
bottom: 0,
left: 0
});
2024-06-18 11:17:39 +08:00
2024-06-15 18:41:12 +08:00
2024-06-22 20:26:36 +08:00
// 分享信息
const shareInfo = ref({
uid: '',
real_name: '',
store_id: ''
});
const getShareInfo = () => {
if (uni.getStorageSync('SHARE_INFO')) {
shareInfo.value = (uni.getStorageSync('SHARE_INFO'))
}
}
getShareInfo()
onLoad(async (opt) => {
2024-07-03 16:50:12 +08:00
console.log('opt', opt)
2024-06-22 20:26:36 +08:00
if (opt.id) {
2024-06-24 14:07:32 +08:00
where.value.store_id = (opt.id == 'undefined' ? STORE_INFO.id : opt.id);
} else {
where.value.store_id = STORE_INFO.id
}
// 店铺id
if (opt.id && opt.id != 'undefined') {
2024-06-22 20:26:36 +08:00
where.value.store_id = opt.id;
const info = await shopDetailApi({
2024-06-24 14:07:32 +08:00
store_id: where.value.store_id
2024-06-22 20:26:36 +08:00
});
// 分享参数至当前用户参数
if (opt.spread_uid) {
shareInfo.value.uid = opt.spread_uid;
shareInfo.value.real_name = opt.real_name;
shareInfo.value.store_id = opt.id;
uni.setStorageSync('SHARE_INFO', shareInfo.value);
}
2024-06-13 18:08:15 +08:00
}
2024-06-25 18:24:35 +08:00
getStoreInfoFn()
2024-06-22 20:26:36 +08:00
// #ifndef H5
// 胶囊布局信息
btns.value = uni.getMenuButtonBoundingClientRect();
// #endif
})
2024-06-05 18:45:30 +08:00
2024-06-22 20:26:36 +08:00
onShow(() => {
// 如果后台变更核销人员权限 可以及时切换
if (userStore.token && userStore.userInfo.mobile) {
userInfoApi().then(res => {
const user = res.data;
userStore.setUserInfo(user);
2024-06-24 15:03:11 +08:00
if (!user.openid) loginUpdateUserApi({
mobile: user.mobile
})
2024-06-22 20:26:36 +08:00
if (user.is_staff == 1) {
uni.reLaunch({
url: "/multipleShop/verificationOrder/index"
})
} else {
getCartList();
}
});
2024-06-06 17:50:25 +08:00
}
2024-06-22 20:26:36 +08:00
});
2024-06-05 18:45:30 +08:00
2024-06-22 20:26:36 +08:00
let instance; // 获取组件实例
const getWXDom = () => {
let query = uni.createSelectorQuery().in(instance).select("#drag_area");
query.fields({
size: true,
scrollOffset: true,
},
(data) => {
scoHeight = data.scrollHeight
targetHeight.value = data.scrollHeight - data.height
}
).exec();
2024-06-20 11:53:55 +08:00
}
2024-06-22 20:26:36 +08:00
onMounted(() => {
instance = getCurrentInstance(); // 获取组件实例
setTimeout(() => {
getWXDom(instance)
}, 500)
})
</script>
2024-04-25 18:02:30 +08:00
2024-06-22 20:26:36 +08:00
<style lang="scss">
.content {
background-color: #fff;
}
.navbar {
padding: 0 20rpx;
2024-06-03 18:25:34 +08:00
display: flex;
align-items: center;
2024-06-22 20:26:36 +08:00
justify-content: space-between;
2024-06-03 18:25:34 +08:00
font-size: 22rpx;
2024-06-22 20:26:36 +08:00
color: #777;
margin-top: 40rpx;
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.nav-item {
2024-06-03 18:25:34 +08:00
display: flex;
flex-direction: column;
align-items: center;
2024-06-22 20:26:36 +08:00
justify-content: center;
position: relative;
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
image {
height: 40rpx;
width: 40rpx;
2024-06-03 18:25:34 +08:00
}
2024-06-22 19:48:52 +08:00
2024-06-22 20:26:36 +08:00
.badge {
position: absolute;
top: -10rpx;
2024-06-26 14:06:40 +08:00
right: 10rpx;
2024-06-22 20:26:36 +08:00
background-color: #FF0000;
color: #FFFFFF;
2024-06-26 14:06:40 +08:00
text-align: center;
width: 30rpx;
height: 30rpx;
border-radius: 30rpx;
2024-06-22 20:26:36 +08:00
font-size: 18rpx;
2024-06-22 19:58:02 +08:00
}
2024-06-03 18:25:34 +08:00
}
}
2024-06-22 20:26:36 +08:00
.head-view {
background-color: #fff;
height: 180rpx;
width: 750rpx;
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.list {
height: 100%;
2024-06-03 18:25:34 +08:00
display: flex;
align-items: center;
2024-06-22 20:26:36 +08:00
padding: 0 20rpx;
font-size: 22rpx;
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.item {
width: 120rpx;
2024-06-03 18:25:34 +08:00
flex-shrink: 0;
2024-06-22 20:26:36 +08:00
margin-right: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.c-img {
height: 100rpx;
width: 100rpx;
flex-shrink: 0;
border-radius: 50%;
border: 2px solid transparent;
overflow: hidden;
}
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.c-text {
width: 100%;
text-align: center;
box-sizing: border-box;
padding: 2rpx 4rpx 3rpx 4rpx;
border-radius: 50rpx;
margin-top: 5rpx;
}
2024-06-22 19:58:02 +08:00
}
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.item-active {
.c-img {
border: 2px solid #20b128;
}
.c-text {
background-color: #20b128;
color: #fff;
}
2024-06-03 18:25:34 +08:00
}
}
}
2024-06-22 20:26:36 +08:00
.r-btn {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 60rpx;
font-size: 24rpx;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
2024-06-03 18:25:34 +08:00
justify-content: center;
2024-06-22 20:26:36 +08:00
box-shadow: -10rpx 0 60rpx 1rpx rgba(0, 0, 0, 0.3);
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
.cateOne {
background-color: #fff;
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.head-title {
color: #666666;
font-size: 30rpx;
height: 80rpx;
line-height: 80rpx;
padding-left: 30rpx;
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
.list {
padding: 20rpx 20rpx;
font-size: 22rpx;
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-content: center;
grid-gap: 20rpx;
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.item {
width: 120rpx;
margin: 0 auto;
2024-06-03 18:25:34 +08:00
display: flex;
2024-06-22 20:26:36 +08:00
flex-direction: column;
align-items: center;
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.c-img {
height: 100rpx;
width: 100rpx;
2024-06-03 18:25:34 +08:00
flex-shrink: 0;
2024-06-22 20:26:36 +08:00
border-radius: 50%;
border: 2px solid transparent;
overflow: hidden;
}
.c-text {
width: 100%;
2024-06-03 18:25:34 +08:00
text-align: center;
2024-06-22 20:26:36 +08:00
box-sizing: border-box;
padding: 2rpx 4rpx 3rpx 4rpx;
border-radius: 50rpx;
margin-top: 5rpx;
}
}
.item-active {
.c-img {
border: 2px solid #20b128;
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
.c-text {
background-color: #20b128;
color: #fff;
2024-06-03 18:25:34 +08:00
}
}
2024-06-22 20:26:36 +08:00
}
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.classify-list {
padding: 20rpx 30rpx;
font-size: 22rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
grid-gap: 20rpx;
.classify-list-item {
flex-shrink: 0;
text-align: center;
width: 150rpx;
height: 42rpx;
line-height: 42rpx;
background: #F6F6F6;
border-radius: 22rpx 22rpx 22rpx 22rpx;
border: 1rpx solid transparent;
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
.item-active {
border: 1rpx solid #20b128;
color: #20b128;
background-color: rgba(#20b128, 0.1);
}
}
}
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.scroll-box {
// background-color: red;
display: flex;
.left {
height: calc(100vh - var(--window-top) - var(--window-bottom) - 300rpx);
/* #ifdef H5 */
height: calc(100vh - 44px - 100rpx);
/* #endif */
width: 170rpx;
box-sizing: border-box;
background-color: #f6f6f6;
font-size: 24rpx;
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.item {
height: 96rpx;
line-height: 96rpx;
text-align: center;
}
.item-active {
background-color: #fff;
position: relative;
color: #20b128;
&::before {
content: '';
background-color: #20b128;
width: 6rpx;
height: 48rpx;
border-radius: 10rpx;
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
2024-06-03 18:25:34 +08:00
}
}
}
2024-06-22 20:26:36 +08:00
.right {
height: calc(100vh - var(--window-top) - 300rpx);
2024-06-03 18:25:34 +08:00
/* #ifdef H5 */
2024-06-22 20:26:36 +08:00
height: calc(100vh - 96px + 20rpx);
2024-06-22 19:58:02 +08:00
/* #endif */
2024-06-22 20:26:36 +08:00
width: 580rpx;
box-sizing: border-box;
position: relative;
overflow: hidden;
.classify {
height: 150rpx;
2024-06-22 19:58:02 +08:00
background-color: #fff;
2024-06-22 20:26:36 +08:00
border-bottom: 1rpx solid #f6f6f6;
position: relative;
font-size: 24rpx;
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.classify-list {
display: flex;
padding: 20rpx;
.classify-list-item {
flex-shrink: 0;
text-align: center;
width: 108rpx;
height: 42rpx;
line-height: 42rpx;
background: #F6F6F6;
border-radius: 22rpx 22rpx 22rpx 22rpx;
margin-right: 20rpx;
border: 1rpx solid transparent;
}
.item-active {
border: 1rpx solid #20b128;
color: #20b128;
background-color: rgba(#20b128, 0.1);
}
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
.done {
height: 90rpx;
width: 60rpx;
position: absolute;
top: 0;
right: 0;
2024-06-03 18:25:34 +08:00
display: flex;
2024-06-22 20:26:36 +08:00
justify-content: center;
align-items: center;
background-color: #fff;
}
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.order-by {
display: flex;
justify-content: flex-end;
align-items: center;
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
.item {
padding-right: 20rpx;
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
.order-active {
color: #20b128;
}
}
}
.list {
height: calc(100vh - var(--window-top) - 400rpx);
/* #ifdef H5 */
height: calc(100vh - 44px - 200rpx);
/* #endif */
.shop-item {
padding: 20rpx;
border-bottom: 1rpx solid #f6f6f6;
background-color: #fff;
display: flex;
.shop-img {
2024-06-25 13:44:10 +08:00
height: 164rpx;
width: 164rpx;
2024-06-22 20:26:36 +08:00
margin-right: 20rpx;
border-radius: 14rpx;
overflow: hidden;
background-size: 100% 100%;
// background-image: url();
2024-06-03 18:25:34 +08:00
}
2024-06-22 20:26:36 +08:00
.shop-content {
width: 380rpx;
2024-06-03 18:25:34 +08:00
display: flex;
2024-06-22 20:26:36 +08:00
flex-direction: column;
2024-06-26 18:55:10 +08:00
justify-content: space-around;
position: relative;
2024-06-03 18:25:34 +08:00
2024-06-25 17:07:20 +08:00
.shop-content-li {
2024-06-25 16:58:51 +08:00
font-size: 22rpx;
color: #333333;
2024-06-25 17:07:20 +08:00
display: flex;
2024-06-25 17:30:21 +08:00
align-items: center;
2024-06-26 10:20:37 +08:00
vertical-align: middle;
.line-through {
text-decoration: line-through;
}
2024-06-25 17:07:20 +08:00
.shop-content-li-l {
font-size: 22rpx;
2024-06-26 10:20:37 +08:00
width: 70rpx;
2024-06-26 15:53:52 +08:00
text-align-last: justify;
margin-right: 6rpx;
2024-06-26 10:20:37 +08:00
2024-06-25 17:07:20 +08:00
}
2024-06-22 20:26:36 +08:00
}
2024-06-25 17:30:21 +08:00
.tag {
2024-06-26 15:53:52 +08:00
font-size: 16rpx;
2024-06-25 17:30:21 +08:00
color: #A17C3A;
background-color: #F3E7C0;
padding: 8rpx 4rpx;
2024-06-26 10:20:37 +08:00
margin-left: 4rpx;
display: flex;
align-items: center;
2024-06-25 17:30:21 +08:00
}
2024-06-26 18:55:10 +08:00
.shopconetent-btn {
position: absolute;
bottom: 0;
right: 0;
}
2024-06-26 10:20:37 +08:00
// .icon {
// background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/3b653202406260957228679.png');
// width: 17rpx;
// height: 14rpx;
// background-size: 100% 100%;
// margin: 5rpx;
// }
2024-06-22 20:26:36 +08:00
2024-06-03 18:25:34 +08:00
}
}
}
}
}
2024-06-22 20:26:36 +08:00
.fiexd-btn-box {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
height: 140rpx;
height: calc(constant(safe-area-inset-bottom) + 140rpx);
/* 适用于iOS设备 */
height: calc(env(safe-area-inset-bottom) + 140rpx);
/* 适用于Android设备 */
padding-top: 40rpx;
.price-info {
.row {
display: flex;
font-size: 26rpx;
align-items: center;
2024-06-03 18:25:34 +08:00
2024-06-22 20:26:36 +08:00
&>view {
margin-right: 15rpx;
}
.price {
color: #F55726;
}
2024-06-03 18:25:34 +08:00
}
}
2024-06-22 19:58:02 +08:00
2024-06-22 20:26:36 +08:00
.btn {
width: 200rpx;
2024-06-22 19:58:02 +08:00
}
2024-06-22 20:26:36 +08:00
.cart {
2024-06-22 19:58:02 +08:00
position: absolute;
2024-06-22 20:26:36 +08:00
top: -40rpx;
left: 40rpx;
image {
width: 80rpx;
height: 80rpx;
}
.badge {
position: absolute;
top: 0;
right: 0;
background-color: #F55726;
color: #fff;
border-radius: 50%;
width: 26rpx;
height: 26rpx;
text-align: center;
line-height: 26rpx;
font-size: 18rpx;
}
2024-06-22 19:58:02 +08:00
}
2024-06-08 22:50:09 +08:00
}
2024-06-22 20:26:36 +08:00
.headScoll {
position: relative;
overflow: hidden;
transition: 400ms;
}
.store-info {
margin: 0 0 20rpx 20rpx;
margin-top: 20rpx;
}
2024-06-26 14:06:40 +08:00
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 630rpx;
height: 440rpx;
background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/9c70c202406261048431851.png');
background-size: 100% 100%;
box-sizing: border-box;
text-align: center;
// padding: 30rpx;
padding: 50rpx 32rpx;
.rect-tit {
text-align: center;
font-size: 32rpx;
color: #333333;
margin-bottom: 60rpx;
}
.rect-contetn {
font-size: 30rpx;
color: #333333;
}
.rect-btn {
display: flex;
margin-top: 50rpx;
justify-content: space-around;
}
}
2024-04-25 18:02:30 +08:00
</style>