1053 lines
29 KiB
Vue
1053 lines
29 KiB
Vue
<template>
|
||
<view class="store-page">
|
||
<view class="header-fixed-wrapper" :style="{ height: headerHeight + 'px' }">
|
||
<NavHeader title="店铺详情" />
|
||
</view>
|
||
<view class="main-wrap" :style="{ paddingTop: headerHeight + 'px' }">
|
||
<!-- 顶部店铺信息（点击进入地图页） -->
|
||
<view class="store-header" @click="handleGoMap">
|
||
<view class="store-brand">
|
||
<image
|
||
class="brand-image"
|
||
:src="storeInfo.coverUrl"
|
||
mode="aspectFill"
|
||
></image>
|
||
</view>
|
||
<view class="store-info">
|
||
<text class="store-name">{{ storeInfo.name }}</text>
|
||
<view class="store-detail">
|
||
<text class="detail-text">门店地址: {{ storeInfo.address }}</text>
|
||
</view>
|
||
<view class="store-detail">
|
||
<text class="detail-text">联系电话: {{ storeInfo.phone }}</text>
|
||
</view>
|
||
<view class="store-tags-row">
|
||
<view class="store-tags">
|
||
<view class="tag-item tag-pink">会员特惠</view>
|
||
<view class="tag-item tag-orange">{{ categoryLabel }}</view>
|
||
</view>
|
||
<view class="distance-info">
|
||
<image
|
||
class="location-icon"
|
||
src="/static/service/location-icon.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
<text class="distance-text"
|
||
>距您 {{ distance || "0" }}km</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 中间菜单列表（可滑动） -->
|
||
<scroll-view class="menu-list" scroll-y="true">
|
||
<view
|
||
class="menu-item"
|
||
v-for="(item, index) in menuList"
|
||
:key="index"
|
||
:class="{ 'out-of-stock': item.stock === 0 }"
|
||
>
|
||
<view
|
||
class="checkbox"
|
||
:class="{ checked: item.selected, disabled: item.stock === 0 }"
|
||
@click="toggleMenuItem(index)"
|
||
>
|
||
<text v-if="item.selected" class="checkmark">✓</text>
|
||
</view>
|
||
<image
|
||
class="menu-image"
|
||
:src="item.coverUrl || '/static/service/menu-default.png'"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="menu-info">
|
||
<view class="menu-title-row">
|
||
<text class="menu-title">{{ item.name }}</text>
|
||
<view class="discount-badge" v-if="item.discount">
|
||
{{ item.discount }}折
|
||
</view>
|
||
</view>
|
||
<!-- <text class="menu-desc">{{ item.description }}</text> -->
|
||
<view class="menu-price-row">
|
||
<view class="current-price">
|
||
<view class="price-label">现价¥</view>
|
||
<view class="price-text">{{ formatPrice(item.salePrice) }}</view>
|
||
</view>
|
||
<text class="original-price" v-if="item.originalPrice"
|
||
>原价¥{{ formatPrice(item.originalPrice) }}</text
|
||
>
|
||
<view class="quantity-control">
|
||
<view
|
||
class="quantity-btn minus"
|
||
:class="{
|
||
disabled: (item.quantity || 0) <= 0 || item.stock === 0,
|
||
}"
|
||
@click="decreaseQuantity(index)"
|
||
>-</view
|
||
>
|
||
<text class="quantity-number">{{ item.quantity || 0 }}</text>
|
||
<view
|
||
class="quantity-btn plus"
|
||
:class="{ disabled: item.stock === 0 }"
|
||
@click="increaseQuantity(index)"
|
||
>+</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<view v-if="item.stock === 0" class="stock-tip">库存不足，不可选择</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部结算栏（固定） -->
|
||
<view class="checkout-footer">
|
||
<view class="footer-left">
|
||
<view class="price-section">
|
||
<view class="main-price">
|
||
<text class="price-label">合计:</text>
|
||
<text class="price-symbol">¥</text>
|
||
<text class="price-num">{{ totalAmount.toFixed(2) }}</text>
|
||
<view class="member-benefit" v-if="hasMemberDiscount">
|
||
<image class="crown-icon" src="/static/service/crown-icon.png" mode="aspectFill"></image>
|
||
<text class="benefit-text">{{ memberLevelName }}优惠</text>
|
||
</view>
|
||
</view>
|
||
<view class="discount-section" @click="openCouponPopup">
|
||
<text class="discount-text">{{ selectedCoupon ? '已优惠 ¥' + (calculateCouponDiscount(selectedCoupon) / 100).toFixed(2) : '选择优惠卷' }}</text>
|
||
<uni-icons type="right" size="12" color="#d51c3c"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button
|
||
class="checkout-btn"
|
||
:class="{ disabled: totalAmountBeforeDiscount <= 0 }"
|
||
:disabled="totalAmountBeforeDiscount <= 0"
|
||
@click="handleCheckout"
|
||
>
|
||
去结算
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getGuildStoreDetail,
|
||
getGuildVoucher,
|
||
getPaySign,
|
||
appBuy,
|
||
getLuCouponPage
|
||
} from "@/api/service";
|
||
import NavHeader from "@/components/NavHeader/NavHeader.vue";
|
||
|
||
export default {
|
||
components: {
|
||
NavHeader,
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight: 0,
|
||
storeInfo: {},
|
||
menuList: [],
|
||
categoryLabel: "",
|
||
shopId: null,
|
||
userInfo: {},
|
||
distance: null,
|
||
paying: false,
|
||
coupons: [], // 用户优惠卷列表
|
||
selectedCoupon: null, // 已选中的优惠卷
|
||
};
|
||
},
|
||
computed: {
|
||
headerHeight() {
|
||
return this.statusBarHeight + 44;
|
||
},
|
||
// 计算折扣前总金额
|
||
totalAmountBeforeDiscount() {
|
||
return this.menuList.reduce((total, item) => {
|
||
if (item.selected && item.quantity > 0) {
|
||
const price = (item.salePrice || 0) / 100;
|
||
return total + price * item.quantity;
|
||
}
|
||
return total;
|
||
}, 0);
|
||
},
|
||
// 计算总金额（只计算选中且数量大于0的商品，并减去优惠金额）
|
||
totalAmount() {
|
||
let amount = this.totalAmountBeforeDiscount;
|
||
if (this.selectedCoupon) {
|
||
const discount = this.calculateCouponDiscount(this.selectedCoupon) / 100;
|
||
amount = Math.max(0, amount - discount);
|
||
}
|
||
return amount;
|
||
},
|
||
// 是否有会员优惠
|
||
hasMemberDiscount() {
|
||
return this.menuList.some((item) => item.selected && item.discount);
|
||
},
|
||
// 获取会员等级名称（安全访问）
|
||
memberLevelName() {
|
||
return (
|
||
(this.userInfo && this.userInfo.level && this.userInfo.level.name) ||
|
||
"普通会员"
|
||
);
|
||
},
|
||
},
|
||
watch: {
|
||
// 监听菜单变化，自动匹配最佳优惠卷
|
||
menuList: {
|
||
handler() {
|
||
this.autoSelectBestCoupon();
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
this.statusBarHeight = systemInfo.statusBarHeight || 0;
|
||
// 从路由参数获取店铺ID和分类标签
|
||
this.shopId = options.id;
|
||
this.categoryLabel = options.categoryLabel;
|
||
// 将距离从米转换为千米（保留2位小数）
|
||
if (options.distance) {
|
||
this.distance = (parseFloat(options.distance) / 1000).toFixed(2);
|
||
}
|
||
this.userInfo = uni.getStorageSync('userInfo') || {};
|
||
if (this.shopId) {
|
||
this.loadStoreData();
|
||
} else {
|
||
uni.showToast({
|
||
title: "店铺信息错误",
|
||
icon: "none",
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
}
|
||
},
|
||
onShow() {
|
||
// 页面显示时，检查登录状态并更新用户信息
|
||
// 如果之前未登录，现在已登录，重新加载数据
|
||
const token = uni.getStorageSync("token");
|
||
const newUserInfo = uni.getStorageSync("userInfo") || {};
|
||
|
||
// 如果之前没有用户信息，现在有了（说明刚登录成功），重新加载数据
|
||
if (
|
||
token &&
|
||
(!this.userInfo || !this.userInfo.id) &&
|
||
newUserInfo &&
|
||
newUserInfo.id
|
||
) {
|
||
this.userInfo = newUserInfo;
|
||
// 如果有店铺ID，重新加载店铺数据（特别是菜单数据，可能需要登录才能查看）
|
||
if (this.shopId) {
|
||
this.loadStoreData();
|
||
}
|
||
} else if (token) {
|
||
// 如果已登录，更新用户信息（可能用户信息有更新）
|
||
this.userInfo = newUserInfo;
|
||
}
|
||
},
|
||
methods: {
|
||
// 顶部店铺信息点击：进入地图页
|
||
handleGoMap() {
|
||
if (!this.shopId) return;
|
||
uni.navigateTo({
|
||
url: `/pages/detail/mapDetail?id=${this.shopId}`,
|
||
});
|
||
},
|
||
// 加载店铺数据
|
||
async loadStoreData() {
|
||
try {
|
||
// 并行加载店铺详情、菜单和优惠卷
|
||
await Promise.all([
|
||
this.loadStoreDetail(this.shopId),
|
||
this.loadStoreMenu(this.shopId),
|
||
this.loadCoupons()
|
||
]);
|
||
} catch (error) {
|
||
console.error("加载店铺数据失败:", error);
|
||
uni.showToast({
|
||
title: "加载店铺信息失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
|
||
// 加载店铺详情
|
||
async loadStoreDetail(shopId) {
|
||
try {
|
||
const res = await getGuildStoreDetail(shopId);
|
||
if (res) {
|
||
this.storeInfo = res;
|
||
// 如果接口返回的距离是米，转换为千米
|
||
if (this.storeInfo.distance && typeof this.storeInfo.distance === 'number') {
|
||
this.storeInfo.distance = (this.storeInfo.distance / 1000).toFixed(2);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error("加载店铺详情失败:", error);
|
||
}
|
||
},
|
||
|
||
// 加载工会代金券
|
||
async loadStoreMenu(shopId) {
|
||
try {
|
||
const res = await getGuildVoucher({ shopId });
|
||
console.log(res, 11119);
|
||
if (res && res.list) {
|
||
this.menuList = res.list;
|
||
}
|
||
} catch (error) {
|
||
uni.showToast({
|
||
title: error,
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
|
||
// 加载用户优惠卷
|
||
async loadCoupons() {
|
||
try {
|
||
const res = await getLuCouponPage({ pageNo: 1, pageSize: 100, status: 0 });
|
||
if (res && res.list) {
|
||
this.coupons = res.list;
|
||
this.autoSelectBestCoupon();
|
||
}
|
||
} catch (error) {
|
||
console.error("加载优惠卷失败:", error);
|
||
}
|
||
},
|
||
|
||
// 检查优惠卷是否适用
|
||
// 这里会结合当前页面已选择的代金券商品（menuList 中 selected 为 true 且数量 > 0 的项）进行判断
|
||
isCouponApplicable(coupon) {
|
||
if (!coupon) return false;
|
||
|
||
// 1. 检查金额是否满足条件
|
||
// 判断当前已选商品的总金额（未扣除优惠前）是否达到该优惠卷的使用门槛（usePrice）
|
||
const usePrice = coupon.usePrice || 0;
|
||
if (this.totalAmountBeforeDiscount * 100 < usePrice) {
|
||
return false;
|
||
}
|
||
|
||
// 2. 检查商品是否匹配
|
||
// 获取当前购物车中已勾选且数量大于0的所有商品的 ID 列表
|
||
const selectedItemIds = this.menuList
|
||
.filter(item => item.selected && item.quantity > 0)
|
||
.map(item => item.id);
|
||
|
||
// 如果没有选择任何商品，则所有优惠卷均不可用
|
||
if (selectedItemIds.length === 0) return false;
|
||
|
||
// 3. 根据可用范围（productScope）进一步判断
|
||
// 如果可用范围是 1（全部代金券通用），且前面金额满足，则直接判定为可用
|
||
if (coupon.productScope === 1) {
|
||
return true;
|
||
}
|
||
|
||
// 如果可用范围是 2（指定代金券可用），则需要判断接口返回的 voucherIds（该优惠卷适用的指定商品ID集合）
|
||
let vIds = coupon.voucherIds || [];
|
||
if (typeof vIds === 'string') {
|
||
vIds = vIds.split(',').map(id => Number(id));
|
||
}
|
||
|
||
// 只要有一个已选中的商品 ID 存在于该优惠卷的适用商品 ID 列表（voucherIds）中，即视为匹配
|
||
if (vIds.length > 0) {
|
||
const hasMatch = selectedItemIds.some(id => vIds.includes(id) || vIds.includes(String(id)));
|
||
if (!hasMatch) return false;
|
||
} else if (coupon.productScope === 2) {
|
||
// 如果是指定商品可用，但后端没有返回适用的 voucherIds，保守起见判定为不可用
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
},
|
||
|
||
// 自动选择最佳优惠卷
|
||
autoSelectBestCoupon() {
|
||
// 找出所有适用的优惠卷
|
||
const applicableCoupons = this.coupons.filter(c => this.isCouponApplicable(c));
|
||
|
||
if (applicableCoupons.length === 0) {
|
||
this.selectedCoupon = null;
|
||
return;
|
||
}
|
||
|
||
// 按优惠金额从大到小排序
|
||
applicableCoupons.sort((a, b) => {
|
||
const discountA = this.calculateCouponDiscount(a);
|
||
const discountB = this.calculateCouponDiscount(b);
|
||
return discountB - discountA;
|
||
});
|
||
|
||
// 选出优惠最大的
|
||
this.selectedCoupon = applicableCoupons[0];
|
||
},
|
||
|
||
// 计算某个优惠卷能抵扣的金额（单位：分）
|
||
calculateCouponDiscount(coupon) {
|
||
if (!coupon) return 0;
|
||
// 1-金额类 或 兼容旧数据
|
||
if (coupon.type === 1 || !coupon.type) {
|
||
return coupon.discountAmount || coupon.discountPrice || coupon.price || 0;
|
||
}
|
||
// 2-折扣类
|
||
if (coupon.type === 2) {
|
||
let applicableAmount = 0; // 适用的商品总价（分）
|
||
|
||
if (coupon.productScope === 1) {
|
||
// 全部通用，则适用总价为当前商品总价
|
||
applicableAmount = this.totalAmountBeforeDiscount * 100;
|
||
} else {
|
||
// 指定代金券可用，计算匹配商品的总价
|
||
let vIds = coupon.voucherIds || [];
|
||
if (typeof vIds === 'string') {
|
||
vIds = vIds.split(',').map(id => Number(id));
|
||
}
|
||
this.menuList.forEach(item => {
|
||
if (item.selected && item.quantity > 0) {
|
||
if (vIds.includes(item.id) || vIds.includes(String(item.id))) {
|
||
applicableAmount += (item.sellPrice || 0) * item.quantity;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 计算抵扣金额：适用金额 * (100 - 折扣百分比) / 100
|
||
// 例：80表示8折，即抵扣 20%
|
||
const percent = coupon.discountPercent || 100;
|
||
let discount = Math.floor(applicableAmount * (100 - percent) / 100);
|
||
|
||
// 如果有最大抵扣限制
|
||
if (coupon.discountLimit && coupon.discountLimit > 0) {
|
||
discount = Math.min(discount, coupon.discountLimit);
|
||
}
|
||
|
||
return discount;
|
||
}
|
||
return 0;
|
||
},
|
||
|
||
// 打开优惠卷页面
|
||
openCouponPopup() {
|
||
// 为优惠卷附加 isApplicable 属性
|
||
const couponsWithStatus = this.coupons.map(c => ({
|
||
...c,
|
||
isApplicable: this.isCouponApplicable(c)
|
||
}));
|
||
|
||
uni.navigateTo({
|
||
url: '/pages/detail/selectCoupon',
|
||
success: (res) => {
|
||
res.eventChannel.emit('acceptDataFromOpenerPage', {
|
||
coupons: couponsWithStatus,
|
||
selectedCouponId: this.selectedCoupon ? this.selectedCoupon.id : null
|
||
});
|
||
},
|
||
events: {
|
||
acceptDataFromOpenedPage: (data) => {
|
||
this.selectedCoupon = data.coupon;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 切换菜单项选择状态
|
||
toggleMenuItem(index) {
|
||
const item = this.menuList[index];
|
||
// 库存不足时不可选择
|
||
if (item && item.stock === 0) {
|
||
return;
|
||
}
|
||
item.selected = !item.selected;
|
||
if (!item.selected) {
|
||
item.quantity = 0;
|
||
} else if (!item.quantity || item.quantity <= 0) {
|
||
// 选中时，如果当前数量为 0 或未设置，则默认数量为 1
|
||
item.quantity = 1;
|
||
}
|
||
this.autoSelectBestCoupon();
|
||
},
|
||
|
||
// 增加数量
|
||
increaseQuantity(index) {
|
||
const item = this.menuList[index];
|
||
// 库存不足时不可增加数量
|
||
if (item && item.stock === 0) {
|
||
return;
|
||
}
|
||
// 如果未选中，先选中
|
||
if (!item.selected) {
|
||
item.selected = true;
|
||
}
|
||
// 增加数量
|
||
item.quantity = (item.quantity || 0) + 1;
|
||
this.autoSelectBestCoupon();
|
||
},
|
||
|
||
// 减少数量
|
||
decreaseQuantity(index) {
|
||
const item = this.menuList[index];
|
||
// 库存不足时不处理数量变化
|
||
if (item && item.stock === 0) {
|
||
return;
|
||
}
|
||
const currentQuantity = item.quantity || 0;
|
||
// 确保数量不能小于0
|
||
if (currentQuantity > 0) {
|
||
item.quantity = currentQuantity - 1;
|
||
// 如果数量减到0，自动取消选中状态
|
||
if (item.quantity === 0) {
|
||
item.selected = false;
|
||
}
|
||
}
|
||
this.autoSelectBestCoupon();
|
||
},
|
||
|
||
// 格式化价格：将分转换为元（除以100，保留两位小数）
|
||
formatPrice(price) {
|
||
if (!price && price !== 0) {
|
||
return "0.00";
|
||
}
|
||
// 将分转换为元
|
||
const yuan = price / 100;
|
||
// 保留两位小数
|
||
return yuan.toFixed(2);
|
||
},
|
||
|
||
// 去结算
|
||
async handleCheckout() {
|
||
if (this.totalAmount <= 0) {
|
||
return;
|
||
}
|
||
|
||
// 获取选中的商品
|
||
const selectedItems = this.menuList.filter(
|
||
(item) => item.selected && item.quantity > 0
|
||
);
|
||
|
||
if (selectedItems.length === 0) {
|
||
uni.showToast({
|
||
title: "请选择商品",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
//
|
||
// 把选中的数据拼接成这样的数据 voucherId:num;voucherId:num 例如 2324:1;2325:2
|
||
const voucherStr = selectedItems
|
||
.map((item) => `${item.id}:${item.quantity}`)
|
||
.join(";");
|
||
|
||
// this.totalAmount 是元, 要转换成分
|
||
const trxamt = (this.totalAmount * 100).toFixed(0);
|
||
|
||
console.log("购买信息: " + voucherStr);
|
||
console.log("金额:" + trxamt);
|
||
|
||
const buyParams = {
|
||
shopId: this.shopId,
|
||
voucherData: voucherStr,
|
||
payableAmount: trxamt,
|
||
};
|
||
|
||
// 如果选择了优惠卷，传递优惠卷ID
|
||
if (this.selectedCoupon) {
|
||
buyParams.memberCouponId = this.selectedCoupon.id;
|
||
}
|
||
|
||
const res = await appBuy(buyParams);
|
||
console.log(res);
|
||
if (!res) {
|
||
uni.showToast({
|
||
title: "购买失败,请稍后重试",
|
||
icon: "none",
|
||
});
|
||
}
|
||
// 调用支付信息 res 为订单信息
|
||
this.handlePay(res);
|
||
},
|
||
// 支付调用
|
||
async handlePay(order) {
|
||
// 测试支付进行
|
||
// const reqsn =
|
||
// "mini" + Date.now() + "" + Math.floor(Math.random() * 10000);
|
||
|
||
const voucherArray = order.voucherPurchaseRespVOS || [];
|
||
const voucherMap = new Map();
|
||
|
||
voucherArray.forEach((item) => {
|
||
const key = item.voucherId;
|
||
if (!key) return;
|
||
|
||
// 从 Map 中获取已有数组，没有则取空数组
|
||
const currentList = voucherMap.get(key) || [];
|
||
currentList.push(item);
|
||
// 更新 Map 中的值
|
||
voucherMap.set(key, currentList);
|
||
});
|
||
let bodyStr = ''
|
||
voucherMap.forEach((voucherList, voucherId) => {
|
||
console.log(`代金券ID：${voucherId}`);
|
||
console.log(`代金券列表：`, voucherList);
|
||
const name = voucherList[0] && voucherList[0].voucherName ? voucherList[0].voucherName : "商品";
|
||
bodyStr = bodyStr + name + 'x' + voucherList.length + ';';
|
||
});
|
||
|
||
const randomstr = Math.floor(Math.random() * 10000000) + "";
|
||
// 金额：优先用订单实付金额（分），无则用 "1" 测试
|
||
if (order.payableAmount == null || order.payableAmount === ""){
|
||
uni.showToast({ title: "支付金额异常", icon: "none" });
|
||
return;
|
||
}
|
||
if (order.tlPayCusid == null || order.tlPayCusid == ""){
|
||
uni.showToast({ title: "当前商户还未配置支付信息不可购买", icon: "none" });
|
||
return;
|
||
}
|
||
|
||
// 定义请求参数（与服务记录页「立即支付」保持一致）
|
||
let params = {
|
||
appid: "00390105", // 通联分配的appid
|
||
body: bodyStr, //
|
||
cusid: order.tlPayCusid, // 通联分配的商户号
|
||
notify_url:
|
||
"https://guangsh.manage.hschengtai.com/admin-api/member/lu-order/tlNotice", // 保持原值不变
|
||
orgid: "56479107392N35H",
|
||
paytype: "W06",
|
||
randomstr: randomstr,
|
||
orderNumber: order.orderNumber,
|
||
remark: "1:" + order.orderNumber + ":" + bodyStr, // 第一个1 为租户信息, 第二个是订单号, 第三个是body
|
||
reqsn: order.orderNumber,
|
||
sign: "",
|
||
signtype: "RSA",
|
||
trxamt: String(order.payableAmount),
|
||
version: "12",
|
||
};
|
||
console.log(params)
|
||
if (order.orderNumber) {
|
||
uni.setStorageSync("lastOrderNumber", order.orderNumber);
|
||
}
|
||
|
||
try {
|
||
const sign = await getPaySign(params);
|
||
params["sign"] = sign;
|
||
uni.navigateToMiniProgram({
|
||
appId: "wxef277996acc166c3", // 目标小程序appid
|
||
extraData: params,
|
||
success(res) {
|
||
console.log("小程序跳转成功", res);
|
||
},
|
||
fail(err) {
|
||
console.error("小程序跳转失败", err);
|
||
uni.showToast({ title: "跳转失败，请稍后重试", icon: "none" });
|
||
},
|
||
});
|
||
} catch (e) {
|
||
console.error("获取支付签名失败:", e);
|
||
uni.showToast({ title: "支付准备失败，请稍后重试", icon: "none" });
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.store-page {
|
||
min-height: 100vh;
|
||
background-color: #e2e8f1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: 120rpx; // 为底部结算栏留出空间
|
||
}
|
||
|
||
.header-fixed-wrapper {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
background: #e2e8f1;
|
||
}
|
||
|
||
.main-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* 顶部店铺信息 */
|
||
.store-header {
|
||
background-color: #ffffff;
|
||
margin: 14rpx 20rpx;
|
||
padding: 40rpx 30rpx 30rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.store-brand {
|
||
position: relative;
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
margin-right: 24rpx;
|
||
flex-shrink: 0;
|
||
|
||
.brand-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12rpx;
|
||
}
|
||
}
|
||
|
||
.store-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.store-name {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #1a1819;
|
||
}
|
||
|
||
.store-detail {
|
||
.detail-text {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
|
||
.store-tags-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 8rpx;
|
||
|
||
.store-tags {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
|
||
.tag-item {
|
||
padding: 6rpx 16rpx;
|
||
font-size: 20rpx;
|
||
|
||
&.tag-pink {
|
||
background-color: rgba(213, 28, 60, 0.1);
|
||
color: #d51c3c;
|
||
}
|
||
|
||
&.tag-orange {
|
||
background-color: rgba(255, 107, 0, 0.1);
|
||
color: #ff6b00;
|
||
}
|
||
}
|
||
}
|
||
|
||
.distance-info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.location-icon {
|
||
width: 17rpx;
|
||
height: 20rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.distance-text {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #004294;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 中间菜单列表 */
|
||
.menu-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
min-height: 0;
|
||
|
||
.menu-item {
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 25rpx;
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
&.out-of-stock {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.checkbox {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border: 1rpx solid #cccccc;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 19rpx;
|
||
flex-shrink: 0;
|
||
|
||
&.disabled {
|
||
border-color: #dddddd;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
&.checked {
|
||
background-color: #004294;
|
||
border-color: #004294;
|
||
|
||
.checkmark {
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu-image {
|
||
width: 160rpx;
|
||
height: 173rpx;
|
||
border-radius: 10rpx;
|
||
margin-right: 20rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.menu-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
|
||
.menu-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
.menu-title {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #1a1819;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.discount-badge {
|
||
border: 1rpx solid #d51c3c;
|
||
color: #d51c3c;
|
||
font-size: 24rpx;
|
||
padding: 6rpx 14rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.menu-desc {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
.menu-price-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 10rpx;
|
||
margin-top: 16rpx;
|
||
|
||
.current-price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
font-weight: bold;
|
||
font-size: 22rpx;
|
||
color: #d51c3c;
|
||
.price-text {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-weight: bold;
|
||
font-size: 47rpx;
|
||
color: #d51c3c;
|
||
}
|
||
}
|
||
|
||
.original-price {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-weight: 500;
|
||
font-size: 18rpx;
|
||
color: #545454;
|
||
text-decoration: line-through;
|
||
background-color: rgba(115, 115, 115, 0.1);
|
||
padding: 7rpx 6rpx;
|
||
}
|
||
|
||
.quantity-control {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15rpx;
|
||
margin-left: auto;
|
||
|
||
.quantity-btn {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
border: 1rpx solid #888888;
|
||
line-height: 35rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
background-color: #ffffff;
|
||
border-radius: 4rpx;
|
||
|
||
&.disabled {
|
||
color: #bbbbbb;
|
||
border-color: #dddddd;
|
||
background-color: #f5f5f5;
|
||
}
|
||
}
|
||
|
||
.quantity-number {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
min-width: 40rpx;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
.stock-tip {
|
||
margin-top: 10rpx;
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 底部结算栏 */
|
||
.checkout-footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
z-index: 100;
|
||
|
||
.footer-left {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.price-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.main-price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
.price-label {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.price-symbol {
|
||
font-size: 28rpx;
|
||
color: #d51c3c;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.price-num {
|
||
font-size: 44rpx;
|
||
color: #d51c3c;
|
||
font-weight: bold;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
}
|
||
|
||
.member-benefit {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
margin-left: 12rpx;
|
||
background: rgba(255, 107, 0, 0.1);
|
||
padding: 4rpx 10rpx;
|
||
border-radius: 8rpx;
|
||
white-space: nowrap;
|
||
|
||
.crown-icon {
|
||
width: 23rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
.benefit-text {
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #ff6b00;
|
||
}
|
||
}
|
||
}
|
||
|
||
.discount-section {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin-top: 4rpx;
|
||
padding: 4rpx 12rpx;
|
||
background-color: rgba(213, 28, 60, 0.08);
|
||
border-radius: 20rpx;
|
||
|
||
.discount-text {
|
||
font-size: 22rpx;
|
||
color: #d51c3c;
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.checkout-btn {
|
||
width: 240rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
background: #004294;
|
||
border-radius: 40rpx;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
|
||
&.disabled {
|
||
background: #ccc;
|
||
color: #fff;
|
||
}
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|