Skip to content

T
traceSourceMb
Commit 73698791 authored by yyh's avatar yyh
Browse files
Options

模板自定义

parent 7241c29e
Show whitespace changes
Inline Side-by-side
Showing with 911 additions and 37 deletions
src/api/modules/template.ts
View file @ 73698791
...@@ -14,5 +14,23 @@ const template = { ...@@ -14,5 +14,23 @@ const template = {
...params, ...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; export default template;
src/common/variables.scss
View file @ 73698791
$labelColor: #666C70; $labelColor: #666C70;
$valueColor: #B6B5BA; $valueColor: #B6B5BA;
$valueColor2: #353535;
$tabHeight: 50px; $tabHeight: 50px;
\ No newline at end of file
src/components/template/TypeThree.vue
View file @ 73698791
<template> <template>
<div class="van-hairline--bottom"> <div class="van-hairline--bottom type-three">
<div>{{proofSubItem.label}}</div> <div style="text-align:left;font-size: 18px;line-height:1.5em;">{{proofSubItem.label}}</div>
<component <component
v-for="(item) in proofSubItem.data" v-for="(item) in proofSubItem.data"
:key="item.id" :key="item.id"
...@@ -27,3 +27,8 @@ export default class TypeThree extends Vue { ...@@ -27,3 +27,8 @@ export default class TypeThree extends Vue {
} }
} }
</script> </script>
<style lang="scss" scoped>
.type-three{
color: $valueColor2;
}
</style>
src/const/constants.ts
View file @ 73698791
...@@ -21,6 +21,11 @@ export const menu = [ ...@@ -21,6 +21,11 @@ export const menu = [
icon: ['shouye-lanse', 'shouye-huise'], icon: ['shouye-lanse', 'shouye-huise'],
}, },
{ {
text: '查询',
path: process.env.VUE_APP_BROWSER,
icon: ['shouye-lanse', 'shouye-huise'],
},
{
text: '存证', text: '存证',
path: '/proofList', path: '/proofList',
icon: ['cunzheng-lanse', 'cunzheng-huise'], icon: ['cunzheng-lanse', 'cunzheng-huise'],
......
src/const/enum.ts
View file @ 73698791
...@@ -10,3 +10,36 @@ export enum VALID { ...@@ -10,3 +10,36 @@ export enum VALID {
USABLE, USABLE,
UNUSABLE, 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
View file @ 73698791
...@@ -69,6 +69,23 @@ const routes: RouteConfig[] = [ ...@@ -69,6 +69,23 @@ const routes: RouteConfig[] = [
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/userCenter/RecycleList.vue'), 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({ const router = new VueRouter({
......
src/views/Main.vue
View file @ 73698791
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<router-view ></router-view> <router-view ></router-view>
</keep-alive> </keep-alive>
<van-tabbar route> <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> <span>{{text}}</span>
<template #icon="props"> <template #icon="props">
<common-svg :name="props.active? icon[0] : icon[1]"></common-svg> <common-svg :name="props.active? icon[0] : icon[1]"></common-svg>
...@@ -26,5 +26,16 @@ import { menu } from '@/const/constants'; ...@@ -26,5 +26,16 @@ import { menu } from '@/const/constants';
}) })
export default class Main extends Vue { export default class Main extends Vue {
private readonly tabList = Object.freeze(menu); 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> </script>
src/views/template/Add.vue 0 → 100644
View file @ 73698791
<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
View file @ 73698791
<template> <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"> <div class="template-list">
<a :href="BrowserAddress"> <div class="system-template">
<div class="left"> <p style="font-size:14px;color:#353535;">系统模版</p>
<span>区块链查询</span> <ul>
<span style="color:#B6B5BA;margin-left:15px;">链上数据查证平台</span> <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> </div>
<van-image width="34" height="34" round src="@/assets/right.png"></van-image> <div
</a> style="display:flex;flex-direction:row;justify-content:space-between;font-size:14px;color:#353535;"
<van-list class="about"
v-model="loading"
:finished="finished"
finished-text=""
@load="onLoad"
> >
<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 <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" :key="id"
@click.native="goProofDetail(id)" @click.native="goTemplList(detail)"
:thumb="s_image_url" :thumb="folder_img_url"
:title="name" :title="folder_name"
:desc="info" :desc="`${detail.length}条模板`"
></template-item> ></template-item>
</van-list> </van-list>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import { List, Image } from 'vant'; import { List, Image } from 'vant';
import { TEMPLATETYPE } from '@/const/enum';
@Component({ @Component({
components: { components: {
[List.name]: List, [List.name]: List,
...@@ -35,6 +54,7 @@ import { List, Image } from 'vant'; ...@@ -35,6 +54,7 @@ import { List, Image } from 'vant';
}, },
}) })
export default class Index extends Vue { export default class Index extends Vue {
private systemList: any[] = [];
private list: any[] = []; private list: any[] = [];
private page: number = 1; private page: number = 1;
private pageSize: number = 20; private pageSize: number = 20;
...@@ -44,8 +64,18 @@ export default class Index extends Vue { ...@@ -44,8 +64,18 @@ export default class Index extends Vue {
get BrowserAddress() { get BrowserAddress() {
return process.env.VUE_APP_BROWSER; 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() { private async onLoad() {
const res = await this.$api.template.list({ const res = await this.$api.template.list({
template_type: TEMPLATETYPE.USER,
page: this.page++, page: this.page++,
page_size: this.pageSize, page_size: this.pageSize,
}); });
...@@ -59,31 +89,65 @@ export default class Index extends Vue { ...@@ -59,31 +89,65 @@ export default class Index extends Vue {
this.finished = true; this.finished = true;
} }
} }
private goProofDetail(templateId: string) { private goTemplList(templList: []) {
this.$router.push({ name: 'ProofDetail', query: {templateId} }); const templList2 = JSON.stringify(templList);
this.$router.push({ name: 'TemplList', query: { templList: templList2 } });
} }
} }
</script> </script>
<style scoped lang="scss"> <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; box-sizing: border-box;
padding: 11px 14px; padding: 11px 14px;
background: #F9FBFF; background: #f9fbff;
a{ position: relative;
display:flex;
align-items: center; .system-template {
text-align: left;
ul {
display: flex;
flex-direction: row;
justify-content: space-between; justify-content: space-between;
padding: 6px 20px; font-size: 12px;
margin-bottom: 20px; text-align: center;
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);
} }
} }
} }
}
</style> </style>
\ No newline at end of file
src/views/template/List.vue 0 → 100644
View file @ 73698791
<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 0 → 100644
View file @ 73698791
<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 0 → 100644
View file @ 73698791
<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 0 → 100644
View file @ 73698791
<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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment