index.vue 30 KB

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