소스 검색

乐豆明细、投递记录、优化验证码输入数字键盘

chenrui 4 년 전
부모
커밋
13514d4fcb

+ 3 - 3
package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "uview-ui": {
-      "version": "1.7.7",
-      "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.7.7.tgz",
-      "integrity": "sha512-CpSWQyRlOYkPLOWWhFM5so6Epy3Wp+7HGPg2rGyMaC9kKHEv848a2T7xq6qgZsVjcYZOZwJCMJel7TiZZKNV8w=="
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.7.8.tgz",
+      "integrity": "sha512-9mc3FbpvN7knmmdBmlGv9eF6us16co/bvTPrFEsS8QrSo9AZyrFyET9KHIdESwURP79jv1SLtR01VEb3HGSN8A=="
     }
   }
 }

+ 12 - 0
pages.json

@@ -37,6 +37,18 @@
 				"navigationBarTextStyle": "white"
 			}
 		},
+		{
+			"path": "pages/userCenter/ldDetailed",
+			"style": {
+				"navigationBarTitleText": "乐豆明细"
+			}
+		},
+		{
+			"path": "pages/userCenter/deliveryRecord",
+			"style": {
+				"navigationBarTitleText": "投递记录"
+			}
+		},
 		{
 			"path": "pages/userCenter/userInfo/userInfo",
 			"style": {

+ 141 - 0
pages/userCenter/deliveryRecord.vue

@@ -0,0 +1,141 @@
+<template>
+	<view class="deliveryRecord-container">
+		<scroll-view class="scroll-con" scroll-y @scrolltolower="onreachBottom">
+			<!-- 列表数据 -->
+			<view class="cell-item-con">
+				<view class="cell-item" v-for="(item, index) in listdata" :key="index">
+					<text class="cell-item-date">{{item.time}}</text>
+					<view class="cell-item-main">
+						<u-image width="150rpx" height="150rpx" :src="item.pic" class="cell-item-pic"></u-image>
+						<view class="cell-item-r">
+							<view class="cell-item-head">
+								<view class="cell-item-val"><text class="cell-item-num">{{item.tit}}</text>克</view>
+								<u-tag :text="item.price + '乐豆'" mode="light" type="warning" size="mini" class="cell-item-price" />
+							</view>
+							<text class="cell-item-des">{{item.label}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
+			<view class="loadmore">
+				<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				listdata: [
+					{  tit: '255', time: '2020-11-4 10:11', pic: '', price: '38', label: '撒健康的国家啥都给交撒旦教撒健康的国家啥都给交撒旦撒健给交撒旦教' },
+					{  tit: '255', time: '2020-11-4 10:11', pic: '', price: '38', label: '撒健康的国家啥旦教' },
+				],
+				pageNo: 1,  //  当前页码
+				pageSize: 10,  //  每页条数
+				total: 0,  //  数据总条数
+				noDataText: '暂无数据',  //  列表请求状态提示语
+				status: 'loadmore',  //  加载中状态
+			}
+		},
+		onShow() {
+			this.searchHandle(1)
+		},
+		onLoad() {
+		},
+		methods:{
+			// 搜索查询
+			searchHandle (pageNo,suppName) {
+				this.status = "loading"
+				pageNo ? this.pageNo = pageNo : null
+				// searchSuppliers({
+				// 	pageNo: this.pageNo,
+				// 	pageSize: this.pageSize,
+				// 	queryWord: this.queryValue
+				// }).then(res => {
+				// 	if (res.status == 200) {
+				// 		if(this.pageNo>1){
+				// 			this.listdata = this.listdata.concat(res.data.list || [])
+				// 		}else{
+				// 			this.listdata = res.data.list || []
+				// 		}
+				// 		this.total = res.data.count || 0
+				// 		this.listdata.length == 0 && this.queryValue != '' ? this.noDataText = '没有搜索到相关结果' : this.noDataText = '暂无数据'
+				// 	} else {
+				// 		this.noDataText = res.message
+				// 		this.listdata = []
+				// 		this.total = 0
+				// 	}
+					this.status = "loadmore"
+				// })
+			},
+			// scroll-view到底部加载更多
+			onreachBottom() {
+				if(this.listdata.length < this.total){
+					this.pageNo += 1
+					this.searchHandle()
+				}else{
+					uni.showToast({ title: '已经到底了', icon: 'none' })
+					this.status = "nomore"
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.deliveryRecord-container{
+		width: 100%;
+		//  列表
+		.scroll-con{
+			height: 100%;
+			overflow: auto;
+		}
+		//  列表样式
+		.cell-item-con{
+			.cell-item{
+				background-color: #fff;
+				color: #606266;
+				padding: 16rpx 32rpx 22rpx;
+				border-bottom: 1rpx solid #e6e6e6;
+				.cell-item-date{
+					display: block;
+					color: #909399;
+					font-size: 26rpx;
+				}
+				.cell-item-main{
+					display: flex;
+					justify-content: space-around;
+					align-items: center;
+					padding-top: 14rpx;
+					.cell-item-pic{
+						flex-shrink: 0;
+						margin-right: 20rpx;
+					}
+					.cell-item-r{
+						flex-grow: 1;
+						.cell-item-head{
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							padding: 5rpx 0 15rpx;
+							.cell-item-val{
+								font-size: 32rpx;
+								.cell-item-num{
+									display: inline-block;
+									margin-right: 6rpx;
+								}
+							}
+						}
+						.cell-item-des{
+							color: #909399;
+							font-size: 26rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

+ 8 - 2
pages/userCenter/index.vue

@@ -18,7 +18,7 @@
 				<u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
 			</view>
 			<view>
-				<u-button size="mini" type="warning" shape="circle">查看明细</u-button>
+				<u-button size="mini" type="warning" shape="circle" @click="toLdPage">查看明细</u-button>
 			</view>
 		</view>
 		<!-- 列表 -->
@@ -53,7 +53,7 @@
 			// 打开对应的页面
 			toPage(index){
 				let pageUrl=[
-					'/pages/coupon/index/index',
+					'/pages/userCenter/deliveryRecord',
 					'/pages/order/order',
 					'/pages/agreement/agreement?fromPage=usercenter',
 					'/pages/userCenter/aboutUs'
@@ -69,6 +69,12 @@
 					url: '/pages/userCenter/userInfo/userInfo'
 				})
 			},
+			//  乐豆明细
+			toLdPage(){
+				uni.navigateTo({
+					url: '/pages/userCenter/ldDetailed'
+				})
+			},
 			bindGetUserInfo(res){
 				console.log(res)
 			},

+ 210 - 0
pages/userCenter/ldDetailed.vue

@@ -0,0 +1,210 @@
+<template>
+	<view class="ldDetailed-container">
+		<!-- 筛选菜单 -->
+		<u-dropdown ref="uDropdown" class="filter-dropdown">
+			<u-dropdown-item v-model="queryParam.recordType" :title="titType" :options="optionsType" @change="searchHandle(1)"></u-dropdown-item>
+			<u-dropdown-item v-model="queryParam.recordScope" :title="titScope" :options="optionsScope" @change="searchHandle(1)"></u-dropdown-item>
+		</u-dropdown>
+		<scroll-view class="scroll-con" scroll-y @scrolltolower="onreachBottom">
+			<!-- 列表数据 -->
+			<view class="cell-item-con">
+				<view class="cell-item" v-for="(item, index) in listdata" :key="index">
+					<text class="cell-item-month">{{item.month}}</text>
+					<view class="cell-item-main" v-for="(subItem, ind) in item.list" :key="ind">
+						<text :class="['cell-item-pic', subItem.type == 1?'orange':'']">{{subItem.type == 1 ? '收' : '支'}}</text>
+						<view class="cell-item-c">
+							<text class="cell-item-des">{{subItem.dec}}</text>
+							<text class="cell-item-date">{{subItem.creatDate}}</text>
+						</view>
+						<text :class="['cell-item-score', Number(subItem.score) > 0 ? 'red' : 'black']">{{Number(subItem.score)>0 ? '+'+subItem.score : subItem.score}}</text>
+					</view>
+				</view>
+			</view>
+			<u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
+			<view class="loadmore">
+				<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				listdata: [
+					{
+						month: '本月',
+						list: [
+							{ type: 1, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: +25 },
+							{ type: 2, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: -30 },
+							{ type: 3, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: -15 },
+						]
+					},
+					{
+						month: '10月',
+						list: [
+							{ type: 1, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: +25 },
+							{ type: 2, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: -30 },
+							{ type: 3, dec: '投递可回收物获得乐豆', creatDate: '2020-11-04 14:08', score: -15 },
+						]
+					}
+				],
+				pageNo: 1,  //  当前页码
+				pageSize: 10,  //  每页条数
+				total: 0,  //  数据总条数
+				noDataText: '暂无数据',  //  列表请求状态提示语
+				status: 'loadmore',  //  加载中状态
+				queryParam: {  //  过滤条件
+					recordType: '',
+					recordScope: ''
+				},
+				optionsType: [
+					{ label: '所有记录', value: 1, },
+					{ label: '获取记录', value: 2, },
+					{ label: '使用记录', value: 3, }
+				]
+			}
+		},
+		onShow() {
+			this.searchHandle(1)
+		},
+		onLoad() {
+		},
+		computed: {
+			optionsScope(){  //  过滤条件  近3个月
+				let arr = [
+					{ label: '近3个月', value: 1 },
+					{ label: '本月', value: 2 }
+				]
+				arr[2] = { label: new Date().getMonth() + '月', value: 3 }
+				arr[3] = { label: new Date().getMonth()-1 + '月', value: 4 }
+				return arr
+			},
+			titType(){  //  过滤条件 所有记录 title
+				const row = this.optionsType.find(item => item.value == this.queryParam.recordType)
+				return row ? row.label : this.optionsType[0].label
+			},
+			titScope(){  //  过滤条件 近3个月 title
+				const row = this.optionsScope.find(item => item.value == this.queryParam.recordScope)
+				return row ? row.label : this.optionsScope[0].label
+			}
+		},
+		methods:{
+			// 搜索查询
+			searchHandle (pageNo) {
+				this.status = "loading"
+				pageNo ? this.pageNo = pageNo : null
+				// searchSuppliers({
+				// 	pageNo: this.pageNo,
+				// 	pageSize: this.pageSize,
+				// 	queryWord: this.queryValue
+				// }).then(res => {
+				// 	if (res.status == 200) {
+				// 		if(this.pageNo>1){
+				// 			this.listdata = this.listdata.concat(res.data.list || [])
+				// 		}else{
+				// 			this.listdata = res.data.list || []
+				// 		}
+				// 		this.total = res.data.count || 0
+				// 		this.listdata.length == 0 && this.queryValue != '' ? this.noDataText = '没有搜索到相关结果' : this.noDataText = '暂无数据'
+				// 	} else {
+				// 		this.noDataText = res.message
+				// 		this.listdata = []
+				// 		this.total = 0
+				// 	}
+					this.status = "loadmore"
+				// })
+			},
+			// scroll-view到底部加载更多
+			onreachBottom() {
+				if(this.listdata.length < this.total){
+					this.pageNo += 1
+					this.searchHandle()
+				}else{
+					uni.showToast({ title: '已经到底了', icon: 'none' })
+					this.status = "nomore"
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.ldDetailed-container{
+		width: 100%;
+		// 筛选菜单
+		.filter-dropdown{
+			background-color: #fff!important;
+			.u-dropdown__menu__item{
+				background-color: #fff!important;
+			}
+		}
+		//  列表
+		.scroll-con{
+			height: calc(100% - 40);
+			overflow: auto;
+		}
+		//  列表样式
+		.cell-item-con{
+			.cell-item{
+				background-color: #fff;
+				color: #606266;
+				.cell-item-month{
+					display: block;
+					color: #909399;
+					font-size: 26rpx;
+					padding: 16rpx 30rpx;
+					background-color: #f8f8f8;
+				}
+				.cell-item-main{
+					display: flex;
+					align-items: center;
+					margin: 0 30rpx;
+					padding: 20rpx 0;
+					border-bottom: 1rpx solid #e9e9e9;
+					.cell-item-pic{
+						flex-shrink: 0;
+						margin-right: 20rpx;
+						width: 90rpx;
+						height: 90rpx;
+						line-height: 90rpx;
+						background-color: #f3f4f6;
+						border-radius: 50%;
+						text-align: center;
+					}
+					.cell-item-c{
+						flex-grow: 1;
+						.cell-item-des{
+							display: block;
+							color: #606266;
+							font-size: 26rpx;
+							margin-bottom: 18rpx;
+						}
+						.cell-item-date{
+							display: block;
+							color: #909399;
+							font-size: 24rpx;
+						}
+					}
+					.cell-item-score{
+						flex-shrink: 0;
+					}
+					.black{
+						color: #000;
+					}
+					.red{
+						color: #fa3534;
+					}
+					.orange{
+						background-color: #fcbd71;
+						color: #fff;
+					}
+				}
+				.cell-item-main:last-child{
+					border: none;
+				}
+			}
+		}
+	}
+</style>

+ 1 - 1
pages/userCenter/userInfo/changePayPwd.vue

@@ -2,7 +2,7 @@
 	<view class="changePayPwd-container">
 		<text class="pwd-describe">请输入当前支付密码</text>
 		<view class="pwd-item">
-			<u-input v-model="oldPwd" type="text" input-align="center" placeholder="请输入支付密码" maxlength="50" class="inp-pwd" />
+			<u-input v-model="oldPwd" border type="text" input-align="center" placeholder="请输入支付密码" maxlength="50" class="inp-pwd" />
 		</view>
 		<view class="btn-con">
 			<u-button class="handle-btn" type="info" size="medium" @click="cancel">取消</u-button>

+ 24 - 24
pages/userCenter/userInfo/paymentPwd.vue

@@ -1,63 +1,62 @@
 <template>
 	<view class="paymentPwd-container">
 		<text class="pwd-describe">{{nowSetp == 1 ? '请设置6位数字支付密码' : nowSetp == 2 ? '请再次输入密码' : ''}}</text>
-		<view class="sms-item" @tap='KeyboarOpen'>
-			<password-input :numLng='password' :plaintext="true"></password-input>
+		<view class="sms-item" @tap="showKeyboard=!showKeyboard">
+			<u-message-input mode="bottomLine" :maxlength="6" v-model="value" :dot-fill="true" :disabled-keyboard="true"></u-message-input>
 		</view>
 		<view class="btn-con">
 			<u-button class="handle-btn" type="info" size="medium" @click="cancel">取消</u-button>
 			<u-button class="handle-btn" type="primary" size="medium" @click="submit">确定</u-button>
 		</view>
 		<!-- 数字键盘 -->
-		<number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6'></number-keyboard>
+		<u-keyboard ref="uKeyboard" :dot-enabled="false" :mask="false" :tooltip="false" v-model="showKeyboard" @change="valChange" @backspace="backspace"></u-keyboard>
 	</view>
 </template>
 
 <script>
-	import numberKeyboard from '@/pages/userCenter/userInfo/components/number-keyboard/number-keyboard.vue'
-	import passwordInput from '@/pages/userCenter/userInfo/components/password-input/password-input.vue'
 	export default {
 		data() {
 			return {
 				nowSetp: 1,  //  当前第几次设置密码
-				password: '', //输入的内容
+				value: '', //输入的内容
+				showKeyboard: false,  //  是否打开键盘
 				oPwd: '',  //  第一次密码
 				tPwd: '',  //  第二次密码
 			}
 		},
-		components: {
-		  numberKeyboard,
-		  passwordInput
-		},
 		onShow() {
 		},
 		onLoad() {
 			//因为此时实例没有挂载完成,需要延迟操作
 			setTimeout(() => {
-			  this.$refs.KeyboarHid.open()
+			  this.showKeyboard = true
 			}, 50)
 		},
 		methods:{
-			//打开键盘
-			KeyboarOpen(e) {
-			  this.$refs.KeyboarHid.open()
+			// 按键被点击(点击退格键不会触发此事件)
+			valChange(val) {
+				// 将每次按键的值拼接到value变量中,注意+=写法
+				if(this.value.length < 6){
+					this.value += val
+				}
 			},
-			//输入的值
-			onInput(val) {
-			  this.password = val
+			// 退格键被点击
+			backspace() {
+				// 删除value的最后一个字符
+				if(this.value.length) this.value = this.value.substr(0, this.value.length - 1)
 			},
 			//  确定
 			submit(){
-				if(!this.password || this.password.length < 6){
+				if(!this.value || this.value.length < 6){
 					uni.showToast({ title: '请输入6位数字支付密码', icon: 'none' })
 				}else{
 					if(this.nowSetp == 1){
-						this.oPwd = this.password
-						this.$refs.KeyboarHid.reset()
+						this.oPwd = this.value
+						this.value = ''
 						this.nowSetp++
-						this.$refs.KeyboarHid.open()
+						this.showKeyboard = true
 					}else if(this.nowSetp == 2){
-						this.tPwd = this.password
+						this.tPwd = this.value
 						this.checkPwd()
 					}
 				}
@@ -74,14 +73,15 @@
 					}, 2000)
 				}else{
 					uni.showToast({ title: '两次密码不一致请重新输入', icon: 'none' })
-					this.$refs.KeyboarHid.reset()
+					this.value = ''
+					this.showKeyboard = true
 				}
 			},
 			//  取消
 			cancel(){
 				this.oPwd = ''
 				this.tPwd = ''
-				this.$refs.KeyboarHid.reset()
+				this.value = ''
 				this.nowSetp = 1
 			}
 		}

+ 22 - 19
pages/userCenter/userInfo/smsVerification.vue

@@ -2,8 +2,8 @@
 	<view class="smsVerification-container">
 		<view class="sms-title">输入短信验证码</view>
 		<text class="sms-describe">验证码已发送至157****7854,请在下方输入框内输入6位数字验证码</text>
-		<view class="sms-item" @tap='KeyboarOpen'>
-			<password-input :numLng='password' :plaintext="false"></password-input>
+		<view class="sms-item" @tap="showKeyboard=!showKeyboard">
+			<u-message-input mode="bottomLine" :maxlength="6" v-model="value" :disabled-keyboard="true"></u-message-input>
 		</view>
 		<view class="sendcode-con">
 			<text :class="['getcode-btn', isDisable ? 'grey-btn' : '']" @click="isDisable ? null : getCodeValidate()">{{nowVal}}</text>
@@ -13,13 +13,11 @@
 			<u-button class="handle-btn" type="primary" size="medium" @click="submit">确定</u-button>
 		</view>
 		<!-- 数字键盘 -->
-		<number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6'></number-keyboard>
+		<u-keyboard ref="uKeyboard" :dot-enabled="false" :mask="false" :tooltip="false" v-model="showKeyboard" @change="valChange" @backspace="backspace"></u-keyboard>
 	</view>
 </template>
 
 <script>
-	import numberKeyboard from '@/pages/userCenter/userInfo/components/number-keyboard/number-keyboard.vue'
-	import passwordInput from '@/pages/userCenter/userInfo/components/password-input/password-input.vue'
 	export default {
 		data() {
 			return {
@@ -27,30 +25,31 @@
 				count: '',  //  当前秒数
 				timer: null,  //  倒计时
 				isDisable: false,  //  是否禁止获取验证码
-				password: "", //输入的内容
+				value: '', //输入的内容
+				showKeyboard: false  //  是否打开键盘
 			}
 		},
-		components: {
-		  numberKeyboard,
-		  passwordInput
-		},
 		onShow() {
 			this.getCodeValidate()
 		},
 		onLoad() {
 			//因为此时实例没有挂载完成,需要延迟操作
 			setTimeout(() => {
-			  this.$refs.KeyboarHid.open()
+			  this.showKeyboard = true
 			}, 50)
 		},
 		methods:{
-			//打开键盘
-			KeyboarOpen(e) {
-			  this.$refs.KeyboarHid.open()
+			// 按键被点击(点击退格键不会触发此事件)
+			valChange(val) {
+				// 将每次按键的值拼接到value变量中,注意+=写法
+				if(this.value.length < 6){
+					this.value += val
+				}
 			},
-			//输入的值
-			onInput(val) {
-			  this.password = val
+			// 退格键被点击
+			backspace() {
+				// 删除value的最后一个字符
+				if(this.value.length) this.value = this.value.substr(0, this.value.length - 1)
 			},
 			//  获取验证码
 			getCodeValidate(){
@@ -88,7 +87,7 @@
 			},
 			//  确定
 			submit(){
-				if(!this.password || this.password.length < 6){
+				if(!this.value || this.value.length < 6){
 					uni.showToast({ title: '请输入6位数字验证码', icon: 'none' })
 				}else{
 					//  校验输入短信验证码是否正确
@@ -98,7 +97,11 @@
 				}
 			},
 			//  取消
-			cancel(){}
+			cancel(){
+				uni.navigateBack({
+				    delta: 1
+				})
+			}
 		}
 	}
 </script>