front-end/ghsApp/src/pagesPurchase/info.vue

<template>
	<view class="app-content">
		<view v-if="!$util.isEmpty(detailInfo)" class="info-content_box">
			<view class="title"> 供货商 </view>
			<view class="address-des_bx content-box">
				<view>
					<view> {{ detailInfo.supplierName }} {{ detailInfo.supplierMobile }} </view>
					<view class="">
						{{ detailInfo.supplierAddress}}
					</view>
				</view>
				<view>
					<i @click="callUp(detailInfo.supplierMobile)" 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>{{ detailInfo.entryTime }}</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?'已入库'
						:detailInfo.status==6?'已取消'
						:'已退款'
						 }}</view>
				</view>

				<view v-if="detailInfo.refund == 2" class="order-info_box">
					<view>累计退款：</view>
					<view style="color:red;font-weight:bold;font-size:30upx;">{{parseFloat(detailInfo.tkPrice)}}</view>
					<view class="price" v-if="detailInfo.refund==2">
						<text @click="pageTo({url: '/pagesPurchase/refundList',query: {orderSn: detailInfo.orderSn}})" style="font-weight:normal;color:#3385FF;">退款记录</text>
					</view>
				</view>

			</view>

			<view class="bills-info_box content-box" style="margin-top:18upx;">
				<view class="order-info_box" v-if="detailInfo.debt == 1">
				<view>结算状态：</view>
					<view style="color:red;">欠款</view>
					<view class="price">
						

						<text @click="goToClear(detailInfo)" style="font-weight:normal;color:#3385FF;">查看全部欠款</text>

					</view>
				</view>
				<view class="order-info_box" v-else>
				<view>结算状态：</view>
					<view v-if="detailInfo.clearId > 0">已结清</view>
					<view class="price" v-if="detailInfo.clearId > 0">
					<button @click="pageTo({url: '/admin/clear/info',query: {id: detailInfo.clearId}})" class="admin-button-com">查看结账单</button>
					</view>
					<view v-if="detailInfo.clearId == 0">--</view>          
				</view>
			</view>

			<view class="title">
				商品信息 
				<text @click="printAllLabel(detailInfo)" style="float:right;font-weight:normal;color:#3385FF;">打全部标签</text>
				<text @click="goRefund(detailInfo)" style="float:right;font-weight:normal;color:#3385FF;margin-right:60upx;">申请退款</text>
			</view>
			<view class="module-com content-box">
				<view class="commodity-view">
					<view class="commodity-list">
						<view v-for="(s, idx) in detailInfo.itemInfo" :key="idx" class="commodity-item" @click="pageTo({ url: '/admin/item/detail?id='+s.productId })" >
							<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.bigPrice ? parseFloat(s.bigPrice) : 0 }}</text>
									</text>
								</view>
								<view class="info-line">
									<text class="item-type" style="color:#3385FF;" @click.stop="printLabel(s)">打标签</text>
									<text class="item-count">{{ parseFloat(s.itemNum) }}扎</text>
								</view>
							</view>
						</view>
					</view>
					<view class="summary-bar">
						<view class="operate-view" ></view>
						<view class="describe-view">
							共{{ detailInfo.kind || 0 }}种，<text v-if="Number(detailInfo.bigNum)>0">{{ detailInfo.bigNum }}扎</text><text v-if="Number(detailInfo.smallNum)>0">{{detailInfo.smallNum}}支</text>，
							合计 ¥<text class="price">{{ detailInfo.price ? parseFloat(detailInfo.price) : 0 }}</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" style="font-size: 28upx;">{{detailInfo.yfPayWay==1?'寄付':'到付'}}</div>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">打包费</div>
						<div class="detail-price_box" style="font-size: 28upx;">¥{{ detailInfo.packingCharge?parseFloat(detailInfo.packingCharge):0 }}</div>
					</tui-list-cell>
					<tui-list-cell v-if="detailInfo.yfPayWay==1" class="line-cell" :hover="false">
						<div class="tui-title">短途运费</div>
						<div class="detail-price_box" style="font-size: 28upx;">¥{{ detailInfo.shortCharge?parseFloat(detailInfo.shortCharge):0 }}</div>
					</tui-list-cell>
					<tui-list-cell v-if="detailInfo.yfPayWay==1" class="line-cell" :hover="false">
						<div class="tui-title">长途运费</div>
						<div class="detail-price_box" style="font-size: 28upx;">¥{{ detailInfo.longCharge?parseFloat(detailInfo.longCharge):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>
						<div class="detail-price_box" style="font-size: 30upx;">¥{{ detailInfo.prePrice ? parseFloat(detailInfo.prePrice) : 0 }}</div>
					</tui-list-cell>
					<tui-list-cell v-if="detailInfo.refundPrice > 0" class="line-cell" :hover="false">
						<div class="tui-title">退款金额</div>
						<div class="detail-price_box" style="font-size: 28upx">-¥{{ detailInfo.tkPrice ? parseFloat(detailInfo.tkPrice) : 0 }}</div>
					</tui-list-cell>
					<tui-list-cell v-if="detailInfo.discountAmount > 0" class="line-cell" :hover="false">
						<div class="tui-title">减免</div>
						<div class="detail-price_box" style="font-size: 30upx;">¥{{ detailInfo.discountAmount ? parseFloat(detailInfo.discountAmount) : 0 }}</div>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">实际金额</div>
						<div class="detail-price_box red" style="font-size: 30upx;">¥{{ detailInfo.realPrice ? parseFloat(detailInfo.realPrice) : 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>
						<textarea style="height: 130upx;width:350upx;" @focus="detailInfo.remark=''" v-model="detailInfo.remark" placeholder="这里写备注"/>
						<button class="admin-button-com blue mini-btn" @click="modifyRemark(item)" >修改</button>
					</tui-list-cell>
				</div>
			</view>

			<view class="content-box price-detail">
				<div class="module-com input-line-wrap">
					<tui-list-cell v-if="detailInfo.yfPayWay==2" class="line-cell" :hover="false">
						<div class="tui-title">短途运费</div>
						<div class="detail-price_box" style="font-size: 28upx;">¥{{ detailInfo.shortCharge?parseFloat(detailInfo.shortCharge):0 }}</div>
					</tui-list-cell>
					<tui-list-cell v-if="detailInfo.yfPayWay==2" class="line-cell" :hover="false">
						<div class="tui-title">长途运费</div>
						<div class="detail-price_box" style="font-size: 28upx;">¥{{ detailInfo.longCharge?parseFloat(detailInfo.longCharge):0 }}</div>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">提货费</div>
						<div class="detail-price_box" style="font-size: 28upx;">¥{{ detailInfo.pickCharge?parseFloat(detailInfo.pickCharge):0 }}</div>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">本地运费</div>
						<div class="detail-price_box" style="font-size: 28upx;">¥{{ detailInfo.localCharge?parseFloat(detailInfo.localCharge):0 }}</div>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">总费用</div>
						<div class="detail-price_box" style="font-size: 30upx;">¥{{ detailInfo.totalFreight?parseFloat(detailInfo.totalFreight):0 }}</div>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">总重量</div>
						<div class="detail-price_box" style="font-size: 30upx;">¥{{ detailInfo.totalWeight?parseFloat(detailInfo.totalWeight):0 }}</div>
					</tui-list-cell>
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">每公斤运费</div>
						<div class="detail-price_box" style="font-size: 30upx;">¥{{ detailInfo.avgKgWeight?parseFloat(detailInfo.avgKgWeight):0 }}</div>
					</tui-list-cell>

				</div>
			</view>

		</view>
	</view>
</template>
<script>
import { getPurchaseDetailApi,updateRemark,printAll,printItem } from "@/api/purchase";
import productMins from "@/mixins/product";
import TuiListCell from "@/components/plugin/list-cell";
export default {
	name: "info",
	components: {
		TuiListCell
	},
	mixins: [productMins],
	data() {
		return {
			selectJobType: "order_change",
			autoLoad: false,
			stepActive: 0,
			form: {
				name: ""
			},
			detailInfo: {},
			loading: false
		};
	},
	methods: {
		goRefund(info){
			this.$util.pageTo({url:'/pagesPurchase/refund?orderSn='+info.orderSn})
		},
		printLabel(item){
			let that = this
			that.$util.confirmModal({content:'确认打印'},() => {
				printItem({id:item.id}).then(res=>{
					if(res.code == 1){
						that.$msg(res.msg)
					}	
				})
			})
		},
		printAllLabel(item){
			let that = this
			that.$util.confirmModal({content:'确认打印'},() => {
				printAll({orderSn:item.orderSn}).then(res=>{
					if(res.code == 1){
						that.$msg(res.msg)
					}
				})          
			})
		},
		goToClear (item) {
			this.pageTo({
				url: '/pagesGys/details?id='+item.ghsId
			})
		},
		modifyRemark(){
			const self = this;
			let remark = this.detailInfo.remark
			updateRemark({id:this.detailInfo.id,remark:remark}).then((res) => {
				self.$msg(res.msg);
			})
		},
		copy(val) {
			const self = this;
			uni.setClipboardData({
				data: val,
				success: function() {
					self.$msg("复制成功");
				}
			});
		},
		callUp(mobile) {
			uni.makePhoneCall({
				phoneNumber: mobile
			});
		},
		async init() {
			const { orderSn } = this.option;
			if (!orderSn) {
				return;
			}
			const { data } = await getPurchaseDetailApi(orderSn);
			this.detailInfo = data;
		}
	}
};
</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: 50upx;
				color: #3385ff;
				margin-left: 0upx;
			}
		}
	}
	.bills-info_box {
		padding: 30upx 20upx 30upx;
		// border-bottom: 1upx 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: 1upx 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: 1upx solid #3385ff;
		&.active{
			color: #666666;
			border: 1upx solid #ccc;
		}
	}
}
</style>