FE-lab-xcx/pages_hazardousWasteRecycling/views/weighingRegistration/signatureListComponent.vue

<template>
	<view class="signatureComponent">
		<view class="sub-picker-box">
			<view class="mark-box">*</view>
			<view class="title-box">回收人员</view>
			<view class="picker-box">
				<picker @change="userChange" style="width:100px;"
				:value="addForm.signature" :range="optionList" :range-key="'realName'">
					<view class="picker-p" :class="addForm.signature?'check-picker-p':''">{{addForm.signature?addForm.realName:'请选择回收人员'}}</view>
				</picker>
			</view>
		</view>
		<view v-if="!addForm.signature" class="text-position-box">请选择回收人员</view>
		<img v-if="addForm.signature" class="text-position-img" :src="baseUrl+addForm.signature">
		<view class="agreement-box">
			<view class="agreement-min-box" @click="agreementButton">
				<img class="agreement-img" v-if="!agreementType" :src="imagesUrl('commonality/icon_12.png')">
				<img class="agreement-img" v-if="agreementType" :src="imagesUrl('commonality/icon_13.png')">
				<view>* 本人为具备资质的危废回收人员，且已与报备人核实本次回收的危废种类与称重登记重量，签名即表示确认无误。</view>
			</view>
		</view>
		<!-- 操作按钮 -->
		<view class="button-group">
			<view @click="saveSignature">完成</view>
		</view>
	</view>
</template>
<script>
	import {
		hwmsAppRegisterOrderAdd,
		hwmsSupplierUserSignature,
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	import {
		config
	} from '@/api/request/config.js'
	export default {
		data() {
			return {
				baseUrl:config.base_url,
				newData:null,
				//签名确认状态
				agreementType:false,
				optionList:[],//回收人员签名列表
				addForm:{
					signature:'',
					realName:'',
				}
			};
		},
		onLoad(option) {
			this.$set(this,'newData',JSON.parse(decodeURIComponent(option.data)));
		},
		mounted() {
			this.hwmsSupplierUserSignature();
		},
		methods: {
			//选中回收人员
			userChange(e){
				this.$set(this,'addForm',{
					realName:this.optionList[e.detail.value].realName,
					signature:this.optionList[e.detail.value].signature,
				});
				this.$set(this.newData,'collectorSign',this.optionList[e.detail.value].signature);
			},
			//获取回收人员签名列表
			async hwmsSupplierUserSignature(){
				const {
					data
				} = await hwmsSupplierUserSignature();
				if (data.code == 200) {
					this.$set(this,'optionList',data.data);
				}
			},
			//条款确认
			agreementButton(){
				this.$set(this,'agreementType',!this.agreementType);
			},
			
			saveSignature() {
				let self = this;
				if(!this.newData.collectorSign){
					uni.showToast({
						title: "请选择回收人员",
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if(!this.agreementType){
					uni.showToast({
						title: "请确认相关条款",
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				uni.showModal({
					// title: '确认要退出吗?',
					content: '确认提交?',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							self.hwmsAppRegisterOrderAdd();
						} else if (res.cancel) {
							
						}
					}
				});
			},
			//提交
			async hwmsAppRegisterOrderAdd(){
				const {
					data
				} = await hwmsAppRegisterOrderAdd(this.newData);
				if (data.code == 200) {
					uni.showToast({
						title: '提交成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack({
							delta: 3
						});
					}, 2000);
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.signatureComponent {
		height: 100%;
		display flex;
		flex: 1;
		flex-direction column;
		overflow: hidden;
		position: relative;
		background-color: #fff;
		.text-position-box{
			width:650rpx;
			height:217rpx;
			line-height:217rpx;
			text-align: center;
			font-size:26rpx;
			color:#dedede;
			margin:0 auto;
			z-index:1;
			margin-top:10rpx;
			background-color: #fff;
			border:1rpx solid #dedede;
			border-radius:10rpx;
		}
		.text-position-img{
			width:650rpx;
			height:217rpx;
			line-height:217rpx;
			text-align: center;
			font-size:26rpx;
			color:#dedede;
			margin:0 auto;
			z-index:1;
			margin-top:10rpx;
			background-color: #fff;
			border:1rpx solid #dedede;
			border-radius:10rpx;
		}
		
		.sub-picker-box{
			display: flex;
			font-size:30rpx;
			height:80rpx;
			width:300px;
			margin:30rpx auto;
			.mark-box{
				color:red;
				height:80rpx;
				line-height:85rpx;
				margin-bottom:20rpx;
			}
			.title-box{
				margin:0 10rpx;
				height:80rpx;
				line-height:80rpx;
			}
			.picker-box{
				height:80rpx;
				flex:1;
				border:1rpx solid #dedede;
				border-radius:10rpx;
				.picker-p{
					padding:0 30rpx;
					color:#999;
					line-height:80rpx;
					width:380rpx;
					display:block;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
				}
				.check-picker-p{
					
				}
			}
		}
		.agreement-box{
			flex:1;
			margin:30rpx 60rpx;
			.agreement-min-box{
				display: flex;
				margin-top:15rpx;
				.agreement-img{
					width:40rpx;
					height:40rpx;
					margin:0 10rpx 0 0;
				}
				view{
					flex:1;
					line-height:40rpx;
					font-size:26rpx;
				}
			}
		}
		.button-group{
			display: flex;
			margin:0 auto;
			margin-bottom:80rpx;
			view{
				font-size:24rpx;
				width:200rpx;
				height:60rpx;
				line-height:60rpx;
				text-align: center;
				background-color: #fff
				border-radius:6rpx;
			}
			view:nth-child(1){
				border:1px solid #0183FA;
				background-color: #0183FA;
				color:#fff;
			}
		}
	}
</style>