v1.7.2版本页面开发

components/SimpleSwiper/index.vue

@@ -9,6 +9,7 @@
 
 <script>
 import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import swiper from 'swiper'
 
 export default {
   name: 'simple-swiper',
@@ -25,17 +26,27 @@ export default {
       type: Boolean,
       default: true,
     },
+    pagination: {
+      type: Boolean,
+      default: true,
+    },
+    loop: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
+    const swiperOption = {}
+    swiperOption.autoplay = this.autoplay
+    swiperOption.loop = this.loop
+    if (this.pagination) {
+      swiperOption.pagination = {
+        el: '.swiper-pagination',
+        clickable: true,
+      }
+    }
     return {
-      swiperOption: {
-        pagination: {
-          el: '.swiper-pagination',
-          clickable: true,
-        },
-        autoplay: this.autoplay,
-        loop: true,
-      },
+      swiperOption,
     }
   },
 }

layouts/app-ross.vue

@@ -148,7 +148,7 @@ export default {
         'login_redicret',
         this.routePrefix + item.path
       )
-      if (item.id > 1 && !hasLogin) {
+      if (item.id > 2 && !hasLogin) {
         // 在微信浏览器中使用微信授权登录
         if (isWeChat() && this.appId && this.accountType === 2) {
           const payload = {

layouts/app.vue

@@ -41,7 +41,7 @@
         <nuxt />
       </div>
       <div class="footer flex justify-center items-center">
-        - 由采美网提供技术支持 -
+        - {{ supplierInfo.shopName }} 由采美网提供技术支持 -
       </div>
       <SimpleLogin :type="formType" @click="onLoginClick"></SimpleLogin>
     </div>
@@ -62,6 +62,7 @@ export default {
       'accountType',
       'routePrefix',
       'themeName',
+      'supplierInfo',
     ]),
     themeClass() {
       return `theme-${this.themeName}`

nuxt.config.js

@@ -20,9 +20,11 @@ export default {
     ],
     // link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
     script: [
-      {
-        src: '/baidu.count.js'
-      },
+      process.env.NODE_ENV === 'production'
+        ? {
+            src: '/baidu.count.js',
+          }
+        : '',
       {
         src: '/map.config.js',
       },
@@ -30,8 +32,8 @@ export default {
         src: 'https://webapi.amap.com/maps?v=2.0&key=eae3be059db26dc1f9cae1d1bee9d4cb',
       },
       {
-        src: 'https://api.map.baidu.com/api?v=2.0&&type=webgl&ak=9kNcqnkFxlS0Kv9jEbDgwG2BAMrD6wPb'
-      }
+        src: 'https://api.map.baidu.com/api?v=2.0&&type=webgl&ak=9kNcqnkFxlS0Kv9jEbDgwG2BAMrD6wPb',
+      },
     ],
   },
 

pages/_template/app/approve/club/detail.vue

@@ -7,6 +7,15 @@
       </div>
     </div>
     <div class="page-content">
+      <!-- <div class="auth">
+        <div class="auth-icon"></div>
+        <div class="auth-info">
+          <span class="font-bold">ROS'S</span>
+          <span>授予</span>
+          <span>{{ clubInfo.authParty }}</span>
+          <span>正品拥有</span>
+        </div>
+      </div> -->
       <div class="club-info">
         <div class="section flex justify-between items-center">
           <div class="info">
@@ -187,6 +196,33 @@ export default {
   .page-content {
     width: 580px;
     overflow-y: auto;
+
+    .auth {
+      width: 100%;
+      min-height: 114px;
+      @include themify($themes) {
+        background: themed('color');
+      }
+      box-sizing: border-box;
+      padding: 24px;
+
+      .auth-icon {
+        height: 28px;
+        background: url(~assets/theme-images/ross/pc-icon-auth.png) no-repeat
+          left center;
+        background-size: auto 28px;
+      }
+
+      .auth-info {
+        font-size: 0;
+        margin-top: 10px;
+        span {
+          font-size: 20px;
+          color: #fff;
+        }
+      }
+    }
+
     .club-info {
       padding: 32px 24px;
       @include themify($themes) {

pages/_template/app/approve/club/index.vue

@@ -8,7 +8,7 @@
       @load="onLoadMore"
     >
       <div class="page-top flex flex-col justify-center items-center">
-        <img class="logo" :src="supplierInfo.logo" />
+        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
         <div class="mt-2 name">
           <span v-text="supplierInfo.shopName"></span>
           <span>官方授权机构</span>
@@ -33,6 +33,36 @@
             valueName="id"
           ></SimpleCity>
         </div>
+        <template v-if="starList.length > 0">
+          <!-- 明星机构 -->
+          <div class="title flex justify-between px-4 pt-8 pb-8 md:px-0">
+            <div>明星机构</div>
+            <nuxt-link :to="routePrefix + '/approve/club/star-list'"
+              >更多<i class="el-icon-arrow-right"></i
+            ></nuxt-link>
+          </div>
+          <div class="list">
+            <template v-for="item in starList">
+              <div
+                class="section flex justify-between mb-4"
+                :key="item.authId"
+                @click="toDetail(item)"
+              >
+                <img
+                  class="cover"
+                  :src="item.logo || drawLogo(item.clubName)"
+                />
+                <div class="info">
+                  <div class="name" v-text="item.clubName"></div>
+                  <div class="mobile">{{ item.mobile || '暂无' }}</div>
+                  <div class="address">
+                    {{ formatAddress(item.area, item.address) }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
         <!-- 标题 -->
         <div class="title flex justify-between px-4 pt-8 pb-8 md:px-0">
           <div>距您最近...</div>
@@ -99,6 +129,7 @@ export default {
       total: 0,
       cityList: [],
       selectValue: [],
+      // starList: []
     }
   },
   computed: {
@@ -106,6 +137,9 @@ export default {
     emptyList() {
       return 3 - (this.list.length % 3)
     },
+    starList() {
+      return this.list.slice(0, 3)
+    },
   },
   mounted() {
     const cacheData = this.$getStorage(this.routePrefix, 'club_list_data')

pages/_template/app/approve/club/star-list.vue

@@ -0,0 +1,495 @@
+<template>
+  <div class="page">
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-content">
+        <!-- 标题 -->
+        <div class="title flex justify-between px-4 pt-8 pb-8 md:px-0">
+          <div>明星机构</div>
+          <div>共<span v-text="total"></span>家明星机构</div>
+        </div>
+        <!-- 列表 -->
+        <div class="list">
+          <template v-for="item in list">
+            <div
+              class="section flex justify-between mb-4"
+              :key="item.authId"
+              @click="toDetail(item)"
+            >
+              <img class="cover" :src="item.logo || drawLogo(item.clubName)" />
+              <div class="info">
+                <div class="name" v-text="item.clubName"></div>
+                <div class="mobile">{{ item.mobile || '暂无' }}</div>
+                <div class="address">
+                  {{ formatAddress(item.area, item.address) }}
+                </div>
+                <div
+                  class="distance"
+                  v-text="generateDistance(item.distance)"
+                  v-if="item.distance && item.distance !== 99999"
+                ></div>
+              </div>
+            </div>
+          </template>
+          <div class="empty" v-for="i in emptyList" :key="'empty-' + i"></div>
+        </div>
+        <!-- 列表为空 -->
+        <SimpleEmpty
+          v-if="!total && !isRequest"
+          name="icon-empty-club.png"
+          description="敬请期待~"
+        ></SimpleEmpty>
+      </div>
+    </van-list>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { geolocation } from '@/utils/map-utils'
+import { drawLogo, debounce } from '@/utils'
+export default {
+  layout: 'app',
+  data() {
+    return {
+      isLoadingMore: true,
+      finished: false,
+      isRequest: true,
+      list: [],
+      listQuery: {
+        authUserId: '',
+        lngAndLat: '',
+        clubName: '',
+        provinceId: '',
+        cityId: '',
+        townId: '',
+        pageNum: 1,
+        pageSize: 9,
+      },
+      total: 0,
+      cityList: [],
+      selectValue: [],
+      // starList: []
+    }
+  },
+  computed: {
+    ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
+    emptyList() {
+      return 3 - (this.list.length % 3)
+    },
+    starList() {
+      return this.list.slice(0, 3)
+    },
+  },
+  mounted() {
+    const cacheData = this.$getStorage(this.routePrefix, 'club_list_data')
+    if (cacheData) {
+      this.initFromCache(cacheData)
+      this.$removeStorage(this.routePrefix, 'club_list_data')
+    } else {
+      this.initData()
+      this.fetchCityList()
+    }
+  },
+  beforeDestroy() {
+    this.$toast.clear()
+  },
+  methods: {
+    // 绘制logo的方法
+    drawLogo,
+    // 查看详情
+    toDetail(item) {
+      this.$setStorage(this.routePrefix, 'club_list_data', this.$data, {
+        expiredTime: 5 * 60 * 1000,
+      })
+      this.$setStorage(this.routePrefix, 'clubInfo', item)
+      const url = `${this.routePrefix}/approve/club/detail?id=${item.authId}`
+      this.$router.push(url)
+    },
+    // 从缓存中获取数据
+    initFromCache(cacheData) {
+      this.isLoadingMore = cacheData.isLoadingMore
+      this.finished = cacheData.finished
+      this.isRequest = cacheData.isRequest
+      this.list = cacheData.list
+      this.listQuery = cacheData.listQuery
+      this.total = cacheData.total
+      this.cityList = cacheData.cityList
+      this.selectValue = cacheData.selectValue
+      this.$refs.citySelect.setSelectValue(this.selectValue)
+    },
+
+    generateDistance(value) {
+      return value > 1 ? value + 'km' : value * 1000 + 'm'
+    },
+
+    // 初始化页面数据
+    async initData() {
+      this.listQuery.authUserId = this.authUserId
+
+      // 自定义加载图标
+      this.$toast.loading({
+        message: '正在获取您附近的机构...',
+        duration: 0,
+      })
+
+      // 获取定位信息 这里使用的是高德地图获取用户具体位置信息
+      try {
+        const resLocation = await geolocation()
+        this.listQuery.lngAndLat = `${resLocation.position.lng},${resLocation.position.lat}`
+      } catch (error) {
+        this.$toast('获取定位信息失败，请确保您开启的定位权限并保存网络畅通')
+        this.isRequest = false
+      }
+
+      // 获取机构列表
+      this.fetchList()
+    },
+    fetchList: debounce(async function () {
+      try {
+        this.isLoadingMore = true
+        const res = await this.$http.api.getAuthClubList(this.listQuery)
+        this.total = res.data.total
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
+        this.isLoadingMore = false
+        this.listQuery.pageNum += 1
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.$toast.clear()
+        this.isRequest = false
+      }
+    }, 400),
+    // 获取地址列表
+    fetchCityList() {
+      this.$http.api.fetchAllCityList().then((res) => {
+        this.cityList = res.data
+      })
+    },
+    // 城市变化
+    onCityChange(selectValue) {
+      this.listQuery.provinceId = ''
+      this.listQuery.cityId = ''
+      this.listQuery.townId = ''
+      this.selectValue = selectValue
+
+      selectValue.map((item, index) => {
+        if (index === 0) {
+          this.listQuery.provinceId = item.id
+        } else if (index === 1) {
+          this.listQuery.cityId = item.id
+        } else {
+          this.listQuery.townId = item.id
+        }
+      })
+      this.listQuery.pageNum = 1
+      this.list = []
+      this.fetchList()
+    },
+    // 搜索
+    onSearch() {
+      this.listQuery.pageNum = 1
+      this.list = []
+      this.fetchList()
+    },
+    // 格式化地址
+    formatAddress(a1, a2) {
+      let resutl = ''
+      if (typeof a1 === 'string') {
+        resutl += a1
+      }
+      if (typeof a2 === 'string') {
+        resutl += a2
+      }
+      return resutl || '暂无'
+    },
+    // 加载更多
+    onLoadMore() {
+      this.fetchList()
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+// pc 端
+@media screen and (min-width: 768px) {
+  .page {
+    position: relative;
+    min-height: calc(100vh - 80px - 80px);
+    background-color: #fff;
+  }
+  .page-top {
+    height: 420px;
+    @include themify($themes) {
+      background: themed('pc-banner-club');
+    }
+    background-size: auto 420px;
+
+    .logo {
+      display: block;
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 30px;
+      color: #fff;
+    }
+
+    .logo,
+    .name {
+      transform: translateY(-60px);
+    }
+  }
+  .page-content {
+    width: 1200px;
+    margin: 0 auto;
+    .search {
+      position: absolute;
+      left: 50%;
+      top: 260px;
+      transform: translateX(-50%);
+    }
+
+    .city {
+      position: absolute;
+      left: 50%;
+      top: 320px;
+      transform: translateX(-50%);
+      z-index: 9;
+    }
+
+    .title {
+      font-size: 16px;
+      color: #404040;
+
+      span {
+        @include themify($themes) {
+          color: themed('color');
+        }
+      }
+    }
+
+    .list {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .empty {
+        width: 390px;
+      }
+
+      .section {
+        width: 390px;
+        height: 108px;
+        background-color: #f3f5f6;
+        border-radius: 4px;
+        box-sizing: border-box;
+        padding: 12px;
+        cursor: pointer;
+        transition: all 0.4s;
+        &:hover {
+          box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
+        }
+
+        .cover {
+          display: block;
+          width: 84px;
+          height: 84px;
+        }
+        .info {
+          position: relative;
+          margin-left: 12px;
+          .name {
+            width: 200px;
+            font-size: 16px;
+            color: #101010;
+            font-weight: bold;
+            margin-bottom: 16px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+          .mobile,
+          .address {
+            width: 268px;
+            position: relative;
+            font-size: 14px;
+            color: #404040;
+            padding-left: 24px;
+            line-height: 24px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            &::after {
+              content: '';
+              display: block;
+              width: 16px;
+              height: 16px;
+              position: absolute;
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              background-size: 16px;
+              background-repeat: no-repeat;
+            }
+          }
+          .mobile {
+            &::after {
+              background-image: url(~assets/theme-images/common/pc-icon-mobile.png);
+            }
+          }
+          .address {
+            &::after {
+              background-image: url(~assets/theme-images/common/pc-icon-address.png);
+            }
+          }
+
+          .distance {
+            position: absolute;
+            font-size: 12px;
+            color: #404040;
+            top: 2px;
+            right: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 移动 端
+@media screen and (max-width: 768px) {
+  .page-top {
+    height: 46vw;
+    @include themify($themes) {
+      background: themed('h5-banner-club');
+    }
+    background-size: auto 46vw;
+
+    .logo {
+      display: block;
+      width: 14.8vw;
+      height: 14.8vw;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 4vw;
+      color: #fff;
+    }
+  }
+  .page-content {
+    position: relative;
+    .search {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      transform: translate(-50%, -50%);
+    }
+
+    .city {
+      position: relative;
+      z-index: 9;
+      padding-top: 12vw;
+    }
+
+    .title {
+      font-size: 3.4vw;
+      color: #404040;
+
+      span {
+        @include themify($themes) {
+          color: themed('color');
+        }
+      }
+    }
+
+    .list {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      .section {
+        width: 93.6vw;
+        height: 26vw;
+        background-color: #f3f5f6;
+        border-radius: 4px;
+        box-sizing: border-box;
+        padding: 3.2vw;
+
+        .cover {
+          display: block;
+          width: 19.6vw;
+          height: 19.6vw;
+        }
+        .info {
+          position: relative;
+          margin-left: 3.2vw;
+          .name {
+            width: 48vw;
+            font-size: 4vw;
+            color: #101010;
+            font-weight: bold;
+            margin-bottom: 4vw;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+          .mobile,
+          .address {
+            width: 66vw;
+            position: relative;
+            font-size: 3vw;
+            color: #404040;
+            padding-left: 5vw;
+            line-height: 5vw;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            &::after {
+              content: '';
+              display: block;
+              width: 4vw;
+              height: 4vw;
+              position: absolute;
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              background-size: 4vw 4vw;
+              background-repeat: no-repeat;
+            }
+          }
+          .mobile {
+            &::after {
+              background-image: url(~assets/theme-images/common/h5-icon-mobile.png);
+            }
+          }
+          .address {
+            &::after {
+              background-image: url(~assets/theme-images/common/h5-icon-address.png);
+            }
+          }
+
+          .distance {
+            position: absolute;
+            font-size: 3vw;
+            color: #404040;
+            top: 0.8vw;
+            right: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages/_template/app/approve/device/index.vue

@@ -8,7 +8,7 @@
       @load="onLoadMore"
     >
       <div class="page-top flex flex-col justify-center items-center">
-        <img class="logo" :src="supplierInfo.logo" />
+        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
         <div class="mt-2 name">
           <span v-text="supplierInfo.shopName"></span>
           <span>官方授权设备</span>

pages/_template/app/approve/device/list.vue

@@ -8,7 +8,7 @@
       @load="onLoadMore"
     >
       <div class="page-top flex flex-col justify-center items-center">
-        <img class="logo" :src="supplierInfo.logo" />
+        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
         <div class="mt-2 name">
           <span v-text="supplierInfo.shopName"></span>
           <span>官方授权设备</span>

pages/_template/app/approve/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
+      <!-- <img class="logo" :src="supplierInfo.logo" /> -->
       <div class="name mt-2" v-text="supplierInfo.shopName + '正品授权'"></div>
     </div>
     <div class="page-content">

pages/_template/app/approve/personnel/operate/index.vue

@@ -8,7 +8,7 @@
       @load="onLoadMore"
     >
       <div class="page-top flex flex-col justify-center items-center">
-        <img class="logo" :src="supplierInfo.logo" />
+        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
         <div class="mt-2 name">
           <span v-text="supplierInfo.shopName"></span><span v-if="themeName === 'ross'">官方体疗师认证</span><span v-else>官方医师认证</span>
         </div>

pages/_template/app/database/article.vue

@@ -8,7 +8,7 @@
       @load="onLoadMore"
     >
       <div class="page-top flex flex-col justify-center items-center">
-        <img class="logo" :src="supplierInfo.logo" />
+        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
         <span
           class="name mt-2"
           v-text="supplierInfo.shopName + '资料库'"

pages/_template/app/database/file.vue

@@ -8,7 +8,7 @@
       @load="onLoadMore"
     >
       <div class="page-top flex flex-col justify-center items-center">
-        <img class="logo" :src="supplierInfo.logo" />
+        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
         <span
           class="name mt-2"
           v-text="supplierInfo.shopName + '资料库'"

pages/_template/app/database/image.vue

@@ -8,7 +8,7 @@
       @load="onLoadMore"
     >
       <div class="page-top flex flex-col justify-center items-center">
-        <img class="logo" :src="supplierInfo.logo" />
+        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
         <span
           class="name mt-2"
           v-text="supplierInfo.shopName + '资料库'"

pages/_template/app/database/package.vue

@@ -8,7 +8,7 @@
       @load="onLoadMore"
     >
       <div class="page-top flex flex-col justify-center items-center">
-        <img class="logo" :src="supplierInfo.logo" />
+        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
         <span
           class="name mt-2"
           v-text="supplierInfo.shopName + '资料库'"

pages/_template/app/database/video.vue

@@ -8,7 +8,7 @@
       @load="onLoadMore"
     >
       <div class="page-top flex flex-col justify-center items-center">
-        <img class="logo" :src="supplierInfo.logo" />
+        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
         <span
           class="name mt-2"
           v-text="supplierInfo.shopName + '资料库'"

pages/_template/app/feedback/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
+      <!-- <img class="logo" :src="supplierInfo.logo" /> -->
       <div class="name mt-2" v-text="supplierInfo.shopName + '意见反馈'"></div>
     </div>
     <div class="page-content p-4 md:my-4">

pages/_template/app/form/club-register.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
+      <!-- <img class="logo" :src="supplierInfo.logo" /> -->
       <div
         class="name mt-2"
         v-text="supplierInfo.shopName + '正品授权申请'"

pages/_template/app/record/club/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
+      <!-- <img class="logo" :src="supplierInfo.logo" /> -->
       <div class="name mt-2" v-text="supplierInfo.shopName + '认证记录'"></div>
     </div>
     <div class="page-content">

pages/_template/app/record/club/edit.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="club-info page">
     <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
+      <!-- <img class="logo" :src="supplierInfo.logo" /> -->
       <div class="name mt-2" v-text="supplierInfo.shopName + '认证记录'"></div>
     </div>
     <div class="page-content">

pages/_template/app/record/device/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
+      <!-- <img class="logo" :src="supplierInfo.logo" /> -->
       <div class="name mt-2" v-text="supplierInfo.shopName + '认证记录'"></div>
     </div>
     <div class="page-content">

pages/_template/app/record/device/edit.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="club-device page">
     <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
+      <!-- <img class="logo" :src="supplierInfo.logo" /> -->
       <div class="name mt-2" v-text="supplierInfo.shopName + '认证记录'"></div>
     </div>
     <div class="page-content">

pages/_template/app/record/device/index.vue

@@ -8,7 +8,7 @@
       @load="onLoadMore"
     >
       <div class="page-top flex flex-col justify-center items-center">
-        <img class="logo" :src="supplierInfo.logo" />
+        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
         <div
           class="name mt-2"
           v-text="supplierInfo.shopName + '认证记录'"

pages/_template/ross/approve/club/detail.vue

@@ -7,6 +7,15 @@
       </div>
     </div>
     <div class="page-content">
+      <div class="auth">
+        <div class="auth-icon"></div>
+        <div class="auth-info">
+          <span class="font-bold">ROS'S</span>
+          <span>授予</span>
+          <span>{{ clubInfo.authParty }}</span>
+          <span>正品拥有</span>
+        </div>
+      </div>
       <div class="club-info">
         <div class="section flex justify-between items-center">
           <div class="info">
@@ -207,6 +216,32 @@ export default {
       background-color: #eeeeee;
     }
 
+    .auth {
+      width: 564px;
+      min-height: 114px;
+      background: #f3920d;
+      box-sizing: border-box;
+      padding: 24px;
+      margin-bottom: 4px;
+      border-radius: 4px;
+
+      .auth-icon {
+        height: 28px;
+        background: url(~assets/theme-images/ross/pc-icon-auth.png) no-repeat
+          left center;
+        background-size: auto 28px;
+      }
+
+      .auth-info {
+        font-size: 0;
+        margin-top: 10px;
+        span {
+          font-size: 20px;
+          color: #fff;
+        }
+      }
+    }
+
     .club-info {
       padding: 32px 24px;
       width: 564px;
@@ -404,6 +439,31 @@ export default {
   }
 
   .page-content {
+    .auth {
+      // width: 100%;
+      min-height: 20vw;
+      background: #f3920d;
+      box-sizing: border-box;
+      padding: 5.2vw 4vw;
+
+      .auth-icon {
+        height: 4.9vw;
+        background: url(~assets/theme-images/ross/h5-icon-auth.png) no-repeat
+          left center;
+        background-size: auto 4.9vw;
+      }
+
+      .auth-info {
+        font-size: 0;
+        margin-top: 1vw;
+        span {
+          font-size: 3.6vw;
+          line-height: 6.4vw;
+          color: #fff;
+          font-weight: bold;
+        }
+      }
+    }
     .club-info {
       padding: 4vw;
       width: 100vw;

pages/_template/ross/approve/club/star-list.vue

@@ -0,0 +1,649 @@
+<template>
+  <div class="page">
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <!-- <div class="page-top flex flex-col justify-center items-center"></div> -->
+      <div class="page-content">
+        <!-- <div
+          class="navbar flex items-center flex-col"
+          :style="{ top: offsetTop }"
+        >
+          <nuxt-link
+            :to="routePrefix + '/approve/device'"
+            class="link flex items-center flex-col"
+          >
+            <span class="icon icon-device"></span>
+            <span class="text">设备认证</span>
+          </nuxt-link>
+          <nuxt-link
+            :to="routePrefix + '/approve/personnel/operate'"
+            class="link flex items-center flex-col md:mt-6 mt-4"
+          >
+            <span class="icon icon-doctor"></span>
+            <span class="text">体疗师认证</span>
+          </nuxt-link>
+        </div>
+
+        <div class="filter">
+          <div class="search">
+            <el-input
+              placeholder="搜索机构"
+              v-model="listQuery.clubName"
+              @change="onSearch"
+            >
+              <i slot="prefix" class="el-input__icon el-icon-search"></i>
+            </el-input>
+          </div>
+          <div class="area">
+            <RossSelectGroup @change="onCityChange" ref="citySelect" />
+          </div>
+        </div> -->
+
+        <!-- 标题 -->
+        <div class="title flex justify-between px-4 pt-8 pb-6 md:px-0">
+          <div>明星机构</div>
+          <div>共<span v-text="total" class="font-bold"></span>家明星机构</div>
+        </div>
+        <!-- 列表 -->
+        <div class="list">
+          <template v-for="item in list">
+            <div
+              class="section flex justify-between mb-4"
+              :key="item.authId"
+              @click="toDetail(item)"
+            >
+              <img class="cover" :src="item.logo || drawLogo(item.clubName)" />
+              <div class="info">
+                <div class="name" v-text="item.clubName"></div>
+                <div class="mobile">{{ item.mobile || '暂无' }}</div>
+                <div class="address">
+                  {{ formatAddress(item.area, item.address) }}
+                </div>
+                <div
+                  class="distance"
+                  v-text="generateDistance(item.distance)"
+                  v-if="item.distance && item.distance !== 99999"
+                ></div>
+              </div>
+            </div>
+          </template>
+        </div>
+        <!-- 列表为空 -->
+        <SimpleEmpty
+          v-if="!total && !isRequest"
+          name="icon-empty-club.png"
+          description="敬请期待~"
+        ></SimpleEmpty>
+      </div>
+    </van-list>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { geolocation } from '@/utils/map-utils'
+import { drawLogo, debounce } from '@/utils'
+export default {
+  layout: 'app-ross',
+  data() {
+    return {
+      isLoadingMore: true,
+      finished: false,
+      isRequest: true,
+      list: [],
+      listQuery: {
+        authUserId: '',
+        lngAndLat: '',
+        clubName: '',
+        provinceId: '',
+        cityId: '',
+        townId: '',
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      scrollTop: 0,
+      // starList: []
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId', 'routePrefix', 'screenWidth', 'isPc']),
+    offsetTop() {
+      if (this.scrollTop <= window.innerHeight / 2) return '240px'
+      return 240 + this.scrollTop - window.innerHeight / 2 + 'px'
+    },
+    starList() {
+      return this.list.slice(0, 2)
+    },
+  },
+  mounted() {
+    const cacheData = this.$getStorage(this.routePrefix, 'club_list_data')
+    if (cacheData) {
+      this.initFromCache(cacheData)
+      this.$removeStorage(this.routePrefix, 'club_list_data')
+    } else {
+      this.initData()
+    }
+    window.addEventListener('scroll', () => {
+      this.scrollTop = document.documentElement.scrollTop
+    })
+  },
+  beforeDestroy() {
+    this.$toast.clear()
+    window.removeEventListener('scroll', () => {})
+  },
+  methods: {
+    // 绘制logo的方法
+    drawLogo,
+    // 查看详情
+    toDetail(item) {
+      this.$setStorage(this.routePrefix, 'club_list_data', this.$data, {
+        expiredTime: 5 * 60 * 1000,
+      })
+      this.$setStorage(this.routePrefix, 'clubInfo', item)
+      const url = `${this.routePrefix}/approve/club/detail?id=${item.authId}`
+      this.$router.push(url)
+    },
+    // 从缓存中获取数据
+    initFromCache(cacheData) {
+      this.isLoadingMore = cacheData.isLoadingMore
+      this.finished = cacheData.finished
+      this.isRequest = cacheData.isRequest
+      this.list = cacheData.list
+      this.listQuery = cacheData.listQuery
+      this.total = cacheData.total
+      this.$nextTick(() => {
+        this.$refs.citySelect.initSelectValue({
+          provinceId: this.listQuery.provinceId,
+          cityId: this.listQuery.cityId,
+          townId: this.listQuery.townId,
+        })
+      })
+    },
+
+    generateDistance(value) {
+      return value > 1 ? value + 'km' : value * 1000 + 'm'
+    },
+
+    // 初始化页面数据
+    async initData() {
+      this.listQuery.authUserId = this.authUserId
+
+      // 自定义加载图标
+      // this.$toast.loading({
+      //   message: '正在获取您附近的机构...',
+      //   duration: 0,
+      // })
+
+      // 获取定位信息 这里使用的是高德地图获取用户具体位置信息
+      // try {
+      //   const resLocation = await geolocation()
+      //   this.listQuery.lngAndLat = `${resLocation.position.lng},${resLocation.position.lat}`
+      // } catch (error) {
+      //   this.$toast('获取定位信息失败，请确保您开启的定位权限并保存网络畅通')
+      //   this.isRequest = false
+      // }
+      // 获取机构列表
+      this.fetchList()
+    },
+    fetchList: debounce(async function () {
+      try {
+        this.isLoadingMore = true
+        const res = await this.$http.api.getAuthClubList(this.listQuery)
+        this.total = res.data.total
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
+        this.isLoadingMore = false
+        this.listQuery.pageNum += 1
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.$toast.clear()
+        this.isRequest = false
+      }
+    }, 400),
+    // 城市变化
+    onCityChange(valueMap) {
+      const { provinceId, cityId, townId } = valueMap
+      this.listQuery.provinceId = provinceId
+      this.listQuery.cityId = cityId
+      this.listQuery.townId = townId
+
+      this.listQuery.pageNum = 1
+      this.list = []
+      this.fetchList()
+    },
+    // 搜索
+    onSearch() {
+      this.listQuery.pageNum = 1
+      this.list = []
+      this.fetchList()
+    },
+    // 格式化地址
+    formatAddress(a1, a2) {
+      let resutl = ''
+      if (typeof a1 === 'string') {
+        resutl += a1
+      }
+      if (typeof a2 === 'string') {
+        resutl += a2
+      }
+      return resutl || '暂无'
+    },
+    // 加载更多
+    onLoadMore() {
+      this.fetchList()
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.el-input {
+  ::v-deep {
+    & > {
+      .el-input.is-active .el-input__inner,
+      .el-input__inner:focus {
+        @include themify($themes) {
+          border-color: themed('color');
+        }
+      }
+    }
+  }
+}
+
+// pc 端
+@media screen and (min-width: 768px) {
+  .page {
+    position: relative;
+    min-height: calc(100vh - 80px - 80px);
+    background-color: #fff;
+  }
+  .page-top {
+    height: 530px;
+    @include themify($themes) {
+      background-image: themed('pc-banner-club');
+    }
+    background-size: cover;
+    background-position: center;
+  }
+  .page-content {
+    position: relative;
+    width: 1000px;
+    margin: 0 auto;
+
+    .title {
+      font-size: 16px;
+      color: #404040;
+
+      span {
+        @include themify($themes) {
+          color: themed('color');
+        }
+      }
+    }
+
+    .filter {
+      padding: 48px 0 105px;
+      .search {
+        width: 640px;
+        margin: 0 auto;
+        .el-input {
+          height: 46px;
+          font-size: 16px;
+          .el-input__icon {
+            font-size: 24px;
+            line-height: 46px;
+            margin-left: 12px;
+          }
+
+          ::v-deep {
+            & > .el-input__inner {
+              height: 46px;
+              padding-left: 55px;
+            }
+          }
+        }
+      }
+    }
+
+    .navbar {
+      position: absolute;
+      top: 240px;
+      right: -168px;
+      width: 120px;
+      border-radius: 16px;
+      background: #fff;
+      box-shadow: 0px 6px 20px rgba(40, 40, 40, 0.1);
+      padding: 24px 0;
+      box-sizing: border-box;
+      z-index: 2;
+      .link {
+        &:hover {
+          .icon {
+            &.icon-device {
+              background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png)
+                  no-repeat center center,
+                linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+              background-size: 48px, 100%;
+            }
+            &.icon-doctor {
+              background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png)
+                  no-repeat center center,
+                linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+              background-size: 48px, 100%;
+            }
+          }
+          .text {
+            @include themify($themes) {
+              color: themed('color');
+            }
+          }
+        }
+
+        span {
+          display: block;
+        }
+
+        .icon {
+          width: 72px;
+          height: 72px;
+          // background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+          background-color: #f6f6f7;
+          border-radius: 12px;
+
+          &.icon-device {
+            background: url(~assets/theme-images/ross/pc-nav-entry-device.png)
+              no-repeat center center #f6f6f7;
+            background-size: 48px;
+          }
+
+          &.icon-doctor {
+            background: url(~assets/theme-images/ross/pc-nav-entry-doctor.png)
+              no-repeat center center #f6f6f7;
+            background-size: 48px;
+          }
+        }
+
+        .text {
+          font-size: 16px;
+          color: #404040;
+          margin-top: 8px;
+        }
+      }
+    }
+
+    .list {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .empty {
+        width: 390px;
+      }
+
+      .section {
+        width: 490px;
+        height: 136px;
+        background-color: #f3f5f6;
+        border-radius: 4px;
+        box-sizing: border-box;
+        padding: 16px;
+        cursor: pointer;
+        transition: all 0.4s;
+        &:hover {
+          box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
+        }
+
+        .cover {
+          display: block;
+          width: 104px;
+          height: 104px;
+        }
+        .info {
+          position: relative;
+          margin-left: 12px;
+          width: 330px;
+          .name {
+            width: 200px;
+            font-size: 18px;
+            color: #101010;
+            font-weight: bold;
+            margin-bottom: 24px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+          .mobile,
+          .address {
+            width: 268px;
+            position: relative;
+            font-size: 14px;
+            color: #404040;
+            padding-left: 24px;
+            line-height: 24px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-top: 6px;
+            overflow: hidden;
+            &::after {
+              content: '';
+              display: block;
+              width: 16px;
+              height: 16px;
+              position: absolute;
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              background-size: 16px;
+              background-repeat: no-repeat;
+            }
+          }
+          .mobile {
+            &::after {
+              background-image: url(~assets/theme-images/common/pc-icon-mobile.png);
+            }
+          }
+          .address {
+            &::after {
+              background-image: url(~assets/theme-images/common/pc-icon-address.png);
+            }
+          }
+
+          .distance {
+            position: absolute;
+            font-size: 14px;
+            color: #404040;
+            top: 2px;
+            right: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 移动 端
+@media screen and (max-width: 768px) {
+  .page-top {
+    height: 100vw;
+    @include themify($themes) {
+      background: themed('h5-banner-club');
+    }
+    background-size: 100vw 100vw !important;
+
+    .logo {
+      display: block;
+      width: 14.8vw;
+      height: 14.8vw;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 4vw;
+      color: #fff;
+    }
+  }
+  .page-content {
+    position: relative;
+
+    .title {
+      font-size: 3.4vw;
+      color: #404040;
+
+      span {
+        @include themify($themes) {
+          color: themed('color');
+        }
+      }
+    }
+
+    .filter {
+      padding: 6.4vw 3.2vw 12.8vw;
+    }
+
+    .navbar {
+      position: fixed;
+      top: 50% !important;
+      right: 3.2vw;
+      left: unset !important;
+      width: 14vw;
+      border-radius: 1.6vw;
+      background: #fff;
+      box-shadow: 0px 0.6vw 2vw rgba(40, 40, 40, 0.1);
+      padding: 2.8vw 0;
+      box-sizing: border-box;
+      z-index: 2;
+      span {
+        display: block;
+      }
+
+      .icon {
+        position: relative;
+        width: 7.2vw;
+        height: 7.2vw;
+        border-radius: 1.2vw;
+        background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+
+        &.icon-device,
+        &.icon-doctor {
+          &::after {
+            content: '';
+            display: block;
+            width: 4.8vw;
+            height: 4.8vw;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            background-size: 4.8vw !important;
+          }
+        }
+
+        &.icon-device {
+          &::after {
+            background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png)
+              no-repeat center;
+          }
+        }
+
+        &.icon-doctor {
+          &::after {
+            background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png)
+              no-repeat center;
+          }
+        }
+      }
+
+      .text {
+        font-size: 2.4vw;
+        color: #f3920d;
+        margin-top: 1.2vw;
+      }
+    }
+  }
+
+  .list {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    .section {
+      width: 93.6vw;
+      height: 26vw;
+      background-color: #f3f5f6;
+      border-radius: 4px;
+      box-sizing: border-box;
+      padding: 3.2vw;
+
+      .cover {
+        display: block;
+        width: 19.6vw;
+        height: 19.6vw;
+      }
+      .info {
+        position: relative;
+        margin-left: 3.2vw;
+        .name {
+          width: 48vw;
+          font-size: 4vw;
+          color: #101010;
+          font-weight: bold;
+          margin-bottom: 4vw;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+        .mobile,
+        .address {
+          width: 66vw;
+          position: relative;
+          font-size: 3vw;
+          color: #404040;
+          padding-left: 5vw;
+          line-height: 5vw;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          &::after {
+            content: '';
+            display: block;
+            width: 4vw;
+            height: 4vw;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            background-size: 4vw 4vw;
+            background-repeat: no-repeat;
+          }
+        }
+        .mobile {
+          &::after {
+            background-image: url(~assets/theme-images/common/h5-icon-mobile.png);
+          }
+        }
+        .address {
+          &::after {
+            background-image: url(~assets/theme-images/common/h5-icon-address.png);
+          }
+        }
+
+        .distance {
+          position: absolute;
+          font-size: 3vw;
+          color: #404040;
+          top: 0.8vw;
+          right: 0;
+        }
+      }
+    }
+  }
+}
+</style>

pages/_template/ross/approve/device/detail.vue

@@ -2,7 +2,7 @@
   <div class="device-detail" v-if="productInfo">
     <div class="detail-title">设备认证</div>
     <div class="page-top">
-      <div class="swiper">
+      <div class="swiper-body">
         <img :src="productInfo.pcImage" class="device-image" />
         <div class="auth-seal"></div>
         <img
@@ -15,7 +15,10 @@
       </div>
       <div class="device-info">
         <div class="logo">
-          <img :src="productInfo.clubLogo" alt="logo" />
+          <div class="logo-swiper">
+            <SimpleSwiper :imageList="[productInfo.clubLogo]" :pagination="false"></SimpleSwiper>
+          </div>
+          <!-- <img :src="productInfo.clubLogo" alt="logo" /> -->
         </div>
         <div class="section">
           <div class="name" v-text="productInfo.productName"></div>
@@ -42,6 +45,12 @@
             <span>{{ productInfo.authParty }}</span>
             <span>正品拥有</span>
           </div>
+          <div class="auth-info">
+            <span class="font-bold">ROS'S</span>
+            <span>授予</span>
+            <span>{{ productInfo.authParty }}</span>
+            <span>正品拥有</span>
+          </div>
         </div>
       </div>
     </div>
@@ -224,7 +233,7 @@ export default {
       align-items: flex-start;
       padding: 24px;
       padding-right: 40px;
-      .swiper {
+      .swiper-body {
         position: relative;
         width: 540px;
         height: 540px;
@@ -233,13 +242,7 @@ export default {
           width: 100%;
           height: 100%;
         }
-        ::v-deep {
-          img {
-            width: 540px;
-            height: 540px;
-          }
-        }
-
+        
         .auth-seal {
           position: absolute;
           width: 70px;
@@ -277,7 +280,7 @@ export default {
         position: relative;
 
         .section {
-          width: 360px;
+          width: 440px;
           word-break: break-all;
         }
 
@@ -292,9 +295,24 @@ export default {
           right: 0;
           top: 0;
 
+          .logo-swiper{
+            width: 114px;
+            height: 114px;
+            overflow: hidden;
+            border-radius: 50%;
+          }
+
+          ::v-deep {
+            img {
+              width: 114px;
+              height: 114px;
+            }
+          }
+
           &::after {
             content: '';
             position: absolute;
+            z-index: 1;
             right: 6px;
             bottom: 0;
             display: block;
@@ -377,11 +395,11 @@ export default {
             background: url(~assets/theme-images/ross/pc-icon-auth.png)
               no-repeat left center;
             background-size: auto 28px;
+            margin-bottom: 10px;
           }
 
           .auth-info {
             font-size: 0;
-            margin-top: 10px;
             span {
               font-size: 20px;
               color: #fff;
@@ -492,7 +510,7 @@ export default {
       background: #fff;
     }
     .page-top {
-      .swiper {
+      .swiper-body {
         position: relative;
         width: 100vw;
         height: 100vw;
@@ -560,9 +578,24 @@ export default {
           right: 4vw;
           top: 5.8vw;
 
+          .logo-swiper{
+            width: 18vw;
+            height: 18vw;
+            overflow: hidden;
+            border-radius: 50%;
+          }
+
+          ::v-deep {
+            img {
+              width: 18vw;
+              height: 18vw;
+            }
+          }
+
           &::after {
             content: '';
             position: absolute;
+            z-index: 1;
             right: 0.7vw;
             bottom: 0;
             display: block;
@@ -648,11 +681,11 @@ export default {
             background: url(~assets/theme-images/ross/h5-icon-auth.png)
               no-repeat left center;
             background-size: auto 4.9vw;
+            margin-bottom: 1vw;
           }
 
           .auth-info {
             font-size: 0;
-            margin-top: 1vw;
             span {
               font-size: 3.6vw;
               line-height: 6.4vw;

pages/_template/ross/form/club-register.vue

@@ -100,7 +100,7 @@ export default {
       isRequest: true,
       active: false,
       registerType: [3],
-      step: 1,
+      step: 3,
       stepList: [
         {
           label: '账号注册',

pages/_template/ross/form/components/form-club-device.vue

@@ -9,96 +9,120 @@
           >删除这台设备</span
         >
         <el-form :model="formItem" :rules="rules" ref="form">
-          <el-form-item prop="productName" :label="`设备名称${formItem.uuid}:`">
-            <el-select
-              v-model="formItem.productName"
-              filterable
-              allow-create
-              placeholder="请输入新设备名称或选择已有设备"
-              @change="onProductNameChange(formItem, $event)"
+          <el-form-item label="认证方式:" prop="authType">
+            <el-radio-group v-model="formItem.authType">
+              <el-radio :label="1">新设备认证</el-radio>
+              <el-radio :label="2">关联已认证设备</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <template v-if="formItem.authType === 1">
+            <el-form-item
+              prop="productName"
+              :label="`设备名称${formItem.uuid}:`"
             >
-              <el-option
-                v-for="item in deviceList"
-                :key="item.productTypeId"
-                :label="item.name"
-                :value="item.productTypeId"
+              <el-select
+                v-model="formItem.productName"
+                filterable
+                allow-create
+                placeholder="请输入新设备名称或选择已有设备"
+                @change="onProductNameChange(formItem, $event)"
+                clearable
+              >
+                <el-option
+                  v-for="item in deviceList"
+                  :key="item.productTypeId"
+                  :label="item.name"
+                  :value="item.productTypeId"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="productImage" label="设备图片:">
+              <br />
+              <el-input
+                v-show="false"
+                v-model="formItem.productImage"
+              ></el-input>
+              <SimpleUploadImage
+                :disabled="Boolean(formItem.productTypeId)"
+                :limit="1"
+                :image-list="formItem.productImageList"
+                :before-upload="beforeProductImageUpload"
+                @success="uploadProductImageSuccess(formItem, $event)"
+                @remove="handleProductImageRemove(formItem, $event)"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item prop="productImage" label="设备图片:">
-            <br />
-            <el-input v-show="false" v-model="formItem.productImage"></el-input>
-            <SimpleUploadImage
-              :disabled="Boolean(formItem.productTypeId)"
-              :limit="1"
-              :image-list="formItem.productImageList"
-              :before-upload="beforeProductImageUpload"
-              @success="uploadProductImageSuccess(formItem, $event)"
-              @remove="handleProductImageRemove(formItem, $event)"
-            />
-          </el-form-item>
-          <el-form-item label="所属品牌:" prop="brandId" v-if="editPrams">
-            <el-select v-model="formItem.brandId" placeholder="请选择品牌">
-              <el-option
-                v-for="item in brandList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+            </el-form-item>
+            <el-form-item label="所属品牌:" prop="brandId" v-if="editPrams">
+              <el-select v-model="formItem.brandId" placeholder="请选择品牌">
+                <el-option
+                  v-for="item in brandList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="purchaseWay" label="购买渠道:">
+              <el-input
+                placeholder="请输入购买渠道"
+                v-model="formItem.purchaseWay"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="invoiceImage" label="发票:">
+              <br />
+              <el-input
+                v-show="false"
+                v-model="formItem.invoiceImage"
+              ></el-input>
+              <SimpleUploadImage
+                :limit="1"
+                :image-list="formItem.invoiceImageList"
+                :before-upload="beforeInvoiceImageUpload"
+                @success="uploadInvoiceImageSuccess(formItem, $event)"
+                @remove="handleInvoiceImageRemove(formItem, $event)"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item prop="purchaseWay" label="购买渠道:">
-            <el-input
-              placeholder="请输入购买渠道"
-              v-model="formItem.purchaseWay"
-            ></el-input>
-          </el-form-item>
-          <el-form-item prop="invoiceImage" label="发票:">
-            <br />
-            <el-input v-show="false" v-model="formItem.invoiceImage"></el-input>
-            <SimpleUploadImage
-              :limit="1"
-              :image-list="formItem.invoiceImageList"
-              :before-upload="beforeInvoiceImageUpload"
-              @success="uploadInvoiceImageSuccess(formItem, $event)"
-              @remove="handleInvoiceImageRemove(formItem, $event)"
-            />
-          </el-form-item>
+            </el-form-item>
+          </template>
           <el-form-item prop="snCode" label="设备SN码:">
             <el-input
-              placeholder="请输入设备SN码"
+              :placeholder="
+                formItem.authType === 1
+                  ? '请输入设备SN码'
+                  : '请输入已认证过的设备SN码'
+              "
               v-model="formItem.snCode"
             ></el-input>
           </el-form-item>
-          <el-form-item prop="paramList" label="设备参数:" v-if="editPrams">
-            <br />
-            <div class="device-param-list">
-              <span class="add-param" @click="insertParam(formItem)"
-                >添加参数</span
-              >
-              <template v-for="(param, index) in formItem.paramList">
-                <div :key="index">
-                  <div class="param flex justify-between mb-4">
-                    <el-input
-                      style="width: 40%"
-                      placeholder="例如：品牌"
-                      class="mr-2"
-                      v-model="param.paramName"
-                    ></el-input>
-                    <el-input
-                      placeholder="请输入参数信息"
-                      v-model="param.paramContent"
-                    ></el-input>
-                    <span
-                      class="remove el-icon-close"
-                      @click="removeParam(formItem, index)"
-                      v-if="formItem.paramList.length > 4"
-                    ></span>
+          <template v-if="formItem.authType === 1">
+            <el-form-item prop="paramList" label="设备参数:" v-if="editPrams">
+              <br />
+              <div class="device-param-list">
+                <span class="add-param" @click="insertParam(formItem)"
+                  >添加参数</span
+                >
+                <template v-for="(param, index) in formItem.paramList">
+                  <div :key="index">
+                    <div class="param flex justify-between mb-4">
+                      <el-input
+                        style="width: 40%"
+                        placeholder="例如：品牌"
+                        class="mr-2"
+                        v-model="param.paramName"
+                      ></el-input>
+                      <el-input
+                        placeholder="请输入参数信息"
+                        v-model="param.paramContent"
+                      ></el-input>
+                      <span
+                        class="remove el-icon-close"
+                        @click="removeParam(formItem, index)"
+                        v-if="formItem.paramList.length > 4"
+                      ></span>
+                    </div>
                   </div>
-                </div>
-              </template>
-            </div>
-          </el-form-item>
+                </template>
+              </div>
+            </el-form-item>
+          </template>
         </el-form>
         <el-divider></el-divider>
       </div>
@@ -193,6 +217,9 @@ export default {
         invoiceImage: [
           { required: true, message: '请上传发票', trigger: ['change'] },
         ],
+        authType: [
+          { required: true, message: '请选择认证方式', trigger: ['change'] },
+        ],
       },
       formList: [],
       brandList: [],
@@ -284,6 +311,7 @@ export default {
         invoiceImage: '', // 发票
         productImageList: [],
         invoiceImageList: [],
+        authType: 1,
       }
     },
 
@@ -411,10 +439,20 @@ export default {
         border-color: themed('color');
       }
     }
+    .el-radio__input.is-checked + .el-radio__label {
+      @include themify($themes) {
+        color: themed('color');
+      }
+    }
+    .el-radio__input.is-checked .el-radio__inner {
+      @include themify($themes) {
+        background-color: themed('color');
+        border-color: themed('color');
+      }
+    }
   }
 }
 
-
 // pc端
 @media screen and (min-width: 768px) {
   .el-select {

pages/_template/ross/form/components/form-club-info.vue

@@ -15,6 +15,18 @@
           v-model="formData.mobile"
         ></el-input>
       </el-form-item>
+      <el-form-item prop="mobile" label="运营联系人:">
+        <el-input
+          placeholder="请输入运营联系人"
+          v-model="formData.mobile"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="mobile" label="运营联系人手机号:">
+        <el-input
+          placeholder="请输入运营联系人手机号"
+          v-model="formData.mobile"
+        ></el-input>
+      </el-form-item>
       <el-form-item prop="address" label="所在地区:">
         <br />
         <input type="text" v-model="formData.address" v-show="false" />

pages/_template/ross/index.vue

@@ -44,6 +44,43 @@
           </div>
         </div>
 
+        <!-- 明星机构 -->
+        <template v-if="starList.length > 0">
+          <div class="title flex justify-between px-4 pt-8 pb-6 md:px-0">
+            <div>明星机构</div>
+            <nuxt-link :to="routePrefix + '/approve/club/star-list'"
+              >更多<i class="el-icon-arrow-right"></i
+            ></nuxt-link>
+          </div>
+          <!-- 列表 -->
+          <div class="list">
+            <template v-for="item in starList">
+              <div
+                class="section flex justify-between mb-4"
+                :key="item.authId"
+                @click="toDetail(item)"
+              >
+                <img
+                  class="cover"
+                  :src="item.logo || drawLogo(item.clubName)"
+                />
+                <div class="info">
+                  <div class="name" v-text="item.clubName"></div>
+                  <div class="mobile">{{ item.mobile || '暂无' }}</div>
+                  <div class="address">
+                    {{ formatAddress(item.area, item.address) }}
+                  </div>
+                  <div
+                    class="distance"
+                    v-text="generateDistance(item.distance)"
+                    v-if="item.distance && item.distance !== 99999"
+                  ></div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+
         <!-- 标题 -->
         <div class="title flex justify-between px-4 pt-8 pb-6 md:px-0">
           <div>距您最近...</div>
@@ -86,7 +123,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { loactionSelf, geolocation } from '@/utils/map-utils'
+import { geolocation } from '@/utils/map-utils'
 import { drawLogo, debounce } from '@/utils'
 export default {
   layout: 'app-ross',
@@ -108,6 +145,7 @@ export default {
       },
       total: 0,
       scrollTop: 0,
+      // starList: []
     }
   },
   computed: {
@@ -116,6 +154,9 @@ export default {
       if (this.scrollTop <= window.innerHeight / 2) return '240px'
       return 240 + this.scrollTop - window.innerHeight / 2 + 'px'
     },
+    starList() {
+      return this.list.slice(0, 2)
+    },
   },
   mounted() {
     const cacheData = this.$getStorage(this.routePrefix, 'club_list_data')

pages/_template/ross/record/club/detail.vue

@@ -15,6 +15,14 @@
           <div class="col">联系电话：</div>
           <div class="col">{{ clubInfo.mobile }}</div>
         </div>
+        <div class="row">
+          <div class="col">运营联系人：</div>
+          <div class="col">{{ clubInfo.mobile }}</div>
+        </div>
+        <div class="row">
+          <div class="col">运营联系人手机号：</div>
+          <div class="col">{{ clubInfo.mobile }}</div>
+        </div>
         <div class="row">
           <div class="col">所在地区：</div>
           <div class="col">{{ clubInfo.area }}</div>

pages/_template/ross/record/device/detail.vue

@@ -6,6 +6,10 @@
     </div>
     <div class="page-content">
       <div class="page-title">设备认证</div>
+      <div class="row">
+        <div class="col">认证方式：</div>
+        <div class="col">新设备认证</div>
+      </div>
       <div class="row">
         <div class="col">设备名称：</div>
         <div class="col">{{ productInfo.productName }}</div>

views/NormalHomePage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
+      <!-- <img class="logo" :src="supplierInfo.logo" /> -->
       <div class="name mt-2" v-text="supplierInfo.shopName"></div>
     </div>
     <div class="page-content">