ledouHexiao.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <view class="content">
  3. <u-form :model="form" :error-type="['toast']" :label-width="180" ref="uForm">
  4. <u-form-item label="收取门店">
  5. <view class="txt-right">{{form.storeName}}</view>
  6. </u-form-item>
  7. <u-form-item label="支付用户">
  8. <view class="txt-right">{{form.customerMobile}}</view>
  9. </u-form-item>
  10. <u-form-item label="备注" prop="remarks">
  11. <u-input placeholder="请输入备注(最多10个字符)" :maxlength="10" :custom-style="{textAlign:'right'}" trim v-model="form.remarks" />
  12. </u-form-item>
  13. <u-form-item label="核销数量" label-position="top" prop="changeNum" required>
  14. <view class="ledu-input">
  15. <view><u-input placeholder="请输入核销数量" :custom-style="{borderBottom:'1px solid #999',textAlign:'center',width:'100%'}" trim type="number" v-model="form.changeNum" /></view>
  16. <text>个乐豆</text>
  17. </view>
  18. </u-form-item>
  19. <view class="form-button">
  20. <u-button type="primary" @click="submit">确认核销</u-button>
  21. </view>
  22. </u-form>
  23. <!-- 确认核销弹窗 -->
  24. <u-popup mode="center" :mask-close-able="false" closeable @close="closeModal" negative-top="300" v-model="showModal" width="600rpx" >
  25. <view class="slot-content">
  26. <view class="slot-title">请输入验证码</view>
  27. <view class="text-cont">
  28. <view>
  29. <text>用户手机:</text>
  30. <text>{{form.customerMobile||'--'}}</text>
  31. </view>
  32. </view>
  33. <view class="text-cont">
  34. <view>
  35. <text>验证码:</text>
  36. <u-input type="number" v-model="code" :maxlength="6" placeholder="请输入验证码"></u-input>
  37. <u-button size="mini" :disabled="isDisable" @click="getCodeValidate">{{nowVal}}</u-button>
  38. </view>
  39. </view>
  40. <view class="fot-btn">
  41. <u-button @click="confirm" :loading="loading" size="medium" type="primary" >确定</u-button>
  42. </view>
  43. </view>
  44. </u-popup>
  45. <!-- 图文验证码 -->
  46. <!-- <uni-popup ref="imageTxtPopup" type="center">
  47. <popup-con type="forgetImageTxt" title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaImg"></popup-con>
  48. </uni-popup> -->
  49. </view>
  50. </template>
  51. <script>
  52. // import uniPopup from '@/components/uni-popup/uni-popup.vue'
  53. // import popupCon from '@/components/uni-popup/popup-con.vue'
  54. import { offPartnerHx, sendVerifyCode, checkVerificationCode } from '@/api/officialPartnerGoldLog.js'
  55. export default {
  56. components: {
  57. // uniPopup,
  58. // popupCon
  59. },
  60. data() {
  61. return {
  62. showModal: false,
  63. nowVal: '获取验证码', // 按钮显示内容
  64. count: '', // 当前秒数
  65. timer: null, // 倒计时
  66. isDisable: false, // 是否禁止获取验证码
  67. code: '',
  68. loading: false,
  69. currentGold: 0,
  70. form:{
  71. storeName: '',
  72. customerMobile: '',
  73. remarks: '',
  74. changeNum: ''
  75. },
  76. rules: {
  77. changeNum: [
  78. {
  79. required: true,
  80. type: 'number',
  81. message: '请输入乐豆',
  82. min: 1,
  83. // 可以单个或者同时写两个触发验证方式
  84. trigger: ['change','blur'],
  85. }
  86. ],
  87. remarks: [
  88. {
  89. message: '请输入备注',
  90. trigger: 'change'
  91. }
  92. ]
  93. }
  94. }
  95. },
  96. onLoad(opts) {
  97. let data = JSON.parse(decodeURIComponent(opts.item))
  98. let user = this.$store.state.vuex_userData
  99. this.currentGold = data.currentGold
  100. this.form.customerMobile = data.mobile
  101. this.form.storeName = user.org.name
  102. },
  103. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  104. onReady() {
  105. this.$refs.uForm.setRules(this.rules);
  106. },
  107. methods: {
  108. submit() {
  109. this.$refs.uForm.validate(valid => {
  110. console.log(valid)
  111. if (valid) {
  112. console.log('验证通过');
  113. if(this.form.changeNum>0){
  114. if(this.form.changeNum <= this.currentGold){
  115. this.showModal = true
  116. }else{
  117. uni.showToast({icon: 'none',title: '乐豆余额不足'})
  118. }
  119. }else{
  120. uni.showToast({icon: 'none',title: '请输入乐豆'})
  121. }
  122. } else {
  123. console.log('验证失败');
  124. }
  125. });
  126. },
  127. closeModal(){
  128. this.showModal = false
  129. this.code = ''
  130. },
  131. // 提交核销
  132. saveHx(){
  133. offPartnerHx({
  134. "customerMobile": this.form.customerMobile,
  135. "changeNum": this.form.changeNum,
  136. "remarks": this.form.remarks
  137. }).then(res => {
  138. if(res.status == 200){
  139. uni.navigateTo({
  140. url: "/pages/ledouHexiao/hexiaoSuccess?changeNum="+this.form.changeNum
  141. })
  142. }else{
  143. this.code = ''
  144. uni.showToast({icon: 'none',title: res.message})
  145. }
  146. this.loading = false
  147. })
  148. },
  149. // 确定验证码
  150. confirm(){
  151. if(this.code != ''&&this.code.length == 6){
  152. this.loading = true
  153. checkVerificationCode({mobile:this.form.customerMobile,code:this.code}).then(res => {
  154. if(res.status == 200){
  155. this.saveHx()
  156. }else{
  157. uni.showToast({icon: 'none',title: res.message})
  158. this.loading = false
  159. }
  160. })
  161. }else{
  162. uni.showToast({icon: 'none',title: '请输入验证码'})
  163. }
  164. },
  165. // 获取验证码
  166. getCodeValidate(){
  167. sendVerifyCode({mobile: this.form.customerMobile}).then(res => {
  168. if(res.status == 200){
  169. // 开启倒计时
  170. this.getCodeFun()
  171. uni.showToast({icon: 'none',title: '验证码发送成功'})
  172. }else{
  173. this.code = ''
  174. uni.showToast({icon: 'none',title: res.message})
  175. }
  176. })
  177. },
  178. // 开始倒计时
  179. getCodeFun(){
  180. const TIME_COUNT = 60
  181. if (!this.timer) {
  182. this.count = TIME_COUNT
  183. this.timer = setInterval(() => {
  184. if (this.count > 0 && this.count <= TIME_COUNT) {
  185. this.count--
  186. this.nowVal = this.count + 's后重发'
  187. this.isDisable = true
  188. } else {
  189. this.nowVal = '重新获取验证码'
  190. clearInterval(this.timer)
  191. this.timer = null
  192. this.isDisable = false
  193. }
  194. }, 1000)
  195. }
  196. },
  197. }
  198. }
  199. </script>
  200. <style lang="less">
  201. .content{
  202. width: 100%;
  203. padding: 20upx 40upx;
  204. background: #FFFFFF;
  205. .ledu-input{
  206. width: 60%;
  207. margin: 0 auto;
  208. display: flex;
  209. align-items: center;
  210. > text{
  211. width: 150rpx;
  212. }
  213. }
  214. .form-button{
  215. padding: 60upx;
  216. }
  217. .txt-right{
  218. text-align: right;
  219. width: 100%;
  220. }
  221. .slot-content{
  222. padding: 30upx 0;
  223. display: flex;
  224. flex-direction: column;
  225. align-items: center;
  226. justify-content: space-between;
  227. .slot-title{
  228. font-size: 30rpx;
  229. padding: 20rpx 0;
  230. }
  231. .text-cont{
  232. width: 100%;
  233. margin-top: 10upx;
  234. >view {
  235. padding: 15upx 40upx;
  236. display: flex;
  237. align-items: center;
  238. >text{
  239. &:first-child {
  240. margin: 0 10upx;
  241. width: 130upx;
  242. }
  243. }
  244. .u-input{
  245. border-bottom: 1px solid #999;
  246. margin: 0 15rpx;
  247. text-align: center;
  248. }
  249. }
  250. }
  251. .footer{
  252. width: 80%;
  253. border-bottom: 1px solid #b1b1b1;
  254. >input {
  255. text-align: center;
  256. padding: 10upx 0;
  257. }
  258. }
  259. .fot-btn{
  260. margin-top: 30upx;
  261. }
  262. }
  263. }
  264. </style>