<template> <view class="page-content"> <view class="content"> <u-field class="field-item" :value="store.name" disabled input-align="right" label="收取门店" > </u-field> <u-field v-model="remarks" label="备注" input-align="right" auto-height :maxlength="10" placeholder="请填写备注(最多10个字符)" > </u-field> <view class="num-cont"> <text class="u-required">支付数量</text> <view class="num-input"> <u-input v-model="number" input-align="right" type="number" placeholder="请输入数量" /> <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image> </view> </view> </view> <view class="pay-btn"> <view class="total"> <text>{{number||0}}</text> <view><u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image></view> </view> <view> <u-button @click="handlePay" type="success" >确认支付</u-button> </view> </view> <!-- 确认支付弹窗 --> <u-popup mode="center" :mask-close-able="false" closeable @close="closeModal" negative-top="300" v-model="showPayModal" width="600rpx" > <view class="slot-content"> <view class="slot-title">请输入支付密码</view> <view class="text-cont"> <view> <text>收取门店:</text> <text>{{store.name||'--'}}</text> </view> <view class="num-text"> <text>支付数量:</text> <view> <text class="num-big">{{number}}</text> <u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image> </view> </view> <view> <text>备 注:</text> <text>{{remarks||'无'}}</text> </view> </view> <view class="footer"> <input v-model="password" type="password" :focus="focus" placeholder="请输入支付密码" :maxlength="30" @confirm="confirm" /> </view> <view class="fot-btn"> <u-button @click="confirm" type="success" >确认支付</u-button> </view> </view> </u-popup> <!-- 提示用户设置支付密码 --> <u-modal v-model="showSetPswModal" content="请先设置支付密码,才能使用乐豆" show-cancel-button confirm-text="去设置" cancel-text="暂时放弃" @confirm="toSetPwd" @cancel="showSetPswModal=false" ></u-modal> </view> </template> <script> import { sellerReceive } from '@/api/user.js' import { existPayPwd } from '@/api/order.js' export default{ data() { return { showSetPswModal: false, store: null, // 门店信息 remarks: '', // 备注 number: '', // 支付数量 showPayModal: false, // 支付弹窗 password: '', // 支付密码 partnerNo: '', // 销售商编号 currentGold: 0, //用户当前拥有乐豆数 focus: false } }, onLoad(opts) { this.currentGold = this.$store.state.vuex_userData.currentGold console.log(this.currentGold,'currentGold') this.store = JSON.parse(decodeURIComponent(opts.store)) this.partnerNo = this.store.officialPartnerNo // console.log(this.store,'22222') // 开启分享 uni.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] }) }, methods: { // 跳转到设置支付密码页 toSetPwd () { uni.navigateTo({ url:"/pages/userCenter/userInfo/smsVerification" }) }, // 确认支付 handlePay() { if (!this.number) { uni.showToast({ title: '请输入支付数量', icon: 'none' }) } else { if (this.number>this.currentGold) { uni.showToast({ title: '您当前余额不足!', icon: 'none' }) return false } existPayPwd().then(res => { console.log(res,'rrrrrr') if(res.status == 200) { // 设置过支付密码,输入密码 if(res.data) { this.showPayModal = true setTimeout(()=>{ this.focus = true },300) } else { // 没设置过支付密码,提示设置密码 this.showSetPswModal = true } } }) } }, // 关闭弹窗 closeModal() { this.showPayModal = false this.password = '' }, // 输入密码完成 支付 confirm(e) { if(this.password == ''){ uni.showToast({ title: '请输入支付密码', icon: 'none' }) return } let data = { "payPassword": this.password, "changeNum": this.number, "remarks": this.remarks, "officialPartnerNo": this.partnerNo } sellerReceive(data).then(res => { console.log(res) if(res.status == 200){ uni.redirectTo({ url: '/pages/checkOut/checkFinish?num='+this.number }) } }) } }, } </script> <style lang="less"> page{ height: 100%; } .page-content{ width: 100%; height: 100%; padding: 20upx; background-color: #f8f8f8; .content{ background-color: #fff; } .num-cont{ width: 100%; padding: 16upx; display: flex; align-items: center; justify-content: space-between; .num-input{ display: flex; align-items: center; justify-content: center; >u-input { width: 300upx; } } } .pay-btn{ padding: 0 30upx; .total { display: flex; align-items: center; justify-content: center; padding: 60upx 0; text{ font-size: 48upx; font-weight: 600; color: red; } } } } .slot-content{ padding: 30upx 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; .slot-title{ font-size: 36rpx; } .text-cont{ width: 100%; margin-top: 20upx; // font-size: 20rpx; >view { padding: 15upx 60upx; display: flex; >text{ &:last-child { flex: 1; padding-left: 30upx; } } .num-big{ font-size: 36upx; color: red; padding-left: 30upx; font-weight: 600; } } .num-text{ align-items: center; >view { display: flex; align-items: center; } } } .footer{ width: 80%; border-bottom: 1px solid #b1b1b1; >input { text-align: center; padding: 10upx 0; } } .fot-btn{ margin-top: 30upx; } } </style>