list.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516
  1. <template>
  2. <view class="content">
  3. <view class="varHeight"></view>
  4. <view class="search flex">
  5. <view class="input-box flex">
  6. <view class=" input-content flex">
  7. <view class="iconfont iconsearch"></view>
  8. <view class="input"><input type="text" placeholder="输入关键字搜索" @input='search'/></view>
  9. </view>
  10. </view>
  11. <picker mode="multiSelector" :range="listActionType" range-key='cate_name' @change="changeType" @columnchange='listChange'>
  12. <view class="shop-name clamp">分类</view>
  13. </picker>
  14. <view class="shop-name clamp">重置</view>
  15. </view>
  16. <view class="jg" style="height: 20rpx;"></view>
  17. <block :key="ind" v-for="(lss, ind) in list">
  18. <view class="goodsList-item" v-if="lss.show" @click="chooseStore(lss)">
  19. <view class="info-top flex">
  20. <image :src="lss.image" lazy-load mode="scaleToFill"></image>
  21. <view class="store-name clamp2">{{ lss.name }}</view>
  22. </view>
  23. <view class="tag">门店</view>
  24. <view class="dh" v-if="type == 0 || type == 5" @click.stop="markertap(lss)">导航</view>
  25. <view class="go" v-if="type == 7" @click.stop="navProduct(lss)">进入店铺</view>
  26. <view class="goodsList-content">
  27. <view class="info-tit">
  28. 地区:
  29. <text class="info-val">{{ lss.address }}</text>
  30. </view>
  31. <view class="info-tit">
  32. 电话:
  33. <text class="info-val">{{ lss.phone }}</text>
  34. </view>
  35. <view class="info-tit">
  36. 地址:
  37. <text class="info-val">{{ lss.detailed_address }}</text>
  38. </view>
  39. </view>
  40. </view>
  41. </block>
  42. <view class="jg" style="height: 20rpx;"></view>
  43. <uni-popup ref="popup" type="bottom" @click="close">
  44. <view class="popup_row">
  45. <view class="rows">
  46. <view class="rows-item" @click="toGaodeMap">高德地图</view>
  47. <view class="rows-item" @click="tobaiDuMap">百度地图</view>
  48. <!-- <view class="rows-item" @click="totengxunMap">腾讯地图</view> -->
  49. </view>
  50. </view>
  51. </uni-popup>
  52. </view>
  53. </template>
  54. <script>
  55. import {
  56. mapState,
  57. mapMutations
  58. } from 'vuex';
  59. import {
  60. store_list,
  61. getStoreType
  62. } from '@/api/index.js';
  63. import uniPopup from '@/components/uni-popup/uni-popup.vue';
  64. export default {
  65. data() {
  66. return {
  67. // 当前选中的滑块
  68. list: [],
  69. keyword: '', //查询中的内容
  70. latitude1: '',
  71. longitude1: '',
  72. address: '',
  73. // 当前动态分类
  74. typeAction: {
  75. name: '分类',
  76. cid: 0
  77. },
  78. type: 0, //3->开通会员选择门店 4->自提选择门店 5->附近门店进入不做任何操作
  79. typeActionNum: 0, //当前选中的action
  80. typeList: [], //列表分类
  81. };
  82. },
  83. watch: {
  84. keyword(newValue, oldValue) {
  85. this.keyword = newValue;
  86. console.log(newValue);
  87. this.getShoping();
  88. }
  89. },
  90. computed: {
  91. ...mapState(['latitude', 'longitude']),
  92. listActionType() {
  93. if (this.typeList.length > 0) {
  94. return [this.typeList, this.typeList[this.typeActionNum].children]
  95. } else {
  96. return []
  97. }
  98. }
  99. },
  100. onLoad(opt) {
  101. if (opt.type) {
  102. this.type = opt.type;
  103. }
  104. this.getShoping();
  105. this.getStoreType();
  106. },
  107. // // #ifndef MP
  108. // // 点击键盘搜索事件
  109. // onNavigationBarSearchInputConfirmed(e) {
  110. // this.search();
  111. // },
  112. // // 搜索栏内容变化事件
  113. // onNavigationBarSearchInputChanged(e) {
  114. // this.keyword = e.text;
  115. // },
  116. // // #endif
  117. methods: {
  118. ...mapMutations(['setLat', 'setLon', 'setStoreInfo']),
  119. // 确认切换
  120. changeType(res){
  121. console.log(res);
  122. const item = res.detail.value;
  123. const ar = this.typeList[item[0]].children[item[1]];
  124. this.typeAction.name = ar.cate_name
  125. this.typeAction.cid = ar.id
  126. this.getShoping();
  127. },
  128. // 列表切换
  129. listChange(res){
  130. if(res.detail.column==0){
  131. this.typeActionNum = res.detail.value;
  132. }
  133. },
  134. // 查询店铺信息
  135. search(res) {
  136. this.keyword = res.detail.value;
  137. },
  138. markertap(e) {
  139. this.longitude1 = e.longitude;
  140. this.latitude1 = e.latitude;
  141. this.address = e.detailed_address;
  142. this.$refs.popup.open();
  143. },
  144. // 跳转店铺页面
  145. navProduct(item) {
  146. uni.navigateTo({
  147. url: './index?merid=' + item.id
  148. });
  149. },
  150. // 调用高德
  151. toGaodeMap() {
  152. let latitude = this.latitude1;
  153. let longitude = this.longitude1;
  154. let address = this.address;
  155. // console.log('选择高德', latitude, longitude, address);
  156. window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`;
  157. },
  158. // 调用腾讯
  159. totengxunMap() {
  160. let latitude = this.latitude1;
  161. let longitude = this.longitude1;
  162. let address = this.address;
  163. console.log('选择腾讯', latitude, longitude);
  164. window.location.href =
  165. `http://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};addr:${address}`;
  166. },
  167. // 调用百度
  168. tobaiDuMap() {
  169. let latitude = this.latitude1;
  170. let longitude = this.longitude1;
  171. let latitude6 = this.latitude;
  172. let longitude6 = this.longitude;
  173. let address = this.address;
  174. // console.log('选择百度', latitude, longitude);
  175. // console.log('获取当前经纬度', latitude6, longitude6);
  176. window.location.href =
  177. `http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${address}&content=${address}&output=html&src=webapp.baidu.openAPIdemo`;
  178. },
  179. getStoreType() {
  180. let obj = this;
  181. getStoreType()
  182. .then(function({
  183. data
  184. }) {
  185. obj.typeList = data;
  186. })
  187. .catch(e => {
  188. console.log(e);
  189. });
  190. },
  191. //获取商店信息
  192. getShoping() {
  193. let obj = this;
  194. console.log(obj.longitude, obj.latitude);
  195. store_list({
  196. longitude: obj.longitude, //经度
  197. latitude: obj.latitude ,//纬度
  198. keyword:obj.keyword,
  199. cid:obj.typeAction.cid
  200. })
  201. .then(function({
  202. data
  203. }) {
  204. console.log(data);
  205. obj.list = data.list.map(e => {
  206. e.show = true;
  207. return e;
  208. });
  209. })
  210. .catch(e => {
  211. console.log(e);
  212. });
  213. },
  214. //选择门店
  215. chooseStore(item) {
  216. if (this.type == 3) {
  217. this.$api.prePage().storeInfo = item;
  218. uni.navigateBack({});
  219. } else if (this.type == 4) {
  220. this.$api.prePage().shopAddress = item;
  221. uni.navigateBack({});
  222. } else if (this.type == 5) {} else if (this.type == 7) {
  223. this.navProduct(item);
  224. } else if (this.type == 6) {
  225. this.$api.prePage().storeInfo1 = item;
  226. uni.navigateBack({});
  227. } else {
  228. this.setStoreInfo(item);
  229. uni.navigateBack({});
  230. }
  231. }
  232. }
  233. };
  234. </script>
  235. <style lang="scss">
  236. page,
  237. .content {
  238. height: 100%;
  239. }
  240. .varHeight {
  241. height: var(--status-bar-height);
  242. }
  243. $slider-color: #fe9398; //滑块左侧颜色
  244. .goodsList-item {
  245. // background-color: #ffffff;
  246. // padding: 30rpx;
  247. // border-bottom: 1px solid $border-color-light;
  248. margin: 0 auto 20rpx;
  249. width: 710rpx;
  250. height: 231rpx;
  251. padding: 25rpx 20rpx;
  252. background: #ffffff;
  253. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  254. border-radius: 10rpx;
  255. position: relative;
  256. .tag {
  257. width: 60rpx;
  258. line-height: 40rpx;
  259. background: #ff6f0f;
  260. border-radius: 5rpx;
  261. font-size: 24rpx;
  262. font-family: PingFang SC;
  263. font-weight: 500;
  264. color: #ffffff;
  265. text-align: center;
  266. position: absolute;
  267. top: 25rpx;
  268. right: 20rpx;
  269. }
  270. .dh {
  271. z-index: 3;
  272. width: 70rpx;
  273. line-height: 44rpx;
  274. border-radius: 10rpx;
  275. background: #000;
  276. font-size: 24rpx;
  277. font-family: PingFang SC;
  278. font-weight: 500;
  279. color: #ffffff;
  280. text-align: center;
  281. position: absolute;
  282. bottom: 25rpx;
  283. right: 20rpx;
  284. }
  285. .go {
  286. z-index: 3;
  287. width: 150rpx;
  288. line-height: 44rpx;
  289. border-radius: 10rpx;
  290. background: #ff5b53;
  291. font-size: 24rpx;
  292. font-family: PingFang SC;
  293. font-weight: 500;
  294. color: #ffffff;
  295. text-align: center;
  296. position: absolute;
  297. bottom: 25rpx;
  298. right: 20rpx;
  299. }
  300. .info-top {
  301. justify-content: flex-start;
  302. .store-name {
  303. max-width: 500rpx;
  304. font-size: 32rpx;
  305. font-family: PingFang SC;
  306. font-weight: bold;
  307. color: #333333;
  308. padding-left: 11rpx;
  309. }
  310. }
  311. image {
  312. flex-shrink: 0;
  313. // border-radius: $border-radius-sm;
  314. // height: 180rpx;
  315. // width: 180rpx;
  316. width: 65rpx;
  317. height: 65rpx;
  318. border-radius: 50%;
  319. }
  320. .slider {
  321. margin-top: 15rpx;
  322. justify-content: flex-start;
  323. .slider-box {
  324. width: 196rpx;
  325. border-radius: 99px;
  326. border: 1px solid $slider-color;
  327. height: 16rpx;
  328. .slider-action {
  329. background-color: $slider-color;
  330. height: 100%;
  331. }
  332. }
  333. .sales-nub {
  334. color: $font-color-light;
  335. font-size: 24rpx;
  336. height: 2.5em;
  337. overflow: hidden;
  338. }
  339. }
  340. .goodsList-content {
  341. // margin-left: 20rpx;
  342. flex-grow: 1;
  343. // height: 180rpx;
  344. position: relative;
  345. padding-top: 20rpx;
  346. .info-tit {
  347. line-height: 1.5;
  348. font-size: 24rpx;
  349. font-family: PingFang SC;
  350. font-weight: bold;
  351. color: #333333;
  352. .info-val {
  353. font-weight: 500;
  354. }
  355. }
  356. .title {
  357. font-size: $font-base;
  358. color: $font-color-dark;
  359. font-weight: 500;
  360. width: 0;
  361. min-width: 100%;
  362. }
  363. .goods-money {
  364. position: absolute;
  365. left: 0;
  366. bottom: 0;
  367. width: 100%;
  368. .money-box {
  369. .money {
  370. font-size: $font-lg + 10rpx;
  371. color: $color-red;
  372. font-weight: bold;
  373. }
  374. .otMoney-box {
  375. font-size: $font-sm;
  376. .otMoney {
  377. color: $font-color-light;
  378. padding-right: 20rpx;
  379. }
  380. .sales {
  381. color: $font-color-light;
  382. }
  383. }
  384. }
  385. .cart {
  386. font-size: $font-base - 2rpx;
  387. border-radius: 99px;
  388. padding: 10rpx 20rpx;
  389. line-height: 1;
  390. color: #ffffff;
  391. background-color: $color-gray;
  392. &.seckill-action {
  393. border: 1px solid $color-red;
  394. background-color: $color-red;
  395. }
  396. }
  397. }
  398. }
  399. }
  400. .popup_row {
  401. width: 100%;
  402. height: 500rpx;
  403. background-color: #ffffff;
  404. border-radius: 20rpx;
  405. display: flex;
  406. justify-content: center;
  407. align-items: center;
  408. .rows {
  409. width: 100%;
  410. padding: 0 24rpx;
  411. .rows-item {
  412. height: 80rpx;
  413. line-height: 80rpx;
  414. text-align: center;
  415. width: 100%;
  416. font-size: 32rpx;
  417. color: #303133;
  418. // border-bottom: 1rpx solid #f0f0f0;
  419. }
  420. }
  421. }
  422. .search {
  423. justify-content: center;
  424. padding: 10rpx 24rpx 20rpx;
  425. align-items: center;
  426. background: rgba(39, 170, 116, 0.4);
  427. .address {
  428. width: 32rpx;
  429. height: 38rpx;
  430. }
  431. .shop-name {
  432. height: 38rpx;
  433. position: relative;
  434. z-index: 100;
  435. font-size: 30rpx;
  436. font-family: PingFang SC;
  437. font-weight: 500;
  438. color: #ffffff;
  439. padding-left: 10rpx;
  440. flex-shrink: 0;
  441. }
  442. .input-box {
  443. position: relative;
  444. z-index: 99;
  445. width: 700rpx;
  446. height: 60rpx;
  447. background: #FFF;
  448. box-shadow: 0px 9rpx 21rpx 0px rgba(4, 114, 69, 0.22);
  449. border-radius: 30px;
  450. margin: 0 auto;
  451. .input-content {
  452. justify-content: center;
  453. position: relative;
  454. z-index: 11;
  455. border-radius: 99rpx;
  456. flex-grow: 1;
  457. padding: 5rpx 30rpx;
  458. background: #FFF;
  459. .iconsearch {
  460. font-size: 50rpx;
  461. color: #a2e0c7;
  462. }
  463. .input {
  464. margin-left: 19rpx;
  465. color: #a2e0c7;
  466. flex-grow: 1;
  467. input {
  468. font-size: 26rpx;
  469. color: #a2e0c7;
  470. }
  471. }
  472. }
  473. .input-button {
  474. padding-left: 20rpx;
  475. font-size: $font-base;
  476. height: 100%;
  477. }
  478. }
  479. }
  480. </style>