merchant-web/src/views/modules/brand/config/index.vue

<template>
  <div style="height: calc(100vh - 200px)">
    <div class="brandPage">
      <span class="pattern"></span>
      品牌管理
    </div>
    <div class="brandInfo">
      <span class="pattern"></span>
      品牌信息
      <span @click="infoUpdate" class="brandInfo-update">编辑</span>
    </div>
    <div class="info-content">
      <div class="info-item">品牌名称：{{ list.name }}</div>
      <div class="info-item">品牌ID: {{ list.id }}</div>
      <div class="info-item" style="display: flex">
        <div>品牌LOGO:</div>
        <div v-if="list.logo" style="margin-left: 20px">
          <el-image
            style="width: 100px; height: 100px"
            :src="list.logo"
            :preview-src-list="[list.logo]"
          >
          </el-image>
        </div>
      </div>
      <div class="info-item" style="display: flex">
        <div>品牌背景:</div>
        <div v-if="list.background" style="margin-left: 20px">
          <el-image
            style="width: 100px; height: 100px"
            :src="list.background"
            :preview-src-list="[list.background]"
          >
          </el-image>
        </div>
      </div>
      <div class="info-item">
        品牌首页: {{ list.homepageStatus == 1 ? "启用" : "禁用" }}
      </div>
      <div class="info-item">宣传语: {{ list.tagline }}</div>
      <div class="info-item" style="display: flex">
        <div>宣传视频:</div>
        <div v-if="list.video" style="margin-left: 20px">
          <video
            id="videoPlayer"
            width="200px"
            height="100px"
            object-fit="fill"
            muted="muted"
            loop
            controls
          >
            <source :src="list.video" type="video/mp4" />
          </video>
        </div>
      </div>
    </div>
    <div class="brandInfo">
      <span class="pattern"></span>
      账号信息
    </div>
    <div class="info-content">
      <div class="info-item">
        管理员账号：{{ list.administrator?.substr(0, 3) }}****{{
          list.administrator?.substr(7)
        }}
        <span @click="passwordUpdate(true)" class="brandInfo-update">修改</span>
      </div>
      <div class="info-item">
        管理员密码: ******
        <span @click="passwordUpdate(false)" class="brandInfo-update"
          >修改</span
        >
      </div>
    </div>
    <div class="brandInfo">
      <span class="pattern"></span>
      其他信息
    </div>
    <div class="info-content">
      <div class="info-item">品牌联系人：{{ list.contact }}</div>
      <div class="info-item">联系方式: {{ list.contactPhone }}</div>
    </div>
    <div class="brandInfo">
      <span class="pattern"></span>
      推广营销工具
    </div>
    <div class="info-content">
      <div class="info-item">
        品牌分销推广:
        <span @click="getConfig" class="brandInfo-update">配置</span>
      </div>
    </div>
    <!-- 编辑品牌信息 -->
    <addOrUpdate @getList="getList" ref="addOrUpdate"></addOrUpdate>
    <!-- 修改密码 -->
    <changePassword ref="changePassword"></changePassword>
    <!-- 配置 -->
    <toConfigure @getList="getList" ref="toConfigure"></toConfigure>
  </div>
</template>
<script>
import toConfigure from "./popup/to-configure.vue";
import changePassword from "./popup/change-password.vue";
import addOrUpdate from "./popup/add-or-update.vue";
export default {
  components: { addOrUpdate, changePassword, toConfigure },
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$api.mer_admin.getBrandInfo().then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    infoUpdate() {
      this.$nextTick(() => {
        this.$refs.addOrUpdate.toggle().update(this.list);
      });
      console.log("123");
    },
    passwordUpdate(state) {
      this.$refs.changePassword.init(state);
    },
    getConfig() {
      this.$nextTick(() => {
        this.$refs.toConfigure.init(this.list);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.brandPage {
  width: 100%;
  font-size: 18px;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 2px solid rgba(28, 146, 152, 1);
}
.pattern {
  display: inline-block;
  width: 2px;
  height: 15px;
  background: rgba(28, 146, 152, 1);
}
.brandInfo {
  //   margin-top: 20px;
  font-size: 18px;
}
.brandInfo-update {
  display: inline-block;
  font-size: 15px;
  color: rgba(28, 146, 152, 1);
  margin-left: 10px;
}
.info-content {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 10px;
  .info-item {
    width: 40%;
    margin-bottom: 20px;
    font-size: 18px;
  }
}
</style>