430 lines
9.2 KiB
Vue
430 lines
9.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="reward">
|
|||
|
|
<view class="head">
|
|||
|
|
<view class="back" @tap="$navigateBack()">
|
|||
|
|
<text class="iconfont icon"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="title">
|
|||
|
|
商家打赏
|
|||
|
|
</view>
|
|||
|
|
<view class="history" @tap="toHistory">
|
|||
|
|
打赏记录
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="head-placeholder"></view>
|
|||
|
|
<view class="list">
|
|||
|
|
<view class="cell">
|
|||
|
|
<view class="label">
|
|||
|
|
购买人ID
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<input v-model="model.purchaserUsername" type="text" class="" :class="userOkClass"
|
|||
|
|
placeholder-class="input-placeholder" placeholder="请输入购买人id">
|
|||
|
|
<view class="extend">
|
|||
|
|
<view class="check-id" @tap="checkBuyerId">
|
|||
|
|
校验
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cell">
|
|||
|
|
<view class="label">
|
|||
|
|
昵称
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<input v-model="user.nickname" type="text" class="input" placeholder-class="input-placeholder"
|
|||
|
|
placeholder="请输入昵称">
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cell">
|
|||
|
|
<view class="label">
|
|||
|
|
消费金额
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<input v-model="model.money" type="number" class="input" placeholder-class="input-placeholder"
|
|||
|
|
placeholder="请输入消费金额">
|
|||
|
|
<view class="extend border-left">
|
|||
|
|
<view class="unit">
|
|||
|
|
元
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cell">
|
|||
|
|
<view class="label">
|
|||
|
|
打赏比例
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<input v-model="model.rewardRatio" type="digit" class="input" @blur="rewardRatioCheck"
|
|||
|
|
placeholder-class="input-placeholder" placeholder="请输入打赏比例">
|
|||
|
|
<view class="extend border-left">
|
|||
|
|
<view class="unit">
|
|||
|
|
{{rewardRatioText}}%
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="cell">
|
|||
|
|
<view class="label">
|
|||
|
|
短信验证码
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<input v-model="model.code" type="text" class="input" placeholder-class="input-placeholder"
|
|||
|
|
placeholder="验证码">
|
|||
|
|
<view class="extend border-left">
|
|||
|
|
<sms :username="userInfo.username" :phone="userInfo.mobile" type-code="6" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="reward-value">
|
|||
|
|
<view class="row">
|
|||
|
|
<view class="label">
|
|||
|
|
打赏金额：
|
|||
|
|
</view>
|
|||
|
|
<view class="value">
|
|||
|
|
{{rewardMoneyText}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="row">
|
|||
|
|
<view class="label">
|
|||
|
|
打赏绿色积分：
|
|||
|
|
</view>
|
|||
|
|
<view class="value">
|
|||
|
|
{{greenPriceText}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="submit" @tap="beforeSubmit">
|
|||
|
|
确认打赏
|
|||
|
|
</view>
|
|||
|
|
<pay-password ref="payPassword" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import url from "@/common/http/url.js"
|
|||
|
|
import PayPassword from "./components/pay-password.vue";
|
|||
|
|
import sms from "@/components/sms.vue"
|
|||
|
|
import { calcFn } from '@/utils/calc.js';
|
|||
|
|
import {
|
|||
|
|
mapMutations,
|
|||
|
|
mapState
|
|||
|
|
} from "vuex"
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
PayPassword,
|
|||
|
|
sms
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
greenPriceRate: null,
|
|||
|
|
userOk: null,
|
|||
|
|
user: {},
|
|||
|
|
model: {
|
|||
|
|
purchaserUsername: null,
|
|||
|
|
money: null,
|
|||
|
|
rewardRatio: null,
|
|||
|
|
mobile: null,
|
|||
|
|
code: null,
|
|||
|
|
payPassword: null
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState(["userInfo"]),
|
|||
|
|
rewardRatioText() {
|
|||
|
|
const rewardRatio = this.model.rewardRatio || 0;
|
|||
|
|
let value = parseFloat(parseFloat(rewardRatio * 100).toFixed(2));
|
|||
|
|
return value;
|
|||
|
|
},
|
|||
|
|
userOkClass() {
|
|||
|
|
const userOk = this.userOk;
|
|||
|
|
let okClass = "";
|
|||
|
|
if (userOk === null) {
|
|||
|
|
okClass = ""
|
|||
|
|
}
|
|||
|
|
if (userOk === true) {
|
|||
|
|
okClass = "input-ok"
|
|||
|
|
}
|
|||
|
|
if (userOk === false) {
|
|||
|
|
okClass = "input-unok"
|
|||
|
|
}
|
|||
|
|
return `input ${okClass}`
|
|||
|
|
},
|
|||
|
|
rewardMoneyValue() {
|
|||
|
|
const money = this.model.money || 0;
|
|||
|
|
const rate = this.model.rewardRatio || 0;
|
|||
|
|
return parseFloat(parseFloat(money * rate).toFixed(2))
|
|||
|
|
},
|
|||
|
|
rewardMoneyText() {
|
|||
|
|
const rewardMoneyValue = this.rewardMoneyValue || 0;
|
|||
|
|
return rewardMoneyValue;
|
|||
|
|
},
|
|||
|
|
greenPriceText() {
|
|||
|
|
const greenPriceRate = this.greenPriceRate || 0;
|
|||
|
|
return calcFn.divide(this.rewardMoneyValue, greenPriceRate).toFixed(6) <= 0 ? 0:calcFn.divide(this.rewardMoneyValue, greenPriceRate).toFixed(6)
|
|||
|
|
// return parseFloat(parseFloat(this.rewardMoneyValue / greenPriceRate).toFixed(4))
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.loadGreenPrice()
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 查询绿色积分比例
|
|||
|
|
loadGreenPrice() {
|
|||
|
|
this.$http("get", url.store.getGreenPriceConfig).then(({
|
|||
|
|
code,
|
|||
|
|
data,
|
|||
|
|
msg
|
|||
|
|
}) => {
|
|||
|
|
if (code !== 200) return this.$msg(msg);
|
|||
|
|
console.log(data)
|
|||
|
|
this.greenPriceRate = parseFloat(data)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 校验打赏比例
|
|||
|
|
rewardRatioCheck() {
|
|||
|
|
const val = this.model.rewardRatio || 0;
|
|||
|
|
if (parseFloat(val) >= 1) {
|
|||
|
|
this.model.rewardRatio = 1;
|
|||
|
|
}
|
|||
|
|
if (parseFloat(val) <= 0) {
|
|||
|
|
this.model.rewardRatio = 0;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 打赏记录
|
|||
|
|
toHistory() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/merchants/reward/history"
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 校验购买人id
|
|||
|
|
checkBuyerId() {
|
|||
|
|
if (!this.model.purchaserUsername) return this.$msg("请输入购买人 id")
|
|||
|
|
this.$http("get", url.store.checkBuyerId, {
|
|||
|
|
username: this.model.purchaserUsername
|
|||
|
|
}).then(({
|
|||
|
|
code,
|
|||
|
|
data,
|
|||
|
|
msg
|
|||
|
|
}) => {
|
|||
|
|
console.log(data)
|
|||
|
|
if (code !== 200) return this.$msg(msg);
|
|||
|
|
this.user = data || {};
|
|||
|
|
if (data) {
|
|||
|
|
this.userOk = true;
|
|||
|
|
} else {
|
|||
|
|
this.userOk = false;
|
|||
|
|
this.$msg("未找到用户");
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
beforeSubmit() {
|
|||
|
|
const model = this.model;
|
|||
|
|
if (!this.user || !this.user.username) return this.$msg("请输入并校验购买人 ID");
|
|||
|
|
if (!model.money) return this.$msg("请输入消费金额");
|
|||
|
|
if (!model.rewardRatio) return this.$msg("请输入打赏比例");
|
|||
|
|
// if (!model.code) return this.$msg("请输入短信验证码");
|
|||
|
|
|
|||
|
|
this.$refs.payPassword.show((password) => {
|
|||
|
|
this.model.payPassword = password;
|
|||
|
|
this.submit()
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
submit() {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title:'请等待...'
|
|||
|
|
})
|
|||
|
|
this.model.mobile = this.userInfo.mobile;
|
|||
|
|
console.log("进行打赏：", this.model)
|
|||
|
|
this.$httpJson("post", url.store.setReward, {...this.model}).then(({code, data, msg}) => {
|
|||
|
|
if (code !== 200) return this.$msg(msg);
|
|||
|
|
uni.hideLoading()
|
|||
|
|
this.$msg(msg)
|
|||
|
|
setTimeout(()=> {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},500)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.reward {
|
|||
|
|
.head {
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 10;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 88upx;
|
|||
|
|
background: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #555;
|
|||
|
|
|
|||
|
|
.back {
|
|||
|
|
width: 160upx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 20upx;
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
font-size: 50upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 32upx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.history {
|
|||
|
|
width: 160upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 20upx;
|
|||
|
|
text-align: right;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.head-placeholder {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 88upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
padding: 20upx;
|
|||
|
|
|
|||
|
|
.cell {
|
|||
|
|
padding: 20upx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 12upx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20upx;
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
width: 140upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
width: calc(100% - 200upx);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.input {
|
|||
|
|
text-align: right;
|
|||
|
|
padding-right: 20upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-ok {
|
|||
|
|
color: $uni-color-success;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-unok {
|
|||
|
|
color: $uni-color-error;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-placeholder {
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.extend {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-left: 20upx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
.check-id {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 120upx;
|
|||
|
|
padding: 6upx 30upx;
|
|||
|
|
color: rgb(201, 55, 54);
|
|||
|
|
background-color: rgba(201, 55, 54, 0.2);
|
|||
|
|
border-radius: 40upx;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unit {
|
|||
|
|
min-width: 40upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.border-left {
|
|||
|
|
border-left: 2upx solid #d8d8d8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reward-value {
|
|||
|
|
padding: 20upx;
|
|||
|
|
border: 4upx solid rgba(201, 55, 54, 0.2);
|
|||
|
|
background-color: rgba(201, 55, 54, 0.1);
|
|||
|
|
border-radius: 12upx;
|
|||
|
|
margin: 0 20upx;
|
|||
|
|
color: rgba(201, 55, 54, 1);
|
|||
|
|
|
|||
|
|
.row {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
padding: 20upx 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.submit {
|
|||
|
|
width: calc(100% - 40upx);
|
|||
|
|
height: 80upx;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
border-radius: 100upx;
|
|||
|
|
background: linear-gradient(to right, rgb(235, 108, 78), rgb(250, 0, 17));
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 40upx 20upx 20upx 20upx;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|