purchaserActivity.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <template>
  2. <view class="purchaser-activity-container">
  3. <view class="search-bar">
  4. <view>
  5. <text v-for="item in activityTimeList" :key="item.Id" :class="item.IsChoose ? 'active' : ''" @click="isActivityDate(item.Id)">
  6. {{ item.StatusName }}
  7. </text>
  8. </view>
  9. <view class="type-box">
  10. <text v-for="item in activityTypeList" :key="item.ActivityTypeId" :class="item.IsChoose ? 'active' : ''" @click="isActivityType(item)">
  11. {{ item.ActivityTypeName }}
  12. </text>
  13. </view>
  14. </view>
  15. <view class="purchaser-activity-list">
  16. <purchaserActivityList style="width: 682rpx" ref="purchaserActivityListRef" :whichDay="whichDay" :typeName="typeName">
  17. <view class="no-data-box">
  18. <view class="no-data">
  19. <image src="https://hzstatic.hzinsights.com/cygx/icon/activity-no-data.png"></image>
  20. <text>暂无对应活动</text>
  21. </view>
  22. </view>
  23. </purchaserActivityList>
  24. </view>
  25. <Loading />
  26. </view>
  27. </template>
  28. <script>
  29. import purchaserActivityList from "@/components/activity/purchaserActivityList.vue";
  30. import { Throttle } from "@/config/util.js";
  31. import { activity, purchaserApi } from "@/config/api";
  32. export default {
  33. components: { purchaserActivityList },
  34. data() {
  35. return {
  36. activityTimeList: [
  37. { Id: 1, IsChoose: false, StatusName: "今日活动" },
  38. { Id: 2, IsChoose: false, StatusName: "明日活动" },
  39. ],
  40. activityTypeList: [],
  41. whichDay: "",
  42. typeName: "",
  43. };
  44. },
  45. methods: {
  46. // 今日明日的点击事件
  47. isActivityDate(id) {
  48. this.activityTimeList.forEach((item) => {
  49. if (item.Id == id) item.IsChoose = !item.IsChoose;
  50. });
  51. const arr = [];
  52. this.activityTimeList.forEach((item) => item.IsChoose && arr.push(item.Id));
  53. this.whichDay = arr.join(",");
  54. // this.activityTypeList.map((item) => {
  55. // item.IsChoose = false;
  56. // });
  57. this.$nextTick(() => {
  58. this.$refs.purchaserActivityListRef.reloadActivityList();
  59. });
  60. },
  61. isActivityType(_item) {
  62. _item.IsChoose = !_item.IsChoose;
  63. const arr = [];
  64. this.activityTypeList.forEach((item) => item.IsChoose && arr.push(item.ActivityTypeId));
  65. this.typeName = arr.join(",");
  66. // this.activityTimeList.map((item) => {
  67. // item.IsChoose = false;
  68. // });
  69. this.$nextTick(() => {
  70. this.$refs.purchaserActivityListRef.reloadActivityList();
  71. });
  72. },
  73. loadShare(option) {
  74. // if(!option) return
  75. this.whichDay = option.whichDay || "";
  76. let whichDayArr = this.whichDay.split(",");
  77. this.typeName = option.typeName || "";
  78. let typeNameArr = this.typeName.split(",");
  79. this.activityTimeList.map((item) => {
  80. item.IsChoose = whichDayArr.includes(item.Id + "");
  81. });
  82. this.activityTypeList.forEach((item) => {
  83. item.IsChoose = typeNameArr.includes(item.Id + "");
  84. });
  85. this.$nextTick(() => {
  86. this.$refs.purchaserActivityListRef.reloadActivityList();
  87. });
  88. },
  89. async getActivityTypelist() {
  90. const res = await purchaserApi.getActivityTypelist({ IsResearch: true });
  91. if (res.Ret === 200) {
  92. this.activityTypeList = res.Data.List || [];
  93. }
  94. },
  95. },
  96. /** 用户点击分享 */
  97. onShareAppMessage: function (res) {
  98. return {
  99. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : "近期所有研选活动预告",
  100. path: "/pages-purchaser/purchaserActivity/purchaserActivity?whichDay=" + this.whichDay + "&typeName=" + this.typeName,
  101. };
  102. },
  103. onLoad(option) {
  104. this.loadShare(option);
  105. this.getActivityTypelist();
  106. },
  107. onReachBottom: Throttle(function () {
  108. if (this.$refs.purchaserActivityListRef.page_no >= this.$refs.purchaserActivityListRef.pages) return;
  109. this.$refs.purchaserActivityListRef.loadActivityMore();
  110. }),
  111. };
  112. </script>
  113. <style lang="scss" scoped>
  114. .purchaser-activity-container {
  115. background-color: $uni-bg-color;
  116. min-height: 100vh;
  117. .search-bar {
  118. width: 100vw;
  119. view {
  120. display: flex;
  121. align-items: center;
  122. margin-bottom: 20rpx;
  123. }
  124. .type-box {
  125. overflow: hidden;
  126. overflow-x: auto;
  127. }
  128. padding: 0 34rpx 5rpx;
  129. background-color: white;
  130. position: sticky;
  131. top: 0;
  132. text {
  133. padding: 4rpx 20rpx;
  134. height: 42rpx;
  135. text-align: center;
  136. line-height: 34rpx;
  137. background-color: #f8f8fa;
  138. box-sizing: border-box;
  139. border-radius: 44rpx;
  140. margin-right: 20rpx;
  141. font-size: 24rpx;
  142. white-space: nowrap;
  143. }
  144. .active {
  145. background-color: #376cbb;
  146. color: #fff;
  147. }
  148. }
  149. .purchaser-activity-list {
  150. padding: 20rpx 34rpx 36rpx;
  151. .no-data-box {
  152. width: 682rpx;
  153. // height: 100%;
  154. border-radius: 16rpx;
  155. background-color: white;
  156. display: flex;
  157. flex-direction: column;
  158. align-items: center;
  159. justify-content: center;
  160. .no-data {
  161. display: flex;
  162. flex-direction: column;
  163. align-items: center;
  164. justify-content: center;
  165. height: calc(100vh - 138rpx);
  166. image {
  167. width: 412rpx;
  168. height: 380rpx;
  169. margin-bottom: 40rpx;
  170. }
  171. text {
  172. font-size: 24rpx;
  173. line-height: 34rpx;
  174. color: #999999;
  175. }
  176. }
  177. }
  178. }
  179. }
  180. </style>