ryx/pages/order/orderAfterSale.vue

<template>
	<view class="">
		<view class="applyAfterSale-top">
			<view class="l">
				<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
					{{order.good_name?order.good_name:''}}
				</view>
				<view class="" style="font-size: 22rpx;margin: 24rpx 0;">
					出行日期：{{order.start_at?order.start_at:''}}
				</view>
				<view class="" style="font-size: 22rpx;">
					数量 {{order.number?order.number:''}}
				</view>
			</view>
			<view class="r">
				<image :src="order.cover_picture" mode="aspectFill"></image>

				<view class="" style="margin-top: 20rpx;">

					<text style="font-size: 22rpx;">订单金额</text><text
						style="font-size: 32rpx;font-weight: 600;">￥{{order.amount?order.amount:''}}</text>
				</view>
			</view>
		</view>

		<!-- 待退款 -->
		<view :class="state==0?'afterSale-center':'afterSale-center-success'">
			<view class="" style="font-size: 26rpx;">
				申请时间：{{orderinfo.created_at.slice(0,10)?orderinfo.created_at.slice(0,10):''}}
			</view>
			<view class="form-item">
				<view class="">
					退款原因
				</view>
				<view class="r">
					{{orderinfo.reason?orderinfo.reason:''}}
				</view>
			</view>
			<view class="form-item">
				<view class="">
					退款金额
				</view>
				<view class="r">
					￥{{orderinfo.amount?orderinfo.amount:''}}
				</view>
			</view>
			<view class="form-item">
				<view class="">
					联系方式
				</view>
				<view class="r">
					{{orderinfo.phone?orderinfo.phone:''}}
				</view>
			</view>
			<view class="" style="margin: 32rpx 0;">
				备注信息
			</view>
			<view class="" style="color: #101010;">
				{{orderinfo.memo?orderinfo.memo:"暂无"}}
			</view>
			<view class="image" style="margin: 30rpx 0;margin-top: 40rpx;">
				<view class="">
					图片凭证
				</view>
				<view v-if="orderinfo.picture.length==0" style="margin: 30rpx 0;">暂无</view>
				<view class="imagebox"> 
					<view v-for="(item,index) in orderinfo.picture" :key="index" >
						<image :src="item" mode="aspectFill"></image>
					</view>
				</view>


			</view>
		</view>


		<!-- 成功退款 -->
		<view class="afterSale-center" v-if="orderinfo.status==2">
			<view class="" style="font-size: 26rpx;">
				申请时间：{{orderinfo.created_at.slice(0,10)?orderinfo.created_at.slice(0,10):''}}
			</view>
			<view class="form-item">
				<view class="">
					处理结果
				</view>
				<view class="r">
					{{orderinfo.feedback_status_text?orderinfo.feedback_status_text:''}}
				</view>
			</view>
			<view class="form-item">
				<view class="">
					结果反馈
				</view>
				<view class="r">
					{{orderinfo.feedback_content?orderinfo.feedback_content:''}}
				</view>
			</view>
			<view class="image" style="margin: 40rpx 0;">
				<view class="">
					反馈截图
				</view>
				<view class="imagebox">
					<view v-for="(item,index) in feedback_picture" :key="index">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</view>
				<view v-if="feedback_picture.length==0" style="margin: 30rpx 0;">暂无</view>
			</view>
		</view>
		<view style="padding-bottom: 140rpx;"></view>
		<view class="call" v-if="orderinfo.status==2" @click="open">
			联系客服
		</view>
		<view class="navbar" v-if="orderinfo.status==1">
			待平台处理
		</view>

		<u-popup :show="show" @close="close" @open="open"  mode="bottom" >
			<view class="servierbox">
				<view @click="tabCopymsg(1)" class="tx bor">
					<text>电话：{{service.phone?service.phone:""}}</text>
				</view>
				<view @click="tabCopymsg(2)" class="tx">
					<text>微信：{{service.weixin?service.weixin:""}}</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 退款进度  0待退框   1已退框
				state: 0,
				id: 0,
				orderinfo: '',
				order: '',
				feedback_picture: '',
				service: '',
				show: false
			}
		},
		onLoad(options) {
			let data = uni.getStorageSync("data")
			this.service = data[5].value.service
			if (options.id) {
				this.id = options.id
			}
			this.init()
			// if(options.id==0){
			// 	this.state=0
			// }else if(options.id==1){
			// 	this.state=1
			// }
		},
		methods: {
			open(){
				this.show=true
			},
			close(){
				this.show=false
			},
			tabCopymsg(i){
				if(i==1){
					uni.makePhoneCall({
						phoneNumber: this.service.phone,
					});
					
				}else if(i==2){
					uni.setClipboardData({
						data: this.service.weixin,
						success: function () {
							
						}
					});
				}
			},
			init() {
				uni.$u.http.post('/api/refund/show', {
					id: Number(this.id)
				}, {
					custom: {
						auth: true
					}
				}).then((res) => {
					this.orderinfo = res
					this.order = res.order
					this.feedback_picture = res.feedback_picture.split(",")
					console.log(this.feedback_picture)
				}).catch((err) => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="less">
	button {
		padding: 0;
		margin: 0;
	}

	button::after {
		padding: 0;
		margin: 0;
		border: none;
	}
	.servierbox{
		padding: 20rpx 0;
		.tx{
			padding: 40rpx 0;
			text-align: center;
		}
		.bor{
			border-bottom: 1rpx solid #F4F4F4;
		}
	}
	page {
		background-color: #F4F4F4;
		color: #666666;
		font-size: 30rpx;
	}

	.applyAfterSale-top {
		margin: 24rpx 0 0;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 4px 0px rgba(0, 0, 0, 0.02);
		border-radius: 16rpx 56rpx 8rpx 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.r {
			text-align: right;
		}

		image {
			width: 140rpx;
			height: 91rpx;
			border-radius: 6rpx;
		}

	}

	.afterSale-center {
		border-radius: 8rpx 8rpx 16rpx 56rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		margin: 24rpx 0;

		.form-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin: 20rpx 0;
			border-bottom: 1rpx solid #E3E3E3;
			padding: 40rpx 0;

			.r {
				width: 50%;
				text-align: left;
				color: #101010;
			}
		}

		.image {
			.imagebox {
				display: inline-block;
				display: flex;
				flex-direction: row;
			}

			image {
				margin-right: 20rpx;
				width: 217rpx;
				height: 217rpx;
				border-radius: 8rpx 24rpx 8rpx 24rpx;
				margin-top: 20rpx;
			}

		}
	}

	.afterSale-center-success {
		border-radius: 8rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		margin: 24rpx 0;

		.form-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin: 20rpx 0;
			border-bottom: 1rpx solid #E3E3E3;
			padding: 40rpx 0;

			.r {
				width: 50%;
				text-align: left;
				color: #101010;
			}
		}

		.image {
			image {
				width: 217rpx;
				height: 217rpx;
				border-radius: 8rpx 24rpx 8rpx 24rpx;
				margin-top: 20rpx;
			}

		}
	}

	.navbar {
		// margin-top: 104rpx;
		width: 100%;
		height: 104rpx;
		line-height: 104rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0px 0px;
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: center;
		// margin: 0 auto;
	}

	.call {
		width: 100%;
		height: 104rpx;
		line-height: 104rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0px 0px;
		text-align: center;
		// margin: 40rpx 0;
		position: fixed;
		bottom: 0;
	}
</style>