dev/dcp-app-gate/pages/profile/personIntegrate/orderListDetail.vue

<template>
	<view>
		<view>
			<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
				:background="background" title-width="300" :title="i18n('orderListDetail')"></u-navbar>
		</view>
		<view class="user-info" v-show="shopInfo.orderStatus==0">
			<view class="user-icon">
				<image src="@/static/orderDetail/user-time.png" class="icon-pic" />
			</view>
			<view class="user-thing">{{$i18n.locale=='zh'?'等待发货':'Wait for sending'}}</view>
			<view class="user-time">{{$i18n.locale=='zh'?'普通快递':'Ordinary express'}}</view>
		</view>
		<view class="user-detail" v-show="shopInfo.orderStatus==1">
			<view class="user-icon">
				<image src="@/static/orderDetail/get-user.png" class="icon-pic" />
			</view>
			<view class="user-thing">{{$i18n.locale=='zh'?'正在运输':'In transit'}}</view>
		</view>
		<view class="user-detail" v-show="shopInfo.orderStatus==2">
			<view class="user-icon">
				<image src="@/static/orderDetail/user-1122.png" class="icon-pic" />
			</view>
			<view class="user-thing">{{$i18n.locale=='zh'?'交易完成':'Complete transaction'}}</view>
		</view>

		<view class="user-detail" v-show="shopInfo.orderStatus==4">
			<view class="user-icon">
				<image src="@/static/orderDetail/user-1122.png" class="icon-pic" />
			</view>
			<view class="user-thing">{{$i18n.locale=='zh'?'交易完成':'Complete transaction'}}</view>
		</view>
		<view class="order-address" v-show="shopInfo.orderStatus==0">
			<view class="address-name">{{shopInfo.userName}}</view>
			<view class="address-txt">
				<view class="txt-left">{{shopInfo.addressConcat}}12312</view>
				<view class="txt-right" @tap="changeAddress()">
					<image src="@/static/orderDetail/user-text.png" class="address-pic" />
				</view>
			</view>
		</view>
		<view class="order-address" v-show="shopInfo.orderStatus!=0">
			<view class="address-name">{{shopInfo.userName}}</view>
			<view class="address-txt">
				<view class="txt-left">{{shopInfo.addressConcat}}12312</view>
			</view>
		</view>
		<view class="user-address" v-show="getAddress">
			<u-form :model="form" ref="uForm">
				<u-form-item v-if="$i18n.locale=='zh'" :label="$i18n.locale=='zh'?'所在地区':'Aera:'" label-width="140rpx">
					<u-input :disabled='info' :placeholder="$i18n.locale=='zh'?'请选择地区':'Please select a region'"
						:border="border" v-model="this.form.division" @tap='cancelInfo'></u-input>
					<u-select v-model="show" model="muitl-column-auto" child-name="child" value-name="id"
						label-name="name" @confirm="confirm"></u-select><!-- :list="sysAreaList" -->
				</u-form-item>
				<u-form-item label-width="140rpx" :label="$i18n.locale == 'zh' ? '详细地址' : 'Detail:'">
					<u-input :placeholder="$i18n.locale == 'zh'? '请输入详细地址': 'Please enter detail address'" type="text"
						:border="border" v-model="form.address" />
				</u-form-item>
				<u-button size="medium" class="btn-left" @tap='openAddress'>取消</u-button>
				<u-button type="primary" size="medium" class="btn-right" @tap='closeAddress'>确认</u-button>
			</u-form>
			<u-picker mode="region" v-model="show" @confirm="confirm" :area-code='["11","1101","110101"]'></u-picker>
		</view>
		<view class="shop-list">
			<view class="shop-text">{{$i18n.locale=='zh'?'礼品信息':'Present information'}}</view>
			<!-- <view class="shop-line"></view> -->
			<view class="shop-info">
				<view class="shop-pic">
					<image :src="websiteUrl+shopInfo.picture" class="user-pic-info">
					</image>
				</view>
				<view class="shop-detail">
					<view class="shop-title">{{$i18n.locale=='zh'?shopInfo.commodityName:shopInfo.commodityNameEn}}
					</view>
					<view class="shop-time">
						{{$i18n.locale=='zh'?'有效期':'Period of validity'}}{{shopInfo.createDate|time('YYYY-MM-DD')}}
					</view>
					<view class="shop-last">
						<view class="shop-pay">{{shopInfo.point}}{{$i18n.locale=='zh'?'积分':'Intetral'}}</view>
						<view class="shop-num">x{{shopInfo.exchangeQuantity}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-details">
			<view class="order-text">{{$i18n.locale=='zh'?'订单信息':'Order information'}}</view>
			<view class="order-info">
				<view class="order-left">{{$i18n.locale=='zh'?'礼品合计':'Together'}}：</view>
				<view class="order-right">{{shopInfo.point}}{{$i18n.locale=='zh'?'积分':'Intetral'}}</view>
			</view>
			<view class="order-info">
				<view class="order-left">{{$i18n.locale=='zh'?'运费':'Freight'}}：</view>
				<view class="order-right">{{$i18n.locale=='zh'?'无':'No matter'}}</view>
			</view>
			<view class="order-info">
				<view class="order-left">{{$i18n.locale=='zh'?'优惠券':'Discount'}}：</view>
				<view class="order-right">{{$i18n.locale=='zh'?'暂无可用':'Temporarily no use'}}</view>
			</view>
			<view class="order-info">
				<view class="order-left">{{$i18n.locale=='zh'?'优惠活动':'Special'}}：</view>
				<view class="order-right">{{$i18n.locale=='zh'?'暂无活动':'No activity'}}</view>
			</view>
		</view>

		<!-- <view class="shop-bill">
			<view class="bill-text">
				<view class="bill-left">{{$i18n.locale=='zh'?'发票类型':'Invoice type'}}：</view>
				<view class="bill-right">电子纸质</view>
			</view>
			<view class="bill-text">
				<view class="bill-left">{{$i18n.locale=='zh'?'发票抬头':'Invoice title'}}：</view>
				<view class="bill-right">电子纸质</view>
			</view>
			<view class="bill-text">
				<view class="bill-left">{{$i18n.locale=='zh'?'发票内容':'Invoice content'}}：</view>
				<view class="bill-right">电子纸质</view>
			</view>
		</view> -->
		<view class="order-serial">
			<view class="serial-text">
				<view class="serial-left-text" v-if="$i18n.locale=='zh'">订单编号：</view>
				<view class="serial-left" v-if="$i18n.locale!='zh'">Order number：</view>
				<view class="serial-right">{{shopInfo.orderNo}}</view>
			</view>
		</view>
		<view class="order-btn2" v-show="shopInfo.orderStatus==0">
			<button class="delete-btn2" @tap="deleteOrder">{{$i18n.locale=='zh'?'取消订单':'Cancel'}}</button>
			<button class="again-btn2" @tap="getAgain">{{$i18n.locale=='zh'?'再次兑换':'Again'}}</button>
		</view>
		<view class="order-btn4" v-show="shopInfo.orderStatus==1">
			<button class="delete-btn4" @tap="confirmOrder">{{$i18n.locale=='zh'?'确认收货':'Confirm receipt'}}</button>
			<button class="again-btn4" @tap="getAgain">{{$i18n.locale=='zh'?'再次兑换':'Again'}}</button>
		</view>
		<view class="order-btn1" v-show="shopInfo.orderStatus==2">
			<button class="speak-btn1"
				@tap="speakShop(shopInfo.commodityId)">{{$i18n.locale=='zh'?'评论礼品':'Speak'}}</button>
			<button class="again-btn1" @tap="getAgain">{{$i18n.locale=='zh'?'再次兑换':'Again'}}</button>
		</view>
		<view class="order-btn3" v-show="shopInfo.orderStatus==3">
			<button class="cancel-btn3" @tap="CancelOrder">{{$i18n.locale=='zh'?'删除订单':'Delete order'}}</button>
			<button class="again-btn3" @tap="getAgain">{{$i18n.locale=='zh'?'再次兑换':'Again'}}</button>
		</view>
		<view class="order-btn3" v-show="shopInfo.orderStatus==4">
			<button class="cancel-btn3" @tap="CancelOrder">{{$i18n.locale=='zh'?'删除订单':'Delete order'}}</button>
			<button class="again-btn3" @tap="getAgain">{{$i18n.locale=='zh'?'再次兑换':'Again'}}</button>
		</view>
		<view class="btm-box"></view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="address">
			<uni-popup-message :type="msgType" :message="addressText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog" v-if="$i18n.locale=='zh'">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" content="确定取消此订单吗？"
					@confirm="dialogConfirm()" @close="dialogClose" mode='base'></uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="alertDialog" type="dialog" v-if="$i18n.locale=='en'">
				<uni-popup-dialog :type="msgType" cancelText="cancel" confirmText="ok"
					content="Are you sure to cancel this order？" @confirm="dialogConfirm()" @close="dialogClose"
					mode='base'></uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="alertAddress" type="dialog" v-if="$i18n.locale=='zh'">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" content="确定要修改此地址吗？"
					@confirm="dialogAddress()" @close="addressClose" mode='base'></uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="alertAddress" type="dialog" v-if="$i18n.locale=='en'">
				<uni-popup-dialog :type="msgType" cancelText="cancel" confirmText="ok"
					content="Are you sure you want to change this address？" @confirm="dialogAddress()"
					@close="addressClose" mode='base'></uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="CancelAddress" type="dialog" v-if="$i18n.locale=='zh'">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" content="确定要删除此订单吗？"
					@confirm="cancelAddress()" @close="addressCancel" mode='base'></uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="CancelAddress" type="dialog" v-if="$i18n.locale=='en'">
				<uni-popup-dialog :type="msgType" cancelText="cancel" confirmText="ok"
					content="Are you sure you want to delete this order？" @confirm="cancelAddress()"
					@close="addressCancel" mode='base'></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import moment from 'moment'

	import {
		modifyAddress,
		cancelGoodsOrders,
		deleteGoodsOrders,
		confirmGoodsOrders
	} from '@/api/address'
	export default {
		components: {
			moment,
			modifyAddress,
			cancelGoodsOrders,
			deleteGoodsOrders,
			confirmGoodsOrders,
			uniPopupDialog,
			uniPopupMessage,
			uniPopup
		},
		data() {
			return {
				info: true,
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
				shopId: null,
				shopType: null,
				shopInfo: {},
				msgType: 'success',
				messageText: '请稍后...',
				addressText: '请稍后...',
				getAddress: false,
				form: {
					name: '',
					phone: '',
					postCode: '',
					division: "",
					address: "",
					status: false,
				},
				border: true,
				show: false,
				child: "child",
				name: "name",
				id: "id",
				test: [],


			}
		},
		onLoad(option) {
			this.shopId = option.id;
			console.log(this.shopId);
			this.getShopDetail(this.shopId);
		},
		filters: {
			twoDecimal(value) {
				return parseFloat(string(value)).toFixed(2);
			},
			time(data, type) {
				return moment(data).format(type);
			}
		},
		methods: {
			cancelInfo() {
				this.show = true
				uni.hideKeyboard()
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			confirm(e) {
				console.log(e)
				this.form.division = e.province.label + '/' + e.city.label + '/' + e.area.label;
				let str = e.province.label + '/' + e.city.label + '/' + e.area.label;
				this.test = str.split('/')
			},
			// 修改地址
			changeAddress() {
				this.$refs.alertAddress.open()
			},
			dialogAddress() {
				this.getAddress = true
				this.$refs.alertAddress.close()
			},
			async closeAddress() {
				this.userId = JSON.parse(uni.getStorageSync("user"))
				let params = {
					userId: this.userId.id,
					consignee: this.shopInfo.consignee,
					mobile: this.shopInfo.phone,
					province: this.test[0],
					city: this.test[1],
					area: this.test[2],
					address: this.form.address,
				};
				let orderId = this.shopId;
				const tokendata = await this.$myRequest({
					url: '/sys/token',
					method: 'get'
				});
				modifyAddress(JSON.stringify(params), orderId, tokendata.data).then((res) => {
					if (res.status == "200") {
						this.getAddress = false
						if (this.$i18n.locale == 'zh') {
							this.messageText = '修改成功'
						} else {
							this.messageText = 'modify successfully'
						}
						this.$refs.message.open()
						setTimeout(() => {
							this.$refs.message.close()
						}, 500)
						this.getShopDetail(orderId)
					} else {
						if (this.$i18n.locale == 'zh') {
							this.msgType = 'error'
							this.messageText = '修改失败'
						} else {
							this.msgType = 'error'
							this.messageText = 'fail to modify'
						}
						th
						this.messageText = ''
						this.$refs.message.open()
						setTimeout(() => {
							this.$refs.message.close()
						}, 500)
					}
				})
			},
			openAddress() {
				let id = this.shopId
				this.getAddress = false
				setTimeout(() => {
					this.getShopDetail(id)
				}, 500)
			},
			//评论礼品
			speakShop(orderId) {
				console.log(orderId, '---id---');
				let shopId = this.shopId
				console.log(shopId, '---shop---');
				uni.navigateTo({
					url: './speakShopInfo?orderId=' + orderId + '&shopId=' + shopId
				})
			},
			//再次兑换
			getAgain() {
				if (this.$i18n.locale == 'zh') {
					this.messageText = '正在前往积分兑换页面...'
				} else {
					this.messageText = 'Heading to the points exchange page...'
				}

				this.$refs.message.open()
				setTimeout(() => {
					uni.navigateTo({
						url: './integrateConversion'
					})
				}, 1000)
			},
			// 取消订单
			deleteOrder() {
				this.$refs.alertDialog.open()
			},
			async dialogConfirm() {
				const tokendata = await this.$myRequest({
					url: '/sys/token',
					method: 'get'
				});
				let id = this.shopId
				console.log(id);
				cancelGoodsOrders(id, tokendata.data)
					.then((res) => {
						this.messageText = res.data
					})
				this.$refs.alertDialog.close()
				this.$refs.message.open()
				setTimeout(() => {
					uni.navigateTo({
						url: './myPayList'
					})
				}, 1500)
			},
			//删除订单
			CancelOrder() {
				this.$refs.CancelAddress.open()
			},
			async cancelAddress() {
				// let params = {
				// 	id: this.shopId
				// }
				let id = this.shopId
				const tokendata = await this.$myRequest({
					url: '/sys/token',
					method: 'get'
				});
				// console.log(params.id);
				deleteGoodsOrders(id, tokendata.data).then((res) => {
					this.messageText = res.msg
				})
				this.$refs.CancelAddress.close()
				this.$refs.message.open()
				setTimeout(() => {
					uni.navigateTo({
						url: './myPayList'
					})
				}, 1500)
			},
			// 确认收货
			async confirmOrder() {
				let id = this.shopId
				const tokendata = await this.$myRequest({
					url: '/sys/token',
					method: 'get'
				});
				confirmGoodsOrders(id, tokendata.data).then((res) => {
					this.messageText = res.data
				})
				this.$refs.message.open()
				setTimeout(() => {
					uni.navigateTo({
						url: './myPayList'
					})
				}, 1500)
			},
			//获取礼品详情
			async getShopDetail(id) {
				console.log(id, '-----------');
				const res = await this.$myRequest({
					url: '/uc/umsPointCommodityOrders/getCommodityOrderDetails',
					data: {
						orderId: id
					},
				})
				// console.log(res, '============');
				this.shopInfo = res.data.order
				// console.log(this.shopInfo);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-info {
		width: 100%;
		height: 150rpx;
		background-color: #2bc25b;
		display: flex;

		.user-icon {
			height: 150rpx;
			width: 40rpx;
			margin-left: 8%;

			.icon-pic {
				width: 100%;
				height: 40rpx;
				margin-top: 55rpx;
			}
		}

		.user-thing {
			height: 150rpx;
			line-height: 150rpx;
			font-size: 44rpx;
			color: #fff;
			font-weight: 700;
			// font-style: italic;
			margin-left: 8%;
		}

		.user-time {
			height: 150rpx;
			line-height: 150rpx;
			color: #fff;
			margin-left: 30%;
		}
	}

	.user-detail {
		width: 100%;
		height: 150rpx;
		background-color: #5dabff;
		display: flex;

		.user-icon {
			height: 150rpx;
			width: 40rpx;
			margin-left: 8%;

			.icon-pic {
				width: 100%;
				height: 40rpx;
				margin-top: 55rpx;
			}
		}

		.user-thing {
			height: 150rpx;
			line-height: 150rpx;
			font-size: 44rpx;
			color: #fff;
			font-weight: 700;
			// font-style: italic;
			margin-left: 8%;
		}
	}

	.order-address {
		width: 100%;
		height: 180rpx;
		background-color: #fff;

		.address-name {
			width: 60rpx;
			line-height: 60rpx;
			margin-left: 8%;
			font-weight: 700;
		}

		.address-txt {
			height: 120rpx;
			display: flex;
			justify-content: space-evenly;

			.txt-left {
				width: 70%;
				height: 100rpx;
				margin-top: 20rpx;
			}

			.txt-right {
				width: 20%;
				height: 100rpx;
				width: 50rpx;

				.address-pic {
					height: 50rpx;
					width: 100%;
					margin-top: 25rpx;
				}
			}
		}
	}

	.shop-list {
		width: 100%;
		margin-top: 30rpx;
		height: 300rpx;
		background-color: #fff;

		.shop-text {
			height: 100rpx;
			line-height: 100rpx;
			margin-left: 8%;
			font-weight: 700;
		}

		.shop-line {
			width: 100%;
			border-bottom: 1rpx solid #878787;
			margin-bottom: 30rpx;
		}

		.shop-info {
			height: 180rpx;
			width: 92%;
			margin-left: 8%;
			display: flex;

			.shop-pic {
				width: 20%;
				height: 180rpx;
				margin-right: 40rpx;

				.user-pic-info {
					width: 100%;
					height: 100%;
				}
			}

			.shop-detail {
				width: 70%;
				height: 180rpx;

				.shop-title {
					height: 60rpx;
					line-height: 60rpx;
					font-weight: 700;
				}

				.shop-time {
					height: 40rpx;
					line-height: 40rpx;
					color: #878787;
				}

				.shop-last {
					height: 80rpx;
					display: flex;

					.shop-pay {
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
						font-weight: 700;
						color: red;
					}

					.shop-num {
						height: 50rpx;
						width: 50rpx;
						line-height: 50rpx;
						margin-top: 15rpx;
						text-align: center;
						color: #878787;
						border: 1rpx solid #878787;
						border-radius: 10rpx;
						margin-left: 40%;
					}
				}
			}
		}
	}

	.order-details {
		width: 100%;
		height: 340rpx;
		background-color: #fff;
		margin-top: 30rpx;

		.order-text {
			height: 80rpx;
			line-height: 80rpx;
			margin-left: 8%;
			font-weight: 700;
		}

		.order-info {
			height: 60rpx;
			display: flex;
			margin-left: 8%;

			.order-left {
				width: 24%;
				font-weight: 700;
				line-height: 60rpx;
				text-align: left;
			}

			.order-right {
				color: #878787;
				line-height: 60rpx;
			}
		}
	}

	.shop-bill {
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		margin-top: 30rpx;

		.bill-text {
			height: 60rpx;
			display: flex;
			margin-left: 8%;

			.bill-left {
				width: 24%;
				height: 60rpx;
				font-weight: 700;
				line-height: 60rpx;
			}

			.bill-right {
				height: 60rpx;
				line-height: 60rpx;
				color: #878787;
				font-size: 26rpx;
			}
		}
	}

	.order-serial {
		width: 100%;
		margin-top: 30rpx;
		height: 100rpx;
		background-color: #fff;

		.serial-text {
			height: 100rpx;
			margin-left: 8%;
			display: flex;

			.serial-left-text {
				width: 23%;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 700;
			}

			.serial-left {
				width: 32%;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 700;
			}

			.serial-right {
				height: 100rpx;
				line-height: 100rpx;
				color: #878787;
			}
		}
	}

	.user-address {
		width: 96%;
		margin-left: 2%;
		// height: 400rpx;
		padding: 20rpx;
		background-color: #fff;
		border: 1rpx solid #878787;
		border-radius: 20rpx;
		margin-top: 30rpx;

		// transform: translateY(-200%);
		.btn-left {
			margin-left: 10%;
			margin-top: 30rpx;
		}

		.btn-right {
			margin-left: 20%;
			margin-top: 30rpx;
		}
	}

	.order-btn1 {
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		display: flex;

		.speak-btn1 {
			height: 50rpx;
			line-height: 50rpx;
			margin-top: 40rpx;
			width: 180rpx;
			text-align: center;
			border-radius: 50rpx;
			border: 1rpx solid #878787;
			margin-left: 45%;
			font-size: 26rpx;
		}

		.again-btn1 {
			height: 50rpx;
			line-height: 50rpx;
			margin-top: 40rpx;
			width: 180rpx;
			text-align: center;
			border-radius: 50rpx;
			border: 1rpx solid #878787;
			background-color: #1777FEFF;
			color: #fff;
			font-size: 26rpx;
		}
	}

	.order-btn2 {
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		display: flex;

		.delete-btn2 {
			height: 50rpx;
			line-height: 50rpx;
			margin-top: 40rpx;
			width: 180rpx;
			// text-align: center;
			border-radius: 50rpx;
			border: 1rpx solid #878787;
			margin-left: 45%;
			font-size: 26rpx;
		}

		.again-btn2 {
			height: 50rpx;
			line-height: 50rpx;
			margin-top: 40rpx;
			width: 180rpx;
			text-align: center;
			border-radius: 50rpx;
			border: 1rpx solid #878787;
			background-color: #1777FEFF;
			color: #fff;
			font-size: 26rpx;
		}
	}

	.order-btn3 {
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		display: flex;

		.cancel-btn3 {
			height: 50rpx;
			line-height: 50rpx;
			margin-top: 40rpx;
			width: 180rpx;
			border-radius: 50rpx;
			border: 1rpx solid #878787;
			margin-left: 45%;
			font-size: 26rpx;
		}
	}

	.again-btn3 {
		height: 50rpx;
		line-height: 50rpx;
		margin-top: 40rpx;
		width: 180rpx;
		text-align: center;
		border-radius: 50rpx;
		border: 1rpx solid #878787;
		background-color: #1777FEFF;
		color: #fff;
		font-size: 26rpx;
	}

	.order-btn4 {
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		display: flex;

		.delete-btn4 {
			height: 50rpx;
			line-height: 50rpx;
			margin-top: 40rpx;
			width: 180rpx;
			// text-align: center;
			border-radius: 50rpx;
			border: 1rpx solid #878787;
			margin-left: 45%;
			font-size: 26rpx;
		}

		.again-btn4 {
			height: 50rpx;
			line-height: 50rpx;
			margin-top: 40rpx;
			width: 180rpx;
			text-align: center;
			border-radius: 50rpx;
			border: 1rpx solid #878787;
			background-color: #1777FEFF;
			color: #fff;
			font-size: 26rpx;
		}
	}

	.btm-box {
		width: 100%;
		height: 30rpx;
	}
</style>