index.vue 30 KB

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