txCar/pages/changeStore/changeStoreDetail.vue

<template>
	<view class="content">
		<view class="topView">
			<!-- 待处理 -->
			<view class="waitBg" v-if="state>0">
				<view class="title">请等待平台处理</view>
				<!-- 进度条 -->
				<view class="progress">
					<image :src="(state>0 ? tongguoUrl : waitUrl)" class="waitImg" :class="{tongguoImg:state>0}">
					</image>

					<view class="line" :class="{lightLine:state>0}"></view>

					<image :src="(state>1 ? tongguoUrl : waitUrl)" class="waitImg" :class="{tongguoImg:state>1}">
					</image>

					<view class="line" :class="{lightLine:state>1}"></view>

					<image :src="(state>2 ? tongguoUrl : waitUrl)" class="waitImg" :class="{tongguoImg:state>2}">
					</image>

				</view>
				<!-- 进度条 文字提示 -->
				<view class="progressT">
					<view class="stateView">
						<view class="progressTitle">提交申请</view>
						<view class="time" v-if="state>0">2021-11-2 12:43</view>
					</view>
					<view style="width: 9%;"></view>
					<view class="stateView">
						<view class="progressTitle">平台审核</view>
						<view class="time" v-if="state>1">2021-11-2 12:43</view>
					</view>
					<view style="width: 9%;"></view>
					<view class="stateView">
						<view class="progressTitle">平台同意更换</view>
						<view class="time" v-if="state>2">2021-11-2 12:43</view>
					</view>
				</view>
			</view>

			<!-- 更换关闭 -->
			<view class="waitBg" v-if="state==0" style="height: 100rpx;">
				<view class="title">更换关闭</view>
				<view class="title3">2021年11月12日 12:43</view>
			</view>

			<!-- 平台拒绝 -->
			<view class="waitBg" v-if="state==-1" style="height: 100rpx;">
				<view class="title">平台已拒绝</view>
				<view class="title3">2021年11月12日 12:43</view>
			</view>
		</view>

		<!-- 更换提交 -->
		<view class="whiteView" v-if="state==1">
			<view class="title1">您已成功发起更换门店申请，请耐心等待平台处理</view>
			<view class="title2">平台同意后，系统将自动更新门店信息</view>
			<view class="title3">平台同意后，系统将自动更新门店信息</view>
		</view>
		<!-- 更换关闭 -->
		<view class="whiteView" v-if="state==0">
			<view class="title1">您已撤销本次退款申请，如有问题仍未解决，您可以重新发起申请</view>

		</view>
		<!-- 平台拒绝 -->
		<view class="whiteView" v-if="state==-1">
			<view class="title1">平台拒绝原因：这是选择的原因</view>
			<view class="title2">您可以修改更换申请后再次发起，平台会重新处理</view>
		</view>
		<!-- 同意申请 -->
		<view class="tongyiView" v-if="state==3">
			<view class="title1">进度详情</view>
			<image src="../../static/img/rightArrow.png" mode="" style="width: 14rpx; height: 23rpx;"></image>
		</view>

		<view class="whiteView">
			<view class="storeTitle">更换前门店信息</view>
			<view class="store">
				<image src="../../static/img/icon_state_gray.png" mode="" class="leftIcon"></image>
				<view class="name">{{detailData.oldShopName}}</view>
			</view>
			<view class="store">
				<image src="../../static/img/icon_coordinate.png" mode="" class="leftIcon"></image>
				<view class="address">{{detailData.oldShopAddress}}</view>
			</view>
		</view>

		<view class="whiteView">
			<view class="storeTitle">更换后门店信息</view>
			<view class="store">
				<image src="../../static/img/icon_state_gray.png" mode="" class="leftIcon"></image>
				<view class="name">{{detailData.newShopName}}</view>
			</view>
			<view class="store">
				<image src="../../static/img/icon_coordinate.png" mode="" class="leftIcon"></image>
				<view class="address">{{detailData.newShopAddress}}</view>
			</view>
		</view>


		<!-- 订单信息 -->
		<view class="whiteView">

			<view class="informationLine">
				<view class="informationTxt">更换原因：</view>
				<view class="informationNum">{{detailData.applyReason}}</view>

			</view>
			<view class="informationLine">
				<view class="informationTxt">申请时间：</view>
				<view class="informationNum">{{detailData.createTime}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">补充描述：</view>
				<view class="informationNum" v-if="detailData.applyReasonComment!=null">
					{{detailData.applyReasonComment}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">申请单号：</view>
				<view class="informationNum">{{detailData.changeCode}}</view>
				<view class="copyBtn" @click="copy(orderData.changeCode)">复制</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">订单单号：</view>
				<view class="informationNum">{{detailData.sheetID}}</view>
				<view class="copyBtn" @click="copy(orderData.sheetID)">复制</view>
				<view style="color: #3F90F7; font-size: 26rpx; margin-left: 50rpx;">详情</view>
			</view>

		</view>

		<!-- 底部按钮 操作 -->
		<view style="height: 150rpx;"></view>
		<view class="orderBottom" v-if="state==1">
			<view class="cancelBtn" @click="cancelBtn">撤销申请</view>
			<view class="cancelBtn" @click="editBtn">修改申请</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: -1, // -1 拒绝 0自己撤销关闭 1 提交申请 3 同意申请
				tongguoUrl: '../../static/img/icon_tongguo.png',
				waitUrl: '../../static/img/icon_yuan.png',
				id: '',
				detailData: '',
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getData();
		},
		onShow() {
			this.getData();
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				let url = '/worldKeepCar/orderChangeShop/changeDetail',
					params = {
						id: this.id,

					}
				this.$http(url, params, 'GET').then(res => {

					uni.hideLoading();

					this.detailData = res.data

					// 更换状态
					// "changeState": 备注：处理状态1待处理2更换成功3更换关闭
					if (this.detailData.changeState == 1) {
						// 平台处理
						this.state = 1;
					} else if (this.detailData.changeState == 2) {
						// 平台同意
						this.state = 3;
					}
					if (this.detailData.handlerReasonID != null) {
						// 拒绝
						this.state = -1;
					}
					if (this.detailData.cancelType != null) {
						// 关闭
						this.state = 0;
					}

				})
			},
			copy(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			cancelBtn(){
				
					uni.showLoading({
						title: '加载中'
					})
					let url = 'worldKeepCar/orderChangeShop/cancelApply',
						params = {
							id: this.detailData.id,
				
						}
					this.$http(url, params, 'POST').then(res => {
				
						uni.hideLoading();
						
						if(res.code==0){
							uni.showToast({
								title: '撤销成功',
								icon: 'none',
								duration: 2000,
							});
							setTimeout(function() {
								uni.navigateBack({
									
								})
							}, 2000); 	
						}
						
					})
				
			},
			editBtn(){
				
				uni.navigateTo({
					
					url:'changeStore?edit=true'+'&editId='+this.detailData.id+'&oldStoreName='+this.detailData.oldShopName+'&oldStoreAddress='+this.detailData.oldShopAddress+'&store='+this.detailData.newShopName+'&storeId='+this.detailData.newShopID+'&reasonId='+this.detailData.applyReasonID+'&reason='+this.detailData.applyReason+'&exeContent='+this.detailData.applyReasonComment
				})
			}
			
			
		}
	}
</script>

<style>
	.content {
		background-color: #F4F5F7;
		min-height: 100vh;
	}

	.topView {
		background: linear-gradient(315deg, #FD5002 0%, #FE8F00 100%);
		padding: 20rpx 24rpx;
	}

	.waitBg {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		height: 209rpx;
		padding: 30rpx;
	}

	.title {
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.progress {
		display: flex;

		align-items: center;

		padding: 10rpx 70rpx;
	}



	.waitImg {
		width: 20rpx;
		height: 20rpx;
	}

	.tongguoImg {
		width: 38rpx;
		height: 38rpx;
	}

	.line {
		width: 40%;
		margin: 0rpx 5rpx;
		height: 2px;
		background: #FF2400;
		opacity: 0.4;
	}

	.lightLine {
		width: 40%;
		margin: 0rpx 5rpx;
		height: 2px;
		background: #FF2400;
		opacity: 1.0;
	}

	.progressT {
		display: flex;

		align-items: center;

	}

	.stateView {
		width: 30%;

	}

	.progressTitle {
		color: #333333;
		font-size: 22rpx;
		text-align: center;
	}

	.time {
		color: #999999;
		font-size: 22rpx;
		text-align: center;
	}

	.whiteView {
		background-color: #FFFFFF;
		padding: 30rpx 24rpx;
		margin: 20rpx 0;
	}

	.title1 {
		color: #3C3C3C;
		font-size: 30rpx;
		font-weight: bold;
	}

	.title2 {
		color: #999999;
		font-size: 24rpx;
		padding-top: 16rpx;
		padding-bottom: 8rpx;
	}

	.title3 {
		color: #999999;
		font-size: 24rpx;

	}

	.storeTitle {
		color: #3C3C3C;
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 1rpx #EEEEEE solid;
		padding-bottom: 22rpx;
	}

	.store {
		display: flex;
		padding-top: 20rpx;
		align-items: center;
	}

	.leftIcon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.name {
		color: #3C3C3C;
		font-size: 26rpx;
	}

	.address {
		color: #999999;
		font-size: 26rpx;
	}

	.informationLine {
		display: flex;
		font-size: 26rpx;
		padding: 20rpx 0;
	}

	.informationTxt {
		width: 130rpx;
		color: #666666;
	}

	.informationNum {
		color: #333333;
		width: 50%;

	}

	.copyBtn {
		width: 86rpx;
		height: 40rpx;
		background: #F4F5F7;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 40rpx;
		margin-left: 20rpx;
	}

	.orderBottom {
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
	}

	.cancelBtn {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #3C3C3C;
		margin-top: 21rpx;
		margin-right: 16rpx;
		margin-left: 20rpx;
	}

	.tongyiView {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		padding: 30rpx 24rpx;
		margin: 20rpx 0;
	}
</style>