256 lines
11 KiB
Vue
256 lines
11 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">
|
||
<view v-if="activeTab === 'delivery'" class="address-section">
|
||
<view class="section-title">收货地址</view>
|
||
<view class="address-info" @click="editAddress">
|
||
<view class="address-main">
|
||
<view class="address-name-phone">
|
||
<text class="name">李佳</text>
|
||
<text class="phone">15901518415</text>
|
||
</view>
|
||
<view class="address-detail">北京北京市朝阳区珠江绿洲文化广场</view>
|
||
</view>
|
||
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="address-section">
|
||
<view class="section-title">自提点</view>
|
||
<view class="address-info" @click="editAddress">
|
||
<view class="address-main">
|
||
<view class="address-name-phone">
|
||
<text class="name">李佳</text>
|
||
<text class="phone">15901518415</text>
|
||
</view>
|
||
<view class="address-detail">北京北京市朝阳区珠江绿洲文化广场</view>
|
||
</view>
|
||
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 分隔线 -->
|
||
<view class="divider"></view>
|
||
<!-- 商品信息 -->
|
||
<view class="goods-item">
|
||
<view class="goods-image">
|
||
<image src="/static/logo.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="goods-info">
|
||
<view class="goods-name">泰国金枕榴莲泰国金枕榴莲</view>
|
||
<view class="goods-desc"> 心形榴莲 软糯香甜</view>
|
||
<view class="price-container">
|
||
<view class="group-price">
|
||
<view class="group-price1">团购价</view>
|
||
<view class="group-price2">￥125.9</view>
|
||
</view>
|
||
<view class="quantity-control">
|
||
<view class="decrease-btn" @tap.stop="decreaseQuantity(index)">-</view>
|
||
<view class="quantity">{{ quantity }}</view>
|
||
<view class="increase-btn" @tap.stop="increaseQuantity(index)">+</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 运费 -->
|
||
<view class="fee-section">
|
||
<view class="fee-name">运费</view>
|
||
<view class="fee-value">￥10</view>
|
||
</view>
|
||
<!-- 总金额 -->
|
||
<view class="total-section">
|
||
<view class="total-name">总金额</view>
|
||
<view class="total-value">￥200</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 class="pay-button" @click="submitPayment">立即支付 ¥4500.00</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";
|
||
export default {
|
||
data() {
|
||
return {
|
||
activeTab: 'delivery', // 默认选中配送
|
||
quantity: 1, // 商品数量
|
||
selectedPayment: 'wechat',
|
||
boxshadow1: false,
|
||
boxshadow2: false,
|
||
};
|
||
},
|
||
methods: {
|
||
switchTab(tab) {
|
||
this.activeTab = tab;
|
||
},
|
||
editAddress() {
|
||
if (this.activeTab === 'delivery') {
|
||
NavgateTo('../addAddress/index');
|
||
} else {
|
||
NavgateTo('../ztLocation/index');
|
||
}
|
||
},
|
||
decreaseQuantity() {
|
||
if (this.quantity > 1) {
|
||
this.quantity--;
|
||
}
|
||
},
|
||
increaseQuantity() {
|
||
this.quantity++;
|
||
},
|
||
selectPayment(payment) {
|
||
console.log("🚀 ~ selectPayment ~ payment:", payment)
|
||
this.selectedPayment = payment;
|
||
},
|
||
submitPayment() {
|
||
console.log('提交支付，金额：￥4500.00');
|
||
this.boxshadow1 = true;
|
||
},
|
||
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);
|
||
},
|
||
});
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
@import url('./index.css');
|
||
</style> |