index.vue 23 KB

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