shunfengche-sfd/my/appeal/online_complain/online_complain.vue

<template>
	<view class="content">
		<view class="online_box">
			<view class="online_title">{{datas.illegal}}</view>
			<u-line color="#E6E6E6" />
			<view class="online" style="padding-top: 10rpx;">
				<view class="online_tit">投诉理由</view>
				<view class="online_test">{{datas.wrongExplain}}</view>
			</view>
			<view class="online">
				<view class="online_tit">关联订单</view>
				<view class="online_text" v-if="datas.shipAddress">
					<view class="green"></view>
					<text>{{datas.shipAddress}}</text>
				</view>
				<view class="online_text" v-if="datas.deliveryAddress">
					<view class="orgin"></view>
					<text>{{datas.deliveryAddress}}</text>
				</view>

				<view class="margin-top-xs flex align-center" v-if="datas.indentNumber" @click="copyClick(datas.indentNumber)">
					订单号：{{datas.indentNumber}}
					<image src="../../static/copy.png" style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"></image>
				</view>
			</view>
			<view class="online">
				<view class="online_tit">违规说明</view>
				<view style="font-size: 24rpx;margin-top: 10rpx;">{{datas.resultHanding}}</view>
				<view class="pnline_tip">如果配送中上报异常，审核成功后违规消除，不扣款</view>
			</view>
			<view class="online" v-if="datas.auditMessage">
				<view class="online_tit">申诉结果</view>
				<view style="font-size: 24rpx;margin-top: 10rpx;"></view>
				<view class="pnline_tip" style="color:red">{{datas.auditMessage}}</view>
			</view>

		</view>
		<view class="btn" v-if="datas.complaintState=='1'||datas.complaintState=='5'" @click="bindonline">在线申诉</view>
		<view class="btn btn1" v-if="datas.complaintState=='2'">申诉中</view>
		<view class="btn" v-if="datas.complaintState=='3'" @click="bindonline">申诉未通过</view>
		<view class="btn" v-if="datas.complaintState=='4'">申诉通过</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: 1,
					name: '西安智能大厦'
				}, {
					id: 2,
					name: '用户地址隐藏',
				}],
				indentNumber: '',
				datas: {},
				complaintId: ''
			}
		},
		onLoad(options) {
			console.log(options)
			this.indentNumber = options.indentNumber
			this.complaintId = options.complaintId
			// this.bindorder()
		},
		onShow() {
			console.log('`````````````11111111')
			if (this.indentNumber != '') {
				this.bindorder()
			}

		},
		methods: {
			copyClick(copy) {
				uni.setClipboardData({
					data: copy,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: "复制成功",
									icon: 'none',
								});
							},
						});
					},
				});
			},
			bindonline() {
				uni.navigateTo({
					url: '/my/appeal/myOnline?indentNumber=' + this.indentNumber + '&complaintType=' +
						this.datas.complaintType + '&complaintId=' + this.complaintId
				})
			},
			// 获取数据
			bindorder() {
				this.$Request.getT('/app/indent/findComplaint', {
					indentNumber: this.indentNumber,
					complaintId: this.complaintId
				}).then(res => {
					if (res.code == 0) {
						this.datas = res.data

					} else {
						console.log('失败：', res.data)
					}

				});
			},
		}
	}
</script>

<style>
	body {
		background-color: #F5F5F5;
	}

	.content {
		width: 100%;
	}

	.green {
		width: 16rpx;
		height: 16rpx;
		background: #1FC657;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.orgin {
		width: 16rpx;
		height: 16rpx;
		background: #FBAC04;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.online_box {
		width: 90%;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.online_title {
		font-size: 28rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		width: 90%;
		margin: 0 auto;
		line-height: 80rpx;
	}

	.online {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 34rpx;
	}

	.online_tit {
		font-size: 27rpx;
		letter-spacing: 2rpx;
		font-weight: bolder;
		line-height: 40rpx;

	}

	.online_test {
		color: #333333;
		font-size: 26rpx;
		letter-spacing: 2rpx;
		line-height: 38rpx;
	}

	.online_text {
		display: flex;
		align-items: center;
	}

	.online_text image {
		width: 15rpx;
		height: 15rpx;
	}

	.online_text text {
		font-size: 21rpx;
		color: #333333;
		margin-left: 5rpx;
		letter-spacing: 1rpx;
	}

	.pnline_tip {
		color: #999999;
		font-size: 25rpx;
		line-height: 50rpx;
	}

	.btn {
		width: 90%;
		margin: 0 auto;
		background: #346EF6;
		line-height: 90rpx;
		text-align: center;
		color: white;
		border-radius: 15rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.btn1 {
		background: #ccc;
	}
</style>