396316021
/
warm_man
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
暖心人
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 Commits
3 Branches
0 Tags
7.1 MiB
 
 
 
Tree: 7d3571ffa4
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '7d3571ffa4'
${ noResults }
warm_man/pages/Activity/index.vue

464 lines
16 KiB
Raw Blame History

<template>
<u-navbar
:title="title"
:auto-back="true"
left-icon-size="40rpx"
:safe-area-inset-top="true"
:placeholder="true"
bgColor="#fff"
></u-navbar>
<view class="body-background"></view>
<view class="wallpaper-container border-box">
<view class="top-image" v-if="detail.banner">
<u-image radius="20" :src="detail.banner" width="100%" height="240" mode="aspectFill"></u-image>
</view>
<view class="time-container" v-if="detail.status === 0 || detail.status === 1">
<view class="time-main">
<view class="item" :class="getStatusColor(detail.status)" style="padding:4rpx;background-color: #fff;border-radius:20rpx;margin-bottom:16rpx;">
<view :class="getStatusColor(detail.status)" style="padding:20rpx 20rpx 40rpx;border-radius:20rpx;">
<view class="title row" style="margin-bottom:40rpx;">
<view class="title-item blue">
<view class="title-content">
<u-text :text="detail.type_name" color="#ffffff" size="28" line-height="40"></u-text>
</view>
</view>
<view class="title-item">
<view class="title-content">
<u-text :text="detail.community" color="#90A0AF" size="28" line-height="40"></u-text>
</view>
</view>
</view>
<view class="body row">
<view class="content col">
<view class="content-title" style="margin-bottom:32rpx;">
<u-text :text="detail.title" line-height="54" color="#020B18" size="32"></u-text>
</view>
<u-count-down
:time="timeNumber"
format="dd:HH:mm:ss"
autoStart
millisecond
@change="timeChange"
custom-style="display:flex;width:100%;"
>
<view class="content-body row">
<view class="title-time-item">
<u-text text="距报名截止" color="#90A0AF" size="28"></u-text>
</view>
<view class="title-time-item back">
<u-text :text="timeData.days" color="#020B18"
size="36"></u-text>
</view>
<view class="title-time-item">
<u-text text="天" color="#90A0AF" size="28"></u-text>
</view>
<view class="title-time-item back">
<u-text :text="timeData.hours" color="#020B18"
size="36"></u-text>
</view>
<view class="title-time-item">
<u-text text="小时" color="#90A0AF" size="28"></u-text>
</view>
<view class="title-time-item back">
<u-text :text="timeData.minutes" color="#020B18"
size="36"></u-text>
</view>
<view class="title-time-item">
<u-text text="分" color="#90A0AF" size="28"></u-text>
</view>
<view class="title-time-item back">
<u-text :text="timeData.seconds" color="#020B18" size="36"></u-text>
</view>
<view class="title-time-item">
<u-text text="秒" color="#90A0AF" size="28"></u-text>
</view>
</view>
</u-count-down>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="info-container">
<view class="info-title">
<u-text text="活动基本信息" color="#020B18" size="36" line-height="36"></u-text>
</view>
<view class="info-item row">
<view class="label">
<u-text text="名额：" color="#90A0AF" size="32" line-height="54"></u-text>
</view>
<view class="content row col">
<view class="col-6">
<u-text :text="'顾问 '+detail.user_advisor" line-height="54" color="#020B18" size="32"></u-text>
</view>
<view class="col-6">
<u-text :text="'剩余('+(detail.advisor_number - detail.user_advisor)+')'" line-height="54" color="#020B18" size="32"></u-text>
</view>
<view class="col-6">
<u-text :text="'参加人员 '+detail.user_count" line-height="54" color="#020B18" size="32"></u-text>
</view>
<view class="col-6">
<u-text :text="'剩余('+(detail.registrations_number - detail.user_count)+')'" line-height="54" color="#020B18" size="32"></u-text>
</view>
</view>
</view>
<view class="info-item row">
<view class="label">
<u-text text="活动时间：" color="#90A0AF" size="32" line-height="54"></u-text>
</view>
<view class="content row col">
<view class="col-12">
<u-text :text="detail.start_time" line-height="54" color="#020B18" size="32"></u-text>
</view>
</view>
</view>
<view class="info-item row">
<view class="label">
<u-text text="活动地址：" color="#90A0AF" size="32" line-height="54"></u-text>
</view>
<view class="content row col">
<view class="col">
<u-text :text="detail.address" line-height="54" color="#020B18" size="32"></u-text>
</view>
<view class="col" style="text-align: right;flex:0 0 96rpx">
<view style="padding:12rpx;background-color: #FF9545;border-radius: 50%;display: inline-block;" @click="callLocal(detail.lat,detail.lng,detail.address)">
<u-icon name="map-fill" size="32" color="#fff"></u-icon>
</view>
</view>
</view>
</view>
<view class="info-item row">
<view class="label">
<u-text text="报名方式：" color="#90A0AF" size="32" line-height="54"></u-text>
</view>
<view class="content row col">
<view class="col-12">
<u-text :text="detail.registration_method" line-height="54" color="#020B18" size="32"></u-text>
</view>
</view>
</view>
<view class="info-item row">
<view class="label">
<u-text text="主办方：" color="#90A0AF" size="32" line-height="54"></u-text>
</view>
<view class="content row col">
<view class="col-12">
<u-text :text="detail.sponsor" line-height="54" color="#020B18" size="32"></u-text>
</view>
</view>
</view>
<view class="info-item row">
<view class="label">
<u-text text="联系方式：" color="#90A0AF" size="32" line-height="54"></u-text>
</view>
<view class="content row col">
<view class="col">
<u-text :text="detail.phone" line-height="54" color="#020B18" size="32"></u-text>
</view>
<view class="col" style="text-align: right;">
<view style="padding:12rpx;background-color: #FF9545;border-radius: 50%;display: inline-block;" @click="callPhone(detail.phone)">
<u-icon name="phone-fill" size="32" color="#fff"></u-icon>
</view>
</view>
</view>
</view>
<view class="info-item row">
<view class="label">
<u-text text="暖新币：" color="#90A0AF" size="32" line-height="54"></u-text>
</view>
<view class="content row col">
<view class="col-12">
<u-text :text="'顾问 '+detail.advisor_coin" line-height="54" color="#020B18" size="32"></u-text>
</view>
<view class="col-12">
<u-text :text="'参加人员 '+detail.user_coin" line-height="54" color="#020B18" size="32"></u-text>
</view>
</view>
</view>
<view class="info-item row">
<view class="label">
<u-text text="备注：" color="#90A0AF" size="32" line-height="54"></u-text>
</view>
<view class="content row col">
<view class="col-12">
<u-text :text="detail.remark" line-height="54" color="#020B18" size="32"></u-text>
</view>
</view>
</view>
</view>
<view class="remark-container">
<view class="remark-title">
<u-text text="活动介绍" color="#020B18" size="36" line-height="36"></u-text>
</view>
<view class="remark-content">
<u-parse :content="detail.content"></u-parse>
</view>
</view>
<view class="join-container" v-if="advisor_list.length > 0 || user_list.length > 0">
<view class="join-title">
<u-text text="参加人员名单" color="#020B18" size="36" line-height="36"></u-text>
</view>
<view class="join-consultant-title join-desc-title row" v-if="advisor_list.length > 0">
<view class="icon">
<u-image :src="staticImage.consultantIcon" mode="widthFix" width="48" height="48"></u-image>
</view>
<view class="title">
<u-text text="顾问" color="#178AF2" size="32" line-height="36"></u-text>
</view>
</view>
<view class="consultant-list">
<view class="list-item row" v-for="(item,index) in advisor_list">
<view class="name">
<u-text :text="item.name" color="#666" size="28" line-height="50"></u-text>
</view>
<!-- <view class="position">-->
<!-- <u-text :text="item.name" color="#666" size="28" line-height="50"></u-text>-->
<!-- </view>-->
<view class="time">
<u-text :text="$u.timeFormat(item.create_time, 'yyyy/mm/dd')" color="#666" size="28" line-height="50"></u-text>
</view>
</view>
</view>
<view class="join-people-title join-desc-title row" v-if="user_list.length > 0">
<view class="icon">
<u-image :src="staticImage.peopleIcon" mode="widthFix" width="48" height="48"></u-image>
</view>
<view class="title">
<u-text text="参加人员" color="#FF9545" size="32" line-height="36"></u-text>
</view>
</view>
<view class="people-list">
<view class="list-item row" v-for="(item,index) in user_list">
<view class="name">
<u-text :text="item.name" color="#666" size="28" line-height="50"></u-text>
</view>
<!-- <view class="position">-->
<!-- <u-text :text="item.name" color="#666" size="28" line-height="50"></u-text>-->
<!-- </view>-->
<view class="time">
<u-text :text="$u.timeFormat(item.create_time, 'yyyy/mm/dd')" color="#666" size="28" line-height="50"></u-text>
</view>
</view>
</view>
</view>
</view>
<view class="foot-button border-box row">
<follow :is_collect="detail.is_collect" :id="id" type="activity"></follow>
<view class="button-group">
<view class="button phone " v-if="((detail.status === 0 || detail.status === 1)&&detail.is_regist !==1 && api.user()?.advisor?.id)">
<u-icon :name="staticImage.buttonPeople" size="32" color="#000" custom-style="margin-right:10rpx;"></u-icon>
<u-text
size="32"
color="#020B18"
:text="getButton()"
@click="((detail.status === 0 || detail.status === 1)&&detail.is_regist !==1) ? api.navTo('/pages/Join/index?user_type=2&relevancy_type=2&id='+id,true):openNoticePop()"></u-text>
</view>
<view class="button exchange"
:class="{gray:(detail.status !== 0 && detail.status !== 1 || detail.is_regist === 1)}"
>
<u-text
align="center"
size="32"
color="#020B18"
:text="getButton('people')"
@click="((detail.status === 0 || detail.status === 1)&&detail.is_regist !==1) ? api.navTo('/pages/Join/index?user_type=1&relevancy_type=2&id='+id,true):openNoticePop()"></u-text>
</view>
</view>
</view>
<NxrPop ref="nxrPop" :content="popContent"></NxrPop>
</template>
<script>
import api from "@/utils/functions.js";
import {imghost} from "@/config/host";
import {activityDetail} from "@/api/activity";
import follow from "@/components/Follow/index.vue";
import {joinList} from "@/api/other";
import NxrPop from "@/components/NxrPop/index.vue";
export default {
onShareAppMessage() {
let result = {
title:this.detail.title,
path:'/pages/Activity/index?id=' + this.id,
};
if(this.detail.banner){
result.imageUrl = this.detail.banner;
}
return result;
},
onShareTimeline() {
let result = {
title:this.detail.title,
path:'/pages/Activity/index?id=' + this.id,
};
if(this.detail.banner){
result.imageUrl = this.detail.banner;
}
return result;
},
components: {NxrPop, follow},
computed: {
api() {
return api
}
},
data() {
return {
id:'',
title: '活动详情 ',
staticImage:{
position:imghost+'/map-position.png',
mapClose:imghost+'/map-close.png',
listPosition:imghost+'/service-position.png',
listPhone:imghost+'/service-phone.png',
activityBanner:imghost+'/activity-banner.png',
rightRed:imghost+'/activity-red.png',
rightBlue:imghost+'/activity-blue.png',
rightGreen:imghost+'/activity-green.png',
rightOrange:imghost+'/activity-orange.png',
consultantIcon:imghost+'/consultant-icon.png',
peopleIcon:imghost+'/people-icon.png',
buttonPeople:imghost+'/button-people.png',
},
data:{
status:1,
type_name:'社区活动',
community:'三元社区',
title:'家庭教育培训课堂开课啦！',
address:'asdasd',
start_time:'2023-11-11',
cover:imghost+'/activity-banner.png',
},
timeNumber: 0,
timeData:{},
detail:{
banner:'',
surplus_time:'',
user_advisor:'',
advisor_number:'',
user_count:'',
registrations_number:'',
registration_method:'',
sponsor:'',
phone:'',
advisor_coin:'',
user_coin:'',
content:'',
remark:'',
},
user_list:[],
advisor_list:[],
popContent:'',
}
},
onShow(){
if(!uni.getStorageSync('token')){
uni.navigateTo({url:'/pages/Login/index'})
return;
}
this.getDetail(this.id);
},
onLoad(option) {
const obj = uni.getLaunchOptionsSync();
let scene = obj.query.scene;
scene = decodeURIComponent(scene)
this.id = option.id || scene || 0;
this.getDetail(option.id);
this.getJoinList();
},
onReady() {
},
onReachBottom() {
},
methods: {
getButton(type = 'gw'){
if(this.detail.is_regist === 1){
return '已报名';
}else if(this.detail.status !== 0 && this.detail.status !== 1){
return '已截止'
}else{
if(type==='gw'){
return '顾问报名';
}else{
return '参加报名'
}
}
},
openNoticePop(){
if(this.detail.is_regist === 1){
this.popContent = '已经报名过啦~';
}else if(this.detail.status !== 0 && this.detail.status !== 1){
this.popContent = '已过报名时间';
}
this.$refs.nxrPop.openPop()
},
getStatusColor(status){
switch (status){
case 1:
return 'blue';
case 2:
return 'red';
case 4:
return 'green';
case 5:
return 'orange';
default:
return 'blue';
}
},
getDetail(){
activityDetail({activity_id:this.id}).then(res => {
this.detail = res.data;
this.timeNumber = res.data.surplus_time * 1000 || 0;
})
},
getJoinList(){
let that = this;
joinList({relevancy_type:2,relevancy_id:this.id}).then(res => {
that.user_list = res.data.user_list;
that.advisor_list = res.data.advisor_list;
})
},
timeChange(e){
this.timeData = e;
},
callLocal(lat,lng,address){
const latitude=parseFloat(lat);
const longitude=parseFloat(lng);
uni.openLocation({
latitude:latitude,
longitude:longitude,
name:address,
})
},
callPhone(phone){
uni.makePhoneCall({
phoneNumber: phone?.toString()
});
},
},
onPageScroll(res) {
},
created() {
},
mounted() {
},
}
</script>
<style lang="scss">
@import "./components/index.scss";
</style>