dvcp_v2_wxcp_app/src/project/saas/AppCooperationPropaganda/detail.vue

<template>
  <div class="detail">
    <div class="task">
      <div class="task_title">群发客户群</div>
      <div class="task_content">
        <div class="item">
          <span>任务名称</span>
          <span>{{ data.taskTitle }}</span>
        </div>
        <div class="item">
          <span>创建人</span>
          <span>{{ data.createUserId }}</span>
        </div>
        <div class="item">
          <span>所在部门</span>
          <span>{{ data.createUserDept }}</span>
        </div>
        <div class="item">
          <span>群发时间</span>
          <span>{{ data.choiceTime }}</span>
        </div>
      </div>
    </div>
    <div class="info">
      <div class="scope">
        <span>群发范围</span>
        <span>按条件筛选的全部{{ data.receiveGroupCount || 0}}个客户群</span>
      </div>
      <div class="content">
        <p>群发内容</p>
        <div>
          <div class="textarea" v-if="content.length">{{ content[0].content }}</div>
          <div class="pictures">
            <!-- <image v-for="(item, index) in picList" :key="index" :src="item."/> -->
          </div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
    <div class="btn">
      <div class="refuse" @click="refuseBtn">拒绝通过</div>
      <div class="pass" @click="passBtn">审核通过</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      data: {},
      content: [],
      picList: []
    }
  },
  onLoad(o) {
    this.id = o.id
  },
  methods: {
    getDetail() {
      this.$http.post(`/app/appmasssendingtask/queryDetailById?id=${this.id}`).then(res=> {
        if (res?.data) {
          this.data = res.data
          this.content = res.data.contents.map(v=> v.msgType == 0)
          this.picList = res.data.contents.map(e=> e.msgType == 1)
        }
      })
    },
    // 拒绝通过
    refuseBtn() {},
    // 审核通过
  },
  onShow() {
    document.title = "群发审批"
  }
}
</script>

<style lang="scss" scoped>
.detail {
  padding: 32px 32px 120px 32px;
  box-sizing: border-box;
  .task {
    margin-bottom: 24px;
    background: #FFF;
    border-radius: 8px;
    box-shadow: inset 0px -1px 0px 0px #DDDDDD;
    .task_title {
      padding: 26px 32px;
      box-sizing: border-box;
      border-bottom: 2px solid #DDDDDD;
    }
    .task_content {
      padding: 0 32px 26px 32px;
      box-sizing: border-box;
      .item {
        display: flex;
        padding-top: 26px;
        box-sizing: border-box;
        span:first-child {
          width: 160px;
          color: #999999;
        }
        span:last-child {
          width: calc(100% - 160px);
        }
      }
    }
  }

  .info {
    background: #FFF;
    border-radius: 8px;
    padding: 26px 32px;
    box-sizing: border-box;
    .scope {
      display: flex;
      margin-bottom: 16px;
      span:first-child {
        width: 160px;
        color: #999;
      }
      span:last-child {
        width: calc(100% - 160px);
      }
    }
    .content {
      p {
        color: #999;
        margin-bottom: 26px;
      }
      .textarea {
        background: #F9F9F9;
        border-radius: 4px;
        padding: 20px;
        box-sizing: border-box;
      }
    }
  }

  .btn {
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 112px;
    line-height: 112px;
    border: 1px solid #DDDDDD;
    font-size: 32px;
    .refuse {
      width: 40%;
      background: #FFF;
      color: #FF4466;
      text-align: center;
    }
    .pass {
      width: 60%;
      background: #3975C6;
      color: #FFF;
      text-align: center;
    }
  }
}
</style>