yubaitong-admin/src/view/business/apply-detail.vue

<template>
  <div class="page-box" v-loading="loading > 0">
    <Header :title="title"></Header>
    <div class="container">
      <div class="content">
        <div class="top">
          <div class="left">商家状态: {{ statusMap[info.status] }}</div>
          <div class="right">线上售货-{{ statusMap[info.status] }}</div>
        </div>
        <div class="title">
          店铺入驻信息
        </div>
        <div class="item">
          <div class="label">店铺名称：</div>
          <div class="value">{{ info.shopName }}</div>
        </div>
        <div class="item">
          <div class="label">商家主图：</div>
          <div class="value">
            <img :src="info.shopIcon" class="zhutu" alt="" />
          </div>
        </div>
        <div class="item">
          <div class="label">商家ID：</div>
          <div class="value">{{ info.id }}</div>
        </div>
        <div class="item">
          <div class="label">引荐人：</div>
          <div class="value">{{ info.bindingUid }}</div>
        </div>
        <div class="item">
          <div class="label">商家联系电话：</div>
          <div class="value">{{ info.shopPhone }}</div>
        </div>
        <div class="item">
          <div class="label">地址信息：</div>
          <div class="value">
            {{ (info.shopAddress || "") + (info.house || "") }}
          </div>
        </div>
        <div class="item">
          <div class="label">商家描述：</div>
          <div class="value">{{ info.describe }}</div>
        </div>
        <div class="item item2">
          <div class="label">商家营业执照：</div>
          <div class="value">
            <el-image
              class="img"
              v-for="(item, index) in info.license"
              :key="index"
              :src="item"
              fit="cover"
              :preview-src-list="info.license"
            >
            </el-image>
          </div>
        </div>
        <div class="item item2">
          <div class="label">商家图片：</div>
          <div class="value">
            <!-- <img
              class="img"
              v-for="(item, index) in info.shopPics"
              :src="item"
              alt=""
              :key="index"
            /> -->
            <el-image
              class="img"
              v-for="(item, index) in info.shopPics"
              :key="index"
              :src="item"
              fit="cover"
              :preview-src-list="info.shopPics"
            >
            </el-image>
          </div>
        </div>
        <div class="item item2" v-if="info.shopVideo">
          <div class="label">商家视频：</div>
          <div class="value">
            <video class="video" :src="info.shopVideo" controls></video>
          </div>
        </div>
        <div class="title" style="margin-top: 32px;">
          线上售货信息
        </div>
        <div class="item">
          <div class="label">主体类型:</div>
          <div class="value">{{ info.id }}</div>
        </div>
        <div class="item">
          <div class="label">身份证号：</div>
          <div class="value">{{ info.bindingUid }}</div>
        </div>
        <div class="item">
          <div class="label">个人姓名:</div>
          <div class="value">{{ info.shopPhone }}</div>
        </div>
        <div class="item">
          <div class="label">身份证有效期:</div>
          <div class="value">{{ info.shopPhone }}</div>
        </div>
        <div class="item item2">
          <div class="label">商家营业执照：</div>
          <div class="value">
            <el-image
              class="img"
              :src="1"
              fit="cover"
              style="width: 255px;height: 143px;margin-right: 48px;"
              :preview-src-list="[]"
            >
            </el-image>
            <el-image
              class="img"
              :src="1"
              fit="cover"
              style="width: 255px;height: 143px;"
              :preview-src-list="[]"
            >
            </el-image>
          </div>
        </div>
        <div class="item">
          <div class="label">收款账户名：</div>
          <div class="value">{{ info.id }}</div>
        </div>
        <div class="item">
          <div class="label">收款银行卡号:</div>
          <div class="value">{{ info.bindingUid }}</div>
        </div>
        <div class="item">
          <div class="label">收款银行:</div>
          <div class="value">{{ info.shopPhone }}</div>
        </div>
        <div class="item">
          <div class="label">所属行业:</div>
          <div class="value">{{ info.shopPhone }}</div>
        </div>
        <div class="item">
          <div class="label">结算费率:</div>
          <div class="value">{{ info.shopPhone }}</div>
        </div>
        <!-- <div class="item">
          <div class="label">审核状态：</div>
          <div class="value">{{ statusMap[info.status] }}</div>
        </div> -->
      </div>
    </div>
    <div class="btn-box" v-if="info.status === 1">
      <button class="cancel-btn" @click="handleReject">拒绝</button>
      <button class="confirm-btn" @click="handleResolve">审核通过</button>
    </div>
    <el-dialog
      title="确认驳回该订单吗？"
      width="450px"
      :visible.sync="rejectVisible"
    >
      <div class="reject-title"><span>*</span>请填写驳回理由</div>
      <div style="padding: 0 16px">
        <div class="remark-box">
          <textarea
            rows="8"
            class="remark"
            v-model="remark"
            placeholder="驳回理由"
          ></textarea>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click.native="reject()" class="cancel-btn">驳 回</el-button> -->
        <el-button @click.native="rejectVisible = false" class="cancel-btn btn"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click.native="handleReject"
          class="confirm-btn btn"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import Header from '../../components/common/header';
export default {
  components: {
    Header
  },
  name: 'balanceExamine',
  data() {
    return {
      title: {
        // 页面标题
        firstTitile: '商家管理',
        secondTitle: '商家申请详情'
      },
      roleMap: {
        0: '普通用户',
        1: 'VIP',
        2: '区级代理',
        3: '市级代理',
        4: '省级代理',
        5: '运营中心',
        6: '分公司'
      },
      statusMap: {
        1: '待审核',
        2: '审核通过',
        3: '审核拒绝'
      },
      loading: 0,
      info: {},
      rejectVisible: false,
      remark: ''
    };
  },

  mounted() {
    this.id = +this.$route.query.id;
    // 获取列表
    this.getInfo();
  },
  computed: {},
  methods: {
    // 获取列表
    getInfo() {
      this.loading++;
      this.httpGet(this.$root.businessApplyInfo, {
        id: this.id
      }).then(
        (res) => {
          this.loading--;
          this.info = res;
        },
        (res) => {
          this.loading--;
          this.$message.error(res);
        }
      );
    },
    handleResolve() {
      this.$confirm(
        `<p class='title'><i class='icon el-icon-question'></i>提醒</p><p class='text'>确定要通过该审核吗？</p>`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'cancel-btn',
          confirmButtonClass: 'confirm-btn',
          customClass: 'confirm-box',
          dangerouslyUseHTMLString: true,
          showClose: false,
          type: 'none'
        }
      ).then(() => {
        this.loading++;
        this.httpPut(this.$root.businessApplyResolve, {
          id: this.id
        }).then(
          (res) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.loading--;
            this.getInfo();
          },
          (res) => {
            this.loading--;
            this.$message.error(res);
          }
        );
      });
    },
    handleReject() {
      this.$confirm(
        `<p class='title'><i class='icon el-icon-question'></i>提醒</p><p class='text'>确定要驳回该审核吗？</p>`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'cancel-btn',
          confirmButtonClass: 'confirm-btn',
          customClass: 'confirm-box',
          dangerouslyUseHTMLString: true,
          showClose: false,
          type: 'none'
        }
      ).then(() => {
        this.loading++;
        this.httpPut(this.$root.businessApplyReject, {
          id: this.id
        }).then(
          (res) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.loading--;
            this.getInfo();
          },
          (res) => {
            this.loading--;
            this.$message.error(res);
          }
        );
      });
    }
    // rejectModal() {
    //   this.rejectVisible = true;
    // },
    // handleReject() {
    //   this.loading++;
    //   this.httpPut(this.$root.yyzxReject, {
    //     id: this.id,
    //     remark: this.remark
    //   }).then(
    //     (res) => {
    //       this.$message({
    //         message: '操作成功',
    //         type: 'success'
    //       });
    //       this.loading--;
    //       this.rejectVisible = false;
    //       this.getInfo();
    //     },
    //     (res) => {
    //       this.loading--;
    //       this.$message.error(res);
    //     }
    //   );
    // }
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '~assets/public.styl';
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';

.page-box {
  height: 100%;
  width: 100%;
  flex-y(flex-start, flex-start);
  overflow-y: hidden;
  background: bg-color;

  .container {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    flex-y(flex-start, flex-start);
    padding: 10px;

    // content 表格
    .content {
      flex: 1;
      width: 100%;
      font-size: 14px;
      background: white;
      box-sizing: border-box;
      padding: 20px;
      border-radius: 2px;
      padding-top: 0;

      .top{
        flex-x();
        height: 80px;
        .left{
          word(24px, #333);
          font-weight: bold;
        }
        .right{
          word(24px, #407AED);
          font-weight: bold;
        }
      }

      .title{
        height: 40px;
        padding: 0 30px;
        word(18px, #333);
        background: #F6F6F6;
        border-radius: 5px;
        flex-x(flex-start);
        font-weight: bold;
        margin-bottom: 20px;
      }

      .item {
        flex-x(flex-start);
        word(14px, #666);
        height: 45px;
        padding: 0 54px;

        &.item2{
          height: auto;
          padding: 10px 54px;
        }

        .label {
          width: 150px;
          line-height: 45px;
          align-self: flex-start;
        }

        .zhutu {
          width: 32px;
          height: 32px;
          border-radius: 4px;
        }

        .img {
          width: 112px;
          height: 112px;
          border-radius: 4px;
          margin-right: 15px;
        }
        .video{
          height: 450px;
        }
      }
    }
  }

  .btn-box {
    background: white;
    width: 100%;
    flex-x(center);
    // padding-bottom: 48px;
    padding: 24px 0;

    .cancel-btn {
      width: 96px;
      height: 40px;
      cancel-btn();
      // border-radius: 23px;
    }

    .confirm-btn {
      width: 96px;
      height: 40px;
      margin-left: 20px;
      confirm-btn();
    }
  }

  .reject-title {
    border-top: 1px solid #eee;
    padding: 12px 13px 0;
    word(14px, #666);

    span {
      color: #FD4545;
      display: inline-block;
      width: 15px;
    }
  }

  .remark-box {
    width: 100%;
    padding-left: 15px;
    box-sizing: border-box;
  }

  .remark {
    border: 1px solid #f1f1f1;
    width: 100%;
    margin: 12px 0;
    padding: 12px;
    box-sizing: border-box;
  }
}
</style>