web-test/src/views/hall/liveApply.vue

<template>
  <div id="liveApply">
    <div class="w_0100">
      <div class="w_1200">
        <div class="liveApply">
          <el-col :span="24" class="liveApplyTop">
            <el-col :span="3">
              <el-image :src="logo" style="width:105px;height:105px;"></el-image>
            </el-col>
            <el-col :span="20">
              <p>温馨提示：</p>
              <p>1、为了保证您的信息能顺利通过我们的审核，请将信息的真实情况尽可能全面的发布出来！</p>
              <p>
                2、根据我们的长期跟踪统计，信息完整度越高，越容易获得目标客户的关注！3、信息完整度越高，将在我们的平台搜索结果排序靠前、获得推荐机会，以及享受增值服务试用机会！
              </p>
            </el-col>
          </el-col>
          <el-col :span="24" class="liveApplyInfo">
            <el-form ref="form" :model="form" label-width="120px">
              <el-form-item label="申请人身份">
                <el-radio-group v-model="form.buyer" @change="changeuser">
                  <el-radio label="0">买家</el-radio>
                  <el-radio label="1">卖家</el-radio>
                </el-radio-group>
              </el-form-item>
              <span v-if="this.resource == '1' || this.resource == ''">
                <el-form-item label="选择产品">
                  <el-select v-model="form.goodsList" multiple placeholder="请选择选择产品">
                    <el-option v-for="(item, index) in goodsLists" :key="index" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </el-form-item>
              </span>
              <el-form-item label="联系人">
                <el-input v-model="form.contact"></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="form.contact_tel"></el-input>
              </el-form-item>
              <el-form-item label="电子邮箱">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
              <el-form-item label="单位名称">
                <el-input v-model="form.company"></el-input>
              </el-form-item>
              <el-row style="text-align:center">
                <el-button type="primary" @click="onSubmit">立即申请</el-button>
                <el-button @click="restBtn">取消</el-button>
              </el-row>
            </el-form>
          </el-col>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: mapProduct } = createNamespacedHelpers('marketproduct');
const { mapActions: apply } = createNamespacedHelpers('apply');
import upload from '@/components/upload.vue';
export default {
  name: 'liveApply',
  props: {},
  components: {
    // upload,
  },
  data: () => ({
    form: {},
    logo: require('@/assets/live/d10_fbb1.png'),
    resource: '',
    goodsLists: [],
  }),
  created() {
    this.searchInfo();
  },
  methods: {
    ...mapProduct({ mapProductQuery: 'query', mapProductFetch: 'fetch' }),
    ...apply({ applyCreate: 'create' }),
    async onSubmit() {
      let duplicate = JSON.parse(JSON.stringify(this.form));
      let data = { ...duplicate };
      data.user_id = this.user.uid;
      if (data.user_id) {
        data.user_name = this.user.name;
        data.role = this.user.role;

        let dock_id = this.$route.query.id;
        data.goodsList = this.form.goodsList;
        // data.goodsList = [this.productInfo(this.form.goodsList)];
        const res = await this.applyCreate({ id: dock_id, ...data });
        if (res.errcode === 0) {
          this.$message({
            message: '申请参加对接会成功',
            type: 'success',
          });
          this.restBtn();
        }
      } else {
        // let res = 0;
        // this.$checkRes(res, '请登录', '请登录');
        this.$message({
          dangerouslyUseHTMLString: true,
          message: '<strong><a href="http://free.liaoningdoupo.com/platlive/newlogin" style="color:red;">游客身份无法与卖家对话,请先注册</a></strong>',
          type: 'error',
        });
      }
    },
    // 取消
    restBtn() {
      history.go(-1);
    },
    productInfo(id) {
      let index = this.goodsLists.find(item => item.id == id);
      return index;
    },
    async searchInfo() {
      let res = await this.mapProductQuery({ userid: this.user.uid });
      if (res.errcode === 0) {
        this.$set(this, `goodsLists`, res.data);
      }
    },
    changeuser(label) {
      this.$set(this, 'resource', label);
    },
    uploadSuccess({ type, data }) {
      this.$set(this.form, `${type}`, data.uri);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
@import '~@/style/style.css';
.liveApply {
  float: left;
  margin: 30px 0;
}
.liveApply .liveApplyTop {
  float: left;
  background: #f3faff;
  padding: 15px;
  border: 1px solid #ccc;
  margin: 0 0 15px 0;
}
.liveApplyTop p:first-child {
  font-size: 14px;
  font-weight: bold;
}
.liveApplyTop p:nth-child(2n) {
  font-size: 12px;
  padding: 15px 0;
}
.liveApplyTop p:last-child {
  font-size: 12px;
}
.liveApplyInfo {
  padding: 0 100px;
}

/deep/.el-input__inner {
  width: 1300px;
}
</style>