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

228 lines
4.8 KiB

8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
5 months ago
8 months ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
  1. <template>
  2. <view class="page">
  3. <view class="banner">
  4. <uv-swiper
  5. :list="bannerList"
  6. indicator
  7. height="620rpx"
  8. indicatorStyle="bottom: 100rpx;"
  9. keyName="imageContent"></uv-swiper>
  10. <view class="top">
  11. <view class="search">
  12. <uv-search
  13. placeholder="请输入搜索文章"
  14. :showAction="false"
  15. search-icon-size="40rpx"
  16. @search="search"
  17. v-model="keyword"></uv-search>
  18. </view>
  19. </view>
  20. </view>
  21. <view class="content">
  22. <view class="grid">
  23. <uv-grid :border="false"
  24. :col="5">
  25. <uv-grid-item
  26. v-for="(item,index) in baseList"
  27. @click="$utils.navigateTo(item.path)"
  28. :key="index">
  29. <image class="grid-icon" :src="item.icon" mode="aspectFill"></image>
  30. <text class="grid-text">{{item.title}}</text>
  31. </uv-grid-item>
  32. </uv-grid>
  33. </view>
  34. <view class="video-title">
  35. <!-- 视频中的景徳镇 -->
  36. 景徳镇的景点
  37. </view>
  38. <videoList ref="videoList"/>
  39. </view>
  40. <PrivacyAgreementPoup/>
  41. <tabber select="0"/>
  42. </view>
  43. </template>
  44. <script>
  45. import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
  46. import videoList from '@/components/list/videoList.vue'
  47. export default {
  48. components : {
  49. PrivacyAgreementPoup,
  50. videoList,
  51. },
  52. data() {
  53. return {
  54. baseList : [
  55. {
  56. icon : '/static/image/home/g1.png',
  57. title : '申遗历程',
  58. path : '/pages_order/service/applyRelic',
  59. },
  60. {
  61. icon : '/static/image/home/g2.png',
  62. title : '遗产概况',
  63. path : '/pages_order/service/situation',
  64. },
  65. // {
  66. // icon : '/static/image/home/g3.png',
  67. // title : '遗产讲述',
  68. // path : '/pages_order/service/tellList?type=tell',
  69. // },
  70. // {
  71. // icon : '/static/image/home/g4.png',
  72. // title : '达人同游',
  73. // path : '/pages_order/service/tellList?type=travel',
  74. // },
  75. // {
  76. // icon : '/static/image/home/g5.png',
  77. // title : '遗产路径',
  78. // path : '/pages_order/service/heritagePath',
  79. // },
  80. // {
  81. // icon : '/static/image/home/g6.png',
  82. // title : '我要跟拍',
  83. // path : '/pages_order/service/following' ,
  84. // },
  85. // {
  86. // icon : '/static/image/home/g7.png',
  87. // title : '非遗体验',
  88. // path : '/pages_order/service/experience',
  89. // },
  90. {
  91. icon : '/static/image/home/g8.png',
  92. title : '无忧服务',
  93. path : '/pages_order/service/carefree',
  94. },
  95. {
  96. icon : '/static/image/home/g9.png',
  97. title : '文创好物',
  98. path : '/pages_order/product/productList',
  99. },
  100. {
  101. icon : '/static/image/home/g10.png',
  102. title : '我要帮助',
  103. path : '/pages_order/service/help',
  104. },
  105. ],
  106. bannerList: [
  107. {
  108. url: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img',
  109. },
  110. {
  111. url: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img',
  112. },
  113. {
  114. url: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img',
  115. },
  116. ],
  117. productList: [],
  118. keyword : '',
  119. }
  120. },
  121. computed : {
  122. },
  123. onPullDownRefresh(){
  124. this.$refs.videoList.queryVideoList()
  125. this.queryBannerList()
  126. },
  127. onShow() {
  128. this.$refs.videoList.queryVideoList()
  129. this.queryBannerList()
  130. },
  131. //滚动到屏幕底部
  132. onReachBottom() {
  133. this.$refs.videoList.loadMoreData()
  134. },
  135. methods: {
  136. queryBannerList(){
  137. this.$api('queryBannerList', {
  138. bannerCategoryType : 0,
  139. },res => {
  140. uni.stopPullDownRefresh()
  141. if(res.code == 200){
  142. this.bannerList = res.result
  143. }
  144. })
  145. },
  146. search(){
  147. this.keyword = ''
  148. uni.navigateTo({
  149. url: '/pages_order/service/applyRelic?keyword=' + this.keyword
  150. })
  151. }
  152. }
  153. }
  154. </script>
  155. <style scoped lang="scss">
  156. .page{
  157. .banner{
  158. position: relative;
  159. .top{
  160. position: absolute;
  161. top: var(--status-bar-height);
  162. left: 0;
  163. padding-top: 30rpx;
  164. display: flex;
  165. width: 100%;
  166. flex-direction: column;
  167. align-items: center;
  168. .search{
  169. width: 400rpx;
  170. margin-left: -100rpx;
  171. /deep/ .uv-search__content__icon{
  172. padding: 30rpx 0;
  173. }
  174. }
  175. .title{
  176. image{
  177. width: 600rpx;
  178. height: 300rpx;
  179. }
  180. }
  181. }
  182. }
  183. .content{
  184. position: relative;
  185. margin-top: -60rpx;
  186. .grid{
  187. padding-bottom: 30rpx;
  188. background-color: #fff;
  189. border-radius: 60rpx;
  190. box-shadow: 0 0 10rpx 10rpx #00000013;
  191. .grid-icon{
  192. width: 80rpx;
  193. height: 80rpx;
  194. margin-bottom: 10rpx;
  195. margin-top: 30rpx;
  196. }
  197. .grid-text{
  198. font-size: 24rpx;
  199. font-weight: 900;
  200. }
  201. }
  202. .video-title{
  203. padding: 20rpx 30rpx;
  204. background-color: $uni-color;
  205. color: #fff;
  206. font-weight: 900;
  207. font-size: 24rpx;
  208. margin: 10rpx 20rpx;
  209. margin-top: 30rpx;
  210. width: fit-content;
  211. border-radius: 20rpx;
  212. }
  213. }
  214. }
  215. </style>