index.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. <template>
  2. <view :style="colorStyle">
  3. <view class="list">
  4. <view class="item" v-for="(item, index) in storeList" :key="index" @click.stop="checked(item)">
  5. <view class="name line1">{{ item.name }}</view>
  6. <view class="address acea-row row-top row-between">
  7. <view class="iconfont icon-dingwei1"></view>
  8. <view class="right">
  9. <text v-if="item.range">距离您{{ item.range }}km</text>
  10. <text v-else>查看地图</text>
  11. <text class="line"></text>{{ item.address }}{{ ", " + item.detailed_address }}</view>
  12. </view>
  13. <view class="time address acea-row row-top row-between">
  14. <view class="iconfont icon-yingyeshijian"></view>
  15. <view class="right">营业时间:{{item.day_time}}</view>
  16. </view>
  17. <view class="bottom acea-row row-center-wrapper">
  18. <view class="bnt" @click.stop="showMaoLocation(item)"><text class="iconfont icon-daohangdaodian"></text>导航到店</view>
  19. <!-- #ifdef H5 -->
  20. <a class="bnt" :href="'tel:' + item.phone"><text class="iconfont icon-zhidianzixun"></text>致电咨询</a>
  21. <!-- #endif -->
  22. <!-- #ifdef MP || APP-PLUS -->
  23. <view class="bnt" @click.stop="call(item.phone)"><text class="iconfont icon-zhidianzixun"></text>致电咨询</view>
  24. <!-- #endif -->
  25. </view>
  26. </view>
  27. </view>
  28. <Loading :loaded="loaded" :loading="loading"></Loading>
  29. </view>
  30. </template>
  31. <script>
  32. import Loading from "@/components/Loading";
  33. import {
  34. storeListApi
  35. } from "@/api/store";
  36. import {
  37. isWeixin
  38. } from "@/utils/index";
  39. // #ifdef H5
  40. import {
  41. wechatEvevt,
  42. wxShowLocation
  43. } from "@/libs/wechat";
  44. // #endif
  45. import colors from "@/mixins/color";
  46. import {
  47. mapGetters
  48. } from "vuex";
  49. const LONGITUDE = "user_longitude";
  50. const LATITUDE = "user_latitude";
  51. const MAPKEY = "mapKey";
  52. export default {
  53. name: "storeList",
  54. components: {
  55. Loading
  56. },
  57. mixins: [colors],
  58. data() {
  59. return {
  60. page: 1,
  61. limit: 20,
  62. loaded: false,
  63. loading: false,
  64. storeList: [],
  65. system_store: {},
  66. user_latitude: 0,
  67. user_longitude: 0,
  68. comeType: 0,
  69. cartId: '',
  70. new: '',
  71. pinkId: '',
  72. couponId: ''
  73. };
  74. },
  75. onLoad(options) {
  76. if (options.cartId) {
  77. this.cartId = options.cartId;
  78. this.new = options.new;
  79. this.pinkId = options.pinkId;
  80. this.couponId = options.couponId;
  81. }
  82. this.comeType = options.type
  83. try {
  84. this.user_latitude = uni.getStorageSync('user_latitude');
  85. this.user_longitude = uni.getStorageSync('user_longitude');
  86. } catch (e) {}
  87. },
  88. onShow() {
  89. uni.removeStorageSync('form_type_cart');
  90. },
  91. mounted() {
  92. // if (this.user_latitude && this.user_longitude) {
  93. // this.getList();
  94. // } else {
  95. // this.selfLocation();
  96. // }
  97. this.selfLocation();
  98. if(!this.$util.checkOpenGPSServiceByAndroidIOS()){
  99. this.getList();
  100. }
  101. },
  102. methods: {
  103. call(phone) {
  104. uni.makePhoneCall({
  105. phoneNumber: phone,
  106. });
  107. },
  108. selfLocation() {
  109. let self = this
  110. // #ifdef H5
  111. if (self.$wechat.isWeixin()) {
  112. self.$wechat.location().then(res => {
  113. this.user_latitude = res.latitude;
  114. this.user_longitude = res.longitude;
  115. uni.setStorageSync('user_latitude', res.latitude);
  116. uni.setStorageSync('user_longitude', res.longitude);
  117. self.getList();
  118. }).catch(err=>{
  119. self.getList();
  120. })
  121. } else {
  122. // #endif
  123. uni.getLocation({
  124. type: 'wgs84',
  125. success: (res) => {
  126. try {
  127. this.user_latitude = res.latitude;
  128. this.user_longitude = res.longitude;
  129. uni.setStorageSync('user_latitude', res.latitude);
  130. uni.setStorageSync('user_longitude', res.longitude);
  131. } catch {}
  132. self.getList();
  133. },
  134. complete: function() {
  135. self.getList();
  136. }
  137. });
  138. // #ifdef H5
  139. }
  140. // #endif
  141. },
  142. showMaoLocation(e) {
  143. let self = this;
  144. // #ifdef H5
  145. if (self.$wechat.isWeixin()) {
  146. self.$wechat.seeLocation({
  147. latitude: Number(e.latitude),
  148. longitude: Number(e.longitude),
  149. name: e.name,
  150. scale: 13,
  151. address: `${e.address}-${e.detailed_address}`,
  152. }).then(res => {})
  153. } else {
  154. // #endif
  155. uni.openLocation({
  156. latitude: Number(e.latitude),
  157. longitude: Number(e.longitude),
  158. name: e.name,
  159. address: `${e.address}-${e.detailed_address}`,
  160. success: function() {
  161. Number
  162. }
  163. });
  164. // #ifdef H5
  165. }
  166. // #endif
  167. },
  168. // 选中门店
  169. checked(e) {
  170. if (this.comeType) {
  171. uni.$emit("handClick", {
  172. address: e,
  173. cartId: this.cartId,
  174. new: this.new,
  175. pinkId: this.pinkId,
  176. couponId: this.couponId
  177. });
  178. uni.navigateBack();
  179. }
  180. },
  181. // 获取门店列表数据
  182. getList: function() {
  183. if (this.loading || this.loaded) return;
  184. this.loading = true;
  185. let data = {
  186. latitude: this.user_latitude || "", //纬度
  187. longitude: this.user_longitude || "", //经度
  188. page: this.page,
  189. limit: this.limit
  190. };
  191. storeListApi(data)
  192. .then(res => {
  193. this.loading = false;
  194. this.loaded = res.data.list.length < this.limit;
  195. this.storeList.push.apply(this.storeList, res.data.list.list);
  196. this.page = this.page + 1;
  197. })
  198. .catch(err => {
  199. this.$util.Tips({
  200. title: err
  201. })
  202. });
  203. }
  204. },
  205. onReachBottom() {
  206. this.getList();
  207. }
  208. };
  209. </script>
  210. <style lang="scss">
  211. .list{
  212. padding-top: 24rpx;
  213. .item{
  214. width: 690rpx;
  215. background-color: #fff;
  216. border-radius: 12rpx;
  217. margin: 0 auto 24rpx auto;
  218. padding: 28rpx 28rpx 0 28rpx;
  219. box-sizing: border-box;
  220. .name{
  221. font-size: 28rpx;
  222. color: #333;
  223. font-weight: 600;
  224. position: relative;
  225. padding-left: 12rpx;
  226. &::after{
  227. position: absolute;
  228. width: 4rpx;
  229. height: 28rpx;
  230. background-color: #E93323;
  231. content: ' ';
  232. left:0;
  233. top:50%;
  234. margin-top: -14rpx;
  235. }
  236. }
  237. .address{
  238. font-size: 24rpx;
  239. color: #666;
  240. margin-top: 24rpx;
  241. .iconfont{
  242. font-size: 30rpx;
  243. width: 38rpx;
  244. height: 38rpx;
  245. line-height: 38rpx;
  246. }
  247. .right{
  248. width: 594rpx;
  249. .line{
  250. width: 2rpx;
  251. height: 20rpx;
  252. background-color: #ccc;
  253. display: inline-block;
  254. margin: 0 20rpx;
  255. }
  256. }
  257. &.time{
  258. margin-top: 20rpx;
  259. .iconfont{
  260. font-size: 28rpx;
  261. }
  262. }
  263. }
  264. .bottom{
  265. height: 92rpx;
  266. border-top: 1rpx solid #eee;
  267. margin-top: 30rpx;
  268. position: relative;
  269. &::after{
  270. position: absolute;
  271. content: ' ';
  272. width: 1rpx;
  273. height: 60rpx;
  274. background-color: #eee;
  275. }
  276. .bnt{
  277. width: 314rpx;
  278. text-align: center;
  279. font-size: 26rpx;
  280. color: #333;
  281. text-decoration: none;
  282. .iconfont{
  283. font-size: 35rpx;
  284. margin-right: 12rpx;
  285. display: inline-block;
  286. vertical-align: bottom;
  287. }
  288. }
  289. }
  290. }
  291. }
  292. </style>