444 lines
9.6 KiB
Vue
444 lines
9.6 KiB
Vue
<template>
|
||
<tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="hiddenPopup">
|
||
<view class="order-box">
|
||
<view class="avatar-box">
|
||
<u-image width="140" height="140" border-radius="20" :src="clerk.avatar"></u-image>
|
||
<view class="close-span" @click="hiddenPopup">
|
||
<u-icon name="close-circle" color="#98a2a1" size="50"></u-icon>
|
||
</view>
|
||
</view>
|
||
<scroll-view style="height: 700rpx;" scroll-y>
|
||
<view class="page-box">
|
||
|
||
<view class="form-box">
|
||
|
||
<view class="input-box">
|
||
<view class="tag-box">
|
||
<view class="name">服务类型</view>
|
||
</view>
|
||
<view class="tab-span">
|
||
<!-- <view @click="changeTab(0)" class="btn" :class="form.rewardType == 0 ? 'active' : ''">赠送</view> -->
|
||
<view @click="changeTab(1)" class="btn" :class="form.rewardType == 1 ? 'active' : ''">赠礼</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="input-box" v-if="form.rewardType == 0">
|
||
<view class="tag-box">
|
||
<view class="name">打赏金额</view>
|
||
</view>
|
||
<view class="input-span">
|
||
<u-input v-model="payMoney" type="number" :placeholder-style="`fontSize: 24rpx; color: #cbced5;`" placeholder="请输入赠送金额"></u-input>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="input-box" v-if="form.rewardType == 1">
|
||
<view class="tag-box">
|
||
<view class="name">赠送礼物</view>
|
||
</view>
|
||
<view class="select-span" @click="openGift">
|
||
<view v-if="gift.id > 0">已选【{{gift.name}}】</view>
|
||
<view v-else>点击选择礼物</view>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="input-box" v-if="gift.id > 0">
|
||
<view class="tag-box">
|
||
<view class="name">礼物数量</view>
|
||
</view>
|
||
<view class="step-span">
|
||
<img class="img" :src="gift.img"></img>
|
||
<tui-numberbox iconBgColor="var(--ui-BG-Main)" iconColor="#fff" backgroundColor="#fff" :min="1" :value="form.count" @change="change"></tui-numberbox>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="input-box">
|
||
<view class="textarea-box">
|
||
<view class="name">心动留言</view>
|
||
</view>
|
||
<view class="textarea-span">
|
||
<u-input v-model="form.msg" type="textarea" :placeholder-style="`fontSize: 24rpx; color: #cbced5;`" placeholder="请输入心动留言"></u-input>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="input-box" v-if="isPass">
|
||
<view class="tag-box">
|
||
<view class="name">您的微信号</view>
|
||
</view>
|
||
<view class="input-span">
|
||
<u-input v-model="form.weixin" :placeholder-style="`fontSize: 24rpx; color: #cbced5;`" placeholder="请输入正确的微信号"></u-input>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</scroll-view>
|
||
<view class="bottom-box2" v-if="form.rewardType == 0">
|
||
<view class="btn-box">
|
||
<view class="pay-btn" @click="confirm">立即赠送</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom-box" v-if="form.rewardType == 1">
|
||
<view class="price-box">
|
||
<text>总价：</text>
|
||
<text class="price">{{ fen2yuan(gift.money*form.count) }}</text>
|
||
<text>钻石</text>
|
||
</view>
|
||
<view class="btn-box">
|
||
<view class="pay-btn" @click="confirm">立即赠送</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</tui-bottom-popup>
|
||
|
||
<gift-list :showPop="giftFlag" :dataList="giftList" v-model="gift" @close="closeGift"></gift-list>
|
||
</template>
|
||
|
||
<script>
|
||
import tuiBottomPopup from "@/components/thorui/tui-bottom-popup/tui-bottom-popup.vue"
|
||
import tuiNumberbox from "@/components/thorui/tui-numberbox/tui-numberbox.vue"
|
||
import GiftList from '@/pages/clerk/detail/components/giftList.vue';
|
||
import RewardApi from '@/sheep/api/worker/reward';
|
||
import sheep from '@/sheep';
|
||
export default {
|
||
components: {
|
||
tuiBottomPopup,
|
||
tuiNumberbox,
|
||
GiftList,
|
||
},
|
||
props: {
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
popupShow: false,
|
||
|
||
gift: {
|
||
id: -1,
|
||
money: 0,
|
||
},
|
||
|
||
giftFlag: false,
|
||
|
||
giftList: [],
|
||
|
||
payMoney: '',
|
||
|
||
form: {
|
||
rewardType: 1,
|
||
count: 1,
|
||
giftId: -1,
|
||
money: '',
|
||
weixin: '',
|
||
msg: '',
|
||
payMoney: '',
|
||
},
|
||
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
clerk() {
|
||
return sheep.$store('sys').clerk;
|
||
},
|
||
userInfo() {
|
||
return sheep.$store('user').userInfo;
|
||
},
|
||
isPass() {
|
||
return sheep.$store('user').tradeConfig.weixinEnabled;
|
||
},
|
||
},
|
||
methods: {
|
||
//调用此方法显示弹层
|
||
showPopup() {
|
||
this.form.weixin = this.userInfo.weixin;
|
||
RewardApi.getGiftList().then(res => {
|
||
this.giftList = res.data;
|
||
this.popupShow = true
|
||
});
|
||
},
|
||
showGiftPopup(e) {
|
||
this.gift = e;
|
||
this.form.rewardType = 1;
|
||
this.form.weixin = this.userInfo.weixin;
|
||
RewardApi.getGiftList().then(res => {
|
||
this.giftList = res.data;
|
||
this.popupShow = true
|
||
});
|
||
},
|
||
hiddenPopup() {
|
||
this.popupShow = false
|
||
},
|
||
change(e) {
|
||
this.form.count = e.value
|
||
},
|
||
changeTab(e) {
|
||
this.form.rewardType = e;
|
||
this.gift = {
|
||
id: -1,
|
||
money: 0,
|
||
};
|
||
},
|
||
fen2yuan(price) {
|
||
var f = 0;
|
||
var p = (price / 100.0).toFixed(0);
|
||
var p1 = (price / 100.0).toFixed(1);
|
||
var p2 = (price / 100.0).toFixed(2);
|
||
if(p*100 == price){
|
||
f = 0;
|
||
}else if(p1*100 == price){
|
||
f = 1;
|
||
}else if(p2*100 == price){
|
||
f = 2;
|
||
}
|
||
return (price / 100.0).toFixed(f)
|
||
},
|
||
yuan2fen(price) {
|
||
return (price * 100.0).toFixed(0)
|
||
},
|
||
openGift() {
|
||
this.giftFlag = true;
|
||
},
|
||
closeGift() {
|
||
this.form.count = 1;
|
||
this.giftFlag = false;
|
||
},
|
||
confirm() {
|
||
if(this.isPass && !this.form.weixin){
|
||
sheep.$helper.toast('请输入正确的微信');
|
||
return;
|
||
}
|
||
if(this.form.rewardType == 0){
|
||
this.form.payMoney = this.yuan2fen(this.payMoney);
|
||
if(this.form.payMoney < 1){
|
||
sheep.$helper.toast('请输入打赏金额');
|
||
return;
|
||
}
|
||
}else{
|
||
this.form.giftId = this.gift.id;
|
||
if(this.form.giftId < 1){
|
||
sheep.$helper.toast('请选择打赏礼物');
|
||
return;
|
||
}
|
||
}
|
||
this.form.workerClerkId = this.clerk.id;
|
||
RewardApi.createRewardOrder(this.form).then(res => {
|
||
// 跳转到支付页面
|
||
this.$u.route({
|
||
url: 'pages/pay/reward/index',
|
||
params: {
|
||
id: res.data.payOrderId,
|
||
}
|
||
});
|
||
});
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.avatar-box {
|
||
padding: 10px 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.close-span {
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 5px;
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.page-box {
|
||
padding: 15px;
|
||
padding-bottom: 10px;
|
||
|
||
.form-box {
|
||
margin-bottom: 10px;
|
||
|
||
.tag-box {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 180rpx;
|
||
|
||
.name {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
.textarea-box {
|
||
height: 20px;
|
||
display: flex;
|
||
width: 180rpx;
|
||
|
||
.name {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
.input-box {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
align-items: center;
|
||
|
||
.input-span {
|
||
background-color: #f6f6f6;
|
||
margin-left: 15px;
|
||
display: flex;
|
||
flex: 1;
|
||
padding: 0 12px;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.select-span {
|
||
font-size: 24rpx;
|
||
background-color: #f6f6f6;
|
||
margin-left: 15px;
|
||
display: flex;
|
||
flex: 1;
|
||
padding: 12px 12px;
|
||
border-radius: 10rpx;
|
||
color: #aaaaaa;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tab-span {
|
||
display: flex;
|
||
flex: 1;
|
||
padding: 0 12px;
|
||
align-items: center;
|
||
|
||
.btn {
|
||
background-color: #f6f6f6;
|
||
font-size: 24rpx;
|
||
padding: 7px 0;
|
||
border-radius: 40px;
|
||
min-width: 120rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.active {
|
||
color: #fff;
|
||
background-color: var(--ui-BG-Main);
|
||
}
|
||
}
|
||
|
||
.textarea-span {
|
||
background-color: #f6f6f6;
|
||
margin-left: 15px;
|
||
flex: 1;
|
||
padding: 2px 12px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.step-span {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex: 1;
|
||
padding-left: 12px;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 100%;
|
||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 15px;
|
||
box-shadow: 0 0 6px 0 #ccc;
|
||
|
||
.price-box {
|
||
color: #fb932c;
|
||
font-size: 28rpx;
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.price {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
|
||
.btn-box {
|
||
width: 50%;
|
||
padding-left: 15px;
|
||
|
||
.pay-btn {
|
||
background-color: var(--ui-BG-Main);
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 40px;
|
||
font-size: 28rpx;
|
||
height: 70rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.bottom-box2 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 15px;
|
||
box-shadow: 0 0 6px 0 #ccc;
|
||
|
||
.price-box {
|
||
color: #fb932c;
|
||
font-size: 28rpx;
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.price {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
|
||
.btn-box {
|
||
width: 50%;
|
||
|
||
.pay-btn {
|
||
background-color: var(--ui-BG-Main);
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 40px;
|
||
font-size: 28rpx;
|
||
height: 70rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
</style> |