hospital-accompaniment-wechat/pages/order/orderDetails - 副本.vue

<template>
  <view class="container" :class="{disableScroll:disableScroll}">
    <u-navbar title="详情" leftIconColor="#ffffff" titleStyle="color:#fff" :autoBack="true" placeholder></u-navbar>
    <view class="topBox" v-if="form.orderStatus==0">
      <view class="topBox_val">￥
        <text>{{form.sellingPrice.split('.')[0]}}</text>.{{form.sellingPrice.split('.')[1]}}
      </view>
      <view class="topBox_lab">待支付</view>
      <view class="topBox_time">
        请在 <text>{{form.minutes}}:{{form.seconds}}</text>内支付
      </view>
    </view>
    <view class="topBox" v-if="form.orderStatus==10">
      <view class="topBox_val"> <text class="iconfont icon-daishiyong"></text> </view>
      <view class="topBox_lab" style="margin-top: 15rpx;">待使用</view>
    </view>
    <view class="topBox" v-if="form.orderStatus==20&&!form.refundStatus">
      <view class="topBox_val">
        <image style="width: 68rpx;height:79rpx" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img18.png" mode="" />
      </view>
      <view class="topBox_lab" style="margin-top: 15rpx;">免单活动进行中!</view>
    </view>
    <view class="topBox" v-if="form.orderStatus==30&&form.refundStatus==2">
      <view class="topBox_val"> <text class="iconfont icon-kapian-yituikuan"></text> </view>
      <view class="topBox_lab" style="margin-top: 15rpx;">已退款</view>
    </view>
    <view class="topBox" v-if="form.orderStatus==20&&form.refundStatus==1">
      <view class="topBox_val"> <text class="iconfont icon-yiwancheng"></text> </view>
      <view class="topBox_lab" style="margin-top: 15rpx;">已完成 <text>（部分退款）</text> </view>
    </view>
    <view class="topBox" v-if="form.orderStatus==30&&form.refundStatus!=2">
      <view class="topBox_val"> <text class="iconfont icon-dingdan_yiquxiao"></text> </view>
      <view class="topBox_lab" style="margin-top: 15rpx;">已取消 <text>（您的订单已取消）</text> </view>
    </view>
    <view class="topBox" v-if="form.refundStatus==0&&form.refundOrderId">
      <view class="topBox_val"> <text class="iconfont icon-tuikuanzhong"></text> </view>
      <view class="topBox_lab" style="margin-top: 15rpx;">退款中</view>
    </view>
    <view class="topBox" v-if="form.refundStatus==1&&form.refundOrderId">
      <view class="topBox_val"> <text class="iconfont icon-kapian-yituikuan"></text> </view>
      <view class="topBox_lab" style="margin-top: 15rpx;">退款成功</view>
    </view>
    <view class="topBox" v-if="form.refundStatus==2&&form.refundOrderId">
      <view class="topBox_val"> <text class="iconfont icon-a-12pt_tuikuanshibai"></text> </view>
      <view class="topBox_lab" style="margin-top: 15rpx;">退款失败</view>
    </view>
    <view class="topBox" v-if="form.refundStatus==3&&form.refundOrderId">
      <view class="topBox_val"> <text class="iconfont icon-tuikuanshibai1"></text> </view>
      <view class="topBox_lab" style="margin-top: 15rpx;">退款拒绝</view>
    </view>
    <view class="topBox" style="padding: 0rpx;">
      <view class="item">
        <view class="item_t">
          <image :src="form.businessImage" mode="" />
          <view>{{form.businessName}}</view>
        </view>
        <view class="item_c">
          <view class="item_c_l">
            <image :src="form.businessProductImage||form.businessImage" mode="" />
          </view>
          <view class="item_c_r">
            <view class="item_c_r_title">{{form.businessProductName}}</view>
            <view class="item_c_r_text">{{form.productDataJosn.costIncluded}}</view>
            <view class="item_c_r_price">
              <view class="item_c_r_price_r font22" @click="openPurchaseNotes(form.productDataJosn)">
                购买须知<text class="iconfont icon-jiantou2"></text></view>
              <view class="item_c_r_price_r">X{{form.buyQuantity}}</view>
              <view class="item_c_r_price_l" v-if="form.sellingPrice">￥
                <text>{{form.sellingPrice.split('.')[0]}}</text>.{{form.sellingPrice.split('.')[1]}}
              </view>
            </view>
          </view>
        </view>
        <view class="item_c1">
          <view class="item_c1_lab">合计：</view>
          <view class="item_c1_val">￥
            <text>{{String(form.orderAmount).split('.')[0]}}</text>.{{String(form.orderAmount).split('.')[1]}}
          </view>
        </view>

        <view class="item_c2">
          <view class="item_c2_item">
            <view class="item_c2_item_lab">日期：</view>
            <view class="item_c2_item_val">
              {{form.orderTime?form.orderTime.substr(0,10).replace(/-/g,'.'):'--'}}
            </view>
          </view>
          <view class="item_c2_item">
            <view class="item_c2_item_lab">购买数量：</view>
            <view class="item_c2_item_val">x{{form.buyQuantity}}</view>
          </view>
          <view class="item_c2_item">
            <view class="item_c2_item_lab">游客信息：</view>
            <view class="item_c2_item_val" v-if="form.refundOrderId">
              {{form.productOrder.productVisitor.visitorName}}，{{form.productOrder.productVisitor.visitorPhone}}
            </view>
            <view class="item_c2_item_val" v-else>
              {{form.productVisitor.visitorName}}，{{form.productVisitor.visitorPhone}}
            </view>
          </view>
          <view class="item_c2_item" v-if="form.reservationDate">
            <view class="item_c2_item_lab">预约日期：</view>
            <view class="item_c2_item_val">
              {{form.reservationDate}}
            </view>
          </view>
          <view class="item_c2_item" v-if="form.reservationTime">
            <view class="item_c2_item_lab">预约场次：</view>
            <view class="item_c2_item_val">
              {{form.reservationTime}}
            </view>
          </view>
        </view>
        <!-- v-if="form.orderStatus==10||form.orderStatus==20||form.refundStatus==2||form.refundStatus==1" -->
        <!-- form.orderStatus!=30&&!form.refundOrderId&&form.orderStatus!=0 -->
        <view class="item_c2" v-if="couponList&&couponList.length>0">
          <view class="item_c2_item" v-for="(v,i) in couponList" :key="i" @click="openVoucherDetails(i)">
            <view class="item_c2_item_lab">卡券号：</view>
            <view class="item_c2_item_val" :class="{'line-through':(v.couponStatus==10||v.couponStatus==20)}">{{v.couponCode}} <text class="iconfont icon-jiantou"></text> </view>
          </view>
          <!-- <view class="item_c2_item" @click="openVoucherDetails()">
            <view class="item_c2_item_lab">卡券号：</view>
            <view class="item_c2_item_val">2021312332424433 <text class="iconfont icon-jiantou"></text></view>
          </view> -->
        </view>
        <!-- <view class="item_c2" v-if="form.refundStatus==2||form.refundStatus==1">
          <view class="item_c2_item">
            <view class="item_c2_item_lab">退款信息：</view>
            <view class="item_c2_item_val ">查看详情 <text class="iconfont icon-jiantou"></text> </view>
          </view>
        </view> -->
        <view class="item_c2">
          <view class="item_c2_title">订单信息</view>
          <view class="item_c2_item">
            <view class="item_c2_item_lab">订单编号：</view>
            <view class="item_c2_item_val">{{form.orderNumber}}</view>
          </view>
          <view class="item_c2_item">
            <view class="item_c2_item_lab">订单创建时间：</view>
            <view class="item_c2_item_val">{{form.orderTime?form.orderTime.replace(/-/g,'.'):'--'}}</view>
          </view>
          <view class="item_c2_item" v-if="form.orderType==0&&(form.orderStatus==10||form.orderStatus==20||form.refundStatus==2||form.refundStatus==1)">
            <view class="item_c2_item_lab">支付方式：</view>
            <view class="item_c2_item_val">微信支付</view>
          </view>
          <view class="item_c2_item" v-if="form.orderType==0&&(form.orderStatus==10||form.orderStatus==20||form.refundStatus==2||form.refundStatus==1)">
            <view class="item_c2_item_lab">支付时间：</view>
            <view class="item_c2_item_val" v-if="form.payTime">
              {{form.payTime?form.payTime.replace(/-/g,'.'):'--'}}
            </view>
            <view class="item_c2_item_val" v-else-if="form.productOrder">
              {{form.productOrder.payTime?form.productOrder.payTime.replace(/-/g,'.'):'--'}}
            </view>
            <view class="item_c2_item_val" v-else>
              {{form.productDataJosn.payTime?form.productDataJosn.payTime.replace(/-/g,'.'):'--'}}
            </view>
          </view>
          <view class="item_c2_item" v-if="form.orderStatus==20&&form.refundStatus!=1">
            <view class="item_c2_item_lab">使用时间：</view>
            <view class="item_c2_item_val">{{form.lastUseTime?form.lastUseTime.replace(/-/g,'.'):'--'}}
            </view>
          </view>
          <view class="item_c2_item" v-if="form.orderStatus==30&&form.refundStatus!=2">
            <view class="item_c2_item_lab">取消时间：</view>
            <view class="item_c2_item_val">
              {{form.orderCancelTime?form.orderCancelTime.replace(/-/g,'.'):'--'}}
            </view>
          </view>
        </view>
        <view class="item_c2" v-if="form.refundOrderId">
          <view class="item_c2_title">退款信息</view>
          <view class="item_c2_item">
            <view class="item_c2_item_lab">退款金额：</view>
            <view class="item_c2_item_val">{{form.refundAmount}}</view>
          </view>
          <view class="item_c2_item">
            <view class="item_c2_item_lab">退款数量：</view>
            <view class="item_c2_item_val">{{form.refundQuantity}}</view>
          </view>
          <view class="item_c2_item" v-if="form.refundOrder">
            <view class="item_c2_item_lab">退款流水号：</view>
            <view class="item_c2_item_val">{{form.refundOrder}}</view>
          </view>
          <view class="item_c2_item">
            <view class="item_c2_item_lab">提交退款申请：</view>
            <view class="item_c2_item_val">{{form.refundApplyTime}}</view>
          </view>
          <view class="item_c2_item">
            <view class="item_c2_item_lab">退款原因：</view>
            <view class="item_c2_item_val">{{form.refundReason}}</view>
          </view>
          <view class="item_c2_item">
            <view class="item_c2_item_lab">退款说明：</view>
            <view class="item_c2_item_val">{{form.refundNotes}}</view>
          </view>
          <view class="item_c2_item">
            <view class="item_c2_item_lab">退款方式：</view>
            <view class="item_c2_item_val">原路返回</view>
          </view>
          <view class="item_c2_item" v-if="form.refundStatus==3&&form.refundOrderId">
            <view class="item_c2_item_lab">退款审核说明：</view>
            <view class="item_c2_item_val">{{form.auditNotes||''}}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="btnBox" v-if="form.orderStatus==0">
      <view class="btnBox_l">
        <view class="btnBox_l_lab">应付：</view>
        <view class="btnBox_l_val">￥
          <text>{{String(form.orderAmount).split('.')[0]}}</text>.{{String(form.orderAmount).split('.')[1]}}
        </view>
      </view>
      <view class="btnBox_r" @click="payment()">
        支付
      </view>
    </view>
    <view class="btnBox1" v-if="form.orderStatus==10">
      <view class="btnBox_l" v-if="form.orderType==0" @click="goPath('/pages/order/applicationDrawback?orderNumber=' +form.orderNumber)">
        申请退款
      </view>
      <view class="btnBox_r" @click="openVoucherDetails()">
        去使用
      </view>
    </view>
    <view class="btnBox1" v-if="form.gamesStatus==1&&form.orderType==0">
      <view class="btnBox_r" @click="goPath(`/pages/game/index?orderNumber=${form.orderNumber}`)">
        参与免单
      </view>
    </view>
    <!-- 购买须知弹窗 -->
    <purchaseNotes :type="2" ref="purchaseNotesRef" />
    <!-- 卡券详情 -->
    <voucherDetails ref="voucherDetailsRef" :list="couponList" @close="voucherDetailsClsoe" />
    <!-- 核销完成 -->
    <writeOffCompleted :form="form" ref="writeOffCompletedRef" />
  </view>
</template>

<script>
import {
  orderInfo,
  orderCouponList,
  orderPay,
  orderIdInfo,
  refundOrderInfo
} from "@/api/home.js"
import purchaseNotes from '@/components/purchaseNotes/index.vue'
import voucherDetails from '@/components/voucherDetails/index.vue'
import writeOffCompleted from '@/components/writeOffCompleted/index.vue'
// let intervalId = null
export default {
  components: {
    purchaseNotes,
    voucherDetails,
    writeOffCompleted
  },
  data () {
    return {
      type: 6, //1待支付  2待使用  3免单  4已退款  5已完成(部分退款)  6已取消
      form: {
        productDataJosn: {},
      },
      couponList: [],
      disableScroll: false,
      timer: null,
      type: undefined,
	  intervalId:undefined
    }
  },
  onLoad (options) {
    if (options.orderNumber) {
      this.getOrderInfo(options.orderNumber)
    }
    if (options.orderId) {
      this.getOrderIdInfo(options.orderId)
    }
    if (options.refundOrderId) {
      this.getRefundOrderInfo(options.refundOrderId)
    }
    if (options.type) {
      this.type = options.type
    }
  },
  onUnload () {
    // 当页面关闭或卸载时清除定时器
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
  methods: {
    // 计算订单取消订单的倒计时
    countDown (row) {
      // 获取当前时间
      let currentTime = new Date();
      // 订单取消时间  时间格式替换为ios支持的格式
      let cancelTime = new Date(row.payExpireTime.replace(/-/g, '/'));
      row.countdownTime = Math.floor((cancelTime - currentTime) / 1000);
      row.minutes = Math.floor(row.countdownTime / 60) < 10 ? '0' + Math.floor(row.countdownTime / 60) : Math
        .floor(row.countdownTime / 60);
      row.seconds = row.countdownTime % 60 < 10 ? '0' + row.countdownTime % 60 : row.countdownTime % 60;
      if (row.countdownTime > 0) {
        this.intervalId = setInterval(() => {
          row.minutes = Math.floor(row.countdownTime / 60) < 10 ? '0' + Math.floor(row
            .countdownTime / 60) : Math.floor(row.countdownTime / 60);
          row.seconds = row.countdownTime % 60 < 10 ? '0' + row.countdownTime % 60 : row
            .countdownTime % 60;
          if (row.countdownTime > 0) {
            row.countdownTime--;
          } else {
            // row.orderStatus = 30;
            clearInterval(this.intervalId);
            this.intervalId = null
            this.getOrderInfo(row.orderNumber)
          }
        }, 1000)
      }
    },
    voucherDetailsClsoe () {
      this.disableScroll = false;
      clearInterval(this.timer);
      this.timer = null;
    },
    openPurchaseNotes (val) {
      val.businessImage = this.form.businessImage;
      this.$refs.purchaseNotesRef.open(val)
    },
    openVoucherDetails (index = null) {
      if (index === null) {
        for (let i = 0; i < this.couponList.length; i++) {
          if (this.couponList[i].couponStatus == 0) {
            index = i;
            break
          }
        }
      }
      // item.businessImage = this.form.businessImage;
      // item.costIncluded = this.form.productDataJosn.costIncluded
      this.$refs.voucherDetailsRef.open(this.couponList, index, this.form);
      // let bool = false;
      // this.couponList.map(v => {
      // 	if (v.couponStatus == 0) {
      // 		bool = true
      // 	}
      // })
      let bool = this.couponList.some(v => {
        return v.couponStatus == 0
      })
      if (bool) {
        this.timer = setInterval(() => {
          this.getOrderInfo(this.form.orderNumber)
        }, 3000)
      }
      this.disableScroll = true;
    },
    openWriteOffCompleted () {
      this.$refs.writeOffCompletedRef.openFun()
    },
    getOrderInfo (orderNo) {
      orderInfo(orderNo).then(res => {
        res.data.productDataJosn = JSON.parse(res.data.productData);
        if (res.data.orderStatus == 0) {
          this.countDown(res.data)
        }
        this.form = res.data;
        if (this.form.refundOrderId) {
          this.getRefundOrderInfo(this.form.refundOrderId)
        } else {
          this.getCouponList(this.form.orderId)
        }
        if (this.timer) {
          let bool = true;
          this.couponList.map(v => {
            if (v.couponStatus != 10) {
              bool = false
            }
          })
          if (bool) {
            this.$refs.voucherDetailsRef.close()
            this.openWriteOffCompleted()
          }
        }
        if (this.type == 'use') {
          this.type = '';
          setTimeout(() => {
            this.openVoucherDetails()
          }, 300)
        }
      })
    },
    getOrderIdInfo (orderId) {
      orderIdInfo(orderId).then(res => {
        res.data.productDataJosn = JSON.parse(res.data.productData);
        if (res.data.orderStatus == 0) {
          this.countDown(res.data)
        }
        this.form = res.data;
        // this.getCouponList(this.form.orderId);
        if (this.form.refundOrderId) {
          this.getRefundOrderInfo(this.form.refundOrderId)
        } else {
          this.getCouponList(this.form.orderId)
        }
        if (this.type == 'use') {
          this.type = '';
          setTimeout(() => {
            this.openVoucherDetails()
          }, 300)
        }
      })
    },
    // 获取退款订单信息
    getRefundOrderInfo (refundOrderId) {
      refundOrderInfo(refundOrderId).then(res => {
        res.data.productDataJosn = JSON.parse(res.data.productOrder.productData);
        this.form = res.data;
        this.getCouponList(this.form.orderId)
      })
    },
    // 支付
    payment () {
      uni.showLoading({
        title: '加载中'
      });
      orderPay({
        orderNumber: this.form.orderNumber
      }).then(res => {
        uni.requestPayment({
          "provider": "wxpay",
          timeStamp: res.data.timeStamp,
          nonceStr: res.data.nonceStr,
          package: res.data.package,
          signType: res.data.signType,
          paySign: res.data.paySign,
          success: (ret) => {
            // this.$refs.checkoutSuccessRef.open(res.data.out_trade_no)
            this.getOrderInfo(this.form.orderNumber)
          },
          complete: () => {
            uni.hideLoading()
          },
          fail (e) {
            // uni.redirectTo({
            //   url: '/pages/order/orderDetails?orderNumber=' + res.data.out_trade_no
            // });
          }
        })
      })
    },
    getCouponList (orderId) {
      orderCouponList({
        orderId: orderId
      }).then(res => {
        this.$nextTick(() => {
          this.couponList = res.data;
        })
      })
    },
    goApplicationDrawback () {
      uni.navigateTo({
        url: path
      })
    },
    goPath (path) {
      // let data = {
      //   businessName: this.form.businessName,
      //   businessImage: this.form.businessImage,
      //   businessProductName: this.form.businessProductName,
      //   businessProductImage: this.form.businessProductImage,
      //   costIncluded: this.form.productDataJosn.costIncluded,
      //   sellingPrice: this.form.sellingPrice,
      //   payAmount: this.form.payAmount
      // }
      uni.navigateTo({
        url: path,
      })
    }
  },
}
</script>

<style lang='scss' scoped>
.popupShow {
  overflow: hidden;
  position: fixed;
}

::v-deep .u-navbar__content,
::v-deep .u-status-bar {
  background-color: #c90700 !important;
}

.disableScroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  box-sizing: border-box;
}

.container {
  padding: 30rpx 30rpx 160rpx;
  background: #f8f8f8;

  .topBox {
    padding: 45rpx 0;
    background: #ffffff;
    border-radius: 30rpx;
    margin-bottom: 30rpx;

    .topBox_val {
      font-size: 40rpx;
      color: #fa353b;
      font-family: FZCuYuan-M03;
      text-align: center;

      text {
        font-size: 80rpx;
        color: #fa353b;
        font-family: FZCuYuan-M03;
      }
    }

    .topBox_lab {
      font-size: 28rpx;
      color: #1a1a1a;
      text-align: center;
      margin-top: 7rpx;

      text {
        font-size: 28rpx;
        color: #808080;
      }
    }

    .topBox_time {
      font-size: 24rpx;
      color: #1a1a1a;
      margin-top: 7rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      text {
        font-size: 28rpx;
        color: #fb0b03;
        font-family: FZCuYuan-M03;
        display: inline-block;
        margin: 0 10rpx;
      }
    }
  }

  .item {
    background: #ffffff;
    margin-bottom: 32rpx;
    border-radius: 30px;
    position: relative;

    .item_t {
      padding: 36rpx 24rpx 29rpx;
      border-bottom: 1rpx solid #cccccc;
      display: flex;
      align-items: center;

      image {
        width: 68rpx;
        height: 68rpx;
        border-radius: 20rpx;
        margin-right: 15rpx;
        flex-shrink: 0;
      }

      view {
        font-size: 28rpx;
        color: #1a1a1a;
        font-family: FZCuYuan-M03;
      }
    }

    .item_c {
      display: flex;
      padding: 30rpx 0;
      margin: 0 24rpx;
      border-bottom: 1rpx solid #cccccc;

      .item_c_l {
        margin-right: 12rpx;

        image {
          width: 172rpx;
          height: 172rpx;
          border-radius: 12rpx;
        }
      }

      .item_c_r {
        flex-grow: 1;
        overflow: hidden;

        .item_c_r_title {
          font-size: 26rpx;
          color: #242424;
          font-family: FZCuYuan-M03;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .item_c_r_text {
          font-size: 24rpx;
          color: #1a1a1a;
          margin: 15rpx 0 22rpx;
          overflow: hidden;
          height: 56rpx;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .item_c_r_price {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .item_c_r_price_l {
            font-size: 22rpx;
            color: #ff0000;
            font-family: FZCuYuan-M03;

            text {
              font-size: 34rpx;
              font-family: FZCuYuan-M03;
            }
          }

          .item_c_r_price_r {
            font-size: 26rpx;
            color: #666666;

            text {
              // vertical-align: text-bottom;
              display: inline-block;
              vertical-align: bottom;
              position: relative;
              top: 2rpx;
            }
          }

          .font22 {
            font-size: 22rpx;
          }
        }
      }
    }

    .item_c1 {
      padding: 20rpx 0;
      margin: 0 24rpx;
      text-align: right;
      border-bottom: 1rpx solid #cccccc;

      > view {
        display: inline-block;
      }

      .item_c1_lab {
        font-size: 26rpx;
        color: #1a1a1a;
      }

      .item_c1_val {
        font-size: 22rpx;
        color: #ff0000;
        font-family: FZCuYuan-M03;

        text {
          font-size: 42rpx;
          color: #ff0000;
          font-family: FZCuYuan-M03;
        }
      }
    }

    .item_c2 {
      padding: 20rpx 0;
      margin: 0 24rpx;
      border-bottom: 1rpx solid #cccccc;

      &:last-child {
        border-bottom: none;
      }

      .item_c2_item {
        padding: 12rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item_c2_item_lab {
          font-size: 26rpx;
          color: #1a1a1a;
        }

        .item_c2_item_val {
          font-size: 26rpx;
          color: #666666;

          .iconfont {
            font-size: 28rpx;
            display: inline-block;
            margin-left: 6rpx;
          }
        }

        .line-through {
          text-decoration: line-through;
        }
      }

      .item_c2_title {
        font-size: 26rpx;
        color: #242424;
        font-family: FZCuYuan-M03;
        padding: 12rpx 0;
      }
    }
  }
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 35rpx 30rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  box-sizing: border-box;
  border-top: 1rpx solid #e7e7e7;

  .btnBox_l {
    display: flex;
    align-items: baseline;

    .btnBox_l_lab {
      font-size: 28rpx;
      color: #1a1a1a;
    }

    .btnBox_l_val {
      display: flex;
      align-items: baseline;
      font-size: 22rpx;
      color: #ff0000;
      font-family: FZCuYuan-M03;

      text {
        font-size: 42rpx;
        font-family: FZCuYuan-M03;
      }
    }
  }

  .btnBox_r {
    width: 259rpx;
    height: 80rpx;
    background: #fb0b03;
    border-radius: 40rpx;
    font-size: 32rpx;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
  }
}

.btnBox1 {
  text-align: right;
  width: 100%;
  padding: 35rpx 30rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  box-sizing: border-box;
  border-top: 1rpx solid #e7e7e7;

  > view {
    width: 200rpx;
    height: 70rpx;
    display: inline-block;
    font-size: 26rpx;
    color: #ffffff;
    text-align: center;
    line-height: 72rpx;
  }

  .btnBox_r {
    background: #fb0b03;
    border-radius: 40rpx;
  }

  .btnBox_l {
    background: #999999;
    border-radius: 40rpx;
    margin-right: 25rpx;
  }
}
</style>