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">这是门店名称</view>
			</view>
			<view class="store">
				<image src="../../static/img/icon_coordinate.png" mode="" class="leftIcon"></image>
				<view class="address">江苏省南京市鼓楼区铁路南街233号</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">这是门店名称</view>
			</view>
			<view class="store">
				<image src="../../static/img/icon_coordinate.png" mode="" class="leftIcon"></image>
				<view class="address">江苏省南京市鼓楼区铁路南街233号</view>
			</view>
		</view>
		
		
		<!-- 订单信息 -->
		<view class="whiteView">
			
			<view class="informationLine">
				<view class="informationTxt">更换原因：</view>
				<view class="informationNum">七天无理由</view>
				
			</view>
			<view class="informationLine">
				<view class="informationTxt">申请时间：</view>
				<view class="informationNum">2021-11-21 11:32:12</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">补充描述：</view>
				<view class="informationNum">无</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">申请单号：</view>
				<view class="informationNum">12345</view>
				<view class="copyBtn" @click="copy(orderData.Code)">复制</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">订单单号：</view>
				<view class="informationNum">T124</view>
				<view class="copyBtn" @click="copy(orderData.Code)">复制</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 提交申请 2 平台审核 3 同意申请
				tongguoUrl: '../../static/img/icon_tongguo.png',
				waitUrl: '../../static/img/icon_yuan.png',
			}
		},
		methods: {
			copy(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
		}
	}
</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;
	}
	
	.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>