shop-app/pages/order/detail/index.vue

<!--
 * @Author: ch
 * @Date: 2022-03-31 14:26:09
 * @LastEditors: ch
 * @LastEditTime: 2022-04-11 11:28:36
 * @Description: file content
-->
<template>
	<view>
		<StatusTips :orderInfo="orderInfo" @close="timerCloseOrder"></StatusTips>
		<UiWhiteBox>
			<UiGoodsInfo v-for="(item, index) in orderInfo.products" :data="item" :key="index">
				<template slot="operation">
					<UiButton>申请售后</UiButton>
				</template>
			</UiGoodsInfo>
		</UiWhiteBox>

		<UiWhiteBox>
			<u-cell class="address" title="是的发生的" label="陈先生 190****2342" 
				:border="false" isLink @click="$Router.push('/addressList')">
				<image class="address--icon" slot="icon" src="@/static/order/dw.png" />
			</u-cell>
		</UiWhiteBox>

		<UiWhiteBox class="cellBox">
			<view class="cell">
				<text class="cell--title">订单编号:</text>
				<text class="cell--value">{{orderInfo.orderNo}}</text>
			</view>
			<view class="cell">
				<text class="cell--title">订单时间:</text>
				<text class="cell--value">{{orderInfo.submitTime}}</text>
			</view>
			<view class="cell">
				<text class="cell--title">支付方式:</text>
				<text class="cell--value">{{orderInfo.payTypeDesc}}</text>
			</view>
			<view class="cell">
				<text class="cell--title">买家留言:</text>
				<text class="cell--value">{{orderInfo.userMessage}}</text>
			</view>
		</UiWhiteBox>

		<UiWhiteBox class="cellBox">
			<view class="cell">
				<text class="cell--title">商品总额:</text>
				<text class="cell--value">{{orderInfo.totalAmount}}</text>
			</view>
			<view class="cell">
				<text class="cell--title">运费:</text>
				<text class="cell--value">{{orderInfo.shippingAmount}}</text>
			</view>
			
		</UiWhiteBox>
		<view class="footer">
			<UiButton>查看物流</UiButton>
			<UiButton class="footer--btn" @click="cancelShow = true">取消订单</UiButton>
			<UiButton class="footer--btn" type="gradual">去支付</UiButton>
		</view>
		<u-popup :show="cancelShow" @close="closeCancel" round="16rpx" closeable>
			<view class="cancel--title">取消订单原因</view>
			<radio-group class="cancel--cell" @change="cancelChange">
				<UiCell title="我不想买了">
					<radio slot="right-icon" value="1" class="cancel--radio" color="$color-yellow3"/>
				</UiCell>
				<UiCell title="地址信息填写错误">
					<radio slot="right-icon" value="2" class="cancel--radio" color="$color-yellow3"/>
				</UiCell>
				<UiCell title="商品降价">
					<radio slot="right-icon" value="3" class="cancel--radio" color="$color-yellow3"/>
				</UiCell>
				<UiCell title="商品无货">
					<radio slot="right-icon" value="4" class="cancel--radio" color="$color-yellow3"/>
				</UiCell>
				<UiCell title="其他">
					<radio slot="right-icon" value="5" class="cancel--radio" color="$color-yellow3"/>
				</UiCell>
			</radio-group>
			<view class="cancel--footer">
				<UiButton @click="closeCancel">暂不取消</UiButton>
				<UiButton type="gradual" :disabed="cancelValue == 0">确认取消</UiButton>
			</view>
		</u-popup>
	</view>
</template>
<script>
import UiPageHeader from '@/components/UiPageHeader.vue'
import UiGoodsInfo from '../../../components/UiGoodsInfo.vue'
import UiWhiteBox from '../../../components/UiWhiteBox.vue'
import {ApiGetOrderDetail, ApiPutCancelOrder} from '@/common/api/order'
import UiButton from '../../../components/UiButton.vue'
import StatusTips from './components/StatusTips.vue'
import UiCell from '../../../components/UiCell.vue'
export default {
	components: { UiPageHeader, UiGoodsInfo, UiWhiteBox, UiButton, StatusTips, UiCell },
	data(){
		return {
			orderInfo : {
				products:[]
			},
			// 取消订单弹窗
			cancelShow : false,
			cancelValue : 0
		}
	},
	onLoad(){
		this.getOrderInfo();
	},
	methods : {
		/**
		 * 获取订单最新信息
		 */
		async getOrderInfo(){
			const {error, result} = await ApiGetOrderDetail(this.$Route.query.id);
			if(error){
				uni.$u.totast(error.message);
				return false;
			}
			this.orderInfo = {...result, orderStatus : 7};
		},
		/**
		 * 超时自动关闭订单
		 */
		timerCloseOrder(){
			this.orderInfo = {...this.orderInfo, orderStatus : 2, closeReason:'超时未支付'};
			// this.getOrderInfo();
		},
		closeCancel(){
			this.cancelShow = false;
			this.cancelValue = 0;
		},
		cancelChange(val){
			this.cancelValue = val;
		},
		async cancelOrder(){
			const {error, result} = await ApiPutCancelOrder({
				cancelReasonType : this.cancelValue,
				orderId : this.$Route.query.id
			});
			if(error){
				uni.$u.totast(error.message);
				return false;
			}
			// 取消成功，跳到订单关闭页
		}
		
	}
	
}
</script>
<style lang="scss" scoped>

page{
	// background: linear-gradient(180deg, #FDF9F5 0%, rgba(254, 253, 252, 0) 50%) $color-grey1;
	background: $color-grey1;
	padding-bottom: 138rpx;
}
.header{
	background: none;
}

.address{
	// background: $color-grey0;
	&--icon{
		width: 28rpx;
		height: 34rpx;
		margin-right: 30rpx;
	}
}
.status{
	padding: 30rpx 60rpx 0;
	position: relative;
	&--icon{
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		right: 60rpx;
		top: 10rpx;
	}
	&--name{
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}
	&--desc{
		font-size: $font-size-base;
		color: $color-grey4;
		margin-bottom: 48rpx;
	}
}
.cellBox{
	padding: 30rpx;
}
.cell{
	height: 56rpx;
	line-height: 56rpx;
	display: flex;
	justify-content: space-between;
	&--value{
		font-size: $font-size-sm;
	}
	&--title{
		color: $color-grey4;
		font-size: $font-size-sm;
	}
}
.footer{
	height: 138rpx;
	padding: 0 30rpx;
	background: $color-grey0;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	&--btn{
		display: block;
		margin: 0 0 0 30rpx;
	}
}
.cancel{
	&--title{
		text-align: center;
		font-size: 34rpx;
		margin: 40rpx 0 30rpx;
	}
	&--cell{
		padding: 0 40rpx;
	}
	&--footer{
		padding: 68rpx 40rpx;
		display: flex;
		justify-content: space-between;
	}
	&--radio{
		transform: scale(60%);
	}
	
}
</style>