min-shenze-applet-master/otherPages/mine/orderRecord/detail.vue

<template>
	<view class="o-plr-24 o-ptb-24">
		<view class="l-boxShadow o-mb-20 c-bg-f o-plr-24 o-ptb-12 c-radius-10">
			<view class="l-flex-between o-ptb-20">
				<view class="c-color-8 l-flex-RC">
					<text>订单号：</text>
					<u-tooltip color="#888888" overlay :text="detailData.sn" direction="bottom"></u-tooltip>
				</view>
				<text class="c-color-8">{{ statusName(detailData.status) }}</text>
			</view>
			<u-line></u-line>
			<view class="" v-for="item1 in detailData.goodsNumsPrice">
				<view class="l-flex-RC o-mb-20">
					<view class="l-flex-1">
						<!-- 后台约定好A00，但是这个商品编号有可能会获取不到，获取不到会是A00 -->
						<u--image v-if="item1.imgId !== 'A00'"
							:width="GETT_miniProduct.includes(item1.imgId) ? '250rpx' : '200rpx'"
							:height="GETT_miniProduct.includes(item1.imgId) ? '250rpx' : '200rpx'" mode="aspectFit"
							:lazy-load="true" :fade="true" duration="450" :src="item1.imgUrl">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u--image>
					</view>
					<view class="l-flex-3">
						<view class="c-color-8 u-line-2">{{ item1.goodsName }}</view>
						<view class="l-flex-RC o-mt-30">
							<text class="c-color-8">X{{ item1.nums }}</text>
							<text class="c-color-MR o-ml-30">￥{{ item1.price }}</text>
						</view>
					</view>
				</view>
			</view>
			<u-line></u-line>
			<view class="l-flex-between o-ptb-20">
				<text class="c-text-12 c-color-8">共{{ detailData.goodsNums }}件商品</text>
				<view class="l-flex-RC o-ml-30">
					<text class="c-text-12 c-color-8">实付</text>
					<text class="c-text-16 c-color-MR">￥{{ detailData.price }}</text>
				</view>
			</view>
			<u-line></u-line>
			<view class="c-text-12 c-color-8  o-ptb-20">
				下单时间：{{ new Date(detailData.payDate).getTime() | date('yyyy-mm-dd hh:MM:ss') }}</view>
				<u-line></u-line>
				<view v-if="detailData.orderStatus!=null&&detailData.orderStatus!=''&&detailData.orderStatus<1&&detailData.status!=3" class="c-text-12 c-color-8  o-ptb-20">
					<u-button
						@click="refuse(detailData.id)"
						throttleTime="1000"
						type="primary"
						shape="circle"
						size="normal"
						text="申请退款"
					></u-button></view>
		</view>
	</view>
</template>

<script>
	// 引入辅助函数
	import {
		mapGetters
		
	} from 'vuex';
import { API_refuse } from '../../../common/api';
	export default {
		data() {
			return {
				detailData: {}
			};
		},
		computed: {
			// 使用辅助函数
			...mapGetters(['GETT_miniProduct']),
			// 状态名称
			statusName: () => {
				return status => {
					switch (status) {
						case 1:
							return '已完成';
							break;
						case 3:
							return '已退款';
							break;
						default:
							return '暂无';
							break;
					}
				};
			}
		},
		onLoad(options) {
			this.detailData = JSON.parse(decodeURIComponent(options.row));
		},
		methods: {
			// 申请退款
			refuse(id) {
				uni.showModal({
					title: '是否申请退款？',
					confirmText: '确定',
					cancelText: '取消',
					confirmColor: '#3c9cff',
					success: function(res) {
						if (res.confirm) {
							API_refuse( {id:id} ).then(res => {
								console.log('res', res);
							});
						} else if (res.cancel) {}
					}
				});
			}
		}
		
	};
</script>