推广小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

268 lines
7.8 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <template>
  2. <view class="travelList">
  3. <view class="head-box"></view>
  4. <Navbar title="旅行列表" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
  5. <view class="content contentPosition_">
  6. <view class="drop">
  7. <uv-drop-down
  8. ref="dropDown"
  9. text-color="#fff"
  10. text-size="30rpx"
  11. sign="dropDown_1"
  12. text-active-color="#fff"
  13. :extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
  14. :extra-active-icon="{name:'arrow-up-fill',color:'#fff',size:'26rpx'}"
  15. :defaultValue="defaultValue"
  16. :custom-style="{padding: '0 30rpx'}"
  17. @click="selectMenu"
  18. >
  19. <uv-drop-down-item
  20. name="order"
  21. type="2"
  22. :label="dropItem('order').label"
  23. :value="dropItem('order').value">
  24. </uv-drop-down-item>
  25. <uv-drop-down-item
  26. name="type"
  27. type="2"
  28. :label="dropItem('type').label"
  29. :value="dropItem('type').value">
  30. </uv-drop-down-item>
  31. </uv-drop-down>
  32. <uv-drop-down-popup
  33. sign="dropDown_1"
  34. :click-overlay-on-close="true"
  35. :currentDropItem="currentDropItem"
  36. @clickItem="clickItem"
  37. @popupChange="change"
  38. ></uv-drop-down-popup>
  39. </view>
  40. <view class="info cardStyle_" v-for="(item, index) in cardListData" :key="index" @click="toDetail(item)">
  41. <view class="left">
  42. <image :src="item.image" alt="">
  43. </view>
  44. <view class="right">
  45. <view class="detailed">
  46. <view class="title">{{item.title}}</view>
  47. <view class="date">{{item.startTime}}</view>
  48. <view class="address">{{item.address}}</view>
  49. </view>
  50. <view class="data">
  51. <text>¥{{item.price}}</text>
  52. <text>{{item.num}}/{{item.sum}}</text>
  53. <text class="btn" v-if="item.state == 0">报名中</text>
  54. <text class="btn-2" v-if="item.state == 1">已结束</text>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. </template>
  61. <script>
  62. import Navbar from '@/pages/components/Navbar.vue'
  63. import { globalMixin } from '../pages/mixins/globalMixin';
  64. export default{
  65. onPageScroll() {
  66. // 滚动后及时更新位置
  67. this.$refs.dropDown.init();
  68. },
  69. mixins: [globalMixin],
  70. components:{
  71. Navbar
  72. },
  73. computed: {
  74. dropItem(name) {
  75. return (name) => {
  76. const result = {};
  77. const find = this.result.find(item => item.name === name);
  78. if (find) {
  79. result.label = find.label;
  80. result.value = find.value;
  81. } else {
  82. result.label = this[name].label;
  83. result.value = this[name].value;
  84. }
  85. return result;
  86. }
  87. },
  88. // 获取当前下拉筛选项
  89. currentDropItem() {
  90. return this[this.activeName];
  91. }
  92. },
  93. data() {
  94. return {
  95. params:{
  96. pageNo:1,
  97. pageSize:10
  98. },
  99. totalPage: '',
  100. cardListData: [],
  101. // 表示value等于这些值,就属于默认值
  102. defaultValue: [0, 'all', '0'],
  103. // 筛选结果
  104. result: [{ name: 'order', label: '全部', value: 'new' }],
  105. // { name: 'order', label: '最新发布', value: 'new' }
  106. activeName: 'order',
  107. order: {
  108. label: '全部',
  109. value: 'all',
  110. activeIndex: 0,
  111. color: '#333',
  112. activeColor: '#FF4546',
  113. child: [{
  114. label: '综合排序',
  115. value: 'all'
  116. }, {
  117. label: '最新发布',
  118. value: 'new'
  119. }, {
  120. label: '低价优先',
  121. value: 'money'
  122. }]
  123. },
  124. type: {
  125. label: '时间',
  126. value: 'all',
  127. activeIndex: 0,
  128. color: '#333',
  129. activeColor: '#FF4546',
  130. child: [{
  131. label: '全部',
  132. value: 'all'
  133. }, {
  134. label: 'PDF',
  135. value: 'pdf'
  136. }, {
  137. label: 'WROD',
  138. value: 'word'
  139. }, {
  140. label: 'PPT',
  141. value: 'ppt'
  142. }]
  143. }
  144. }
  145. },
  146. onReachBottom() {
  147. if(this.params.pageNo >= this.totalPage) return
  148. this.params.pageNo ++
  149. this.travelPageList()
  150. },
  151. onLoad() {
  152. this.travelPageList()
  153. },
  154. methods: {
  155. travelPageList() {
  156. this.$api('travelPageList',this.params, res=> {
  157. if(res.code == 200) {
  158. this.totalPage = res.result.pages
  159. this.cardListData = [...this.cardListData,...res.result.records]
  160. }
  161. })
  162. },
  163. toDetail({ id }) {
  164. uni.navigateTo({
  165. url:`/pages_order/lvyou-detail?travelId=${id}`
  166. })
  167. },
  168. change(e) {
  169. console.log('弹窗打开状态:',e);
  170. },
  171. /**
  172. * 点击每个筛选项回调
  173. * @param {Object} e { name, active, type } = e
  174. */
  175. selectMenu(e) {
  176. const { name, active, type } = e;
  177. this.activeName = name;
  178. // type 等于1 的需要特殊处理:type不等于1可以忽略
  179. if (type == 1) {
  180. this.clickItem({
  181. name: 'vip_type',
  182. label: 'VIP文档',
  183. value: e.active ? 1 : 0
  184. });
  185. } else {
  186. const find = this.result.find(item => item.name == this.activeName);
  187. if (find) {
  188. const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value == find.value);
  189. this[this.activeName].activeIndex = findIndex;
  190. } else {
  191. this[this.activeName].activeIndex = 0;
  192. }
  193. }
  194. },
  195. /**
  196. * 点击菜单回调处理
  197. * @param {Object} item 选中项 { label,value } = e
  198. */
  199. clickItem(e) {
  200. // 下面有重新赋值,所以用let
  201. let { label, value } = e;
  202. const findIndex = this.result.findIndex(item => item.name == this.activeName);
  203. if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
  204. label = this[this.activeName].label;
  205. }
  206. // 已经存在筛选项
  207. if (findIndex > -1) {
  208. this.$set(this.result, findIndex, {
  209. name: this.activeName,
  210. label,
  211. value
  212. })
  213. } else {
  214. this.result.push({
  215. name: this.activeName,
  216. label,
  217. value
  218. });
  219. }
  220. this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
  221. uni.showModal({
  222. content: `筛选的值:${JSON.stringify(this.result)}`
  223. })
  224. }
  225. }
  226. }
  227. </script>
  228. <style scoped lang="scss">
  229. /deep/.uv-sticky__content{
  230. .uv-drop-down {
  231. justify-content: normal;
  232. border: 0;
  233. background: transparent;
  234. }
  235. }
  236. .travelList {
  237. // margin-bottom: 500rpx;
  238. .content {
  239. .info {
  240. position: relative;
  241. margin: 10rpx 32rpx 36rpx;;
  242. padding: 35rpx 0 35rpx 24rpx;
  243. border-radius: 26rpx;
  244. .right {
  245. .data {
  246. display: flex;
  247. justify-content: space-between;
  248. align-items: center;
  249. .btn {
  250. background: #381615;
  251. color: $uni-color-primary;
  252. padding: 10rpx 40rpx;
  253. border-radius: 30rpx 0px 0px 30rpx;
  254. }
  255. .btn-2 {
  256. color: $uni-color-primary;
  257. padding: 10rpx 40rpx;
  258. border-radius: 30rpx 0px 0px 30rpx;
  259. }
  260. }
  261. }
  262. }
  263. }
  264. }
  265. </style>