Skip to content

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

选择模板样式调整

parent 0ed735bd
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 61 deletions
public/index.html
View file @ 6d6b594c
......@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="//at.alicdn.com/t/font_1750816_1l4uz9j4m72.js"></script>
<script src="//at.alicdn.com/t/font_1750816_4yzf3vgum.js"></script>
</head>
<body>
<audio src="https://go-czsy.oss-cn-hangzhou.aliyuncs.com/common/513271190a9ae71f3d97282f01fded19f2955324fa7d201614d1d4b5ed141d99.m4a"></audio>
......
src/views/proof/Index.vue
View file @ 6d6b594c
<template>
<div class="proof-list">
<van-image src="@/assets/addproof.png" width="50px" fit="contain" class="add-proof"></van-image>
<add-baseinfo v-if="showAddProof" @cancle="showAddProof = false;"></add-baseinfo>
<van-image src="@/assets/addproof.png" width="50px" fit="contain" class="add-proof" @click="showAddProof = true;"></van-image>
<header>
<span style="font-size:18px;font-weight:500;">存证列表</span>
<div @click="showFilterPicker = true">
......@@ -66,7 +67,6 @@
@confirm="onConfirmFilter"
/>
</van-popup>
<select-template v-if="showSelectTemplate" @next="next" @cancel="showSelectTemplate = false;" @preview="preview" @add-folder="showAddFolder = true;"></select-template>
<transition name="van-slide-right">
<add-folder v-if="showAddFolder" @cancel="showAddFolder = false" @next="addFolder"></add-folder>
......@@ -105,6 +105,7 @@ import { ActionList, ChainStatusStr } from '@/const/constants';
import SelectTemplate from '@/views/template/components/SelectTemplate.vue';
import PreviewTemplate from '@/views/template/components/PreviewTemplate.vue';
import AddFolder from '@/views/template/components/AddFolder.vue';
import AddBaseinfo from './components/AddBaseinfo.vue';
@Component({
components: {
[Picker.name]: Picker,
......@@ -118,6 +119,7 @@ import AddFolder from '@/views/template/components/AddFolder.vue';
SelectTemplate,
PreviewTemplate,
AddFolder,
AddBaseinfo,
},
})
export default class Index extends Vue {
......@@ -142,6 +144,7 @@ export default class Index extends Vue {
private detail: any = {};
private showAddFolder: boolean = false;
private showAddProof: boolean = false;
private showIncrementMore: boolean = false;
private async addFolder(data: any) {
......
src/views/proof/components/AddBanner.vue
View file @ 6d6b594c
......@@ -44,7 +44,7 @@ import H5Cropper from 'vue-cropper-h5';
import { Getter } from 'vuex-class';
import { TemplateDataItem } from '@/const/interface';
import { Route } from 'vue-router';
const maxFileSize = 2* 1024 * 1024;
const maxFileSize = 2 * 1024 * 1024;
@Component({
components: {
[Button.name]: Button,
......@@ -62,7 +62,7 @@ export default class AddBanner extends Vue {
private imgs: any[] = [];
private show: boolean = true;
private option: any = {
fixedNumber: [35,14],
fixedNumber: [35, 14],
};
@Watch('banners', { immediate: true, deep: true })
private async onChange(newVal: [], oldVal: []) {
......@@ -84,11 +84,11 @@ export default class AddBanner extends Vue {
}
private change(e: any) {
if (this.imgs.length >= 4) {
this.$toast("最多上传4张banner图");
this.$toast('最多上传4张banner图');
return;
}
if (e.target.files[0].size > maxFileSize) {
this.$toast("文件大小限制2M");
this.$toast('文件大小限制2M');
return;
}
(this.$refs.cropper as any).loadFile(e.target.files[0]);
......
src/views/proof/components/AddBaseinfo.vue
View file @ 6d6b594c
......@@ -5,7 +5,17 @@
position="bottom"
:close-on-click-overlay="false"
:style="{height: '80%'}">
<van-field v-model="proofName"></van-field>
<header>
<common-svg name="shanchu5" @click.native="cancle"></common-svg>
<div>创建存证</div>
<div style="color:#B6B5BA;font-size:16px;" @click="next">下一步</div>
</header>
<van-field v-model="proofName" placeholder="填写存证名称"></van-field>
<div>
<div>
<common-svg name="tianjia" style="margin-right:10px;"></common-svg><span>选择模板</span><common-svg name="jinru"></common-svg>
</div>
</div>
</van-popup>
</template>
<script lang="ts">
......@@ -23,11 +33,25 @@ import { Route } from 'vue-router';
},
})
export default class AddBaseinfo extends Vue {
private show: boolean = true;
private proofName: string = '';
private cancle() {
this.$emit('cancle')
}
@Emit('next')
private next() {
return {}
}
}
</script>
<style scoped lang="scss">
.addBanner{
.add-baseinfo{
header{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 15px;
}
.add{
position:relative;
display: flex;
......
src/views/template/components/SelectTemplate.vue
View file @ 6d6b594c
......@@ -5,17 +5,18 @@
:close-on-click-overlay="false"
:style="{height: '80%'}"
class="base-info select-template">
<div style="position:relative;margin-bottom:26px;">
<div style="position:relative;margin-bottom:26px;" class="header">
<div > <div v-show="!showDetailb" @click="goBack"><common-svg name="fanhui2" ></common-svg> 返回</div></div>
<span>选择模版</span>
<common-svg
@click.native="cancel"
name="shanchu"
style="position:absolute;left:17px;"></common-svg>
<span>选择模版</span>
name="moban-quxiao"></common-svg>
</div>
<van-search
v-model="searchValue"
show-action
placeholder="请输入搜索关键词"
:left-icon="require('@/assets/search2.png')"
@search="onSearch"
@input="onSearch"></van-search>
<div v-if="searchValue" class="folder-detail">
......@@ -43,55 +44,55 @@
</div>
<div v-else>
<div style="position:relative;" class="folderList" v-if="showDetailb">
<div class="addFolder" @click="addFolder">+添加文件夹</div>
<van-tabs v-model="active" >
<van-tab title="系统模板">
<div v-for="(folder,index) in systemFolderList" :key="index" class="item" @click="selectFolder(folder)">
<van-image
class="thumb"
:src="folder.folder_simg_url"
fit="contain"
></van-image>
<div class="title">{{folder.folder_name}}</div>
<div class="desc">{{(folder.detail || []).length}}条模版</div>
<common-svg name="jinru" class="right-icon"></common-svg>
</div>
</van-tab>
<van-tab title="我的模板">
<div v-for="(folder,index) in userFolderList" :key="index" class="item" @click="selectFolder(folder)">
<van-image
class="thumb"
:src="folder.folder_simg_url"
fit="contain"
></van-image>
<div class="title">{{folder.folder_name}}</div>
<div class="desc">{{(folder.detail || []).length}}条模版</div>
<common-svg name="jinru" class="right-icon"></common-svg>
</div>
</van-tab>
</van-tabs>
</div>
<div class="folder-detail" v-else>
<header>
<div>{{currentFolder.folder_name}}</div>
<router-link to="addTemplate" tag="p" style="color:#3F79FE;">+添加模板</router-link>
</header>
<van-radio-group v-model="radio" class="template-list">
<van-radio :name="template.id" v-for="(template, index) in currentFolder.detail" :key="index" @click="selectTemplate(template.id)">
<div>
<van-image round :src="template.s_image_url" width="50px" height="50px" fit="contain"></van-image>
<div>{{template.name}}</div>
<div class="addFolder" @click="addFolder">+添加文件夹</div>
<van-tabs v-model="active" >
<van-tab title="系统模板">
<div v-for="(folder,index) in systemFolderList" :key="index" class="item" @click="selectFolder(folder)">
<van-image
class="thumb"
:src="folder.folder_simg_url"
fit="contain"
></van-image>
<div class="title">{{folder.folder_name}}</div>
<div class="desc">{{(folder.detail || []).length}}条模版</div>
<common-svg name="jinru" class="right-icon"></common-svg>
</div>
<template #icon="props">
<common-svg :name="props.checked? 'moban-xuanzhongzhuangtai1':''"></common-svg>
</template>
</van-radio>
</van-radio-group>
<div class="btn-group" v-if="radio >= 0">
<div class="left" @click="preview">预览</div>
<div class="right" @click="confirm">确定</div>
</div>
</div>
</van-tab>
<van-tab title="我的模板">
<div v-for="(folder,index) in userFolderList" :key="index" class="item" @click="selectFolder(folder)">
<van-image
class="thumb"
:src="folder.folder_simg_url"
fit="contain"
></van-image>
<div class="title">{{folder.folder_name}}</div>
<div class="desc">{{(folder.detail || []).length}}条模版</div>
<common-svg name="jinru" class="right-icon"></common-svg>
</div>
</van-tab>
</van-tabs>
</div>
<div class="folder-detail" v-else>
<header>
<div>{{currentFolder.folder_name}}</div>
<router-link to="addTemplate" tag="p" style="color:#3F79FE;">+添加模板</router-link>
</header>
<van-radio-group v-model="radio" class="template-list">
<van-radio :name="template.id" v-for="(template, index) in currentFolder.detail" :key="index" @click="selectTemplate(template.id)">
<div>
<van-image round :src="template.s_image_url" width="50px" height="50px" fit="contain"></van-image>
<div>{{template.name}}</div>
</div>
<template #icon="props">
<common-svg :name="props.checked? 'moban-xuanzhongzhuangtai1':''"></common-svg>
</template>
</van-radio>
</van-radio-group>
<div class="btn-group" v-if="radio >= 0">
<div class="left" @click="preview">预览</div>
<div class="right" @click="confirm">确定</div>
</div>
</div>
</div>
</van-popup>
......@@ -165,6 +166,9 @@ export default class SelectTemplate extends Vue {
this.currentFolder = folder;
this.showDetailb = false;
}
private goBack() {
this.showDetailb = true;
}
private async selectTemplate(templateId: number) {
this.currentTemplate = await this.$api.template.get(templateId);
}
......@@ -198,6 +202,15 @@ export default class SelectTemplate extends Vue {
</script>
<style scoped lang="scss">
.select-template{
.header{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 19px 12px;
padding-bottom: 0;
color: #353535;
font-size: 18px;
}
::v-deep .van-radio{
position: relative;
&__icon{
......@@ -207,6 +220,9 @@ export default class SelectTemplate extends Vue {
top: 5px;
}
}
::v-deep .van-tabs__line{
display: none;
}
::v-deep .van-tab{
width: 100px;
flex: none;
......
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