521 lines
23 KiB
Vue
521 lines
23 KiB
Vue
<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 class="goods-list" v-for="(item, index) in orderList2" :key="index">
|
||
<view class="info-section">
|
||
<view class="address-section">
|
||
<view class="section-title">自提点</view>
|
||
<view @click="editAddress(item)">
|
||
<view v-if="defZTAddress.length > 0">
|
||
<view v-for="(adItem, adIndex) in defZTAddress" :key="adIndex">
|
||
<view class="address-info" v-if="adItem.id === item.goods_id">
|
||
<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 === item.goods_id)">
|
||
<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 class="goods-item">
|
||
<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;">0230 7559 1358</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">
|
||
<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: 'delivery', // 默认选中配送
|
||
quantity: 1, // 商品数量
|
||
selectedPayment: 'wechat',
|
||
boxshadow1: false,
|
||
boxshadow2: false,
|
||
defAddress: {},
|
||
defZTAddress: [],
|
||
orderList1: [],
|
||
orderList2: [],
|
||
carList: [],
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.carList = 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 => {
|
||
const list = item.commodity_goods_info.group_buy_activity_info
|
||
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) {
|
||
if (item.count > 0) {
|
||
item.count--
|
||
this.changeCart(item)
|
||
}
|
||
},
|
||
increaseQuantity(item) {
|
||
console.log("🚀 ~ increaseQuantity ~ item.commodity_goods_info.total_stock:", item.commodity_goods_info.stock_quantity)
|
||
if (item.commodity_goods_info.total_stock > 0) {
|
||
if (item.count < item.commodity_goods_info.total_stock) {
|
||
item.count++;
|
||
this.changeCart(item);
|
||
} else {
|
||
uni.showToast({
|
||
title: '库存不足',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} else if (item.count < item.commodity_goods_info.stock_quantity) {
|
||
item.count++;
|
||
this.changeCart(item);
|
||
} else {
|
||
uni.showToast({
|
||
title: '库存不足',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
// 更改购物车
|
||
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) {
|
||
if (order === 'order1') {
|
||
let total = 0;
|
||
this.orderList1.forEach(item => {
|
||
total += item.commodity_goods_info.sales_price * item.count + item.commodity_goods_info.freight;
|
||
|
||
});
|
||
// 加运费
|
||
return total;
|
||
} else {
|
||
let total = 0;
|
||
this.orderList2.forEach(item => {
|
||
total += item.commodity_goods_info.group_buy_price * item.count + item.commodity_goods_info.freight;
|
||
});
|
||
// 加运费
|
||
return total;
|
||
}
|
||
},
|
||
selectPayment(payment) {
|
||
this.selectedPayment = payment;
|
||
},
|
||
submitPayment() {
|
||
console.log('提交支付，金额：￥4500.00');
|
||
this.boxshadow1 = true;
|
||
},
|
||
// 复制收货地址
|
||
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> |