index.vue 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267
  1. <template>
  2. <view class="container">
  3. <!-- 小程序头部兼容 -->
  4. <view class="input-box flex" @click="clickSearch">
  5. <view class=" input-content flex">
  6. <view class="iconfont iconsearch"></view>
  7. <view class="input"><input type="text" disabled placeholder="请输入搜索内容" /></view>
  8. </view>
  9. </view>
  10. <view class="mp-height"></view>
  11. <!-- 头部轮播 -->
  12. <view class="carousel-section">
  13. <!-- 标题栏和状态栏占位符 -->
  14. <view class="titleNview-placing"></view>
  15. <!-- 背景色区域 -->
  16. <view class="titleNview-background" :style="{ backgroundColor: '#fff' }"></view>
  17. <swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
  18. <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item.pic" /></swiper-item>
  19. </swiper>
  20. <!-- 自定义swiper指示器 -->
  21. <!-- <view class="swiper-dots">
  22. <text class="num">{{ swiperCurrent + 1 }}</text>
  23. <text class="sign">/</text>
  24. <text class="num">{{ swiperLength }}</text>
  25. </view> -->
  26. </view>
  27. <!-- 分类 -->
  28. <view class="cate-section">
  29. <view class="cate-item" @click="navToTab('/pages/category/category')">
  30. <image src="/static/icon/c3.png"></image>
  31. <text>全部分类</text>
  32. </view>
  33. <navigator url="/pages/store/storeList">
  34. <view class="cate-item">
  35. <image src="/static/icon/c5.png"></image>
  36. <text>线下门店</text>
  37. </view>
  38. </navigator>
  39. <navigator url="/pages/product/construction">
  40. <view class="cate-item">
  41. <image src="/static/icon/c7.png"></image>
  42. <text>施工产品</text>
  43. </view>
  44. </navigator>
  45. <navigator url="/pages/user/shareQrCode">
  46. <view class="cate-item">
  47. <image src="/static/icon/c8.png"></image>
  48. <text>分享有礼</text>
  49. </view>
  50. </navigator>
  51. </view>
  52. <!-- 秒杀楼层 -->
  53. <!-- <seckill></seckill> -->
  54. <!-- 附近门店 -->
  55. <view class="store-wrapper" v-if="storeList.length != 0">
  56. <view class="title-wrapper flex">
  57. <image src="/static/icon/t2.png" mode=""></image>
  58. <view class="">附近门店</view>
  59. <view class="title-b">门店好物随心购</view>
  60. </view>
  61. <view class="store flex" v-for="item in storeList" @click="navTo('/pages/store/storeDetail?id=' + item.id)">
  62. <image :src="item.image" mode="" class="store-img"></image>
  63. <view class="store-info">
  64. <view class="store-name">{{ item.name }}</view>
  65. <view class="store-detail">{{ item.detailed_address }}</view>
  66. <view class="store-tip">门店</view>
  67. <view class="store-des">
  68. <image src="../../static/icon/dingwei.png" mode=""></image>
  69. 距离 {{ item.space }}
  70. </view>
  71. </view>
  72. </view>
  73. </view>
  74. <!-- 好货推荐 -->
  75. <view class="store-wrapper">
  76. <view class="title-wrapper flex">
  77. <image src="/static/icon/t3.png" mode=""></image>
  78. <view class="">好货推荐</view>
  79. <view class="title-b">优选商品低价入手</view>
  80. </view>
  81. <view class="goods-wrapper flex">
  82. <view class="good" v-for="item in bastList" @click="navTo('/pages/product/product?id='+ item.id)">
  83. <image :src="item.image" mode="" class="good-img"></image>
  84. <view class="good-name clamp">{{ item.store_name }}</view>
  85. <!-- <view class="good-info clamp">纯植物无香精</view> -->
  86. <view class="good-price">
  87. <text class="new-price">{{ item.price }}</text>
  88. <text class="old-price">{{ item.ot_price }}</text>
  89. </view>
  90. </view>
  91. </view>
  92. </view>
  93. <view class="Mask" v-show="shareShow">
  94. <image @click="share" src="http://shicai.liuniu946.com/static/img/shareimg4.png"></image>
  95. <view class="Toshare" @click="Toshare"></view>
  96. <view class="Tocancel" @click="Tocancel"></view>
  97. </view>
  98. </view>
  99. </template>
  100. <script>
  101. import { timeComputed, space, openMap } from '@/utils/rocessor.js';
  102. import { loadIndexs, getStoreList } from '@/api/index.js';
  103. import { getUserInfo } from '@/api/user.js';
  104. import { setCoupons } from '@/api/functionalUnit.js';
  105. import { getBargainList, getProducts } from '@/api/product.js';
  106. import { interceptor } from '@/utils/loginUtils';
  107. import { mapState, mapMutations } from 'vuex';
  108. export default {
  109. components: {
  110. // seckill
  111. },
  112. watch: {
  113. //自适应swiper高度
  114. checkid(newValue, oldValue) {
  115. let obj = this;
  116. if (newValue == 0) {
  117. let bHeight = Math.ceil(obj.bastList.length / 2);
  118. obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
  119. }
  120. if (newValue == 1) {
  121. let bHeight = Math.ceil(obj.goodsList.length / 2);
  122. obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
  123. }
  124. if (newValue == 2) {
  125. let bHeight = Math.ceil(obj.bastBanner.length / 2);
  126. obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
  127. }
  128. }
  129. // 初次加载页面高度时修改页面高度
  130. // bastList(newValue, oldValue) {
  131. // let obj = this;
  132. // let bHeight = Math.ceil(newValue.length / 2);
  133. // obj.$nextTick(function() {
  134. // uni.createSelectorQuery()
  135. // .select('#list-box')
  136. // .fields(
  137. // {
  138. // size: true
  139. // },
  140. // function(data) {
  141. // obj.pageProportion = data.width / 750;
  142. // obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
  143. // }
  144. // )
  145. // .exec();
  146. // });
  147. // }
  148. },
  149. data() {
  150. return {
  151. storeList: [], //门店列表
  152. shareShow: false, //分享海报
  153. pageProportion: 0, //保存页面基于750宽度的比例
  154. swiperHeight: 0,
  155. checkid: 0,
  156. titleNViewBackground: '',
  157. swiperCurrent: 0,
  158. swiperLength: 0,
  159. bargainlist: [], //砍价商品
  160. carouselList: [], //轮播列表
  161. goodsList: [], //最新商品列表
  162. bastList: [], //精品推荐列表
  163. bastBanner: [], //促销商品列表
  164. menusList: [], //头部菜单
  165. page: 1,
  166. limit: 5,
  167. userServant: [
  168. {
  169. image: ''
  170. }
  171. ], //用户推广服务
  172. couponArray: [], //可领取优惠券
  173. recommend: [
  174. {
  175. id: 0,
  176. re_title: '精选',
  177. re_name: '为你推荐'
  178. },
  179. {
  180. id: 1,
  181. re_title: '最新',
  182. re_name: '最新好货优选'
  183. },
  184. {
  185. id: 2,
  186. re_title: '便宜好货',
  187. re_name: '90天便宜好货'
  188. }
  189. ],
  190. actTime: new Date()
  191. };
  192. },
  193. computed: {
  194. ...mapState(['loginInterceptor']),
  195. ...mapState('user', ['hasLogin', 'userInfo']),
  196. ...mapState('latlon', ['lat', 'lon'])
  197. },
  198. onLoad: function(option) {
  199. // #ifndef MP
  200. if (option.spread) {
  201. // 存储其他邀请人
  202. uni.setStorageSync('spread', option.spread);
  203. }
  204. // #endif
  205. // #ifdef MP
  206. if (option.scene) {
  207. // 存储小程序邀请人
  208. uni.setStorage({
  209. key: 'spread_code',
  210. data: option.scene
  211. });
  212. }
  213. // #endif
  214. this.getaddress();
  215. },
  216. onShow: function() {
  217. // 判断是否强制登录
  218. if (this.loginInterceptor && !this.hasLogin) {
  219. // 登录拦截
  220. interceptor();
  221. }
  222. this.loadData();
  223. this.getBargainList();
  224. // this.getProducts()
  225. },
  226. //下拉刷新
  227. onPullDownRefresh() {
  228. this.loadData();
  229. },
  230. // #ifndef MP
  231. // 监听导航栏输入框点击事件
  232. onNavigationBarSearchInputClicked(e) {
  233. //跳转到搜索页面
  234. this.clickSearch();
  235. },
  236. //点击导航栏 buttons 时触发
  237. onNavigationBarButtonTap(e) {
  238. const index = e.index;
  239. if (index === 0) {
  240. this.$api.msg('点击了扫描');
  241. } else if (index === 1) {
  242. // #ifdef APP-PLUS
  243. const pages = getCurrentPages();
  244. const page = pages[pages.length - 1];
  245. const currentWebview = page.$getAppWebview();
  246. currentWebview.hideTitleNViewButtonRedDot({
  247. index
  248. });
  249. // #endif
  250. uni.navigateTo({
  251. url: '/pages/user/notice'
  252. });
  253. }
  254. },
  255. // #endif
  256. methods: {
  257. navTo(url) {
  258. uni.navigateTo({
  259. url: url
  260. })
  261. },
  262. ...mapMutations('latlon', ['setLat', 'setLon']),
  263. navToTab(url) {
  264. uni.switchTab({
  265. url: url
  266. });
  267. },
  268. //砍价商品推荐详情页
  269. navToDetailPages(item) {
  270. let id = item.product_id;
  271. //let type = 2;
  272. uni.navigateTo({
  273. url: '/pages/product/product?id=' + id
  274. });
  275. },
  276. openSubscribe: function(e) {
  277. let page = e;
  278. // #ifndef MP
  279. uni.navigateTo({
  280. url: page
  281. });
  282. // #endif
  283. // #ifdef MP
  284. uni.showLoading({
  285. title: '正在加载'
  286. });
  287. openBargainSubscribe()
  288. .then(res => {
  289. uni.hideLoading();
  290. uni.navigateTo({
  291. url: page
  292. });
  293. })
  294. .catch(err => {
  295. uni.hideLoading();
  296. });
  297. // #endif
  298. },
  299. getBargainList() {
  300. let that = this;
  301. getBargainList({
  302. page: that.page,
  303. limit: that.limit
  304. })
  305. .then(function(res) {
  306. that.$set(that, 'bargainlist', res.data.slice(0, 2));
  307. })
  308. .catch(res => {
  309. console.log(res, 'getBargainList');
  310. });
  311. },
  312. Mask() {
  313. this.MaskShow = false;
  314. this.shareShow = true;
  315. uni.setStorage({
  316. key: 'FirstEntry',
  317. data: true,
  318. success: function() {
  319. console.log(uni.getStorageSync('FirstEntry'), 'Mask');
  320. }
  321. });
  322. },
  323. Toshare() {
  324. if (this.userInfo == '') {
  325. getUserInfo({})
  326. .then(({ data }) => {
  327. this.setUserInfo(data);
  328. this.userInfo = data;
  329. })
  330. .catch(e => {});
  331. } else {
  332. this.shareShow = false;
  333. uni.navigateTo({
  334. url: '/pages/user/shareQrCode?spread=' + this.userInfo.uid
  335. });
  336. }
  337. },
  338. Tocancel() {
  339. this.shareShow = false;
  340. },
  341. // 监听切换事件
  342. listChange(e) {
  343. this.checkid = e.detail.current;
  344. },
  345. // 點擊搜索框
  346. clickSearch() {
  347. uni.navigateTo({
  348. url: '/pages/product/search'
  349. });
  350. },
  351. // 点击触发领取优惠券
  352. setCoupons(item) {
  353. // 判断是否已经领取了优惠券
  354. let obj = this;
  355. uni.showModal({
  356. title: '领取提示',
  357. content: '是否领取优惠券',
  358. success(e) {
  359. if (e.confirm) {
  360. setCoupons({ couponId: item.id }).then(e => {
  361. item.is_use = true;
  362. uni.showToast({
  363. title: '领取成功',
  364. type: 'top',
  365. duration: 2000
  366. });
  367. });
  368. }
  369. }
  370. });
  371. },
  372. //商品种类切换
  373. change(item) {
  374. let id = item;
  375. this.checkid = id;
  376. if (this.checkid == 1) {
  377. // console.log(1);
  378. this.detail = this.selected_detail;
  379. } else if (this.checkid == 2) {
  380. // console.log(2);
  381. this.detail = this.new_product;
  382. } else {
  383. this.detail = this.cheap_good;
  384. }
  385. },
  386. // 监听图片加载完成
  387. onImageError(key, index) {
  388. this[key][index].image = '/static/error/errorImage.jpg';
  389. },
  390. // 请求载入数据
  391. async loadData() {
  392. loadIndexs({})
  393. .then(({ data }) => {
  394. let goods = data.info;
  395. this.carouselList = data.banner;
  396. this.swiperLength = this.carouselList.length;
  397. this.menusList = data.menus;
  398. this.goodsList = goods.firstList; //最新商品
  399. this.bastList = goods.bastList; //精品推荐
  400. console.log(this.bastList, 'this.bastList6666666666666666666666');
  401. this.bastBanner = data.benefit; //促销单品
  402. this.$set(this, 'couponArray', data.couponList); //保存卡包券
  403. uni.stopPullDownRefresh();
  404. })
  405. .catch(e => {
  406. uni.stopPullDownRefresh();
  407. });
  408. },
  409. //轮播图切换修改背景色
  410. swiperChange(e) {
  411. const index = e.detail.current;
  412. this.swiperCurrent = index;
  413. this.titleNViewBackground = this.carouselList[index].background;
  414. },
  415. //详情页
  416. navToDetailPage(item) {
  417. let id = item.id;
  418. uni.navigateTo({
  419. url: '/pages/product/product?id=' + id
  420. });
  421. },
  422. // 轮播图跳转
  423. bannerNavToUrl(item) {
  424. // #ifdef H5
  425. if (item.wap_url.indexOf('http') > 0) {
  426. window.location.href = item.wap_url;
  427. }
  428. // #endif
  429. //测试数据没有写id,用title代替
  430. uni.navigateTo({
  431. url: item.wap_url
  432. });
  433. },
  434. //获取定位信息
  435. getaddress() {
  436. let obj = this;
  437. uni.getLocation({
  438. success: res => {
  439. let latitude = Math.abs(res.latitude);
  440. let longitude = Math.abs(res.longitude);
  441. obj.setLat(latitude);
  442. obj.setLon(longitude);
  443. console.log(obj.lat, obj.lon, '经纬度数据');
  444. obj.getStoreList(latitude, longitude);
  445. },
  446. fail: err => {
  447. openMap().then(e => {
  448. this.getaddress();
  449. });
  450. }
  451. });
  452. },
  453. //获取门店列表
  454. getStoreList(latitude, longitude) {
  455. let obj = this;
  456. getStoreList({
  457. page: 1,
  458. limit: 3,
  459. latitude: latitude,
  460. longitude: longitude
  461. }).then(({ data }) => {
  462. data.list = data.list.map(item => {
  463. item.space = obj.space(obj.lat, obj.lon, item.latitude, item.longitude);
  464. console.log(item.space, 'item.space++++++++++');
  465. return item;
  466. });
  467. obj.storeList = data.list;
  468. });
  469. },
  470. space(lat1, lng1, lat2, lng2) {
  471. console.log(lat1, lng1, lat2, lng2, '位置信息');
  472. var radLat1 = (lat1 * Math.PI) / 180.0;
  473. var radLat2 = (lat2 * Math.PI) / 180.0;
  474. var a = radLat1 - radLat2;
  475. var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
  476. var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
  477. s = s * 6378.137;
  478. s = Math.round(s * 10000) / 10000;
  479. // return s * 1000;
  480. if (s > 1) {
  481. return s.toFixed(2) + 'km';
  482. } else {
  483. return s * 1000 + 'm'; // 单位米
  484. }
  485. }
  486. }
  487. };
  488. </script>
  489. <style lang="scss">
  490. .Mask {
  491. width: 100%;
  492. height: 100vh;
  493. position: fixed;
  494. z-index: 99999;
  495. background-color: rgba(0, 0, 0, 0.7);
  496. top: 0;
  497. image {
  498. width: 100%;
  499. height: 100vh;
  500. }
  501. }
  502. // 热销商品
  503. .hot-goods {
  504. margin: 0 25rpx;
  505. padding: 5rpx 25rpx 30rpx 25rpx;
  506. background-color: #fff;
  507. border-radius: 10rpx;
  508. .hot-headers {
  509. margin: 25rpx 0;
  510. width: 100%;
  511. display: flex;
  512. .img {
  513. width: 32rpx;
  514. height: 32rpx;
  515. margin-right: 10rpx;
  516. }
  517. .hot-title {
  518. font-size: 30rpx;
  519. margin-right: 15rpx;
  520. }
  521. .more {
  522. line-height: 1;
  523. padding: 5rpx 10rpx 5rpx 15rpx;
  524. text-align: center;
  525. font-size: 20rpx;
  526. border-radius: 15rpx;
  527. color: #ffffff;
  528. background: linear-gradient(90deg, rgba(250, 52, 38, 1) 0%, rgba(249, 30, 83, 1) 100%);
  529. image {
  530. width: 20rpx;
  531. height: 20rpx;
  532. }
  533. }
  534. }
  535. .hot-lists {
  536. line-height: 1;
  537. display: flex;
  538. .hot-produce {
  539. width: 100%;
  540. height: 260rpx;
  541. border-top: 1px solid #f0f0f0;
  542. display: flex;
  543. padding-top: 28rpx;
  544. .produce-image {
  545. width: 200rpx;
  546. height: 200rpx;
  547. image {
  548. width: 200rpx;
  549. height: 200rpx;
  550. border: 1px solid #f0f0f0;
  551. }
  552. }
  553. .produce-content {
  554. // flex-direction: column;
  555. margin-left: 30rpx;
  556. height: 200rpx;
  557. position: relative;
  558. width: calc(100% - 200rpx - 30rpx);
  559. .produce-name {
  560. font-size: 28rpx;
  561. font-weight: bold;
  562. line-height: 35rpx;
  563. color: #343434;
  564. }
  565. .produce-info {
  566. font-size: 20rpx;
  567. margin-top: 25rpx;
  568. }
  569. .produce-price {
  570. display: flex;
  571. align-items: flex-end;
  572. color: #ff383e;
  573. font-size: 24rpx;
  574. margin-top: 70rpx;
  575. font-weight: bold;
  576. text {
  577. font-size: 36rpx;
  578. }
  579. .produce-price-1 {
  580. font-size: 22rpx;
  581. font-weight: 500;
  582. text-decoration: line-through;
  583. color: rgba(170, 170, 170, 1);
  584. margin-left: 20rpx;
  585. }
  586. }
  587. .produce-price1 {
  588. height: 100%;
  589. letter-spacing: 3rpx;
  590. color: #ff383e;
  591. font-size: 24rpx;
  592. font-weight: bold;
  593. .produce-center {
  594. width: 100%;
  595. position: absolute;
  596. bottom: 0;
  597. display: flex;
  598. justify-content: space-between;
  599. align-items: center;
  600. .kanjia_word {
  601. .word-1 {
  602. font-size: 22rpx;
  603. color: #666666;
  604. }
  605. .word-2 {
  606. font-size: 28rpx;
  607. color: #ff383e;
  608. margin-top: 10rpx;
  609. }
  610. }
  611. .kanjia_button {
  612. height: 50rpx;
  613. width: 150rpx;
  614. border-radius: 25rpx;
  615. font-size: 26rpx;
  616. font-weight: 500;
  617. color: #ff383e;
  618. border: 1px solid rgba(255, 56, 62, 1);
  619. }
  620. }
  621. }
  622. }
  623. }
  624. }
  625. }
  626. .input-box {
  627. position: absolute;
  628. width: 100%;
  629. padding: 25rpx;
  630. background-color: rgba(0, 0, 0, 0);
  631. z-index: 999;
  632. height: 44px;
  633. .iconsearch {
  634. font-size: 50rpx;
  635. }
  636. .input-content {
  637. border-radius: 99rpx;
  638. flex-grow: 1;
  639. padding: 10rpx 200rpx;
  640. background-color: #fff;
  641. // justify-content: center;
  642. .input {
  643. flex-grow: 1;
  644. input {
  645. font-size: $font-lg;
  646. }
  647. }
  648. }
  649. .input-button {
  650. padding-left: 20rpx;
  651. font-size: $font-lg;
  652. height: 100%;
  653. }
  654. }
  655. /* #ifdef MP */
  656. .mp-height {
  657. height: 44px;
  658. }
  659. .input-box {
  660. position: fixed;
  661. top: 0;
  662. left: 0;
  663. width: 100%;
  664. padding: 25rpx;
  665. background-color: #ffffff;
  666. z-index: 999;
  667. height: 44px;
  668. .iconsearch {
  669. font-size: 50rpx;
  670. }
  671. .input-content {
  672. border-radius: 99rpx;
  673. flex-grow: 1;
  674. padding: 10rpx 30rpx;
  675. background-color: rgba(231, 231, 231, 0.7);
  676. .input {
  677. flex-grow: 1;
  678. input {
  679. font-size: $font-lg;
  680. }
  681. }
  682. }
  683. .input-button {
  684. padding-left: 20rpx;
  685. font-size: $font-lg;
  686. height: 100%;
  687. }
  688. }
  689. page {
  690. .cate-section {
  691. position: relative;
  692. z-index: 5;
  693. border-radius: 16rpx 16rpx 0 0;
  694. margin-top: -20rpx;
  695. }
  696. .carousel-section {
  697. padding: 0;
  698. .titleNview-placing {
  699. padding-top: 0;
  700. height: 0;
  701. }
  702. .carousel {
  703. .carousel-item {
  704. padding: 0;
  705. }
  706. }
  707. .swiper-dots {
  708. left: 45rpx;
  709. bottom: 40rpx;
  710. }
  711. }
  712. }
  713. /* #endif */
  714. page {
  715. background: #f7f8f7;
  716. }
  717. .m-t {
  718. margin-top: 16rpx;
  719. }
  720. /* 头部 轮播图 */
  721. .carousel-section {
  722. position: relative;
  723. // padding-top: 10px;
  724. overflow: hidden;
  725. .titleNview-placing {
  726. height: var(--status-bar-height);
  727. // padding-top: 44px;
  728. box-sizing: content-box;
  729. }
  730. .titleNview-background {
  731. position: absolute;
  732. top: 0;
  733. left: 0;
  734. width: 100%;
  735. height: 426rpx;
  736. transition: 0.4s;
  737. }
  738. .carousel {
  739. width: 100%;
  740. height: 426rpx;
  741. .carousel-item {
  742. width: 100%;
  743. height: 100%;
  744. // padding: 0 28rpx;
  745. overflow: hidden;
  746. }
  747. image {
  748. width: 100%;
  749. height: 100%;
  750. // border-radius: $border-radius-sm;
  751. }
  752. }
  753. }
  754. .swiper-dots {
  755. display: flex;
  756. position: absolute;
  757. left: 60rpx;
  758. bottom: 15rpx;
  759. width: 72rpx;
  760. height: 36rpx;
  761. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
  762. background-size: 100% 100%;
  763. .num {
  764. width: 36rpx;
  765. height: 36rpx;
  766. border-radius: 50px;
  767. font-size: 24rpx;
  768. color: #fff;
  769. text-align: center;
  770. line-height: 36rpx;
  771. }
  772. .sign {
  773. position: absolute;
  774. top: 0;
  775. left: 50%;
  776. line-height: 36rpx;
  777. font-size: 12rpx;
  778. color: #fff;
  779. transform: translateX(-50%);
  780. }
  781. }
  782. /* 分类 */
  783. .cate-section {
  784. display: flex;
  785. justify-content: space-around;
  786. align-items: center;
  787. flex-wrap: wrap;
  788. padding: 30rpx 22rpx;
  789. background-color: #fff;
  790. margin-bottom: 20rpx;
  791. .cate-item {
  792. display: flex;
  793. flex-direction: column;
  794. align-items: center;
  795. font-size: $font-sm + 2rpx;
  796. color: $font-color-dark;
  797. }
  798. /* 原图标颜色太深,不想改图了,所以加了透明度 */
  799. image {
  800. width: 88rpx;
  801. height: 88rpx;
  802. margin-bottom: 14rpx;
  803. border-radius: 50%;
  804. opacity: 0.7;
  805. }
  806. }
  807. // 中间广告图片
  808. .ad-1 {
  809. width: 100%;
  810. height: 210rpx;
  811. padding: 10rpx 0;
  812. background: #fff;
  813. image {
  814. width: 100%;
  815. height: 100%;
  816. }
  817. }
  818. /*公用边框样式*/
  819. %icon {
  820. margin-right: 10rpx;
  821. display: inline-block;
  822. padding: 2rpx 10rpx;
  823. border: 1rpx solid $color-yellow;
  824. color: $color-yellow;
  825. line-height: 1;
  826. font-size: $font-base;
  827. border-radius: 10rpx;
  828. }
  829. .f-header {
  830. display: flex;
  831. align-items: center;
  832. height: 92rpx;
  833. padding: 6rpx 30rpx 8rpx;
  834. image {
  835. flex-shrink: 0;
  836. width: 80rpx;
  837. height: 80rpx;
  838. margin-right: 20rpx;
  839. }
  840. .tit-box {
  841. @extend %font-title-box;
  842. }
  843. .tit {
  844. @extend %font-title;
  845. }
  846. .iconenter {
  847. font-size: $font-lg + 2rpx;
  848. color: $font-color-light;
  849. }
  850. .f-left-icon {
  851. @extend %f-left-icon;
  852. }
  853. .iconfont {
  854. font-size: $font-sm - 2rpx;
  855. }
  856. }
  857. // 会员升级礼包
  858. .uservip {
  859. border-radius: $border-radius-sm;
  860. background-color: white;
  861. box-shadow: $box-shadow;
  862. height: 300rpx;
  863. margin: 0 30rpx;
  864. image {
  865. height: 100%;
  866. width: 300rpx;
  867. }
  868. .detail {
  869. position: relative;
  870. padding: 20rpx;
  871. height: 100%;
  872. .icon {
  873. @extend %icon;
  874. }
  875. .price-box {
  876. position: absolute;
  877. bottom: 20rpx;
  878. width: calc(100% - 40rpx);
  879. .price {
  880. font-size: $font-lg + 2rpx;
  881. font-weight: bold;
  882. color: $font-color-base;
  883. }
  884. .text {
  885. color: $color-gray;
  886. font-size: $font-sm;
  887. }
  888. }
  889. .title {
  890. font-size: $font-lg;
  891. font-weight: bold;
  892. }
  893. }
  894. }
  895. /* 猜你喜欢 */
  896. .guess-section {
  897. display: flex;
  898. flex-wrap: wrap;
  899. padding: 0 30rpx;
  900. .guess-item {
  901. overflow: hidden;
  902. display: flex;
  903. flex-direction: column;
  904. width: 48%;
  905. margin-bottom: 4%;
  906. border-radius: $border-radius-sm;
  907. background-color: white;
  908. box-shadow: $box-shadow;
  909. &:nth-child(2n + 1) {
  910. margin-right: 4%;
  911. }
  912. }
  913. .image-wrapper {
  914. width: 100%;
  915. height: 330rpx;
  916. border-radius: 3px;
  917. overflow: hidden;
  918. image {
  919. width: 100%;
  920. height: 100%;
  921. opacity: 1;
  922. }
  923. }
  924. .title {
  925. font-size: $font-base;
  926. color: $font-color-dark;
  927. font-weight: bold;
  928. line-height: 80rpx;
  929. }
  930. .price {
  931. font-size: $font-lg;
  932. color: $font-color-base;
  933. font-weight: bold;
  934. line-height: 1;
  935. line-height: 80rpx;
  936. }
  937. .icon {
  938. @extend %icon;
  939. }
  940. .detail {
  941. line-height: 1;
  942. }
  943. .tip {
  944. color: white;
  945. background-color: $color-yellow;
  946. line-height: 1.5;
  947. font-size: $font-sm;
  948. padding-left: 20rpx;
  949. }
  950. }
  951. // 推荐
  952. .recommend {
  953. width: 95%;
  954. height: 155rpx;
  955. margin: 0rpx auto;
  956. padding-top: 30rpx;
  957. font-size: 26rpx;
  958. text-align: center;
  959. color: #333333;
  960. align-items: flex-start;
  961. .recommend_list {
  962. width: 33%;
  963. }
  964. .re_title {
  965. font-size: 32rpx;
  966. font-weight: bold;
  967. }
  968. .re_name {
  969. color: #999999;
  970. padding-top: 10rpx;
  971. }
  972. .selected_icon {
  973. width: 25rpx;
  974. height: 10rpx;
  975. margin: 0px auto;
  976. display: none;
  977. image {
  978. width: 100%;
  979. height: 100%;
  980. }
  981. }
  982. .active {
  983. display: block;
  984. }
  985. .active_color {
  986. color: #dc4d46 !important;
  987. }
  988. }
  989. // 列表
  990. .list-box-h {
  991. height: 1550rpx;
  992. }
  993. // 优惠券
  994. .coupon-list {
  995. display: inline-block;
  996. }
  997. .row {
  998. border-radius: 15rpx;
  999. margin: 25rpx;
  1000. height: 155rpx;
  1001. // width: 552rpx;
  1002. overflow: hidden;
  1003. background-color: #ffffff;
  1004. padding-right: 25rpx;
  1005. .list-interval {
  1006. border: 1px dashed $border-color-light;
  1007. height: 100%;
  1008. .top,
  1009. .bottom {
  1010. border-radius: 100rpx;
  1011. width: 30rpx;
  1012. height: 30rpx;
  1013. position: absolute;
  1014. background-color: $page-color-base;
  1015. right: -15rpx;
  1016. }
  1017. .top {
  1018. top: -18rpx;
  1019. }
  1020. .bottom {
  1021. bottom: -18rpx;
  1022. }
  1023. }
  1024. .list-money {
  1025. height: 100%;
  1026. min-width: 155rpx;
  1027. text-align: center;
  1028. image {
  1029. height: 100%;
  1030. width: 20rpx;
  1031. }
  1032. .list-money-text {
  1033. flex-grow: 1;
  1034. padding: 0 25rpx;
  1035. .tit {
  1036. text-align: center;
  1037. padding: 15rpx 0rpx;
  1038. font-size: 55rpx;
  1039. color: $color-red;
  1040. font-weight: bold;
  1041. &.noAction {
  1042. color: $font-color-light;
  1043. }
  1044. }
  1045. .price {
  1046. padding-bottom: 25rpx;
  1047. color: $font-color-light;
  1048. }
  1049. }
  1050. }
  1051. .row_list_right {
  1052. // flex-grow: 1;
  1053. min-width: 200rpx;
  1054. padding-left: 25rpx;
  1055. line-height: 1;
  1056. .right_time {
  1057. padding: 10rpx 0rpx;
  1058. color: $font-color-light;
  1059. font-size: $font-sm;
  1060. }
  1061. .right_top {
  1062. margin: 15rpx 0;
  1063. .right_name {
  1064. font-size: $font-base;
  1065. color: #bc253a;
  1066. font-weight: bold;
  1067. }
  1068. .right_title {
  1069. font-size: $font-base;
  1070. color: $font-base;
  1071. font-weight: bold;
  1072. &.noAction {
  1073. color: $font-color-light;
  1074. }
  1075. }
  1076. }
  1077. }
  1078. .right_use {
  1079. margin: 15rpx 0;
  1080. padding: 10rpx;
  1081. width: 160rpx;
  1082. text-align: center;
  1083. color: #fff;
  1084. background-color: #bc253a;
  1085. border-radius: 50rpx;
  1086. font-size: $font-sm;
  1087. &.noAction {
  1088. background-color: $font-color-light;
  1089. }
  1090. }
  1091. .iconlocation {
  1092. font-size: 36rpx;
  1093. color: $font-color-light;
  1094. }
  1095. }
  1096. .store-wrapper {
  1097. margin: 20rpx 0;
  1098. background-color: #fff;
  1099. padding: 0 0rpx 25rpx;
  1100. .title-wrapper {
  1101. padding-left: 20rpx;
  1102. justify-content: flex-start;
  1103. align-items: center;
  1104. height: 86rpx;
  1105. line-height: 86rpx;
  1106. image {
  1107. width: 36rpx;
  1108. height: 36rpx;
  1109. background: linear-gradient(43deg, #ffc063, #ffa163);
  1110. border-radius: 50%;
  1111. }
  1112. view {
  1113. padding-left: 10rpx;
  1114. font-size: 32rpx;
  1115. font-family: PingFang SC;
  1116. font-weight: bold;
  1117. color: #242424;
  1118. }
  1119. .title-b {
  1120. font-size: 24rpx;
  1121. font-family: PingFang SC;
  1122. font-weight: 500;
  1123. color: #8b8b8b;
  1124. }
  1125. }
  1126. .goods-wrapper {
  1127. padding: 0 20rpx;
  1128. justify-content: space-between;
  1129. flex-wrap: wrap;
  1130. .good {
  1131. margin-bottom: 20rpx;
  1132. width: 345rpx;
  1133. height: 480rpx;
  1134. background: #ffffff;
  1135. box-shadow: 0px 0px 10rpx rgba(50, 50, 52, 0.2);
  1136. border-radius: 10rpx;
  1137. .good-img {
  1138. width: 345rpx;
  1139. height: 345rpx;
  1140. border-radius: 10rpx;
  1141. }
  1142. .good-name {
  1143. font-size: 30rpx;
  1144. font-family: PingFang SC;
  1145. font-weight: bold;
  1146. color: #333333;
  1147. line-height: 35rpx;
  1148. padding-left: 21rpx;
  1149. }
  1150. .good-info {
  1151. padding-top: 10rpx;
  1152. padding-left: 21rpx;
  1153. font-size: 26rpx;
  1154. font-family: PingFang SC;
  1155. font-weight: 500;
  1156. color: #666666;
  1157. line-height: 35rpx;
  1158. }
  1159. .good-price {
  1160. padding-left: 21rpx;
  1161. padding-top: 30rpx;
  1162. font-size: 36rpx;
  1163. font-family: PingFang SC;
  1164. font-weight: bold;
  1165. color: #ff4c4c;
  1166. line-height: 35rpx;
  1167. height: 35rpx;
  1168. .old-price {
  1169. display: inline-block;
  1170. padding-left: 8rpx;
  1171. font-size: 26rpx;
  1172. font-family: PingFang SC;
  1173. font-weight: bold;
  1174. text-decoration: line-through;
  1175. color: #999999;
  1176. }
  1177. }
  1178. }
  1179. }
  1180. .store {
  1181. margin: 0 auto 20rpx;
  1182. width: 710rpx;
  1183. height: 210rpx;
  1184. background: #ffffff;
  1185. box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
  1186. border-radius: 10rpx;
  1187. padding: 19rpx 25rpx 11rpx 20rpx;
  1188. justify-content: flex-start;
  1189. .store-img {
  1190. flex-shrink: 0;
  1191. width: 180rpx;
  1192. height: 180rpx;
  1193. border-radius: 10rpx;
  1194. // background-color: red;
  1195. }
  1196. .store-info {
  1197. width: 100%;
  1198. height: 100%;
  1199. padding-left: 19rpx;
  1200. position: relative;
  1201. .store-name {
  1202. font-size: 30rpx;
  1203. font-family: PingFang SC;
  1204. font-weight: bold;
  1205. color: #333333;
  1206. }
  1207. .store-detail {
  1208. padding-top: 10rpx;
  1209. font-size: 22rpx;
  1210. font-family: PingFang SC;
  1211. font-weight: 500;
  1212. color: #666666;
  1213. }
  1214. .store-tip {
  1215. width: 66rpx;
  1216. height: 40rpx;
  1217. background: linear-gradient(120deg, #ffc063, #ffa163);
  1218. border-radius: 8rpx;
  1219. position: absolute;
  1220. right: 0;
  1221. top: 0;
  1222. font-size: 24rpx;
  1223. font-family: PingFang SC;
  1224. font-weight: 500;
  1225. color: #ffffff;
  1226. line-height: 40rpx;
  1227. text-align: center;
  1228. }
  1229. .store-des {
  1230. // width: 400rpx;
  1231. position: absolute;
  1232. bottom: 0;
  1233. font-size: 24rpx;
  1234. font-family: PingFang SC;
  1235. font-weight: 500;
  1236. color: #999999;
  1237. height: 35rpx;
  1238. image {
  1239. margin-right: 8rpx;
  1240. width: 17rpx;
  1241. height: 24rpx;
  1242. }
  1243. }
  1244. }
  1245. }
  1246. }
  1247. </style>