ソースを参照

Merge branch 'develop' of http://git.chelingzhu.com/chelingzhu-web/zxyj-mini-html into develop

lilei 4 年 前
コミット
7aafb42bc3

+ 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>

+ 0 - 220
pages/userCenter/userInfo/components/number-keyboard/number-keyboard.vue

@@ -1,220 +0,0 @@
-<template>
-  <view :class="['KeyboarBody','bottomMove', 'bodMove', bodMove]" v-if="KeyboarHid">
-    <view @tap="close" class="dowmImgBx">
-      <view class="dowmImg"></view>
-    </view>
-    <view class="KeyboarBx">
-      <view v-for="(num , index) in keyboardNum " :key='index' @tap="clickBoard(num)" hover-class="hover"
-        :hover-stay-time='20' class="keyboar">
-        {{num}}
-      </view>
-      <view @tap="clickBoard(otherNum)" :class="['keyboar',otherNum==''?'empty':'']" :hover-stay-time='20' hover-class="hover">{{otherNum}}</view>
-      <view @tap="clickBoard('0')" hover-class="hover" :hover-stay-time='20' class="keyboar">0</view>
-      <view @tap="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time='20' hover-class="hover">
-        <view class="keyboarDel"></view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-  export default {
-    props: {
-      //限制输入框的长度 空值不限制
-      psdLength: {
-        type: [Number, String],
-        default: ''
-      },
-      //键盘码
-      keyboardNum: {
-        type: [Array, Object],
-        default: () => {
-          return [1, 2, 3, 4, 5, 6, 7, 8, 9]
-        }
-      },
-      //特殊键盘码 .或者X  默空
-      otherNum: {
-        type: String,
-        default: ''
-      },
-      //是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能
-      tabBar: {
-        type: Boolean,
-        default: false
-      },
-      value: {
-        type: String,
-        default: ''
-      }
-    },
-    data() {
-      return {
-        bodMove: '',
-        password: '', //要返回的结果
-        iptNum: [], //输入的内容
-        KeyboarHid: false, //键盘影藏和显示
-      }
-    },
-    watch: {
-      iptNum(newVal, oldVal) {
-        this.$emit('input', newVal.join(''))
-      },
-      value(newVal, oldVal) {
-        this.iptNum = newVal.split('')
-      }
-    },
-    created() {
-     
-    },
-    methods: {
-      open() {
-        this.KeyboarHid = true;
-        if (this.tabBar) {
-          uni.hideTabBar()
-        } 
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.bodMove = 'moveShow'
-          }, 30)
-        })
-      },
-      close() {
-        if (this.tabBar) {
-          uni.showTabBar()
-        }
-        this.bodMove = '';
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.KeyboarHid = false
-          }, 300)
-        })
-      },
-      // 密码框
-      clickBoard(num) {
-        if (num == '') return;
-        let iptNum = this.iptNum.filter(item => item != '');
-        //判断是否限制长度
-        if (this.psdLength != '') {
-          if (iptNum.length >= this.psdLength) {
-            return
-          };
-          this.iptNum.push(num);
-        } else {
-          this.iptNum.push(num);
-        }
-      },
-      //重置 清空
-      reset() {
-        this.iptNum = [];
-      },
-      //删除
-      deleteKeyboar() {
-        this.iptNum.pop();
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .bodMove {
-    transition: all .3s
-  }
-
-  .bottomMove {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    transform: translateY(100%)
-  }
-
-  .moveShow {
-    transform: translateY(0)
-  }
-
-  .KeyboarBody {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 99;
-    background-color: #FFFFFF;
-  }
-
-  .KeyboarBx {
-    display: flex;
-    flex-wrap: wrap;
-    text-align: center;
-    background-color: rgba(3, 3, 3, 0.1);
-    padding: 10rpx 6rpx 0rpx 6rpx;
-    margin-left: -12rpx;
-  }
-
-
-  .keyboar {
-    width: 20%;
-    flex-grow: 1;
-    padding: 3%;
-    font-size: 40rpx;
-    background-color: #FFFFFF;
-    border-radius: 10rpx;
-    margin-left: 12rpx;
-    margin-bottom: 10rpx;
-	box-sizing: initial;
-  }
-
-  .dian {
-    margin-top: -10rpx;
-  }
-
-  .keyboarBtn {
-    background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
-    color: #fff;
-  }
-
-  .hover {
-    background: #ebedf0;
-  }
-
-
-  .bot {
-    bottom: 0;
-  }
-
-  .empty {
-    background-color: #EEEEEE;
-  }
-
-  .dowmImgBx {
-    display: flex;
-    justify-content: center;
-    border-top: 1rpx solid A1A1A1;
-  }
-
-  .dowmImg {
-    width: 35rpx;
-    height: 35rpx;
-    margin-bottom: 10rpx;
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACT0lEQVRYR+2UPWgTYRjH/8/dpdZCpVhU/BoEB8FBEBFt7tJe7i5CbAXhrg6CQ8HBQXAQHBzq5CA4CA4OgoNgr0GQIhQTUkJqCPEDBEEQBAdBQSoVlIakXvLIofmopMnlizjkxuN9nt/v/b/v+xB6/FGP+egL9BPoJ/D/JLC8/Hp33sl9AXDOCMqRbsyH6NLzGwLR7BapuDMQCKy4jHICi5nMNinrpAk4DOC8EZQfdVKiBGemxyHNb5V6bziCaDRxSPT5bAaOCAJd0Cb8DzshUYIT4cnqit+anqZCTQH357NE+qDIhXmAjoJpxtD8D9qRqOwcT538DyscDuer+9W8hNFo8oDok2wGHxcIFzVVvt+KRAkOYDG3NmhNTR3L/ttn01eQTL7cv+6sz4NwkhmXQpp8rxmJ8s6B2NAATFmWf9aqr/sMY7HUHsEHmxkKGJcNTb7rRaKyc1rKZ4vW5KTyfbO6hnMgHo/vYmHQBjBBxFd0VblTT6IC56REjqmq6rd66xsKuMXx+ItRFn/ZYOhMfDWkKrdrNa068xQVJVPXT3xtlJgnAbdJIpEYcViyATpFoGt60H+runkVPCOwYGra2OdG8A2DyMvihYXU8NAwzQF8moDrelC+6daV4YRXcNg0DOWTl35NC7gF6XR661qu6N6JMwzMMrPgjlcw3hCzqevKR6/wlgTcokjk3cDI6KpNRGf/wt6yWDBD4+MfmoG3LPBHIiJu37F3jsH7JAgzqjr2vll4WwKtwJoeRJ2CtD0HuinieQ50S6Iv0E+g5wn8Bo+vyyFXaYw2AAAAAElFTkSuQmCC');
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 100%;
-  }
-
-  .keyboarDel {
-    width: 50rpx;
-    height: 36rpx;
-    margin-bottom: 10rpx;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABqUlEQVRYR+2WPUvEQBCGZze1/8DKUnsrEcVaLhvwCgULCy1sLGzFE8RKC0EsBLGwEBRuhmChlTb+hCu0vU4Ff4H3SkKCOS4fezHnNUkXQuZ58s7sbhSN+VJj5lMtUCdglYDrurNKqSMiWqpoaD+IaI6Z3woFjDErRHRJRBMVweMyz8y8mCsQwW8rBtsJjBgeSGQn8A/wbAFbOIBHpdQnEa2ltKijlHoBsJnTvsEEbOFR0SYz37mu21JK7SdAnV6v1wzutdYda4Eh4XHdDWa+Skgk4cHwzlgJlISHtQHsiMhpIAEgXDFa6yL47wx4njcJoPuXpQZgT0QOG43GtCW8fwiNMYFxsOGUucLYAXz7vv+aMhNZNfuHsKRECHcc5wvAAxFdM/OxpUTqKhgmifjLu47j3BPRfDQTWyJyYSGRvhHZJgHgQERanuf5AJaTOQNYFZEbY8wTES1k9CB3JxwmiTJzk78VB09tkyhLzz0L4qIjlig+jkechJ1AJHFGRNt/iHvgVQC7InJS+EeUaMc6gKkqJLTW7+12+zyoZS1QBTitRi1QJzD2BH4AtrHfITKVMwgAAAAASUVORK5CYII=');
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 100%;
-    margin-top: 11rpx;
-
-  }
-
-  .keyboarflex {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-</style>

+ 0 - 84
pages/userCenter/userInfo/components/password-input/password-input.vue

@@ -1,84 +0,0 @@
-<template>
-  <view class="psdIptBx">
-    <block v-for="(item , index) in psdIptNum" :key='index'>
-      <view class="psdTtem">
-        <text v-if="numLng.length > index" class="psdTtemTxt">
-          <text v-if="plaintext">●</text>
-          <text v-else>{{numLng[index]}}</text>
-        </text>
-        <text v-if="numLng.length ==index" class="focus_move">|</text>
-      </view>
-    </block>
-  </view>
-</template>
-
-<script>
-  export default {
-    props: {
-      //是否明文 默认密文
-      plaintext: {
-        type: Boolean,
-        default: true
-      },
-      //键盘输入的val
-      numLng: {
-        type: [String, Number],
-        default: ''
-      },
-      //密码框的个数
-      psdIptNum: {
-        type: [String, Number],
-        default: 6
-      }
-    },
-    data() {
-      return {}
-    },
-    created() {},
-    methods: {
-    }
-  }
-</script>
-
-<style scoped>
-  .psdIptBx {
-    display: flex;
-    width: 100%;
-    text-align: center;
-    /* border-bottom: 1px solid #ccc; */
-    /* border-top: 1px solid #ccc; */
-    /* border-right: 1px solid #ccc; */
-  }
-
-  .psdTtem {
-    flex: 1;
-    height: 80rpx;
-	margin: 0 10rpx;
-    /* border-left: 1px solid #ccc; */
-	border-bottom: 1px solid #ccc;
-    line-height: 1;
-  }
-
-  .psdTtemTxt {
-    text-align: center;
-    line-height: 80rpx;
-    font-size: 30rpx;
-  }
-
-  .focus_move {
-    color: #E6240F;
-    font-size: 30rpx;
-    line-height: 80rpx;
-    animation: focus 0.8s infinite;
-  }
-
-  @keyframes focus {
-    from {
-      opacity: 1;
-    }
-
-    to {
-      opacity: 0;
-    }
-  }
-</style>

+ 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>