bztang
/
bztang-h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化：文创豆商城 添加兑换额度显示、没有兑换商品时显示空提示、文创豆易出添加判断-不能超出持有部分

This commit is contained in:
wuhui_zzw 2023-12-01 11:00:28 +08:00
parent adbd9a9c6a
commit 0de52b524d
1 changed files with 85 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/views/member/weight_value/legumes/shopping.vue
View File

@ -12,24 +12,15 @@
</div>
<i class="fa fa-angle-right legumes-icon"></i>
</div>
<div class="exchange_legumes">兑换额度：<span class="hold_exchange_legumes">{{ goods_legumes }}</span></div>
</div>
<!--任务和商品-->
<div class="task-and-goods" v-if="task_video_link || is_show_share">
<!--任务-->
<div class="block-title">易出任务</div>
<div class="task-list">
<div class="task-block" v-if="task_video_link" >
<img class="task-icon" src="@/assets/images/weight_value/task_1.png">
<div class="task-b-center">
<div class="task-b-c-title">看视频</div>
<div class="task-b-c-desc">
做任务可申请<span class="task-b-c-tip">易出</span>
</div>
</div>
<div class="task-b-right" @click="taskComplete('video')">去完成</div>
</div>
<div class="task-block" v-if="is_show_share">
<img class="task-icon" src="@/assets/images/weight_value/task_2.png">
<img class="task-icon" src="@/assets/images/weight_value/task_1.png">
<div class="task-b-center">
<div class="task-b-c-title">转发分享</div>
<div class="task-b-c-desc">
@ -38,27 +29,42 @@
</div>
<div class="task-b-right" @click="taskComplete('share')">去完成</div>
</div>
<div class="task-block" v-if="task_video_link">
<img class="task-icon" src="@/assets/images/weight_value/task_2.png">
<div class="task-b-center">
<div class="task-b-c-title">看视频</div>
<div class="task-b-c-desc">
做任务可申请<span class="task-b-c-tip">易出</span>
</div>
</div>
<div class="task-b-right" @click="taskComplete('video')">去完成</div>
</div>
</div>
<!--商品列表-->
<div class="block-title">文创豆兑换</div>
<div class="goods-list">
<div class="goods-block" v-for="(item,index) in list" :key="index">
<img class="legumes-img" :src="item.goods_thumb">
<div class="info">
<div class="g-title">{{ item.goods_title }}</div>
<div class="g-price">价值 ¥ {{ item.legumes_exchange_price }}</div>
<div class="g-footer">
<div class="g-f-left">
<div class="sale">7613人已兑换</div>
<div class="need-legumes">
<span class="need-num">{{ item.use_legumes }}</span>文创豆
<template v-if="Object.keys(list).length > 0">
<div class="goods-block" v-for="(item,index) in list" :key="index">
<img class="legumes-img" :src="item.goods_thumb">
<div class="info">
<div class="g-title">{{ item.goods_title }}</div>
<div class="g-price">价值 ¥ {{ item.legumes_exchange_price }}</div>
<div class="g-footer">
<div class="g-f-left">
<div class="sale">7613人已兑换</div>
<div class="need-legumes">
<span class="need-num">{{ item.use_legumes }}</span>文创豆
</div>
</div>
<div v-if="item.is_allow_exchange" class="g-f-btn" @click="exchangeGoods(item)">立即兑换</div>
<div v-else class="g-f-btn not-click">文创豆不足</div>
</div>
<div v-if="item.is_allow_exchange" class="g-f-btn" @click="exchangeGoods(item)">立即兑换</div>
<div v-else class="g-f-btn not-click">文创豆不足</div>
</div>
</div>
</div>
</template>
<template v-else>
<van-empty description="即将开启"/>
</template>
</div>
</div>
</div>
@ -97,7 +103,9 @@
<!--视频弹框-->
<van-popup v-model="is_video_show" position="center" :style="{ width: '100%',height: '100%' }" class="task-video-popup" :close-on-click-overlay="false">
<div class="task-video-content">
<video id="taskMedia" @canplay="getVidDur()" :src="task_video_link" :autoplay="true" :loop="false" width="100vw" height="100vh"></video>
<video id="taskMedia" @canplay="getVidDur()" :src="task_video_link" :loop="false" width="100vw" height="100vh">
浏览器不支持播放视频
</video>
</div>
</van-popup>
<!-- 第三方代发信息 -->
@ -212,6 +220,7 @@ export default {
return {
// 顶部内容
hold_legumes: 0,// 当前持有文创豆数量
goods_legumes: 0,// 兑换额度
task_video_link: '',
is_show_share: false,// 是否显示分享任务 仅微信浏览器中显示
// 提现相关
@ -255,9 +264,9 @@ export default {
_this.getGoodsList();
_this.getAccountInfo();
// 判断：当前是否为微信浏览器打开
_this.$nextTick(() => {
_this.is_show_share = _this.fun.getTyep() == 1;
});
// _this.$nextTick(() => {
// _this.is_show_share = _this.fun.getTyep() == 1;
// });
},
methods: {
// 获取用户持有文创豆信息
@ -266,7 +275,8 @@ export default {
$http.get("plugin.cultural-space.api.index.legumes-hold", {}, "加载中...")
.then(response => {
if (response.result === 1) {
_this.hold_legumes = Math.floor(response.data.voucher_number);// 这里持有数量 需要显示整数
_this.hold_legumes = Math.floor(response.data.voucher_number);
_this.goods_legumes = Math.floor(response.data.goods_legumes);
_this.task_video_link = response.data.task_video_link || '';
} else {
_this.$dialog.alert({message: response.msg}).then(() => {
@ -323,11 +333,14 @@ export default {
},
// 视频监听
getVidDur(){
console.log("触发视频监听");
let _this = this;
let videoTime = document.getElementById('taskMedia');
_this.videoTime = videoTime;
_this.videoTime.play();
// 监听视频暂停
videoTime.addEventListener("pause", function () {
console.log("播放完成");
if(Math.floor(videoTime.duration) <= Math.floor(videoTime.currentTime)){
_this.is_video_show = false;
_this.task_status = true;
@ -350,6 +363,11 @@ export default {
_this.$dialog.alert({ message: '请输入易出数量！' });
return ;
}
// 判断：提现数量是否超过持有数量
if(withdrawalNum > _this.hold_legumes){
_this.$dialog.alert({ message: '易出数量不能超出持有数量！' });
return ;
}
// 任务是否完成
if(!_this.task_status) {
_this.taskIsComplete();
@ -544,7 +562,7 @@ export default {
--top-box-height-: 80px;
width: 100%;
min-height: calc(100vh - 40px);
min-height: calc(100vh - 124px);
display: inline-flex;
flex-direction: column;
background: #f6f6f6;
@ -598,6 +616,20 @@ export default {
color: #ca9a5c;
}
}
.exchange_legumes {
position: absolute;
bottom: 15px;
left: 15px;
font-size: 15px;
color: #838485 !important;
.hold_exchange_legumes {
color: #9b571e !important;
font-weight: bold;
font-size: 17px;
}
}
}
.task-and-goods {
@ -791,7 +823,8 @@ export default {
border-radius: 15px !important;
overflow: unset !important;
background: transparent !important;
width: 300px!important;
width: 300px !important;
.withdrawal-content {
width: 100%;
position: relative;
@ -922,14 +955,14 @@ export default {
}
}
.task-video-content{
#taskMedia{
.task-video-content {
#taskMedia {
width: 100vw;
height: 100vh;
}
}
.bandBox{
.bandBox {
.h2 {
margin-bottom: 32px;
@ -956,13 +989,14 @@ export default {
display: flex;
align-items: center;
padding: 0 15.04px;
margin-bottom:22.08px;
margin-bottom: 22.08px;
.ruleLeftDist {
display: flex;
align-items: center;
font-size: 15.04px;
}
.rightDist {
height: 0.6875rem;
flex: 1;
@ -971,23 +1005,29 @@ export default {
font-size: 15.04px;
align-items: center;
}
.rightDist span {
margin-right: 6.24px;
}
.rightDist i {
margin-top: 0.0938rem;
}
.ruleRighe {
flex: 1;
}
.ruleRighe ::-webkit-input-placeholder {
/* placeholder字体大小 */
font-size: 15.04px;
}
.ruleRighe .van-cell {
padding-top: 0;
padding-bottom: 0;
}
.ruleLeft {
display: flex;
align-items: center;
@ -1010,17 +1050,20 @@ export default {
margin-top: 30px;
}
}
.ruleRightContent{
width: calc(100% - (var(--cell-horizontal-padding,16px) * 2));
display: inline-flex!important;
.ruleRightContent {
width: calc(100% - (var(--cell-horizontal-padding, 16px) * 2));
display: inline-flex !important;
flex-direction: row;
flex-wrap: wrap;
padding: 0 var(--cell-horizontal-padding,16px);
padding: 0 var(--cell-horizontal-padding, 16px);
}
.ruleRightContent .ruleRightContentRadio:not(:first-child){
margin-left: var(--cell-horizontal-padding,16px);
.ruleRightContent .ruleRightContentRadio:not(:first-child) {
margin-left: var(--cell-horizontal-padding, 16px);
}
.status-tips{
.status-tips {
width: 100%;
text-align: center;
height: 25px;