activitys-uniapp/pages/mine/order/detail.vue

<template>
	<view style="padding: 0 20rpx;" :style="vuex_skin">
		<image style="width: 100vw;height: 8rpx;" src="@/static/icon/divider.png" mode=""></image>
		<view class="title border-bottom" style="padding-top: 30rpx;">
			<text>收货人信息</text>
		</view>
		<view class="data">
			<view class="flex">
				<view style="color:#a0a0a0;width: 23%;">收货人：</view>
				<view class="center">{{detail.consignee}}</view>
				<view class="margin-left-50 center">
					<text>{{detail.phone}}</text>
				</view>
			</view>
			<view class="flex" style="padding-top: 35rpx;">
				<view style="color:#a0a0a0;width: 23%;">收货地址：</view>
				<text class="">{{detail.address}}</text>
			</view>
		</view>
		<u-gap height="20" bg-color="#f6f6f6"></u-gap>

		<view class="title border-bottom">
			<text>商品信息</text>
		</view>

		<view class="goods border-bottom">
			<view class="">
				<image :src="detail.goodsImgUrl" mode=""></image>
			</view>

			<view class="content">
				<view class="text-cut-2" style="font-size: 28rpx;">{{detail.goodsName}}</view>
				<view style="color: #9e9e9e;">
					<text>价格：</text>
					<text class="text-price">{{detail.goodsPoint}} 积分</text>
					<text class="cuIcon-close margin-left-50" style="font-size: 22rpx;"></text>
					<text class="" style="font-size: 24rpx;">{{detail.num}}</text>
				</view>
			</view>
		</view>

		<view class="price-data">
			<view class="">
				<text style="color: #959595;">商品总价：</text>
				<text class="" style="color: #1e1e1e;">{{$digital.floatMul(detail.goodsPoint,detail.num)}} 积分</text>
			</view>
			<view class="">
				<text style="color: #959595;">使用积分：</text>
				<text class="" style="color: #1e1e1e;">{{detail.usePoint}} 积分</text>
			</view>
			<view class="">
				<text style="color: #959595;">使用现金：</text>
				<text class="" style="color: #1e1e1e;">{{useCash(detail)}} 元</text>
			</view>
		</view>

		<u-gap height="20" bg-color="#f6f6f6"></u-gap>

		<view class="title border-bottom">
			<text>订单信息</text>
		</view>

		<view class="price-data">
			<view class="">
				<text style="color: #959595;">订单状态：</text>
				<text class="" style="color: #1e1e1e;">{{detail.goodsStatus}}</text>
			</view>

			<view class="">
				<text style="color: #959595;">物流编号：</text>
				<text class=""
					style="color: #1e1e1e;">{{detail.trackingNumber==-1 || $isEmpty(detail.trackingNumber)?'暂无物流':detail.trackingNumber}}</text>
			</view>
			<view class="">
				<text style="color: #959595;">物流公司：</text>
				<text class="" style="color: #1e1e1e;">{{detail.trackingName || '暂无物流'}}</text>
			</view>
			<view class="">
				<text style="color: #959595;">订单编号：</text>
				<text class="" style="color: #1e1e1e;" @click="$util.copy(detail.id)">{{detail.id}}</text>
			</view>
			<view class="">
				<text style="color: #959595;">创建时间：</text>
				<text class="" style="color: #1e1e1e;">{{detail.createTime}}</text>
			</view>
		</view>

		<block>
			<view class="" style="height: 250rpx;"></view>
			<view class="footer-fixed flex bg-white u-border-top" style="justify-content: flex-end;padding: 25rpx 0;">
				<u-button v-if="detail.goodsStatus == '待收货' || detail.goodsStatus == '已完成'" @click="queryLogistic"
					:custom-style="customStyle1" shape="circle">查看物流
				</u-button>
				<u-button open-type="contact" :custom-style="customStyle2" shape="circle">咨询客服</u-button>
				<u-button @click="confirmReceipt" v-if="detail.goodsStatus == '待收货'" :custom-style="customStyle3"
					shape="circle" size="mini">确认订单</u-button>
				<u-button @click="exchange" :custom-style="customStyle3" v-else shape="circle">再次兑换</u-button>
			</view>
		</block>
		<toast ref="toast" ></toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detail: {},
				customStyle1: {
					marginRight: '15rpx',
					color: '#353535',
					borderColor: '#999999',
					height: '60rpx',
					width: '180rpx',
					fontSize: '24rpx'
				},
				customStyle2: {
					marginRight: '15rpx',
					color: '#353535',
					borderColor: '#999999',
					height: '60rpx',
					width: '180rpx',
					fontSize: '24rpx'
				},
				customStyle3: {
					backgroundColor: "#E72226",
					color: '#fff',
					height: '60rpx',
					width: '180rpx',
					fontSize: '24rpx',
					marginRight: '15rpx',
				}
			}
		},
		computed: {
			useCash() {
				return data => {
					if (data.cash == -1 || this.$isEmpty(data.cash)) {
						return 0
					}
					return data.cash
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.fetchDetail()
		},
		methods: {
			exchange() {
				uni.switchTab({
					url: "/pages/shop/shop"
				})
			},
			fetchDetail() {
				let params = {
					id: this.id
				}
				this.$api.goodsorder.detail(params).then(res => {
					this.detail = res.data.data
				})
			},
			queryLogistic() {
				uni.navigateTo({
					url: "/pages/mine/logistics/logistics?id=" + this.id,
					fail(err) {
						console.log(err);
					}
				})
			},
			confirmReceipt() {
				this.$dialog.showModal('确定收货?', true, this.vuex_theme.bgColor).then(res => {
					let params = {
						id:this.id,
						goodsStatus: '已完成'
					}
					this.$api.goodsorder.submit(params).then(res => {
						if (res.data.success) {
							this.$refs.toast.info('操作成功')
							this.fetchDetail()
						}
					})
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss">
	.border-bottom {
		border-bottom: 1rpx solid #e2e2e2;
	}

	.title {
		padding: 35rpx 20rpx;
		font-size: 30rpx;
		color: #000;
	}

	.data {
		padding: 35rpx 20rpx;

	}

	.goods {
		display: flex;
		padding: 25rpx 20rpx;
		width: 100%;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 12rpx;
		}

		.content {
			line-height: 42rpx;
			font-size: 26rpx;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
	}

	.price-data {
		padding: 25rpx 20rpx;
		display: flex;
		flex-direction: column;

		view {
			padding: 15rpx 0;
			display: flex;
			justify-content: space-between;
		}
	}
</style>