feat: 应用详情

src/views/app-controls/app-detail.vue

 <template>
-  <div>应用详情</div>
+  <div class="app-detail">
+    <el-form label-width="90px">
+      <h3 class="model-title">应用信息</h3>
+      <div class="app-info">
+        <div :class="['app-logo', { 'no-logo': !appData.applicationLogo }]">
+          <img v-if="!!appData.applicationLogo" :src="appData.applicationLogo" alt="">
+        </div>
+        <div>
+          <p class="app-name">{{ appData.applicationName }}</p>
+          <p class="app-desc">{{ appData.applicationDesc }}</p>
+        </div>
+      </div>
+      <el-form-item label="版本" style="margin-bottom: 10px">{{ appData.applicationVersion }}</el-form-item>
+      <el-form-item label="到期时间">
+        {{ appData.overTime }}
+        <el-tag type="danger" style="margin: 0 20px 0 10px">已到期</el-tag>
+        <el-button type="text">去续费 <i class="iconfont iconjiantouxiangyou"></i></el-button>
+      </el-form-item>
+      <h3 class="model-title" style="margin-top: 40px">应用设置</h3>
+      <el-form-item label="可见范围">
+        <h4 class="sub-title">管理成员</h4>
+        <div class="admin-list">
+          <el-tag type="info" v-for="el in adminRange" :key="el.roleId">{{ el.roleName }}</el-tag>
+        </div>
+        <h4 class="sub-title">门店成员</h4>
+        <div class="admin-list">
+          <el-tag type="info" v-for="el in storeAdminRange" :key="el.roleId">{{ el.roleName }}</el-tag>
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
+import fetch from '@/api/app-controls';
+const { getAppDetail } = fetch;
 export default {
-  name: 'AppDetail'
+  name: 'AppDetail',
+  data() {
+    return {
+      appData: {
+        applicationName: '',
+        applicationDesc: '',
+        applicationVersion: '',
+        overTime: '',
+        adminRange: [],
+        storeAdminRange: [],
+        applicationLogo: ''
+      }
+    };
+  },
+  created() {
+    const { appId } = this.$route.query;
+    if (!appId) {
+      this.$router.go(-1);
+    }
+    // this.getAppDetail(appId);
+  },
+  methods: {
+    getAppDetail(applicationId) {
+      getAppDetail({ applicationId }).then(res => {
+        const { applicationName, applicationDesc, applicationVersion, overTime, adminRange, storeAdminRange, applicationLogo } = res.result || {};
+        Object.assign(this.appData, { applicationName, applicationDesc, applicationVersion, overTime, applicationLogo });
+        if (Array.isArray(adminRange)) {
+          this.appData.adminRange = adminRange;
+        }
+        if (Array.isArray(storeAdminRange)) {
+          this.appData.storeAdminRange = storeAdminRange;
+        }
+      });
+    }
+  }
 };
 </script>
+
+<style lang="less" scoped>
+.app-detail {
+  padding: 20px 30px;
+  min-height: 100%;
+  background-color: #fff;
+  .model-title {
+    margin-bottom: 25px;
+    font-size: 16px;
+    font-weight: 700;
+    color: @gray01;
+    line-height: 22px;
+  }
+  .app-info {
+    margin-left: 28px;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .app-logo {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      margin-right: 17px;
+      width: 46px;
+      height: 46px;
+      &.no-logo {
+        background-color: #E4E7ED;
+      }
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+    .app-name {
+      font-size: 14px;
+      font-weight: 700;
+      color: @gray01;
+      line-height: 20px;
+    }
+    .app-desc {
+      font-size: 14px;
+      font-weight: 400;
+      color: @gray03;
+      line-height: 20px;
+    }
+  }
+  .sub-title {
+    font-size: 14px;
+    font-weight: 700;
+    color: @gray01;
+  }
+  .admin-list {
+    margin-bottom: 10px;
+    padding: 20px;
+    width: 100%;
+    min-height: 150px;
+    border: 1px solid #E6E7EB;
+  }
+}
+</style>