caimei-applets-crm/pages/relation/order/detail.vue

<template>
	<view class="container mine clearfix">
		<!-- <cu-custom :navbar-data='nvabarData'  @navigateBack="hanldNavigateBack"></cu-custom> -->
		<view
			class="tui-header-box first"
			:style="{ height: isCmcustomClass == 'fiexd' ? CustomBar + 10 + 'px' : CustomBar + 30 + 'px' }"
			:class="isCmcustomClass"
		>
			<view class="header-top" :style="{ paddingTop: top + 'px', lineHeight: CustomBar + 30 + 'px' }"></view>
			<view class="header-sit">
				<text class="iconfont icon-fanhui" @click.stop="this.$api.navigateBack(1)"></text>
				<text class="header-sit-text">订单详情</text>
			</view>
		</view>
		<view
			class="tui-header-box"
			:style="{
				height: CustomBar + 30 + 'px',
				backgroundImage: 'url(https://static.caimei365.com/app/crm/image/statistic_bg1.png)'
			}"
		>
		</view>
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="7"
		></tui-skeleton>
		<view class="distinguish-section" v-else :style="{ top: CustomBar - 4 + 'px', left: 0 + 'px' }">
			<view class="distinguish-section-conten">
				<view class="section-top">
					<view class="section-badges">
						<view class="list-title-tip">
							<text class="badges">{{ order.orderType | formatOrderType }}</text>
						</view>
						<view class="list-title-tag" v-if="order.organizeId == 3">
							<text class="badges">维沙</text>
						</view>
						<view class="list-title-num">{{ order.status | stateExpFormat }}</view>
					</view>
					<view class="button" @click="toNoSms('/pages/collection/list')">
						<text class="iconfont icon-wodedingdan"></text> 收款列表
					</view>
				</view>
				<view class="section-mid">
					<view class="list-title">
						<view class="list-title-b">
							客户名称：<text class="text">{{ order.userName ? order.userName : '无' }}</text>
						</view>
						<view class="list-title-b">
							订单编号：<text class="text">{{ order.orderNo }} ( {{ order.orderId }} )</text>
						</view>
						<view class="list-title-b">
							下单日期：<text class="text">{{ order.orderTime }}</text>
						</view>
						<view class="list-title-b">
							<view class="list-title-b-item ">
								订单金额：<text class="text">￥{{ order.payTotalFee | NumFormat }}</text>
							</view>
							<view class="list-title-b-item ">
								余额抵扣：<text class="text">￥{{ order.balancePayFee | NumFormat }}</text>
							</view>
						</view>
						<view class="list-title-b">
							经理折扣：
							<text class="text" v-if="order.discountFee - order.returnedPurchaseFee > 0">
								￥{{ order.discountFee - order.returnedPurchaseFee }}
								<text class="text">
									(原¥{{ order.discountFee }} 折扣取消￥{{
										order.discountFee - order.returnedPurchaseFee > 0
											? order.returnedPurchaseFee
											: order.discountFee
									}})
								</text>
							</text>
							<text class="text" v-else>￥0.00(原¥0.00折扣取消￥0.00)</text>
						</view>
						<view class="list-title-b" v-if="order.returnedPurchaseFee > 0">
							退货退款： 
							<text class="text">
								(原¥{{ order.returnedPurchaseFee }} 折扣取消￥{{
									order.discountFee - order.returnedPurchaseFee > 0
										? order.returnedPurchaseFee
										: order.discountFee
								}})
							</text>
						</view>
						<view class="list-title-b">
							<view class="list-title-b-item ">
								应收金额：<text class="text">￥{{ order.payableAmount | NumFormat }}</text>
							</view>
							<view class="list-title-b-item ">
								已收金额：<text class="text">￥{{ order.paidAmount | NumFormat }}</text>
							</view>
						</view>
						<view class="list-title-b">
							<view class="list-title-b-item ">
								剩余应收：<text class="text">￥{{ order.surplusAmount | NumFormat }}</text>
							</view>
							<view class="list-title-b-item ">
								待审金额：<text class="text">￥{{ order.unCheckAmount | NumFormat }}</text>
							</view>
						</view>
						<view class="list-title-b" v-if="order.discountFee - order.returnedPurchaseFee > 0">
							<text class="text">说明：因退货，经理折扣收回，用于抵扣退款。</text>
						</view>
					</view>
				</view>
				<view class="section-mid supper clearfix">
					<view v-for="(shop, index) in order.shopOrderList" :key="index">
						<view class="list-title supper clearfix">
							<view class="list-title-b">
								子订单号(标识)：<text class="text">{{ shop.orderNo }} ( {{ shop.shopOrderId }} )</text>
							</view>
							<view class="list-title-b">
								供应商：<text class="text">{{ shop.shopName }}</text>
							</view>
							<view class="list-title-b">
								订单金额：<text class="text">￥{{ shop.needPayAmount | NumFormat }}</text>
							</view>
						</view>
						<view class="list-goods clearfix">
							<view
								class="list-goods-item"
								v-for="(product, pIndex) in shop.orderProductList"
								:key="pIndex"
							>
								<view class="list-goods-image">
									<image class="list-image" :src="product.image" mode=""></image>
									<view class="list-tags" v-if="product.productType == 1">赠品</view>
								</view>
								<view class="list-goods-mains">
									<view class="list-name">{{ product.name }}</view>
									<view class="list-text">
										<view class="list-text-item"
											>单价:￥{{
												product.productType == 1 ? '0.00' : product.discountPrice | NumFormat
											}}</view
										>
										<view class="list-text-item">数量:{{ product.num }}</view>
									</view>
									<view class="list-text"
										>合计:￥{{
											product.productType == 1 ? '0.00' : product.totalFee | NumFormat
										}}</view
									>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗提示 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel"
			:title="contentModalTitle"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		>
		</tui-modal>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'

export default {
	data() {
		return {
			isIphoneX: this.$store.state.isIphoneX,
			CustomBar: this.CustomBar, // 顶部导航栏高度
			height: 64, //header高度
			top: 0, //标题图标距离顶部距离
			scrollH: 0, //滚动总高度
			opcity: 1,
			isCmcustomClass: 'left',
			skeletonShow:true,
			nvabarData: {
				//顶部自定义导航
				showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
				showSearch: 0,
				title: '', // 导航栏 中间的标题
				haveBack: false,
				home: false,
				textLeft: this.$store.state.isIphone,
				bgColor: '#D33020',
				textColor: '#ffffff'
			},
			order: {},
			orderId: 0
		}
	},
	onLoad(option) {
		let obj = {}
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect()
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect()
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu()
		// #endif
		uni.getSystemInfo({
			success: res => {
				this.width = obj.left || res.windowWidth
				this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
				this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6
				this.scrollH = res.windowWidth * 0.6
			}
		})
		this.orderId = option.orderId
		this.getOrderReceiptOrdersInfo(this.orderId)
	},
	computed: {
		...mapState(['hasLogin'])
	},
	methods: {
		getOrderReceiptOrdersInfo(orderId) {
			// 收款详情
			this.OrderService.orderReceiptOrdersInfo({ orderId: orderId })
				.then(response => {
					this.order = response.data
					setTimeout(()=>{
						this.skeletonShow = false
					},1000)
				})
				.catch(err => {
					this.$util.msg(err.msg, 2000)
				})
		},
		toNoSms(url) {
			this.$api.navigateTo(url)
		},
		formatColor(state) {
			//设置邀请码状态亚瑟
			let stateColor = '',
				stateColorObject = {
					1: '#ff7900',
					2: '#4cd964',
					3: '#19be6b',
					4: '#ed3f14',
					5: '#F74D54'
				}
			Object.keys(stateColorObject).forEach(function(key) {
				if (key == state) {
					stateColor = stateColorObject[key]
				}
			})
			return stateColor
		},
	},
	onPageScroll(e) {
		//实时获取到滚动的值
		// if (e.scrollTop > 30) {
		// 	this.isCmcustomClass = 'fiexd'
		// } else {
		// 	this.isCmcustomClass = 'left'
		// }
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.getOrderReceiptOrdersInfo(this.orderId)
			uni.stopPullDownRefresh()
		}, 200)
	},
	onShow() {}
}
</script>

<style lang="scss">
@import '@/uni.scss';

page {
	background: #fff;
}

.tui-header-box {
	width: 100%;
	background: #ffffff;
	z-index: 999;
	background-size: cover;
	background-image: url(https://static.caimei365.com/app/crm/image/statistic_bg2.png);
	&.fiexd {
		position: fixed;
		top: 0;
		left: 0;
	}
}

.header-top {
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0 40rpx;
}

.header-sit {
	width: 100%;
	box-sizing: border-box;
	height: 80rpx;
	line-height: 80rpx;
	box-sizing: border-box;
	color: #ffffff;

	.header-sit-text {
		text-align: left;
		font-size: $font-size-40;
		font-weight: 600;
		font-family: '正楷';
	}

	.icon-fanhui {
		display: block;
		width: 80rpx;
		height: 80rpx;
		float: left;
		text-align: center;
		line-height: 80rpx;
		font-size: 42rpx;
	}
}

.mine {
	width: 100%;
	height: 100%;
	position: relative;
}

.distinguish-section {
	width: 100%;
	position: absolute;
	padding: 40rpx 20rpx;
	box-sizing: border-box;
}

.distinguish-section-conten {
	width: 100%;
	height: auto;
	position: relative;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 20rpx;
	box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);
	.section-top {
		width: 100%;
		height: 66rpx;
		box-sizing: border-box;
		.section-badges {
			float: left;
			height: 66rpx;
			padding: 13rpx 0;
			.list-title-tip {
				float: left;
				.badges {
					display: block;
					float: left;
					padding: 0 15rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 20rpx;
					background: rgba(248, 204, 148, 0.5);
					font-size: $font-size-24;
					text-align: center;
					color: #666666;
				}
			}
			.list-title-tag {
				float: left;
				margin-left: 20rpx;
				.badges {
					display: block;
					float: left;
					padding: 0 15rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 20rpx;
					background: linear-gradient(270deg, #fee9ba 0%, #f0cb72 100%);
					font-size: $font-size-24;
					text-align: center;
					color: #666666;
				}
			}
			.list-title-num {
				float: left;
				text-align: left;
				color: #42b983;
				line-height: 40rpx;
				margin-left: 20rpx;
			}
		}
		.button {
			float: right;
			box-sizing: border-box;
			padding: 0 24rpx;
			height: 100%;
			line-height: 66rpx;
			background: $btn-confirm;
			border-radius: 8rpx;
			text-align: center;
			color: #ffffff;
		}
	}
	.section-mid {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		padding: 15rpx 0;
		position: relative;
		border-radius: 0 0 20rpx 20rpx;
		&.supper {
			padding: 0;
			.list-goods {
				width: 100%;
				height: auto;
				margin-top: 20rpx;
				.list-goods-item {
					width: 100%;
					height: 180rpx;
					float: left;
					margin-bottom: 20rpx;
					.list-goods-image {
						width: 180rpx;
						height: 180rpx;
						border-radius: 8rpx;
						float: left;
						position: relative;
						border: 1px solid #E1E1E1;
						.list-image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
							display: block;
						}
						.list-tags {
							padding: 0 15rpx;
							height: 40rpx;
							text-align: center;
							line-height: 40rpx;
							font-size: 22rpx;
							border-radius: 8rpx 20rpx 0 20rpx;
							color: #ffffff;
							background-color: #dd524d;
							position: absolute;
							top: 0;
							left: 0;
						}
					}
					.list-goods-mains {
						width: 480rpx;
						height: 100%;
						float: left;
						padding: 10rpx 0;
						padding-left: 24rpx;
						.list-name {
							width: 100%;
							line-height: 40rpx;
							font-size: $font-size-24;
							color: #333333;
							text-align: left;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}
						.list-text {
							width: 100%;
							height: 40rpx;
							float: left;
							font-size: $font-size-24;
							line-height: 40rpx;
							color: #999999;
							text-align: left;
							.list-text-item {
								width: 50%;
								height: 100%;
								float: left;
							}
						}
					}
				}
			}
		}
		.list-title {
			width: 100%;
			height: auto;
			&.supper {
				background-color: #f7f7f7;
				padding:10rpx;
			}
			.list-title-b {
				width: 100%;
				height: 50rpx;
				float: left;
				font-size: $font-size-24;
				line-height: 50rpx;
				color: #666666;
				text-align: left;
				.text {
					color: #999999;
				}
				.list-title-b-item {
					width: 50%;
					height: 100%;
					float: left;
				}
			}
		}
	}
}
</style>