index.vue 32 KB

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