收款工具页面

common/css/iconfont.scss

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3182369 */
-  src: url('//at.alicdn.com/t/font_3182369_sa1x7akwh4.woff2?t=1645089597133') format('woff2'),
-       url('//at.alicdn.com/t/font_3182369_sa1x7akwh4.woff?t=1645089597133') format('woff'),
-       url('//at.alicdn.com/t/font_3182369_sa1x7akwh4.ttf?t=1645089597133') format('truetype');
+  src: url('//at.alicdn.com/t/font_3182369_6m0y1etdt0p.woff2?t=1645257667824') format('woff2'),
+       url('//at.alicdn.com/t/font_3182369_6m0y1etdt0p.woff?t=1645257667824') format('woff'),
+       url('//at.alicdn.com/t/font_3182369_6m0y1etdt0p.ttf?t=1645257667824') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-fenxiang3:before {
+  content: "\e65c";
+}
+
+.icon-fenxiang4:before {
+  content: "\e61b";
+}
+
+.icon-fenxiang6:before {
+  content: "\e634";
+}
+
+.icon-fenxiang5:before {
+  content: "\e62e";
+}
+
+.icon-fenxiang2:before {
+  content: "\e625";
+}
+
 .icon-fenxiang:before {
   content: "\e685";
 }

components/cm-module/orderDetails/list-button.vue

@@ -177,7 +177,7 @@ export default {
 			line-height: 64rpx;
 			font-size: $font-size-26;
 			text-align: center;
-			border-radius: 6rpx;
+			border-radius: 32rpx;
 			float: right;
 		}
 		.btn-cancel {

components/thorui/tui-button/tui-button.vue

@@ -124,7 +124,7 @@
 
 <style scoped>
 	.tui-btn-primary {
-		background: #5677fc !important;
+		background: #4688fa !important;
 		color: #fff;
 	}
 

pages.json

@@ -10,7 +10,7 @@
 		{
 			"path": "pages/collection/sms",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "款项识别",
 				"enablePullDownRefresh":true,
 				"navigationStyle":"custom"
 			}
@@ -18,7 +18,7 @@
 		{
 			"path": "pages/collection/nosms",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "无短信收款",
 				"enablePullDownRefresh":true,
 				"navigationStyle":"custom"
 			}
@@ -26,7 +26,7 @@
 		{
 			"path": "pages/collection/list",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "收款列表",
 				"enablePullDownRefresh":true,
 				"navigationStyle":"custom"
 			}
@@ -34,14 +34,39 @@
 		{
 			"path": "pages/collection/detail",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "收款款项详情",
+				"enablePullDownRefresh":true,
 				"navigationStyle":"custom"
 			}
 		},
 		{
 			"path": "pages/relation/ordinary/index",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "订单款关联",
+				"enablePullDownRefresh":true,
+				"navigationStyle":"custom"
+			}
+		},
+		{
+			"path": "pages/relation/ordinary/examine-detail",
+			"style": {
+				"navigationBarTitleText": "审核详情",
+				"enablePullDownRefresh":true,
+				"navigationStyle":"custom"
+			}
+		},
+		{
+			"path": "pages/relation/ordinary/detail",
+			"style": {
+				"navigationBarTitleText": "审核通过",
+				"enablePullDownRefresh":true,
+				"navigationStyle":"custom"
+			}
+		},
+		{
+			"path": "pages/relation/nonorder/detail",
+			"style": {
+				"navigationBarTitleText": "非订单详情",
 				"enablePullDownRefresh":true,
 				"navigationStyle":"custom"
 			}
@@ -49,7 +74,15 @@
 		{
 			"path": "pages/relation/return/index",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "返佣款关联",
+				"enablePullDownRefresh":true,
+				"navigationStyle":"custom"
+			}
+		},
+		{
+			"path": "pages/relation/return/detail",
+			"style": {
+				"navigationBarTitleText": "返佣详情",
 				"enablePullDownRefresh":true,
 				"navigationStyle":"custom"
 			}
@@ -57,7 +90,15 @@
 		{
 			"path": "pages/relation/refund/index",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "供应商退款关联",
+				"enablePullDownRefresh":true,
+				"navigationStyle":"custom"
+			}
+		},
+		{
+			"path": "pages/relation/refund/detail",
+			"style": {
+				"navigationBarTitleText": "供应商退款详情",
 				"enablePullDownRefresh":true,
 				"navigationStyle":"custom"
 			}
@@ -65,7 +106,7 @@
 		{
 			"path": "pages/relation/order/detail",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "子订单详情",
 				"enablePullDownRefresh":true,
 				"navigationStyle":"custom"
 			}

pages/collection/detail.vue

@@ -5,16 +5,16 @@
 			: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-fanhui2" @click.stop="this.$api.navigateBack(1)"></text></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>
 		<view class="distinguish-section" :style="{ top: CustomBar + 'px', left: 0 + 'px' }">
 			<view class="distinguish-section-conten">
-				<view class="section-top">
-					<view class="title"> 款项信息 </view>
-				</view>
 				<view class="section-rows">
 					<view class="rows-label">收款金额：</view>
 					<view class="rows-mains">
@@ -303,11 +303,11 @@
 		},
 		onPageScroll(e) {
 			//实时获取到滚动的值
-			if (e.scrollTop > 30) {
-				this.isCmcustomClass = 'fiexd'
-			} else {
-				this.isCmcustomClass = 'left'
-			}
+			// if (e.scrollTop > 30) {
+			// 	this.isCmcustomClass = 'fiexd'
+			// } else {
+			// 	this.isCmcustomClass = 'left'
+			// }
 		},
 		onPullDownRefresh() {
 			setTimeout(() => {
@@ -368,16 +368,29 @@
 	}
 
 	.header-sit {
-		width: 400rpx;
+		width: 100%;
+		box-sizing: border-box;
 		height: 80rpx;
 		line-height: 80rpx;
 		box-sizing: border-box;
-		padding-left: 20rpx;
-		text-align: left;
+		padding: 0 24rpx;
+		color: #ffffff;
 
-		.icon-fanhui2 {
-			font-size: $font-size-44;
-			color: #ffffff;
+		.header-sit-text {
+			text-align: left;
+			font-size: $font-size-40;
+			font-weight: 600;
+			font-family: '正楷';
+		}
+		.icon-fanhui {
+			display: block;
+			width: 38rpx;
+			height: 80rpx;
+			float: left;
+			text-align: left;
+			line-height: 80rpx;
+			font-size: 42rpx;
+			margin-right: 15rpx;
 		}
 	}
 
@@ -390,7 +403,7 @@
 	.distinguish-section {
 		width: 100%;
 		position: absolute;
-		padding: 40rpx 20rpx;
+		padding: 20rpx 20rpx;
 		box-sizing: border-box;
 	}
 
@@ -402,31 +415,6 @@
 		border-radius: 20rpx;
 		padding: 20rpx;
 		box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
-
-		.section-top {
-			width: 100%;
-			height: 106rpx;
-			box-sizing: border-box;
-			padding: 20rpx 0;
-
-			.title {
-				float: left;
-				line-height: 66rpx;
-				text-align: left;
-				box-sizing: border-box;
-				padding-left: 20rpx;
-				font-size: $font-size-40;
-				color: #333333;
-				font-weight: 600;
-				font-family: '正楷';
-
-				.iconfont {
-					color: #666666;
-					font-size: $font-size-40;
-				}
-			}
-		}
-
 		.section-rows {
 			width: 100%;
 			height: 80rpx;

pages/collection/list.vue

@@ -22,7 +22,7 @@
 					<view class="text">{{ item.name }}</view>
 				</view>
 			</view>
-			<view class="main day" v-if="currents == 2">
+			<view class="main day" v-if="currents == 2 || currents == 3">
 				<view class="main-item tab" v-for="(item, index) in listReturnType" :key="index"
 					:class="{ tabActive: tabCurrents == index }" @click="tabClick(2, index)">
 					<view class="text">{{ item.name }}</view>
@@ -30,7 +30,7 @@
 			</view>
 		</view>
 		<view class="user-section" :style="{
-				top: currents == 1 || currents == 3 ? CustomBar + 71 + 'px' : CustomBar + 105 + 'px',
+				top: currents == 1 ? CustomBar + 71 + 'px' : CustomBar + 105 + 'px',
 				left: 0 + 'px'
 			}">
 			<view class="header-content">
@@ -49,22 +49,34 @@
 										payment.confirmType | formatStateType
 									}}</view>
 								</view>
-								<view class="list-title-b">收款金额：￥{{ payment.receiptAmount | NumFormat }}</view>
+								<view class="list-title-b">
+									收款金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
+								</view>
 								<view class="list-title-b" v-if="payment.associateAmount">
-									关联金额：￥{{ payment.associateAmount | NumFormat }}</view>
-								<view class="list-title-b">收款类型：{{ payment.payType }}</view>
-								<view class="list-title-b">收款时间：{{ payment.receiptDate }}</view>
-								<view class="list-title-b" v-if="payment.reviewDate">审核时间：{{ payment.reviewDate }}
+									关联金额：<text class="text">￥{{ payment.associateAmount | NumFormat }}</text>
+								</view>
+								<view class="list-title-b">
+									收款类型：<text class="text">{{ payment.payType }}</text>
+								</view>
+								<view class="list-title-b">
+									收款时间：<text class="text">{{ payment.receiptDate }}</text>
+								</view>
+								<view class="list-title-b" v-if="payment.reviewDate">
+									审核时间：<text class="text">{{ payment.reviewDate }}</text>
+								</view>
+								<view class="list-title-b" v-if="userName">
+									客户名称：<text class="text">{{ payment.userName }}</text>
 								</view>
-								<view class="list-title-b" v-if="userName">客户名称：{{ payment.userName }}</view>
 								<template v-if="payment.smsContent">
 									<view class="list-title-b">收款短信：</view>
-									<view class="list-title-b sms">{{ payment.smsContent }}</view>
+									<view class="list-title-b sms">
+										<text class="text">{{ payment.smsContent }}</text>
+									</view>
 								</template>
 							</view>
 							<view class="list-icon">{{ payment.state == 1 ? '无人确认' : '无人审核' }}</view>
 							<button class="list-shaore" open-type="share" :data-payment="payment">
-								<text class="iconfont icon-fenxiang"></text>
+								<text class="iconfont icon-fenxiang2"></text>
 							</button>
 							<!-- 底部button -->
 							<list-button ref="listButton" :status="payment.confirmType" :dataInfo="payment"
@@ -149,16 +161,6 @@
 			return {
 				CustomBar: this.CustomBar, // 顶部导航栏高度
 				isIphoneX: this.$store.state.isIphoneX,
-				Array: [{
-					name: '正常订单'
-				}, {
-					name: '秒杀订单'
-				}],
-				Array1: [{
-					name: '小程序订单'
-				}, {
-					name: 'APP订单'
-				}],
 				listTabs: [{
 						name: '订单',
 						type: 1
@@ -465,18 +467,34 @@
 				this.getOrderDatainit(this.currentTab)
 			},
 			paymentDetail(payment) {
+				console.log('this.tabCurrents',this.tabCurrents)
+				console.log('this.payment',payment.sourceType)
 				switch(payment.sourceType){
 					case 1:// 1:订单
-						this.$api.navigateTo(`/pages/relation/ordinary/index?id=${payment.id}`)
+						if(this.tabCurrents == 1 || this.tabCurrents == 0){// 订单待确认
+							this.$api.navigateTo(`/pages/relation/ordinary/index?id=${payment.id}`)
+						}else if(this.tabCurrents == 2){// 待审核
+							this.$api.navigateTo(`/pages/relation/ordinary/examine-detail?id=${payment.id}`)
+						}else if(this.tabCurrents == 3){// 审核通过
+							this.$api.navigateTo(`/pages/relation/ordinary/detail?id=${payment.id}`)
+						}
 						break
 					case 2:// 2：非订单 
-						this.$api.navigateTo(`/pages/relation/ordinary/index?id=${payment.id}`)
+						this.$api.navigateTo(`/pages/relation/nonorder/detail?id=${payment.id}`)
 						break
 					case 3:// 3：返佣 
-						this.$api.navigateTo(`/pages/relation/return/index?id=${payment.id}`)
+						if(this.tabCurrents == 1 || this.tabCurrents == 0){// 返佣待确认
+							this.$api.navigateTo(`/pages/relation/return/index?id=${payment.id}`)
+						}else if(this.tabCurrents == 2){
+							this.$api.navigateTo(`/pages/relation/return/detail?id=${payment.id}`)
+						}
 						break
 					case 4:// 4：供应商退款
-						this.$api.navigateTo(`/pages/relation/refund/index?id=${payment.id}`)
+						if(this.tabCurrents == 1 || this.tabCurrents == 0){// 返佣待确认
+							this.$api.navigateTo(`/pages/relation/refund/index?id=${payment.id}`)
+						}else if(this.tabCurrents == 2){
+							this.$api.navigateTo(`/pages/relation/refund/detail?id=${payment.id}`)
+						}
 						break
 						
 				}
@@ -941,8 +959,14 @@
 		}
 
 		.icon-fanhui {
+			display: block;
+			width: 38rpx;
+			height: 80rpx;
+			float: left;
+			text-align: left;
+			line-height: 80rpx;
 			font-size: 42rpx;
-			margin-right: 20rpx;
+			margin-right: 15rpx;
 		}
 
 		.icon-iconfonticonfontsousuo1 {
@@ -1046,7 +1070,7 @@
 		padding: 20rpx 20rpx;
 		background: #fff;
 		margin-bottom: 24rpx;
-		border-radius: 8rpx;
+		border-radius: 10rpx;
 		position: relative;
 
 		.list-icon {
@@ -1058,8 +1082,8 @@
 			font-size: 20rpx;
 			line-height: 60rpx;
 			position: absolute;
-			right: 40rpx;
-			top: 50rpx;
+			left: 350rpx;
+			top: 80rpx;
 			color: #dd524d;
 			z-index: 99;
 			transform: rotate(45deg);
@@ -1076,7 +1100,11 @@
 			position: absolute;
 			right: 0;
 			top: 0;
-			.icon-fenxiang {
+			background: transparent;
+			border-radius: 0;
+			border: 0;
+			margin: 0;
+			.iconfont {
 				font-size: 48rpx;
 				color: $color-system;
 			}
@@ -1112,7 +1140,7 @@
 					padding: 0 15rpx;
 					height: 40rpx;
 					line-height: 40rpx;
-					border-radius: 4rpx;
+					border-radius: 6rpx;
 					background: $btn-confirm;
 					font-size: $font-size-24;
 					text-align: center;
@@ -1127,9 +1155,11 @@
 			float: left;
 			font-size: $font-size-24;
 			line-height: 40rpx;
-			color: #999999;
+			color: #666666;
 			text-align: left;
-
+			.text{
+				color: #999999;
+			}
 			&.sms {
 				height: auto;
 			}

pages/collection/nosms.vue

@@ -384,8 +384,14 @@
 			font-family: '正楷';
 		}
 		.icon-fanhui {
+			display: block;
+			width: 38rpx;
+			height: 80rpx;
+			float: left;
+			text-align: left;
+			line-height: 80rpx;
 			font-size: 42rpx;
-			margin-right: 20rpx;
+			margin-right: 15rpx;
 		}
 	}	
 

pages/collection/sms.vue

@@ -6,7 +6,8 @@
 			:class="isCmcustomClass">
 			<view class="header-top" :style="{paddingTop:top+'px',lineHeight: CustomBar+30+'px'}"></view>
 			<view class="header-sit">
-				<text>款项识别</text>
+				<text class="iconfont icon-fanhui" @click.stop="checkedSms" v-if="receiptType == 2"></text>
+				<text class="header-sit-text">{{ receiptType == 1 ? '款项识别' : '无短信收款' }}</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)'}">
@@ -14,16 +15,16 @@
 		<view class="distinguish-section" :style="{top:CustomBar+'px',left:0+'px'}">
 			<view class="distinguish-section-conten">
 				<view class="section-top">
-					<view class="title">收款短信</view>
+					<view class="title" v-if="receiptType == 1">收款短信</view>
 					<view class="button" @click="toNoSms('/pages/collection/list')">
 						<text class="iconfont icon-wodedingdan"></text>
 						收款列表
 					</view>
 				</view>
-				<view class="section-textarea">
-					<textarea class="textarea" placeholder="收款短信内容..." :disabled="modal" v-model="textarea" @blur="onTextareaInput" />
+				<view class="section-textarea" v-if="receiptType == 1">
+					<textarea class="textarea" placeholder="收款短信内容..." :disabled="modal" v-model="params.smsContent" @blur="onTextareaInput" />
 				</view>
-				<template v-if="!isConfirm">
+				<template v-if="isConfirm">
 					<view class="section-rows">
 						<view class="rows-label">款项类型：</view>
 						<view class="rows-mains">
@@ -84,7 +85,7 @@
 						<view class="rows-mains">
 							<input
 								class="input"
-								v-model="params.amount"
+								v-model="params.receiptAmount"
 								@blur="changeNumber($event)"
 								type="number"
 								placeholder="请输入收款金额"
@@ -104,18 +105,25 @@
 							<input
 								class="input"
 								v-model="params.chargeValue"
+								@blur="chargeValueNumber($event)"
 								:disabled="!isCheckedCharge"
 								type="text"
 								placeholder="请输入手续费"
 							/>
 						</view>
 					</view>
+					<template v-if="receiptType == 2">
+						<view class="section-text">收款短信(备注,必填)</view>
+						<view class="section-textarea">
+							<textarea class="textarea" :disabled="modal" placeholder="请输入收款备注..." v-model="params.remarks" />
+						</view>
+					</template>
 				</template>
 			</view>
 			<view class="distinguish-button">
-				<view class="button" :disabled="isConfirm" :class="[isConfirm ? 'disabled':'']" @click="confirmDistinguish">收款</view>
+				<tui-button type="primary" :disabledGray="true" :disabled="disabled" :height="'80rpx'" :shadow="true" shape="circle" @click="confirmDistinguish">收款</tui-button>
 			</view>
-			<view class="distinguish-button-text" @click="toNoSms('/pages/collection/nosms')">无短信收款</view>
+			<view class="distinguish-button-text" @click="checkedNoSms" v-if="receiptType == 1">无短信收款</view>
 		</view>
 		<!-- 时间组件 -->
 		<tui-datetime
@@ -165,7 +173,7 @@
 					bgColor: '#D33020',
 					textColor: '#ffffff'
 				},
-				textarea: '',
+				receiptType:1, //收款方式 1 短信收款 2 无短信收款
 				infoData: {},
 				isCmcustomClass: 'left',
 				statistic_bg: statistic_bg2,
@@ -175,7 +183,7 @@
 				top: 0, //标题图标距离顶部距离
 				scrollH: 0, //滚动总高度
 				opcity: 1,
-				isConfirm: true,
+				isConfirm: false,
 				type: 7,
 				setDateTime: '',
 				startYear: 1980,
@@ -214,9 +222,10 @@
 				paymentTypeText: '普通款项', // 款项类型显示文案
 				banksTypeText: '建设银行-7297', // 款项类型显示文案
 				params: {
+					smsContent:'',
 					type: 1,
 					banksType: 1,
-					amount: '',
+					receiptAmount: '',
 					chargeValue: '',
 					remarks: '',
 					time: this.$api.getNowFormatDate()
@@ -254,20 +263,21 @@
 			},
 		},
 		computed: {
-			...mapState(['hasLogin', 'userInfo'])
+			disabled: function() {
+				let bool = true
+				if(this.receiptType == 1){
+					if ( this.params.smsContent || this.params.receiptAmount ) {
+						bool = false
+					}
+				}else{
+					if ( this.params.receiptAmount ) {
+						bool = false
+					}
+				}
+				return bool
+			}
 		},
 		methods: {
-			onTextareaInput(e){
-			   this.textarea = e.detail.value
-			   this.initInput()
-			},
-			initInput() {
-				if (this.textarea != '') {
-					this.isConfirm = false
-				} else {
-					this.isConfirm = true
-				}
-			},
 			bindPickerChange(type, e) {
 				// 选择选项
 				switch (type) {
@@ -293,8 +303,7 @@
 				this.params.time = event.result
 			},
 			confirmDistinguish() {
-				if(this.isConfirm){return}
-				if (this.params.amount == '') {
+				if (this.params.receiptAmount == '') {
 					this.$util.msg('请输入收款金额', 2000)
 					return
 				}
@@ -324,7 +333,7 @@
 			handleClick(e){
 				// 确认收款
 				if (e.index == 1) {
-					
+					this.$api.navigateTo('/pages/collection/detail')
 				}
 				this.modal = false
 			},
@@ -337,10 +346,40 @@
 			},
 			changeNumber(e) {
 				// 校验输入为数字
-				if (!this.$api.isNumber(e.detail.value)) {
-					this.params.amount = ''
+				this.params.receiptAmount = this.checkedNumberVal(e.detail.value)
+				console.log('receiptAmount',this.params.receiptAmount)
+			},
+			chargeValueNumber(e) {
+				// 校验输入为数字
+				this.params.chargeValue = this.checkedNumberVal(e.detail.value)
+				console.log('chargeValue',this.params.chargeValue)
+			},
+			checkedNoSms(){// 切换无短信收款
+				this.receiptType = 2
+				this.isConfirm = true
+			},
+			checkedSms(){// 切换款项识别
+				this.receiptType = 1
+				this.isConfirm = false
+			},
+			onTextareaInput(e){
+			   this.params.smsContent = e.detail.value
+			   if ( this.params.smsContent) {
+				    this.initInput()
+			   }
+			},
+			checkedNumberVal(val){// 校验是否输入的是数字
+				if (!this.$api.isNumber(val)) {
+					return ''
 				} else {
-					this.params.amount = e.detail.value
+					return val
+				}
+			},
+			initInput() {
+				if ( this.params.smsContent != '' ) {
+					this.isConfirm = true
+				} else {
+					this.isConfirm = false
 				}
 			},
 			toNoSms(url){
@@ -348,11 +387,11 @@
 			}
 		},
 		onPageScroll(e) { //实时获取到滚动的值
-			if (e.scrollTop > 30) {
-				this.isCmcustomClass = 'fiexd'
-			} else {
-				this.isCmcustomClass = 'left'
-			}
+			// if (e.scrollTop > 30) {
+			// 	this.isCmcustomClass = 'fiexd'
+			// } else {
+			// 	this.isCmcustomClass = 'left'
+			// }
 		},
 		onPullDownRefresh() {
 			setTimeout(() => {
@@ -400,16 +439,29 @@
 	}
 
 	.header-sit {
-		width: 200rpx;
+		width: 100%;
+		box-sizing: border-box;
 		height: 80rpx;
 		line-height: 80rpx;
 		box-sizing: border-box;
-		padding-left: 40rpx;
-		text-align: left;
-		font-size: $font-size-40;
-		color: #FFFFFF;
-		font-weight: 600;
-		font-family: '正楷';
+		padding: 0 24rpx;
+		color: #ffffff;
+		.header-sit-text {
+			text-align: left;
+			font-size: $font-size-40;
+			font-weight: 600;
+			font-family: '正楷';
+		}
+		.icon-fanhui {
+			display: block;
+			width: 38rpx;
+			height: 80rpx;
+			float: left;
+			text-align: left;
+			line-height: 80rpx;
+			font-size: 42rpx;
+			margin-right: 15rpx;
+		}
 	}
 
 	.mine {
@@ -421,7 +473,7 @@
 	.distinguish-section {
 		width: 100%;
 		position: absolute;
-		padding: 40rpx 20rpx;
+		padding: 20rpx 20rpx;
 		box-sizing: border-box;
 	}
 
@@ -441,8 +493,12 @@
 			.title {
 				float: left;
 				line-height: 66rpx;
-				font-size: $font-size-24;
+				font-size: $font-size-28;
 				color: #333333;
+				.iconfont {
+					color: #666666;
+					font-size: $font-size-44;
+				}
 			}
 
 			.button {
@@ -502,6 +558,13 @@
 				font-size: $font-size-32;
 			}
 		}
+		.section-text {
+			width: 100%;
+			height: 66rpx;
+			line-height: 66rpx;
+			font-size: $font-size-24;
+			color: #333333;
+		}
 		.section-textarea {
 			width: 100%;
 			height: 200rpx;

pages/relation/nonorder/detail.vue

@@ -0,0 +1,702 @@
+<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>
+		<view class="distinguish-section" :style="{ top: CustomBar - 14 + 'px', left: 0 + 'px' }">
+			<view class="distinguish-section-conten">
+				<view class="section-top">
+					<view class="title">
+						<view class="list-title-tip">
+							<text class="badges">{{ payment.sourceType | formatSourceType }}款</text>
+						</view>
+						<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-b">
+						<view class="list-title-b-item "> 
+							收款金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }} </text>
+						</view>
+						<view class="list-title-b-item "> 
+							收款类型：<text class="text">{{ payment.receiptType }} </text>
+						</view>
+					</view>
+					<view class="list-title-b">
+						收款时间：<text class="text">{{ payment.receiptDate }}</text>
+					</view>
+					<template v-if="payment.smsContent">
+						<view class="list-title-b">收款短信：</view>
+						<view class="list-title-b sms">
+							<text class="text">{{ payment.smsContent }}</text>
+						</view>
+					</template>
+					<view class="list-icon">无人确认</view>
+				</view>
+				<view class="section-title">关联订单</view>
+				<view class="section-mid">
+					<view class="list-title">
+						<view class="list-title-t">
+							<view class="list-title-tip">
+								<text class="badges">{{ payment.order.orderType | formatOrderType }}</text>
+							</view>
+							<view class="list-title-num">{{
+								payment.order.state | StateExpFormat
+							}}</view>
+						</view>
+						<view class="list-title-b">
+							订单编号：<text class="text">{{ payment.order.number }} ( {{ payment.order.orderId }} )</text>
+						</view>
+						<view class="list-title-b">
+							下单日期：<text class="text">{{ payment.order.creatTime }}</text>
+						</view>
+						<view class="list-title-b">
+							客户名称：<text class="text">{{ payment.order.userName }}</text>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								订单金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+							<view class="list-title-b-item ">
+								余额抵扣：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								应收金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+							<view class="list-title-b-item ">
+								已收金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								剩余应收：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+							<view class="list-title-b-item ">
+								待审金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</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(payment.confirmType) }">{{ payment.confirmType | formatStateType }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="section-tips">注：款项和订单已确认关联,等待审核</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 wxLogin from '@/services/wxLogin.js'
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
+
+	export default {
+		data() {
+			return {
+				isIphoneX: this.$store.state.isIphoneX,
+				nvabarData: {
+					//顶部自定义导航
+					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
+					showSearch: 0,
+					title: '', // 导航栏 中间的标题
+					haveBack: false,
+					home: false,
+					textLeft: this.$store.state.isIphone,
+					bgColor: '#D33020',
+					textColor: '#ffffff'
+				},
+				payment: {
+					id: 6090,
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					receiptType: '广发银行0115',
+					receiptDate: '2022-02-15 10:58:25', // 收款时间
+					reviewDate: '2022-02-15 10:58:25', // 审核时间
+					smsContent: '【中信银行】您尾号0897的中信卡于05月29日14:42，二代支付存入人民币99.00元，当前余额为人民币13871.67元。',
+					confirmType: 1,
+					userName: '采美网络信息有限公司',
+					sourceType: 2,
+					state: 11,
+					isChecked: false,
+					order: {
+						orderId: 18751,
+						number: 'W164488903271223',
+						receiptAmount: 5000, //收款金额
+						associateAmount: 5000, //关联金额
+						orderType: 1, // 订单类型
+						creatTime: '2022-02-15 10:58:25', // 下单日期
+						userName: '采美网络信息有限公司',
+						state: 11, //订单状态
+					}
+				},
+				modalButton: [{
+						text: '取消',
+						type: 'gray',
+						plain: true //是否空心
+					},
+					{
+						text: '确认',
+						customStyle: {
+							color: '#fff',
+							bgColor: '#4688fa'
+						},
+						plain: false
+					}
+				],
+				params: {
+					type: 1,
+					banksType: 1,
+					amount: '',
+					chargeValue: '',
+					remarks: '',
+					time: this.$api.getNowFormatDate()
+				},
+				infoData: {},
+				isCmcustomClass: 'left',
+				CustomBar: this.CustomBar, // 顶部导航栏高度
+				height: 64, //header高度
+				top: 0, //标题图标距离顶部距离
+				scrollH: 0, //滚动总高度
+				opcity: 1,
+				isCheckedCharge: false,
+				contentModalTitle: '',
+				contentModalText: '', //操作文字提示语句
+				modal: false,
+			}
+		},
+		onLoad() {
+			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
+				}
+			})
+		},
+		filters: {
+			formatSourceType(value) {
+				switch (value) {
+					case 1:
+						return '订单'
+						break
+					case 2:
+						return '非订单'
+						break
+					case 3:
+						return '返佣'
+						break
+					case 4:
+						return '供应商退款'
+						break
+				}
+			},
+			formatOrderType(value) {
+				switch (value) {
+					case 1:
+						return '自主订单'
+						break
+					case 2:
+						return '协销订单'
+						break
+					case 3:
+						return '客服订单'
+						break
+				}
+			},
+			formatStateType(value) {
+				switch (value) {
+					case 0:
+						return '待确认'
+						break
+					case 1:
+						return '已确认'
+						break
+					case 2:
+						return '待审核'
+						break
+					case 3:
+						return '审核通过'
+						break
+				}
+			},
+			StateExpFormat(state) {
+				//订单状态文字和颜色
+				var HtmlStateText = '',
+					stateTextObject = {
+						0: '待确认',
+						4: '交易完成',
+						5: '订单完成',
+						6: '已关闭',
+						7: '交易全退',
+						77: '交易全退',
+						11: '待付款待发货',
+						12: '待付款部分发货',
+						13: '待付款已发货',
+						21: '部分付款待发货',
+						22: '部分付款部分发货',
+						23: '部分付款已发货',
+						31: '已付款待发货',
+						32: '已付款部分发货',
+						33: '已付款已发货',
+						111: '待付款待发货'
+					}
+				Object.keys(stateTextObject).forEach(function(key) {
+					if (key == state) {
+						HtmlStateText = stateTextObject[key]
+					}
+				})
+				return HtmlStateText
+			},
+			NumFormat: function(text) {
+				//处理金额
+				return Number(text).toFixed(2)
+			}
+		},
+		computed: {
+			...mapState(['hasLogin', 'userInfo'])
+		},
+		methods: {
+			bindPickerChange(type, e) {
+				// 选择选项
+				switch (type) {
+					case 1:
+						this.paymentTypeText = this.paymentActions[e.target.value].name
+						this.params.type = this.paymentActions[e.target.value].value
+						console.log('款项类型', this.paymentTypeText)
+						console.log('款项类型', this.params.type)
+						break
+					case 2:
+						this.banksTypeText = this.banksActions[e.target.value].name
+						this.params.banksType = this.banksActions[e.target.value].value
+						console.log('收款类型', this.params.banksType)
+						break
+				}
+			},
+			showTuiDateTime() {
+				this.$refs.dateTime.show()
+			},
+			confirmDistinguish() {
+				if (this.params.amount == '') {
+					this.$util.msg('请输入收款金额', 2000)
+					return
+				}
+				if (this.isCheckedCharge) {
+					if (this.params.chargeValue == '') {
+						this.$util.msg('请输入手续费', 2000)
+						return
+					}
+				}
+				if (this.params.remarks == '') {
+					this.$util.msg('请填写收款备注', 2000)
+					return
+				}
+				if (this.params.type == 1) {
+					this.contentModalTitle = '确定收款吗？'
+					this.contentModalText = '确认前请仔细检查各项数据是否正确，确认收款后将不能进行修改。' //操作文字提示语句
+				} else if (this.params.type == 2) {
+					this.contentModalTitle = ''
+					this.contentModalText = '确定返佣收款吗？' //操作文字提示语句
+				} else if (this.params.type == 3) {
+					this.contentModalTitle = ''
+					this.contentModalText = '确定供应商退款吗？' //操作文字提示语句
+				}
+				this.modal = true
+				console.log('收款')
+			},
+			handleClick(e) {
+				// 确认收款
+				if (e.index == 1) {
+					this.$api.navigateTo('/pages/collection/detail')
+				}
+				this.modal = false
+			},
+			hideMobel() {
+				this.modal = false
+			},
+			checkedCharge() {
+				// 勾选手续费
+				this.isCheckedCharge = !this.isCheckedCharge
+			},
+			changeNumber(e) {
+				// 校验输入为数字
+				if (!this.$api.isNumber(e.detail.value)) {
+					this.params.amount = ''
+				} else {
+					this.params.amount = e.detail.value
+				}
+			},
+			toNoSms(url) {
+				this.$api.navigateTo(url)
+			},
+			formatColor(state) {
+				//设置邀请码状态亚瑟
+				let stateColor = '',
+					stateColorObject = {
+						0: '#f0ad4e',
+						1: '#4cd964',
+						2: '#dd524d',
+						3: '#007aff'
+					}
+				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.initSsoMemberCollectionList()
+				uni.stopPullDownRefresh()
+			}, 200)
+		},
+		onShow() {
+			if (this.hasLogin) {
+				this.GetDataInfo()
+			}
+		}
+	}
+</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;
+		padding: 0 24rpx;
+		color: #ffffff;
+
+		.header-sit-text {
+			text-align: left;
+			font-size: $font-size-40;
+			font-weight: 600;
+			font-family: '正楷';
+		}
+
+		.icon-fanhui {
+			display: block;
+			width: 38rpx;
+			height: 80rpx;
+			float: left;
+			text-align: left;
+			line-height: 80rpx;
+			font-size: 42rpx;
+			margin-right: 15rpx;
+		}
+
+		.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;
+				.list-title-tip {
+					float: left;
+					margin-right: 15rpx;
+					.badges {
+						display: block;
+						float: left;
+						padding: 0 15rpx;
+						height: 40rpx;
+						line-height: 40rpx;
+						border-radius: 4rpx;
+						background: $btn-confirm;
+						font-size: $font-size-24;
+						text-align: center;
+						color: #ffffff;
+					}
+				}
+				.title-text{
+					float: left;
+					line-height: 40rpx;
+					height: 40rpx;
+					color: #333333;
+					text-align: left;
+					font-weight: 600;
+				}
+			}
+
+			.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-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: 120rpx;
+					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;
+			.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-num {
+						float: left;
+						text-align: left;
+						color: #e15616;
+						margin-left: 30rpx;
+						line-height: 40rpx;
+					}
+
+					.list-title-tip {
+						float: left;
+
+						.badges {
+							display: block;
+							float: left;
+							padding: 0 15rpx;
+							height: 40rpx;
+							line-height: 40rpx;
+							border-radius: 4rpx;
+							background: radial-gradient(circle, rgba(255, 180, 39, 1) 0%, rgba(245, 142, 77, 1) 100%);
+							font-size: $font-size-24;
+							text-align: center;
+							color: #ffffff;
+						}
+					}
+				}
+
+				.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;
+					}
+				}
+			}
+		}
+		.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>

pages/relation/order/detail.vue

@@ -29,42 +29,58 @@
 				</view>
 				<view class="section-mid">
 					<view class="list-title">
-						<view class="list-title-b">订单编号：{{ payment.number }} ( {{ payment.id }} )</view>
-						<view class="list-title-b">下单日期：{{ payment.receiptDate }}</view>
-						<view class="list-title-b">客户名称：{{ payment.userName }}</view>
+						<view class="list-title-b">
+							<text class="text">订单编号：{{ payment.number }} ( {{ payment.id }} )</text>
+						</view>
+						<view class="list-title-b">
+							<text class="text">下单日期：{{ payment.receiptDate }}</text>
+						</view>
+						<view class="list-title-b">
+							客户名称：<text class="text">{{ payment.userName }}</text>
+						</view>
 						<view class="list-title-b">
 							<view class="list-title-b-item ">
-								订单金额：￥{{ payment.receiptAmount | NumFormat }}
+								订单金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 							</view>
 							<view class="list-title-b-item ">
-								余额抵扣：￥{{ payment.receiptAmount | NumFormat }}
+								余额抵扣：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 							</view>
 						</view>
 						<view class="list-title-b">
 							<view class="list-title-b-item ">
-								应收金额：￥{{ payment.receiptAmount | NumFormat }}
+								应收金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 							</view>
 							<view class="list-title-b-item ">
-								已收金额：￥{{ payment.receiptAmount | NumFormat }}
+								已收金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 							</view>
 						</view>
 						<view class="list-title-b">
 							<view class="list-title-b-item ">
-								剩余应收：￥{{ payment.receiptAmount | NumFormat }}
+								剩余应收：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 							</view>
 							<view class="list-title-b-item ">
-								待审金额：￥{{ payment.receiptAmount | NumFormat }}
+								待审金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 							</view>
 						</view>
-						<view class="list-title-b">经理折扣：￥{{ payment.receiptAmount }}(原￥0.00，折扣取消￥0.00)</view>
-						<view class="list-title-b">退货退款：￥{{ payment.receiptAmount }}(原￥0.00，折扣取消￥0.00)</view>
+						<view class="list-title-b">
+							经理折扣：<text class="text">￥{{ payment.receiptAmount }}(原￥0.00，折扣取消￥0.00)</text>
+						</view>
+						<view class="list-title-b">
+							退货退款：<text class="text">￥{{ payment.receiptAmount }}(原￥0.00，折扣取消￥0.00)</text>
+						</view>
 					</view>
 				</view>
 				<view class="section-mid supper">
 					<view class="list-title supper">
-						<view class="list-title-b">子订单号(标识)：{{ payment.number }} ( {{ payment.id }} )</view>
-						<view class="list-title-b">供应商：{{ payment.userName }}</view>
-						<view class="list-title-b">订单金额：￥{{ payment.receiptAmount | NumFormat }}</view>
+						<view class="list-title-b">
+							子订单号(标识)：<text class="text">{{ payment.number }} ( {{ payment.id }} )</text>
+						</view>
+						<view class="list-title-b">
+							供应商：<text class="text">{{ payment.userName }}</text>
+						</view>
+						<view class="list-title-b">
+							订单金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
+						</view>
 					</view>	
 					<view class="list-goods">
 						<view class="list-goods-item" v-for="(product, index) in payment.productList" :key="index">
@@ -462,8 +478,14 @@
 		}
 	
 		.icon-fanhui {
+			display: block;
+			width: 38rpx;
+			height: 80rpx;
+			float: left;
+			text-align: left;
+			line-height: 80rpx;
 			font-size: 42rpx;
-			margin-right: 10rpx;
+			margin-right: 15rpx;
 		}
 	
 		.icon-iconfonticonfontsousuo1 {
@@ -590,7 +612,7 @@
 								width: 100%;
 								line-height: 40rpx;
 								font-size: $font-size-24;
-								color: #999999;
+								color: #333333;
 								text-align: left;
 								text-overflow: ellipsis;
 								overflow: hidden;
@@ -630,8 +652,11 @@
 					float: left;
 					font-size: $font-size-24;
 					line-height: 50rpx;
-					color: #999999;
+					color: #666666;
 					text-align: left;
+					.text{
+						color: #999999;
+					}
 					.list-title-b-item {
 						width: 50%;
 						height: 100%;

pages/relation/ordinary/detail.vue

@@ -0,0 +1,689 @@
+<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>
+		<view class="distinguish-section" :style="{ top: CustomBar - 14 + 'px', left: 0 + 'px' }">
+			<view class="distinguish-section-conten">
+				<view class="section-top">
+					<view class="title">
+						<view class="list-title-tip">
+							<text class="badges">{{ payment.sourceType | formatSourceType }}款</text>
+						</view>
+						<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-b">
+						<view class="list-title-b-item "> 
+							收款金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
+						</view>
+						<view class="list-title-b-item "> 
+							收款类型：<text class="text">{{ payment.receiptType }}</text>
+						</view>
+					</view>
+					<view class="list-title-b">
+						款时间：<text class="text">{{ payment.receiptDate }}</text>
+					</view>
+					<template v-if="payment.smsContent">
+						<view class="list-title-b">收款短信：</view>
+						<view class="list-title-b sms">
+							<text class="text">{{ payment.smsContent }}</text>
+						</view>
+					</template>
+				</view>
+				<view class="section-title">关联订单</view>
+				<view class="section-mid">
+					<view class="list-title">
+						<view class="list-title-t">
+							<view class="list-title-tip">
+								<text class="badges">{{ payment.order.orderType | formatOrderType }}</text>
+							</view>
+							<view class="list-title-num">{{
+								payment.order.state | StateExpFormat
+							}}</view>
+						</view>
+						<view class="list-title-b">
+							订单编号：<text class="text">{{ payment.order.number }} ( {{ payment.order.orderId }} )</text>
+						</view>
+						<view class="list-title-b">
+							下单日期：<text class="text">{{ payment.order.creatTime }}</text>
+						</view>
+						<view class="list-title-b">
+							客户名称：<text class="text">{{ payment.order.userName }}</text>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								订单金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+							<view class="list-title-b-item ">
+								余额抵扣：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								应收金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+							<view class="list-title-b-item ">
+								已收金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								剩余应收：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+							<view class="list-title-b-item ">
+								待审金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</view>
+						<view class="list-title-b">
+							经理折扣：<text class="text">￥{{ payment.receiptAmount }}(原￥0.00，折扣取消￥0.00)</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(payment.confirmType) }">{{ payment.confirmType | formatStateType }}(待审核)</text>
+						</view>
+						<view class="list-title-b">确认人：<text class="text">正大单</text></view>
+						<view class="list-title-b">确认时间：<text class="text">{{ payment.receiptDate }}</text></view>
+						<view class="list-title-b">审核人：<text class="text">正大单</text></view>
+						<view class="list-title-b">审核时间：<text class="text">{{ payment.receiptDate }}</text></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 wxLogin from '@/services/wxLogin.js'
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
+
+	export default {
+		data() {
+			return {
+				isIphoneX: this.$store.state.isIphoneX,
+				nvabarData: {
+					//顶部自定义导航
+					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
+					showSearch: 0,
+					title: '', // 导航栏 中间的标题
+					haveBack: false,
+					home: false,
+					textLeft: this.$store.state.isIphone,
+					bgColor: '#D33020',
+					textColor: '#ffffff'
+				},
+				payment: {
+					id: 6090,
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					receiptType: '广发银行0115',
+					receiptDate: '2022-02-15 10:58:25', // 收款时间
+					reviewDate: '2022-02-15 10:58:25', // 审核时间
+					smsContent: '【中信银行】您尾号0897的中信卡于05月29日14:42，二代支付存入人民币99.00元，当前余额为人民币13871.67元。',
+					confirmType: 3,
+					userName: '采美网络信息有限公司',
+					sourceType: 1,
+					state: 11,
+					isChecked: false,
+					order: {
+						orderId: 18751,
+						number: 'W164488903271223',
+						receiptAmount: 5000, //收款金额
+						associateAmount: 5000, //关联金额
+						orderType: 1, // 订单类型
+						creatTime: '2022-02-15 10:58:25', // 下单日期
+						userName: '采美网络信息有限公司',
+						state: 11, //订单状态
+					}
+				},
+				modalButton: [{
+						text: '取消',
+						type: 'gray',
+						plain: true //是否空心
+					},
+					{
+						text: '确认',
+						customStyle: {
+							color: '#fff',
+							bgColor: '#4688fa'
+						},
+						plain: false
+					}
+				],
+				params: {
+					type: 1,
+					banksType: 1,
+					amount: '',
+					chargeValue: '',
+					remarks: '',
+					time: this.$api.getNowFormatDate()
+				},
+				infoData: {},
+				isCmcustomClass: 'left',
+				CustomBar: this.CustomBar, // 顶部导航栏高度
+				height: 64, //header高度
+				top: 0, //标题图标距离顶部距离
+				scrollH: 0, //滚动总高度
+				opcity: 1,
+				isCheckedCharge: false,
+				contentModalTitle: '',
+				contentModalText: '', //操作文字提示语句
+				modal: false,
+			}
+		},
+		onLoad() {
+			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
+				}
+			})
+		},
+		filters: {
+			formatSourceType(value) {
+				switch (value) {
+					case 1:
+						return '订单'
+						break
+					case 2:
+						return '非订单'
+						break
+					case 3:
+						return '返佣'
+						break
+					case 4:
+						return '供应商退款'
+						break
+				}
+			},
+			formatOrderType(value) {
+				switch (value) {
+					case 1:
+						return '自主订单'
+						break
+					case 2:
+						return '协销订单'
+						break
+					case 3:
+						return '客服订单'
+						break
+				}
+			},
+			formatStateType(value) {
+				switch (value) {
+					case 0:
+						return '待确认'
+						break
+					case 1:
+						return '已确认'
+						break
+					case 2:
+						return '待审核'
+						break
+					case 3:
+						return '审核通过'
+						break
+				}
+			},
+			StateExpFormat(state) {
+				//订单状态文字和颜色
+				var HtmlStateText = '',
+					stateTextObject = {
+						0: '待确认',
+						4: '交易完成',
+						5: '订单完成',
+						6: '已关闭',
+						7: '交易全退',
+						77: '交易全退',
+						11: '待付款待发货',
+						12: '待付款部分发货',
+						13: '待付款已发货',
+						21: '部分付款待发货',
+						22: '部分付款部分发货',
+						23: '部分付款已发货',
+						31: '已付款待发货',
+						32: '已付款部分发货',
+						33: '已付款已发货',
+						111: '待付款待发货'
+					}
+				Object.keys(stateTextObject).forEach(function(key) {
+					if (key == state) {
+						HtmlStateText = stateTextObject[key]
+					}
+				})
+				return HtmlStateText
+			},
+			NumFormat: function(text) {
+				//处理金额
+				return Number(text).toFixed(2)
+			}
+		},
+		computed: {
+			...mapState(['hasLogin', 'userInfo'])
+		},
+		methods: {
+			bindPickerChange(type, e) {
+				// 选择选项
+				switch (type) {
+					case 1:
+						this.paymentTypeText = this.paymentActions[e.target.value].name
+						this.params.type = this.paymentActions[e.target.value].value
+						console.log('款项类型', this.paymentTypeText)
+						console.log('款项类型', this.params.type)
+						break
+					case 2:
+						this.banksTypeText = this.banksActions[e.target.value].name
+						this.params.banksType = this.banksActions[e.target.value].value
+						console.log('收款类型', this.params.banksType)
+						break
+				}
+			},
+			showTuiDateTime() {
+				this.$refs.dateTime.show()
+			},
+			confirmDistinguish() {
+				if (this.params.amount == '') {
+					this.$util.msg('请输入收款金额', 2000)
+					return
+				}
+				if (this.isCheckedCharge) {
+					if (this.params.chargeValue == '') {
+						this.$util.msg('请输入手续费', 2000)
+						return
+					}
+				}
+				if (this.params.remarks == '') {
+					this.$util.msg('请填写收款备注', 2000)
+					return
+				}
+				if (this.params.type == 1) {
+					this.contentModalTitle = '确定收款吗？'
+					this.contentModalText = '确认前请仔细检查各项数据是否正确，确认收款后将不能进行修改。' //操作文字提示语句
+				} else if (this.params.type == 2) {
+					this.contentModalTitle = ''
+					this.contentModalText = '确定返佣收款吗？' //操作文字提示语句
+				} else if (this.params.type == 3) {
+					this.contentModalTitle = ''
+					this.contentModalText = '确定供应商退款吗？' //操作文字提示语句
+				}
+				this.modal = true
+				console.log('收款')
+			},
+			handleClick(e) {
+				// 确认收款
+				if (e.index == 1) {
+					this.$api.navigateTo('/pages/collection/detail')
+				}
+				this.modal = false
+			},
+			hideMobel() {
+				this.modal = false
+			},
+			checkedCharge() {
+				// 勾选手续费
+				this.isCheckedCharge = !this.isCheckedCharge
+			},
+			changeNumber(e) {
+				// 校验输入为数字
+				if (!this.$api.isNumber(e.detail.value)) {
+					this.params.amount = ''
+				} else {
+					this.params.amount = e.detail.value
+				}
+			},
+			toNoSms(url) {
+				this.$api.navigateTo(url)
+			},
+			formatColor(state) {
+				//设置邀请码状态亚瑟
+				let stateColor = '',
+					stateColorObject = {
+						0: '#f0ad4e',
+						1: '#4cd964',
+						2: '#dd524d',
+						3: '#007aff'
+					}
+				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.initSsoMemberCollectionList()
+				uni.stopPullDownRefresh()
+			}, 200)
+		},
+		onShow() {
+			if (this.hasLogin) {
+				this.GetDataInfo()
+			}
+		}
+	}
+</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;
+		padding: 0 24rpx;
+		color: #ffffff;
+
+		.header-sit-text {
+			text-align: left;
+			font-size: $font-size-40;
+			font-weight: 600;
+			font-family: '正楷';
+		}
+
+		.icon-fanhui {
+			display: block;
+			width: 38rpx;
+			height: 80rpx;
+			float: left;
+			text-align: left;
+			line-height: 80rpx;
+			font-size: 42rpx;
+			margin-right: 15rpx;
+		}
+
+		.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;
+				.list-title-tip {
+					float: left;
+					margin-right: 15rpx;
+					.badges {
+						display: block;
+						float: left;
+						padding: 0 15rpx;
+						height: 40rpx;
+						line-height: 40rpx;
+						border-radius: 4rpx;
+						background: $btn-confirm;
+						font-size: $font-size-24;
+						text-align: center;
+						color: #ffffff;
+					}
+				}
+				.title-text{
+					float: left;
+					line-height: 40rpx;
+					height: 40rpx;
+					color: #333333;
+					text-align: left;
+					font-weight: 600;
+				}
+			}
+
+			.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-b {
+				width: 100%;
+				height: 44rpx;
+				float: left;
+				font-size: $font-size-24;
+				line-height: 44rpx;
+				color: #999999;
+				text-align: left;
+				.text{
+					color: #999999;
+				}
+				.list-title-b-item {
+					width: 50%;
+					height: 100%;
+					float: left;
+				}
+				&.sms {
+					height: 120rpx;
+					padding: 10rpx;
+					border-radius: 4rpx;
+					background: #F7F7F7;
+				}
+			}
+		}
+
+		.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;
+			.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-num {
+						float: left;
+						text-align: left;
+						color: #e15616;
+						margin-left: 30rpx;
+						line-height: 40rpx;
+					}
+
+					.list-title-tip {
+						float: left;
+
+						.badges {
+							display: block;
+							float: left;
+							padding: 0 15rpx;
+							height: 40rpx;
+							line-height: 40rpx;
+							border-radius: 4rpx;
+							background: radial-gradient(circle, rgba(255, 180, 39, 1) 0%, rgba(245, 142, 77, 1) 100%);
+							font-size: $font-size-24;
+							text-align: center;
+							color: #ffffff;
+						}
+					}
+				}
+
+				.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;
+					}
+				}
+			}
+		}
+		.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>

pages/relation/ordinary/examine-detail.vue

@@ -0,0 +1,708 @@
+<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>
+		<view class="distinguish-section" :style="{ top: CustomBar - 14 + 'px', left: 0 + 'px' }">
+			<view class="distinguish-section-conten">
+				<view class="section-top">
+					<view class="title">
+						<view class="list-title-tip">
+							<text class="badges">{{ payment.sourceType | formatSourceType }}款</text>
+						</view>
+						<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-b">
+						<view class="list-title-b-item "> 
+							收款金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }} </text>
+						</view>
+						<view class="list-title-b-item "> 
+							收款类型：<text class="text">{{ payment.receiptType }} </text>
+						</view>
+					</view>
+					<view class="list-title-b">
+						收款时间：<text class="text">{{ payment.receiptDate }}</text>
+					</view>
+					<template v-if="payment.smsContent">
+						<view class="list-title-b">收款短信：</view>
+						<view class="list-title-b sms">
+							<text class="text">{{ payment.smsContent }}</text>
+						</view>
+					</template>
+					<view class="list-icon">无人确认</view>
+				</view>
+				<view class="section-title">关联订单</view>
+				<view class="section-mid">
+					<view class="list-title">
+						<view class="list-title-t">
+							<view class="list-title-tip">
+								<text class="badges">{{ payment.order.orderType | formatOrderType }}</text>
+							</view>
+							<view class="list-title-num">{{
+								payment.order.state | StateExpFormat
+							}}</view>
+						</view>
+						<view class="list-title-b">
+							订单编号：<text class="text">{{ payment.order.number }} ( {{ payment.order.orderId }} )</text>
+						</view>
+						<view class="list-title-b">
+							下单日期：<text class="text">{{ payment.order.creatTime }}</text>
+						</view>
+						<view class="list-title-b">
+							客户名称：<text class="text">{{ payment.order.userName }}</text>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								订单金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+							<view class="list-title-b-item ">
+								余额抵扣：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								应收金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+							<view class="list-title-b-item ">
+								已收金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								剩余应收：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+							<view class="list-title-b-item ">
+								待审金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</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(payment.confirmType) }">{{ payment.confirmType | formatStateType }}(待审核)</text>
+						</view>
+						<view class="list-title-b">确认人：<text class="text">正大单</text></view>
+						<view class="list-title-b">确认时间：<text class="text">{{ payment.receiptDate }}</text></view>
+					</view>
+				</view>
+				<view class="section-tips">注：款项和订单已确认关联,等待审核</view>
+			</view>
+		</view>
+		<view class="distinguish-button" :style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }">
+			<view class="button cancel" @click="confirmDistinguish">不通过</view>
+			<view class="button confirm" @click="confirmDistinguish">通过</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 wxLogin from '@/services/wxLogin.js'
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
+
+	export default {
+		data() {
+			return {
+				isIphoneX: this.$store.state.isIphoneX,
+				nvabarData: {
+					//顶部自定义导航
+					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
+					showSearch: 0,
+					title: '', // 导航栏 中间的标题
+					haveBack: false,
+					home: false,
+					textLeft: this.$store.state.isIphone,
+					bgColor: '#D33020',
+					textColor: '#ffffff'
+				},
+				payment: {
+					id: 6090,
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					receiptType: '广发银行0115',
+					receiptDate: '2022-02-15 10:58:25', // 收款时间
+					reviewDate: '2022-02-15 10:58:25', // 审核时间
+					smsContent: '【中信银行】您尾号0897的中信卡于05月29日14:42，二代支付存入人民币99.00元，当前余额为人民币13871.67元。',
+					confirmType: 1,
+					userName: '采美网络信息有限公司',
+					sourceType: 1,
+					state: 11,
+					isChecked: false,
+					order: {
+						orderId: 18751,
+						number: 'W164488903271223',
+						receiptAmount: 5000, //收款金额
+						associateAmount: 5000, //关联金额
+						orderType: 1, // 订单类型
+						creatTime: '2022-02-15 10:58:25', // 下单日期
+						userName: '采美网络信息有限公司',
+						state: 11, //订单状态
+					}
+				},
+				modalButton: [{
+						text: '取消',
+						type: 'gray',
+						plain: true //是否空心
+					},
+					{
+						text: '确认',
+						customStyle: {
+							color: '#fff',
+							bgColor: '#4688fa'
+						},
+						plain: false
+					}
+				],
+				params: {
+					type: 1,
+					banksType: 1,
+					amount: '',
+					chargeValue: '',
+					remarks: '',
+					time: this.$api.getNowFormatDate()
+				},
+				infoData: {},
+				isCmcustomClass: 'left',
+				CustomBar: this.CustomBar, // 顶部导航栏高度
+				height: 64, //header高度
+				top: 0, //标题图标距离顶部距离
+				scrollH: 0, //滚动总高度
+				opcity: 1,
+				isCheckedCharge: false,
+				contentModalTitle: '',
+				contentModalText: '', //操作文字提示语句
+				modal: false,
+			}
+		},
+		onLoad() {
+			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
+				}
+			})
+		},
+		filters: {
+			formatSourceType(value) {
+				switch (value) {
+					case 1:
+						return '订单'
+						break
+					case 2:
+						return '非订单'
+						break
+					case 3:
+						return '返佣'
+						break
+					case 4:
+						return '供应商退款'
+						break
+				}
+			},
+			formatOrderType(value) {
+				switch (value) {
+					case 1:
+						return '自主订单'
+						break
+					case 2:
+						return '协销订单'
+						break
+					case 3:
+						return '客服订单'
+						break
+				}
+			},
+			formatStateType(value) {
+				switch (value) {
+					case 0:
+						return '待确认'
+						break
+					case 1:
+						return '已确认'
+						break
+					case 2:
+						return '待审核'
+						break
+					case 3:
+						return '审核通过'
+						break
+				}
+			},
+			StateExpFormat(state) {
+				//订单状态文字和颜色
+				var HtmlStateText = '',
+					stateTextObject = {
+						0: '待确认',
+						4: '交易完成',
+						5: '订单完成',
+						6: '已关闭',
+						7: '交易全退',
+						77: '交易全退',
+						11: '待付款待发货',
+						12: '待付款部分发货',
+						13: '待付款已发货',
+						21: '部分付款待发货',
+						22: '部分付款部分发货',
+						23: '部分付款已发货',
+						31: '已付款待发货',
+						32: '已付款部分发货',
+						33: '已付款已发货',
+						111: '待付款待发货'
+					}
+				Object.keys(stateTextObject).forEach(function(key) {
+					if (key == state) {
+						HtmlStateText = stateTextObject[key]
+					}
+				})
+				return HtmlStateText
+			},
+			NumFormat: function(text) {
+				//处理金额
+				return Number(text).toFixed(2)
+			}
+		},
+		computed: {
+			...mapState(['hasLogin', 'userInfo'])
+		},
+		methods: {
+			bindPickerChange(type, e) {
+				// 选择选项
+				switch (type) {
+					case 1:
+						this.paymentTypeText = this.paymentActions[e.target.value].name
+						this.params.type = this.paymentActions[e.target.value].value
+						console.log('款项类型', this.paymentTypeText)
+						console.log('款项类型', this.params.type)
+						break
+					case 2:
+						this.banksTypeText = this.banksActions[e.target.value].name
+						this.params.banksType = this.banksActions[e.target.value].value
+						console.log('收款类型', this.params.banksType)
+						break
+				}
+			},
+			showTuiDateTime() {
+				this.$refs.dateTime.show()
+			},
+			confirmDistinguish() {
+				if (this.params.amount == '') {
+					this.$util.msg('请输入收款金额', 2000)
+					return
+				}
+				if (this.isCheckedCharge) {
+					if (this.params.chargeValue == '') {
+						this.$util.msg('请输入手续费', 2000)
+						return
+					}
+				}
+				if (this.params.remarks == '') {
+					this.$util.msg('请填写收款备注', 2000)
+					return
+				}
+				if (this.params.type == 1) {
+					this.contentModalTitle = '确定收款吗？'
+					this.contentModalText = '确认前请仔细检查各项数据是否正确，确认收款后将不能进行修改。' //操作文字提示语句
+				} else if (this.params.type == 2) {
+					this.contentModalTitle = ''
+					this.contentModalText = '确定返佣收款吗？' //操作文字提示语句
+				} else if (this.params.type == 3) {
+					this.contentModalTitle = ''
+					this.contentModalText = '确定供应商退款吗？' //操作文字提示语句
+				}
+				this.modal = true
+				console.log('收款')
+			},
+			handleClick(e) {
+				// 确认收款
+				if (e.index == 1) {
+					this.$api.navigateTo('/pages/collection/detail')
+				}
+				this.modal = false
+			},
+			hideMobel() {
+				this.modal = false
+			},
+			checkedCharge() {
+				// 勾选手续费
+				this.isCheckedCharge = !this.isCheckedCharge
+			},
+			changeNumber(e) {
+				// 校验输入为数字
+				if (!this.$api.isNumber(e.detail.value)) {
+					this.params.amount = ''
+				} else {
+					this.params.amount = e.detail.value
+				}
+			},
+			toNoSms(url) {
+				this.$api.navigateTo(url)
+			},
+			formatColor(state) {
+				//设置邀请码状态亚瑟
+				let stateColor = '',
+					stateColorObject = {
+						0: '#f0ad4e',
+						1: '#4cd964',
+						2: '#dd524d',
+						3: '#007aff'
+					}
+				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.initSsoMemberCollectionList()
+				uni.stopPullDownRefresh()
+			}, 200)
+		},
+		onShow() {
+			if (this.hasLogin) {
+				this.GetDataInfo()
+			}
+		}
+	}
+</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;
+		padding: 0 24rpx;
+		color: #ffffff;
+
+		.header-sit-text {
+			text-align: left;
+			font-size: $font-size-40;
+			font-weight: 600;
+			font-family: '正楷';
+		}
+
+		.icon-fanhui {
+			display: block;
+			width: 38rpx;
+			height: 80rpx;
+			float: left;
+			text-align: left;
+			line-height: 80rpx;
+			font-size: 42rpx;
+			margin-right: 15rpx;
+		}
+
+		.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;
+				.list-title-tip {
+					float: left;
+					margin-right: 15rpx;
+					.badges {
+						display: block;
+						float: left;
+						padding: 0 15rpx;
+						height: 40rpx;
+						line-height: 40rpx;
+						border-radius: 4rpx;
+						background: $btn-confirm;
+						font-size: $font-size-24;
+						text-align: center;
+						color: #ffffff;
+					}
+				}
+				.title-text{
+					float: left;
+					line-height: 40rpx;
+					height: 40rpx;
+					color: #333333;
+					text-align: left;
+					font-weight: 600;
+				}
+			}
+
+			.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-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: 120rpx;
+					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;
+			.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-num {
+						float: left;
+						text-align: left;
+						color: #e15616;
+						margin-left: 30rpx;
+						line-height: 40rpx;
+					}
+
+					.list-title-tip {
+						float: left;
+
+						.badges {
+							display: block;
+							float: left;
+							padding: 0 15rpx;
+							height: 40rpx;
+							line-height: 40rpx;
+							border-radius: 4rpx;
+							background: radial-gradient(circle, rgba(255, 180, 39, 1) 0%, rgba(245, 142, 77, 1) 100%);
+							font-size: $font-size-24;
+							text-align: center;
+							color: #ffffff;
+						}
+					}
+				}
+
+				.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;
+					}
+				}
+			}
+		}
+		.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>

pages/relation/ordinary/index.vue

@@ -32,13 +32,21 @@
 						}}</view>
 					</view>
 					<view class="list-title-b">
-						<view class="list-title-b-item "> 收款金额：￥{{ paymentInfo.receiptAmount | NumFormat }} </view>
-						<view class="list-title-b-item "> 收款类型：{{ paymentInfo.payType }} </view>
+						<view class="list-title-b-item "> 
+							收款金额：<text class="text">￥{{ paymentInfo.receiptAmount | NumFormat }} </text>
+						</view>
+						<view class="list-title-b-item "> 
+							收款类型：<text class="text">{{ paymentInfo.payType }}</text>
+						</view>
+					</view>
+					<view class="list-title-b">
+						收款时间：<text class="text">{{ paymentInfo.receiptDate }}</text>
 					</view>
-					<view class="list-title-b">收款时间：{{ paymentInfo.receiptDate }}</view>
 					<template v-if="paymentInfo.smsContent">
 						<view class="list-title-b">收款短信：</view>
-						<view class="list-title-b sms">{{ paymentInfo.smsContent }}</view>
+						<view class="list-title-b sms">
+							<text class="text">{{ paymentInfo.smsContent }}</text>
+						</view>
 					</template>
 					<view class="list-icon">无人确认</view>
 				</view>
@@ -103,32 +111,40 @@
 									</view>
 									<view class="list-title-num">{{ payment.confirmType | StateExpFormat }}</view>
 								</view>
-								<view class="list-title-b">客户名称：{{ payment.userName }}</view>
-								<view class="list-title-b">订单编号：{{ payment.number }} ( {{ payment.id }} )</view>
-								<view class="list-title-b">下单日期：{{ payment.receiptDate }}</view>
+								<view class="list-title-b">
+									客户名称：<text class="text">{{ payment.userName }}</text>
+								</view>
+								<view class="list-title-b">
+									订单编号：<text class="text">{{ payment.number }} ( {{ payment.id }} )</text>
+								</view>
+								<view class="list-title-b">
+									下单日期：<text class="text">{{ payment.receiptDate }}</text>
+								</view>
 								<view class="list-title-b">
 									<view class="list-title-b-item ">
-										订单金额：￥{{ payment.receiptAmount | NumFormat }}
+										订单金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 									</view>
 									<view class="list-title-b-item ">
-										余额抵扣：￥{{ payment.receiptAmount | NumFormat }}
+										余额抵扣：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 									</view>
 								</view>
-								<view class="list-title-b">经理折扣：￥{{ payment.receiptAmount }}</view>
+								<view class="list-title-b">
+									经理折扣：<text class="text">￥{{ payment.receiptAmount }}</text>
+								</view>
 								<view class="list-title-b">
 									<view class="list-title-b-item ">
-										应收金额：￥{{ payment.receiptAmount | NumFormat }}
+										应收金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 									</view>
 									<view class="list-title-b-item ">
-										已收金额：￥{{ payment.receiptAmount | NumFormat }}
+										已收金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 									</view>
 								</view>
 								<view class="list-title-b">
 									<view class="list-title-b-item ">
-										剩余应收：￥{{ payment.receiptAmount | NumFormat }}
+										剩余应收：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 									</view>
 									<view class="list-title-b-item ">
-										待审金额：￥{{ payment.receiptAmount | NumFormat }}
+										待审金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 									</view>
 								</view>
 							</view>
@@ -964,8 +980,14 @@ page {
 		font-family: '正楷';
 	}
 	.icon-fanhui {
+		display: block;
+		width: 38rpx;
+		height: 80rpx;
+		float: left;
+		text-align: left;
+		line-height: 80rpx;
 		font-size: 42rpx;
-		margin-right: 10rpx;
+		margin-right: 15rpx;
 	}
 }
 
@@ -1062,8 +1084,11 @@ page {
 			float: left;
 			font-size: $font-size-24;
 			line-height: 40rpx;
-			color: #999999;
+			color: #666666;
 			text-align: left;
+			.text{
+				color: #999999;
+			}
 			.list-title-b-item {
 				width: 50%;
 				height: 100%;
@@ -1380,8 +1405,11 @@ page {
 		float: left;
 		font-size: $font-size-24;
 		line-height: 40rpx;
-		color: #999999;
+		color: #666666;
 		text-align: left;
+		.text{
+			color: #999999;
+		}
 		.list-title-b-item {
 			width: 50%;
 			height: 100%;

pages/relation/refund/detail.vue

@@ -0,0 +1,716 @@
+<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>
+		<view class="distinguish-section" :style="{ top: CustomBar - 14 + 'px', left: 0 + 'px' }">
+			<view class="distinguish-section-conten">
+				<view class="section-top">
+					<view class="title">
+						<view class="list-title-tip">
+							<text class="badges">{{ payment.sourceType | formatSourceType }}</text>
+						</view>
+						<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-b">
+						<view class="list-title-b-item ">
+							收款金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }} </text>
+						</view>
+						<view class="list-title-b-item "> 
+							收款类型：<text class="text">{{ payment.receiptType }} </text>
+						</view>
+					</view>
+					<view class="list-title-b">
+						收款时间：<text class="text">{{ payment.receiptDate }}</text>
+					</view>
+					<template v-if="payment.smsContent">
+						<view class="list-title-b">收款短信：</view>
+						<view class="list-title-b sms">
+							<text class="text">{{ payment.smsContent }}</text>
+						</view>
+					</template>
+					<view class="list-icon">无人确认</view>
+				</view>
+				<view class="section-title">关联订单</view>
+				<view class="section-mid">
+					<view class="list-title">
+						<view class="list-title-t">
+							<view class="list-title-tip">
+								<text class="badges">{{ payment.order.orderType | formatOrderType }}</text>
+							</view>
+							<view class="list-title-num">{{
+								payment.order.state | StateExpFormat
+							}}</view>
+						</view>
+						<view class="list-title-a">
+							<view class="list-title-a-text">
+								子订单编号：<text class="text">{{ payment.order.number }} ( {{ payment.order.orderId}} )</text>
+							</view>
+							<view class="list-title-a-text">
+								供应商名称：<text class="text">{{ payment.order.userName }}</text>
+							</view>
+							<view class="list-title-a-text">
+								订单金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</view>
+						<view class="list-title-b">
+							订单编号：<text class="text">{{ payment.order.number }} ( {{ payment.order.orderId }} )</text>
+						</view>
+						<view class="list-title-b">
+							下单日期：<text class="text">{{ payment.order.creatTime }}</text>
+						</view>
+						<view class="list-title-b">
+							客户名称：<text class="text">{{ payment.order.userName }}</text>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								订单金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+							<view class="list-title-b-item ">
+								已收金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</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(payment.confirmType) }">{{ payment.confirmType | formatStateType }}</text>
+						</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 wxLogin from '@/services/wxLogin.js'
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
+
+	export default {
+		data() {
+			return {
+				isIphoneX: this.$store.state.isIphoneX,
+				nvabarData: {
+					//顶部自定义导航
+					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
+					showSearch: 0,
+					title: '', // 导航栏 中间的标题
+					haveBack: false,
+					home: false,
+					textLeft: this.$store.state.isIphone,
+					bgColor: '#D33020',
+					textColor: '#ffffff'
+				},
+				payment: {
+					id: 6090,
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					receiptType: '广发银行0115',
+					receiptDate: '2022-02-15 10:58:25', // 收款时间
+					reviewDate: '2022-02-15 10:58:25', // 审核时间
+					smsContent: '【中信银行】您尾号0897的中信卡于05月29日14:42，二代支付存入人民币99.00元，当前余额为人民币13871.67元。',
+					confirmType: 1,
+					userName: '采美网络信息有限公司',
+					sourceType: 4,
+					state: 11,
+					isChecked: false,
+					order: {
+						orderId: 18751,
+						number: 'W164488903271223',
+						receiptAmount: 5000, //收款金额
+						associateAmount: 5000, //关联金额
+						orderType: 1, // 订单类型
+						creatTime: '2022-02-15 10:58:25', // 下单日期
+						userName: '采美网络信息有限公司',
+						state: 33, //订单状态
+					}
+				},
+				modalButton: [{
+						text: '取消',
+						type: 'gray',
+						plain: true //是否空心
+					},
+					{
+						text: '确认',
+						customStyle: {
+							color: '#fff',
+							bgColor: '#4688fa'
+						},
+						plain: false
+					}
+				],
+				params: {
+					type: 1,
+					banksType: 1,
+					amount: '',
+					chargeValue: '',
+					remarks: '',
+					time: this.$api.getNowFormatDate()
+				},
+				infoData: {},
+				isCmcustomClass: 'left',
+				CustomBar: this.CustomBar, // 顶部导航栏高度
+				height: 64, //header高度
+				top: 0, //标题图标距离顶部距离
+				scrollH: 0, //滚动总高度
+				opcity: 1,
+				isCheckedCharge: false,
+				contentModalTitle: '',
+				contentModalText: '', //操作文字提示语句
+				modal: false,
+			}
+		},
+		onLoad() {
+			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
+				}
+			})
+		},
+		filters: {
+			formatSourceType(value) {
+				switch (value) {
+					case 1:
+						return '订单'
+						break
+					case 2:
+						return '非订单'
+						break
+					case 3:
+						return '返佣'
+						break
+					case 4:
+						return '供应商退款'
+						break
+				}
+			},
+			formatOrderType(value) {
+				switch (value) {
+					case 1:
+						return '自主订单'
+						break
+					case 2:
+						return '协销订单'
+						break
+					case 3:
+						return '客服订单'
+						break
+				}
+			},
+			formatStateType(value) {
+				switch (value) {
+					case 0:
+						return '待确认'
+						break
+					case 1:
+						return '已确认'
+						break
+					case 2:
+						return '待审核'
+						break
+					case 3:
+						return '审核通过'
+						break
+				}
+			},
+			StateExpFormat(state) {
+				//订单状态文字和颜色
+				var HtmlStateText = '',
+					stateTextObject = {
+						0: '待确认',
+						4: '交易完成',
+						5: '订单完成',
+						6: '已关闭',
+						7: '交易全退',
+						77: '交易全退',
+						11: '待付款待发货',
+						12: '待付款部分发货',
+						13: '待付款已发货',
+						21: '部分付款待发货',
+						22: '部分付款部分发货',
+						23: '部分付款已发货',
+						31: '已付款待发货',
+						32: '已付款部分发货',
+						33: '已收款',
+						111: '待付款待发货'
+					}
+				Object.keys(stateTextObject).forEach(function(key) {
+					if (key == state) {
+						HtmlStateText = stateTextObject[key]
+					}
+				})
+				return HtmlStateText
+			},
+			NumFormat: function(text) {
+				//处理金额
+				return Number(text).toFixed(2)
+			}
+		},
+		computed: {
+			...mapState(['hasLogin', 'userInfo'])
+		},
+		methods: {
+			bindPickerChange(type, e) {
+				// 选择选项
+				switch (type) {
+					case 1:
+						this.paymentTypeText = this.paymentActions[e.target.value].name
+						this.params.type = this.paymentActions[e.target.value].value
+						console.log('款项类型', this.paymentTypeText)
+						console.log('款项类型', this.params.type)
+						break
+					case 2:
+						this.banksTypeText = this.banksActions[e.target.value].name
+						this.params.banksType = this.banksActions[e.target.value].value
+						console.log('收款类型', this.params.banksType)
+						break
+				}
+			},
+			showTuiDateTime() {
+				this.$refs.dateTime.show()
+			},
+			confirmDistinguish() {
+				if (this.params.amount == '') {
+					this.$util.msg('请输入收款金额', 2000)
+					return
+				}
+				if (this.isCheckedCharge) {
+					if (this.params.chargeValue == '') {
+						this.$util.msg('请输入手续费', 2000)
+						return
+					}
+				}
+				if (this.params.remarks == '') {
+					this.$util.msg('请填写收款备注', 2000)
+					return
+				}
+				if (this.params.type == 1) {
+					this.contentModalTitle = '确定收款吗？'
+					this.contentModalText = '确认前请仔细检查各项数据是否正确，确认收款后将不能进行修改。' //操作文字提示语句
+				} else if (this.params.type == 2) {
+					this.contentModalTitle = ''
+					this.contentModalText = '确定返佣收款吗？' //操作文字提示语句
+				} else if (this.params.type == 3) {
+					this.contentModalTitle = ''
+					this.contentModalText = '确定供应商退款吗？' //操作文字提示语句
+				}
+				this.modal = true
+				console.log('收款')
+			},
+			handleClick(e) {
+				// 确认收款
+				if (e.index == 1) {
+					this.$api.navigateTo('/pages/collection/detail')
+				}
+				this.modal = false
+			},
+			hideMobel() {
+				this.modal = false
+			},
+			checkedCharge() {
+				// 勾选手续费
+				this.isCheckedCharge = !this.isCheckedCharge
+			},
+			changeNumber(e) {
+				// 校验输入为数字
+				if (!this.$api.isNumber(e.detail.value)) {
+					this.params.amount = ''
+				} else {
+					this.params.amount = e.detail.value
+				}
+			},
+			toNoSms(url) {
+				this.$api.navigateTo(url)
+			},
+			formatColor(state) {
+				//设置邀请码状态亚瑟
+				let stateColor = '',
+					stateColorObject = {
+						0: '#f0ad4e',
+						1: '#4cd964',
+						2: '#dd524d',
+						3: '#007aff'
+					}
+				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.initSsoMemberCollectionList()
+				uni.stopPullDownRefresh()
+			}, 200)
+		},
+		onShow() {
+			if (this.hasLogin) {
+				this.GetDataInfo()
+			}
+		}
+	}
+</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;
+		padding: 0 24rpx;
+		color: #ffffff;
+
+		.header-sit-text {
+			text-align: left;
+			font-size: $font-size-40;
+			font-weight: 600;
+			font-family: '正楷';
+		}
+
+		.icon-fanhui {
+			display: block;
+			width: 38rpx;
+			height: 80rpx;
+			float: left;
+			text-align: left;
+			line-height: 80rpx;
+			font-size: 42rpx;
+			margin-right: 15rpx;
+		}
+
+		.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;
+				.list-title-tip {
+					float: left;
+					margin-right: 15rpx;
+					.badges {
+						display: block;
+						float: left;
+						padding: 0 15rpx;
+						height: 40rpx;
+						line-height: 40rpx;
+						border-radius: 4rpx;
+						background: $btn-confirm;
+						font-size: $font-size-24;
+						text-align: center;
+						color: #ffffff;
+					}
+				}
+				.title-text{
+					float: left;
+					line-height: 40rpx;
+					height: 40rpx;
+					color: #333333;
+					text-align: left;
+					font-weight: 600;
+				}
+			}
+
+			.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-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: 120rpx;
+					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;
+			.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-num {
+						float: left;
+						text-align: left;
+						color: #e15616;
+						margin-left: 30rpx;
+						line-height: 40rpx;
+					}
+
+					.list-title-tip {
+						float: left;
+
+						.badges {
+							display: block;
+							float: left;
+							padding: 0 15rpx;
+							height: 40rpx;
+							line-height: 40rpx;
+							border-radius: 4rpx;
+							background: radial-gradient(circle, rgba(255, 180, 39, 1) 0%, rgba(245, 142, 77, 1) 100%);
+							font-size: $font-size-24;
+							text-align: center;
+							color: #ffffff;
+						}
+					}
+				}
+				.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;
+					}
+				}
+			}
+		}
+		.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>

pages/relation/refund/index.vue

@@ -31,13 +31,21 @@
 						}}</view>
 					</view>
 					<view class="list-title-b">
-						<view class="list-title-b-item "> 收款金额：￥{{ paymentInfo.receiptAmount | NumFormat }} </view>
-						<view class="list-title-b-item "> 收款类型：{{ paymentInfo.payType }} </view>
+						<view class="list-title-b-item "> 
+							收款金额：<text class="text">￥{{ paymentInfo.receiptAmount | NumFormat }} </text>
+						</view>
+						<view class="list-title-b-item "> 
+							收款类型：<text class="text">{{ paymentInfo.payType }} </text>
+						</view>
+					</view>
+					<view class="list-title-b">
+						收款时间：<text class="text">{{ paymentInfo.receiptDate }}</text>
 					</view>
-					<view class="list-title-b">收款时间：{{ paymentInfo.receiptDate }}</view>
 					<template v-if="paymentInfo.smsContent">
 						<view class="list-title-b">收款短信：</view>
-						<view class="list-title-b sms">{{ paymentInfo.smsContent }}</view>
+						<view class="list-title-b sms">
+							<text class="text">{{ paymentInfo.smsContent }}</text>
+						</view>
 					</template>
 					<view class="list-icon">无人确认</view>
 				</view>
@@ -81,31 +89,39 @@
 									<view class="list-title-num">{{ payment.confirmType | StateExpFormat }}</view>
 								</view>
 								<view class="list-title-a">
-									<view class="list-title-a-text"
-										>子订单编号：{{ payment.number }} ( {{ payment.id }} )</view
-									>
-									<view class="list-title-a-text">供应商名称：{{ payment.userName }}</view>
+									<view class="list-title-a-text">
+										子订单编号：<text class="text">{{ payment.number }} ( {{ payment.id }} )</text>
+									</view>
+									<view class="list-title-a-text">
+										供应商名称：<text class="text">{{ payment.userName }}</text>
+									</view>
 									<view class="list-title-a-text">
 										<view class="list-title-b-item ">
-											应付金额：￥{{ payment.receiptAmount | NumFormat }}
+											应付金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 										</view>
 										<view class="list-title-b-item ">
-											已付金额：￥{{ payment.receiptAmount | NumFormat }}
+											已付金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 										</view>
 									</view>
-									<view class="list-title-a-text"
-										>已退金额：￥{{ payment.receiptAmount | NumFormat }}</view
-									>
+									<view class="list-title-a-text">
+										已退金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
+									</view>
+								</view>
+								<view class="list-title-b">
+									客户名称：<text class="text">{{ payment.userName }}</text>
+								</view>
+								<view class="list-title-b">
+									订单编号：<text class="text">{{ payment.number }} ( {{ payment.id }} )</text>
+								</view>
+								<view class="list-title-b">
+									下单日期：<text class="text">{{ payment.receiptDate }}</text>
 								</view>
-								<view class="list-title-b">客户名称：{{ payment.userName }}</view>
-								<view class="list-title-b">订单编号：{{ payment.number }} ( {{ payment.id }} )</view>
-								<view class="list-title-b">下单日期：{{ payment.receiptDate }}</view>
 								<view class="list-title-b">
 									<view class="list-title-b-item ">
-										订单金额：￥{{ payment.receiptAmount | NumFormat }}
+										订单金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 									</view>
 									<view class="list-title-b-item ">
-										已收金额：￥{{ payment.receiptAmount | NumFormat }}
+										已收金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 									</view>
 								</view>
 							</view>
@@ -783,8 +799,14 @@ page {
 		font-family: '正楷';
 	}
 	.icon-fanhui {
+		display: block;
+		width: 38rpx;
+		height: 80rpx;
+		float: left;
+		text-align: left;
+		line-height: 80rpx;
 		font-size: 42rpx;
-		margin-right: 10rpx;
+		margin-right: 15rpx;
 	}
 }
 
@@ -878,8 +900,11 @@ page {
 			float: left;
 			font-size: $font-size-24;
 			line-height: 40rpx;
-			color: #999999;
+			color: #666666;
 			text-align: left;
+			.text{
+				color: #999999;
+			}
 			.list-title-b-item {
 				width: 50%;
 				height: 100%;
@@ -1140,13 +1165,16 @@ page {
 		border-radius: 4rpx;
 		background-color: rgba(247, 247, 247, 1);
 		margin-bottom: 10rpx;
+		.text{
+			color: #999999;
+		}
 		.list-title-a-text {
 			width: 100%;
 			height: 40rpx;
 			float: left;
 			font-size: $font-size-24;
 			line-height: 40rpx;
-			color: #999999;
+			color: #666666;
 			text-align: left;
 			.list-title-b-item {
 				width: 50%;
@@ -1161,8 +1189,11 @@ page {
 		float: left;
 		font-size: $font-size-24;
 		line-height: 40rpx;
-		color: #999999;
+		color: #666666;
 		text-align: left;
+		.text{
+			color: #999999;
+		}
 		.list-title-b-item {
 			width: 50%;
 			height: 100%;

pages/relation/return/detail.vue

@@ -0,0 +1,716 @@
+<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>
+		<view class="distinguish-section" :style="{ top: CustomBar - 14 + 'px', left: 0 + 'px' }">
+			<view class="distinguish-section-conten">
+				<view class="section-top">
+					<view class="title">
+						<view class="list-title-tip">
+							<text class="badges">{{ payment.sourceType | formatSourceType }}款</text>
+						</view>
+						<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-b">
+						<view class="list-title-b-item "> 
+							收款金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }} </text>
+						</view>
+						<view class="list-title-b-item "> 
+							收款类型：<text class="text">{{ payment.receiptType }} </text>
+						</view>
+					</view>
+					<view class="list-title-b">
+						收款时间：<text class="text">{{ payment.receiptDate }}</text>
+					</view>
+					<template v-if="payment.smsContent">
+						<view class="list-title-b">收款短信：</view>
+						<view class="list-title-b sms">
+							<text class="text">{{ payment.smsContent }}</text>
+						</view>
+					</template>
+					<view class="list-icon">无人确认</view>
+				</view>
+				<view class="section-title">关联订单</view>
+				<view class="section-mid">
+					<view class="list-title">
+						<view class="list-title-t">
+							<view class="list-title-tip">
+								<text class="badges">{{ payment.order.orderType | formatOrderType }}</text>
+							</view>
+							<view class="list-title-num">{{
+								payment.order.state | StateExpFormat
+							}}</view>
+						</view>
+						<view class="list-title-a">
+							<view class="list-title-a-text">
+								子订单编号：<text class="text">{{ payment.order.number }} ( {{ payment.order.orderId}} )</text>
+							</view>
+							<view class="list-title-a-text">
+								供应商名称：<text class="text">{{ payment.order.userName }}</text>
+							</view>
+							<view class="list-title-a-text">
+								订单金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</view>
+						<view class="list-title-b">
+							订单编号：<text class="text">{{ payment.order.number }} ( {{ payment.order.orderId }} )</text>
+						</view>
+						<view class="list-title-b">
+							下单日期：<text class="text">{{ payment.order.creatTime }}</text>
+						</view>
+						<view class="list-title-b">
+							客户名称：<text class="text">{{ payment.order.userName }}</text>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								订单金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+							<view class="list-title-b-item ">
+								已收金额：<text class="text">￥{{ payment.order.receiptAmount | NumFormat }}</text>
+							</view>
+						</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(payment.confirmType) }">{{ payment.confirmType | formatStateType }}</text>
+						</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 wxLogin from '@/services/wxLogin.js'
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
+
+	export default {
+		data() {
+			return {
+				isIphoneX: this.$store.state.isIphoneX,
+				nvabarData: {
+					//顶部自定义导航
+					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
+					showSearch: 0,
+					title: '', // 导航栏 中间的标题
+					haveBack: false,
+					home: false,
+					textLeft: this.$store.state.isIphone,
+					bgColor: '#D33020',
+					textColor: '#ffffff'
+				},
+				payment: {
+					id: 6090,
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					receiptType: '广发银行0115',
+					receiptDate: '2022-02-15 10:58:25', // 收款时间
+					reviewDate: '2022-02-15 10:58:25', // 审核时间
+					smsContent: '【中信银行】您尾号0897的中信卡于05月29日14:42，二代支付存入人民币99.00元，当前余额为人民币13871.67元。',
+					confirmType: 1,
+					userName: '采美网络信息有限公司',
+					sourceType: 3,
+					state: 11,
+					isChecked: false,
+					order: {
+						orderId: 18751,
+						number: 'W164488903271223',
+						receiptAmount: 5000, //收款金额
+						associateAmount: 5000, //关联金额
+						orderType: 2, // 订单类型
+						creatTime: '2022-02-15 10:58:25', // 下单日期
+						userName: '采美网络信息有限公司',
+						state: 33, //订单状态
+					}
+				},
+				modalButton: [{
+						text: '取消',
+						type: 'gray',
+						plain: true //是否空心
+					},
+					{
+						text: '确认',
+						customStyle: {
+							color: '#fff',
+							bgColor: '#4688fa'
+						},
+						plain: false
+					}
+				],
+				params: {
+					type: 1,
+					banksType: 1,
+					amount: '',
+					chargeValue: '',
+					remarks: '',
+					time: this.$api.getNowFormatDate()
+				},
+				infoData: {},
+				isCmcustomClass: 'left',
+				CustomBar: this.CustomBar, // 顶部导航栏高度
+				height: 64, //header高度
+				top: 0, //标题图标距离顶部距离
+				scrollH: 0, //滚动总高度
+				opcity: 1,
+				isCheckedCharge: false,
+				contentModalTitle: '',
+				contentModalText: '', //操作文字提示语句
+				modal: false,
+			}
+		},
+		onLoad() {
+			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
+				}
+			})
+		},
+		filters: {
+			formatSourceType(value) {
+				switch (value) {
+					case 1:
+						return '订单'
+						break
+					case 2:
+						return '非订单'
+						break
+					case 3:
+						return '返佣'
+						break
+					case 4:
+						return '供应商退款'
+						break
+				}
+			},
+			formatOrderType(value) {
+				switch (value) {
+					case 1:
+						return '自主订单'
+						break
+					case 2:
+						return '协销订单'
+						break
+					case 3:
+						return '客服订单'
+						break
+				}
+			},
+			formatStateType(value) {
+				switch (value) {
+					case 0:
+						return '待确认'
+						break
+					case 1:
+						return '已确认'
+						break
+					case 2:
+						return '待审核'
+						break
+					case 3:
+						return '审核通过'
+						break
+				}
+			},
+			StateExpFormat(state) {
+				//订单状态文字和颜色
+				var HtmlStateText = '',
+					stateTextObject = {
+						0: '待确认',
+						4: '交易完成',
+						5: '订单完成',
+						6: '已关闭',
+						7: '交易全退',
+						77: '交易全退',
+						11: '待付款待发货',
+						12: '待付款部分发货',
+						13: '待付款已发货',
+						21: '部分付款待发货',
+						22: '部分付款部分发货',
+						23: '部分付款已发货',
+						31: '已付款待发货',
+						32: '已付款部分发货',
+						33: '已收款',
+						111: '待付款待发货'
+					}
+				Object.keys(stateTextObject).forEach(function(key) {
+					if (key == state) {
+						HtmlStateText = stateTextObject[key]
+					}
+				})
+				return HtmlStateText
+			},
+			NumFormat: function(text) {
+				//处理金额
+				return Number(text).toFixed(2)
+			}
+		},
+		computed: {
+			...mapState(['hasLogin', 'userInfo'])
+		},
+		methods: {
+			bindPickerChange(type, e) {
+				// 选择选项
+				switch (type) {
+					case 1:
+						this.paymentTypeText = this.paymentActions[e.target.value].name
+						this.params.type = this.paymentActions[e.target.value].value
+						console.log('款项类型', this.paymentTypeText)
+						console.log('款项类型', this.params.type)
+						break
+					case 2:
+						this.banksTypeText = this.banksActions[e.target.value].name
+						this.params.banksType = this.banksActions[e.target.value].value
+						console.log('收款类型', this.params.banksType)
+						break
+				}
+			},
+			showTuiDateTime() {
+				this.$refs.dateTime.show()
+			},
+			confirmDistinguish() {
+				if (this.params.amount == '') {
+					this.$util.msg('请输入收款金额', 2000)
+					return
+				}
+				if (this.isCheckedCharge) {
+					if (this.params.chargeValue == '') {
+						this.$util.msg('请输入手续费', 2000)
+						return
+					}
+				}
+				if (this.params.remarks == '') {
+					this.$util.msg('请填写收款备注', 2000)
+					return
+				}
+				if (this.params.type == 1) {
+					this.contentModalTitle = '确定收款吗？'
+					this.contentModalText = '确认前请仔细检查各项数据是否正确，确认收款后将不能进行修改。' //操作文字提示语句
+				} else if (this.params.type == 2) {
+					this.contentModalTitle = ''
+					this.contentModalText = '确定返佣收款吗？' //操作文字提示语句
+				} else if (this.params.type == 3) {
+					this.contentModalTitle = ''
+					this.contentModalText = '确定供应商退款吗？' //操作文字提示语句
+				}
+				this.modal = true
+				console.log('收款')
+			},
+			handleClick(e) {
+				// 确认收款
+				if (e.index == 1) {
+					this.$api.navigateTo('/pages/collection/detail')
+				}
+				this.modal = false
+			},
+			hideMobel() {
+				this.modal = false
+			},
+			checkedCharge() {
+				// 勾选手续费
+				this.isCheckedCharge = !this.isCheckedCharge
+			},
+			changeNumber(e) {
+				// 校验输入为数字
+				if (!this.$api.isNumber(e.detail.value)) {
+					this.params.amount = ''
+				} else {
+					this.params.amount = e.detail.value
+				}
+			},
+			toNoSms(url) {
+				this.$api.navigateTo(url)
+			},
+			formatColor(state) {
+				//设置邀请码状态亚瑟
+				let stateColor = '',
+					stateColorObject = {
+						0: '#f0ad4e',
+						1: '#4cd964',
+						2: '#dd524d',
+						3: '#007aff'
+					}
+				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.initSsoMemberCollectionList()
+				uni.stopPullDownRefresh()
+			}, 200)
+		},
+		onShow() {
+			if (this.hasLogin) {
+				this.GetDataInfo()
+			}
+		}
+	}
+</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;
+		padding: 0 24rpx;
+		color: #ffffff;
+
+		.header-sit-text {
+			text-align: left;
+			font-size: $font-size-40;
+			font-weight: 600;
+			font-family: '正楷';
+		}
+
+		.icon-fanhui {
+			display: block;
+			width: 38rpx;
+			height: 80rpx;
+			float: left;
+			text-align: left;
+			line-height: 80rpx;
+			font-size: 42rpx;
+			margin-right: 15rpx;
+		}
+
+		.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;
+				.list-title-tip {
+					float: left;
+					margin-right: 15rpx;
+					.badges {
+						display: block;
+						float: left;
+						padding: 0 15rpx;
+						height: 40rpx;
+						line-height: 40rpx;
+						border-radius: 4rpx;
+						background: $btn-confirm;
+						font-size: $font-size-24;
+						text-align: center;
+						color: #ffffff;
+					}
+				}
+				.title-text{
+					float: left;
+					line-height: 40rpx;
+					height: 40rpx;
+					color: #333333;
+					text-align: left;
+					font-weight: 600;
+				}
+			}
+
+			.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-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: 120rpx;
+					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;
+			.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-num {
+						float: left;
+						text-align: left;
+						color: #e15616;
+						margin-left: 30rpx;
+						line-height: 40rpx;
+					}
+
+					.list-title-tip {
+						float: left;
+
+						.badges {
+							display: block;
+							float: left;
+							padding: 0 15rpx;
+							height: 40rpx;
+							line-height: 40rpx;
+							border-radius: 4rpx;
+							background: radial-gradient(circle, rgba(255, 180, 39, 1) 0%, rgba(245, 142, 77, 1) 100%);
+							font-size: $font-size-24;
+							text-align: center;
+							color: #ffffff;
+						}
+					}
+				}
+				.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;
+					}
+				}
+			}
+		}
+		.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>

pages/relation/return/index.vue

@@ -31,13 +31,21 @@
 						}}</view>
 					</view>
 					<view class="list-title-b">
-						<view class="list-title-b-item "> 收款金额：￥{{ paymentInfo.receiptAmount | NumFormat }} </view>
-						<view class="list-title-b-item "> 收款类型：{{ paymentInfo.payType }} </view>
+						<view class="list-title-b-item "> 
+							收款金额：<text class="text">￥{{ paymentInfo.receiptAmount | NumFormat }}</text>
+						</view>
+						<view class="list-title-b-item "> 
+							收款类型：<text class="text">{{ paymentInfo.payType }}</text>
+						</view>
+					</view>
+					<view class="list-title-b">
+						收款时间：<text class="text">{{ paymentInfo.receiptDate }}</text>
 					</view>
-					<view class="list-title-b">收款时间：{{ paymentInfo.receiptDate }}</view>
 					<template v-if="paymentInfo.smsContent">
 						<view class="list-title-b">收款短信：</view>
-						<view class="list-title-b sms">{{ paymentInfo.smsContent }}</view>
+						<view class="list-title-b sms">
+							<text class="text">{{ paymentInfo.smsContent }}</text>
+						</view>
 					</template>
 					<view class="list-icon">无人确认</view>
 				</view>
@@ -81,23 +89,31 @@
 									<view class="list-title-num">{{ payment.confirmType | StateExpFormat }}</view>
 								</view>
 								<view class="list-title-a">
-									<view class="list-title-a-text"
-										>子订单编号：{{ payment.number }} ( {{ payment.id }} )</view
-									>
-									<view class="list-title-a-text">供应商名称：{{ payment.userName }}</view>
-									<view class="list-title-a-text"
-										>订单金额：￥{{ payment.receiptAmount | NumFormat }}</view
-									>
+									<view class="list-title-a-text">
+										子订单编号：<text class="text">{{ payment.number }} ( {{ payment.id }} )</text>
+									</view>
+									<view class="list-title-a-text">
+										供应商名称：<text class="text">{{ payment.userName }}</text>
+									</view>
+									<view class="list-title-a-text">
+										订单金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
+									</view>
+								</view>
+								<view class="list-title-b">
+									客户名称：<text class="text">{{ payment.userName }}</text>
+								</view>
+								<view class="list-title-b">
+									订单编号：<text class="text">{{ payment.number }} ( {{ payment.id }} )</text>
+								</view>
+								<view class="list-title-b">
+									下单日期：<text class="text">{{ payment.receiptDate }}</text>
 								</view>
-								<view class="list-title-b">客户名称：{{ payment.userName }}</view>
-								<view class="list-title-b">订单编号：{{ payment.number }} ( {{ payment.id }} )</view>
-								<view class="list-title-b">下单日期：{{ payment.receiptDate }}</view>
 								<view class="list-title-b">
 									<view class="list-title-b-item ">
-										订单金额：￥{{ payment.receiptAmount | NumFormat }}
+										订单金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 									</view>
 									<view class="list-title-b-item ">
-										已收金额：￥{{ payment.receiptAmount | NumFormat }}
+										已收金额：<text class="text">￥{{ payment.receiptAmount | NumFormat }}</text>
 									</view>
 								</view>
 							</view>
@@ -775,8 +791,14 @@ page {
 		font-family: '正楷';
 	}
 	.icon-fanhui {
+		display: block;
+		width: 38rpx;
+		height: 80rpx;
+		float: left;
+		text-align: left;
+		line-height: 80rpx;
 		font-size: 42rpx;
-		margin-right: 10rpx;
+		margin-right: 15rpx;
 	}
 }
 
@@ -870,8 +892,11 @@ page {
 			float: left;
 			font-size: $font-size-24;
 			line-height: 40rpx;
-			color: #999999;
+			color: #666666;
 			text-align: left;
+			.text{
+				color: #999999;
+			}
 			.list-title-b-item {
 				width: 50%;
 				height: 100%;
@@ -1131,13 +1156,16 @@ page {
 		border-radius: 4rpx;
 		background-color: rgba(247, 247, 247, 1);
 		margin-bottom: 10rpx;
+		.text{
+			color: #999999;
+		}
 		.list-title-a-text {
 			width: 100%;
 			height: 40rpx;
 			float: left;
 			font-size: $font-size-24;
 			line-height: 40rpx;
-			color: #999999;
+			color: #666666;
 			text-align: left;
 		}
 	}
@@ -1147,8 +1175,11 @@ page {
 		float: left;
 		font-size: $font-size-24;
 		line-height: 40rpx;
-		color: #999999;
+		color: #666666;
 		text-align: left;
+		.text{
+			color: #999999;
+		}
 		.list-title-b-item {
 			width: 50%;
 			height: 100%;