index.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <view class="shop-list">
  3. <view class="item" v-for="item in list" :key="item.shopVo.shopId" @click="jump('/detail/shopDetail/shopDetail',item)">
  4. <view class="info">
  5. <view class="shop-name">
  6. {{item.shopVo.shopName}}
  7. </view>
  8. <view class="address">
  9. {{item.district}} {{(item.shopVo.distance/1000).toFixed(2)}} km
  10. </view>
  11. </view>
  12. <image class="icon" src="../../static/shop-desc.png" mode=""></image>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. data() {
  19. return {
  20. list: []
  21. }
  22. },
  23. methods: {
  24. jump(url,item) {
  25. uni.setStorageSync('shopInfo',JSON.stringify(item))
  26. uni.navigateTo({
  27. url
  28. })
  29. },
  30. },
  31. onLoad() {
  32. this.list = JSON.parse(uni.getStorageSync('shopList'))
  33. }
  34. }
  35. </script>
  36. <style lang="scss" scoped>
  37. .shop-list{
  38. background: #F9F9F9;
  39. min-height: 100vh;
  40. padding: 20rpx 24rpx;
  41. .item{
  42. padding: 24rpx;
  43. background: #fff;
  44. display: flex;
  45. align-items: center;
  46. justify-content: space-between;
  47. margin-bottom: 20rpx;
  48. .info{
  49. .shop-name{
  50. font-size: 28rpx;
  51. color: #222222;
  52. }
  53. .address{
  54. font-size: 24rpx;
  55. color: #AAAAAA;
  56. margin-top: 16rpx;
  57. }
  58. }
  59. .icon{
  60. width: 48rpx;
  61. height: 48rpx;
  62. transform: rotate(-90deg);
  63. }
  64. }
  65. }
  66. </style>