<template>
  <view>
    <zj-page-layout :hasFooter="true">
      <template slot="header">
        <view class="noticebar-container" v-if="isNoticebar">
          <uni-notice-bar
            v-if="noticeContent"
            scrollable="true"
            single="true"
            showClose="true"
            :text="noticeContent"
            background-color="#f6e6e7"
            color="#de3749"
            @close="isNoticebar = false"
          ></uni-notice-bar>
        </view>
      </template>
      <view class="all-container">
        <view class="address-container card" @tap="chooseAddress">
          <view class="left">
            <view class="icon"><text class="iconfont icon-dingwei1"></text></view>
            <view class="nodata" v-if="!hasAddress">选择收货地址</view>
            <view class="hasdata" v-else>
              <view class="name"
                >{{ addressInfo.name }}<text>{{ addressInfo.phone }}</text></view
              >
              <view class="address ellipsis-2">
                {{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.area }}{{ addressInfo.street
                }}{{ addressInfo.address }}{{ addressInfo.houseNo }}
              </view>
            </view>
          </view>
          <text class="right iconfont icon-jinru"></text>
        </view>

        <view class="card goods-container">
          <view class="title">商品信息</view>
          <block v-for="(item, index) in goodsList" :key="index">
            <view class="item">
              <image :src="item.imgUrl" mode="aspectFill"></image>
              <view class="right">
                <view class="name ellipsis-2">{{ item.goodsName }}</view>
                <view class="des">{{ item.specValue }}</view>
                <view class="bottom">
                  <view class="price">
                    <view class="price-1">¥{{ item.price | priceFilter }}</view>
                    <view class="price-2">¥{{ item.orgPrice | priceFilter }}</view>
                  </view>

                  <u-number-box
                    @tap.stop
                    v-model="item.num"
                    :min="1"
                    :buttonSize="26"
                    iconStyle="font-size: 12px;"
                    :disabled="!hasAddress || tradeIds"
                    @change="changeCount($event, index)"
                  >
                  </u-number-box>
                </view>
              </view>
            </view>
          </block>
        </view>

        <view class="card trade-container" v-if="tradeInfo">
          <view class="title"><text class="iconfont icon-huishou"></text>以旧换新</view>
          <view class="text">由专业服务商上门为您提供回收旧机服务</view>
          <view class="main">
            <image :src="tradeInfo.imgUrl"></image>
            <view class="right">
              <view class="name">{{ tradeInfo.name }}</view>
              <view class="attr">{{ tradeInfo.goodsCategoryItemList.map(o => o.dictName).join('、') }}</view>
            </view>
          </view>
          <view class="bottom">
            <view class="left"
              >旧机费用：<text>¥{{ tradeInfo.payAmount | priceFilter }}</text></view
            >
            <view class="right">{{
              { 1: '线上支付抵扣订单货款', 2: '仅线上展示旧机价值' }[tradeInfo.yjhxDkFlag]
            }}</view>
          </view>
        </view>

        <view class="card row-container">
          <view class="item">
            <view class="title">优惠券</view>
            <view class="coupon" @tap="chooseCoupon">
              <text v-if="hasCoupon">{{ couponInfo.couponName }}</text>
              <text v-else style="color: #666666">未使用优惠券</text>
              <text class="iconfont icon-jinru"></text>
            </view>
          </view>
          <view class="item">
            <view class="title">配送方式</view>
            <view class="right" v-if="freight == 0">快递包邮</view>
            <view class="right" v-if="freight != 0">快递自费</view>
          </view>
          <view class="item">
            <view class="title">买家留言</view>
            <view class="remark">
              <textarea auto-height placeholder="选填，留言建议50字内" v-model="remark"></textarea>
            </view>
          </view>
        </view>

        <view class="card row-container" v-if="userInfo.storePay">
          <view class="item">
            <view class="title">支付方式</view>
            <view class="radio-group">
              <view class="radio" @tap="payType = 1">
                <text class="iconfont" :class="payType === 1 ? 'icon-danxuan2 active' : 'icon-danxuan'"></text>
                在线支付
              </view>
              <view class="radio" @tap="payType = 2">
                <text class="iconfont" :class="payType === 2 ? 'icon-danxuan2 active' : 'icon-danxuan'"></text>
                到店支付
              </view>
            </view>
          </view>
        </view>

        <view class="card row-container">
          <view class="item">
            <view class="title">商品金额</view>
            <view class="price">¥{{ orderInfo.totalAmount | priceFilter }}</view>
          </view>
          <view class="item">
            <view class="title">运费</view>
            <view class="price">¥{{ freight | priceFilter }}</view>
          </view>
          <view class="item">
            <view class="title">优惠</view>
            <view class="price"
              >-¥{{
                (couponInfo.couponValue ? couponInfo.couponValue : orderInfo.exchangeAmount || 0) | priceFilter
              }}</view
            >
          </view>
          <view class="item" v-if="orderInfo.promotionFullPieceDiscountAmount">
            <view class="title"
              >满件打折<text>{{ orderInfo.promotionFullPriceRemark }}</text></view
            >
            <view class="price">-¥{{ orderInfo.promotionFullPieceDiscountAmount | numToFixed }}</view>
          </view>
        </view>

        <view class="card row-container">
          <view class="item">
            <view class="title">订单总金额</view>
            <view class="price"
              >¥{{
                Math.max(0, orderInfo.payAmount - (tradeInfo && tradeInfo.yjhxDkFlag == 1 ? tradeInfo.payAmount : 0))
                  | priceFilter
              }}</view
            >
          </view>
        </view>
      </view>

      <template slot="footer">
        <view class="bottom-container">
          <view class="left">
            <view class="row-1">
              <view class="it-1">共{{ orderInfo.totalNum }}件，合计:</view>
              <view class="it-2"
                ><text>¥</text
                >{{
                  Math.max(0, orderInfo.payAmount - (tradeInfo && tradeInfo.yjhxDkFlag == 1 ? tradeInfo.payAmount : 0))
                    | priceFilter
                }}</view
              >
            </view>
          </view>
          <view class="btn-group">
            <u-button
              type="primary"
              plain
              text="代客下单"
              @click="replaceOrder"
              v-if="(isServiceUser || isHeadUser) && !isGiftGoods && !groupbuyId"
            ></u-button>
            <u-button type="primary" text="提交订单" @click="submitOrder"></u-button>
          </view>
        </view>
      </template>
    </zj-page-layout>

    <!-- 代客下单 -->
    <u-popup :round="10" mode="center" :show="isCodeDialog" @close="isCodeDialog = false">
      <view class="codeDialog">
        <!-- <view class="code"><image :src="'data:image/jpeg;base64,' + codeUrl" mode="aspectFill"></image></view> -->
        <view class="code">
          <image :src="codeUrl" mode="aspectFill"></image>
        </view>
        <view class="tips">请让客户扫码下单</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { weixinPay, mini_env } from '@/common/utils/util.js'
export default {
  data() {
    return {
      userInfo: {},
      configInfo: {},
      hasAddress: false, // 是否有收货地址
      addressInfo: {}, // 收货地址信息
      hasCoupon: false, // 是否有优惠券
      couponInfo: {}, // 优惠券信息
      buyList: [], // 商品列表（从商品详情带入，用于请求订单信息接口）
      orderInfo: {}, // 订单信息
      goodsList: [], // 商品列表（从订单信息接口获取，用于渲染）
      freight: 0, // 运费
      remark: '', // 买家留言
      isCodeDialog: false, // 代客下单弹窗
      codeUrl: '', // 代客下单二维码
      isSeckill: false, // 是否秒杀订单
      secKillId: null, // 秒杀id
      secKillSpecId: null,
      secToken: null,
      orderId: null, // 订单id
      isGiftGoods: false, // 是否福利商品
      isFullPieceGoods: false, // 是否满件打折商品
      isNoticebar: false, // 是否显示公告栏
      noticeContent: '', // 公告内容
      groupbuyId: null, // 团购id
      payType: 1,
      tradeIds: null,
      tradeInfo: null
    }
  },
  computed: {
    isServiceUser() {
      // 是否业务员
      return this.userInfo.type === 'SERVICE'
    },
    isHeadUser() {
      // 是否团长
      return this.userInfo.promotionGroupLeader
    },
    isInnerrUser() {
      // 是否内部人员
      return this.userInfo.innerr
    }

    // total() {
    // 	let price = Number(this.orderInfo.totalAmount); // 商品金额
    // 	let freight = Number(this.freight); // 运费
    // 	let coupon = this.couponInfo.couponValue ? Number(this.couponInfo.couponValue) : Number((this.orderInfo.exchangeAmount || 0)); // 优惠金额
    // 	let total = price + freight - coupon; // 合计
    // 	return total < 0 ? 0 : total;
    // },
  },
  async onLoad({ secKillId, secKillSpecId, secToken, groupbuyId, tradeIds }) {
    this.getNoticebar()

    this.userInfo = await this.$getUserInfo()
    this.configInfo = await this.$getConfigInfo()

    this.buyList = this.$getStorage('goodsBuyList')
    this.$removeStorage('goodsBuyList')

    console.log(this.buyList)
    this.secKillId = secKillId
    this.secKillSpecId = secKillSpecId
    this.secToken = secToken
    this.groupbuyId = groupbuyId
    this.tradeIds = tradeIds

    if (tradeIds) {
      this.getTradeInfo()
    }

    // 进入页面先获取默认地址
    await this.getAddress()

    // 获取订单信息
    this.getOrderInfo()

    // 接收地址信息
    this.crossPage.$on('chooseAddress', result => {
      this.hasAddress = true
      this.addressInfo = result
      this.getOrderInfo()
    })

    // 接收优惠券信息
    this.crossPage.$on('chooseCoupon', result => {
      if (result) {
        this.hasCoupon = true
        this.couponInfo = result
      } else {
        this.hasCoupon = false
        this.couponInfo = {}
      }
      this.getOrderInfo()
    })
  },

  onUnload() {
    this.crossPage.$off('chooseAddress')
    this.crossPage.$off('chooseCoupon')
  },

  methods: {
    findElem(array, attr, val) {
      for (var i = 0; i < array.length; i++) {
        if (array[i][attr] == val) {
          return i //返回当前索引值
        }
      }
      return -1
    },

    // 获取公告栏
    getNoticebar() {
      this.$api
        .get('/shpping/cart/notice', {
          userId: this.$store.state.user.userId
        })
        .then(res => {
          this.noticeContent = res.data
          this.isNoticebar = res.data ? true : false
        })
    },

    // 关闭通告栏
    closeNoticebar() {
      this.isNoticebar = false
    },

    // 获取订单信息
    getOrderInfo(type) {
      let tradeIds = this.tradeIds ? this.tradeIds.split(',') : []
      this.$api
        .postJson('/order/ackdata', {
          buyGoods: this.buyList,
          userAddressId: this.addressInfo.userAddressId,
          userCouponId: this.hasCoupon ? this.couponInfo.id : '',
          promotionGroupId: this.groupbuyId || '',
          orderOldProductAdds:
            tradeIds.length > 0
              ? {
                  id: tradeIds[0],
                  itemIds: tradeIds.slice(1)
                }
              : null,
          isOld: tradeIds.length > 0 ? 'YES' : 'NO'
        })
        .then(res => {
          if (res.code == 1100) {
            return this.$tips(res.message)
          } else if (res.code !== 200) {
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 1000)
          }

          if (res.data.promotionFullPriceRemark) {
            let str = res.data.promotionFullPriceRemark
            let str1 = str.substring(0, str.indexOf('打') + 1)
            let str2 = str.substring(str.indexOf('折') + 1, str.indexOf('折'))
            let num = str.substring(str.indexOf('打') + 1, str.indexOf('折'))
            res.data.promotionFullPriceRemark = str1 + Number(num) + str2
          }

          this.orderInfo = res.data
          this.goodsList = res.data.goods
          this.isSeckill = res.data.isSecKill
          this.freight = res.data.freight
          this.isGiftGoods = this.findElem(res.data.goods, 'isGift', true) >= 0
          this.isFullPieceGoods = this.findElem(res.data.goods, 'promotionFullPiece', true) >= 0
        })
        .catch(res => {
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 1000)
        })
    },

    // 获取地址信息
    async getAddress() {
      return new Promise((resolve, reject) => {
        this.$api
          .get('/user/address/list', {
            pageNum: 1,
            pageSize: 100,
            userId: this.$store.state.user.userId
          })
          .then(res => {
            let hasDefault = this.findElem(res.data.records, 'defaultAddr', true)
            if (hasDefault >= 0) {
              this.hasAddress = true
              this.addressInfo = res.data.records[hasDefault]
            } else {
              this.hasAddress = false
            }
            resolve()
          })
      })
    },

    findElem(array, attr, val) {
      for (var i = 0; i < array.length; i++) {
        if (array[i][attr] == val) {
          return i //返回当前索引值
        }
      }
      return -1
    },

    // 去选择优惠券
    chooseCoupon() {
      // if(this.isSeckill) return this.$toast('秒杀商品不可使用优惠券');
      let goodsIds = []
      this.goodsList.forEach(item => {
        goodsIds.push(item.goodsId)
      })

      let amount = Number(this.orderInfo.totalAmount) + Number(this.freight)

      this.$navToPage({
        url: '/packageGoods/pages/coupon?orderAmount=' + amount + '&goodsIds=' + goodsIds.join(',')
      })
    },

    // 去选择地址
    chooseAddress() {
      this.$navToPage({
        url: '/packageMine/pages/address/list?isChoose=' + true
      })
    },

    // 更改数量
    changeCount(e, index) {
      this.buyList[index].num = e.value
      this.getOrderInfo()
    },

    // 获取以旧换新信息
    getTradeInfo() {
      this.$api
        .get('/trade/orderCategoryItem', {
          ids: this.tradeIds
        })
        .then(res => {
          this.tradeInfo = res.data
        })
    },

    // 提交订单
    submitOrder() {
      let that = this
      if (!this.hasAddress) return this.$toast('请先选择收货地址')
      if (!this.orderInfo.openId) {
        return this.$navToPage(
          {
            url: '/pages/login/index?isNotOpenid=' + true
          },
          'redirectTo'
        )
      }

      this.orderPay()
    },

    // 下单支付
    orderPay() {
      let that = this
      mini_env(bool => {
        let tradeIds = this.tradeIds ? this.tradeIds.split(',') : []
        this.$api
          .postJson('/order/buy', {
            userId: this.$store.state.user.userId,
            buyGoods: this.buyList,
            buyerMsg: this.remark,
            userAddressId: this.addressInfo.userAddressId,
            userCouponId: this.hasCoupon ? this.couponInfo.id : '',
            promotionGroupId: this.groupbuyId || '',
            payTypeId: this.payType == 1 ? 'WECHAT' : 'STORE',
            orderOldProductAdds:
              tradeIds.length > 0
                ? {
                    id: tradeIds[0],
                    itemIds: tradeIds.slice(1)
                  }
                : null,
            isOld: tradeIds.length > 0 ? 'YES' : 'NO',
            // h5Pay: true
            ...(() => {
              if (bool) {
                return {
                  miniPay: true,
                  openId: this.$store.state.user.miniOpenId
                }
              }
              return {}
            })()
          })
          .then(res => {
            if (res.code === 1100) {
              return that.$tips(res.message)
            }
            // 不需要支付
            if (res.data.isPay === false) {
              that.$successToast('购买成功')
              that.orderId = res.data.id
              setTimeout(() => {
                that.$navToPage(
                  {
                    url: '/packageMine/pages/order/list?tab=DFH' + '&orderId=' + that.orderId
                  },
                  'reLaunch'
                )
              }, 1000)
            }
            // 需要支付
            else {
              // 小程序环境
              if (bool) {
                uniWebview.navigateTo({
                  url: `/pages/pay/pay?${Object.entries({
                    ...res.data,
                    payPackage: res.data.payPackage.split('=')[0] || '',
                    payPackageVal: res.data.payPackage.split('=')[1] || ''
                  })
                    .map(item => item.join('='))
                    .join('&')}`
                })
              }
              // h5环境
              else {
                weixinPay(res.data, function (res) {
                  that.$successToast('购买成功')
                  that.orderId = res.data.id
                  setTimeout(() => {
                    that.$navToPage(
                      {
                        url: '/packageMine/pages/order/list?tab=DFH' + '&orderId=' + that.orderId
                      },
                      'reLaunch'
                    )
                  }, 1000)
                })
              }
            }
          })
      })
    },

    // 消息推送
    requestMessage() {
      let that = this
      uni.showModal({
        title: '温馨提示',
        content: '为更好的促进您与买家的交流，需要在您的订单成交时向您发送消息',
        confirmText: '同意',
        cancelText: '拒绝',
        success: function (res) {
          if (res.confirm) {
            let tmplIds = [that.configInfo.template]
            uni.requestSubscribeMessage({
              tmplIds: tmplIds,
              success(res) {
                let status = null
                tmplIds.map((item, index) => {
                  if (res[item] == 'accept') {
                    status = 'accept'
                  }
                })
                if (status == 'accept') {
                  that.$successToast('订阅成功')
                } else {
                  that.$toast('订阅取消')
                }
                setTimeout(() => {
                  that.$navToPage(
                    {
                      url: '/packageMine/pages/order/list?tab=DFH' + '&orderId=' + that.orderId
                    },
                    'reLaunch'
                  )
                }, 1000)
              },
              fail(res) {
                console.log(res)
                that.$toast('订阅失败')
                setTimeout(() => {
                  that.$navToPage(
                    {
                      url: '/packageMine/pages/order/list?tab=DFH' + '&orderId=' + that.orderId
                    },
                    'reLaunch'
                  )
                }, 1000)
              }
            })
          } else if (res.cancel) {
            that
              .$modal({
                title: '温馨提示',
                content: '拒绝后您将无法获取实时的与卖家（买家）的交易消息',
                confirmText: '知道了',
                showCancel: false
              })
              .then(() => {
                that.$navToPage(
                  {
                    url: '/packageMine/pages/order/list?tab=DFH' + '&orderId=' + that.orderId
                  },
                  'reLaunch'
                )
              })
              .catch(() => {})
          }
        }
      })
    },

    // 代客下单
    replaceOrder() {
      if (!this.hasAddress) this.$toast('请先选择收货地址')

      let tradeIds = this.tradeIds ? this.tradeIds.split(',') : []
      this.$api
        .postJson('/order/buy', {
          userId: this.$store.state.user.userId,
          buyGoods: this.buyList,
          buyerMsg: this.remark,
          userAddressId: this.addressInfo.userAddressId,
          userCouponId: this.hasCoupon ? this.couponInfo.id : '',
          proxyUser: true,
          payTypeId: this.payType == 1 ? 'WECHAT' : 'STORE',
          orderOldProductAdds:
            tradeIds.length > 0
              ? {
                  id: tradeIds[0],
                  itemIds: tradeIds.slice(1)
                }
              : null,
          isOld: tradeIds.length > 0 ? 'YES' : 'NO'
        })
        .then(res => {
          if (res.code === 1100) {
            return this.$tips(res.message)
          }
          this.codeUrl = res.data.codeUrl.replace(/[\r\n]/g, '')
          this.isCodeDialog = true
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.all-container {
  padding: 0 20rpx 20rpx;
}

.card {
  @include zj-card;
  background: #ffffff;
  border-radius: 20rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.address-container {
  background: #ffffff;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150rpx;
  padding: 0 20rpx;

  .right {
    font-size: 32rpx;
    color: $sec-font;
    flex-shrink: 0;
  }

  .left {
    display: flex;
    align-items: center;
    margin-right: 20rpx;

    .icon {
      width: 52rpx;
      height: 52rpx;
      border-radius: 50%;
      background: $theme-color;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;

      .iconfont {
        font-size: 36rpx;
        color: #ffffff;
      }
    }

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

    .hasdata {
      .name {
        font-size: 32rpx;
        color: #333333;

        text {
          color: #999999;
          font-size: 28rpx;
          margin-left: 16rpx;
        }
      }

      .address {
        font-size: 28rpx;
        color: #666666;
        line-height: 34rpx;
        margin-top: 10rpx;
      }
    }
  }
}

.goods-container {
  .title {
    font-size: 32rpx;
    color: #333333;
    line-height: 32rpx;
    padding-top: 20rpx;
  }

  .item {
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #eaeaea;

    &:last-child {
      border: none;
    }

    image {
      width: 180rpx;
      height: 180rpx;
      display: block;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .right {
      width: 470rpx;
      height: 190rpx;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      .name {
        font-size: 28rpx;
        color: #333333;
        line-height: 36rpx;
        height: 72rpx;
      }

      .des {
        font-size: 24rpx;
        color: #999999;
        line-height: 36rpx;
      }

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

        .price {
          display: flex;
          flex-direction: column;
        }

        .price-1 {
          font-size: 32rpx;
          color: $minor-color;
          line-height: 36rpx;
        }

        .price-2 {
          font-size: 26rpx;
          color: #666666;
          line-height: 30rpx;
          text-decoration: line-through;
        }
      }
    }
  }
}

.trade-container {
  padding: 20rpx;
  .title {
    font-size: 32rpx;
    color: $theme-color;
    display: flex;
    align-items: center;
    .iconfont {
      margin-right: 8rpx;
      font-size: 36rpx;
    }
  }
  .text {
    font-size: 24rpx;
    margin-top: 12rpx;
  }
  .main {
    display: flex;
    margin-top: 20rpx;
    image {
      width: 80rpx;
      height: 80rpx;
    }
    .right {
      margin-left: 20rpx;
      .name {
        font-weight: 500;
      }
      .attr {
        font-size: 28rpx;
        color: $sec-font;
        margin-top: 12rpx;
      }
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
    .left {
      font-size: 28rpx;
      text {
        color: $minor-color;
        font-weight: 500;
      }
    }
    .right {
      padding: 10rpx 16rpx;
      font-size: 24rpx;
      color: $theme-color;
      background: #e6f0ff;
      border-radius: 5rpx;
    }
  }
}

.row-container {
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 88rpx;
    border-bottom: 1px solid #eaeaea;

    &:last-child {
      border: none;
    }

    .title {
      font-size: 28rpx;
      color: #333333;
      text {
        color: #999999;
        margin-left: 20rpx;
      }
    }

    .right {
      font-size: 28rpx;
    }

    .coupon {
      display: flex;
      align-items: center;
      font-size: 28rpx;

      .iconfont {
        color: $sec-font;
      }
    }

    .input {
      width: 500rpx;

      input {
        font-size: 28rpx;
        width: 500rpx;
        height: 88rpx;
        text-align: right;
      }
    }

    .radio-group {
      display: flex;
      height: 48rpx;
      align-items: center;

      .radio {
        display: flex;
        align-items: center;
        margin-left: 30rpx;
        font-size: 28rpx;

        .iconfont {
          font-size: 36rpx;
          color: #999999;
          margin-right: 10rpx;

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

    .remark {
      width: 500rpx;

      textarea {
        font-size: 28rpx;
        width: 500rpx;
        padding: 20rpx 0;
      }
    }

    .price {
      font-size: 28rpx;
      color: $minor-color;
      font-weight: 600;
    }
  }
}

.bottom-container {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    .row-1 {
      display: flex;
      align-items: center;

      .it-1 {
        margin-right: 4rpx;
      }

      .it-2 {
        color: $minor-color;
        font-weight: 500;
        font-size: 32rpx;

        text {
          font-size: 24rpx;
        }
      }
    }

    .row-2 {
      font-size: 24rpx;
      color: #999999;
      display: flex;
      align-items: flex-end;
      margin-top: 8rpx;
      line-height: 28rpx;

      .it-2 {
        display: flex;
        align-items: center;
        color: #ff3f42;

        text {
          font-size: 28rpx;
          font-weight: 500;
          margin-left: 4rpx;
        }
      }
    }
  }

  .btn-group {
    display: flex;

    ::v-deep .u-button {
      width: 170rpx;
      border-radius: 80rpx;

      &:nth-child(2) {
        margin-left: 20rpx;
      }
    }
  }
}

.codeDialog {
  position: fixed;
  top: 40%;
  left: 150rpx;
  z-index: 999;
  width: 400rpx;
  background: #ffffff;
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 20rpx 20rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .close {
    width: 100%;
    display: flex;
    justify-content: flex-end;

    image {
      width: 32rpx;
      height: 32rpx;
      display: block;
    }
  }

  .code {
    margin-top: 10rpx;

    image {
      width: 280rpx;
      height: 280rpx;
      display: block;
    }
  }

  .tips {
    font-size: 28rpx;
    color: #666666;
    margin-top: 20rpx;
  }
}

.apply-dialog {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;

  .dialog {
    width: 600rpx;
    background: #ffffff;
    border-radius: 20rpx;
    overflow: hidden;

    .title {
      font-size: 36rpx;
      font-weight: 500;
      text-align: center;
      line-height: 100rpx;
      padding-bottom: 10rpx;
    }

    .content {
      padding: 0 40rpx 30rpx;

      .row {
        height: 50rpx;
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
        font-size: 28rpx;
        color: #333333;

        input {
          flex: 1;
          height: 50rpx;
          border: 1px solid #e5e5e5;
          margin-right: 16rpx;
          padding: 0 12rpx;
          font-size: 28rpx;
        }
      }
    }

    .btn {
      border-top: 1px solid #eaeaea;
      display: flex;

      & > view {
        flex: 1;
        text-align: center;
        line-height: 100rpx;
        font-size: 32rpx;

        &.left {
          color: #666666;
        }

        &.right {
          color: #ffffff;
          background: #ff3f42;
        }
      }
    }
  }
}
</style>
