收款工具

common/config/caimeiApi.js

@@ -4,7 +4,7 @@
  * @Action 全局公共方法
  */
 // import requestUrl from './config.js'
-const caimeiApi = {
+const Tool = {
     /**
 	 * @封装公共get数据请求方法无加载动画
 	 * @方法参数:请求地址,请求后台需要的参数字段,回调函数
@@ -180,6 +180,11 @@ const caimeiApi = {
             })
         }
     },
+    navigateBack:function(page){
+        uni.navigateBack({
+		    delta: page
+        })
+    },
     navigateTo:function(url){
         //路由跳转:页面之间路由跳转
         uni.navigateTo({
@@ -302,24 +307,25 @@ const caimeiApi = {
  *@导出
  */ 
 module.exports = {
-    get: caimeiApi.get,
-    post: caimeiApi.post,
-    lodingGet: caimeiApi.lodingGet,
-    isNumber: caimeiApi.isNumber,
-    FormatMoney: caimeiApi.FormatMoney,
-    navigateTo: caimeiApi.navigateTo,
-    redirectTo: caimeiApi.redirectTo,
-    switchTabTo: caimeiApi.switchTabTo,
-    formatDate: caimeiApi.formatDate,
-    loginStatus: caimeiApi.loginStatus,
-    setStorage: caimeiApi.setStorage,
-    getStorage: caimeiApi.getStorage,
-    getComStorage: caimeiApi.getComStorage,
-    navToListPage: caimeiApi.navToListPage,
-    getWindowHeight: caimeiApi.getWindowHeight,
-    adaptRichTextImg: caimeiApi.adaptRichTextImg,
-    getStorageAddressKey: caimeiApi.getStorageAddressKey,
-    regexSets: caimeiApi.regexSets,
-    timestampToTime: caimeiApi.timestampToTime,
-    getNowFormatDate : caimeiApi.getNowFormatDate 
+    get: Tool.get,
+    post: Tool.post,
+    lodingGet: Tool.lodingGet,
+    isNumber: Tool.isNumber,
+    FormatMoney: Tool.FormatMoney,
+    navigateTo: Tool.navigateTo,
+    redirectTo: Tool.redirectTo,
+    switchTabTo: Tool.switchTabTo,
+    navigateBack: Tool.navigateBack,
+    formatDate: Tool.formatDate,
+    loginStatus: Tool.loginStatus,
+    setStorage: Tool.setStorage,
+    getStorage: Tool.getStorage,
+    getComStorage: Tool.getComStorage,
+    navToListPage: Tool.navToListPage,
+    getWindowHeight: Tool.getWindowHeight,
+    adaptRichTextImg: Tool.adaptRichTextImg,
+    getStorageAddressKey: Tool.getStorageAddressKey,
+    regexSets: Tool.regexSets,
+    timestampToTime: Tool.timestampToTime,
+    getNowFormatDate : Tool.getNowFormatDate 
 }

pages.json

@@ -31,6 +31,38 @@
 				"navigationStyle":"custom"
 			}
 		},
+		{
+			"path": "pages/relation/ordinary/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh":true,
+				"navigationStyle":"custom"
+			}
+		},
+		{
+			"path": "pages/relation/return/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh":true,
+				"navigationStyle":"custom"
+			}
+		},
+		{
+			"path": "pages/relation/refund/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh":true,
+				"navigationStyle":"custom"
+			}
+		},
+		{
+			"path": "pages/relation/order/detail",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh":true,
+				"navigationStyle":"custom"
+			}
+		},
 		{
 			"path": "pages/login/login-account",
 			"style": {

pages/collection/detail.vue

@@ -5,7 +5,7 @@
 			: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="navBack"></text></view>
+			<view class="header-sit"><text class="iconfont icon-fanhui2" @click.stop="this.$api.navigateBack(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)' }">
@@ -13,8 +13,7 @@
 		<view class="distinguish-section" :style="{ top: CustomBar + 'px', left: 0 + 'px' }">
 			<view class="distinguish-section-conten">
 				<view class="section-top">
-					<view class="title" @click.stop="navBack"> 款项信息 </view>
-					<text></text>
+					<view class="title"> 款项信息 </view>
 				</view>
 				<view class="section-rows">
 					<view class="rows-label">收款金额：</view>
@@ -467,7 +466,7 @@
 				flex: 7;
 				text-align: left;
 				font-size: $font-size-28;
-				color: #333333;
+				color: #666666;
 				height: 80rpx;
 				line-height: 80rpx;
 			}
@@ -512,6 +511,7 @@
 			.textarea {
 				width: 100%;
 				height: 100%;
+				color: #666666;
 			}
 		}
 	}

pages/collection/index.vue

@@ -512,7 +512,7 @@
 		}
 		.section-textarea {
 			width: 100%;
-			height: 300rpx;
+			height: 200rpx;
 			box-sizing: border-box;
 			padding: 20rpx;
 			background: #F7F7F7;

pages/collection/list.vue

@@ -5,7 +5,7 @@
 			:class="isCmcustomClass">
 			<view class="header-top" :style="{ paddingTop: top + 'px', lineHeight: CustomBar + 20 + 'px' }"></view>
 			<view class="header-sit">
-				<text class="iconfont icon-fanhui" @click.stop="navBack"></text>
+				<text class="iconfont icon-fanhui" @click.stop="this.$api.navigateBack(1)"></text>
 				<text class="header-sit-text">收款列表</text>
 				<text class="iconfont icon-iconfonticonfontsousuo1" @click.stop="rDrawer"></text>
 			</view>
@@ -41,7 +41,7 @@
 					<!-- 列表 -->
 					<view v-else class="tui-order-content">
 						<view class="tui-order-item" v-for="(payment, payIndex) in payList" :key="payIndex"
-							@click.stop="detail(order.id)">
+							@click.stop="paymentDetail(payment)">
 							<view class="list-title">
 								<view class="list-title-t">
 									<view class="list-title-tip">
@@ -467,8 +467,22 @@
 				this.loadding = false //切换时隐藏
 				this.getOrderDatainit(this.currentTab)
 			},
-			detail(id) {
-				//订单详情跳转
+			paymentDetail(payment) {
+				switch(payment.sourceType){
+					case 1:// 1:订单
+						this.$api.navigateTo(`/pages/relation/ordinary/index?id=${payment.id}`)
+						break
+					case 2:// 2：非订单 
+						this.$api.navigateTo(`/pages/relation/ordinary/index?id=${payment.id}`)
+						break
+					case 3:// 3：返佣 
+						this.$api.navigateTo(`/pages/relation/return/index?id=${payment.id}`)
+						break
+					case 4:// 4：供应商退款
+						this.$api.navigateTo(`/pages/relation/refund/index?id=${payment.id}`)
+						break
+						
+				}
 				this.isModalLayer = true
 				this.$api.navigateTo(`/pages/user/order/order-details?orderID=${id}`)
 			},
@@ -1044,9 +1058,8 @@
 		width: 100%;
 		padding: 20rpx 20rpx;
 		background: #fff;
-		margin-bottom: 20rpx;
+		margin-bottom: 24rpx;
 		border-radius: 8rpx;
-		box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);
 		position: relative;
 
 		.list-icon {
@@ -1060,7 +1073,7 @@
 			position: absolute;
 			right: 40rpx;
 			top: 50rpx;
-			color: #E1E1E1;
+			color: #dd524d;
 			z-index: 99;
 			transform: rotate(45deg);
 			-webkit-transform: rotate(45deg);

pages/collection/nosms.vue

@@ -13,7 +13,7 @@
 		<view class="distinguish-section" :style="{ top: CustomBar + 'px', left: 0 + 'px' }">
 			<view class="distinguish-section-conten">
 				<view class="section-top">
-					<view class="title" @click.stop="navBack"> <text class="iconfont icon-fanhui"></text> </view>
+					<view class="title" @click.stop="this.$api.navigateBack(1)"> <text class="iconfont icon-fanhui"></text> </view>
 					<view class="button" @click="toNoSms('/pages/collection/list')"> <text
 							class="iconfont icon-wodedingdan"></text> 收款列表 </view>
 				</view>
@@ -503,7 +503,7 @@
 
 		.section-textarea {
 			width: 100%;
-			height: 260rpx;
+			height: 200rpx;
 			box-sizing: border-box;
 			padding: 20rpx;
 			background: #f7f7f7;

pages/relation/order/detail.vue

@@ -0,0 +1,534 @@
+<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="section-badges">
+						<view class="list-title-tip">
+							<text class="badges">{{ payment.orderType | formatOrderType }}</text>
+						</view>
+						<view class="list-title-num">{{ payment.confirmType | StateExpFormat }}</view>
+					</view>
+					<view class="button" @click="toNoSms('/pages/collection/list')"> 
+						<text class="iconfont icon-wodedingdan"></text> 
+						收款列表 
+					</view>
+				</view>
+				<view class="section-mid">
+					<view class="list-title">
+						<view class="list-title-b">订单编号：{{ 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">
+							<view class="list-title-b-item ">
+								订单金额：￥{{ payment.receiptAmount | NumFormat }}
+							</view>
+							<view class="list-title-b-item ">
+								余额抵扣：￥{{ payment.receiptAmount | NumFormat }}
+							</view>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								应收金额：￥{{ payment.receiptAmount | NumFormat }}
+							</view>
+							<view class="list-title-b-item ">
+								已收金额：￥{{ payment.receiptAmount | NumFormat }}
+							</view>
+						</view>
+						<view class="list-title-b">
+							<view class="list-title-b-item ">
+								剩余应收：￥{{ payment.receiptAmount | NumFormat }}
+							</view>
+							<view class="list-title-b-item ">
+								待审金额：￥{{ payment.receiptAmount | NumFormat }}
+							</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>
+				</view>
+			</view>
+		</view>
+		<view class="distinguish-button" :style="{paddingBottom :isIphoneX ? '68rpx' : '24rpx'}">
+			<view class="button" @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,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 1, //收款类型
+					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: 11,
+					userName: '采美网络信息有限公司',
+					sourceType: 2,
+					state: 1,
+					isChecked: false
+				},
+				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: {
+			formatOrderType(value) {
+				switch (value) {
+					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;
+
+		&.fiexd {
+			position: fixed;
+			top: 0;
+			left: 0;
+			background: #4688fa;
+			border-radius: 0 0 20rpx 20rpx;
+		}
+
+		&.first {
+			background-image: url(https://static.caimei365.com/app/crm/image/statistic_bg2.png);
+		}
+	}
+
+	.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 {
+			font-size: 42rpx;
+			margin-right: 10rpx;
+		}
+	
+		.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;
+			.section-badges {
+				float: left;
+				height: 66rpx;
+				padding: 13rpx 0;
+				.list-title-tip {
+					float: left;
+					.badges {
+						display: block;
+						float: left;
+						padding: 0 15rpx;
+						height: 40rpx;
+						line-height: 40rpx;
+						border-radius: 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-num {
+					float: left;
+					text-align: left;
+					color: #e15616;
+					line-height: 40rpx;
+					margin-left: 20rpx;
+				}
+			}
+			.button {
+				float: right;
+				box-sizing: border-box;
+				padding: 0 24rpx;
+				height: 100%;
+				line-height: 66rpx;
+				background: $btn-confirm;
+				border-radius: 8rpx;
+				text-align: center;
+				color: #ffffff;
+			}
+		}
+		.section-mid{
+			width: 100%;
+			height: auto;
+			display: flex;
+			flex-direction: column;
+			margin: 20rpx 0;
+			position: relative;
+			.list-title {
+				width: 100%;
+				height: auto;					
+				.list-title-b {
+					width: 100%;
+					height: 50rpx;
+					float: left;
+					font-size: $font-size-24;
+					line-height: 50rpx;
+					color: #999999;
+					text-align: left;
+					.list-title-b-item {
+						width: 50%;
+						height: 100%;
+						float: left;
+					}
+				}
+			}
+		}
+	}
+
+	.distinguish-button {
+		width: 100%;
+		padding-top: 20rpx;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		background-color: #FFFFFF;
+		padding: 0 50rpx;
+		.button {
+			width: 100%;
+			height: 80rpx;
+			background: $btn-confirm;
+			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);
+		}
+	}
+
+	.uni-badge--small {
+		-webkit-transform: scale(0.8);
+		-ms-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: center center;
+		-ms-transform-origin: center center;
+		transform-origin: center center;
+	}
+
+	.uni-badge {
+		font-family: 'Helvetica Neue', Helvetica, sans-serif;
+		-webkit-box-sizing: border-box;
+		box-sizing: border-box;
+		font-size: 12px;
+		line-height: 1;
+		display: inline-block;
+		padding: 3px 6px;
+		color: #333;
+		border-radius: 100px;
+		background-color: #f1f1f1;
+	}
+
+	.uni-badge-error {
+		color: #fff;
+		background-color: #dd524d;
+	}
+</style>

pages/relation/ordinary/index.vue

@@ -0,0 +1,1435 @@
+<template>
+	<view class="container mine clearfix">
+		<view
+			class="tui-header-box first"
+			:style="{ height: isCmcustomClass == 'fiexd' ? CustomBar + 6 + 'px' : CustomBar + 6 + 'px' }"
+			:class="isCmcustomClass"
+		>
+			<view class="header-top" :style="{ paddingTop: top + 'px', lineHeight: CustomBar + 20 + '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-tabs day clearfix" :style="{ top: CustomBar + 6 + 'px' }">
+			<view class="tui-header-top">
+				<view class="title"> 收款信息 </view>
+				<view class="tui-header-button">
+					<view class="button btn-error" @click.stop="btnConfirm"> 设为非订单款项 </view>
+					<view class="button btn-confirm" @click="toNoSms('/pages/collection/list')">
+						<text class="iconfont icon-wodedingdan"></text> 收款列表
+					</view>
+				</view>
+			</view>
+			<view class="tui-header-item">
+				<view class="list-title-t">
+					<view class="list-title-tip">
+						<text class="badges">{{ paymentInfo.sourceType | formatSourceType }}</text>
+					</view>
+					<view class="list-title-num" :style="{ color: formatColor(paymentInfo.confirmType) }">{{
+						paymentInfo.confirmType | formatStateType
+					}}</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>
+				<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>
+				</template>
+				<view class="list-icon">无人确认</view>
+			</view>
+			<view class="tui-header-tabmain">
+				<input
+					class="input"
+					type="text"
+					confirm-type="search"
+					@confirm="subMitSearch()"
+					placeholder="请输入供应商名称"
+				/>
+				<text class="iconfont icon-sousuo"></text>
+			</view>
+			<view class="tui-header-tabmain">
+				<view
+					class="main-item one"
+					v-for="(item, index) in listTabs"
+					:key="index"
+					:class="{ active: currents == index }"
+					@click="tabClick(1, index)"
+				>
+					<view class="text">{{ item.name }}</view>
+				</view>
+			</view>
+			<view class="tui-header-tabmain day">
+				<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>
+				</view>
+			</view>
+		</view>
+		<view
+			class="user-section"
+			:style="{
+				top: isIphoneX ? CustomBar + 330 + 'px' : CustomBar + 315 + 'px',
+				left: 0 + 'px',
+				paddingBottom: isIphoneX ? '178rpx' : '144rpx'
+			}"
+		>
+			<view class="header-content">
+				<view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
+					<!-- 空白页 -->
+					<empty v-if="isEmpty" :typeIndex="currents" :navbarHeight="navbarHeight"></empty>
+					<!-- 列表 -->
+					<view v-else class="tui-order-content">
+						<view
+							class="tui-order-item"
+							v-for="(payment, payIndex) in payList"
+							:key="payIndex"
+							@click.stop="orderDetail(payment.id)"
+						>
+							<view class="list-title">
+								<view class="list-title-t">
+									<view class="list-title-tip">
+										<text class="badges">{{ payment.orderType | formatOrderType }}</text>
+									</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">
+									<view class="list-title-b-item ">
+										订单金额：￥{{ payment.receiptAmount | NumFormat }}
+									</view>
+									<view class="list-title-b-item ">
+										余额抵扣：￥{{ payment.receiptAmount | NumFormat }}
+									</view>
+								</view>
+								<view class="list-title-b">经理折扣：￥{{ payment.receiptAmount }}</view>
+								<view class="list-title-b">
+									<view class="list-title-b-item ">
+										应收金额：￥{{ payment.receiptAmount | NumFormat }}
+									</view>
+									<view class="list-title-b-item ">
+										已收金额：￥{{ payment.receiptAmount | NumFormat }}
+									</view>
+								</view>
+								<view class="list-title-b">
+									<view class="list-title-b-item ">
+										剩余应收：￥{{ payment.receiptAmount | NumFormat }}
+									</view>
+									<view class="list-title-b-item ">
+										待审金额：￥{{ payment.receiptAmount | NumFormat }}
+									</view>
+								</view>
+							</view>
+							<view class="list-checked" @click="checkedOrder(payment)">
+								<text
+									class="iconfont"
+									:class="payment.isChecked ? 'icon-yixuanze' : 'icon-weixuanze'"
+								></text>
+							</view>
+							<view class="list-detail" @click="handelDetail(payment)">
+								<text class="iconfont icon-xiayibu"></text>
+							</view>
+						</view>
+						<!--加载loadding-->
+						<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
+						<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text="nomoreText"></tui-nomore>
+						<!--加载loadding-->
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="distinguish-button" :style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }">
+			<view class="button" @click="confirmDistinguish">确认</view>
+		</view>
+		<!--右抽屉-->
+		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
+			<view class="d-container clearfix" :style="{ paddingTop: CustomBar + 10 + 'px' }">
+				<view class="drawer-main">
+					<view class="drawer-main-name">日期</view>
+					<view class="drawer-main-time">
+						<view class="drawer-main-time-input">
+							<picker
+								mode="date"
+								:value="date"
+								:start="startDate"
+								:end="endDate"
+								@change="bindStartDateChange"
+							>
+								<text class="input-text">{{ queryData.startAddTime }}</text>
+							</picker>
+							<text class="iconfont icon-riqi"></text>
+						</view>
+						<view class="line">-</view>
+						<view class="drawer-main-time-input">
+							<picker
+								mode="date"
+								:value="date"
+								:start="startDate"
+								:end="endDate"
+								@change="bindEndDateChange"
+							>
+								<text class="input-text">{{ queryData.endAddTime }}</text>
+							</picker>
+							<text class="iconfont icon-riqi"></text>
+						</view>
+					</view>
+					<view class="drawer-main-name">收款短信(全匹配)</view>
+					<view class="drawer-main-textarea">
+						<textarea class="textarea" placeholder="请输入收款备注..." v-model="params.remarks" />
+					</view>
+				</view>
+				<view class="drawer-input btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
+					<view class="drawer-btn clear" @click="closeDrawer">取消</view>
+					<view class="drawer-btn comfrim" @click="handSearchConfirm">确定</view>
+				</view>
+			</view>
+		</tui-drawer>
+		<!-- 弹窗 -->
+		<tui-modal
+			:show="modal"
+			@click="handleClick"
+			@cancel="hideMobel"
+			:content="contentModalText"
+			color="#333"
+			:size="32"
+			shape="circle"
+			:maskClosable="false"
+		></tui-modal>
+	</view>
+</template>
+<script>
+import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
+import modalLayer from '@/components/modal-layer'
+import empty from '@/components/empty'
+import wxLogin from '@/services/wxLogin.js'
+import { mapState, mapMutations } from 'vuex'
+const defaultListQuery = {
+	pageNum: 1, //页数
+	pageSize: 10, //条数
+	orderNum: '',
+	phone: '',
+	date: '', //订单提交时间
+	classification: '', //订单分类
+	merchantId: 0,
+	source: '' //订单来源
+}
+export default {
+	components: {
+		empty
+	},
+	data() {
+		const currentDate = this.getDate({
+			format: true
+		})
+		return {
+			CustomBar: this.CustomBar, // 顶部导航栏高度
+			isIphoneX: this.$store.state.isIphoneX,
+			paymentInfo: {
+				id: 6090,
+				receiptAmount: 5000, //收款金额
+				associateAmount: 5000, //关联金额
+				payType: '广发银行-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: 0,
+				userName: '采美网络信息有限公司',
+				sourceType: 1,
+				state: 1
+			},
+			listTabs: [
+				{
+					name: '商品订单',
+					type: 1
+				},
+				{
+					name: '订金订单',
+					type: 2
+				},
+				{
+					name: '小程序订单',
+					type: 3
+				},
+				{
+					name: '退款子订单',
+					type: 4
+				}
+			],
+			listReturnType: [
+				{
+					name: '待确认',
+					type: 2
+				},
+				{
+					name: '已确认',
+					type: 3
+				}
+			],
+			queryData: {
+				startAddTime: '',
+				endAddTime: ''
+			},
+			date: currentDate,
+			listCount: {
+				toBeClosed: 0,
+				toBeDelivered: 0,
+				toBePaid: 0,
+				toBeReceived: 0,
+				toBeSuccess: 0
+			},
+			currents: 0,
+			tabCurrents: 0,
+			userID: 0,
+			openId: '',
+			listQuery: Object.assign({}, defaultListQuery),
+			payList: [
+				{
+					id: 6090,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 1, //收款类型
+					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: 11,
+					userName: '采美网络信息有限公司',
+					sourceType: 1,
+					state: 1,
+					isChecked: false
+				},
+				{
+					id: 6090,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 1, //收款类型
+					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: 11,
+					userName: '采美网络信息有限公司',
+					sourceType: 2,
+					state: 1,
+					isChecked: false
+				},
+				{
+					id: 6092,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 2, //收款类型
+					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: 11,
+					userName: '采美网络信息有限公司',
+					sourceType: 3,
+					state: 2,
+					isChecked: false
+				},
+				{
+					id: 6092,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 3, //收款类型
+					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: 11,
+					userName: '采美网络信息有限公司',
+					sourceType: 4,
+					state: 2,
+					isChecked: false
+				}
+			],
+			btnoRderID: 0, //点击按钮传入的的订单ID
+			scrollTop: 0,
+			deteleType: '',
+			skeletonShow: true,
+			isEmpty: false,
+			isDelete: false,
+			isModalLayer: false,
+			loadding: false,
+			pullUpOn: true,
+			total: 0,
+			pullFlag: true,
+			navbarHeight: '',
+			nomoreText: '上拉显示更多',
+			contentModalText: '', //操作文字提示语句
+			modal: false,
+			rightDrawer: false,
+			hanldOrder: '', //储存监听订单信息
+			OperationType: '', //操作类型
+			isCmcustomClass: 'left',
+			height: 64, //header高度
+			top: 0, //标题图标距离顶部距离
+			scrollH: 0, //滚动总高度
+			opcity: 1
+		}
+	},
+	onLoad() {
+		let obj = {}
+		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: {
+		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
+		},
+		formatSourceType(value) {
+			switch (value) {
+				case 1:
+					return '订单'
+					break
+				case 2:
+					return '非订单'
+					break
+				case 3:
+					return '返佣'
+					break
+				case 4:
+					return '供应商退款'
+					break
+			}
+		},
+		formatStateType(value) {
+			switch (value) {
+				case 0:
+					return '待确认'
+					break
+				case 1:
+					return '已确认'
+					break
+				case 2:
+					return '待审核'
+					break
+				case 3:
+					return '审核通过'
+					break
+			}
+		},
+		formatOrderType(value) {
+			switch (value) {
+				case 1:
+					return '自主订单'
+					break
+				case 2:
+					return '协销订单'
+					break
+				case 3:
+					return '客服订单'
+					break
+			}
+		},
+		NumFormat: function(text) {
+			//处理金额
+			return Number(text).toFixed(2)
+		}
+	},
+	computed: {
+		...mapState(['hasLogin', 'userInfo']),
+		startDate() {
+			return this.getDate('start')
+		},
+		endDate() {
+			return this.getDate('end')
+		}
+	},
+	methods: {
+		getDate(type) {
+			const date = new Date()
+			let year = date.getFullYear()
+			let month = date.getMonth() + 1
+			let day = date.getDate()
+			if (type === 'start') {
+				year = year - 1
+			} else if (type === 'end') {
+				year = year + 1
+			}
+			month = month > 9 ? month : '0' + month
+			day = day > 9 ? day : '0' + day
+			return `${year}-${month}-${day}`
+		},
+		bindStartDateChange(event) {
+			//开始时间
+			console.log('开始时间==>', event.detail.value)
+			this.queryData.startAddTime = event.detail.value
+		},
+		bindEndDateChange(event) {
+			//结束时间
+			console.log('结束时间==>', event.detail.value)
+			this.queryData.endAddTime = event.detail.value
+		},
+		getOrderDatainit(index) {
+			this.listQuery.pageNum = 1
+			this.OrderService.OrderList(
+				Object.assign(
+					{
+						status: index
+					},
+					this.listQuery
+				)
+			)
+				.then(response => {
+					let resData = response.data.list
+					this.total = response.data.total
+					if (resData && resData.length > 0) {
+						this.isEmpty = false
+						this.orderData = [...resData]
+						this.hanldOrderList(this.orderData)
+						if (this.total > this.orderData.length) {
+							this.pullUpOn = false
+							this.nomoreText = '上拉显示更多'
+						} else {
+							if (this.orderData.length < 5) {
+								this.pullUpOn = true
+							} else {
+								this.pullUpOn = false
+								this.nomoreText = '已至底部'
+							}
+						}
+					} else {
+						this.isEmpty = true
+					}
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		getOnReachBottomData(index) {
+			//上拉加载
+			this.listQuery.pageNum += 1
+			this.OrderService.OrderList(
+				Object.assign(
+					{
+						status: index
+					},
+					this.listQuery
+				)
+			).then(response => {
+				let resData = response.data.list
+				this.total = response.data.total
+				this.orderData = this.orderData.concat(resData)
+				this.hanldOrderList(this.orderData)
+				this.pullFlag = false // 防上拉暴滑
+				setTimeout(() => {
+					this.pullFlag = true
+				}, 500)
+				if (this.total > this.orderData.length) {
+					this.pullUpOn = false
+					this.nomoreText = '上拉显示更多'
+				} else {
+					this.loadding = false
+					this.pullUpOn = false
+					this.nomoreText = '已至底部'
+				}
+			})
+		},
+		change(e) {
+			//切换tab传递当前tab[index]执行初始化方法
+			this.currentTabs = e.index
+			switch (e.index) {
+				case 0:
+					this.currentTab = -1
+					break
+				case 1:
+					this.currentTab = 0
+					break
+				case 2:
+					this.currentTab = 1
+					break
+				case 3:
+					this.currentTab = 2
+					break
+				case 4:
+					this.currentTab = 3
+					break
+				case 5:
+					this.currentTab = 4
+					break
+			}
+			this.pageNum = 1
+			this.orderData = []
+			this.pullUpOn = true //切换时隐藏
+			this.loadding = false //切换时隐藏
+			this.getOrderDatainit(this.currentTab)
+		},
+		orderDetail(id) {
+			//订单详情跳转
+			this.isModalLayer = true
+			this.$api.navigateTo(`/pages/relation/order/detail?orderId=${id}`)
+		},
+		handButtonConfirm(data) {
+			//获取点击
+			console.log('data', data)
+			// this.handShowAlert(data)
+		},
+		handShowAlert(data) {
+			console.log('data', data)
+			//执行
+			switch (data.type) {
+				case 'pay':
+					this.$api.navigateTo(`/pages/user/order/order-details?path=pay&state=0&orderID=${this.btnoRderID}`)
+					break
+				case 'delete':
+					this.modal = true
+					this.contentModalText = '确认删除该订单吗？'
+					break
+				case 'cancel':
+					this.modal = true
+					this.contentModalText = '确认关闭该订单吗？'
+					break
+				case 'refund':
+					uni.setStorageSync('refundData', data.order)
+					this.$api.navigateTo('/pages/user/order/order-refund')
+					break
+				case 'returned':
+					uni.setStorageSync('refundData', data.order)
+					this.$api.navigateTo('/pages/user/order/order-refund')
+					break
+				case 'query':
+					this.isModalLayer = true
+					this.$api.navigateTo('/pages/user/order/order-logistics?orderID=' + data.orderId)
+					break
+				case 'confirm':
+					this.modal = true
+					this.contentModalText = '是否确认收货？'
+					// this.handOrderConfirm(data.orderId);
+					break
+				case 'cancelRefund':
+					this.modal = true
+					this.contentModalText = '确定取消退货/退款？'
+					// this.handCancelRefundConfirm(data.orderId);
+					break
+			}
+		},
+		handleClick(e) {
+			//用户操作订单
+			let index = e.index
+			if (index == 1) {
+				switch (this.OperationType) {
+					case 'delete': //删除订单
+						this.handOrderDetele(this.hanldOrder)
+						break
+					case 'cancel': //取消订单
+						this.modal = true
+						this.handCenceConfirm(this.hanldOrder)
+						break
+					case 'refund': //退款
+						this.modal = true
+						this.handRefundConfirm(this.hanldOrder)
+						break
+					case 'returned': //退货
+						this.modal = true
+						this.handReturnedConfirm(this.hanldOrder)
+						break
+					case 'confirm': //确认收货
+						this.handOrderConfirm(this.hanldOrder)
+						break
+					case 'cancelRefund': //确认收货
+						this.handCancelRefundConfirm(this.hanldOrder)
+						break
+				}
+			}
+			this.modal = false
+		},
+		checkedOrder(payment) {
+			// 勾选关联订单
+			payment.isChecked = !payment.isChecked
+		},
+		hideMobel() {
+			this.modal = false
+		},
+		hanldOrderList(list) {
+			let state = ''
+			for (let i = 0; i < list.length; i++) {
+				if (list[i].status == 4) {
+					state = list[i].returnApplyStatus
+					switch (state) {
+						case 0:
+							list[i].status = 40
+							break
+						case 1:
+							list[i].status = 41
+							break
+						case 2:
+							list[i].status = 42
+							break
+						case 3:
+							list[i].status = 43
+							break
+					}
+				}
+			}
+		},
+		//订单状态文字和颜色
+		orderStateExp(state) {
+			let stateText = '',
+				stateTextObject = {
+					0: '待付款',
+					1: '待发货',
+					2: '已发货',
+					3: '已完成',
+					4: '已关闭',
+					5: '无效订单'
+				}
+			Object.keys(stateTextObject).forEach(key => {
+				if (key == state) {
+					stateText = stateTextObject[key]
+				}
+			})
+			return stateText
+		},
+		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
+		},
+		orderPriceToFixed(n) {
+			let price = ''
+			price = Number(n).toFixed(2)
+			return price
+		},
+		tabClick(type, index) {
+			switch (type) {
+				case 1:
+					this.currents = index
+					this.getOrderDatainit(this.currents)
+					this.tabCurrents = 0
+					break
+				case 2:
+					this.tabCurrents = index
+					this.getOrderDatainit(this.currents)
+			}
+		},
+		bindDateChange: function(e) {
+			//选择筛选时间
+			console.log(e)
+			this.listQuery.date = e.detail.value
+			console.log(this.listQuery.date)
+		},
+		bindPickerChange: function(type, e) {
+			//选择筛选条件
+			if (type == 1) {
+				this.listQuery.classification = this.Array[e.target.value].name
+				console.log(this.listQuery.classification)
+			} else {
+				this.listQuery.source = this.Array1[e.target.value].name
+				console.log(this.listQuery.source)
+			}
+		},
+		toNoSms(url) {
+			this.$api.navigateTo(url)
+		}
+	},
+	onPageScroll(e) {
+		//实时获取到滚动的值
+		if (e.scrollTop > 30) {
+			this.isCmcustomClass = 'fiexd'
+		} else {
+			this.isCmcustomClass = 'left'
+		}
+	},
+	onReachBottom() {
+		if (this.total > this.orderData.length) {
+			this.loadding = true
+			this.pullUpOn = true
+			this.getOnReachBottomData(this.currents)
+		}
+	},
+	onPullDownRefresh() {
+		setTimeout(() => {
+			this.listQuery.pageNum = 1
+			this.currents = 0
+			// this.getOrderDatainit(this.currents)
+			uni.stopPullDownRefresh()
+		}, 200)
+	},
+	onShareAppMessage(res) {
+		//分享购买优惠券
+		const payment = res.target.dataset.payment
+		console.log('payment', payment)
+		if (res.from === 'button') {
+			// console.log('来自页面内转发按钮')
+			return {
+				title: `【待确认】收款金额${payment.receiptAmount.toFixed(2)}元,收款时间:${payment.receiptDate}`,
+				path: `pages/seller/cart/coupon-share?payment=${payment.id}`,
+				imageUrl: 'https://static.caimei365.com/app/img/icon/icon-shareCoupon@2x.png'
+			}
+		}
+	},
+	onShow() {
+		this.$api.getComStorage('userInfo').then(resolve => {
+			this.listQuery.merchantId = resolve.id
+			// this.getOrderDatainit(this.currents)
+		})
+	}
+}
+</script>
+
+<style lang="scss">
+@import '@/uni.scss';
+
+page {
+	background: #f7f7f7;
+}
+
+.tui-header-box {
+	width: 100%;
+	background: #ffffff;
+	z-index: 999;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background-size: cover;
+	background-image: url(https://static.caimei365.com/app/crm/image/statistic_bg2.png);
+
+	&.fiexd {
+	}
+
+	&.first {
+	}
+}
+.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 {
+		font-size: 42rpx;
+		margin-right: 10rpx;
+	}
+}
+
+.tui-header-tabs {
+	width: 100%;
+	height: auto;
+	margin-bottom: 40rpx;
+	padding: 20rpx 24rpx;
+	background: #ffffff;
+	box-sizing: border-box;
+	position: fixed;
+	z-index: 999;
+	box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);
+	.tui-header-top {
+		width: 100%;
+		height: 66rpx;
+		box-sizing: border-box;
+		float: left;
+		.title {
+			float: left;
+			line-height: 66rpx;
+			color: #333333;
+			text-align: left;
+			font-size: $font-size-30;
+			font-weight: 600;
+		}
+		.tui-header-button {
+			float: right;
+			box-sizing: border-box;
+			height: 100%;
+			line-height: 66rpx;
+			padding: 5rpx 0;
+			.button {
+				float: left;
+				box-sizing: border-box;
+				padding: 0 24rpx;
+				height: 100%;
+				line-height: 56rpx;
+				border-radius: 8rpx;
+				text-align: center;
+				color: #ffffff;
+				margin-left: 10rpx;
+				&.btn-confirm {
+					background: $btn-confirm;
+				}
+				&.btn-error {
+					background: #ff5000;
+				}
+			}
+		}
+	}
+	.tui-header-item {
+		width: 100%;
+		height: auto;
+		margin-top: 10rpx;
+		position: relative;
+		float: left;
+		.list-title-t {
+			width: 100%;
+			height: 50rpx;
+			float: left;
+			font-size: $font-size-28;
+			padding-bottom: 10rpx;
+			margin-bottom: 10rpx;
+			.list-title-num {
+				float: left;
+				text-align: left;
+				color: #999999;
+				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: $btn-confirm;
+					font-size: $font-size-24;
+					text-align: center;
+					color: #ffffff;
+				}
+			}
+		}
+
+		.list-title-b {
+			width: 100%;
+			height: 40rpx;
+			float: left;
+			font-size: $font-size-24;
+			line-height: 40rpx;
+			color: #999999;
+			text-align: left;
+			.list-title-b-item {
+				width: 50%;
+				height: 100%;
+				float: left;
+			}
+			&.sms {
+				height: 100rpx;
+				padding: 10rpx;
+				border-radius: 4rpx;
+			}
+		}
+		.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: '正楷';
+		}
+	}
+	.tui-header-tabmain {
+		width: 100%;
+		height: 70rpx;
+		float: left;
+		position: relative;
+		&.day {
+			height: 70rpx;
+			box-sizing: border-box;
+			padding: 20rpx 0;
+			border-top: 1px solid #efefef;
+		}
+		.main-item {
+			float: left;
+			text-align: left;
+			color: #ffffff;
+			box-sizing: border-box;
+			&.one {
+				width: 25%;
+				.text {
+					width: 100%;
+					height: 70rpx;
+					line-height: 70rpx;
+					display: block;
+					float: left;
+					font-size: $font-size-28;
+					color: #666666;
+					text-align: left;
+					font-weight: 600;
+					font-family: '正楷';
+				}
+			}
+
+			&.tab {
+				width: 140rpx;
+				border-radius: 8rpx;
+				background: #f7f7f7;
+				margin-right: 15rpx;
+				padding: 0 20rpx;
+				.text {
+					width: 100%;
+					height: 50rpx;
+					line-height: 50rpx;
+					display: block;
+					float: left;
+					font-size: $font-size-24;
+					color: #666666;
+					text-align: center;
+				}
+			}
+
+			&.active {
+				.text {
+					color: #576efa;
+					font-size: $font-size-28;
+				}
+			}
+
+			&.tabActive {
+				background: #576efa;
+				.text {
+					color: #ffffff;
+				}
+			}
+		}
+		.input {
+			width: 100%;
+			height: 70rpx;
+			box-sizing: border-box;
+			padding: 0 20rpx;
+			padding-right: 100rpx;
+			background: #f7f7f7;
+			border-radius: 8rpx;
+		}
+		.icon-sousuo {
+			width: 100rpx;
+			height: 70rpx;
+			display: block;
+			line-height: 70rpx;
+			text-align: center;
+			color: $color-system;
+			font-size: $font-size-36;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+	}
+	.button-content {
+		width: 100%;
+		height: auto;
+		float: left;
+		position: relative;
+		.btn {
+			height: 64rpx;
+			padding: 0 20rpx;
+			margin: 10rpx 0 0 0;
+			line-height: 64rpx;
+			font-size: $font-size-26;
+			text-align: center;
+			border-radius: 6rpx;
+			float: right;
+		}
+		.btn-confirm {
+			background-color: #ff5000;
+			color: #ffffff;
+		}
+	}
+}
+
+.distinguish-button {
+	width: 100%;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	background-color: #ffffff;
+	padding: 0 50rpx;
+	padding-top: 20rpx;
+	.button {
+		width: 100%;
+		height: 80rpx;
+		background: $btn-confirm;
+		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);
+	}
+}
+
+.user-section {
+	position: absolute;
+	width: 100%;
+}
+
+.header-content {
+	width: 100%;
+	height: auto;
+	position: relative;
+	background-color: #f7f7f7;
+	.tui-header-btm {
+		width: 100%;
+		padding: 0 30rpx;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		color: #fff;
+	}
+
+	.tui-btm-item {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.tui-btm-num {
+		font-size: 32rpx;
+		font-weight: 600;
+		position: relative;
+	}
+
+	.tui-btm-text {
+		font-size: 24rpx;
+		opacity: 0.85;
+		padding-top: 4rpx;
+	}
+}
+
+.uni-badge--small {
+	-webkit-transform: scale(0.8);
+	-ms-transform: scale(0.8);
+	transform: scale(0.8);
+	-webkit-transform-origin: center center;
+	-ms-transform-origin: center center;
+	transform-origin: center center;
+}
+
+.uni-badge {
+	font-family: 'Helvetica Neue', Helvetica, sans-serif;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	font-size: 12px;
+	line-height: 1;
+	display: inline-block;
+	padding: 3px 6px;
+	color: #333;
+	border-radius: 100px;
+	background-color: #f1f1f1;
+}
+
+.uni-badge-error {
+	color: #fff;
+	background-color: #dd524d;
+}
+
+.tui-order-list {
+	margin-top: 24rpx;
+	width: 100%;
+	position: relative;
+	box-sizing: border-box;
+	padding: 0 20rpx;
+}
+
+.tui-order-content {
+	width: 100%;
+	height: auto;
+}
+
+.tui-order-item {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	padding: 20rpx 20rpx;
+	background: #fff;
+	margin-bottom: 24rpx;
+	border-radius: 8rpx;
+	position: relative;
+	.list-checked {
+		width: 80rpx;
+		height: 80rpx;
+		line-height: 80rpx;
+		text-align: center;
+		position: absolute;
+		right: 0;
+		top: 0;
+		.iconfont {
+			font-size: 38rpx;
+			color: $color-system;
+		}
+	}
+	.list-detail {
+		width: 80rpx;
+		height: 290rpx;
+		line-height: 290rpx;
+		text-align: center;
+		position: absolute;
+		right: 0;
+		top: 80rpx;
+		.iconfont {
+			font-size: $font-size-30;
+			color: #999999;
+		}
+	}
+}
+
+.list-title {
+	width: 100%;
+	height: auto;
+
+	.list-title-t {
+		width: 100%;
+		height: 50rpx;
+		float: left;
+		font-size: $font-size-24;
+		padding-bottom: 10rpx;
+		.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-num {
+			float: left;
+			text-align: left;
+			color: #e15616;
+			line-height: 40rpx;
+			margin-left: 20rpx;
+		}
+	}
+	.list-title-b {
+		width: 100%;
+		height: 40rpx;
+		float: left;
+		font-size: $font-size-24;
+		line-height: 40rpx;
+		color: #999999;
+		text-align: left;
+		.list-title-b-item {
+			width: 50%;
+			height: 100%;
+			float: left;
+		}
+		&.sms {
+			height: auto;
+		}
+	}
+}
+.d-container {
+	width: 580rpx;
+	padding: 80rpx 0;
+
+	.drawer-main {
+		width: 100%;
+		height: auto;
+		box-sizing: border-box;
+		float: left;
+
+		.drawer-main-name {
+			width: 100%;
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: left;
+			font-size: $font-size-26;
+			color: #333333;
+			box-sizing: border-box;
+			padding: 0 20rpx;
+			font-weight: bold;
+		}
+
+		.drawer-main-time {
+			width: 100%;
+			height: 56rpx;
+			box-sizing: border-box;
+
+			.line {
+				color: #999999;
+				float: left;
+				line-height: 56rpx;
+			}
+
+			.drawer-main-time-input {
+				width: 228rpx;
+				height: 56rpx;
+				background: #f7f7f7;
+				border-radius: 28rpx;
+				box-sizing: border-box;
+				padding: 0 20rpx;
+				line-height: 56rpx;
+				float: left;
+				margin: 0 20rpx;
+				position: relative;
+				box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);
+
+				.input-text {
+					display: block;
+					height: 56rpx;
+					font-size: 26rpx;
+					color: #666666;
+				}
+
+				.icon-riqi {
+					color: $color-system;
+					display: block;
+					width: 40rpx;
+					height: 56rpx;
+					position: absolute;
+					right: 10rpx;
+					top: 0;
+					line-height: 56rpx;
+				}
+			}
+		}
+
+		.drawer-main-textarea {
+			width: 100%;
+			height: 160rpx;
+			box-sizing: border-box;
+			padding: 0 20rpx;
+			background: #ffffff;
+			border-radius: 8rpx;
+
+			.textarea {
+				width: 100%;
+				height: 100%;
+				background: #f7f7f7;
+				box-sizing: border-box;
+				padding: 20rpx 20rpx;
+				font-size: $font-size-24;
+				border-radius: 8rpx;
+				box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);
+			}
+		}
+	}
+
+	.drawer-input {
+		width: 100%;
+		float: left;
+		box-sizing: border-box;
+		padding: 24rpx 10rpx 0 10rpx;
+		border: 1px solid rgba(0, 0, 0, 0.2);
+		border-radius: 4rpx;
+		position: relative;
+		background-color: #ffffff;
+
+		&.btn {
+			border: none;
+			display: flex;
+			position: fixed;
+			left: 0;
+			bottom: 0;
+		}
+
+		.drawer-btn {
+			width: 210rpx;
+			height: 84rpx;
+			border-radius: 42rpx;
+			background: $btn-confirm;
+			line-height: 84rpx;
+			text-align: center;
+			font-size: $font-size-26;
+			color: #ffffff;
+			flex: 1;
+			margin: 0 10rpx;
+
+			&.comfrim {
+				background: $btn-confirm;
+			}
+
+			&.clear {
+				background: #f7f7f7;
+				color: #999999;
+			}
+		}
+	}
+}
+</style>

pages/relation/refund/index.vue

@@ -0,0 +1,1168 @@
+<template>
+	<view class="container mine clearfix">
+		<view
+			class="tui-header-box first"
+			:style="{ height: isCmcustomClass == 'fiexd' ? CustomBar + 6 + 'px' : CustomBar + 6 + 'px' }"
+			:class="isCmcustomClass"
+		>
+			<view class="header-top" :style="{ paddingTop: top + 'px', lineHeight: CustomBar + 20 + '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-tabs day clearfix" :style="{ top: CustomBar + 6 + 'px' }">
+			<view class="tui-header-top">
+				<view class="title"> 收款信息 </view>
+				<view class="tui-header-button">
+					<view class="button btn-confirm" @click="toNoSms('/pages/collection/list')">
+						<text class="iconfont icon-wodedingdan"></text> 收款列表
+					</view>
+				</view>
+			</view>
+			<view class="tui-header-item">
+				<view class="list-title-t">
+					<view class="list-title-tip">
+						<text class="badges">{{ paymentInfo.sourceType | formatSourceType }}</text>
+					</view>
+					<view class="list-title-num" :style="{ color: formatColor(paymentInfo.confirmType) }">{{
+						paymentInfo.confirmType | formatStateType
+					}}</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>
+				<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>
+				</template>
+				<view class="list-icon">无人确认</view>
+			</view>
+			<view class="tui-header-tabmain">
+				<input
+					class="input"
+					type="text"
+					confirm-type="search"
+					@confirm="subMitSearch()"
+					placeholder="请输入供应商名称"
+				/>
+				<text class="iconfont icon-sousuo"></text>
+			</view>
+		</view>
+		<view
+			class="user-section"
+			:style="{
+				top: isIphoneX ? CustomBar + 260 + 'px' : CustomBar + 250 + 'px',
+				left: 0 + 'px',
+				paddingBottom: isIphoneX ? '178rpx' : '144rpx'
+			}"
+		>
+			<view class="header-content">
+				<view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
+					<!-- 空白页 -->
+					<empty v-if="isEmpty" :typeIndex="currents" :navbarHeight="navbarHeight"></empty>
+					<!-- 列表 -->
+					<view v-else class="tui-order-content">
+						<view
+							class="tui-order-item"
+							v-for="(payment, payIndex) in payList"
+							:key="payIndex"
+							@click.stop="orderDetail(payment.id)"
+						>
+							<view class="list-title">
+								<view class="list-title-t">
+									<view class="list-title-tip">
+										<text class="badges">{{ payment.orderType | formatOrderType }}</text>
+									</view>
+									<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">
+										<view class="list-title-b-item ">
+											应付金额：￥{{ payment.receiptAmount | NumFormat }}
+										</view>
+										<view class="list-title-b-item ">
+											已付金额：￥{{ payment.receiptAmount | NumFormat }}
+										</view>
+									</view>
+									<view class="list-title-a-text"
+										>已退金额：￥{{ payment.receiptAmount | NumFormat }}</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">
+									<view class="list-title-b-item ">
+										订单金额：￥{{ payment.receiptAmount | NumFormat }}
+									</view>
+									<view class="list-title-b-item ">
+										已收金额：￥{{ payment.receiptAmount | NumFormat }}
+									</view>
+								</view>
+							</view>
+							<view class="list-checked" @click="checkedOrder(payment)">
+								<text
+									class="iconfont"
+									:class="payment.isChecked ? 'icon-yixuanze' : 'icon-weixuanze'"
+								></text>
+							</view>
+							<view class="list-detail" @click="handelDetail(payment)">
+								<text class="iconfont icon-xiayibu"></text>
+							</view>
+						</view>
+						<!--加载loadding-->
+						<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
+						<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text="nomoreText"></tui-nomore>
+						<!--加载loadding-->
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="distinguish-button" :style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }">
+			<view class="button" @click="confirmDistinguish">确认</view>
+		</view>
+		<!-- 弹窗 -->
+		<tui-modal
+			:show="modal"
+			@click="handleClick"
+			@cancel="hideMobel"
+			:content="contentModalText"
+			color="#333"
+			:size="32"
+			shape="circle"
+			:maskClosable="false"
+		></tui-modal>
+	</view>
+</template>
+<script>
+import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
+import modalLayer from '@/components/modal-layer'
+import empty from '@/components/empty'
+import wxLogin from '@/services/wxLogin.js'
+import { mapState, mapMutations } from 'vuex'
+const defaultListQuery = {
+	pageNum: 1, //页数
+	pageSize: 10, //条数
+	orderNum: '',
+	phone: '',
+	date: '', //订单提交时间
+	classification: '', //订单分类
+	merchantId: 0,
+	source: '' //订单来源
+}
+export default {
+	components: {
+		empty
+	},
+	data() {
+		const currentDate = this.getDate({
+			format: true
+		})
+		return {
+			CustomBar: this.CustomBar, // 顶部导航栏高度
+			isIphoneX: this.$store.state.isIphoneX,
+			paymentInfo: {
+				id: 6090,
+				receiptAmount: 5000, //收款金额
+				associateAmount: 5000, //关联金额
+				payType: '广发银行-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: 0,
+				userName: '采美网络信息有限公司',
+				sourceType: 4,
+				state: 1
+			},
+			queryData: {
+				startAddTime: '',
+				endAddTime: ''
+			},
+			date: currentDate,
+			currents: 0,
+			tabCurrents: 0,
+			userID: 0,
+			openId: '',
+			listQuery: Object.assign({}, defaultListQuery),
+			payList: [
+				{
+					id: 6090,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 1, //收款类型
+					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: 33,
+					userName: '采美网络信息有限公司',
+					sourceType: 1,
+					state: 1,
+					isChecked: false
+				},
+				{
+					id: 6090,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 1, //收款类型
+					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: 33,
+					userName: '采美网络信息有限公司',
+					sourceType: 2,
+					state: 1,
+					isChecked: false
+				},
+				{
+					id: 6092,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 1, //收款类型
+					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: 33,
+					userName: '采美网络信息有限公司',
+					sourceType: 3,
+					state: 2,
+					isChecked: false
+				},
+				{
+					id: 6092,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 1, //收款类型
+					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: 33,
+					userName: '采美网络信息有限公司',
+					sourceType: 4,
+					state: 2,
+					isChecked: false
+				}
+			],
+			btnoRderID: 0, //点击按钮传入的的订单ID
+			scrollTop: 0,
+			deteleType: '',
+			skeletonShow: true,
+			isEmpty: false,
+			isDelete: false,
+			isModalLayer: false,
+			loadding: false,
+			pullUpOn: true,
+			total: 0,
+			pullFlag: true,
+			navbarHeight: '',
+			nomoreText: '上拉显示更多',
+			contentModalText: '', //操作文字提示语句
+			modal: false,
+			rightDrawer: false,
+			hanldOrder: '', //储存监听订单信息
+			OperationType: '', //操作类型
+			isCmcustomClass: 'left',
+			height: 64, //header高度
+			top: 0, //标题图标距离顶部距离
+			scrollH: 0, //滚动总高度
+			opcity: 1
+		}
+	},
+	onLoad() {
+		let obj = {}
+		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: {
+		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
+		},
+		formatSourceType(value) {
+			switch (value) {
+				case 1:
+					return '订单'
+					break
+				case 2:
+					return '非订单'
+					break
+				case 3:
+					return '返佣'
+					break
+				case 4:
+					return '供应商退款'
+					break
+			}
+		},
+		formatStateType(value) {
+			switch (value) {
+				case 0:
+					return '待确认'
+					break
+				case 1:
+					return '已确认'
+					break
+				case 2:
+					return '待审核'
+					break
+				case 3:
+					return '审核通过'
+					break
+			}
+		},
+		formatOrderType(value) {
+			switch (value) {
+				case 1:
+					return '普通订单'
+					break
+				case 2:
+					return '协销订单'
+					break
+				case 3:
+					return '客服订单'
+					break
+			}
+		},
+		NumFormat: function(text) {
+			//处理金额
+			return Number(text).toFixed(2)
+		}
+	},
+	computed: {
+		...mapState(['hasLogin', 'userInfo']),
+		startDate() {
+			return this.getDate('start')
+		},
+		endDate() {
+			return this.getDate('end')
+		}
+	},
+	methods: {
+		getDate(type) {
+			const date = new Date()
+			let year = date.getFullYear()
+			let month = date.getMonth() + 1
+			let day = date.getDate()
+			if (type === 'start') {
+				year = year - 1
+			} else if (type === 'end') {
+				year = year + 1
+			}
+			month = month > 9 ? month : '0' + month
+			day = day > 9 ? day : '0' + day
+			return `${year}-${month}-${day}`
+		},
+		bindStartDateChange(event) {
+			//开始时间
+			console.log('开始时间==>', event.detail.value)
+			this.queryData.startAddTime = event.detail.value
+		},
+		bindEndDateChange(event) {
+			//结束时间
+			console.log('结束时间==>', event.detail.value)
+			this.queryData.endAddTime = event.detail.value
+		},
+		getOrderDatainit(index) {
+			this.listQuery.pageNum = 1
+			this.OrderService.OrderList(
+				Object.assign(
+					{
+						status: index
+					},
+					this.listQuery
+				)
+			)
+				.then(response => {
+					let resData = response.data.list
+					this.total = response.data.total
+					if (resData && resData.length > 0) {
+						this.isEmpty = false
+						this.orderData = [...resData]
+						this.hanldOrderList(this.orderData)
+						if (this.total > this.orderData.length) {
+							this.pullUpOn = false
+							this.nomoreText = '上拉显示更多'
+						} else {
+							if (this.orderData.length < 5) {
+								this.pullUpOn = true
+							} else {
+								this.pullUpOn = false
+								this.nomoreText = '已至底部'
+							}
+						}
+					} else {
+						this.isEmpty = true
+					}
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		getOnReachBottomData(index) {
+			//上拉加载
+			this.listQuery.pageNum += 1
+			this.OrderService.OrderList(
+				Object.assign(
+					{
+						status: index
+					},
+					this.listQuery
+				)
+			).then(response => {
+				let resData = response.data.list
+				this.total = response.data.total
+				this.orderData = this.orderData.concat(resData)
+				this.hanldOrderList(this.orderData)
+				this.pullFlag = false // 防上拉暴滑
+				setTimeout(() => {
+					this.pullFlag = true
+				}, 500)
+				if (this.total > this.orderData.length) {
+					this.pullUpOn = false
+					this.nomoreText = '上拉显示更多'
+				} else {
+					this.loadding = false
+					this.pullUpOn = false
+					this.nomoreText = '已至底部'
+				}
+			})
+		},
+		change(e) {
+			//切换tab传递当前tab[index]执行初始化方法
+			this.currentTabs = e.index
+			switch (e.index) {
+				case 0:
+					this.currentTab = -1
+					break
+				case 1:
+					this.currentTab = 0
+					break
+				case 2:
+					this.currentTab = 1
+					break
+				case 3:
+					this.currentTab = 2
+					break
+				case 4:
+					this.currentTab = 3
+					break
+				case 5:
+					this.currentTab = 4
+					break
+			}
+			this.pageNum = 1
+			this.orderData = []
+			this.pullUpOn = true //切换时隐藏
+			this.loadding = false //切换时隐藏
+			this.getOrderDatainit(this.currentTab)
+		},
+		orderDetail(id) {
+			//订单详情跳转
+			this.isModalLayer = true
+			this.$api.navigateTo(`/pages/relation/order/detail?orderId=${id}`)
+		},
+		handButtonConfirm(data) {
+			//获取点击
+			console.log('data', data)
+			// this.handShowAlert(data)
+		},
+		handShowAlert(data) {
+			console.log('data', data)
+			//执行
+			switch (data.type) {
+				case 'pay':
+					this.$api.navigateTo(`/pages/user/order/order-details?path=pay&state=0&orderID=${this.btnoRderID}`)
+					break
+				case 'delete':
+					this.modal = true
+					this.contentModalText = '确认删除该订单吗？'
+					break
+				case 'cancel':
+					this.modal = true
+					this.contentModalText = '确认关闭该订单吗？'
+					break
+				case 'refund':
+					uni.setStorageSync('refundData', data.order)
+					this.$api.navigateTo('/pages/user/order/order-refund')
+					break
+				case 'returned':
+					uni.setStorageSync('refundData', data.order)
+					this.$api.navigateTo('/pages/user/order/order-refund')
+					break
+				case 'query':
+					this.isModalLayer = true
+					this.$api.navigateTo('/pages/user/order/order-logistics?orderID=' + data.orderId)
+					break
+				case 'confirm':
+					this.modal = true
+					this.contentModalText = '是否确认收货？'
+					// this.handOrderConfirm(data.orderId);
+					break
+				case 'cancelRefund':
+					this.modal = true
+					this.contentModalText = '确定取消退货/退款？'
+					// this.handCancelRefundConfirm(data.orderId);
+					break
+			}
+		},
+		handleClick(e) {
+			//用户操作订单
+			let index = e.index
+			if (index == 1) {
+				switch (this.OperationType) {
+					case 'delete': //删除订单
+						this.handOrderDetele(this.hanldOrder)
+						break
+					case 'cancel': //取消订单
+						this.modal = true
+						this.handCenceConfirm(this.hanldOrder)
+						break
+					case 'refund': //退款
+						this.modal = true
+						this.handRefundConfirm(this.hanldOrder)
+						break
+					case 'returned': //退货
+						this.modal = true
+						this.handReturnedConfirm(this.hanldOrder)
+						break
+					case 'confirm': //确认收货
+						this.handOrderConfirm(this.hanldOrder)
+						break
+					case 'cancelRefund': //确认收货
+						this.handCancelRefundConfirm(this.hanldOrder)
+						break
+				}
+			}
+			this.modal = false
+		},
+		checkedOrder(payment) {
+			// 勾选关联订单
+			payment.isChecked = !payment.isChecked
+		},
+		hideMobel() {
+			this.modal = false
+		},
+		hanldOrderList(list) {
+			let state = ''
+			for (let i = 0; i < list.length; i++) {
+				if (list[i].status == 4) {
+					state = list[i].returnApplyStatus
+					switch (state) {
+						case 0:
+							list[i].status = 40
+							break
+						case 1:
+							list[i].status = 41
+							break
+						case 2:
+							list[i].status = 42
+							break
+						case 3:
+							list[i].status = 43
+							break
+					}
+				}
+			}
+		},
+		//订单状态文字和颜色
+		orderStateExp(state) {
+			let stateText = '',
+				stateTextObject = {
+					0: '待付款',
+					1: '待发货',
+					2: '已发货',
+					3: '已完成',
+					4: '已关闭',
+					5: '无效订单'
+				}
+			Object.keys(stateTextObject).forEach(key => {
+				if (key == state) {
+					stateText = stateTextObject[key]
+				}
+			})
+			return stateText
+		},
+		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
+		},
+		orderPriceToFixed(n) {
+			let price = ''
+			price = Number(n).toFixed(2)
+			return price
+		},
+		tabClick(type, index) {
+			switch (type) {
+				case 1:
+					this.currents = index
+					this.getOrderDatainit(this.currents)
+					this.tabCurrents = 0
+					break
+				case 2:
+					this.tabCurrents = index
+					this.getOrderDatainit(this.currents)
+			}
+		},
+		bindDateChange: function(e) {
+			//选择筛选时间
+			console.log(e)
+			this.listQuery.date = e.detail.value
+			console.log(this.listQuery.date)
+		},
+		bindPickerChange: function(type, e) {
+			//选择筛选条件
+			if (type == 1) {
+				this.listQuery.classification = this.Array[e.target.value].name
+				console.log(this.listQuery.classification)
+			} else {
+				this.listQuery.source = this.Array1[e.target.value].name
+				console.log(this.listQuery.source)
+			}
+		},
+		toNoSms(url) {
+			this.$api.navigateTo(url)
+		}
+	},
+	onPageScroll(e) {
+		//实时获取到滚动的值
+		if (e.scrollTop > 30) {
+			this.isCmcustomClass = 'fiexd'
+		} else {
+			this.isCmcustomClass = 'left'
+		}
+	},
+	onReachBottom() {
+		if (this.total > this.orderData.length) {
+			this.loadding = true
+			this.pullUpOn = true
+			this.getOnReachBottomData(this.currents)
+		}
+	},
+	onPullDownRefresh() {
+		setTimeout(() => {
+			this.listQuery.pageNum = 1
+			this.currents = 0
+			// this.getOrderDatainit(this.currents)
+			uni.stopPullDownRefresh()
+		}, 200)
+	},
+	onShareAppMessage(res) {
+		//分享购买优惠券
+		const payment = res.target.dataset.payment
+		console.log('payment', payment)
+		if (res.from === 'button') {
+			// console.log('来自页面内转发按钮')
+			return {
+				title: `【待确认】收款金额${payment.receiptAmount.toFixed(2)}元,收款时间:${payment.receiptDate}`,
+				path: `pages/seller/cart/coupon-share?payment=${payment.id}`,
+				imageUrl: 'https://static.caimei365.com/app/img/icon/icon-shareCoupon@2x.png'
+			}
+		}
+	},
+	onShow() {
+		this.$api.getComStorage('userInfo').then(resolve => {
+			this.listQuery.merchantId = resolve.id
+			// this.getOrderDatainit(this.currents)
+		})
+	}
+}
+</script>
+
+<style lang="scss">
+@import '@/uni.scss';
+
+page {
+	background: #f7f7f7;
+}
+
+.tui-header-box {
+	width: 100%;
+	background: #ffffff;
+	z-index: 999;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background-size: cover;
+	background-image: url(https://static.caimei365.com/app/crm/image/statistic_bg2.png);
+
+	&.fiexd {
+	}
+
+	&.first {
+	}
+}
+.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 {
+		font-size: 42rpx;
+		margin-right: 10rpx;
+	}
+}
+
+.tui-header-tabs {
+	width: 100%;
+	height: auto;
+	margin-bottom: 40rpx;
+	padding: 20rpx 24rpx;
+	background: #ffffff;
+	box-sizing: border-box;
+	position: fixed;
+	z-index: 999;
+	box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);
+	.tui-header-top {
+		width: 100%;
+		height: 66rpx;
+		box-sizing: border-box;
+		float: left;
+		.title {
+			float: left;
+			line-height: 66rpx;
+			color: #333333;
+			text-align: left;
+			font-size: $font-size-30;
+			font-weight: 600;
+		}
+		.tui-header-button {
+			float: right;
+			box-sizing: border-box;
+			height: 100%;
+			line-height: 66rpx;
+			padding: 5rpx 0;
+			.button {
+				float: left;
+				box-sizing: border-box;
+				padding: 0 24rpx;
+				height: 100%;
+				line-height: 56rpx;
+				border-radius: 8rpx;
+				text-align: center;
+				color: #ffffff;
+				margin-left: 10rpx;
+				&.btn-confirm {
+					background: $btn-confirm;
+				}
+			}
+		}
+	}
+	.tui-header-item {
+		width: 100%;
+		height: auto;
+		margin-top: 10rpx;
+		position: relative;
+		float: left;
+		.list-title-t {
+			width: 100%;
+			height: 50rpx;
+			float: left;
+			font-size: $font-size-28;
+			padding-bottom: 10rpx;
+			margin-bottom: 10rpx;
+			.list-title-num {
+				float: left;
+				text-align: left;
+				color: #999999;
+				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: $btn-confirm;
+					font-size: $font-size-24;
+					text-align: center;
+					color: #ffffff;
+				}
+			}
+		}
+
+		.list-title-b {
+			width: 100%;
+			height: 40rpx;
+			float: left;
+			font-size: $font-size-24;
+			line-height: 40rpx;
+			color: #999999;
+			text-align: left;
+			.list-title-b-item {
+				width: 50%;
+				height: 100%;
+				float: left;
+			}
+			&.sms {
+				height: 100rpx;
+				padding: 10rpx;
+				border-radius: 4rpx;
+			}
+		}
+		.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: '正楷';
+		}
+	}
+	.tui-header-tabmain {
+		width: 100%;
+		height: 70rpx;
+		float: left;
+		position: relative;
+		margin-top: 10rpx;
+		.input {
+			width: 100%;
+			height: 70rpx;
+			box-sizing: border-box;
+			padding: 0 20rpx;
+			padding-right: 100rpx;
+			background: #f7f7f7;
+			border-radius: 8rpx;
+		}
+		.icon-sousuo {
+			width: 100rpx;
+			height: 70rpx;
+			display: block;
+			line-height: 70rpx;
+			text-align: center;
+			color: $color-system;
+			font-size: $font-size-36;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+	}
+	.button-content {
+		width: 100%;
+		height: auto;
+		float: left;
+		position: relative;
+		.btn {
+			height: 64rpx;
+			padding: 0 20rpx;
+			margin: 10rpx 0 0 0;
+			line-height: 64rpx;
+			font-size: $font-size-26;
+			text-align: center;
+			border-radius: 6rpx;
+			float: right;
+		}
+		.btn-confirm {
+			background-color: #ff5000;
+			color: #ffffff;
+		}
+	}
+}
+
+.distinguish-button {
+	width: 100%;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	background-color: #ffffff;
+	padding: 0 50rpx;
+	padding-top: 20rpx;
+	.button {
+		width: 100%;
+		height: 80rpx;
+		background: $btn-confirm;
+		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);
+	}
+}
+
+.user-section {
+	position: absolute;
+	width: 100%;
+}
+
+.header-content {
+	width: 100%;
+	height: auto;
+	position: relative;
+	background-color: #f7f7f7;
+	.tui-header-btm {
+		width: 100%;
+		padding: 0 30rpx;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		color: #fff;
+	}
+
+	.tui-btm-item {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.tui-btm-num {
+		font-size: 32rpx;
+		font-weight: 600;
+		position: relative;
+	}
+
+	.tui-btm-text {
+		font-size: 24rpx;
+		opacity: 0.85;
+		padding-top: 4rpx;
+	}
+}
+
+.uni-badge--small {
+	-webkit-transform: scale(0.8);
+	-ms-transform: scale(0.8);
+	transform: scale(0.8);
+	-webkit-transform-origin: center center;
+	-ms-transform-origin: center center;
+	transform-origin: center center;
+}
+
+.uni-badge {
+	font-family: 'Helvetica Neue', Helvetica, sans-serif;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	font-size: 12px;
+	line-height: 1;
+	display: inline-block;
+	padding: 3px 6px;
+	color: #333;
+	border-radius: 100px;
+	background-color: #f1f1f1;
+}
+
+.uni-badge-error {
+	color: #fff;
+	background-color: #dd524d;
+}
+
+.tui-order-list {
+	margin-top: 24rpx;
+	width: 100%;
+	position: relative;
+	box-sizing: border-box;
+	padding: 0 20rpx;
+}
+
+.tui-order-content {
+	width: 100%;
+	height: auto;
+}
+
+.tui-order-item {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	padding: 20rpx 20rpx;
+	background: #fff;
+	margin-bottom: 24rpx;
+	border-radius: 8rpx;
+	position: relative;
+	.list-checked {
+		width: 80rpx;
+		height: 80rpx;
+		line-height: 80rpx;
+		text-align: center;
+		position: absolute;
+		right: 0;
+		top: 0;
+		.iconfont {
+			font-size: 38rpx;
+			color: $color-system;
+		}
+	}
+	.list-detail {
+		width: 80rpx;
+		height: 280rpx;
+		line-height: 280rpx;
+		text-align: center;
+		position: absolute;
+		right: 0;
+		top: 120rpx;
+		.iconfont {
+			font-size: $font-size-30;
+			color: #999999;
+		}
+	}
+}
+
+.list-title {
+	width: 100%;
+	height: auto;
+
+	.list-title-t {
+		width: 100%;
+		height: 50rpx;
+		float: left;
+		font-size: $font-size-24;
+		padding-bottom: 10rpx;
+		.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-num {
+			float: left;
+			text-align: left;
+			color: #e15616;
+			line-height: 40rpx;
+			margin-left: 20rpx;
+		}
+	}
+	.list-title-a {
+		width: 100%;
+		height: auto;
+		float: left;
+		padding: 5rpx 8rpx;
+		border-radius: 4rpx;
+		background-color: rgba(247, 247, 247, 1);
+		margin-bottom: 10rpx;
+		.list-title-a-text {
+			width: 100%;
+			height: 40rpx;
+			float: left;
+			font-size: $font-size-24;
+			line-height: 40rpx;
+			color: #999999;
+			text-align: left;
+			.list-title-b-item {
+				width: 50%;
+				height: 100%;
+				float: left;
+			}
+		}
+	}
+	.list-title-b {
+		width: 100%;
+		height: 40rpx;
+		float: left;
+		font-size: $font-size-24;
+		line-height: 40rpx;
+		color: #999999;
+		text-align: left;
+		.list-title-b-item {
+			width: 50%;
+			height: 100%;
+			float: left;
+		}
+		&.sms {
+			height: auto;
+		}
+	}
+}
+</style>

pages/relation/return/index.vue

@@ -0,0 +1,1155 @@
+<template>
+	<view class="container mine clearfix">
+		<view
+			class="tui-header-box first"
+			:style="{ height: isCmcustomClass == 'fiexd' ? CustomBar + 6 + 'px' : CustomBar + 6 + 'px' }"
+			:class="isCmcustomClass"
+		>
+			<view class="header-top" :style="{ paddingTop: top + 'px', lineHeight: CustomBar + 20 + '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-tabs day clearfix" :style="{ top: CustomBar + 6 + 'px' }">
+			<view class="tui-header-top">
+				<view class="title"> 收款信息 </view>
+				<view class="tui-header-button">
+					<view class="button btn-confirm" @click="toNoSms('/pages/collection/list')">
+						<text class="iconfont icon-wodedingdan"></text> 收款列表
+					</view>
+				</view>
+			</view>
+			<view class="tui-header-item">
+				<view class="list-title-t">
+					<view class="list-title-tip">
+						<text class="badges">{{ paymentInfo.sourceType | formatSourceType }}</text>
+					</view>
+					<view class="list-title-num" :style="{ color: formatColor(paymentInfo.confirmType) }">{{
+						paymentInfo.confirmType | formatStateType
+					}}</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>
+				<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>
+				</template>
+				<view class="list-icon">无人确认</view>
+			</view>
+			<view class="tui-header-tabmain">
+				<input
+					class="input"
+					type="text"
+					confirm-type="search"
+					@confirm="subMitSearch()"
+					placeholder="请输入供应商名称"
+				/>
+				<text class="iconfont icon-sousuo"></text>
+			</view>
+		</view>
+		<view
+			class="user-section"
+			:style="{
+				top: isIphoneX ? CustomBar + 260 + 'px' : CustomBar + 250 + 'px',
+				left: 0 + 'px',
+				paddingBottom: isIphoneX ? '178rpx' : '144rpx'
+			}"
+		>
+			<view class="header-content">
+				<view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
+					<!-- 空白页 -->
+					<empty v-if="isEmpty" :typeIndex="currents" :navbarHeight="navbarHeight"></empty>
+					<!-- 列表 -->
+					<view v-else class="tui-order-content">
+						<view
+							class="tui-order-item"
+							v-for="(payment, payIndex) in payList"
+							:key="payIndex"
+							@click.stop="orderDetail(payment.id)"
+						>
+							<view class="list-title">
+								<view class="list-title-t">
+									<view class="list-title-tip">
+										<text class="badges">{{ payment.orderType | formatOrderType }}</text>
+									</view>
+									<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>
+								<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 }}
+									</view>
+									<view class="list-title-b-item ">
+										已收金额：￥{{ payment.receiptAmount | NumFormat }}
+									</view>
+								</view>
+							</view>
+							<view class="list-checked" @click="checkedOrder(payment)">
+								<text
+									class="iconfont"
+									:class="payment.isChecked ? 'icon-yixuanze' : 'icon-weixuanze'"
+								></text>
+							</view>
+							<view class="list-detail" @click="handelDetail(payment)">
+								<text class="iconfont icon-xiayibu"></text>
+							</view>
+						</view>
+						<!--加载loadding-->
+						<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
+						<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text="nomoreText"></tui-nomore>
+						<!--加载loadding-->
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="distinguish-button" :style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }">
+			<view class="button" @click="confirmDistinguish">确认</view>
+		</view>
+		<!-- 弹窗 -->
+		<tui-modal
+			:show="modal"
+			@click="handleClick"
+			@cancel="hideMobel"
+			:content="contentModalText"
+			color="#333"
+			:size="32"
+			shape="circle"
+			:maskClosable="false"
+		></tui-modal>
+	</view>
+</template>
+<script>
+import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
+import modalLayer from '@/components/modal-layer'
+import empty from '@/components/empty'
+import wxLogin from '@/services/wxLogin.js'
+import { mapState, mapMutations } from 'vuex'
+const defaultListQuery = {
+	pageNum: 1, //页数
+	pageSize: 10, //条数
+	orderNum: '',
+	phone: '',
+	date: '', //订单提交时间
+	classification: '', //订单分类
+	merchantId: 0,
+	source: '' //订单来源
+}
+export default {
+	components: {
+		empty
+	},
+	data() {
+		const currentDate = this.getDate({
+			format: true
+		})
+		return {
+			CustomBar: this.CustomBar, // 顶部导航栏高度
+			isIphoneX: this.$store.state.isIphoneX,
+			paymentInfo: {
+				id: 6090,
+				receiptAmount: 5000, //收款金额
+				associateAmount: 5000, //关联金额
+				payType: '广发银行-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: 0,
+				userName: '采美网络信息有限公司',
+				sourceType: 3,
+				state: 1
+			},
+			queryData: {
+				startAddTime: '',
+				endAddTime: ''
+			},
+			date: currentDate,
+			currents: 0,
+			tabCurrents: 0,
+			userID: 0,
+			openId: '',
+			listQuery: Object.assign({}, defaultListQuery),
+			payList: [
+				{
+					id: 6090,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 2, //收款类型
+					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: 33,
+					userName: '采美网络信息有限公司',
+					sourceType: 1,
+					state: 1,
+					isChecked: false
+				},
+				{
+					id: 6090,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 2, //收款类型
+					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: 33,
+					userName: '采美网络信息有限公司',
+					sourceType: 2,
+					state: 1,
+					isChecked: false
+				},
+				{
+					id: 6092,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 2, //收款类型
+					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: 33,
+					userName: '采美网络信息有限公司',
+					sourceType: 3,
+					state: 2,
+					isChecked: false
+				},
+				{
+					id: 6092,
+					number: 'W164488903271223',
+					receiptAmount: 5000, //收款金额
+					associateAmount: 5000, //关联金额
+					orderType: 2, //收款类型
+					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: 33,
+					userName: '采美网络信息有限公司',
+					sourceType: 4,
+					state: 2,
+					isChecked: false
+				}
+			],
+			btnoRderID: 0, //点击按钮传入的的订单ID
+			scrollTop: 0,
+			deteleType: '',
+			skeletonShow: true,
+			isEmpty: false,
+			isDelete: false,
+			isModalLayer: false,
+			loadding: false,
+			pullUpOn: true,
+			total: 0,
+			pullFlag: true,
+			navbarHeight: '',
+			nomoreText: '上拉显示更多',
+			contentModalText: '', //操作文字提示语句
+			modal: false,
+			rightDrawer: false,
+			hanldOrder: '', //储存监听订单信息
+			OperationType: '', //操作类型
+			isCmcustomClass: 'left',
+			height: 64, //header高度
+			top: 0, //标题图标距离顶部距离
+			scrollH: 0, //滚动总高度
+			opcity: 1
+		}
+	},
+	onLoad() {
+		let obj = {}
+		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: {
+		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
+		},
+		formatSourceType(value) {
+			switch (value) {
+				case 1:
+					return '订单'
+					break
+				case 2:
+					return '非订单'
+					break
+				case 3:
+					return '返佣'
+					break
+				case 4:
+					return '供应商退款'
+					break
+			}
+		},
+		formatStateType(value) {
+			switch (value) {
+				case 0:
+					return '待确认'
+					break
+				case 1:
+					return '已确认'
+					break
+				case 2:
+					return '待审核'
+					break
+				case 3:
+					return '审核通过'
+					break
+			}
+		},
+		formatOrderType(value) {
+			switch (value) {
+				case 1:
+					return '自主订单'
+					break
+				case 2:
+					return '协销订单'
+					break
+				case 3:
+					return '客服订单'
+					break
+			}
+		},
+		NumFormat: function(text) {
+			//处理金额
+			return Number(text).toFixed(2)
+		}
+	},
+	computed: {
+		...mapState(['hasLogin', 'userInfo']),
+		startDate() {
+			return this.getDate('start')
+		},
+		endDate() {
+			return this.getDate('end')
+		}
+	},
+	methods: {
+		getDate(type) {
+			const date = new Date()
+			let year = date.getFullYear()
+			let month = date.getMonth() + 1
+			let day = date.getDate()
+			if (type === 'start') {
+				year = year - 1
+			} else if (type === 'end') {
+				year = year + 1
+			}
+			month = month > 9 ? month : '0' + month
+			day = day > 9 ? day : '0' + day
+			return `${year}-${month}-${day}`
+		},
+		bindStartDateChange(event) {
+			//开始时间
+			console.log('开始时间==>', event.detail.value)
+			this.queryData.startAddTime = event.detail.value
+		},
+		bindEndDateChange(event) {
+			//结束时间
+			console.log('结束时间==>', event.detail.value)
+			this.queryData.endAddTime = event.detail.value
+		},
+		getOrderDatainit(index) {
+			this.listQuery.pageNum = 1
+			this.OrderService.OrderList(
+				Object.assign(
+					{
+						status: index
+					},
+					this.listQuery
+				)
+			)
+				.then(response => {
+					let resData = response.data.list
+					this.total = response.data.total
+					if (resData && resData.length > 0) {
+						this.isEmpty = false
+						this.orderData = [...resData]
+						this.hanldOrderList(this.orderData)
+						if (this.total > this.orderData.length) {
+							this.pullUpOn = false
+							this.nomoreText = '上拉显示更多'
+						} else {
+							if (this.orderData.length < 5) {
+								this.pullUpOn = true
+							} else {
+								this.pullUpOn = false
+								this.nomoreText = '已至底部'
+							}
+						}
+					} else {
+						this.isEmpty = true
+					}
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		getOnReachBottomData(index) {
+			//上拉加载
+			this.listQuery.pageNum += 1
+			this.OrderService.OrderList(
+				Object.assign(
+					{
+						status: index
+					},
+					this.listQuery
+				)
+			).then(response => {
+				let resData = response.data.list
+				this.total = response.data.total
+				this.orderData = this.orderData.concat(resData)
+				this.hanldOrderList(this.orderData)
+				this.pullFlag = false // 防上拉暴滑
+				setTimeout(() => {
+					this.pullFlag = true
+				}, 500)
+				if (this.total > this.orderData.length) {
+					this.pullUpOn = false
+					this.nomoreText = '上拉显示更多'
+				} else {
+					this.loadding = false
+					this.pullUpOn = false
+					this.nomoreText = '已至底部'
+				}
+			})
+		},
+		change(e) {
+			//切换tab传递当前tab[index]执行初始化方法
+			this.currentTabs = e.index
+			switch (e.index) {
+				case 0:
+					this.currentTab = -1
+					break
+				case 1:
+					this.currentTab = 0
+					break
+				case 2:
+					this.currentTab = 1
+					break
+				case 3:
+					this.currentTab = 2
+					break
+				case 4:
+					this.currentTab = 3
+					break
+				case 5:
+					this.currentTab = 4
+					break
+			}
+			this.pageNum = 1
+			this.orderData = []
+			this.pullUpOn = true //切换时隐藏
+			this.loadding = false //切换时隐藏
+			this.getOrderDatainit(this.currentTab)
+		},
+		orderDetail(id) {
+			//订单详情跳转
+			this.isModalLayer = true
+			this.$api.navigateTo(`/pages/relation/order/detail?orderId=${id}`)
+		},
+		handButtonConfirm(data) {
+			//获取点击
+			console.log('data', data)
+			// this.handShowAlert(data)
+		},
+		handShowAlert(data) {
+			console.log('data', data)
+			//执行
+			switch (data.type) {
+				case 'pay':
+					this.$api.navigateTo(`/pages/user/order/order-details?path=pay&state=0&orderID=${this.btnoRderID}`)
+					break
+				case 'delete':
+					this.modal = true
+					this.contentModalText = '确认删除该订单吗？'
+					break
+				case 'cancel':
+					this.modal = true
+					this.contentModalText = '确认关闭该订单吗？'
+					break
+				case 'refund':
+					uni.setStorageSync('refundData', data.order)
+					this.$api.navigateTo('/pages/user/order/order-refund')
+					break
+				case 'returned':
+					uni.setStorageSync('refundData', data.order)
+					this.$api.navigateTo('/pages/user/order/order-refund')
+					break
+				case 'query':
+					this.isModalLayer = true
+					this.$api.navigateTo('/pages/user/order/order-logistics?orderID=' + data.orderId)
+					break
+				case 'confirm':
+					this.modal = true
+					this.contentModalText = '是否确认收货？'
+					// this.handOrderConfirm(data.orderId);
+					break
+				case 'cancelRefund':
+					this.modal = true
+					this.contentModalText = '确定取消退货/退款？'
+					// this.handCancelRefundConfirm(data.orderId);
+					break
+			}
+		},
+		handleClick(e) {
+			//用户操作订单
+			let index = e.index
+			if (index == 1) {
+				switch (this.OperationType) {
+					case 'delete': //删除订单
+						this.handOrderDetele(this.hanldOrder)
+						break
+					case 'cancel': //取消订单
+						this.modal = true
+						this.handCenceConfirm(this.hanldOrder)
+						break
+					case 'refund': //退款
+						this.modal = true
+						this.handRefundConfirm(this.hanldOrder)
+						break
+					case 'returned': //退货
+						this.modal = true
+						this.handReturnedConfirm(this.hanldOrder)
+						break
+					case 'confirm': //确认收货
+						this.handOrderConfirm(this.hanldOrder)
+						break
+					case 'cancelRefund': //确认收货
+						this.handCancelRefundConfirm(this.hanldOrder)
+						break
+				}
+			}
+			this.modal = false
+		},
+		checkedOrder(payment) {
+			// 勾选关联订单
+			payment.isChecked = !payment.isChecked
+		},
+		hideMobel() {
+			this.modal = false
+		},
+		hanldOrderList(list) {
+			let state = ''
+			for (let i = 0; i < list.length; i++) {
+				if (list[i].status == 4) {
+					state = list[i].returnApplyStatus
+					switch (state) {
+						case 0:
+							list[i].status = 40
+							break
+						case 1:
+							list[i].status = 41
+							break
+						case 2:
+							list[i].status = 42
+							break
+						case 3:
+							list[i].status = 43
+							break
+					}
+				}
+			}
+		},
+		//订单状态文字和颜色
+		orderStateExp(state) {
+			let stateText = '',
+				stateTextObject = {
+					0: '待付款',
+					1: '待发货',
+					2: '已发货',
+					3: '已完成',
+					4: '已关闭',
+					5: '无效订单'
+				}
+			Object.keys(stateTextObject).forEach(key => {
+				if (key == state) {
+					stateText = stateTextObject[key]
+				}
+			})
+			return stateText
+		},
+		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
+		},
+		orderPriceToFixed(n) {
+			let price = ''
+			price = Number(n).toFixed(2)
+			return price
+		},
+		tabClick(type, index) {
+			switch (type) {
+				case 1:
+					this.currents = index
+					this.getOrderDatainit(this.currents)
+					this.tabCurrents = 0
+					break
+				case 2:
+					this.tabCurrents = index
+					this.getOrderDatainit(this.currents)
+			}
+		},
+		bindDateChange: function(e) {
+			//选择筛选时间
+			console.log(e)
+			this.listQuery.date = e.detail.value
+			console.log(this.listQuery.date)
+		},
+		bindPickerChange: function(type, e) {
+			//选择筛选条件
+			if (type == 1) {
+				this.listQuery.classification = this.Array[e.target.value].name
+				console.log(this.listQuery.classification)
+			} else {
+				this.listQuery.source = this.Array1[e.target.value].name
+				console.log(this.listQuery.source)
+			}
+		},
+		toNoSms(url) {
+			this.$api.navigateTo(url)
+		}
+	},
+	onPageScroll(e) {
+		//实时获取到滚动的值
+		if (e.scrollTop > 30) {
+			this.isCmcustomClass = 'fiexd'
+		} else {
+			this.isCmcustomClass = 'left'
+		}
+	},
+	onReachBottom() {
+		if (this.total > this.orderData.length) {
+			this.loadding = true
+			this.pullUpOn = true
+			this.getOnReachBottomData(this.currents)
+		}
+	},
+	onPullDownRefresh() {
+		setTimeout(() => {
+			this.listQuery.pageNum = 1
+			this.currents = 0
+			// this.getOrderDatainit(this.currents)
+			uni.stopPullDownRefresh()
+		}, 200)
+	},
+	onShareAppMessage(res) {
+		//分享购买优惠券
+		const payment = res.target.dataset.payment
+		console.log('payment', payment)
+		if (res.from === 'button') {
+			// console.log('来自页面内转发按钮')
+			return {
+				title: `【待确认】收款金额${payment.receiptAmount.toFixed(2)}元,收款时间:${payment.receiptDate}`,
+				path: `pages/seller/cart/coupon-share?payment=${payment.id}`,
+				imageUrl: 'https://static.caimei365.com/app/img/icon/icon-shareCoupon@2x.png'
+			}
+		}
+	},
+	onShow() {
+		this.$api.getComStorage('userInfo').then(resolve => {
+			this.listQuery.merchantId = resolve.id
+			// this.getOrderDatainit(this.currents)
+		})
+	}
+}
+</script>
+
+<style lang="scss">
+@import '@/uni.scss';
+
+page {
+	background: #f7f7f7;
+}
+
+.tui-header-box {
+	width: 100%;
+	background: #ffffff;
+	z-index: 999;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background-size: cover;
+	background-image: url(https://static.caimei365.com/app/crm/image/statistic_bg2.png);
+
+	&.fiexd {
+	}
+
+	&.first {
+	}
+}
+.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 {
+		font-size: 42rpx;
+		margin-right: 10rpx;
+	}
+}
+
+.tui-header-tabs {
+	width: 100%;
+	height: auto;
+	margin-bottom: 40rpx;
+	padding: 20rpx 24rpx;
+	background: #ffffff;
+	box-sizing: border-box;
+	position: fixed;
+	z-index: 999;
+	box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);
+	.tui-header-top {
+		width: 100%;
+		height: 66rpx;
+		box-sizing: border-box;
+		float: left;
+		.title {
+			float: left;
+			line-height: 66rpx;
+			color: #333333;
+			text-align: left;
+			font-size: $font-size-30;
+			font-weight: 600;
+		}
+		.tui-header-button {
+			float: right;
+			box-sizing: border-box;
+			height: 100%;
+			line-height: 66rpx;
+			padding: 5rpx 0;
+			.button {
+				float: left;
+				box-sizing: border-box;
+				padding: 0 24rpx;
+				height: 100%;
+				line-height: 56rpx;
+				border-radius: 8rpx;
+				text-align: center;
+				color: #ffffff;
+				margin-left: 10rpx;
+				&.btn-confirm {
+					background: $btn-confirm;
+				}
+			}
+		}
+	}
+	.tui-header-item {
+		width: 100%;
+		height: auto;
+		margin-top: 10rpx;
+		position: relative;
+		float: left;
+		.list-title-t {
+			width: 100%;
+			height: 50rpx;
+			float: left;
+			font-size: $font-size-28;
+			padding-bottom: 10rpx;
+			margin-bottom: 10rpx;
+			.list-title-num {
+				float: left;
+				text-align: left;
+				color: #999999;
+				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: $btn-confirm;
+					font-size: $font-size-24;
+					text-align: center;
+					color: #ffffff;
+				}
+			}
+		}
+
+		.list-title-b {
+			width: 100%;
+			height: 40rpx;
+			float: left;
+			font-size: $font-size-24;
+			line-height: 40rpx;
+			color: #999999;
+			text-align: left;
+			.list-title-b-item {
+				width: 50%;
+				height: 100%;
+				float: left;
+			}
+			&.sms {
+				height: 100rpx;
+				padding: 10rpx;
+				border-radius: 4rpx;
+			}
+		}
+		.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: '正楷';
+		}
+	}
+	.tui-header-tabmain {
+		width: 100%;
+		height: 70rpx;
+		float: left;
+		position: relative;
+		margin-top: 10rpx;
+		.input {
+			width: 100%;
+			height: 70rpx;
+			box-sizing: border-box;
+			padding: 0 20rpx;
+			padding-right: 100rpx;
+			background: #f7f7f7;
+			border-radius: 8rpx;
+		}
+		.icon-sousuo {
+			width: 100rpx;
+			height: 70rpx;
+			display: block;
+			line-height: 70rpx;
+			text-align: center;
+			color: $color-system;
+			font-size: $font-size-36;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+	}
+	.button-content {
+		width: 100%;
+		height: auto;
+		float: left;
+		position: relative;
+		.btn {
+			height: 64rpx;
+			padding: 0 20rpx;
+			margin: 10rpx 0 0 0;
+			line-height: 64rpx;
+			font-size: $font-size-26;
+			text-align: center;
+			border-radius: 6rpx;
+			float: right;
+		}
+		.btn-confirm {
+			background-color: #ff5000;
+			color: #ffffff;
+		}
+	}
+}
+
+.distinguish-button {
+	width: 100%;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	background-color: #ffffff;
+	padding: 0 50rpx;
+	padding-top: 20rpx;
+	.button {
+		width: 100%;
+		height: 80rpx;
+		background: $btn-confirm;
+		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);
+	}
+}
+
+.user-section {
+	position: absolute;
+	width: 100%;
+}
+
+.header-content {
+	width: 100%;
+	height: auto;
+	position: relative;
+	background-color: #f7f7f7;
+	.tui-header-btm {
+		width: 100%;
+		padding: 0 30rpx;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		color: #fff;
+	}
+
+	.tui-btm-item {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.tui-btm-num {
+		font-size: 32rpx;
+		font-weight: 600;
+		position: relative;
+	}
+
+	.tui-btm-text {
+		font-size: 24rpx;
+		opacity: 0.85;
+		padding-top: 4rpx;
+	}
+}
+
+.uni-badge--small {
+	-webkit-transform: scale(0.8);
+	-ms-transform: scale(0.8);
+	transform: scale(0.8);
+	-webkit-transform-origin: center center;
+	-ms-transform-origin: center center;
+	transform-origin: center center;
+}
+
+.uni-badge {
+	font-family: 'Helvetica Neue', Helvetica, sans-serif;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	font-size: 12px;
+	line-height: 1;
+	display: inline-block;
+	padding: 3px 6px;
+	color: #333;
+	border-radius: 100px;
+	background-color: #f1f1f1;
+}
+
+.uni-badge-error {
+	color: #fff;
+	background-color: #dd524d;
+}
+
+.tui-order-list {
+	margin-top: 24rpx;
+	width: 100%;
+	position: relative;
+	box-sizing: border-box;
+	padding: 0 20rpx;
+}
+
+.tui-order-content {
+	width: 100%;
+	height: auto;
+}
+
+.tui-order-item {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	padding: 20rpx 20rpx;
+	background: #fff;
+	margin-bottom: 24rpx;
+	border-radius: 8rpx;
+	position: relative;
+	.list-checked {
+		width: 80rpx;
+		height: 80rpx;
+		line-height: 80rpx;
+		text-align: center;
+		position: absolute;
+		right: 0;
+		top: 0;
+		.iconfont {
+			font-size: 38rpx;
+			color: $color-system;
+		}
+	}
+	.list-detail {
+		width: 80rpx;
+		height: 280rpx;
+		line-height: 280rpx;
+		text-align: center;
+		position: absolute;
+		right: 0;
+		top: 80rpx;
+		.iconfont {
+			font-size: $font-size-30;
+			color: #999999;
+		}
+	}
+}
+
+.list-title {
+	width: 100%;
+	height: auto;
+
+	.list-title-t {
+		width: 100%;
+		height: 50rpx;
+		float: left;
+		font-size: $font-size-24;
+		padding-bottom: 10rpx;
+		.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-num {
+			float: left;
+			text-align: left;
+			color: #e15616;
+			line-height: 40rpx;
+			margin-left: 20rpx;
+		}
+	}
+	.list-title-a {
+		width: 100%;
+		height: auto;
+		float: left;
+		padding: 5rpx 8rpx;
+		border-radius: 4rpx;
+		background-color: rgba(247, 247, 247, 1);
+		margin-bottom: 10rpx;
+		.list-title-a-text {
+			width: 100%;
+			height: 40rpx;
+			float: left;
+			font-size: $font-size-24;
+			line-height: 40rpx;
+			color: #999999;
+			text-align: left;
+		}
+	}
+	.list-title-b {
+		width: 100%;
+		height: 40rpx;
+		float: left;
+		font-size: $font-size-24;
+		line-height: 40rpx;
+		color: #999999;
+		text-align: left;
+		.list-title-b-item {
+			width: 50%;
+			height: 100%;
+			float: left;
+		}
+		&.sms {
+			height: auto;
+		}
+	}
+}
+</style>