front-end/hdApp/src/pagesOrder/detail.vue

<template>
	<view class="app-content">
<!--		<stepStatus-->
<!--			v-if="!$util.isEmpty(detailInfo)"-->
<!--			:stepOptions="detailInfo.progress"-->
<!--		></stepStatus>-->
		<view v-if="!$util.isEmpty(detailInfo)" class="info-content_box">
			<view class="title">
				客户
			</view>
			<view class="address-des_bx content-box">
				<view>
					<view> {{ detailInfo.customName }} {{ detailInfo.customMobile }} </view>
					<view class="">
						{{ detailInfo.customAddress}}
					</view>
				</view>
				<view>
					<i
						@click="callUp(detailInfo.customMobile)"
						class="iconfont icondianhua1"
					></i>
				</view>
			</view>
			<view class="title">
				单据信息
			</view>
			<view class="bills-info_box content-box">
				<view class="order-info_box">
					<view>日期：</view>
					<view>{{ detailInfo.addTime }}</view>
				</view>
				<view class="order-info_box">
					<view>单号编码：</view>
					<view>{{ detailInfo.orderSn }}</view>
					<view class="price">
						<button
							@click="copy(detailInfo.orderSn)"
							class="admin-button-com default"
						>
							复制
						</button>
					</view>
				</view>
				<view class="order-info_box">
					<view>销售人员：</view>
					<view>{{ detailInfo.adminName }}</view>
				</view>
				<!-- <view class="order-info_box">
                  <view>销售部门：</view>
                  <view>2020 11-22</view>
              </view> -->
				<view class="order-info_box">
					<view>出货日期：</view>
					<view>{{ detailInfo.outTime }}</view>
				</view>
				<view class="order-info_box">
					<view>欠款：</view>
					<view>{{ detailInfo.debt==1?'是':'-' }}</view>
				</view>
				<view class="order-info_box">
					<view>订单状态：</view>
					<view>{{ detailInfo.status==1?'待付款':detailInfo.status==2?'待发货':detailInfo.status==3?'待收货':detailInfo.status==4?'已完成':detailInfo.status==5?'已取消':'已退款' }}</view>
				</view>
				<!-- <view class="order-info_box">
                  <view>销售门店：</view>
                  <view>2020 11-22</view>
              </view> -->
			</view>
			<view class="content-box shipping-address" v-if="detailInfo.expressProgress!=''">
				<view> 配送进展：<text>{{ detailInfo.expressProgress.progressName }}</text> </view>
				<i class="iconfont iconqishouyinying"></i>
			</view>
			<view class="title">
				商品信息
			</view>
			<view class="module-com content-box">
				<view class="commodity-view">
					<view class="commodity-list">
						<view
							v-for="(s, idx) in detailInfo.product"
							:key="idx"
							class="commodity-item"
						>
							<image class="item-icon" :src="s.cover" alt="商品图片" />

							<view class="item-info">
								<view class="info-line">
									<text class="item-name">{{ s.name }}</text>
									<text class="item-price">
										<text class="unit">¥</text>

										<text class="price">{{ s.price }}</text>
									</text>
								</view>
								<view class="info-line">
									<text class="item-type">{{ s.property }}</text>
									<text class="item-count">{{ `${s.bigNum}/${s.smallNum}` }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="summary-bar">
						<view class="operate-view" ></view>
						<view class="describe-view">
							共{{ detailInfo.productStat.kind || 0 }}种, 共{{ detailInfo.productStat.bigNum }}扎{{
								detailInfo.productStat.smallNun}}支，合计 ¥<text class="price">{{ detailInfo.productStat.totalPrice }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="content-box price-detail">
				<div class="module-com input-line-wrap">
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">运费</div>
						<div class="detail-price_box">¥{{ detailInfo.sendCost }}</div>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">总金额</div>
						<div class="detail-price_box red">¥{{ detailInfo.totalPrice || 0 }}</div>
					</tui-list-cell>
				</div>
			</view>
			<view class="content-box price-detail">
				<div class="module-com input-line-wrap">
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">备注</div>
						<input
							:disabled="true"
							v-model="detailInfo.remark"
							placeholder-class="phcolor"
							class="tui-input"
							name="name"
							maxlength="50"
							type="text"
						/>
					</tui-list-cell>
				</div>
			</view>
		</view>
		<div class="app-footer">
			<template v-for="s in detailInfo.buttonList">
				<button
					:key="s.type"
					@click="openBt(s, detailInfo)"
					v-if="s.show == 1"
					:disabled="s.disable === 1"
					class="admin-button-com default" :class="s.disable === 1?'active':''">
					{{ s.type === "item" ? "改花材" : s.type === "selfGet" ? "自取" :s.type === "print" ? "打印" :s.type === "debtPay" ? "延期收款" :s.type === "hasPay" ? "已收款" : "发货" }}
				</button>
			</template>
<!--			<button-->
<!--				@click="pageTo({-->
<!--					url:'/pagesOrder/print'-->
<!--				})"-->
<!--				class="admin-button-com default">-->
<!--				打印-->
<!--			</button>-->
		</div>
		<!-- 免发货弹窗 -->
		<modal-module
			:show="freeShipModal"
			@cancel="modalCancel"
			@click="freeShipModalClick"
			content="确认已自取？"
			color="#333"
			:size="32"
			padding="30rpx 30rpx"
		></modal-module>
	</view>
</template>

<script>
import stepStatus from "./components/stepStatus";
import TuiListCell from "@/components/plugin/list-cell";
import { getDetail,debtPay,hasPay, freeShipping } from "@/api/order/index";
import productMins from "@/mixins/product";
import { ORDER_STATUS } from "@/utils/declare";

export default {
	name: "orderDetail",
	components: {
		stepStatus,
		TuiListCell
	},
	mixins: [productMins],
	data() {
		return {
			ORDER_STATUS,
			pageType: "order_change",
			autoLoad: false,
			stepActive: 0,
			form: {
				name: ""
			},
			detailInfo: {},
			freeShipModal: false,
			loading: false
		};
	},
	onShow() {
		this.init();
	},
	methods: {
		freeShipModalClick(e) {
			if (e.index === 0) {
				this.modalCancel();
			} else {
				freeShipping({ id: this.detailInfo.id }).then(res => {
					this.init();
					this.$msg("操作成功！");
					this.modalCancel();
				});
			}
		},
		modalCancel() {
			this.freeShipModal = false;
		},
		openBt(s, item) {
			// 花材
			if (s.type === "item") {
				this.gotoSelect();
				// 自取
			} else if (s.type === "selfGet") {
				this.freeShipModal = true;
				// this.operateData = item;
				//打印
			} else if (s.type === "print") {
					this.pageTo({url: "/pagesOrder/print",query: {id: item.id}});
				//发货
			} else if (s.type === "send") {
				this.pageTo({url: "/pagesOrder/ship",query: {id: item.id}});
			}else if (s.type === "debtPay") {
				let self = this;
				//延期收款
				uni.showModal({
					content: '您确认要延期收款',
					success: function (res) {
						if (res.confirm) {
							return debtPay({ id: self.option.id }).then(res => {
								console.log(res)
								uni.showToast({title:'操作成功！',icon:'none'})
								self.init();
							})
						}
					}
				});

				// this.pageTo({url: "/pagesOrder/ship",query: {id: item.id}});
			}else if (s.type === "hasPay") {
				let self = this;
				//已收款
				uni.showModal({
					content: '您确认已收款',
					success: function (res) {
						if (res.confirm) {
							return hasPay({ id: self.option.id }).then(res => {
								uni.showToast({title:'操作成功！',icon:'none'})
								self.init();
							})
						}
					}
				});
				// this.pageTo({url: "/pagesOrder/ship",query: {id: item.id}});
			}
		},
		copy(val) {
			const self = this;
			uni.setClipboardData({
				data: val,
				success: function() {
					self.$msg("复制成功");
				}
			});
		},
		callUp(mobile) {
			uni.makePhoneCall({
				phoneNumber: mobile
			});
		},
		async init() {
			try {
				if (this.loading) {
					return new Promise.reject();
				}
				this.loading = true;
				const res = await getDetail({
					id: this.option.id
				});
				this.detailInfo = res.data;

				const { product } = this.detailInfo;

				if (product) {
					this.setSelectInfoByType({
						type: this.pageType,
						info: product.map(ele => {
							return {
								...ele,
								bigCount: Number(ele.bigNum),
								smallCount: Number(ele.smallNum)
							};
						})
					});
				}
			} catch {
			} finally {
				this.loading = false;
			}
		},
		gotoSelect() {
			uni.navigateTo({url: `/pagesOrder/select?id=${this.detailInfo.id}`});
		}
	}
};
</script>

<style lang="scss" scoped>
.info-content_box {
	padding: 0 20upx 100upx;
	& > .title {
		color: #666666;
		font-size: 28upx;
		font-weight: 600;
		padding: 30upx 3upx;
	}
	& .address-des_bx {
		display: flex;
		padding: 20upx 10upx 30upx 20upx;
		& > view:nth-child(1) {
			flex: 1;
			margin-top: 10upx;
			& > view:nth-child(1) {
				color: #333333;
				font-size: 32upx;
				font-weight: bold;
			}
			& > view:nth-child(2) {
				color: #666666;
				font-size: 28upx;
				font-weight: 400;
				margin-top: 20upx;
			}
		}
		& > view:nth-child(2) {
			display: flex;
			& .icondianhua1 {
				font-size: 44upx;
				color: #3385ff;
				margin-left: 10upx;
			}
		}
	}
	.bills-info_box {
		padding: 30upx 20upx 30upx;
		// border-bottom: 1px solid #EEEEEE;
		& > .order-info_box {
			display: flex;
			align-items: center;
			font-size: 26upx;
			font-weight: 400;
			margin-bottom: 5upx;
			& > view:nth-child(1) {
				color: #999999;
				width: 135upx;
				text-align: right;
			}
			& > view:nth-child(2) {
				color: #333333;
			}
			& > .price {
				flex: 1;
				font-size: 30upx;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				& .iconxiangyou {
					color: #999999;
					font-size: 25upx;
					margin-left: 12upx;
				}
			}
		}
	}
	.content-box {
		background-color: #ffffff;
		border-radius: 10upx;
	}
	.commodity-view {
		display: flex;
		flex-direction: column;
		.commodity-list {
			padding: 20upx;
			.commodity-item {
				display: flex;
				margin-bottom: 20upx;
				.item-icon {
					flex-shrink: 0;
					width: 140upx;
					height: 140upx;
				}
				.item-info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 1;
					margin-left: 20upx;
					.info-line {
						margin-bottom: 20upx;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						.item-name {
							color: #666;
							font-size: 28upx;
						}
						.item-price {
							color: #333;
							font-size: 22upx;
							.price {
								font-size: 32upx;
								font-weight: bold;
							}
						}
						.item-type {
							color: #999;
							font-size: 24upx;
						}
						.item-count {
							color: #666;
							font-size: 24upx;
						}
					}
				}
			}
		}
		.summary-bar {
			padding: 0 20upx;
			height: 90upx;
			display: flex;

			align-items: center;
			justify-content: space-between;
			border-top: 1px solid #eeeeee;
			.operate-view {
				display: flex;

				align-items: center;
				color: #3385ff;
				font-size: 26upx;
				.iconfont {
					margin-right: 20upx;
					font-size: 40upx;
				}
			}
			.describe-view {
				display: flex;

				align-items: center;
				color: #333;
				font-size: 24upx;
				.price {
					font-weight: bold;
					font-size: 36upx;
				}
			}
		}
	}
	.shipping-address {
		display: flex;
		align-items: center;
		margin-top: 20upx;
		& > view:nth-child(1) {
			color: #999999;
			font-size: 28upx;
			font-weight: 400;
			display: inline-block;
			padding: 30upx 0 30upx 20upx;
			flex: 1;
			& > text {
				color: #333333;
				font-weight: 600;
			}
		}
		& > view:nth-child(2) {
			font-size: 60upx;
			color: #d6e7ff;
			margin-right: 10upx;
		}
	}
	.price-detail {
		margin-top: 20upx;
		margin-bottom: 20upx;
	}
	.detail-price_box {
		color: #333333;
		font-size: 22upx;
		text-align: right;
		flex: 1;
		font-weight: 600;
		&.red {
			color: #ff2842;
		}
	}
}
.app-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	& .admin-button-com {
		padding: 0;
		margin-right: 15upx;
		width: 140upx;
		height: 70upx;
		line-height: 70upx;
		text-align: center;
		color: #3385ff;
		border: 1px solid #3385ff;
		&.active{
			color: #666666;
			border: 1px solid #ccc;
		}
	}
}
</style>