index.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <template>
  2. <!-- 门店列表 -->
  3. <view class="list">
  4. <view class="item">
  5. <view class="name line1"><text class="iconfont icon-shangjiadingdan"></text>{{storeList.name}}</view>
  6. <view class="address line1"><text class="font-num" v-if="storeList.range">距您{{ storeList.range }}km</text><text class="spot" v-if="storeList.range">·</text>{{ storeList.address }}{{ ", " + storeList.detailed_address }}</view>
  7. </view>
  8. </view>
  9. </template>
  10. <script>
  11. import {
  12. storeListApi
  13. } from "@/api/store";
  14. import {
  15. isWeixin
  16. } from "@/utils/index";
  17. // #ifdef H5
  18. import {
  19. wechatEvevt,
  20. wxShowLocation
  21. } from "@/libs/wechat";
  22. // #endif
  23. import {
  24. mapState,
  25. mapGetters
  26. } from "vuex";
  27. const LONGITUDE = "user_longitude";
  28. const LATITUDE = "user_latitude";
  29. const MAPKEY = "mapKey";
  30. export default {
  31. name: "storeList",
  32. props: {
  33. num : {
  34. type: Number,
  35. default: 1,
  36. },
  37. ids: {
  38. type: Number,
  39. default: 0,
  40. },
  41. type: {
  42. type: String,
  43. default: ''
  44. },
  45. storeList: {
  46. typeof: Object,
  47. default: {}
  48. }
  49. },
  50. data() {
  51. return {
  52. page: 1,
  53. limit: 20,
  54. loaded: false,
  55. loading: false,
  56. system_store: {},
  57. user_latitude: 0,
  58. user_longitude: 0
  59. };
  60. },
  61. computed: mapState({
  62. nearbyStore: state => state.app.nearbyStore
  63. }),
  64. created() {
  65. // try {
  66. // this.user_latitude = uni.getStorageSync('user_latitude');
  67. // this.user_longitude = uni.getStorageSync('user_longitude');
  68. // this.selfLocation();
  69. // if(!this.$util.checkOpenGPSServiceByAndroidIOS()){
  70. // this.getList();
  71. // }
  72. // } catch (e) {
  73. // this.getList();
  74. // }
  75. },
  76. mounted() {
  77. // if (this.user_latitude && this.user_longitude) {
  78. // this.getList();
  79. // } else {
  80. // this.selfLocation();
  81. // }
  82. },
  83. methods: {
  84. call(phone) {
  85. uni.makePhoneCall({
  86. phoneNumber: phone,
  87. });
  88. },
  89. selfLocation() {
  90. let self = this
  91. // #ifdef H5
  92. if (self.$wechat.isWeixin()) {
  93. self.$wechat.location().then(res => {
  94. this.user_latitude = res.latitude;
  95. this.user_longitude = res.longitude;
  96. uni.setStorageSync('user_latitude', res.latitude);
  97. uni.setStorageSync('user_longitude', res.longitude);
  98. self.getList();
  99. }).catch(err=>{
  100. self.getList();
  101. })
  102. } else {
  103. // #endif
  104. uni.getLocation({
  105. type: 'wgs84',
  106. success: (res) => {
  107. try {
  108. this.user_latitude = res.latitude;
  109. this.user_longitude = res.longitude;
  110. uni.setStorageSync('user_latitude', res.latitude);
  111. uni.setStorageSync('user_longitude', res.longitude);
  112. } catch {}
  113. self.getList();
  114. },
  115. complete: function() {
  116. self.getList();
  117. }
  118. });
  119. // #ifdef H5
  120. }
  121. // #endif
  122. },
  123. showMaoLocation(e) {
  124. let self = this;
  125. // #ifdef H5
  126. if (self.$wechat.isWeixin()) {
  127. self.$wechat.seeLocation({
  128. latitude: Number(e.latitude),
  129. longitude: Number(e.longitude),
  130. name: e.name,
  131. address: `${e.address}-${e.detailed_address}`,
  132. }).then(res => {
  133. })
  134. } else {
  135. // #endif
  136. uni.openLocation({
  137. latitude: Number(e.latitude),
  138. longitude: Number(e.longitude),
  139. name: e.name,
  140. address: `${e.address}-${e.detailed_address}`,
  141. success: function() {
  142. Number
  143. }
  144. });
  145. // #ifdef H5
  146. }
  147. // #endif
  148. },
  149. // 获取门店列表数据
  150. getList: function() {
  151. if (this.loading || this.loaded) return;
  152. this.loading = true;
  153. let data = {
  154. latitude: this.user_latitude || "", //纬度
  155. longitude: this.user_longitude || "", //经度
  156. page: this.page,
  157. limit: this.limit,
  158. product_id: this.ids,
  159. type: this.type == 'seckill'?1:0,
  160. store_id: this.storeId?this.storeId:this.nearbyStore
  161. };
  162. storeListApi(data)
  163. .then(res => {
  164. this.loading = false;
  165. this.loaded = res.data.list.length < this.limit;
  166. this.storeList.push.apply(this.storeList, res.data.list.list);
  167. if(this.page == 1){
  168. this.$emit('getStoreList',this.storeList.length)
  169. }
  170. this.page = this.page + 1;
  171. })
  172. .catch(err => {
  173. this.$util.Tips({
  174. title: err
  175. })
  176. });
  177. }
  178. },
  179. onReachBottom() {
  180. // this.getList();
  181. }
  182. };
  183. </script>
  184. <style lang="scss">
  185. .list{
  186. width: 508rpx;
  187. margin-left: 28rpx;
  188. .item{
  189. font-size: 26rpx;
  190. color: #333;
  191. .iconfont{
  192. font-size: 30rpx;
  193. margin-right: 10rpx;
  194. color: #333;
  195. }
  196. .address{
  197. font-size: 22rpx;
  198. margin-top: 10rpx;
  199. .spot{
  200. margin: 0 20rpx;
  201. }
  202. }
  203. }
  204. }
  205. </style>