wxThird/pages/subPack/oldhistoryDetail.vue

<template>
	<view class="box">
        <homenav :iStatusBarHeight="iStatusBarHeight" :title="'消费明细'" ></homenav>
		<view class="contentBox">
			<view class="top" :style="{background:'#'+themeColor}">
				<view class="orderState">
					<image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;">
					</image>
					<view class="stateBox" >
						<!-- 0待施工（已保存）1施工中（已派工）2已完工 3已质检 4 已作废 -->
						<view class="SheetState" >{{orderData.checkoutState?orderData.checkoutState:''}}</view>
					
					</view>
				</view>


			</view>

			<!-- 店铺信息 -->
			<view class="shopBox">
				<image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
				<view class="shopCont">
					<view class="shopName">{{orderData.shopName}}</view>
				</view>
			
			</view>


			<!-- 订单信息 -->
			<view class="information">
				<view class="carMes">
					<view class="plate">{{orderData.plateNumber}}</view>
					<view class="mileage" v-if="orderData.currentMileage>0">
						{{orderData.currentMileage}}km
					</view>
				</view>
				<view class="informationLine">
					<view class="informationTxt">姓名：</view>
					<view class="informationNum">{{orderData.customerName}}</view>
				</view>
				<view class="informationLine">
					<view class="informationTxt">手机号：</view>
					<view class="informationNum">{{orderData.customerPhone}}</view>
				</view>
				<view class="informationLine">
					<view class="informationTxt">单号：</view>
					<view class="informationNum">{{orderData.code}}</view>
				</view>
				<view class="informationLine">
					<view class="informationTxt">接车时间：</view>
					<view class="informationNum">{{orderData.billDate}}</view>
				</view>
				<view class="informationLine">
					<view class="informationTxt">服务顾问：</view>
					<view class="informationNum">{{orderData.pickName?orderData.pickName:''}}</view>
				</view>
				
				<view class="informationLine" v-if="Comment">
					<view class="informationTxt">备注：</view>
					<view class="informationNum" v-if="orderData.comment">{{orderData.comment}}
					</view>
				</view>

			</view>

			<!-- 项目明细 -->
			<view class="detailedBox itemBox" v-if=" orderData.listItems.length!=0">
				<view class="detailedTitle">项目</view>
				<view class="detailedLineBox">
					<view class="detailedLine" v-for="(item,index) in orderData.listItems">

						<view class="detailedName"><span v-if="item.CardDetailID" class="kaColor">卡</span>{{item.ItemName}}
						</view>
						<view class="secondBox" :class="{noLine:index == orderData.listItems.length-1}">
							<view>
								<view class="comment" v-if="ItemComment&&item.Comment">{{item.Comment}}</view>
							</view>
							
							<view class="secondRight">
								<!-- <view class="grayPrice">￥{{item.CheckOutTaxRate}}</view> -->
								<view class="price" v-if="ItemMoney&&item.RealMoney">
									<span>￥</span>
									{{item.RealMoney}}
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>


			<!-- 商品明细-->
			<view class="detailedBox itemBox" v-if="orderData.listParts.length!=0">
				<view class="detailedTitle">商品</view>
				<view class="detailedLineBox">
					<view class="detailedLine" v-for="(item,index) in orderData.listParts">


						<view class="goodTop">
							<view class="detailedName"><span v-if="item.CardDetailID"
									class="kaColor">卡</span>{{item.GoodsName}}</view>
							<view class="qty">x{{item.SaleQty}}</view>
						</view>
						<view class="secondBox" :class="{noLine:index == orderData.listParts.length-1}">
							<view>
								<view class="comment" v-if="GoodsComment&&item.Comment">{{item.Comment}}</view>
							</view>
							
							<view class="secondRight">
								<!-- <view class="grayPrice">￥{{item.CheckOutTaxRate}}</view> -->
								<view class="price" v-if="ItemMoney&&item.RealMoney">
									<span>￥</span>
									{{item.RealMoney}}
								</view>
							</view>
						</view>


					</view>
				</view>
			</view>

			<!-- 费用明细 -->
			<view class="goodscost"
				v-if=" TotalDiscountMoney ||ReceiptsMoney">
				<view class="detailedTitle">费用明细</view>
				
				<view class="goodscostLine" v-if="TotalDiscountMoney">
					<view class="goodscostTxt">优惠总计</view>
					<view class="goodsCostNum">￥{{orderData.discountMoney?orderData.discountMoney:0}}</view>
				</view>
				
				<view class="goodscostLine" v-if="ReceiptsMoney">
					<view class="goodscostTxt">支付金额</view>
					<view class="goodsCostNum">￥{{orderData.checkoutMoney?orderData.checkoutMoney:0}}</view>
				</view>
			</view>

			<!-- 手机号授权 -->
			<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
				<view class="authorizCont" @click.stop="">
					<view class="authorizName">{{wxOpenData.miniAppName}}</view>
					<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
					<button class="authorizContbutton" type="default" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber">授权</button>
				</view>
				<view style="text-align: center;padding-top: 56rpx;">
					<image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
				</view>
			</view>

		</view>

		<view v-if="appraise == true && orderData.billsheet.PayState == 2" class="bottom">
			<view
				v-if="(orderData.billsheet.EvaluateState == 0) && (lastDay <= 30) && appraise == true && orderData.billsheet.PayState == 2"
				@click.stop="goAppraise()" class="ping">评价</view>
			<view v-if="orderData.billsheet.EvaluateState == 1" @click.stop="goAppraiseDetail()" class="kan">查看评价</view>

		</view>

	</view>
</template>

<script>
	import homenav from "../../components/homenav/nav.vue"
	export default {
		components: {
			homenav
		},
		data() {
			return {
				location: '',
				id: '',
				orderData: '',
				themeColor: '',
				authorizShow: false,
				userInfo: '',
				ext: '',
				wxOpenData: '',
				appraise: false,
				lastDay: '',

				// 权限
				FaultDescription: false, //故障描述
				RepairDescription: false, //维修建议
				Comment: false, //备注

				ItemMoney: false, //项目、商品金额
				ItemComment: false, //项目备注
				GoodsComment: false, //商品备注

				AmountMoney: false, //应收总计
				TotalDiscountMoney: false, //优惠总计
				CardMoneyT: false, //计次卡冲销
				CardMoneyC: false, //储值卡冲销
				ReceiptsMoney: false, //支付金额
				iStatusBarHeight:'',
			}
		},
		onLoad(opt) {
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.id = opt.id
			this.themeColor = uni.getStorageSync("themeColor");
			this.userInfo = this.$store.state.userInfo;
			this.ext = this.$common.getExtStoreId();
			if (this.userInfo) {
				this.getData()
			} else {
				this.$common.automaticlogin().then(val => {
					this.userInfo = this.$store.state.userInfo;
					this.wxOpenData = this.$store.state.wxOpenData;
					this.themeColor = uni.getStorageSync("themeColor");
					this.getData()
					if(!this.userInfo){
						this.authorizShow=true
					}
				})
			}

			this.myPower();
			this.showPower();
		},

		methods: {
			//显示权限
			showPower() {
				this.$http('openweiXinCardInfoController/getShowSetting', {

				}, 'GET').then(res => {

					// 权限
					// FaultDescription:false,//故障描述
					// RepairDescription:false,//维修建议
					// Comment:false,//备注

					// ItemMoney:false,//项目、商品金额
					// ItemComment:false,//项目备注
					// GoodsComment:false,//商品备注

					// AmountMoney:false,//应收总计
					// TotalDiscountMoney:false,//优惠总计
					// CardMoneyT:false,//计次卡冲销
					// CardMoneyC:false,//储值卡冲销
					// ReceiptsMoney:false,//支付金额


					var list = res.data
					list.forEach((item, index) => {
						if (item.fieldValue == 'FaultDescription') {
							this.FaultDescription = item.isChecked
						}
						if (item.fieldValue == 'RepairDescription') {
							this.RepairDescription = item.isChecked
						}
						if (item.fieldValue == 'Comment') {
							this.Comment = item.isChecked
						}
						if (item.fieldValue == 'ItemMoney') {
							this.ItemMoney = item.isChecked
						}
						if (item.fieldValue == 'ItemComment') {
							this.ItemComment = item.isChecked
						}
						if (item.fieldValue == 'GoodsComment') {
							this.GoodsComment = item.isChecked
						}
						if (item.fieldValue == 'AmountMoney') {
							this.AmountMoney = item.isChecked
						}
						if (item.fieldValue == 'CardMoneyT') {
							this.CardMoneyT = item.isChecked
						}
						if (item.fieldValue == 'CardMoneyC') {
							this.CardMoneyC = item.isChecked
						}
						if (item.fieldValue == 'ReceiptsMoney') {
							this.ReceiptsMoney = item.isChecked
						}
						if (item.fieldValue == 'TotalDiscountMoney') {
							this.TotalDiscountMoney = item.isChecked
						}




					})

				})
			},
			//评价权限
			myPower() {
				this.$http('openMiniEvaluate/getEvaluateSetting', {

				}, 'GET').then(res => {
					// var list = res.data.Items
					this.appraise = res.data


				})
			},
			goAppraiseDetail(item) {
				uni.navigateTo({
					url: 'myAppraiseDetail?sheetId=' + this.orderData.billsheet.id
				})
			},
			goAppraise(item) {
				uni.navigateTo({
					url: 'appraise?sheetID=' + this.orderData.billsheet.id + '&shopID=' + this.orderData.billsheet
						.shopID
				})
			},
			decryptPhoneNumber: function(e) {
				console.log(e);
				this.code = e.detail.code
				this.wxPhoneLogin()
				this.authorizShow = false;
			},
			wxPhoneLogin() {
				var that = this;
				this.$http('miniApp2/sys/wxPhoneLogin', {
					appId: this.ext.appId,
					unionId: this.ext.unionId,
					code: this.code,
					openId: this.wxOpenData.openid
				}, 'POST').then(res => {
					var data = res.data;
					if (data.loginInfo) {
						this.userInfo = data.loginInfo.openUser;
						this.wxOpenData = data.loginInfo;
						this.$store.commit('mutationswxOpenData', data)
						this.$store.commit('mutationsuserInfo', this.userInfo)
						this.getData()
					}
				})
			},
			map() {
				console.log("打开地图")
				var that = this;
				if (!that.orderData.billsheet.lat || !that.orderData.billsheet.lng) {
					uni.showToast({
						title: '该店铺未设置定位',
						icon: 'none',
						duration: 3000
					});
				} else {
					uni.openLocation({
						latitude: Number(that.orderData.billsheet.lat),
						longitude: Number(that.orderData.billsheet.lng),
						name: that.orderData.billsheet.ShopName,
						address: that.orderData.billsheet.Address,
						success: function() {
							console.log('success');
						},
						fail(err) {
							console.log(err)
						}
					});
				}

			},

			call() {
				uni.makePhoneCall({
					phoneNumber: this.orderData.billsheet.shopMobilePhone
				});
			},


			getData() {
				let that = this
				uni.showLoading({
					title: '加载中'
				});

				this.$http('openweiXinCardInfoController/queryConsumptionDetailOld', {
					// lat: this.location.lat,
					// lng: this.location.lng,
					id: this.id,
				}, 'POST').then(res => {
					uni.hideLoading();
					this.orderData = res.data;

					console.log('data===', this.orderData);

				})
			},
			//时间对比
			getDateBeforeNow(stringTime) {
				console.log("传参未格式化", stringTime);
				stringTime = new Date(stringTime.replace(/-/g, '/'))

				// 统一单位换算
				var minute = 1000 * 60;
				var hour = minute * 60;
				var day = hour * 24;
				var week = day * 7;
				var month = day * 30;
				var year = month * 12;

				var time1 = new Date().getTime(); //当前的时间戳						console.log("当前时间", time1);

				// 对时间进行毫秒单位转换						var time2 = new Date(stringTime).getTime(); //指定时间的时间戳

				console.log("传过来的时间", time2);

				var time = time1 - time2;
				console.log("计算后的时间", time);

				var result =
					null; // if (time < 0) {						// 	// alert("传过来的时间的时间不能晚于当前时间！");						// 	result = stringTime;						// } else if (time / year >= 1) {
				// 	result = parseInt(time / year) + "年前";
				// } else if (time / month >= 1) {
				// 	result = parseInt(time / month) + "月前";
				// } else if (time / week >= 1) {						// 	result = parseInt(time / week) + "周前";						// } else if (time / day >= 1) {
				// 	result = parseInt(time / day) + "天前";
				// } else if (time / hour >= 1) {						// 	result = parseInt(time / hour) + "小时前";
				// } else if (time / minute >= 1) {
				// 	result = parseInt(time / minute) + "分钟前";						// } else {
				// 	result = "刚刚";						// }

				if (time < 0) {
					// alert("传过来的时间的时间不能晚于当前时间！");
					result = -1;
				} else if (time / day >= 0) {
					result = parseInt(time / day); //多少天前
				}
				console.log("多少天前", result);
				return result;
			},
			goback() {

				uni.navigateBack({})


			},

		},
		onPullDownRefresh() {

			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background: #F4F5F7;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.contentBox {

		background: #F4F5F7;
		padding-bottom: 100rpx;
	}

	.top {
		height: 190rpx;
		background: #FF0000;

	}

	.stateBox {
		display: flex;
	}

	.orderState {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 40rpx;
	}

	.SheetState {
		display: flex;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 15rpx;

	}



	.timeEditImg {
		width: 25rpx;
		height: 25rpx;
		padding-left: 20rpx;
	}



	.shopBoximg {
		width: 40rpx;
		height: 40rpx;
	}

	.shopRightImg {
		width: 44rpx;
		height: 45rpx;
	}

	.shopsx {
		width: 1px;
		height: 50rpx;
		background: #EEEEEE;
		margin-top: 30rpx;
		margin-left: 28rpx;
	}

	.shopBox {

		display: flex;
		padding: 30rpx 20rpx;
		margin: 0rpx 24rpx;
		margin-top: -60rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

	}

	.shopCont {
		width: 405rpx;
		padding-left: 20rpx;

	}

	.shopName {
		font-size: 30rpx;
		font-weight: bold;
		color: #3C3C3C;
		line-height: 45rpx;
	}

	.Address {
		color: #999999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.shopRihgtTxt {
		color: #999999;
		font-size: 24rpx;

	}

	.shopRightBox {

		padding-left: 28rpx;
	}

	.peopleCont {
		font-size: 28rpx;
		color: #3C3C3C;
		padding-left: 20rpx;
	}

	.people {
		display: flex;
		padding-left: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
	}

	.PlateNumberBox {
		display: flex;
		padding-left: 20rpx;
		padding-bottom: 30rpx;
	}

	.PlateNumbercx {
		font-size: 28rpx;

		color: #3C3C3C;
		padding-left: 20rpx;
	}

	.PlateNumber {
		width: 130rpx;
		height: 32rpx;
		border-radius: 4rpx;
		border: 1px solid #F19D01;
		line-height: 32rpx;
		text-align: center;
		font-size: 22rpx;
		color: #F19D01;
		margin-left: 26rpx;
	}

	.PlateNumberBoxTop {
		display: flex;
	}

	.CarModel {
		font-size: 26rpx;
		color: #999999;
		padding-left: 20rpx;
		padding-top: 6rpx;
		padding-right: 20rpx;
		padding-bottom: 15rpx;
		width: 600rpx;
	}

	.detailedBox {

		background: #FFFFFF;
		border-radius: 10px;
		margin: 20rpx 24rpx;
		padding-bottom: 20rpx;
	}

	.itemBox {
		margin-top: 20rpx;
	}

	.carMes {
		padding: 23rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.plate {
		font-size: 30rpx;
		color: #3C3C3C;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.mileage {
		font-size: 24rpx;
		color: #F19D01;
		padding: 0rpx 10rpx;
		border: 1rpx solid #F19D01;
		border-radius: 4rpx;
		height: 36rpx;
	}

	.detailedTitle {
		padding: 23rpx 20rpx;
		display: flex;
		text-align: center;
		align-content: flex-start;
		border-bottom: 1rpx solid #EEEEEE;

		font-size: 30rpx;
		font-weight: bold;
		color: #3C3C3C;
	}


	.detailedLine {

		padding: 20rpx 20rpx 0rpx;

	}

	.detailedImg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}



	.detailedName {
		font-size: 26rpx;
		color: #3C3C3C;
	}

	.kaColor {

		background: #F19D01;
		border-radius: 4rpx;

		color: #FFFFFF;
		font-size: 24rpx;
		margin-right: 8rpx;
		padding: 3rpx 5rpx;
	}

	.qty {

		font-size: 24rpx;
		font-weight: 400;
		color: #999999;

	}

	.secondBox {
		display: flex;
		padding: 20rpx 0rpx;
		justify-content: space-between;
		align-items: baseline;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.noLine {
		border-bottom: 0 solid #FFFFFF;
	}

	.comment {
		margin-right: 20rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		flex-grow: 1;
	}

	.secondRight {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
	}

	.grayPrice {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		text-decoration: line-through;
	}

	.price {

		font-size: 32rpx;
		font-weight: 500;
		color: #FF0000;
		display: flex;

		align-items: center;
	}

	span {
		font-size: 24rpx;

	}

	.goodTop {
		display: flex;
		justify-content: space-between;
	}

	.goodscost {

		background: #FFFFFF;
		border-radius: 10px;

		margin: 20rpx 24rpx;
		padding-bottom: 20rpx;
	}

	.goodscostLine {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 20rpx 20rpx;
		color: #333333;
	}

	.goodsCostNum {
		color: #FF0000;
		font-weight: bold;
	}

	.information {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 10px;
		margin-left: 24rpx;
		margin-top: 20rpx;
		padding: 0rpx 0 15rpx 0;
	}

	.informationLine {
		display: flex;
		font-size: 26rpx;
		padding: 15rpx 20rpx;
	}

	.informationTxt {
		width: 190rpx;
		color: #999999;
	}

	.informationNum {
		color: #333333;
		width: calc(100vw - 190rpx);
	}

	.copyBtn {
		width: 86rpx;
		height: 40rpx;
		background: #F4F5F7;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 40rpx;
		margin-left: 20rpx;
	}

	.orderBottom {
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
	}

	.cancelBtn {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #3C3C3C;
		margin-top: 21rpx;
		margin-right: 16rpx;
		margin-left: 20rpx;
	}

	.payBtn {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #FF4F00;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #FF4F00;
		margin-top: 21rpx;
		margin-right: 16rpx;
		margin-left: 20rpx;
	}

	.timeBox2 {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
	}

	.timeLeftActive {
		background: #FFFFFF;
	}

	.timeMain {
		width: 100vw;
		height: 70vh;
		margin-top: 30vh;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0px 0px;
	}

	.timesfNo {
		background: #F5F5F5;
	}

	.timesfActive {
		background: #FF4F00;

	}

	.timesfActive .timeSfNum {
		color: #FFFFFF;
	}

	.timesfActive .timeyy {
		color: #FFFFFF;
	}

	.topBox {
		padding: 20rpx 24rpx;
	}

	.timeTop {
		display: flex;
		line-height: 90rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		justify-content: space-between;
	}

	.timeTopTitle {
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #3C3C3C;
	}

	.close {
		color: #999999;
		font-size: 30rpx;
		padding-left: 30rpx;
	}

	.timeCont {
		height: calc(70vh - 210rpx);
	}

	.timeSv {
		height: calc(70vh - 210rpx);
	}

	.timeLeft2 {
		width: 162rpx;
		background: #F4F5F7;
		border-top: 1px soid #F4F5F7;
		border-right: 1px soid #F4F5F7;
	}

	.timeRight2 {
		width: 588rpx;
	}

	.timesf {
		width: 165rpx;
		height: 98rpx;
		border-radius: 7rpx;
		border: 2rpx solid #EEEEEE;
		text-align: center;
		margin-left: 20rpx;
		margin-bottom: 24rpx;
	}

	.timeBottom {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -2px 20rpx 0px rgba(153, 153, 153, 0.2);
		display: flex;
		align-items: center;

	}

	.timerightBox {
		display: flex;
		flex-wrap: wrap;
	}

	.timeCont {
		display: flex;
	}

	.timeSfNum {
		color: #666666;
		font-size: 28rpx;
		padding-top: 15rpx;
	}

	.timeyy {
		font-size: 24rpx;
		color: #999999;
	}

	.timecomplete {
		width: 690rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		line-height: 74rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
	}

	.timeleftLine {
		font-size: 30rpx;
		color: #999999;
		text-align: center;
		padding: 28rpx 10rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.yuyueBox {

		background: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;

	}

	.yuyueTime {
		display: flex;
		padding-left: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
		align-items: center;
	}

	.yuyueState {
		display: flex;
		padding-left: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
	}

	.maBox {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 20rpx;
	}

	.querenMa {

		margin: 20rpx 0;
		padding-bottom: 30rpx;
	}

	.maBoximg {
		width: 308rpx;
		height: 308rpx;
		margin: 30rpx 197rpx;


	}

	.rightShou {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.authorizBox {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
	}

	.authorizCont {
		margin-top: 30vh;
		width: 564rpx;
		height: 408rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-left: 93rpx;
		position: relative;
	}

	.authorizCloseImg {
		width: 62rpx;
		height: 62rpx;
	}

	.sqLogoBox {
		width: 180rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 90rpx;
		text-align: center;
		position: absolute;
		top: -50rpx;
		left: 192rpx;
	}

	.authorizName {
		color: #333333;
		line-height: 42rpx;
		font-size: 30rpx;
		text-align: center;
		padding-top: 58rpx;
	}

	.authorizMs {
		color: #999999;
		line-height: 36rpx;
		font-size: 26rpx;
		width: 452rpx;
		padding-top: 24rpx;
		text-align: center;
		margin-left: 56rpx;
	}

	.authorizContbutton {
		width: 422rpx;
		height: 88rpx;
		background: #D53533;
		border-radius: 44rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 62rpx;
		margin-left: 71rpx;
	}

	.bottom {

		position: fixed;
		width: 100%;
		padding: 20rpx 24rpx;

		right: 0;
		bottom: 0;
		background: #ffffff;
		font-size: 28rpx;
		display: flex;
		justify-content: flex-end;
		height: 58rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.ping {
		text-align: center;
		color: #FF4F00;
		width: 150rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #FF4F00;
	}

	.kan {
		text-align: center;
		color: #3C3C3C;
		width: 150rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #DDDDDD;
	}
</style>