0b2/peiwan-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
48153e77618e83ba509223b64864b7922774b83d
peiwan-uniapp/pages/clerk/detail/components/giftPopup.vue

444 lines
9.6 KiB
Vue
Raw Normal View History

项目初始化
2025-01-21 01:46:34 +08:00
<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>
Reference in New Issue Copy Permalink