index.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. <template>
  2. <mobile-frame :frameStyle="frameStyle" @toPath="toPath">
  3. <scroll-view class="scrollView" scroll-with-animation :scroll-into-view="topItem" scroll-y="true" @scroll="handleScroll">
  4. <view class="main" id="top">
  5. <view class="zero one">
  6. <input type="text" placeholder="搜索商品" @tap="toCommon('pagesHome/market/search')" placeholder-class="placss">
  7. </view>
  8. <view class="zero two">
  9. <swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
  10. <swiper-item class="list" v-for="(item,index) in bannerList" :key="index">
  11. <image class="image" :src="item.url" mode=""></image>
  12. </swiper-item>
  13. </swiper>
  14. </view>
  15. <view class="zero thr">
  16. <view class="list" v-for="(item,index) in btnList" :key="index" @tap="toCommon(item.route)">
  17. <image class="image" :src="item.url" mode=""></image>
  18. <view class="textOver name">
  19. {{item.name}}
  20. </view>
  21. </view>
  22. </view>
  23. <view class="zero four">
  24. <view class="recomList" v-for="(item,index) in recomList" :key="index">
  25. <view class="list" v-for="(tag,indexs) in item.list" :key="indexs">
  26. <view class="title">
  27. <text>{{tag.title||'&nbsp;'}}</text>
  28. </view>
  29. <image class="image" :src="tag.url" mode=""></image>
  30. <view class="textOver name">
  31. {{tag.name}}
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. <view class="zero five">
  37. <view class="list" v-for="(item,index) in marketList" :key="index">
  38. <image class="image" :src="item.url" mode=""></image>
  39. <view class="name">
  40. {{item.name}}
  41. </view>
  42. <view class="other">
  43. <view class="money">
  44. <text>¥</text><text>{{item.money}}</text>
  45. </view>
  46. <view class="btn">
  47. <button type="default" size="mini">购买</button>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. </scroll-view>
  54. <view class="backTop" v-if="isShow==true">
  55. <text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
  56. </view>
  57. </mobile-frame>
  58. </template>
  59. <script>
  60. export default {
  61. data() {
  62. return {
  63. frameStyle: {
  64. useBar: true
  65. },
  66. bannerList: [ // 轮播图
  67. {
  68. url: require('@/static/test.png')
  69. },
  70. {
  71. url: require('@/static/test.png')
  72. },
  73. {
  74. url: require('@/static/test.png')
  75. },
  76. {
  77. url: require('@/static/test.png')
  78. },
  79. ],
  80. btnList: [ //功能按钮
  81. {
  82. name: '商品分类',
  83. url: require('@/static/logo.png'),
  84. route: 'pagesHome/market/sort'
  85. },
  86. {
  87. name: '首农专区',
  88. url: require('@/static/logo.png'),
  89. route: ''
  90. },
  91. {
  92. name: '地方特产',
  93. url: require('@/static/logo.png'),
  94. route: ''
  95. },
  96. {
  97. name: '进口食品',
  98. url: require('@/static/logo.png'),
  99. route: ''
  100. },
  101. {
  102. name: '扶贫专区',
  103. url: require('@/static/logo.png'),
  104. route: ''
  105. },
  106. {
  107. name: '自提门店',
  108. url: require('@/static/logo.png'),
  109. route: ''
  110. },
  111. {
  112. name: '点到优选',
  113. url: require('@/static/logo.png'),
  114. route: ''
  115. },
  116. {
  117. name: '活动专区',
  118. url: require('@/static/logo.png'),
  119. route: ''
  120. },
  121. {
  122. name: '兑换中心',
  123. url: require('@/static/logo.png'),
  124. route: ''
  125. },
  126. {
  127. name: '员工中心',
  128. url: require('@/static/logo.png'),
  129. route: ''
  130. },
  131. ],
  132. recomList: [ //推荐好物
  133. {
  134. list: [ //商品
  135. {
  136. title: '新品上架',
  137. url: require('@/static/test.png'),
  138. name: '商品名称'
  139. },
  140. {
  141. title: '',
  142. url: require('@/static/test.png'),
  143. name: '商品名称'
  144. },
  145. ]
  146. },
  147. {
  148. list: [ //商品
  149. {
  150. title: '发现好货',
  151. url: require('@/static/test.png'),
  152. name: '商品名称'
  153. },
  154. {
  155. title: '热销爆款',
  156. url: require('@/static/test.png'),
  157. name: '商品名称'
  158. },
  159. ]
  160. },
  161. {
  162. list: [ //商品
  163. {
  164. title: '首农精选',
  165. url: require('@/static/test.png'),
  166. name: '商品名称'
  167. },
  168. {
  169. title: '居家常备',
  170. url: require('@/static/test.png'),
  171. name: '商品名称'
  172. },
  173. ]
  174. },
  175. {
  176. list: [ //商品
  177. {
  178. title: '人气单品',
  179. url: require('@/static/test.png'),
  180. name: '商品名称'
  181. },
  182. {
  183. title: '夏季畅销',
  184. url: require('@/static/test.png'),
  185. name: '商品名称'
  186. },
  187. ]
  188. }
  189. ],
  190. marketList: [ //商品列表
  191. {
  192. url: require('@/static/test.png'),
  193. name: '商品名称',
  194. money: 10
  195. },
  196. {
  197. url: require('@/static/test.png'),
  198. name: '商品名称',
  199. money: 10
  200. },
  201. {
  202. url: require('@/static/test.png'),
  203. name: '商品名称',
  204. money: 10
  205. },
  206. {
  207. url: require('@/static/test.png'),
  208. name: '商品名称',
  209. money: 10
  210. },
  211. {
  212. url: require('@/static/test.png'),
  213. name: '商品名称',
  214. money: 10
  215. },
  216. ],
  217. // 是否显示返回顶部
  218. isShow: false,
  219. topItem: ''
  220. };
  221. },
  222. onShow: function() {},
  223. methods: {
  224. // 公共跳转
  225. toCommon(e) {
  226. console.log(e);
  227. uni.navigateTo({
  228. url: `/${e}`
  229. })
  230. },
  231. toPath(e) {
  232. if (e && e.route) uni.redirectTo({
  233. url: `/${e.route}`
  234. })
  235. },
  236. // 计算高度
  237. handleScroll(e) {
  238. const that = this;
  239. let scrollTop = e.detail.scrollTop;
  240. that.isShow = scrollTop > 500;
  241. that.topItem = '';
  242. },
  243. // 返回顶部
  244. backTop() {
  245. const that = this;
  246. that.topItem = 'top'
  247. }
  248. }
  249. }
  250. </script>
  251. <style lang="scss">
  252. .scrollView {
  253. height: 100vh;
  254. }
  255. .main {
  256. padding: 2vw;
  257. .zero {
  258. margin: 0 0 2vw 0;
  259. }
  260. .one {
  261. background-color: var(--fFB1Color);
  262. border-radius: 20px;
  263. padding: 0 2vw;
  264. input {
  265. font-size: var(--font15Size);
  266. color: var(--fffColor);
  267. border-radius: 14px;
  268. width: 100%;
  269. padding: 1.5vw 0;
  270. }
  271. .placss {
  272. color: var(--fffColor);
  273. }
  274. }
  275. .two {
  276. swiper {
  277. height: 50vw;
  278. border-radius: 5px;
  279. }
  280. .list {
  281. border-radius: 5px;
  282. .image {
  283. width: 100%;
  284. height: 100%;
  285. border-radius: 5px;
  286. }
  287. }
  288. }
  289. .thr {
  290. display: flex;
  291. flex-direction: row;
  292. justify-content: space-around;
  293. flex-wrap: wrap;
  294. .list {
  295. width: 17vw;
  296. text-align: center;
  297. margin: 0 0 2vw 0;
  298. .image {
  299. width: 100%;
  300. height: 16vw;
  301. margin: 0 0 1vw 0;
  302. }
  303. .name {
  304. font-size: var(--font13Size);
  305. }
  306. }
  307. }
  308. .four {
  309. display: flex;
  310. flex-direction: row;
  311. justify-content: space-around;
  312. flex-wrap: wrap;
  313. background-color: var(--f2Color);
  314. padding: 2vw 0 0 0;
  315. .recomList {
  316. display: flex;
  317. flex-direction: row;
  318. justify-content: space-around;
  319. width: 41vw;
  320. margin: 0 0 2vw 0;
  321. padding: 2vw;
  322. border-radius: 10px;
  323. background-image: linear-gradient(to bottom, rgba(250, 216, 213, 1) 5%, rgba(255, 255, 255, 1) 22%);
  324. .list {
  325. width: 20vw;
  326. text-align: center;
  327. .title {
  328. text-align: center;
  329. font-weight: bold;
  330. font-size: var(--font15Size);
  331. ;
  332. margin: 0 0 1vw 0;
  333. }
  334. .image {
  335. width: 18vw;
  336. height: 20vw;
  337. margin: 0 0 1vw 0;
  338. }
  339. .name {
  340. width: 17vw;
  341. font-size: var(--font12Size);
  342. ;
  343. border: 1px solid var(--fFB1Color);
  344. border-radius: 25px;
  345. padding: 0 1vw;
  346. text-align: center;
  347. }
  348. }
  349. }
  350. }
  351. .five {
  352. display: flex;
  353. flex-direction: row;
  354. flex-wrap: wrap;
  355. background-color: var(--f2Color);
  356. padding: 2vw 0 0 0;
  357. .list {
  358. width: 40vw;
  359. background-color: var(--fffColor);
  360. padding: 2vw;
  361. margin: 0 2vw 2vw 2vw;
  362. border-radius: 10px;
  363. .image {
  364. width: 100%;
  365. height: 35vw;
  366. }
  367. .name {
  368. font-size: var(--font14Size);
  369. margin: 0 0 1vw 0;
  370. }
  371. .other {
  372. display: flex;
  373. flex-direction: row;
  374. justify-content: space-between;
  375. .money {
  376. color: var(--fFB1Color);
  377. text:nth-child(1) {
  378. font-size: var(--font12Size);
  379. }
  380. }
  381. .btn {
  382. button {
  383. color: var(--fffColor);
  384. background-color: var(--fFB1Color);
  385. padding: 5px 2vw;
  386. font-size: var(--font14Size);
  387. line-height: 1;
  388. border-radius: 90px;
  389. }
  390. }
  391. }
  392. }
  393. .list:nth-child(2n) {
  394. margin: 0 0 2vw 2vw;
  395. }
  396. }
  397. }
  398. .backTop {
  399. position: fixed;
  400. bottom: 20vw;
  401. right: 5vw;
  402. text {
  403. font-size: 30px;
  404. background-color: #0000005f;
  405. border-radius: 90px;
  406. }
  407. }
  408. </style>