risk-wx/pages/particulars/index.vue

<template>
	<view class="content">
		<u-sticky>
			<view class="head-no">
				<!-- <text>订单号: {{formData.orderNo}}</text> -->
				<view>
					<text>{{ formData.carRegNo == null ? '' : formData.carRegNo }}</text>
				</view>
				<view>
					<text>{{ formData.goodsCName == null ? '' : formData.goodsCName }}</text>
				</view>
			</view>
			<view class="head-no-addr">
				<view>
					<text>{{formData.loadAddr}}</text>
				</view>
				<span class="icon iconfont" style="font-size: 100rpx; color: #fcbd71; height: 80rpx;">&#xe6fb;</span>
				<view>
					<text>{{formData.unLoadAddr}}</text>
				</view>
			</view>
		</u-sticky>
		<u-sticky>
		</u-sticky>
		<view class="striping"></view>
		<!-- <view class="head a-blue" @click="telFun">
			<text>驾驶员: {{formData.driver1Name == null ? '' : formData.driver1Name}}&nbsp;{{formData.driver1mobile == null ? '' : formData.driver1mobile}}</text>
		</view> -->

		<!-- <u-tabs :list="tabs" @change="change" :activeStyle="{
				width: '180rpx',
				height: '60rpx',
				color: '#fff',
				backgroundColor: '#3c9cff',
				borderRadius: '80rpx',
				lineHeight: '60rpx',
				textAlign: 'center'
				}" :inactiveStyle="{
				width: '180rpx',
				height: '60rpx',
				color: '#3c9cff',
				backgroundColor: '#f0f0f0f0',
				borderRadius: '80rpx',
				lineHeight: '60rpx',
				textAlign: 'center'
				}"></u-tabs> -->


		<view v-if="isTabs == '装卸确认'">
			<view class="box-box">
				<view class="box-two">
					<text class="key">装车吨位<text style="color: red;">*</text></text>
					<input class="value-two" selection-start="0" selection-end="9999" :disabled="disabled" type="digit"
						@input="checkLoadQty" v-model="formData.loadQty" />
				</view>

				<view class="box-two">
					<text class="key">装车时间<text style="color: red;">*</text></text>
					<uni-datetime-picker class="value-two" :start="startDate" :end="new Date + ''" :disabled="disabled"
						v-model="formData.loadDateString" :border="false" />
				</view>

				<view class="box-two">
					<text class="key">卸车吨位<text style="color: red;">*</text></text>
					<input class="value-two" selection-start="0" selection-end="9999" :disabled="disabled" type="digit"
						@input="checkUnLoadQty" v-model="formData.unLoadQty" />
				</view>

				<view class="box-two">
					<text class="key">卸车时间<text style="color: red;">*</text></text>
					<uni-datetime-picker class="value-two" :start="formData.loadDateString" :end="new Date + ''"
						:disabled="disabled" :clear-icon="false" v-model="formData.unLoadDateString" :border="false" />
				</view>

				<!-- <view class="box">
					<view class="data">
						<text class="key">空载起点</text>
						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled"
							v-model="formData.emptyaddr1" />
					</view>
					<view class="data">
						<text class="key">空车里程</text>
						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled" type="digit"
							v-model="formData.odometerstart" />
					</view>
				</view>

				<view class="box">
					<view class="data">
						<text class="key">空载终点</text>
						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled"
							v-model="formData.emptyaddr2" />
					</view>
					<view class="data">
						<text class="key">空车里程</text>
						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled" type="digit"
							v-model="formData.odometerend" />
					</view>
				</view>

				<view class="box-two">
					<text class="key">重车里程</text>
					<input class="value-two" selection-start="0" selection-end="9999" :disabled="disabled" type="digit"
						@input="checkUnLoadmile" v-model="formData.loadmile" />
				</view> -->
				<!-- ORDER BILLS PLANS -->
				<!-- @change="checkboxChange" -->
				<u-checkbox-group v-model="detour" style="margin-left: 20rpx;" placement="column">
					<u-checkbox :customStyle="{marginBottom: '8px'}" key="1" label="行程绕路" name="行程绕路">
					</u-checkbox>
				</u-checkbox-group>
				<view v-if="detour.length > 0">
					<view class="box-two">
						<text class="key">绕路里程</text>
						<input class="value-two" selection-start="0" selection-end="9999" :disabled="disabled"
							@input="checkUnDetourMile" v-model="formData.detourMile" />
					</view>
					<view class="box-two">
						<text class="key">绕路原因</text>
						<input class="value-two" selection-start="0" selection-end="9999" :disabled="disabled"
							v-model="formData.detourDesc" />
					</view>
				</view>



			</view>
			<view class="box-box" style="margin-top: 40rpx;">
				<view style="margin-bottom: 20rpx;">
					<text style="color: #3c9cff;">单据拍照存档</text>
				</view>
				<u-upload :fileList="fileList1" accept="image" :sizeType="['compressed']" capture="camera"
					@afterRead="imgUploading" @delete="deletePic" name="1" multiple :previewFullImage="true"
					:disabled="disabled"></u-upload>
			</view>

			<view class="box-box">
				<view class="box-two">
					<text class="key">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</text>
					<input class="value-two" selection-start="0" selection-end="9999" :disabled="disabled"
						v-model="formData.driverassdesc" />
				</view>
			</view>


			<view class="attention">
				<!-- <text class="text-grey1">请查看</text>
				<text @click="attention()" class="text-blue">注意事项</text> -->
				{{this.formData.remarks}}
			</view>
		</view>
		<!-- <view v-if="isTabs == '订单信息'">
			<view class="box-two textAlign">
				<text class="key">货物名称</text>
				<text class="value">{{formData.goodsCName == null ? "" : formData.goodsCName}}</text>
			</view>
			<view class="box-two textAlign">
				<text class="key">装车地点</text>
				<text class="value">{{formData.loadAddr == null ? "" : formData.loadAddr}}</text>
			</view>
			<view class="box-two textAlign">
				<text class="key">装车厂家</text>
				<text class="value">{{formData.loadFactory == null ? "" : formData.loadFactory}}</text>
			</view>
			<view class="box-two textAlign">
				<text class="key">联系人电话</text>
				<text
					class="value">{{formData.loadAttn == null ? "" : formData.loadAttn}}&nbsp;{{formData.loadAttnTel == null ? "" : formData.loadAttnTel}}</text>
			</view>
			<view class="box-two textAlign">
				<text class="key">卸车地点</text>
				<text class="value">{{formData.unLoadAddr == null ? "" : formData.unLoadAddr}}</text>
			</view>
			<view class="box-two textAlign">
				<text class="key">卸车厂家</text>
				<text class="value">{{formData.unLoadFactory == null ? "" : formData.unLoadFactory}}</text>
			</view>
			<view class="box-two textAlign">
				<text class="key">联系人电话</text>
				<text
					class="value">{{formData.unLoadAttn == null ? "" : formData.unLoadAttn}}&nbsp;{{formData.unLoadAttnTel == null ? "" : formData.unLoadAttnTel}}</text>
			</view>

			<view class="attention">
				<text class="text-grey1">请查看</text>
				<text @click="attention()" class="text-blue">注意事项</text>
			</view>
		</view> -->

		<view class="cushion">
		</view>

		<!-- <view class="bottom" style="z-index: 4;">
			<view class="row">
				<view class="button">
					<u-button iconColor="#3c9cff" shape="circle" type="primary" :disabled="disabled"
						@click="submitShow = true" text="提交里程"></u-button>
				</view>
				<view class="button">
					<u-button iconColor="#3c9cff" shape="circle" type="primary" @click="skipClaimExpense"
						text="报销费用"></u-button>
				</view>
			</view>
		</view> -->
		<view class="bottom" style="z-index: 4;">
			<view class="row">
				<view class="button">
					<u-button iconColor="#3c9cff" shape="circle" type="primary" :disabled="disabled"
						@click="disabledClick" text="保存数据"></u-button>
				</view>
			</view>
		</view>


		<!-- <view class="bottom" style="z-index: 4;">
			<view class="row">
				<view class="button">
					<u-button iconColor="#3c9cff" shape="circle" type="primary" :disabled="disabled"
						@click="disabledClick" text="保存数据"></u-button>
				</view>
				<view class="button">
					<u-button iconColor="#3c9cff" shape="circle" type="primary" :disabled="disabled" @click=""
						@click="submitAudits" text="提交里程"></u-button>
				</view>
			</view>
		</view> -->

		<!-- 遮盖罩 -->
		<u-loading-page :loading="loading" style="z-index: 999;"></u-loading-page>
		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>

		<!-- 删除图片弹出框 -->
		<u-modal :show="deleteShow" title="提示" showCancelButton @confirm="deleteImg" @cancel="deleteShow = false">
			<view class="slot-content">
				<rich-text nodes="确定删除这张图片吗?"></rich-text>
			</view>
		</u-modal>

		<u-modal :show="submitShow" title="提示" showCancelButton @confirm="setOrderBillsPlansByid"
			@cancel="submitShow = false">
			<view class="slot-content">
				<rich-text nodes="确定要提交里程吗?"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getOrderBillsPlansByid,
		putOrderBillsPlansByid,
		insertTmsAttachMngs,
		pictureUploading,
		deleteTmsAttachMngs,
		audit,
		submitAudit
	} from "@/api/particulars"

	import {
		getGasStations,
		getItems,
		insertLoadFeeItems,
		getLoadFeeItems
	} from "@/api/reimbursement"
	import {
		login
	} from "../../api/login";
	export default {
		data() {
			return {
				// 遮盖罩
				loading: true,
				formData: {},
				// 表单验证
				rules: {
					loadQty: '',
					loadDateString: '',
					unLoadQty: '',
					unLoadDateString: '',
					// emptyaddr1: '',
					// odometerstart: '',
					// emptyaddr2: '',
					// odometerend: '',
					loadmile: '',
					remarks: ''
				},
				orderNo: '',
				// 照片
				fileList1: [],
				// 删除弹框
				deleteShow: false,
				// 提交里程弹窗
				submitShow: false,
				// 删除的图片
				event: {},
				// 输入框禁用
				disabled: false,
				status317: 0,
				status376: 0,
				// 当前时间的前60天
				startDate: '',
				tabs: [{
					name: '装卸确认'
				}, {
					name: '订单信息'
				}],
				isTabs: '装卸确认',
				// 绕路选项
				detour: []
			};
		},
		onLoad: function(option) {
			this.status317 = option.status;
			this.status376 = option.status;
			this.orderNo = option.orderNo;
			this.getData();
		},
		onUnload() {
			this.formData = {};
			this.loading = true;
			this.event = {};
		},
		methods: {
			// 查询数据
			getData() {
				getOrderBillsPlansByid(this.orderNo).then(res => {

					res.data.loadQty == 0 ? res.data.loadQty = null : res.data.loadQty
					res.data.unLoadQty == 0 ? res.data.unLoadQty = null : res.data.unLoadQty
					res.data.odometerstart == 0 ? res.data.odometerstart = null : res.data.odometerstart
					res.data.odometerend == 0 ? res.data.odometerend = null : res.data.odometerend
					res.data.loadmile == 0 ? res.data.loadmile = null : res.data.loadmile

					if (res.data.ifDetour == "T") {
						this.detour.push("行程绕路")
					}

					for (let role of res.data.roleList) {
						if (role.roleKey == 'DZ') {
							this.disabled = true;
						}
					}

					// 审核中
					if (res.data.ifLoaded == "T" &&
						res.data.ifUnLoaded == "T" &&
						res.data.ifStarted == "S") {
						this.disabled = true;
					}
					// 审核完成
					if (res.data.ifLoaded == "T" &&
						res.data.ifUnLoaded == "T" &&
						res.data.ifStarted == "A") {
						this.disabled = true;
					}

					this.formData = res.data;
					this.fileList1 = res.data.fileList1;
					this.loading = false;

					if (this.status317 == 6) {
						this.disabled = true;
					}
					this.startDate = this.GetTime(60)
				})
			},
			// 切换
			change(item) {
				this.isTabs = item.name;
			},
			// 数据校验
			dataVerify() {
				if (this.formData.loadQty == '' || this.formData.loadQty == null || this.formData.loadQty == '0') {
					this.$refs.uToast.show({
						type: 'warning',
						icon: false,
						message: "请输入装车吨位!",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					})
				} else if (this.formData.loadDateString == '' || this.formData.loadDateString == null) {
					this.$refs.uToast.show({
						type: 'warning',
						icon: false,
						message: "请选择装车时间!",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					})
				} else if (this.formData.unLoadQty == '' || this.formData.unLoadQty == null || this.formData.unLoadQty == '0') {
					this.$refs.uToast.show({
						type: 'warning',
						icon: false,
						message: "请输入卸车吨位!",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					})
				} else if (this.formData.unLoadDateString == '' || this.formData.unLoadDateString == null) {
					this.$refs.uToast.show({
						type: 'warning',
						icon: false,
						message: "请选择卸车时间!",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					})
				} else if (this.fileList1.length < 2) {
					return this.$refs.uToast.show({
						type: 'warning',
						icon: false,
						message: "图片最少两张!",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					})
				} else {
					return 'ok';
				}
			},
			// 提交里程点击事件
			disabledClick() {
				// if (this.status317 == 2 && this.dataVerify() == 'ok') {
				if (this.dataVerify() == 'ok') {
					this.submitShow = true
				} else {
					// this.$refs.uToast.show({
					// 	type: 'warning',
					// 	icon: false,
					// 	message: "不允许保存!",
					// 	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					// })
				}
			},
			// 保存订单
			setOrderBillsPlansByid(id) {

				this.formData.loadQty = this.formData.loadQty == null || this.formData.loadQty == '' ? 0 : this
					.formData.loadQty
				this.formData.unLoadQty = this.formData.unLoadQty == null || this.formData.unLoadQty == '' ? 0 :
					this.formData.unLoadQty
				this.formData.odometerstart = this.formData.odometerstart == null || this.formData.odometerstart ==
					'' ? 0 : this.formData.odometerstart
				this.formData.odometerend = this.formData.odometerend == null || this.formData.odometerend == '' ?
					0 : this.formData.odometerend
				this.formData.loadmile = this.formData.loadmile == null || this.formData.loadmile == '' ? 0 : this
					.formData.loadmile



				// 行程绕路赋值
				if (this.detour.length > 0) {
					this.formData.ifDetour = "T"
				} else {
					this.formData.ifDetour = "F"
				}

				putOrderBillsPlansByid(this.formData).then(res => {
					this.submitShow = false
					if (res.code == 200) {
						// 保存成功弹窗提示
						this.$refs.uToast.show({
							type: 'success',
							message: "保存成功!",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
					} else {
						// 保存失败消息
						this.$refs.uToast.show({
							icon: false,
							message: "保存失败请重试!",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					}
				})
			},
			// 点击拨打电话
			telFun() {
				if (this.formData.driver1mobile != null && this.formData.driver1mobile != '') {
					uni.makePhoneCall({
						phoneNumber: this.formData.driver1mobile, //电话号码
						success: function(e) {
							// console.log(e);
						},
						fail: function(e) {
							// console.log(e);
						}
					})
				}
			},
			// 时间计算
			GetTime(sky) {
				var date = new Date();
				var base = Date.parse(date); // 转换为时间戳
				var year = date.getFullYear(); //获取当前年份
				var mon = date.getMonth() + 1; //获取当前月份
				var day = date.getDate(); //获取当前日
				var oneDay = 24 * 3600 * 1000

				for (var i = 1; i < sky; i++) { //前sky天的时间
					var now = new Date(base -= oneDay);
					var myear = now.getFullYear();
					var month = now.getMonth() + 1;
					var mday = now.getDate()
					if (i == sky - 1) {
						var dataSky = [myear, month >= 10 ? month : '0' + month, mday >= 10 ? mday : '0' + mday]
							.join('-')
						return dataSky
						// + " 00:00:00"
					}
				}

			},
			// 删除图片
			deletePic(event) {
				if (this.status317 == 6) {
					this.$refs.uToast.show({
						type: 'warning',
						icon: false,
						message: "不允许修改!",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					})
				} else if (this.status317 == 2) {
					this.event = event;
					this.deleteShow = true;
				}
			},
			deleteImg() {
				var event = this.event;
				var url = event.file.url;
				var index = url.lastIndexOf("\/");
				var attachId = url.substring(index + 1, url.length);

				deleteTmsAttachMngs(attachId).then(res => {
					if (res.code == 200) {
						this[`fileList${event.name}`].splice(event.index, 1)
						// 删除成功消息
						this.$refs.uToast.show({
							type: 'success',
							message: "删除成功!",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
					} else {
						// 删除失败消息
						this.$refs.uToast.show({
							icon: false,
							message: "删除失败请重试!",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					}

					this.event = {};
					this.deleteShow = false;
				})
			},
			// 新增图片
			imgUploading(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let date = this.dateToString("yyyyMMdd");
					let dateHHmmss = this.dateToString("yyyy-MM-dd HH:mm:ss");
					this.formData.date = date;
					insertTmsAttachMngs(this.formData).then(res => {
						if (res.code == 200) {
							let data = {
								name: 'avatarfile',
								filePath: lists[i].url
							}
							// 获取经纬度
							let longitude = '';
							let latitude = '';
							uni.getLocation({
								type: 'wgs84',
								isHighAccuracy: true,
								success: function(res) {
									longitude = res.longitude
									latitude = res.latitude
									console.log('当前位置的经度：' + res.longitude);
									console.log('当前位置的纬度：' + res.latitude);
								}
							});
							let dataForm = {
								attachId: res.data,
								longitude: longitude,
								latitude: latitude,
								updateDate: dateHHmmss
							}
							// 上传图片
							pictureUploading(data, dataForm).then(res => {
								let item = this[`fileList${event.name}`][fileListLen]
								this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(
									item, {
										status: 'success',
										message: '',
										url: res.data
									}))
								fileListLen++
							})
						}

					})
				}
			},
			dateToString(fmt) {
				var date = new Date();
				var o = {
					"M+": date.getMonth() + 1, //月份 
					"d+": date.getDate(), //日 
					"H+": date.getHours(), //小时 
					"m+": date.getMinutes(), //分 
					"s+": date.getSeconds(), //秒 
					"q+": Math.floor((date.getMonth() + 3) / 3), //季度 
					"S": date.getMilliseconds() //毫秒 
				};
				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1
					.length));
				for (var k in o)
					if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ?
						(o[
							k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			},
			uploadFilePromise(url) {

				insertTmsAttachMngs(this.formData).then(res => {
					if (res.code != 200) {
						return null;
					}
					let data = {
						name: 'avatarfile',
						filePath: url
					}
					let dataForm = {
						attachId: res.data
					}
					pictureUploading(data, dataForm).then(res => {
						return res.data.data;
					})
				})
			},
			// 跳转报销费用页面
			skipClaimExpense() {
				uni.navigateTo({
					url: '/pages/particulars/claimExpense/index?orderNo=' + this.orderNo + '&status376=' +
						this
						.status376,
				});
			},
			// 跳转注意事项
			attention() {
				uni.navigateTo({
					url: '/pages/particulars/attention/index?remarks=' + this.formData.remarks,
				});
			},
			//输入框小数
			checkLoadQty(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.loadQty = e.target.value
				})
			},
			checkUnLoadQty(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.unLoadQty = e.target.value
				})

			},
			checkUnLoadmile(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.loadmile = e.target.value
				})

			},
			checkUnDetourMile(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.detourMile = e.target.value
				})

			}
		}
	}
</script>

<style lang="scss">
	@import url("/font/iconfont.css");

	// 修改布局方向为纵向布局
	.vertical-layout {
		display: flex;
	}

	.textAlign {
		text-align: right;
		// margin-left: 20rpx;
	}

	// 分割线
	.striping {
		width: 100%;
		height: 4rpx;
		background-color: #f0f0f0f0;
	}

	.box-box {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.a-blue {
		color: #3c9cff;
	}

	.content {

		// box-sizing: border-box;
		background-color: white;

		.head-no {
			// border-radius: 0 0 40rpx 40rpx;
			// width: 960rpx;
			// height: 100rpx;
			height: 40rpx;
			padding: 0 30rpx;

			color: #fff;

			vertical-align: middle;
			display: flex;
			// align-items: center;
			align-items: flex-end;
			
			justify-content: space-between;
			box-sizing: border-box;

			font-size: 34rpx;
			font-weight: 700;

			background-color: #3c9cff;

		}

		.head-no-addr {
			// width: 960rpx;
			height: 100rpx;
			// padding-left: 30rpx;
			padding: 0 30rpx;
			vertical-align: middle;
			color: #fff;
			font-size: 34rpx;
			font-weight: 700;

			display: flex;

			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			background-color: #3c9cff;
		}

		.head {
			// width: 100%;
			height: 100rpx;
			padding-left: 30rpx;

			vertical-align: middle;
			display: table-cell;

			font-size: 34rpx;
			font-weight: 900;
			// background-color: red;
		}

		.box-two {

			color: #3b3b3b;

			overflow: hidden;
			height: 100rpx;

			// border-bottom: 2rpx solid #f0f0f0f0;

			padding-left: 20rpx;
			margin-right: 20rpx;

			// font-size: 30rpx;

			display: flex;
			align-items: center;

			.key {


				display: inline-block;
				width: 24%;
				color: #3c9cff;
				// font-weight: 700;

			}

			.value {
				margin-left: 20rpx;
				// color: #787878;
				color: #3b3b3b;
				margin-right: 20rpx;

			}

			.value-two {
				width: calc(100% - 24%);
				color: #3b3b3b;
				// margin-right: 20rpx;
				border-bottom: 2rpx dotted #000;
			}
		}

		.box {

			color: #3b3b3b;

			overflow: hidden;
			height: 100rpx;

			// border-bottom: 2rpx solid #f0f0f0f0;
			padding-left: 20rpx;
			// font-size: 30rpx;

			display: flex;
			align-items: center;

			.data {
				width: 50%;
				height: 100%;
				// background-color: pink;
				display: flex;
				align-items: center;

				.key {
					// background-color: indianred;
					width: 100%;
					color: #3c9cff;
				}

				.key-date {
					width: 40%;
				}


				.value {
					margin-right: 20rpx;
					border-bottom: 2rpx dotted #000;
					// color: rgb(144, 147, 153);
					color: #3b3b3b;
				}
			}
		}

		.bottom {

			position: fixed;
			bottom: calc(var(--window-bottom));
			width: 100%;
			height: 130rpx;
			background-color: white;

			.row {

				display: flex;
				justify-content: space-evenly;
				height: 130rpx;
				align-items: center;

				.button {
					// width: 300rpx;
					width: 660rpx;
				}
			}




		}

		.attention {
			padding: 30rpx;
			padding-left: 50rpx;
			padding-bottom: 40rpx;

			background-color: #f0f0f0f0;
		}

		.cushion {
			width: 100%;
			height: 104rpx;
			background-color: #f0f0f0f0;
		}
	}
</style>