<template>
|
<view :class="[Visible ? 'usable-popup points_open' : 'usable-popup points_close', theme() || '']" :data-theme='theme()'>
|
<view class="popup-bg" @click="closePopup(null)"></view>
|
<view class="main pt30" v-on:click.stop>
|
<view class="popup-title pb30 pr border-b-e">
|
<view class="title pl30 f32 fb">{{points_name()}}<text class="f28">(剩余：{{activityData.points}})</text></view>
|
<view class="iconfont icon-guanbi" @click="closePopup(null)"></view>
|
</view>
|
<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
|
<view class="p-0-30 points-box">
|
<view class="item d-b-c">
|
<view class="title f28">暂不使用{{points_name()}}</view>
|
<view class="select-box" @click="changePoints(-1)">
|
<i class="iconfont icon-xuanze theme-price" v-if="select_index == -1"></i>
|
<view class="round" v-else></view>
|
</view>
|
</view>
|
<view class="item d-b-c" v-for="(item, index) in pointsList" :key="index">
|
<view class="title f28">
|
抵扣<text class="theme-price mr10">￥{{item.price}}</text>{{index == 0 ? '最高' : ''}}使用{{item.points}}{{points_name()}}
|
</view>
|
<view class="select-box" @click="changePoints(index)">
|
<i class="iconfont icon-xuanze theme-price" v-if="select_index == index"></i>
|
<view class="round" v-else></view>
|
</view>
|
</view>
|
<view class="item d-b-c">
|
<view class="title f28">自定义使用{{points_name()}}数量</view>
|
<view class="select-box" @click="changePoints(99)">
|
<i class="iconfont icon-xuanze theme-price" v-if="select_index == 99"></i>
|
<view class="round" v-else></view>
|
</view>
|
</view>
|
<view class="custom-box radius12 p30" v-if="select_index == 99">
|
<view class="d-c-c f28">
|
<view>使用</view>
|
<input type="number" v-model="custom_points" @input="handleInput"></input>
|
<view>
|
{{points_name()}}，抵<text class="theme-price">￥{{(custom_points*activityData.points_ratio).toFixed(2)}}</text>
|
</view>
|
</view>
|
<view class="gray9 tc pt20">您最多可以使用{{activityData.points}}个{{points_name()}}哦</view>
|
</view>
|
</view>
|
</scroll-view>
|
<view class="footer-btn bg-white p-0-30 pt20 pb20">
|
<button type="default" @click="onSubmit" class="btn-submit">确定</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
/*手机高度*/
|
phoneHeight: 0,
|
/*可滚动视图区域高度*/
|
scrollviewHigh: 0,
|
/*是否可见*/
|
Visible: false,
|
pointsList: [],
|
max_points: 0, // 最多可使用的积分
|
select_index: -1, // 选中的积分项
|
custom_points: 1, // 自定义积分数量
|
/*表单*/
|
formData: {
|
points: 0,
|
price: 0,
|
},
|
};
|
},
|
props: ['isOpenPoints', 'activityData', 'max_price'],
|
|
onLoad() {},
|
mounted() {
|
this.init();
|
},
|
watch: {
|
isOpenPoints: function(n, o) {
|
if (n != o) {
|
this.Visible = n;
|
this.setPoinstList();
|
}
|
}
|
},
|
methods: {
|
/*初始化*/
|
init() {
|
let self = this;
|
uni.getSystemInfo({
|
success(res) {
|
self.phoneHeight = res.windowHeight;
|
self.scrollviewHigh = self.phoneHeight * 0.6
|
}
|
});
|
},
|
|
setPoinstList() {
|
let self = this;
|
self.pointsList = [];
|
let points = parseInt(self.activityData.points);
|
let point_ratio = parseFloat(self.activityData.points_ratio);
|
let max_points_money = parseFloat((point_ratio * points).toFixed(2));
|
// 能兑换的金额
|
if (max_points_money > self.max_price) {
|
max_points_money = self.max_price;
|
}
|
self.max_points = parseInt(max_points_money / point_ratio);
|
self.pointsList.push({
|
price: max_points_money,
|
points: self.max_points,
|
});
|
var priceArr = self.getLowerSequenceFlexible(max_points_money);
|
for (var item of priceArr) {
|
if (item == max_points_money) continue;
|
self.pointsList.push({
|
price: item,
|
points: item / point_ratio,
|
});
|
}
|
},
|
|
getLowerSequenceFlexible(num, count = 5) {
|
let base;
|
let minValue = 1;
|
if (num >= 1000) {
|
base = 200;
|
} else if (num >= 500) {
|
base = 100;
|
} else if (num >= 250) {
|
base = 50;
|
} else if (num >= 100) {
|
base = 20;
|
} else if (num >= 50) {
|
base = 10;
|
} else {
|
base = 5;
|
}
|
// 获取比num小的最大基数倍数
|
const start = Math.floor(num / base) * base;
|
const result = [];
|
let current = start;
|
for (let i = 0; i < count; i++) {
|
if (current < minValue) {
|
break;
|
}
|
result.push(current);
|
current -= base;
|
}
|
return result;
|
},
|
|
/*选择积分数量*/
|
changePoints(e) {
|
this.select_index = e;
|
},
|
|
handleInput(e) {
|
let value = e.detail.value;
|
this.custom_points = value.replace(/[^0-9]/g, '');
|
if (this.custom_points > this.max_points) {
|
this.custom_points = this.max_points;
|
}
|
},
|
|
/*提交*/
|
onSubmit() {
|
let points = 0;
|
if (this.select_index == -1) {
|
points = 0;
|
} else if (this.select_index == 99) {
|
points = this.custom_points;
|
} else {
|
points = this.pointsList[this.select_index].points;
|
}
|
this.$emit('close', points);
|
},
|
|
/*关闭弹窗*/
|
closePopup(e) {
|
this.$emit('close', e);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.usable-popup .popup-bg {
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
background: rgba(0, 0, 0, 0.6);
|
z-index: 110;
|
}
|
|
.usable-popup .main {
|
position: fixed;
|
width: 100%;
|
bottom: 0;
|
min-height: 200rpx;
|
background-color: #ffffff;
|
transform: translate3d(0, 1380rpx, 0);
|
transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
|
bottom: env(safe-area-inset-bottom);
|
z-index: 110;
|
border-radius: 30rpx 30rpx 0 0;
|
}
|
|
.usable-popup.points_open .main {
|
transform: translate3d(0, 0, 0);
|
}
|
|
.usable-popup.points_close .popup-bg {
|
display: none;
|
}
|
|
.footer-btn .btn-submit {
|
height: 88rpx;
|
line-height: 88rpx;
|
font-size: 30rpx;
|
@include background_color('background_color');
|
color: #ffffff;
|
border-radius: 88rpx;
|
}
|
|
.popup-title {
|
.iconfont {
|
position: absolute;
|
right: 30rpx;
|
top: 10rpx;
|
color: #999999;
|
}
|
}
|
|
.points-box {
|
.item {
|
padding: 26rpx 0;
|
font-size: 28rpx;
|
height: 38rpx;
|
.select-box {
|
.iconfont {
|
font-size: 42rpx;
|
}
|
.round {
|
width: 30rpx;
|
height: 30rpx;
|
border: 4rpx solid #999999;
|
border-radius: 30rpx;
|
}
|
}
|
}
|
}
|
.custom-box {
|
background-color: #f5f5f5;
|
input {
|
width: 160rpx;
|
text-align: center;
|
border-bottom: 1rpx solid #666666;
|
}
|
}
|
</style>
|
