book/unimall-app/pages/user/task_detail_buy.vue

<template>
	<view class="container">
		<view class="detail-desc">
			<!-- <view class="c-list">
			 	<view class="c-row b-b">
			 		<text class="tit">派车单号</text>
			 		<view class="con-list">
			 			<text>{{carInfo.sendCarNo}}</text>
			 		</view>
			 	</view>
			 </view> -->
			<view class="d-header">
				<text>采购数据</text>
			</view>
			<view class="c-list">
			<view class="cu-bar bg-white">
					<view class="action">
						送粮人身份证(正、反面)上传
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-2 grid-square flex-sub">
						<view class="bg-img" v-if="personNoImg != ''" @tap="ViewImage" :data-url="personNoImg">
						 <image :src="personNoImg" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="0">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="bg-img" v-if="personNoImg1 != ''" @tap="ViewImage" :data-url="personNoImg1">
						 <image :src="personNoImg1" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="1">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImagePerson" v-if="personNoImg == '' || personNoImg1 == ''">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view> 
				 <view class="c-row b-b">
					<text class="tit">送粮人</text>
					<view class="con-list">
						<input placeholder="请填写" name="input" v-model="driver" @input="driverInput"></input>
					</view>
				</view> 
				<view class="c-row b-b">
					<text class="tit">送粮人身份证号</text>
					<view class="con-list">
						<input placeholder="请填写" name="input" v-model="driverNo" @input="driverNoInput"></input>
					</view>
				</view>
				 <view class="cu-bar bg-white">
					<view class="action">
						银行卡(正、反面)上传
					</view>
				 </view>
				 <view class="cu-form-group">
					<view class="grid col-2 grid-square flex-sub">
						<view class="bg-img" v-if="bankImg != ''" @tap="ViewImage" :data-url="bankImg">
						 <image :src="bankImg" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="2">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="bg-img" v-if="bankImg1 != ''" @tap="ViewImage" :data-url="bankImg1">
						 <image :src="bankImg1" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="3">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImageBank" v-if="bankImg == '' || bankImg1 == ''">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				 </view>
				 <view class="c-row b-b">
					<text class="tit">开户行</text>
					<view class="con-list">
						<input placeholder="请填写" name="input" v-model="bankAccount" @input="bankAccountInput"></input>
					</view>
				 </view>
				 <view v-if="bankPhone" class="c-row b-b">
					<text class="tit">开户行客服电话</text>
					<view class="con-list">
						{{bankPhone}}
					</view>
				 </view>
				 <view class="c-row b-b">
					<text class="tit">开户支行</text>
					<view v-if="zhihangStatus" class="con-list">
						<picker @change="bankNameChange" :value="bankNameIndex" :range="bankNameList">
							<view class="picker">
								{{bankNameIndex>-1?bankNameList[bankNameIndex]:'点击选择支行'}}
							</view>
						</picker>
						
					</view>
					<view v-else class="con-list">
						<input placeholder="请填写" name="input" v-model="bankNameZhihang" @input="bankNameZhihangInput"></input>
					</view>
					<button v-if="zhihangStatus" class='cu-btn bg-green shadow' @click="changeZhihang">手动填写</button>
					<button v-else class='cu-btn bg-green shadow' @click="changeZhihang">自动识别</button>
				 </view>
				 <view class="c-row b-b">
					<text class="tit">银行卡号</text>
					<view class="con-list">
						<input placeholder="请填写" name="input" v-model="bankNo" @input="bankNoInput"></input>
					</view>
				 </view>
				<view class="cu-bar bg-white ">
					<view class="action">
						自产证明照片
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-2 grid-square flex-sub">
						<view class="bg-img" v-if="otherImg != ''" @tap="ViewImage" :data-url="otherImg">
						 <image :src="otherImg" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="4">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImageOther" v-if="otherImg== ''">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">毛重(吨)</text>
					<view class="con-list">
						<input placeholder="请填写毛重" name="input" v-model="grossWeight" @input="grossWeightInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">皮重(吨)</text>
					<view class="con-list">
						<input placeholder="请填写皮重" name="input" v-model="skinWeight" @input="skinWeightInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">净重(自动计算)</text>
					<view class="con-list">
						<text>{{numFilter(netWeight)}}</text>
					</view>
				</view>
				<view class="cu-bar bg-white ">
					<view class="action">
						磅单照片
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-2 grid-square flex-sub">
						<view class="bg-img" v-if="poundImg != ''" @tap="ViewImage" :data-url="poundImg">
						 <image :src="poundImg" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="5" >
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="poundImg == ''">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">货名</text>
					<view class="con-list">
						<input placeholder="请填写货名" name="input" v-model="goodsName" @input="goodsNameInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">单价(元/吨)</text>
					<view class="con-list">
						<input placeholder="请填写单价" name="input" v-model="price" @input="priceInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">水分(%){{'<='}}</text>
					<view class="con-list">
						<input placeholder="请填写水分" name="input" v-model="waterContent" @input="waterContentInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">容重(克/升){{'>='}}</text>
					<view class="con-list">
						<input placeholder="请填写容重" name="input" v-model="bulkDensity" @input="bulkDensityInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">焦糊粒(%){{'<='}}</text>
					<view class="con-list">
						<input placeholder="请填写焦糊粒" name="input" v-model="burnt" @input="burntInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">霉变粒(%){{'<='}}</text>
					<view class="con-list">
						<input placeholder="请填写霉变" name="input" v-model="moldy" @input="moldyInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">扣款(元/吨)</text>
					<view class="con-list">
						<input placeholder="请填写扣款" name="input" v-model="bucklePrice" @input="bucklePriceInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">实付款(自动计算)</text>
					<view class="con-list">
						<text>{{realPrice}}</text>
					</view>
				</view>
			</view> 
		</view>
		<view class="cu-modal" :class="modalName=='userModal'?'show':''" @tap="hideModal">
			<scroll-view scroll-y class="cu-dialog" :style="userStyle" @tap.stop="">
				<view class="cu-list menu text-center" >
					<view class="cu-item" v-for="(item,index) in userList" :key="index" @click="mygaipai(item.id)">
						<label class="flex justify-between align-center flex-sub">
							<view class="flex-sub">{{item.userName}}</view>
						</label>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="taskStatus == 1 " class="page-bottom">
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="save">保存</button>
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="finish">完成</button>
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="gaipai">改派</button>
			</view>
		</view> 
	</view>
</template>

<script>
    import uploadImage from '@/components/ossutil/uploadFile.js';
	import uniNumberBox from '@/components/uni-number-box.vue';
	import Handwriting from '@/components/ossutil/signature.js';
	import {  
	    mapState 
	} from 'vuex';
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				bankImg:'',
				bankImg1:'',
				personNoImg:'',
				personNoImg1:'',
				driver:'',
				driverNo:'',
				purchaseInfo:[],
				poundImg:'',
				otherImg:'',
				grossWeight:'',
				skinWeight:'',
				netWeight:'',
				price:'',
				goodsName:'',
				bankAccount:'',
				bankNo:'',
				realPrice:'',
				bankNameZhihang:'',
				bankNameList:'',
				bankPhone:'',
				waterContent:'',
				bulkDensity:'',
				burnt:'',
				moldy:'',
				bucklePrice:'',
				bankNameIndex:-1,
				zhihangStatus:true,
				taskStatus:'',
				userStyle:'',
				userList:[],
				modalName:'',
				taskType:'',
				taskId:'',
				addNumStatus:false,
				lineColor:'black',
				slideValue:50,
				handwriting:'',
				selectColor:'black',
				color:'',
			};
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onShow() {
		},
		onLoad(options) {
			const that = this
			this.taskStatus = options.taskStatus
			this.taskType = options.taskType
			this.taskId = options.taskId
			uni.showLoading({
				title: '正在加载',
						mask:true
			})
			uni.hideLoading()
			that.$api.request('tran', 'getPurchaseInfo', {
				purchaseNo: options.sendCarNo
			}, failres => {
				that.$api.msg(failres.errmsg)
				uni.hideLoading()
			}).then(res => {	
				if(res.data){
					that.purchaseInfo = res.data
					that.personNoImg = that.purchaseInfo.personNoImg
					that.personNoImg1 = that.purchaseInfo.personNoImg1
					that.driver = that.purchaseInfo.driver
					that.driverNo = that.purchaseInfo.driverNo
					that.otherImg = that.purchaseInfo.otherImg
					that.bankNo = that.purchaseInfo.bankNo
					that.bankAccount = that.purchaseInfo.bankAccount
					that.bankImg = that.purchaseInfo.bankImg
					that.bankImg1 = that.purchaseInfo.bankImg1
					that.bankNameZhihang = that.purchaseInfo.bankNameZhihang
					that.grossWeight = that.purchaseInfo.grossWeight
					that.skinWeight = that.purchaseInfo.skinWeight
					that.netWeight = that.purchaseInfo.netWeight
					that.poundImg = that.purchaseInfo.poundImg
					that.price = that.purchaseInfo.price
					that.goodsName=that.purchaseInfo.goodsName
					that.waterContent = that.purchaseInfo.waterContent
					that.bulkDensity = that.purchaseInfo.bulkDensity
					that.burnt = that.purchaseInfo.burnt
					that.moldy = that.purchaseInfo.moldy
					that.bucklePrice = that.purchaseInfo.bucklePrice
					that.realPrice=that.purchaseInfo.realPrice
				}
				uni.hideLoading()
			})
		},
		onReady(){
			
		},
		methods: {
			ChooseImageOther() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'otherImg/',
							result => {
								this.otherImg = result
								uni.hideLoading();
							}
						)
					}
				});
			},
			ChooseImageBank() {
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						uploadImage(res.tempFilePaths[0], 'bankImg/',
							result => {
							if(that.bankImg == undefined){
								that.bankImg = ''
							}
							 if (that.bankImg.length != 0) {
							 	that.bankImg1 = result
								uni.hideLoading()
							 } else {
							 	that.bankImg = result
								that.$api.request('tran', 'bankShibie', {
									bankImg: result
								}, failres => {
									that.$api.msg(failres.errmsg)
									uni.hideLoading()
								}).then(res => {			
									that.bankAccount = res.data.bankName
									that.bankNo = res.data.bankNo
									that.bankNameList = res.data.bankNameZhihang
									that.bankPhone = res.data.bankPhone
									that.$api.msg('请核对开户行、支行和银行卡号')
									uni.hideLoading()
								})
							 }
							}
						)
					}
				});
			},
			ChooseImagePerson() {
				const that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'personNoImg/',
							result => {
							 if (this.personNoImg.length != 0) {
							 	this.personNoImg1 = result
							 	uni.hideLoading()
							 } else {
							 	this.personNoImg = result
								that.$api.request('tran', 'personShibie', {
									personImg: result,
									type:"driver"
								}, failres => {
									that.$api.msg(failres.errmsg)
									uni.hideLoading()
								}).then(res => {			
									that.driver = res.data.driver
									that.driverNo = res.data.driverNo
									that.$api.msg('请核对身份信息')
									uni.hideLoading()
								})
							 }
							}
						)
					},
					complete:function(res){
						uni.hideLoading()
					}
				});
			},
			changeZhihang(){
				this.zhihangStatus = !this.zhihangStatus
			},
			bankNameChange(e) {
				this.bankNameIndex = e.detail.value
				this.bankNameZhihang = this.bankNameList[this.bankNameIndex]
			},
			driverNoInput(e) {
				this.driverNo = e.detail.value
			},
			bankNoInput(e) {
				this.bankNo = e.detail.value
			},
			bankAccountInput(e) {
				this.bankAccount = e.detail.value
			},
			bankNameZhihangInput(e) {
				this.bankNameZhihang = e.detail.value
			},
			priceInput(e){
				this.price = e.detail.value
				if(this.netWeight&&this.price&&this.bucklePrice){
					this.realPrice=this.numFilter(this.netWeight*this.price - this.bucklePrice)
					this.addNumStatus = true
				}
			},
			goodsNameInput(e){
				this.goodsName=e.detail.value
			},
			waterContentInput(e){
				this.waterContent = e.detail.value
			},
			bulkDensityInput(e){
				this.bulkDensity = e.detail.value
			},
			burntInput(e){
				this.burnt = e.detail.value
			},
			moldyInput(e){
				this.moldy = e.detail.value
			},
			bucklePriceInput(e){
				this.bucklePrice = e.detail.value
				if(this.netWeight&&this.price&&this.bucklePrice){
					this.realPrice=this.numFilter(this.netWeight*(this.price - this.bucklePrice))
					this.addNumStatus = true
				}
			},
			numFilter (value) {
				if(!value){
					return 0
				}
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			},
			uploadScaleStart(event){
			  this.handwriting.uploadScaleStart(event)
		    },
		    uploadScaleMove(event){
			  this.handwriting.uploadScaleMove(event)
		    },
		    uploadScaleEnd(event){
			  this.handwriting.uploadScaleEnd(event)
		    },
			retDraw() {
				this.handwriting.retDraw()
			},
			hideModal(e) {
				this.modalName = null
			},
			ViewImage(e) {
				var img = [];
				img = e.currentTarget.dataset.url.split(' ')
				uni.previewImage({
					current:0,
					urls: img
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							if(e.currentTarget.dataset.index == 0){
								this.personNoImg = "";
							}
							else if(e.currentTarget.dataset.index == 1){
								this.personNoImg1 = "";
							}
							else if(e.currentTarget.dataset.index == 2){
								this.bankImg = "";
							}
							else if(e.currentTarget.dataset.index == 3){
								this.bankImg1= "";
							}
							else if(e.currentTarget.dataset.index == 4){
								this.otherImg = "";
							}
							else if(e.currentTarget.dataset.index == 5){
								this.poundImg = "";
							}
							
							
						}
					}
				})
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'carNoImg/',
							result => {
								this.poundImg = result
								uni.hideLoading();
							}
						)
					}
				});
			},
			grossWeightInput(e) {
				this.grossWeight = e.detail.value
				if(this.grossWeight && this.skinWeight){
					this.netWeight = this.numFilter(this.grossWeight - this.skinWeight)
					this.addNumStatus = true
				}
			},
			skinWeightInput(e) {
				this.skinWeight = e.detail.value
				if(this.grossWeight && this.skinWeight){
					this.netWeight = this.numFilter(this.grossWeight - this.skinWeight)
					this.addNumStatus = true
					
				}
			},
			save(){
				const that = this
				uni.showLoading({
					title: '正在加载',
						mask:true
				})
				that.$api.request('tran', 'savePurchaseInfo', {
					driver:!that.driver?'':that.driver,
					personNoImg:!that.personNoImg?'':that.personNoImg,
					personNoImg1:!that.personNoImg1?'':that.personNoImg1,
					bankImg:!that.bankImg?'':that.bankImg,
					bankImg1:!that.bankImg1?'':that.bankImg1,
					grossWeight:!that.grossWeight?'':that.grossWeight,
					skinWeight:!that.skinWeight?'':that.skinWeight,
					netWeight:!that.netWeight?'':that.netWeight,
					poundImg:!that.poundImg?'':that.poundImg,
					otherImg:!that.otherImg?'':that.otherImg,
					goodsName:!that.goodsName?'':that.goodsName,
					price:!that.price?'':that.price,
					waterContent:!that.waterContent?'':that.waterContent,
					bulkDensity:!that.bulkDensity?'':that.bulkDensity,
					burnt:!that.burnt?'':that.burnt,
					moldy:!that.moldy?'':that.moldy,
					bucklePrice:!that.bucklePrice?'':that.bucklePrice,
					realPrice:!that.realPrice?'':that.realPrice,
					driverNo:!that.driverNo?'':that.driverNo,
					bankNo:!that.bankNo?'':that.bankNo,
					bankAccount:!that.bankAccount?'':that.bankAccount,
					bankNameZhihang:!that.bankAccount?'':that.bankNameZhihang,
					taskId:that.taskId
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {			
					that.$api.msg('保存成功')
					uni.hideLoading()
				})
			},
			finish(){		
				const that = this
				if(!that.grossWeight){
					this.$api.msg('请填写毛重');
					return;
				}
				if(!that.skinWeight){
					this.$api.msg('请填写皮重');
					return;
				}
				if(!that.poundImg){
					this.$api.msg('请上传磅单照片');
					return;
				}
				if (!that.personNoImg || !that.personNoImg1) {
					that.$api.msg('请上传身份证正、反面照片(2张)');
					return
				}
				if (!that.bankImg || !that.bankImg1) {
					that.$api.msg('请上传收款人银行卡正、反面照片(2张)');
					return
				}
				if (!that.bankAccount) {
					that.$api.msg('请填写开户行');
					return
				}
				if (!that.bankNameZhihang) {
					that.$api.msg('请填写开户支行');
					return
				}
				if (!that.bankNo) {
					that.$api.msg('请填写银行卡号');
					return
				}
				
				if (!that.driverNo) {
					that.$api.msg('请填写送粮人身份证号');
					return
				}
				if (!that.price) {
					that.$api.msg('请填写单价');
					return
				}
				if(!that.goodsName){
					that.$api.msg('请填写货名');
					return
				}
				if (!that.waterContent) {
					that.$api.msg('请填写水分');
					return
				}
				if (!that.bulkDensity) {
					that.$api.msg('请填写容重');
					return
				}
				if (!that.bucklePrice) {
					that.$api.msg('请填写扣款');
					return
				}
				if (!that.realPrice) {
					that.$api.msg('请填写实付金额');
					return
				}
				uni.showLoading({
					title: '正在加载',
						mask:true
				})
				that.$api.request('tran', 'finishPurchaseInfo', {
					driver:!that.driver?'':that.driver,
					personNoImg:!that.personNoImg?'':that.personNoImg,
					personNoImg1:!that.personNoImg1?'':that.personNoImg1,
					bankImg:!that.bankImg?'':that.bankImg,
					bankImg1:!that.bankImg1?'':that.bankImg1,
					grossWeight:!that.grossWeight?'':that.grossWeight,
					skinWeight:!that.skinWeight?'':that.skinWeight,
					netWeight:!that.netWeight?'':that.netWeight,
					poundImg:!that.poundImg?'':that.poundImg,
					otherImg:!that.otherImg?'':that.otherImg,
					price:!that.price?'':that.price,
					goodsName:!that.goodsName?'':that.goodsName,
					waterContent:!that.waterContent?'':that.waterContent,
					bulkDensity:!that.bulkDensity?'':that.bulkDensity,
					burnt:!that.burnt?'':that.burnt,
					moldy:!that.moldy?'':that.moldy,
					bucklePrice:!that.bucklePrice?'':that.bucklePrice,
					realPrice:!that.realPrice?'':that.realPrice,
					driverNo:!that.driverNo?'':that.driverNo,
					bankNo:!that.bankNo?'':that.bankNo,
					bankAccount:!that.bankAccount?'':that.bankAccount,
					bankNameZhihang:!that.bankAccount?'':that.bankNameZhihang,
					taskId:that.taskId
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {			
					uni.hideLoading()
					that.$api.msg('完成成功')
					setTimeout(()=>{uni.navigateBack({
						delta: 2
					})},1000);
					
				})
			},
			gaipai(){
				const that = this
				uni.showLoading({
					title: '正在加载',
						mask:true
				})
				that.$api.request('user', 'getUserList', {
					role:'外勤'
				}, failres => {
				 	that.$api.msg(failres.errmsg)
				 	uni.hideLoading()
				 }).then(res => {
					that.userList = res.data
					if(that.userList.length == 0){
						that.$api.msg('暂无外勤信息')
					}
					else{
						var height = that.userList.length * 100
						var width = 500
						that.userStyle = "height:"+height+"rpx;width:" + width+"rpx"
						that.modalName = 'userModal'
					}
					
					uni.hideLoading()
				})
			},
			mygaipai(id){
				var that = this
				that.$api.request('tran', 'gaipai',{
					taskId: that.taskId,
					outPersonId:id,
					taskType:that.taskType
				},failres => {
					that.$api.msg(failres.errmsg)
					that.modalName = null
					uni.hideLoading()
				}).then(res => {		
					that.modalName = null
					uni.navigateBack({
						delta: 2
					})
					uni.hideLoading()
				})
			},

			
		},
	}
</script>

<style lang='scss' scoped="true">
	.container{
		padding-bottom: 160upx;
	}
	.detail-desc {
		background: #fff;
		margin-top: 16upx;
		width: 750upx;
	
		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;
	
			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}
	
			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}
	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;
	
		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
			position: relative;
		}
	
		.tit {
			width: 220upx;
		}
	
		.con {
			flex: 1;
			color: $font-color-dark;
	
			.selected-text {
				margin-right: 10upx;
			}
		}
	
		.bz-list {
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
	
			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}
	
		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
			text-align: right;
			padding-right: 20upx;
		}
	
		.red {
			color: $uni-color-primary;
		}
	}
	/* 底部操作菜单 */
	.page-bottom {
		.action-btn-group {
			.action-btn {
				width: 33.3333%;
			}
		}
	}
	@mixin playcenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.xsh-start {
		width: 105rpx;
		height: 105rpx;
		background: #FFFFFF;
		border-radius: 50%;
		font-size: 29rpx;
		color: #4135EB;
		@include playcenter;
		flex-wrap: wrap;
	}
	.x-modal {
		width: 100%;
		.x-m-title {
			width: 100%;
			height: 90rpx;
			padding: 0 38rpx 0 31rpx;
			box-sizing: border-box;
			font-size: 29rpx;
			color: #333333;
			border-bottom: 1px dashed #999;
			@include playcenter;
			justify-content: space-between;
			.xm-t-clear {
				font-size: 25rpx;
				color: #341DB7;
				@include playcenter;
				>image {
					width: 28rpx;
					height: 28rpx;
					display: block;
					margin-right: 8rpx;
				}
			}
		}
		.x-m-con {
			width: 100%;
			padding: 0 31rpx 18rpx;
			margin-top: 5rpx;
			box-sizing: border-box;
		}
	}
	.wrapper {
	  width: 100%;
	  height: 100%;
	  margin: 30upx 0;
	  overflow: hidden;
	  display: flex;
	  align-content: center;
	  flex-direction: column;
	  justify-content: center;
	  font-size: 28upx;
	}
	
	.handWriting {
	  background: #fff;
	  width: 100%;
	  height: 350upx;
	}
	
	.handRight {
	  align-items: center;
	}
	
	.handCenter {
	  border: 4upx dashed #e9e9e9;
	  flex: 5;
	  overflow: hidden;
	  box-sizing: border-box;
	  width: 90%;
	  margin: 0 auto;
	}
	.handTitle {
	  flex: 1;
	  color: #666;
	  justify-content: center;
	  font-size: 30upx;
	}
	.handBtn {
	  flex-direction: column;
	  padding: 40upx 20upx;
	}
	.buttons{
		width: 100%;
		margin-top: 20upx;
		justify-content: space-between;
	}
	.buttons>button{
		font-size: 30upx;
		height: 80upx;
	}
	.delBtn {
	  background: #23df02;
	  color: #fff;
	}
	.color{
		align-items: center;
	}
	.color>text{
		margin-right: 20upx;
	}
	.subBtn {
	  background: #008ef6;
	  color: #fff;
	  text-align: center;
	  justify-content: center;
	}
	
	.black-select {
	  width: 60upx;
	  height: 60upx;
	}
	.black-select.color_select {
	  width: 90upx;
	  height: 90upx;
	}
	.red-select {
	  width: 60upx;
	  height: 60upx;
	}
	.red-select.color_select {
	  width: 90upx;
	  height: 90upx;
	}
	.slide-wrapper {
	  align-items: center;
	  margin-bottom: 20upx;
	}
	.slider{
		width: 400upx;
		padding-left: 20upx;
	}
	.drop {
	  width: 50upx;
	  height: 50upx;
	  border-radius: 50%;
	  background: #FFF;
	  position: absolute;
	  left: 0upx;
	  top: -10upx;
	  box-shadow: 0px 1px 5px #888888;
	}
	
	.slide {
	  width: 250upx;
	  height: 30upx;
	}
	.showimg{
		border: 4upx solid #e9e9e9;
		overflow: hidden;
		width: 90%;
		margin: 0 auto;
		background: #eee;
		height: 350upx;
		margin-top: 40upx;
		align-items: center;
		justify-content: center;
	}
	.showimg>image{
		width: 100%;
		height: 100%;	
	}
	.showimg>text{
		font-size: 40upx;
		color: #888;
	}	
	.indexFixed{
		position: fixed;
		left:0;
		bottom:0;
		right:0;
	}
</style>