videoShopTour.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <view class="videoShopTour-wrap">
  3. <u-sticky>
  4. <!-- 搜索方式 -->
  5. <u-grid :col="2" class="search-type-con" hover-class="none">
  6. <u-grid-item class="search-module" @click="goSearch">
  7. <u-icon class="search-icon" name="xundianguanli" custom-prefix="xd-icon" size="80" color="#2b85e4"></u-icon>
  8. <view class="search-txt">按门店名称查询</view>
  9. </u-grid-item>
  10. <u-grid-item class="search-module" @click="goOrgSearch">
  11. <u-icon class="search-icon" name="zuzhijigou" custom-prefix="xd-icon" size="80" color="#19be6b"></u-icon>
  12. <view class="search-txt">按组织机构查询</view>
  13. </u-grid-item>
  14. </u-grid>
  15. </u-sticky>
  16. <!-- 门店列表 -->
  17. <view class="list-con">
  18. <view class="list-tit">门店列表</view>
  19. <!-- 列表数据 -->
  20. <view class="listData-con">
  21. <view class="listData-item" v-for="(item, index) in list" :key="index">
  22. <view class="listData-item-l">
  23. <u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
  24. <text class="listData-item-l-name">{{item.name}}</text>
  25. </view>
  26. <view class="listData-item-r">
  27. <u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. export default{
  36. data(){
  37. return{
  38. list: [
  39. { name: '常青二路店' },
  40. { name: '常青二路店常青青二路店常路店' },
  41. { name: '常青二路店' },
  42. { name: '常青二路店' },
  43. { name: '常青二路店' },
  44. { name: '常青二路店' },
  45. { name: '常青二路店' },
  46. { name: '常青二路店常青青二路店常路店' },
  47. { name: '常青二路店' },
  48. { name: '常青二路店' },
  49. { name: '常青二路店' },
  50. { name: '常青二路店' },
  51. { name: '常青二路店' },
  52. { name: '常青二路店常青青二路店常路店' },
  53. { name: '常青二路店' },
  54. { name: '常青二路店' },
  55. { name: '常青二路店' },
  56. { name: '常青二路店' },
  57. ]
  58. }
  59. },
  60. methods: {
  61. // 按门店名称查询
  62. goSearch(){
  63. uni.navigateTo({
  64. url: '/pages/searchPage/searchPage'
  65. })
  66. },
  67. // 按组织机构查询
  68. goOrgSearch(){
  69. uni.navigateTo({
  70. url: '/pages/organization/organization'
  71. })
  72. }
  73. }
  74. }
  75. </script>
  76. <style lang="scss" scoped>
  77. page {
  78. background-color: #f8f8f8;
  79. height: calc(100vh - 44px);
  80. }
  81. .videoShopTour-wrap{
  82. // 搜索方式
  83. .search-type-con{
  84. .search-module{
  85. .search-txt{
  86. font-size: 26upx;
  87. padding-top: 6upx;
  88. }
  89. }
  90. }
  91. // 门店列表
  92. .list-con{
  93. background-color: #fff;
  94. margin-top: 20upx;
  95. .list-tit{
  96. padding: 20upx 30upx;
  97. border-bottom: 1upx solid #f8f8f8;
  98. }
  99. .listData-con{
  100. padding: 0 30upx;
  101. .listData-item{
  102. display: flex;
  103. justify-content: space-between;
  104. align-items: center;
  105. padding: 20upx 0;
  106. border-bottom: 1upx dashed #f8f8f8;
  107. &-l{
  108. flex-grow: 1;
  109. padding-right: 10upx;
  110. position: relative;
  111. padding-left: 50upx;
  112. &-icon{
  113. vertical-align: sub;
  114. padding-right: 8upx;
  115. position: absolute;
  116. left: 0;
  117. top: -4upx;
  118. }
  119. }
  120. &-r{
  121. flex-shrink: 0;
  122. }
  123. }
  124. }
  125. }
  126. }
  127. </style>