hxj_index_component.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. <template>
  2. <view style="background-color: #FEFFFE;">
  3. <view class="swiper_cent">
  4. <swiper style="height: 900rpx;" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
  5. @change="swiperChange">
  6. <swiper-item v-for="(item,index) in 3" :key="index">
  7. <image src="https://t17.9026.com/web/statics/image/index/1.png" style="width: 100%;height: 900rpx;"
  8. mode=""></image>
  9. </swiper-item>
  10. </swiper>
  11. <view class="swiper_zhishi">
  12. <view :class="swiperKey===i?'view_active':''" v-for="(item1,i) in 3" :key="i"></view>
  13. </view>
  14. </view>
  15. <view class="link">
  16. <view>
  17. <view class="title">人居 · 荟享家<image class="hxjImg"
  18. src="https://t17.9026.com/web/statics/image/index/HUIXIANGJIA.png" mode=""></image>
  19. </view>
  20. </view>
  21. </view>
  22. <app-scroll-list :list="list"></app-scroll-list>
  23. <view class="link">
  24. <view class="title1">本期家点灵感</view>
  25. <image class="tyx" src="https://t17.9026.com/web/statics/image/index/tyx.png" mode=""></image>
  26. <image class="d6" src="https://t17.9026.com/web/statics/image/index/6d.png" mode=""></image>
  27. <view class="subtitle">臻选整装 · 安全无甲醛 · 7天入住</view>
  28. </view>
  29. <view class="lg_list">
  30. <view class="item" v-for="(item,index) in jdlg" :key="index"
  31. @click="goPage('/pages/case/projectInfo?id=9')">
  32. <image class="imgBox" :src="`https://t17.9026.com/web/statics/image/index/${item.cover_image}.png`">
  33. </image>
  34. <view class="b_card main-between">
  35. <view class="left">
  36. <view class="title">{{item.title}}</view>
  37. <view class="desc">{{item.sub_title}}</view>
  38. </view>
  39. <view class="right">
  40. <view class="price"><text class="rmb">¥</text><text>{{item.price}}</text><text
  41. class="dw">元</text></view>
  42. </view>
  43. </view>
  44. </view>
  45. <view class="more">
  46. <view>VIEW MORE</view>
  47. <view>
  48. <image src="https://t17.9026.com/web/statics/image/index/viewmore.png" mode=""></image>
  49. </view>
  50. </view>
  51. </view>
  52. <view class="link ">
  53. <view class="title1 main-left cross-center">优惠券<image class="coupon_1"
  54. src="https://t17.9026.com/web/statics/image/index/coupon_1.png" mode=""></image><text
  55. class="coupon_sub">RECOMMEND</text></view>
  56. </view>
  57. <view class="coupon main-left">
  58. <view class="item main-left" v-for="(item,index) in 2" :key="index">
  59. <view class="Wb">
  60. <view>
  61. <view class="title_2">定制优享礼券 <text class="hjx-tc-B19D60 hjx-ts-21 hxj-ml-10">立即领取</text></view>
  62. <view class="desc_2">新用户礼遇</view>
  63. </view>
  64. <view>
  65. <view class="price"><text>¥</text>100</view>
  66. <view class="yxq">有效期至2021-12-31</view>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. <view class="link mt_20">
  72. <view class="title1">荟享定制<image class="coupon_1"
  73. src="https://t17.9026.com/web/statics/image/index/coupon_1.png" mode="">
  74. </image><text class="coupon_sub">HUIXIANG</text></view>
  75. </view>
  76. <view class="hxdz">
  77. <view class="main-left q">
  78. <view class="l">
  79. <view class="title_2">明星套装</view>
  80. <view class="desc_2">自然高端好家居</view>
  81. <image src="https://t17.9026.com/web/statics/image/index/4.png" mode=""></image>
  82. </view>
  83. <view class="main-between-y">
  84. <view class="r1" @click="goPage('/pages/case/selectedCases')">
  85. <view class="title_2">优选</view>
  86. <view class="desc_2">优选家居</view>
  87. <image src="https://t17.9026.com/web/statics/image/index/5.png" mode=""></image>
  88. </view>
  89. <view class="r2">
  90. <view class="title_2">专属</view>
  91. <view class="desc_2">定制精品</view>
  92. <image src="https://t17.9026.com/web/statics/image/index/6.png" mode=""></image>
  93. </view>
  94. </view>
  95. </view>
  96. <scroll-view scroll-x="true">
  97. <view class="main-left w">
  98. <view class="item" v-for="(item,index) in qwe" :key="index">
  99. <image class="borradu_20"
  100. :src="`https://t17.9026.com/web/statics/image/index/temporary/${item.cover_image}.png`"
  101. mode=""></image>
  102. <view class="title_2">{{item.title}}</view>
  103. <view class="desc_2">独到品味的代表备份</view>
  104. </view>
  105. </view>
  106. </scroll-view>
  107. <!-- <view class="more">
  108. <view class="viewmore1_color">查看更多</view>
  109. <view class="viewmore1_color">VIEW MORE</view>
  110. <view>
  111. <image class="viewmore1" src="https://t17.9026.com/web/statics/image/index/viewmore1.png" mode=""></image>
  112. </view>
  113. </view> -->
  114. </view>
  115. <view class="main-between link mt_20">
  116. <view class="title1">
  117. 限时团购
  118. <image class="coupon_1"
  119. src="https://t17.9026.com/web/statics/image/index/coupon_1.png" mode="">
  120. </image>
  121. <text class="coupon_sub">TUANGOU</text>
  122. </view>
  123. <view class="link-more" @click="goPage('/plugins/pt/index/index')">
  124. 查看更多<image src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image>
  125. </view>
  126. </view>
  127. <view class="group_list">
  128. <swiper style="height: 606rpx;" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
  129. previous-margin="75rpx" next-margin="75rpx">
  130. <swiper-item class="" v-for="(item,index) in 3" :key="index"
  131. @click="goPage('/plugins/pt/goods/goods?goods_id=29')">
  132. <view class="item">
  133. <view class="imgBox">
  134. <image class="img" src="https://t17.9026.com/web/statics/image/index/3.png"></image>
  135. </view>
  136. <view class="b_card main-between">
  137. <view class="main-left cross-center left">
  138. <view class="i">02</view>
  139. <view class="q">:</view>
  140. <view class="i">24</view>
  141. <view class="q">:</view>
  142. <view class="i">45</view>
  143. </view>
  144. <view class="right">
  145. <view class="price"><text class="rmb">¥</text><text>56800</text><text
  146. class="dw">元</text></view>
  147. </view>
  148. </view>
  149. </view>
  150. </swiper-item>
  151. </swiper>
  152. </view>
  153. <view class="link main-left">
  154. <view class="title1" style="margin-right: 61rpx;">荟享自营</view>
  155. <view class="title1" style="margin-right: 61rpx;color: #A7A7A7;">精选类别</view>
  156. <view class="title1" style="margin-right: 61rpx;color: #A7A7A7;">精选类别</view>
  157. <view class="title1" style="margin-right: 61rpx;color: #A7A7A7;">精选类别</view>
  158. <image class="tyx" src="https://t17.9026.com/web/statics/image/index/tyx.png" mode=""></image>
  159. </view>
  160. <view class="hxzy">
  161. <view class="top">
  162. <image
  163. style="width: 560rpx;height: 270rpx;border-radius: 20rpx 0 0 0;position: absolute;top: 0;right: 0;"
  164. src="https://t17.9026.com/web/statics/image/index/9.png" mode=""></image>
  165. <view class="dbo main-between-y">
  166. <view>
  167. <view class="text">decoration荟享自营</view>
  168. <view class="text">心至所向·渐入家境</view>
  169. </view>
  170. <view class="category">2930人已收藏</view>
  171. </view>
  172. </view>
  173. <view class="dir-left-wrap bottom">
  174. <view class="item" v-for="(item,index) in 4" :key="index"
  175. @click="goPage(`/pages/goods/goods?id=${18+index}`)">
  176. <view>
  177. <image class="cover" :src="`https://t17.9026.com/web/statics/image/index/${index+10}.png`"
  178. mode=""></image>
  179. </view>
  180. <view class="title_2">马蒂斯系列 烟灰缸/首饰盘</view>
  181. <view class="desc_2">细节控 · 创意</view>
  182. <view class="price" style="margin-top: 27rpx;"><text class="rmb">¥</text><text>258</text><text
  183. class="dw">元</text></view>
  184. </view>
  185. </view>
  186. <view class="more1" @click="goPage('/pages/cats/cats')">
  187. <view class="viewmore1_color main-center cross-center">更多荟享<image class=""
  188. src="https://t17.9026.com/web/statics/image/index/viewmore1.png" mode=""></image>
  189. </view>
  190. </view>
  191. </view>
  192. <view class="bottom_logo">
  193. <image src="https://t17.9026.com/web/statics/image/index/bottom_logo.png" mode=""></image>
  194. <view class="text">home shopping mall</view>
  195. </view>
  196. </view>
  197. </template>
  198. <script>
  199. import appScrollList from './components/scroll-list.vue'
  200. export default {
  201. components: {
  202. appScrollList
  203. },
  204. props:{
  205. homePages: {
  206. type: Object,
  207. default() {
  208. return {
  209. navs: [],
  210. };
  211. },
  212. },
  213. },
  214. data() {
  215. return {
  216. swiperKey: 0, //轮播位置
  217. list: [
  218. {
  219. image: 'https://t17.9026.com/web/statics/image/index/temporary/jhk-1634283687206.png',
  220. title: '热销方案',
  221. tag: '热销',
  222. link: '/pages/case/hot_sale_project'
  223. },
  224. {
  225. image: 'https://t17.9026.com/web/statics/image/index/temporary/jhk-1634284372084.png',
  226. title: '主题专区',
  227. tag: '主题',
  228. link: '/pages/case/themeArea'
  229. },
  230. {
  231. image: 'https://t17.9026.com/web/statics/image/index/temporary/jhk-1634283667210.png',
  232. title: '定制产品',
  233. tag: '定制',
  234. link: ''
  235. },
  236. {
  237. image: 'https://t17.9026.com/web/statics/image/index/2.png',
  238. title: '明星套装',
  239. tag: '套装'
  240. }
  241. ],
  242. jdlg: [{
  243. title: '兴城人居ins风套装',
  244. sub_title: '细节控·轻奢风',
  245. price: '65622',
  246. cover_image: '3',
  247. },
  248. {
  249. title: '风创造「最大坪效」85m²MUJI',
  250. sub_title: '细节控·轻奢风',
  251. price: '7486',
  252. cover_image: 'temporary/jhk-1634283447190'
  253. },
  254. {
  255. title: '85m²MUJI风创造「最大坪效」',
  256. sub_title: '细节控·轻奢风',
  257. price: '27853',
  258. cover_image: 'temporary/jhk-1634284367308'
  259. }
  260. ],
  261. qwe: [{
  262. 'title': '兴城人居',
  263. 'cover_image': 'jhk-1634283667210'
  264. }, {
  265. 'title': '世龙广场',
  266. 'cover_image': 'jhk-1634284372084'
  267. }, {
  268. 'title': '新中式',
  269. 'cover_image': 'jhk-1634283687206'
  270. }]
  271. }
  272. },
  273. created() {
  274. this.$store.dispatch('user/isEnterSales', false);
  275. },
  276. methods: {
  277. swiperChange(e) {
  278. console.log(e.detail.current)
  279. this.swiperKey = e.detail.current
  280. },
  281. goPage(url) {
  282. uni.navigateTo({
  283. url: url
  284. })
  285. }
  286. }
  287. }
  288. </script>
  289. <style lang="scss" scoped>
  290. @import './index.scss';
  291. .swiper_cent {
  292. position: relative;
  293. .swiper_zhishi {
  294. display: flex;
  295. align-items: center;
  296. width: 100%;
  297. justify-content: center;
  298. position: absolute;
  299. bottom: 39rpx;
  300. view {
  301. width: 81rpx;
  302. height: 4rpx;
  303. background: #c8c8c8;
  304. }
  305. .view_active {
  306. background: #f4f4f4;
  307. }
  308. }
  309. }
  310. </style>