|
@@ -20,9 +20,9 @@
|
|
|
>
|
|
|
</u-field>
|
|
|
<view class="num-cont">
|
|
|
- <text>支付数量</text>
|
|
|
+ <text class="u-required">支付数量</text>
|
|
|
<view class="num-input">
|
|
|
- <u-input v-model="number" @click="inputNum('num')" type="number" placeholder="请输入数量" />
|
|
|
+ <u-input v-model="number" type="number" placeholder="请输入数量" />
|
|
|
<text>个乐豆</text>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -31,7 +31,7 @@
|
|
|
<u-button @click="handlePay" type="error" >确认支付</u-button>
|
|
|
</view>
|
|
|
<!-- 确认支付弹窗 -->
|
|
|
- <u-popup mode="center" closeable v-model="showPayModal" width="500rpx" >
|
|
|
+ <u-popup mode="center" closeable @close="closeModal" v-model="showPayModal" width="600rpx" >
|
|
|
<view class="slot-content">
|
|
|
<view>请输入支付密码</view>
|
|
|
<view class="text-cont">
|
|
@@ -39,28 +39,31 @@
|
|
|
<text>收取门店:</text>
|
|
|
<text>{{storeName}}</text>
|
|
|
</view>
|
|
|
- <view>
|
|
|
+ <view class="num-text">
|
|
|
<text>支付数量:</text>
|
|
|
- <text><text class="num-big">{{number}}</text>个乐豆</text>
|
|
|
+ <view>
|
|
|
+ <text class="num-big">{{number}}</text>乐豆
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view>
|
|
|
- <text>备 注:</text>
|
|
|
+ <text>备 注:</text>
|
|
|
<text>{{remarks||'--'}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="footer">
|
|
|
- <u-input v-model="password" input-align="center" @click="inputNum('psw')" type="password" placeholder="请输入支付密码" />
|
|
|
+ <u-input v-model="password"
|
|
|
+ input-align="center"
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入支付密码"
|
|
|
+ :maxlength="30"
|
|
|
+ @confirm="confirm"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="fot-btn">
|
|
|
+ <u-button @click="confirm" type="error" >确认支付</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
- <u-keyboard mode="number"
|
|
|
- safe-area-inset-bottom
|
|
|
- v-model="showKeyboard"
|
|
|
- @change="handleChange"
|
|
|
- @backspace="handleBack"
|
|
|
- @confirm="showKeyboard=false"
|
|
|
- @cancel="showKeyboard=false">
|
|
|
- </u-keyboard>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -73,35 +76,32 @@
|
|
|
number: '', // 支付数量
|
|
|
showPayModal: false, // 支付弹窗
|
|
|
password: '', // 支付密码
|
|
|
- showKeyboard: false, // 数字键盘
|
|
|
- keyInputType: '' // 适用数字键盘输入关联的文本框 num:乐豆数量 psw: 支付密码
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
- // 打开数字键盘
|
|
|
- inputNum(type) {
|
|
|
- this.keyInputType = type
|
|
|
- this.showKeyboard = true
|
|
|
- },
|
|
|
- // 数字键盘输入改变
|
|
|
- handleChange (val) {
|
|
|
- if (this.keyInputType == 'num') {
|
|
|
- this.number += val
|
|
|
+ // 确认支付
|
|
|
+ handlePay() {
|
|
|
+ if (!this.number) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入支付数量',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
} else {
|
|
|
- this.password += val
|
|
|
+ this.showPayModal = true
|
|
|
}
|
|
|
- console.log(this.value)
|
|
|
},
|
|
|
- // 数字键盘退格键
|
|
|
- handleBack () {
|
|
|
-
|
|
|
+ // 关闭弹窗
|
|
|
+ closeModal() {
|
|
|
+ this.showPayModal = false
|
|
|
+ this.password = ''
|
|
|
},
|
|
|
- // 确认支付
|
|
|
- handlePay() {
|
|
|
- this.showPayModal = true
|
|
|
+ // 输入密码完成 支付
|
|
|
+ confirm(e) {
|
|
|
+ console.log(e,'eeeee')
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
}
|
|
@@ -134,6 +134,7 @@
|
|
|
}
|
|
|
.slot-content{
|
|
|
padding: 30upx 0;
|
|
|
+ font-size: 32upx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
@@ -143,24 +144,31 @@
|
|
|
margin-top: 20upx;
|
|
|
border-bottom: 1px solid #F8F8F8;
|
|
|
>view {
|
|
|
- padding: 20upx 40upx;
|
|
|
+ padding: 10upx 40upx;
|
|
|
display: flex;
|
|
|
>text{
|
|
|
&:last-child {
|
|
|
flex: 1;
|
|
|
padding-left: 30upx;
|
|
|
}
|
|
|
- .num-big{
|
|
|
- font-size: 36upx;
|
|
|
- color: red;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .num-big{
|
|
|
+ font-size: 36upx;
|
|
|
+ color: red;
|
|
|
+ padding-left: 30upx;
|
|
|
}
|
|
|
}
|
|
|
+ .num-text{
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
.footer{
|
|
|
- width: 50%;
|
|
|
+ width: 80%;
|
|
|
border-bottom: 1px solid #b1b1b1;
|
|
|
}
|
|
|
+ .fot-btn{
|
|
|
+ margin-top: 30upx;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|