caimei-applets-crm/pages/relation/service/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-shouye1" v-if="isShareType" @click.stop="this.$api.navigateLinkJump()"></text>
				<text class="iconfont icon-fanhui" v-else @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"
		/>
		<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="title">
						<view class="title-text">收款信息</view>
					</view>
<!-- 					<view class="button" @click="toNoSms('/pages/collection/list')">
						<text class="iconfont icon-wodedingdan"></text>
						收款列表
					</view> -->
				</view>
				<view class="section-top-item">
					<view class="list-title-t">
						<view class="list-title-tip">
							<text class="badges">{{ receiptInfo.receiptType | formatReceiptType }}</text>
						</view>
					</view>
					<view class="list-title-b">
						收款金额：<text class="text">￥{{ receiptInfo.receiptAmount | NumFormat }}</text>
					</view>
					<view class="list-title-b">
						收款账号：<text class="text">{{ receiptInfo.payTypeText }}</text>
					</view>
					<view class="list-title-b">
						款时间：<text class="text">{{ receiptInfo.receiptDate }}</text>
					</view>
					<view class="list-title-b">收款短信：</view>
					<view class="list-title-b sms">
						<text class="text">{{ receiptInfo.smsContent ? receiptInfo.smsContent : '无' }}</text>
					</view>
				</view>
				<view class="section-title">关联订单</view>
				<view class="section-mid">
					<view
						class="tui-order-item"
						v-for="(order, index) in shopOrderList"
						:key="index"
					>
						<view class="list-title" @click.stop="orderDetail(order.shopOrderId)">
							<view class="list-title-t">
								<view class="list-title-tip">
									<text
										class="badges"
										:class="{
											success: order.orderType === 1,
											warning: order.orderType === 0
										}"
										>{{ order.orderType | formatOrderType }}</text
									>
									<text class="badgesb" v-if="order.secondHandOrderFlag ==1">二手</text>
								</view>
								<view class="list-title-tag">
									<text class="badges">{{ order.organizeId | organizeName }}</text>
								</view>
								<view class="list-title-num">{{ order.status | stateExpFormat }}</view>
							</view>
							<view class="list-title-a">
								<view class="list-title-a-text">
									子订单编号：<text class="text"
										>{{ order.shopOrderNo }} ( {{ order.shopOrderId }} )</text
									>
								</view>
								<view class="list-title-a-text">
									下单日期：<text class="text">{{ order.orderTime }}</text>
								</view>
								<view class="list-title-a-text">
									供应商名称：<text class="text">{{ order.shopName }}</text>
								</view>
							</view>
							<view class="list-title-b">
								客户名称：<text class="text">{{
									order.userName ? order.userName : '无'
								}}</text>
								
							</view>
							<view class="list-title-b">
								子订单金额：<text class="text"
									>￥{{ order.needPayAmount | NumFormat }}</text
								>
							</view>
							<view class="list-title-b">
								应收金额：<text class="text"
									>￥{{ order.needPayAmount | NumFormat }}</text
								>
							</view>
							<view class="list-title-b">
								已收金额：<text class="text"
									>￥{{ order.receiptAmount | NumFormat }}</text
								>
							</view>
							<view class="list-title-b">
								平台服务费：<text class="text"> ￥{{
									order.cmCostPrice | NumFormat
								}}</text>
							</view>
						</view>
						<view class="list-detail" @click.stop="orderDetail(order.shopOrderId)">
							<text class="iconfont icon-xiayibu"></text>
						</view>
					</view>
				</view>
				<view class="section-title">状态</view>
				<view class="section-mid">
					<view class="list-title">
						<view class="list-title-b">进度：<text
								:style="{ color: formatColor(receiptInfo.receiptStatus) }">{{ receiptInfo.receiptStatusText }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</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,
				orderList:[],
				listQuery:{
					pageNum: 1, //页数
					pageSize: 10, //条数
					id: 0,
					shopName: '',
				},
				nvabarData: {
					//顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '', // 导航栏 中间的标题
					haveBack: false,
					home: false,
					textLeft: this.$store.state.isIphone,
					bgColor: '#D33020',
					textColor: '#ffffff'
				},
				receiptInfo: {},
				receiptId: 0,
				isShareType:false
			}
		},
		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
				}
			})
			if(option.type == 'share'){ this.isShareType = true }
			this.receiptId = this.listQuery.id = option.id
			this.getOrderReceiptDetail(this.receiptId)
			this.getOrderReceiptRebateOrders()
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			getOrderReceiptDetail(id) {
				// 收款详情
				this.OrderService.orderReceiptRebateDetails({ id: id })
					.then(response => {
						this.receiptInfo = response.data
					})
					.catch(err => {
						this.$api.navigateTo('/pages/login/login-error')
					})
			},
			getOrderReceiptRebateOrders() {// 收款详情-订单列表
				this.OrderService.orderReceiptPlatformOrders(this.listQuery)
					.then(response => {
						let data = response.data
						if (data.list && data.list.length > 0) {
							this.shopOrderList = data.list
						}	
						setTimeout(()=>{
							this.skeletonShow = false
						},1000)
					})
					.catch(err => {
						this.$util.msg(err.msg, 2000)
					})
			},
			orderDetail(shopOrderId) {
				//订单详情跳转
				this.$api.navigateTo(`/pages/relation/order/detail?shopOrderId=${shopOrderId}`)
			},
			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
			},
			formatReceiptType(value) {
				//订单状态文字和颜色
				var HtmlStateText = '',
					stateTextObject = {
						1: '订单款',
						2: '非订单款',
						3: '返佣款',
						4: '订单款或者非订单款',
						5: '供应商退款'
					}
				Object.keys(stateTextObject).forEach(function(key) {
					if (key == value) {
						HtmlStateText = stateTextObject[key]
					}
				})
				return HtmlStateText
			},
		},
		onPageScroll(e) {
			//实时获取到滚动的值
			// if (e.scrollTop > 30) {
			// 	this.isCmcustomClass = 'fiexd'
			// } else {
			// 	this.isCmcustomClass = 'left'
			// }
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getOrderReceiptDetail(this.receiptId)
				uni.stopPullDownRefresh()
			}, 200)
		},
		onShareAppMessage(res) {
			//分享购买优惠券
			const receipt = this.receiptInfo
			const receiptTypeText = this.formatReceiptType(receipt.receiptType)
			if (res.from === 'button') {
				// console.log('来自页面内转发按钮')
			}
			return {
				title: `￥${receipt.receiptAmount.toFixed(2)} | ${receipt.receiptDate}  |  ${receipt.receiptStatusText}(${receiptTypeText})`,
				path: `/pages/login/login-share?id=${receipt.id}`,
				imageUrl: 'https://static.caimei365.com/app/crm/image/icon-share@2x.jpg'
			}
		},
		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: '正楷';
		}

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

		.icon-iconfonticonfontsousuo1 {
			font-size: 42rpx;
			margin-left: 30rpx;
		}
	}

	.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;
			.title {
				float: left;
				height: 66rpx;
				padding: 13rpx 0;
				.title-text{
					float: left;
					line-height: 40rpx;
					height: 40rpx;
					color: #333333;
					text-align: left;
					font-weight: 600;
					font-size: $font-size-30;
				}
			}
			.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-top-item {
			width: 100%;
			height: auto;
			margin-top: 10rpx;
			position: relative;
			float: left;
			.list-title-t {
				width: 100%;
				height: 50rpx;
				float: left;
				font-size: $font-size-28;
				padding-bottom: 10rpx;
				.list-title-tip {
					float: left;
					.badges {
						display: block;
						float: left;
						padding: 0 15rpx;
						height: 36rpx;
						line-height: 36rpx;
						border-radius: 18rpx;
						background: #ecf5ff;
						font-size: $font-size-22;
						text-align: center;
						color: #409eff;
					}
				}
			}
			.list-title-b {
				width: 100%;
				height: 44rpx;
				float: left;
				font-size: $font-size-24;
				line-height: 44rpx;
				color: #666666;
				text-align: left;
				.text{
					color: #999999;
				}
				.list-title-b-item {
					width: 50%;
					height: 100%;
					float: left;
				}
				&.sms {
					height: auto;
					padding: 10rpx;
					border-radius: 4rpx;
					background: #F7F7F7;
				}
			}
			.list-icon {
				width: 120rpx;
				height: 60rpx;
				border: 1px solid #e1e1e1;
				border-radius: 10rpx;
				text-align: center;
				font-size: 20rpx;
				line-height: 60rpx;
				position: absolute;
				right: 90rpx;
				top: 40rpx;
				color: #dd524d;
				z-index: 99;
				transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				font-family: '正楷';
			}
		}

		.section-title {
			width: 100%;
			height: 66rpx;
			float: left;
			font-size: $font-size-28;
			line-height: 66rpx;
			color: #333333;
			text-align: left;
			font-weight: 600;
		}

		.section-mid {
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: column;
			position: relative;
			border-radius: 0 0 20rpx 20rpx;
			.tui-order-item{
				display: flex;
				flex-direction: column;
				width: 100%;
				background: #fff;
				position: relative;
				.list-title {
					width: 100%;
					height: auto;
					.list-title-t {
						width: 100%;
						height: 50rpx;
						float: left;
						font-size: $font-size-28;
						padding-bottom: 10rpx;
						.list-title-tip {
							float: left;
							.badges {
								display: block;
								float: left;
								padding: 0 15rpx;
								height: 36rpx;
								line-height: 36rpx;
								border-radius: 20rpx;
								font-size: $font-size-22;
								background-color: #f0f9eb;
								color: #67c23a;
								text-align: center;
								&.success {
									background-color: #ecf5ff;
									color: #409eff;
								}
								&.warning {
									background-color: #fdf6ec;
									color: #e6a23c;
								}
							}
							.badgesb{
								display: block;
								float: left;
								padding: 0 15rpx;
								height: 36rpx;
								line-height: 36rpx;
								border-radius: 20rpx;
								background: #f4f4f5;
								font-size: $font-size-22;
								text-align: center;
								color: #909399;
								margin-left: 24rpx;
							}
						}
						.list-title-tag {
							float: left;
							margin-left: 20rpx;
							.badges {
								display: block;
								float: left;
								padding: 0 15rpx;
								height: 40rpx;
								line-height: 40rpx;
								border-radius: 20rpx;
								font-size: $font-size-22;
								text-align: center;
								background-color: #ecf5ff;
								color: #409eff;
							}
						}
						.list-title-num {
							float: left;
							text-align: left;
							color: #42b983;
							line-height: 40rpx;
							margin-left: 20rpx;
							font-size: $font-size-24;
						}
					}
					.list-title-a {
						width: 100%;
						height: auto;
						float: left;
						// padding: 5rpx 8rpx;
						// border-radius: 4rpx;
						// background-color: rgba(247, 247, 247, 1);
						// margin: 10rpx 0;
						.text{
							color: #999999;
						}
						.list-title-a-text {
							width: 100%;
							height: 50rpx;
							float: left;
							font-size: $font-size-24;
							line-height: 50rpx;
							color: #666666;
							text-align: left;
						}
					}
					.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;
						}
					}
				}
			}
			.list-detail {
				width: 70rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				position: absolute;
				right: 0;
				bottom: 0;
				.iconfont {
					font-size: $font-size-32;
					color: #999999;
				}
			}
		}
		.section-tips{
			width: 100%;
			height: 50rpx;
			font-size: $font-size-28;
			line-height: 50rpx;
			color: $uni-color-error;
			text-align: left;
		}
	}
	.distinguish-button {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		padding: 0 50rpx;
		padding-top: 20rpx;
		display: flex;
		.button {
			flex: 1;
			height: 80rpx;
			margin: 0 20rpx;
			border-radius: 40rpx;
			text-align: center;
			color: #ffffff;
			line-height: 80rpx;
			font-size: $font-size-28;
			box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
			&.confirm{
				background: $btn-confirm;
			}
			&.cancel{
				background: $uni-color-error;
			}
		}
	}
</style>