271 lines
9.9 KiB
Vue
271 lines
9.9 KiB
Vue
<template>
|
||
<view class="group-purchase-container">
|
||
<!-- 商品列表 -->
|
||
<view class="goods-list">
|
||
<!-- 商品项 -->
|
||
<view v-for="(item, index) in goodsList" :key="index">
|
||
<view>
|
||
<view class="goods-item2" @click="toDetail(item)">
|
||
<view class="goods-image">
|
||
<image :src="item.commodity_pic" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="goods-info">
|
||
<view class="goods-name">{{ item.goods_name }}</view>
|
||
<view class="goods-desc">{{ item.goods_spec }}</view>
|
||
<view class="price-container">
|
||
<view class="group-price">
|
||
<view class="group-price1">活动价</view>
|
||
<view class="group-price2">￥{{ item.promotional_price }}/{{ item.goods_unit }}
|
||
</view>
|
||
</view>
|
||
<view class="quantity-control">
|
||
<view class="decrease-btn" @tap.stop="decreaseQuantity(index)">-</view>
|
||
<view class="quantity">{{ item.quantity }}</view>
|
||
<view class="increase-btn" @tap.stop="increaseQuantity(index)">+</view>
|
||
</view>
|
||
</view>
|
||
<view class="original-price">零售价 ￥{{ item.retail_price }}/{{ item.goods_unit }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 购物车按钮 -->
|
||
<view class="shop_car" @click="shopCar">
|
||
<u-badge numberType="limit" type="error" max="99" :value="carNum"></u-badge>
|
||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1564.png"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
|
||
import { apiArr } from '@/api/groupPurchase.js'
|
||
import { apiArr as shopApi } from "../../../api/shop.js";
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
goodsList: [],
|
||
carNum: 0,
|
||
quantity: 0,
|
||
timer: null, // 定时器ID
|
||
endTime: '', // 初始化结束时间
|
||
updateTime: Date.now(), // 用于触发倒计时更新的时间戳
|
||
goodsDetail: [],
|
||
idVal: '',
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.idVal = Number(options.id)
|
||
// this.getGoodsList()
|
||
},
|
||
onShow() {
|
||
// 在页面显示时启动定时器
|
||
if (!this.timer) {
|
||
this.timer = setInterval(() => {
|
||
// 更新时间戳，触发页面重新渲染
|
||
this.updateTime = Date.now();
|
||
}, 1000);
|
||
}
|
||
|
||
// 确保getGoodsList和getShopdetail都执行完毕后再执行getGoodsNum
|
||
Promise.all([
|
||
// 确保getGoodsList已完成
|
||
this.goodsList.length > 0 ? Promise.resolve() : this.getGoodsList(),
|
||
// 调用getShopdetail并等待其完成
|
||
this.getShopdetail()
|
||
]).then(() => {
|
||
this.getGoodsNum();//获取货品在购物车中的数量
|
||
});
|
||
},
|
||
methods: {
|
||
getGoodsList() {
|
||
if (!uni.getStorageSync('userId')) {
|
||
uni.showToast({
|
||
title: '请先登录',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
const params = {
|
||
adver_id: this.idVal,
|
||
}
|
||
return request(shopApi.adverGoodsList, 'POST', params).then(res => {
|
||
const list = res.adver_goods_list.map(item => {
|
||
// 为每个商品初始化quantity
|
||
return {
|
||
...item,
|
||
commodity_pic: picUrl + item.goods_pic,
|
||
quantity: 0
|
||
}
|
||
})
|
||
this.goodsList = list
|
||
return res;
|
||
})
|
||
},
|
||
getShopdetail() {
|
||
const params = {
|
||
is_adver: 1,
|
||
}
|
||
return request(shopApi.getCar, "POST", params).then((res) => {
|
||
this.carNum = res.total;
|
||
// 合并当日达和普通商品数据
|
||
this.goodsDetail = [].concat(res.same_day_cart_list, res.normal_cart_list)
|
||
.flatMap(supplier => supplier.commodity_cart_and_goods_model);
|
||
return res;
|
||
});
|
||
},
|
||
getGoodsNum() {
|
||
if (!this.goodsDetail || !this.goodsList || this.goodsList.length === 0) {
|
||
return;
|
||
}
|
||
// 遍历所有商品，直接对item进行处理
|
||
this.goodsList.forEach(goods => {
|
||
// 在购物车数据中查找对应的商品
|
||
const matchedItem = this.goodsDetail.find(item => item.goods_id === goods.goods_id);
|
||
|
||
// 如果找到匹配项，更新quantity
|
||
if (matchedItem) {
|
||
goods.quantity = matchedItem.count;
|
||
} else {
|
||
// 如果没有找到，设置为0
|
||
goods.quantity = 0;
|
||
}
|
||
});
|
||
},
|
||
toDetail(itemObj) {
|
||
const item = {
|
||
...itemObj,
|
||
groupById: itemObj.group_buy_activity_info ? itemObj.group_buy_activity_info.id : ''
|
||
};
|
||
NavgateTo(`/packages/advertising/goodsDetail/index?item=${JSON.stringify(item)}`)
|
||
},
|
||
// 增加商品数量
|
||
increaseQuantity(index) {
|
||
const item = this.goodsList[index]
|
||
if (item.quantity == 0) {
|
||
if (item.one_one === 1) {
|
||
item.quantity += 2
|
||
this.carNum += 2
|
||
} else {
|
||
item.quantity += 1
|
||
this.carNum += 1
|
||
}
|
||
} else {
|
||
if (item.quantity == (item.one_one === 1 ? item.purchase_limit * 2 : item.purchase_limit)) {
|
||
uni.showToast({
|
||
title: '您选择的数量已达到最大限购量',
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
item.quantity = item.one_one === 1 ? item.quantity + 2 : item.quantity + 1;
|
||
this.carNum = item.one_one === 1 ? this.carNum + 2 : this.carNum + 1;
|
||
}
|
||
const params = {
|
||
goods_id_and_count: [
|
||
{
|
||
goods_id: item.goods_id,
|
||
count: item.quantity,
|
||
price: item.promotional_price,
|
||
is_one_one: item.one_one,
|
||
purchase_limit: item.purchase_limit,
|
||
},
|
||
],
|
||
adver_id: item.adver_id
|
||
}
|
||
this.updateCar(params);
|
||
},
|
||
// 减少商品数量
|
||
decreaseQuantity(index) {
|
||
const item = this.goodsList[index]
|
||
if (item.quantity > 0) {
|
||
if (item.one_one === 1) {
|
||
item.quantity = item.quantity - 2
|
||
this.carNum = this.carNum - 2
|
||
} else {
|
||
item.quantity--;
|
||
this.carNum--;
|
||
}
|
||
|
||
const params = {
|
||
goods_id_and_count: [
|
||
{
|
||
goods_id: item.goods_id,
|
||
count: item.quantity,
|
||
price: item.promotional_price,
|
||
is_one_one: item.one_one,
|
||
purchase_limit: item.purchase_limit,
|
||
},
|
||
],
|
||
adver_id: item.adver_id
|
||
}
|
||
this.updateCar(params);
|
||
} else {
|
||
uni.showToast({
|
||
title: '已经没有了...',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
// 请求更改购物车接口
|
||
async updateCar(params) {
|
||
return request(shopApi.updateCar, "POST", params).then((res) => {
|
||
this.getShopdetail();
|
||
uni.showToast({
|
||
title: "操作成功！",
|
||
success() { },
|
||
});
|
||
});
|
||
},
|
||
// 跳转到购物车
|
||
shopCar() {
|
||
const item = {
|
||
is_adver: 1,
|
||
}
|
||
NavgateTo("/packages/advertising/shopCar/index?item=" + JSON.stringify(item));
|
||
},
|
||
// 计算距离结束日期的剩余时间
|
||
getEndTheCountdown(endTime) {
|
||
// 获取当前时间和结束时间的时间戳
|
||
const now = new Date().getTime();
|
||
const end = new Date(endTime).getTime();
|
||
|
||
// 计算时间差（毫秒）
|
||
let diff = end - now;
|
||
|
||
// 如果已经结束，返回提示
|
||
if (diff <= 0) {
|
||
return '团购已结束';
|
||
}
|
||
|
||
// 计算天、小时、分钟
|
||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||
diff -= days * (1000 * 60 * 60 * 24);
|
||
|
||
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||
diff -= hours * (1000 * 60 * 60);
|
||
|
||
const minutes = Math.floor(diff / (1000 * 60));
|
||
diff -= minutes * (1000 * 60);
|
||
|
||
// 返回格式化的字符串
|
||
return `${days}天${hours}小时${minutes}分钟后结束`;
|
||
}
|
||
},
|
||
onHide() {
|
||
// 清除定时器
|
||
if (this.timer) {
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |