123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- <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.customerMobile}}</view>
- </u-form-item>
- <u-form-item label="备注" prop="remarks">
- <u-input placeholder="请输入备注(最多10个字符)" :maxlength="10" :custom-style="{textAlign:'right'}" trim v-model="form.remarks" />
- </u-form-item>
- <u-form-item label="核销数量" label-position="top" prop="changeNum" 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.changeNum" /></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.customerMobile||'--'}}</text>
- </view>
- </view>
- <view class="text-cont">
- <view>
- <text>验证码:</text>
- <u-input type="number" v-model="code" :maxlength="6" placeholder="请输入验证码"></u-input>
- <u-button size="mini" :disabled="isDisable" @click="getCodeValidate">{{nowVal}}</u-button>
- </view>
- </view>
- <view class="fot-btn">
- <u-button @click="confirm" :loading="loading" 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 { offPartnerHx, sendVerifyCode, checkVerificationCode } from '@/api/officialPartnerGoldLog.js'
- export default {
- components: {
- // uniPopup,
- // popupCon
- },
- data() {
- return {
- showModal: false,
- nowVal: '获取验证码', // 按钮显示内容
- count: '', // 当前秒数
- timer: null, // 倒计时
- isDisable: false, // 是否禁止获取验证码
- code: '',
- loading: false,
- currentGold: 0,
- form:{
- storeName: '',
- customerMobile: '',
- remarks: '',
- changeNum: ''
- },
- rules: {
- changeNum: [
- {
- required: true,
- type: 'number',
- message: '请输入乐豆',
- min: 1,
- // 可以单个或者同时写两个触发验证方式
- trigger: ['change','blur'],
- }
- ],
- remarks: [
- {
- message: '请输入备注',
- trigger: 'change'
- }
- ]
- }
- }
- },
- onLoad(opts) {
- let data = JSON.parse(decodeURIComponent(opts.item))
- let user = this.$store.state.vuex_userData
- this.currentGold = data.currentGold
- this.form.customerMobile = data.mobile
- this.form.storeName = user.org.name
- },
- // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
- onReady() {
- this.$refs.uForm.setRules(this.rules);
- },
- methods: {
- submit() {
- this.$refs.uForm.validate(valid => {
- console.log(valid)
- if (valid) {
- console.log('验证通过');
- if(this.form.changeNum>0){
- if(this.form.changeNum <= this.currentGold){
- this.showModal = true
- }else{
- uni.showToast({icon: 'none',title: '乐豆余额不足'})
- }
- }else{
- uni.showToast({icon: 'none',title: '请输入乐豆'})
- }
-
- } else {
- console.log('验证失败');
- }
- });
- },
- closeModal(){
- this.showModal = false
- this.code = ''
- },
- // 提交核销
- saveHx(){
- offPartnerHx({
- "customerMobile": this.form.customerMobile,
- "changeNum": this.form.changeNum,
- "remarks": this.form.remarks
- }).then(res => {
- if(res.status == 200){
- uni.navigateTo({
- url: "/pages/ledouHexiao/hexiaoSuccess?changeNum="+this.form.changeNum
- })
- }else{
- this.code = ''
- uni.showToast({icon: 'none',title: res.message})
- }
- this.loading = false
- })
- },
- // 确定验证码
- confirm(){
- if(this.code != ''&&this.code.length == 6){
- this.loading = true
- checkVerificationCode({mobile:this.form.customerMobile,code:this.code}).then(res => {
- if(res.status == 200){
- this.saveHx()
- }else{
- uni.showToast({icon: 'none',title: res.message})
- this.loading = false
- }
- })
- }else{
- uni.showToast({icon: 'none',title: '请输入验证码'})
- }
- },
- // 获取验证码
- getCodeValidate(){
- sendVerifyCode({mobile: this.form.customerMobile}).then(res => {
- if(res.status == 200){
- // 开启倒计时
- this.getCodeFun()
- uni.showToast({icon: 'none',title: '验证码发送成功'})
- }else{
- this.code = ''
- uni.showToast({icon: 'none',title: res.message})
- }
- })
- },
- // 开始倒计时
- 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)
- }
- },
- }
- }
- </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>
|