页面修改

src/components/sallCenter/plugin/shopinfo.vue

+<style>
+  .Useravatar-icon {
+    background: #E3E3E3;
+    border: 2px solid #fff;
+    width: 80px;
+    height: 80px;
+    border-radius: 9999px;
+    display: inline-block;
+  }
+
+</style>
+<template>
+  <div :class="{'active':shopinfoData.isCked}">
+    <div class="diy-component-options" v-if="shopinfoData.isCked">
+      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
+      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
+      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
+        style="right: -25px; top: 0;"></el-button>
+      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
+        style="right: -25px; top: 30px;"></el-button>
+    </div>
+    <div class="diy-component-preview">
+      <div class="user-info-container" flex="cross:center" style=" background-color: rgba(255,255,255,1);background-size: cover;background-position: center;padding: 50px;
+       height:156px;box-shadow:0px 6px 12px 0px rgba(76,76,76,0.14);border-radius:20px;" :style="'background-image: url('+getIconLink(data.backgroundPicUrl)+');'">
+        <div style="width: 100%;display:none" :style="cOutBoxStyle">
+          <div style="width: 100%;" >
+            <div :style="cAvatarBoxStyle">
+              <div class="Useravatar-icon"></div>
+            </div>
+            <div style="color: #fff;" :style="cNameBoxStyle">{{data.headName}}</div><br />
+            <div style="color: #fff;" :style="cNameBoxStyle">{{data.headInfo}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="diy-component-edit" v-if="shopinfoData.isCked">
+      <el-form label-width="100px" @submit.native.prevent>
+        <el-form-item label="昵称" style="display:none">
+          <el-input type="text" v-model="data.headName" size="small" style="margin-right: 25px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="介绍" style="display:none">
+          <el-input type="text" v-model="data.headInfo" size="small" style="margin-right: 25px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="背景图片" >
+          <div class="zk_pic_box" @click="choicImg=true" flex="main:center cross:center"
+            :style="{backgroundImage:'url(' + getIconLink(data.backgroundPicUrl) + ')'}">
+            <i v-if="data.backgroundPicUrl==''" class="el-icon-picture-outline"></i>
+            <el-button type="danger" v-if="data.backgroundPicUrl!=''" class="image-delete" size="mini"
+              icon="el-icon-close" @click.stop="data.backgroundPicUrl=''" circle></el-button>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="背景颜色" style="display:none">
+          <el-color-picker v-model="data.backgroundColor"></el-color-picker>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 选择图片文件 -->
+    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
+      <ChooseImg @SelectId="SelectId"></ChooseImg>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  export default {
+    props: ["shopinfoData", "index", "dataLeng"],
+    components: {
+      ChooseImg
+    },
+    data() {
+      return {
+        choicImg: false,
+        data: this.shopinfoData.data,
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      //向父组件传值 并调用排序
+      resetSord(IsUp) {
+        this.$emit('getSord', this.index, IsUp);
+      },
+      //点击触发父组件删除
+      delPlugin() {
+        this.$emit('comDelPlugin', this.index);
+      },
+      //选择图片
+      SelectId(msg) {
+        this.data.backgroundPicUrl = this.getIconLink(msg.url);
+        this.choicImg = false;
+      },
+    },
+    computed: {
+      cFlexDir() {
+        let style = '';
+        if (this.data.style === 1) {
+          style += 'dir:left box:first cross:center';
+        }
+        if (this.data.style === 2) {
+          style += 'dir:top main:center';
+        }
+        if (this.data.style === 3) {
+          style += 'dir:left box:first cross:center';
+        }
+        return style;
+      },
+      cOutBoxStyle() {
+        let style = '';
+        if (this.data.style === 3) {
+          style += `padding: 30px 20px;border-radius: 10px; background-color: ${this.data.backgroundColor};`;
+        }
+        return style;
+      },
+      cAvatarBoxStyle() {
+        let style = '';
+        if (this.data.style === 1 || this.data.style === 3) {
+          style += 'padding: 0 20px;';
+        }
+        if (this.data.style === 2) {
+          style += 'text-align: center;';
+        }
+        return style;
+      },
+      cNameBoxStyle() {
+        let style = '';
+        if (this.data.style === 2) {
+          style += 'text-align: center;';
+        }
+        if (this.data.style === 3) {
+          style += 'color: #333333;';
+        }
+        return style;
+      },
+    },
+    mounted() {
+
+    }
+  };
+
+</script>