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