index.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <view class="container">
  3. <view class="search-wrapper">
  4. <view class="search-input">
  5. <view class="search-input-wrapper">
  6. <view class="left">
  7. <text class="search-icon iconfont icon-sousuo"></text>
  8. </view>
  9. <view class="right">
  10. <input v-model="searchValue" class="input" placeholder="请输入店铺关键字" type="text"></input>
  11. </view>
  12. </view>
  13. </view>
  14. <view class="search-button">
  15. <button class="button" @click="doSearch" type="warn"> 搜索 </button>
  16. </view>
  17. </view>
  18. <view class="store-list">
  19. <view class="store-info" v-for="(item, index) in storeList" :key="index" @click="handleQuick(item.id)">
  20. <view class="base-info">
  21. <view class="name">{{ item.name }}</view>
  22. <view class="hours">营业时间:{{ item.hours }}</view>
  23. <view class="address"><text class="location-icon iconfont icon-dingwei"></text>{{ item.address }}</view>
  24. <view class="tel">联系电话:{{ item.phone }}</view>
  25. </view>
  26. <view class="loc-info">
  27. <text class="dis"><text class="distance">{{ parseFloat(item.distance).toFixed(1) }}</text>公里</text>
  28. </view>
  29. </view>
  30. </view>
  31. <empty v-if="!storeList.length" :isLoading="isLoading" :custom-style="{ padding: '180rpx 50rpx' }" tips="暂无店铺~">
  32. </empty>
  33. </view>
  34. </template>
  35. <script>
  36. import * as settingApi from '@/api/setting'
  37. import * as userApi from '@/api/user'
  38. import Empty from '@/components/empty'
  39. export default {
  40. components: {
  41. Empty
  42. },
  43. data() {
  44. return {
  45. storeId: 0,
  46. searchValue: '',
  47. storeList: []
  48. }
  49. },
  50. /**
  51. * 生命周期函数--监听页面加载
  52. */
  53. onLoad(options) {
  54. this.storeId = this.getStoreId()
  55. this.getStoreList()
  56. },
  57. methods: {
  58. /**
  59. * 获取店铺列表
  60. * */
  61. getStoreList() {
  62. const app = this
  63. settingApi.storeList(app.searchValue)
  64. .then(result => {
  65. app.storeList = result.data.data
  66. })
  67. },
  68. /**
  69. * 获取历史店铺
  70. */
  71. getStoreId() {
  72. return uni.getStorageSync("storeId")
  73. },
  74. /**
  75. * 搜索提交
  76. */
  77. doSearch() {
  78. this.getStoreList()
  79. },
  80. /**
  81. * 跳转回去
  82. */
  83. handleQuick(storeId) {
  84. const app = this
  85. userApi.defaultStore(storeId)
  86. .then(result => {
  87. uni.setStorageSync("storeId", storeId);
  88. // 刷新相关页面数据
  89. uni.setStorageSync("reflashHomeData", true);
  90. uni.navigateBack();
  91. })
  92. }
  93. }
  94. }
  95. </script>
  96. <style lang="scss" scoped>
  97. .container {
  98. padding: 20rpx;
  99. min-height: 100vh;
  100. background: #f7f7f7;
  101. }
  102. .search-wrapper {
  103. display: flex;
  104. height: 78rpx;
  105. }
  106. // 搜索输入框
  107. .search-input {
  108. width: 80%;
  109. background: #fff;
  110. border-radius: 50rpx 0 0 50rpx;
  111. box-sizing: border-box;
  112. overflow: hidden;
  113. border: solid 1px #cccccc;
  114. .search-input-wrapper {
  115. display: flex;
  116. .left {
  117. display: flex;
  118. width: 60rpx;
  119. justify-content: center;
  120. align-items: center;
  121. .search-icon {
  122. display: block;
  123. color: #666666;
  124. font-size: 30rpx;
  125. font-weight: bold;
  126. }
  127. }
  128. .right {
  129. flex: 1;
  130. input {
  131. font-size: 28rpx;
  132. height: 78rpx;
  133. line-height: 78rpx;
  134. .input-placeholder {
  135. color: #aba9a9;
  136. }
  137. }
  138. }
  139. }
  140. }
  141. // 搜索按钮
  142. .search-button {
  143. width: 20%;
  144. box-sizing: border-box;
  145. .button {
  146. line-height: 78rpx;
  147. height: 78rpx;
  148. font-size: 28rpx;
  149. border-radius: 0 20px 20px 0;
  150. background: $fuint-theme;
  151. }
  152. }
  153. // 店铺列表
  154. .store-list {
  155. .store-info {
  156. padding: 10px 0;
  157. overflow: hidden;
  158. border: 2rpx solid #cccccc;
  159. min-height: 240rpx;
  160. border-radius: 5rpx;
  161. margin-top: 10rpx;
  162. margin-bottom: 10rpx;
  163. padding: 30rpx;
  164. background: #FFFFFF;
  165. .base-info {
  166. float: left;
  167. width: 70%;
  168. .name {
  169. font-size: 34rpx;
  170. font-weight: bold;
  171. margin-top: 15rpx;
  172. margin-bottom: 12rpx;
  173. color: #666;
  174. }
  175. .location-icon {
  176. color: #f03c3c;
  177. font-weight: bold;
  178. }
  179. }
  180. .loc-info {
  181. color: #666666;
  182. dispaly:flex;
  183. line-height: 240rpx;
  184. float: left;
  185. overflow: hidden;
  186. width: 30%;
  187. text-align: right;
  188. .distance {
  189. font-weight: bold;
  190. color: #f03c3c;
  191. }
  192. }
  193. }
  194. }
  195. </style>