新增多个模块

frontend/src/api/app-store.js

@@ -61,38 +61,6 @@ export function getBuildLogsList(params) {
     });
 }
 
-export function getFrameworkList(params) {
-    return request({
-        url: "/api/v1/evm_store/framework/list",
-        method: "post",
-        data: params,
-    });
-}
-
-export function addFramework(params) {
-    return request({
-        url: "/api/v1/evm_store/framework/add",
-        method: "post",
-        data: params,
-    });
-}
-
-export function updateFramework(id, params) {
-    return request({
-        url: `/api/v1/evm_store/framework/update/${id}`,
-        method: "post",
-        data: params,
-    });
-}
-
-export function deleteFramework(params) {
-    return request({
-        url: "/api/v1/evm_store/framework/delete",
-        method: "post",
-        data: params,
-    });
-}
-
 export function getDownloadList(params) {
     return request({
         url: "/api/v1/evm_store/download/list",
@@ -262,3 +230,35 @@ export function updateAppLogs(params) {
         data: params,
     });
 }
+
+export function getTopicList(params) {
+    return request({
+        url: "/uowap/index",
+        method: "get",
+        params,
+    });
+}
+
+export function addFramework(params) {
+    return request({
+        url: "/api/v1/evm_store/framework/add",
+        method: "post",
+        data: params,
+    });
+}
+
+export function updateFramework(id, params) {
+    return request({
+        url: `/api/v1/evm_store/framework/update/${id}`,
+        method: "post",
+        data: params,
+    });
+}
+
+export function deleteFramework(params) {
+    return request({
+        url: "/api/v1/evm_store/framework/delete",
+        method: "post",
+        data: params,
+    });
+}

frontend/src/layout/store.vue

@@ -8,33 +8,107 @@
       <div class="center">
         <nav>
           <ul>
-            <router-link to="/gallery" tag="li">推荐</router-link>
-            <router-link to="/app-list" tag="li">应用</router-link>
-            <router-link to="/app-list" tag="li">游戏</router-link>
-            <router-link to="/app-list" tag="li">排行</router-link>
-            <router-link to="/app-list" tag="li">开放平台</router-link>
+            <router-link
+              to="/gallery"
+              v-slot="{ navigate, isActive, isExactActive }"
+              custom
+            >
+              <li
+                @click="navigate"
+                :class="[
+                  isActive && 'router-link-active',
+                  isExactActive && 'router-link-exact-active',
+                ]"
+              >
+                推荐
+              </li>
+            </router-link>
+            <router-link
+              to="/category"
+              v-slot="{ navigate, isActive, isExactActive }"
+              custom
+            >
+              <li
+                @click="navigate"
+                :class="[
+                  isActive && 'router-link-active',
+                  isExactActive && 'router-link-exact-active',
+                ]"
+              >
+                应用
+              </li>
+            </router-link>
+            <router-link
+              to="/list"
+              v-slot="{ navigate, isActive, isExactActive }"
+              custom
+            >
+              <li
+                @click="navigate"
+                :class="[
+                  isActive && 'router-link-active',
+                  isExactActive && 'router-link-exact-active',
+                ]"
+              >
+                游戏
+              </li>
+            </router-link>
+            <router-link
+              to="/rank"
+              v-slot="{ navigate, isActive, isExactActive }"
+              custom
+            >
+              <li
+                @click="navigate"
+                :class="[
+                  isActive && 'router-link-active',
+                  isExactActive && 'router-link-exact-active',
+                ]"
+              >
+                排行
+              </li>
+            </router-link>
+            <router-link
+              to="/developer"
+              v-slot="{ navigate, isActive, isExactActive }"
+              custom
+            >
+              <li
+                @click="navigate"
+                :class="[
+                  isActive && 'router-link-active',
+                  isExactActive && 'router-link-exact-active',
+                ]"
+              >
+                开放平台
+              </li>
+            </router-link>
           </ul>
         </nav>
       </div>
       <div class="right">
-        <div class="input-wrapper">
+        <div class="input-wrapper" ref="search">
           <input
             @focus="onSearchFocus"
-            @blur="onSearchBlur"
             type="text"
             placeholder="搜索应用、游戏"
           />
           <dl v-show="selectShow">
             <dt>热词</dt>
-            <dd>微聊</dd>
-            <dd>支付宝</dd>
-            <dd>计算器</dd>
-            <dd>手表管家</dd>
-            <dd>语音助手</dd>
+            <dd @click="onSearchClick(1)">微聊</dd>
+            <dd @click="onSearchClick(2)">支付宝</dd>
+            <dd @click="onSearchClick(3)">计算器</dd>
+            <dd @click="onSearchClick(4)">手表管家</dd>
+            <dd @click="onSearchClick(5)">语音助手</dd>
           </dl>
         </div>
         <p class="submit-btn">上传应用</p>
-        <img class="avatar" src="../assets/images/avatar.png" alt="avatar" />
+        <img
+          class="avatar"
+          @click="onAccountClick"
+          src="../assets/images/avatar.png"
+          alt="avatar"
+        />
       </div>
     </header>
     <main>
@@ -75,9 +149,28 @@ export default {
     onHomeClick() {
       this.$router.push({ path: "/gallery" });
     },
+    onAccountClick() {
+      this.$router.push({ path: "/auth" });
+    },
+    onSearchClick(index) {
+      console.log(index);
+      this.$router.push({ path: "/search" });
+      this.selectShow = false;
+    },
+    searchEvent(event) {
+      const e = event || window.event;
+      if (this.$refs.search && !this.$refs.search.contains(e.target)) {
+        this.selectShow = false;
+      }
+    },
+  },
+  mounted() {
+    document.addEventListener("click", this.searchEvent);
   },
-  mounted() {},
   created() {},
+  beforeDestroy() {
+    document.removeEventListener("click", this.searchEvent);
+  },
 };
 </script>
 <style lang="scss">
@@ -116,6 +209,9 @@ export default {
           & > li {
             cursor: pointer;
             padding: 0px 30px;
+            &.router-link-active {
+              color: #4cd1e0;
+            }
           }
         }
       }
@@ -160,6 +256,7 @@ export default {
   }
   & > main {
     width: 50%;
+    min-height: 76vh;
     margin: 0px auto;
     @media screen and (max-width: 1170px) {
       width: 70%;

frontend/src/router/index.js

@@ -44,17 +44,6 @@ export const constantRoutes = [
         component: () => import("@/views/system/register"),
         hidden: true,
     },
-    {
-        path: '/',
-        redirect: '/dev',
-        component: DevLayout,
-        children: [{
-            path: 'dev',
-            name: 'Developer',
-            component: () => import('@/views/developer/index'),
-            meta: { title: '开发者中心', icon: 'home' }
-        }]
-    },
     {
         path: '/',
         redirect: '/gallery',
@@ -79,15 +68,59 @@ export const constantRoutes = [
     },
     {
         path: '/',
-        redirect: '/app-list',
+        redirect: '/list',
         component: StoreLayout,
         children: [{
-            path: 'app-list',
+            path: 'list',
             name: 'AppList',
-            component: () => import('@/views/app-store/app-list'),
+            component: () => import('@/views/app-store/list'),
             meta: { title: '更多应用', icon: 'home' }
         }]
     },
+    {
+        path: '/',
+        redirect: '/category',
+        component: StoreLayout,
+        children: [{
+            path: 'category',
+            name: 'AppCategory',
+            component: () => import('@/views/app-store/category'),
+            meta: { title: '应用分类', icon: 'home' }
+        }]
+    },
+    {
+        path: '/',
+        redirect: '/rank',
+        component: StoreLayout,
+        children: [{
+            path: 'rank',
+            name: 'AppRank',
+            component: () => import('@/views/app-store/rank'),
+            meta: { title: '应用排行', icon: 'home' }
+        }]
+    },
+    {
+        path: '/',
+        redirect: '/topic',
+        component: StoreLayout,
+        children: [{
+            path: 'topic',
+            name: 'AppTopic',
+            component: () => import('@/views/app-store/topic'),
+            meta: { title: '应用排行', icon: 'home' }
+        }]
+    },
+    {
+        path: '/',
+        redirect: '/search',
+        component: StoreLayout,
+        children: [{
+            path: 'search',
+            name: 'AppSearch',
+            component: () => import('@/views/app-store/search'),
+            meta: { title: '搜索应用', icon: 'home' }
+        }]
+    },
     {
         path: '/',
         redirect: '/my',
@@ -99,6 +132,28 @@ export const constantRoutes = [
             meta: { title: '个人中心', icon: 'shangcheng' }
         }]
     },
+    {
+        path: '/',
+        redirect: '/auth',
+        component: StoreLayout,
+        children: [{
+            path: 'auth',
+            name: 'AppAuth',
+            component: () => import('@/views/app-store/auth'),
+            meta: { title: '账号认证', icon: 'shangcheng' }
+        }]
+    },
+    {
+        path: '/',
+        redirect: '/developer',
+        component: DevLayout,
+        children: [{
+            path: 'developer',
+            name: 'Developer',
+            component: () => import('@/views/developer/index'),
+            meta: { title: '开发者中心', icon: 'home' }
+        }]
+    },
     {
         path: '/',
         redirect: '/docs',

frontend/src/views/app-store/auth.vue

+<template>
+  <div class="app-container">
+    <form v-show="loginShow" @submit.prevent="false">
+      <h3>登录账号</h3>
+      <input type="email" placeholder="请输入邮箱地址" required name="email" />
+      <input
+        type="password"
+        placeholder="请输入密码"
+        required
+        name="password"
+      />
+      <button>登录</button>
+      <p>
+        <a>忘记密码</a>
+        <a href="javascript:void(0);" @click="loginShow = false">注册账号</a>
+      </p>
+    </form>
+    <form v-show="!loginShow" @submit.prevent="false">
+      <h3>注册账号</h3>
+      <input type="email" placeholder="请输入邮箱地址" required name="email" />
+      <input
+        type="password"
+        placeholder="请输入密码"
+        required
+        name="password"
+      />
+      <input type="text" placeholder="请输入用户名" name="username" />
+      <button>注册</button>
+      <p>
+        <a href="javascript:void(0);" @click="loginShow = true"
+          >已有账号？马上登录</a
+        >
+      </p>
+    </form>
+  </div>
+</template>
+<script>
+export default {
+  name: "AppAuth",
+  components: {},
+  data() {
+    return {
+      loginShow: true,
+    };
+  },
+  computed: {},
+  methods: {},
+  beforeMount() {},
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  height: 70vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  & > form {
+    width: 100%;
+    max-width: 500px;
+    & > h3 {
+      font-size: 25px;
+      color: #4cd1e0;
+      text-align: center;
+    }
+    & > input {
+      width: 100%;
+      height: 50px;
+      line-height: 50px;
+      padding: 6px 12px;
+      margin: 10px 0px;
+    }
+    & > button {
+      background: #4cd1e0;
+      color: #fff;
+      margin: 10px 0 30px;
+      width: 100%;
+      height: 50px;
+      outline: none;
+      display: block;
+      font-size: 16px;
+      border: 0 none;
+      cursor: pointer;
+      text-align: center;
+      line-height: 50px;
+      resize: none;
+      font-family: "微软雅黑";
+      border-radius: 3px;
+      box-shadow: 0 15px 25px #bae4ec;
+    }
+    & > p {
+      color: #4cd1e0;
+      display: flex;
+      font-size: 13px;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+}
+</style>
\ No newline at end of file

frontend/src/views/app-store/category.vue

 <template>
-  <div class="container">
-    <iframe src="https://www.yuque.com/books/share/07c6dc3d-5343-45dd-a7d2-fd5ccaa05825" height="100%" width="100%" name="demo" scrolling="auto" frameborder="0"></iframe>
+  <div class="app-container">
+    <div class="top">
+      <label>大家都在用</label>
+    </div>
+    <div class="content">
+      <div class="item">
+        <img src="../../assets/images/evue-logo.png" alt="icon" />
+        <div class="text">
+          <p class="title">EVUE</p>
+          <p class="subtitle">
+            <star-rating
+              v-bind:rating="3.5"
+              v-bind:increment="0.1"
+              v-bind:max-rating="5"
+              v-bind:star-size="15"
+              v-bind:read-only="true"
+              inactive-color="#9E9E9E"
+              active-color="#FFC83D"
+            >
+            </star-rating>
+          </p>
+          <p class="subtitle">八零八零八附带上方</p>
+        </div>
+        <button class="install">安装</button>
+      </div>
+      <div class="item">
+        <img src="../../assets/images/evue-logo.png" alt="icon" />
+        <div class="text">
+          <p class="title">EVUE</p>
+          <p class="subtitle">
+            <star-rating
+              v-bind:rating="3.5"
+              v-bind:increment="0.1"
+              v-bind:max-rating="5"
+              v-bind:star-size="15"
+              v-bind:read-only="true"
+              inactive-color="#9E9E9E"
+              active-color="#FFC83D"
+            >
+            </star-rating>
+          </p>
+          <p class="subtitle">八零八零八附带上方</p>
+        </div>
+        <button class="install">安装</button>
+      </div>
+      <div class="item">
+        <img src="../../assets/images/evue-logo.png" alt="icon" />
+        <div class="text">
+          <p class="title">EVUE</p>
+          <p class="subtitle">
+            <star-rating
+              v-bind:rating="3.5"
+              v-bind:increment="0.1"
+              v-bind:max-rating="5"
+              v-bind:star-size="15"
+              v-bind:read-only="true"
+              inactive-color="#9E9E9E"
+              active-color="#FFC83D"
+            >
+            </star-rating>
+          </p>
+          <p class="subtitle">八零八零八附带上方</p>
+        </div>
+        <button class="install">安装</button>
+      </div>
+      <div class="item">
+        <img src="../../assets/images/evue-logo.png" alt="icon" />
+        <div class="text">
+          <p class="title">EVUE</p>
+          <p class="subtitle">
+            <star-rating
+              v-bind:rating="3.5"
+              v-bind:increment="0.1"
+              v-bind:max-rating="5"
+              v-bind:star-size="15"
+              v-bind:read-only="true"
+              inactive-color="#9E9E9E"
+              active-color="#FFC83D"
+            >
+            </star-rating>
+          </p>
+          <p class="subtitle">八零八零八附带上方</p>
+        </div>
+        <button class="install">安装</button>
+      </div>
+      <div class="item">
+        <img src="../../assets/images/evue-logo.png" alt="icon" />
+        <div class="text">
+          <p class="title">EVUE</p>
+          <p class="subtitle">
+            <star-rating
+              v-bind:rating="3.5"
+              v-bind:increment="0.1"
+              v-bind:max-rating="5"
+              v-bind:star-size="15"
+              v-bind:read-only="true"
+              inactive-color="#9E9E9E"
+              active-color="#FFC83D"
+            >
+            </star-rating>
+          </p>
+          <p class="subtitle">八零八零八附带上方</p>
+        </div>
+        <button class="install">安装</button>
+      </div>
+      <div class="item">
+        <img src="../../assets/images/evue-logo.png" alt="icon" />
+        <div class="text">
+          <p class="title">EVUE</p>
+          <p class="subtitle">
+            <star-rating
+              v-bind:rating="3.5"
+              v-bind:increment="0.1"
+              v-bind:max-rating="5"
+              v-bind:star-size="15"
+              v-bind:read-only="true"
+              inactive-color="#9E9E9E"
+              active-color="#FFC83D"
+            >
+            </star-rating>
+          </p>
+          <p class="subtitle">八零八零八附带上方</p>
+        </div>
+        <button class="install">安装</button>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-
+import StarRating from "vue-star-rating";
 export default {
-  name: "Document",
-  components: {},
+  name: "AppCategory",
+  components: {
+    StarRating,
+  },
   data() {
     return {};
   },
@@ -17,15 +143,90 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.container {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  & > img {
-    display: block;
+div.app-container {
+  margin: 20px 0px;
+  & > div.top {
+    display: flex;
+    justify-content: space-between;
+    & > label {
+      margin: 0px;
+      font-size: 20px;
+    }
+    & > p {
+      cursor: pointer;
+      margin: 0px;
+      display: inline-flex;
+      align-items: center;
+      font-size: 14px;
+      & > img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+  & > div.content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    flex-shrink: 0;
+    & > div.item {
+      flex: 1;
+      width: 50%;
+      max-width: 50%;
+      min-width: 50%;
+      cursor: pointer;
+      display: inline-flex;
+      flex-direction: row;
+      box-sizing: border-box;
+      border: none;
+      margin: 0px;
+      padding: 10px 20px;
+      & > img {
+        width: 80px;
+        height: 80px;
+      }
+      & > button {
+        width: 100px;
+      }
+      & > button.install {
+        width: auto;
+        min-width: 72px;
+        max-width: 100px;
+        height: 28px;
+        margin: 10px auto;
+        padding: 0 12px;
+        font-size: 14px;
+        font-weight: bolder;
+        border-radius: 14px;
+        color: #007dff;
+        background: rgba(0, 0, 0, 0.05);
+        border: 0;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        z-index: 1;
+        outline: none;
+      }
+      & > div.text {
+        flex: 1;
+        padding: 15px 0px;
+        margin-left: 20px;
+        border-bottom: 1px solid #f2f2f2;
+        & > p {
+          margin: 1px 0px;
+        }
+        & > p.title {
+          line-height: 18px;
+        }
+        & > p.subtitle {
+          color: grey;
+          font-size: 12px;
+          line-height: 18px;
+        }
+      }
+    }
   }
 }
 </style>
\ No newline at end of file

frontend/src/views/app-store/device.vue

-<template>
-    <div class="app-container">
-        <el-form :inline="true" :model="form" size="mini">
-            <el-form-item><el-button type="warning" @click="onAdd">绑定设备</el-button></el-form-item>
-        </el-form>
-        <el-table v-loading="isLoading" element-loading-text="Loading" :data="list" size="mini" border stripe fit highlight-current-row>
-            <el-table-column prop="name" label="设备名称" align="center" min-width="100"></el-table-column>
-            <el-table-column prop="imei" label="IMEI" align="center" width="150"></el-table-column>
-            <el-table-column prop="create_at" label="创建时间" width="150"></el-table-column>
-            <el-table-column prop="create_by.username" label="创建者" width="150"></el-table-column>
-            <el-table-column prop="update_at" label="更新时间" width="150" :show-overflow-tooltip="true"></el-table-column>
-            <el-table-column prop="update_by.username" label="更新者" width="150"></el-table-column>
-            <el-table-column label="操作" align="center" width="180" fixed="right">
-                <template slot-scope="scope">
-                    <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="page-wrapper">
-            <el-pagination @current-change="handleCurrentChange" :current-page.sync="form.pagenum" background small :page-size="form.pagesize" :pager-count="5" layout="pager, prev, next, total" :total="total"></el-pagination>
-        </div>
-        <el-dialog
-            :title="dialogTitle"
-            :visible.sync="dialogVisible"
-            width="45%"
-        >
-            <el-form :model="post" status-icon :rules="rules" ref="post" size="mini" label-width="100px">
-                <el-form-item label="设备名称" prop="name">
-                    <el-input type="text" v-model="post.name" autocomplete="off"></el-input>
-                </el-form-item>
-                <el-form-item label="IMEI" prop="imei">
-                    <el-input type="text" v-model="post.imei" autocomplete="off"></el-input>
-                </el-form-item>
-                <el-form-item label="设备描述" prop="desc">
-                    <el-input type="text" v-model="post.desc" autocomplete="off"></el-input>
-                </el-form-item>
-            </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" size="mini" plain @click="submitForm('post')">提交</el-button>
-                <el-button type="success" size="mini" plain @click="onReset('post')">重置</el-button>
-                <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
-            </div>
-        </el-dialog>
-    </div>
-</template>
-<script>
-import { getDeviceList, deleteDevice, addDevice, updateDevice } from '@/api/app-store'
-import { mapTrim, compareObjectDiff } from '@/utils/index'
-
-export default {
-    name: "Device",
-    data() {
-        return {
-            total: 0,
-            list: [],
-            isLoading: false,
-            roles: [],
-            depots: [],
-            form: {
-                uuid: null,
-                name: null,
-                pagesize: 15,
-                pagenum: 1
-            },
-            dialogTitle: "",
-            dialogVisible: false,
-            post: {
-                imei: null,
-                name: null,
-                type: "watch",
-                desc: null
-            },
-            rules: {
-                imei: [{ type: 'string', required: true, message: 'IMEI不能为空', trigger: 'blur' }],
-                name: [
-                    { type: 'string', required: true, message: '用户名不能为空', trigger: 'blur' },
-                    { min: 1, max: 20, message: '字符串长度在 1 到 20 之间', trigger: 'blur' }
-                ]
-            }
-        }
-    },
-    methods: {
-        fetchData(params) {
-            this.isLoading = true
-            getDeviceList(Object.assign({
-                pagenum: this.form.pagenum,
-                pagesize: this.form.pagesize,
-            }, params)).then(res => {
-                if (res.code == 200) {
-                    this.total = res.count
-                    this.list = res.data
-                }
-            }).catch(err => {
-                // this.$message.error(err.message)
-                console.log(err.message)
-            }).finally(() => {
-                this.isLoading = false
-            })
-        },
-        fetchSelectData() {
-            getDeviceList({ "scope_type": "list" }).then(res => {
-                this.roles = res.data
-            }).catch(err => {
-                // this.$message.error(err.message)
-                console.log(err.message)
-            })
-        },
-        handleSizeChange(e) {
-            this.form.pagesize = e
-            this.fetchData(mapTrim(this.form))
-        },
-        handleCurrentChange(e) {
-            this.form.pagenum = e
-            this.fetchData(mapTrim(this.form))
-        },
-        handleEdit(index, row) {
-            this.post.name = row.name
-            this.post.imei = row.imei
-            this.post.desc = row.desc
-            this.currentValue = row
-            this.dialogTitle = "编辑"
-            this.dialogVisible = true
-        },
-        handleDelete(index, row) {
-            this.$alert('您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。', '删除提醒', {
-                confirmButtonText: '确定',
-                callback: action => {
-                    if (action == 'confirm') deleteDevice(row.id).then(res => {
-                        console.log(res)
-                        this.total -= 1
-                        this.$delete(this.list, index)
-                        this.$message({ type: 'success', message: `成功删除第${ index }行` })
-                        this.fetchData(mapTrim(this.form))
-                    }).catch(err => {
-                        this.$message.error(err.message)
-                    })
-                }
-            })
-        },
-        submitForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                let result = true
-                if (valid) {
-                    if (this.dialogTitle === '添加') addDevice(mapTrim(this.post)).then(res => {
-                        console.log(res)
-                        this.$message({ type: 'success', message: res.message })
-                        this.fetchData(mapTrim(this.form))
-                    }).catch(err => {
-                        this.$message.error(err.message)
-                    })
-                    else if (this.dialogTitle === '编辑') updateDevice(this.currentValue.uuid, compareObjectDiff(this.post, this.currentValue)).then(res => {
-                        console.log(res)
-                        // this.$set(this.list, this.currentIndex, Object.assign(this.currentValue, tmp))
-                        this.$message({ type: 'success', message: '更新成功' })
-                        this.fetchData(mapTrim(this.form))
-                    }).catch(err => {
-                        this.$message.error(err.message)
-                    })
-                } else {
-                    result = false
-                }
-                this.dialogVisible = false
-                return result
-            })
-        },
-        onAdd() {
-            this.dialogTitle = "添加"
-            this.dialogVisible = true
-        },
-        onSubmit() {
-            this.form.pagenum = 1
-            this.form.pagesize = 15
-            this.fetchData(mapTrim(this.form))
-        },
-        onReset(formName) {
-            this.form.name = null
-            this.form.pagesize = 15
-            this.form.pagenum = 1
-            this.$refs[formName].resetFields()
-            this.fetchData()
-        }
-    },
-    mounted() {
-    },
-    created() {
-        this.fetchData()
-        this.fetchSelectData()
-    }
-}
-</script>
-<style lang="scss" scoped>
-.app-container {
-    & > div.page-wrapper {
-        margin: 10px 0px;
-    }
-}
-</style>

frontend/src/views/app-store/login-register.vue

-<template>
-  <div class="container">
-    <iframe src="https://www.yuque.com/books/share/07c6dc3d-5343-45dd-a7d2-fd5ccaa05825" height="100%" width="100%" name="demo" scrolling="auto" frameborder="0"></iframe>
-  </div>
-</template>
-<script>
-
-export default {
-  name: "Document",
-  components: {},
-  data() {
-    return {};
-  },
-  computed: {},
-  methods: {},
-  beforeMount() {},
-};
-</script>
-<style lang="scss" scoped>
-.container {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  & > img {
-    display: block;
-  }
-}
-</style>
\ No newline at end of file

frontend/src/views/app-store/profile.vue

@@ -214,6 +214,33 @@
       </div>
     </div>
     <div v-show="navIndex === 5" class="right">
+      <p class="title">设备绑定</p>
+      <div class="content">
+        <img src="../../assets/images/device.png" />
+        <h3 class="tip-text">暂无设备</h3>
+        <ul class="device-list">
+          <li>
+            <img src="../../assets/images/watch.png" />
+            <div>
+              <p><span>EVUE</span><span>2020-02-02 20:20:20</span></p>
+              <p>
+                法大师傅撒旦艰苦弗兰克迪斯科飞机但是附近的深刻理解发生的发的时刻了
+              </p>
+            </div>
+          </li>
+          <li>
+            <img src="../../assets/images/watch.png" />
+            <div>
+              <p><span>EVUE</span><span>2020-02-02 20:20:20</span></p>
+              <p>
+                法大师傅撒旦艰苦弗兰克迪斯科飞机但是附近的深刻理解发生的发的时刻了
+              </p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div v-show="navIndex === 6" class="right">
       <p class="title">我的账号</p>
       <div class="content">
         <div class="update-password">
@@ -240,6 +267,7 @@ export default {
         "发布应用",
         "我的发布",
         "联系我们",
+        "设备绑定",
         "我的账号",
       ],
       navIndex: 0,
@@ -365,6 +393,32 @@ export default {
           }
         }
       }
+      & > ul.device-list {
+        width: 100%;
+        & > li {
+          display: flex;
+          flex-direction: row;
+          & > img {
+            display: block;
+            width: 80px;
+            height: 80px;
+          }
+          & > div {
+            flex: 1;
+            font-size: 14px;
+            & > p:first-child {
+              font-size: 14px;
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              & > span:last-child {
+                color: grey;
+                font-size: 12px;
+              }
+            }
+          }
+        }
+      }
       & > ul.app-list {
         width: 100%;
         height: auto;
@@ -383,6 +437,7 @@ export default {
             margin-left: 10px;
             & > p:first-child {
               display: flex;
+              font-size: 14px;
               flex-direction: row;
               justify-content: space-between;
               & > span:last-child {
@@ -393,7 +448,7 @@ export default {
             }
             & > p:last-child {
               color: grey;
-              font-size: 14px;
+              font-size: 13px;
             }
           }
         }

frontend/src/views/app-store/rank.vue

 <template>
-  <div class="container">
-    <iframe src="https://www.yuque.com/books/share/07c6dc3d-5343-45dd-a7d2-fd5ccaa05825" height="100%" width="100%" name="demo" scrolling="auto" frameborder="0"></iframe>
+  <div class="app-container">
+    <div class="top">
+      <label>大家都在用</label>
+    </div>
+    <div class="content">
+      <div class="item">
+        <img src="../../assets/images/evue-logo.png" alt="icon" />
+        <div class="text">
+          <p class="title">EVUE</p>
+          <p class="subtitle">
+            <star-rating
+              v-bind:rating="3.5"
+              v-bind:increment="0.1"
+              v-bind:max-rating="5"
+              v-bind:star-size="15"
+              v-bind:read-only="true"
+              inactive-color="#9E9E9E"
+              active-color="#FFC83D"
+            >
+            </star-rating>
+          </p>
+          <p class="subtitle">八零八零八附带上方</p>
+        </div>
+        <button class="install">安装</button>
+      </div>
+      <div class="item">
+        <img src="../../assets/images/evue-logo.png" alt="icon" />
+        <div class="text">
+          <p class="title">EVUE</p>
+          <p class="subtitle">
+            <star-rating
+              v-bind:rating="3.5"
+              v-bind:increment="0.1"
+              v-bind:max-rating="5"
+              v-bind:star-size="15"
+              v-bind:read-only="true"
+              inactive-color="#9E9E9E"
+              active-color="#FFC83D"
+            >
+            </star-rating>
+          </p>
+          <p class="subtitle">八零八零八附带上方</p>
+        </div>
+        <button class="install">安装</button>
+      </div>
+      <div class="item">
+        <img src="../../assets/images/evue-logo.png" alt="icon" />
+        <div class="text">
+          <p class="title">EVUE</p>
+          <p class="subtitle">
+            <star-rating
+              v-bind:rating="3.5"
+              v-bind:increment="0.1"
+              v-bind:max-rating="5"
+              v-bind:star-size="15"
+              v-bind:read-only="true"
+              inactive-color="#9E9E9E"
+              active-color="#FFC83D"
+            >
+            </star-rating>
+          </p>
+          <p class="subtitle">八零八零八附带上方</p>
+        </div>
+        <button class="install">安装</button>
+      </div>
+      <div class="item">
+        <img src="../../assets/images/evue-logo.png" alt="icon" />
+        <div class="text">
+          <p class="title">EVUE</p>
+          <p class="subtitle">
+            <star-rating
+              v-bind:rating="3.5"
+              v-bind:increment="0.1"
+              v-bind:max-rating="5"
+              v-bind:star-size="15"
+              v-bind:read-only="true"
+              inactive-color="#9E9E9E"
+              active-color="#FFC83D"
+            >
+            </star-rating>
+          </p>
+          <p class="subtitle">八零八零八附带上方</p>
+        </div>
+        <button class="install">安装</button>
+      </div>
+      <div class="item">
+        <img src="../../assets/images/evue-logo.png" alt="icon" />
+        <div class="text">
+          <p class="title">EVUE</p>
+          <p class="subtitle">
+            <star-rating
+              v-bind:rating="3.5"
+              v-bind:increment="0.1"
+              v-bind:max-rating="5"
+              v-bind:star-size="15"
+              v-bind:read-only="true"
+              inactive-color="#9E9E9E"
+              active-color="#FFC83D"
+            >
+            </star-rating>
+          </p>
+          <p class="subtitle">八零八零八附带上方</p>
+        </div>
+        <button class="install">安装</button>
+      </div>
+      <div class="item">
+        <img src="../../assets/images/evue-logo.png" alt="icon" />
+        <div class="text">
+          <p class="title">EVUE</p>
+          <p class="subtitle">
+            <star-rating
+              v-bind:rating="3.5"
+              v-bind:increment="0.1"
+              v-bind:max-rating="5"
+              v-bind:star-size="15"
+              v-bind:read-only="true"
+              inactive-color="#9E9E9E"
+              active-color="#FFC83D"
+            >
+            </star-rating>
+          </p>
+          <p class="subtitle">八零八零八附带上方</p>
+        </div>
+        <button class="install">安装</button>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-
+import StarRating from "vue-star-rating";
 export default {
-  name: "Document",
-  components: {},
+  name: "AppList",
+  components: {
+    StarRating,
+  },
   data() {
     return {};
   },
@@ -17,15 +143,90 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.container {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  & > img {
-    display: block;
+div.app-container {
+  margin: 20px 0px;
+  & > div.top {
+    display: flex;
+    justify-content: space-between;
+    & > label {
+      margin: 0px;
+      font-size: 20px;
+    }
+    & > p {
+      cursor: pointer;
+      margin: 0px;
+      display: inline-flex;
+      align-items: center;
+      font-size: 14px;
+      & > img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+  & > div.content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    flex-shrink: 0;
+    & > div.item {
+      flex: 1;
+      width: 50%;
+      max-width: 50%;
+      min-width: 50%;
+      cursor: pointer;
+      display: inline-flex;
+      flex-direction: row;
+      box-sizing: border-box;
+      border: none;
+      margin: 0px;
+      padding: 10px 20px;
+      & > img {
+        width: 80px;
+        height: 80px;
+      }
+      & > button {
+        width: 100px;
+      }
+      & > button.install {
+        width: auto;
+        min-width: 72px;
+        max-width: 100px;
+        height: 28px;
+        margin: 10px auto;
+        padding: 0 12px;
+        font-size: 14px;
+        font-weight: bolder;
+        border-radius: 14px;
+        color: #007dff;
+        background: rgba(0, 0, 0, 0.05);
+        border: 0;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        z-index: 1;
+        outline: none;
+      }
+      & > div.text {
+        flex: 1;
+        padding: 15px 0px;
+        margin-left: 20px;
+        border-bottom: 1px solid #f2f2f2;
+        & > p {
+          margin: 1px 0px;
+        }
+        & > p.title {
+          line-height: 18px;
+        }
+        & > p.subtitle {
+          color: grey;
+          font-size: 12px;
+          line-height: 18px;
+        }
+      }
+    }
   }
 }
 </style>
\ No newline at end of file

frontend/src/views/app-store/app-search.vue → frontend/src/views/app-store/search.vue

 <template>
   <div class="app-container">
     <div class="top">
-      <label>大家都在用</label>
+      <label>“流利说-英语”的搜索结果</label>
     </div>
     <div class="content">
       <div class="item">
@@ -130,7 +130,7 @@
 <script>
 import StarRating from "vue-star-rating";
 export default {
-  name: "AppList",
+  name: "AppSearch",
   components: {
     StarRating,
   },
@@ -148,6 +148,7 @@ div.app-container {
   & > div.top {
     display: flex;
     justify-content: space-between;
+    margin: 20px 0px;
     & > label {
       margin: 0px;
       font-size: 20px;
@@ -166,15 +167,12 @@ div.app-container {
   }
   & > div.content {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     flex-wrap: wrap;
     flex-grow: 1;
     flex-shrink: 0;
     & > div.item {
       flex: 1;
-      width: 50%;
-      max-width: 50%;
-      min-width: 50%;
       cursor: pointer;
       display: inline-flex;
       flex-direction: row;

frontend/src/views/app-store/topic.vue

+<template>
+  <div class="app-container">
+    <h3>热门专题</h3>
+    <ul>
+      <li v-for="(item, index) in topicList" :key="index">
+        <img :src="item.icon" />
+        <p>{{ item.intro }}</p>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import { getTopicList } from "@/api/app-store";
+export default {
+  name: "AppTopic",
+  data() {
+    return {
+      topicList: [],
+      query: {
+        method: "internal.getTabDetail",
+        serviceType: 20,
+        reqPageNum: 1,
+        uri: "automore|pcpostercardwithtitle|903805|PC1000",
+        maxResults: 25,
+        zone: "",
+        locale: "zh",
+      },
+    };
+  },
+  methods: {
+    getTopicList() {
+      getTopicList(this.query)
+        .then((res) => {
+          if (res.layoutData) {
+            this.topicList = res.layoutData[0].dataList;
+          }
+        })
+        .catch((err) => {
+          if (err.layoutData && err.layoutData.length) {
+            this.topicList = err.layoutData[0].dataList;
+          }
+        });
+    },
+  },
+  mounted() {},
+  created() {
+    this.getTopicList();
+  },
+};
+</script>
+<style lang="scss" scoped>
+div.app-container {
+    margin-bottom: 40px;
+  & > h3 {
+    height: 33px;
+    font-size: 24px;
+    color: #000;
+    line-height: 33px;
+    margin: 40px 0px;
+  }
+  & > ul {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-row-gap: 40px;
+    grid-column-gap: 20px;
+    & > li {
+      & > img {
+        width: 100%;
+        height: auto;
+        display: block;
+        border-radius: 25px;
+      }
+      & > p {
+        line-height: 22px;
+        font-size: 16px;
+        color: #191919;
+        padding: 0;
+        margin: 8px 0 0;
+      }
+    }
+  }
+}
+</style>

frontend/src/views/developer/index.vue

@@ -3,10 +3,7 @@
     <div class="m-index">
       <div
         class="banner"
-        style="
-          background: url(http://gtms01.alicdn.com/tps/i1/TB1rGYSGFXXXXawXXXXDcMi7VXX-1440-336.png)
-            no-repeat center 0 #657284;
-        "
+        style="background: url(http://gtms01.alicdn.com/tps/i1/TB1rGYSGFXXXXawXXXXDcMi7VXX-1440-336.png) no-repeat center 0 #657284;"
       >
         <a class="btn" href="#newapp/upload"></a>
       </div>