index.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344
  1. <template>
  2. <view class="container">
  3. <view class="carousel-section">
  4. <!-- 背景色区域 -->
  5. <!-- <view class="bg"></view> -->
  6. <!-- 标题栏和状态栏占位符 -->
  7. <!-- <view class="titleNview-placing"></view> -->
  8. <!-- 搜素栏 -->
  9. <view class="search flex">
  10. <view class="input-box flex" @click.stop="clickSearch">
  11. <view class=" input-content flex">
  12. <view class="iconfont iconsearch"></view>
  13. <view class="input"><input type="text" disabled value="输入关键字搜索" /></view>
  14. </view>
  15. </view>
  16. </view>
  17. <swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange"
  18. :indicator-dots="true" indicator-active-color="#FFFFFF">
  19. <!-- <swiper class="carousel" autoplay="true" duration="400" interval="5000"> -->
  20. <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
  21. <image :src="item.pic" mode="aspectFill" @click="bannerNavToUrl(item)"></image>
  22. </swiper-item>
  23. </swiper>
  24. </view>
  25. <view class="shop-list flex">
  26. <view class="shop-item flex" v-for="(item,index) in shopList" @click="$api.msg('功能建设中,敬请期待')">
  27. <image :src="'../../static/icon/sc0' + (index + 1) + '.png'" mode="" class="shop-img"></image>
  28. <view class="shop-name">
  29. {{item.name}}
  30. </view>
  31. </view>
  32. </view>
  33. <!-- 商品列表 -->
  34. <view class="" style="background: #fff;margin-top: 20rpx;padding-bottom: 20rpx;">
  35. <view class="title-wrapper flex">
  36. <image src="../../static/icon/shop-logo.png" mode=""></image>
  37. <view class="">礼包商品</view>
  38. <view class="title-b">超值体验</view>
  39. </view>
  40. <view class="gift-info">
  41. <view class="" style="padding-top: 20rpx;font-weight: bold;font-size: 32rpx;">
  42. 最强商家联盟
  43. </view>
  44. <view class="">
  45. 买到就是赚到
  46. </view>
  47. </view>
  48. <view class="gift-good-list p-r">
  49. <view class="gift-list p-a flex f-j-s">
  50. <view class="gift-item flex f-d-c f-j-c" v-for="item in goodList"
  51. @click="navto('/pages/product/product?id=' + item.id)">
  52. <image :src="item.image" mode=""></image>
  53. <view class="gift-name clamp">
  54. {{item.store_name}}
  55. </view>
  56. <view class="gift-price">
  57. ¥{{item.price}}
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </template>
  65. <script>
  66. import {
  67. lookSubpoints,
  68. lookOneself
  69. } from '../../api/user.js';
  70. import seckill from '../../components/seckill/seckill.vue';
  71. import {
  72. loadIndexs,
  73. getVip
  74. } from '@/api/index.js';
  75. import {
  76. getUserInfo,
  77. spread
  78. } from '@/api/user.js';
  79. import {
  80. setCoupons
  81. } from '@/api/functionalUnit.js';
  82. import {
  83. getBargainList,
  84. getProducts
  85. } from '@/api/product.js';
  86. import {
  87. interceptor
  88. } from '@/utils/loginUtils';
  89. import {
  90. mapState,
  91. mapMutations
  92. } from 'vuex';
  93. import {
  94. tabbar
  95. } from '@/utils/tabbar.js';
  96. // #ifdef H5
  97. import {
  98. weixindata,
  99. shareLoad
  100. } from '@/utils/wxAuthorized';
  101. // #endif
  102. export default {
  103. components: {
  104. seckill
  105. },
  106. data() {
  107. return {
  108. tabbar: tabbar,
  109. current: 0,
  110. shareShow: false, //分享海报
  111. pageProportion: 0, //保存页面基于750宽度的比例
  112. swiperHeight: 0,
  113. checkid: 0,
  114. titleNViewBackground: '',
  115. longitude: 0, //经度
  116. latitude: 0, //纬度
  117. swiperCurrent: 0,
  118. swiperLength: 0,
  119. carouselList: [], //轮播列表
  120. bastList: [], //会员礼包
  121. shoplist: [], //商店列表
  122. page: 1,
  123. limit: 5,
  124. vipList: [], //vip商品
  125. firstList: [],
  126. goodList: [],
  127. shopList: [{
  128. sid: 0,
  129. name: "美食"
  130. },
  131. {
  132. sid: 0,
  133. name: "电影"
  134. },
  135. {
  136. sid: 0,
  137. name: "娱乐"
  138. },
  139. {
  140. sid: 0,
  141. name: "美发"
  142. },
  143. {
  144. sid: 0,
  145. name: "景点"
  146. },
  147. {
  148. sid: 0,
  149. name: "健身"
  150. },
  151. {
  152. sid: 0,
  153. name: "休闲"
  154. },
  155. {
  156. sid: 0,
  157. name: "美容"
  158. },
  159. {
  160. sid: 0,
  161. name: "民宿"
  162. },
  163. {
  164. sid: 0,
  165. name: "超市"
  166. }
  167. ]
  168. };
  169. },
  170. computed: {
  171. ...mapState(['loginInterceptor', 'baseURL']),
  172. ...mapState('user', ['hasLogin', 'userInfo'])
  173. },
  174. onLoad: function(option) {
  175. this.getaddress();
  176. // #ifdef MP
  177. if (option.scene) {
  178. // 存储小程序邀请人
  179. uni.setStorage({
  180. key: 'spread_code',
  181. data: option.scene
  182. });
  183. }
  184. // #endif
  185. // #ifdef H5
  186. this.IndexShare();
  187. //#endif
  188. },
  189. onShow: function() {
  190. this.getGoodList()
  191. // getVip({
  192. // page: 1,
  193. // limit: 3,
  194. // is_vip: 3
  195. // }).then(res => {
  196. // this.vipList = res.data
  197. // res.data.forEach(e => {
  198. // e.isVip = e.store_type ? "3" : "0"
  199. // })
  200. // console.log(res.data, 'vip商品');
  201. // })
  202. // 判断是否强制登录
  203. // if (!this.hasLogin) {
  204. // // 登录拦截
  205. // interceptor();
  206. // }
  207. this.loadData();
  208. this.getBargainList();
  209. },
  210. //下拉刷新
  211. onPullDownRefresh() {
  212. this.loadData();
  213. },
  214. // #ifndef MP
  215. // 监听导航栏输入框点击事件
  216. onNavigationBarSearchInputClicked(e) {
  217. //跳转到搜索页面
  218. this.clickSearch();
  219. },
  220. //点击导航栏 buttons 时触发
  221. onNavigationBarButtonTap(e) {
  222. const index = e.index;
  223. if (index === 0) {
  224. this.$api.msg('点击了扫描');
  225. } else if (index === 1) {
  226. // #ifdef APP-PLUS
  227. const pages = getCurrentPages();
  228. const page = pages[pages.length - 1];
  229. const currentWebview = page.$getAppWebview();
  230. currentWebview.hideTitleNViewButtonRedDot({
  231. index
  232. });
  233. // #endif
  234. uni.navigateTo({
  235. url: '/pages/user/notice'
  236. });
  237. }
  238. },
  239. // #endif
  240. methods: {
  241. ...mapMutations(['setLat', 'setLon']),
  242. getGoodList() {
  243. let obj = this
  244. getProducts({
  245. page: 1,
  246. limit: 50,
  247. cid: 1
  248. }).then(res => {
  249. console.log(res, 'libao')
  250. obj.goodList = res.data
  251. })
  252. },
  253. navto(url) {
  254. uni.navigateTo({
  255. url,
  256. fail() {
  257. uni.switchTab({
  258. url
  259. })
  260. }
  261. })
  262. },
  263. // #ifdef H5
  264. IndexShare() {
  265. let obj = this;
  266. let pages = getCurrentPages();
  267. // 获取当前页面
  268. let page = pages[pages.length - 1];
  269. let path = '#/' + page.route + '?';
  270. // 保存传值
  271. for (let i in page.options) {
  272. path += i + '=' + page.options[i] + '&';
  273. }
  274. console.log(obj.Path);
  275. // 保存邀请人
  276. path += 'spread=' + this.userInfo.uid;
  277. let data = {
  278. link: this.baseURL + '/index/' + path,
  279. title: this.userInfo.nickname + '邀请您进入玲卿+',
  280. desc: '欢迎加入玲卿+',
  281. imgUrl: 'https://xl.liuniu946.com/index/static/img/logo.jpg'
  282. };
  283. console.log(data, '分享数据');
  284. shareLoad(data);
  285. },
  286. // #endif
  287. getaddress() {
  288. console.log('dizhi+++++++++++');
  289. let obj = this;
  290. // uni.getLocation({
  291. // type: 'gcj02',
  292. // success: res => {
  293. // console.log(res, 123456);
  294. // obj.setLat(res.latitude);
  295. // obj.setLon(res.longitude);
  296. // },
  297. // fail: err => {
  298. // console.log(err, 'shi+++++++++++++++');
  299. // openMap().then(e => {
  300. // this.getaddress();
  301. // });
  302. // }
  303. // });
  304. weixindata().then(wxOjb => {
  305. console.log(wxOjb, '获取微信');
  306. wxOjb.getLocation({
  307. type: 'gcj02',
  308. success: res => {
  309. console.log(res, 123456);
  310. obj.setLat(res.latitude);
  311. obj.setLon(res.longitude);
  312. },
  313. fail: err => {
  314. console.log(err, 'shi+++++++++++++++');
  315. openMap().then(e => {
  316. this.getaddress();
  317. });
  318. }
  319. });
  320. });
  321. },
  322. //砍价商品推荐详情页
  323. navToDetailPages(item) {
  324. let id = item.product_id;
  325. //let type = 2;
  326. uni.navigateTo({
  327. url: '/pages/product/product?id=' + id
  328. });
  329. },
  330. navTo(url) {
  331. if (url == '') {
  332. this.$api.msg('暂未开通,敬请期待');
  333. } else {
  334. uni.navigateTo({
  335. url
  336. });
  337. }
  338. },
  339. openSubscribe: function(e) {
  340. let page = e;
  341. // #ifndef MP
  342. uni.navigateTo({
  343. url: page
  344. });
  345. // #endif
  346. // #ifdef MP
  347. uni.showLoading({
  348. title: '正在加载'
  349. });
  350. openBargainSubscribe()
  351. .then(res => {
  352. uni.hideLoading();
  353. uni.navigateTo({
  354. url: page
  355. });
  356. })
  357. .catch(err => {
  358. uni.hideLoading();
  359. });
  360. // #endif
  361. },
  362. getBargainList() {
  363. let that = this;
  364. getBargainList({
  365. page: that.page,
  366. limit: that.limit
  367. })
  368. .then(function(res) {
  369. // that.$set(that, 'bargainlist', res.data.slice(0, 2));
  370. })
  371. .catch(res => {
  372. console.log(res, 'getBargainList');
  373. });
  374. },
  375. Mask() {
  376. this.MaskShow = false;
  377. this.shareShow = true;
  378. uni.setStorage({
  379. key: 'FirstEntry',
  380. data: true,
  381. success: function() {
  382. console.log(uni.getStorageSync('FirstEntry'), 'Mask');
  383. }
  384. });
  385. },
  386. Toshare() {
  387. if (this.userInfo == '') {
  388. getUserInfo({})
  389. .then(({
  390. data
  391. }) => {
  392. this.setUserInfo(data);
  393. this.userInfo = data;
  394. })
  395. .catch(e => {});
  396. } else {
  397. this.shareShow = false;
  398. uni.navigateTo({
  399. url: '/pages/user/shareQrCode?spread=' + this.userInfo.uid
  400. });
  401. }
  402. },
  403. Tocancel() {
  404. this.shareShow = false;
  405. },
  406. // 监听切换事件
  407. listChange(e) {
  408. this.checkid = e.detail.current;
  409. },
  410. // 點擊搜索框
  411. clickSearch() {
  412. uni.navigateTo({
  413. url: '/pages/product/search'
  414. });
  415. },
  416. // 点击触发领取优惠券
  417. setCoupons(item) {
  418. // 判断是否已经领取了优惠券
  419. let obj = this;
  420. uni.showModal({
  421. title: '领取提示',
  422. content: '是否领取优惠券',
  423. success(e) {
  424. if (e.confirm) {
  425. setCoupons({
  426. couponId: item.id
  427. }).then(e => {
  428. item.is_use = true;
  429. uni.showToast({
  430. title: '领取成功',
  431. type: 'top',
  432. duration: 2000
  433. });
  434. });
  435. }
  436. }
  437. });
  438. },
  439. //商品种类切换
  440. change(item) {
  441. let id = item;
  442. this.checkid = id;
  443. if (this.checkid == 1) {
  444. // console.log(1);
  445. this.detail = this.selected_detail;
  446. } else if (this.checkid == 2) {
  447. // console.log(2);
  448. this.detail = this.new_product;
  449. } else {
  450. this.detail = this.cheap_good;
  451. }
  452. },
  453. // 监听图片加载完成
  454. onImageError(key, index) {
  455. this[key][index].image = '/static/error/errorImage.jpg';
  456. },
  457. // 请求载入数据
  458. async loadData() {
  459. loadIndexs({})
  460. .then(({
  461. data
  462. }) => {
  463. let goods = data.info;
  464. console.log(goods, '商品信息');
  465. this.carouselList = data.banner;
  466. this.swiperLength = this.carouselList.length;
  467. this.bastList = data.giftInfo; //会员礼包
  468. data.info.firstList.forEach(e => {
  469. e.isVip = e.store_type ? "3" : "0"
  470. })
  471. this.firstList = data.info.firstList //首页商品
  472. uni.stopPullDownRefresh();
  473. })
  474. .catch(e => {
  475. uni.stopPullDownRefresh();
  476. });
  477. },
  478. //轮播图切换修改背景色
  479. swiperChange(e) {
  480. const index = e.detail.current;
  481. this.swiperCurrent = index;
  482. this.titleNViewBackground = this.carouselList[index].background;
  483. },
  484. //详情页
  485. navToDetailPage(item) {
  486. let id = item.id;
  487. uni.navigateTo({
  488. url: '/pages/product/product?id=' + id + '&isVip=' + item.isVip
  489. });
  490. },
  491. // 轮播图跳转
  492. bannerNavToUrl(item) {
  493. // #ifdef H5
  494. console.log(item.wap_url.indexOf('http'), 'banner');
  495. if (item.wap_url.indexOf('http') >= 0) {
  496. window.location.href = item.wap_url;
  497. }
  498. // #endif
  499. //测试数据没有写id,用title代替
  500. uni.navigateTo({
  501. url: item.wap_url
  502. });
  503. }
  504. }
  505. };
  506. </script>
  507. <style lang="scss">
  508. page {
  509. background: #EEEFEE;
  510. }
  511. .carousel-section {
  512. position: relative;
  513. // padding-top: 10px;
  514. .bg {
  515. position: absolute;
  516. top: 0;
  517. left: 0;
  518. width: 750rpx;
  519. height: 378rpx;
  520. image {
  521. width: 100%;
  522. height: 100%;
  523. }
  524. }
  525. .titleNview-placing {
  526. height: var(--status-bar-height);
  527. box-sizing: content-box;
  528. }
  529. .search {
  530. justify-content: flex-start;
  531. padding: 10rpx 32rpx 20rpx;
  532. align-items: center;
  533. background-color: #fff;
  534. .address {
  535. width: 32rpx;
  536. height: 38rpx;
  537. }
  538. .shop-name {
  539. height: 38rpx;
  540. position: relative;
  541. top: -4rpx;
  542. z-index: 100;
  543. font-size: 30rpx;
  544. font-family: PingFang SC;
  545. font-weight: 500;
  546. padding-left: 10rpx;
  547. }
  548. .shop-jt {
  549. margin-left: 8rpx;
  550. width: 16rpx;
  551. height: 10rpx;
  552. }
  553. .input-box {
  554. margin-left: 10rpx;
  555. position: relative;
  556. z-index: 99;
  557. width: 710rpx;
  558. height: 60rpx;
  559. background: #EEEEEE;
  560. border-radius: 30rpx;
  561. .input-content {
  562. position: relative;
  563. z-index: 11;
  564. border-radius: 99rpx;
  565. flex-grow: 1;
  566. padding: 5rpx 30rpx;
  567. background: #EEEEEE;
  568. .iconsearch {
  569. font-size: 50rpx;
  570. color: #CBCBCB;
  571. }
  572. .input {
  573. margin-left: 19rpx;
  574. flex-grow: 1;
  575. color: #CBCBCB;
  576. input {
  577. font-size: 28rpx;
  578. color: #CBCBCB;
  579. }
  580. }
  581. }
  582. .input-button {
  583. padding-left: 20rpx;
  584. font-size: $font-base;
  585. height: 100%;
  586. }
  587. }
  588. }
  589. }
  590. .carousel {
  591. position: relative;
  592. z-index: 3;
  593. width: 100%;
  594. height: 360rpx;
  595. background-color: #fff;
  596. .carousel-item {
  597. width: 100%;
  598. height: 100%;
  599. padding: 0 28rpx;
  600. overflow: hidden;
  601. }
  602. image {
  603. width: 100%;
  604. height: 100%;
  605. border-radius: $border-radius-sm;
  606. }
  607. }
  608. .navbar {
  609. position: relative;
  610. z-index: 2;
  611. padding: 0 50rpx;
  612. margin-top: -200rpx;
  613. width: 750rpx;
  614. height: 420rpx;
  615. background: #ffffff;
  616. border-radius: 40rpx;
  617. .navbar-box {
  618. padding-top: 250rpx;
  619. .navbar-item {
  620. display: flex;
  621. flex-direction: column;
  622. align-items: center;
  623. width: 20%;
  624. .nitem-image {
  625. width: 90rpx;
  626. height: 90rpx;
  627. }
  628. .nitem-font {
  629. margin-top: 22rpx;
  630. font-size: 26rpx;
  631. font-family: PingFang SC;
  632. font-weight: 500;
  633. color: #000000;
  634. }
  635. }
  636. }
  637. }
  638. .jx {
  639. background: #fff;
  640. width: 750rpx;
  641. }
  642. .jx-box {
  643. background: #fff;
  644. display: flex;
  645. flex-direction: column;
  646. align-items: center;
  647. width: 750rpx;
  648. .jx-box-title {
  649. margin: 50rpx 0;
  650. width: 610rpx;
  651. height: 30rpx;
  652. image {
  653. width: 100%;
  654. height: 100%;
  655. }
  656. }
  657. .jx-box-img {
  658. width: 750rpx;
  659. height: 220rpx;
  660. image {
  661. width: 100%;
  662. height: 100%;
  663. }
  664. }
  665. }
  666. .cai {
  667. display: flex;
  668. justify-content: center;
  669. align-items: center;
  670. padding-bottom: 20rpx;
  671. font-size: 28rpx;
  672. font-weight: 500;
  673. color: #999999;
  674. }
  675. .jx-box-content {
  676. display: flex;
  677. .content-left {
  678. margin: 20rpx 15rpx;
  679. width: 236rpx;
  680. height: 236rpx;
  681. background: #E2E2E2;
  682. border-radius: 10rpx;
  683. image {
  684. width: 100%;
  685. height: 100%;
  686. }
  687. }
  688. .content-right {
  689. display: flex;
  690. flex-direction: column;
  691. justify-content: space-around;
  692. .shop-name {
  693. width: 382rpx;
  694. font-size: 32rpx;
  695. font-weight: bold;
  696. color: #333333;
  697. overflow: hidden;
  698. text-overflow: ellipsis;
  699. display: -webkit-box;
  700. -webkit-box-orient: vertical;
  701. -webkit-line-clamp: 2;
  702. }
  703. .shop-content {
  704. width: 455rpx;
  705. display: flex;
  706. justify-content: space-between;
  707. .shop-content-left {
  708. display: flex;
  709. flex-direction: column;
  710. .price-box {
  711. display: flex;
  712. align-items: center;
  713. .yuan-price {
  714. font-size: 26rpx;
  715. font-weight: 500;
  716. text-decoration: line-through;
  717. color: #999999;
  718. }
  719. image {
  720. margin: 0 10rpx;
  721. width: 16rpx;
  722. height: 18rpx;
  723. }
  724. .j-price {
  725. font-size: 24rpx;
  726. font-weight: bold;
  727. color: #B59467;
  728. }
  729. }
  730. .price-x {
  731. font-size: 36rpx;
  732. font-weight: bold;
  733. color: #FF4C4C;
  734. }
  735. }
  736. .shop-content-right {
  737. margin-top: 20rpx;
  738. align-items: center;
  739. text-align: center;
  740. width: 137rpx;
  741. height: 52rpx;
  742. font-size: 26rpx;
  743. font-weight: 500;
  744. color: #F8DABA;
  745. background: #303030;
  746. border-radius: 26rpx;
  747. line-height: 52rpx;
  748. }
  749. }
  750. }
  751. }
  752. .product-box {
  753. margin-top: 20rpx;
  754. background: #ffffff;
  755. padding: 26rpx 30rpx 20rpx;
  756. .product-title {
  757. display: flex;
  758. align-items: center;
  759. justify-content: center;
  760. .pt-image {
  761. width: 36rpx;
  762. height: 36rpx;
  763. }
  764. .bb {
  765. width: 120rpx;
  766. height: 1rpx;
  767. background: #989898;
  768. }
  769. .pt-title {
  770. margin: 0 28rpx;
  771. font-size: 30rpx;
  772. font-weight: 500;
  773. color: #363636;
  774. }
  775. .pt-tip {
  776. margin-left: 16rpx;
  777. font-size: 20rpx;
  778. font-family: PingFang SC;
  779. font-weight: bold;
  780. color: #95a0b1;
  781. }
  782. }
  783. .hotgoods {
  784. margin-top: 38rpx;
  785. width: 100%;
  786. display: flex;
  787. flex-wrap: wrap;
  788. padding: 0 0 30rpx;
  789. .hotgoods-item {
  790. width: 44%;
  791. background: #FFFFFF;
  792. margin: 20rpx;
  793. box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
  794. border-radius: 10px;
  795. .image-wrapper {
  796. width: 100%;
  797. height: 330rpx;
  798. border-radius: 3px;
  799. overflow: hidden;
  800. position: relative;
  801. .image-bg {
  802. position: absolute;
  803. top: 0;
  804. left: 0;
  805. right: 0;
  806. bottom: 0;
  807. width: 100%;
  808. height: 100%;
  809. opacity: 1;
  810. border-radius: 12rpx 12rpx 0 0;
  811. z-index: 2;
  812. }
  813. .image {
  814. width: 100%;
  815. height: 100%;
  816. opacity: 1;
  817. border-radius: 12rpx 12rpx 0 0;
  818. }
  819. }
  820. .title {
  821. margin-top: 20rpx;
  822. font-size: 28rpx;
  823. font-family: PingFang SC;
  824. font-weight: 500;
  825. color: #333333;
  826. }
  827. .hotgoods-box {
  828. height: 100rpx;
  829. }
  830. .titlee {
  831. margin-left: 15rpx;
  832. font-size: 26rpx;
  833. font-weight: 500;
  834. color: #666666;
  835. white-space: nowrap;
  836. overflow: hidden;
  837. text-overflow: ellipsis;
  838. }
  839. .hot-price {
  840. display: flex;
  841. justify-content: flex-start;
  842. align-items: center;
  843. padding: 14rpx 0 30rpx;
  844. .hotPrice-box {
  845. width: 70rpx;
  846. height: 28rpx;
  847. background: linear-gradient(90deg, #c79a4c, #f9df7f);
  848. border-radius: 5rpx;
  849. text-align: center;
  850. line-height: 28rpx;
  851. font-size: 20rpx;
  852. font-weight: 400;
  853. color: #ffffff;
  854. }
  855. .price {
  856. margin-left: 10rpx;
  857. font-size: 36rpx;
  858. color: #ff0000;
  859. font-weight: 500;
  860. }
  861. .yuanPrice {
  862. margin-left: 10rpx;
  863. font-size: 20rpx;
  864. font-family: PingFang SC;
  865. font-weight: 500;
  866. text-decoration: line-through;
  867. color: #999999;
  868. }
  869. .cart-icon {
  870. image {
  871. width: 44rpx;
  872. height: 44rpx;
  873. }
  874. }
  875. }
  876. }
  877. }
  878. }
  879. .shop {
  880. margin-top: 20rpx;
  881. background: #ffffff;
  882. padding: 0 12rpx;
  883. .shop-title {
  884. padding: 30rpx 0 20rpx;
  885. display: flex;
  886. align-items: center;
  887. border-bottom: 1px solid #e3e6e7;
  888. .shop-item {
  889. width: 25%;
  890. display: flex;
  891. align-items: center;
  892. justify-content: center;
  893. .sitem-font {
  894. font-size: 26rpx;
  895. font-family: PingFang SC;
  896. font-weight: bold;
  897. color: #333333;
  898. }
  899. .jt-down {
  900. width: 10rpx;
  901. height: 8rpx;
  902. margin-left: 12rpx;
  903. }
  904. }
  905. }
  906. }
  907. .shop-main {
  908. padding: 32rpx 18rpx 0 12rpx;
  909. align-items: flex-start;
  910. justify-content: flex-start;
  911. .main-left {
  912. width: 180rpx;
  913. height: 180rpx;
  914. border-radius: 10rpx;
  915. }
  916. .main-right {
  917. width: 500rpx;
  918. justify-content: space-between;
  919. align-items: flex-start;
  920. margin-left: 20rpx;
  921. padding: 13rpx 0 35rpx;
  922. border-bottom: 1px solid #eaeced;
  923. .shopm-info {
  924. max-width: 60%;
  925. line-height: 1;
  926. .shopm-title {
  927. display: flex;
  928. justify-content: flex-start;
  929. .shopmt-font {
  930. font-size: 34rpx;
  931. font-family: PingFang SC;
  932. font-weight: bold;
  933. color: #333333;
  934. }
  935. .shopmt-good {
  936. margin-left: 6rpx;
  937. width: 30rpx;
  938. height: 30rpx;
  939. border: 1px solid #ff4c4c;
  940. border-radius: 5rpx;
  941. font-size: 20rpx;
  942. font-family: PingFang SC;
  943. font-weight: 500;
  944. color: #ff4c4c;
  945. text-align: center;
  946. line-height: 30rpx;
  947. }
  948. }
  949. .address {
  950. margin-top: 16rpx;
  951. font-size: 24rpx;
  952. font-family: PingFang SC;
  953. font-weight: 500;
  954. color: #666666;
  955. }
  956. .shopmt-tip {
  957. position: relative;
  958. display: inline-block;
  959. flex-grow: 0;
  960. margin-top: 52rpx;
  961. padding: 8rpx;
  962. background: #fcf3f0;
  963. border-radius: 16rpx 16rpx 16rpx 0px;
  964. font-size: 20rpx;
  965. font-family: PingFang SC;
  966. font-weight: 500;
  967. color: #ff440d;
  968. }
  969. }
  970. .right {
  971. height: 100%;
  972. margin-top: 5rpx;
  973. display: flex;
  974. flex-direction: column;
  975. .mright-top {
  976. display: flex;
  977. justify-content: flex-end;
  978. align-items: center;
  979. .mrt-image {
  980. width: 20rpx;
  981. height: 28rpx;
  982. }
  983. .mrt-font {
  984. margin-left: 8rpx;
  985. font-size: 22rpx;
  986. font-family: PingFang SC;
  987. font-weight: 500;
  988. color: #666666;
  989. }
  990. }
  991. .mright-bottom {
  992. margin-top: 80rpx;
  993. display: flex;
  994. justify-content: flex-end;
  995. .mrb-item {
  996. width: 46rpx;
  997. height: 46rpx;
  998. margin-left: 14rpx;
  999. }
  1000. }
  1001. }
  1002. }
  1003. }
  1004. .good-list {
  1005. width: 750rpx;
  1006. background: linear-gradient(0deg, #FFFFFF, #F8F8F8);
  1007. padding: 0 30rpx 30rpx;
  1008. .good {
  1009. width: 690rpx;
  1010. height: 276rpx;
  1011. background: #FFFFFF;
  1012. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  1013. border-radius: 10rpx;
  1014. margin: auto;
  1015. padding: 20rpx 15rpx;
  1016. margin-bottom: 20rpx;
  1017. &:last-of-type {
  1018. margin-bottom: 0rpx;
  1019. }
  1020. .good-img {
  1021. flex-shrink: 0;
  1022. width: 236rpx;
  1023. height: 236rpx;
  1024. border-radius: 10rpx;
  1025. margin-right: 22rpx;
  1026. image {
  1027. width: 236rpx;
  1028. height: 236rpx;
  1029. border-radius: 10rpx;
  1030. }
  1031. }
  1032. .good-info {
  1033. flex-grow: 1;
  1034. height: 100%;
  1035. flex-direction: column;
  1036. justify-content: space-between;
  1037. align-items: flex-start;
  1038. .good-name {
  1039. font-size: 32rpx;
  1040. font-weight: bold;
  1041. padding-top: 10rpx;
  1042. color: #333333;
  1043. }
  1044. .good-price {
  1045. width: 100%;
  1046. image {
  1047. width: 14rpx;
  1048. margin: 0 6rpx 0 10rpx;
  1049. }
  1050. .old-price {
  1051. .old-left {
  1052. font-size: 26rpx;
  1053. font-weight: 500;
  1054. text-decoration: line-through;
  1055. color: #999999;
  1056. }
  1057. .old-right {
  1058. font-size: 24rpx;
  1059. font-weight: bold;
  1060. color: #B59467;
  1061. }
  1062. }
  1063. .new-price {
  1064. width: 100%;
  1065. font-size: 36rpx;
  1066. font-weight: bold;
  1067. color: #FF4C4C;
  1068. justify-content: space-between;
  1069. .good-tip {
  1070. display: inline-block;
  1071. padding: 0 20rpx 0 17rpx;
  1072. min-width: 160rpx;
  1073. text-align: center;
  1074. line-height: 40rpx;
  1075. background: #303030;
  1076. font-size: 24rpx;
  1077. font-weight: 500;
  1078. color: #F8DABA;
  1079. border-radius: 10rpx;
  1080. position: relative;
  1081. &::before {
  1082. content: '';
  1083. display: inline-block;
  1084. height: 17rpx;
  1085. width: 17rpx;
  1086. background-color: #fff;
  1087. border-radius: 50%;
  1088. position: absolute;
  1089. top: 0;
  1090. bottom: 0;
  1091. left: -9rpx;
  1092. margin: auto;
  1093. }
  1094. &::after {
  1095. content: '';
  1096. display: inline-block;
  1097. height: 17rpx;
  1098. width: 17rpx;
  1099. background-color: #fff;
  1100. border-radius: 50%;
  1101. position: absolute;
  1102. top: 0;
  1103. bottom: 0;
  1104. right: -9rpx;
  1105. margin: auto;
  1106. }
  1107. }
  1108. }
  1109. }
  1110. }
  1111. }
  1112. }
  1113. .title-wrapper {
  1114. padding-left: 20rpx;
  1115. justify-content: flex-start;
  1116. align-items: center;
  1117. height: 86rpx;
  1118. line-height: 86rpx;
  1119. width: 690rpx;
  1120. margin: auto;
  1121. image {
  1122. width: 36rpx;
  1123. height: 36rpx;
  1124. background: linear-gradient(43deg, #ffc063, #ffa163);
  1125. border-radius: 50%;
  1126. }
  1127. view {
  1128. padding-left: 10rpx;
  1129. font-size: 32rpx;
  1130. font-family: PingFang SC;
  1131. font-weight: bold;
  1132. color: #242424;
  1133. }
  1134. .title-b {
  1135. font-size: 24rpx;
  1136. font-family: PingFang SC;
  1137. font-weight: 500;
  1138. color: #8b8b8b;
  1139. }
  1140. }
  1141. .shop-list {
  1142. padding-top: 20rpx;
  1143. flex-wrap: wrap;
  1144. background-color: #fff;
  1145. .shop-item {
  1146. margin-bottom: 20rpx;
  1147. flex-direction: column;
  1148. width: 20%;
  1149. height: 100rpx;
  1150. image {
  1151. width: 60rpx;
  1152. height: 58rpx;
  1153. }
  1154. }
  1155. }
  1156. .gift-info {
  1157. width: 690rpx;
  1158. height: 155rpx;
  1159. background: linear-gradient(43deg, #FFB242, #FF944D);
  1160. border-radius: 12rpx 12rpx 0px 0px;
  1161. margin: auto;
  1162. color: #fff;
  1163. font-size: 24rpx;
  1164. font-weight: 400;
  1165. color: #FFFFFF;
  1166. view {
  1167. padding-left: 28rpx;
  1168. }
  1169. }
  1170. .gift-good-list {
  1171. width: 690rpx;
  1172. height: 243rpx;
  1173. background: #f4f4f4;
  1174. border-radius: 12rpx;
  1175. margin: auto;
  1176. .gift-list {
  1177. width: 670rpx;
  1178. height: 286rpx;
  1179. background: #fff;
  1180. border-radius: 12px;
  1181. // margin: -54rpx auto 0;
  1182. top: -54rpx;
  1183. left: 0;
  1184. right: 0;
  1185. margin: auto;
  1186. .gift-item {
  1187. background-color: #fff;
  1188. width: 223rpx;
  1189. height: 100%;
  1190. border-right: 1rpx solid #D6D7DC;
  1191. &:first-of-type {
  1192. border-radius: 12rpx 0 0 12rpx;
  1193. }
  1194. &:last-of-type {
  1195. margin-right: 0;
  1196. }
  1197. image {
  1198. width: 160rpx;
  1199. height: 160rpx;
  1200. }
  1201. .gift-name {
  1202. font-size: 22rpx;
  1203. font-weight: bold;
  1204. color: #3F3F3F;
  1205. line-height: 34px;
  1206. }
  1207. .gift-price {
  1208. font-size: 28rpx;
  1209. font-weight: bold;
  1210. color: #FF4C4C;
  1211. }
  1212. }
  1213. }
  1214. }
  1215. </style>