景徳镇旅游微信小程序
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.

245 lines
5.1 KiB

8 months ago
8 months ago
8 months ago
8 months ago
  1. <template>
  2. <!-- 达人和讲述 -->
  3. <view class="tell">
  4. <navbar :title="dict.title" leftClick @leftClick="$utils.navigateBack" />
  5. <view class="tell-top" v-if="dict.screen">
  6. <!-- <view>级别</view>
  7. <view>遗产点</view> -->
  8. <uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#B12026"
  9. :extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
  10. :extra-active-icon="{name:'arrow-up-fill',color:'#B12026',size:'26rpx'}"
  11. :defaultValue="defaultValue"
  12. :custom-style="{padding: '0 auto'}"
  13. @click="selectMenu">
  14. <uv-drop-down-item name="level" type="2"
  15. :label="dropItem('level').label"
  16. :value="dropItem('level').value">
  17. </uv-drop-down-item>
  18. <uv-drop-down-item name="spot" type="2"
  19. :label="dropItem('spot').label"
  20. :value="dropItem('spot').value">
  21. </uv-drop-down-item>
  22. </uv-drop-down>
  23. <uv-drop-down-popup
  24. sign="dropDown_1"
  25. :click-overlay-on-close="true"
  26. :currentDropItem="currentDropItem"
  27. @clickItem="clickItem"
  28. @popupChange="change"
  29. ></uv-drop-down-popup>
  30. </view>
  31. <cardList :type="type" :result="result" :dict="dict" ref="cardList" :showRoleLevel="dict.showRoleLevel" />
  32. <tabber />
  33. </view>
  34. </template>
  35. <script>
  36. import cardList from '../components/list/cardList.vue'
  37. import { mapState } from 'vuex'
  38. export default {
  39. components: {
  40. cardList
  41. },
  42. data() {
  43. return {
  44. type: '',
  45. dict: {},
  46. // 表示value等于这些值,就属于默认值
  47. defaultValue: [0, 'all'],
  48. // 筛选结果
  49. result: [],
  50. activeName: 'level',
  51. level: {
  52. label: '级别',
  53. value: 0,
  54. activeIndex: 0,
  55. color: '#333',
  56. activeColor: '#B12026',
  57. child: [
  58. {
  59. label: '全部',
  60. value: 0,
  61. },
  62. {
  63. label: '金牌讲解员',
  64. value: 1
  65. },
  66. {
  67. label: '专业讲解员',
  68. value: 2
  69. },
  70. ]
  71. },
  72. spot: {
  73. label: '遗产点',
  74. value: 'all',
  75. activeIndex: 0,
  76. color: '#333',
  77. activeColor: '#B12026',
  78. child: [
  79. {
  80. label: '全部',
  81. value: 'all'
  82. },
  83. ]
  84. },
  85. }
  86. },
  87. computed: {
  88. dropItem(name) {
  89. return (name) => {
  90. const result = {};
  91. const find = this.result.find(item => item.name === name);
  92. if (find) {
  93. result.label = find.label;
  94. result.value = find.value;
  95. } else {
  96. result.label = this[name].label;
  97. result.value = this[name].value;
  98. }
  99. return result;
  100. }
  101. },
  102. // 获取当前下拉筛选项
  103. currentDropItem() {
  104. return this[this.activeName];
  105. },
  106. ...mapState(['spotList']),
  107. },
  108. onLoad(args) {
  109. this.type = args.type
  110. this.dict = this.$config.dict[args.type]
  111. },
  112. onShow() {
  113. this.$nextTick(() => {
  114. this.$refs.cardList.getList()
  115. })
  116. let list = this.spotList
  117. .filter(n => n.categoryId == 0)
  118. .map(n => {
  119. return {
  120. label : n.spotName,
  121. value : n.id
  122. }
  123. })
  124. //设置遗产点
  125. this.spot.child = [
  126. {
  127. label: '全部',
  128. value: 'all'
  129. },
  130. ...list
  131. ]
  132. },
  133. onPullDownRefresh() {
  134. this.$refs.cardList.getList()
  135. },
  136. //滚动到屏幕底部
  137. onReachBottom() {
  138. this.$refs.cardList.loadMoreList()
  139. },
  140. methods: {
  141. change(e) {
  142. },
  143. /**
  144. * 点击每个筛选项回调
  145. * @param {Object} e { name, active, type } = e
  146. */
  147. selectMenu(e) {
  148. const {
  149. name,
  150. active,
  151. type
  152. } = e;
  153. this.activeName = name;
  154. const find = this.result.find(item => item.name == this.activeName);
  155. if (find) {
  156. const findIndex = this[this.activeName]
  157. .child.findIndex(item => item.label == find.label && item
  158. .value == find.value);
  159. this[this.activeName].activeIndex = findIndex;
  160. } else {
  161. this[this.activeName].activeIndex = 0;
  162. }
  163. },
  164. /**
  165. * 点击菜单回调处理
  166. * @param {Object} item 选中项 { label,value } = e
  167. */
  168. clickItem(e) {
  169. // 下面有重新赋值,所以用let
  170. let {
  171. label,
  172. value
  173. } = e;
  174. const findIndex = this.result.findIndex(item => item.name == this.activeName);
  175. if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
  176. label = this[this.activeName].label;
  177. }
  178. // 已经存在筛选项
  179. if (findIndex > -1) {
  180. this.$set(this.result, findIndex, {
  181. name: this.activeName,
  182. label,
  183. value
  184. })
  185. } else {
  186. this.result.push({
  187. name: this.activeName,
  188. label,
  189. value
  190. });
  191. }
  192. this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
  193. // uni.showModal({
  194. // content: `筛选的值:${JSON.stringify(this.result)}`
  195. // })
  196. this.$nextTick(() => {
  197. this.$refs.cardList.getList()
  198. })
  199. }
  200. }
  201. }
  202. </script>
  203. <style scoped lang="scss">
  204. .tell {
  205. /deep/ .uv-drop-down{
  206. justify-content: space-around;
  207. width: 750rpx;
  208. }
  209. .tell-top {
  210. display: flex;
  211. justify-content: left;
  212. align-items: center;
  213. height: 80rpx;
  214. background-color: #fff;
  215. border-top: 2rpx solid #D0D0D0;
  216. border-bottom: 2rpx solid #D0D0D0;
  217. view {
  218. flex: 1;
  219. margin-left: 5%;
  220. }
  221. }
  222. }
  223. </style>