后台接口对接

2022-05-26 20:24:33 +08:00 · 2022-05-26 20:24:33 +08:00 · c749df3323
parent dae05b8b21
commit c749df3323
10 changed files with 493 additions and 15 deletions
--- a/common/js/data.js
+++ b/common/js/data.js
@ -1701,6 +1701,90 @@ const areaList = [[{
 }]]

 const defaultAddress = null;
+
+const myMoneyBag = {
+	balance: '5221.79',
+	balanceToExtract: '0.00',
+	bankNum: '***8900',
+	bill: [{
+		duration: '2022年01月',
+		income: '20478.96',
+		outgoings: '-21065.36',
+		statement: [{
+			name: '余额支付',
+			createTime: '2022-01-19 15:44:32',
+			inOutMoney: '-170.00'
+		}, {
+			name: '商城退单',
+			createTime: '2022-01-18 15:44:32',
+			inOutMoney: '+8.00'
+		}]
+	}, {
+		duration: '2022年01月',
+		income: '20478.96',
+		outgoings: '-21065.36',
+		statement: [{
+			name: '余额支付',
+			createTime: '2022-01-19 15:44:32',
+			inOutMoney: '-170.00'
+		}, {
+			name: '商城退单',
+			createTime: '2022-01-18 15:44:32',
+			inOutMoney: '+8.00'
+		}]
+	}, {
+		duration: '2022年01月',
+		income: '20478.96',
+		outgoings: '-21065.36',
+		statement: [{
+			name: '余额支付',
+			createTime: '2022-01-19 15:44:32',
+			inOutMoney: '-170.00'
+		}, {
+			name: '商城退单',
+			createTime: '2022-01-18 15:44:32',
+			inOutMoney: '+8.00'
+		}]
+	}, {
+		duration: '2022年01月',
+		income: '20478.96',
+		outgoings: '-21065.36',
+		statement: [{
+			name: '余额支付',
+			createTime: '2022-01-19 15:44:32',
+			inOutMoney: '-170.00'
+		}, {
+			name: '商城退单',
+			createTime: '2022-01-18 15:44:32',
+			inOutMoney: '+8.00'
+		}]
+	}, {
+		duration: '2022年01月',
+		income: '20478.96',
+		outgoings: '-21065.36',
+		statement: [{
+			name: '余额支付',
+			createTime: '2022-01-19 15:44:32',
+			inOutMoney: '-170.00'
+		}, {
+			name: '商城退单',
+			createTime: '2022-01-18 15:44:32',
+			inOutMoney: '+8.00'
+		}]
+	}]
+}
+
+const statementDesc = {
+	inOutMoney: '-59.00',
+	name: '同意追加费用',
+	status: '0', //0为交易成功
+	desc: '同意追加费用',
+	payRemark: '微信支付到帐',
+	extractCode: '',
+	createTime: '2022-01-20 15:44:32',
+	orderCode: '20210612337987373',
+	orderCreateTime: '2022-01-16 15:44:32'
+}

 export default {
 	swiperList,
@ -1727,5 +1811,7 @@ export default {
 	servCategory,
 	categoryList,
 	areaList,
-	defaultAddress
+	defaultAddress,
+	statementDesc,
+	myMoneyBag
 }
--- a/common/js/request.js
+++ b/common/js/request.js
@ -7,7 +7,7 @@ export default {
 			invoke(args) {
 				// request 触发前拼接 url 
 				args.url = 'https://www.opsoul.com' + args.url;
-				// args.url = 'http://10.45.137.214:80' + args.url;
+				// args.url = 'http://10.45.110.67:80' + args.url;
 				// args.url = 'http://127.0.0.1:80' + args.url;
 				if (args.data) {
 					args.data.deptId = globalData.deptId;
@ -308,5 +308,25 @@ export default {
 			resObj = JSON.parse(resStr);
 		}
 		return resObj;
-	},
+	},
+	async qryOrderGoodsPage(params = {}) {
+		let res = await uni.request({
+			url: '/order/goods/list',
+			method: 'POST',
+			data: params,
+			header: {
+				pageNum: params.pageNum,
+				pageSize: params.pageSize
+			}
+		})
+		return res[1].data;
+	},
+	async bindBankCard(params) {
+		let res = await uni.request({
+			url: '/customer/bankcard/bind',
+			method: 'POST',
+			data: params
+		})
+		return res[1].data;
+	}
 }
--- a/components/custom-bar/load-status-bar.vue
+++ b/components/custom-bar/load-status-bar.vue
@ -0,0 +1,44 @@
+<template>
+	<view>
+		<view class="margin-bottom-lg">
+			<view v-if="hasMoreData" class="text-center bg-main-color light padding-tb-sm">
+				<text class="margin-right-xs">查看更多</text>
+				<text class="text-bold cuIcon-unfold"></text>
+			</view>
+			<view class="cu-load" :class="loadMoreStatus"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'load-status-bar',
+		data() {
+			return {
+				loadMoreStatus: '',
+				hasMoreData: true
+			}
+		},
+		methods: {
+			showLoading() {
+				this.loadMoreStatus = 'loading bg-main-color light';
+				this.hasMoreData = false;
+			},
+			showLoadMore() {
+				this.loadMoreStatus = '';
+				this.hasMoreData = true;
+			},
+			showLoadOver() {
+				this.loadMoreStatus = 'over bg-grey';
+				this.hasMoreData = false;
+			},
+			showLoadErr() {
+				this.loadMoreStatus = 'erro bg-red';
+				this.hasMoreData = false;
+			}
+		},
+	}
+</script>
+
+<style>
+</style>
--- a/pages.json
+++ b/pages.json
@ -45,6 +45,12 @@
 			"path": "my-team-member"
 		}, {
 			"path": "serv-detail"
+		}, {
+			"path": "statement-desc"
+		}, {
+			"path": "bank-account-bind"
+		}, {
+			"path": "my-money-bag"
 		}]
 	}, {
 		"root":"pages/publish/",
--- a/pages/index/my-home.vue
+++ b/pages/index/my-home.vue
@ -197,7 +197,7 @@
 						<view class="cuIcon-qr_code text-green"></view>
 						<text>二维码分享</text>
 					</view>
-					<view class="cu-item">
+					<view class="cu-item" @click="showPage('/pages/my/my-money-bag')">
 						<view class="cuIcon-moneybagfill text-cyan"></view>
 						<text>钱包</text>
 					</view>
@ -319,6 +319,11 @@
 				uni.navigateTo({
 					url: '/pages/my/apply-operator'
 				})
+			},
+			showPage(pageUrl) {
+				uni.navigateTo({
+					url: pageUrl
+				})
 			}
 		}
 	}
--- a/pages/my/bank-account-bind.vue
+++ b/pages/my/bank-account-bind.vue
@ -0,0 +1,123 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">帐号绑定/修改</block>
+		</cu-custom>
+		<view class="margin-lr-sm margin-tb-lg shadow-warp">
+			<view class="bg-gray flex justify-start align-center text-xl padding-lr padding-top-xs">
+				<view class="padding-lr padding-tb-sm" :class="curAccountType === '0' ? 'curTab' : ''" data-type="0" @click="changAccountType">支付宝</view>
+				<view class="padding-lr padding-tb-sm" :class="curAccountType === '1' ? 'curTab' : ''" data-type="1" @click="changAccountType">银行卡</view>
+			</view>
+			<!-- 支付宝 -->
+			<view v-if="curAccountType == '0'" class="bg-white padding text-lg">
+				<view>
+					<view class="margin-bottom-sm">开户人姓名</view>
+					<input type="digit" placeholder="请输入开户人姓名" placeholder-style="color:#989898" v-model="formData.name">
+				</view>
+				<view class="margin-top">
+					<view class="margin-bottom-sm">支付宝账户</view>
+					<input type="digit" placeholder="请输入支付宝账户" placeholder-style="color:#989898" v-model="formData.account">
+				</view>
+			</view>
+			<!-- 银行卡 -->
+			<view v-else-if="curAccountType === '1'" class="bg-white padding text-lg">
+				<view>
+					<view class="margin-bottom-sm">开户人姓名</view>
+					<input type="text" placeholder="请输入开户人姓名" placeholder-style="color:#989898" v-model="formData.name">
+				</view>
+				<view class="margin-top">
+					<view class="margin-bottom-sm">身份证号</view>
+					<input type="text" placeholder="请输入身份证号" placeholder-style="color:#989898" v-model="formData.certId">
+				</view>
+				<view class="margin-top">
+					<view class="margin-bottom-sm">手机号</view>
+					<input type="text" placeholder="请输入手机号" placeholder-style="color:#989898" v-model="formData.phone">
+				</view>
+				<view class="margin-top">
+					<view class="margin-bottom-sm">银行卡号</view>
+					<input type="text" placeholder="请输入银行卡号" placeholder-style="color:#989898" v-model="formData.bankNum">
+				</view>
+				<!-- <view class="margin-top">
+					<view class="margin-bottom-sm">银行卡号开户城市</view>
+					<view class="flex">
+						<my-uni-combox class="flex-sub margin-right-xs" :candidates="provinceList"
+							:showField="'areaName'" placeholder="选择省份" v-model="formData.provinceObj"
+							@input="chooseRegion($event)"></my-uni-combox>
+						<my-uni-combox class="flex-sub margin-right-xs" :candidates="cityList"
+							:showField="'areaName'" placeholder="选择城市" v-model="formData.cityObj"></my-uni-combox>
+					</view>
+				</view> -->
+			</view>
+		</view>
+		<!-- 操作按钮 -->
+		<view class="margin-lr">
+			<button class="cu-btn lg bg-main-color long-btn shadow-blur" @click="submit">提交</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	// import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
+	
+	export default {
+		// components: {
+		// 	myUniCombox
+		// },
+		data() {
+			return {
+				curAccountType: '0',
+				provinceList: [],
+				cityList: [],
+				formData: {
+					provinceObj: {},
+					cityObj: {}
+				},
+				curUserInfo: {}
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				// let res = await this.$request.areaListByStep();
+				// this.provinceList = res.data;
+				this.curUserInfo = this.$request.getCurUserInfo();
+			},
+			async chooseRegion(e) {
+				let res = await this.$request.areaListByStep({
+					parentCode: e.areaCode
+				});
+				this.cityList = res.data;
+				this.formData.cityObj = {}
+			},
+			changAccountType(e) {
+				this.curAccountType = e.currentTarget.dataset.type;
+			},
+			async submit() {
+				if (this.curAccountType === '1') {
+					let params = {
+						...this.formData,
+						customerId: this.curUserInfo.customerId
+					}
+					let res = await this.$request.bindBankCard(params);
+					if (res.code === 0) {
+						uni.navigateBack({
+							delta: -1
+						})
+					}
+				}
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	.curTab {
+		background-color: #ffffff;
+		color: #0081ff;
+		border-radius: 15rpx 15rpx 0 0;
+	}
+</style>
--- a/pages/my/my-money-bag.vue
+++ b/pages/my/my-money-bag.vue
@ -0,0 +1,85 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">我的钱包</block>
+		</cu-custom>
+		<view class="margin-sm shadow-warp">
+			<view class="padding-tb-lg padding-lr bg-gradual-color light">
+				<view>账户余额（元）</view>
+				<view class="flex justify-between margin-top-sm">
+					<view class="text-xxl">{{myMoneyBag.balance}}</view>
+				</view>
+				<view class="flex justify-end margin-top-sm align-center">
+					<view class="margin-lr-sm text-lg">{{myMoneyBag.bankNum}}</view>
+					<view class="cu-btn bg-white radius" @click="bindBankAccount">账户绑定</view>
+				</view>
+			</view>
+		</view>
+		<view class="margin-bottom-lg">
+			<view v-for="(billItem, index) in myMoneyBag.bill">
+				<uni-collapse v-model="openStatusArr[index]">
+					<uni-collapse-item>
+						<template v-slot:title>
+							<view class="padding bg-white">
+								<view class="margin-bottom-xs">{{billItem.duration}}</view>
+								<view>
+									<text class="margin-right"><text>支出：</text><text class="text-price text-black">{{billItem.outgoings}}</text></text>
+									<text><text>收入：</text><text class="text-price text-black">{{billItem.income}}</text></text>
+								</view>
+							</view>
+						</template>
+						<view>
+							<view v-for="(item, index1) in billItem.statement" class="bg-white padding flex justify-between align-center" @click="showDetail">
+								<view>
+									<view class="margin-bottom-xs">{{item.name}}</view>
+									<view>{{item.createTime}}</view>
+								</view>
+								<view class="text-price text-black">{{item.inOutMoney}}</view>
+							</view>
+						</view>
+					</uni-collapse-item>
+				</uni-collapse>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				openStatusArr: [['0']], //0打开，1收起
+				myMoneyBag: {}
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		onShow() {
+			// TODO: 查询展示绑定的账户
+		},
+		methods: {
+			async loadData() {
+				this.myMoneyBag = await this.$api.data('myMoneyBag');
+				for(let i = 0; i < this.myMoneyBag.bill.length - 1; i++) {
+					this.openStatusArr.concat(['1']);
+				}
+			},
+			showDetail() {
+				uni.navigateTo({
+					url: '/pages/my/statement-desc'
+				})
+			},
+			bindBankAccount() {
+				uni.navigateTo({
+					url: '/pages/my/bank-account-bind'
+				})
+			}
+		},
+	}
+</script>
+
+<style>
+</style>
--- a/pages/my/my-order.vue
+++ b/pages/my/my-order.vue
@ -105,16 +105,19 @@
 					</view>
 				</view>
 			</view>
-		</view>
+		</view>
+		<load-status-bar ref="loadStatusBar"></load-status-bar>
 	</view>
 </template>

 <script>
-	import productPicked from '@/components/goods-card/product-picked.vue';
+	import productPicked from '@/components/goods-card/product-picked.vue';
+	import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';

 	export default {
 		components: {
-			productPicked
+			productPicked,
+			loadStatusBar
 		},
 		data() {
 			return {
@ -122,7 +125,8 @@
 				tabCur: 0,
 				tabHeaderList: [],
 				orderType: '',
-				myOrders: [],
+				myOrders: [],
+				pageParams: [],
 				stickyTop: this.CustomBar
 			}
 		},
@ -136,22 +140,57 @@
 					this.orderType = tabInfo.orderType;
 				}
 				if (Array.isArray(tabInfo.tabHeaderList) && tabInfo.tabHeaderList.length > 0) {
-					this.tabHeaderList = tabInfo.tabHeaderList;
+					this.tabHeaderList = tabInfo.tabHeaderList;
 					this.loadData(this.tabHeaderList[this.tabCur].type);
-				}
-				console.log(tabInfo)
+				}
 			}
 		},
 		methods: {
-			async loadData(mainProcess) {
+			loadData(mainProcess) {
+				for(let i = 0; i < this.tabHeaderList.length; i++) {
+					this.pageParams.push({
+						pageNum: 0
+					});
+				}
 				// 真实对接口的时候使用
 				// this.myOrders = await this.$api.data(this.orderType, mainProcess);
-				this.myOrders = await this.$api.data(mainProcess);
+				// this.myOrders = await this.$api.data(mainProcess);
+				this.loadOrderPage({
+					orderType: this.orderType
+				});
+			},
+			async loadOrderPage(params) {
+				params.pageNum = this.pageParams[this.tabCur].pageNum;
+				params.pageSize = this.$globalData.pageSize;
+				this.$refs.loadStatusBar.showLoading();
+				try {
+					let res = await this.$request.qryOrderGoodsPage(params);
+					let rowsLength = res.rows.length;
+					if (rowsLength > 0) {
+						this.myOrders = this.myOrders.concat(res.rows);
+						this.pageParams[this.tabCur].pageNum++;
+						if (rowsLength === this.pageSize) {
+							this.$refs.loadStatusBar.showLoadMore();
+						}
+					}
+					this.$refs.loadStatusBar.showLoadOver();
+				} catch (e) {
+					console.error(e)
+					this.$refs.loadStatusBar.showLoadErr();
+				}
+				console.log(this.pageParams)
 			},
 			tabSelect(e) {
 				this.tabCur = e.currentTarget.dataset.id;
-				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
-				this.loadData(this.tabHeaderList[this.tabCur].type);
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
+				this.resetPageData();
+				this.loadOrderPage({
+					orderType: this.tabHeaderList[this.tabCur].type
+				});
+			},
+			resetPageData() {
+				this.myOrders = [];
+				this.$refs.loadStatusBar.showLoadMore();
 			},
 			updateAgreeStatus(status, index) {
 				this.myOrders[index].agreedServTime.customerAgreeStatus = status;
--- a/pages/my/statement-desc.vue
+++ b/pages/my/statement-desc.vue
@ -0,0 +1,66 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">账单详情</block>
+		</cu-custom>
+		<view class="padding margin-top-sm bg-white">
+			<view class="padding-tb-lg text-center solid-bottom">
+				<view class="text-black text-sl">{{statementDesc.inOutMoney}}</view>
+				<view class="text-gray">{{statementDesc.name}}</view>
+			</view>
+			<view class="padding-tb-lg">
+				<view class="margin-bottom-sm">
+					<text class="text-gray">当前状态：</text>
+					<text>{{statementDesc.status === '0' ? '交易成功' : '交易失败'}}</text>
+				</view>
+				<view class="margin-bottom-sm">
+					<text class="text-gray">详情说明：</text>
+					<text>{{statementDesc.desc}}</text>
+				</view>
+				<view class="margin-bottom-sm">
+					<text class="text-gray">到帐备注：</text>
+					<text>{{statementDesc.payRemark}}</text>
+				</view>
+				<view class="margin-bottom-sm">
+					<text class="text-gray">提现单号：</text>
+					<text>{{statementDesc.extractCode}}</text>
+				</view>
+				<view class="margin-bottom-sm">
+					<text class="text-gray">发起时间：</text>
+					<text>{{statementDesc.createTime}}</text>
+				</view>
+				<view class="margin-bottom-sm">
+					<text class="text-gray">订单编号：</text>
+					<text>{{statementDesc.orderCode}}</text>
+				</view>
+				<view class="margin-bottom-sm">
+					<text class="text-gray">订单时间：</text>
+					<text>{{statementDesc.orderCreateTime}}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				statementDesc: {}
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				this.statementDesc = await this.$api.data('statementDesc');
+			}
+		},
+	}
+</script>
+
+<style>
+</style>
--- a/pages/order/order-detail.vue
+++ b/pages/order/order-detail.vue
@ -247,6 +247,10 @@
 					remark: this.formInfo.comments,
 					isNeedBill: this.formInfo.isNeedBill,
 					goodsList: this.parseGoodsList()
+					// goodsList: [{
+					// 	goodsId: 2,
+					// 	num: 1
+					// }]
 				}
 				// 调用下单接口
 				let res = await this.$request.placeOrder(params);