auto

center/center.vue

@@ -17,13 +17,13 @@
 			<u-icon @click="$u.route('/center/memberinfo',{type:'redirectTo'})" name="setting-fill" color="#333333" size="38rpx"></u-icon>
 		</view>
 		<view class="property page-wrap u-flex u-row-between">
-			<view class="property-item" @click="showPayCode = true">
+			<!-- <view class="property-item" @click="showPayCode = true">
 				<view class="up">
 					<u-icon :name="staticUrl+'/img/paycode.png'" color="#333333" size="42rpx"></u-icon>
 				</view>
 				<view class="down">付款码</view>
-			</view>
-			<view class="property-item">
+			</view> -->
+			<view class="property-item"  @click="$u.route('/center/mybalance')">
 				<view class="up">{{memberInfo.balance}}</view>
 				<view class="down">余额</view>
 			</view>

center/dealList.vue

@@ -0,0 +1,179 @@
+<template>
+	<view class="">
+		<u-navbar
+			title="交易明细"
+			:autoBack="true"
+			 :safeAreaInsetTop="true"
+		>
+		</u-navbar>
+		<view class="tabs-wrap">
+			<u-tabs 
+			:list="tabsList" 
+			lineColor="#00A447" 
+			 :activeStyle="{color:'#333','font-weight': '600','font-size':'30rpx'}"
+			 :inactiveStyle="{color:'#999'}"
+			@click="tabsClick"></u-tabs>
+		</view>
+		<mescroll-body class="" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
+			<view class="page-wrap" v-if="dataList.length>0" >
+				<view class="list">
+					<view class="item u-flex u-row-between" v-for="item in dataList" :key="item.id">
+						<view class="left">
+							<view class="name">{{item.recordContent}}</view>
+							<view class="time">{{item.createTime}}</view>
+						</view>
+						<text class="num" v-if="item.recordType!=1">-{{item.balance}}</text>
+						<text class="num plus" v-else>+{{item.balance}}</text>
+					</view>
+				</view>
+			</view>
+		</mescroll-body>
+	</view>
+</template>
+
+<script>
+	// 引入mescroll-mixins.js
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin], // 使用mixin
+		data() {
+			return {
+				credit:'',
+				downOption: {},
+				// 上拉加载的配置(可选, 绝大部分情况无需配置)
+				upOption: {
+					page: {
+						size: 10 // 每页数据的数量,默认10
+					},
+					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
+					empty: {
+						tip: '暂无相关数据'
+					}
+				},
+				tabsList:[{name:'消费记录',recordType:2},{name:'充值记录',recordType:1},{name:'退款记录',recordType:3}],
+				params:{
+					recordType:''
+				},
+				activeIndex:0,
+				dataList: []
+			}
+		},
+		onShow() {
+			
+		},
+		onLoad() {
+			this.params.recordType = this.tabsList[this.activeIndex].recordType;
+			console.log('1111', this.tabsList[this.activeIndex]);
+		},
+		methods: {
+			/*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
+			downCallback(){
+				this.mescroll.resetUpScroll();
+			},
+			/*上拉加载的回调*/
+			upCallback(page) {
+				// 此处可以继续请求其他接口
+				// if(page.num == 1){
+				// 	// 请求其他接口...
+				// }
+			
+				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
+				// if(!this.params.id){
+				// 	this.mescroll.endErr()
+				// 	return // 此处return,先获取xx
+				// }
+			
+				let pageNum = page.num; // 页码, 默认从1开始
+				let pageSize = page.size; // 页长, 默认每页10条isAsc:0//时间排序 0:降序 1:升序 (默认星级降序排序)
+
+				this.params = Object.assign(this.params,{pageNum:pageNum,pageSize:pageSize});
+				this.$u.api.selectBalanceLogList(this.params).then(data => {
+					console.log('data',JSON.parse(JSON.stringify(data)));
+					// 接口返回的当前页数据列表 (数组)
+					let curPageData = data.data.rows;
+					console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
+					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
+					let curPageLen = curPageData.length; 
+					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
+					// let totalPage =  data.data.data.totalPage; 
+					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
+					let totalSize = data.data.total; 
+					// 接口返回的是否有下一页 (true/false)
+					// let hasNext = data.xxx; 
+					// console.log('totalPage',totalPage,'curPageLen',curPageLen);
+					//设置列表数据
+					if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
+					this.dataList = this.dataList.concat(curPageData); //追加新数据
+					// 请求成功,隐藏加载状态
+					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
+					// this.mescroll.endByPage(curPageLen, totalPage); 
+					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
+					this.mescroll.endBySize(curPageLen, totalSize); 
+				}).catch(err => {
+					this.mescroll.endErr()
+					console.log(err)
+				});	
+			
+			},
+			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
+			reloadList() {
+				this.mescroll.resetUpScroll();
+			},
+			tabsClick(item){
+				this.params.recordType = item.recordType;
+				this.reloadList()
+				// console.log('item',item);
+			},
+		}
+	}
+</script>
+<style>
+page{
+	background-color: #f5f5f5;
+}
+</style>
+<style lang="scss" scoped>
+.credit{
+	padding: 20rpx;
+	background-color: #fff;
+	border-radius: 8rpx;
+	margin: 0 20rpx 20rpx;
+	font-size: 36rpx;
+	font-weight: 600;
+	color: #00A447;
+}
+.tabs-wrap{
+	background-color: #fff;
+	margin-bottom: 10rpx;
+}
+.list{
+	border-radius: 8rpx;
+	padding: 0 20rpx 20rpx;
+	background-color: #fff;
+	.item{
+		padding: 20rpx 0;
+		border-bottom: 0.5px solid #ddd;
+		.name{
+			font-size: 30rpx;
+			font-weight: 400;
+			color: #333333;
+			line-height: 42rpx;
+			margin-bottom: 8rpx;
+		}
+		.time{
+			font-size: 24rpx;
+			font-weight: 400;
+			color: #999999;
+			line-height: 33rpx;
+		}
+		.num{
+			font-size: 30rpx;
+			font-weight: 600;
+			color: #FFB100;
+			&.plus{
+				color: #00A447;
+			}
+		}
+	}
+}
+</style>

center/mybalance.vue

@@ -0,0 +1,73 @@
+<template>
+	<view class="page-wrap">
+		<u-navbar
+			title="我的余额"
+			:autoBack="false"
+			 @leftClick="leftClick"
+			 :safeAreaInsetTop="true"
+		>
+		</u-navbar>
+		<view class="panel">
+			<view class="title">个人余额（元）</view>
+			<view class="number">{{memberInfo.balance}}</view>
+			<u-button text="立即充值" @click="$u.route('/center/recharge')"></u-button>
+		</view>
+		
+		<u-cell-group>
+			<u-cell @click="$u.route('/center/dealList')" icon="order" title="交易明细" :isLink="true"></u-cell>
+			<u-cell @click="$u.route('/center/setPaypass',{fromPage:'reset'})" icon="setting-fill" title="支付设置" :isLink="true"></u-cell>
+		</u-cell-group>
+			
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				memberInfo:{},
+				params:{
+				}
+				
+			}
+		},
+		onShow() {
+			this.getMemberInfo();
+		},
+		onLoad() {
+
+		},
+		methods: {
+			leftClick(){
+				uni.reLaunch({url: '/center/center'});
+			},
+			getMemberInfo(){
+				this.$u.api.memberInfo({id:this.vuex_member_info.id}).then(res=>{
+					this.memberInfo = res.data;
+					this.avatar =  res.data.avatar;
+					this.$u.vuex('vuex_member_info', res.data);
+					// console.log('memberInfo',this.memberInfo);
+					}).catch(err=>{
+					console.log('memberInfo',err.data);
+				})
+			},
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.panel{
+	text-align: center;
+	background-color: #ddd;
+	padding: 20rpx;
+	border-radius: 8rpx;
+	margin-bottom: 40rpx;
+	.title{
+		
+	}
+	.number{
+		
+	}
+}
+</style>

center/recharge.vue

@@ -51,8 +51,8 @@
 				checkboxVal:null,
 				customizeVal:null,
 				activeIndex:0,
-				numItem:[500,10000,15000]
-				
+				numItem:[500,10000,15000],
+				payResult:{},
 			}
 		},
 		onShow() {
@@ -76,6 +76,7 @@
 				this.activeIndex = index
 			},
 			submit(){
+				// uni.reLaunch({url: '/center/rechargesuccess'})
 				// console.log('usecustomize',this.usecustomize);
 				if(!this.checkboxVal){
 					uni.showToast({
@@ -93,26 +94,35 @@
 					})
 					return
 				}
-				return
 				let payParams={
-					
+					orderPrice:num,
+					isCreditDesc:this.checkboxVal?1:0,
 				};
-				this.$u.api.gotoPay(payParams).then(res=>{
-					this.payResult = res.data.payResult;
+				this.$u.api.addRechargeOrder(payParams).then(res=>{//提交充值订单
 					console.log('res',res.data);
+					this.gotoPay({orderId:res.data.orderId,openid:this.vuex_wechatOpenid,paymentMode:4});
 				}).catch(err=>{
 					console.log('charge',err);
 				})
 			},
+			gotoPay(params){//获取支付参数
+				console.log('gotoPay',this.params);
+				this.$u.api.rechargePay(params).then(res=>{
+					this.payResult = res.data.payResult;
+					this.wxPay()
+				}).catch(err=>{
+					console.log('gotoPay',err);
+				})				
+			},
 			wxPay(){
 				uni.requestPayment({
 					... this.payResult,
 				    "provider": "wxpay",
 				    success(res) {
-						uni.reLaunch({url: '/center/center'})
+						uni.reLaunch({url: '/center/rechargesuccess'})
 					},
 				    fail(e) {
-						console.log('wxPayfail',e);
+						console.log('充值失败',e);
 					}
 				})				
 			},

center/rechargesuccess.vue

@@ -0,0 +1,80 @@
+<template>
+	<view class="pages">
+		<view class="icon-wrap u-flex u-row-center">
+			<u-icon name="checkmark" color="#fff" size="80"></u-icon>
+		</view>
+		<view class="title">{{title}}</view>
+		<view class="" v-if="noPaypass==true">
+			<view class="tip">为了您的支付安全，请务必设置支付密码</view>
+			<view class="full-btn" @click="goSetPaypass">设置支付密码</view>
+		</view>
+		<view v-else class="full-btn" @click="btnClick">完成</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				noPaypass:true,
+				title:'恭喜你您，充值成功'
+			}
+		},
+		onShow() {		
+			this.checkPaypass();
+		},
+		onLoad() {
+
+		},
+		methods: {
+			btnClick(){
+				uni.reLaunch({url: '/center/center'});
+			},
+			goSetPaypass(){
+				uni.reLaunch({url: '/center/setPaypass'});
+			},
+			checkPaypass(){
+				this.$u.api.getExistPayPassword().then(res=>{
+					// console.log('res',res.data);
+					if(res.data==0){
+						this.noPaypass = true
+					}else{
+						this.noPaypass = false
+					}
+					console.log('this.noPaypass',this.noPaypass);
+				}).catch(err=>{
+					console.log('checkPaypass',err);
+				})
+			}
+		}
+	}
+</script>
+<style>
+	page{
+		background-color: #F5F5F5;
+	}
+</style>
+<style lang="scss" scoped>
+.pages{
+	text-align: center;
+}
+
+.icon-wrap{
+	width: 180rpx;
+	height: 180rpx;
+	margin: 120rpx auto 20rpx;
+	padding: 20rpx;
+	background-color: #00A447;
+	border-radius: 50%;
+}
+.title{
+	font-size: 32rpx;
+	font-weight: 600;
+	color: #333333;
+	line-height: 40rpx;
+	margin-bottom: 120rpx;
+}
+.full-btn{
+	margin: 20rpx 10%;
+}
+</style>

center/setPaypass.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="page-wrap">
+		<view class="step-reset" v-if="step=='reset'">
+			<view class="title">请输入原始密码</view>
+			<u-code-input v-model="paypass0" 
+				:space="codeInput.space" 
+				:size="codeInput.size" 
+				@finish="finish0" 
+				:maxlength="codeInput.maxlength" 
+				:adjustPosition="codeInput.adjustPosition"
+				:dot="codeInput.dot"
+				:focus="true"
+				:disabled-keyboard="codeInput.disabledKeyboard" >
+			</u-code-input>
+			<view class="tip">建议密码不重复，不连续，不同于登录密码</view>
+		</view>
+		<view class="step-1" v-if="step==1">
+			<view class="title">设置6位数数字支付密码</view>
+			<u-code-input v-model="paypass1" 
+				:space="codeInput.space" 
+				:size="codeInput.size" 
+				@finish="finish1" 
+				:maxlength="codeInput.maxlength" 
+				:adjustPosition="codeInput.adjustPosition"
+				:dot="codeInput.dot"
+				:focus="true"
+				:disabled-keyboard="codeInput.disabledKeyboard" >
+			</u-code-input>
+			<view class="tip">建议密码不重复，不连续，不同于登录密码</view>
+		</view>
+		<view class="step-2" v-if="step==2">
+			<view class="title">请在再次输入</view>
+			<u-code-input v-model="paypass2" 
+				:space="codeInput.space"
+				:size="codeInput.size" 
+				@finish="finish2" 
+				:maxlength="codeInput.maxlength" 
+				:adjustPosition="codeInput.adjustPosition"
+				:dot="codeInput.dot"
+				:focus="true"
+				:disabled-keyboard="codeInput.disabledKeyboard" >
+			</u-code-input>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				fromPage:'',
+				step:1,
+				paypass0:'',
+				paypass1:'',
+				paypass2:'',
+				codeInput:{
+					space:0,
+					size:45,
+					maxlength:6,
+					adjustPosition:false,
+					dot:true,
+					disabledKeyboard:false
+				}
+			}
+		},
+		onShow() {	
+		},
+		onLoad(page) {
+			if(page.fromPage=='reset'){
+				this.step = 'reset'
+			}
+		},
+		methods: {
+			finish0(){
+				this.$u.api.checkPayPassword({payPassword:this.paypass0}).then(res=>{
+					console.log('res',res.data);
+					if(res.data==1){//密码正确
+						this.step = 1
+					}else{
+						this.paypass0 = ''
+					}
+					
+				}).catch(err=>{
+					if(err.msg=='密码错误!'){
+						this.paypass0 = '';
+					}
+					console.log('checkPayPassword',err);
+				})
+			},
+			finish1(){
+				this.step = 2;
+				console.log('paypass',this.paypass1);
+			},
+			finish2(){
+				console.log('paypass1',this.paypass1);
+				console.log('paypass2',this.paypass2);
+				let that = this;
+				if(this.paypass1==this.paypass2){
+					console.log('两次密码一样');
+					this.updatePayPassword();
+				}else{
+					uni.showModal({
+						showCancel:false,
+					    title: '提示',
+					    content: '两次密码不一样！',
+					    success: res => {
+							if (res.confirm) {
+								that.paypass1 = '';
+								that.paypass2 = '';
+								that.step = 1;
+							} else if (res.cancel) {
+								console.log('用户点击取消');
+							}
+					    }
+					});
+				}
+			},
+			updatePayPassword(){
+				this.$u.api.updatePayPassword({payPassword:this.paypass2}).then(res=>{
+					uni.showToast({
+						title:res.msg,
+						icon:'success',
+						complete() {
+							uni.reLaunch({url: '/center/center'});
+						}
+					})
+					console.log('res',res.data);
+				}).catch(err=>{
+					console.log('setPaypass',err);
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.page-wrap{
+	text-align: center;
+	/deep/ .u-code-input__item{
+		flex-grow: 1!important;
+	}
+}
+.title{
+	font-size: 40rpx;
+	font-weight: 600;
+	margin-bottom: 40rpx;
+}
+
+.tip{
+	margin: 24rpx auto 40rpx;
+	color: #999;
+}
+</style>

common/apiurl.js

@@ -244,6 +244,36 @@ const apiurl = {
 		url: '/memberCreditLog/pageList',
 		type: 'get'
 	},
+	// 提交充值订单
+	addRechargeOrder: {
+		url: '/rechargeOrder/insert',
+		type: 'post'
+	},
+	// 充值
+	rechargePay: {
+		url: '/payment/rechargePay',
+		type: 'post'
+	},
+	// 是否存在支付密码
+	getExistPayPassword: {
+		url: '/memberInfo/getExistPayPassword',
+		type: 'get'
+	},
+	// 修改支付密码
+	updatePayPassword: {
+		url: '/memberInfo/updatePayPassword',
+		type: 'put'
+	},
+	// 校验支付密码
+	checkPayPassword: {
+		url: '/memberInfo/checkPayPassword',
+		type: 'post'
+	},
+	// 交易明细
+	selectBalanceLogList: {
+		url: '/memberInfo/selectBalanceLogList',
+		type: 'get'
+	},
 }
 
 

pages.json

@@ -60,6 +60,34 @@
 						"navigationBarTitleText": "充值中心",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "rechargesuccess",
+					"style": {
+						"navigationBarTitleText": "充值成功",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "setPaypass",
+					"style": {
+						"navigationBarTitleText": "设置支付密码",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "mybalance",
+					"style": {
+						"navigationBarTitleText": "我的余额",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "dealList",
+					"style": {
+						"navigationBarTitleText": "交易明细",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		}, 

pages/index/index.vue

@@ -38,10 +38,10 @@
 			</view>
 			
 			<view class="icon-nav u-flex u-row-around">
-				<!-- <view class="nav-item" @click="$u.route('/shopping/paysuccess',{type:'reLaunch'})">
+				<view class="nav-item" @click="$u.route('/shopping/pay')">
 					<u--image class="image" :src="staticUrl+'/img/index-nav-4.png'" width="101rpx" height="101rpx"></u--image>
 					需要删除
-				</view> -->
+				</view>
 				<view class="nav-item" @click="$u.route('/shopping/productList',{typeId:1,typeName:'特价专区',type:'reLaunch'})">
 					<u--image class="image" :src="staticUrl+'/img/index-nav-1.png'" width="101rpx" height="101rpx"></u--image>
 					特价专区

shopping/order.vue

@@ -2,7 +2,7 @@
 	<view class="pages">
 		<u-navbar
 			title="我的订单"
-			:autoBack="true"
+			:autoBack="false"
 			 @leftClick="leftClick"
 			 :safeAreaInsetTop="true"
 		>
@@ -139,9 +139,7 @@
 		},
 		methods: {
 			leftClick(){
-				// uni.$u.route('/center/center', {
-				// 	type: 'reLaunch'
-				// });
+				uni.reLaunch({url: '/center/center'});
 			},
 			/*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
 			downCallback(){

shopping/pay.vue

@@ -28,7 +28,26 @@
 					</view>
 				  </u-radio-group>
 			</view>
-			<view class="full-btn" @click="gotoPay">去支付<text>¥ {{params.payAmount}}</text></view>
+			<view class="full-btn" @click="payRoute">去支付<text>¥ {{params.payAmount}}</text></view>
+			<u-popup :show="checkPassShow" @close="checkPassClose" mode="center">
+				<view class="check-pass">
+					<view class="title">请在再次输入</view>
+					<u-code-input v-model="paypass" 
+						:space="0"
+						:size="40" 
+						@finish="checkPayPassword" 
+						:maxlength="6" 
+						:adjustPosition="false"
+						:dot="true"
+						:focus="true"
+						:disabled-keyboard="false" >
+					</u-code-input>
+					<!-- <view class="btn-wrap u-flex">
+						<u-button text="取消" @click="checkPassShow=false"></u-button>
+						<u-button text="确认" @click="checkPassShow=false"></u-button>
+					</view> -->
+				</view>
+			</u-popup>
 		</view>
 	</view>
 </template>
@@ -46,7 +65,9 @@
 					openid:'',
 					payAmount:'',
 					payResult:{},
-				}
+				},
+				checkPassShow:false,
+				paypass:'',
 				
 			}
 		},
@@ -83,6 +104,38 @@
 					console.log('memberInfo',err.data);
 				})
 			},
+			checkPassClose(){
+				this.checkPassShow = false
+			},
+			payRoute(){
+				if(this.params.paymentMode==2){
+					this.checkPassShow = true
+				}else{
+					this.gotoPay();
+				}
+			},
+			checkPayPassword(){
+				this.$u.api.checkPayPassword({payPassword:this.paypass}).then(res=>{
+					// console.log('res',res.data);
+					if(res.data==1){//密码正确
+						this.gotoPay()
+					}else{
+						this.paypass = '';
+						uni.showToast({
+							title:'密码错误',
+							icon:'error'
+						});
+					}
+					
+				}).catch(err=>{
+					this.paypass = '';
+					uni.showToast({
+						title:'密码错误',
+						icon:'error'
+					});
+					console.log('checkPayPassword',err);
+				})
+			},
 			gotoPay(){
 				console.log('gotoPay',this.params);
 				this.$u.api.gotoPay(this.params).then(res=>{
@@ -94,6 +147,8 @@
 					}
 					console.log('gotoPayres',res.data);
 				}).catch(err=>{
+					this.paypass = '';
+					this.checkPassShow = false;
 					console.log('gotoPay',err);
 				})				
 			},
@@ -155,4 +210,15 @@
 .full-btn{
 	margin-top: 100rpx;
 }
+.check-pass{
+	overflow: hidden;
+	padding: 24rpx 40rpx 40rpx;
+	border-radius: 8rpx;
+	.title{
+		margin-bottom: 20rpx;
+	}
+	.btn-wrap{
+		
+	}
+}
 </style>

utils/filter.js

@@ -38,7 +38,7 @@ Vue.filter("filterToFixed", function(val) {
 
 // 订单状态
 Vue.filter("filterOrderState", function(val) {	
-	let orderList = ['待支付', '待出库', '待收货', '待评论', '己取消', '己退款', '己完成', '退款中']
+	let orderList = ['待支付', '待出库', '待收货', '待评论', '己取消', '己退款', '己完成', '退款中','退款失败']
 	return orderList[val]
 });