first commit
This commit is contained in:
wangxiaowei
248
pages/user/points/part/recharge.vue
Normal file
248
pages/user/points/part/recharge.vue
Normal file
@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<view :class="Visible ? 'pop-bg open' : 'pop-bg close'" @click.stop="closePop(null)">
|
||||
<view class="pop-content" @click.stop>
|
||||
<view class="recharge-top theme-bg mb30">
|
||||
<view class="recharge-icon left"></view>
|
||||
<view class="recharge-icon right"></view>
|
||||
</view>
|
||||
<view class="f30 gray3 ww100 mb35 tc fb">{{points_name()}}提现</view>
|
||||
<view class="input-box"><input type="digit" :placeholder="'请输入兑换'+points_name()+'值'" v-model="value" />
|
||||
<image class="input-err" src="/static/icon/input-err.png" mode="" @click="value = ''"></image>
|
||||
</view>
|
||||
<view class="gray9 f26 tc mt30" style="margin-bottom: 56rpx;">注:1{{points_name()}} = {{discount_ratio}} 余额</view>
|
||||
<view class="ww100 d-c-c">
|
||||
<view class="sub-btn theme-btn" @click="submit()">确认</view>
|
||||
<view class="close-btn theme-borderbtn" @click="closePop(null)">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniLoadMore from "@/components/uni-load-more.vue";
|
||||
export default {
|
||||
components: {
|
||||
uniLoadMore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input_len: 6,
|
||||
/*是否可见*/
|
||||
Visible: false,
|
||||
value: '',
|
||||
is_send: false,
|
||||
}
|
||||
},
|
||||
props: ['isPop', 'discount_ratio'],
|
||||
watch: {
|
||||
isPop: function(n, o) {
|
||||
let self = this;
|
||||
if (n != o) {
|
||||
self.Visible = n;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
let self = this;
|
||||
if (self.is_send) {
|
||||
return
|
||||
}
|
||||
self.is_send = true;
|
||||
let page = self.page;
|
||||
let list_rows = self.list_rows;
|
||||
self._get('user.User/transPoints', {
|
||||
points: self.value
|
||||
}, function(res) {
|
||||
self.is_send = false;
|
||||
self.showSuccess(res.msg, () => {
|
||||
self.closePop(true);
|
||||
})
|
||||
}, (err) => {
|
||||
self.is_send = false;
|
||||
});
|
||||
},
|
||||
closePop(e) {
|
||||
this.$emit('close', e);
|
||||
this.value = '';
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.recharge-top {
|
||||
height: 75rpx;
|
||||
position: relative;
|
||||
border-radius: 25rpx 25rpx 0 0;
|
||||
.recharge-icon {
|
||||
width: 12rpx;
|
||||
height: 49rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 8rpx 3rpx 0rpx rgba(6, 0, 1, 0.03);
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
top: -15rpx;
|
||||
|
||||
}
|
||||
|
||||
.recharge-icon.left {
|
||||
left: 156rpx;
|
||||
}
|
||||
|
||||
.recharge-icon.right {
|
||||
right: 156rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 428rpx;
|
||||
height: 72rpx;
|
||||
border: 1rpx solid #EEEEEE;
|
||||
border-radius: 15rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 14rpx 0 21rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
input {
|
||||
border: none;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.input-err {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
|
||||
.sub-btn {
|
||||
width: 148rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 36rpx;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
margin-right: 93rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 148rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 36rpx;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.dominant {
|
||||
color: $dominant-color;
|
||||
}
|
||||
|
||||
.pop-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
|
||||
.pop-content {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
width: 516rpx;
|
||||
height: 477rpx;
|
||||
padding: 0 0 32rpx 0;
|
||||
box-sizing: border-box;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pop-bg.close {
|
||||
// display: none;
|
||||
height: 0;
|
||||
|
||||
.pop-content {
|
||||
transform: translate3d(0, 2000rpx, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.code-image {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 16rpx;
|
||||
|
||||
}
|
||||
|
||||
.close-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 32rpx;
|
||||
}
|
||||
|
||||
.input-item {
|
||||
width: 72rpx;
|
||||
height: 96rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 0px;
|
||||
font-size: 40rpx;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 2rpx solid #00BDBD;
|
||||
margin-right: 16rpx;
|
||||
text-align: center;
|
||||
line-height: 96rpx;
|
||||
}
|
||||
|
||||
.input-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.input-hid {
|
||||
margin-left: -100%;
|
||||
}
|
||||
|
||||
.get-code-btn {
|
||||
background-color: #FFFFFF;
|
||||
color: $dominant-color;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
button[disabled]:not([type]).get-code-btn {
|
||||
background-color: #FFFFFF;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user