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>
|
||||
186
pages/user/points/points.vue
Normal file
186
pages/user/points/points.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<view :data-theme='theme()' :class="theme() || ''">
|
||||
<view class="points-top theme-bg d-b-c">
|
||||
<image class="bg-points" src="/static/bg-points.png" mode=""></image>
|
||||
<view class="d-c d-c-c pr ww100 hh100">
|
||||
<text class="f28 mb30">{{points_name()}}</text>
|
||||
<text class="f72 fb">{{points}}</text>
|
||||
<text class="f24 re-btn dominant" @click="isPop=true" v-if="is_trans_balance">提现</text>
|
||||
</view>
|
||||
<button v-if="is_open" class="right-btn" @click="gotoShop">{{points_name()}}商城<text class="icon iconfont icon-sanjiao1 ml10" style="color: #ffffff;font-size: 28rpx;"></text></button>
|
||||
</view>
|
||||
<!--列表-->
|
||||
|
||||
<view class="p-0-30 bg-white">
|
||||
<view class="d-b-c border-b p-30-0" v-for="(item, index) in tableData" :key="index">
|
||||
<view class="d-s-s f-w d-c flex-1">
|
||||
<text class="f28">{{points_name(item.describe)}}</text>
|
||||
<text class="pt10 gray9 20">{{item.create_time}}</text>
|
||||
</view>
|
||||
<view class="red f28" v-if="item.value>0">+{{item.value}}</view>
|
||||
<view class="red f28" v-else>{{item.value}}</view>
|
||||
</view>
|
||||
<!-- 没有记录 -->
|
||||
<view class="d-c-c p30" v-if="tableData.length==0 && !loading">
|
||||
<text class="iconfont icon-wushuju"></text>
|
||||
<text class="cont">亲，暂无相关记录哦</text>
|
||||
</view>
|
||||
<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
|
||||
</view>
|
||||
<recharge :isPop="isPop" :discount_ratio="discount_ratio" @close="closePop"></recharge>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniLoadMore from "@/components/uni-load-more.vue";
|
||||
import recharge from "./part/recharge.vue";
|
||||
export default {
|
||||
components: {
|
||||
uniLoadMore,
|
||||
recharge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isPop: false,
|
||||
/*是否加载完成*/
|
||||
loadding: true,
|
||||
indicatorDots: true,
|
||||
autoplay: true,
|
||||
interval: 2000,
|
||||
duration: 500,
|
||||
/*顶部刷新*/
|
||||
topRefresh: false,
|
||||
/*手机高度*/
|
||||
phoneHeight: 0,
|
||||
/*可滚动视图区域高度*/
|
||||
scrollviewHigh: 0,
|
||||
/*数据列表*/
|
||||
tableData: [],
|
||||
/*最后一页码数*/
|
||||
last_page: 0,
|
||||
/*当前页面*/
|
||||
page: 1,
|
||||
/*每页条数*/
|
||||
list_rows: 20,
|
||||
no_more: false,
|
||||
loading: true,
|
||||
points: 0,
|
||||
is_open: false,
|
||||
discount_ratio:'0',
|
||||
is_trans_balance:false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
/*加载中状态*/
|
||||
loadingType() {
|
||||
if (this.loading) {
|
||||
return 1;
|
||||
} else {
|
||||
if (this.tableData.length != 0 && this.no_more) {
|
||||
return 2;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.points_name()
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
/*获取数据*/
|
||||
this.getData();
|
||||
},
|
||||
onReachBottom() {
|
||||
let self = this;
|
||||
if (self.page < self.last_page) {
|
||||
self.page++;
|
||||
self.getData();
|
||||
}
|
||||
self.no_more = true;
|
||||
|
||||
},
|
||||
methods: {
|
||||
closePop(e) {
|
||||
if(e!=null){
|
||||
this.page = 1;
|
||||
this.tableData = [];
|
||||
this.getData();
|
||||
}
|
||||
this.isPop = false;
|
||||
},
|
||||
/*获取数据*/
|
||||
getData() {
|
||||
let self = this;
|
||||
let page = self.page;
|
||||
let list_rows = self.list_rows;
|
||||
self._get('points.log/index', {
|
||||
page: page || 1,
|
||||
list_rows: list_rows,
|
||||
}, function(data) {
|
||||
self.loading = false;
|
||||
self.points = data.data.points;
|
||||
self.discount_ratio = data.data.discount_ratio;
|
||||
self.is_open = data.data.is_open;
|
||||
self.is_trans_balance = data.data.is_trans_balance*1;
|
||||
self.tableData = self.tableData.concat(data.data.list.data);
|
||||
self.last_page = data.data.list.last_page;
|
||||
if (data.data.list.last_page <= 1) {
|
||||
self.no_more = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
/*跳转积分商城*/
|
||||
gotoShop() {
|
||||
this.gotoPage('/pages/plus/points/list/list');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.points-top {
|
||||
box-sizing: border-box;
|
||||
height: 346rpx;
|
||||
padding: 0 30rpx;
|
||||
color: #FFFFFF;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.bg-points{
|
||||
width: 750rpx;
|
||||
height: 346rpx;
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.re-btn {
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
width: 190rpx;
|
||||
padding: 0 8rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
margin-top: 46rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.right-btn{
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
right: 21rpx;
|
||||
top: 12rpx;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user