unimall/unimall-app/pageA/pages/task_detail_ck.vue

<template>
	<view :class="showAutograph?'indexFixed container':'container '" >
		<view class="c-list">
				<view class="cu-form-group c-row b-b">
					<text class="tit">公司名头</text>
					<view class="con-list">
						{{companyName}}—{{companyPhone}}
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">姓名</text>
					<view class="con-list">
						{{userName}}
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">车牌号</text>
					<view class="con-list">
						<text>{{carNo}}</text>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">箱号</text>
					<view class="con-list">
						<text>{{boxNo}}</text>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">封号</text>
					<view class="con-list">
						<text>{{titleNo}}</text>
					</view>
				</view>
		<!-- 		<view class="c-row b-b">
					<text class="tit">目的地</text>
					<view class="con-list">
						{{address}}
					</view>
				</view> -->
		<!-- 		<view class="c-row b-b">
					<text class="tit">任务量</text>
					<view class="con-list">
						{{count}}
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">未发运数量</text>
					<view class="con-list">
						{{notCount}}
					</view>
				</view> -->
				<view class="d-header">
					<text v-if="taskType == '出库任务'">出库任务</text>
				</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="c-row b-b" style='justify-content: space-between;'>
					<text class="tit">仓位号</text>
					<view>
					<button class='cu-btn bg-green shadow' style='margin-right:10rpx;' @click="changewarehouse">添加仓位号</button>
					<button class='cu-btn shadow' @click="clearWarehouse">清空</button>
					</view>
				</view>
				<view>
					<view style='text-align: center;padding: 15rpx;' v-for='item in warehouses'>
						<view>{{item}}</view>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">蛋白</text>
					<view class="con-list">
						<input placeholder="请填写蛋白" name="input" v-model="protein" ></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>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">件数</text>
					<view class="con-list">
						<input placeholder="请填写件数" name="input" v-model="memo" ></input>
					</view>
				</view>
				<view class="cu-form-group margin-top">
					<view class="title">出库方式</view>
					<picker @change="OutModeChange" :value="outModeeIndex" :range="outMode">
						<view class="picker">
							{{outModeIndex>-1?outMode[outModeIndex]:'请选择'}}
						</view>
					</picker>
				</view>
				<!-- <view class="c-row b-b">
					<text class="tit">出库费用(元/吨)</text>
					<view class="con-list">
						<input placeholder="请填写出库费用" name="input" v-model="price" ></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="poundImg != ''" @tap="ViewImage" :data-url="poundImg">
						 <image :src="poundImg" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" >
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="poundImg == ''">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view> 
			<u-modal v-model="showPopup"
			    :mask-close-able="true"
				title="填写仓位号"
				show-cancel-button="true"
				confirm-text="确定"
				cancel-text="取消"
				@confirm="addwarehouse"
				@cancel="showPopup=false">
				<view class="cu-form-group">
					<view  class="title">仓位号</view>
					<input placeholder="请输入仓位号" v-model="warehouse"></input>
				</view>
			</u-modal>
		<view class="cu-modal" :class="modalName=='workModal'?'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="selectInPerson(item)">
						<label class="flex justify-between align-center flex-sub">
							<view class="flex-sub">{{item.userName}}</view>
						</label>
					</view>
				</view>
			</scroll-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 class="wrapper" v-if="showAutograph">
			<view class="handCenter">
				<canvas class="handWriting" disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
				  @touchend="uploadScaleEnd" @tap="mouseDown" canvas-id="handWriting">
				</canvas>
		    </view>
			<view class="buttons">
				<button @click="retDraw" class="delBtn">重写</button>
				<button @click="subCanvas" class="subBtn">保存</button>	
			</view>
		</view>
		<view 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 Handwriting from '@/components/ossutil/signature.js';
	import {  
	    mapState 
	} from 'vuex';
	export default {
		data() {
			return {
				carInfo:[],
				poundImg:'',
				grossWeight:'',
				skinWeight:'',
				netWeight:'',
				taskStatus:'',
				userStyle:'',
				modalName:'',
				userList:[],
				inPersonId:'',
				taskType:'',
				taskId:'',
				companyName:'',
				companyPhone:'',
				carNo:'',
				price:'',
				userName:'',
				count:'',
				alreadyCount:0,
				notCount:'',
				protein:'',
				waterContent:'',
                warehouse:'',
				warehouses:[],
				outMode: ['散装', '袋装'],
				outModeIndex:0,
				price:'',
				address:'',
				memo:'',
				showPopup:false,
				boxNo:'',
				titleNo:''
			};
		},
		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: '正在加载'
			})
			that.$api.request('task', 'getTaskInfoCK', {
				taskId:options.taskId
			}, failres => {
				that.$api.msg(failres.errmsg)
				uni.hideLoading()
			}).then(res => {			
				that.carInfo = res.data
				that.grossWeight = that.carInfo.grossWeight
				that.skinWeight = that.carInfo.skinWeight
				that.netWeight = that.carInfo.netWeight
				that.poundImg = that.carInfo.poundImg
				that.price=that.carInfo.price
				that.protein=that.carInfo.protein
				if(that.carInfo.warehouse){
					that.warehouses=that.carInfo.warehouse.split(',')
				}
				that.waterContent=that.carInfo.waterContent
				that.titleNo = that.carInfo.titleNo
				that.companyName=that.carInfo.companyName
				that.companyPhone=that.carInfo.companyPhone
				that.userName=that.carInfo.userName
				that.carNo=that.carInfo.carNo
				that.boxNo = that.carInfo.boxNo
				that.count=that.carInfo.count
				that.alreadyCount=that.carInfo.alreadyCount
				that.notCount=that.carInfo.notCount
				that.address=that.carInfo.address
				that.memo=that.carInfo.memo
				uni.hideLoading()
			})
		},
		onReady(){
			
		},
		methods: {
			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)
		    },
			OutModeChange(e) {
				this.outModeIndex = e.detail.value
				this.outMode1 = this.outMode[this.outModeIndex]
			},
			retDraw() {
				this.handwriting.retDraw()
			},
			changewarehouse(){
				this.showPopup=true
			},
			addwarehouse(){
				if(this.warehouse){
					console.log(this.warehouse)
					this.warehouses.push(this.warehouse)
					this.warehouse=''
					this.modalName=''
				}
				else{
					this.$api.msg('仓位号不能为空')
				}
			},
			clearWarehouse(){
				this.warehouses = []
			},
		    subCanvas(){
			  this.handwriting.saveCanvas().then(res=>{
				let that = this;
				console.log(res)
				uploadImage(res, 'signImg/',
					result => {
						that.signImg = result
						that.showAutograph = false
						uni.hideLoading();
					}
				)
			  }).catch(err=>{
				  console.log(err);
			  });		  
			  
		    },
			hideModal(e) {
				this.modalName = null
			},
			ViewImage(e) {
				var img = [];
				img = e.currentTarget.dataset.url.split(' ')
				uni.previewImage({
					current:0,
					urls: img
				});
			},
			ViewSignImage(e) {
			  let imgsArray = [];
			  imgsArray[0] = e.currentTarget.dataset.url;
			  uni.previewImage({
				current: 0,
				urls: imgsArray,
			  });
			},
			DelSignImg(e){
				uni.showModal({
					title: '提示',
					content: '确定要删除签名吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.signImg = "";
						}
					}
				})
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该磅单照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							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)
					if(this.netWeight > this.carInfo.num){
						this.addNumStatus = true
					}
				}
			},
			skinWeightInput(e) {
				this.skinWeight = e.detail.value
				if(this.grossWeight && this.skinWeight){
					this.netWeight = this.numFilter(this.grossWeight - this.skinWeight)
					if(this.netWeight > this.carInfo.num){
						this.addNumStatus = true
					}
					else{
						this.addNumStatus = false
					}
				}
			},
			save(){
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				that.warehouse=that.warehouses.toString()
				that.$api.request('task', 'saveTaskInfoCK', {
					grossWeight:!that.grossWeight?'':that.grossWeight,
					skinWeight:!that.skinWeight?'':that.skinWeight,
					netWeight:!that.netWeight?'':that.netWeight,
					poundImg:!that.poundImg?'':that.poundImg,
					taskId:!that.taskId?'':that.taskId,
					protein:!that.protein?'':that.protein,
					price:!that.price?'':that.price,
					warehouse:!that.warehouse?'':that.warehouse,
					waterContent:!that.waterContent?'':that.waterContent,
					companyName:!that.companyName?'':that.companyName,
					companyPhone:!that.companyPhone?'':that.companyPhone,
					carNo:!that.carNo?'':that.carNo,
					userName:!that.userName?'':that.userName,
					count:!that.count?'':that.count,
					alreadyCount:!that.alreadyCount?'':that.alreadyCount,
					address:!that.address?'':that.address,
					outMode:!that.outMode1?'':that.outMode1,
					memo:!that.memo?'':that.memo,
					titleNo:!that.titleNo?'':that.titleNo,
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					that.$api.msg('保存成功')
					uni.hideLoading()
				})
			},
			selectInPerson(item){
				this.modalName = null
				var 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.price){
				// 	this.$api.msg('请上传出库费用');
				// 	return;
				// }
				if(!that.protein){
					this.$api.msg('请填写蛋白');
					return;
				}
				if(that.warehouses.length == 0){
					this.$api.msg('请填写仓位号');
					return;
				}
				if(!that.waterContent){
					this.$api.msg('请填写水分');
					return;
				}
				if(!that.memo){
					this.$api.msg('请填写件数');
					return;
				}
				uni.showLoading({
					title: '正在加载'
				})
				that.warehouse=that.warehouses.toString()
				that.$api.request('task', 'finishTaskInfoCK', {
					grossWeight:!that.grossWeight?'':that.grossWeight,
					skinWeight:!that.skinWeight?'':that.skinWeight,
					netWeight:!that.netWeight?'':that.netWeight,
					poundImg:!that.poundImg?'':that.poundImg,
					taskId:!that.taskId?'':that.taskId,
					protein:!that.protein?'':that.protein,
					price:!that.price?'':that.price,
					warehouse:!that.warehouse?'':that.warehouse,
					waterContent:!that.waterContent?'':that.waterContent,
					companyName:!that.companyName?'':that.companyName,
					companyPhone:!that.companyPhone?'':that.companyPhone,
					carNo:!that.carNo?'':that.carNo,
					userName:!that.userName?'':that.userName,
					count:!that.count?'':that.count,
					alreadyCount:!that.alreadyCount?'':that.alreadyCount,
					address:!that.address?'':that.address,
					outMode:!that.outMode1?'':that.outMode1,
					memo:!that.memo?'':that.memo,
					titleNo:!that.titleNo?'':that.titleNo,
					nextUserId:item.id
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					that.$api.msg('完成成功')
					setTimeout(()=>{uni.navigateBack()},1000);
					uni.hideLoading()
				})
			},
			finish(){
				var that =this				
				that.warehouse=that.warehouses.toString()
				if(!that.grossWeight){
					this.$api.msg('请填写毛重');
					return;
				}
				if(!that.skinWeight){
					this.$api.msg('请填写皮重');
					return;
				}
				if(this.outMode[this.outModeIndex] == "散装" && !that.poundImg){
					this.$api.msg('请上传磅单照片');
					return;
				}
				// if(!that.price){
				// 	this.$api.msg('请上传出库费用');
				// 	return;
				// }
				if(!that.protein){
					this.$api.msg('请填写蛋白');
					return;
				}
				
				if(that.warehouses.length == 0){
					this.$api.msg('请填写仓位号');
					return;
				}
				if(!that.waterContent){
					this.$api.msg('请填写水分');
					return;
				}
				if(!that.memo){
					this.$api.msg('请填写件数');
					return;
				}
				uni.showLoading({
					title: '正在加载'
				})
				that.warehouse=that.warehouses.toString()
				that.$api.request('task', 'finishTaskInfoCK', {
					grossWeight:!that.grossWeight?'':that.grossWeight,
					skinWeight:!that.skinWeight?'':that.skinWeight,
					netWeight:!that.netWeight?'':that.netWeight,
					poundImg:!that.poundImg?'':that.poundImg,
					taskId:!that.taskId?'':that.taskId,
					protein:!that.protein?'':that.protein,
					price:!that.price?'':that.price,
					warehouse:!that.warehouse?'':that.warehouse,
					waterContent:!that.waterContent?'':that.waterContent,
					companyName:!that.companyName?'':that.companyName,
					companyPhone:!that.companyPhone?'':that.companyPhone,
					carNo:!that.carNo?'':that.carNo,
					userName:!that.userName?'':that.userName,
					count:!that.count?'':that.count,
					alreadyCount:!that.alreadyCount?'':that.alreadyCount,
					address:!that.address?'':that.address,
					outMode:!that.outMode1?'':that.outMode1,
					memo:!that.memo?'':that.memo,
					titleNo:!that.titleNo?'':that.titleNo,
					nextUserId:-1
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					that.$api.msg('完成成功')
					setTimeout(()=>{uni.navigateBack()},1000);
					uni.hideLoading()
				})
			},
			selectPerson(){
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				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 = 'inModal'
					}
					
					uni.hideLoading()
				})
			},
			applyAddNum(){
				const that = this
				if(!that.addNum){
					this.$api.msg('请填写申请运量');
					return;
				}
				uni.showLoading({
					title: '正在加载'
				})
				that.$api.request('task', 'applyNum', {
					id:that.taskId,
					sendCarNo:that.carInfo.sendCarNo,
					tranNum:that.addNum
					}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					that.task = res.data
					that.$api.msg('运量申请成功')
					uni.hideLoading()
				})
			},
			// gaipai(){
			// 	const that = this
			// 	uni.showLoading({
			// 		title: '正在加载'
			// 	})
			// 	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">
	.cu-modal-item{
		background:#fff;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		padding: 10rpx;
		border-radius: 7rpx;
	}
	.container{
		padding-bottom: 160upx;
	}
		.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 {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;
	
		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;
	
			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}
	
			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}
	
			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}
	
			.icon-shoucang {
				font-size: 46upx;
			}
		}
	
		.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;
	}
	/* 源码 */
	.btn-toolbar:before,
	.btn-toolbar:after{
	    display:table;
	    content:" ";
	}
	.btn-toolbar:after{
	    clear:both;
	}
	
	.btn-toolbar {
	  margin-left: -5px;
	}
	.btn-toolbar .btn,
	.btn-toolbar .btn-group,
	.btn-toolbar .input-group {
	  float: left;
	}
	.btn-toolbar > .btn,
	.btn-toolbar > .btn-group,
	.btn-toolbar > .input-group {
	  margin-left: 5px;
	}
</style>