|
@@ -1,176 +1,184 @@
|
|
|
<template>
|
|
|
- <view class="purchaser-activity-container">
|
|
|
- <view class="search-bar">
|
|
|
- <text v-for="item in activityTimeList" :key="item.Id" :class="item.IsChoose ? 'active' : ''"
|
|
|
- @click="isActivityDate(item.Id)">{{ item.StatusName }}</text>
|
|
|
- <text v-for="item in activityTypeList" :key="item.Id" :class="item.IsChoose ? 'active' : ''"
|
|
|
- @click="isActivityType(item.Id)">{{ item.StatusName }}</text>
|
|
|
- </view>
|
|
|
- <view class="purchaser-activity-list">
|
|
|
- <purchaserActivityList style="width: 682rpx;" ref="purchaserActivityListRef" :whichDay="whichDay"
|
|
|
- :typeName="typeName">
|
|
|
- <view class="no-data-box">
|
|
|
- <view class="no-data">
|
|
|
- <image src="https://hzstatic.hzinsights.com/cygx/icon/activity-no-data.png" ></image>
|
|
|
- <text>暂无对应活动</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </purchaserActivityList>
|
|
|
- </view>
|
|
|
- <Loading />
|
|
|
- </view>
|
|
|
+ <view class="purchaser-activity-container">
|
|
|
+ <view class="search-bar">
|
|
|
+ <view>
|
|
|
+ <text v-for="item in activityTimeList" :key="item.Id" :class="item.IsChoose ? 'active' : ''" @click="isActivityDate(item.Id)">
|
|
|
+ {{ item.StatusName }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="type-box">
|
|
|
+ <text v-for="item in activityTypeList" :key="item.ActivityTypeId" :class="item.IsChoose ? 'active' : ''" @click="isActivityType(item)">
|
|
|
+ {{ item.ActivityTypeName }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="purchaser-activity-list">
|
|
|
+ <purchaserActivityList style="width: 682rpx" ref="purchaserActivityListRef" :whichDay="whichDay" :typeName="typeName">
|
|
|
+ <view class="no-data-box">
|
|
|
+ <view class="no-data">
|
|
|
+ <image src="https://hzstatic.hzinsights.com/cygx/icon/activity-no-data.png"></image>
|
|
|
+ <text>暂无对应活动</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </purchaserActivityList>
|
|
|
+ </view>
|
|
|
+ <Loading />
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import purchaserActivityList from "@/components/activity/purchaserActivityList.vue"
|
|
|
- import { Throttle } from "@/config/util.js";
|
|
|
- import { activity } from "@/config/api";
|
|
|
-
|
|
|
- export default {
|
|
|
- components:{purchaserActivityList},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- activityTimeList: [
|
|
|
- { Id: 1, IsChoose: false, StatusName: "今日活动" },
|
|
|
- { Id: 2, IsChoose: false, StatusName: "明日活动" },
|
|
|
- ],
|
|
|
- activityTypeList: [
|
|
|
- { Id: 3, IsChoose: false, StatusName: "公司调研电话会" }
|
|
|
- ],
|
|
|
- whichDay:'',
|
|
|
- typeName:''
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 今日明日的点击事件
|
|
|
- isActivityDate(id) {
|
|
|
- this.activityTimeList.forEach((item) => {
|
|
|
- if (item.Id == id) item.IsChoose = !item.IsChoose;
|
|
|
- });
|
|
|
- const arr = [];
|
|
|
- this.activityTimeList.forEach((item) => item.IsChoose && arr.push(item.Id));
|
|
|
- this.whichDay = arr.join(",");
|
|
|
- this.typeName=""
|
|
|
- this.activityTypeList.map(item =>{
|
|
|
- item.IsChoose=false
|
|
|
- })
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.$refs.purchaserActivityListRef.reloadActivityList();
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- isActivityType(id){
|
|
|
- this.activityTypeList.forEach((item) => {
|
|
|
- if (item.Id == id) item.IsChoose = !item.IsChoose;
|
|
|
- });
|
|
|
- const arr = [];
|
|
|
- this.activityTypeList.forEach((item) => item.IsChoose && arr.push(item.Id));
|
|
|
- this.typeName = arr.join(",");
|
|
|
- this.whichDay=""
|
|
|
- this.activityTimeList.map(item =>{
|
|
|
- item.IsChoose=false
|
|
|
- })
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.$refs.purchaserActivityListRef.reloadActivityList();
|
|
|
- })
|
|
|
- },
|
|
|
- loadShare(option){
|
|
|
- // if(!option) return
|
|
|
- this.whichDay = option.whichDay || ""
|
|
|
- let whichDayArr = this.whichDay.split(',')
|
|
|
- this.typeName = option.typeName || ""
|
|
|
- let typeNameArr = this.typeName.split(',')
|
|
|
- this.activityTimeList.map(item =>{
|
|
|
- item.IsChoose= whichDayArr.includes(item.Id+'')
|
|
|
- })
|
|
|
- this.activityTypeList.forEach((item) => {
|
|
|
- item.IsChoose= typeNameArr.includes(item.Id+'')
|
|
|
- });
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.$refs.purchaserActivityListRef.reloadActivityList();
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- /** 用户点击分享 */
|
|
|
- onShareAppMessage: function (res) {
|
|
|
- return {
|
|
|
- title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : "近期所有研选活动预告",
|
|
|
- path: "/pages-purchaser/purchaserActivity/purchaserActivity?whichDay=" + this.whichDay + "&typeName=" + this.typeName,
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.loadShare(option);
|
|
|
- },
|
|
|
- onReachBottom: Throttle(function () {
|
|
|
- if (this.$refs.purchaserActivityListRef.page_no >= this.$refs.purchaserActivityListRef.pages) return;
|
|
|
- this.$refs.purchaserActivityListRef.loadActivityMore();
|
|
|
- }),
|
|
|
- }
|
|
|
+import purchaserActivityList from "@/components/activity/purchaserActivityList.vue";
|
|
|
+import { Throttle } from "@/config/util.js";
|
|
|
+import { activity, purchaserApi } from "@/config/api";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { purchaserActivityList },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activityTimeList: [
|
|
|
+ { Id: 1, IsChoose: false, StatusName: "今日活动" },
|
|
|
+ { Id: 2, IsChoose: false, StatusName: "明日活动" },
|
|
|
+ ],
|
|
|
+ activityTypeList: [],
|
|
|
+ whichDay: "",
|
|
|
+ typeName: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 今日明日的点击事件
|
|
|
+ isActivityDate(id) {
|
|
|
+ this.activityTimeList.forEach((item) => {
|
|
|
+ if (item.Id == id) item.IsChoose = !item.IsChoose;
|
|
|
+ });
|
|
|
+ const arr = [];
|
|
|
+ this.activityTimeList.forEach((item) => item.IsChoose && arr.push(item.Id));
|
|
|
+ this.whichDay = arr.join(",");
|
|
|
+ // this.activityTypeList.map((item) => {
|
|
|
+ // item.IsChoose = false;
|
|
|
+ // });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.purchaserActivityListRef.reloadActivityList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ isActivityType(_item) {
|
|
|
+ _item.IsChoose = !_item.IsChoose;
|
|
|
+ const arr = [];
|
|
|
+ this.activityTypeList.forEach((item) => item.IsChoose && arr.push(item.ActivityTypeId));
|
|
|
+ this.typeName = arr.join(",");
|
|
|
+ // this.activityTimeList.map((item) => {
|
|
|
+ // item.IsChoose = false;
|
|
|
+ // });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.purchaserActivityListRef.reloadActivityList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadShare(option) {
|
|
|
+ // if(!option) return
|
|
|
+ this.whichDay = option.whichDay || "";
|
|
|
+ let whichDayArr = this.whichDay.split(",");
|
|
|
+ this.typeName = option.typeName || "";
|
|
|
+ let typeNameArr = this.typeName.split(",");
|
|
|
+ this.activityTimeList.map((item) => {
|
|
|
+ item.IsChoose = whichDayArr.includes(item.Id + "");
|
|
|
+ });
|
|
|
+ this.activityTypeList.forEach((item) => {
|
|
|
+ item.IsChoose = typeNameArr.includes(item.Id + "");
|
|
|
+ });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.purchaserActivityListRef.reloadActivityList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async getActivityTypelist() {
|
|
|
+ const res = await purchaserApi.getActivityTypelist({ IsResearch: true });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.activityTypeList = res.Data.List || [];
|
|
|
+ }
|
|
|
+ console.log(res);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ /** 用户点击分享 */
|
|
|
+ onShareAppMessage: function (res) {
|
|
|
+ return {
|
|
|
+ title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : "近期所有研选活动预告",
|
|
|
+ path: "/pages-purchaser/purchaserActivity/purchaserActivity?whichDay=" + this.whichDay + "&typeName=" + this.typeName,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.loadShare(option);
|
|
|
+ this.getActivityTypelist();
|
|
|
+ },
|
|
|
+ onReachBottom: Throttle(function () {
|
|
|
+ if (this.$refs.purchaserActivityListRef.page_no >= this.$refs.purchaserActivityListRef.pages) return;
|
|
|
+ this.$refs.purchaserActivityListRef.loadActivityMore();
|
|
|
+ }),
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .purchaser-activity-container{
|
|
|
- background-color: $uni-bg-color;
|
|
|
- min-height: 100vh;
|
|
|
- // height: 100vh;
|
|
|
- .search-bar{
|
|
|
- width: 100vw;
|
|
|
- height: 82rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 34rpx;
|
|
|
- background-color: white;
|
|
|
- position: sticky;
|
|
|
- top: 0;
|
|
|
- text {
|
|
|
- // width: 136rpx;
|
|
|
- min-width: 136rpx;
|
|
|
- padding: 4rpx 20rpx;
|
|
|
- height: 42rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 34rpx;
|
|
|
- background-color: #f8f8fa;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 44rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- .active {
|
|
|
- background-color: #376cbb;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .purchaser-activity-list{
|
|
|
- padding: 20rpx 34rpx 36rpx;
|
|
|
- .no-data-box{
|
|
|
- width: 682rpx;
|
|
|
- // height: 100%;
|
|
|
- border-radius: 16rpx;
|
|
|
- background-color: white;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .no-data{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: calc(100vh - 138rpx);
|
|
|
- image{
|
|
|
- width: 412rpx;
|
|
|
- height: 380rpx;
|
|
|
- margin-bottom: 40rpx;
|
|
|
- }
|
|
|
- text{
|
|
|
- font-size: 24rpx;
|
|
|
- line-height: 34rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+.purchaser-activity-container {
|
|
|
+ background-color: $uni-bg-color;
|
|
|
+ min-height: 100vh;
|
|
|
+ .search-bar {
|
|
|
+ width: 100vw;
|
|
|
+ view {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .type-box {
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+ padding: 0 34rpx 5rpx;
|
|
|
+ background-color: white;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ text {
|
|
|
+ padding: 4rpx 20rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 34rpx;
|
|
|
+ background-color: #f8f8fa;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background-color: #376cbb;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .purchaser-activity-list {
|
|
|
+ padding: 20rpx 34rpx 36rpx;
|
|
|
+ .no-data-box {
|
|
|
+ width: 682rpx;
|
|
|
+ // height: 100%;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background-color: white;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .no-data {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: calc(100vh - 138rpx);
|
|
|
+ image {
|
|
|
+ width: 412rpx;
|
|
|
+ height: 380rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 34rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|