index.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943
  1. <template>
  2. <view class="home">
  3. <zs-skeleton :loading="loading"></zs-skeleton>
  4. <zs-banner :city="city" :background="background" position @handlePosition="chooseCity" @search="handleSearch"></zs-banner>
  5. <view class="login-home">
  6. <!-- 登录显示的套餐列表 -->
  7. <view class="discount-list">
  8. <view class="discount-item" v-for="(item,index) in discountsList" :key="index" @click="goDetail(item.domainUrl,item.id,item.secondaryImg,item.menuName)">
  9. <image class="icon" :src="item.imgUrl" mode=""></image>
  10. <view class="title">{{item.menuName}}</view>
  11. <view class="tag" v-if="item.labelAbove">
  12. {{item.labelAbove}}
  13. </view>
  14. <view class="desc">
  15. {{item.labelBelow || ''}}
  16. </view>
  17. </view>
  18. </view>
  19. <!-- 广告位 -->
  20. <!-- <view class="advertise-box">
  21. <view class="item" v-for="item in advList" :key="item.id">
  22. <zs-img
  23. :src="item.advertsImg"
  24. width="335rpx" height="188rpx" radius="full" mode=""></zs-img>
  25. </view>
  26. </view> -->
  27. <view class="content">
  28. <!-- 列表 -->
  29. <zs-list class="store-box" mt="0" @load="loadMore" :status="status">
  30. <view class="left">
  31. <!-- <view class="swiper-box">
  32. <swiper class="swiper" @change="swiperChange" skip-hidden-item-layout indicator-dots indicator-color="#fff" indicator-active-color="#FF4D3A" circular :autoplay="true"
  33. :interval="3000" :duration="1000">
  34. <swiper-item v-for="(item,index) in advList" :key="item.id" @click="jump(item.jumpUrl)">
  35. <image class="swiper-item" mode="" :src="item.advertsImg">
  36. </image>
  37. </swiper-item>
  38. </swiper>
  39. </view> -->
  40. <view class="store-item" v-for="(item,index) in list" :key="index">
  41. <view @click="goGoodsDetail(item)">
  42. <zs-img :src="item.cover[0]" width="344rpx" height="344rpx" :radius="item.productType=='Web'?'full':'half'" mode="widthFix"></zs-img>
  43. <!-- <zs-img :src="item.goodsVos[0].goodsImg" width="344rpx" height="344rpx" mode=""></zs-img> -->
  44. <view class="info" v-if="item.productType!='Web'">
  45. <view class="title">
  46. <!-- <view class="tag">
  47. 今日特惠
  48. </view> -->
  49. <view class="text">
  50. {{item.title}}
  51. </view>
  52. </view>
  53. <!-- <view class="desc">
  54. {{item.goodsVos[0].goodsDescribe}}
  55. </view> -->
  56. <!-- <view class="discount-tag" v-if="item.salePrice&&item.originalPrice">
  57. {{(item.salePrice/item.originalPrice)*10}}
  58. </view> -->
  59. <view class="price-box">
  60. <view class="left">
  61. <text class="price" v-if="item.salePrice">
  62. ¥{{(item.salePrice/100).toFixed(2)}} {{item.productType=='PetrolStation'?'/L':''}}
  63. </text>
  64. <text class="label" v-if="(item.productType=='Scenic'||item.productType=='Hotel'||item.productType=='Cinema'||item.productType=='MovieTicket'||item.productType=='Restaurant'||item.productType=='Shop')&&item.salePrice">
  65. </text>
  66. <text class="old-price" v-if="item.originalPrice">
  67. ¥{{(item.originalPrice/100).toFixed(2)}}
  68. </text>
  69. </view>
  70. <!-- <view class="right" v-if="item.salesCount">
  71. 销量{{item.salesCount}}
  72. </view> -->
  73. </view>
  74. <view class="address-box">
  75. <view class="address">
  76. {{item.address || ''}}
  77. </view>
  78. <view class="distance" v-if="item.distance">
  79. {{item.distance | filterDis}}
  80. </view>
  81. </view>
  82. </view>
  83. </view>
  84. </view>
  85. </view>
  86. <view class="right">
  87. <view class="store-item" v-for="(item,index) in list1" :key="index">
  88. <view @click="goGoodsDetail(item)">
  89. <zs-img :src="item.cover[0]" width="344rpx" height="344rpx" :radius="item.productType=='Web'?'full':'half'" mode="widthFix"></zs-img>
  90. <view class="info" v-if="item.productType!='Web'">
  91. <view class="title">
  92. <!-- <view class="tag">
  93. 今日特惠
  94. </view> -->
  95. <view class="text">
  96. {{item.title}}
  97. </view>
  98. </view>
  99. <!-- <view class="discount-tag">
  100. {{(item.salePrice/item.originalPrice)*10}}
  101. </view> -->
  102. <!-- <view class="desc">
  103. {{item.goodsVos[0].goodsDescribe}}
  104. </view> -->
  105. <view class="price-box">
  106. <view class="left">
  107. <text class="price" v-if="item.salePrice">
  108. ¥{{(item.salePrice/100).toFixed(2)}} {{item.productType=='PetrolStation'?'/L':''}}
  109. </text>
  110. <text class="label" v-if="(item.productType=='Scenic'||item.productType=='Hotel'||item.productType=='Cinema'||item.productType=='MovieTicket'||item.productType=='Restaurant'||item.productType=='Shop')&&item.salePrice">
  111. </text>
  112. <text class="old-price" v-if="item.originalPrice">
  113. ¥{{(item.originalPrice/100).toFixed(2)}}
  114. </text>
  115. </view>
  116. <!-- <view class="right" v-if="item.salesCount">
  117. 销量{{item.salesCount}}
  118. </view> -->
  119. </view>
  120. <view class="address-box">
  121. <view class="address">
  122. {{item.address || ''}}
  123. </view>
  124. <view class="distance" v-if="item.distance">
  125. {{item.distance |filterDis}}
  126. </view>
  127. </view>
  128. </view>
  129. </view>
  130. </view>
  131. </view>
  132. </zs-list>
  133. </view>
  134. </view>
  135. <!-- 广告弹窗 -->
  136. <zs-adv-dialog :list="dialogAdvList"></zs-adv-dialog>
  137. </view>
  138. </template>
  139. <script>
  140. import {
  141. getUserDetail,
  142. getMenu,
  143. getAdv,
  144. homeSearch
  145. } from '@/api/common.js'
  146. import {cityList} from '@/api/movie.js'
  147. import {getCityList} from '@/api/common'
  148. import { search } from '@/api/shop.js';
  149. // 腾讯地图
  150. var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
  151. var qqmapsdk = new QQMapWX({key:'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'});
  152. export default {
  153. data() {
  154. return {
  155. background:false,
  156. loading: false,
  157. userId: '',
  158. city:'定位中',
  159. status: 'more',
  160. current:0,
  161. discountsList: [],//菜单
  162. advList:[],
  163. advList1:[],
  164. dialogAdvList:[],
  165. list: [],
  166. copyList: [],
  167. list1: [],
  168. copyList1: [],
  169. query:{
  170. distance:5000,
  171. latitude:0,
  172. longitude:0,
  173. regionCode:'',
  174. page:0,
  175. size:10
  176. }
  177. // query:{
  178. // queryName:'',
  179. // 'location.lat':0,
  180. // 'location.lon':0,
  181. // pageCurrent:1,
  182. // pageSize:100
  183. // },
  184. }
  185. },
  186. filters: {
  187. filterDis: function(value) {
  188. if(value<1000){
  189. return value.toFixed(0) +'m';
  190. }else{
  191. return (value/1000).toFixed(0)+'km'
  192. }
  193. }
  194. },
  195. methods: {
  196. chooseCity(){
  197. uni.navigateTo({
  198. url:`/hotel/cityList?backUrl=/pages/index/index`
  199. })
  200. },
  201. // swiper变动
  202. swiperChange(val) {
  203. this.current = val.target.current
  204. },
  205. jump(url){
  206. uni.reLaunch({
  207. url
  208. })
  209. },
  210. // 点击搜索
  211. handleSearch(){
  212. if(!uni.getStorageSync('token')){
  213. return uni.showModal({
  214. title:'请登录',
  215. confirmText:'去登录',
  216. success(res){
  217. if(res.confirm){
  218. uni.navigateTo({
  219. url:'/login/login/login?redirect=/pages/index/index'
  220. })
  221. }
  222. }
  223. })
  224. }
  225. uni.reLaunch({
  226. url:'./search'
  227. })
  228. // if(!val) return
  229. // this.query.queryName = val
  230. // this.query.pageCurrent = 1
  231. // this.list = []
  232. // this.list1 = []
  233. // this.status = 'more'
  234. // this.search()
  235. },
  236. // 获取当前城市
  237. getCity(){
  238. let that = this
  239. this.city = '定位中'
  240. return new Promise((resolve,reject)=>{
  241. uni.getLocation({
  242. type: 'gcj02',
  243. success: (res) => {
  244. // 解析地址
  245. that.query.latitude = res.latitude
  246. that.query.longitude = res.longitude
  247. // that.query['location.lat'] = res.latitude
  248. // that.query['location.lon'] = res.longitude
  249. // 存储经纬度
  250. uni.setStorageSync('location',JSON.stringify({latitude:res.latitude,longitude:res.longitude}))
  251. if(that.query.regionCode){//选择了城市
  252. console.log('选择了城市',that.city);
  253. that.city = uni.getStorageSync('HomeCity')
  254. resolve()
  255. }else{//没选择城市
  256. console.log('没选择城市',that.city);
  257. qqmapsdk.reverseGeocoder({
  258. location: {
  259. latitude: res.latitude,
  260. longitude: res.longitude
  261. },
  262. success: function(res) {
  263. // 市
  264. that.city = res.result.address_component.city
  265. if(uni.setStorageSync('districtList')&&uni.getStorageSync('city')==that.city) return
  266. uni.setStorageSync('city',res.result.address_component.city)
  267. // 获取市区的行政区
  268. qqmapsdk.getDistrictByCityId({
  269. // 传入对应省份ID获得城市数据,传入城市ID获得区县数据,依次类推
  270. id: res.result.ad_info.city_code.substr(3), //对应接口getCityList返回数据的Id,如:北京是'110000'
  271. success: function(res) {//成功后的回调
  272. console.log('对应城市ID下的区县数据:', res.result[0]);
  273. let data = res.result[0]
  274. data.map(item=>{
  275. item.label = item.fullname
  276. })
  277. uni.setStorageSync('districtList',JSON.stringify(data))
  278. },
  279. fail: function(error) {
  280. console.error(error);
  281. },
  282. complete: function(res) {
  283. console.log(res);
  284. }
  285. });
  286. resolve()
  287. },
  288. fail: function(res) {
  289. that.city = '定位失败'
  290. },
  291. })
  292. }
  293. },
  294. fail: () => {
  295. console.log("获取经纬度失败");
  296. },
  297. })
  298. })
  299. },
  300. // 跳转优惠详情
  301. goDetail(url,id,banner,title) {
  302. uni.navigateTo({
  303. url: `${url}?id=${id}&title=${title}`,
  304. success(res) {
  305. res.eventChannel.emit('banner', banner)
  306. }
  307. })
  308. },
  309. goGoodsDetail(item) {
  310. // uni.setStorageSync('shopInfo', JSON.stringify(item))
  311. let url = ''
  312. if (item.productType === 'Web') {
  313. url = item.meta.url
  314. console.log('链接');
  315. } else if (item.productType === 'Recharge') {
  316. url = '/detail/virtualGoods/index'
  317. console.log('充值类');
  318. } else if (item.productType === 'Scenic') {
  319. url = '/scenic/detail'
  320. console.log('景区');
  321. } else if (item.productType === 'ScenicTicket') {
  322. console.log('景区门票');
  323. } else if (item.productType === 'StudyTour') {
  324. url = '/detail/virtualGoods/index'
  325. console.log('StudyTour');
  326. } else if (item.productType === 'Hotel') {
  327. url = '/hotel/hotelDetail'
  328. console.log('酒店');
  329. } else if (item.productType === 'HotelRoom') {
  330. url = '/hotel/hotelDetail'
  331. console.log('酒店房型');
  332. } else if (item.productType === 'Cinema') {
  333. url = '/movie/movieList'
  334. console.log('电影院');
  335. } else if (item.productType === 'MovieTicket') {
  336. url = '/movie/movieDetail'
  337. console.log('电影票');
  338. } else if (item.productType === 'Restaurant') {
  339. url = '/detail/virtualGoods/index'
  340. console.log('餐厅');
  341. } else if (item.productType === 'RestaurantFood') {
  342. url = '/detail/discountsDetail/index'
  343. console.log('餐厅美食');
  344. } else if (item.productType === 'CarMaintain') {
  345. url = '/detail/discountsDetail/index'
  346. console.log('汽车保养门店');
  347. } else if (item.productType === 'CarMaintainGoods') {
  348. url = '/detail/detail/discountsDetail/index/index'
  349. console.log('汽车保养商品');
  350. } else if (item.productType === 'CarMaintainService') {
  351. url = '/detail/detail/discountsDetail/index/index'
  352. console.log('汽车保养服务');
  353. } else if (item.productType === 'Shop') {
  354. url = '/detail/shopDetail/shopDetail'
  355. console.log('店铺');
  356. } else if (item.productType === 'ShopGoods') {
  357. url = '/detail/goodsDetail/index'
  358. console.log('店铺商品');
  359. } else if (item.productType === 'ShopService') {
  360. url = '/detail/goodsDetail/index'
  361. console.log('店铺服务');
  362. } else if (item.productType === 'Coupon') {
  363. url = '/detail/goodsDetail/index'
  364. console.log('优惠券');
  365. }
  366. else if (item.productType === 'PetrolStation') {
  367. url = '/refuel/refuelDetail'
  368. console.log('加油站');
  369. }
  370. else {
  371. // 处理未知或未定义的产品类型
  372. console.log('未知产品类型');
  373. }
  374. uni.navigateTo({
  375. // url: `../../detail/goodsDetail/index?id=${item.goodsVos[0].goodsId}`
  376. url: `${url}?id=${item.pid}&epId=${item.id}`
  377. })
  378. },
  379. // 更多套餐
  380. handleMore() {
  381. uni.reLaunch({
  382. // url:'../../login/login/login'
  383. url: '../../combo/combo/combo'
  384. })
  385. },
  386. // 获取用户详情
  387. getUserDetail() {
  388. getUserDetail().then(res => {
  389. uni.setStorageSync('userInfo', JSON.stringify(res.content))
  390. })
  391. },
  392. loadMore() {
  393. // if(this.query['location.lat']&&this.query['location.lon']){
  394. if(this.query.latitude&&this.query.longitude){
  395. this.search()
  396. }
  397. },
  398. search() {
  399. if(this.status == 'noMore' || this.status == 'loading') return
  400. this.status = 'loading'
  401. homeSearch(this.query).then(res=>{
  402. if(res.state == 'Success'){
  403. this.loading = false
  404. let list = []
  405. let list1 = []
  406. let data = res.content.content
  407. data.map((item,index)=>{
  408. if(item.productType == 'Cinema'){
  409. delete item.meta
  410. }
  411. if(index%2 == 0){
  412. list.push(item)
  413. }else{
  414. list1.push(item)
  415. }
  416. })
  417. // 存储原始数据
  418. this.list = this.list.concat(list)
  419. this.list1 = this.list1.concat(list1)
  420. // this.list = JSON.parse(JSON.stringify(this.copyList))
  421. // this.list1 = JSON.parse(JSON.stringify(this.copyList1))
  422. if(this.query.page+1 == res.content.totalPages || res.content.totalPages == 0){
  423. this.status = 'noMore'
  424. }else{
  425. this.status = 'more'
  426. this.query.page++
  427. }
  428. // if(!this.advList1.length){
  429. // this.getGoodsAdv().then(()=>{
  430. // this.advList1.map(item=>{
  431. // if(item.showSort<= (this.list.length + this.list1.length)){
  432. // if((item.showSort-1)%2 == 0){
  433. // this.list.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
  434. // }else{
  435. // this.list1.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
  436. // }
  437. // }
  438. // })
  439. // }
  440. // )
  441. // }else{
  442. // this.advList1.map(item=>{
  443. // if(item.showSort<= (this.list.length + this.list1.length)){
  444. // if((item.showSort-1)%2 == 0){
  445. // this.list.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
  446. // }else{
  447. // this.list1.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
  448. // }
  449. // }
  450. // })
  451. // }
  452. }
  453. })
  454. },
  455. // 金刚区
  456. getMenu(){
  457. return new Promise((resolve,reject)=>{
  458. getMenu({currentPage:1,pageSize:10,status:2,belongType:2}).then(res=>{
  459. if(res.state == 'Success'){
  460. this.discountsList = res.content.records
  461. resolve(1)
  462. }
  463. })
  464. })
  465. },
  466. // 广告位
  467. getAdv(){
  468. return new Promise((resolve,reject)=>{
  469. getAdv({currentPage:1,pageSize:10,advertsType:1,status:1,belongType:2}).then(res=>{
  470. if(res.state == 'Success'){
  471. this.advList = res.content.records
  472. // this.advList = res.content.records.filter((item,index)=>index<2)
  473. // this.advList1 = res.content.records.filter((item,index)=>index>=2)
  474. resolve(2)
  475. }
  476. })
  477. })
  478. },
  479. // 弹窗广告
  480. getDialogAdv() {
  481. let loginShow
  482. if(uni.getStorageSync('token')){
  483. loginShow = 2
  484. }else{
  485. loginShow = 1
  486. }
  487. getAdv({
  488. currentPage: 1,
  489. pageSize: 99,
  490. status:1,
  491. belongType: 2,
  492. loginShow,
  493. advertsType: 6,
  494. }).then((res) => {
  495. if (res.state == "Success") {
  496. this.dialogAdvList = res.content.records
  497. }
  498. });
  499. },
  500. // 获取商品列表内广告位
  501. getGoodsAdv(){
  502. return new Promise((resolve,reject)=>{
  503. getAdv({currentPage:1,pageSize:99,advertsType:2,status:1,belongType:2}).then(res=>{
  504. if(res.state == 'Success'){
  505. this.advList1 = res.content.records
  506. resolve(2)
  507. }
  508. })
  509. })
  510. },
  511. // 获取电影票城市id
  512. cityList(){
  513. return new Promise((resolve,reject)=>{
  514. cityList().then(res=>{
  515. if(res.state == 'Success'){
  516. let city = uni.getStorageSync('city').replace('市','')
  517. let cityId = res.content.data.filter(item=>item.name == city)[0].cityId
  518. uni.setStorageSync('movieCityId',cityId)
  519. resolve()
  520. }
  521. })
  522. })
  523. },
  524. getCityList() {
  525. return new Promise((resolve,reject)=>{
  526. getCityList({name:'',page:0,size:999}).then(res=>{
  527. if(res.state == 'Success'){
  528. let city = this.city.replace('市','')
  529. res.content.content.forEach(item=>{
  530. if(item.name.indexOf(city) != -1){
  531. this.query.regionCode = item.code
  532. resolve()
  533. }
  534. })
  535. resolve()
  536. }
  537. })
  538. })
  539. }
  540. },
  541. onPageScroll(e) {
  542. if(e.scrollTop >= 50){
  543. this.background = true
  544. }else{
  545. this.background = false
  546. }
  547. },
  548. onShow() {
  549. if (uni.getStorageSync('token')&&!uni.getStorageSync('userInfo')) {
  550. this.getUserDetail()
  551. }
  552. },
  553. onHide() {
  554. },
  555. onLoad(query){
  556. console.log(444,query);
  557. this.loading = true
  558. const token = uni.getStorageSync('token')
  559. console.log(!!token)
  560. if(query.scene){
  561. // const token = uni.getStorageSync('token')
  562. if(token){
  563. uni.showToast({
  564. title: '已经是平台用户',
  565. icon: 'none'
  566. });
  567. return
  568. }
  569. uni.setStorageSync('inviteCode',decodeURIComponent(query.scene))
  570. }
  571. this.query.regionCode = query.regionCode || ''
  572. this.getDialogAdv()
  573. Promise.all([this.getMenu(),this.getCity()]).then(res=>{
  574. if(query.regionCode){
  575. this.search()
  576. }else{
  577. this.getCityList().then(()=>{
  578. this.search()
  579. })
  580. }
  581. this.cityList()
  582. })
  583. },
  584. onShareTimeline() {
  585. return {
  586. title: "慧研学惠生活",
  587. query: "id=1",
  588. imageUrl: "https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/XHBjBiMRhVYG8f1a30bbbd80c2346197b81470444c9a.png/1.png",
  589. };
  590. },
  591. onShareAppMessage() {
  592. return {
  593. title: "慧研学惠生活",
  594. path: "/pages/index/index",
  595. };
  596. },
  597. onPullDownRefresh() {
  598. this.status = 'more'
  599. this.list = []
  600. this.list1 = []
  601. this.query.page = 0
  602. Promise.all([this.getMenu(),this.getCity()]).then(res=>{
  603. this.getCityList().then(()=>{
  604. this.search()
  605. })
  606. this.cityList()
  607. uni.stopPullDownRefresh()
  608. })
  609. },
  610. created() {
  611. // this.loading = true
  612. // this.getDialogAdv()
  613. // Promise.all([this.getMenu(),this.getCity()]).then(res=>{
  614. // this.getCityList().then(()=>{
  615. // this.search()
  616. // })
  617. // this.cityList()
  618. // })
  619. }
  620. }
  621. </script>
  622. <style lang="scss">
  623. .home {
  624. // padding-bottom:120rpx;
  625. // background: linear-gradient(180deg, #FFFFFF 0%, #DCE8FF 100%);
  626. background: #F9F9F9;
  627. .card-title {
  628. display: flex;
  629. justify-content: center;
  630. .title {
  631. font-size: 32rpx;
  632. text-align: center;
  633. color: #fff;
  634. width: 210rpx;
  635. line-height: 64rpx;
  636. background: linear-gradient(360deg, #3074F8 0%, #568FFF 100%);
  637. border-radius: 0rpx 0rpx 24rpx 24rpx;
  638. }
  639. }
  640. .login-home {
  641. // background: linear-gradient(178deg, #FFFFFF 0%, #F9F9F9 100%);
  642. // background: #FFF;
  643. .discount-list {
  644. display: flex;
  645. flex-wrap: wrap;
  646. // padding: 30rpx 0;
  647. margin: 0 24rpx 20rpx;
  648. // background: #fff;
  649. border-radius: 16rpx;
  650. position: relative;
  651. top: 20rpx;
  652. padding-top: 20rpx;
  653. .discount-item {
  654. width: 20%;
  655. display: flex;
  656. flex-direction: column;
  657. align-items: center;
  658. margin-top: 20rpx;
  659. margin-bottom: 20rpx;
  660. position: relative;
  661. .icon {
  662. width: 80rpx;
  663. height: 80rpx;
  664. }
  665. .title {
  666. font-size: 24rpx;
  667. margin-top: 10rpx;
  668. font-weight: 300;
  669. color: #222222;
  670. }
  671. .tag {
  672. position: absolute;
  673. top: -20rpx;
  674. left: 50%;
  675. background: #FF0615;
  676. box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
  677. border-radius: 14rpx 14rpx 14rpx 0rpx;
  678. color: #fff;
  679. white-space: nowrap;
  680. font-size: 18rpx;
  681. line-height: 24rpx;
  682. height: 24rpx;
  683. padding: 0 10rpx;
  684. // width: fit-content;
  685. // background-size: 100% 34rpx;
  686. }
  687. .desc {
  688. color: #FF0817;
  689. font-size: 16rpx;
  690. text-align: center;
  691. margin-top: 4rpx;
  692. }
  693. }
  694. }
  695. .title-img {
  696. width: 686rpx;
  697. height: 166rpx;
  698. margin: 24rpx 32rpx;
  699. }
  700. .swiper-box{
  701. position: relative;
  702. width: 344rpx;
  703. height: 462rpx;
  704. border-radius: 16rpx;
  705. margin-bottom: 20rpx;
  706. .progress{
  707. position: absolute;
  708. top: 38rpx;
  709. right: 20rpx;
  710. z-index: 2;
  711. color: #FFFFFF;
  712. font-size: 16rpx;
  713. background: rgba(255, 255, 255, 0.3);
  714. padding: 2rpx 10rpx;
  715. border-radius: 14rpx;
  716. }
  717. .swiper {
  718. position: relative;
  719. height: 100%;
  720. .swiper-item {
  721. width: 344rpx;
  722. height: 462rpx;
  723. border-radius: 16rpx;
  724. object-fit: cover;
  725. }
  726. }
  727. }
  728. .advertise-box {
  729. display: flex;
  730. justify-content: space-between;
  731. margin: 0 24rpx;
  732. padding: 20rpx 0;
  733. }
  734. .content {
  735. border-radius: 16rpx 16rpx 0 0;
  736. }
  737. .zs-list {
  738. display: flex;
  739. flex-wrap: wrap;
  740. justify-content: space-between;
  741. padding: 0 24rpx;
  742. .left {
  743. .adv-swiper{
  744. width: 340rpx;
  745. height: 444rpx;
  746. margin-bottom: 25rpx;
  747. .adv-item{
  748. width: 340rpx;
  749. height: 444rpx;
  750. }
  751. }
  752. }
  753. .ad{
  754. width: 340rpx;
  755. border-radius: 16rpx;
  756. }
  757. .store-item {
  758. width: 344rpx;
  759. margin-bottom: 20rpx;
  760. // box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
  761. border-radius: 16rpx;
  762. background: #fff;
  763. .icon {
  764. width: 100%;
  765. height: 300rpx;
  766. border-radius: 16rpx 16rpx 0 0;
  767. }
  768. .info{
  769. flex: 1;
  770. padding: 16rpx;
  771. position: relative;
  772. .title{
  773. margin-top: 10rpx;
  774. display: flex;
  775. align-items: center;
  776. .tag{
  777. display: inline-block;
  778. text-align: center;
  779. font-size: 20rpx;
  780. color: #FFFFFF;
  781. background: $uni-color-primary;
  782. padding: 2rpx 10rpx;
  783. border-radius: 8rpx;
  784. }
  785. .text{
  786. font-size: 28rpx;
  787. font-weight: bold;
  788. flex: 1;
  789. white-space: nowrap;
  790. overflow: hidden;
  791. text-overflow: ellipsis;
  792. }
  793. }
  794. .desc{
  795. font-size: 24rpx;
  796. color: #AAAAAA;
  797. overflow: hidden;
  798. text-overflow: ellipsis;
  799. /* 弹性伸缩盒子模型显示 */
  800. display: -webkit-box;
  801. /* 限制在一个块元素显示的文本的行数 */
  802. -webkit-line-clamp: 2;
  803. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  804. -webkit-box-orient: vertical;
  805. margin-top: 12rpx;
  806. }
  807. .discount-tag{
  808. display: inline-block;
  809. padding: 0 10rpx;
  810. font-size: 20rpx;
  811. color: #EE4320;
  812. line-height: 28rpx;
  813. background: #FFF6F5;
  814. border-radius: 8rpx 8rpx 8rpx 8rpx;
  815. margin-top: 10rpx;
  816. }
  817. .price-box{
  818. display: flex;
  819. justify-content: space-between;
  820. align-items: center;
  821. margin-top: 12rpx;
  822. .left{
  823. display: flex;
  824. align-items: flex-end;
  825. vertical-align: bottom;
  826. .unit{
  827. font-size: 20rpx;
  828. color: $uni-color-primary;
  829. font-weight: bold;
  830. }
  831. .price{
  832. font-size: 32rpx;
  833. line-height: 32rpx;
  834. color: $uni-color-primary;
  835. font-weight: bold;
  836. }
  837. .label{
  838. font-size: 20rpx;
  839. color: #AAAAAA;
  840. margin-left: 6rpx;
  841. }
  842. .old-price{
  843. font-size: 20rpx;
  844. color: #AAAAAA;
  845. text-decoration: line-through;
  846. margin-left: 12rpx;
  847. }
  848. }
  849. .right{
  850. font-size: 24rpx;
  851. color: #AAAAAA;
  852. }
  853. }
  854. .address-box{
  855. display: flex;
  856. align-items: center;
  857. justify-content: space-between;
  858. font-size: 20rpx;
  859. color: #AAAAAA;
  860. margin-top: 15rpx;
  861. .address{
  862. width: 200rpx;
  863. overflow: hidden;
  864. text-overflow: ellipsis;
  865. /* 弹性伸缩盒子模型显示 */
  866. display: -webkit-box;
  867. /* 限制在一个块元素显示的文本的行数 */
  868. -webkit-line-clamp: 1;
  869. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  870. -webkit-box-orient: vertical;
  871. }
  872. .distance{
  873. }
  874. }
  875. }
  876. }
  877. }
  878. }
  879. }
  880. </style>