wangluohuoyun-huozhuapp/pages/order/orderDetails.vue

<!-- 订单详情-->
<template>
	<view class="content">
		<view class="fixed1"></view>
		<view class="fixed">
			<view class='title flex flex-center'>
				<u-icon class="back" name="arrow-left" color="" size="20" @click="back"></u-icon>
				<view class="nav-title">订单详情</view>
				<u-icon class="search" name="server-fill" color="" size="28" @click="$helper.contactCustomerService">
				</u-icon>
			</view>
		</view>
		<view class="content1">
			<view class="item1">
				<view class="status">{{dataObj.cargoOwnerStatus}}</view>

			</view>
			<!-- flex flex-space-between -->
			<view class="item2">

				<u-button class="btn" text="驳回" @click="accept(2)" v-if="dataObj.cargoOwnerStatus=='待接单'">
				</u-button>
				<u-button class="btn" text="接受" @click="accept(1)" v-if="dataObj.cargoOwnerStatus=='待接单'">
				</u-button>
				<u-button class="btn" text="终止" @click="stop()" v-if="dataObj.cargoOwnerStatus=='未装车'">
				</u-button>
				<u-button class="btn" text="查看合同" @click="lookContract"></u-button>
				<u-button class="btn" text="签订合同" @click="signContract"
					v-if="dataObj.cargoOwnerStatus=='待确认装车'&&dataObj.cargoOwnerContract!='1'">
				</u-button>

				<u-button class="btn" text="驳回装车信息" @click="confirmLoading()" v-if="dataObj.cargoOwnerStatus=='待确认装车'">
				</u-button>
				<u-button class="btn" text="确认装车" @click="confirmLoading(3)"
					v-if="dataObj.cargoOwnerStatus=='待确认装车'&&dataObj.cargoOwnerContract=='1'">
				</u-button>
				<u-button class="btn" text="驳回卸车信息" @click="confirmUnLoading" v-if="dataObj.cargoOwnerStatus=='待收货'">
				</u-button>
				<u-button class="btn" text="确认卸车" @click="confirmUnLoading" v-if="dataObj.cargoOwnerStatus=='待收货'">
				</u-button>
				<u-button class="btn" text="付款" @click="closed"
					v-if="dataObj.cargoOwnerStatus=='待结算'||dataObj.cargoOwnerStatus=='已结算'"></u-button>
				<u-button class="btn" text="还款" @click="stop" v-if="dataObj.cargoOwnerStatus=='待还款'"></u-button>
				<u-button class="btn" text="联系客服"
					v-if="dataObj.cargoOwnerStatus!='待接单'&&dataObj.cargoOwnerStatus!='未装车'">
				</u-button>
			</view>
			<view class="item3 flex flex-space-between align-center">
				<view class="left flex align-center">
					<u--image :showLoading="true" :src="src" width="44px" height="44px" @click="" shape='circle'>
					</u--image>
					<view class="name">{{dataObj.cargoOwner}}</view>
					<view class="flex align-center">
						<!-- <view class="number">4.98</view> -->
						<!-- <u-icon class="star" name="star-fill" color="#FEC823" size="20" @click="back"></u-icon> -->
					</view>
				</view>
				<view class="right flex s-row align-center phone">
					<view class="bgc">
						<u-icon class="phone" name="phone-fill" color="#2772FB" size="20" @click="toPhone"></u-icon>
					</view>

					<view class="hz-name">联系司机</view>
				</view>
			</view>
			<!-- <view class='row-between'>
				<view class="">货主</view>
				<view>张三</view>
			</view>
			<view class='row-between'>
				<view class="">货主单位</view>
				<view>黑龙江中天昊元贸易有限公司</view>
			</view>
			<view class='row-between'>
				<view class="">卸货地</view>
				<view>黑龙江省齐齐哈尔市梅里斯达斡尔族区杜尔门沁达斡尔乡53农场</view>
			</view>
			<view class='row-between'>
				<view class="">货名</view>
				<view>玉米</view>
			</view>
			<view class='row-between'>
				<view class="">距离</view>
				<view>约15公里</view>
			</view>
			<view class='row-between'>
				<view class="">货运费</view>
				<view>100元/吨</view>
			</view> -->
		</view>

		<view class="content2">
			<view class="flex flex-space-between border">
				<view class="flex s-row item1">
					<view class="fontsize-46 fontweight-500 text">{{dataObj.sendCity}}</view>

					<view class="fontsize-28 gray">发货地</view>
				</view>
				<image class="change-btn" src="@/static/images/common/jt.png" mode='widthFix'></image>
				<view class="flex s-row item2">

					<view class="fontsize-46 fontweight-500 text" @click="">{{dataObj.unloadCity}}</view>
					<view class="fontsize-28 gray text-align-right">卸货地</view>
				</view>
			</view>
			<view class="level2-title">基本信息</view>
			<view class='row-between'>
				<view class="row-left-text gray">订单编号</view>
				<view class="row-right-text">{{dataObj.orderNo}}</view>
			</view>
			<!-- 	<view class='row-between'>
				<view class="row-left-text gray">货主</view>
				<view class="row-right-text">{{dataObj.cargoOwner}}</view>
			</view> -->
			<view class='row-between'>
				<view class="row-left-text gray">发货单位</view>
				<view class="row-right-text">{{dataObj.compName?dataObj.compName:'个人货主'}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">发货地</view>
				<view class="row-right-text place">
					{{dataObj.sendPrivate}}{{dataObj.sendCity}}{{dataObj.sendArea}}{{dataObj.sendDetailedAddress}}
				</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">卸货地</view>
				<view class="row-right-text place">
					{{dataObj.unloadPrivate}}{{dataObj.unloadCity}}{{dataObj.unloadArea}}{{dataObj.unloadDetailedAddress}}
				</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">货名</view>
				<view class="row-right-text">{{dataObj.goodsName}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">距离</view>
				<view class="row-right-text">约{{dataObj.distance}}公里</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">运费</view>
				<view class="row-right-text">{{dataObj.freight}}{{dataObj.illingMethod==0?'元/吨':'元/车'}}</view>
			</view>

		</view>
		<view class="content3" v-if="status1">
			<view class="level2-title">承运信息</view>
			<view class='row-between'>
				<view class="row-left-text gray">合同编号</view>
				<view class="row-right-text">{{dataObj.contractNo}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">车牌号</view>
				<view class="row-right-text">{{dataObj.carrierInfo.carNo}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">预计运费</view>
				<view class="row-right-text">{{dataObj.carrierInfo.estimatedFreight}}元</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">装车时间</view>
				<view class="row-right-text gray">{{dataObj.carrierInfo.loadingDate}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">装车照片</view>
				<view class="flex">
					<u--image :showLoading="true" :src="item" width="40px" height="40px"
						v-for="(item,index) in zcImgList" :key='index'></u--image>
				</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">合计应付运费</view>
				<view class="row-right-text">{{dataObj.carrierInfo.totalFreight}}元</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">卸车时间</view>
				<view class="row-right-text gray">{{dataObj.carrierInfo.loadingDate}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">卸车照片</view>
				<view class="flex">
					<u--image :showLoading="true" :src="item" width="40px" height="40px"
						v-for="(item,index) in xcImgList" :key='index'></u--image>
				</view>
			</view>
		</view>
		<!-- v-if="status2 -->
		<view class="content4" v-if="status2">
			<view class="level2-title gray">运费信息（单位：元）</view>
			<view class='row-between'>
				<view class="row-left-text gray">预付运费</view>
				<view class="row-right-text">{{dataObj.freightInfo.prepaidFreight}}</view>
			</view>
			<view class='flex flex-end'>
				<view class="gray row-right-text">{{dataObj.freightInfo.prepaidFreightDate}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">运费尾款</view>
				<view class="row-right-text">{{dataObj.freightInfo.freightBalance}}</view>
			</view>
			<view class='row-between mx row-left-text gray'>
				明细：预付{{dataObj.freightInfo.freightBalance}}元，扣款{{dataObj.freightInfo.deduction}}元，服务费{{dataObj.freightInfo.serviceCharge}}元，尾款{{dataObj.freightInfo.freightBalance}}元，合计收款{{dataObj.freightInfo.totalCollection}}元。
			</view>
		</view>
		<!-- v-if="status3" -->
		<view class="content4" v-if="status3">
			<view class="level2-title gray">还款信息</view>
			<view class='row-between'>
				<view class="row-left-text gray">运费</view>
				<view class="row-right-text">{{dataObj.freightInfo.totalRepayable}}</view>
			</view>
			<view class='flex flex-end'>
				<view class="gray row-right-text">{{dataObj.freightInfo.prepaidFreightDate}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">超期费（每天3%）</view>
				<view class="row-right-text">{{dataObj.freightInfo.overdueFee}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">合计应还</view>
				<view class="row-right-text">{{dataObj.freightInfo.totalRepayable}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">还款（尾号{{dataObj.freightInfo.repaymentBank}}）</view>
				<view class="row-right-text">{{dataObj.freightInfo.repaymentConfirm}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">{{dataObj.freightInfo.updateDate}}</view>
				<!-- <view class="row-right-text">{{dataObj.freightInfo.freightBalance}}</view> -->
			</view>
		</view>
		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :confirmText='confirmText'
			:closeOnClickOverlay='true' :showCancelButton='true' @confirm="confirmClick" @close="cancelClick"
			@cancel="cancelClick" class="modal">
			<u-radio-group v-model="radiovalue1" placement="" v-if='isShowTerminationReason' class='row'>
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
					:label="item.name" :name="item.name" @change="radioChange">
				</u-radio>
			</u-radio-group>
			<u--textarea class="row" v-model="value2" placeholder="终止原因描述" count maxlength='50'
				v-if='isShowTerminationReason'>
			</u--textarea>
		</u-modal>
		<u-toast ref="uToast"></u-toast>
		<!-- 		<view v-if="lookAlert" class="look-contract" @click="lookAlert==false">
			<u-button class="btn" text="查看合同" @click="lookContract"></u-button>
			<u-button class="btn" text="签名"></u-button>
			<view class="wrapper">
				<view class="handBtn">
					<image @click="selectColorEvent('black','#1A1A1A')"
						:src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
						:class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
					<image @click="selectColorEvent('red','#ca262a')"
						:src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
						:class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
					<button @click="retDraw" class="delBtn">重写</button>
					<button @click="saveCanvasAsImg" class="saveBtn">保存</button>
					<button @click="previewCanvasImg" class="previewBtn">预览</button>
					<button @click="subCanvas" class="subBtn">完成</button>
				</view>
				<view class="handCenter">
					<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
						@touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
				</view>
				<view class="handRight">
					<view class="handTitle">请签名</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	var that;
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				type: null,
				cyinfoStatus: '未装车',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				isShowTerminationReason: false,
				id: "",
				dataObj: {
					contractNo: '123'
				},
				type: null,
				status1: false,
				status2: false,
				status3: false,
				id: '',
				value2: '',
				radiolist1: [{
						name: '已与货主协商',
						disabled: false
					},
					{
						name: '货主原因终止',
						disabled: false
					},
					{
						name: '司机个人原因终止',
						disabled: false
					}, {
						name: '其他',
						disabled: false
					}
				],
				radiovalue1: '已与货主协商',
				confirmText: '终止',
				alertTitle: '确定终止订单？',
				alertContent: "",
				isShowAlert: false,
				zcImgList: [],
				xcImgList: [],
				contractSrc: '',
				canvasName: 'handWriting',
				ctx: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
			}

		},
		onLoad(options) {
			that = this
			this.id = options.id
			// this.ctx = uni.createCanvasContext("handWriting");
			// this.$nextTick(() => {
			// 	uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
			// 			this.canvasWidth = rect.width;
			// 			this.canvasHeight = rect.height;
			// 			/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
			// 			this.setCanvasBg('#fff');
			// 		})
			// 		.exec();
			// });
		},
		onShow() {
			this.getList()
		},
		methods: {
			lookContract() {
				this.$request.baseRequest('get', '/orderInfo/setPdf', {}).then(res => {
						if (res.code == 200) {
							debugger
							this.contractSrc = res.data
							uni.downloadFile({
								url: res.data,
								success: function(res) {
									var filePath = res.tempFilePath;
									uni.openDocument({
							 		filePath: filePath,
							  	showMenu: true,
							  	success: function(res) {
							  		console.log('打开文档成功');
										}
									});
								}
							});
							// this.$refs.uToast.show({
							// 	type: 'success',
							// 	message: "提交成功",
							// 	complete() {
							// 		that.upCallback({
							// 			size: 10,
							// 			num: 1
							// 		})
							// 	}
							// })

						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			signContract() {
				// this.lookAlert = true
				uni.$u.route('/pages/order/signContract', this.dataObj);

			},
			// 完结
			closed() {
				let item = this.dataObj
				let that = this
				this.$request.baseRequest('post', '/orderInfo/api/editEnd', {
						id: item.id,
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "提交成功",
								complete() {
									that.upCallback({
										size: 10,
										num: 1
									})
								}
							})

						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			accept(type) {
				this.type = type
				if (type == 1) {
					this.alertTitle = '确定接受订单？'
					this.confirmText = '确定'
				} else if (type == 2) {
					this.alertTitle = '确定拒绝订单？'
					this.confirmText = '确定'
				} else {
					this.alertTitle = '确定终止订单？'
					this.confirmText = '终止'
				}
				this.isShowAlert = true
			},
			confirmLoading(type) {
				debugger
				this.type = type
				if (type == 3) {
					this.alertTitle = '确认装车？'
					this.confirmText = '确定'
				} else if (type == 4) {
					this.alertTitle = '确认卸车？'
					this.confirmText = '确定'
				}
				this.isShowAlert = true
				// uni.$u.route('/pages/order/confirmLoading', item);
			},
			confirmUnLoading() {
				let item = this.dataObj
				uni.$u.route('/pages/order/confirmUnloading', item);
			},
			confirmClick() {
				debugger
				that.isShowAlert = false
				if (this.type == 1 || this.type == 2) {
					let _title = ''
					this.$request.baseRequest('post', '/orderInfo/api/orderReceiving', {
							id: this.dataObj.id,
							flag: this.type
						}).then(res => {
							if (res.code == 200) {
								if (this.type == 1) {
									_title = '接单成功'
								} else {
									_title = '拒绝接单成功'
								}
								this.$refs.uToast.show({
									type: 'success',
									message: _title,
									complete() {
										that.mescroll.resetUpScroll()
									}
								})
							} else {
								if (this.type == 1) {
									_title = '接单失败'
								} else {
									_title = '拒绝接单失败'
								}
								this.$refs.uToast.show({
									type: 'success',
									message: _title,
									complete() {
										that.mescroll.resetUpScroll()
									}
								})
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				} else if (this.type == 3 || this.type == 4) {
					debugger
					let _flag = ''
					if (this.type == 3) _flag = 1
					if (this.type == 4) _flag = 2
					this.$request.baseRequest('post', '/carrierInfo/cargoOwnerLoadingAdd', {
							id: this.dataObj.id,
							loadingFlag: _flag,
							flag: 1
						}).then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: 'success',
									message: "提交成功",
									complete() {
										this.getList()
										// that.upCallback({
										// 	size: 10,
										// 	num: 1
										// })
									}
								})

							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				} else {
					if (this.radiovalue1 == '其他' && !this.value2) {
						this.$refs.uToast.show({
							type: 'error',
							message: "请填写终止原因描述!",
						})
						return
					}
					let _terminationReason = ''
					if (this.radiovalue1 == '已与货主协商') {
						_terminationReason = 1
					} else if (this.radiovalue1 == '货主原因终止') {
						_terminationReason = 2
					} else if (this.radiovalue1 == '司机个人原因终止') {
						_terminationReason = 3
					} else if (this.radiovalue1 == '其他') {
						_terminationReason = 4
					}
					this.$request.baseRequest('post', '/orderInfo/api/end', {
							id: this.id,
							terminator: 2,
						}).then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: 'success',
									message: '终止订单成功',
								})
							} else {
								this.$refs.uToast.show({
									type: 'success',
									message: '终止订单失败',
								})
							}
							that.mescroll.resetUpScroll()
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				}
			},
			cancelClick() {
				this.isShowAlert = false
			},
			stop() {
				let item = this.dataObj
				// 货主接单
				if (item.cargoOwnerStatusKey == 1) {
					this.isShowTerminationReason = false
				} else {
					this.isShowTerminationReason = true
				}
				this.id = item.id
				this.isShowAlert = true
			},
			toPhone() {
				uni.makePhoneCall({
					phoneNumber: this.dataObj.cargoOwnerPhone
				});
			},
			back() {
				uni.navigateBack()
			},
			getList() {
				this.$request.baseRequest('get', '/orderInfo/getOrderInfo', {
					id: this.id,

				}).then(res => {
					if (res.code == 200) {
						this.dataObj = res.data
						// 承运信息显示
						if (res.data.cargoOwnerStatus != "待接单" && res.data.cargoOwnerStatus != "未装车" && res.data
							.cargoOwnerStatus != "已终止") {
							this.status1 = true
						}
						// 运费信息
						if (res.data.cargoOwnerStatus != "待接单" && res.data.cargoOwnerStatus != "未装车" && res.data
							.cargoOwnerStatus != "待确认装车" && res.data.cargoOwnerStatus != "已驳回装车信息" && res.data
							.cargoOwnerStatus != "待平台确认装车" && res.data.cargoOwnerStatus != "平台驳回装车信息" && res.data
							.cargoOwnerStatus != "运输中" && res.data.cargoOwnerStatus != "待结算" && res.data
							.cargoOwnerStatus != "已终止") {
							this.status2 = true
						}
						//还款信息
						if (res.data.cargoOwnerStatus == "待还款" && res.data.cargoOwnerStatus == "已还款" && res.data
							.cargoOwnerStatus == "已完结") {
							this.status3 = true
						}
						if (res.data.carrierInfo) {
							if (res.data.carrierInfo.loadingImg) {
								let _zcList = res.data.carrierInfo.loadingImg.split(',')
								for (let i = 0; i < _zcList.length; i++) {
									if (_zcList[i]) this.zcImgList.push(_zcList[i])
								}
							}
							if (res.data.carrierInfo.unloadingImg) {
								let _xcList = res.data.carrierInfo.unloadingImg.split(',')
								for (let i = 0; i < _xcList.length; i++) {
									if (_xcList[i]) this.xcImgList.push(_xcList[i])
								}
							}
						}
					}

				})
			},
			goConfirmLoading(id) {

				console.log('点击详情id：', id)
				uni.$u.route('/pages/order/confirmLoading', {
					id: this.id,
				});
			},
		}
	}
</script>

<style lang="scss">
	.fixed,
	.fixed1 {
		background: white;
		position: fixed;
		top: var(--status-bar-height);
		z-index: 999;
		width: 100%;
	}

	.fixed {
		padding-bottom: 10rpx;

		.title {
			background: white;
			position: relative;
			font-size: 36rpx;
			color: rgba(0, 0, 0, 0.85);

			.search {
				position: absolute;
				right: 20rpx;
			}

			.back {
				position: absolute;
				left: 20rpx;

			}
		}
	}

	.fixed1 {
		top: 0;
		height: var(--status-bar-height);
		background: white;
	}

	.row-between {
		margin-bottom: 10rpx;
	}

	.content1 {
		background: white;
		margin: calc(var(--status-bar-height) + 80rpx) 20rpx 0 20rpx;
		border-radius: 20rpx;
		padding: 40rpx 0rpx 0 0;
		box-sizing: border-box;

		.status {
			display: flex;
			justify-content: center;
			margin-bottom: 40rpx;
			font-size: 36rpx;
			color: #333333;
			font-weight: 700;
		}

		.btn {
			width: 40%;
			margin-top: 20rpx;
		}

		.item2 {
			padding-bottom: 40rpx;
		}

		.item3 {
			padding: 20rpx;
			background: linear-gradient(180deg, #F7F7F9 0%, #FFFFFF 100%);
			border-radius: 0 0 20rpx 20rpx;

			.name {
				margin-left: 10rpx;
				margin-right: 20rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}

			.number {
				font-size: 26rpx;
				color: #878787;
			}

			.star {
				margin-left: 10rpx;
			}

			.phone {
				.bgc {
					background: #E5F0FE;
					width: 58rpx;
					height: 58rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
				}

				.hz-name {
					font-size: 26rpx;
					color: #2772FB;
				}

			}
		}
	}

	.level2-title {
		margin: 20rpx 0 20rpx 0;
	}

	.content2 {
		background: white;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;

		.change-btn {
			width: 86rpx;
			height: 86rpx;
			position: relative;
			top: -20rpx;
		}

		.item1,
		.item2 {
			width: 40%;

			.text {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.gray {
				text-align: center;
			}

		}

		.item1 .text {
			text-align: center;
		}

		.item2 .text {
			text-align: center;
		}

		.border {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 33rpx;
		}



		.place {
			width: 80%;
			text-align: right;
		}
	}

	.content3,
	.content4 {
		background: white;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.content4 {
		.time {
			text-align: right;
		}

		.mx {

			background: #F7F8FA;
			padding: 10rpx;
			margin: 10rpx 0;
		}
	}

	/deep/.u-modal__content {
		flex-direction: column;
	}

	.look-contract {
		padding-top: 1000rpx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: #0000005e;
		width: 100%;
		height: 100vh;

		.btn {
			width: 70%;
			margin-bottom: 20rpx;
		}
	}

	.wrapper {
		width: 100%;
		height: 95vh;
		margin: 30rpx 0;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
		position: relative;
	}

	.handWriting {
		background: #fff;
		width: 100%;
		height: 95vh;
	}

	.handRight {
		display: inline-flex;
		align-items: center;
	}

	.handCenter {
		border: 4rpx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
	}

	.handTitle {
		transform: rotate(90deg);
		flex: 1;
		color: #666;
	}

	.handBtn button {
		font-size: 28rpx;
	}

	.handBtn {
		height: 95vh;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.delBtn {
		position: absolute;
		top: 250rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.delBtn image {
		position: absolute;
		top: 13rpx;
		left: 25rpx;
	}

	.subBtn {
		position: absolute;
		bottom: 52rpx;
		left: -3rpx;
		display: inline-flex;
		transform: rotate(90deg);
		background: #008ef6;
		color: #fff;
		margin-bottom: 30rpx;
		text-align: center;
		justify-content: center;
	}

	/*Peach - 新增 - 保存*/

	.saveBtn {
		position: absolute;
		top: 375rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.previewBtn {
		position: absolute;
		top: 500rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.uploadBtn {
		position: absolute;
		top: 625rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	/*Peach - 新增 - 保存*/

	.black-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 30rpx;
		left: 25rpx;
	}

	.black-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 100rpx;
		left: 10rpx;
	}

	.red-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 140rpx;
		left: 25rpx;
	}

	.red-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 120rpx;
		left: 10rpx;
	}
</style>