GuangYuYuan-app/src/points/order/orderDetails.vue

<script>
import { getPointOrderInfo, confirmReceipt, cancelReturn, orderLogisticsNo } from '@/api/pointOrder'
import ImageItem from "@/components/swiper/components/image.vue";
export default {
  name: "orderDetails",
  components: { ImageItem },
  data() {
    return {
      orderInfo: {},
      afterSaleInfo: {},
      productInfo: {},
      refundType: '',
      // 图片加载状态
      imageErrorMap: {},
      // 设备信息
      deviceInfo: uni.getSystemInfoSync(),
      show: false,
      title: '',
      content: '',
      // 物流单号弹窗
      showLogistics: false,
      logisticsNumber: '',
      // 售后弹窗
      afterSalesShow: false,
      receiptStatus: 'received', // 收货状态：notReceived(未收到货), received(已收到货)
      afterSalesType: 'exchange' // 售后类型：refund(退货), exchange(换货)
    }
  },
  onLoad(options) {
    this.orderNo = options.orderNo;
    this.getOrderInfo();
  },
  onReady() {
    // 初始获取数据
    // 这里可以添加获取订单详情的逻辑
  },
  computed: {
    // 判断是否为有底部安全区域的设备
    hasSafeArea() {
      const safeArea = this.deviceInfo.safeArea
      return safeArea && safeArea.bottom < this.deviceInfo.screenHeight
    }
  },
  methods: {
    getImageUrl(imagePath) {
      if (!imagePath) return '';
      const publicUrl = this.$globalData?.publicUrl || '';
      return publicUrl + imagePath;
    },
    // 处理图片加载失败
    handleImageError(productId) {
      this.$set(this.imageErrorMap, productId, true);
    },
    // 重置图片加载状态
    resetImageError(productId) {
      this.$set(this.imageErrorMap, productId, false);
    },
    //获取订单详情
    async getOrderInfo() {
      const res = await getPointOrderInfo({
        orderNo: this.orderNo,
        //openId: uni.getStorageSync('wx_copenid')
      })
      let { afterSaleInfo, orderInfo, productInfo } = res.data.data;

      let skuspecStr = '';
      try {
        const skuspec = productInfo?.skuSpec;
        if (skuspec && skuspec !== 'undefined' && skuspec !== 'null') {
          const parsedSpec = JSON.parse(skuspec);
          if (Array.isArray(parsedSpec)) {
            skuspecStr = parsedSpec.map(t => t?.specValue).filter(Boolean).toString();
          }
        }
      } catch (error) {
        console.error('解析 skuspec 失败:', error);
      }
      this.productInfo = {
        ...productInfo,
        skuSpec: skuspecStr
      };
      this.afterSaleInfo = afterSaleInfo;
      this.orderInfo = orderInfo;
    },
    orderTitle(info) {
      let orderTitleName = ''
      if (this.orderInfo.orderStatus == 4) {
        orderTitleName = this.afterSaleInfo?.afterSaleStatusName
      } else {
        orderTitleName = this.orderInfo.orderStatusName
      }
      return orderTitleName
    },
    // 处理退货操作
    handleRefund(val) {
      this.refundType = val;
      if (val === 'receipt') {
        this.title = '确认收货';
        this.content = '为了保障您的权益，请收到商品确认无误后再确认收货'
      }
      if (val === 'cancel') {
        this.title = '取消申请';
        this.content = '您确认取消发出的申请么'
      }
      this.show = true;
    },
    // 确认收货 取消申请接口对接
    confirmReceive() {
      var _this = this;
      let apiUrl = this.refundType === 'receipt' ? confirmReceipt : this.refundType === 'cancel' ? cancelReturn : '';
      apiUrl({
        orderId: _this.orderInfo.id
      }).then(res => {
        if (res.data.code == 200) {
          _this.show = false;
          _this.getOrderInfo();
        }
      })
    },
    // 提交物流单号
    submitLogistics() {
      var _this = this;
      orderLogisticsNo({
        orderId: _this.orderInfo.id,
        logisticsNo: _this.logisticsNumber
      }).then(res => {
        if (res.data.code == 200) {
          _this.showLogistics = false;
          _this.logisticsNumber = '';
          _this.getOrderInfo();
        }
      })
    },
    // 填写物流单号
    handleLogistics() {
      this.showLogistics = true;
    },
    // 打开售后弹窗
    handleAfterSales() {
      this.afterSalesShow = true;
    },
    // 售后下一步
    nextStep() {
      console.log('售后下一步:', {
        receiptStatus: this.receiptStatus,
        afterSalesType: this.afterSalesType
      });
      // 这里可以调用售后API

      //订单状态(0：待付款 1：待发货 2：待收货 3：已收货 4：售后中  11：取消订单)
      if (this.receiptStatus == "received" && this.afterSalesType == "exchange") {
        uni.navigateTo({
          url: `/points/productDetails/applyExchange?afterSalesType=${this.afterSalesType}&receiptStatus=${this.receiptStatus}&orderNo=${this.orderInfo.orderNo}&orderId=${this.orderInfo.id}&orderStatus=${this.orderInfo.orderStatus}`
        });
        this.afterSalesShow = false
        return
      }
      uni.navigateTo({
        url: `/points/productDetails/applyRefund?afterSalesType=${this.afterSalesType}&receiptStatus=${this.receiptStatus}&orderNo=${this.orderInfo.orderNo}&orderId=${this.orderInfo.id}&orderStatus=${this.orderInfo.orderStatus}`
      });
      this.afterSalesShow = false
    },
    //获取售后时间
    getafterTime() {
      let date = new Date("2026-04-22 09:38:54");
      date.setDate(date.getDate() + 10); // 直接在“日期”上加10
      return this.formatDate(date);
    },
    formatDate(date) {
      const y = date.getFullYear();
      const m = (date.getMonth() + 1).toString().padStart(2, '0');
      const d = date.getDate().toString().padStart(2, '0');
      return `${y}-${m}-${d}`;
    },
  }
}
</script>

<template>
  <view class="order-details">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="header-title">{{ orderTitle() }}</text>
    </view>
    <!-- 商品信息 -->
    <view class="product-info">
      <view class="product-image">
        <view v-if="!imageErrorMap[productInfo.productId]" class="product-image">
          <ImageItem :src="getImageUrl(productInfo.skuImage)" @image-error="handleImageError(productInfo.productId)" />
        </view>
        <view v-else
          style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 120rpx; background-color: #f5f5f5; border-radius: 8rpx;">
          <uni-icons type="image" size="54rpx" color="#999" @click="resetImageError(productInfo.productId)"></uni-icons>
          <text style="font-size: 20rpx; color: #999; margin-top: 13rpx;">加载失败</text>
        </view>
      </view>
      <view class="product-details">
        <text class="product-name">{{ productInfo.productName }}</text>
        <text class="product-spec">已选 {{ productInfo.skuSpec }}</text>
        <text class="product-price" v-if="productInfo.paymentType == 1">{{ orderInfo.pointsUsed }}积分</text>
        <text class="product-price" v-if="productInfo.paymentType == 2">¥{{ orderInfo.totalAmount }}</text>
        <text class="product-price" v-if="productInfo.paymentType == 3">¥{{ orderInfo.totalAmount }}+{{
          orderInfo.pointsUsed }}积分</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-item">
        <text class="info-label">下单时间</text>
        <text class="info-value">{{ orderInfo.createTime || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">发货时间</text>
        <text class="info-value">{{ orderInfo.deliveryTime || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">订单号</text>
        <text class="info-value">{{ orderInfo.orderNo || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">物流单号</text>
        <text class="info-value">{{ orderInfo.logisticsNo || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">收件人</text>
        <text class="info-value">{{ orderInfo.receiverName || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">联系电话</text>
        <text class="info-value">{{ orderInfo.receiverPhone || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">收件地址</text>
        <text class="info-value">{{ orderInfo.addressName || '--' }}</text>
      </view>
    </view>

    <!-- 退货信息 -->
    <view class="refund-info" v-if="afterSaleInfo !== null && afterSaleInfo.afterSaleType == 1">
      <view class="info-item">
        <text class="info-label">退货原因</text>
        <text class="info-value">{{ afterSaleInfo.applyReason }}</text>
      </view>
      <view class="info-item" v-if="[0, 2, 3].includes(afterSaleInfo.afterSaleStatus)">
        <text class="info-label">申请时间</text>
        <text class="info-value">{{ afterSaleInfo.createTime }}</text>
      </view>

      <view class="info-item" v-if="afterSaleInfo.afterSaleStatus == 1">
        <text class="info-label">退款时间</text>
        <text class="info-value">{{ afterSaleInfo.refund_time }}</text>
      </view>

      <view class="info-item" v-if="[1, 3].includes(afterSaleInfo.afterSaleStatus)">
        <text class="info-label">物流单号</text>
        <text class="info-value">{{ afterSaleInfo.logisticsNo }}</text>
      </view>

      <view class="info-item" v-if="afterSaleInfo.afterSaleStatus == 1">
        <text class="info-label">退款成功</text>
        <text class="info-value" v-if="productInfo.paymentType == 1">{{ orderInfo.pointsUsed }}积分</text>
        <text class="info-value" v-if="productInfo.paymentType == 2">¥{{ orderInfo.totalAmount }}</text>
        <text class="info-value" v-if="productInfo.paymentType == 3">¥{{ orderInfo.totalAmount }}+{{
          orderInfo.pointsUsed }}积分</text>
      </view>
    </view>

    <!-- 换货信息 -->
    <view class="refund-info" v-if="afterSaleInfo !== null && afterSaleInfo.afterSaleType == 2">
      <view class="info-item">
        <text class="info-label">退货原因</text>
        <text class="info-value">{{ afterSaleInfo.applyReason }}</text>
      </view>
      <view class="info-item" v-if="[0, 2, 3, 4].includes(afterSaleInfo.afterSaleStatus)">
        <text class="info-label">申请时间</text>
        <text class="info-value">{{ afterSaleInfo.createTime }}</text>
      </view>

      <view class="info-item" v-if="[3].includes(afterSaleInfo.afterSaleStatus)">
        <text class="info-label">物流单号</text>
        <text class="info-value">{{ afterSaleInfo.logisticsNo }}</text>
      </view>
    </view>

    <!-- 未收到货 -->
    <view class="refund-info" v-if="afterSaleInfo !== null && afterSaleInfo.afterSaleType == 3">
      <view class="info-item">
        <text class="info-label">退货原因</text>
        <text class="info-value">{{ afterSaleInfo.applyReason }}</text>
      </view>
      <view class="info-item" v-if="afterSaleInfo.afterSaleStatus == 0">
        <text class="info-label">申请时间</text>
        <text class="info-value">{{ afterSaleInfo.createTime }}</text>
      </view>

      <view class="info-item" v-if="afterSaleInfo.afterSaleStatus == 1">
        <text class="info-label">退款时间</text>
        <text class="info-value">{{ afterSaleInfo.refund_time }}</text>
      </view>

      <view class="info-item" v-if="afterSaleInfo.afterSaleStatus == 1">
        <text class="info-label">退款成功</text>
        <text class="info-value" v-if="productInfo.paymentType == 1">{{ orderInfo.pointsUsed }}积分</text>
        <text class="info-value" v-if="productInfo.paymentType == 2">¥{{ orderInfo.totalAmount }}</text>
        <text class="info-value" v-if="productInfo.paymentType == 3">¥{{ orderInfo.totalAmount }}+{{
          orderInfo.pointsUsed }}积分</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons" :class="{ 'safe-area': hasSafeArea }" v-if="orderInfo.orderStatus == 2">
      <button class="detail-button" @click="handleAfterSales" v-if="afterSaleInfo == null">退款\售后</button>
      <button class="action-button" @click="handleRefund('receipt')">确认收货</button>
    </view>
    <view class="action-buttons" :class="{ 'safe-area': hasSafeArea }"
      v-if="orderInfo.orderStatus == 4 && afterSaleInfo !== null && ([0, 2].includes(afterSaleInfo.afterSaleStatus))">
      <button class="action-button" @click="handleRefund('cancel')">取消申请</button>
      <button class="action-button" @click="handleLogistics" v-if="afterSaleInfo.afterSaleStatus == 2">填写物流单号</button>
    </view>
    <!-- 弹出层 -->
    <u-modal :show="show" :title="title" :content='content' :show-cancel="false">
      <view slot="default" class="modal-content">
        <text class="modal-text">{{ content }}</text>
      </view>
      <view slot="confirmButton" class="modal-footer">
        <button class="modal-cancel" @click="show = false">取消</button>
        <button class="modal-confirm" @click="confirmReceive">确认收货</button>
      </view>
    </u-modal>
    <!-- 填写物流单号 -->
    <u-popup :show="showLogistics" mode="bottom" @close="showLogistics = false" round="20rpx">
      <view class="logistics-popup">
        <!-- 标题 -->
        <view class="popup-header">
          <text class="popup-title">填写物流单号</text>
          <text class="popup-close" @click="showLogistics = false">取消</text>
        </view>

        <!-- 输入框 -->
        <view class="popup-content">
          <u--textarea v-model="logisticsNumber" placeholder="请输入物流单号" border="surround" :border-radius="10"
            class="logistics-input"></u--textarea>
        </view>

        <!-- 提交按钮 -->
        <view class="popup-footer">
          <button class="submit-button" @click="submitLogistics">提交</button>
        </view>
      </view>
    </u-popup>
    <!-- 售后 -->
    <u-popup :show="afterSalesShow" mode="bottom" @close="afterSalesShow = false" round="20rpx">
      <view class="after-sales-popup">
        <!-- 标题 -->
        <view class="popup-header">
          <text class="popup-title">请选择售后商品</text>
          <text class="popup-close" @click="afterSalesShow = false">×</text>
        </view>

        <!-- 收货状态选择 -->
        <view class="popup-section">
          <text class="section-title">请选择收货状态</text>
          <view class="option-group">
            <button class="option-button" :class="{ active: receiptStatus === 'notReceived' }"
              @click="receiptStatus = 'notReceived'">未收到货</button>
            <button class="option-button" :class="{ active: receiptStatus === 'received' }"
              @click="receiptStatus = 'received'">已收到货</button>
          </view>
        </view>

        <!-- 售后类型选择 -->
        <view class="popup-section" v-if="receiptStatus === 'received'">
          <text class="section-title">请选择售后类型</text>
          <view class="option-group">
            <button class="option-button" :class="{ active: afterSalesType === 'refund' }"
              @click="afterSalesType = 'refund'">退货</button>
            <button class="option-button" :class="{ active: afterSalesType === 'exchange' }"
              @click="afterSalesType = 'exchange'">换货</button>
          </view>
        </view>

        <!-- 商品选择 -->
        <view class="popup-section">
          <text class="section-title">
            请选择商品
            <text v-if="receiptStatus === 'received'" class="time-limit">({{ getafterTime() }} 24时之前可申请)</text>
          </text>
          <view class="product-item">
            <view class="product-image">
              <view v-if="!imageErrorMap[productInfo.productId]" class="product-image">
                <ImageItem :src="getImageUrl(productInfo.skuImage)"
                  @image-error="handleImageError(productInfo.productId)" />
              </view>
              <view v-else
                style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100rpx; background-color: #f5f5f5; border-radius: 8rpx;">
                <uni-icons type="image" size="44rpx" color="#999"
                  @click="resetImageError(productInfo.productId)"></uni-icons>
                <text style="font-size: 20rpx; color: #999; margin-top: 3rpx;">加载失败</text>
              </view>
            </view>
            <view class="product-details">
              <text class="product-name">{{ productInfo.productName }}</text>
              <text class="product-spec">已选: {{ productInfo.skuSpec }}</text>
            </view>
          </view>
        </view>

        <!-- 下一步按钮 -->
        <view class="popup-footer">
          <button class="next-button" @click="nextStep">下一步</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<style scoped lang="scss">
.order-details {
  width: 750rpx;
  min-height: 100vh;
  background-image: url("@/static/points/orderBg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #F5F8F8;
  padding-top: 54rpx;

  ::v-deep .u-modal {
    .u-modal__title {
      background: #E8FFFD;
      height: 92rpx;
      padding: 0;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      line-height: 92rpx;
    }

    .u-modal__content,
    .u-modal__button-group--confirm-button {
      padding: 0;
    }
  }

  // 模态框样式
  .modal-content {
    padding: 40rpx 32rpx;
    text-align: center;

    .modal-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 39rpx;
    }
  }

  .modal-footer {
    border-top: 1rpx solid #EEEEEE;
    display: flex;
    justify-content: center;
    padding: 24rpx 58rpx;

    button {
      width: 225rpx;
      height: 68rpx;
      border-radius: 60rpx;
      font-size: 28rpx;
      text-align: center;
      line-height: 68rpx;
      margin: 0 20rpx;
      padding: 0;
    }

    .modal-cancel {
      border: 1rpx solid #999999;
      color: #333333;
    }

    .modal-confirm {
      background: linear-gradient(78deg, #1AD8CF 0%, #21C8C0 100%);
      color: #FFFFFF;
    }
  }

  .header {
    width: 100%;
    margin-bottom: 38rpx;
    text-align: center;

    .header-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #FFFFFF;
      line-height: 40rpx;
    }
  }

  .product-info {
    width: 686rpx;
    height: 168rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    margin: 0 auto 24rpx;
    padding: 24rpx;
    display: flex;

    .product-image {
      width: 120rpx;
      height: 120rpx;
      margin-right: 24rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .product-details {
      flex: 1;

      .product-name {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        line-height: 28rpx;
        color: #333333;
        margin-bottom: 24rpx;
        display: block;
      }

      .product-spec {
        font-family: PingFang SC, PingFang SC;
        font-size: 26rpx;
        line-height: 26rpx;
        color: #999999;
        margin-bottom: 2rpx;
        display: block;
      }

      .product-price {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        line-height: 26rpx;
        font-size: 26rpx;
        color: #333333;
      }
    }
  }

  .order-info,
  .refund-info {
    width: 686rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    margin: 0 auto 24rpx;
    padding: 26rpx 24rpx;

    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 22rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .info-label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
      }

      .info-value {
        flex: 1;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #2F3437;
        text-align: right;
      }
    }
  }

  .action-buttons {
    width: 750rpx;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 20rpx 32rpx;
    display: flex;
    justify-content: flex-end;
    // 正常手机的高度
    height: auto;
    min-height: 100rpx;

    // 有安全区域的设备的高度
    &.safe-area {
      height: 164rpx;
    }

    .detail-button {
      padding: 0 30rpx;
      height: 56rpx;
      border-radius: 98rpx;
      font-size: 26rpx;
      color: #999999;
      text-align: center;
      line-height: 53rpx;
      border: 2rpx solid #999999;
      margin: 0;
    }

    .action-button {
      padding: 0 30rpx;
      height: 56rpx;
      background: #03C1B8;
      border-radius: 98rpx;
      font-size: 26rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 56rpx;
      margin: 0 0 0 20rpx;
    }
  }

  // 物流单号弹出框样式
  .logistics-popup {
    width: 100%;
    padding: 40rpx;
    background: #F5F8F8;
    border-radius: 32rpx 32rpx 0 0;

    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32rpx;

      .popup-title {
        font-size: 40rpx;
        font-weight: bold;
        color: #333333;
        background-image: url("@/static/points/logisticspopu.png");
        background-repeat: no-repeat;
        background-position: 20rpx 40rpx;
      }

      .popup-close {
        font-size: 28rpx;
        color: #999999;
      }
    }

    .popup-content {
      margin-bottom: 32rpx;

      .logistics-input {
        width: 100%;
        height: 180rpx;
        padding: 20rpx;
        font-size: 28rpx;
        background: #F8F8F8;
        border-radius: 16rpx;
        border: 1rpx solid #DCDCDC;
      }
    }

    .popup-footer {
      .submit-button {
        width: 100%;
        height: 80rpx;
        background: linear-gradient(78deg, #1AD8CF 0%, #21C8C0 100%);
        border-radius: 40rpx;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 80rpx;
        margin: 0;
        padding: 0;
      }
    }
  }

  // 售后弹出框样式
  .after-sales-popup {
    width: 100%;
    background: #F8F8F8;
    border-radius: 32rpx 32rpx 0 0;

    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 92rpx;
      padding: 0 32rpx;

      .popup-title {
        width: 100%;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
      }

      .popup-close {
        font-size: 32rpx;
        color: #999999;
      }
    }

    .popup-section {
      width: 686rpx;
      min-height: 202rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      margin: 0 auto 24rpx;
      padding: 24rpx;

      .section-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
        display: block;
        margin-bottom: 24rpx;

        .time-limit {
          font-size: 24rpx;
          color: #f53e54;
          font-weight: normal;
        }
      }

      .option-group {
        display: flex;
        justify-content: space-between;

        .option-button {
          flex: 1;
          height: 72rpx;
          border-radius: 38rpx;
          font-size: 28rpx;
          color: #333333;
          background: #F0F0F0;
          border-color: #F0F0F0;
          text-align: center;
          line-height: 72rpx;
          margin: 0 10rpx;
          padding: 0;

          &.active {
            background: #1AD8CF;
            border-color: #1AD8CF;
            color: #FFFFFF;
          }
        }
      }

      .product-item {
        display: flex;
        padding: 20rpx;
        background-color: #F5F8F8;
        border-radius: 10rpx;

        .product-image {
          width: 100rpx;
          height: 100rpx;
          margin-right: 20rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }

        .product-details {
          flex: 1;

          .product-name {
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 10rpx;
            display: block;
          }

          .product-spec {
            font-size: 24rpx;
            color: #999999;
            display: block;
          }
        }
      }
    }

    .popup-footer {
      width: 750rpx;
      height: 124rpx;
      background: #FFFFFF;
      padding: 20rpx 40rpx;

      .next-button {
        width: 100%;
        height: 80rpx;
        background: linear-gradient(78deg, #1AD8CF 0%, #21C8C0 100%);
        border-radius: 40rpx;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 80rpx;
        margin: 0;
        padding: 0;
      }
    }
  }
}
</style>