kxmall-ui/kxmall-app-ui/pages/order/detail.vue

<template>
  <view>
    <view class="map" v-if="[14,16,20,30].indexOf(orderDetail.status)>-1 && orderDetail.shippingType == 1">
      <map style="height: 600rpx;width:750rpx" show-location id="map" ref="map" :markers="markers" :polyline="polyline">
      </map>
    </view>
    <!-- 核销码显示区域 -->
    <view class="verification-code" v-if="orderDetail.status === 20 && orderDetail.shippingType == 2">
      <image :src="verificationCode" mode="widthFix" style="width: 300rpx; height: 300rpx"></image>
      <view class="code-text">核销码: {{verificationText}}</view>
      <view class="code-hint">请向店员出示此核销码</view>
    </view>
    <view class="state">
      <view class="state-text" v-if="orderDetail.status !== 10"
        :style="state == 5 || state == 8?'color:#1B1C33;font-size:20px':''">
        {{ orderDetail.orderType === 1 ? '(自提)' : '' }}{{ stateText }}
      </view>
      <view class="state-text" v-if="state === 0">
        {{'等待支付 剩余'+ num(minutes)}}:{{num(seconds)}}
      </view>
      <view class="state-timeText">
        {{state == 0?'逾期未支付将会自动取消':''}}
        {{ (state == 1 || state == 2)&& orderDetail.shippingType==1?'预约送达时间':''}}
        {{ (state == 1 || state == 2)&& orderDetail.shippingType==2?'预约取货时间':''}}
        {{state == 3 || state == 4?'订单已完成':''}}
        {{state == 5?'订单已取消':''}}
        {{state == 8?'订单已取消':''}}
        {{orderDetail.status == 12 ? '已拼单'+ orderDetail.groupShopVo.alreadyBuyNumber + '件' : ''}}
        <!-- {{orderDetail.status==80&&orderDetail.status==90?'订单已取消':orderDetail.status==10&&orderDetail.status==12?'逾期未支付将会自动取消':orderDetail.status==40&&orderDetail.status==50?'订单已送达':orderDetail.status==70?'订单已取消':'预约送达时间 '}} -->
      </view>
      <view class="state-time">
        {{ (state == 1 || state == 2)&& orderDetail.shippingType==1?orderDetail.predictTime:''}}
        {{ (state == 1 || state == 2)&& orderDetail.shippingType==2?orderDetail.predictTime.replaceAll('送达','取货'):''}}
        <!-- {{state == 3 || state == 4?'订单已完成':''}} -->
        {{state == 3 || state == 4 || state == 5 || state ==8? timeFormat(orderDetail.updateTime) :''}}
        {{orderDetail.status == 12 ? '拼团结束:'+ orderDetail.groupShopVo.endTime : ''}}
      </view>
      <view @click="refundOrder" class="state-btn state-btn-prohibit" v-if="state == 1 && !orderDetail.payIntegral"
        style="margin: 12px auto;">
        申请退款
      </view>
      <view style="display: flex; justify-content: center; align-items: center; margin: 12px auto;" v-if="state == 3">
        <view @click="orderAfterSales" class="state-btn state-btn-prohibit" style="margin: 12px auto;">
          申请售后
        </view>
        <view @click="appraiseOrder" class="state-btn" style="margin: 12px auto;">
          立即评价
        </view>
      </view>
      <view @click="orderAfterSales" class="state-btn state-btn-prohibit" v-if="orderDetail.status == 50" style="margin: 12px auto;">
        申请售后
      </view>
      <view v-if="orderDetail.status === 10" style="display: flex;justify-content: center;">
        <view open-type="contact" class="state-btn state-btn-prohibit" style="width: 69px;"
          @click="naviageToPage('pages/service/service')">
          <button open-type="contact" class="contact-btn">客服</button>
        </view>
        <view @click="cancelOrder" class="state-btn state-btn-prohibit">
          取消订单
        </view>
        <view @click="confirm" class="state-btn state-btn-ac">
          立即付款
        </view>
      </view>
    </view>

    <view class="goods">

      <view class="goods-one" v-for="(item, index) in orderDetail.productList" :key="index">
        <image class="goods-img" :src="JSON.parse(item.img)[0].url"></image>
        <view class="goods-text">
          <view class="goods-tag">
            <view class="goods-name">{{item.productTitle}}</view>
            <view class="goods-price">￥{{item.price}}</view>

          </view>
          <view class="goods-number">×{{item.num}}</view>
        </view>
      </view>
      <view v-if="orderDetail.couponPrice" class="yt-list-cell b-b">
        <text class="cell-tit clamp">
          优惠券减
        </text>
        <text class="cell-tip red">
          -￥{{ orderDetail.couponPrice | priceFormat }}
        </text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp" style="color: #333333;">配送费</text>
        <text class="cell-tip">{{orderDetail.freightPrice}}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp" style="color: #333333;">合计</text>
        <text class="cell-tip" v-if="!orderDetail.payIntegral">￥{{orderDetail.payPrice}}</text>
        <text class="cell-tip" style="color: red" v-if="orderDetail.payIntegral">积分{{orderDetail.payIntegral}}</text>
      </view>
    </view>


    <!-- 配送信息 -->
    <view class="yt-list">
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp yt-list-title">配送信息</text>

      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">联系地址</text>
        <text class="cell-tip">{{orderDetail.userAddress}}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">联系人 </text>
        <text class="cell-tip ">{{orderDetail.realName}}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">期望时间 </text>
        <text class="cell-tip ">{{orderDetail.predictTime}}</text>
      </view>

    </view>
    <!-- 支付信息 -->
    <view class="yt-list">
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp yt-list-title">支付信息</text>

      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">订单号</text>
        <text class="cell-tip">{{orderDetail.orderId}}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">备注信息 </text>
        <text class="cell-tip ">{{orderDetail.remark}}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">支付方式 </text>
        <text class="cell-tip ">{{showPayment(orderDetail.payChannel)}}</text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">下单时间 </text>
        <text class="cell-tip ">{{timeFormat(orderDetail.createTime)}}</text>
      </view>
      <view v-if="orderDetail.payTime" class="yt-list-cell b-b">
        <text class="cell-tit clamp">支付时间 </text>
        <text class="cell-tip ">{{timeFormat(orderDetail.payTime)}}</text>
      </view>

    </view>

    <!-- 底部 -->
    <!-- <view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price-tip">￥</text>
				<text class="price">{{orderDetail.actualPrice | priceFormat}}</text>
			</view>
			<text class="submit" @click="submit">提交订单</text>
		</view> -->

  </view>
</template>

<script>
  let riderTimer = null,
      timerInterval = null, // 添加定时器引用
    mapContext = null,
    riderLastLocation = null

  export default {
    filters: {
      priceFormat(price) {
        return price
      },
      dateFormat(time) {
        return 'temp'
        //return formatDate(new Date(time),'yyyy-MM-dd HH:mm')
      }
    },
    data() {
      return {
        verificationCode: '', // 核销码图片
        verificationText: '', // 核销码文本
        timeing: '2020-03-01 13:45',
        minutes: 0,
        seconds: 0,
        Total: 0,
        distributionFee: 123, //配送费
        // 配送信息
        DisInformation: {
          address: '广东省深证市中山大道1号星汇维港购物',
          contacts: '17671467812',
          expectedTime: '9月21日 13:20'
        },
        // 支付信息
        orderInformation: {
          orderNumber: '4567 8123 4567 890',
          information: '',
          paymentMethod: '微信支付',
          orderTime: '2018-04-28 13:58',
          paymentTime: '2018-04-28 13:58'
        },
        orderId: '',
        stateText: '', //状态文字说明
        orderDetail1: {
          skuList: [{
              img: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3529759643,1765872423&fm=26&gp=0.jpg',
              name: '芥蓝',
              price: 10,
              number: '2'
            },
            {
              img: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3529759643,1765872423&fm=26&gp=0.jpg',
              name: '芥蓝',
              price: 10,
              number: '2'
            }
          ],
          totalotPrice: 0,
          totalPrice: 0, //商品折扣（仅算VIP和限时打折）后总价
          coupon: undefined,
          mono: '',
          orderDetail: [],
        },
        orderDetail: {
          skuList: [],
          totalotPrice: 0,
          totalPrice: 0, //商品折扣（仅算VIP和限时打折）后总价
          coupon: undefined,
          mono: '',
          status: 20
        },
        statusMap: {
          10: '未付款',
          12: '等待团购活动结束',
          14: '待配货',
          16: '配货中',
          20: '待出库',
          30: '待收货',
          32: '配送异常',
          40: '待评价',
          50: '已完成',
          60: '退款中',
          70: '已退款',
          80: '已取消',
          90: '已取消(系统)'
        },
        state: 4,
        markers: [{
            id: 1,
            longitude: null,
            latitude: null,
            iconPath: '../../static/icon/18.png',
            width: 40,
            height: 40
          },
          {
            id: 2,
            longitude: null,
            latitude: null,
            iconPath: '../../static/icon/08.png',
            width: 40,
            height: 40
          }
        ],
        polyline: []
      }
    },
    watch: {
      second: {
        handler(newVal) {
          this.num(newVal)

        }
      },
      minute: {
        handler(newVal) {
          this.num(newVal)
        }
      },
    },
    computed: {
      includePoints() {
        // return this.markers.map(({
        //   latitude,
        //   longitude
        // }) => {
        //   return {
        //     latitude,
        //     longitude
        //   }
        // })
        const {
          latitude,
          longitude
        } = this.markers[1]
        return [{
          latitude,
          longitude
        }]
      }
    },
    mounted() {
      const that = this
      uni.getLocation({
        success() {
          mapContext = uni.createMapContext('map', that)
        },
        fail(e) {
          uni.showModal({
            content: e
          })
        },
        complete() {
          that.loadData()
        }
      })
    },
    onLoad(option) {
      this.orderId = option.orderid
    },
    onUnload() {
      if (timerInterval) {
        clearInterval(timerInterval);
        timerInterval = null;
      }
      if (riderTimer) {
        clearTimeout(riderTimer)
        riderTimer = null
      }
      riderLastLocation = null
    },
    methods: {
      naviageToPage(page, title) {
        const that = this
        this.ismask = false
        if (title) {
          console.log(title, 'jinlai')
          title ? title : ''
          uni.navigateTo({
            url: page + '&title=' + title
          })
        } else {
          console.log(title)
          uni.navigateTo({
            url: page
          })
        }
        // console.log(that.categoryButtomList[index].title)

      },
      //申请退款
      //申请退款
      refundOrder() {
        const that = this
        uni.showModal({
          title: '申请退款',
          content: '请填写退款原因',
          editable: true, // 允许输入
          placeholderText: '请输入退款原因', // 输入框提示文字
          success: (e) => {
            if (e.confirm) {
              // 检查用户是否输入了退款原因
              if (!e.content || e.content.trim() === '') {
                that.$api.msg('请输入退款原因')
                return
              }

              // that.submiting = true
              that.$api.request('get', 'order/app/refund', {
                orderId: this.orderDetail.orderId,
                reason: e.content // 添加退款原因参数
              }, failres => {
                // that.submiting = false
                that.$api.msg(failres.msg)
              }).then(res => {
                that.loadData()
                // that.submiting = false
                // item.status = 80
              })
            }
          }
        })
      },
      //评价订单
      appraiseOrder() {
        uni.navigateTo({
          url: '/pages/order/appraise?orderid=' + this.orderDetail.id
        })
      },
      //申请售后
      orderAfterSales() {
        uni.navigateTo({
          url: "/pages/order/refund?id=" + this.orderDetail.id
        })
      },
      //取消订单
      cancelOrder(item) {
        const that = this
        uni.showModal({
          title: '取消？',
          content: '您确定要取消此订单吗？',
          success: (e) => {
            if (e.confirm) {
              // that.submiting = true
              that.$api.request('get', 'order/app/cancel', {
                orderId: this.orderDetail.orderId
              }, failres => {
                // that.submiting = false
                that.$api.msg(failres.msg)
              }).then(res => {
                that.loadData()
                // that.submiting = false
                // item.status = 80
              })
            }
          }
        })

      },
      // 倒计时
      num(n) {
        return n < 10 ? '0' + n : '' + n
      },
      timer() {
        var _this = this;
        this.countDown(); // 初始化倒计时

        // 清除之前的定时器
        if (this.timerInterval) {
          clearInterval(this.timerInterval);
        }

        this.timerInterval = setInterval(function() {
          if (_this.seconds === 0) {
            if (_this.minutes === 0) {
              clearInterval(_this.timerInterval);
              _this.autoCancelOrder(); // 时间到，自动取消订单
              return;
            }
            _this.minutes--;
            _this.seconds = 59;
          } else {
            _this.seconds--;
          }

          // 每分钟检查一次是否需要取消订单
          if (_this.seconds === 0 && _this.minutes % 1 === 0) {
            _this.countDown(); // 重新计算剩余时间，防止客户端时间不准
          }
        }, 1000);
      },
      sum() {
        var x = 0;
        for (var i = 0; i < this.orderDetail1.productList.length; ++i) {
          x += this.orderDetail1.productList[i].price;
        }
        console.log(x)
        this.Total = x
      },
      countDown() {
        const now = new Date().getTime();
        const createTime = new Date(this.orderDetail.createTime).getTime();
        const expireTime = createTime + (60000 * 15); // 15分钟后过期

        // 如果已经过期
        if (now >= expireTime) {
          this.minutes = 0;
          this.seconds = 0;
          this.autoCancelOrder(); // 自动取消订单
          return;
        }

        // 计算剩余时间
        const remainingTime = expireTime - now;
        this.minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
        this.seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

        // 如果剩余时间小于等于0，自动取消订单
        if (remainingTime <= 0) {
          this.minutes = 0;
          this.seconds = 0;
          this.autoCancelOrder();
        }
      },
      // 自动取消订单
      autoCancelOrder() {
        const that = this;
        if (this.orderDetail.status === 10) { // 只有未支付订单才需要取消
          that.$api.request('get', 'order/app/cancel', {
            orderId: this.orderDetail.orderId
          }, failres => {
            that.$api.msg(failres.msg);
          }).then(res => {
            //页面重新加载
            that.loadData(); // 刷新页面数据
            uni.showToast({
              title: '订单已自动取消',
              icon: 'none'
            });
          });
        }
      },
      //获取订单详情
      loadData() {
        const that = this
        that.$api.request('get', 'order/app/getOrderDetail', {
          orderId: that.orderId
        }).then(res => {
          that.orderDetail = res.data
          that.markers[0].longitude = res.data.longitude
          that.markers[0].latitude = res.data.latitude
          mapContext.moveToLocation({
            longitude: res.data.longitude,
            latitude: res.data.latitude
          })
          // 如果是自提订单且状态为待取货，获取核销码
          if (res.data.status === 20 && res.data.shippingType === 2) {
            that.getVerificationCode()
          }
          if (that.orderDetail.status === 10) {
            this.state = 0
            this.stateText = '待支付'
            this.timer()
            this.countDown()
          }
          if (res.data.status === 12) {
            this.state = 10
            this.stateText = '等待团购活动结束'
          }
          if (res.data.status === 14 || res.data.status === 16) {
            this.state = 1
            this.stateText = '备货中'
            this.getRiderLocation(res.data.postId, res.data.id)
          }
          if (res.data.status === 20 && res.data.shippingType===1) {
            this.state = 1
            this.stateText = '待配送'
            this.getRiderLocation(res.data.postId, res.data.id)
          }
          if (res.data.status === 20 && res.data.shippingType===2) {
            this.state = 1
            this.stateText = '待取货'
          }
          if (res.data.status === 30) {
            this.state = 2
            this.stateText = '配送中'
            this.getRiderLocation(res.data.postId, res.data.id)
          }
          if (res.data.status === 40) {
            this.state = 3
            this.stateText = '已完成'
          }
          if (res.data.status === 50) {
            this.state = 4
            this.stateText = '已完成'
          }
          if (res.data.status === 80 || res.data.status === 90) {
            this.state = 5
            this.stateText = '已取消'
          }
          if (res.data.status === 32) {
            this.state = 6
            this.stateText = '配送异常'
          }
          if (res.data.status === 60) {
            this.state = 7
            this.stateText = '退款中'
          }
          if (res.data.status === 70) {
            this.state = 8
            this.stateText = '已退款'
          }
          //this.sum()
        })

      },
      getRiderLocation(riderId, orderId) {
        this.$api.request('get', 'order/app/riderLocation', {
          riderId: riderId,
          orderId: orderId
        }).then(({
          data
        }) => {
          this.riderLocation = data
          this.markers[1].longitude = data.longitude
          this.markers[1].latitude = data.latitude
          if (riderLastLocation !== (data.latitude + ',' + data.longitude)) {
            mapContext.includePoints({
              padding: [100],
              points: [{
                longitude: data.longitude,
                latitude: data.latitude
              }, {
                longitude: this.orderDetail.longitude,
                latitude: this.orderDetail.latitude
              }],
              fail(e) {
                console.log(e)
              },
              success(res) {
                console.log(res)
              }
            })
            this.getRoute()
          }
          riderLastLocation = data.latitude + ',' + data.longitude
          if (riderTimer) {
            clearTimeout(riderTimer)
            riderTimer = null
          }
          riderTimer = setTimeout(() => {
            this.getRiderLocation(riderId, orderId)
          }, 30 * 1000)
        })
      },
      // 获取核销码
      getVerificationCode() {
        this.$api.request('get', 'order/app/verificationCode', {
          orderId: this.orderId
        }).then(res => {
          this.verificationCode = 'data:image/png;base64,' + res.data.image;
          this.verificationText = res.data.code; // 显示核销码文本
        })
      },
      getRoute() {
        var that = this;
        this.$api.request('get', 'https://restapi.amap.com/v5/direction/bicycling', {
          key: that.$api.defConfig().mapKey,
          origin: this.orderDetail.longitude + ',' + this.orderDetail.latitude,
          destination: this.riderLocation.longitude + ',' + this.riderLocation.latitude,
          show_fields: 'polyline'
        }).then(res => {
          const steps = res.route.paths[0].steps
          this.polyline = [{
            points: [],
            color: '#5298ff',
            width: 5
          }]
          steps.forEach(({
            polyline
          }) => {
            const paths = polyline.split(';')
            paths.forEach(el => {
              const _ = el.split(',')
              this.polyline[0].points.push({
                latitude: _[1],
                longitude: _[0]
              })
            })
          })
        })
      },
      timeFormat(time) {
        if (time == undefined) {
          return
        }
        time = time.replace(/\-/g, '/')
        var date = new Date(time);
        var month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + parseInt(date.getMonth() + 1)
        var day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
        return date.getFullYear() + '-' + month + '-' + day + ' ' + date.getHours() + ':' + date.getMinutes()
      },
      showPayment(val) {
        if (val === 'BALANCE') {
          return '余额支付'
        }
        if (val === 'INTEGRAL') {
          return '积分支付'
        }
        return '微信支付'
      },
      //确认支付
      confirm() {
        // #ifdef APP-PLUS
        this.$api.msg('演示环境不支持支付')
        return
        // #endif
        uni.showLoading({})
        const that = this
        that.$api.request('get', 'order/app/wxPrepay', {
          orderId: this.orderDetail.orderId
        }, failres => {
          that.submiting = false
          that.$api.msg(failres.msg)
        }).then(prepayRes => {
          uni.hideLoading()
          that.submiting = false
          //#ifdef MP-WEIXIN
          const payParam = {
            appId: prepayRes.data.appId,
            nonceStr: prepayRes.data.nonceStr,
            package: prepayRes.data.packageValue,
            timeStamp: prepayRes.data.timeStamp,
            signType: prepayRes.data.signType,
            paySign: prepayRes.data.paySign,
          }
          //#endif
          //#ifdef APP-PLUS
          const payParam = {
            appid: prepayRes.data.appId,
            noncestr: prepayRes.data.nonceStr,
            package: prepayRes.data.packageValue,
            partnerid: prepayRes.data.partnerId,
            prepayid: prepayRes.data.prepayId,
            timestamp: parseInt(prepayRes.data.timeStamp),
            sign: prepayRes.data.sign,
            signType: 'MD5'
          }
          //#endif
          //#ifdef MP-WEIXIN || APP-PLUS
          uni.requestPayment({
            provider: 'wxpay',
            //#ifdef MP-WEIXIN
            ...payParam,
            //#endif
            //#ifdef APP-PLUS
            orderInfo: payParam,
            //#endif
            success: function(res) {
              uni.redirectTo({
                url: '/pages/pay/success'
              })
            },
            fail: function(res) {
              // console.log("支付过程失败");
              // that.$api.msg(JSON.stringify(res))
            },
            complete: function(res) {
              console.log("支付过程结束")
            }
          });
          //#endif
          //#ifdef H5
          that.$jweixin.chooseWXPay({
            nonceStr: prepayRes.data.nonceStr,
            timestamp: prepayRes.data.timeStamp,
            package: prepayRes.data.packageValue,
            signType: prepayRes.data.signType,
            paySign: prepayRes.data.paySign,
            success: (e) => {
              //支付成功
              uni.redirectTo({
                url: '/pages/pay/success'
              })
            },
            fail: function(res) {
              console.log("支付过程失败");
              that.$api.msg(JSON.stringify(res))
            },
            complete: function(res) {
              console.log("支付过程结束")
            }
          })
          //#endif
        })
      }
    }
  }
</script>

<style lang="scss">

.verification-code {
  margin: 20px auto;
  text-align: center;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
}

.code-text {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.code-hint {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

  page {
    background: $page-color-base;
    padding-bottom: 100upx;
  }

  .contact-btn {
    border: none;
    background-color: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    height: inherit;
    width: inherit;
  }

  .contact-btn::after {
    border: none;
  }

  .state {
    text-align: center;
    padding: 17px 0 12px;
    background-color: #fff;
    width: 100%;

    .state-text {
      font-size: 40upx;
      color: #2AAC34;

    }

    .state-timeText {
      color: #717171;
      font-size: 24upx;
      margin: 6px 0 2px;
    }

    .state-time {
      color: #1B1C33;
      font-size: 28upx;
    }

    .state-btn {
      width: 204upx;
      height: 68upx;
      line-height: 66upx;
      border-radius: 100px;
      margin: 0 auto;
      border: 1px solid #ddd;
      margin-top: 24upx;
      font-size: 15px;
      margin: 24upx 0 0 24upx;

    }

    .state-btn-prohibit {
      border-color: #C4C4CC;
      color: #C4C4CC;
    }

    .state-btn-ac {
      border-color: #2AAC34;
      color: #2AAC34;
      background-color: #2AAC34;
      color: #fff;
    }


  }

  .goods {
    margin-top: 20upx;
    background-color: #FFFFFF;
    overflow: hidden;

    .goods-one {
      padding: 40upx 0 30upx 0;
      margin: 0 30upx;
      height: 190upx;
      border-bottom: 1px solid #F1F1F1;
    }

    .goods-img {
      margin-top: 2upx;
      width: 118upx;
      height: 110upx;
      float: left;
    }

    .goods-text {
      margin-top: 6upx;
      margin-left: 32upx;
      width: 538upx;
      height: 110upx;
      float: left;
    }

    .goods-name {
      width: 500upx;
      line-height: 44upx;
      overflow: hidden;
      color: #333333;
      font-size: 32upx;
    }

    .goods-tag {
      margin-top: 10upx;
      display: flex;
      justify-content: space-between;
      align-items: cenetr;
    }

    .goods-price {
      float: left;
      color: #333333;
      font-size: 32upx;
      line-height: 44upx;
    }

    .goods-yprice {
      margin-left: 16upx;
      float: left;
      color: #AEAEAE;
      font-size: 24upx;
      line-height: 44upx;
      text-decoration: line-through;
    }

    .goods-number {
      float: left;
      color: #333333;
      font-size: 32upx;
    }
  }

  .address-section {
    padding: 30upx 0;
    background: #fff;
    position: relative;

    .order-content {
      display: flex;
      align-items: center;
    }

    .icon-shouhuodizhi {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90upx;
      color: #888;
      font-size: 44upx;
    }

    .cen {
      display: flex;
      flex-direction: column;
      flex: 1;
      font-size: 28upx;
      color: $font-color-dark;
    }

    .name {
      font-size: 34upx;
      margin-right: 24upx;
    }

    .address {
      margin-top: 16upx;
      margin-right: 20upx;
      color: $font-color-light;
    }

    .icon-you {
      font-size: 32upx;
      color: $font-color-light;
      margin-right: 30upx;
    }

    .a-bg {
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 100%;
      height: 5upx;
    }
  }

  .goods-section {
    margin-top: 16upx;
    background: #fff;
    padding-bottom: 1px;

    .g-header {
      display: flex;
      align-items: center;
      height: 84upx;
      padding: 0 30upx;
      position: relative;
    }

    .logo {
      display: block;
      width: 50upx;
      height: 50upx;
      border-radius: 100px;
    }

    .name {
      font-size: 30upx;
      color: $font-color-base;
      margin-left: 24upx;
    }

    .g-item {
      display: flex;
      margin: 20upx 30upx;

      image {
        flex-shrink: 0;
        display: block;
        width: 140upx;
        height: 140upx;
        border-radius: 4upx;
      }

      .right {
        flex: 1;
        padding-left: 24upx;
        overflow: hidden;
      }

      .title {
        font-size: 30upx;
        color: $font-color-dark;
      }

      .spec {
        font-size: 26upx;
        color: $font-color-light;
      }

      .price-box {
        display: flex;
        align-items: center;
        font-size: 32upx;
        color: $font-color-dark;
        padding-top: 10upx;

        .price {
          margin-bottom: 4upx;
        }

        .number {
          font-size: 26upx;
          color: $font-color-base;
          margin-left: 20upx;
        }
      }

      .step-box {
        position: relative;
      }
    }
  }

  .yt-list {
    margin-top: 16upx;
    background: #fff;

  }

  .yt-list-cell-bor {
    border-bottom: 1px solid #F1F1F1;
  }

  .yt-list-cell {
    display: flex;
    align-items: center;
    padding: 10upx 30upx 10upx 40upx;
    line-height: 70upx;
    position: relative;

    &.cell-hover {
      background: #fafafa;
    }

    &.b-b:after {
      left: 30upx;
    }

    .cell-icon {
      height: 32upx;
      width: 32upx;
      font-size: 22upx;
      color: #fff;
      text-align: center;
      line-height: 32upx;
      background: #f85e52;
      border-radius: 4upx;
      margin-right: 12upx;

      &.hb {
        background: #ffaa0e;
      }

      &.lpk {
        background: #3ab54a;
      }

    }

    .cell-more {
      align-self: center;
      font-size: 24upx;
      color: $font-color-light;
      margin-left: 8upx;
      margin-right: -10upx;
    }

    .cell-tit {
      flex: 1;
      font-size: 26upx;
      color: $font-color-light;
      margin-right: 10upx;
    }

    .cell-tip {
      font-size: 26upx;
      color: $font-color-dark;

      &.disabled {
        color: $font-color-light;
      }

      &.active {
        color: $base-color;
      }

      &.red {
        color: $base-color;
      }
    }

    &.desc-cell {
      .cell-tit {
        max-width: 90upx;
      }
    }

    .desc {
      flex: 1;
      font-size: $font-base;
      color: $font-color-dark;
    }

    .yt-list-title {

      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
  }

  /* 支付列表 */
  .pay-list {
    padding-left: 40upx;
    margin-top: 16upx;
    background: #fff;

    .pay-item {
      display: flex;
      align-items: center;
      padding-right: 20upx;
      line-height: 1;
      height: 110upx;
      position: relative;
    }

    .icon-weixinzhifu {
      width: 80upx;
      font-size: 40upx;
      color: #6BCC03;
    }

    .icon-alipay {
      width: 80upx;
      font-size: 40upx;
      color: #06B4FD;
    }

    .icon-xuanzhong2 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60upx;
      height: 60upx;
      font-size: 40upx;
      color: $base-color;
    }

    .tit {
      font-size: 32upx;
      color: $font-color-dark;
      flex: 1;
    }
  }

  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 995;
    display: flex;
    align-items: center;
    width: 100%;
    height: 90upx;
    justify-content: space-between;
    font-size: 30upx;
    background-color: #fff;
    z-index: 998;
    color: $font-color-base;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);

    .price-content {
      padding-left: 30upx;
    }

    .price-tip {
      color: $base-color;
      margin-left: 8upx;
    }

    .price {
      font-size: 36upx;
      color: $base-color;
    }

    .submit {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 280upx;
      height: 100%;
      color: #fff;
      font-size: 32upx;
      background-color: $base-color;
    }
  }

  /* 优惠券面板 */
  .mask {
    display: flex;
    align-items: flex-end;
    position: fixed;
    left: 0;
    top: var(--window-top);
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 9995;
    transition: .3s;

    .mask-content {
      width: 100%;
      min-height: 30vh;
      max-height: 70vh;
      background: #f3f3f3;
      transform: translateY(100%);
      transition: .3s;
      overflow-y: scroll;
    }

    &.none {
      display: none;
    }

    &.show {
      background: rgba(0, 0, 0, .4);

      .mask-content {
        transform: translateY(0);
      }
    }
  }

  /* 优惠券列表 */
  .coupon-item {
    display: flex;
    flex-direction: column;
    margin: 20upx 24upx;
    background: #fff;

    .con {
      display: flex;
      align-items: center;
      position: relative;
      height: 120upx;
      padding: 0 30upx;

      &:after {
        position: absolute;
        left: 0;
        bottom: 0;
        content: '';
        width: 100%;
        height: 0;
        border-bottom: 1px dashed #f3f3f3;
        transform: scaleY(50%);
      }
    }

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      overflow: hidden;
      height: 100upx;
    }

    .title {
      font-size: 32upx;
      color: $font-color-dark;
      margin-bottom: 10upx;
    }

    .time {
      font-size: 24upx;
      color: $font-color-light;
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 26upx;
      color: $font-color-base;
      height: 100upx;
    }

    .price {
      font-size: 44upx;
      color: $base-color;

      &:before {
        content: '￥';
        font-size: 34upx;
      }
    }

    .tips {
      font-size: 24upx;
      color: $font-color-light;
      line-height: 60upx;
      padding-left: 30upx;
    }

    .circle {
      position: absolute;
      left: -6upx;
      bottom: -10upx;
      z-index: 10;
      width: 20upx;
      height: 20upx;
      background: #f3f3f3;
      border-radius: 100px;

      &.r {
        left: auto;
        right: -6upx;
      }
    }
  }
</style>