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

<!--
 * @Author: ch
 * @Date: 2022-04-15 17:46:10
 * @LastEditors: ch
 * @LastEditTime: 2022-04-22 22:23:35
 * @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" @click="payShow = true">去支付</UiButton>
			</template>
			<u-popup class="cancel" :show="cancelShow" @close="closeCancel" round="16rpx" closeable>
				<view class="cancel--title">取消订单原因</view>
				<radio-group class="cancel--cell">
					<UiCell title="我不想买了" @click="cancelChange(1)">
						<radio slot="right-icon" :checked="cancelValue == 1" class="cancel--radio" color="#FF875B"/>
					</UiCell>
					<UiCell title="地址信息填写错误" @click="cancelChange(2)">
						<radio slot="right-icon" :checked="cancelValue == 2" class="cancel--radio" color="#FF875B"/>
					</UiCell>
					<UiCell title="商品降价" @click="cancelChange(3)">
						<radio slot="right-icon" :checked="cancelValue == 3" class="cancel--radio" color="#FF875B"/>
					</UiCell>
					<UiCell title="商品无货" @click="cancelChange(4)">
						<radio slot="right-icon" :checked="cancelValue == 4" class="cancel--radio" color="#FF875B"/>
					</UiCell>
					<UiCell title="其他" @click="cancelChange(5)">
						<radio slot="right-icon" :checked="cancelValue == 5" class="cancel--radio" color="#FF875B"/>
					</UiCell>
				</radio-group>
				<view class="cancel--footer">
					<UiButton @click="closeCancel">暂不取消</UiButton>
					<UiButton type="gradual" :disabed="cancelValue == 0" @click="cancelOrder">确认取消</UiButton>
				</view>
			</u-popup>
			<BsPay class="modal" :show.sync="payShow" :order="orderInfo"></BsPay>
		</view>
</template>
<script>
import UiButton from '@/components/UiButton.vue'
import UiCell from '@/components/UiCell.vue'
import {ApiPutCancelOrder,ApiPutOrderReceive} from '@/common/api/order'
import BsPay from '../../../../components/BsPay.vue'
export default {
	components: { UiButton, UiCell, BsPay },
	props : {
		orderInfo : {
			type : Object,
			default : () => ({})
		}
	},
	data(){
		return {
			// 取消订单弹窗
			cancelShow : false,
			cancelValue : 0,
			// 支付
			payShow : false
		}
	},
	methods : {

		closeCancel(){
			this.cancelShow = false;
			this.cancelValue = 0;
		},
		cancelChange(val){
			this.cancelValue = val;
		},
		async cancelOrder(){
			const ooderId = this.$Route.query.id;
			const {error, result} = await ApiPutCancelOrder({
				cancelReasonType : this.cancelValue,
				orderId : ooderId
			});
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.$Router.replace(`/orderDetail?id=${ooderId}`);
			// 取消成功，跳到订单关闭页
		},
		/**
		 * 确认收货
		 */
		async receive(){
			this.$msb.confirm({
				content : '确认已经收到货了吗？',
				confirm : async ()=>{
					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>