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