|
@@ -1,33 +1,36 @@
|
|
|
<template>
|
|
|
<view class="page-content">
|
|
|
- <u-gap height="10" bg-color="#f8f8f8"></u-gap>
|
|
|
- <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个字符)"
|
|
|
- type="textarea"
|
|
|
- >
|
|
|
- </u-field>
|
|
|
- <view class="num-cont">
|
|
|
- <text class="u-required">支付数量</text>
|
|
|
- <view class="num-input">
|
|
|
- <u-input v-model="number" type="number" placeholder="请输入数量" />
|
|
|
- <text>个乐豆</text>
|
|
|
+ <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>
|
|
|
- <u-gap height="50" bg-color="#f8f8f8"></u-gap>
|
|
|
<view class="pay-btn">
|
|
|
+ <view class="total">
|
|
|
+ <text>{{number||0}}</text>
|
|
|
+ <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
|
|
|
+ </view>
|
|
|
<u-button @click="handlePay" type="error" >确认支付</u-button>
|
|
|
</view>
|
|
|
<!-- 确认支付弹窗 -->
|
|
@@ -42,7 +45,8 @@
|
|
|
<view class="num-text">
|
|
|
<text>支付数量:</text>
|
|
|
<view>
|
|
|
- <text class="num-big">{{number}}</text>乐豆
|
|
|
+ <text class="num-big">{{number}}</text>
|
|
|
+ <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view>
|
|
@@ -52,7 +56,6 @@
|
|
|
</view>
|
|
|
<view class="footer">
|
|
|
<input v-model="password"
|
|
|
- style="text-align: center;"
|
|
|
type="password"
|
|
|
placeholder="请输入支付密码"
|
|
|
:maxlength="30"
|
|
@@ -176,22 +179,37 @@
|
|
|
.page-content{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background-color: #fff;
|
|
|
+ padding: 20upx;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ .content{
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
.num-cont{
|
|
|
width: 100%;
|
|
|
- padding: 30upx;
|
|
|
+ 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;
|
|
|
- border-bottom: 1px solid #f8f8f8;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.pay-btn{
|
|
|
padding: 0 30upx;
|
|
|
+ .total {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 48upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: red;
|
|
|
+ padding: 60upx 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.slot-content{
|
|
@@ -218,16 +236,25 @@
|
|
|
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;
|