推广小程序前端代码
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.

351 lines
8.3 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
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
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="page">
  3. <view class="head-box"></view>
  4. <uv-navbar :title="navTitle" leftIcon=" " :titleStyle="{color:'#fff'}" :bgColor="bgColor" height="100rpx"></uv-navbar>
  5. <view class="content">
  6. <view class="search-box">
  7. <view class="search-box-l">
  8. <image class="address-img" src="@/static/image/home/address-icon.png" mode="widthFix"></image>
  9. <view>成都</view>
  10. <image class="sjx-img" src="@/static/image/home/sjx-icon.png" mode="widthFix"></image>
  11. </view>
  12. <view class="search-box-r">
  13. <uv-search placeholder="搜索相关内容" v-model="keyword" shape="square" :showAction="false" color="#fff" placeholderColor="#BDABAC" :clearabled="false" searchIconColor="#fff" searchIconSize="50rpx" bgColor="#4A2A2B" height="63rpx"></uv-search>
  14. </view>
  15. </view>
  16. <view class="swipe-box">
  17. <uv-swiper :list="list" keyName="image" height="336rpx" radius="30rpx" bgColor="transparent" indicator indicatorMode="dot"></uv-swiper>
  18. </view>
  19. <view class="ydsk-box">
  20. <view class="ydsk-box-title">悦动时刻</view>
  21. <view class="ydsk-box-gird">
  22. <view class="gird-l">
  23. <view class="left-box">
  24. <view class="title-box">
  25. <view>活动签到</view>
  26. <view>签到有好礼</view>
  27. </view>
  28. <view class="btn-box">立即查看</view>
  29. </view>
  30. <image class="hdqd-img" src="@/static/image/home/hdqd-img.png" mode="widthFix"></image>
  31. </view>
  32. <view class="gird-r">
  33. <view class="hd-box">
  34. <view class="left-box">
  35. <view class="title-box">
  36. 活动
  37. </view>
  38. <view class="btn-box">立即查看</view>
  39. </view>
  40. <image class="hdqd-img" src="@/static/image/home/hd-img.png" mode="widthFix"></image>
  41. </view>
  42. <view class="hd-box lx-box" @click="travelList">
  43. <view class="left-box">
  44. <view class="title-box">
  45. 旅行
  46. </view>
  47. <view class="btn-box">立即查看</view>
  48. </view>
  49. <image class="hdqd-img" src="@/static/image/home/lx-img.png" mode="widthFix"></image>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. <view class="hd-list">
  55. <uv-tabs
  56. @click= "tabs"
  57. :list="hdList"
  58. lineWidth="50rpx"
  59. :lineColor="`url(${lineBg}) 100% 100%`"
  60. :activeStyle="{
  61. color: '#fff',
  62. fontWeight: 'bold',
  63. transform: 'scale(1.05)'
  64. }"
  65. :inactiveStyle="{
  66. color: '#999',
  67. transform: 'scale(1)'
  68. }"
  69. itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"
  70. ></uv-tabs>
  71. <active-item :cardListData="cardListData"/>
  72. </view>
  73. </view>
  74. <tabber select="home" />
  75. </view>
  76. </template>
  77. <script>
  78. import tabber from '@/components/base/tabbar.vue'
  79. import activeItem from '@/components/active/active-item.vue'
  80. export default {
  81. components:{
  82. tabber,
  83. activeItem
  84. },
  85. data() {
  86. return {
  87. params:{
  88. title:'',
  89. pageNo:1,
  90. pageSize:10
  91. },
  92. totalPage:0,
  93. bgColor:'transparent',
  94. navTitle:'',
  95. keyword:'',
  96. list: [],
  97. hdList: [
  98. { id: 0, name: '近期活动' },
  99. { id: 1, name: '往期活动' },
  100. ],
  101. lineBg: require('@/static/image/cart/tabIcon.png'),
  102. cardListData: []
  103. }
  104. },
  105. onPageScroll(e) {
  106. if(e.scrollTop > 50) {
  107. this.bgColor = '#49070c'
  108. this.navTitle = '首页'
  109. }else{
  110. this.bgColor = 'transparent'
  111. this.navTitle = ''
  112. }
  113. },
  114. onReachBottom() {
  115. if(this.params.pageNo >= this.totalPage) return
  116. this.params.pageNo ++
  117. this.getActivityPageList()
  118. },
  119. onLoad() {
  120. this.getBanner()
  121. this.getActivityPageList()
  122. },
  123. methods:{
  124. getActivityPageList() {
  125. this.$api('activityPageList',this.params,res=>{
  126. if(res.code == 200) {
  127. this.totalPage = res.result.pages
  128. this.cardListData = [...this.cardListData,...res.result.records]
  129. }
  130. })
  131. },
  132. getBanner() {
  133. this.$api('banner',res=>{
  134. if(res.code == 200) {
  135. this.list = res.result
  136. }
  137. })
  138. },
  139. tabs(val) {
  140. console.log(val);
  141. },
  142. travelList() {
  143. uni.navigateTo({
  144. url: '/pages_my/travelList'
  145. })
  146. },
  147. }
  148. }
  149. </script>
  150. <style lang="scss">
  151. page {
  152. background-color: #060504;
  153. }
  154. </style>
  155. <style scoped lang="scss">
  156. .page {
  157. .head-box {
  158. background: url('@/static/image/nav-bg.png') no-repeat;
  159. background-size: 100% 100%;
  160. width: 100%;
  161. height: 534rpx;
  162. position: absolute;
  163. }
  164. .content {
  165. color: #fff;
  166. padding: 0 30rpx;
  167. padding-top: calc(var(--status-bar-height) + 110rpx);
  168. .search-box {
  169. display: flex;
  170. align-items: center;
  171. margin-bottom: 32rpx;
  172. &-l {
  173. display: flex;
  174. align-items: center;
  175. margin-right: 30rpx;
  176. view {
  177. font-weight: 400;
  178. font-size: 27rpx;
  179. color: #FFFFFF;
  180. margin: 0 18rpx 0 15rpx;
  181. }
  182. .address-img {
  183. width: 26rpx;
  184. }
  185. .sjx-img {
  186. width: 13rpx;
  187. }
  188. }
  189. &-r {
  190. flex:1;
  191. }
  192. }
  193. .swipe-box {
  194. margin-bottom: 41rpx;
  195. }
  196. .ydsk-box {
  197. margin-bottom: 10rpx;
  198. &-title {
  199. width: 250rpx;
  200. background: url('@/static/image/home/title-bg.png') no-repeat;
  201. background-size: 100% 100%;
  202. text-align: center;
  203. height: 31rpx;
  204. line-height: 31rpx;
  205. font-weight: bold;
  206. font-size: 35rpx;
  207. color: #FFFFFF;
  208. margin: 0 auto 33rpx;
  209. }
  210. &-gird {
  211. display: flex;
  212. justify-content: space-between;
  213. .gird-l {
  214. box-sizing: border-box;
  215. width: 378rpx;
  216. height: 278rpx;
  217. padding: 36rpx 0 24rpx 26rpx;
  218. background: url('@/static/image/home/hdqd-bg.png') no-repeat;
  219. background-size: 100% 100%;
  220. position: relative;
  221. .hdqd-img {
  222. position: absolute;
  223. right: 34rpx;
  224. top: 48rpx;
  225. width: 200rpx;
  226. }
  227. .left-box {
  228. height: 100%;
  229. display: flex;
  230. flex-direction: column;
  231. justify-content: space-between;
  232. .title-box {
  233. view {
  234. font-weight: bold;
  235. font-size: 29rpx;
  236. color: #060504;
  237. &:nth-child(2) {
  238. font-weight: 400;
  239. font-size: 21rpx;
  240. color: #4C4C4C;
  241. margin-top: 20rpx;
  242. }
  243. }
  244. }
  245. .btn-box {
  246. width: 108rpx;
  247. height: 41rpx;
  248. background: url('@/static/image/home/hdqd-btn.png') no-repeat;
  249. background-size: 100% 100%;
  250. font-weight: 500;
  251. font-size: 17rpx;
  252. color: #FFFFFF;
  253. text-align: center;
  254. line-height: 41rpx;
  255. }
  256. }
  257. }
  258. .gird-r {
  259. .hd-box {
  260. width: 288rpx;
  261. height: 130rpx;
  262. padding: 25rpx 0 24rpx 26rpx;
  263. box-sizing: border-box;
  264. background: url('@/static/image/home/hd-bg.png') no-repeat;
  265. background-size: 100% 100%;
  266. position: relative;
  267. .left-box {
  268. height: 100%;
  269. display: flex;
  270. flex-direction: column;
  271. justify-content: space-between;
  272. .title-box {
  273. font-weight: bold;
  274. font-size: 28rpx;
  275. color: #57270F;
  276. }
  277. .btn-box {
  278. width: 98rpx;
  279. height: 35rpx;
  280. background: url('@/static/image/home/hd-btn.png') no-repeat;
  281. background-size: 100% 100%;
  282. font-weight: 500;
  283. font-size: 16rpx;
  284. color: #FFFFFF;
  285. text-align: center;
  286. line-height: 35rpx;
  287. }
  288. }
  289. .hdqd-img {
  290. position: absolute;
  291. right: 22rpx;
  292. top: 25rpx;
  293. width: 123rpx;
  294. }
  295. }
  296. .lx-box {
  297. width: 288rpx;
  298. height: 130rpx;
  299. padding: 25rpx 0 24rpx 26rpx;
  300. box-sizing: border-box;
  301. background: url('@/static/image/home/lx-bg.png') no-repeat;
  302. background-size: 100% 100%;
  303. position: relative;
  304. margin-top: 18rpx;
  305. .left-box {
  306. height: 100%;
  307. display: flex;
  308. flex-direction: column;
  309. justify-content: space-between;
  310. .title-box {
  311. font-weight: bold;
  312. font-size: 28rpx;
  313. color: #57270F;
  314. }
  315. .btn-box {
  316. width: 98rpx;
  317. height: 35rpx;
  318. background: url('@/static/image/home/lx-btn.png') no-repeat;
  319. background-size: 100% 100%;
  320. font-weight: 500;
  321. font-size: 16rpx;
  322. color: #FFFFFF;
  323. text-align: center;
  324. line-height: 35rpx;
  325. }
  326. }
  327. .hdqd-img {
  328. position: absolute;
  329. right: 22rpx;
  330. top: 25rpx;
  331. width: 123rpx;
  332. }
  333. }
  334. }
  335. }
  336. }
  337. }
  338. }
  339. </style>