543 lines
15 KiB
Vue
543 lines
15 KiB
Vue
<template>
|
||
<view>
|
||
<view class="back-box" @click="$tab.navigateBack">
|
||
<u-icon name="arrow-left" size="18" color="#fff"></u-icon>
|
||
</view>
|
||
<u-swiper :list="brannerList" height="612rpx"></u-swiper>
|
||
<view class="activity-info">
|
||
<view class="f-28 c444 fw-5">
|
||
<text v-if="helpGenre==2">{{detail.title}}</text>
|
||
<text v-else-if="helpGenre==0">{{detail.intro}}</text>
|
||
<text v-else>{{detail.title}}</text>
|
||
</view>
|
||
<view class="activity-item flex align-center">
|
||
<image v-if="helpGenre==2" :src="detail.mainImage" mode=""></image>
|
||
<image v-else-if="helpGenre==0" :src="detail.cover" mode=""></image>
|
||
<image v-else :src="detail.image" mode=""></image>
|
||
<view class="activity-item-info">
|
||
<view class="f-32 black fw-b">
|
||
<text v-if="helpGenre==2">{{detail.subhead}}</text>
|
||
<text v-else-if="helpGenre==0">{{detail.name}}</text>
|
||
<text v-else>{{detail.title}}</text>
|
||
</view>
|
||
<view class="mt-1">
|
||
<text class="item f-24 c444" v-for="(item, index) in labels" :key='index'>
|
||
{{ item.value }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="activity-time" v-if="detail.isJoin">
|
||
<view class="fw-b black f-32 text-center">
|
||
已邀请好友助力 <text class="red f-50 fw-b">{{detail.userHelpNum||0}}</text> 人，加油加油
|
||
</view>
|
||
<view class="flex align-center justify-center mt-3">
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/icon/clock.png" mode=""></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/clock.png`" mode=""></image>
|
||
<!-- #endif -->
|
||
<view class="f-24 c444">
|
||
活动时间截止：
|
||
</view>
|
||
<view class="red f-26">
|
||
{{ detail.stopTime }}
|
||
</view>
|
||
</view>
|
||
<view class="user-list flex-wrap mt-3">
|
||
<view :class="['image-box', 'mt-2',index%5 == 4 && 'image-box_1' ]"
|
||
v-for="(item,index) in templateData.helpNum" :key="index">
|
||
<image v-if="detail.avatarArr[index]" :src="detail.avatarArr[index]" mode="aspectFill"></image>
|
||
<image @click="sureBtn(1)" v-else src="@/static/images/app/icon/plus.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="mt-4 mb-4" v-if="detail.isJoin">
|
||
<u-button v-if="(templateData.helpNum - detail.userHelpNum)>0" shape="circle" color="linear-gradient(90deg, #0BCBC2 0%, #0090FA 100%)"
|
||
@click="sureBtn(1)">继续邀请 {{' '}}
|
||
<text v-if="helpGenre==2"> {{detail.subhead}}</text>
|
||
<text v-else-if="helpGenre==0"> {{detail.name}}</text>
|
||
<text v-else>{{detail.title}}</text>
|
||
</u-button>
|
||
<u-button v-else @click="navActivity" shape="circle"
|
||
color="linear-gradient(90deg, #0BCBC2 0%, #0090FA 100%)">助力完成
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else class="activity-time flex align-center justify-between">
|
||
<view class="flex align-center">
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/icon/clock.png" mode=""></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/clock.png`" mode=""></image>
|
||
<!-- #endif -->
|
||
<view class="f-24 c444">
|
||
活动时间截止：
|
||
</view>
|
||
<view class="red f-26">
|
||
{{ detail.stopTime }}
|
||
</view>
|
||
</view>
|
||
<view class="f-24 c999">
|
||
{{ templateData.joinNum || 0 }}人报名
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="divider-box">
|
||
<u-divider text="活动规则" textColor="#666" textSize="10" lineColor="#666"></u-divider>
|
||
</view>
|
||
<view class="store-list">
|
||
<rich-text :nodes="templateData.content" :tagStyle="parseStyle" :preview="false"
|
||
:image-menu-prevent="false"></rich-text>
|
||
</view>
|
||
<u-popup :show="shareShow" mode="center" bgColor="transparent">
|
||
<view class="popup-box flex-column bg-white">
|
||
<view class="text-center mt-5 f-28 c222">
|
||
分享好友
|
||
</view>
|
||
<view style="height: 64rpx;" />
|
||
<u-button color="#13AFA8" shape="circle"
|
||
@click="$tab.navigateTo(`/pages/driver/index/friend?id=${id}&helpGenre=${helpGenre}&isMould=${isMould}`);shareShow=false;">好友列表</u-button>
|
||
<view style="height: 48rpx;" />
|
||
<u-button color="#F68D1F" shape="circle" @click="weixinShareFn">微信好友</u-button>
|
||
</view>
|
||
<image class="close-popup-icon" src="@/static/images/app/icon/close.png" mode="" @click="shareShow = false">
|
||
</image>
|
||
</u-popup>
|
||
<u-popup :show="helpShow" mode="center" bgColor="transparent">
|
||
<view class="popup-box-1 flex-column align-center">
|
||
<image v-show="helpType == 3" class="popup-top-image" src="@/static/images/app/community/success.png"
|
||
mode=""></image>
|
||
<image v-show="helpType != 3" class="avatar" :src="avatar" mode=""></image>
|
||
<text v-show="helpType != 3" class="f-26 c999 mb-3">{{nickname}}</text>
|
||
<view class="text-box flex-column align-center" v-show="helpType == 0 || helpType == 2">
|
||
<text v-show="helpType == 0" class="f-29 c222 fw-b">邀请您助力
|
||
<text v-if="helpGenre==2"> {{detail.subhead}}</text>
|
||
<text v-else-if="helpGenre==0"> {{detail.name}}</text>
|
||
<text v-else>{{detail.title}}</text></u-button>
|
||
</text>
|
||
<text v-show="helpType == 2" class="f-29 c222 fw-b">您已为别人助力过，</text>
|
||
<text v-show="helpType == 2" class="f-29 c222 fw-b">很遗憾不能为他助力了!</text>
|
||
</view>
|
||
|
||
<text v-show="helpType == 1" class="f-29 c222 fw-b">您已为他助力过了!</text>
|
||
<text v-show="helpType == 3" class="f-29 c222 fw-b">恭喜您，助力成功！</text>
|
||
<view class="btn-box" v-show="helpType == 3">
|
||
<u-button shape="circle" color="linear-gradient(90deg, #0BCBC2 0%, #0090FA 100%)"
|
||
@click="myJionBtn">我也要参与</u-button>
|
||
</view>
|
||
<view v-show="helpType != 3" class="btn-1 flex-center"
|
||
:style="helpType != 0 && 'background: transparent'">
|
||
<view class="btn-2 flex-center" :style="helpType != 0 && 'background: transparent'">
|
||
<view class="btn-3 fff flex-center f-34" :style="helpType != 0 && 'background: #84D2CF'"
|
||
@click="helpBtn">
|
||
助力
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image class="close-popup-icon" src="@/static/images/app/icon/close.png" mode="" @click="helpShow = false">
|
||
</image>
|
||
</u-popup>
|
||
<view style="height:180rpx" v-if="!detail.isJoin" />
|
||
<view class="btn-bottom fixed-bottom bg-white" v-if="!detail.isJoin">
|
||
<u-button v-if="!buttFlag" @click="sureBtn(0)" shape="circle"
|
||
color="linear-gradient(90deg, #0BCBC2 0%, #0090FA 100%)">参与并邀请好友 {{' '}}
|
||
<text v-if="helpGenre==2"> {{detail.subhead}}</text>
|
||
<text v-else-if="helpGenre==0"> {{detail.name}}</text>
|
||
<text v-else>{{detail.title}}</text>
|
||
</u-button>
|
||
<u-button v-else @click="sureBtn(0)" disabled shape="circle"
|
||
color="linear-gradient(90deg, #0BCBC2 0%, #0090FA 100%)">活动结束
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
shareApi
|
||
} from "@/utils/index.js"
|
||
import {
|
||
getCardProductInfoAPI,
|
||
initiateHelpAPI,
|
||
orderHelpAPI,
|
||
helptatus,
|
||
getInformationHelpAPI,
|
||
getProductHelpAPI,
|
||
getHelpDetail
|
||
} from '@/api/serve/index';
|
||
export default {
|
||
data() {
|
||
return {
|
||
//助力按钮
|
||
buttFlag: false,
|
||
//邀请人头像
|
||
avatar: '',
|
||
//邀请人名称
|
||
nickname: '',
|
||
fromUid: 0,
|
||
helpType: 0, // 0:未助力；1:邀请人助力；2：以为别人助力；3：助力成功
|
||
id: 0,
|
||
uid: 0, // 分享来源用户id
|
||
shareShow: false,
|
||
helpShow: false,
|
||
templateData: {},
|
||
type: '', // 分享助力： help
|
||
config: getApp().globalData.config,
|
||
detail: {},
|
||
brannerList: [],
|
||
labels: [],
|
||
helpGenre: 0,
|
||
activityId: 0,
|
||
isMould: false,
|
||
parseStyle: {
|
||
img: 'width:750rpx;'
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
//邀请微信好友
|
||
weixinShareFn() {
|
||
let fromUid = uni.getStorageSync('userInfo').id
|
||
let cover = ''
|
||
let name = ''
|
||
if (this.helpGenre == 2) {
|
||
cover = this.detail.mainImage
|
||
name = this.detail.subhead
|
||
} else if (this.helpGenre == 0) {
|
||
cover = this.detail.cover
|
||
name = this.detail.name
|
||
} else {
|
||
cover = this.detail.image
|
||
name = this.detail.title
|
||
}
|
||
let shareData = {
|
||
imageUrl: cover ? cover :
|
||
'https://qicheoss.oss-cn-shanghai.aliyuncs.com/lxkimage/public/product/2024/01/24/c70ad2284470406280fb0e06200a63e2g4ht7zante.png',
|
||
content: name
|
||
}
|
||
this.shareShow = false
|
||
shareApi('WXSceneSession', shareData,
|
||
`pages/mine/my_activity/detail?type=help&id=${this.detail.id}&helpGenre=${this.helpGenre}&fromUid=${fromUid}&activityId=${this.activityId}&isMould=${this.isMould}`
|
||
).then(res => {
|
||
console.log('分享成功');
|
||
})
|
||
},
|
||
|
||
getHelptatus(cardProductId, shareUid, activityId) {
|
||
helptatus({
|
||
cardProductId,
|
||
shareUid,
|
||
activityId
|
||
}).then(res => {
|
||
console.log('活动状态', res);
|
||
this.avatar = res.data.avatar
|
||
this.nickname = res.data.nickname
|
||
this.helpType = res.data.status
|
||
this.helpShow = true
|
||
})
|
||
},
|
||
// 发起
|
||
sureBtn(num) {
|
||
if (num == 0) {
|
||
this.shareShow = true
|
||
// console.log(this.detail.id,this.id);
|
||
initiateHelpAPI({
|
||
cardProductId: this.detail.id,
|
||
id: this.activityId
|
||
}).then(res => {
|
||
this.shareShow = true
|
||
})
|
||
} else {
|
||
this.shareShow = true
|
||
}
|
||
},
|
||
// 助力
|
||
helpBtn() {
|
||
// mainUid => 发起人uid cardProductId => 卡券商品id
|
||
let obj = {
|
||
mainUid: this.fromUid,
|
||
cardProductId: this.detail.id,
|
||
activityId: this.detail.activityId
|
||
}
|
||
console.log('助力状态', this.helpType);
|
||
if (this.helpType == 0) {
|
||
orderHelpAPI(obj).then(res => {
|
||
this.helpType = 3
|
||
this.helpShow = true
|
||
})
|
||
}
|
||
},
|
||
// 也参与
|
||
myJionBtn() {
|
||
// 助力页
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/activity_list`
|
||
})
|
||
},
|
||
// 初始化
|
||
init() {
|
||
this.getInfo()
|
||
},
|
||
// 获取活动商品详情
|
||
getInfo() {
|
||
if (this.helpGenre == 0) {
|
||
getCardProductInfoAPI(this.id).then(res => {
|
||
if (res.data.helpList) {
|
||
let avatarArr = []
|
||
res.data.helpList.forEach(item => {
|
||
avatarArr.push(item.avatar)
|
||
})
|
||
res.data.avatarArr = avatarArr
|
||
}
|
||
this.detail = res.data
|
||
this.isExpired(this.detail.stopTime)
|
||
this.brannerList = res.data.image.split(',')
|
||
this.labels = JSON.parse(res.data.labels);
|
||
})
|
||
} else if (this.helpGenre == 1) {
|
||
getInformationHelpAPI({
|
||
id: this.id,
|
||
isMould: this.isMould
|
||
}).then(res => {
|
||
if (res.data.helpList) {
|
||
let avatarArr = []
|
||
res.data.helpList.forEach(item => {
|
||
avatarArr.push(item.avatar)
|
||
})
|
||
res.data.avatarArr = avatarArr
|
||
}
|
||
this.detail = res.data
|
||
this.isExpired(this.detail.stopTime)
|
||
this.brannerList = res.data.image.split(',')
|
||
this.labels = JSON.parse(res.data.labels);
|
||
})
|
||
} else {
|
||
getProductHelpAPI(this.id).then(res => {
|
||
if (res.data.helpList) {
|
||
let avatarArr = []
|
||
res.data.helpList.forEach(item => {
|
||
avatarArr.push(item.avatar)
|
||
})
|
||
res.data.avatarArr = avatarArr
|
||
}
|
||
this.detail = res.data
|
||
this.isExpired(this.detail.stopTime)
|
||
this.brannerList = res.data.image.split(',')
|
||
this.labels = JSON.parse(res.data.labels);
|
||
})
|
||
}
|
||
},
|
||
//获取活动详情
|
||
getHelpDetailFn() {
|
||
getHelpDetail(this.activityId).then(res => {
|
||
console.log('活动详情', res.data);
|
||
this.templateData = res.data
|
||
|
||
// this.content=res.data.content
|
||
// this.joinNum=res.data.joinNum
|
||
})
|
||
},
|
||
//我的活动
|
||
navActivity() {
|
||
uni.navigateTo({
|
||
url: '/pages/driver/mine/my_activity/my_activity'
|
||
})
|
||
},
|
||
//处理活动是否结束
|
||
isExpired(targetDateTime) {
|
||
const currentDate = new Date(); // 获取当前时间
|
||
const targetDate = new Date(targetDateTime); // 将目标时间字符串转换为Date对象
|
||
this.buttFlag = currentDate > targetDate; // 比较当前时间和目标时间
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.helpGenre = option.helpGenre
|
||
this.activityId = option.activityId
|
||
this.id = option.id
|
||
this.isMould = option.isMould
|
||
if (option.type == 'help') {
|
||
this.type = option.type
|
||
this.uid = option.uid
|
||
this.fromUid = option.fromUid
|
||
if (option.uid != option.fromUid) {
|
||
this.getHelptatus(option.id, option.fromUid, option.activityId)
|
||
}
|
||
}
|
||
this.init()
|
||
//获取活动详情
|
||
this.getHelpDetailFn(option.activityId)
|
||
console.log(option.activityId, option.id);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.store-list {
|
||
background: #ffffff;
|
||
padding-top: 24rpx;
|
||
}
|
||
|
||
.store-list img {
|
||
display: block;
|
||
margin: 0 auto;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.back-box {
|
||
position: fixed;
|
||
top: 88rpx;
|
||
left: 32rpx;
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
z-index: 999;
|
||
}
|
||
|
||
.activity-info {
|
||
padding: 24rpx;
|
||
width: 702rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 6rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
border-radius: 8rpx;
|
||
transform: translate(24rpx, -92rpx);
|
||
z-index: 999;
|
||
|
||
.activity-item {
|
||
margin-top: 16rpx;
|
||
padding: 16rpx;
|
||
width: 654rpx;
|
||
background: #F5F5F5;
|
||
box-shadow: 0rpx 6rpx 40rpx 0rpx rgba(0, 0, 0, 0.02);
|
||
border-radius: 4rpx;
|
||
border: 2rpx solid #EDEDED;
|
||
|
||
.activity-item-info {
|
||
width: 506rpx;
|
||
margin-left: 16rpx;
|
||
height: 124rpx;
|
||
line-height: 44rpx;
|
||
overflow: hidden;
|
||
|
||
.item {
|
||
margin-right: 12rpx;
|
||
padding: 0 12rpx;
|
||
line-height: 42rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
image {
|
||
width: 124rpx;
|
||
height: 124rpx;
|
||
}
|
||
}
|
||
|
||
.activity-time {
|
||
margin-top: 24rpx;
|
||
|
||
.user-list {
|
||
.image-box {
|
||
margin-right: 48rpx;
|
||
}
|
||
|
||
.image-box_1 {
|
||
margin-right: 0;
|
||
}
|
||
|
||
image {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.divider-box {
|
||
margin-top: -92rpx;
|
||
padding: 0 122rpx;
|
||
}
|
||
|
||
.parse-box {
|
||
// border: 1px solid red;
|
||
// text-align: center;
|
||
}
|
||
|
||
.btn-bottom {
|
||
padding: 18rpx 24rpx 68rpx 24rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.popup-box {
|
||
padding: 0 80rpx;
|
||
width: 502rpx;
|
||
height: 440rpx;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.close-popup-icon {
|
||
margin: 48rpx auto;
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
|
||
.popup-box-1 {
|
||
padding: 64rpx;
|
||
width: 542rpx;
|
||
background: linear-gradient(180deg, #E2F0EF 0%, #FBFFFF 100%);
|
||
border-radius: 24rpx;
|
||
line-height: 44rpx;
|
||
|
||
.popup-top-image {
|
||
margin-top: -176rpx;
|
||
margin-bottom: 64rpx;
|
||
width: 338rpx;
|
||
height: 282rpx;
|
||
}
|
||
|
||
.text-box {
|
||
height: 84rpx;
|
||
}
|
||
|
||
.btn-1 {
|
||
width: 192rpx;
|
||
height: 192rpx;
|
||
background: #E9F7F7;
|
||
border-radius: 96rpx;
|
||
|
||
.btn-2 {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
background: #D5F1EF;
|
||
border-radius: 90rpx;
|
||
|
||
.btn-3 {
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
border-radius: 70rpx;
|
||
background: #13AFA8;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-box {
|
||
margin-top: 48rpx;
|
||
width: 390rpx;
|
||
}
|
||
|
||
.avatar {
|
||
margin-bottom: 16rpx;
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
</style> |