index.vue 26 KB

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