add
This commit is contained in:
parent
0a8c7b0504
commit
a75f9284f8
|
|
@ -1,5 +1,5 @@
|
|||
<style lang="scss" scoped>
|
||||
.share-btn {
|
||||
.share-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
color: #030303;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="content">
|
||||
|
|
@ -103,7 +103,8 @@
|
|||
<view class="classify">
|
||||
<scroll-view style="height: 90rpx;" scroll-x @scrolltolower="getgoodClassList(leftActive)">
|
||||
<view class="classify-list">
|
||||
<view class="classify-list-item u-line-1" :class="{ 'item-active': rightActive === item.id }"
|
||||
<view class="classify-list-item u-line-1"
|
||||
:class="{ 'item-active': rightActive === item.id }"
|
||||
v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
|
|
@ -114,7 +115,8 @@
|
|||
<up-icon name="arrow-down"></up-icon>
|
||||
</view>
|
||||
<view class="order-by">
|
||||
<view class="item" :class="{ 'order-active': where.order == '' }" @click="changeOrder('')">综合</view>
|
||||
<view class="item" :class="{ 'order-active': where.order == '' }" @click="changeOrder('')">综合
|
||||
</view>
|
||||
<view class="item" :class="{ 'order-active': where.order == 'desc' || where.order == 'asc' }"
|
||||
@click="changeOrder(where.order == 'asc' ? 'desc' : 'asc')">价格</view>
|
||||
<view class="item" :class="{ 'order-active': where.order == 'sales' }"
|
||||
|
|
@ -128,16 +130,18 @@
|
|||
<view class="classify-list">
|
||||
<view class="classify-list-item u-line-1"
|
||||
:class="{ 'item-active': rightActive === item.id }"
|
||||
v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
|
||||
v-for="(item, index) in goodClassThree" :key="index"
|
||||
@click="changeThree(item, index)">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</viewPopup>
|
||||
<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)">
|
||||
<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)">
|
||||
<view class="shop-img"
|
||||
:style="{ backgroundImage: `url(${item.image}?x-oss-process=image/format,webp)` }">
|
||||
</view>
|
||||
|
|
@ -158,7 +162,13 @@
|
|||
<text class='price' style="font-size: 24rpx;">/{{ item.unit_name }}</text>
|
||||
</view>
|
||||
<view class="price-btn">
|
||||
<view class="price" style="font-size: 24rpx;">￥{{ item.price }}/{{ item.unit_name }}</view>
|
||||
<view class="price" style="font-size: 24rpx;"
|
||||
v-if='userStore?.userInfo?.user_ship == 1'>
|
||||
￥{{ item.price }}/{{ item.unit_name }}
|
||||
</view>
|
||||
<view class="price" v-else>
|
||||
￥{{ item.price }}/{{ item.unit_name }}
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
|
||||
</view>
|
||||
|
|
@ -173,7 +183,12 @@
|
|||
<view class="price-info">
|
||||
<view class="row">
|
||||
<view>合计</view>
|
||||
<view class="price">¥<text style="font-size: 36rpx;">{{ cartInfo.total_price }}</text></view>
|
||||
<view class="price" v-if='cartInfo.pay_price<=0||userStore?.userInfo?.user_ship !=4'>¥<text
|
||||
style="font-size: 36rpx;">{{ cartInfo.total_price }}</text></view>
|
||||
<view class="price" v-else>¥<text style="font-size: 30rpx;">{{ cartInfo.total_price }}</text></view>
|
||||
<view class="price" v-if="cartInfo.pay_price>0 &&userStore?.userInfo?.user_ship == 4"><text
|
||||
style="font-size: 36rpx;">优惠后
|
||||
{{ cartInfo.pay_price }}</text></view>
|
||||
</view>
|
||||
<!-- <view class="row">
|
||||
<view style="color: #777;">原价 ¥50.00</view>
|
||||
|
|
@ -195,48 +210,48 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
onLoad,
|
||||
onShow,
|
||||
onShareAppMessage,
|
||||
} from "@dcloudio/uni-app"
|
||||
import {
|
||||
} from "@dcloudio/uni-app"
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
onMounted,
|
||||
} from "vue"
|
||||
import {
|
||||
} from "vue"
|
||||
import {
|
||||
goodListApi,
|
||||
goodClassListApi
|
||||
} from "@/api/good.js"
|
||||
import {
|
||||
} from "@/api/good.js"
|
||||
import {
|
||||
cartCreateApi,
|
||||
cartChangeApi,
|
||||
cartListApi
|
||||
} from "@/api/cart.js";
|
||||
import {
|
||||
} from "@/api/cart.js";
|
||||
import {
|
||||
productLogApi,
|
||||
userInfoApi,
|
||||
getStoreInfo
|
||||
} from "@/api/user.js";
|
||||
import viewPopup from "@/components/viewPopup.vue"
|
||||
import goodPopup from "@/components/goodPopup.vue"
|
||||
import useCartStore from "@/store/cart.js"
|
||||
import {
|
||||
} 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 {
|
||||
} from 'vue';
|
||||
import {
|
||||
shopDetailApi
|
||||
} from "@/api/multipleShop.js";
|
||||
} from "@/api/multipleShop.js";
|
||||
|
||||
import useUserStore from "@/store/user";
|
||||
const userStore = useUserStore();
|
||||
const STORE_INFO = reactive({
|
||||
id: 4,
|
||||
import useUserStore from "@/store/user";
|
||||
const userStore = useUserStore();
|
||||
const STORE_INFO = reactive({
|
||||
id: 23,
|
||||
store_name: "农(特)产品直营店"
|
||||
})
|
||||
})
|
||||
|
||||
const getStoreInfoFn = () => {
|
||||
const getStoreInfoFn = () => {
|
||||
if (uni.getStorageSync('STORE_INFO').length) {
|
||||
let data = JSON.parse(uni.getStorageSync('STORE_INFO'))
|
||||
for (let key in data) {
|
||||
|
|
@ -250,12 +265,12 @@ const getStoreInfoFn = () => {
|
|||
STORE_INFO[key] = data[key]
|
||||
}
|
||||
})
|
||||
}
|
||||
getStoreInfoFn()
|
||||
}
|
||||
getStoreInfoFn()
|
||||
|
||||
|
||||
// 分享给好友
|
||||
onShareAppMessage(() => {
|
||||
// 分享给好友
|
||||
onShareAppMessage(() => {
|
||||
let shareStr = '?id=' + STORE_INFO.id;
|
||||
if (userStore.userInfo.user_ship == 1) {
|
||||
shareStr = shareStr + '&spread_uid=' + userStore.userInfo.id + '&real_name=' + (userStore.userInfo
|
||||
|
|
@ -273,26 +288,26 @@ onShareAppMessage(() => {
|
|||
}
|
||||
};
|
||||
return shareInfo;
|
||||
})
|
||||
})
|
||||
|
||||
/*商品列表滚动隐藏头部导航 */
|
||||
const targetHeight = ref(0)
|
||||
let scoHeight = 0
|
||||
const isScroll = ref(false)
|
||||
let lastScollTop = 0
|
||||
const hideHeadView = (e) => {
|
||||
/*商品列表滚动隐藏头部导航 */
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
/*商品列表滚动隐藏头部导航结束 */
|
||||
const cartStore = useCartStore();
|
||||
const show = ref(0);
|
||||
const topActive = ref(0);
|
||||
const changeOne = async (item, index) => {
|
||||
/*商品列表滚动隐藏头部导航结束 */
|
||||
const cartStore = useCartStore();
|
||||
const show = ref(0);
|
||||
const topActive = ref(0);
|
||||
const changeOne = async (item, index) => {
|
||||
topActive.value = item.id;
|
||||
show.value = 0;
|
||||
goodClassTow.value = item?.children || [];
|
||||
|
|
@ -301,10 +316,10 @@ const changeOne = async (item, index) => {
|
|||
rightActive.value = goodClassThree.value[0]?.id || '';
|
||||
getGoodList();
|
||||
if (!item.isLoading && item.id) getgoodClassList(topActive.value, 2); // 判断是否加载过数据, 加载过则不进行加载,节约资源
|
||||
}
|
||||
}
|
||||
|
||||
const leftActive = ref(0);
|
||||
const changeTwo = (item, index) => {
|
||||
const leftActive = ref(0);
|
||||
const changeTwo = (item, index) => {
|
||||
isScroll.value = false;
|
||||
getWXDom(instance)
|
||||
leftActive.value = item.id;
|
||||
|
|
@ -313,16 +328,16 @@ const changeTwo = (item, index) => {
|
|||
rightActive.value = goodClassThree.value[0]?.id || '';
|
||||
getGoodList();
|
||||
if (!item.isLoading && item.id) getgoodClassList(leftActive.value, 3); // 判断是否加载过数据, 加载过则不进行加载,节约资源
|
||||
}
|
||||
}
|
||||
|
||||
const rightActive = ref(0);
|
||||
const changeThree = (item, index) => {
|
||||
const rightActive = ref(0);
|
||||
const changeThree = (item, index) => {
|
||||
rightActive.value = item.id;
|
||||
show.value = 0;
|
||||
getGoodList();
|
||||
}
|
||||
}
|
||||
|
||||
const addCart = (product_id, cart_num) => { //加入购物车
|
||||
const addCart = (product_id, cart_num) => { //加入购物车
|
||||
cartCreateApi({
|
||||
cart_num: cart_num,
|
||||
is_new: 0, // 是否直接购买0否1是
|
||||
|
|
@ -334,33 +349,33 @@ const addCart = (product_id, cart_num) => { //加入购物车
|
|||
}).catch(err => {
|
||||
uni.$u.toast(err.msg || '添加失败')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const keyword = ref('');
|
||||
const keyword = ref('');
|
||||
|
||||
const searchKeyword = () => {
|
||||
const searchKeyword = () => {
|
||||
where.value.name = keyword.value;
|
||||
where.value.store_name = keyword.value;
|
||||
getGoodList();
|
||||
}
|
||||
}
|
||||
|
||||
const changeOrder = (order) => {
|
||||
const changeOrder = (order) => {
|
||||
where.value.order = order;
|
||||
getGoodList();
|
||||
}
|
||||
}
|
||||
|
||||
const where = ref({
|
||||
const where = ref({
|
||||
page_no: 1,
|
||||
page_size: 15,
|
||||
name: '',
|
||||
order: '',
|
||||
store_name: '',
|
||||
store_id: STORE_INFO.id
|
||||
})
|
||||
})
|
||||
|
||||
const loading = ref(true);
|
||||
const goodList = ref([]);
|
||||
const getGoodList = (loadmore = false) => {
|
||||
const loading = ref(true);
|
||||
const goodList = ref([]);
|
||||
const getGoodList = (loadmore = false) => {
|
||||
loading.value = true;
|
||||
let class_id = rightActive.value || leftActive.value || topActive.value || '';
|
||||
let class_all = '';
|
||||
|
|
@ -385,20 +400,20 @@ const getGoodList = (loadmore = false) => {
|
|||
// STORE_INFO.value.detailed_address = res.data.store.detailed_address;
|
||||
// }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表触底
|
||||
const loadMoreGood = () => {
|
||||
// 商品列表触底
|
||||
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) => {
|
||||
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,
|
||||
|
|
@ -477,9 +492,9 @@ const getgoodClassList = (pid = 0, three = 1) => {
|
|||
page_no++;
|
||||
classMap.set(pid, page_no);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const navTo = (url) => {
|
||||
const navTo = (url) => {
|
||||
if (!userStore.token || !userStore.userInfo.mobile) return uni.showModal({
|
||||
content: '您需要先登录才可使用该功能, 是否前去登录',
|
||||
success: (e) => {
|
||||
|
|
@ -498,13 +513,13 @@ const navTo = (url) => {
|
|||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 选择商品相关
|
||||
const showGoodPopup = ref(false);
|
||||
const goodRef = ref(null);
|
||||
const goodData = ref({});
|
||||
const openGoodPopup = (item) => { // 打开数量/重量弹窗
|
||||
// 选择商品相关
|
||||
const showGoodPopup = ref(false);
|
||||
const goodRef = ref(null);
|
||||
const goodData = ref({});
|
||||
const openGoodPopup = (item) => { // 打开数量/重量弹窗
|
||||
goodData.value = item;
|
||||
goodRef.value.setData(item);
|
||||
showGoodPopup.value = true;
|
||||
|
|
@ -515,8 +530,8 @@ const openGoodPopup = (item) => { // 打开数量/重量弹窗
|
|||
cate_id: item.cate_id,
|
||||
store_id: STORE_INFO.id
|
||||
});
|
||||
};
|
||||
const changeGood = (data) => { // 确定选择商品重量
|
||||
};
|
||||
const changeGood = (data) => { // 确定选择商品重量
|
||||
showGoodPopup.value = false;
|
||||
if (!userStore.token) return uni.showModal({
|
||||
content: '您需要先登录才可使用该功能, 是否前去登录',
|
||||
|
|
@ -535,56 +550,58 @@ const changeGood = (data) => { // 确定选择商品重量
|
|||
});
|
||||
|
||||
addCart(data.product_id, data.cart_num);
|
||||
}
|
||||
// 结算
|
||||
const settleAccounts = () => {
|
||||
}
|
||||
// 结算
|
||||
const settleAccounts = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pagesOrder/settle/settle'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 购物车相关
|
||||
const cartInfo = ref({
|
||||
// 购物车相关
|
||||
const cartInfo = ref({
|
||||
total_price: '0.00',
|
||||
pay_price: 0,
|
||||
count: 0
|
||||
})
|
||||
const getCartList = (res) => {
|
||||
})
|
||||
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',
|
||||
count: res.data?.count || 0
|
||||
}
|
||||
cartStore.setCartList(res.data?.lists.map(item => item.id))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 胶囊布局
|
||||
const btns = ref({
|
||||
// 胶囊布局
|
||||
const btns = ref({
|
||||
height: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// 分享信息
|
||||
const shareInfo = ref({
|
||||
// 分享信息
|
||||
const shareInfo = ref({
|
||||
uid: '',
|
||||
real_name: '',
|
||||
store_id: ''
|
||||
});
|
||||
});
|
||||
|
||||
const getShareInfo = () => {
|
||||
const getShareInfo = () => {
|
||||
if (uni.getStorageSync('SHARE_INFO')) {
|
||||
shareInfo.value = (uni.getStorageSync('SHARE_INFO'))
|
||||
}
|
||||
}
|
||||
getShareInfo()
|
||||
}
|
||||
getShareInfo()
|
||||
|
||||
onLoad(async (opt) => {
|
||||
onLoad(async (opt) => {
|
||||
where.value.store_id = opt.id || STORE_INFO.id;
|
||||
// 店铺id
|
||||
if (opt.id) {
|
||||
|
|
@ -606,9 +623,9 @@ onLoad(async (opt) => {
|
|||
// 胶囊布局信息
|
||||
btns.value = uni.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
})
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
onShow(() => {
|
||||
// 如果后台变更核销人员权限 可以及时切换
|
||||
if (userStore.token && userStore.userInfo.mobile) {
|
||||
userInfoApi().then(res => {
|
||||
|
|
@ -623,11 +640,11 @@ onShow(() => {
|
|||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
let instance; // 获取组件实例
|
||||
const getWXDom = () => {
|
||||
let instance; // 获取组件实例
|
||||
const getWXDom = () => {
|
||||
let query = uni.createSelectorQuery().in(instance).select("#drag_area");
|
||||
query.fields({
|
||||
size: true,
|
||||
|
|
@ -638,22 +655,22 @@ const getWXDom = () => {
|
|||
targetHeight.value = data.scrollHeight - data.height
|
||||
}
|
||||
).exec();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
instance = getCurrentInstance(); // 获取组件实例
|
||||
setTimeout(() => {
|
||||
getWXDom(instance)
|
||||
}, 500)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
.content {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.navbar {
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -686,9 +703,9 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head-view {
|
||||
.head-view {
|
||||
background-color: #fff;
|
||||
height: 180rpx;
|
||||
width: 750rpx;
|
||||
|
|
@ -738,9 +755,9 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.r-btn {
|
||||
.r-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
|
@ -753,9 +770,9 @@ onMounted(() => {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: -10rpx 0 60rpx 1rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.cateOne {
|
||||
.cateOne {
|
||||
background-color: #fff;
|
||||
|
||||
.head-title {
|
||||
|
|
@ -838,9 +855,9 @@ onMounted(() => {
|
|||
background-color: rgba(#20b128, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-box {
|
||||
.scroll-box {
|
||||
// background-color: red;
|
||||
display: flex;
|
||||
|
||||
|
|
@ -1010,9 +1027,9 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fiexd-btn-box {
|
||||
.fiexd-btn-box {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
height: 140rpx;
|
||||
height: calc(constant(safe-area-inset-bottom) + 140rpx);
|
||||
|
|
@ -1065,16 +1082,16 @@ onMounted(() => {
|
|||
font-size: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.headScoll {
|
||||
.headScoll {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: 400ms;
|
||||
}
|
||||
}
|
||||
|
||||
.store-info {
|
||||
.store-info {
|
||||
margin: 0 0 20rpx 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,8 +9,7 @@
|
|||
@click="callPhone(shopInfo.phone)">
|
||||
<view class="top" style="align-items: flex-start;">
|
||||
<view style="color: #333;display: flex;align-items: center;flex-shrink: 0;">
|
||||
<up-icon name="map"></up-icon>
|
||||
<text style="margin: 0 10rpx;">自提点</text>
|
||||
<text style="margin: 0 10rpx;color:#20B128">推荐自提点</text>
|
||||
</view>
|
||||
<view v-if="shopInfo.id">
|
||||
<view style="color: #333;">
|
||||
|
|
|
|||
Loading…
Reference in New Issue