195 lines
3.7 KiB
Vue
195 lines
3.7 KiB
Vue
<template>
|
|
<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
|
|
<template #desc>
|
|
<view class="u-text-left u-p-30 color-666 u-font-28">
|
|
<view class="u-m-t-32 u-flex ">
|
|
<view class="" v-if="accountPoints.calcRes.usable">
|
|
<text class="color-red">*</text>
|
|
<text class=""
|
|
v-if="accountPoints.calcRes.equivalentPoints">100积分等于{{to2(accountPoints.calcRes.equivalentPoints*100)}}元,</text>
|
|
<text>
|
|
最大抵扣积分{{accountPoints.calcRes.maxUsablePoints}}
|
|
</text>
|
|
<text>,
|
|
最小抵扣积分0
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-t-40 u-flex ">
|
|
<view>积分</view>
|
|
<view class="u-m-l-32 border u-p-l-10 u-p-r-10 u-flex-1">
|
|
<uni-easyinput type="number" @input="pointsInput" @change="pointsChange" paddingNone
|
|
:inputBorder="false" v-model="form.points" placeholder="输入积分抵扣数量"></uni-easyinput>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template #btn>
|
|
<view class="u-p-30">
|
|
<view class="u-m-t-10">
|
|
<my-button @tap="confirm" shape="circle" fontWeight="700">修改</my-button>
|
|
<view class="">
|
|
<my-button @tap="close" type="cancel" bgColor="#fff">取消</my-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</my-model>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive,
|
|
nextTick,
|
|
ref,
|
|
watch
|
|
} from 'vue';
|
|
import myModel from '@/components/my-components/my-model.vue'
|
|
import myButton from '@/components/my-components/my-button.vue'
|
|
import myTabs from '@/components/my-components/my-tabs.vue'
|
|
import infoBox from '@/commons/utils/infoBox.js'
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '积分抵扣'
|
|
},
|
|
accountPoints:{
|
|
type:Object,
|
|
default:()=>{
|
|
return {
|
|
calcRes:{
|
|
usable: false,
|
|
unusableReason: '',
|
|
minDeductionPoints: 0,
|
|
maxUsablePoints: 0
|
|
}
|
|
}
|
|
}
|
|
},
|
|
price: {
|
|
type: [Number, String],
|
|
default: 0
|
|
}
|
|
})
|
|
|
|
function to2(n) {
|
|
if (!n) {
|
|
return ''
|
|
}
|
|
return n.toFixed(2)
|
|
}
|
|
|
|
function pointsInput(e){
|
|
setTimeout(()=>{
|
|
form.points=Math.floor(e)
|
|
},100)
|
|
}
|
|
|
|
|
|
function pointsChange(newval) {
|
|
form.points=Math.floor(newval)
|
|
if (newval < 0) {
|
|
form.points = 0
|
|
return infoBox.showToast('积分抵扣不能小于0')
|
|
}
|
|
if (newval > props.accountPoints.calcRes.maxUsablePoints) {
|
|
form.points = props.price
|
|
return infoBox.showToast('积分抵扣不能大于'+props.accountPoints.calcRes.maxUsablePoints)
|
|
}
|
|
}
|
|
|
|
|
|
const form = reactive({
|
|
points: props.price,
|
|
})
|
|
watch(() => props.price, (newval) => {
|
|
form.points = newval
|
|
})
|
|
|
|
function resetForm() {
|
|
form.points=0
|
|
}
|
|
|
|
const model = ref(null)
|
|
|
|
function open() {
|
|
model.value.open()
|
|
form.points = props.price
|
|
}
|
|
|
|
function close() {
|
|
model.value.close()
|
|
}
|
|
const emits = defineEmits(['confirm'])
|
|
|
|
function confirm() {
|
|
emits('confirm',Math.floor(form.points) )
|
|
close()
|
|
}
|
|
defineExpose({
|
|
open,
|
|
close
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.border {
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
border-color: #999;
|
|
}
|
|
|
|
.lh34 {
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.tag {
|
|
background-color: #fff;
|
|
border: 1px solid #E5E5E5;
|
|
line-height: inherit;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
padding: 6rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
|
|
&.active {
|
|
border-color: #E6F0FF;
|
|
color: $my-main-color;
|
|
}
|
|
}
|
|
|
|
.hover-class {
|
|
background-color: #E5E5E5;
|
|
}
|
|
|
|
.discount {
|
|
.u-absolute {
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.bg1 {
|
|
background: #F7F7FA;
|
|
}
|
|
|
|
.tab {
|
|
padding: 0 80rpx;
|
|
}
|
|
|
|
.border {
|
|
border: 1px solid #E5E5E5;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.input-box {
|
|
padding: 22rpx 32rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.placeholder-class {
|
|
font-size: 28rpx;
|
|
}
|
|
</style> |