|
@@ -2,23 +2,24 @@
|
|
|
<view class="activity-page">
|
|
|
<van-sticky style="background: #fff">
|
|
|
<view class="search-wrap">
|
|
|
- <van-search
|
|
|
- shape="round"
|
|
|
- :value="searchVal"
|
|
|
- placeholder="搜索您想要的商品名"
|
|
|
+ <van-search
|
|
|
+ shape="round"
|
|
|
+ :value="searchVal"
|
|
|
+ placeholder="搜索您想要的商品名"
|
|
|
+ @change="searchValChange"
|
|
|
+ @search="onSearch"
|
|
|
+ @clear="onClearSearch"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="flex tabs-wrap" @click="tabChange">
|
|
|
<view
|
|
|
:class="['tab-item', tabActive === '1' && 'tab-active']"
|
|
|
data-type="1"
|
|
|
- >线上会议</view
|
|
|
- >
|
|
|
+ >线上会议</view>
|
|
|
<view
|
|
|
:class="['tab-item', tabActive === '3' && 'tab-active']"
|
|
|
data-type="3"
|
|
|
- >线下沙龙</view
|
|
|
- >
|
|
|
+ >线下沙龙</view>
|
|
|
</view>
|
|
|
<view class="flex status-wrap" @click="statusChange">
|
|
|
<view
|
|
@@ -26,25 +27,22 @@
|
|
|
'status-item',
|
|
|
statusActive === '1' && 'status-active',
|
|
|
]"
|
|
|
- data-status="1"
|
|
|
- >本周预告</view
|
|
|
- >
|
|
|
+ data-status="1">本周预告
|
|
|
+ </view>
|
|
|
<view
|
|
|
:class="[
|
|
|
'status-item',
|
|
|
statusActive === '2' && 'status-active',
|
|
|
]"
|
|
|
- data-status="2"
|
|
|
- >进行中</view
|
|
|
- >
|
|
|
+ data-status="2">进行中
|
|
|
+ </view>
|
|
|
<view
|
|
|
:class="[
|
|
|
'status-item',
|
|
|
statusActive === '3' && 'status-active',
|
|
|
]"
|
|
|
- data-status="3"
|
|
|
- >已结束</view
|
|
|
- >
|
|
|
+ data-status="3">已结束
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</van-sticky>
|
|
|
|
|
@@ -57,19 +55,21 @@
|
|
|
>
|
|
|
<view class="status-box status-before">未开始</view>
|
|
|
<view class="flex top">
|
|
|
- <image
|
|
|
- class="avatar"
|
|
|
- src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg"
|
|
|
- mode="aspectFill"
|
|
|
- ></image>
|
|
|
+ <image class="avatar" :src="item.img" mode="aspectFill"></image>
|
|
|
<view class="content">
|
|
|
- <view class="van-ellipsis title"
|
|
|
- >宏观双周电话会宏观双周电话会</view
|
|
|
- >
|
|
|
- <view class="name">主讲:某某某</view>
|
|
|
- <view class="time"
|
|
|
- >时间:{{ start | formatActivityTime(end) }}</view
|
|
|
- >
|
|
|
+ <view class="flex icon-box">
|
|
|
+ <template v-if="item.city">
|
|
|
+ <image src='../../static/position.png'></image>
|
|
|
+ <text>{{item.city}}</text>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.hasPlayBack">
|
|
|
+ <image src='../../static/hf.png'></image>
|
|
|
+ <text>回放</text>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view class="van-ellipsis title">{{item.activityName}}</view>
|
|
|
+ <view class="name">主讲:{{item.speaker}}</view>
|
|
|
+ <view class="time">时间:{{ item.startTime | formatActivityTime(item.endTime) }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="flex bot">
|
|
@@ -87,8 +87,6 @@ import { apiActivityList } from '@/api/activity'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- start: '2021-11-12T09:25:01+08:00',
|
|
|
- end: '2021-11-12T12:25:01+08:00',
|
|
|
searchVal: '',
|
|
|
tabActive: '1',
|
|
|
statusActive: '1',
|
|
@@ -118,6 +116,24 @@ export default {
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
+ //搜索
|
|
|
+ onSearch(){
|
|
|
+ this.refreshPage()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ //清除搜索内容
|
|
|
+ onClearSearch(){
|
|
|
+ this.searchVal=''
|
|
|
+ this.refreshPage()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 同步搜索关键词
|
|
|
+ searchValChange(e){
|
|
|
+ this.searchVal=e.detail
|
|
|
+ },
|
|
|
+
|
|
|
// 类型切换
|
|
|
tabChange(e) {
|
|
|
const type = e.target.dataset.type
|
|
@@ -151,6 +167,7 @@ export default {
|
|
|
|
|
|
async getList() {
|
|
|
const res = await apiActivityList({
|
|
|
+ title:this.searchVal,
|
|
|
active_state: Number(this.statusActive),
|
|
|
activity_type: Number(this.tabActive),
|
|
|
page: this.page,
|
|
@@ -252,6 +269,7 @@ export default {
|
|
|
font-size: $global-font-size-lg;
|
|
|
font-weight: bold;
|
|
|
width: 420rpx;
|
|
|
+ padding-right: 130rpx;
|
|
|
padding-bottom: 10rpx;
|
|
|
border-bottom: 1px solid $global-border-color;
|
|
|
}
|
|
@@ -276,6 +294,22 @@ export default {
|
|
|
border: none;
|
|
|
}
|
|
|
}
|
|
|
+ .content{
|
|
|
+ width: 420rpx;
|
|
|
+ position: relative;
|
|
|
+ .icon-box{
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 8rpx;
|
|
|
+ font-size: $global-font-size-sm;
|
|
|
+ color:$global-text-color-main;
|
|
|
+ image{
|
|
|
+ width: 26rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|