133 lines
2.8 KiB
Vue
133 lines
2.8 KiB
Vue
<template>
|
|
<view :style="viewColor">
|
|
<view class="payment" :class="pay_close ? 'on' : ''">
|
|
<view class="title acea-row row-center-wrapper">
|
|
选择提现方式<text class="iconfont icon-guanbi" @click='close'></text>
|
|
</view>
|
|
<radio-group @change="radioChange">
|
|
<label class="item acea-row row-between-wrapper" v-for="(item,index) in payMode" :key="index">
|
|
<view class="acea-row-left">
|
|
<view class="icon-left" :style="[{backgroundColor: item.bg_color}]">
|
|
<view class="iconfont" :class="item.icon"></view>
|
|
</view>
|
|
<view class="name">{{item.name}}</view>
|
|
</view>
|
|
<view>
|
|
<radio :value="item.id.toString()" :checked="item.id == order_id" />
|
|
</view>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
<view class="mask" ref="close" @click='close' v-if="pay_close"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { orderPay, presellOrderPay } from '@/api/order.js';
|
|
import { mapGetters } from "vuex";
|
|
export default {
|
|
props: {
|
|
payMode: {
|
|
type: Array,
|
|
default: function() {
|
|
return [];
|
|
}
|
|
},
|
|
pay_close: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
order_id: {
|
|
type: String,
|
|
default: '0'
|
|
}
|
|
},
|
|
computed: mapGetters(['viewColor']),
|
|
data() {
|
|
return {
|
|
type: '0'
|
|
};
|
|
},
|
|
methods: {
|
|
close: function() {
|
|
this.$emit('payClose')
|
|
},
|
|
radioChange(e) {
|
|
this.type = e.detail.value
|
|
this.$emit('onChangeFun', {
|
|
action: 'payClose',
|
|
type: this.type
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.payment {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
background-color: #fff;
|
|
padding-bottom: 60rpx;
|
|
z-index: 99;
|
|
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
.payment.on {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
/deep/radio .uni-radio-input.uni-radio-input-checked {
|
|
border: 1px solid var(--view-theme) !important;
|
|
background-color: var(--view-theme) !important
|
|
}
|
|
.payment .title {
|
|
text-align: center;
|
|
height: 123rpx;
|
|
font-size: 32rpx;
|
|
color: #282828;
|
|
font-weight: bold;
|
|
padding-right: 30rpx;
|
|
margin-left: 30rpx;
|
|
position: relative;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.payment .title .iconfont {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 43rpx;
|
|
color: #8a8a8a;
|
|
font-weight: normal;
|
|
}
|
|
.payment .item {
|
|
border-bottom: 1px solid #eee;
|
|
height: 130rpx;
|
|
margin-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
}
|
|
.payment .item .acea-row-left{
|
|
.icon-left{
|
|
display: inline-block;
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
text-align: center;
|
|
line-height: 56rpx;
|
|
background-color: #FE960F;
|
|
margin-right: 20rpx;
|
|
border-radius: 50%;
|
|
.iconfont{
|
|
color: #FFF;
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
.name{
|
|
display: inline-block;
|
|
}
|
|
}
|
|
</style>
|