|
|
@@ -0,0 +1,355 @@
|
|
|
+<template>
|
|
|
+<div style="overflow:auto">
|
|
|
+ <Toptitle title="项目设置">
|
|
|
+ </Toptitle>
|
|
|
+ <div style="padding: 10px" class="setting" >
|
|
|
+ <Card :padding="0" v-for="(item,index) in content" :key="index">
|
|
|
+ <Input slot="title" v-if="item.title_type" @on-blur="change_title(item,1)" v-model="item.title" autofocus='true' style="width:90%"></Input>
|
|
|
+ <p slot="title" v-else @click="change_title(item)">{{item.title}}</p>
|
|
|
+ <a @click="upload(item)" class="upload_pic">保存</a>
|
|
|
+
|
|
|
+ <div class="card_content">
|
|
|
+ <div :title="_item.title" v-for="(_item,_index) in item.content" :key="_index" >
|
|
|
+ <!-- 开关 -->
|
|
|
+
|
|
|
+ <div v-if="_item.sub_state == 2">
|
|
|
+ <label>{{_item.title}}</label> <i-switch :value="_item.value==1?true:false" slot="extra" @on-change="change($event,_index,item)" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 输入框 -->
|
|
|
+ <!-- <div v-for="(_item,_index) in item.content" :key="_index" style="position: relative;top:-40px;display:flex;margin-top:20px"> -->
|
|
|
+ <div style="position: relative;top:-40px;display:flex;margin-top:20px" v-if="_item.sub_state == 1">
|
|
|
+ <label style="width:80px;margin-right:60px">{{_item.title}}:</label> <Input v-model="_item.value" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 图片 -->
|
|
|
+ <div class="product-add" v-if="_item.sub_state == 3">
|
|
|
+ <div
|
|
|
+ class="items"
|
|
|
+ v-if="_item.value"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ @click="looks(_item.value)"
|
|
|
+ :src="$store.state.ip + _item.value"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <Icon
|
|
|
+ size="20"
|
|
|
+ @click="delItems(_item)"
|
|
|
+ class="delete-img"
|
|
|
+ type="ios-close-circle"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="add-items" v-show="!_item.value">
|
|
|
+ <div class="_item">
|
|
|
+ <Icon size="50" type="ios-add" />
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ @change="changeIpt($event,_index,index)"
|
|
|
+ type="file"
|
|
|
+ class="ipt"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Tooltip max-width="200" :content="item.remark"
|
|
|
+ style="min-width:200px;position:absolute;right:-168px;top:169px;cursor: pointer">
|
|
|
+ <Icon type="md-help-circle" size="24" />
|
|
|
+ </Tooltip>
|
|
|
+ </Card>
|
|
|
+ <!-- <Card :padding="0" v-for="(item,index) in switch_list" :key="index">
|
|
|
+
|
|
|
+ <Input slot="title" v-if="item.title_type" @on-blur="change_title(item,1)" v-model="item.title" autofocus='true' style="width:90%"></Input>
|
|
|
+ <p slot="title" v-else @click="change_title(item)">{{item.title}}</p>
|
|
|
+ <CellGroup>
|
|
|
+ <Cell :title="_item.title" v-for="(_item,_index) in item.content" :key="_index">
|
|
|
+ <i-switch v-model="_item.state" slot="extra" @on-change="change($event,_index,item)" />
|
|
|
+ </Cell>
|
|
|
+ </CellGroup>
|
|
|
+ <Tooltip max-width="200" :content="item.remark"
|
|
|
+ style="min-width:200px;position:absolute;right:-168px;top:169px;cursor: pointer">
|
|
|
+ <Icon type="md-help-circle" size="24" />
|
|
|
+ </Tooltip>
|
|
|
+ </Card>
|
|
|
+ <Card :title="item.title" :padding="0" v-for="(item,index) in logo_list" :key="index" >
|
|
|
+ <Input slot="title" v-if="item.title_type" @on-blur="change_title(item,1)" v-model="item.title" autofocus='true' style="width:80%"></Input>
|
|
|
+ <p slot="title" v-else @click="change_title(item)">{{item.title}}</p>
|
|
|
+ <a @click="upload(item)" class="upload_pic">上传</a>
|
|
|
+ <div class="product-add">
|
|
|
+ <div
|
|
|
+ class="items"
|
|
|
+ v-if="item.content"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ @click="looks(item.content)"
|
|
|
+ :src="$store.state.ip + item.content"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <Icon
|
|
|
+ size="20"
|
|
|
+ @click="delItems(item)"
|
|
|
+ class="delete-img"
|
|
|
+ type="ios-close-circle"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="add-items" v-show="!item.content">
|
|
|
+ <div class="_item">
|
|
|
+ <Icon size="50" type="ios-add" />
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ @change="changeIpt($event,index)"
|
|
|
+ type="file"
|
|
|
+ class="ipt"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Tooltip max-width="200" :content="item.remark"
|
|
|
+ style="min-width:200px;position:absolute;right:-168px;top:169px;cursor: pointer">
|
|
|
+ <Icon type="md-help-circle" size="24" />
|
|
|
+ </Tooltip>
|
|
|
+ </Card>
|
|
|
+ <Card v-for="(item,index) in text_list" :key="index" :title="item.title" style="width:520px">
|
|
|
+ <Input slot="title" v-if="item.title_type" @on-blur="change_title(item,1)" v-model="item.title" autofocus='true' style="width:80%"></Input>
|
|
|
+ <p slot="title" v-else @click="change_title(item)">{{item.title}}</p>
|
|
|
+ <a @click="upload(item)" class="upload_text">保存</a>
|
|
|
+
|
|
|
+ <div v-for="(_item,_index) in item.content" :key="_index" style="position: relative;top:-40px;display:flex;margin-top:20px">
|
|
|
+ <label style="width:80px;margin-right:60px">{{_item.title}}:</label> <Input v-model="_item.value" />
|
|
|
+ </div>
|
|
|
+ <Tooltip max-width="200" :content="item.remark"
|
|
|
+ style="min-width:200px;position:absolute;right:-168px;top:169px;cursor: pointer">
|
|
|
+ <Icon type="md-help-circle" size="24" />
|
|
|
+ </Tooltip>
|
|
|
+ </Card> -->
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ switchValue: true,
|
|
|
+ switch1:true,
|
|
|
+ tempItem:{
|
|
|
+ url:[],
|
|
|
+ },
|
|
|
+ logo_title:'',
|
|
|
+ content:[],
|
|
|
+ logo_title:{},
|
|
|
+ tempItem_op:{},
|
|
|
+ logo_remark:'',
|
|
|
+ switch_list:[],
|
|
|
+ logo_list:[],
|
|
|
+ text_list:[],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.axios.get('/api/basics_config_list').then(res=>{
|
|
|
+ this.content = res.data;
|
|
|
+
|
|
|
+ this.content.forEach(item =>{//sub_type 1 文本 2 开关 3 图片
|
|
|
+ item.title_type = false;
|
|
|
+ if(item.sub_type == 2){
|
|
|
+ this.switch_list.push(item);
|
|
|
+ this.switch_list.forEach(item=>{
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(item.sub_type == 3){
|
|
|
+ this.logo_list.push(item);
|
|
|
+ this.logo_title = item.title
|
|
|
+ this.logo_remark = item.remark
|
|
|
+ this.tempItem_op = item
|
|
|
+ this.tempItem.url = item.content.split(',')
|
|
|
+ this.logo_list.forEach(item=>{
|
|
|
+ // item.title_type = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(item.sub_type == 1){
|
|
|
+ this.text_list.push(item);
|
|
|
+ this.text_list.forEach(item=>{
|
|
|
+ // item.title_type = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ change_title(item,type){
|
|
|
+ item.title_type = !item.title_type;
|
|
|
+ this.$forceUpdate();
|
|
|
+ if(type){
|
|
|
+ this.upload(item)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ change(e,index,item){
|
|
|
+ this.axios.post('/api/basics_config_edit',item).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ upload(item){
|
|
|
+ this.axios.post('/api/basics_config_edit',item).then(res=>{
|
|
|
+ if(res.code == 200){
|
|
|
+ this.$Message.success(res.msg)
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ looks(img) {
|
|
|
+ const array = [{ img_url: img }];
|
|
|
+ this.$previewImg({
|
|
|
+ list: array,
|
|
|
+ baseUrl: this.$store.state.ip,
|
|
|
+ baseImgField: "img_url",
|
|
|
+ baseTitleField: "",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ delItems(item) {
|
|
|
+ item.value = null;
|
|
|
+ },
|
|
|
+ changeIpt(e,_index,index) {
|
|
|
+ let file = e.target.files[0];
|
|
|
+
|
|
|
+ this.postImg(file,_index,index);
|
|
|
+ // e.target.value = null;
|
|
|
+ },
|
|
|
+ postImg(file, _index,index) {
|
|
|
+ console.log(this.content)
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append("file", file);
|
|
|
+ this.axios.post("/api/upload_pic", formData).then((res) => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.content[index].content[_index].value= res.data.url;
|
|
|
+
|
|
|
+
|
|
|
+ // this.$forceUpdate();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped lang='scss'>
|
|
|
+.setting{
|
|
|
+ margin-top:10px ;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.product-add {
|
|
|
+// position: relative;
|
|
|
+// top: 0
|
|
|
+// height: 140px;
|
|
|
+ .ipt {
|
|
|
+ // position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ outline: none;
|
|
|
+ // top: 0;
|
|
|
+ // left: 0;
|
|
|
+ }
|
|
|
+ .add-items {
|
|
|
+ // position: relative;
|
|
|
+ // left: 50%;
|
|
|
+ // top:40% ;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border: 1px dotted #e7e7e7;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #f4f5f7;
|
|
|
+ .item {
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ background: #3764ff;
|
|
|
+ opacity: 0.6;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .items {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ // margin-bottom: 10px;
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
+ // margin-right: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ // position: relative;
|
|
|
+ // left:50%;
|
|
|
+ // top: 40%;
|
|
|
+ // transform: translate(-50%,-50%);
|
|
|
+ img {
|
|
|
+ max-width: 100px;
|
|
|
+ max-height: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .ivu-card{
|
|
|
+ background: #f8f8f9;
|
|
|
+ width: 400px;
|
|
|
+ height: 300px;
|
|
|
+ margin: 10px;
|
|
|
+ border-radius: 20px;
|
|
|
+ position: relative;
|
|
|
+ .ivu-card:hover{
|
|
|
+ box-shadow: darkgrey 2px 2px 2px 2px ;//边框阴影
|
|
|
+ }
|
|
|
+}
|
|
|
+ /deep/ .ivu-card-head{
|
|
|
+ border-bottom: none;
|
|
|
+ height: 60px;
|
|
|
+ p{
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+/deep/ .ivu-card-body{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 200px;
|
|
|
+}
|
|
|
+.delete-img{
|
|
|
+ position: relative;
|
|
|
+ top:-35px
|
|
|
+}
|
|
|
+.upload_pic{
|
|
|
+ position: relative;
|
|
|
+ top: -44px;
|
|
|
+ right: -200px;
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+.upload_text{
|
|
|
+ position: relative;
|
|
|
+ top: -60px;
|
|
|
+ right: -444px;
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+.card_content{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+/deep/ .ivu-cell-group{
|
|
|
+ position: relative;
|
|
|
+ top: -10px;
|
|
|
+}
|
|
|
+</style>
|
