模板自定义

src/api/modules/template.ts

@@ -14,5 +14,23 @@ const template = {
             ...params,
         });
     },
+    folderList(params: any) {
+        return axios.post(`${base}/folderList`, {
+            template_type: 0,
+            page: 1,
+            page_size: 20,
+            ...params,
+        });
+    },
+    customize(name: string, detail: any, folderId: number, params: any) {
+        return axios.post(`${base}/customize`, {
+            name,
+            detail: JSON.stringify(detail),
+            info: '自定义模板',
+            s_image_url: '',
+            folder_id: folderId,
+            ...params,
+        });
+    },
 };
 export default template;

src/common/variables.scss

 $labelColor: #666C70;
 $valueColor: #B6B5BA;
+$valueColor2: #353535;
 
 $tabHeight: 50px;
\ No newline at end of file

src/components/template/TypeThree.vue

 <template>
-  <div class="van-hairline--bottom">
-    <div>{{proofSubItem.label}}</div>
+  <div class="van-hairline--bottom type-three">
+    <div style="text-align:left;font-size: 18px;line-height:1.5em;">{{proofSubItem.label}}</div>
     <component
         v-for="(item) in proofSubItem.data" 
         :key="item.id"
@@ -27,3 +27,8 @@ export default class TypeThree extends Vue {
   }
 }
 </script>
+<style lang="scss" scoped>
+  .type-three{
+    color: $valueColor2;
+  }
+</style>

src/const/constants.ts

@@ -21,6 +21,11 @@ export const menu = [
     icon: ['shouye-lanse', 'shouye-huise'],
   },
   {
+    text: '查询',
+    path: process.env.VUE_APP_BROWSER,
+    icon: ['shouye-lanse', 'shouye-huise'],
+  },
+  {
     text: '存证',
     path: '/proofList',
     icon: ['cunzheng-lanse', 'cunzheng-huise'],

src/const/enum.ts

@@ -10,3 +10,36 @@ export enum VALID {
     USABLE,
     UNUSABLE,
 }
+
+export enum TEMPLATETYPE {
+    SYSTEM,
+    USER,
+}
+
+// 发送验证码用途
+export enum SmsType {
+    LOGIN, // 登陆
+    UPDATEPASSWD, // 修改密码
+    CERTIFICATION, // 实名认证
+    UPDATEPHONE, // 修改手机号
+}
+
+// 登陆类型
+export enum LoginType {
+    PHONEPASSWD,
+    PHONECODE,
+    EMAILPASSWD,
+    EMAILCODE,
+}
+
+// 数据交互类型
+export enum DataType {
+    Input = 0,   // 文本输入
+    Image = 1,   // 图片
+    File = 2,   // 文件
+    Unit = 3,   // 有下级
+    Select = 5, // 选择 单选
+    Date = 6,   // 时间戳
+}
+
+

src/router/index.ts

@@ -69,6 +69,23 @@ const routes: RouteConfig[] = [
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '@/views/userCenter/RecycleList.vue'),
   },
+  {
+    path: '/addTemplate',
+    name: 'Add',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '@/views/template/Add.vue'),
+  },
+  {
+    path: '/templList',
+    name: 'TemplList',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '@/views/template/List.vue'),
+    props: (route) => ({ templList: route.query.templList }),
+  },
 ];
 
 const router = new VueRouter({

src/views/Main.vue

@@ -4,7 +4,7 @@
       <router-view ></router-view>
     </keep-alive>
     <van-tabbar route>
-      <van-tabbar-item replace v-for="{ text, path, icon} in tabList" :key="text" :to="path">
+      <van-tabbar-item  v-for="{ text, path, icon} in tabList" :key="text" v-bind="to(path)">
         <span>{{text}}</span>
         <template #icon="props">
           <common-svg :name="props.active? icon[0] : icon[1]"></common-svg>
@@ -26,5 +26,16 @@ import { menu } from '@/const/constants';
 })
 export default class Main extends Vue {
   private readonly tabList = Object.freeze(menu);
+  private to(path: any){
+    if( typeof path === 'string' && path.startsWith('http')) {
+      return {
+        url: path,
+      }
+    }
+    return {
+      to: path,
+      replace: 'replace',
+    }
+  }
 }
 </script>

src/views/template/Add.vue

+<template>
+   <div class="template">
+      <div v-for="(item,index) in data" :key="index" class="template-item van-hairline--top">
+        <div v-if="item.type === 3" >
+          <div style="display:flex;flex-direction:row;justify-content:space-between;">
+            <div style="color:#353535;font-size:18px;font-weight:500;">{{item.label}}</div>
+            <div @click="preAddWord(2,item)" style="color:#3F79FE;font-size:16px;">添加字段</div>
+          </div>
+          <div v-for="(item, index) in item.data" :key="index">
+            <div style="font-size:15px;color:#353535;">{{item.label}}</div>
+            <div>字段类型: {{typeObj[item.type]}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="add-word"
+        @click="preAddWord(1)">
+        <common-svg name="tianjia" style="margin-right:10px;"></common-svg>添加一级标题
+      </div>
+      <p class="tip">比如：基本信息、出厂信息、图片描述……</p>
+      <div class="btn-group">
+        <div role="button" v-show="data.length > 0" class="preview" @click="preview = true">预览</div>
+        <div role="button" class="confirm" @click="confirm">确定</div>
+      </div>
+      <base-info @next="next" @cancel="cancelCreateTempl"></base-info>
+      <van-dialog 
+        v-model="show"  
+        :before-close="addWord" 
+        :title="levelObj.title"
+        show-cancel-button>
+          <van-field v-model="wordName" label="" :placeholder="levelObj.placeholder"/>
+          <div
+            v-if="level === 2"
+            @click="show2 = true;"
+           style="text-align:left;display:flex;justify-content:space-between;padding:16px;color:#999999;font-size:14px;"><span>字段类型</span> <span>{{typeObj[wordType]}}</span></div>
+      </van-dialog>
+      <transition name="van-slide-up">
+        <add-option v-show="show2" @back="show2=false" @confirmWordType="confirmWordType"></add-option>  
+      </transition> 
+      <transition name="van-slide-up">
+         <preview-template :data="data" v-show="preview" @cancel="preview = false" @employ="employ"></preview-template>
+      </transition>      
+   </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { List, Image, Field, Dialog } from 'vant';
+import { TEMPLATETYPE, DataType } from '@/const/enum';
+import BaseInfo from './components/BaseInfo.vue';
+import AddOption from './components/AddOption.vue';
+import PreviewTemplate from './components/PreviewTemplate.vue';
+class Type {
+  private label: string;
+  private type: DataType;
+  private data: DataType1;
+  private options: string[];
+  constructor(label: string, type: number, data:any, options: []) {
+      this.label = label;
+      this.type = type;
+      this.data = data;
+      this.options = options;
+  }
+}
+class DataType1 {
+  private type: string;
+  private format: string;
+  private value: any;
+  constructor(type: string, format: string, value: any) {
+    this.type = type;
+    this.format = format;
+    this.value = value;
+  }
+}
+@Component({
+  components: {
+    BaseInfo,
+    AddOption,
+    PreviewTemplate,
+    [Field.name]: Field,
+    [Dialog.Component.name]: Dialog.Component,
+  },
+})
+export default class Add extends Vue {
+
+  private templateName: string = '';
+  private thumb:[] = [];
+  private folder: any = {};
+
+  private show: boolean = false;
+  private show2: boolean = false;
+  private level: number = 1;
+  private wordName: string = '';
+  private wordType: number = 0;
+  private options: string[] = [];
+
+  private preview: boolean = false;
+  private typeObj: any = {
+    0: '单行文本',
+    3: '一级标题',
+    5: '选择',
+    6: '日期',
+  };
+  private typeValue: any = {
+    0: {
+      data : {
+          type : "text",
+          format : "string",
+          value : ""
+        },
+      type: 0,
+      key: '',
+      label: '单行文本',
+    },
+    3: {
+      data : [],
+      type: 3,
+      key: '',
+      label: '一级标题',
+    },
+    5: {
+      data : {
+          type : "text",
+          format : "string",
+          value : "",
+      },
+      type: 5,
+      key: '',
+      options: [],
+      label: '选择',
+    },
+    6: {
+      data : {
+          type : 'date',
+          format : 'utc',
+          value : 0,
+      },
+      type: 6,
+      key: '',
+      label: '日期',
+    },
+  };
+  private data: any[] = [];
+  private tempData: any[] = [];
+
+  get levelObj(): any {
+    const obj1 = {
+      title: '添加标题',
+      placeholder: '一级标题名称',
+      toast: '标题至少2个汉字',
+    };
+    const obj2 = {
+      title: '添加字段',
+      placeholder: '字段名称',
+      toast: '字段至少2个汉字',
+    };
+    const obj: any = {obj1, obj2};
+    return obj[`obj${this.level}`];
+  }
+
+  get templateData() {
+    const {templateName , data, folder } = this;
+    return {
+      templateName,
+      data,
+      folder,
+    };
+  }
+  private deepClone(data: any) {
+    return JSON.parse(JSON.stringify(data));
+  }
+  private next(data: any) {
+    this.templateName = data.templateName;
+    this.thumb = data.fileList;
+    this.folder = data.folder;
+  }
+  private cancelCreateTempl() {
+    this.$router.back();
+  }
+  private preAddWord(level: number, item?: any) {
+    this.level = level;
+    this.show = true;
+    this.wordType = level === 1 ? DataType.Unit : DataType.Input;
+    this.tempData = item ? item.data : this.data;
+  }
+  private addWord(action: string, done: any) {
+    if (action === 'confirm') {
+      if (this.wordName === '') {
+        this.$toast(this.levelObj.toast);
+        done(false);
+        return;
+      }
+      let tempData = {...this.deepClone((this.typeValue as any)[this.wordType]), label: this.wordName};
+      if (this.wordType === DataType.Select) {
+        tempData = { ...tempData, options: this.options };
+      }
+      this.tempData.push(tempData);
+      this.wordName = '';
+      done();
+    } else {
+      done();
+    }
+  }
+  private confirmWordType(data: any) {
+    this.show2 = false;
+    this.wordType = data.type;
+    data.type === DataType.Select ? this.options = data.options : this.options = [];
+  }
+  private commitTemplate() {
+    if (this.data.length <= 0) {
+      return Promise.reject('请添加字段');
+    }
+    return this.$api.template.customize(this.templateName, this.data, this.folder.id);
+  }
+  private confirm() {
+    this.employ();
+  }
+  private employ() {
+    this.commitTemplate().then((res: any) => {
+      this.$router.push({name: 'ProofDetail', query: {templateId: res.id}});
+    }).catch( (err: any) => {
+      this.$toast(err);
+    });
+  }
+}
+</script>
+<style scoped lang="scss">
+    .template{
+      padding: 17px;
+      position: relative;
+      .template-item{
+        text-align: left;
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
+        font-size: 10px;
+        line-height: 1.5;
+        color: #818181;
+      }
+      .add-word{
+        padding: 17px;
+        margin-top: 24px;
+        font-size: 16px;
+        color: #3F79FE;
+        border-radius:6px;
+        border:1px dashed rgba(63,121,254,1);
+      }
+      .tip{
+        font-size: 12px;
+        color: #737582;
+      }
+      .btn-group{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        padding: 10px;
+        font-size: 16px;
+        box-shadow:0px 2px 4px 0px rgba(241,243,251,1);
+        .preview{
+          color: #353535;
+          background: #F0F1F5;
+          border-radius:4px;
+          width: 107px;
+          padding: 9px;
+        }
+        .confirm{
+          flex-shrink: 2;
+          width: 228px;
+          padding: 9px;
+          color: #FFFFFF;
+          background:linear-gradient(180deg,rgba(93,123,246,1) 0%,rgba(108,122,254,1) 100%);
+          box-shadow:0px 2px 10px 0px rgba(63,121,254,0.3);
+          border-radius:4px;
+        }
+      }
+    }
+</style>
\ No newline at end of file

src/views/template/Index.vue

 <template>
+  <div class="index">
+    <header>
+      <!-- <div class="login">
+         <p>~ 欢迎来到上链查溯源平台</p>
+         <div class="button">登录/注册</div>
+      </div>-->
+      <div class="proof">
+        <p>我的存证数量</p>
+        <div class="count">299,230</div>
+      </div>
+    </header>
     <div class="template-list">
-    <a :href="BrowserAddress">
-      <div class="left">
-        <span>区块链查询</span>
-        <span style="color:#B6B5BA;margin-left:15px;">链上数据查证平台</span>
+      <div class="system-template">
+        <p style="font-size:14px;color:#353535;">系统模版</p>
+        <ul>
+          <li
+            v-for="{ id, folder_img_url, folder_name, detail} of systemList"
+            :key="id"
+            @click="goTemplList(detail)"
+          >
+            <van-image :src="folder_img_url"></van-image>
+            <p>{{folder_name}}</p>
+          </li>
+        </ul>
       </div>
-      <van-image width="34" height="34" round src="@/assets/right.png"></van-image>
-    </a>
-    <van-list class="about"
-        v-model="loading"
-        :finished="finished"
-        finished-text=""
-        @load="onLoad"
+      <div
+        style="display:flex;flex-direction:row;justify-content:space-between;font-size:14px;color:#353535;"
       >
+        <p>我的模版</p>
+        <router-link to="addTemplate" tag="p" style="color:#3F79FE;">+添加模板</router-link>
+      </div>
+      <van-list class="about" v-model="loading" :finished="finished" finished-text @load="onLoad">
         <template-item
-          v-for="{id, s_image_url, name, info} of list" 
+          v-for="{id, folder_img_url, folder_name, detail} of list"
           :key="id"
-          @click.native="goProofDetail(id)"
-          :thumb="s_image_url"
-          :title="name"
-          :desc="info"
+          @click.native="goTemplList(detail)"
+          :thumb="folder_img_url"
+          :title="folder_name"
+          :desc="`${detail.length}条模板`"
         ></template-item>
       </van-list>
     </div>
- 
+  </div>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { List, Image } from 'vant';
+import { TEMPLATETYPE } from '@/const/enum';
 @Component({
   components: {
     [List.name]: List,
@@ -35,6 +54,7 @@ import { List, Image } from 'vant';
   },
 })
 export default class Index extends Vue {
+  private systemList: any[] = [];
   private list: any[] = [];
   private page: number = 1;
   private pageSize: number = 20;
@@ -44,8 +64,18 @@ export default class Index extends Vue {
   get BrowserAddress() {
     return process.env.VUE_APP_BROWSER;
   }
+  private mounted() {
+    this.$api.template
+      .list({
+        template_type: TEMPLATETYPE.SYSTEM,
+      })
+      .then((res: any) => {
+        this.systemList = res.results || [];
+      });
+  }
   private async onLoad() {
     const res = await this.$api.template.list({
+      template_type: TEMPLATETYPE.USER,
       page: this.page++,
       page_size: this.pageSize,
     });
@@ -59,31 +89,65 @@ export default class Index extends Vue {
       this.finished = true;
     }
   }
-  private goProofDetail(templateId: string) {
-    this.$router.push({ name: 'ProofDetail', query: {templateId} });
+  private goTemplList(templList: []) {
+    const templList2 = JSON.stringify(templList);
+    this.$router.push({ name: 'TemplList', query: { templList: templList2 } });
   }
 }
 </script>
 <style scoped lang="scss">
-  .template-list{
+.index {
+  header {
+    padding: 36px 21px;
+    text-align: left;
+    background: linear-gradient(
+      180deg,
+      rgba(108, 122, 254, 1) 0%,
+      rgba(93, 123, 246, 1) 100%
+    );
+    box-shadow: 0px 5px 20px 0px rgba(63, 121, 254, 0.34);
+    .login {
+      p {
+        font-size: 20px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 1);
+      }
+      div.button {
+        display: inline-block;
+        padding: 10px 20px;
+        border-radius: 18px;
+        font-size: 12px;
+        font-weight: 500;
+        color: rgba(13, 88, 227, 1);
+        background: #ffffff;
+      }
+    }
+    .proof {
+      font-size: 12px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 1);
+      .count {
+        font-size: 40px;
+        font-weight: 500;
+      }
+    }
+  }
+  .template-list {
     box-sizing: border-box;
     padding: 11px 14px;
-    background: #F9FBFF;
-    a{
-      display:flex;
-      align-items: center;
+    background: #f9fbff;
+    position: relative;
+
+    .system-template {
+      text-align: left;
+      ul {
+        display: flex;
+        flex-direction: row;
         justify-content: space-between;
-      padding: 6px 20px;
-      margin-bottom: 20px;
-      background:rgba(255,255,255,1);
-      box-shadow:0px 2px 10px 0px rgba(240,242,246,1);
-      border-radius:27px;
-      border:1px solid rgba(220,231,255,1);
-      .left span{
-        font-size:14px;
-        font-weight:500;
-        color:rgba(53,53,53,1);
+        font-size: 12px;
+        text-align: center;
       }
     }
   }
+}
 </style>
\ No newline at end of file

src/views/template/List.vue

+<template>
+  <div class="template-list">
+     <template-item 
+      v-for="{id, s_image_url, name, info} of list" 
+      :key="id"
+      @click.native="goProofDetail(id)"
+      :thumb="s_image_url"
+      :title="name"
+      :desc="info"
+      ></template-item>
+  </div>
+ 
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { List, Image } from 'vant';
+import { TEMPLATETYPE } from '@/const/enum';
+@Component({
+  components: {
+    [List.name]: List,
+    [Image.name]: Image,
+  },
+})
+export default class Index extends Vue {
+  private list: any[] = [];
+
+  @Prop({
+  })
+  private templList!: string;
+  @Watch('templList', { immediate: true, deep: true })
+  private async onRouteChange(newTemplList: string, oldTemplList: string) {
+    this.list = JSON.parse(newTemplList);
+  }
+  private goProofDetail(templateId: string) {
+    this.$router.push({ name: 'ProofDetail', query: {templateId} });
+  }
+}
+</script>
+<style scoped lang="scss">
+  .template-list{
+    box-sizing: border-box;
+    padding: 11px 14px;
+    background: #F9FBFF;
+    a{
+      display:flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 6px 20px;
+      margin-bottom: 20px;
+      background:rgba(255,255,255,1);
+      box-shadow:0px 2px 10px 0px rgba(240,242,246,1);
+      border-radius:27px;
+      border:1px solid rgba(220,231,255,1);
+      .left span{
+        font-size:14px;
+        font-weight:500;
+        color:rgba(53,53,53,1);
+      }
+    }
+    .system-template{
+      text-align: left;
+      ul{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        font-size: 12px;
+        text-align: center;
+      }
+    }
+  }
+</style>
\ No newline at end of file

src/views/template/components/AddOption.vue

+<template>
+   <div class="add-word1">
+     <van-nav-bar 
+        title="选择字段类型"
+        left-arrow
+         @click-left="onClickLeft"></van-nav-bar>
+      <div v-for="(item, index) in data" :key="index" class="item" @click="activeName = item.type">
+        <div class="item-inner">
+          <div class="title"> {{item.title}}</div>
+          <div class="desc">{{item.desc}}</div>
+          <common-svg name="zidingyimoban-duigou" class="active" v-show="activeName === item.type"></common-svg>
+        </div>
+        <div v-if="activeName === 5 && item.type === 5" style="background:rgba(246,249,255,1);margin:0 -17px;">
+          <van-swipe-cell v-for="(option,index) in options" :before-close="beforeClose" :key="index" ref="swipeCell" :stop-propagation="true">
+            <div style="display:flex;flex-direction:row;align-items:center;">
+              <common-svg name="zidingyimoban-shanchu" @click.native.stop="openSwipeCellRight(index)" style="margin:17px;"></common-svg>
+              <van-field v-model="options[index]" label="" placeholder="输入选项名称"></van-field>
+            </div>
+            <template #right>
+              <van-button square type="danger" text="删除" @click="delOption(index)" />
+            </template>
+          </van-swipe-cell>
+          <div @click="addOption" style="color:#3F79FE;padding:17px;"><common-svg name="tianjia" style="margin-right:10px;"></common-svg>添加选项</div>
+        </div>
+      </div>
+      <van-button block color="#5D7BF6" type="primary" @click="confirmWordType">确定</van-button>
+   </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
+import { Collapse, CollapseItem, Field, Button, NavBar, SwipeCell } from 'vant';
+import { TEMPLATETYPE } from '@/const/enum';
+@Component({
+  components: {
+    [Collapse.name]: Collapse,
+    [CollapseItem.name]: CollapseItem,
+    [Field.name]: Field,
+    [Button.name]: Button,
+    [NavBar.name]: NavBar,
+    [SwipeCell.name]: SwipeCell,
+  },
+})
+export default class AddOption extends Vue {
+  private activeName: number = 0;
+  private data = [
+    {
+      title: '单行文本',
+      desc: '只能输入一行，适合文字少的内容',
+      type: 0,
+    },
+    // {
+    //   title: '多行文本',
+    //   desc: '可以输入多行，适合文字多的内容',
+    // },
+    // {
+    //   title: 'PDF文件',
+    //   desc: '选择PDF文件',
+    // },
+    {
+      title: '日期',
+      desc: '选择单个日期时间',
+      type: 6,
+    },
+    // {
+    //   title: '上传视频',
+    //   desc: '可以定义多个选择项，但只能选择一项',
+    // },
+    // {
+    //   title: '上传图片',
+    //   desc: '可以上传多个图片，但只能选择一项',
+    // },
+    {
+      title: '多选框',
+      desc: '可以定义多个选择项，但只能选择一项',
+      type: 5,
+    },
+  ];
+  private options: string[] = [];
+  private addOption() {
+    this.options.push('');
+  }
+  @Emit('back')
+  private onClickLeft() {
+    return;
+  }
+
+  @Emit('confirmWordType')
+  private confirmWordType() {
+    return {type: this.activeName, options: this.options};
+  }
+  private openSwipeCellRight(index: number) {
+    const swipeCell = (this.$refs[`swipeCell`] as any)[index];
+    swipeCell.open('right');
+  }
+  private delOption(index: number) {
+    this.options.splice(index, 1);
+  }
+}
+</script>
+<style scoped lang="scss">
+   .add-word1{
+     position: absolute;
+     left: 0;
+     right: 0;
+     top: 0;
+     bottom: 0;
+     min-height: 100vh;
+     z-index: 10000;
+     text-align: left;
+     background: #ffffff;
+     .item{
+       padding: 0 17px;
+       border-top: 1px solid rgba(239,239,239,1);
+       border-bottom: 1px solid rgba(239,239,239,1);
+       .item-inner{
+          display: grid;
+          grid-template-columns: auto 27px;
+          grid-template-rows: repeat(2,30px);
+          grid-auto-flow: column dense;
+          .active{
+            grid-column: 2/ span 1;
+            grid-row: 1/ span 2;
+            place-self: center;
+          }
+       }
+     }
+   }
+</style>
\ No newline at end of file

src/views/template/components/BaseInfo.vue

+<template>
+  <van-popup 
+    v-model="show"
+    position="bottom" 
+    :close-on-click-overlay="false"
+    :style="{height: '80%'}"
+    class="base-info">
+    <div style="position:relative;margin-bottom:26px;">
+      <common-svg
+        @click.native="cancel"
+        name="shanchu" 
+        style="position:absolute;left:17px;"></common-svg>
+      <span>创建模板</span>
+    </div>
+    <van-field v-model="templateName" placeholder="填写模板名称"></van-field>
+    <input type="file" id="thumb" style="display:none">
+    <label for="thumb" class="file-input">
+        <common-svg name="tianjia" style="margin-right:10px;"></common-svg><span>添加模板封面</span><common-svg name="jinru"></common-svg>
+    </label>
+    <div class="btn-group">
+      <div>所在文件夹: <span class="classify" @click="show2 = true;">{{folder.name}}</span></div>
+      <div @click="next" class="next">下一步</div>
+    </div>
+    <van-popup 
+      v-model="show2"
+      position="bottom" >
+      <van-picker
+        show-toolbar
+        value-key="name"
+        :default-index="defaultFolderIndex"
+        :columns="folderList"
+        @cancel="show2 = false"
+        @confirm="onConfirm"
+      />
+    </van-popup>
+  </van-popup>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
+import { Collapse, CollapseItem, Field, Button, NavBar, SwipeCell, Popup, Uploader, Picker } from 'vant';
+import { TEMPLATETYPE } from '@/const/enum';
+@Component({
+  components: {
+    [Collapse.name]: Collapse,
+    [CollapseItem.name]: CollapseItem,
+    [Field.name]: Field,
+    [Button.name]: Button,
+    [NavBar.name]: NavBar,
+    [SwipeCell.name]: SwipeCell,
+    [Popup.name]: Popup,
+    [Uploader.name]: Uploader,
+    [Picker.name]: Picker,
+  },
+})
+export default class BaseInfo extends Vue {
+  private show: boolean = true;
+  private show2: boolean = false;
+  private folderList: [] = [];
+  private templateName: string = '';
+  private fileList: [] = [];
+  private folder: any = {};
+
+  private defaultFolderIndex: number = 0;
+  private defaultFolderName: string = '未分类文件夹';
+  private mounted() {
+    this.$api.template.folderList({
+      template_type: TEMPLATETYPE.USER,
+    }).then((res: any) => {
+      this.folderList = res.results || [];
+
+      const findDefaultFolder = (folder: any) => folder.name === this.defaultFolderName;
+      this.folder = this.folderList.find( findDefaultFolder );
+      this.defaultFolderIndex = this.folderList.findIndex( findDefaultFolder );
+    });
+  }
+  @Emit('next')
+  private next() {
+    this.show = false;
+    const { templateName, fileList , folder} = this;
+    return {
+      templateName,
+      fileList,
+      folder,
+    };
+  }
+  @Emit('cancel')
+  private cancel() {
+    this.show = false;
+  }
+  private onConfirm(value: any , index: number) {
+    this.show2 = false;
+    this.folder = value;
+  }
+}
+</script>
+<style scoped lang="scss">
+   .base-info{
+     padding: 17px 0 0;
+      .file-input{       
+        display: grid;
+        grid-template-columns: 20px auto 10px;
+        place-items: center;
+        padding: 7px 17px;
+        background:#F9F9FB;
+        color:#444444;
+        font-size:14px;
+        span{
+          place-self: start;
+        }
+      }
+      .btn-group{
+        position:fixed;
+        left:0;
+        bottom:0;
+        right:0;
+        display:flex;
+        flex-direction:row;
+        justify-content:space-between;
+        align-items: center;
+        padding: 10px 17px;
+        color:#B6B5BA;
+        font-size: 14px;
+        .classify{
+          color: #3F79FE;
+        }
+        .next{
+          padding: 10px 37px;
+          border-radius: 4px;
+          background: #3F79FE;
+          color: #FFFFFF;
+          font-size: 16px;
+        }
+      }
+   }
+</style>
\ No newline at end of file

src/views/template/components/PreviewTemplate.vue

+<template>
+   <div class="preview">
+      <template-detail  :detailInformation="proof" class="detail" style="padding:0 17px;"></template-detail>
+      <div class="btn-group">
+        <div role="button" class="cancel" @click="cancel">取消</div>
+        <div role="button" class="confirm" @click="employ">使用</div>
+      </div>
+   </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator';
+import { Collapse, CollapseItem, Field, Button, NavBar, SwipeCell } from 'vant';
+import { TEMPLATETYPE } from '@/const/enum';
+@Component({
+  components: {
+    [Collapse.name]: Collapse,
+    [CollapseItem.name]: CollapseItem,
+    [Field.name]: Field,
+    [Button.name]: Button,
+    [NavBar.name]: NavBar,
+    [SwipeCell.name]: SwipeCell,
+  },
+})
+export default class PreviewTemplate extends Vue {
+  @Prop( {
+    required: true,
+  })private data!: any;
+
+  private proof: any = [];
+
+  @Watch('data', { immediate: true, deep: true})
+  private onDataChange(data: any, oldData: any) {
+    this.proof = JSON.parse(JSON.stringify(data));
+  }
+
+  @Emit('cancel')
+  private cancel() {
+    return;
+  }
+  @Emit('employ')
+  private employ() {
+    return;
+  }
+}
+</script>
+<style scoped lang="scss">
+    .preview{
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      min-height: 100vh;
+      z-index: 10001;
+      background: #ffffff;
+      ::v-deep .van-field{
+        flex-direction: column;
+        input{
+          font-size: 16px;
+        }
+        &__label{
+          text-align: left;
+          font-size: 14px;
+          color: $labelColor;
+        
+        }
+        &__value{
+          margin-top: 8px;
+          color: $valueColor;
+        }
+      }
+      ::v-deep .van-cell{
+        padding: 12px 0;
+      }
+      .btn-group{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: row;
+        padding: 10px;
+        font-size: 16px;
+        box-shadow:0px 2px 4px 0px rgba(241,243,251,1);
+        .cancel{
+          color: #353535;
+          background: #F0F1F5;
+          border-radius:4px;
+          width: 107px;
+          padding: 9px;
+        }
+        .confirm{
+          color: #FFFFFF;
+          background:linear-gradient(180deg,rgba(93,123,246,1) 0%,rgba(108,122,254,1) 100%);
+          box-shadow:0px 2px 10px 0px rgba(63,121,254,0.3);
+          border-radius:4px;
+          width: 228px;
+          padding: 9px;
+        }
+      }
+    }
+</style>
\ No newline at end of file