index.vue 32 KB

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