shop-app/pages/order/detail/components/Operation.vue

<!--
 * @Author: ch
 * @Date: 2022-04-15 17:46:10
 * @LastEditors: ch
 * @LastEditTime: 2022-04-18 17:41:55
 * @Description: file content
-->
<template>
		<view class="footer">
			<!-- 支付过后都可查看物流 -->
			<UiButton class="footer--btn" v-if="orderInfo.orderStatus >= 4" @click="$Router.push(`/logisitcsInfo?orderId=${orderInfo.orderId}`)">查看物流</UiButton>
			<!-- 交易关闭，可以联系客服 -->
			<UiButton class="footer--btn" v-if="orderInfo.orderStatus === 2">联系客服</UiButton>
			<!-- 已发货可以确认收货 -->
			<UiButton class="footer--btn" v-if="orderInfo.orderStatus === 4" type="gradual" @click="receive">确认收货</UiButton>
			<!-- 待支付可以取消，支付订单 -->
			<template v-if="orderInfo.orderStatus === 1">
				<UiButton class="footer--btn" @click="cancelShow = true">取消订单</UiButton>
				<UiButton class="footer--btn" type="gradual">去支付</UiButton>
			</template>
			<u-popup class="cancel" :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="#FF875B"/>
					</UiCell>
					<UiCell title="地址信息填写错误">
						<radio slot="right-icon" value="2" class="cancel--radio" color="#FF875B"/>
					</UiCell>
					<UiCell title="商品降价">
						<radio slot="right-icon" value="3" class="cancel--radio" color="#FF875B"/>
					</UiCell>
					<UiCell title="商品无货">
						<radio slot="right-icon" value="4" class="cancel--radio" color="#FF875B"/>
					</UiCell>
					<UiCell title="其他">
						<radio slot="right-icon" value="5" class="cancel--radio" color="#FF875B"/>
					</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 UiButton from '@/components/UiButton.vue'
import UiCell from '@/components/UiCell.vue'
import {ApiPutCancelOrder,ApiPutOrderReceive} from '@/common/api/order'
export default {
	components: { UiButton, UiCell },
	props : {
		orderInfo : {
			type : Object,
			default : () => ({})
		}
	},
	data(){
		return {
			// 取消订单弹窗
			cancelShow : false,
			cancelValue : 0
		}
	},
	methods : {

		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;
			}
			// 取消成功，跳到订单关闭页
		},
		/**
		 * 确认收货
		 */
		async receive(){
			const {error} = await ApiPutOrderReceive({
				orderId : this.$Route.query.id
			});
			if(error){
				uni.$toast(error.message);
				return false;
			}
			this.$Router.push('/orderSuccess')
		}
	}
}
</script>
<style lang="scss" scoped>

.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: inline-block;
		margin: 0 0 0 30rpx;
	}
}
.cancel{
	flex: 0;
	&--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%);
	}
	
}
.modal{
	flex: 0;
}
</style>