index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687
  1. <template>
  2. <view class="home">
  3. <zs-skeleton :loading="loading"></zs-skeleton>
  4. <zs-banner :city="city" :background="background" position @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. <view class="swiper-box">
  20. <view class="progress">
  21. {{current+1+'/'+advList.length}}
  22. </view>
  23. <swiper class="swiper" @change="swiperChange" :current="current" :indicator-dots="false" circular :autoplay="true"
  24. :interval="3000" :duration="1000">
  25. <swiper-item v-for="(item,index) in advList" :key="item.id" @click="jump(item.jumpUrl)">
  26. <image class="swiper-item" mode="" :src="item.advertsImg">
  27. </image>
  28. </swiper-item>
  29. </swiper>
  30. </view>
  31. <!-- 广告位 -->
  32. <!-- <view class="advertise-box">
  33. <view class="item" v-for="item in advList" :key="item.id">
  34. <zs-img
  35. :src="item.advertsImg"
  36. width="335rpx" height="188rpx" radius="full" mode=""></zs-img>
  37. </view>
  38. </view> -->
  39. <view class="content">
  40. <!-- 列表 -->
  41. <zs-list class="store-box" mt="0" @load="loadMore" :status="status">
  42. <view class="left">
  43. <!-- 广告banner -->
  44. <!-- <swiper class="adv-swiper" v-if="advList1.length" indicator-active-color="#fff" indicator-color="rgba(255, 255, 255, .46)" :indicator-dots="advList1.length>1" circular autoplay>
  45. <swiper-item v-for="item in advList1" :key="item" @click="jump(item.jumpUrl)">
  46. <image class="adv-item"
  47. :src="item.advertsImg"
  48. mode=""></image>
  49. </swiper-item>
  50. </swiper> -->
  51. <view class="store-item" v-for="(item,index) in list" :key="index">
  52. <template v-if="item.isAdv">
  53. <!-- <image class="ad" :src="item.advertsImg" mode="widthFix"></image> -->
  54. <zs-img :src="item.advertsImg" radius="full" width="340rpx" mode="widthFix" @click.native="jump(item.jumpUrl)"></zs-img>
  55. </template>
  56. <view v-else @click="goGoodsDetail(item)">
  57. <zs-img :src="item.goodsVos[0].goodsImg" width="340rpx" height="340rpx" mode="center"></zs-img>
  58. <view class="info">
  59. <view class="title">
  60. {{item.goodsVos[0].goodsName}}
  61. </view>
  62. <view class="desc">
  63. {{item.goodsVos[0].goodsDescribe}}
  64. </view>
  65. <view class="price-box">
  66. <view class="left">
  67. <!-- <view class="unit">
  68. </view> -->
  69. <view class="price">
  70. ¥{{item.goodsVos[0].realPrice}}
  71. </view>
  72. </view>
  73. <view class="right">
  74. 销量{{item.goodsVos[0].saleNum}}
  75. </view>
  76. </view>
  77. </view>
  78. </view>
  79. </view>
  80. </view>
  81. <view class="right">
  82. <view class="store-item" v-for="(item,index) in list1" :key="index">
  83. <template v-if="item.isAdv">
  84. <zs-img :src="item.advertsImg" radius="full" width="340rpx" mode="widthFix" @click.native="jump(item.jumpUrl)"></zs-img>
  85. <!-- <image class="ad" :src="item.advertsImg" mode="widthFix"></image> -->
  86. </template>
  87. <view v-else @click="goGoodsDetail(item)">
  88. <zs-img :src="item.goodsVos[0].goodsImg" width="340rpx" height="340rpx" mode="center"></zs-img>
  89. <view class="info">
  90. <view class="title">
  91. {{item.goodsVos[0].goodsName}}
  92. </view>
  93. <view class="desc">
  94. {{item.goodsVos[0].goodsDescribe}}
  95. </view>
  96. <view class="price-box">
  97. <view class="left">
  98. <!-- <view class="unit">
  99. </view> -->
  100. <view class="price">
  101. ¥{{item.goodsVos[0].realPrice}}
  102. </view>
  103. </view>
  104. <view class="right">
  105. 销量{{item.goodsVos[0].saleNum}}
  106. </view>
  107. </view>
  108. </view>
  109. </view>
  110. </view>
  111. </view>
  112. </zs-list>
  113. </view>
  114. </view>
  115. </view>
  116. </template>
  117. <script>
  118. import {
  119. getUserDetail,
  120. getMenu,
  121. getAdv
  122. } from '@/api/common.js'
  123. import { search } from '@/api/shop.js';
  124. // 腾讯地图
  125. var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
  126. var qqmapsdk = new QQMapWX({key:'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'});
  127. export default {
  128. data() {
  129. return {
  130. background:false,
  131. loading: false,
  132. userId: '',
  133. city:'定位中',
  134. status: 'more',
  135. current:0,
  136. bannerList:['https://alipic.lanhuapp.com/XDSlicePNGMAX2f4cb415a269b2e935c7a97da9077db4d78ddb8306ac44ec1e10274387048a22.png',
  137. 'https://alipic.lanhuapp.com/XDSlicePNGMAX2f4cb415a269b2e935c7a97da9077db4d78ddb8306ac44ec1e10274387048a22.png'],
  138. discountsList: [],//菜单
  139. advList:[],
  140. advList1:[],
  141. list: [],
  142. copyList: [],
  143. list1: [],
  144. copyList1: [],
  145. query:{
  146. queryName:'',
  147. 'location.lat':0,
  148. 'location.lon':0,
  149. pageCurrent:1,
  150. pageSize:10
  151. },
  152. }
  153. },
  154. methods: {
  155. // swiper变动
  156. swiperChange(val) {
  157. this.current = val.target.current
  158. },
  159. jump(url){
  160. uni.reLaunch({
  161. url
  162. })
  163. },
  164. // 点击搜索
  165. handleSearch(){
  166. if(!uni.getStorageSync('token')){
  167. return uni.showModal({
  168. title:'请登录',
  169. confirmText:'去登录',
  170. success(res){
  171. console.log(res);
  172. if(res.confirm){
  173. uni.navigateTo({
  174. url:'/login/login/login?redirect=/pages/index/index'
  175. })
  176. }
  177. }
  178. })
  179. }
  180. uni.reLaunch({
  181. url:'./search'
  182. })
  183. // if(!val) return
  184. // this.query.queryName = val
  185. // this.query.pageCurrent = 1
  186. // this.list = []
  187. // this.list1 = []
  188. // this.status = 'more'
  189. // this.search()
  190. },
  191. // 获取当前城市
  192. getCity(){
  193. let that = this
  194. return new Promise((resolve,reject)=>{
  195. uni.getLocation({
  196. type: 'gcj02',
  197. success: (res) => {
  198. // 解析地址
  199. that.query['location.lat'] = res.latitude
  200. that.query['location.lon'] = res.longitude
  201. // 存储经纬度
  202. uni.setStorageSync('location',JSON.stringify({latitude:res.latitude,longitude:res.longitude}))
  203. qqmapsdk.reverseGeocoder({
  204. location: {
  205. latitude: res.latitude,
  206. longitude: res.longitude
  207. },
  208. success: function(res) {
  209. // 市
  210. that.city = res.result.address_component.city
  211. console.log(9999,that.city,res);
  212. if(uni.setStorageSync('districtList')&&uni.getStorageSync('city')==that.city) return
  213. uni.setStorageSync('city',res.result.address_component.city)
  214. // 获取市区的行政区
  215. qqmapsdk.getDistrictByCityId({
  216. // 传入对应省份ID获得城市数据,传入城市ID获得区县数据,依次类推
  217. id: res.result.ad_info.city_code.substr(3), //对应接口getCityList返回数据的Id,如:北京是'110000'
  218. success: function(res) {//成功后的回调
  219. console.log('对应城市ID下的区县数据:', res.result[0]);
  220. let data = res.result[0]
  221. data.map(item=>{
  222. item.label = item.fullname
  223. })
  224. uni.setStorageSync('districtList',JSON.stringify(data))
  225. },
  226. fail: function(error) {
  227. console.error(error);
  228. },
  229. complete: function(res) {
  230. console.log(res);
  231. }
  232. });
  233. resolve()
  234. },
  235. fail: function(res) {
  236. that.city = '定位失败'
  237. },
  238. })
  239. },
  240. fail: () => {
  241. console.log("获取经纬度失败");
  242. },
  243. })
  244. })
  245. },
  246. // 跳转优惠详情
  247. goDetail(url,id,banner,title) {
  248. uni.navigateTo({
  249. url: `${url}?id=${id}&title=${title}`,
  250. success(res) {
  251. res.eventChannel.emit('banner', banner)
  252. }
  253. })
  254. },
  255. goGoodsDetail(item) {
  256. uni.setStorageSync('shopInfo', JSON.stringify(item))
  257. uni.navigateTo({
  258. url: `../../detail/goodsDetail/index?id=${item.goodsVos[0].goodsId}`
  259. })
  260. // uni.reLaunch({
  261. // url: `/signUp/index?id=${item.goodsVos[0].goodsId}`
  262. // })
  263. },
  264. // 更多套餐
  265. handleMore() {
  266. uni.reLaunch({
  267. // url:'../../login/login/login'
  268. url: '../../combo/combo/combo'
  269. })
  270. },
  271. // 获取用户详情
  272. getUserDetail() {
  273. getUserDetail().then(res => {
  274. uni.setStorageSync('userInfo', JSON.stringify(res.content))
  275. })
  276. },
  277. loadMore() {
  278. if(this.query['location.lat']&&this.query['location.lon']){
  279. this.search()
  280. }
  281. },
  282. search() {
  283. if(this.status == 'noMore' || this.status == 'loading') return
  284. console.log('加载数据',this.status,this.list,this.list1,this.query.pageCurrent);
  285. this.status = 'loading'
  286. search(this.query).then(res=>{
  287. if(res.state == 'Success'){
  288. this.loading = false
  289. let list = []
  290. let list1 = []
  291. let data = res.content.records
  292. data.map((item,index)=>{
  293. if(index%2 == 0){
  294. list.push(item)
  295. }else{
  296. list1.push(item)
  297. }
  298. })
  299. // 存储原始数据
  300. this.copyList = this.copyList.concat(list)
  301. this.copyList1 = this.copyList1.concat(list1)
  302. this.list = JSON.parse(JSON.stringify(this.copyList))
  303. this.list1 = JSON.parse(JSON.stringify(this.copyList1))
  304. if(this.query.pageCurrent == res.content.pages){
  305. this.status = 'noMore'
  306. }else{
  307. this.status = 'more'
  308. this.query.pageCurrent++
  309. }
  310. if(!this.advList1.length){
  311. this.getGoodsAdv().then(()=>{
  312. this.advList1.map(item=>{
  313. if(item.showSort<= (this.list.length + this.list1.length)){
  314. if((item.showSort-1)%2 == 0){
  315. this.list.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
  316. }else{
  317. this.list1.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
  318. }
  319. }
  320. })
  321. }
  322. )
  323. }else{
  324. this.advList1.map(item=>{
  325. if(item.showSort<= (this.list.length + this.list1.length)){
  326. if((item.showSort-1)%2 == 0){
  327. this.list.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
  328. }else{
  329. this.list1.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
  330. }
  331. }
  332. })
  333. }
  334. // 获取商品里面的广告
  335. // getAdv({currentPage:1,pageSize:99,advertsType:2,status:1}).then(res1=>{
  336. // if(res.state == 'Success'){
  337. // res1.content.records.map(item=>{
  338. // data.splice(item.showSort-1,0,{isAdv:true,...item})
  339. // })
  340. // console.log(data);
  341. // data.map((item,index)=>{
  342. // if(index%2){
  343. // list.push(item)
  344. // }else{
  345. // list1.push(item)
  346. // }
  347. // })
  348. // this.list = this.list.concat(list)
  349. // this.list1 = this.list1.concat(list1)
  350. // // let total = this.list.length+this.list1.length
  351. // // if(total>=res.content.total){
  352. // if(this.query.pageCurrent == res.content.pages){
  353. // this.status = 'noMore'
  354. // }else{
  355. // this.status = 'more'
  356. // this.query.pageCurrent++
  357. // }
  358. // }
  359. // })
  360. }
  361. })
  362. },
  363. // 金刚区
  364. getMenu(){
  365. return new Promise((resolve,reject)=>{
  366. getMenu({currentPage:1,pageSize:10,status:2}).then(res=>{
  367. if(res.state == 'Success'){
  368. this.discountsList = res.content.records
  369. resolve(1)
  370. }
  371. })
  372. })
  373. },
  374. // 广告位
  375. getAdv(){
  376. return new Promise((resolve,reject)=>{
  377. getAdv({currentPage:1,pageSize:10,advertsType:1,status:1}).then(res=>{
  378. if(res.state == 'Success'){
  379. this.advList = res.content.records
  380. // this.advList = res.content.records.filter((item,index)=>index<2)
  381. // this.advList1 = res.content.records.filter((item,index)=>index>=2)
  382. resolve(2)
  383. }
  384. })
  385. })
  386. },
  387. // 获取商品列表内广告位
  388. getGoodsAdv(){
  389. return new Promise((resolve,reject)=>{
  390. getAdv({currentPage:1,pageSize:99,advertsType:2,status:1}).then(res=>{
  391. if(res.state == 'Success'){
  392. this.advList1 = res.content.records
  393. resolve(2)
  394. }
  395. })
  396. })
  397. },
  398. },
  399. onPageScroll(e) {
  400. if(e.scrollTop >= 50){
  401. this.background = true
  402. }else{
  403. this.background = false
  404. }
  405. },
  406. onShow() {
  407. if (uni.getStorageSync('token')&&!uni.getStorageSync('userInfo')) {
  408. this.getUserDetail()
  409. }
  410. },
  411. onHide() {},
  412. onLoad(query){
  413. uni.setStorageSync('inviteCode',decodeURIComponent(query.scene))
  414. },
  415. created() {
  416. this.loading = true
  417. Promise.all([this.getMenu(),this.getAdv(),this.getCity()]).then(res=>{
  418. this.search()
  419. })
  420. }
  421. }
  422. </script>
  423. <style lang="scss">
  424. .home {
  425. // padding-bottom:120rpx;
  426. // background: linear-gradient(180deg, #FFFFFF 0%, #DCE8FF 100%);
  427. background: #F9F9F9;
  428. .card-title {
  429. display: flex;
  430. justify-content: center;
  431. .title {
  432. font-size: 32rpx;
  433. text-align: center;
  434. color: #fff;
  435. width: 210rpx;
  436. line-height: 64rpx;
  437. background: linear-gradient(360deg, #3074F8 0%, #568FFF 100%);
  438. border-radius: 0rpx 0rpx 24rpx 24rpx;
  439. }
  440. }
  441. .login-home {
  442. // background: linear-gradient(178deg, #FFFFFF 0%, #F9F9F9 100%);
  443. // background: #FFF;
  444. .discount-list {
  445. display: flex;
  446. flex-wrap: wrap;
  447. // padding: 30rpx 0;
  448. margin: 0 24rpx 20rpx;
  449. // background: #fff;
  450. border-radius: 16rpx;
  451. position: relative;
  452. top: 20rpx;
  453. padding-top: 20rpx;
  454. .discount-item {
  455. width: 20%;
  456. display: flex;
  457. flex-direction: column;
  458. align-items: center;
  459. margin-top: 20rpx;
  460. margin-bottom: 20rpx;
  461. position: relative;
  462. .icon {
  463. width: 80rpx;
  464. height: 80rpx;
  465. }
  466. .title {
  467. font-size: 24rpx;
  468. margin-top: 10rpx;
  469. font-weight: 300;
  470. color: #222222;
  471. }
  472. .tag {
  473. position: absolute;
  474. top: -20rpx;
  475. left: 50%;
  476. background: #FF0615;
  477. box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
  478. border-radius: 14rpx 14rpx 14rpx 0rpx;
  479. color: #fff;
  480. white-space: nowrap;
  481. font-size: 18rpx;
  482. line-height: 24rpx;
  483. height: 24rpx;
  484. padding: 0 10rpx;
  485. // width: fit-content;
  486. // background-size: 100% 34rpx;
  487. }
  488. .desc {
  489. color: #FF0817;
  490. font-size: 16rpx;
  491. text-align: center;
  492. margin-top: 4rpx;
  493. }
  494. }
  495. }
  496. .title-img {
  497. width: 686rpx;
  498. height: 166rpx;
  499. margin: 24rpx 32rpx;
  500. }
  501. .swiper-box{
  502. position: relative;
  503. margin: 0 24rpx 20rpx;
  504. padding-top: 20rpx;
  505. width: 702rpx;
  506. height: 284rpx;
  507. border-radius: 16rpx;
  508. .progress{
  509. position: absolute;
  510. top: 38rpx;
  511. right: 20rpx;
  512. z-index: 2;
  513. color: #FFFFFF;
  514. font-size: 16rpx;
  515. background: rgba(255, 255, 255, 0.3);
  516. padding: 2rpx 10rpx;
  517. border-radius: 14rpx;
  518. }
  519. .swiper {
  520. position: relative;
  521. height: 100%;
  522. .swiper-item {
  523. width: 100%;
  524. height: 100%;
  525. border-radius: 16rpx;
  526. object-fit: cover;
  527. }
  528. }
  529. }
  530. .advertise-box {
  531. display: flex;
  532. justify-content: space-between;
  533. margin: 0 24rpx;
  534. padding: 20rpx 0;
  535. }
  536. .content {
  537. border-radius: 16rpx 16rpx 0 0;
  538. }
  539. .zs-list {
  540. display: flex;
  541. flex-wrap: wrap;
  542. justify-content: space-between;
  543. padding: 0 24rpx;
  544. .left {
  545. .adv-swiper{
  546. width: 340rpx;
  547. height: 444rpx;
  548. margin-bottom: 25rpx;
  549. .adv-item{
  550. width: 340rpx;
  551. height: 444rpx;
  552. }
  553. }
  554. }
  555. .ad{
  556. width: 340rpx;
  557. border-radius: 16rpx;
  558. }
  559. .store-item {
  560. width: 340rpx;
  561. margin-bottom: 20rpx;
  562. // box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
  563. border-radius: 16rpx;
  564. background: #fff;
  565. .icon {
  566. width: 100%;
  567. height: 300rpx;
  568. border-radius: 16rpx 16rpx 0 0;
  569. }
  570. .info{
  571. flex: 1;
  572. padding: 16rpx;
  573. display: flex;
  574. flex-direction: column;
  575. justify-content: space-between;
  576. position: relative;
  577. .title{
  578. font-size: 28rpx;
  579. font-weight: bold;
  580. width: 100%;
  581. white-space: nowrap;
  582. overflow: hidden;
  583. text-overflow: ellipsis;
  584. margin-top: 10rpx;
  585. }
  586. .desc{
  587. font-size: 24rpx;
  588. color: #AAAAAA;
  589. overflow: hidden;
  590. text-overflow: ellipsis;
  591. /* 弹性伸缩盒子模型显示 */
  592. display: -webkit-box;
  593. /* 限制在一个块元素显示的文本的行数 */
  594. -webkit-line-clamp: 2;
  595. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  596. -webkit-box-orient: vertical;
  597. margin-top: 12rpx;
  598. }
  599. .price-box{
  600. display: flex;
  601. justify-content: space-between;
  602. align-items: center;
  603. margin-top: 12rpx;
  604. .left{
  605. display: flex;
  606. align-items: flex-end;
  607. .unit{
  608. font-size: 20rpx;
  609. color: $uni-color-primary;
  610. font-weight: bold;
  611. }
  612. .price{
  613. font-size: 32rpx;
  614. color: $uni-color-primary;
  615. font-weight: bold;
  616. }
  617. }
  618. .right{
  619. font-size: 24rpx;
  620. color: #AAAAAA;
  621. }
  622. }
  623. }
  624. }
  625. }
  626. }
  627. }
  628. </style>