浏览代码

乐豆核销

lilei 4 年之前
父节点
当前提交
c54b119617
共有 3 个文件被更改,包括 293 次插入2 次删除
  1. 9 0
      pages.json
  2. 256 0
      pages/ledouHexiao/ledouHexiao.vue
  3. 28 2
      pages/userCenter/leDouQuery.vue

+ 9 - 0
pages.json

@@ -49,6 +49,15 @@
 				"navigationBarTitleText": "修改密码"
 			}
 		}
+        ,{
+            "path" : "pages/ledouHexiao/ledouHexiao",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "乐豆核销",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

+ 256 - 0
pages/ledouHexiao/ledouHexiao.vue

@@ -0,0 +1,256 @@
+<template>
+	<view class="content">
+		<u-form :model="form" :error-type="['toast']" :label-width="180" ref="uForm">
+			<u-form-item label="收取门店">
+				<view class="txt-right">{{form.storeName}}</view>
+			</u-form-item>
+			<u-form-item label="支付用户">
+				<view class="txt-right">{{form.phone}}</view>
+			</u-form-item>
+			<u-form-item label="备注" prop="remark">
+				<u-input placeholder="请输入备注" :maxlength="500" :custom-style="{textAlign:'right'}" trim v-model="form.remark" />
+			</u-form-item> 
+			<u-form-item label="核销数量" label-position="top" prop="ledou" required>
+				<view class="ledu-input">
+					<view><u-input placeholder="请输入核销数量" :custom-style="{borderBottom:'1px solid #999',textAlign:'center',width:'100%'}" trim type="number" v-model="form.ledou" /></view>
+					<text>个乐豆</text>
+				</view>
+			</u-form-item> 
+			<view class="form-button">
+				<u-button type="primary" @click="submit">确认核销</u-button>
+			</view>
+		</u-form>
+		
+		<!-- 确认核销弹窗 -->
+		 <u-popup mode="center" :mask-close-able="false" closeable @close="closeModal" negative-top="300" v-model="showModal" width="600rpx" >
+			<view class="slot-content">
+				<view class="slot-title">请输入验证码</view>
+				<view class="text-cont">
+					<view>
+						<text>用户手机:</text>
+						<text>{{form.phone||'--'}}</text>
+					</view>
+				</view>
+				<view class="text-cont">
+					<view>
+						<text>验证码:</text>
+						<u-input type="number" placeholder="请输入验证码"></u-input>
+						<u-button size="mini" :disabled="isDisable" @click="getCodeValidate">{{nowVal}}</u-button>
+					</view>
+				</view>
+				<view class="fot-btn">
+					<u-button @click="confirm" size="medium" type="primary" >确定</u-button>
+				</view>
+			</view>
+		</u-popup>
+		
+		<!-- 图文验证码 -->
+		<uni-popup ref="imageTxtPopup" type="center">
+			<popup-con type="forgetImageTxt" title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaImg"></popup-con>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import uniPopup from '@/components/uni-popup/uni-popup.vue'
+	import popupCon from '@/components/uni-popup/popup-con.vue'
+	import { memberVerifyCode, memberGetByMobile } from '@/api/user.js'
+	export default {
+		components: {
+			uniPopup,
+			popupCon
+		},
+		data() {
+			return {
+				showModal: false,
+				nowVal: '获取验证码',  //  按钮显示内容
+				count: '',  //  当前秒数
+				timer: null,  //  倒计时
+				isDisable: false,  //  是否禁止获取验证码
+				changeImg: false,  //  是否重新更换图形验证码
+				randomCode: '',  //  图片验证码随机码
+				form:{
+					storeName: '收取门店',
+					phone: '13709146191',
+					remark: '',
+					ledou: ''
+				},
+				rules: {
+					ledou: [
+						{ 
+							required: true, 
+							type: 'number',
+							message: '请输入乐豆', 
+							// 可以单个或者同时写两个触发验证方式 
+							trigger: ['change','blur'],
+						}
+					],
+					remark: [
+						{
+							message: '请输入备注', 
+							trigger: 'change'
+						}
+					]
+				}
+			}
+		},
+		// 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
+		onReady() {
+			this.$refs.uForm.setRules(this.rules);
+		},
+		methods: {
+			submit() {
+				this.$refs.uForm.validate(valid => {
+					console.log(valid)
+					if (valid) {
+						console.log('验证通过');
+						this.showModal = true
+					} else {
+						console.log('验证失败');
+					}
+				});
+			},
+			closeModal(){
+				this.showModal = false
+			},
+			// 确定验证码
+			confirm(){
+				
+			},
+			//  获取验证码
+			getCodeValidate(){
+				if(this.form.phone){
+					//  校验手机号是否注册过
+					memberGetByMobile({phone: this.form.phone}).then(res => {
+						if(res.status == 200){
+							//  图文验证码
+							this.$refs.imageTxtPopup.open()
+						}else{
+							uni.showToast({icon: 'none',title: res.message})
+						}
+					})
+				}else{
+					uni.showToast({icon: 'none',title: '请先输入手机号'})
+				}
+			},
+			//  开始倒计时
+			getCodeFun(){
+				const TIME_COUNT = 60
+				if (!this.timer) {
+				  this.count = TIME_COUNT
+				  this.timer = setInterval(() => {
+				    if (this.count > 0 && this.count <= TIME_COUNT) {
+				      this.count--
+				      this.nowVal = this.count + 's后重发'
+				      this.isDisable = true
+				    } else {
+				      this.nowVal = '重新获取验证码'
+				      clearInterval(this.timer)
+				      this.timer = null
+				      this.isDisable = false
+				    }
+				  }, 1000)
+				}
+			},
+			//  图文验证码
+			captchaImg(code, nowRandomCode){
+				this.captchaVerify(code, nowRandomCode)
+			},
+			//  验证图片验证码
+			captchaVerify(code, nowRandomCode){
+				const _this = this
+				let obj = {}
+				obj.phone = this.form.phone
+				obj.random = nowRandomCode
+				obj.captcha = code
+				//  短信验证码
+				memberVerifyCode(obj).then(res => {
+					console.log(JSON.stringify(res))
+					if(res.status == 200){  //  验证码输入正确
+						_this.randomCode = nowRandomCode  //  图片验证码随机码
+						//  关闭   图形验证码 弹框
+						_this.$refs.imageTxtPopup.close()
+						//  开启倒计时
+						this.getCodeFun()
+						uni.showToast({icon: 'none',title: '验证码发送成功'})
+					}else {  //  验证码输入错误
+						_this.randomCode = ''
+						//  切换验证码重新校验
+						_this.changeImg = false
+						_this.$nextTick(function(){
+							_this.changeImg = true
+						})
+						uni.showToast({icon: 'none',title: res.message})
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="less">
+.content{
+	width: 100%;
+	padding: 20upx 40upx;
+	background: #FFFFFF;
+	.ledu-input{
+		width: 60%;
+		margin: 0 auto;
+		display: flex;
+		align-items: center;
+		> text{
+			width: 150rpx;
+		}
+	}
+	.form-button{
+		padding: 60upx;
+	}
+	.txt-right{
+		text-align: right;
+		width: 100%;
+	}
+	
+	.slot-content{
+		padding: 30upx 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+		.slot-title{
+			font-size: 30rpx;
+			padding: 20rpx 0;
+		}
+		.text-cont{
+			width: 100%;
+			margin-top: 10upx;
+			>view {
+				padding: 15upx 40upx;
+				display: flex;
+				align-items: center;
+				>text{
+					&:first-child {
+						margin: 0 10upx;
+						width: 130upx;
+					}
+				}
+				.u-input{
+					border-bottom: 1px solid #999;
+					margin: 0 15rpx;
+					text-align: center;
+				}
+			}
+		}
+		.footer{
+			width: 80%;
+			border-bottom: 1px solid #b1b1b1;
+			>input {
+				text-align: center;
+				padding: 10upx 0;
+			}
+		}
+		.fot-btn{
+			margin-top: 30upx;
+		}
+	}
+}
+</style>

+ 28 - 2
pages/userCenter/leDouQuery.vue

@@ -15,7 +15,26 @@
 						<text>普通用户</text>
 					</view>
 					<view>
-						<u-button type="warning" size="mini">乐豆核销</u-button>
+						<u-button @click="hexiao" type="warning" size="mini">乐豆核销</u-button>
+					</view>
+				</view>
+				<view class="result-info">
+					<u-cell-group>
+						<u-cell-item :arrow="false" title="注册时间" value="2020-12-25 12:23:55"></u-cell-item>
+						<u-cell-item :arrow="false" title="用户手机" value="1279495656"></u-cell-item>
+						<u-cell-item :arrow="false" title="乐豆余额" :value-style="{color:'red'}" value="1200">
+						</u-cell-item>
+					</u-cell-group>
+				</view>
+			</view>
+			<u-gap height="20" bg-color="#f8f8f8"></u-gap>
+			<view class="result-list">
+				<view class="result-title">
+					<view>
+						<u-icon name="account-fill" color="#666" size="28"></u-icon>
+						<text>合伙人</text>
+					</view>
+					<view>
 					</view>
 				</view>
 				<view class="result-info">
@@ -38,6 +57,13 @@
 				queryWord: ''
 			}
 		},
+		methods: {
+			hexiao() {
+				uni.navigateTo({
+					url: "/pages/ledouHexiao/ledouHexiao"
+				})
+			}
+		},
 	}
 </script>
 
@@ -61,7 +87,7 @@
 			align-items: center;
 			justify-content: space-between;
 			background: #fff;
-			padding: 30rpx;
+			padding: 25rpx 30rpx;
 			border-bottom: 1rpx solid #eee;
 		}
 	}