是小王呀\24601
10 months ago
5 changed files with 654 additions and 46 deletions
@ -1,10 +1,17 @@ |
|||
// axios
|
|||
import request from '@/utils/request' |
|||
|
|||
//获取我的社区
|
|||
//获取生活圈
|
|||
export function sphereLifeSearchList(parm) { |
|||
return request({ |
|||
url: `/voluntary/sphereLife/searchList?lon=${parm.lon}&lat=${parm.lat}&name=${parm.name}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
//获取生活圈
|
|||
export function sphereLifeSearcdetail(id) { |
|||
return request({ |
|||
url: `/voluntary/sphereLife/detail/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
@ -0,0 +1,350 @@ |
|||
<template> |
|||
<div> |
|||
<div class="flex flex-mean" style="background-color: #FFFFFF; height: 150px;"> |
|||
<!-- <van-search class=".flex flex-1" v-model="searchValue" left-icon="" shape="round" placeholder="请输入搜索关键词" /> |
|||
<van-button round type="applyList" class="custom-button font-size13 m-top10 m-right12" @click="onSearch()">查询</van-button> --> |
|||
<!-- <van-image src="../../assets/images/servicePhone/" /> --> |
|||
<img :src="applyList.attrs[0].url" style="width: 100%; height: 150px;" /> |
|||
</div> |
|||
<div class='' style="position: relative;top: -10px;"> |
|||
<div class="card"> |
|||
<div class=" flex flex-y p0"> |
|||
<div class="flex flex-x flex-center2"> |
|||
<h2 style="margin: 0; font-size: 21px; ">{{ applyList.name }}</h2> |
|||
<van-tag size="medium" color="#ffefd6" style="margin-left: 10px;" |
|||
text-color="#ff8707">{{applyList.type}}/{{typeNames}}</van-tag> |
|||
|
|||
</div> |
|||
<div> |
|||
<div> |
|||
<van-tag v-for=" (item,index) in tabs" round type="warning" color="#f2f2f2" size="medium" text-color="#6e6e6e">{{item.tab}}</van-tag> |
|||
<div style="font-size: 16px;color: #999999; line-height: 30px;"> |
|||
<img src=""> |
|||
<span>活动时间: |
|||
</span><span>{{ applyList.strTime }} 至 {{ applyList.endTime}}</span></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class='container' style="position: relative;top: -10px;"> |
|||
<div class="card"> |
|||
<div class="m-top15 p0"> |
|||
<h2 style="margin: 0; font-size: 21px;">活动信息</h2> |
|||
<div style="font-size: 16px;color: #999999; line-height: 30px;"><span>所属项目: </span><span |
|||
style="color: black;">{{applyList.projectName}}</span></div> |
|||
<div style="font-size: 16px;color: #999999; line-height: 30px;"><span>招募截止: </span><span |
|||
style="color: black;">{{applyList.deadline}}</span></div> |
|||
<div style="font-size: 16px;color: #999999; line-height: 30px;"><span>签到时间: </span><span |
|||
style="color: black;">{{applyList.signInTime+' 至 '+applyList.signOutTime}}</span></div> |
|||
<div style="font-size: 16px;color: #999999; line-height: 30px;"><span>活动名额: </span><span |
|||
style="color: black;"><span v-if="applyList.notQuota === 1">{{applyList.quota}}</span> |
|||
<tspanext v-else>不限名额</tspanext> |
|||
</span></div> |
|||
<div style="font-size: 16px;color: #999999; line-height: 30px;"><span>主办方: </span><span |
|||
style="color: black;">{{ActName?ActName:'-'}}</span></div> |
|||
<div style="font-size: 16px;color: #999999; line-height: 30px;"><span>联系人: </span><span |
|||
style="color: black;">{{applyList.linkman}}</span></div> |
|||
<div style="font-size: 16px;color: #999999; line-height: 30px;"><span>联系电话: </span><span |
|||
style="color: black;">{{applyList.linkman}}</span></div> |
|||
<div style="font-size: 16px;color: #999999; line-height: 30px;"><span>活动时长: </span><span |
|||
style="color: black;">{{applyList.serviceTime}}小时</span></div> |
|||
<div style="font-size: 16px;color: #999999; line-height: 30px;"><span>积分奖励: </span><span |
|||
style="color: black;">{{applyList.points}}</span></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class='container' style="position: relative;top: -10px;"> |
|||
<div class="card"> |
|||
<div class="m-top15 p0"> |
|||
<h2 style="margin: 0; font-size: 21px;">招募要求</h2> |
|||
<div v-html="applyList.conditions"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<Android @send-number="handleNumber" /> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import {sphereLifeSearcdetail } from "@/api/lingCircle" |
|||
import Share from "@/components/Share" |
|||
import registerDialog from '@/components/registerDialog'; |
|||
import { setConfig } from '@/utils/jweixin' |
|||
import { Toast, Dialog } from 'vant' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
options: [ |
|||
{ |
|||
"children": [ |
|||
{ |
|||
"pv": "1", |
|||
"value": "11", |
|||
"label": "托儿所" |
|||
}, |
|||
{ |
|||
"pv": "1", |
|||
"value": "12", |
|||
"label": "幼儿园" |
|||
}, |
|||
{ |
|||
"pv": "1", |
|||
"value": "13", |
|||
"label": "小学" |
|||
}, |
|||
{ |
|||
"pv": "1", |
|||
"value": "14", |
|||
"label": "中学" |
|||
}, |
|||
{ |
|||
"pv": "1", |
|||
"value": "15", |
|||
"label": "培训机构" |
|||
}, |
|||
{ |
|||
"pv": "1", |
|||
"value": "16", |
|||
"label": "其它" |
|||
} |
|||
], |
|||
"value": "1", |
|||
"label": "教育培训" |
|||
}, |
|||
{ |
|||
"children": [ |
|||
{ |
|||
"pv": "2", |
|||
"value": "21", |
|||
"label": "门诊" |
|||
}, |
|||
{ |
|||
"pv": "2", |
|||
"value": "22", |
|||
"label": "社区医院" |
|||
}, |
|||
{ |
|||
"pv": "2", |
|||
"value": "23", |
|||
"label": "医院" |
|||
}, |
|||
{ |
|||
"pv": "2", |
|||
"value": "24", |
|||
"label": "其它" |
|||
} |
|||
], |
|||
"value": "2", |
|||
"label": "医疗卫生" |
|||
}, |
|||
{ |
|||
"children": [ |
|||
{ |
|||
"pv": "3", |
|||
"value": "31", |
|||
"label": "餐饮" |
|||
}, |
|||
{ |
|||
"pv": "3", |
|||
"value": "32", |
|||
"label": "超市" |
|||
}, |
|||
{ |
|||
"pv": "3", |
|||
"value": "33", |
|||
"label": "理发" |
|||
}, |
|||
{ |
|||
"pv": "3", |
|||
"value": "34", |
|||
"label": "书店" |
|||
}, |
|||
{ |
|||
"pv": "3", |
|||
"value": "35", |
|||
"label": "便利店" |
|||
}, |
|||
{ |
|||
"pv": "3", |
|||
"value": "36", |
|||
"label": "市场" |
|||
}, |
|||
{ |
|||
"pv": "3", |
|||
"value": "37", |
|||
"label": "五金" |
|||
}, |
|||
{ |
|||
"pv": "3", |
|||
"value": "38", |
|||
"label": "照相" |
|||
}, |
|||
{ |
|||
"pv": "3", |
|||
"value": "39", |
|||
"label": "综合修理" |
|||
}, |
|||
{ |
|||
"pv": "3", |
|||
"value": "30", |
|||
"label": "服务站" |
|||
}, |
|||
{ |
|||
"pv": "3", |
|||
"value": "330", |
|||
"label": "农贸市场" |
|||
}, |
|||
{ |
|||
"pv": "3", |
|||
"value": "331", |
|||
"label": "其它" |
|||
} |
|||
], |
|||
"value": "3", |
|||
"label": "商业服务" |
|||
}, |
|||
{ |
|||
"children": [ |
|||
{ |
|||
"pv": "4", |
|||
"value": "41", |
|||
"label": "电影院" |
|||
}, |
|||
{ |
|||
"pv": "4", |
|||
"value": "42", |
|||
"label": "歌剧院" |
|||
}, |
|||
{ |
|||
"pv": "4", |
|||
"value": "43", |
|||
"label": "图书馆" |
|||
}, |
|||
{ |
|||
"pv": "4", |
|||
"value": "44", |
|||
"label": "游泳馆" |
|||
}, |
|||
{ |
|||
"pv": "4", |
|||
"value": "45", |
|||
"label": "活动中心" |
|||
}, |
|||
{ |
|||
"pv": "4", |
|||
"value": "46", |
|||
"label": "体育馆" |
|||
}, |
|||
{ |
|||
"pv": "4", |
|||
"value": "47", |
|||
"label": "其它" |
|||
} |
|||
], |
|||
"value": "4", |
|||
"label": "文化体育" |
|||
}, |
|||
{ |
|||
"value": "5", |
|||
"label": "其它" |
|||
} |
|||
], |
|||
tabs:[], |
|||
applyList:{}, |
|||
}; |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
async mounted() { |
|||
|
|||
// setConfig(['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData']) |
|||
if (this.$route.query.id) { |
|||
console.log(this.$route.query.id); |
|||
|
|||
this.sphereLifeId= this.$route.query.id |
|||
// await this.detail(this.$route.query.id) |
|||
// if(this.$route.query.flag === 'share'){ |
|||
// await this.getById(this.$route.query.id) |
|||
// } |
|||
// await this.share() |
|||
this.activityApplyList( this.$route.query.id) |
|||
// this.activitySignIn(1) |
|||
// this.activitySignIn(0) |
|||
} |
|||
}, |
|||
methods: { |
|||
//获取生活圈详情 |
|||
activityApplyList(id) { |
|||
sphereLifeSearcdetail(id).then(res => { |
|||
if (res.code === 0) { |
|||
this.applyList = res.data |
|||
this.tabs = res.data.tags.split(',').map(tag => ({ tab: tag.trim() })) |
|||
console.log(tabs, "sdalkjflksdf"); |
|||
|
|||
|
|||
|
|||
} |
|||
}).catch(err => { |
|||
|
|||
}) |
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
}, |
|||
components: { Share, registerDialog }, |
|||
computed: { |
|||
disabledRecord() { |
|||
return (item) => { |
|||
if (!item.cutOffTime || item.online != 1) return true |
|||
let flag = new Date(item.cutOffTime.replace(/-/g, '/')).getTime() < Date.now() || item.currentParticipants >= item.participants || item.currentParticipants >= item.participants; |
|||
return flag || false |
|||
} |
|||
}, |
|||
}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
.phone{ |
|||
height: 50px; |
|||
bottom:8vh; |
|||
} |
|||
:deep img{ |
|||
max-width: 100%; |
|||
} |
|||
:deep(.p0>.van-cell) { |
|||
padding: 0; |
|||
} |
|||
|
|||
:deep(.van-cell) { |
|||
padding: 16px 8px; |
|||
} |
|||
|
|||
:deep(.van-cell__title) { |
|||
color: #666666; |
|||
display: flex; |
|||
|
|||
&>span { |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
:deep(.van-cell__value) { |
|||
text-align: left; |
|||
} |
|||
|
|||
:deep(.van-cell--required) { |
|||
&::before { |
|||
left: -5px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,133 @@ |
|||
/* pages/livingCircle/livingCircle.wxss */ |
|||
|
|||
.map-view-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
background: #F8F8F7; |
|||
width: 100%; |
|||
} |
|||
.map-view-content { |
|||
width: 100%; |
|||
background: #FFF; |
|||
padding: 10px 0 10px; /* 原来是 20px */ |
|||
margin-top: 5px; /* 原来是 10px */ |
|||
} |
|||
#map { |
|||
width:100%; |
|||
height:50vh; /* 原来是 100vh */ |
|||
position: relative; |
|||
} |
|||
|
|||
.zoom-in, .zoom-out { |
|||
position: absolute; |
|||
width: 20px; /* 原来是 40px */ |
|||
height: 20px; /* 原来是 40px */ |
|||
color:#3fc971; |
|||
background-color: white; |
|||
border: 1px solid #3fc971; |
|||
text-align: center; |
|||
line-height: 20px; /* 原来是 40px */ |
|||
font-size: 15px; /* 原来是 30px */ |
|||
box-sizing: border-box; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.zoom-in { |
|||
right: 5px; /* 原来是 10px */ |
|||
bottom: 44px; /* 原来是 88px */ |
|||
} |
|||
|
|||
.zoom-out { |
|||
right: 5px; /* 原来是 10px */ |
|||
bottom: 25px; /* 原来是 50px */ |
|||
} |
|||
.van-search__content { |
|||
border:solid red 1px; /* 原来是 2px */ |
|||
} |
|||
.movable-area{ |
|||
pointer-events:none; |
|||
z-index: 100; |
|||
width: 100%; |
|||
height: 100%; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
.toCommunity{ |
|||
width: 75px; /* 原来是 150px */ |
|||
height: 75px; /* 原来是 150px */ |
|||
} |
|||
.movable-view{ |
|||
pointer-events:auto; |
|||
height: 30px; /* 原来是 60px */ |
|||
width: 90px; /* 原来是 180px */ |
|||
font-size: 13px; /* 原来是 26px */ |
|||
} |
|||
.content{ |
|||
background-color: #FFF; |
|||
border-radius: 15px 0 0 15px; /* 原来是 30px */ |
|||
padding: 8px; /* 原来是 16px */ |
|||
box-sizing: border-box; |
|||
} |
|||
.tab{ |
|||
background-color: #FFF; |
|||
width: 100%; |
|||
overflow-x: scroll; |
|||
} |
|||
.item{ |
|||
padding: 5px 0; /* 原来是 10px */ |
|||
box-sizing: border-box; |
|||
color: #666666; |
|||
min-width: 75px; /* 原来是 150px */ |
|||
text-align: center; |
|||
margin-right: 10px; /* 原来是 20px */ |
|||
} |
|||
.active{ |
|||
color: #ea2325; |
|||
border-bottom: 3px solid #ea2325; /* 原来是 6px */ |
|||
} |
|||
.map_item{ |
|||
background-color: #ffffff; |
|||
border-radius: 5px; /* 原来是 10px */ |
|||
padding: 10px; /* 原来是 20px */ |
|||
box-sizing: border-box; |
|||
margin-top: 10px; /* 原来是 20px */ |
|||
} |
|||
.tag{ |
|||
width: fit-content; |
|||
padding: 3px 5px; /* 原来是 6px 10px */ |
|||
box-sizing: border-box; |
|||
border-radius: 8px 8px 8px 0; /* 原来是 15px */ |
|||
margin: 5px 0 10px 0; /* 原来是 10px 0 20px 0 */ |
|||
} |
|||
|
|||
.tag-g{ |
|||
color:#009e8d; |
|||
background-color: #dcf4f0; |
|||
} |
|||
.tag-r{ |
|||
color:#ff6363; |
|||
background-color: #ffefef; |
|||
} |
|||
.tag-b{ |
|||
color:#5a77ec; |
|||
background-color: #e4e9fc; |
|||
} |
|||
.left_image{ |
|||
width: 70px; /* 原来是 140px */ |
|||
height: 70px; /* 原来是 140px */ |
|||
margin-right: 12px; /* 原来是 24px */ |
|||
border-radius: 5px; /* 原来是 10px */ |
|||
} |
|||
.navigation{ |
|||
width: 20px; /* 原来是 20px */ |
|||
height: 20px; /* 原来是 20px */ |
|||
} |
|||
|
|||
.ellipsis{ |
|||
padding: 0; |
|||
} |
|||
Loading…
Reference in new issue