horzi_rai_wxa/pages/activity/activity.vue

<template>
	<view class="container activity-content">
		<view class="top-content" id="idtop">
			<view class="tab">
				<view class="tab-item" v-for="(item, index) in tabs" :key="item.id">
					<view class="scroll-tab-item" :class="{ active: tabsActive == index }"
						@click="toggleTab(item, index)">
						{{ item.name }}
						<image src="@/static/img/border_act.png" class="border_act" v-if="tabsActive == index" mode="">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="dynamic-content" v-if="tabsActive == 0">
			<view class="target-title">
				活动预告:
			</view>
			<view class="target-item" v-for="(item,index) in dynamicList" :key="index" @click="changeTarget(index,item)"
				:class="{'bgcolor':spanIndex.indexOf(index)>-1}">
				{{item.KeyWord}}
			</view>
			<view class="target-item target-search" @click="goSearch">
				<image src="../../static/img/search_iocn.png" mode=""></image>
				<text style="margin-left: 10rpx;">更多...</text>
			</view>
		</view>
		<view class="select-sticky" v-if="tabsActive == 0">
			<view class="select-conyent">
				<van-dropdown-menu active-color="#333333">
					<van-dropdown-item id="statusstate" :title="activeStateName" @close="closeTheWindow('statusstate')">
						<view class="menu-items">
							<view class="menu-items-box" @click="overallBtn('statusstate', key)"
								v-for="key in listActivityStaus" :key="key.Id">
								<view class="items-box">
									<u-icon v-if="key.IsChoose" name="checkbox-mark" color="#2C83FF" size="24"></u-icon>
								</view>
								<text>{{ key.StatusName }}</text>
							</view>
						</view>
						<view style="background-color: #f8f8fa;width: 100%;">
							<view style="margin: 0 auto;width: 682rpx;border-bottom: 2rpx solid #E5E5E5;">
							</view>
						</view>
						<view class="menu-items">
							<view class="menu-items-box" @click="timeListBtn('statusstate', key)"
								v-for="key in activityTimeList" :key="key.Id">
								<view class="items-box">
									<u-icon v-if="key.IsChoose" name="checkbox-mark" color="#2C83FF" size="24"></u-icon>
								</view>
								<text>{{ key.StatusName }}</text>
							</view>
						</view>
						<view class="replacement-box">
							<view class="replacement">
								<text @click="replacementBtn('statusstate')" class="replacement-box">重置</text>
								<text @click="replacementConfirm('statusstate')">确定</text>
							</view>
						</view>
					</van-dropdown-item>
					<van-dropdown-item id="industry" :title="chartPermissionName" @close="closeTheWindow('industry')">
						<view class="decide">
							<view class="items-box">
								<u-icon v-if="isShowJurisdiction" name="checkbox-mark" color="#2C83FF" size="24">
								</u-icon>
							</view>
							<text @click="isJurisdiction">始终只展示有权限的行业</text>
						</view>
						<view style="background-color: #f8f8fa;width: 100%;">
							<view style="margin: 0 auto;width: 682rpx;border-bottom: 2rpx solid #E5E5E5;">
							</view>
						</view>
						<view class="menu-items">
							<view class="menu-items-box" v-for="item in listChartPermission"
								:key="item.ChartPermissionId" @click="overallClick('industry', item)">
								<view class="items-box">
									<u-icon v-if="item.IsChoose" name="checkbox-mark"
										:color="isShowJurisdiction ? '#ccc' : '#2C83FF'" size="24"></u-icon>
								</view>
								<text>{{ item.PermissionName }}</text>
							</view>
						</view>
						<view class="replacement">
							<text @click="replacementBtn('industry')" class="replacement-box">重置</text>
							<text @click="replacementConfirm('industry')">确定</text>
						</view>
					</van-dropdown-item>
					<van-dropdown-item id="genre" :title="activityTypeName" @close="closeTheWindow('genre')">
						<view class="menu-items">
							<view class="menu-items-box" @click="overallActivity('genre', item)"
								v-for="(item, index) in listActivityType" :key="item.ActivityTypeId">
								<view class="items-box">
									<u-icon v-if="item.IsChoose" name="checkbox-mark" color="#2C83FF" size="24">
									</u-icon>
								</view>
								<text>{{ item.ActivityTypeName }}</text>
							</view>
						</view>
						<view class="replacement">
							<text @click="replacementBtn('genre')" class="replacement-box">重置</text>
							<text @click="replacementConfirm('genre')">确定</text>
						</view>
					</van-dropdown-item>
				</van-dropdown-menu>
			</view>

		</view>

		<!-- </view> -->
		<view class="box-content" id="contentList" :class="{ head: tabsActive == 1 }" v-if="haveData">
			<view class="content-list" v-for="(item, index) in collectList" :key="index">
				<view class="list-top" @click="goDetail(item)">
					<view class="list-top-box">
						<text class="title">{{ item.ActivityTypeName }}</text>
						<view class="city" v-if="item.City">
							<image src="../../static/img/location.png" mode=""></image>
							<text>{{ item.City }}</text>
						</view>
					</view>
					<text style="color: #2acdd9; font-size: 26rpx" v-if="item.ActiveState == 1">未开始</text>
					<text style="color: #ff4040; font-size: 26rpx" v-if="item.ActiveState == 2">进行中</text>
					<text style="color: #999999; font-size: 26rpx" v-if="item.ActiveState == 3">已结束</text>
				</view>
				<view class="" style="display: flex">
					<view class="list-center" @click="goDetail(item)">
						<text class="title" v-if="item.IsBrackets == 1">{{
              item.ActivityName
            }}</text>
						<text class="title-two" v-else>{{ item.ActivityName }}</text>
						<view class="setting-center">
							<view class="">
								<view class="box-expert" style="padding-bottom: 30rpx" v-if="
                    item.ActivityTypeName == '专家电话会' ||
                    item.ActivityTypeName == '专家线下沙龙'
                  ">
									<view style="width: 140rpx"> 专家背景： </view>
									<view style="width: 400rpx">
										<rich-text :nodes="item.Expert"></rich-text>
									</view>
								</view>
								<text style="padding-bottom: 30rpx" v-if="
                    item.ActivityTypeName == '公司调研电话会' ||
                    item.ActivityTypeName == '公司线下调研'
                  ">嘉宾：{{ item.DistinguishedGuest }}</text>
								<text style="padding-bottom: 30rpx" v-if="
                    item.ActivityTypeName == '分析师电话会' ||
                    item.ActivityTypeName == '分析师线下沙龙'
                  ">主讲人：{{ item.Speaker }}</text>
							</view>
						</view>

						<text style="padding-bottom: 30rpx">活动时间：{{ item.ActivityTimeText }}</text>
					</view>
					<view class="" style="display: flex; align-items: center; padding-right: 30rpx">
						<u-icon style="padding-bottom: 30rpx" name="arrow-right" color="#BDBDBD" size="34"></u-icon>
					</view>
				</view>
				<view class="list-bottom" v-if="
            item.ActiveState == 1 &&
            item.IsLimitPeople == 1 &&
            item.ActivityTypeName == '公司调研电话会'
          ">
					<view class="multi-text">
						<text v-if="item.IsSignup !== 1"
							@click="wanttosignup(item.ActivityId)">我要报名（{{ item.SignupNum }}/{{ item.LimitPeopleNum }}）</text>
						<text v-else
							@click="signupCancel(item.ActivityId, 2, item.ActivityTime)">{{ item.SignupType == 1 ? "取消外呼" : "取消报名" }}（{{
                item.SignupNum
              }}/{{ item.LimitPeopleNum }}）</text>
					</view>
				</view>
				<view class="list-bottom" v-else-if="item.ActiveState == 1">
					<view class="multi" v-if="
              item.ActivityTypeId == 1 ||
              item.ActivityTypeId == 2 ||
              (item.ActivityTypeId == 3 && item.IsLimitPeople == 0)
            ">
						<text class="multi-outbound" v-if="item.IsSignup !== 1"
							@click="signupAdd(item.ActivityId, 1)">预约外呼</text>
						<text class="multi-outbound" v-else
							@click="signupCancel(item.ActivityId, 1, item.ActivityTime)">取消外呼</text>
						<text class="multi-remind" v-if="item.IsCancelMeetingReminder == 0"
							style="border-left: 1px solid #e5e5e5"
							@click="meetingReminderAdd(item.ActivityId)">会议提醒</text>
						<text class="multi-remind" v-else style="border-left: 1px solid #e5e5e5"
							@click="meetingReminderCancel(item.ActivityId)">取消会议提醒</text>
					</view>
					<view class="multi-text" v-else>
						<text v-if="item.IsSignup !== 1"
							@click="signupAdd(item.ActivityId, 3)">我要报名（{{ item.SignupNum }}/{{ item.LimitPeopleNum }}）</text>
						<text v-else
							@click="signupCancel(item.ActivityId, 3, item.ActivityTime)">取消报名（{{ item.SignupNum }}/{{ item.LimitPeopleNum }}）</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20"
				v-if="totalPage > 1" />
		</view>
		<view class="nodata" :class="tabsActive == 0?'':'nodataTwo'" v-else>
			<image src="@/static/img/act_search.png" mode="" class="nodata_ico"></image>
			<text>{{tabsActive==1?'暂无日程':"暂无活动"}}</text>
		</view>
		<modalDialog :isShow="isShow" :signupType="signupType" :goFollow="goFollow" :signupStatus="signupStatus"
			:isCancelShow="isCancelShow" :idTypeCancel="idTypeCancel" @cancelShowBtn="cancelEnsure"
			:isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :hasPermission="hasPermission"
			:jurisdictionList="jurisdictionList" />
		<areaCode :isAreaCode="isAreaCode" :areaCode="areaCode" />
		<view class="select-box">
			<u-popup v-model="selectShow" mode="bottom">
				<view style="color: #333333; font-size: 28rpxrpx">请选择参会方式</view>
				<view style="color: #2c83ff" @click="signupAdd('id', 1)">预约外呼</view>
				<view style="color: #2c83ff" @click="signupAdd('id', 2)">自主拨入</view>
				<view style="color: #a9afb8" @click="selectShow = false">取消</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		activity,
		User
	} from "@/config/api.js";
	import {
		Throttle
	} from "@/config/util.js";
	import modalDialog from "@/components/modalDialog.vue";
	import areaCode from "@/components/areaCode.vue";
	import myMixin from "@/activityPages/index.js";
	let app = getApp();
	export default {
		data() {
			return {
				tabs: [{
					name: "全部活动",
					id: 1,
				}, {
					name: "我的日程",
					id: 2,
				}],
				tabsActive: 0,
				totalPage: "",
				haveData: true,
				spanIndex: [],
				activeStateName: "未开始",
				activeState: "1", //活动进行状态
				dynamicList: [],
				dynamicLKeyWodr: [],
				keyWord: ''
			};
		},
		mixins: [myMixin],
		components: {
			modalDialog,
			areaCode,
		},
		onLoad(option) {
			this.$store.dispatch("checkHandle", 'load').then(res => {
				app.globalData.isAuth = res.IsAuth;
				app.globalData.isBind = res.IsBind;
				this.countryCcode(); //判断是否加区号
				if (Object.keys(option).length !== 0) {
					this.activeState = option.statesId; //活动进行状态
					this.activityTypeIds = option.typeIds; //活动类型id 多个用 , 隔开
					this.chartPermissionIds = option.chartIds; //行业id 多个用 , 隔开
					this.activeStateName = option.stateName;
					this.chartPermissionName = option.chartName;
					this.activityTypeName = option.typeName;
					this.activityTimeStatus = option.timeStatus;
					this.spanIndex = option.indexs ? option.indexs.split(',').map(item => item - 0) : []
					this.keyWord = option.keys
					this.isGain = false;
				} else {
					this.isGain = true;
				}
				if (this.isGain) {
					this.getList();
				}
				this.getUserSearchContent();
			})
			this.fastSearchKeWord()
		},
		//切换tabs 刷新页面
		onTabItemTap() {
			if (this.page_no > 1 || this.tabsActive !== 0 || this.collectList !== []) {
				this.tabsActive = 0;
				this.activeStateName = "未开始";
				this.chartPermissionName = "行业分类";
				this.activityTypeName = "活动类型";
				this.activeState = "1"; //活动进行状态
				this.activityTypeIds = ""; //活动类型id 多个用 , 隔开
				this.chartPermissionIds = ""; //行业id 多个用 , 隔开
				this.page_no = 1;
				this.collectList = [];
				this.spanIndex=[]
				this.keyWord= ''
				this.activityTimeList.forEach(key => {key.IsChoose=false})
				this.activityTimeStatus=''
				this.getList();
				this.getUserSearchContent();
			}

		},
		methods: {
			shareOption() {
				const arr = this.activeState.split(',').map(item => item - 0)
				this.listActivityStaus.forEach(item => {
					if (arr.indexOf(item.Id) !== -1) {
						item.IsChoose = true
					} else {
						item.IsChoose = false
					}
				})
				const arrTwo = this.activityTimeStatus.split(',').map(item => item - 0)
				this.activityTimeList.forEach(item => {
					if (arrTwo.indexOf(item.Id) !== -1) {
						item.IsChoose = true
					} else {
						item.IsChoose = false
					}
				})
				const hyarr = this.chartPermissionIds.split(',').map(item => item - 0)
				this.listChartPermission.forEach(key => {
					if (hyarr.indexOf(key.ChartPermissionId) !== -1) {
						key.IsChoose = true
					} else {
						key.IsChoose = false
					}
				})
				const lxarr = this.activityTypeIds.split(',').map(item => item - 0)
				this.listActivityType.forEach(key => {
					if (lxarr.indexOf(key.ActivityTypeId) !== -1) {
						key.IsChoose = true
					} else {
						key.IsChoose = false
					}
				})
				this.preserve()
			},
			fastSearchKeWord() {
				activity.fastSearchKeWord().then(res => {
					if (res.Ret !== 200) return
					this.dynamicList = res.Data.List || []
				})
			},
			//获取列表
			getList() {
				activity
					.getActivityList({
						PageSize: this.pageSize,
						CurrentIndex: this.page_no,
						ActiveState: this.activeState, //活动进行状态
						ActivityTypeIds: this.activityTypeIds, //活动类型id 多个用 , 隔开
						ChartPermissionIds: this.chartPermissionIds, //行业id 多个用 , 隔开
						IsShowJurisdiction: this.isId,
						KeyWord: this.keyWord,
						WhichDay: this.activityTimeStatus
					})
					.then((res) => {
						if (res.Ret !== 200) return;
						this.status =
							this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
						this.totalPage = res.Data.Paging.Pages; //总页数
						if (this.page_no === 1) {
							this.collectList = res.Data.List || [];
							this.haveData = this.collectList.length ? true : false;
							if (this.refresh) {
								uni.stopPullDownRefresh();
								this.refresh = false;
							}
						} else {
							this.collectList.push(...res.Data.List);
						}
					});
			},
			//我的日程
			getScheduleList() {
				activity
					.getScheduleList({
						PageSize: this.pageSize,
						CurrentIndex: this.page_no,
					})
					.then((res) => {
						if (res.Ret !== 200) return;
						this.status =
							this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
						this.totalPage = res.Data.Paging.Pages || ''; //总页数
						if (this.page_no === 1) {
							this.collectList = res.Data.List || [];
							this.haveData = this.collectList.length ? true : false;
							if (this.refresh) {
								uni.stopPullDownRefresh();
								this.refresh = false;
							}
						} else {
							this.collectList.push(...res.Data.List);
						}
					});
			},
			//获取活动详情接口
			getUserSearchContent(name) {
				activity
					.getUserSearchContent({
						IsShowJurisdiction: this.isId,
					})
					.then((res) => {
						this.isShowJurisdiction = res.Data.IsShowJurisdiction;
						this.listActivityStaus = res.Data.ListActivityStaus;
						this.listActivityType = res.Data.ListActivityType;
						this.listChartPermission = res.Data.ListChartPermission || [];
						this.listChartPermissionInit = res.Data.ListChartPermission2
						if (name == "traverse") {
							const hyArr = [];
							this.listChartPermission.forEach((key) => {
								if (key.IsChoose) {
									hyArr.push(key.ChartPermissionId);
								}
							});
							this.chartPermissionIds = hyArr.join(",");
						}
						if (this.isGain) {
							// this.preserve()
						} else {
							this.shareOption()
						}
					});


			},
			//头部tabs切换
			toggleTab(item, index) {
				if (this.tabsActive !== index) {
					this.tabsActive = index;
				}
				this.$store.dispatch('checkHandle').then(res => {
					app.globalData.isAuth = res.IsAuth;
					app.globalData.isBind = res.IsBind;
					if ((!res.IsAuth) && (!res.IsBind)) { //已授权已绑定
						this.page_no = 1;
						this.collectList = [];
						this.status = "loadmore";
						if (this.tabsActive == 0) {
							this.getList();
						} else {
							this.getScheduleList();
						}
					} else if (res.IsAuth) { //未授权
						this.tabsActive = 0
						uni.navigateTo({
							url: '/pages/authGuide/authGuide'
						})
					} else if (res.IsBind && !res.IsAuth) { //已授权未绑定
						this.tabsActive = 0
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				})

			},
			//取消弹框的确认事件
			cancelEnsure(obj, type, unm) {
				this.init()
				if (obj.name == "conference") return;
				if (this.tabsActive == 0) {
					if (obj.cutId == 0) return;
					if (type == 1) {
						this.collectList.forEach((item) => {
							if (obj.cutId == item.ActivityId) {
								item.IsSignup = obj.state;
								if (unm) {
									item.SignupNum = item.SignupNum - 1;
								} else {
									item.SignupNum = item.SignupNum + 1;
								}
							}
						});
					} else {
						this.collectList.forEach((item) => {
							if (obj.cutId == item.ActivityId) {
								item.IsSignup = obj.state;
								if (unm) {
									item.SignupNum = item.SignupNum - 1;
								} else {
									item.SignupNum = item.SignupNum + 1;
								}
							}
						});
					}
				} else {
					this.getScheduleList();
				}
			},
			//搜索事件
			goSearch() {
				this.public('show', true, "/activityPages/activitySearch/activitySearch")
			},
			//添加会议提醒接口
			meetingReminderAdd(id) {
				this.$store.dispatch("checkHandle").then((res) => {
					app.globalData.isAuth = res.IsAuth;
					app.globalData.isBind = res.IsBind;
				})
				if (app.globalData.isBind && !app.globalData.isAuth) {
					uni.navigateTo({
						url: "/pages/login/login",
					});
					return;
				} else if (app.globalData.isAuth) {
					uni.navigateTo({
						url: '/pages/authGuide/authGuide'
					})
					return
				}
				activity
					.meetingReminderAdd({
						ActivityId: id,
					})
					.then((res) => {
						if (res.Ret == 200) {
							this.hasPermission = res.Data.HasPermission;
							if (this.hasPermission == 1) {
								if (
									(res.Data.GoFollow && res.Data.SignupStatus !== "Success") ||
									!res.Data.GoFollow
								) {
									this.isShow = true;
								} else {
									this.goFollow = res.Data.GoFollow;
								}
								this.signupType = 999;
								this.signupStatus = res.Data.SignupStatus;
								this.idTypeCancel = {
									cutId: res.Data.ActivityId,
									state: 1,
									name: "conference",
								};
								this.collectList.forEach((item) => {
									if (id == item.ActivityId) {
										item.IsCancelMeetingReminder = 1;
									}
								});
							} else if (this.hasPermission == 2) {
								this.jurisdictionList.SellerMobile = res.Data.SellerMobile;
								this.jurisdictionList.PopupMsg = res.Data.PopupMsg;
								this.isShowhasPermission = true;
							} else if (this.hasPermission == 3 || this.hasPermission == 4) {
								this.jurisdictionList.PopupMsg = res.Data.PopupMsg;
								this.applyForIsShow = true;
							}
						}
					});
			},
			//取消会议提醒接口
			meetingReminderCancel(id) {
				activity
					.meetingReminderCancel({
						ActivityId: id,
					})
					.then((res) => {
						if (res.Ret == 200) {
							uni.showModal({
								confirmText: "知道了",
								confirmColor: "#3385FF",
								content: res.Msg,
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										this.collectList.forEach((item) => {
											if (id == item.ActivityId) {
												item.IsCancelMeetingReminder = 0;
											}
										});
									}
									if (this.tabsActive !== 0) {
										this.status = "loading";
										this.page_no = 1;
										this.getScheduleList();
									}
								},
							});
						}
					});
			},
			//遍历
			preserve() {
				const arr = []
				const str = []
				this.listActivityStaus.forEach(item => {
					if (item.IsChoose) {
						arr.push(item.Id)
						str.push(item.StatusName)
					}
				})
				if (str.length == this.listActivityStaus.length) {
					this.activeStateName = '所有状态'
				} else {
					this.activeStateName = str.join(',')
				}
				this.activeState = arr.join(',')
				const arrTwo = []
				this.activityTimeList.forEach(key => {
					if (key.IsChoose) {
						arrTwo.push(key.Id)
					}
				})
				this.activityTimeStatus = arrTwo.join(',')
				const hyArr = []
				const hyStr = []
				this.listChartPermission.forEach(key => {
					if (key.IsChoose) {
						hyArr.push(key.ChartPermissionId)
						hyStr.push(key.PermissionName)
					}
				})
				if (hyStr.length == this.listChartPermission.length && hyStr.length > 0) {
					this.chartPermissionName = '所有行业'
				} else if (hyStr.length <= 0) {
					this.chartPermissionName = '行业分类'
				} else {
					this.chartPermissionName = hyStr.join(',')
				}
				this.chartPermissionIds = hyArr.join(',')
				const lxArr = []
				const lxStr = []
				this.listActivityType.forEach(key => {
					if (key.IsChoose) {
						lxArr.push(key.ActivityTypeId)
						lxStr.push(key.ActivityTypeName)
					}
				})
				if (lxStr.length == this.listActivityType.length && lxStr.length > 0) {
					this.activityTypeName = '所有活动'
				} else if (lxStr.length <= 0) {
					this.activityTypeName = '活动类型'
				} else {
					this.activityTypeName = lxStr.join(',')
				}
				this.activityTypeIds = lxArr.join(',')
				this.getList()
			},
			//选择标签
			changeTarget(index, item) {
				let arrIndex = this.spanIndex.indexOf(index);
				if (arrIndex > -1) {
					this.spanIndex.splice(arrIndex, 1);
					this.dynamicLKeyWodr.splice(arrIndex, 1);
				} else {
					this.spanIndex.push(index);
					this.dynamicLKeyWodr.push(item.KeyWord)
				}
				this.keyWord = this.dynamicLKeyWodr.join(',')
				this.page_no = 1
				this.getList()
			},
		},
		onShow() {
			this.$store.dispatch("statistics",{PageType:'Activit'})
		},
		/**
		 * 用户点击分享
		 */
		onHide() {
			if (this.tabsActive !== 0) return
			this.selectComponent("#statusstate").toggle(false);
			this.selectComponent("#industry").toggle(false);
			this.selectComponent("#genre").toggle(false);
		},
		onShareAppMessage: function(res) {
			return {
				title: "活动",
				path: "/pages/activity/activity?statesId=" +
					this.activeState +
					"&typeIds=" +
					this.activityTypeIds +
					"&chartIds=" +
					this.chartPermissionIds +
					"&stateName=" +
					this.activeStateName +
					"&chartName=" +
					this.chartPermissionName +
					"&typeName=" +
					this.activityTypeName +
					"&tabs=" +
					this.tabsActive +
					"&timeStatus=" +
					this.activityTimeStatus +
					"&indexs=" + this.spanIndex +
					"&keys=" + this.keyWord,

				success: (res) => {},
				fail: (err) => {},
			};
		},
		/* 触底 */
		onReachBottom: Throttle(function() {
			if (this.status === "nomore") return;
			this.status = "loading";
			this.page_no++;
			if (this.tabsActive == 0) {
				this.getList();
			} else {
				this.getScheduleList();
			}
		}),
		/* 下拉刷新 */
		onPullDownRefresh: Throttle(function() {
			this.page_no = 1;
			this.refresh = true;
			if (this.tabsActive == 0) {
				this.getList();
			} else {
				this.getScheduleList();
			}
		})
	};
</script>

<style scoped lang="scss">
	@import "../../activityPages/index.scss";

	.box-content {
		padding: 0rpx 34rpx 20rpx !important;
	}

	.dynamic-content {
		padding: 90rpx 30rpx 10rpx;
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		border-bottom: 3px solid #F7F7F7;

		.target-title {
			padding: 5rpx 20rpx 4rpx 5rpx;
			border-radius: 20rpx;
			margin: 15rpx 20rpx 15rpx 0;
			font-size: 30rpx;
			color: #2C83FF;

		}

		.target-item {
			padding: 5rpx 20rpx;
			color: #2C83FF;
			font-size: 30rpx;
			font-weight: 400;
			font-family: PingFang SC;
			background-color: #EBF4FF;
			margin: 15rpx 20rpx 15rpx 0;
			border-radius: 27rpx;
		}

		.target-search {
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.bgcolor {
			background-color: #3385FF !important;
			color: #fff !important;

		}
	}

	.select-sticky {
		position: sticky !important;
		width: 100%;
		top: 78rpx;
		z-index: 9999;
		background-color: #fff;

		.select-conyent {
			padding: 0 30rpx;

			.decide {
				background-color: #F8F8FA;
				display: flex;
				align-items: center;
				margin: 0 auto;
				height: 110rpx;
				width: 100%;
				padding-left: 30rpx;
			}

			.items-box {
				width: 40rpx;
			}

			.menu-items {
				background-color: #F8F8FA;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				padding: 30rpx 30rpx 0;

				.menu-items-box {
					display: flex;
					width: 50%;
					font-size: 28rpx;
					font-weight: 400;
					margin-bottom: 40rpx;

				}
			}

			.replacement-box {
				background-color: #fff;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
			}

			.replacement {
				margin: 0rpx 30rpx 20rpx;
				display: flex;
				background-color: #2C83FF;
				opacity: 1;
				height: 60rpx;
				line-height: 58rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				border-radius: 30rpx;

				text {
					flex: 1;
					text-align: center;

				}

				.replacement-box {
					border: 1rpx solid #2C83FF;
					opacity: 1;
					color: #2C83FF;
					background: #FFFFFF;
					border-radius: 28rpx 0rpx 28rpx 28rpx;
				}
			}
		}
	}

	.activity-content .nodata {
		padding-top: 80rpx !important;
	}

	.activity-content .nodataTwo {
		padding-top: 280rpx !important;
	}
</style>