<template>
	<view class="bigBox" :style="{background:backgroundColor}">
		<template v-if="showMoney">
			<view class="top">
				<view class="topName">
					<text>{{ companyName }}</text>
				</view>
				<view class="topMoney">
					<view class="moneyText"> 付款金额 </view>
					<view class="moneyNumber">
						<text class="iconfont icon-fl-renminbi" style="font-size: 56rpx"></text>
						<text>{{ orderMoney }}</text>
						<text></text>
					</view>
				</view>
				<!-- -----------------------------有可用优惠券,并且未选中----------------------------------------------------- -->
				<view
					class="topCoupon"
					v-if="couponData.masterSlaveCouponList && couponData.masterSlaveCouponList.length > 0 && chooseCouponObj == ''"
					@click="showCoupon()"
				>
					<view class="couponLeft">
						<text>券</text>
						<text>{{ couponData.masterSlaveCouponList[0].couponName }}</text>
					</view>
			
					<view class="couponRight">
						<text>未选优惠券</text>
						<text class="iconfont icon-you" style="font-size: 32rpx"></text>
					</view>
				</view>
				<!-- -----------------------------有可用优惠券----------------------------------------------------- -->
				<view class="topCoupon" v-if="chooseCouponObj != '' && savedMoney > 0" @click="showCoupon()">
					<view class="couponLeft">
						<text>券</text>
						<text>{{ chooseCouponObj.couponName }}</text>
					</view>
			
					<view class="couponRight">
						<text>-</text>
						<text>{{ parseFloat(savedMoney.toFixed(2)) }}</text>
						<text class="iconfont icon-you" style="font-size: 32rpx"></text>
					</view>
				</view>
				<!-- -----------------------------------------------可用优惠券条件--------------------------------------- -->
				<view class="topCoupon" v-if="ableConpon != ''" @click="showCoupon()">
					<view class="couponLeft">
						<text>券</text>
						<text>{{ ableConpon.couponName }}</text>
					</view>
			
					<view class="couponRight">
						<text>{{ ableConpon.couponRule }}</text>
						<text class="iconfont icon-you" style="font-size: 32rpx"></text>
					</view>
				</view>
			</view>
			
			<view class="middle">
				<view>
					<input placeholder="添加备注(20字以内)" maxlength="20" v-model.trim="remark" style="margin-bottom: 20rpx" />
				</view>
			
				<view style="font-size: 24rpx"> 温馨提示：请核对以上付款金额、付款对象等信息与交易匹配。 </view>
			</view>
			
			<view class="bottom">
				<view class="botLeft">
					<view v-for="(item, index) of leftList" :key="index">
						<text @click="clickNum(items.text, index, a)" v-for="(items, a) of item.child" :key="a" :style="{ background: items.background }">{{
							items.text
						}}</text>
					</view>
				</view>
			
				<view class="botRight">
					<view class="rightOne" @click="clickEnter()" :style="{ background: spaceBackground }">
						<text class="iconfont icon-im_huige" style="font-size: 70rpx"></text>
					</view>
					<view class="rightTwo" ref="pay" @click="clickPay()" :style="{ background: payBackground }">
						<view>立即</view>
						<view>支付</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 显示增加数量页面 -->
		<template v-if="showNumber">
			<view class="top2">
				<view class="top2-name">
					{{companyName}}
				</view>
				<view class="top2-number">
					<text>
						购买数量
					</text>
					
					<u-number-box 
						@change='numberChange'
						v-model="buyNum" 
						bg-color='#3688FF' 
						color='#ffffff' 
						iconStyle='color:#ffffff;font-size:32rpx;'
						buttonSize='60'
						input-width="100"
						:min="1">
					</u-number-box>
				</view>
				<view class="top2-price">
					<text>
						总价
					</text>
					<text>
						¥{{orderMoney}}
					</text>
				</view>
				<view class="top2-remark">
					<input placeholder="添加备注(20字以内)" maxlength="20" v-model.trim="remark" style="margin-bottom:20rpx;" />
				</view>
				<view class="top2-tips">
					温馨提示：请核对以上付款金额、付款对象等信息与交易匹配。
				</view>
			</view>
			
			<view class="bottom2">
				<text class="btn" @click="clickPay()" :style="{ background: payBackground }">立即支付</text>
			</view>
		</template>
		<!-------------------------------------------券弹窗------------------------------>
		<orderCoupon :couponData="couponData" ref="orderCoupon" @couponChoose="couponChoose" :chooseCouponObj="chooseCouponObj"></orderCoupon>
	</view>
</template>

<script>
import orderCoupon from '@/components/orderCoupon.vue'
export default {
  components: {
    orderCoupon
  },
  data() {
    return {
      backgroundColor:'#f5f5f5',//背景颜色
      showMoney:false,//显示输入金额页面
      showNumber:false,//显示输入数量页面
      tollPoint:'',//收费点信息
      buyNum:1,//购买数量
      remark: '', //备注
      orderMoney: '', //订单金额
      companyId: '', //公司Id
      merchantId: '', //商户Id
      companyName: '', //商家名称
      payType: '', //支付类型，微信小程序42，支付宝小程序33
      paySign: '', //签名
      signType: '', //签名方式
      timeStamp: '', //时间戳
      nonceStr: '', //随机字符串
      package: '', //订单详情扩展字符串
      orderInfo: '', //支付宝订单号
      flag: '', //setTimeout函数
      couponData: '', //所有劵数据
      chooseCouponObj: '', //默认选中最优价格优惠券
      savedMoney: 0, //优惠金额
      ableConpon: '', //没有可用优惠券时，达到一定条件可用，显示达到的条件
      orderSource: 8, //1公众号平台、2公众号组合页面1、3公众号组合页面2、4胖丁伙伴app、5第三方自助机、6第三方票房窗口、7平台快捷买单、8扫码支付
      background: '', //普通按钮背景颜色
      spaceBackground: '', //回格按钮背景颜色
      payBackground: '#3688FF', //支付背景颜色
      leftList: [
        //左侧按钮数据
        {
          child: [
            { text: 1, background: '' },
            { text: 2, background: '' },
            { text: 3, background: '' }
          ]
        },
        {
          child: [
            { text: 4, background: '' },
            { text: 5, background: '' },
            { text: 6, background: '' }
          ]
        },
        {
          child: [
            { text: 7, background: '' },
            { text: 8, background: '' },
            { text: 9, background: '' }
          ]
        },
        {
          child: [
            { text: 0, background: '' },
            { text: '.', background: '' }
          ]
        }
      ],
      orderId: '', //订单Id
      paydJumpUrl: '', //页面跳转路径
      companyAttribute: '', //等于5时为出租车
      timer: null, //定时器
      extendInfo: '' //额外信息
    }
  },
  onLoad(option) {
    //#ifdef MP-WEIXIN
    this.payType = 42
    //#endif

    //#ifdef MP-ALIPAY
    // uni.removeStorageSync('alipayQrCode') //临时解决出租车扫码之后跳转到组合票时，参数会有问题
    this.payType = 33
    //#endif
    this.merchantId=this.$commonjs.getKey(option,'merchantId')
    this.companyId=this.$commonjs.getKey(option,'companyId')
    this.extendInfo=this.$commonjs.getKey(option,'extendInfo')
    if(!this.extendInfo){
      this.showMoney=true
    }
    if (uni.getStorageSync('openid')) {
      if (this.merchantId) {
        //大商家的有merchantId
        this.initMerchant()
      } else {
        //小商家没有merchantId
        this.initCompany()
      }
      this.initCoupon()
    } else {
      this.login()
    }
  },
  // 一般页面用onUnload
  // tabbar页面用onHide
  onUnload() {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
  },
  methods: {
    login() {
      //---登录
      uni.getProvider({
        service: 'oauth',
        success:proRes=>{
          uni.login({
            provider: proRes.provider[0],
            success:res=>{
              if (res.code) {
                let source = ''
                if (proRes.provider[0] == 'weixin') {
                  source = 3
                } else if (proRes.provider[0] == 'alipay') {
                  source = 4
                }
                let data = {
                  code: res.code,
                  source, //微信小程序3，支付宝小程序4
                  appid: uni.getStorageSync('appid') || '',
                  companyId:this.companyId
                }
                this.$request('wechat/wx/getUserInfoByCode', data).then(res => {
                  if (res.code == '00') {
                    let openid = res.data.openid||''
                    uni.setStorageSync('openid', openid)
                    if (this.merchantId) {
                      //大商家的有merchantId
                      this.initMerchant()
                    } else {
                      //小商家没有merchantId
                      this.initCompany()
                    }
                    this.initCoupon()
                    //用于获取token等信息
                    let userId = res.data.userId || ''
                    let datas = { openid, source, userId }
                    this.$request('wechatUser/login/findWxUserAndLogin', datas).then(res => {
                      if (res.code == '00') {
                        let token = res.data.token || ''
                        uni.setStorageSync('token', token)
                        let createUserId = res.data.personId || ''
                        uni.setStorageSync('createUserId', createUserId)
                        let userId = res.data.userId || ''
                        uni.setStorageSync('userId', userId)
                      } else {
                        uni.showToast({
                          title: res.message,
                          icon: 'none'
                        })
                      }
                    }).catch(err => {
                      uni.showToast({
                        title: '登录失败',
                        icon: 'none'
                      })
                      this.timer = setTimeout(() => {
                        this.login()
                      }, 2000)
                    })
                  } else {
                    uni.showToast({
                      title: res.message,
                      icon: 'none'
                    })
                  }
                }).catch(err => {
                  uni.showToast({
                    title: '登录失败',
                    icon: 'none'
                  })
                  this.timer = setTimeout(() => {
                    this.login()
                  }, 2000)
                })
              }
            }
          })
        }
      })
    },
    //---数量改变时
    numberChange(e){
      let price=this.tollPoint.tollPointPrice
      this.orderMoney=parseFloat((price*e.value).toFixed(2)) 
    },
    //---输入数字
    clickNum(i, index, a) {
      //不超过14位数
      if (this.orderMoney.length > 13) {
        return
      }
      this.orderMoney += i
      this.leftList[index].child[a].background = '#dddddd'
      setTimeout(() => {
        this.leftList[index].child[a].background = ''
      }, 200)
      clearTimeout(this.flag)
      this.flag = setTimeout(() => {
        this.initCoupon()
      }, 1500)
    },
    //---退格
    clickEnter() {
      this.orderMoney = this.orderMoney.substr(0, this.orderMoney.length - 1)
      this.spaceBackground = '#dddddd'
      setTimeout(() => {
        this.spaceBackground = ''
      }, 200)
      clearTimeout(this.flag)
      this.flag = setTimeout(() => {
        this.initCoupon()
      }, 1500)
    },
    couponChoose(data) {
      //---子组件券选择之后触发的事件
      if (data) {
        this.chooseCouponObj = data
        this.savedMoney = this.chooseCouponObj.savedMoney || 0
      } else {
        this.chooseCouponObj = ''
        this.savedMoney = 0
      }
    },
    showCoupon() {
      //---展示券列表
      this.$refs.orderCoupon.showPop=true
    },
    //---初始化获取商家名称，大商家
    initMerchant() {
      let data = {
        merchantId: this.merchantId,
        companyId: this.companyId
      }
      uni.showLoading({ title: '加载中', mask: true })
      this.$request('scenic/order/findCodePayInfo', data).then(res => {
        uni.hideLoading()
        if (res.code == '00') {
          this.companyName = res.data.name
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      }).catch(err => {
        uni.hideLoading()
      })
    },
    //---初始化获取商家名称,没有merchantId的小商家
    initCompany() {
      let data = {
        id: this.companyId,//公司Id
        tollPoint:this.extendInfo,//扩展信息
      }
      uni.showLoading({ title: '加载中', mask: true })
      this.$request('user/newCompany/findCompanyById', data).then(res => {
        uni.hideLoading()
        if (res.code == '00') {
          this.paydJumpUrl = res.data.paydJumpUrl
          let list=res.data.companyTollPointVoList||[]
          list.forEach(item=>{
            if(item.tollPoints==this.extendInfo){
              this.tollPoint=item
            }
          })
          this.companyAttribute = res.data.companyAttribute
          if (this.companyAttribute == 5) {
					  //出租车显示联系人姓名
					  this.companyName = res.data.contactName
          } else {
					  //优先取收费点名称，然后是公司名称，然后是联系人名称
					  this.companyName=this.tollPoint.tollPointByname||res.data.companyName||res.data.contactName
          }
          if(this.tollPoint.tollPointsModel==0){
            //显示输入金额页面
            this.showMoney=true
          }
          if(this.tollPoint.tollPointsModel==1){
            //显示数量页面
            this.backgroundColor='#ffffff'
            this.showNumber=true
            //默认总价为一张的价格
            this.orderMoney=this.tollPoint.tollPointPrice
            if(this.orderMoney==null){
              uni.showToast({
							  title: '价格配置错误',
							  icon: 'none'
              })
            }
          }
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      }).catch(err => {
        uni.hideLoading()
      })
    },
    initCoupon() {
      //---加载优惠券
      let savedMoneyList = []
      this.chooseCouponObj = ''
      this.ableConpon = ''
      let data = {
        money: parseFloat(this.orderMoney) || 0, //订单总价，不算券，和现金红包
        merchantId: this.merchantId, //商户Id
        companyId: this.companyId, //公司Id
        orderSource: this.orderSource, //订单来源 8扫码支付
        openid:uni.getStorageSync('openid')||''
      }
      this.$request('wechatUser/myPage/usableCouponList', data).then(res => {
        if (res.code == '00') {
          this.couponData = res.data
          let masterSlaveCouponList = res.data.masterSlaveCouponList
          if (masterSlaveCouponList && masterSlaveCouponList.length > 0) {
            masterSlaveCouponList.forEach(item => {
              //获取最优券
              savedMoneyList.push(item.savedMoney)
            })
            let maxMoney = Math.max.apply(null, savedMoneyList)
            let arr = masterSlaveCouponList.filter(item => {
              //找到最大值的数组
              return item.savedMoney == maxMoney
            })
            if (arr.length == 1) {
              this.chooseCouponObj = arr[0]
            } else {
              //如果数组有多个时
              let index = arr.findIndex(item => {
                //如果有多个，找到是否有平台券，平台劵优先
                return item.createSource == 1
              })
              if (index > -1) {
                this.chooseCouponObj = arr[index]
              } else {
                this.chooseCouponObj = arr[0]
              }
            }
            this.savedMoney = this.chooseCouponObj.savedMoney
          } else {
            if (res.data.unusableCouponList.length > 0) {
              res.data.unusableCouponList.forEach((item, i) => {
                //没有可用优惠券，有达到条件可以用的优惠券，先显示条件，达到条件时显示可用优惠券
                if (item.isProduct == 1) {
                  this.ableConpon = item
                }
              })
            }
          }
        }
      })
    },
    clickPay() {
      //---点击立即支付，获取支付需要的参数
      if (!parseFloat(this.orderMoney)&&this.showMoney) {
        uni.showToast({
          title: '请输入正确金额',
          icon: 'none'
        })
        return
      }
      let couponList = []
      if (this.chooseCouponObj != '') {
        if (this.chooseCouponObj.slaveList.length > 0) {
          //有从卷取值从卷，没有从卷取值主劵
          couponList = [
            //券列表
            {
              couponId: this.chooseCouponObj.slaveCouponId, //券id
              isMerchant: this.chooseCouponObj.slaveCreateSource, //是否是商户的券
              myCouponId: this.chooseCouponObj.slaveId, //领取人编号
              couponType: this.chooseCouponObj.couponType, //券类型
              couponPrice: this.chooseCouponObj.savedMoney, //券价格
              couponCompanyId: this.chooseCouponObj.companyId //公司Id
            }
          ]
        } else {
          couponList = [
            {
              couponId: this.chooseCouponObj.couponId, //券id
              isMerchant: this.chooseCouponObj.createSource, //是否是商户的券
              myCouponId: this.chooseCouponObj.id, //领取人编号
              couponType: this.chooseCouponObj.couponType, //券类型
              couponPrice: this.chooseCouponObj.savedMoney, //券价格
              couponCompanyId: this.chooseCouponObj.companyId //公司Id
            }
          ]
        }
      }
      //由于输入数量页面没有做领券逻辑，暂时传给后端直接为空数组
      if(this.showNumber){
        couponList=[]
      }
      let data = {
        companyId: this.companyId,
        merchantId: this.merchantId,
        userId: uni.getStorageSync('openid')||'',
        orderMoney: parseFloat(this.orderMoney),//总价
        buyNum:this.buyNum,//数量
        payType: this.payType, //支付类型,
        orderSource: this.orderSource, //订单来源 8扫码支付
        couponList, //券列表
        extendInfo: this.extendInfo, //额外信息
        remark: this.remark //备注信息
      }
      if(this.showMoney){
        //输入金额页面
        data.unitPrice=parseFloat(this.orderMoney)
      }
      if(this.showNumber){
        //输入数量页面
        data.unitPrice=this.tollPoint.tollPointPrice
      }
      this.payBackground = '#cccccc'
      //重新加载优惠券
      this.initCoupon()
      this.$request('orderc/order/codePay', data)
        .then(res => {
          setTimeout(() => {
            this.payBackground = '#3688FF'
          }, 1000)
          if (res.code == '00') {
            if (res.data.errorMessage) {
              uni.showToast({
                title: res.data.errorMessage,
                icon: 'none'
              })
              return
            }
            this.orderId = res.data.id
            //微信入参
            this.signType = res.data.signType
            this.paySign = res.data.sign
            this.timeStamp = res.data.timestamp
            this.nonceStr = res.data.noncestr
            this.package = res.data.package
            //支付宝入参
            this.orderInfo = res.data.payInfo || ''
            this.goPay()
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none'
            })
          }
        })
        .catch(err => {
          this.payBackground = '#3688FF'
        })
    },
    goPay() {
      //---去支付
      // #ifdef MP-WEIXIN
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: this.timeStamp,
        nonceStr: this.nonceStr,
        package: this.package,
        signType: this.signType,
        paySign: this.paySign,
        success:res=>{
          if (this.companyAttribute == 5) {
            //出租车跳转分销组合票页面
            uni.reLaunch({
              url: this.paydJumpUrl
            })
          } else {
            uni.reLaunch({
              url: '/pages/payment/paySuccess/paySuccess?orderId=' + this.orderId
            })
          }
        },
        fail: function (err) {
          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          })
        }
      })
      //#endif

      // #ifdef MP-ALIPAY
      uni.requestPayment({
        provider: 'alipay', // 服务提供商 支付宝支付: alipay   微信支付: wxpay
        orderInfo: this.orderInfo, // 支付宝订单号
        success:res=>{
          if (this.companyAttribute == 5) {
            //出租车跳转分销组合票页面
            uni.reLaunch({
              url: this.paydJumpUrl
            })
          } else {
            uni.reLaunch({
              url: '/pages/payment/paySuccess/paySuccess?orderId=' + this.orderId
            })
          }
        },
        fail: function (err) {
          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          })
        }
      })
      // #endif
    }
  },
  watch: {
    orderMoney(val, oldVal) {
      if(this.showMoney){
        if (val == '.' && oldVal == '') {
				  //首位数是小数点自动加上0
				  this.orderMoney = 0 + '.'
        }
        if (val == '0' && oldVal == '') {
				  //首位数是0自动加上小数点
				  this.orderMoney = 0 + '.'
        }
        if (val.length == 2) {
				  //防止回退之后出现01,02等状况
				  if (val.substr(0, 1) == 0 && val.substr(1, 2) != '.') {
				    this.orderMoney = val.substr(1, 2)
				  }
        }
        if (isNaN(val) && val != '.') {
				  //出现非数字，输入无效
				  this.orderMoney = oldVal
        }
        var x = String(this.orderMoney).indexOf('.') + 1 //小数点的位置
        var y = String(this.orderMoney).length - x //小数的位数
        if (y > 2 && x > 0) {
				  this.orderMoney = oldVal
        }
        if (parseFloat(this.orderMoney)) {
				  this.payBackground = '#3688FF'
        } else {
				  this.payBackground = '#cccccc'
        }
      }
      
    }
  }
}
</script>

<style lang="scss">
// 输入金额页面样式
.bigBox {
	height: 100%;
}
/*上部分*/
.top {
	background: #ffffff;
	border-bottom: 1px solid #ececec;
}
.topName {
	font-size: 30rpx;
	font-weight: bold;
	padding: 50rpx 24rpx 0 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.topIcon {
	display: inline-flex;
	margin-right: 10rpx;
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	background: #ff8b57;
	align-items: center;
	justify-content: center;
}
.icon-tubiaolunkuo- {
	font-size: 36rpx;
	color: #ffffff;
	font-weight: 400;
}
.topMoney {
	padding: 80rpx 24rpx 24rpx 24rpx;
}
.moneyText {
	color: #ff3c00;
	font-size: 32rpx;
	font-weight: bold;
}
.moneyNumber {
	margin-top: 30rpx;
}
.moneyNumber text:nth-child(2) {
	font-size: 62rpx;
	font-weight: bold;
	position: relative;
	left: -6rpx;
}
.moneyNumber text:last-child {
	animation: dis 1.5s infinite;
	transition: 1s;
	width: 1px;
	height: 56rpx;
	display: inline-block;
	background: #333333;
	position: relative;
	top: 8rpx;
}
.topCoupon {
	display: flex;
	height: 90rpx;
	border-top: 1px solid $divider;
	align-items: center;
	padding: 0 24rpx;
	justify-content: space-between;
}
.couponLeft {
	font-size: 24rpx;
}
.couponLeft text:first-child {
	margin-right: 10rpx;
	display: inline-block;
	width: 30rpx;
	height: 30rpx;
	background: #f9690e;
	color: #ffffff;
	text-align: center;
	line-height: 28rpx;
	border-radius: 4rpx;
}
.couponRight {
	position: relative;
	left: 8rpx;
}
.couponRight text:first-child {
	font-size: 32rpx;
	color: #f9690e;
}
.couponRight text:nth-child(2) {
	font-size: 32rpx;
	color: #f9690e;
	font-weight: bold;
}
/*中间部分*/
.middle {
	padding: 30rpx 24rpx 50rpx 24rpx;
	color: #999999;
	line-height: 40rpx;
	background: #ffffff;
}
/*下部分*/
.bottom {
	position: absolute;
	bottom: 0;
	height: 40%;
	background: #ffffff;
	width: 100%;
	display: flex;
	border-top: 1px solid #dddddd;
	font-size: 50rpx;
}
.botLeft {
	width: 75%;
}
.botLeft view {
	height: 25%;
	display: flex;
	border-bottom: 1px solid #dddddd;
}
.botLeft view:last-child {
	border: none;
}
.botLeft view:last-child text:first-child {
	width: 66.7%;
}
.botLeft view:last-child text:last-child {
	width: 33.3%;
}
.botLeft view text {
	flex: 1;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid #dddddd;
}
.botLeft view:last-child text {
	flex: initial;
}
.botRight {
	width: 25%;
}
.rightOne {
	height: 25%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #dddddd;
}
.rightTwo {
	height: 75%;
	border: none;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
@keyframes dis {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
//输入数字页面样式
.top2{
	padding: 40rpx 24rpx;
}
.top2-name{
	font-size: 32rpx;
	font-weight: bold;
	color: #191919;
	text-align: center;
}
.top2-number{
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	margin-top: 80rpx;
	align-items: center;
}
.top2-price{
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	margin-top: 48rpx;
	text:nth-child(2){
		font-size: 40rpx;
		color: $red;
	}
}
.top2-remark{
	margin-top: 48rpx;
	color: $grey;
}
.top2-tips{
	margin-top: 24rpx;
	color: $grey;
	font-size: 24rpx;
}
.bottom2{
	position: fixed;
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: 0;
	box-shadow: 0px -4px 12px 2px rgba(0,0,0,0.08);
	background: #ffffff;
}
.btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	height: 80rpx;
	border-radius: 8rpx;
	font-size: 32rpx;
	font-weight: bold;
}
</style>
