759 lines
35 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<!-- 顶部切换栏 -->
<view class="tab-bar">
<!-- <view :class="{ active: activeTab === 'delivery' }" class="tab-item" @click="switchTab('delivery')">配送
</view> -->
<view :class="{ active: activeTab === 'pickup' }" class="tab-item" @click="switchTab('pickup')">自提</view>
</view>
<!-- 分隔线 -->
<view class="divider"></view>
<!-- 配送/自提信息 -->
<view class="info-section" v-if="activeTab === 'delivery'">
<view class="address-section">
<view class="section-title">收货地址</view>
<view class="address-info" @click="chooseAddress" v-if="defAddress">
<view class="address-main">
<view class="address-name-phone">
<text class="name">{{ defAddress.name }}</text>
<text class="phone">{{ defAddress.phone }}</text>
</view>
<view class="address-detail">
{{ defAddress.address }}{{ defAddress.house_number }}
<view class="copy-icon" @click.stop="copyAddress" />
</view>
</view>
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
</view>
</view>
</view>
<!-- 分隔线 -->
<view class="divider"></view>
<!-- 商品信息 -->
<view v-if="activeTab === 'delivery' && orderList1.length > 0">
<view class="goods-list">
<view class="goods-item" v-for="(item, index) in orderList1" :key="index">
<view class="goods-image">
<image :src="item.commodity_goods_info.commodity_pic" mode="aspectFill"></image>
</view>
<view class="goods-info">
<view class="goods-name">{{ item.commodity_goods_info.goods_name }}</view>
<view class="goods-desc">{{ item.commodity_goods_info.goods_spec }}</view>
<view class="price-container">
<view class="group-price">
<view>¥{{ item.commodity_goods_info.sales_price }}/{{
item.commodity_goods_info.goods_unit
}}</view>
<!-- 运费 -->
<view class="goods-desc" style="margin-top: 10rpx;">运费 ¥{{
item.commodity_goods_info.freight }}</view>
</view>
<view class="quantity-control">
<view class="decrease-btn" @tap.stop="decreaseQuantity(item)">-</view>
<view class="quantity">{{ item.count }}</view>
<view class="increase-btn" @tap.stop="increaseQuantity(item)">+</view>
</view>
</view>
</view>
</view>
</view>
<!-- 运费 -->
<!-- <view class="fee-section">
<view class="fee-name">运费</view>
<view class="fee-value">¥{{ item.commodity_goods_info.freight }}</view>
</view> -->
<!-- 总金额 -->
<view class="total-section">
<view class="total-name">总金额</view>
<view class="total-value">¥{{ calculateTotal('order1') }}</view>
</view>
<!-- 支付方式 -->
<view class="payment-section">
<view class="payment-item" @click="selectPayment('wechat')">
<view class="payment-icon">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
mode="aspectFit"></image>
</view>
<view class="payment-content">
<view class="payment-name">微信支付</view>
<view class="payment-desc"><text
style="color: #f03d0e;margin-right: 15rpx;">可用优惠券</text>单笔支付限额:¥10000.00</view>
</view>
<view class="payment-select" v-if="selectedPayment === 'wechat'">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
</view>
<view class="payment-select" v-else>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
</view>
</view>
</view>
</view>
<view v-if="activeTab === 'delivery' && orderList1.length == 0" class="empty-tip">
暂无商品数据
</view>
<view v-if="activeTab === 'pickup' && orderList2.length > 0">
<!-- 按供应商分组 -->
<view v-for="(group, supplierId) in supplierGroups" :key="supplierId">
<view class="goods-list">
<view class="info-section">
<view class="address-section">
<view class="section-title">自提点</view>
<view @click="editAddress(group[0])">
<view v-if="defZTAddress.length > 0">
<view v-for="(adItem, adIndex) in defZTAddress" :key="adIndex">
<view class="address-info" v-if="adItem.id == supplierId">
<view class="address-main">
<view class="address-name-phone">
<text class="name">{{ adItem.name }}</text>
<text class="phone">{{ adItem.phone }}</text>
</view>
<view class="address-detail">
{{ adItem.address }}
<view class="copy-icon" @click.stop="copyZTAddress" />
</view>
</view>
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon>
</view>
</view>
</view>
<view class="address-info"
v-if="!defZTAddress.some(adItem => adItem.id == supplierId)">
<view class="address-main">
<view class="address-name-phone">
<text class="name">请选择自提点</text>
</view>
</view>
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon>
</view>
</view>
</view>
<view class="address-info" v-else>
<view class="address-main">
<view class="address-name-phone">
<text class="name">请选择自提点</text>
</view>
</view>
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
</view>
</view>
</view>
</view>
</view>
<!-- 该供应商下的所有商品 -->
<view class="goods-item" v-for="(item, index) in group" :key="index">
<view class="goods-image">
<image :src="item.commodity_goods_info.commodity_pic" mode="aspectFill"></image>
</view>
<view class="goods-info">
<view class="goods-name">{{ item.commodity_goods_info.goods_name }}</view>
<view class="goods-desc">{{ item.commodity_goods_info.goods_spec }}</view>
<view class="price-container">
<view class="group-price">
<view>
<view v-if="isWithinActivityTime(item)" class="group-price-box">
<view class="group-price1">团购价</view>
<view class="group-price2">
{{ '¥' + item.commodity_goods_info.group_buy_price }}
/{{ item.commodity_goods_info.goods_unit }}
</view>
</view>
<view v-else>
{{ '' + item.commodity_goods_info.sales_price }}
/{{ item.commodity_goods_info.goods_unit }}
</view>
</view>
<!-- 运费 -->
<!-- <view class="goods-desc" style="margin-top: 10rpx;">运费 {{
item.commodity_goods_info.freight }}</view> -->
</view>
<view class="quantity-control">
<view class="decrease-btn" @tap.stop="decreaseQuantity(item)">-</view>
<view class="quantity">{{ item.count }}</view>
<view class="increase-btn" @tap.stop="increaseQuantity(item)">+</view>
</view>
</view>
</view>
</view>
</view>
<!-- 运费 -->
<!-- <view class="fee-section">
<view class="fee-name">运费</view>
<view class="fee-value">{{ item.commodity_goods_info.freight }}</view>
</view> -->
<!-- 总金额 -->
<view class="total-section">
<view class="total-name">总金额</view>
<view class="total-value">{{ calculateTotal('order2') }}</view>
</view>
<!-- 支付方式 -->
<view class="payment-section">
<view class="payment-item" @click="selectPayment('wechat')">
<view class="payment-icon">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
mode="aspectFit"></image>
</view>
<view class="payment-content">
<view class="payment-name">微信支付</view>
<view class="payment-desc"><text
style="color: #f03d0e;margin-right: 15rpx;">可用优惠券</text>单笔支付限额:¥10000.00</view>
</view>
<view class="payment-select" v-if="selectedPayment === 'wechat'">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
</view>
<view class="payment-select" v-else>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
</view>
</view>
</view>
</view>
<view v-if="activeTab === 'pickup' && orderList2.length == 0" class="empty-tip">
暂无商品数据
</view>
<!-- 立即支付按钮 -->
<view class="pay-button" @click="submitPayment">立即支付</view>
<!-- 弹窗 - 支付成功 -->
<view class="shadow" @click="changeShadow" v-if="boxshadow1">
<view class="shadowBox2">
<view class="shadowBox_img">
<view class="boxshadow_tit">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/af_√.png"
class="boxshadow_tit_img">
</image>
已支付成功
</view>
<view class="boxshadow_img">
<view style="margin-bottom: 15rpx;">{{verifyCode}}</view>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
</image>
</view>
<view class="boxbottom">
<view class="line1"></view>
赶快邀请好友来下单吧
<view class="line2"></view>
</view>
<view @click.stop="changeShadow">
<view class="shadowBox1">
<button class="shadowBox1Item_btn" open-type="share" bindtap="onShareButtonClick" />
<view class="shadowBox1Item" @click="shareFriend">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
mode="aspectFill"></image>
微信好友
</view>
<view class="shadowBox1Item" @click="shareFriend">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
mode="aspectFill"></image>
小程序链接
</view>
<view class="shadowBox1Item" @click="openSave">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
mode="aspectFill"></image>
二维码海报
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 海报 -->
<view class="shadow" @click="changeShadow2" v-if="boxshadow2">
<view class="shadowBox2">
<view class="shadowBox_img">
<view class="boxshadow_tit">今日商品推荐</view>
<view class="boxshadow_img">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
</image>
</view>
<view class="shadowBoxInfo">
<view class="shadowboxInfo_left">二维码</view>
<view class="shadowboxInfo_right">
<view class="shadowboxInfo_right_1">正鲜生</view>
<view class="shadowboxInfo_right_2">
长按识别小程序 <br />
数量有限马上抢购
</view>
</view>
</view>
</view>
<view class="shadowBox_btn" @click.stop="saveImg">保存海报</view>
</view>
</view>
</view>
</template>
<script>
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
import { apiArr } from "../../../api/shop";
export default {
data() {
return {
activeTab: 'pickup', // 默认选中自提
quantity: 1, // 商品数量
selectedPayment: 'wechat',
boxshadow1: false,
boxshadow2: false,
defAddress: {},
defZTAddress: [],
orderList1: [],
orderList2: [],
carList: [],
// 团购活动id
group_buy_activity_id: 0,
// 核销码
verifyCode: '',
};
},
computed: {
// 按供应商id分组商品
supplierGroups() {
const groups = {};
this.orderList2.forEach(item => {
const supplierId = item.supplier_id || 'default';
if (!groups[supplierId]) {
groups[supplierId] = [];
}
groups[supplierId].push(item);
});
return groups;
},
},
onLoad(options) {
this.carList = JSON.parse(options.shopCarList)
console.log("🚀 ~ onLoad ~ JSON.parse(options.shopCarList):", JSON.parse(options.shopCarList))
},
onShow() {
this.getUserAddress()
this.getZTAddress()
this.getGoodsList()
},
onUnload() {
uni.removeStorageSync('changeZTAddress')
},
methods: {
switchTab(tab) {
this.activeTab = tab;
},
//用户收货地址
getUserAddress() {
request(apiArr.getUserDefAddress, "POST", {}).then(res => {
this.defAddress = res.default_address
})
},
// 商品列表
getGoodsList() {
this.orderList1 = []
this.orderList2 = []
this.carList.forEach(item => {
// 如果图片URL不是以https开头则拼接picUrl
if (item.commodity_goods_info.commodity_pic && item.commodity_goods_info.commodity_pic.indexOf('https') !== 0) {
item.commodity_goods_info.commodity_pic = picUrl + item.commodity_goods_info.commodity_pic
}
// const list = item.commodity_goods_info.group_buy_activity_info
const list = true
if (list) {
this.orderList2.push(item)
} else {
this.orderList1.push(item)
}
})
},
getZTAddress() {
setTimeout(() => {
let changeAddress = uni.getStorageSync('changeZTAddress')
if (changeAddress) {
this.defZTAddress = changeAddress
}
}, 100)
},
chooseAddress() {
NavgateTo('../address/index')
},
editAddress(item) {
NavgateTo('../ztLocation/index?item=' + JSON.stringify(item));
},
decreaseQuantity(item) {
const currentTime = new Date().getTime();
const startTime = new Date(item.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
const endTime = new Date(item.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
if (item.count > 0) {
if (currentTime >= startTime && currentTime <= endTime) {
if (item.count == item.commodity_goods_info.min_order_quantity) {
uni.showToast({
title: '最少购买' + item.commodity_goods_info.min_order_quantity + '件',
icon: 'none'
});
item.count = 0
} else {
item.count--
}
} else {
item.count--
}
// 当数量减到0时从carList中删除该商品
if (item.count === 0) {
const index = this.carList.findIndex(carItem => carItem.goods_id === item.goods_id);
if (index > -1) {
this.carList.splice(index, 1);
// 重新加载商品列表以更新页面显示
this.getGoodsList();
}
}
this.changeCart(item)
}
},
increaseQuantity(item) {
console.log("🚀 ~ increaseQuantity ~ item:", item)
const currentTime = new Date().getTime();
const startTime = new Date(item.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
const endTime = new Date(item.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
if (item.count >= item.commodity_goods_info.stock_quantity) {
uni.showToast({
title: '库存不足',
icon: 'none'
});
return
}
if (currentTime >= startTime && currentTime <= endTime) {
if (item.count == 0) {
item.count += item.commodity_goods_info.min_order_quantity
} else {
if (item.count >= item.commodity_goods_info.stock_quantity) {
uni.showToast({
title: '库存不足',
icon: 'none'
});
return
}
if (item.count == item.commodity_goods_info.max_limit_quantity) {
uni.showToast({
title: '一次最多购买' + item.commodity_goods_info.max_limit_quantity + '件',
icon: 'none'
});
return
}
}
}
item.count++;
this.changeCart(item);
},
// 更改购物车
changeCart(item) {
const params = {
goods_id_and_count: [
{
goods_id: item.goods_id,
count: item.count,
},
],
}
request(apiArr.updateCar, "POST", params).then(res => {
uni.showToast({
title: "操作成功!",
success() { },
});
})
},
// 计算总金额
calculateTotal(order) {
const currentTime = new Date().getTime();
if (order === 'order1') {
let total = 0;
this.orderList1.forEach(goods => {
// 团购活动时间判断
const startTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
const endTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
if (currentTime >= startTime && currentTime <= endTime) {
// total += goods.commodity_goods_info.group_buy_price * goods.count + goods.commodity_goods_info.freight;
total += goods.commodity_goods_info.group_buy_price * goods.count;
} else {
// total += goods.commodity_goods_info.sales_price * goods.count + goods.commodity_goods_info.freight;
total += goods.commodity_goods_info.sales_price * goods.count;
}
});
// 加运费
return total.toFixed(2);
} else {
let total = 0;
this.orderList2.forEach(goods => {
// 团购活动时间判断
const startTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
const endTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
if (currentTime >= startTime && currentTime <= endTime) {
// total += goods.commodity_goods_info.group_buy_price * goods.count + goods.commodity_goods_info.freight;
total += goods.commodity_goods_info.group_buy_price * goods.count;
} else {
// total += goods.commodity_goods_info.sales_price * goods.count + goods.commodity_goods_info.freight;
total += goods.commodity_goods_info.sales_price * goods.count;
}
});
// 加运费
return total.toFixed(2);
}
},
selectPayment(payment) {
this.selectedPayment = payment;
},
submitPayment() {
// 检查所有供应商是否都选择了自提点
const supplierIds = [...new Set(this.orderList2.map(item =>
item.supplier_id || 'default'
))];
const allHaveZTAddress = supplierIds.every(supplierId => {
const ztAddress = this.defZTAddress.find(adItem => adItem.id == supplierId);
return !!ztAddress;
});
if (!allHaveZTAddress) {
uni.showToast({
title: '请选择所有货品的自提点',
icon: 'none'
});
return;
}
// 团购活动时间判断
const currentTime = new Date().getTime();
let isGroupBuyValid = true;
// 检查所有商品是否在团购活动时间内
for (let supplierId in this.supplierGroups) {
const group = this.supplierGroups[supplierId];
for (let item of group) {
const activityInfo = item.commodity_goods_info.group_buy_activity_info;
// 如果没有团购活动信息或者不在活动时间内则isGroupBuyValid设为false
if (!activityInfo) {
isGroupBuyValid = false;
break;
}
const startTime = new Date(activityInfo.start_time).getTime();
const endTime = new Date(activityInfo.end_time).getTime();
if (!(currentTime >= startTime && currentTime <= endTime)) {
isGroupBuyValid = false;
break;
}
}
if (!isGroupBuyValid) break;
}
const params = {
user_id: uni.getStorageSync('userId'),
is_group_buy: isGroupBuyValid,
goods_list: Object.keys(this.supplierGroups).map(supplierId => {
const group = this.supplierGroups[supplierId];
const firstItem = group[0];
// 团购活动id
this.group_buy_activity_id = firstItem.commodity_goods_info.group_buy_activity_id;
// 根据供应商id获取自提点信息
const ztAddress = this.defZTAddress.find(adItem => adItem.id == supplierId) || {};
return {
supplier_id: firstItem.supplier_id,
supplier_name: firstItem.supplier_name || '',
is_same_day: firstItem.commodity_goods_info.is_same_day,
receiving_name: ztAddress.name || '',
receiving_phone: ztAddress.phone || '',
receiving_address: ztAddress.address || '',
group_buy_activity_id: firstItem.commodity_goods_info.group_buy_activity_id,
goods_and_count: group.map(item => {
const activityInfo = item.commodity_goods_info.group_buy_activity_info;
const isGroupBuy = activityInfo &&
currentTime >= new Date(activityInfo.start_time).getTime() &&
currentTime <= new Date(activityInfo.end_time).getTime();
return {
goods_id: item.goods_id,
count: item.count,
price: isGroupBuy ? item.commodity_goods_info.group_buy_price : item.commodity_goods_info.sales_price,
freight: item.commodity_goods_info.freight,
}
})
}
})
}
request(apiArr.createOrder, "POST", params).then(resVal => {
// 根据平台设置不同的trans_type值
// 小程序: 71, App: 51
const systemInfo = uni.getSystemInfoSync();
let trans_type = 51; // 默认App环境
// 运行时判断是否为小程序环境
if (systemInfo.platform === 'devtools' || systemInfo.platform === 'unknown') {
trans_type = 71; // 开发工具或未知环境默认为小程序
}
// 条件编译:针对不同平台设置不同值
// #ifdef MP
trans_type = 71; // 所有小程序平台
// #endif
// #ifdef APP-PLUS
trans_type = 51; // App平台
// #endif
const param = {
order_id: resVal.order_id,
user_id: uni.getStorageSync('userId'),
trans_type: trans_type
}
request(apiArr.mergePreorder, "POST", param).then(res => {
if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
// 调用微信支付
uni.requestPayment({
timeStamp: res.timeStamp,
nonceStr: res.nonceStr,
package: res.package,
signType: res.signType,
paySign: res.paySign,
success: (payRes) => {
const params = {
order_id: resVal.order_id,
from: 2,
group_buy_activity_id: this.group_buy_activity_id,
}
request(apiArr.queryOrder, "POST", params).then(res => {
this.verifyCode = res.verification_code
this.boxshadow1 = true
})
},
fail: (payErr) => {
uni.showToast({
title: payErr.errMsg == 'requestPayment:fail cancel' ? '用户取消支付' : '支付失败',
icon: 'none'
})
},
complete: () => {
// 支付完成后的回调,无论成功失败都会执行
}
})
} else {
console.error("获取支付参数失败,缺少必要参数")
uni.showToast({
title: '获取支付信息失败',
icon: 'none'
})
}
})
})
},
// 复制收货地址
copyAddress() {
// 使用uni-app的复制API
uni.setClipboardData({
data: this.defAddress.address + this.defAddress.house_number,
success: () => {
uni.showToast({
title: '复制成功',
icon: 'success'
});
},
fail: () => {
uni.showToast({
title: '复制失败',
icon: 'none'
});
}
});
},
copyZTAddress() {
// 使用uni-app的复制API
uni.setClipboardData({
data: this.defZTAddress.address,
success: () => {
uni.showToast({
title: '复制成功',
icon: 'success'
});
},
fail: () => {
uni.showToast({
title: '复制失败',
icon: 'none'
});
}
});
},
openSave() {
this.boxshadow1 = false;
this.boxshadow2 = true;
},
changeShadow() {
this.boxshadow1 = false;
},
changeShadow2() {
this.boxshadow2 = false;
},
// 保存海报
saveImg() {
this.boxshadow2 = false;
// 微信小程序保存图片
uni.downloadFile({
url: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png",
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res) => {
uni.showToast({
title: "保存成功",
icon: "success",
duration: 2000,
});
},
fail: (err) => {
console.log("保存失败", err);
},
});
}
},
fail: (err) => {
console.log("下载失败", err);
},
});
},
// 判断当前日期是否在团购活动时间范围内
isWithinActivityTime(item) {
if (!item || !item.commodity_goods_info || !item.commodity_goods_info.group_buy_activity_info) {
return false;
}
const now = new Date();
const startTime = new Date(item.commodity_goods_info.group_buy_activity_info?.start_time);
const endTime = new Date(item.commodity_goods_info.group_buy_activity_info?.end_time);
return now >= startTime && now <= endTime;
},
}
};
</script>
<style>
@import url('./index.css');
</style>