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.
392 lines
14 KiB
392 lines
14 KiB
<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"> |
|
<u-image radius="20" :src="detail.banner" width="100%" height="240" mode="aspectFill"></u-image> |
|
</view> |
|
<view class="time-container"> |
|
<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="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.hours>10?timeData.hours:'0'+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>10?timeData.minutes:'0'+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>10?timeData.seconds:'0'+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+')'" 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+')'" 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;"> |
|
<u-icon name="map-fill" size="32" color="#fff" @click="callLocal(detail.lat,detail.lng)"></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" @click="callPhone(detail.phone)"></u-text> |
|
</view> |
|
<view class="col" style="text-align: right;"> |
|
<view style="padding:12rpx;background-color: #FF9545;border-radius: 50%;display: inline-block;"> |
|
<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"> |
|
<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"> |
|
<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 joinList.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="item.name" color="#666" size="28" line-height="50"></u-text> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
<view class="join-people-title join-desc-title row"> |
|
<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 joinList.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="item.name" 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 "> |
|
<u-icon :name="staticImage.buttonPeople" size="32" color="#000" custom-style="margin-right:10rpx;"></u-icon> |
|
<u-text |
|
size="32" |
|
color="#020B18" |
|
text="顾问报名" |
|
@click="api.navTo('/pages/Join/index?user_type=2&relevancy_type=2&id='+id)"></u-text> |
|
</view> |
|
<view class="button exchange"> |
|
<u-text |
|
size="32" |
|
color="#020B18" |
|
text="参加报名" |
|
@click="api.navTo('/pages/Join/index?user_type=1&relevancy_type=2&id='+id)"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
</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"; |
|
|
|
export default { |
|
components: {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: 3721000, |
|
timeData:{}, |
|
detail:{ |
|
banner:'', |
|
surplus_time:'', |
|
user_advisor:'', |
|
advisor_number:'', |
|
user_count:'', |
|
registrations_number:'', |
|
registration_method:'', |
|
sponsor:'', |
|
phone:'', |
|
advisor_coin:'', |
|
user_coin:'', |
|
content:'', |
|
remark:'', |
|
}, |
|
joinList:{ |
|
user_list:[], |
|
advisor_list:[], |
|
}, |
|
} |
|
}, |
|
onLoad(option) { |
|
this.id = option.id || 0; |
|
this.getDetail(option.id); |
|
}, |
|
onReady() { |
|
|
|
}, |
|
onReachBottom() { |
|
|
|
}, |
|
methods: { |
|
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; |
|
}) |
|
}, |
|
timeChange(e){ |
|
this.timeData = e; |
|
}, |
|
callLocal(lat,lng){ |
|
const latitude=parseFloat(lat); |
|
const longitude=parseFloat(lng); |
|
uni.openLocation({ |
|
latitude:latitude, |
|
longitude:longitude, |
|
name:this.mapData.name, |
|
}) |
|
}, |
|
callPhone(phone){ |
|
uni.makePhoneCall({ |
|
phoneNumber: phone?.toString() |
|
}); |
|
}, |
|
}, |
|
onPageScroll(res) { |
|
|
|
}, |
|
created() { |
|
|
|
}, |
|
mounted() { |
|
|
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import "./components/index.scss"; |
|
</style> |