detail.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <view class="page">
  3. <u-swiper :list="item.imgs" :effect3d="true" :height="300"></u-swiper>
  4. <view class="hotel_item">
  5. <view class="name">{{ item.name }}</view>
  6. <view class="address">
  7. <view class="dz">{{ item.addres }}</view>
  8. </view>
  9. <map
  10. style="width: 100%; height: 100px;margin-top: 20px;border-radius:5px;"
  11. :latitude="item.lat"
  12. :longitude="item.lng"
  13. :markers="[{ latitude: item.lat, longitude: item.lng }]"
  14. ></map>
  15. </view>
  16. <view class="hotel_item">
  17. <view class="v_title">
  18. <image src="../../static/lo.png" class="lo" mode="widthFix"></image>
  19. <view class="hd">菜单</view>
  20. </view>
  21. <u-grid :col="3" class="cd">
  22. <u-grid-item>
  23. <view class="icon" style="background-color: red">&#xe610;</view>
  24. <view class="grid-text">店铺信息</view>
  25. </u-grid-item>
  26. <u-grid-item>
  27. <view class="icon" style="background-color: red">&#xebb3;</view>
  28. <view class="grid-text">上报数据</view>
  29. </u-grid-item>
  30. <u-grid-item>
  31. <view class="icon" style="background-color: red">&#xe736;</view>
  32. <view class="grid-text">房间管理</view>
  33. </u-grid-item>
  34. <u-grid-item>
  35. <view class="icon" style="background-color: red">&#xe705;</view>
  36. <view class="grid-text">预订订单</view>
  37. </u-grid-item>
  38. </u-grid>
  39. </view>
  40. </view>
  41. </template>
  42. <script>
  43. export default {
  44. data() {
  45. return {
  46. ip: this.$http.urls.ip,
  47. item: {}
  48. };
  49. },
  50. onLoad(e) {
  51. this.$http.request({
  52. url: this.$http.urls.hotelDetail,
  53. data: { shopId: 30 },
  54. success: res => {
  55. this.item = res.data.data;
  56. this.item.imgs = []; //轮播图
  57. this.item.showPictures = this.item.showPictures.split(',');
  58. this.item.showPictures.forEach(item => {
  59. this.item.imgs.push({ image: this.ip + item });
  60. });
  61. }
  62. });
  63. },
  64. methods: {
  65. dh() {}
  66. }
  67. };
  68. </script>
  69. <style lang="scss">
  70. .page {
  71. padding: 12px;
  72. }
  73. .cd {
  74. margin-top: 10px;
  75. .icon {
  76. font-size: 30px;
  77. padding: 5px 8px;
  78. background-color: red;
  79. color: white;
  80. border-radius: 5px;
  81. }
  82. }
  83. </style>