kxmall-ui/kxmall-rider-ui/pages/task/task1.vue

<template>
  <view class="app" style="padding-bottom: 100rpx;">
    <view class="hdr">
      <view class="header">
        <image class="header_bg" :src="userInfo.workState ? workStatus[userInfo.workState].img : workStatus[0].img" />
        <view class="header_nav">
          <view @click="exit()">
            <image class="header_left_img" src="@/static/task/task_left.png"></image>
            <text class="leftqh">退出</text>
          </view>
          <view style="text-align: center;font-size: 36rpx;color: #FFFFFF;">商家订单</view>
          <view @click="changeStatus()" v-if="userInfo.state" style="position: relative;">
<!--            <image class="header_right_img" src="@/static/task/qiehuan.png"></image>-->
<!--            <text class="qh">切换</text>-->
          </view>
          <view v-else></view>
        </view>
        <view class="status">
          <text>{{ '营业中' }}</text>
        </view>
        <!-- 提示信息 -->
        <view class="statistics-tip">
          <text>订单状态统计为近一个月数据</text>
        </view>
      </view>
      <!--  v-if="userInfo.state" -->
      <view class="nav_list">
        <view :class="['nav_list_item', {'selector': index === menuIndex}]" @click="toggleMenu(index)"
          v-for="(item, index) in menuList" :key="index">
          <text>{{ item.label }}</text>
          <text style="color: red;">({{ item.num }})</text>
        </view>
      </view>
    </view>

    <view class="app-main">
      <view class="form" v-for="(item, index) in list" :key="index">
        <view class="form_item">
          <view class="form_item_l item2">{{ menuList[menuIndex].label }}</view>
          <!-- <view class="form_item_r">配送费<span style="color: red">￥{{ item.freightPrice }}</span></view> -->
        </view>
        <view class="form_item">
          <view class="form_item_l">门店名称</view>
          <view class="form_item_r">{{ storageMap[item.storeId] }} </view>
        </view>
        <view class="form_item" v-if="item.predictTime">
          <view class="form_item_l">送达时间</view>
          <view class="form_item_r">{{ item.predictTime }}</view>
        </view>
        <view class="form_item">
          <view class="form_item_l">订单编号</view>
          <view class="form_item_r">{{ item.orderId }}</view>
        </view>
        <view class="form_item">
          <view class="form_item_l">收货地址</view>
          <view class="form_item_r fr2">
            <view class="v1">
              <text class="shdz">{{ item.province }}-{{ item.city }}-{{ item.county }}-{{ item.userAddress }}</text>
            </view>
            <view class="v2">
              <image class="addr" src="@/static/task/xxxard.png" @click="openMap(item)" />
            </view>
          </view>
        </view>
        <view class="form_item">
          <view class="form_item_l">联系电话</view>
          <view class="form_item_r" @click="call(item.userPhone)">
            <text style="padding-right: 24rpx;">{{ item.userPhone }}</text>
            <image class="phone" src="@/static/task/call.png"></image>
          </view>
        </view>
        <view class="form_item">
          <view class="form_item_l">实付金额</view>
          <view class="form_item_r"><span style="color: red">￥{{ item.payPrice }}</span></view>
        </view>

        <view style="padding-bottom: 46rpx;padding-top: 36rpx;text-align: right;">
          <button class="btn btn2" @click="getDetails(item.id)">订单详情</button>
          <block>
            <button class="btn btn3" v-if="item.status===14"
              @click="handleOperation(item.id,'startStocking')">开始配货</button>
            <button class="btn btn3" v-if="item.status===16"
              @click="handleOperation(item.id,'completeAllocation')">完成配货</button>
            <button class="btn btn3"
              v-if="(item.status===20||item.status===32||item.status===30) && item.shippingType===1"
              @click="allot(item.storeId,item.orderId,item.postId)">{{ item.postId ? '重新配送' : '配送' }}</button>
            <button class="btn btn3" v-if="item.status===20 && item.shippingType===1"
              @click="handleOperation(item.id,'merchantDistribution')">商家自配</button>
            <button class="btn btn3" v-if="item.status===30"
              @click="handleOperation(item.id,'completeDelivery')">完成配送</button>
            <button class="btn btn3"
              v-if="(item.status===20||item.status===32||item.status===30) && item.shippingType===2"
              @click="handleOperation(item.id,'completePickup')">完成取货</button>
          </block>

          <!-- <block v-if="menuIndex == 0">
            <button class="btn btn3" @click="start(item)">开始配货</button>
          </block>
          <block v-if="menuIndex == 1">
            <button class="btn btn2 btn4" @click="order_error(item)">订单异常</button>
            <button class="btn btn3" @click="complete(item)">完成配货</button>
          </block>
          <block v-if="menuIndex == 2">
            <button class="btn btn2 btn4" @click="order_error(item)">订单异常</button>
            <button class="btn btn3" @click="complete(item)">完成配送</button>
          </block>
          <block v-if="menuIndex == 3">
            <button class="btn btn3" @click="complete(item)">完成配送</button>
          </block> -->
        </view>
      </view>
      <!-- <view v-if="list.length==0" style="text-align: center;padding-top: 60rpx;color: #999999;font-size: 30rpx;">
        暂无任何信息
      </view> -->
      <!-- v-if="userInfo.state" -->
      <view class="loadMore">
        <uni-load-more :status="finish ? 'noMore' : 'more'" />
      </view>
      <!-- <view class="audit-box" v-else>审核中</view> -->

      <!-- <view class="botm">
        <view class="botm_inner">
          <image class="rw_img" src="../../static/task/fuwuxing.png"></image>
          <text class="botm_txt">
            我的任务
          </text>
        </view>
      </view> -->
      <!-- 遮罩层-->

      <view v-if="errOrder.show == true" class="mask">
        <view class="mask-modal">
          <view class="mask-modal-tit">配送异常</view>
          <textarea class="mask_area" v-model="errOrder.msg" placeholder="请输入异常原因" placeholder-class="pl"></textarea>
          <view class="mask_bottom">
            <view>
              <button @click="checkErr(false)" style="float: left;" class="mask_btn">取消</button>
            </view>
            <view>
              <button @click="checkErr(true)" style="float: right;" class="mask_btn mask_btn2">确定</button>
            </view>
          </view>
        </view>
      </view>

    </view>

    <uni-popup ref="popup" type="bottom">
      <view class="popup_mask">
        <view class="popup_mask_tit">
          <text class="pop_t1">选择配送员</text>
        </view>
        <view class="pop_item">
          <uni-list border-full>
            <uni-list-item v-for="(item,index) in courierList" :key="item.id" :title="item.name"
              :note="`配送时间：${ item.deliveryStart }-${ item.deliveryEnd }`">
              <template v-slot:footer>
                <button class="btn3" size="mini" @click="check(item.id)">选择</button>
              </template>
            </uni-list-item>
          </uni-list>
        </view>
      </view>
    </uni-popup>
    <tab-bar :active="0"></tab-bar>
  </view>
</template>

<script>
  import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  import TabBar from '../../components/tab-bar';
  import {
    mapState,
    mapMutations
  } from 'vuex';

  export default {
    components: {
      uniLoadMore,
      TabBar
    },
    computed: {
      ...mapState(['token', 'userInfo'])
    },
    data() {
      return {
        workStatus: [{
            lable: '休息中',
            value: 0,
            img: require('@/static/task/xiuxi.png')
          },
          {
            lable: '开工中',
            value: 1,
            img: require('@/static/task/kaigong.png')
          }
        ],

        menuIndex: 0,
        menuList: [{
            label: '待配货',
            status: 14,
            num: 0
          },
          {
            label: '配货中',
            status: 16,
            num: 0
          },
          {
            label: '待配送',
            status: 20,
            num: 0
          },
          {
            label: '配送中',
            status: 30,
            num: 0
          },
          {
            label: '已完成',
            status: '40,50',
            num: 0
          }
        ],

        list: [], // 任务列表
        pageNo: 1, // 页码
        pageSize: 10, // 页数
        loadData: false, // 列表加载中
        finish: false, // 列表全部加载完成
        storageMap: {},
        errOrder: {
          show: false,
          id: null,
          address: '',
          msg: ''
        },
        courierList: []
      }
    },
    onLoad() {
      let that = this;
      if (that.userInfo.state) {
        that.resetData();
      }
      uni.setTabBarItem({
        index: 0,
        visible: false,
        complete(e) {
          console.log(e)
        }
      })
      uni.setTabBarItem({
        index: 3,
        visible: false,
        complete(e) {
          console.log(e)
        }
      })
      this.listAllStorage()
      this.getTaskTotal()
      this.getTaskList()
    },
    //上拉加载
    onReachBottom() {
      uni.showNavigationBarLoading()
      this.getTaskList()
    },

    //下拉刷新
    onPullDownRefresh() {
      //uni.startPullDownRefresh()
      if (this.userInfo.state) {
        // 审核通过
        this.resetData();
      } else {
        // 审核中
        this.getUserInfo().then(res => {
          if (res) {
            this.resetData();
          } else {
            uni.showToast({
              title: '后台审核中'
            })
          }
        })
      }
      this.resetData()
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 1000)
    },
    methods: {
      ...mapMutations(['saveUserInfo', 'logout']),
      goToOrderCancellation() {
        uni.navigateTo({
          url: '/pages/order/OrderCancellation' // 根据实际路径调整
        });
      },
      handleOperation(id, operation) {
        const operations = {
          startStocking: 'order/storeOrder/startStocking',
          completeAllocation: 'order/storeOrder/completeAllocation',
          merchantDistribution: 'order/storeOrder/merchantDistribution',
          completeDelivery: 'order/storeOrder/completeDelivery',
          completePickup: 'order/storeOrder/completePickup'
        }
        this.request('get', operations[operation], this.token, {
          id
        }).then(() => {
          uni.showToast({
            title: '操作成功'
          })
          this.resetData()
        })
      },
      allot(val, id, postId) {
        this.orderId = id
        if (postId) {
          this.reAllot(val, id)
          return
        }
        this.request('get', 'rider/rider/getRiderByStorageId', this.token, {
          storageId: val
        }).then(res => {
          if (res.code !== 200) {
            uni.showToast({
              title: res.message
            })
            return
          }
          this.courierList = res.data
          if (res.data[0].automatic === 1) {
            this.check(res.data[0].id)
          } else {
            this.$refs.popup.open()
          }
        })
      },
      reAllot(val, id) {
        this.orderId = id
        this.request('get', 'rider/rider/getRiderByStorageId', this.token, {
          storageId: val
        }).then(res => {
          this.courierList = res.data
          this.$refs.popup.open()
        })
      },
      check(val) {
        this.request('get', 'order/storeOrder/distributeOrder', this.token, {
          orderId: this.orderId,
          riderId: val
        }).then(res => {
          this.$refs.popup.close()
          uni.showToast({
            title: '操作成功'
          })
          this.resetData()
        })
      },
      listAllStorage() {
        this.request('get', 'storage/storage/list', this.token, null).then(({
          rows
        }) => {
          rows.forEach(storage => {
            this.storageMap[storage.id] = storage.name
          })
        })
      },
      /* 获取后台用户信息（进入即判断是否过期） */
      getUserInfo() {
        let that = this;
        return new Promise((resolve) => {
          that.request("get", "getInfo", that.token, null).then(res => {
            console.log('getUserInfo', res)
            if (res.code === 200) {
              that.saveUserInfo(newUserData); // 缓存用户基础数据
              resolve(true)
            } else {
              resolve(false)
            }
          })
        })
      },

      // 退出
      exit() {
        let that = this;
        uni.showModal({
          title: '系统提示',
          content: '是否确认退出？',
          showCancel: true,
          confirmText: '取消',
          cancelText: '确认',
          success: function(res) {
            if (res.cancel) {
              that.logout();
              uni.redirectTo({
                url: '/pages/login/merchant'
              })
            }
          }
        })
      },

      // 切换工作状态
      changeStatus() {
        let that = this
        let workState = that.userInfo.workState;
        let params = {
          riderId: that.userInfo.id
        }
        that.request("get", "rider/app/" + (workState ? 'toRest' : 'toWorking'), that.token, params).then(res => {
          console.log('changeStatus', res)
          if (res.code === 200) {
            that.userInfo.workState = workState ? 0 : 1;
            that.saveUserInfo(that.userInfo);
            that.resetData();
          }
        })
      },

      // 切换菜单
      toggleMenu(index) {
        this.finish = false
        // if (!this.userInfo.state) {
        //   uni.showToast({
        //     title: '审核中,可下拉获取最新审核状态'
        //   })
        //   return;
        // }
        if (!this.loadData) {
          this.menuIndex = index;
          this.pageNo = 1;
          this.list = [];
          this.getTaskList();
        } else {
          uni.showToast({
            title: '数据加载中，请稍后'
          })
        }
      },

      // 刷新页面数据
      resetData() {
        if (!this.loadData) {
          this.pageNo = 1;
          this.list = [];
          this.finish = false
          //this.getWorkStatus();
          this.listAllStorage()
          this.getTaskTotal();
          this.getTaskList();
        } else {
          uni.showToast({
            title: '数据加载中，请稍后'
          })
        }
      },

      //获取工作状态
      getWorkStatus() {
        let that = this;
        let params = {
          riderId: that.userInfo.id
        };
        that.request("get", "rider/app/getWorkingState", that.token, params).then(res => {
          console.log('getWorkStatus', res)
          that.status = res.data.workState == 1 ? true : false;
        })
      },
      // 获取订单坐标
      getOrderPoi(address) {
        console.log('address', address)
        const result = {
          lat: 0.00,
          lng: 0.00
        }
        return result;
      },

      // 拨打电话
      call(phone) {
        uni.makePhoneCall({
          phoneNumber: phone //仅为示例
        });
      },

      // 开启导航
      async openMap(data) {
        // data = {
        // 	province: '福建省',
        // 	city: '福州市',
        // 	county: '晋安区',
        // 	address: '长河路88号'
        // };
        let address = `${data.province}${data.city}${data.county}${data.address}`;
        if (data.latitude && data.longitude) {
          wx.openLocation({
            latitude: Number(data.latitude), // 纬度，范围为-90~90，负数表示南纬
            longitude: Number(data.longitude), // 经度，范围为-180~180，负数表示西经
            scale: 8, // 缩放比例
            name: data.address,
            address,
            success(success) {
              console.log('success', success)
            },
            fail(fail) {
              console.log('fail', fail)
            }
          })
        } else {
          uni.showToast({
            title: '经纬度获取失败，无法进行导航',
            icon: 'none',
            mask: true,
            duration: 2000
          });
        }
      },

      // 订单详情
      getDetails(id) {
        uni.navigateTo({
          url: `../order/order1?id=${id}`
        })
      },

      // 获取各类任务列表统计数量
      getTaskTotal() {
        let that = this;
        that.request("get", "order/storeOrder/statistical", that.token, null).then(res => {
          console.log(res.data)
          if (res.data) {
            let keys = ['waitingCount', 'beingDistributed', 'waitingToBeDelivered', 'inDelivery',
              'completedCount'
            ];
            keys.forEach((keyName, index) => {
              that.menuList[index].num = res.data[keyName] || 0;
            })
          }
        })
      },

      // 获取任务列表
      getTaskList() {
        let that = this;
        if (that.finish) {
          return;
        }
        that.loadData = true;
        let params = {
          orderStatus: that.menuList[that.menuIndex].status,
          pageNum: that.pageNo,
          pageSize: that.pageSize
        };

        that.request("get", "order/storeOrder/list", that.token, params).then(res => {

          if (res.code === 200) {
            let newList = res.rows;
            console.log(newList)
            newList.forEach(item => {
              if (item.predictTime) {
                if (typeof(item.predictTime) === 'number') {
                  item.predictTime = that.dateFtt('yyyy-MM-dd hh:mm:ss', new Date(item.predictTime))
                }
              }
            })
            that.list = that.list.concat(newList);
            that.finish = that.list.length >= res.total;
            that.pageNo++;
            that.loadData = false; // 获取结束
          } else {
            that.loadData = false; // 获取结束
          }
        })
      },

      //提交订单异常
      async checkErr(type) {
        let that = this
        if (type) {
          if (!that.errOrder.msg.length) {
            uni.showToast({
              title: '请输入异常原因'
            })
            return;
          }
          that.errOrder.show = false;
          let point = await that.getOrderPoi(that.errOrder.address);
          if (point) {
            let params = {
              riderOrderId: that.errOrder.id,
              reason: that.errOrder.msg,
              lng: point.lng,
              lat: point.lat
            }
            that.request("get", "rider/task/abnormal", that.token, params).then(res => {
              if (res.code == 200) {
                uni.showToast({
                  title: '操作成功'
                })
                that.resetData()
              }
            })
          }
        } else {
          that.errOrder.show = false;
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
  .popup_mask {
    width: 690rpx;
    padding: 0 30rpx;
    height: 500rpx;
    background-color: #FFFFFF;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    padding-bottom: 6rpx;
  }

  .popup_mask_tit {
    height: 104rpx;
    line-height: 104rpx;
    position: relative;
  }

  .pop_t1 {
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
  }

  .pop_item {
    height: calc(100% - 104rpx);
    overflow: auto;
  }

  .hdr {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100vw;
  }

  .app-main {
    position: absolute;
    width: 750rpx;
    top: 410rpx;
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  }

  .toLogin {
    padding-top: 100rpx;
    text-align: center;
    color: red;
    font-size: 30rpx;
  }

  .header_right_img {
    width: 56rpx;
    height: 56rpx;
    position: absolute;
    right: 72rpx;
    top: -6rpx;

  }

  .header_left_img {
    width: 30rpx;
    height: 30rpx;
    position: absolute;
    top: 10rpx;
  }

  .qh {
    font-size: 30rpx;
    color: #FFFFFF;
    position: absolute;
    right: 0;
    top: 4rpx;
  }

  .leftqh {
    font-size: 30rpx;
    color: #FFFFFF;
    position: absolute;
    left: 46rpx;
    top: 4rpx;
  }

  .app {
    background-color: #F6F6F6;
  }

  .ret {
    width: 20rpx;
    height: 36rpx;
  }

  .header {
    height: 322rpx;
    position: relative;
  }

  .header_bg {
    width: 750rpx;
    height: 322rpx;
  }

  .header_nav {
    width: 686rpx;
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 60rpx;
    left: 32rpx;
  }

  .header_nav view {
    flex: 1;
  }

  .status {
    width: 750rpx;
    text-align: center;
    position: absolute;
    color: #FFFFFF;
    font-size: 48rpx;
    top: 164rpx;
    font-weight: bold;

  }

  .status text {
    display: inline-block;
    width: 242rpx;
    height: 84rpx;
    background-color: #FFFFFF;
    border-radius: 39rpx;
    text-align: center;
    line-height: 84rpx;
    color: #3662DD;
  }

  .nav_list {
    height: 88rpx;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: row;
    position: relative;
  }

  .nav_list_item {
    flex: 1;
    height: 100%;
    line-height: 88rpx;
    text-align: center;
    font-size: 28rpx;
    color: #666666;

    &.selector {
      position: relative;

      &:after {
        position: absolute;
        content: '';
        bottom: 0;
        left: 50%;
        width: 56rpx;
        height: 8rpx;
        margin-left: -28rpx;
        ;
        border-radius: 4rpx;
        background-color: #3662DD;
      }
    }

  }

  .nav_list_item2 {
    width: 200rpx;
    position: absolute;
    right: 100rpx;
  }

  .nav_list_item3 {
    width: 100rpx;
    position: absolute;
    right: 0;
  }



  .form {
    padding: 0 47rpx;
    border-top: 24rpx solid #F6F6F6;
    background-color: #FFFFFF;
  }

  .form_item {
    height: 80rpx;
    border-bottom: 1rpx solid #F6F6F6;
    display: flex;
    flex-direction: row;
  }

  .selector {
    color: #3662DD;
  }

  .form_item_l {
    width: 170rpx;
    height: 98rpx;
    line-height: 98rpx;
    font-size: 28rpx;
    color: #999999;
  }

  .form_item_r {
    width: 486rpx;
    height: 98rpx;
    line-height: 98rpx;
    font-size: 28rpx;
    color: #333333;
    text-align: right;
  }

  .addr {
    display: inline-block;
    width: 34rpx;
    height: 36rpx;
    position: relative;
    top: 6rpx;
  }

  .phone {
    width: 38rpx;
    height: 36rpx;
    position: relative;
    top: 6rpx;
  }

  .item2 {
    font-weight: bold;
    color: #333333;
    font-size: 32rpx;
  }

  .btn {
    display: inline-block;
    width: 180rpx;
    height: 74rpx;
    line-height: 74rpx;
    color: #3662DD;
    font-size: 30rpx;
    border: 1rpx solid #3662DD;
    background-color: #FFFFFF;
  }

  .btn2 {
    margin-right: 30rpx;
  }

  .btn3 {
    background: linear-gradient(to right, #5095F4, #3662DD);
    color: #FFFFFF;
    border: none;
  }

  .btn3+.btn3 {
    margin-left: 30rpx;
  }

  .botm {
    height: 120rpx;
    background-color: #FFFFFF;
    position: fixed;
    bottom: 0;
    width: 750rpx;

  }

  .botm_inner {
    height: 120rpx;
    position: relative;
    font-size: 30rpx;
    color: #3662DD;
  }

  .rw_img {
    width: 58rpx;
    height: 64rpx;
    position: absolute;
    top: 28rpx;
    left: 240rpx;

  }

  .botm_txt {
    position: absolute;
    left: 328rpx;
    top: -6rpx;
    /* #ifdef H5 */
    top: 40rpx;
    /* #endif */
  }

  .btn4 {
    border-color: #FF473C;
    color: #FF473C;
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .statistics-tip {
    position: absolute; /* 绝对定位 */
    left: 20rpx; /* 距离左侧的距离 */
    bottom: 10rpx; /* 距离底部的距离 */
    font-size: 24rpx;
    color: red;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
    padding: 6rpx 12rpx;
    border-radius: 8rpx;
    z-index: 1; /* 确保提示信息在 header 内容之上 */
  }

  .mask-modal {
    width: 600rpx;
    height: 520rpx;
    position: relative;
    background-color: #FFFFFF;
    border-radius: 16rpx;
  }

  .mask-modal-tit {
    color: #000000;
    font-size: 32rpx;
    padding: 40rpx 0;
    text-align: center;
    font-weight: bold;
  }

  .mask_area {
    width: 500rpx;
    height: 186rpx;
    font-size: 30rpx;
    background-color: #F8F8F8;
    margin: 0 auto;
    padding: 24rpx 20rpx;

  }

  .pl {
    font-size: 30rpx;
    color: #999999;
  }

  .mask_bottom {
    width: 500rpx;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    padding-top: 40rpx;
  }

  .mask_bottom view {
    flex: 1;
    height: 96rpx;
  }

  .mask_btn {
    width: 238rpx;
    height: 94rpx;
    line-height: 94rpx;
    font-size: 32rpx;
    border: 1rpx solid #3662DD;
    color: #3662DD;
  }

  .mask_btn2 {
    background: linear-gradient(to right, #5095F4, #3662DD);
    border: none;
    color: #FFFFFF;
  }

  .fr2 {
    display: flex;
    flex-direction: row;
  }

  .fr2 .v1 {
    width: 428rpx;
    height: 98rpx;
    line-height: 98rpx;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .fr2 .v2 {
    width: 58rpx;
    text-align: right;
    height: 98rpx;
  }

  .bgcor {
    background-color: red;
  }

  .loadMore {
    // padding: 0 0 120rpx;
    background-color: #F6F6F6;
  }

  .audit-box {
    color: #c30d23;
    font-size: 38rpx;
    font-weight: 600;
    text-align: center;
    padding: 120rpx 0;
  }

  /* 核销按钮样式 */
  .write-off-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rpx 16rpx;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 24rpx;
    color: #FFFFFF;
    font-size: 28rpx;
    gap: 8rpx;
  }

  .write-off-icon {
    width: 32rpx;
    height: 32rpx;
  }
</style>