lidaPage.vue 29 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343
  1. <template>
  2. <view class="index">
  3. <navbar :config="config" @searchClick="searchClick">
  4. <view slot="right" style="
  5. font-size: 36rpx;
  6. font-weight: 500;
  7. color: #ffffff;
  8. margin-right: 30rpx;
  9. ">
  10. <text class="iconfont" style="font-size: 40rpx;" @click="goToMsg()">
  11. &#xe66d;
  12. <view class="num" v-if="msgCenter==0?false:msgCenter">{{msgCenter}}</view>
  13. </text>
  14. </view>
  15. </navbar>
  16. <view class="top"></view>
  17. <view class="swiper">
  18. <view class="uni-margin-wrap">
  19. <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
  20. circular=ture>
  21. <swiper-item v-for="item in shopBanner" :key="item.id">
  22. <view class="swiper-item" @click="
  23. imgLink(item.model_type, item.model_id, item.url, item.shop_id)
  24. " mode="aspectFill">
  25. <image class="bannersize" :src="item.cover"></image>
  26. </view>
  27. </swiper-item>
  28. </swiper>
  29. </view>
  30. </view>
  31. <view class="list">
  32. <view class="item" @click="goDetail('/pages/research/nearby/timeLimit')">
  33. <image :src="imgUrl+'/index/alarmClock.png'" mode=""></image>
  34. <view class="font">限时秒杀</view>
  35. </view>
  36. <view class="item" @click="goDetail('/pages/research/homepage/groupList')">
  37. <image :src="imgUrl+'/index/spell.png'" mode=""></image>
  38. <view class="font">拼团</view>
  39. </view>
  40. <view class="item" @click="goDetail('/pages/pointsMall/index')">
  41. <image :src="imgUrl+'/index/integral.png'" mode=""></image>
  42. <view class="font">积分商城</view>
  43. </view>
  44. <!-- <view class="item" @click="goDetail('/pages/user/wallet/cardBag', true)">
  45. <image :src="imgUrl+'/index/oneCardSolution.png'" mode=""></image>
  46. <view class="font">一卡通</view>
  47. </view> -->
  48. <view class="item" @click="goDetail('/pages/research/nearby/facade')">
  49. <image :src="imgUrl+'/index/nearby.png'" mode=""></image>
  50. <view class="font">附近门店</view>
  51. </view>
  52. </view>
  53. <!-- 广告 -->
  54. <view class="advertisement" v-for='item in shopBanner2' :key="item.id" @click="
  55. imgLink(item.model_type, item.model_id, item.url)
  56. ">
  57. <image :src="item.cover" mode="aspectFill"></image>
  58. </view>
  59. <!-- 限时秒杀 -->
  60. <view class="seckill" v-if="currSeckill && currSeckill.length > 0">
  61. <view class="seckill-item">
  62. <view class="seckill-top" @click="goDetail('/pages/research/nearby/timeLimit')">
  63. <view class="left">限时秒杀</view>
  64. <view class="line" v-if="currTime"></view>
  65. <view class="time" v-if="currTime">{{ currTime }}点场 剩余</view>
  66. <view class="reciprocal" v-if="currTime">
  67. <uni-countdown :backgroundColor="'none'" @timeup="overDown2" :color="'#fff'"
  68. :splitorColor="'#fff'" :show-day="time2[0] > 0" :day="time2[0]" :hour="time2[1]"
  69. :minute="time2[2]" :second="time2[3]"></uni-countdown>
  70. </view>
  71. </view>
  72. <view class="option" v-if="currSeckill && currSeckill.length > 0">
  73. <swiper :indicator-dots="false" :autoplay="false" :display-multiple-items="itemsDis2"
  74. @change="imgActiveFun2" style="height: 220rpx" circular="true">
  75. <swiper-item class="option-item" @click="
  76. goProductDetails(
  77. '/pages/product/goods/seckillGoods?id=' + item.id
  78. )
  79. " v-for="item in currSeckill" :key="item.id">
  80. <!-- <view class="option-item" v-for="item in currSeckill" :key="item.id"> -->
  81. <image v-if="item && item.cover" :src="item.cover" mode=""></image>
  82. <view class="number">
  83. <rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
  84. </view>
  85. <!-- </view> -->
  86. </swiper-item>
  87. </swiper>
  88. <view class="slide-box">
  89. <view class="dotBox" :style="{ marginLeft: ml2 + 'rpx' }" v-if="currSeckill.length > 0">
  90. <view class="dotBox_item" v-for="(v, i) in keyList2" :key="i"
  91. :class="{ active_dotBox: activeBannerIndex2 == i }"></view>
  92. </view>
  93. </view>
  94. </view>
  95. <!-- <view class="scroll" v-if="currSeckill && currSeckill.length > 0"
  96. ><view class="scroll-red"></view
  97. ></view> -->
  98. <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
  99. </view>
  100. </view>
  101. <!-- 拼团购 -->
  102. <view class="group-work" v-if="groupList && groupList.length > 0">
  103. <view class="work-top" @click="goDetail('/pages/research/homepage/groupList')">
  104. <view class="top-left">拼团购</view>
  105. <view class="top-right" style="color: #999999;">
  106. 查看更多
  107. <text class="iconfont u-font24 u-999"style="margin-left: 10rpx;">&#xe6c7;</text>
  108. </view>
  109. </view>
  110. <view v-if="groupList && groupList.length > 0">
  111. <view class="middle" v-for="item in groupList" :key="item.id" @click="
  112. goProductDetails('/pages/product/goods/puzzleGoods?id=' + item.id)
  113. ">
  114. <view class="middle-left">
  115. <image v-if="item && item.cover" :src="item.cover" mode=""></image>
  116. </view>
  117. <view class="middle-right">
  118. <view class="middle-title u-text2">{{ item.title }}</view>
  119. <view class="division">
  120. <view class="middle-num">
  121. <view class="contain">
  122. <view class="large">
  123. <rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
  124. </view>
  125. <view class="small">¥ {{ item.min_sale_price }}</view>
  126. </view>
  127. <view class="three">{{ item.group_people_num }}人团,已拼 <text style="color: #FF0000;">
  128. {{item.result_sale_num}}</text> 件</view>
  129. </view>
  130. <view class="button">去拼团</view>
  131. </view>
  132. </view>
  133. </view>
  134. </view>
  135. <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
  136. </view>
  137. <!-- 热门推荐 -->
  138. <view class="hot">
  139. <view class="hot-top">
  140. <view class="hot-left">热门推荐</view>
  141. <view class="hot-body"></view>
  142. <view class="hot-right">精选好物推荐</view>
  143. </view>
  144. <view class="hot-item" v-if="recommendList && recommendList.length > 0">
  145. <view class="item" v-for="item in recommendList" :key="item.id"
  146. @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)">
  147. <image v-if="item && item.cover" :src="item.cover" mode=""></image>
  148. <view class="hot-introduce" v-if="item && item.title">{{
  149. item.title
  150. }}</view>
  151. <view class="hot-number">
  152. <view class="hot-large">
  153. <rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
  154. </view>
  155. <view class="hot-small">¥{{ item.max_market_price }}</view>
  156. </view>
  157. </view>
  158. </view>
  159. <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
  160. </view>
  161. <!-- 每周上新 -->
  162. <view class="new-products">
  163. <view class="new-top">
  164. <view class="new-left">每周上新</view>
  165. <view class="new-line"></view>
  166. <view class="new-right">新品上市优惠热销</view>
  167. </view>
  168. <view class="new-list" v-if="newsList && newsList.length > 0">
  169. <view class="item" v-for="item in newsList" :key="item.id"
  170. @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)">
  171. <image v-if="item && item.cover" :src="item.cover" mode=""></image>
  172. <view class="list-num">
  173. <rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
  174. </view>
  175. </view>
  176. </view>
  177. <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
  178. </view>
  179. <!-- 本月热销 -->
  180. <view class="new-products">
  181. <view class="new-top">
  182. <view class="new-left">本月热销</view>
  183. <view class="new-line"></view>
  184. <view class="new-right">爆品热卖中</view>
  185. </view>
  186. <view v-if="hotList && hotList.length > 0">
  187. <swiper class="month-list" :indicator-dots="false" :autoplay="false" :display-multiple-items="itemsDis"
  188. @change="imgActiveFun" circular="true">
  189. <swiper-item class="item" @click="
  190. goProductDetails('/pages/product/goods/goods?id=' + item.id)
  191. " v-for="item in hotList" :key="item.id">
  192. <image v-if="item && item.cover" :src="item.cover" mode=""></image>
  193. <view class="list-num">
  194. <rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
  195. </view>
  196. <view class="sold">已售{{ item.result_sale_num }}件</view>
  197. </swiper-item>
  198. </swiper>
  199. <view class="slide-box">
  200. <view class="dotBox" v-if="hotList.length > 0">
  201. <!-- 上面给的动态样式 :style="{ marginLeft: ml + 'rpx' }" -->
  202. <!-- v-for="(v, i) in hotList.slice(0,hotList.length-2)" -->
  203. <view class="dotBox_item" v-for="(v, i) in hotList" :key="i"
  204. :class="{ active_dotBox: activeBannerIndex == i }"></view>
  205. </view>
  206. </view>
  207. </view>
  208. <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
  209. </view>
  210. <!-- 本月热销 -->
  211. <!-- 猜你喜欢 -->
  212. <view class="guess">
  213. <view class="guess-top">
  214. <view class="guess-left">猜你喜欢</view>
  215. <view class="guess-line"></view>
  216. <view class="guess-right">智能推荐你感兴趣的优品</view>
  217. </view>
  218. <view class="guess-item" v-if="goodsList && goodsList.length > 0">
  219. <view class="item" @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)"
  220. v-for="item in goodsList" :key="item.id">
  221. <image v-if="item && item.cover" :src="item.cover" mode=""></image>
  222. <view style=" padding-bottom: 40rpx;">
  223. <view class="name" style="flex: 1;">{{ item.title }}</view>
  224. <view class="number">
  225. <view class="number-red">
  226. <rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
  227. </view>
  228. <view class="number-grey">¥{{ item.max_market_price }}</view>
  229. </view>
  230. </view>
  231. </view>
  232. </view>
  233. <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
  234. <loadMore v-if="goodsList.length > 0" :status="status"></loadMore>
  235. </view>
  236. <!-- 猜你喜欢 -->
  237. </view>
  238. </template>
  239. <script>
  240. export default {
  241. data() {
  242. return {
  243. background: ["color1", "color2", "color3"],
  244. indicatorDots: true,
  245. autoplay: true,
  246. interval: 2000,
  247. duration: 500,
  248. config: {
  249. back: false, //false是tolbar页面 是则不写
  250. title: "商品列表",
  251. color: "#FFFFFF",
  252. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  253. backgroundColor: [1, "#0B844A"],
  254. // rightButton:[{
  255. // key:'btn1',
  256. // position:"left",
  257. // icon:'&#xe6eb;'
  258. // }],
  259. rightSlot: true,
  260. search: {
  261. disabled:true,
  262. value: "",
  263. placeholder: "请输入搜索关键字",
  264. },
  265. },
  266. keyWord: "",
  267. groupList: [], //团购
  268. hotList: [], //本月热销
  269. newsList: [], //每周上新
  270. recommendList: [], //推荐
  271. shopBanner: [], //轮播图
  272. currSeckill: [], //秒杀
  273. time2: [0, 0, 0, 0], //秒杀倒计时
  274. goodsList: [], //猜你喜欢
  275. currTime: null,
  276. keyList: 0,
  277. ml: -22,
  278. itemsDis: 1,
  279. activeBannerIndex: 0,
  280. keyList2: 0,
  281. ml2: -22,
  282. itemsDis2: 1,
  283. activeBannerIndex2: 0,
  284. page: 1,
  285. status: "more",
  286. isOver2: false,
  287. msgCenter: null,
  288. shopBanner2: [],
  289. imgUrl: this.$mConfig.staticUrl
  290. };
  291. },
  292. onLoad() {
  293. this.page = 1;
  294. this.getAll();
  295. },
  296. onShow() {
  297. this.getmessageNum()
  298. },
  299. onPullDownRefresh() {
  300. this.page = 1;
  301. // uni.showModal({
  302. // title:'onPullDownRefresh'
  303. // })
  304. this.getAll();
  305. // uni.stopPullDownRefresh();
  306. },
  307. onReachBottom() {
  308. this.status = "loading";
  309. this.page++;
  310. this.guessLike();
  311. },
  312. methods: {
  313. //跳转消息页面
  314. goToMsg() {
  315. let token = uni.getStorageSync("apiToken")
  316. if (!token) {
  317. uni.navigateTo({
  318. url: "../register/login"
  319. })
  320. } else {
  321. uni.navigateTo({
  322. url: "../setup/myMsg"
  323. })
  324. }
  325. },
  326. searchClick() {
  327. // console.log("dian");
  328. uni.navigateTo({
  329. url: "/pages/research/homepage/search",
  330. });
  331. },
  332. goProductDetails(url) {
  333. uni.navigateTo({
  334. url: url,
  335. });
  336. },
  337. changeIndicatorDots(e) {
  338. this.indicatorDots = !this.indicatorDots;
  339. },
  340. changeAutoplay(e) {
  341. this.autoplay = !this.autoplay;
  342. },
  343. intervalChange(e) {
  344. this.interval = e.detail.value;
  345. },
  346. durationChange(e) {
  347. this.duration = e.detail.value;
  348. },
  349. getAll() {
  350. this.rest();
  351. // this.getmessageNum();
  352. this.getBanner();
  353. this.seckillList();
  354. this.getgroupList();
  355. this.recommend();
  356. this.newWeek();
  357. this.hotSale();
  358. this.guessLike();
  359. },
  360. /**获得消息数量 */
  361. getmessageNum() {
  362. let token = uni.getStorageSync("apiToken")
  363. if (token) {
  364. this.$http.get("/private/message/unread-num").then(res => {
  365. if (res && res.code == 200) {
  366. this.msgCenter = res.data
  367. }
  368. })
  369. }
  370. },
  371. /**轮播图 */
  372. getBanner() {
  373. this.$http
  374. .get(`/ad/ad/getShopAdByAdL/0/pt-banner`, {}, false)
  375. .then((res) => {
  376. console.log(res)
  377. console.log('轮播图')
  378. uni.stopPullDownRefresh();
  379. this.loading = false;
  380. if (res && res.code == 200) {
  381. this.shopBanner = res.list;
  382. }
  383. })
  384. .catch(err => {
  385. // console.log(err)
  386. });
  387. this.$http
  388. .get(`/ad/ad/getShopAdByAdL/0/pt-banner2`, {}, false)
  389. .then((res) => {
  390. uni.stopPullDownRefresh();
  391. this.loading = false;
  392. if (res && res.code == 200) {
  393. this.shopBanner2 = res.list;
  394. }
  395. });
  396. },
  397. imgActiveFun(e) {
  398. this.activeBannerIndex = e.detail.current;
  399. },
  400. imgActiveFun2(e) {
  401. this.activeBannerIndex2 = e.detail.current;
  402. },
  403. overDown2() {
  404. this.isOver2 = true;
  405. },
  406. /**限时秒杀 */
  407. seckillList() {
  408. this.$http
  409. .get(
  410. `/marketing/seckillActivityGoods/flash-sale`, {
  411. limit: 10,
  412. page: 1
  413. },
  414. false
  415. )
  416. .then((res) => {
  417. if (res && res.code == 200) {
  418. this.currTime = res.data.start_hour;
  419. this.currSeckill = res.data.list;
  420. if (this.currSeckill && res.data.list.length <= 4) {
  421. this.keyList2 = 1;
  422. this.itemsDis2 = res.data.list.length;
  423. }
  424. if (
  425. this.currSeckill &&
  426. res.data.list.length > 4 &&
  427. res.data.list.length <= 8
  428. ) {
  429. this.keyList2 = 2;
  430. this.ml2 = -45;
  431. this.itemsDis2 = 3;
  432. }
  433. if (
  434. this.currSeckill &&
  435. res.data.list.length > 8 &&
  436. res.data.list.length <= 12
  437. ) {
  438. this.keyList2 = 3;
  439. this.ml2 = -68;
  440. this.itemsDis2 = 3;
  441. }
  442. if (
  443. this.currSeckill &&
  444. res.data.list.length > 12 &&
  445. res.data.list.length <= 16
  446. ) {
  447. this.keyList2 = 4;
  448. this.ml2 = -90;
  449. this.itemsDis2 = 3;
  450. }
  451. if (res.data.finish_time) {
  452. this.time2 = this.$mUtil
  453. .countDown(Math.floor(res.data.finish_time / 1000))
  454. .split(":")
  455. .map((val) => Number(val));
  456. }
  457. }
  458. });
  459. },
  460. /**团购 */
  461. getgroupList() {
  462. this.$http
  463. .get(
  464. `/groupbuy/activitygoods/will-you-spell`, {
  465. limit: 10,
  466. page: 1
  467. },
  468. false
  469. )
  470. .then((res) => {
  471. if (res && res.code == 200) {
  472. this.groupList = res.list;
  473. }
  474. });
  475. },
  476. /**热门推荐 */
  477. recommend() {
  478. this.$http
  479. .get(`/goods/new`, {
  480. limit: 6,
  481. type: "hot"
  482. }, false)
  483. .then((res) => {
  484. if (res && res.code == 200) {
  485. this.recommendList = res.list;
  486. }
  487. });
  488. },
  489. /**每周上新 */
  490. newWeek() {
  491. this.$http.get(`/goods/new`, {
  492. limit: 16
  493. }, false).then((res) => {
  494. if (res && res.code == 200) {
  495. this.newsList = res.list;
  496. }
  497. });
  498. },
  499. /**本月热销 */
  500. hotSale() {
  501. this.$http
  502. .get(`/goods/month`, {
  503. limit: 12,
  504. mix_num: 3
  505. }, false)
  506. .then((res) => {
  507. if (res && res.code == 200) {
  508. this.hotList = res.list;
  509. if (res.list.length <= 3) {
  510. this.keyList = 1;
  511. this.itemsDis = res.list.length;
  512. }
  513. if (res.list.length > 3 && res.list.length <= 6) {
  514. this.keyList = 2;
  515. this.ml = -45;
  516. this.itemsDis = 3;
  517. }
  518. if (res.list.length > 6 && res.list.length <= 9) {
  519. this.keyList = 3;
  520. this.ml = -68;
  521. this.itemsDis = 3;
  522. }
  523. if (res.list.length > 9 && res.list.length <= 12) {
  524. this.keyList = 4;
  525. this.ml = -90;
  526. this.itemsDis = 3;
  527. }
  528. }
  529. });
  530. },
  531. /**猜你喜欢 */
  532. guessLike() {
  533. this.keyWord = uni.getStorageSync("history") ? uni.getStorageSync("history").join(",") : ''
  534. this.$http
  535. .get(
  536. `/goods/smart`, {
  537. page: this.page,
  538. limit: 6,
  539. keywords: this.keyWord,
  540. },
  541. false
  542. )
  543. .then((res) => {
  544. if (res && res.code == 200) {
  545. this.goodsList = this.page == 1 ? res.page.list : this.goodsList.concat(res.page.list);
  546. if (res.page.totalPage <= res.page.currPage) {
  547. this.status = "noMore";
  548. } else {
  549. this.status = "more";
  550. }
  551. }
  552. });
  553. },
  554. /**轮播图跳转 */
  555. imgLink(type, id, url, shopid) {
  556. if (type == "goods") {
  557. uni.navigateTo({
  558. url: "/pages/product/goods/goods?id=" + id + "&shopid=" + shopid,
  559. });
  560. } else if (type == "service") {
  561. uni.navigateTo({
  562. url: "/pages/product/goods/serviceGood?id=" + id
  563. });
  564. } else if (type == "url") {
  565. if(/^http/.test(url)){
  566. uni.navigateTo({
  567. url: "/pages/index/webView?linkUrl=" + url,
  568. });ef
  569. }else{
  570. uni.navigateTo({
  571. url
  572. });
  573. }
  574. }
  575. },
  576. goDetail(url, isNeedLogin) {
  577. if ((isNeedLogin && uni.getStorageSync("apiToken") == "") || null) {
  578. this.$mUtil.toast("请先登录");
  579. return false;
  580. }
  581. uni.navigateTo({
  582. url: url,
  583. });
  584. },
  585. /**重置数据*/
  586. rest() {
  587. this.goodsList = [];
  588. this.currSeckill = [];
  589. this.shopBanner = [];
  590. this.recommendList = [];
  591. this.newsList = [];
  592. this.hotList = [];
  593. this.groupList = [];
  594. },
  595. },
  596. };
  597. </script>
  598. <style scoped lang="scss">
  599. .swiper {
  600. /deep/ .uni-swiper-dot {
  601. width: 40rpx !important;
  602. height: 8rpx;
  603. border-radius: 5rpx !important;
  604. background-color: #ffffff !important;
  605. opacity: 0.5;
  606. }
  607. /deep/ .uni-swiper-dot-active {
  608. background-color: #ffffff !important;
  609. opacity: 1;
  610. }
  611. }
  612. /deep/.hx-navbar__content__main_search_hxicon {
  613. span {
  614. font-size: 30rpx;
  615. }
  616. }
  617. /deep/.uni-input-placeholder {
  618. background-color: #4A705D;
  619. color: #193E2C !important;
  620. font-size: 22rpx;
  621. }
  622. /deep/.hx-navbar__content__main_search_input {
  623. background-color: #4A705E;
  624. }
  625. .bannersize {
  626. display: block;
  627. border-radius: 20rpx;
  628. overflow: hidden;
  629. width: 100%;
  630. height: 340rpx;
  631. }
  632. .guess {
  633. margin: 0 30rpx;
  634. .guess-item {
  635. display: flex;
  636. // justify-content: space-around;
  637. flex-wrap: wrap;
  638. .item {
  639. margin-bottom: 36rpx;
  640. border-radius: 18rpx;
  641. background-color: #ffffff;
  642. border-radius: 18rpx;
  643. overflow: hidden;
  644. display: flex;
  645. flex-direction:column ;
  646. justify-content: space-between;
  647. image {
  648. width: 336rpx;
  649. height: 336rpx;
  650. }
  651. .name {
  652. margin: 6rpx 20rpx;
  653. width: 296rpx;
  654. overflow: hidden;
  655. text-overflow: ellipsis;
  656. display: -webkit-box;
  657. -webkit-line-clamp: 2;
  658. -webkit-box-orient: vertical;
  659. word-wrap: break-word;
  660. word-break: break-all;
  661. white-space: normal !important;
  662. }
  663. .number {
  664. display: flex;
  665. align-items: flex-end;
  666. // padding-bottom: 40rpx;
  667. margin: 10rpx 20rpx 0 20rpx;
  668. .number-red {
  669. color: #ed3d07;
  670. font-size: 36rpx;
  671. font-weight: 500;
  672. text {
  673. font-size: 36rpx;
  674. font-weight: Bold;
  675. }
  676. }
  677. .number-grey {
  678. color: #999999;
  679. font-size: 22rpx;
  680. font-weight: 400;
  681. text-decoration: line-through;
  682. margin-left: 16rpx;
  683. }
  684. }
  685. }
  686. .item:nth-child(2n){
  687. margin-left: 18rpx;
  688. }
  689. }
  690. .guess-top {
  691. display: flex;
  692. align-items: center;
  693. margin-bottom: 24rpx;
  694. .guess-left {
  695. font-size: 36rpx;
  696. color: #1a1a1a;
  697. font-weight: Bold;
  698. line-height: 30rpx;
  699. }
  700. .guess-line {
  701. width: 1rpx;
  702. height: 32rpx;
  703. background-color: #707070;
  704. margin: 0 16rpx;
  705. }
  706. .guess-right {
  707. font-size: 24rpx;
  708. color: #666666;
  709. font-weight: Regular;
  710. line-height: 24rpx;
  711. }
  712. }
  713. }
  714. .new-products {
  715. margin: 50rpx 30rpx;
  716. .new-list {
  717. display: flex;
  718. overflow: scroll;
  719. white-space: nowrap;
  720. .item {
  721. margin-right: 20rpx;
  722. margin-top: 28rpx;
  723. margin-bottom: 28rpx;
  724. text-align: center;
  725. image {
  726. border: 1rpx solid #e6e6e6;
  727. width: 172rpx;
  728. height: 172rpx;
  729. }
  730. .list-num {
  731. margin-top: 16rpx;
  732. font-size: 36rpx;
  733. line-height: 24rpx;
  734. color: #ff0000;
  735. font-weight: Bold;
  736. text {
  737. font-size: 32rpx;
  738. }
  739. }
  740. }
  741. }
  742. .montn-scroll {
  743. margin: 0 auto;
  744. border-radius: 6rpx;
  745. width: 124rpx;
  746. height: 14rpx;
  747. background-color: #dddddd;
  748. border-radius: 7rpx;
  749. text-align: center;
  750. .montn-red {
  751. width: 50rpx;
  752. border-radius: 6rpx;
  753. height: 14rpx;
  754. background-color: #ff0000;
  755. }
  756. }
  757. .month-list {
  758. // display: flex;
  759. // overflow: scroll;
  760. // white-space: nowrap;
  761. position: relative;
  762. padding-bottom: 20rpx;
  763. height: 350rpx;
  764. /deep/ uni-swiper {
  765. height: 350rpx;
  766. }
  767. .item {
  768. margin: 28rpx 20rpx 28rpx 0;
  769. text-align: center;
  770. height: 350rpx;
  771. image {
  772. width: 216rpx;
  773. height: 216rpx;
  774. border-radius: 16rpx;
  775. }
  776. .list-num {
  777. margin-top: 16rpx;
  778. font-size: 36rpx;
  779. line-height: 24rpx;
  780. color: #ff0000;
  781. font-weight: bold;
  782. text {
  783. font-size: 32rpx;
  784. }
  785. }
  786. .sold {
  787. font-size: 22rpx;
  788. font-weight: Medium;
  789. line-height: 24rpx;
  790. color: #999999;
  791. margin-top: 8rpx;
  792. }
  793. }
  794. }
  795. .new-top {
  796. display: flex;
  797. align-items: center;
  798. .new-left {
  799. font-size: 36rpx;
  800. color: #1a1a1a;
  801. font-weight: Bold;
  802. line-height: 30rpx;
  803. }
  804. .new-line {
  805. width: 1rpx;
  806. height: 33rpx;
  807. background-color: #707070;
  808. margin: 0 16rpx;
  809. }
  810. .new-right {
  811. font-size: 24rpx;
  812. color: #666666;
  813. font-weight: Regular;
  814. line-height: 24rpx;
  815. }
  816. }
  817. }
  818. .slide-box {
  819. display: flex;
  820. justify-content: center;
  821. }
  822. .dotBox {
  823. // position: absolute;
  824. // bottom: 0rpx;
  825. // left: 50%;
  826. // margin: 0 auto;
  827. height: 14rpx;
  828. overflow: hidden;
  829. border-radius: 14rpx;
  830. background-color: #ccc;
  831. display: flex;
  832. justify-content: center;
  833. .dotBox_item {
  834. width: 45rpx;
  835. height: 14rpx;
  836. border-radius: 2rpx;
  837. background-color: #ccc;
  838. transition: all 0.5s;
  839. }
  840. .active_dotBox {
  841. width: 45rpx;
  842. background: rgba(254, 70, 3, 1);
  843. transition: all 0.5s;
  844. }
  845. }
  846. .hot {
  847. margin: 0 30rpx;
  848. .hot-item {
  849. display: flex;
  850. overflow: scroll;
  851. white-space: nowrap;
  852. .hot-number {
  853. display: flex;
  854. align-items: flex-end;
  855. margin-top: 10rpx;
  856. }
  857. .hot-large {
  858. color: #ff0000;
  859. font-size: 36rpx;
  860. font-weight: Bold;
  861. line-height: 24rpx;
  862. text {
  863. font-size: 36rpx;
  864. margin-left: 10rpx;
  865. }
  866. }
  867. .hot-small {
  868. font-size: 22rpx;
  869. font-weight: Medium;
  870. line-height: 24rpx;
  871. color: #cccccc;
  872. margin-left: 16rpx;
  873. }
  874. .hot-introduce {
  875. overflow: hidden;
  876. word-break: break-all;
  877. margin-top: 24rpx;
  878. // width: 240rpx;
  879. font-size: 24rpx;
  880. font-weight: Regular;
  881. line-height: 34rpx;
  882. color: #333333;
  883. text-overflow: ellipsis;
  884. display: -webkit-box;
  885. -webkit-line-clamp: 2;
  886. -webkit-box-orient: vertical;
  887. word-wrap: break-word;
  888. white-space: normal !important;
  889. }
  890. .item {
  891. padding: 20rpx;
  892. background-color: #ffffff;
  893. border-radius: 16rpx;
  894. margin-right: 20rpx;
  895. }
  896. display: flex;
  897. margin-top: 27rpx;
  898. image {
  899. width: 252rpx;
  900. height: 252rpx;
  901. border-radius: 16rpx;
  902. }
  903. }
  904. .hot-top {
  905. display: flex;
  906. align-items: center;
  907. .hot-left {
  908. font-size: 36rpx;
  909. font-weight: Bold;
  910. color: #1a1a1a;
  911. line-height: 30rpx;
  912. }
  913. .hot-body {
  914. width: 1rpx;
  915. height: 32rpx;
  916. background-color: #707070;
  917. margin: 0 16rpx 0 14rpx;
  918. }
  919. .hot-right {
  920. font-size: 24rpx;
  921. font-weight: Regular;
  922. line-height: 24rpx;
  923. color: #666666;
  924. }
  925. }
  926. }
  927. .middle:last-child {
  928. border: none;
  929. }
  930. .middle {
  931. display: flex;
  932. border-bottom: 1rpx solid #e6e6e6;
  933. padding-bottom: 40rpx;
  934. padding-top: 42rpx;
  935. .middle-left {
  936. margin-right: 20rpx;
  937. image {
  938. width: 226rpx;
  939. height: 226rpx;
  940. border-radius: 10rpx;
  941. }
  942. }
  943. .middle-right {
  944. width: 100%;
  945. display: flex;
  946. flex-direction: column;
  947. justify-content: space-between;
  948. margin-top: 10rpx;
  949. .middle-title {
  950. font-size: 28rpx;
  951. margin-top: 10rpx;
  952. color: #181818;
  953. font-weight: 400;
  954. line-height: 36rpx;
  955. }
  956. .division {
  957. display: flex;
  958. // margin-top: 60rpx;
  959. width: 100%;
  960. padding-bottom: 10rpx;
  961. justify-content: space-between;
  962. }
  963. .middle-num {
  964. flex: 1;
  965. .contain {
  966. display: flex;
  967. align-items: flex-end;
  968. }
  969. .three {
  970. font-size: 24rpx;
  971. font-weight: Regular;
  972. color: #333333;
  973. line-height: 24rpx;
  974. margin-top: 8rpx;
  975. }
  976. .large {
  977. color: #ff0000;
  978. font-size: 36rpx;
  979. font-weight: Bold;
  980. line-height: 24rpx;
  981. text {
  982. font-size: 36rpx;
  983. }
  984. }
  985. .small {
  986. margin-left: 16rpx;
  987. font-size: 22rpx;
  988. font-weight: 500;
  989. color: #cccccc;
  990. line-height: 24rpx;
  991. text-decoration: line-through;
  992. }
  993. }
  994. .button {
  995. padding: 10rpx 25rpx 10rpx 25rpx;
  996. color: #d5c49b;
  997. font-size: 28rpx;
  998. font-weight: Medium;
  999. background-color: #0B844A;
  1000. border-radius: 32rpx;
  1001. }
  1002. }
  1003. }
  1004. .group-work {
  1005. margin: 50rpx 30rpx;
  1006. border-radius: 16rpx;
  1007. background-color: #ffffff;
  1008. padding: 30rpx;
  1009. .work-top {
  1010. padding-bottom: 20rpx;
  1011. margin-bottom: 10rpx;
  1012. display: flex;
  1013. justify-content: space-between;
  1014. align-items: center;
  1015. border-bottom: 1rpx solid #e6e6e6;
  1016. .top-left {
  1017. font-size: 36rpx;
  1018. font-weight: Bold;
  1019. color: #1a1a1a;
  1020. line-height: 30rpx;
  1021. }
  1022. .top-right {
  1023. color: #333333;
  1024. font-size: 24rpx;
  1025. font-weight: Regular;
  1026. .iconfont {
  1027. color: #666666;
  1028. }
  1029. }
  1030. }
  1031. }
  1032. .seckill {
  1033. margin: 50rpx 30rpx;
  1034. .seckill-item {
  1035. border-radius: 16rpx;
  1036. .scroll {
  1037. margin: 26rpx auto 26rpx auto;
  1038. width: 124rpx;
  1039. height: 14rpx;
  1040. background-color: #ededed;
  1041. border-radius: 8rpx;
  1042. .scroll-red {
  1043. width: 50rpx;
  1044. height: 14rpx;
  1045. background-color: red;
  1046. border-radius: 8rpx;
  1047. }
  1048. }
  1049. background-color: #ffffff;
  1050. padding: 0 28rpx 26rpx 28rpx;
  1051. .option {
  1052. // display: flex;
  1053. position: relative;
  1054. // padding: 12rpx 20rpx;
  1055. margin-top: 20rpx;
  1056. /deep/ .uni-swiper-slide-frame {
  1057. width: 26% !important;
  1058. }
  1059. .option-item {
  1060. margin-right: 22rpx;
  1061. image {
  1062. width: 140rpx;
  1063. height: 140rpx;
  1064. }
  1065. .number {
  1066. margin-top: 4rpx;
  1067. text-align: center;
  1068. font-size: 36rpx;
  1069. font-weight: Bold;
  1070. line-height: 24rpx;
  1071. color: #333333;
  1072. text {
  1073. font-size: 28rpx;
  1074. font-weight: Medium;
  1075. }
  1076. }
  1077. }
  1078. }
  1079. .seckill-top {
  1080. padding: 24rpx 0;
  1081. display: flex;
  1082. align-items: center;
  1083. border-bottom: 1rpx solid #e6e6e6;
  1084. .left {
  1085. font-size: 36rpx;
  1086. font-weight: Bold;
  1087. color: #1a1a1a;
  1088. margin-right: 14rpx;
  1089. }
  1090. .line {
  1091. width: 1rpx;
  1092. height: 32rpx;
  1093. background-color: #707070;
  1094. }
  1095. .time {
  1096. margin-left: 16rpx;
  1097. color: #666666;
  1098. font-size: 24rpx;
  1099. font-weight: Regular;
  1100. }
  1101. .reciprocal {
  1102. color: #ffffff;
  1103. padding: 0 14rpx;
  1104. background-color: #ff0000;
  1105. font-size: 24rpx;
  1106. font-weight: Bold;
  1107. border-radius: 16rpx;
  1108. margin-left: 30rpx;
  1109. }
  1110. }
  1111. }
  1112. }
  1113. .advertisement {
  1114. margin: 50rpx 30rpx;
  1115. image {
  1116. width: 690rpx;
  1117. height: 156rpx;
  1118. border-radius: 28rpx;
  1119. }
  1120. }
  1121. .list {
  1122. margin: 44rpx 30rpx;
  1123. display: flex;
  1124. justify-content: space-between;
  1125. .item {
  1126. text-align: center;
  1127. image {
  1128. width: 100rpx;
  1129. height: 100rpx;
  1130. }
  1131. }
  1132. }
  1133. .item-red {
  1134. background: #f76260;
  1135. color: #fff;
  1136. }
  1137. .item-green {
  1138. background: #09bb07;
  1139. color: #fff;
  1140. }
  1141. .item-blue {
  1142. background: #007aff;
  1143. color: #fff;
  1144. }
  1145. .swiper {
  1146. margin: 30rpx;
  1147. }
  1148. .index {
  1149. position: relative;
  1150. background-color: #eeeeee;
  1151. overflow-x: hidden;
  1152. .top {
  1153. position: absolute;
  1154. top: 0;
  1155. left: -13%;
  1156. width: 126%;
  1157. overflow-x: hidden;
  1158. height: 400rpx;
  1159. border-radius: 0 0 50% 50%;
  1160. background-color: rgba(0, 50, 30, 1);
  1161. }
  1162. }
  1163. .iconfont {
  1164. position: relative;
  1165. }
  1166. .num {
  1167. position: absolute;
  1168. top: -20rpx;
  1169. left: -20rpx;
  1170. background-color: #ff0000;
  1171. padding: 2rpx 10rpx;
  1172. border-radius: 14rpx;
  1173. font-size: 20rpx;
  1174. font-weight: 400;
  1175. color: #ffffff;
  1176. }
  1177. .uni-margin-wrap {
  1178. width: 690rpx;
  1179. }
  1180. .swiper {
  1181. height: 340rpx;
  1182. }
  1183. .swiper-item {
  1184. display: block;
  1185. height: 300rpx;
  1186. line-height: 300rpx;
  1187. text-align: center;
  1188. border-radius: 20rpx;
  1189. }
  1190. .swiper-list {
  1191. margin-top: 40rpx;
  1192. margin-bottom: 0;
  1193. }
  1194. .uni-common-mt {
  1195. margin-top: 60rpx;
  1196. position: relative;
  1197. }
  1198. .info {
  1199. position: absolute;
  1200. right: 20rpx;
  1201. }
  1202. .uni-padding-wrap {
  1203. width: 550rpx;
  1204. padding: 0 100rpx;
  1205. }
  1206. </style>