<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-29 09:14:54
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-17 09:35:51
|
* @Description: 模板列表页面
|
-->
|
<template>
|
<div class="template-list-box ">
|
<v-navbar title="模板管理" fixed></v-navbar>
|
<van-search
|
v-model="searchKey"
|
shape="round"
|
placeholder="请输入模板名称/规则"
|
@search="onSearch"
|
@clear="onCancel"
|
/>
|
<div class="item-group" v-if="list.length">
|
<div class="item flex-between-g" v-for="(item, index) in list" :key="index" @click="go(item.id)">
|
<div class="flex-start-g" >
|
<div class="icon-box flex-center-g" :style="{background:$store.state.backColor}">
|
<svg class="icon" aria-hidden="true" style="width:22px;height:22px;fill:#fff;">
|
<use xlink:href="#iconshanghuguanliliebiao"></use>
|
</svg>
|
</div>
|
<div>
|
<p class="name" >{{item.tempName}}</p>
|
<p class="tel">创建日期：{{item.creTime | timeformat('yyyy-MM-dd')}}</p>
|
</div>
|
</div>
|
<van-button class="btn" :color="$store.state.backColor" @click.stop="$router.push('/template/distribute?id='+item.id)">分配商户</van-button>
|
</div>
|
</div>
|
<v-button-circle icon='iconjia' @click="$router.push('/template/detail')" title='新增'></v-button-circle>
|
</div>
|
</template>
|
<script>
|
import hList from '../../components/common/h-list';
|
export default {
|
components:{
|
hList
|
},
|
data() {
|
return {
|
list:[],
|
finished:false,
|
loading:false,
|
searchKey:'',//模板名称
|
}
|
},
|
created(){
|
this.init()
|
},
|
methods: {
|
// 确认搜索
|
onSearch(){
|
this.$api.getTempList({
|
searchKey:this.searchKey
|
}).then(res=>{
|
this.list = res.body || [];
|
})
|
},
|
// 取消搜索
|
onCancel(){
|
this.$api.getTempList({
|
earchKey:this.searchKey
|
}).then(res=>{
|
this.list = res.body || []
|
})
|
},
|
saleOrderLoad(){
|
this.finished = true
|
},
|
init(){
|
this.$api.getTempList().then((res) => {
|
this.list = res.body || [];
|
}).catch((err) => {
|
|
});
|
},
|
// 跳转到模板详情页面
|
go(id){
|
this.$router.push(`/template/detail?tempId=${id}`)
|
}
|
},
|
|
}
|
</script>
|
<style lang="less" scoped>
|
.template-list-box {
|
padding-top: 55px;
|
background-color: @c-bg-f5;
|
}
|
|
.item-group {
|
background-color: @c-bg-fff;
|
//padding: 20px 0;
|
height: 80vh;
|
overflow: scroll;
|
}
|
.item-group::-webkit-scrollbar,.withdrawals-box::-webkit-scrollbar {
|
display: none;
|
}
|
.item {
|
margin: 0 8px 10px;
|
box-shadow: 0px 0px 5px 0px rgba(66, 61, 93, 0.08);
|
border-radius: 3px;
|
background: @c-bg-fff;
|
padding: 0 12px;
|
height: 67px;
|
|
.icon-box {
|
height: 32px;
|
width: 32px;
|
margin-right: 15px;
|
border-radius: 50%;
|
background: @c-bg-black;
|
}
|
|
.name {
|
font-weight: bold;
|
}
|
|
.tel {
|
font-size: @font-12;
|
color: @c-text-666;
|
margin-top: 5px;
|
}
|
|
.btn {
|
.lh(28px);
|
width: 100px;
|
padding: 0 12px;
|
background: @c-bg-default;
|
border-radius: 13px;
|
color: @c-text-fff;
|
font-size: @font-14;
|
}
|
}
|
</style>
|
