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