fude/pages/index/acceptRecord.vue

<template>
	<view class="acceptRecord">
		<navbar title="验收记录" :isCenter="true" :back="true"></navbar>
		<view class="record">
			<view class="section">
				<view class="recordItem">
					<view class="left">订单创建时间</view>
					<view class="right">{{detaildInfo.createtime}}</view>
				</view>
				<view class="recordItem">
					<view class="left">代理商签字时间</view>
					<view class="right">{{detaildInfo.agent_sign_time?detaildInfo.agent_sign_time:''}}</view>
				</view>
				<view class="recordItem">
					<view class="left">代理商公司名称</view>
					<view class="right">{{detaildInfo.agent_company_name}}</view>
				</view>
				<view class="recordItem">
					<view class="left">代理商姓名</view>
					<view class="right">{{detaildInfo.agent_name}}</view>
				</view>
				<view class="recordItem">
					<view class="left">代理手机号</view>
					<view class="right">{{detaildInfo.agent_mobile}}</view>
				</view>
				<view class="recordItem">
					<view class="left">代理商地址</view>
					<view class="right">{{detaildInfo.agent_address}}</view>
				</view>
			</view>
			
			<view class="section" style="margin-top:36rpx">
				<view class="recordItem">
					<view class="left">审核员签字时间</view>
					<view class="right">{{detaildInfo.auditor_sign_time?detaildInfo.auditor_sign_time:''}}</view>
				</view>
				<view class="recordItem">
					<view class="left">审核员姓名</view>
					<view class="right">{{detaildInfo.auditor_name}}</view>
				</view>
				
			</view>
			<view class="section" style="margin-top:36rpx;border:none;">
				<view class="recordItem">
					<view class="left">用户签字时间</view>
					<view class="right">{{detaildInfo.user_sign_time?detaildInfo.user_sign_time:''}}</view>
				</view>
				<view class="recordItem">
					<view class="left">用户姓名</view>
					<view class="right">{{detaildInfo.user_name}}</view>
				</view>
				<view class="recordItem">
					<view class="left">用户手机号</view>
					<view class="right">{{detaildInfo.user_mobile}}</view>
				</view>
			
				<view class="recordItem">
					<view class="left">用户地址</view>
					<view class="right">{{detaildInfo.user_address}}</view>
				</view>
				
			</view>
			<view class="status nopass" v-if="detaildInfo.status==5">
				验收不通过原因: {{detaildInfo.no_reason}}
			</view>
			<!--   -->
			<view class="btnContent" v-if="detaildInfo.status!=5">
				<button class="btnItem unpass"  @click="unpassHandle">验收不合格</button>
				<button class="btnItem pass" @click="signHandle">验收签字</button>
			</view>
			<u-modal :show="show"  confirmColor="#8EC31F" @confirm="confirmHandle" @cancel="cancelHandle" :showCancelButton="true">
				<view class="slot-content">
					<view class="title">
						验收不通过原因
					</view>
					<u--textarea v-model="failReason" placeholder="请输入内容" ></u--textarea>
				</view>
			</u-modal>
		</view>

	</view>
</template>

<script>
	import navbar from '@/components/navbar.vue'
	import {getDetails,unpassHandle} from '@/common/api.js'
	import {getToken} from '@/common/auth.js'
	export default {
		components:{navbar},
		data() {
			return {
				id:null,
				detaildInfo:{},
				show:false,
				failReason:''
			}
		},
		onLoad(option) {
			this.id=option.id
			this.getDetails()
		},
		methods: {
			unpassHandle(){
				this.show = true;
			},
			getDetails(){
				getDetails({id:this.id,custom: { auth: true }}).then(res=>{
					let obj = JSON.parse(JSON.stringify(res.data))
					
					for(let i in obj){
						this.$set(this.detaildInfo,i,obj[i])
					}
					// console.log(obj.acceptance_content)
					// uni.setStorageSync('acceptance_content',obj.acceptance_content)
				})
			},
			cancelHandle(){
				this.show = false
			},
			confirmHandle(){
				unpassHandle({wordorder_id:this.id,content:this.failReason}).then(res=>{
					
					this.getDetails()
					this.show = false
				})
			},
			signHandle(){
				uni.navigateTo({
					url:'/pages/index/userInformation?id='+this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.acceptRecord{
	min-height: calc(100vh);
	background-color: #F4F5F7;
	display: flex;
	flex-direction: column;
}
.record{
	background: #FFFFFF;
	border-radius: 10px;
	padding:36rpx 30rpx 44rpx 30rpx;
	margin:24rpx;
	flex: 1;
	position: relative;
	.section{
		border-bottom: 1px solid #EAEAEA;
		.recordItem{
			display: flex;
			margin-bottom:36rpx;
			.left{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				width:230rpx;
			}
			.right{
				
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}
		}
	}
	
	.status{
		padding:18rpx 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin-bottom: 120rpx;
		border-radius: 10rpx;
		
	}
	.nopass{
		color: #E72525;
		background: #FFF1F2;
	}
	.btnContent{
		position: absolute;
		bottom:20rpx;
		display: flex;
		justify-content: space-between;
		width: calc(100% - 60rpx);
		
	}
	.btnItem{
		line-height: 91rpx;
		height: 91px;
		text-align: center;
		background: #FFFFFF;
		border: 1px solid #8EC31F;
		border-radius: 10px;
		flex:1;
		height: auto;
	}
	.unpass{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #8EC31F;
	}
	.pass{
		
		background: #8EC31F;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-left:41rpx;
	}
}
.slot-content{
	width: 100%;
	.title{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		text-align: center;
	}
	/deep/.u-textarea{
		margin-top:20rpx;
	}
}


</style>