288 lines
7.1 KiB
Vue
288 lines
7.1 KiB
Vue
<template>
|
|
<view class="content">
|
|
<custom :bgColor="'transparent'">
|
|
<template v-slot:content>
|
|
<view class="custom_content flex_ac">
|
|
<view class="custom_c_txt">マインポイント</view>
|
|
</view>
|
|
</template>
|
|
</custom>
|
|
|
|
<view class="main">
|
|
<view class="zon-box">
|
|
<view class="zon-tit">マインポイント</view>
|
|
<view class="zon-jifen"
|
|
><view class="img">
|
|
<image src="../../static/img/icon_28.png" /> </view
|
|
>{{ allIntegral }}</view
|
|
>
|
|
</view>
|
|
<view class="kou-box">
|
|
<view class="kou-tit"> ご利用ポイント数 </view>
|
|
<view class="kou-nr">
|
|
<view class="nr-left">
|
|
<input
|
|
type="number"
|
|
class="uni-input"
|
|
name="input"
|
|
v-model="userNum"
|
|
:style="{ color: userNum == 0 ? '#dbdbdb' : '#000000' }"
|
|
/>
|
|
</view>
|
|
<view class="nr-right">
|
|
<view class="txt">{{ $t("Point") }}</view>
|
|
<view @tap="allBtn" class="button"
|
|
>全部使う/{{ $t("全部使用") }}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
<view class="kou-txt">※ポイント利用上限 {{ integCap }}point</view>
|
|
</view>
|
|
|
|
<view @tap="btnOk" :class="['btn-btm', { 'btn-acv': userNum != 0 }]"
|
|
>確認/{{ $t("确认") }}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getWriteOffInfo } from "@/request/ticketReq.js";
|
|
import { getUserWallet } from "@/request/loginReq.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
userNum: "",
|
|
allIntegral: "",
|
|
heXiaoData: [],
|
|
integCap: "", // 计算后积分上限
|
|
poins_deduction: "", // 店铺设置的上限
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
let storeId = uni.getStorageSync("store_obj").id;
|
|
let userId = uni.getStorageSync("customer_info")[0];
|
|
this.getListFn(storeId, userId);
|
|
this.getUserWalletFn(userId);
|
|
|
|
this.heXiaoData = uni.getStorageSync("heXiaoData");
|
|
|
|
console.log("heXiaoData", this.heXiaoData);
|
|
},
|
|
methods: {
|
|
btnOk() {
|
|
this.userNum = +this.userNum;
|
|
if (this.userNum == 0) return;
|
|
|
|
// 判断输入的积分是否超过上限
|
|
if (this.integCap < this.userNum) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: this.$t(
|
|
"超出账号可使用积分上限,以帮你修正,请确认并再次点击按钮"
|
|
),
|
|
});
|
|
this.userNum = this.integCap;
|
|
return;
|
|
}
|
|
console.log("确定", this.userNum);
|
|
// 计算抵扣后的金额
|
|
// if (!!this.heXiaoData.dMoney) {
|
|
// 抵扣后的价格=总价-(积分抵扣+优惠券抵扣)
|
|
this.heXiaoData.dMoney =
|
|
this.heXiaoData.totalMoney - (this.userNum + this.heXiaoData.dTicket);
|
|
// } else {
|
|
// this.heXiaoData.dMoney = this.heXiaoData.totalMoney - this.userNum;
|
|
// }
|
|
// 抵扣的积分
|
|
this.heXiaoData.dIntegral = this.userNum;
|
|
uni.setStorageSync("heXiaoData", this.heXiaoData);
|
|
|
|
// uni.setStorageSync("use_point", this.userNum);
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
// 获取用户积分
|
|
async getUserWalletFn(id) {
|
|
let res = await getUserWallet(id);
|
|
this.allIntegral = res.data.data.points;
|
|
getUserWallet;
|
|
console.log("钱包", res);
|
|
},
|
|
async getListFn(spid, userId) {
|
|
let res = await getWriteOffInfo({ shop_id: spid, user_id: userId });
|
|
this.poins_deduction = res.data.data.poins_deduction;
|
|
console.log("店铺上限", this.poins_deduction);
|
|
|
|
this.integCap = Math.round(
|
|
(this.poins_deduction.deduction_ratio / 100) *
|
|
this.heXiaoData.totalMoney
|
|
);
|
|
|
|
// 一个是对比消费金额计算出的积分上限，一个是店铺设置的积分上限
|
|
// -优先显示计算出的上限，如果计算出的上限超过店铺设置的上限，则显示店铺设置的上限
|
|
if (
|
|
this.poins_deduction.max_poins_deduction != 0 &&
|
|
this.poins_deduction.max_poins_deduction < this.integCap
|
|
) {
|
|
this.integCap = this.poins_deduction.max_poins_deduction;
|
|
}
|
|
console.log("计算后", this.integCap);
|
|
},
|
|
allBtn() {
|
|
// 可使用的积分上限
|
|
if (this.allIntegral > this.integCap) {
|
|
this.userNum = this.integCap;
|
|
} else {
|
|
this.userNum = this.allIntegral;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: linear-gradient(
|
|
rgba(160, 204, 87, 0.2) 0%,
|
|
rgba(223, 226, 0, 0.2) 100%
|
|
);
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.custom_content {
|
|
width: 500rpx;
|
|
justify-content: center;
|
|
}
|
|
.custom_c_txt {
|
|
font-size: 40rpx;
|
|
color: $step_color;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
background-color: #f8f9fb;
|
|
height: 100vh;
|
|
background: linear-gradient(
|
|
rgba(160, 204, 87, 0.2) 0%,
|
|
rgba(223, 226, 0, 0.2) 100%
|
|
);
|
|
background: linear-gradient(
|
|
rgba(160, 204, 87, 0.2) 0%,
|
|
rgba(223, 226, 0, 0.2) 100%
|
|
);
|
|
}
|
|
.main {
|
|
padding: 32rpx 30rpx 0;
|
|
.zon-box {
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 30rpx;
|
|
.zon-tit {
|
|
color: #85bc6b;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
.zon-jifen {
|
|
font-weight: 600;
|
|
font-size: 68rpx;
|
|
color: #000;
|
|
display: flex;
|
|
align-items: center;
|
|
.img {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
margin-right: 10rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.kou-box {
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
|
|
.kou-tit {
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #85bc6b;
|
|
}
|
|
|
|
.kou-nr {
|
|
margin: 16rpx 0 20rpx;
|
|
border: 1px solid #85bc6b;
|
|
padding: 24rpx;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.nr-left {
|
|
flex: 1;
|
|
input {
|
|
font-weight: 600;
|
|
font-size: 48rpx;
|
|
// color: #dbdbdb;
|
|
}
|
|
}
|
|
.nr-right {
|
|
display: flex;
|
|
align-items: center;
|
|
.txt {
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #000;
|
|
}
|
|
.button {
|
|
padding: 20rpx 30rpx;
|
|
border-radius: 39rpx;
|
|
background: linear-gradient(90deg, #7eb96a 0%, #d3d722 100%);
|
|
margin-left: 24rpx;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.kou-txt {
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #007ad7;
|
|
}
|
|
}
|
|
|
|
.btn-btm {
|
|
padding: 20rpx 0;
|
|
width: 560rpx;
|
|
background-color: #f2f2f2;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #acacac;
|
|
border-radius: 41rpx;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
margin-top: 60rpx;
|
|
&.btn-acv {
|
|
background: linear-gradient(90deg, #7eb96a 0%, #d3d722 100%);
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style> |