yiliangyiyun-app/pages/erpbusiness/add_quality_testing.vue

<template>
	<view>
		<view @click='hidden' class='wrap'>
			<view class='title_b'>基本信息</view>
			<view class="c-row ">
				<view class="title">仓库</view>
				<view class="con-list">
					{{gridList.warehouseName}}
				</view>
			</view>
			<view class="c-row ">
				<view class="title">编号</view>
				<view class="con-list">
					{{gridList.qualityNo}}
				</view>
			</view>
			<view class="c-row ">
				<view class="title">客户</view>
				<view class="con-list">
					<view @click='gocustomer' v-if='gridList.customerName'>
						{{gridList.customerName}}({{gridList.customerPhone}})
					</view>
					<view @click='gocustomer' v-else>
						选择客户
					</view>
				</view>
			</view>
			<view class="c-row ">
				<view class="title">车牌号</view>
				<view class="con-list">
					<input v-model='gridList.carNumber' @click.stop="handleShowKeyboard":disabled="true" placeholder="请输入车牌号" name="input"></input>
					<master-keyboard ref="keyboard" keyboardtype="car" :randomNumber="true" :newCar="false" :defaultValue="gridList.carNumber" @keyboardClick="handleClick"></master-keyboard>
				</view>
			</view>
			<view v-if="gridList.paramType != '1'" class="c-row ">
				<view class="title">扣重比</view>
				<view class="con-list">
					<input v-model='gridList.buckleWeightRatio' placeholder="请输入扣重比" name="input" type="digit"></input>
				</view>
			</view>
			<view v-else class="c-row ">
				<view class="title">扣杂</view>
				<view class="con-list">
					<input v-model='gridList.buckleMiscellaneous' placeholder="初检扣杂" @input="waterContentChange"
						name="input" type="digit"></input>
					<input v-model='gridList.reBuckleMiscellaneous' placeholder="复检扣杂" @input="waterContentChange"
						name="input" type="digit"></input>
				</view>
			</view>
			<view class="c-row ">
				<view class="title">购粮性质</view>
				<view class="con-list">
					<input v-model='gridList.natureOfGrainPurchase' placeholder="请输入购粮性质" name="input"></input>
				</view>
			</view>
			<view class="c-row ">
				<view class="title">仓位号</view>
				<view class="con-list">
					<view @click='show=true'>{{gridList.binNumber?gridList.binNumber:'请选择仓位号'}}</view>
					<u-picker :range="warehouseList" range-key="binNumber" @confirm='binNumberpicker($event)'
						v-model="show" mode="selector">
					</u-picker>
				</view>
			</view>
			<view class="c-row ">
				<view class="title">囤位号</view>
				<view class="con-list">
					<input type="digit" v-model='gridList.storageTagNo' placeholder="请输入囤位号" name="input"></input>
				</view>
			</view>
			<view class="c-row ">
				<view class="title">货名</view>
				<view class="con-list">
					<view @click='show2=true'>{{gridList.goodsName}}</view>
					<u-picker :range="goodsList" range-key="goodsName" @confirm='goodspicker($event)' v-model="show2"
						mode="selector">
					</u-picker>
				</view>
			</view>
			<view class="c-row ">
				<view class="title">类型</view>
				<view v-if="!edit" class="con-list">
					<view @click='show3=true'>{{gridList.type}}</view>
					<u-picker :range="typeList" @confirm='typepicker($event)' v-model="show3" mode="selector">
					</u-picker>
				</view>
				<view v-else class="con-list">{{gridList.type}}</view>
			</view>
			<view v-if="gridList.type == '潮粮'" class="c-row">
				<view class="title">净重单价（元/公斤）</view>
				<view class="con-list">
					<input v-model='gridList.tidalGrainPrice' disabled placeholder="自动获取，不可编辑" name="input"
						type="digit"></input>
				</view>
			</view>
			<view v-if="gridList.type == '干粮'" class="c-row">
				<view class="title">干粮单价（元/公斤）</view>
				<view class="con-list">
					<input v-model='gridList.dryGrainPrice' placeholder="请输入干粮单价" name="input" type="digit"></input>
				</view>
			</view>
		</view>
		<view style='padding-bottom:300rpx;'>
			<view class='wrap'>
				<view class='title_b'>化验信息</view>

				<view class="c-row ">
					<view class="title">等级</view>
					<view class="con-list">
						<view @click='show1=true'>{{gridList.grade?gridList.grade:'请选择等级'}}</view>
						<u-picker :range="gradeList" range-key="value" @confirm='gradepicker($event)' v-model="show1"
							mode="selector">
						</u-picker>
					</view>
				</view>
				<view class="c-row ">
					<view class="title">水分（%）</view>
					<view class="con-list">
						<input v-model='gridList.waterContent' placeholder="初检水分" @input="waterContentChange"
							name="input" type="digit"></input>
						<input v-model='gridList.rewaterContent' placeholder="复检水分" @input="waterContentChange"
							name="input" type="digit"></input>
					</view>
				</view>
				<view class="c-row ">
					<view class="title">容重（克/升）</view>
					<view class="con-list">
						<input v-model='gridList.bulkDensity' placeholder="请输入容重" name="input" type="digit"></input>
					</view>
				</view>
				<view class="c-row ">
					<view class="title">不完善粒（%）</view>
					<view class="con-list">
						<input v-model='gridList.imperfectGrain' placeholder="请输入不完整粒占比" name="input"
							type="digit"></input>
					</view>
				</view>
				<view class="c-row ">
					<view class="title">杂质（%）</view>
					<view class="con-list">
						<input v-model='gridList.impurity' placeholder="请输入杂质占比" name="input" type="digit"></input>
					</view>
				</view>
				<view class="c-row ">
					<view class="title">霉变粒（%）</view>
					<view class="con-list">
						<input v-model='gridList.mildewGrain' placeholder="请输入霉变粒占比" name="input" type="digit"></input>
					</view>
				</view>
				<view class="c-row">
					<view class="title">热损伤（%）</view>
					<view class="con-list">
						<input v-model='gridList.jiaorenli' placeholder="请输入热损伤占比" name="input" type="digit"></input>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<!-- <view @click='confirmInfo' class="button">确认初检信息</view> -->
			<view @click='submit' class="button">提交</view>
		</view>
		<u-modal v-model="isShowAlert" :title-style="{fontSize: '18px',fontWeight:'500'}"
			:content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='提示'
			showCancelButton='false' :content="content" @confirm="alertBtn" @cancel="cancelClick"></u-modal>
	</view>
</template>

<script>
	import dragButton from "@/components/drag-button/drag-button.vue";
	import keyboard from "@/components/master-keyboard/master-keyboard.vue";
	import {
		mapState
	} from 'vuex';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			dragButton,
			keyboard
		},
		data() {
			return {
				isShowAlert: false,
				content: '确认初检信息后，初检员不需要再次确认质检信息，是否确定提交?',
				inputShow: false,
				modalName: '',
				mycarStyle: '',
				feild: undefined,
				id: 0,
				show: false,
				edit: true,
				selector: [],
				show1: false,
				inputContent: '',
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				footprintList: [],
				searchKeyWord: '',
				isVip: false,
				userInfoTmp: [],
				inputStatus: 'none',
				carInfo: [],
				gridCol: 4,
				pageSize: 10,
				show3: false,
				show2: false,
				goodsList: [],
				currentPage: 1,
				gridBorder: false,
				headUrl: "../../static/img/myimg/YongHu@3x.png",
				userphone: "",
				username: "请更改昵称",
				gridList: {
					natureOfGrainPurchase: '贸易粮',
					type: '',
					tidalGrainPrice: '',
					dryGrainPrice: '',
					buckleMiscellaneous: '',
					carNumber:''
				},
				typeList: ['潮粮', '干粮'],
				managementType: '',
				warehouseName: '',
				warehouseList: [],
				warehouseCount: '',
				commonWarehouseNo: '',
				showTran: true,
				companyId: 1,
				current: 4,
				gradeList: [{
						key: 1,
						value: '一等品'
					},
					{
						key: 2,
						value: '二等品'
					},
					{
						key: 3,
						value: '三等品'
					},
					{
						key: 4,
						value: '等外'
					},
				],
				cangid: ''
			}
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			// 手机号中间4位加*
			starUserphone() {
				let reg = /^(\d{3})\d{4}(\d{4})$/;
				if (this.userphone) {
					return this.userphone.replace(reg, "$1****$2");
				}
			}
		},
		onLoad(options) {
			this.commonWarehouseNo = options.commonWarehouseNo
			this.warehouseCount = Number(options.warehouseCount) + 1
			let number = '000' + this.warehouseCount
			number = number.substring(number.length - 4, number.length)
			this.gridList.warehouseName = options.warehouseName
			this.gridList.qualityNo = 'SGRK' + this.getdate() + this.commonWarehouseNo + number
			this.cangid = options.cangid
			// this.$api.doRequest('get', '/qualityInspectionManagement/api/goodsName', {
			// 	warehouseId: this.cangid
			// }).then(res => {
			// 	if (res.data.data) {
			// 		this.setGoodName([0])

			// 	}
			// })
			this.managementType = options.managementType
		},
		onShow() {

			let that = this
			this.purchasePriceList = uni.getStorageSync('purchasePriceList')
			if (uni.getStorageSync('checkcustomer')) {

				let _customerInfo = uni.getStorageSync('checkcustomer')
				if (_customerInfo.shipperName) {
					//点击登记客户
					this.gridList.customerName = _customerInfo.shipperName
					this.gridList.customerPhone = _customerInfo.shipperPhone
					this.gridList.carNumber=uni.getStorageSync('carNo')
				} else {
					//点击搜索客户
					this.gridList.customerName = _customerInfo.customerName
					this.gridList.customerPhone = _customerInfo.customerPhone
				}

				this.gridList.customerNumberCard = _customerInfo.customerNumberCard
			}
			this.gridList.grade = this.gradeList[0].value
			this.gridList.gradeKey = this.gradeList[0].key
			this.$api.doRequest('get', '/identityAuthenticationInfo/identityAuthenticationInfoCustomer', {
				compId: '',
				authenticationStatusKey: 7
			}).then(res => {
				if (res.data.data) {
					// let data = res.data.data
					// that.gridList =data
					that.$api.doRequest('get', '/warehouseBaseInfo/getWarehouse', {
						id: this.cangid
					}).then(res => {
						that.warehouseList = res.data.data.warehousePositionInfoList
					})
				}
			})
			this.$api.doRequest('get', '/qualityInspectionManagement/api/goodsName', {
				warehouseId: this.cangid
			}).then(res => {
				if (res.data.data) {
					that.goodsList = res.data.data
					if (that.goodsList.length > 0) {
						that.gridList.goodsName = that.goodsList[0].goodsName
						if (that.goodsList[0].goodsName == '玉米') {
							that.gridList.type = '干粮'
							that.edit = true
						} else if (that.goodsList[0].goodsName == '玉米（潮粮）') {
							that.gridList.type = '潮粮'
							that.edit = true
						} else {
							that.edit = false
						}
						uni.setStorageSync('purchasePriceList', that.goodsList)
						that.purchasePriceList = uni.getStorageSync('purchasePriceList')
						that.waterContentChange()
					}

					// for (let i = 0; i < res.data.data.length; i++) {
					// 	this.goodsList.push(res.data.data[i].goodsName)
					// }
					// if(this.goodsList.some(item=>{return item.goodsName=='玉米'})){
					// 	this.gridList.goodsName='玉米'
					// 	uni.setStorageSync('goodsName',this.gridList.goodsName)
					// }else{
					// 	this.gridList.goodsName=this.goodsList[0].goodsName
					// 	uni.setStorageSync('goodsName',this.gridList.goodsName)
					// }
				}
			})
		},
		methods: {
			hidden(){
				this.$refs.keyboard.open(false)
			},
			handleShowKeyboard(){
				if(this.$refs.keyboard.open){
					this.$refs.keyboard.open(true)//true 键盘显示 false 键盘隐藏
				}else{
					this.$refs.keyboard[0].open(true)
				}
			},
			handleClick(e){
				this.gridList.carNumber = e.value //键盘输入值
			},
			// confirmInfo() {
			// 	this.isShowAlert = true	
			// },
			// alertBtn() {
			// 	this.$api.doRequest('get', '/qualityInspectionManagement/api/editQualityInspection', {
			// 		id: this.id,
			// 		flag:2
			// 	}).then(res => {
			// 		if(res.data.code=="200"){
			// 			this.$api.msg('提交成功！')
			// 		}else{
			// 			this.$api.msg('提交失败')
			// 		}
			// 	})
			// },
			cancelClick() {
				this.isShowAlert = false
			},
			waterContentChange() {
				var that = this
				if (this.gridList.goodsName && this.cangid) {
					if (!this.gridList.dryGrainPrice || this.gridList.dryGrainPrice == 0) {
						this.$api.doRequest('get', '/purchasePrice/dryGrainPrice', {
							warehouseId: this.cangid,
							goodsName: this.gridList.goodsName
						}).then(res => {
							that.gridList.dryGrainPrice = res.data.data
						})
					}

				}

				if (this.gridList.goodsName) {
					for (var i = 0; i < this.purchasePriceList.length; i++) {
						if (this.purchasePriceList[i].goodsName == this.gridList.goodsName) {
							this.gridList.buckleWeightRatio = this.purchasePriceList[i].deductWeight
							this.gridList.paramType = this.purchasePriceList[i].paramType
						}
					}
				}
				var numReg = /^[0-9]*$/
				var numRe = new RegExp(numReg)
				//潮粮单价改变事件
				if (
					this.gridList.goodsName &&
					this.gridList.waterContent &&
					this.gridList.grade &&
					numRe.test(this.gridList.waterContent)
				) {
					this.$api.doRequest('get', '/purchasePrice/tidalGrainPrice', {
						warehouseId: this.cangid,
						goodsName: this.gridList.goodsName,
						waterContent: this.gridList.waterContent,
						grade: this.gridList.grade,
					}).then(res => {
						if (that.gridList.paramType == '1') {
							that.gridList.tidalGrainPrice = parseFloat(parseFloat(res.data.data) - parseFloat(that
								.gridList.buckleMiscellaneous) / 100 * parseFloat(that.gridList
								.dryGrainPrice)).toFixed(4)
							if (!that.gridList.tidalGrainPrice) {
								that.gridList.tidalGrainPrice = ''
							}
						} else {
							that.gridList.tidalGrainPrice = res.data.data
						}
					})
				}
			},
			gocustomer() {
				uni.navigateTo({
					url: '/pages/erpbusiness/customer?cangid=' + this.cangid + '&warehouseName=' + this.gridList
						.warehouseName
				})
			},
			getdate() {
				var date = new Date()
				var year = date.getFullYear() //获取完整的年份(4位)
				var mouth = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
				var datetime = date.getDate() //获取当前日(1-31)
				if (mouth < 10) {
					mouth = '0' + mouth
				}
				if (datetime < 10) {
					datetime = '0' + datetime
				}
				return year + '' + mouth + '' + datetime
			},
			submit() {
				var that = this
				if (!this.gridList.qualityNo) {
					this.$api.msg('编号不能为空')
					return
				}
				if (!this.gridList.binNumber) {
					this.$api.msg('仓位不能为空')
					return
				}
				if (!this.gridList.customerName) {
					this.$api.msg('客户不能为空')
					return
				}
				if (!this.gridList.storageTagNo) {
					this.$api.msg('囤位号不能为空')
					return
				}
				if (this.gridList.storageTagNo.length > 10) {
					this.$api.msg('囤位号不能为空')
					return
				}
				if (!this.gridList.carNumber) {
					this.$api.msg('车牌号不能为空')
					return
				}
				if (this.gridList.carNumber.length != 7) {
					this.$api.msg('车牌号输入错误')
					return
				}
				if (!this.gridList.goodsName) {
					this.$api.msg('货名不能为空')
					return
				}
				if (this.gridList.buckleWeightRatio < 0 || this.gridList.buckleWeightRatio > 2) {
					this.$api.msg('扣重比输入错误')
					return
				}
				if (
					String(this.gridList.buckleWeightRatio).indexOf('.') != -1 &&
					String(this.gridList.buckleWeightRatio).length -
					(String(this.gridList.buckleWeightRatio).indexOf('.') + 1) > 2) {
					this.$api.msg('扣重比输入错误')
					return
				}
				if (!this.gridList.type) {
					this.$api.msg('类型不能为空')
					return
				}
				if (!this.gridList.natureOfGrainPurchase) {
					this.$api.msg('购粮性质不能为空')
					return
				}
				if (!this.gridList.grade) {
					this.$api.msg('等级不能为空')
					return
				}
				if (!this.gridList.impurity) {
					this.$api.msg('杂质不能为空')
					return
				}
				if (!this.gridList.waterContent) {
					this.$api.msg('水分不能为空')
					return
				}
				if (!this.gridList.mildewGrain) {
					this.$api.msg('霉变粒不能为空')
					return
				}
				if (!this.gridList.bulkDensity) {
					this.$api.msg('容重不能为空')
					return
				}
				if (!this.gridList.jiaorenli) {
					this.$api.msg('热损伤不能为空')
					return
				}
				if (!this.gridList.imperfectGrain) {
					this.$api.msg('不完整粒不能为空')
					return
				}
				uni.showModal({
					content: "确定提交质检信息？",
					showCancel: true,
					confirmText: '提交',
					success: function(res) {
						if (res.confirm) {
							that.$api.doRequest('get', '/paymentManagement/cumulant', {
									compId: uni.getStorageSync('pcUserInfo').compId,
									customerNumberCard: that.gridList.customerNumberCard,
									goodsName: that.gridList.goodsName,
								})
								.then(response => {
									if (response.data.code == 200) {
										for (let i = 0; i < that.purchasePriceList.length; i++) {
											if (
												that.gridList.goodsName == that.purchasePriceList[i]
												.goodsName
											) {
												debugger
												let count = (that.purchasePriceList[i].saleLimit -
													response.data.data / 1000).toFixed(2)
													console.log(count,that.purchasePriceList[i].saleLimit,
													response.data.data)
												
												if (Number(count) <= 0) {
													count = 0
													that.$api.msg('该客户累计销售' + that.gridList.goodsName + (
															response.data.data / 1000).toFixed(2) +
														'吨，还可售粮' +
														count + '吨', )

												} else {
													that.$api.doRequest('post',
															'/qualityInspectionManagement/api/addQualityInspection',
															that.gridList)
														.then(res => {
															if (res.data.code == 200) {
																that.$api.msg('提交成功')
																uni.navigateBack({})
															} else {
																hat.$api.msg('提交失败')
															}
														})
												}
											}
										}
									}
								})
						}
					}
				})
			},
			gradepicker(e) {
				console.log(e)
				// this.$set(this.gradeList,'grade',this.gradeList[e[0]].value)
				this.gridList.grade = this.gradeList[e[0]].value
				this.gridList.gradeKey = this.gradeList[e[0]].key
				this.waterContentChange()
			},
			setGoodName(e) {
				// [e[0]] = 0
				// this.$set(this.gradeList,'grade',this.gradeList[e[0]].value)
				if (this.goodsList[e[0]].goodsName == '玉米') {
					this.gridList.type = '干粮'
					this.edit = true
				} else if (this.goodsList[e[0]].goodsName == '玉米（潮粮）') {
					this.gridList.type = '潮粮'
					this.edit = true
				} else {
					this.gridList.type = '干粮'
					this.edit = false
				}
				this.gridList.goodsName = this.goodsList[e[0]].goodsName
				uni.setStorageSync('goodsName', this.gridList.goodsName)
				if (this.gridList.type == "干粮" && this.gridList.goodsName) {
					this.$api.doRequest('get', '/purchasePrice/dryGrainPrice', {
						warehouseId: this.cangid,
						goodsName: this.gridList.goodsName
					}).then(res => {
						this.gridList.dryGrainPrice = res.data.data
					})
				}
				this.waterContentChange()
			},
			goodspicker(e) {
				console.log(e)
				this.setGoodName(e)

			},
			typepicker(e) {
				var that = this
				this.gridList.type = this.typeList[e[0]]
				if (this.gridList.type == "干粮" && this.gridList.goodsName) {
					this.$api.doRequest('get', '/purchasePrice/dryGrainPrice', {
						warehouseId: this.cangid,
						goodsName: this.gridList.goodsName
					}).then(res => {
						that.gridList.dryGrainPrice = res.data.data
					})
				}
			},
			binNumberpicker(e) {
				this.gridList.binNumber = this.warehouseList[e[0]].binNumber
			},
			del(item) {
				this.$api.doRequest('get', '/qualityInspectionManagement/api/deleteQualityInspection', {
					id: item.id
				}).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('删除成功')
					} else {
						this.$api.msg('系统异常，请联系管理员')
					}
				})
			},
			contactUs() {
				const that = this
				uni.makePhoneCall({
					// 手机号
					phoneNumber: '18241771147',
					// 成功回调
					success: (res) => {},
					// 失败回调
					fail: (res) => {}
				});
			},
			loadData() {
				// const that = this
				// if(uni.getStorageSync("PageCur")){
				// 	that.PageCur = uni.getStorageSync("PageCur");
				// }
				// that.userInfoTmp = uni.getStorageSync("userInfo")
				// uni.showLoading({
				// 	title: '正在加载',
				// 	mask:true
				// })
				// that.$api.request('integral', 'getIndexData', failres => {
				// 	that.$api.msg(failres.errmsg)
				// 	uni.hideLoading()
				// }).then(res => {
				// 	let data = res.data
				// 	uni.setStorageSync("message", data.message);
				// 	uni.setStorageSync("task", data.task);
				// 	uni.setStorageSync("contract", data.contract);
				// 	uni.setStorageSync('showTran', data.showTran);
				// 	that.showTran = data.showTran
				// 	that.gridList[4].tips = data.task
				// 	that.gridList[2].tips = data.contract
				// 	that.companyId = data.companyId
				// 	uni.hideLoading()
				// })
			},

			confirm() {
				const that = this
				if (!that.inputContent) {
					that.$api.msg('输入不能为空')
					return
				}
				let obj = {}
				obj[that.feild] = that.inputContent
				that.$api.request('user', 'syncUserInfo', obj).then(res => {
					that.userInfo.nickname = that.inputContent
					that.inputContent = ''
					that.$store.commit('login', that.userInfo)
				})
			},
			cancel() {
				this.inputShow = false
				this.inputStatus = 'none'
				this.genderShow = false
			},
			myAccount() {
				uni.navigateTo({
					url: `/pageA/pages/contract`
				})
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},
			mycarClick(carNo) {
				this.modalName = null
				uni.navigateTo({
					url: `/pageB/car/mycar_detail?carNo=${carNo}`
				})
			},
			scanCode() {
				uni.scanCode({
					success: function(res) {
						uni.navigateTo({
							url: res.result
						})
					}
				})
			},
			hideModal(e) {
				this.modalName = null
			},
		}
	}
</script>
<style lang='scss' scoped>
	page {
		background: #F5F6FA;
	}

	.title_b {
		margin: 20rpx 20rpx 0rpx 20rpx;
		padding: 20rpx 10rpx 20rpx 10rpx;
		font-size: 18px;
		font-weight: 550;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.con-list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #303133;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
	}

	.wrap {
		padding-bottom: 10px;
		font-size: 14px;
		background: #fff;
		margin: 10px;
		border-radius: 10px;

		input {
			font-size: 14px;
		}

		>.title {
			padding: 10px 16px;
		}

	}

	.footer {
		background: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 20px 10px;
		z-index: 10;

		.button {
			background: #22C572;
			width: 90%;
			margin: 20rpx auto;
			padding: 10px;
			color: #fff;
			text-align: center;
			border-radius: 30px;
		}
	}
</style>