eduepos_ui_store/pages/components/order.vue

<template>
    <view class="item">
        <view class="between mb10">
            <view class="meal-no">{{ item.takeupCode }}</view>
            <view class="type-name">{{ formatOrderType(item) }}</view>
            <view class="status-name">{{ item.statusName }}</view>
        </view>
        <view class="time pd24 fs14 between">
            <view class="left-time">
                {{ formatOrderTime(item) }}
            </view>
            <view class="order-status">
            </view>
        </view>
        <view class="pd24 fs14">
            备注: {{ item.customerMes || '无' }}
        </view>
        <view class="between around mlr24">
            <view class="col">
                <view class="label desc">订单号:</view>
                <view class="text">{{ item.orderCode }}</view>
            </view>
            <view class="col">
                <view class="label desc">下单时间:</view>
                <view class="text">{{ item.createDateStr }}</view>
            </view>
        </view>
        <view class="desc mlr24 borbtm mt20">
            <view class="row">
                <view class="label">{{ item.orderName }} {{ item.orderTel }}</view>
                <view class="phone-btn" @click="takePhone(item)">
                    <u-icon name="phone-fill" color="#fff"></u-icon>
                </view>
            </view>
            <view class="row" v-if="item.orderType == 1 || item.orderType == 2">
                <view class="label">{{ item.orderAddress }}</view>
            </view>
        </view>
        <view class="goods borbtm mlr24 fs14">
            <view class="between w100">
                <view class="label">商品</view>
                <view class="btn" @click="handItemOrderDetail(item)">{{ !isShowGoods ? '查看' : '收起' }}</view>
            </view>
            <view class="goods-info" v-if="isShowGoods">
                <view class="goods-row" v-for="detail in item.detailList">
                    <view class="goods-name">{{ detail.goodsName }}  {{detail.propertys == '' ? '' : '(' + detail.propertys + ')'}}</view>
                    <view class="goods-count">×{{ detail.buyCount }}</view>
                    <view class="price">¥{{ moneyConverter(detail.salesPrice) }}</view>
                </view>
                <view class="params" >
                    <view class="name">餐盒费</view>
                    <view class="price">¥{{ moneyConverter(item.packingFee) }}</view>
                </view>
				<view class="params" v-if="(item.deliveryFee + item.sortingFee + item.climbingFee) > 0">
				    <view class="name">配送费</view>
				    <view class="price" :style="item.deliveryDiscountsFlag == 1 ? 'text-decoration: line-through' : ''">¥{{ moneyConverter(item.deliveryFee + item.sortingFee + item.climbingFee) }}</view>
				</view>
				<view class="params" v-if="item.newcusDiscounts > 0">
				    <view class="name">新客立减</view>
				    <view class="price">-¥{{ moneyConverter(item.newcusDiscounts) }}</view>
				</view>
				<view class="params" v-if="item.fullDiscounts > 0">
				    <view class="name">满减</view>
				    <view class="price">-¥{{ moneyConverter(item.fullDiscounts) }}</view>
				</view>
				<view class="params" v-if="item.couponCost > 0">
				    <view class="name">优惠券</view>
				    <view class="price">-¥{{ moneyConverter(item.couponCost) }}</view>
				</view>
            </view>
        </view>
        <view class="settle borbtm mlr24 fs14">
            <view class="between w100">
                <view class="label">结算信息</view>
                <view class="btn" @click="handItemOrderSettle(item)">{{ !isShowSettle ? '查看' : '收起' }}</view>
            </view>
            <view class="settle-row" v-if="isShowSettle">
                <view class="settle-item">
                    <view class="name">顾客实付</view>
                    <view class="price">¥<text>{{ moneyConverter(item.orderFee) }}</text></view>
                </view>
				<view class="settle-item">
				    <view class="name">扣除配送费</view>
				    <view class="price">-¥<text>{{ moneyConverter(item.deliveryFee + item.sortingFee + item.climbingFee) }}</text></view>
				</view>
				<view class="settle-item">
				    <view class="name">微信扣点</view>
				    <view class="price">-¥<text>{{ moneyConverter(calcPoints(item.wxPoint / 1000, item.orderFee)) }}</text></view>
				</view>
				<view class="settle-item">
				    <view class="name">平台扣点</view>
				    <view class="price">
						-¥<text>
						{{ moneyConverter(calcPoints(Number(item.commissionRate) / Number(1000) ,
							item.orderFee - item.deliveryFee - item.sortingFee - item.climbingFee)) > 0 ? moneyConverter(calcPoints(Number(item.commissionRate) / Number(1000) ,
							item.orderFee - item.deliveryFee - item.sortingFee - item.climbingFee)) : 0 }}
						</text>
					</view>
				</view>
				<view class="settle-item">
				    <view class="name">本单预计收入</view>
				    <view class="price">
					{{ 
						incomeFormatter(item)
					}}
					</view>
				</view>
            </view>
        </view>
        <view class="tools-btn mlr24 mt20" v-if="showBtn != 0">
            <view class="taking" v-if="item.status == 10" @click="handItemTaking(item)">接单</view>
            <view class="item-btn" v-if="item.status == 10" @click="handTurnDownOut(item)">拒绝接单</view>
			<view class="item-btn" v-if="item.status == 30 && (item.orderType == 3 || item.orderType == 4)" @click="handComfirmPickOut(item)">确认自提</view>
            <view class="item-btn" v-if="item.status > 10 && item.status < 60" @click="handAllPriceRefund(item)">全额退款</view>
            <view class="item-btn" v-if="item.status == 8 || (item.status > 10 && item.status < 60)" @click="handPrintDenomination(item)">小票打印</view>
        </view>
    </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
    name: 'order',
    props: ['item', 'showBtn'],
    data () {
        return {
            isShowGoods: false,
            isShowSettle: false,
			takeUrl: '/storeOrderApi/receiveOrder',
			refuseUrl: '/storeOrderApi/refuseOrder',
			pickUrl: '/storeOrderApi/selfPickUp',
			refundUrl: '/storeOrderApi/orderRefund',
			printUrl: '/storeOrderApi/printOrder',
			handle: false,
        }
		
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
        // 堂食 / 外卖 渲染
        formatOrderTime (item) {
			let str = item.requireDateStr.slice(item.requireDateStr.length - 8, item.requireDateStr.length - 3);
			let desc = "";

			if (item.orderType == 4) {
				desc = "堂食时间 "
			} else if (item.orderType == 3) {
				desc = "取餐时间 "
			} else {
				desc = "送达时间 "
			}
            return desc + str;
        },
		formatOrderType (item) {
			if (item.orderType == 1 || item.orderType == 2) {
				return '外卖订单'
			} else if (item.orderType == 3) {
				return '自提订单'
			} else if (item.orderType == 4) {
				return '堂食订单'
			}
 		},
		incomeFormatter(item) {
			const orderFee = this.moneyConverter(item.orderFee);
			const deliveryFee = this.moneyConverter(item.deliveryFee + item.sortingFee + item.climbingFee);
			const wxPoints = this.moneyConverter(this.calcPoints(item.wxPoint / 1000, item.orderFee));
			const commissionPoints = this.moneyConverter(this.calcPoints(Number(item.commissionRate) / Number(1000) ,
							item.orderFee - item.deliveryFee - item.sortingFee - item.climbingFee)) > 0 ? this.moneyConverter(this.calcPoints(Number(item.commissionRate) / Number(1000) ,
							item.orderFee - item.deliveryFee - item.sortingFee - item.climbingFee)) : 0
			
			const income = this.toFixed2(orderFee - deliveryFee - wxPoints - commissionPoints);
			if (income > 0) {
				return '¥' + income;
			} else {
				return '-¥' + Math.abs(income)
			}
		},
        // 查看商品
        handItemOrderDetail (item) {
            this.isShowGoods = !this.isShowGoods
        },
        // 查看结算信息
        handItemOrderSettle (item) {
            this.isShowSettle = !this.isShowSettle
        },
        // taking 接单
        handItemTaking (item) {
			if (this.handle) {
				return;
			}
			this.handle = true;
			uni.showLoading({
				title: '加载中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			this.requst({
				url: this.takeUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					orderId: this.item.orderId
				},
				success: res => {
					this.handle = false;
					if (res.data.rtnBean.rtnCode == 0) {
						
						if (res.data.obj == 0) {
							this.$emit('loadOrder', res.data.rtnBean.rtnMsg)
						} else {
							this.$emit('loadOrder', '接单成功')
						}
					} else {
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					uni.hideLoading()
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					this.handle = false;
					uni.hideLoading()
				},
			});
        },
		handTurnDownOut (item) {
			let that = this
			uni.showModal({
				title: '提示',
				content: '是否拒绝该订单？',
				success: function (r) {
					if (r.confirm) {
						that.handTurnDown(item);
					} else if (r.cancel) {
					}
				}	
			})
		},
        // 拒单
        handTurnDown (item) {
			
			if (this.handle) {
				return;
			}
			this.handle = true;
			uni.showLoading({
				title: '加载中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			this.requst({
				url: this.refuseUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					orderId: this.item.orderId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					this.handle = false;
					if (res.data.rtnBean.rtnCode == 0) {
						this.$emit('loadOrder', '拒单成功')
						
					} else {
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					uni.hideLoading()
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					this.handle = false;
					uni.hideLoading()
				},
			});
        },
		calcPoints(rate, orderFee) {
		    return (Number(orderFee) * Number(rate));
		},
		handComfirmPickOut (e) {
			let that = this
			uni.showModal({
				title: '提示',
				content: '是否将该订单标记为自取？',
				success: function (r) {
					if (r.confirm) {
						that.handComfirmPick(e);
					} else if (r.cancel) {
					}
				}	
			})
		},
        handComfirmPick (e) {
			if (this.handle) {
				return;
			}
			this.handle = true;
			uni.showLoading({
				title: '加载中'
			})
        	var dateStr = (new Date()).getTime();
        	var sign = this.getSign(dateStr);
        	this.requst({
        		url: this.pickUrl,
        		data: {
        			timestamp: dateStr,
        			sign: sign,
        			orderId: e.orderId,
        		},
        		success: res => {
					this.handle = false;
        			if (res.data.rtnBean.rtnCode == 0) {
        				this.$emit('loadOrder', '自取成功')
        			} else {
        				if (res.data.rtnBean.rtnMsg != '') {
        					this.$api.msg(res.data.rtnBean.rtnMsg);
        				}
        			}
					uni.hideLoading()
        		},
        		fail: (e) => {
        			console.log("接口调用失败:" + JSON.stringify(e));
					this.handle = false;
					uni.hideLoading()
        		},
        	});
        },
        // 全额退款
        handAllPriceRefund (item) {
			let that = this
			uni.showModal({
				title: '提示',
				content: '是否将本单全额退款？',
				success: function (r) {
					if (r.confirm) {
						that.doRefund(item);
					} else if (r.cancel) {
					}
				}
			});
        },
		doRefund (item) {
			if (this.handle) {
				return;
			}
			this.handle = true;
			uni.showLoading({
				title: '加载中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			this.requst({
				url: this.refundUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					orderId: item.orderId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					this.handle = false;
					if (res.data.rtnBean.rtnCode == 0) {
						this.$emit('loadOrder', '退款成功')
					} else {
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					uni.hideLoading()
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					this.handle = false;
					uni.hideLoading()
				},
			});
		},
        // 小票打印
        handPrintDenomination (item) {
			if (this.handle) {
				return;
			}
			this.handle = true;
			uni.showLoading({
				title: '加载中'
			})
            var dateStr = (new Date()).getTime();
            var sign = this.getSign(dateStr);
            this.requst({
            	url: this.printUrl,
            	data: {
            		timestamp: dateStr,
            		sign: sign,
            		orderId: item.orderId,
            	},
            	success: res => {
            		if (res.data.rtnBean.rtnCode == 0) {
            			uni.showToast({
            				title: '正在打印',
            				icon: 'none'
            			})
            		} else {
            			if (res.data.rtnBean.rtnMsg != '') {
            				this.$api.msg(res.data.rtnBean.rtnMsg);
            			}
            		}
					this.handle = false;
					uni.hideLoading()
            	},
            	fail: (e) => {
            		console.log("接口调用失败:" + JSON.stringify(e));
					this.handle = false;
					uni.hideLoading()
            	},
            });
        },
		toFixed2(money) {
			return Math.round(money * 100) / 100
		},
		// 商家客服
		takePhone(item){
		    uni.makePhoneCall({
		        phoneNumber: item.orderTel,
		        success:function(e){
		        },
		        fail:function(e){
		        }
		    })
		},
    },
    onLoad () {}
}
</script>
<style lang="scss" scoped>
.fs14 {
    font-size: $font-base;
}
.pd24 {
    padding: 0 24rpx;
    box-sizing: border-box;
}
.mlr24 {
    margin: 0 24rpx;
}
.ptb10 {
    padding: 10rpx 0;
    box-sizing: border-box;
}
.mt10 {
    margin-top: 10rpx;
}
.mt20 {
    margin-top: 20rpx;
}
.mb10 {
    margin-bottom: 10rpx;
}
.w100 {
    width: 100%;
}
.borbtm {
    border-bottom: 2rpx solid #ececec;
}
.text {
    color: $text-color;
}
.desc {
    color: $desc-color;
}
.item {
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    box-sizing: border-box;
}
.between {
    height: 56rpx;
    @include between;
}
.meal-no {
    width: 156rpx;
    height: 56rpx;
    border-radius: 56rpx;
    border-radius: 20rpx 28rpx 28rpx 0;
    background-color: #000;
    color: #fff;
    @include flexCenter;
    font-size: $font-base;
}
.type-name, .status-name {
    height: 56rpx;
    line-height: 56rpx;
}
.type-name {
    flex: 1;
    margin-left: 20rpx;
}
.status-name {
    font-size: $font-base;
    color: #101010;
    margin-right: 24rpx;
}
.time {
    color: $theme-color;
}
.order-status {
    color: $icon-color;
}
.around {
    width: calc(100% - 48rpx);
    height: 80rpx;
    font-size: $font-sm;
    border-bottom: 2rpx solid #ececec;
    .col {
        flex: 1;
    }
}
.phone-btn {
    width: 40rpx;
    height: 40rpx;
    border-radius: 40rpx;
    background-color: $theme-color;
    @include flexCenter;
}
.row {
    width: 100%;
    @include between;
    font-size: $font-sm;
    margin-bottom: 10rpx;
}
.goods, .settle {
    .between {
        height: 80rpx;
    }
    .btn {
        font-size: $font-sm;
        color: $icon-color;
        width: 80rpx;
        height: 40rpx;
        border-radius: 40rpx;
        @include flexCenter;
        border: 2rpx solid $icon-color;
    }
}
.tools-btn {
    @include flexStart;
    .taking, .item-btn {
        height: 52rpx;
        @include flexCenter;
        border-radius: 52rpx;
        font-size: $font-sm;
    }
    .taking {
        width: 140rpx;
        background-color: $theme-color;
        color: #fff;
        margin-right: 20rpx;
    }
    .item-btn {
        width: 200rpx;
        color: $icon-color;
        border: 2rpx solid $icon-color;
        margin-right: 20rpx;
    }
}
.goods-row {
    @include between(flex-start);
    font-size: $font-sm;
    margin-bottom: 20rpx;
    .goods-name {
        flex: 2;
    }
    .goods-count, .price {
        flex: 1;
        text-align: right;
    }
}
.params {
    @include between;
    margin-bottom: 10rpx;
}
.settle-item {
    @include between;
    margin-bottom: 10rpx;
}
</style>