book-hi/pages-mall/components/order/order-operate.vue

<template>
	<view class="slot">
		<view class="inner">
			<view class="price">
					<text>￥</text>
					<text>{{ data.actual_total_amount }}</text>
			</view>
			<view class="right btnGroup">
				<view class="btn" v-if="data.status == '10'">
					<u-button shape="circle" size="small" type="default" @click="cancelOrder(data.id)">取消订单</u-button>
				</view>
				<view class="btn" v-if="data.status == '10'">
					<u-button shape="circle" size="small" type="primary" @click="goPay(data)">去付款</u-button>
				</view>
				<view class="btn" v-if="data.status == '11'||data.status == '12'">
					<u-button type="default" size="small" shape="circle" @click="applyAfterSales(data.id)">申请售后</u-button>
				</view>
				<view class="btn" v-if="data.status == '11'">
					<u-button shape="circle" size="small" type="primary" @click="pushDelivery">待发货</u-button>
				</view>
				<view class="btn" v-if="data.status == '12'">
					<u-button shape="circle" size="small" type="primary" @click="confirmReceipt(data)" @refresh="refreshPage">确认收货</u-button>
				</view>
				<view class="btn" v-if="data.status == '13'">
					<u-button shape="circle" size="small" type="primary">已完成</u-button>
				</view>
				<view class="btn" v-if="data.status == '14'">
					<u-button shape="circle" size="small" type="default">交易关闭</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { orderOperate } from '@/pages-mall/mixins/order-operate.js';
export default {
	// 工单操作方法混入
	mixins: [orderOperate],
	props: {
		// 数据源
		data: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	methods: {
		refreshPage(){
			this.$emit('refresh')
		}
	}
};
</script>

<style lang="scss" scoped>
.slot {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: $app-theme-bg-color;
	min-height: 100rpx;
	box-shadow: $app-theme-shadow;
	border-top: 1px solid $app-theme-border-color;
	padding: 10rpx 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		.price {
			padding-left: 30rpx;
			text:nth-child(1) {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: $app-theme-text-money-color;
			}
			text:nth-child(2) {
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: $app-theme-text-money-color;
			}
		}
	}
}
	.right {
		padding-right: 30rpx;
	}
</style>