index.vue 28 KB

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