diff --git a/common/api/apiPrve.js b/common/api/apiPrve.js new file mode 100644 index 0000000..01c4ed6 --- /dev/null +++ b/common/api/apiPrve.js @@ -0,0 +1,3 @@ +export const urlAccount = '/account' +export const urlProduct = '/product' +export const urlOrder = '/order' diff --git a/common/api/product/product.js b/common/api/product/product.js index e06706c..59e5625 100644 --- a/common/api/product/product.js +++ b/common/api/product/product.js @@ -1,8 +1,7 @@ // 引入 request 文件 import request from '@/common/api/request.js' -const urlAccount = '/account' -const urlProduct = '/product' -const urlOrder = '/order' + +import {urlAccount,urlProduct,urlOrder} from '@/common/api/apiPrve.js' //获取商品列表数据 export const APIproductqueryProduct = (data) => { @@ -46,4 +45,13 @@ export const APIminiAppskuinfo = (data) => { method: 'get', data: data }) +} + +//获取相关推荐商品 +export const productRelated = (data) => { + return request({ + url: urlProduct + '/user/product/related/'+id.id, + method: 'get', + data: data + }) } \ No newline at end of file diff --git a/pages/product/components/goods-modal.vue b/pages/product/components/goods-modal.vue index fd3b53c..bacfc57 100644 --- a/pages/product/components/goods-modal.vue +++ b/pages/product/components/goods-modal.vue @@ -1,251 +1,623 @@ - \ No newline at end of file diff --git a/pages/product/index.vue b/pages/product/index.vue index b718ad8..7898072 100644 --- a/pages/product/index.vue +++ b/pages/product/index.vue @@ -52,8 +52,8 @@ - + 限时折扣{{ limitDiscountCountdown }} {{ returnGoodsImCartNum(item) < 99 ? returnGoodsImCartNum(item) : '99+' }} + v-if="returnGoodsImCartNum(item)">{{ returnGoodsImCartNum(item) < 99 ? returnGoodsImCartNum(item) : '99+' }} @@ -199,8 +199,8 @@ - 选规格 - - {{ returnGoodsImCartNum(item1) < 99 ? returnGoodsImCartNum(item1) : '99+' }} + + {{ returnGoodsImCartNum(item1) < 99 ? returnGoodsImCartNum(item1) : '99+' }} @@ -442,13 +442,39 @@ - + - + + 推荐搭配 + + + + + + 商品名 + + + + + ￥ + 40 + + + + + + + + + + + + + + - - + @@ -603,7 +629,8 @@ productminiApphotsquery, APIgroupquery, APIminiAppinfo, - APIminiAppskuinfo + APIminiAppskuinfo, + productRelated } from '@/common/api/product/product.js'; import { @@ -680,8 +707,8 @@ import { useNavbarStore } from '@/stores/navbarStore'; - - + + import { useWebSocket } from '@/stores/carts-websocket.js'; @@ -709,7 +736,9 @@ import { useCartStore } from '@/stores/order.js'; -import { computed } from 'vue'; + import { + computed + } from 'vue'; const cartStore = useCartStore(); /** * store本地存储 end @@ -760,6 +789,8 @@ import { computed } from 'vue'; /** * 通用数据合集 start */ + const showGoodsModal = ref(false) + // 门店信息 const shopInfo = reactive({}); Object.assign(shopInfo, uni.cache.get('shopInfo')); @@ -810,35 +841,35 @@ import { computed } from 'vue'; }; - - - - - + + + + + // 购物车对应的商品数 - const GoodsIDInCartNumMap=computed(()=>{ - const map={} - for(let cart in cartStore.carts){ - if(map[cart.product_id]){ - map[cart.product_id]+=cart.number*1 - }else{ - map[cart.product_id]=cart.number*1 + const GoodsIDInCartNumMap = computed(() => { + const map = {} + for (let cart in cartStore.carts) { + if (map[cart.product_id]) { + map[cart.product_id] += cart.number * 1 + } else { + map[cart.product_id] = cart.number * 1 } - + } return map }) - + /** * 返回购物车对应的商品数量 */ - function returnGoodsImCartNum(goods){ - if(GoodsIDInCartNumMap.value.hasOwnProperty([goods.id]) ){ + function returnGoodsImCartNum(goods) { + if (GoodsIDInCartNumMap.value.hasOwnProperty([goods.id])) { GoodsIDInCartNumMap.value[goods.id] } return 0 } - + // 获取商品数据 const shopProductList = reactive({ @@ -1305,9 +1336,9 @@ import { computed } from 'vue'; //预览图 const showPrveImg = ref(false); const prveImgsList = ref([]); - - function updateShowPrveImg(e){ - showPrveImg.value=e + + function updateShowPrveImg(e) { + showPrveImg.value = e } function prveImgs(images) { @@ -1321,14 +1352,14 @@ import { computed } from 'vue'; } async function getProductImgs(item) { - console.log('getProductImgs',item) + console.log('getProductImgs', item) let res = await APIminiAppinfo(item.id); prveImgs(res.images); } //获取多规格数据 const clickspecifications = async (item, index, indexs, type) => { - console.log('clickspecifications',item); + console.log('clickspecifications', item); // 商品类型 single-单规格商品 sku-多规格商品 package-套餐商品 weight-称重商品 coupon-团购券 // if ( // item.isSoldStock == 1 || @@ -1386,7 +1417,8 @@ import { computed } from 'vue'; .filter(([_, value]) => value.length > 0)); // 给默认数量 specifications.item.amountcartNumber = 0; - showShopsku.value = true; + // showShopsku.value = true; + showGoodsModal.value=true }; // 判断商品是否在可售时间内 const isProductAvailable = async (sellDaysStr, startTimeStr, endTimeStr) => { @@ -1622,11 +1654,11 @@ import { computed } from 'vue'; function cartInit(arr) { const result = [] - console.log('cartInitArr',arr); - console.log('allGoodsArr',allGoodsArr); + console.log('cartInitArr', arr); + console.log('allGoodsArr', allGoodsArr); cartStore.carts = arr.map(v => { const goods = allGoodsArr.find(g => g.id == v.product_id) - const goodsSkuList = goods?goods.skuList : [] + const goodsSkuList = goods ? goods.skuList : [] const findSku = goodsSkuList.find(sku => sku.id == v.sku_id) const memberPrice = findSku ? findSku.memberPrice : 0 const is_time_discount = limitUtils.canUseLimitTimeDiscount({ @@ -1634,7 +1666,7 @@ import { computed } from 'vue'; memberPrice }, cartStore.limitTimeDiscount, shopInfo, shopUserInfo.value, 'product_id'); - if(!goods){ + if (!goods) { useSocket.sendMessage({ id: v.id, operate_type: "del", @@ -1649,7 +1681,7 @@ import { computed } from 'vue'; is_time_discount: is_time_discount ? 1 : 0, memberPrice } - }).filter(v=>v) + }).filter(v => v) for (let cart of arr) { const findItem = cartStore.carts.find(v => v.id == cart.id) @@ -1826,7 +1858,7 @@ import { computed } from 'vue'; }); } - + //除去p 每次返回都回执消息 await websocketsendMessage({ @@ -2120,11 +2152,11 @@ import { computed } from 'vue'; } return currentTime >= startTime && currentTime <= endTime; }); - let allGoodsArr=[] + let allGoodsArr = [] // 列表请求 const productqueryProduct = async () => { cartStore.goodsIsloading = false; - allGoodsArr=[] + allGoodsArr = [] try { shopProductList.hots = await productminiApphotsquery(); shopProductList.productInfo = await APIgroupquery(); @@ -2144,8 +2176,8 @@ import { computed } from 'vue'; group.productList.forEach(async (product) => { product.isSaleTimeshow = await isProductAvailable(product.days, product .startTime, product.endTime); - - allGoodsArr.push(product) + + allGoodsArr.push(product) cartStore.setGoodsMap(product.id, product); }); @@ -2156,11 +2188,11 @@ import { computed } from 'vue'; cartStore.setGoodsMap(i.id, i); }); console.log('shopProductList', shopProductList); - - if(cartStore.carts.length>0){ + + if (cartStore.carts.length > 0) { cartInit(cartStore.carts) } - + cartStore.goodsIsloading = true; scrollTopSize.value = 0; topArr.value = []; @@ -2415,7 +2447,7 @@ import { computed } from 'vue'; tableCode: uni.cache.get('tableCode') }); oldOrder.value = res; - if (res && res.id && shopInfo.registerType == 'after'&&!e.noJump) { + if (res && res.id && shopInfo.registerType == 'after' && !e.noJump) { toHistory(); return; } @@ -2475,8 +2507,8 @@ import { computed } from 'vue'; idKey: 'id' }); } - - function watchEmit(){ + + function watchEmit() { uni.$off('updateProductIndex') uni.$on('updateProductIndex', function(data) { getNewUserDiscount() @@ -2530,12 +2562,12 @@ import { computed } from 'vue'; }); if (res && typeof res == 'object') { newUserDiscount.value = res; - cartStore.consumeDiscount=res - cartStore.newUserDiscount=res.amount - }else{ + cartStore.consumeDiscount = res + cartStore.newUserDiscount = res.amount + } else { newUserDiscount.value = null; - cartStore.consumeDiscount={} - cartStore.newUserDiscount=0 + cartStore.consumeDiscount = {} + cartStore.newUserDiscount = 0 } } @@ -2595,8 +2627,8 @@ import { computed } from 'vue'; return 0 }) const oldOrder = ref(null); - - + + // 限时折扣 async function getLimitDiscount() { const limitRes = await limitTimeDiscountapi.getConfig({ @@ -3233,7 +3265,6 @@ import { computed } from 'vue'; border-radius: 20rpx; background: #fff; box-sizing: border-box; - padding-bottom: 200rpx; .positionabsolute { position: absolute; @@ -3268,9 +3299,7 @@ import { computed } from 'vue'; border-bottom: 2rpx solid #f0f0f0; } - .shop_sku_box:last-child { - padding-bottom: 140rpx; - } + .shop_sku_box { padding: 20rpx; @@ -3356,9 +3385,6 @@ import { computed } from 'vue'; padding: 30rpx 28rpx; background-color: #fff; box-shadow: 0rpx -6rpx 14rpx 2rpx rgba(0, 0, 0, 0.1); - position: fixed; - left: 0; - bottom: 0; .price { display: flex; @@ -3734,4 +3760,31 @@ import { computed } from 'vue'; font-size: 12px; margin-left: 20rpx; } + + .recommand-goods { + display: flex; + flex-wrap: wrap; + margin-top: 24rpx; + + .item { + display: flex; + flex-direction: column; + align-items: center; + margin-right: 30rpx; + margin-bottom: 30rpx; + width: 210rpx; + + &:nth-child(3n) { + margin-right: 0; + } + + .name { + height: 84rpx; + } + + .info { + width: 100%; + } + } + } \ No newline at end of file