ckshopList.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618
  1. <template>
  2. <view class="box">
  3. <view class="regionBox">
  4. <view class="regionLine" @click="gocity">
  5. <view class="regionTxt">{{cityName}}</view>
  6. <image src="../../static/timg/icon_arrow_def@2x.png" mode="" class="jtbelow"></image>
  7. </view>
  8. <view class="regionSx"></view>
  9. <view class="regionLine" @click="quCilck">
  10. <view class="regionTxt">{{areaName}}</view>
  11. <image src="../../static/timg/icon_arrow_def@2x.png" mode="" class="jtbelow"></image>
  12. </view>
  13. </view>
  14. <view style="height: 90rpx;"></view>
  15. <view class="shopline" v-for="(item,index) in queryShopList" @click="goDetail(item)">
  16. <view class="newdistance" v-if="item.distance&&item.distance!= '0.00'">
  17. <image src="../../static/img2/dh.png" mode="" class="dhImg"></image>
  18. <view style="padding-top: 6rpx;"><span >{{item.distance}}km</span></view>
  19. </view>
  20. <view class="shoplineLeft">
  21. <image :src="item.doorImg1" mode="" class="shopImg" v-if="item.doorImg1"></image>
  22. <image :src="item.doorImg2" mode="" class="shopImg" v-else-if="item.doorImg2"></image>
  23. <image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
  24. </view>
  25. <view class="shopright">
  26. <view style="width: 410rpx;">
  27. <view class="shopTop">
  28. <view class="shopName">{{item.shopName}}</view>
  29. </view>
  30. <view class="brandsBg" v-if="item.brands">
  31. <view class="brands" v-for="(v,index2) in item.brands.split(',')">{{v}}</view>
  32. </view>
  33. </view>
  34. <view class="shopTime">营业时间:<span v-if="item.startTime">{{item.startTime}}</span> - <span
  35. v-if="item.endTime">{{item.endTime}}</span> </view>
  36. <view class="shopBottomLeft">
  37. <span class="shopaddress"
  38. v-if="item.address">{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</span>
  39. <!-- <span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span> -->
  40. </view>
  41. </view>
  42. </view>
  43. <!-- 上拉 加载更多 -->
  44. <view class="noMore" v-if="noMoreShow && (queryShopList.length!=0)">没有更多数据</view>
  45. <!-- 无数据空白页 -->
  46. <!-- <nodata v-if="queryShopList.length==0&&loading"></nodata> -->
  47. <view class="nodataBox" v-if="queryShopList.length==0&&loading">
  48. <image src="http://dmsphoto.66km.com.cn/thFiles/3C95A4C5-73F8-4B34-902B-703B8A0825C9.png" mode="widthFix" class="nodataImg"></image>
  49. <view class="noTxt">暂无数据</view>
  50. </view>
  51. <uni-popup ref="popup" type="right" :mask-click="true">
  52. <view class="popup-content">
  53. <scroll-view class="brandList" scroll-y="true">
  54. <!-- :class="{areaActvie:item.area==areaName}" -->
  55. <view v-for="item in areaList" class="areaListLine"
  56. @click="checkarea(item)">
  57. <span >{{item.area}}</span>
  58. <image v-if="item.code==area" class="areaCkIcon" src="http://dmsphoto.66km.com.cn/thFiles/0A1DADEA-1807-4ABC-B391-ECC8B1882DA4.png" mode=""></image>
  59. </view>
  60. </scroll-view>
  61. </view>
  62. </uni-popup>
  63. </view>
  64. </template>
  65. <script>
  66. import nodata from '../../components/nodata/nodata.vue'
  67. export default {
  68. components: {
  69. nodata,
  70. },
  71. data() {
  72. return {
  73. location: {
  74. lng: '',
  75. lat: '',
  76. },
  77. queryShopList: '',
  78. noMoreShow: false,
  79. goodsId:'',
  80. cityName:'城市',
  81. area:'',
  82. cityCode:'',
  83. areaName:'区域',
  84. loading:false,
  85. areaList:'',
  86. type:'',
  87. }
  88. },
  89. onLoad(opt) {
  90. var that = this;
  91. this.goodsId=opt.goodsId;
  92. this.type=opt.type
  93. uni.removeStorageSync('selectCity');
  94. uni.showLoading({
  95. title: '加载中'
  96. })
  97. uni.authorize({
  98. scope: 'scope.userLocation',
  99. success() {
  100. uni.getLocation({
  101. type: 'gcj02',
  102. success: function(res) {
  103. console.log(res)
  104. that.location.lat = res.latitude
  105. that.location.lng = res.longitude
  106. //that.getqueryShopList() //获取全部门店列表
  107. that.getAdress();
  108. //that.getqueryShopList() //获取全部门店列表
  109. },
  110. fail(err) {
  111. console.log(err)
  112. that.getqueryShopList() //获取全部门店列表
  113. }
  114. });
  115. },
  116. fail: (err) => {
  117. that.getqueryShopList();
  118. }})
  119. },
  120. onShow() {
  121. const selectCity = uni.getStorageSync('selectCity');
  122. //console.log("onShow")
  123. //console.log(selectCity)
  124. if(selectCity){
  125. this.cityName=selectCity.city
  126. this.cityCode=selectCity.code
  127. this.areaName='区域'
  128. this.area=''
  129. this.loading=false
  130. this.getAreaList()
  131. this.getqueryShopList() //获取门店列表
  132. }
  133. },
  134. methods: {
  135. quCilck(){
  136. this.$refs.popup.open("right")
  137. this.popupShow=true;
  138. },
  139. gocity(){
  140. if(this.type==4){
  141. uni.navigateTo({
  142. url:'/pages/subPack/chooseCity?type=4&id='+this.goodsId
  143. })
  144. }else if(this.type==5){
  145. uni.navigateTo({
  146. url:'/pages/subPack/chooseCity?type=5&id='+this.goodsId
  147. })
  148. }else{
  149. uni.navigateTo({
  150. url:'/pages/subPack/chooseCity?type=2&id='+this.goodsId
  151. })
  152. }
  153. },
  154. checkarea(item){
  155. if(this.area==item.code){
  156. this.areaName='区域'
  157. this.area=''
  158. this.getqueryShopList() //获取门店列表
  159. }else{
  160. this.areaName=item.area
  161. this.area=item.code
  162. this.getqueryShopList() //获取门店列表
  163. }
  164. this.$refs.popup.close()
  165. },
  166. getqueryShopList() {
  167. uni.showLoading({
  168. title: '加载中'
  169. })
  170. if(this.type==4){
  171. var url='openIntegralMall/getShopList'
  172. var params = {
  173. id:this.goodsId,
  174. lat: this.location.lat ? this.location.lat : '',
  175. lng: this.location.lng ? this.location.lng : '',
  176. city:this.cityCode,
  177. area:this.area
  178. }
  179. }else if(this.type==5){
  180. var url='openHome/queryShopList'
  181. var params = {
  182. collectingID:this.goodsId,
  183. city:this.cityCode,
  184. area:this.area,
  185. lat: this.location.lat ? this.location.lat : '',
  186. lng: this.location.lng ? this.location.lng : '',
  187. }
  188. }
  189. else{
  190. var url='openMall/openStoreList'
  191. var params = {
  192. goodsId:this.goodsId,
  193. id:this.goodsId,
  194. lat: this.location.lat ? this.location.lat : '',
  195. lng: this.location.lng ? this.location.lng : '',
  196. city:this.cityCode,
  197. area:this.area
  198. }
  199. }
  200. this.loading=false;
  201. this.$http(url,params, 'GET').then(res => {
  202. uni.hideLoading();
  203. this.loading=true;
  204. this.queryShopList = res.data
  205. //console.log('list+=', this.queryShopList);
  206. })
  207. },
  208. getAreaList(){
  209. if(this.type==4){
  210. var url='openIntegralMall/shop-area-list'
  211. var params = {
  212. city:this.cityCode,
  213. id:this.goodsId,
  214. }
  215. }else if(this.type==5){
  216. //集客
  217. var url='openHome/shop-area-list'
  218. var params = {
  219. city:this.cityCode,
  220. collectingID:this.goodsId,
  221. }
  222. }
  223. else{
  224. var url='openMall/shop-area-list'
  225. var params = {
  226. city:this.cityCode,
  227. id:this.goodsId,
  228. }
  229. }
  230. this.$http(url, params, 'GET').then(res => {
  231. this.areaList=res.data
  232. })
  233. },
  234. getAdress(){
  235. var that=this;
  236. var location = this.location.lng + ',' + this.location.lat
  237. console.log('location'+location)
  238. uni.request({
  239. url: 'https://restapi.amap.com/v3/geocode/regeo',
  240. data: {
  241. key: '389a059efa3f499d9145eb84b1c3248d',
  242. location: location,
  243. },
  244. dataType: "json",
  245. success: (res) => {
  246. console.log('定位城市', res);
  247. if(res.data.regeocode){
  248. console.log("城市名称")
  249. console.log(res.data.regeocode.addressComponent.city)
  250. // console.log(res.data.pois[0].cityname)
  251. //let cityname = res.data.regeocode.addressComponent.city;
  252. if(res.data.regeocode.addressComponent.city.length!=0){
  253. var cityname = res.data.regeocode.addressComponent.city;
  254. }else{
  255. var cityname = res.data.regeocode.addressComponent.province;
  256. }
  257. var cityCode = res.data.regeocode.addressComponent.adcode
  258. cityCode = cityCode.slice(0, -2)
  259. cityCode = cityCode + '00'
  260. this.cityName = cityname
  261. this.cityCode = cityCode
  262. that.getqueryShopList() //获取全部门店列表
  263. that.getAreaList()
  264. }else{
  265. console.log("接口获取失败")
  266. that.cityCode = ''
  267. that.getqueryShopList() //获取全部门店列表
  268. }
  269. }
  270. });
  271. },
  272. goDetail(item) {
  273. this.$store.commit('mutationsckshopInfo', item)
  274. uni.navigateBack({
  275. delta:-1
  276. })
  277. // uni.navigateTo({
  278. // url: '../shop/shopDetail?id=' + item.shopId
  279. // })
  280. }
  281. },
  282. // 下拉刷新
  283. onPullDownRefresh() {
  284. this.getqueryShopList()
  285. setTimeout(function() {
  286. uni.stopPullDownRefresh();
  287. }, 1000);
  288. },
  289. }
  290. </script>
  291. <style scoped>
  292. .box {
  293. min-height: 100vh;
  294. background-color: #F4F5F7;
  295. /* padding-top: 20rpx; */
  296. padding-bottom: 60rpx;
  297. }
  298. .shopline {
  299. margin: 0rpx 24rpx 20rpx;
  300. padding: 20rpx;
  301. background-color: #FFFFFF;
  302. border-radius: 10rpx;
  303. position: relative;
  304. display: flex;
  305. }
  306. .nodataImg {
  307. width: 400rpx;
  308. padding-top: 100rpx;
  309. }
  310. .noTxt {
  311. font-size: 36rpx;
  312. color: #999999;
  313. padding-top: 50rpx;
  314. }
  315. .nodataBox {
  316. text-align: center;
  317. }
  318. .shopImg {
  319. width: 146rpx;
  320. height: 146rpx;
  321. border-radius: 6rpx;
  322. }
  323. .shopBox {
  324. padding-top: 30rpx;
  325. display: flex;
  326. }
  327. .flex {
  328. display: flex;
  329. justify-content: space-between;
  330. }
  331. .shopCont {
  332. padding-left: 22rpx;
  333. width: 520rpx;
  334. }
  335. .shopName {
  336. font-size: 32rpx;
  337. font-weight: bold;
  338. color: #222222;
  339. line-height: 40rpx;
  340. width: 450rpx;
  341. white-space: nowrap;
  342. overflow: hidden;
  343. text-overflow: ellipsis;
  344. }
  345. .span1 {
  346. color: #FF4F00;
  347. font-size: 36rpx;
  348. }
  349. .span2 {
  350. color: #FF4F00;
  351. font-size: 22rpx;
  352. }
  353. .span3 {
  354. color: #333333;
  355. font-size: 22rpx;
  356. padding-left: 22rpx;
  357. }
  358. .shopBq {
  359. color: #FF4F00;
  360. font-size: 22rpx;
  361. border-radius: 4rpx;
  362. border: 1px solid #FF4F00;
  363. line-height: 30rpx;
  364. height: 30rpx;
  365. padding: 0rpx 5rpx;
  366. margin-top: 10rpx;
  367. }
  368. .brandsBg {
  369. display: flex;
  370. align-items: center;
  371. padding: 10rpx 0rpx;
  372. flex-wrap: wrap;
  373. height: 34rpx;
  374. /* 隐藏文字显示 ...不换行 */
  375. overflow: hidden;
  376. text-overflow: ellipsis;
  377. white-space: nowrap;
  378. }
  379. .brands {
  380. border-radius: 4rpx;
  381. padding: 0 5rpx;
  382. color: #F19D01;
  383. height: 28rpx;
  384. border: 1px solid #F19D01;
  385. font-size: 22rpx;
  386. line-height: 30rpx;
  387. margin: 5rpx 10rpx 5rpx 0rpx;
  388. }
  389. .timeBg {
  390. display: flex;
  391. }
  392. .shopTime {
  393. color: #666666;
  394. font-size: 26rpx;
  395. padding-top: 4rpx;
  396. }
  397. .addressBox {
  398. color: #666666;
  399. font-size: 22rpx;
  400. }
  401. .shopNameSearchInput {
  402. width: 500rpx;
  403. }
  404. .colorCS {
  405. color: #FF4F00;
  406. }
  407. .shopbox {
  408. padding: 0 16rpx;
  409. }
  410. .shopImg {
  411. width: 146rpx;
  412. height: 146rpx;
  413. border-radius: 10rpx;
  414. }
  415. .shopCallImg {
  416. width: 38rpx;
  417. height: 46rpx;
  418. }
  419. .shopTop {
  420. display: flex;
  421. justify-content: space-between;
  422. width: 510rpx;
  423. }
  424. .shopright {
  425. padding-left: 20rpx;
  426. }
  427. .shopName {
  428. width: 450rpx;
  429. white-space: nowrap;
  430. overflow: hidden;
  431. text-overflow: ellipsis;
  432. }
  433. .shopScore1 {
  434. font-size: 36rpx;
  435. font-weight: bold;
  436. color: #FF4F00;
  437. height: 50rpx;
  438. line-height: 50rpx;
  439. }
  440. .shopScore11 {
  441. font-size: 22rpx;
  442. color: #FF4F00;
  443. margin-right: 14rpx;
  444. }
  445. .shopScore2 {
  446. font-size: 22rpx;
  447. color: #666666;
  448. margin-right: 14rpx;
  449. padding: 8rpx 0;
  450. }
  451. .shopScore3 {
  452. font-size: 22rpx;
  453. color: #333333;
  454. padding-left: 20rpx;
  455. }
  456. .Btn {
  457. width: 104rpx;
  458. height: 56rpx;
  459. background: #FF2400 linear-gradient(135deg, #FD5300 0%, #FF270A 100%);
  460. border-radius: 6rpx;
  461. font-size: 26rpx;
  462. text-align: center;
  463. color: #FFFFFF;
  464. line-height: 56rpx;
  465. }
  466. .shopBottom {
  467. display: flex;
  468. }
  469. .shopBottomLeft {
  470. font-size: 25rpx;
  471. color: #666666;
  472. line-height: 30rpx;
  473. padding-top: 10rpx;
  474. display: flex;
  475. justify-content: space-between;
  476. padding-right: 10rpx;
  477. }
  478. .shopaddress {
  479. width: 400rpx;
  480. /* 隐藏文字显示 ...不换行 */
  481. overflow: hidden;
  482. text-overflow: ellipsis;
  483. white-space: nowrap;
  484. color: #999999;
  485. }
  486. .noMore {
  487. text-align: center;
  488. line-height: 50rpx;
  489. color: #999999;
  490. font-size: 28rpx;
  491. }
  492. .regionSx{
  493. width: 2rpx;height: 33rpx;background:#EEEEEE;
  494. }
  495. .regionLine{
  496. display: flex;justify-content: center;font-size: 26rpx;
  497. width: 370rpx;line-height: 33rpx;color: #3C3C3C;
  498. }
  499. .regionBox{
  500. display: flex;
  501. justify-content: center;
  502. background: #FFFFFF;
  503. padding: 20rpx 0;
  504. margin-bottom: 20rpx;
  505. position: fixed;
  506. width: 100vw;
  507. top: 0;left: 0;
  508. }
  509. .jtbelow{
  510. width: 14rpx;height: 7rpx;
  511. margin-left: 10rpx;margin-top: 10rpx;
  512. }
  513. .popup-content{
  514. width: 590rpx;
  515. background: #FFFFFF;
  516. height: 100vh;
  517. }
  518. .brandList{
  519. height:99vh;
  520. }
  521. .areaListLine{
  522. padding:30rpx 24rpx;
  523. color: #666666;
  524. font-size: 28rpx;
  525. border-bottom: 1px solid #eaeaea;
  526. display: flex;
  527. justify-content: space-between;
  528. line-height: 28rpx;
  529. }
  530. .areaActvie{
  531. background: #F19D01;
  532. color: #FFFFFF;
  533. }
  534. .areaCkIcon{
  535. width: 38rpx;height: 28rpx;
  536. }
  537. .dhImg{
  538. width: 35rpx;height: 35rpx;border-radius: 6rpx;
  539. }
  540. .newdistance{
  541. position: absolute;top: 22rpx;right: 18rpx;
  542. text-align: center;
  543. font-size: 22rpx;
  544. color: #666666;
  545. }
  546. </style>