You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.3 KiB
121 lines
2.3 KiB
1 week ago
|
<template>
|
||
|
|
<view class="pay">
|
||
|
|
<view class="list">
|
||
|
|
<view class="shopTitle">
|
||
|
|
<text class="wlIcon-dianpu1 icon margin-right-xs"></text>
|
||
|
|
<text class="titleText">店铺名称</text>
|
||
|
|
</view>
|
||
|
|
<view class="money">
|
||
|
|
支付金额
|
||
|
|
</view>
|
||
|
|
<view class="inputNumContent">
|
||
|
|
<u-input placeholder="请输入金额" border="bottom" v-model="num">
|
||
|
|
<template slot="prefix">
|
||
|
|
<text class="flag">￥</text>
|
||
|
|
</template>
|
||
|
|
</u-input>
|
||
|
|
</view>
|
||
|
|
<view class="changeContent">
|
||
|
|
<u-checkbox-group
|
||
|
|
shape="circle"
|
||
|
|
v-model="checkboxValue1"
|
||
|
|
iconPlacement="right"
|
||
|
|
@change="checkboxChange"
|
||
|
|
placement="column">
|
||
|
|
<u-checkbox activeColor="#EB6100" label="余额支付：￥10"></u-checkbox>
|
||
|
|
<u-checkbox activeColor="#EB6100" label="红包抵扣：当前红包数量2 可抵扣￥2"></u-checkbox>
|
||
|
|
</u-checkbox-group>
|
||
|
|
</view>
|
||
|
|
<view class="goPayBtn">
|
||
|
|
去支付
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default{
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
num:null,
|
||
|
|
checkboxValue1:[]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
checkboxChange(val){
|
||
|
|
console.log(val)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.pay{
|
||
|
|
background-color: #F2F3F4;
|
||
|
|
min-height: calc(100vh);
|
||
|
|
border: 1px solid transparent;
|
||
|
|
.list{
|
||
|
|
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
margin:24rpx;
|
||
|
|
padding:30rpx;
|
||
|
|
.shopTitle {
|
||
|
|
.icon{
|
||
|
|
font-size: 32rpx;
|
||
|
|
}
|
||
|
|
.titleText{
|
||
|
|
margin-left: 16rpx;
|
||
|
|
|
||
|
|
font-family: Source Han Sans SC;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.money{
|
||
|
|
|
||
|
|
font-family: Source Han Sans SC;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #EB6100;
|
||
|
|
margin-top:37rpx;
|
||
|
|
}
|
||
|
|
.inputNumContent{
|
||
|
|
::v-deep .u-input{
|
||
|
|
padding: 30rpx 0 !important;
|
||
|
|
font-size: 60rpx !important;
|
||
|
|
color: #333333 !important;
|
||
|
|
}
|
||
|
|
::v-deep .u-input__content__field-wrapper__field{
|
||
|
|
font-size: 48rpx !important;
|
||
|
|
height: 58rpx!important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
::v-deep .u-checkbox{
|
||
|
|
margin-top:37rpx;
|
||
|
|
text{
|
||
|
|
|
||
|
|
font-family: Source Han Sans SC;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.goPayBtn{
|
||
|
|
width: 70%;
|
||
|
|
margin-left:15%;
|
||
|
|
margin-top:50rpx;
|
||
|
|
padding:30rpx 0;
|
||
|
|
background: #EB6100;
|
||
|
|
border-radius: 45px;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|