consumer-app/pages/detail/serviceDetail.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">
            <view class="price-left">
              <text class="price-label">合计:</text>
              <text class="price-symbol">¥</text>
              <text class="price-num">{{ totalAmount.toFixed(2) }}</text>
            </view>
            <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() {
      // 只要用户信息中存在 level 对象，或者 level 名称不为空，就认为是会员
      return !!(this.userInfo && this.userInfo.level && this.userInfo.level.name);
    },
    // 获取会员等级名称（安全访问）
    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.couponId = 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: center;
        flex-wrap: wrap;
        gap: 8rpx;

        .price-left {
          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: inline-flex;
          align-items: center;
          gap: 6rpx;
          margin-left: 12rpx;
          background: rgba(255, 107, 0, 0.1);
          padding: 4rpx 12rpx;
          border-radius: 8rpx;
          white-space: nowrap;
          flex-shrink: 0;

          .crown-icon {
            width: 24rpx;
            height: 24rpx;
            display: block;
            flex-shrink: 0;
          }

          .benefit-text {
            font-weight: 500;
            font-size: 20rpx;
            color: #ff6b00;
            line-height: 1;
          }
        }
      }

      .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>