调试

MrShi

14 小时以前 44363d47ed8e2bc0a649833692d47740a877b49e

 mini-program/pages/confirm-order/confirm-order.vue

@@ -1,71 +1,85 @@
<template>
   <view class="box">
   <view class="box" v-if="orderInfo">
      <view class="box-addr">
         <view class="box-addr-list">
            <view class="box-addr-list-row active">
            <view @click="changeOrderType(0)" :class="receiveType === 0 ? 'box-addr-list-row active' : 'box-addr-list-row'">
               <image src="/static/icon/ic_wuliu_sel@2x.png" mode="widthFix"></image>
               <text>物流配送</text>
            </view>
            <view class="box-addr-list-row">
            <view @click="changeOrderType(1)" :class="receiveType === 1 ? 'box-addr-list-row active' : 'box-addr-list-row'">
               <image src="/static/icon/ic_daodian@2x.png" mode="widthFix"></image>
               <text>门店自提</text>
            </view>
         </view>
         <!-- 物流配送 -->
         <!-- <view class="box-addr-val">
         <view class="box-addr-val" v-if="receiveType === 0">
            <image class="icon1" src="/static/icon/ic_location@2x.png" mode="widthFix"></image>
            <view class="info">
               <view class="info-top">
                  <text>李金平</text>
                  <text>181777889338</text>
               </view>
               <view class="info-bottom">
                  安徽省合肥市经开区松谷路凤凰国际B座808 豆米科技有限公司
            <view class="info" @click="jumpAddr">
               <template v-if="addr">
                  <view class="info-top">
                     <text>{{addr.name}}</text>
                     <text>{{addr.phone}}</text>
                  </view>
                  <view class="info-bottom">
                     {{addr.areaDetail}}{{addr.addr}}
                  </view>
               </template>
               <view class="info-wu" v-else>
                  <text>选择地址</text>
                  <image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
               </view>
            </view>
            <image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
         </view> -->
            <image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix" v-if="addr"></image>
         </view>
         <!-- 门店自提 -->
         <view class="box-addr-val">
            <image class="icon1" src="/static/icon/ic_address@2x1.png" mode="widthFix"></image>
            <view class="info">
               <view class="info-top">
                  <text>XXX经销商</text>
               </view>
               <view class="info-bottom">
                  安徽省合肥市经开区松谷路凤凰国际B座808室
         <template v-if="receiveType === 1">
            <view class="box-addr-val" @click="openShop">
               <image class="icon1" src="/static/icon/ic_address@2x1.png" mode="widthFix"></image>
               <template v-if="shopId">
                  <view class="info">
                     <view class="info-top">
                        <text>{{shopId.name}}</text>
                     </view>
                     <view class="info-bottom">
                        {{shopId.addr}}
                     </view>
                  </view>
                  <image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
               </template>
               <view class="info-wu" v-else>
                  <text>选择门店</text>
                  <image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
               </view>
            </view>
            <image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
         </view>
         <view class="box-addr-time">
            <text>营业时间：</text>
            <text>周一至周五 09:00-19:00</text>
         </view>
         <view class="box-addr-dz">
            <view class="box-addr-dz-left">
               <text>联系电话：</text>
               <text>0551-87899903</text>
            <view class="box-addr-time" v-if="shopId">
               <text>营业时间：</text>
               <text>{{shopId.startTime}}</text>
            </view>
            <view class="box-addr-dz-r">
               <image src="/static/icon/ic_address@2x.png" mode="widthFix"></image>
               <text>1.3km</text>
            <view class="box-addr-dz" v-if="shopId">
               <view class="box-addr-dz-left" @click="show3 = true">
                  <text>联系电话：</text>
                  <text>{{shopId.phone}}</text>
               </view>
               <view class="box-addr-dz-r">
                  <image src="/static/icon/ic_address@2x.png" mode="widthFix"></image>
                  <text>{{shopId.distance}}km</text>
               </view>
            </view>
         </view>
         </template>
      </view>
      <view class="box-shop">
         <view class="item">
         <view class="item" v-for="(item, index) in orderInfo.goodsCalculateList" :key="index">
            <view class="item-image">
               <image src="/static/logo.png" mode="widthFix"></image>
               <image :src="item.skuImg" mode="widthFix"></image>
            </view>
            <view class="item-info">
               <view class="item-info-title">中联艾禾宽齿 适用雷沃/中联/久保田</view>
               <view class="item-info-title">{{item.name}}</view>
               <view class="item-info-bottom">
                  <view class="price">¥499.00</view>
                  <view class="price">¥{{item.skuAmount}}</view>
                  <view class="num">
                     <view class="num-add">-</view>
                     <view class="num-total">0</view>
                     <view class="num-add">+</view>
                     <!-- <view class="num-add">-</view> -->
                     <view class="num-total">数量：{{item.goodsNum}}</view>
                     <!-- <view class="num-add">+</view> -->
                  </view>
               </view>
            </view>
@@ -75,166 +89,424 @@
            <view class="info-item">
               <view class="info-item-label">商品总价</view>
               <view class="info-item-price">
                  <text>897</text>
                  <text>.00</text>
                  <text>{{orderInfo.amount}}</text>
               </view>
            </view>
            <view class="info-item">
               <view class="info-item-label">运费</view>
               <view class="info-item-price1">¥10.00</view>
               <view class="info-item-price1">¥{{orderInfo.mailAmount}}</view>
            </view>
            <view class="info-item">
               <view class="info-item-label">优惠券</view>
               <view class="info-item-price1">
                  -¥100.00
               <view class="info-item-price1" @click="show = true">
                  -¥{{orderInfo.couponAmount}}
                  <image src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
               </view>
            </view>
            <view class="info-item">
               <view class="info-item-label">积分抵扣</view>
               <view class="info-item-price1">
                  -¥10.00
               <view class="info-item-price1" @click="show1 = true">
                  -¥{{orderInfo.integralAmount}}
                  <image src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
               </view>
            </view>
            <view class="info-item">
               <view class="info-item-label" style="color: #222222; font-size: 30rpx; font-weight: 600;">应付款</view>
               <view class="info-item-price2">
                  <text>797</text>
                  <text>.00</text>
                  <text>{{orderInfo.payAmount}}</text>
               </view>
            </view>
         </view>
      </view>
      <view class="remark">
         <view class="remark-label">订单备注</view>
         <input type="text" placeholder="请输入备注" />
         <input type="text" v-model="remark" placeholder="请输入备注" />
      </view>
      <view class="play">
         <view class="play-info">
            <image src="/static/icon/order_ic_wepay@2x.png" mode="widthFix"></image>
            <text>微信支付</text>
         </view>
         <image src="/static/icon/ic_agree@2x.png" mode=""></image>
         <image src="/static/icon/cart_ic_sel@2x.png" mode="widthFix"></image>
      </view>
      <view class="footer">
         <view class="edit">
            <view class="edit-btn">立即支付 ¥799.00</view>
            <view class="edit-btn" @click="payment">立即支付 ¥{{orderInfo.payAmount}}</view>
         </view>
         <view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
      </view>
      <!-- 优惠券 -->
      <u-popup :show="show" round="15" :closeable="true" mode="bottom">
      <u-popup :show="show" round="15" :closeable="true" @close="show = false" mode="bottom">
         <view class="coupon">
            <view class="coupon-title">选择优惠券</view>
            <view class="coupon-list">
               <view class="coupon-list-item">
                  <view class="jiage">
                     <text>100</text>
                     <text>满300可用</text>
            <scroll-view scroll-y class="coupon-list">
               <view class="coupon-list-item" v-for="(item, index) in orderInfo.memberCouponList" :key="index" @click="selectCoupon(index)">
                  <view class="jiage" v-if="item.couponType === 0">
                     <text>{{item.price}}</text>
                     <text>满{{item.limitPrice}}可用</text>
                  </view>
                  <view class="jiage1" v-if="item.couponType === 1">
                     <text>{{item.price}}</text>
                     <text>满{{item.limitPrice}}可用</text>
                  </view>
                  <view class="juaninfo">
                     <view class="juaninfo-info">
                        <text>新客专享</text>
                        <text>2020.5.25 日到期</text>
                        <text>{{item.name}}</text>
                        <text>{{item.endDate.substring(0, 10)}} 日到期</text>
                     </view>
                     <image src="/static/icon/ic_agree@2x.png" mode="widthFix"></image>
                     <image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-if="!item.active"></image>
                     <image src="/static/icon/cart_ic_sel@2x.png" mode="widthFix" v-else></image>
                  </view>
               </view>
               <view class="coupon-list-item disable">
                  <view class="jiage">
                     <text>100</text>
                     <text>满300可用</text>
                  </view>
                  <view class="juaninfo">
                     <view class="juaninfo-info">
                        <text>新客专享</text>
                        <text>2020.5.25 日到期</text>
                     </view>
                     <image src="/static/icon/ic_agree@2x.png" mode="widthFix"></image>
                  </view>
               </view>
            </view>
            <view class="coupon-btn">确定</view>
            </scroll-view>
            <view class="coupon-btn" @click="confirmCoupon">确定</view>
         </view>
      </u-popup>
      <!-- 积分 -->
      <u-popup :show="show1" round="15" :closeable="true" mode="bottom">
      <u-popup :show="show1" round="15" @close="show1 = false" :closeable="true" mode="bottom">
         <view class="coupon">
            <view class="coupon-title">使用积分</view>
            <view class="coupon-content">
               <view class="coupon-content-a">
                  <text>当前积分：</text>
                  <text>1200</text>
                  <text>{{orderInfo.surplusIntegral || 0}}</text>
               </view>
               <view class="coupon-content-b">
                  <text>本单可用积分：1000</text>
                  <image src="/static/icon/ic_agree_sel@2x.png" mode="widthFix"></image>
               <view class="coupon-content-b" @click="useIntegralCopy = useIntegralCopy === 1 ? 0 : 1">
                  <text>本单可用积分：{{orderInfo.deductIntegral}}</text>
                  <image src="/static/icon/ic_agree_sel@2x.png" mode="widthFix" v-if="useIntegralCopy === 1"></image>
                  <image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-else></image>
               </view>
            </view>
            <view class="coupon-btn">确定</view>
            <view class="coupon-btn" @click="confirmJF">确定</view>
         </view>
      </u-popup>
      <!-- 门店 -->
      <u-popup :show="show2" round="15" :closeable="true" mode="bottom">
      <u-popup :show="show2" round="15" @close="show2 = false" :closeable="true" mode="bottom">
         <view class="coupon">
            <view class="coupon-title">选择门店</view>
            <view class="coupon-search">
               <view class="coupon-search-city">
                  <text>合肥市</text>
            <view class="coupon-search" v-if="isPosition">
               <view class="coupon-search-city" @click="jumpCity">
                  <text>{{cityName}}</text>
                  <u-icon name="arrow-down" color="#999999" size="13"></u-icon>
               </view>
               <view class="coupon-search-input">
                  <u-search placeholder="输入门店名称" height="35" searchIconColor="#999999" borderColor="#eeeeee"
                     bgColor="#F9F9FB" :showAction="false" v-model="keyword" />	
                     bgColor="#F9F9FB" :showAction="false" v-model="shopName" @search="getShopLists" />	
               </view>
            </view>
            <scroll-view scroll-y>
               <view class="dian active" v-for="(item, index) in 10" :key="index">
                  <view class="dian-top">
                     <view class="dian-top-image">
                        <image src="/static/logo.png" mode="widthFix"></image>
                     </view>
                     <view class="dian-top-info">
                        <view class="dian-top-info-title">
                           <text>XXX经销商</text>
                           <text>距离1.2km</text>
               <template v-if="isPosition">
                  <view :class="item.active ? 'dian active' : 'dian'" @click="seleShop(index)" v-for="(item, index) in shopList" :key="index">
                     <view class="dian-top">
                        <view class="dian-top-image">
                           <image :src="item.imgFullUrl" mode="widthFix"></image>
                        </view>
                        <view class="dian-top-info-val">陵泉路358号红星美凯龙A馆3楼中央电梯旁P2301-P2308</view>
                        <view class="dian-top-info">
                           <view class="dian-top-info-title">
                              <text>{{item.name}}</text>
                              <text>距离{{item.distance}}km</text>
                           </view>
                           <view class="dian-top-info-val">{{item.addr}}</view>
                        </view>
                     </view>
                     <view class="dian-bottom">
                        <text>营业时间：{{item.startTime}}</text>
                        <view class="dian-bottom-icon">
                           <image src="/static/icon/ic_phonecall@2x.png" mode="widthFix" @click="dianhua(item.phone)"></image>
                           <image src="/static/icon/ic_distance@2x.png" mode="widthFix" @click="openLoation(item)"></image>
                        </view>
                     </view>
                  </view>
                  <view class="dian-bottom">
                     <text>营业时间：周一至周五 09:30-17:00</text>
                     <view class="dian-bottom-icon">
                        <image src="/static/icon/ic_phonecall@2x.png" mode="widthFix"></image>
                        <image src="/static/icon/ic_distance@2x.png" mode="widthFix"></image>
                     </view>
               </template>
               <template v-else>
                  <view class="wushuju">
                     <image src="/static/images/img_dingwei@2x.png" mode="widthFix"></image>
                     <view class="wushuju-a">定位失败</view>
                     <view class="wushuju-b">请开启定位获取位置信息</view>
                     <view class="wushuju-c" @click="goToAppSetting">开启定位</view>
                  </view>
               </view>
               </template>
            </scroll-view>
            <view class="coupon-btn">确定选择</view>
            <view class="coupon-btn" v-if="isPosition" @click="confirmMD">确定选择</view>
         </view>
      </u-popup>
      <!-- 联系电话 -->
      <u-popup :show="show3" round="15" :closeable="true" mode="bottom">
      <u-popup :show="show3" round="15" @close="show3 = false" :closeable="true" mode="bottom">
         <view class="coupon">
            <view class="coupon-title">联系电话</view>
            <view class="coupon-phone">0551-87899903</view>
            <view class="coupon-phone" @click="dianhua(shopId.phone)">{{shopId.phone}}</view>
         </view>
      </u-popup>
   </view>
</template>

<script>
   var QQMapWX = require('@/utils/qqmap-wx-jssdk.js')
   import { mapState } from 'vuex'
   export default {
      computed: {
         ...mapState(['position'])
      },
      data() {
         return {
            show: false,
            show1: false,
            show2: false,
            show3: true,
            keyword: ''
            show3: false,
            shopName: '',
            orderInfo: null,
            addr: null,
            remark: '',
            cityName: '',
            useIntegralCopy: 0,
            useIntegral: 0,
            receiveType: 0,
            couponId: null,
            shopId: null,
            payDetailRequestList: [],
            shopList: [],
            isPosition: true,
            lat: '',
            lgt: '',
         };
      },
      onLoad(option) {
         const shop = uni.getStorageSync('shop');
         if (shop) {
            this.payDetailRequestList = shop
            uni.removeStorageSync('shop');
         }
         uni.$on('update', (data) => {
            this.addr = data
            this.getOrderInfo()
         })
         uni.$on('city', (data) => {
            this.cityName = data
            this.getShopLists()
         })
         this.getDefaultAddr()
      },
      methods: {
         goToAppSetting() {
            var that = this;
             uni.openSetting({
                 success: (res) => {
                  if (res.authSetting['scope.userLocation']) {
                     this.isPosition = true
                     that.positioning()
                  }
                 }
             });
         },
         // 定位
         positioning() {
            var that = this;
            uni.getLocation({
               type: 'gcj02',
               highAccuracyExpireTime: 3000,
               isHighAccuracy: true,
               success: function (addr) {
                  const locParam = { latitude: addr.latitude, longitude: addr.longitude };
                  const qqmapsdk = new QQMapWX({
                     key: 'HEIBZ-QJLLM-SZ36X-6ZBHI-S6Y2J-S6FND'
                  });
                  qqmapsdk.reverseGeocoder({
                     locParam,
                     success: function(res) {
                        that.cityName = res.result.ad_info.city
                        that.lat = res.result.location.lat
                        that.lgt = res.result.location.lng
                        that.getShopLists(1)
                     },
                     fail: (err) => {
                        console.error('获取位置失败===========', err);
                     }
                  });
               }
            });
         },
			
         jumpCity() {
            uni.navigateTo({
               url: '/pages/select-city/select-city'
            })
         },
         openShop() {
            // 检查用户是否已经授权位置权限
            uni.getSetting({
               success: (res) => {
                  if (res.authSetting['scope.userLocation']) {
                     // 用户已授权位置权限
                     this.isPosition = true
                     this.positioning()
                  } else {
                     // 用户未授权位置权限
                     this.isPosition = false
                     this.show2 = true
                     // this.getShopLists(1)
                  }
               }
            });
         },
         // 打电话
         dianhua(phoneNumber) {
            uni.makePhoneCall({
               phoneNumber
            })
         },
         // 打开位置
         openLoation(item) {
            uni.openLocation({
               latitude: item.latitude,
               longitude: item.longitude,
               name: item.name,
               address: item.addr
            })
         },
         seleShop(index) {
            this.shopList.forEach((item, i) => {
               item.active = index === i
            })
         },
         confirmMD() {
            if (this.shopList.filter(item => item.active).length === 0) return uni.showToast({
               title: '请选择门店',
               icon: 'none'
            })
            this.shopId = this.shopList.filter(item => item.active)[0]
            this.show2 = false
         },
         // 获取附近门店
         getShopLists(type) {
            this.$u.api.getShopList({
               cityName: this.cityName,
               lat: this.lat,
               lgt: this.lng,
               shopName: this.shopName
            }).then(res => {
               if (res.code === 200) {
                  res.data.forEach(item => {
                     item.active = false
                  })
                  this.shopList = res.data
                  if (type === 1) {
                     this.show2 = true
                  }
               }
            })
         },
         // 支付
         payment() {
            var that = this;
            this.$u.api.orderPay({
               addressId: this.addr ? this.addr.id : null,
               couponId: this.couponId,
               payDetailRequestList: this.payDetailRequestList,
               receiveType: this.receiveType,
               useIntegral: this.useIntegral,
               remark: this.remark,
               titlePrice: this.orderInfo.payAmount,
               shopId: this.shopId ? this.shopId.id : null
            }).then(res => {
               if (res.code === 200) {
                  // 积分抵扣
                  if (res.data.payType === 1) {
                     // if (this.receiveType === 0) {
                        uni.redirectTo({
                           url: `/pagesA/pages/order-details/order-details?id=${res.data.orderId}&userType=0`
                        })
                     // } else {
                     //    uni.reLaunch({
                     //       url: `/pages/payment-successful/payment-successful?id=${res.data.orderId}&userType=0`
                     //    })
                     // }
                  } else {
                     wx.requestPayment({
                        timeStamp: res.data.response.timeStamp,
                        nonceStr: res.data.response.nonceStr,
                        package: res.data.response.packageValue,
                        signType: res.data.response.signType,
                        paySign: res.data.response.paySign,
                        success (pay) {
                           if (pay.errMsg === "requestPayment:ok") {
                              // if (that.receiveType === 0) {
                                 uni.redirectTo({
                                    url: `/pagesA/pages/order-details/order-details?id=${res.data.orderId}&userType=0`
                                 })
                              // } else {
                              //    uni.reLaunch({
                              //       url: `/pages/payment-successful/payment-successful?id=${res.data.orderId}&userType=0`
                              //    })
                              // }
                           } else {
                              uni.showToast({ title: '订单取消支付', icon: 'none' })
                           }
                        }
                     })
                  }
               }
            })
         },
         // 确定使用积分
         confirmJF() {
            this.useIntegral = this.useIntegralCopy
            this.show1 = false
            this.getOrderInfo()
         },
         // 确定选择优惠券
         confirmCoupon() {
            let arr = this.orderInfo.memberCouponList.filter(item => item.active)
            if (arr.length > 0) {
               this.couponId = arr[0].id
            }
            this.show = false
            this.getOrderInfo()
         },
         // 选择优惠券
         selectCoupon(i) {
            this.orderInfo.memberCouponList.forEach((item, index) => {
               item.active = index === i
            })
         },
         // 获取订单详细信息
         getOrderInfo() {
            this.$u.api.orderPayConfirm({
               addressId: this.addr ? this.addr.id : null,
               couponId: this.couponId,
               payDetailRequestList: this.payDetailRequestList,
               receiveType: this.receiveType,
               useIntegral: this.useIntegral
            }).then(res => {
               if (res.code === 200) {
                  if (!res.data.memberCouponList) {
                     res.data.memberCouponList = []
                  } else {
                     res.data.memberCouponList.forEach(item => {
                        item.active = false
                     })
                  }
                  this.orderInfo = res.data
               }
            })
         },
         changeOrderType(type) {
            this.receiveType = type
            this.getOrderInfo()
         },
         jumpAddr() {
            uni.navigateTo({
               url: '/pages/address/address?type=1'
            })
         },
         getDefaultAddr() {
            this.$u.api.findDefault()
               .then(res => {
                  if (res.code === 200) {
                     this.addr = res.data
                     this.getOrderInfo()
                  }
               })
         }
      }
   }
</script>
@@ -252,7 +524,43 @@
         box-sizing: border-box;
         scroll-view {
            width: 100%;
            max-height: 65vh;
            height: 65vh;
            .wushuju {
               width: 100%;
               height: 100%;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               image {
                  width: 140rpx;
                  height: 140rpx;
               }
               .wushuju-a {
                  font-weight: 600;
                  font-size: 30rpx;
                  color: #111111;
                  margin-top: 20rpx;
               }
               .wushuju-b {
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #999999;
                  margin-top: 20rpx;
               }
               .wushuju-c {
                  width: 168rpx;
                  height: 72rpx;
                  line-height: 72rpx;
                  font-weight: 500;
                  font-size: 26rpx;
                  color: #FFFFFF;
                  text-align: center;
                  background: #004096;
                  border-radius: 44rpx;
                  margin-top: 40rpx;
               }
            }
            .active {
               border: 2rpx solid #004096 !important;
               background: #E8F2FF !important;
@@ -434,6 +742,7 @@
         }
         .coupon-list {
            width: 100%;
            max-height: 600rpx;
            display: flex;
            flex-direction: column;
            .disable {
@@ -481,6 +790,35 @@
                        color: #E4001D;
                        &::before {
                           content: '￥';
                           font-weight: 600;
                           font-size: 24rpx;
                           color: #E4001D;
                        }
                     }
                     &:nth-child(2) {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #E93047;
                        margin-top: 8rpx;
                     }
                  }
               }
               .jiage1 {
                  flex-shrink: 0;
                  width: 208rpx;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  border-right: 1rpx dashed #E3C1C1;
                  text {
                     &:nth-child(1) {
                        font-weight: 600;
                        font-size: 44rpx;
                        color: #E4001D;
                        &::after {
                           content: '折';
                           font-weight: 600;
                           font-size: 24rpx;
                           color: #E4001D;
@@ -868,6 +1206,7 @@
            }
            .info {
               flex: 1;
               min-height: 48rpx;
               display: flex;
               flex-direction: column;
               .info-top {
@@ -893,6 +1232,22 @@
                  color: #333333;
                  margin-top: 14rpx;
               }
               .info-wu {
                  flex: 1;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  text {
                     font-weight: 400;
                     font-size: 30rpx;
                     color: #333333;
                  }
                  image {
                     width: 16rpx;
                     margin: 0 !important;
                  }
               }
            }
            .icon2 {
               flex-shrink: 0;
@@ -901,6 +1256,22 @@
               margin-left: 40rpx;
               margin-top: 55rpx;
            }
            .info-wu {
               flex: 1;
               height: 48rpx;
               display: flex;
               align-items: center;
               justify-content: space-between;
               text {
                  font-weight: 400;
                  font-size: 30rpx;
                  color: #333333;
               }
               image {
                  width: 16rpx;
                  margin: 0 !important;
               }
            }
         }
      }
   }