瑶都万能墙
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.

234 lines
5.6 KiB

7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
  1. <template>
  2. <view class="page pageList">
  3. <navbar title="景点" bgColor="#5baaff" color="#fff" leftClick @leftClick="$utils.navigateBack" />
  4. <view class="top-bg"></view>
  5. <view style="padding: 10rpx 30rpx 0 30rpx;">
  6. <uv-search bgColor="#fff" @search="getData" :showAction="false" searchIconSize="30rpx"
  7. placeholder="请输入搜索关键字..." v-model="queryParams.title"></uv-search>
  8. <screenSearch @clickItem="clickItem" />
  9. </view>
  10. <!-- <view class="">
  11. <screenRen @clickItem="clickItem" />
  12. </view> -->
  13. <view class="waterfall" v-for="(item,index) in list"
  14. :key="index"
  15. @click="$utils.navigateTo('/pages_order/scenicSpot/scenicSpotDetail?id=' + item.id)">
  16. <view class="images">
  17. <image :src="item.titleImage" mode="aspectFill"></image>
  18. <view class="scenicspot">
  19. 景点
  20. </view>
  21. </view>
  22. <view class="font">
  23. {{item.name}}
  24. </view>
  25. </view>
  26. <!-- <uv-waterfall ref="waterfall" v-model="list"
  27. :add-time="10"
  28. :left-gap="leftGap"
  29. :right-gap="rightGap"
  30. :column-gap="columnGap"
  31. @changeList="changeList"> -->
  32. <!-- 第一列数据 -->
  33. <!-- <template v-slot:list1> -->
  34. <!-- 为了磨平部分平台的BUG必须套一层view -->
  35. <!-- <view>
  36. <view v-for="(item, index) in list1" :key="item.id" class="waterfall-item"
  37. @click="$utils.navigateTo('/pages_order/scenicSpot/scenicSpotDetail?id=' + item.id)">
  38. <view class="waterfall-item__image" :style="[imageStyle(item)]">
  39. <image :src="item.titleImage" mode="widthFix" :style="{width:item.width+'px'}"></image>
  40. </view>
  41. <view class="waterfall-item__ft">
  42. <view class="waterfall-item__ft__title">
  43. <text class="value">{{item.name}}</text>
  44. </view>
  45. <view class="waterfall-item__ft__desc uv-line-2">
  46. <text class="value">{{item.address}}</text>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </template> -->
  52. <!-- 第二列数据 -->
  53. <!-- <template v-slot:list2> -->
  54. <!-- 为了磨平部分平台的BUG必须套一层view -->
  55. <!-- <view>
  56. <view v-for="(item, index) in list2" :key="item.id" class="waterfall-item"
  57. @click="$utils.navigateTo('/pages_order/scenicSpot/scenicSpotDetail?id=' + item.id)">
  58. <view class="waterfall-item__image" :style="[imageStyle(item)]">
  59. <image :src="item.titleImage" mode="widthFix" :style="{width:item.width+'px'}"></image>
  60. </view>
  61. <view class="waterfall-item__ft">
  62. <view class="waterfall-item__ft__title">
  63. <text class="value">{{item.name}}</text>
  64. </view>
  65. <view class="waterfall-item__ft__desc uv-line-2">
  66. <text class="value">{{item.address}}</text>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. </template>
  72. </uv-waterfall> -->
  73. <!-- <view class="list">
  74. <scenicSpotItem
  75. :key="index"
  76. v-for="(item, index) in list"
  77. :item="item"
  78. @click="$utils.navigateTo('/pages_order/scenicSpot/scenicSpotDetail?id=' + item.id)"
  79. />
  80. </view> -->
  81. </view>
  82. </template>
  83. <script>
  84. import mixinsList from '@/mixins/list.js'
  85. // import screenRen from '../components/screen/screenRen.vue'
  86. import screenSearch from '../components/screen/screenSearch.vue'
  87. import scenicSpotItem from '../components/list/scenicSpot/scenicSpotItem.vue'
  88. import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
  89. export default {
  90. mixins: [mixinsList],
  91. components: {
  92. scenicSpotItem,
  93. screenSearch,
  94. },
  95. data() {
  96. return {
  97. mixinsListApi: 'getScenicPage',
  98. list: [], // 瀑布流全部数据
  99. list1: [], // 瀑布流第一列数据
  100. list2: [], // 瀑布流第二列数据
  101. leftGap: 10,
  102. rightGap: 10,
  103. columnGap: 10
  104. }
  105. },
  106. computed: {
  107. imageStyle(item) {
  108. return item => {
  109. const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
  110. const w = v / 2;
  111. const rate = w / item.w;
  112. const h = rate * item.h;
  113. return {
  114. width: w + 'px',
  115. height: h + 'px'
  116. }
  117. }
  118. }
  119. },
  120. methods: {
  121. clickItem(result) {
  122. this.queryParams = {
  123. pageNo: 1,
  124. pageSize: 10,
  125. }
  126. result.forEach(n => {
  127. this.queryParams[n.name] = n.value
  128. })
  129. this.getData()
  130. },
  131. // 这点非常重要:e.name在这里返回是list1或list2,要手动将数据追加到相应列
  132. changeList(e) {
  133. this[e.name].push(e.value);
  134. },
  135. }
  136. }
  137. </script>
  138. <style scoped lang="scss">
  139. .page {
  140. background-color: white;
  141. .list {
  142. padding: 0 20rpx;
  143. }
  144. }
  145. .top-bg{
  146. position: absolute;
  147. height: 500rpx;
  148. width: 100%;
  149. background: linear-gradient($uni-color, #fff);
  150. }
  151. .waterfall{
  152. margin: 50rpx 0rpx;
  153. image{
  154. width: 100%;
  155. height: 100%;
  156. }
  157. .images{
  158. position: relative;
  159. height: 350rpx;
  160. margin: 5rpx 30rpx;
  161. border-radius: 30rpx;
  162. overflow: hidden;
  163. .scenicspot{
  164. position: absolute;
  165. top: 0;
  166. left: 0;
  167. height: 50rpx;
  168. width: 100rpx;
  169. background-color: $uni-color;
  170. color: white;
  171. display: flex;
  172. justify-content: center;
  173. align-items: center;
  174. border-bottom-right-radius: 30rpx;
  175. }
  176. }
  177. .font{
  178. margin: 10rpx 35rpx;
  179. opacity: 0.8;
  180. letter-spacing: 3rpx;
  181. }
  182. }
  183. $show-lines: 1;
  184. @import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
  185. .waterfall-item {
  186. overflow: hidden;
  187. margin-top: 20rpx;
  188. border-radius: 12rpx;
  189. box-shadow: 0 0 6rpx 6rpx #00000009;
  190. }
  191. .waterfall-item__ft {
  192. padding: 20rpx;
  193. background: #fff;
  194. &__title {
  195. margin-bottom: 10rpx;
  196. line-height: 48rpx;
  197. font-weight: 700;
  198. .value {
  199. font-size: 32rpx;
  200. color: #303133;
  201. }
  202. }
  203. &__desc .value {
  204. font-size: 28rpx;
  205. color: #606266;
  206. }
  207. &__btn {
  208. padding: 20rpx 0;
  209. }
  210. }
  211. </style>