front-end/mobile-code/src/admin/order/detail.vue

<template>
	<div class="app-content">
		<div class="page-top">
			<div class="page-top-img">
				<img :src="`${constant.imgUrl}/retail/order/bg.png`" alt />
			</div>
			<div class="page-top-det">
				<div>
					<div class="page-status">{{ data.status | constantfilter('ORDER_STATUS') }}</div>
					<!-- <div class="page-prompt">请尽快支付哟~</div> -->
				</div>
				<div class="page-status-img">
					<img :src="data.status == 0 ? waitPayImg : waitDeliveryImg" alt />
				</div>
			</div>
		</div>
		<!-- 订单详情 -->
		<div class="page-det">
			<!-- 商品信息 -->
			<div class="module-com">
				<div class="module-tit">商品信息</div>
				<div class="module-det">
					<block v-if="!$util.isEmpty(data.goodsInfoList)">
						<list-module v-for="(items, subIndex) in data.goodsInfoList" :key="subIndex" :info="items" />
					</block>
				</div>
			</div>
			<!-- 订单信息 -->
			<div class="module-com order-msg">
				<div class="module-tit">订单信息</div>
				<div class="module-det">
					<!--  -->
					<div class="order-msg-blo">
						<div class="msg-list">
							<div class="label">收花人</div>
							<div class="value">{{ data.receiveUserName }}</div>
						</div>
						<div class="msg-list">
							<div class="label">电话</div>
							<div class="value">{{ data.receiveMobile }}</div>
						</div>
						<div class="msg-list">
							<div class="label">地址</div>
							<div class="value">{{ data.receiveFullAddress }}</div>
						</div>
					</div>
					<!--  -->
					<div class="order-msg-blo">
						<div class="msg-list">
							<div class="label">送达时间</div>
							<div class="value">{{ data.reachDate || '暂无' }}</div>
						</div>
						<div class="msg-list">
							<div class="label">贺卡</div>
							<div class="value">{{ data.needCard == 1 ? "需要" : '不需要' }}</div>
						</div>
						<div class="msg-list">
							<div class="label">祝福语</div>
							<div class="value">{{ data.cardInfo || '暂无' }}</div>
						</div>
					</div>
					<!--  -->
					<!-- <div class="order-msg-blo">
						<div class="msg-list">
							<div class="label">订花人</div>
							<div class="value">{{ data.bookName }}</div>
						</div>
						<div class="msg-list">
							<div class="label">微信</div>
							<div class="value">{{ data.bookName }}</div>
						</div>
						<div class="msg-list">
							<div class="label">手机</div>
							<div class="value">{{ data.bookMobile }}</div>
						</div>
					</div>-->
					<!--  -->
					<div class="order-msg-blo">
						<div class="msg-list">
							<div class="label">客户评分</div>
							<div class="value">
								<!-- <span>{{ data.totalFlow }}</span> -->
								<rate-module :current="Number(data.totalFlow) || 0" :disabled="true"></rate-module>
							</div>
						</div>
						<div class="msg-list">
							<div class="label">客户留言</div>
							<div class="value">{{ data.evaluate || '暂无' }}</div>
						</div>
					</div>
					<!--  -->
					<div class="order-msg-blo">
						<div class="msg-list">
							<div class="label">订单号</div>
							<div class="value">{{ data.orderSn }}</div>
						</div>
						<div class="msg-list">
							<div class="label">时间</div>
							<div class="value">{{ data.addTime | formatTime }}</div>
						</div>
						<div class="msg-list">
							<div class="label">总价</div>
							<div class="value">￥{{ data.prePrice }}</div>
						</div>
						<div class="msg-list">
							<div class="label">运费</div>
							<div class="value">￥{{ data.sendCost }}</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 优惠信息 -->
			<div class="module-com coupon-wrap" v-if="data.discountAmount && data.discountAmount != '0.00'">
				<div class="module-det flex-center-between">
					<div class="app-color-3">{{ data.discountType == 0 ? '使用优惠券' : data.discountType == 1 ? '会员打折' : '付款随机优惠' }}</div>
					<div class="app-price">-￥{{ data.discountAmount }}</div>
				</div>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="page-btn app-footer">
			<div class="flex-center">
				<span>应付款</span>
				<span class="app-price">
					<span>￥</span>
					<span class="app-size-40">{{ data.prePrice }}</span>
				</span>
			</div>
			<template v-if="data.status == 0">
				<button class="admin-button-com middle" @click="updatePriceFn">修改价格</button>
			</template>
			<template v-else-if="data.status == 1 || data.status == 2">
				<div class="operate-btn-wrap">
					<block v-if="data.status == 2">
						<button class="admin-button-com middle" @click="seeSendFn">查看配送</button>
					</block>
					<block v-else>
						<button class="admin-button-com middle" @click="freeShippingFn">免发货</button>
						<button class="admin-button-com middle" @click="pageTo({
						url: '/admin/order/ship',
						query: {
							id: data.id,
							pageStatus: 0
						}
					})">发货</button>
					</block>
				</div>
			</template>
			<!-- <template v-if="data.status == 5">
				<button class="admin-button-com middle">退款</button>
			</template>-->
		</div>
		<!-- 修改价格 -->
		<modal-module :show="updatePriceModal" @cancel="modalCancel" @click="updateModalClick" title="修改价格" padding="30rpx 30rpx">
			<template v-slot:content>
				<div class="app-modal-input-wrap">
					<div class="inp-list-line required">
						<!-- <div class="line-label">角色名称</div> -->
						<div class="line-input">
							<input v-model="form.price" type="text" :adjust-position="false" class="inp-input" placeholder="请输入价格" />
						</div>
					</div>
				</div>
			</template>
		</modal-module>
		<!-- 免发货弹窗 -->
		<modal-module :show="freeShipModal" @cancel="modalCancel" @click="freeShipModalClick" content="确认不需要发货？" color="#333" :size="32" padding="30rpx 30rpx"></modal-module>
	</div>
</template>

<script>
import ListModule from '@/components/module/app-order-list'
import AppCoupon from '@/components/app-coupon-sel'
import ModalModule from '@/components/plugin/modal'
import RateModule from '@/components/plugin/rate'
// api
import { getDetB, freeShipping, orderUpdatePrice } from '@/api/order'
export default {
	name: 'order-detail',
	components: {
		ListModule,
		AppCoupon,
		ModalModule,
		RateModule
	},
	data() {
		return {
			constant: this.$constant,
			// img
			waitPayImg: `${this.$constant.imgUrl}/retail/order/wait-pay.png`,
			waitDeliveryImg: `${this.$constant.imgUrl}/retail/order/wait-delivery.png`,
			data: {},
			// 修改价格
			updatePriceModal: false,
			form: {
				price: ''
			},
			// 免发货
			freeShipModal: false
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			this._getDet()
		},
		_getDet() {
			return getDetB({ id: this.option.id }).then(res => {
				this.data = res.data
			})
		},
		// 免发货
		freeShippingFn() {
			this.freeShipModal = true
		},
		// 免发货
		freeShipModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				this.data.status = 2
				freeShipping({ id: this.data.id }).then(res => {
					this.$msg('操作成功！')
					this.modalCancel()
				})
			}
		},
		// 查看配送
		seeSendFn() {
			this.$util.pageTo({
				url: '/admin/order/ship',
				query: {
					id: this.data.id,
					pageStatus: 5
				}
			})
		},
		// 修改价格
		updatePriceFn() {
			this.form.price = this.data.prePrice
			this.updatePriceModal = true
		},
		updateModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				orderUpdatePrice({ id: this.data.id, price: this.form.price }).then(res => {
					this.modalCancel()
					this.$msg('修改成功!')
					setTimeout(() => {
						this._getDet()
					}, 1000)
				})
			}
		},
		// 关闭弹窗
		modalCancel() {
			this.form.price = ''
			this.freeShipModal = false
			this.updatePriceModal = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		padding-bottom: 80px;
	}
	.page-top {
		position: relative;
		.page-top-det {
			position: absolute;
			top: 22px;
			@include disFlex(center, space-between);
			width: 84%;
			padding: 0 48px;
			color: #fff;
			.page-status {
				font-size: 36px;
				font-weight: bold;
				margin-bottom: 16px;
			}
			.page-prompt {
				color: #ffdede;
			}
			.page-status-img {
				width: 180px;
			}
		}
	}
	.page-det {
		width: 94%;
		margin: 0 auto;
		position: relative;
		top: -40px;
		.order-msg {
			.order-msg-blo {
				font-size: 28px;
				padding: 20px 0;
				border-top: 1px solid $borderColor;
				.msg-list {
					@include disFlex(flex-start, space-between);
					margin: 16px 0;
					.label {
						width: 40%;
						color: $fontColor3;
					}
				}
			}
			& .order-msg-blo:first-child {
				border-top: none;
			}
		}
		.coupon-wrap {
			.module-det {
				padding: 20px 0;
			}
		}
	}
	// 底部按钮
	.page-btn {
		width: calc(100% - 60px);
		@include disFlex(center, space-between);
		padding: 0 30px;
		.app-price {
			margin-bottom: 8px;
			margin-left: 4px;
		}
		.red {
			width: 270px;
		}
		.default {
			width: 260px;
		}
		.operate-btn-wrap {
			.admin-button-com {
				margin-left: 30px;
				padding: 20px 30px;
			}
		}
	}
	// 公共模块
	.module-com {
		border-radius: 10px;
		background-color: #fff;
		padding: 0 20px;
		box-shadow: 0px 6px 16px #ddd;
		margin-bottom: 20px;
		.module-tit {
			padding: 20px 0;
			font-size: 28px;
			font-weight: 600;
			border-bottom: 1px solid $borderColor;
		}
	}
</style>