uniapp-hainan/pages/order/refund_detail.vue

<template>
	<view v-if="isRight(orderDetails)">
		<view class="lf-bg-white lf-p-t-30 lf-p-b-30 lf-p-l-32 lf-p-r-32">
			<view class="lf-row-between">
				<image :src="orderDetails.picture" mode="aspectFill" style="width: 240rpx; height: 240rpx;border-radius: 20rpx;"></image>
				<view class="flex-sub padding-left-sm">
					<view class="bref-box lf-font-32 lf-color-333 lf-line-2" style="height: 88rpx;line-height: 44rpx;">
						{{orderDetails.title}}
					</view>
					<view class="flex lf-m-t-25 align-center text-center">
						<text class="block lf-color-gray lf-font-24" style="line-height: 40rpx;">数量</text>
						<text class="lf-m-l-10 lf-color-gray lf-font-24">x {{orderDetails.num}}</text>
					</view>
					
					<view class="flex align-center text-center lf-m-t-25">
						<lf-price :price="orderDetails.price" /> 
						<!-- <view class="lf-m-l-20 lf-line-through lf-color-gray">
							599.00
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<self-line/>
		<view class="bg-white padding-lr">
			<view class="cu-bar lf-border-bottom">
				<text class="lf-color-555 lf-font-28">可退金额</text>
				<text class="text-price lf-font-36 lf-color-price">{{orderDetails.price}}</text>
			</view>
			<view class="cu-bar flex justify-between align-center text-center">
				<text class="lf-color-555 lf-font-28">订单编号</text>
				<view>
					<text class="lf-font-28 text-black1">{{orderDetails.order_no}}</text>
					<!-- <text class="text-orange lf-font-28" @click="copy(2368492461046128742764)">复制</text> -->
				</view>
			</view>
		</view>
		
		<self-line/>
		<view class="bg-white lf-m-b-6">
			<view class="lf-p-t-30 lf-p-l-32 lf-p-r-32 lf-p-b-36">
				<view class="lf-font-28 lf-color-black lf-m-b-20 lf-font-bold">退款说明</view>
				<view>{{orderDetails.refund_info.desc}}</view>
			</view>
		</view>
		
		<view class="cu-form-group solid-bottom" style="padding-bottom: 20rpx;" v-if="img_list.length != 0">
			<view class="grid col-4 grid-square flex-sub">
				<view style="width: 212rpx;height: 212rpx;border-radius: 10rpx;" class="bg-img" v-for="(item,index) of img_list" :key="index">
					<image :src="item" @tap="showImg(index)" style="width: 216rpx;height: 216rpx;" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 修饰专用 -->
		<view style="height: 120rpx; width: 100%;"></view>
		<view class="btn-bottom solid-top1">
			<view class="padding-lr lf-p-t-10 lf-p-b-10  bg-white flex justify-between align-center shadow">
				<view class="flex align-center">
					<text class="lf-font-24 lf-font-555">实付款：</text>
					<lf-price :price="orderDetails.price" /> 
				</view>
				
				<button class="btn" @tap="submit">
					<text class="lf-font-32 text-white">等待审核</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hostImg: '',
				orderDetails: {},
				img_list: [{path: 'https://t7.baidu.com/it/u=2168645659,3174029352&fm=193&f=GIF'}], // 反馈问题图片
				order_id: 1
			}
		},
		computed: {
			isRight(){
				return function(val){
					return this.$shared.isRight(val);
				}
			}
		},
		methods: {
			getOrderDetails() {
				this.$http(this.API.API_ORDER_DETAILS, {
					id: this.order_id
				}).then(res => {
					this.orderDetails = res.data
					this.img_list = res.data.refund_info.pictures
					console.log(res.data)
			
				}).catch(err => {
					setTimeout(() => {
						this.$toBack()
					}, 1000)
				});
			},
			// 预览图片
			showImg(index) {
				this.$u.throttle(() => {
					let goods_banner = this.img_list || [];
					let banners = goods_banner.map(item => item);
					uni.previewImage({
						urls: banners,
						current: index
					})
				}, 200);
			},
			// 点击复制
			copy(text) {
				uni.setClipboardData({
					data: text
				});
			},
		},
		onLoad(e) {
			this.order_id = e.order_id
			if (this.order_id) {
				this.getOrderDetails()
			}
		},
	}
</script>

<style>
	.btn{
		margin: 0;
		padding: 0;
		width: 212rpx;
		height: 82rpx;
		background-color: #777777;
		color: #FFFFFF;
		line-height: 80rpx;
		font-size: 32rpx;
		border-radius: 41rpx;
	}
	.bref-box {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>