|
|
@@ -0,0 +1,329 @@
|
|
|
+<template>
|
|
|
+ <div id="techolInfo">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-col :span="7" class="left" v-if="form.image != ''">
|
|
|
+ <el-carousel trigger="click" height="305px" :autoplay="false">
|
|
|
+ <el-carousel-item v-for="(item, index) in form.image" :key="index">
|
|
|
+ <el-image :src="item.url" style="width:99%;height:345px;border: 1px solid #ccc;"></el-image>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="7" v-else class="achieveImage">
|
|
|
+ <p>紧急程度</p>
|
|
|
+ <p><el-rate v-model="value" disabled :max="max" :texts="texts" :colors="colors"> </el-rate></p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="17" class="right">
|
|
|
+ <el-col :span="24" class="name textOver">
|
|
|
+ {{ form.name || '暂无' }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-col :span="4" class="otherInfo textOver">
|
|
|
+ 需求方
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20" class="otherInfo textOver">
|
|
|
+ {{ form.company }}
|
|
|
+ <el-link v-if="form.companyweb != null || ''" :href="form.companyweb" :underline="false" target="_blank">({{ form.companyweb }})</el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-col :span="8" class="otherInfo textOver">
|
|
|
+ 所属领域
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" class="otherInfo textOver">
|
|
|
+ {{ form.field || '暂无' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-col :span="8" class="otherInfo textOver">
|
|
|
+ 合作方式
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" class="otherInfo textOver">
|
|
|
+ {{ form.cooperation ? form.cooperation : '暂无' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-col :span="8" class="otherInfo textOver">
|
|
|
+ 紧急程度
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" class="otherInfo textOver"> {{ form.demand || '暂无' }} </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-col :span="8" class="otherInfo textOver">
|
|
|
+ 投资预算
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" class="otherInfo textOver"> {{ form.budget || '暂无' }} </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-col :span="8" class="otherInfo textOver">
|
|
|
+ 联系人
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" class="otherInfo textOver">
|
|
|
+ {{ form.contacts || '暂无' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-col :span="8" class="otherInfo textOver">
|
|
|
+ QQ/微信
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" class="otherInfo textOver">
|
|
|
+ {{ form.qqwx || '暂无' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-col :span="4" class="otherInfo textOver">
|
|
|
+ 联系电话
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20" class="otherInfo textOver">
|
|
|
+ {{ getphone(form.phone) || '暂无' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-col :span="4" class="otherInfo textOver">
|
|
|
+ 电子邮箱
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20" class="otherInfo textOver">
|
|
|
+ {{ form.email || '暂无' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="down">
|
|
|
+ <el-col :span="24" class="downInfo">
|
|
|
+ <el-col :span="4" class="tit">
|
|
|
+ <h2>需求说明</h2>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20" class="info">
|
|
|
+ {{ form.requirementdesc || '暂无' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="downInfo">
|
|
|
+ <el-col :span="4" class="tit">
|
|
|
+ <h2>预期目标</h2>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20" class="info">
|
|
|
+ {{ form.expect || '暂无' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="downInfo">
|
|
|
+ <el-col :span="4" class="tit">
|
|
|
+ <h2>需求现状</h2>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20" class="info">
|
|
|
+ {{ form.present || '暂无' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="downInfo">
|
|
|
+ <el-col :span="4" class="tit">
|
|
|
+ <h2>合作要求</h2>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20" class="info">
|
|
|
+ {{ form.condition || '暂无' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="anniu" v-if="showBtn">
|
|
|
+ <el-button type="primary" size="mini" @click="btnPhone()">交流洽谈</el-button>
|
|
|
+ <el-button type="success" size="mini" @click="onSubmit()">供求对接</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog title="对接" :visible.sync="dialogTableVisible" destroy-on-close>
|
|
|
+ <chat :room="room"></chat>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import chat from '@c/chat.vue';
|
|
|
+import _ from 'lodash';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: personRoom } = createNamespacedHelpers('personRoom');
|
|
|
+const { mapActions: transaction } = createNamespacedHelpers('transaction');
|
|
|
+export default {
|
|
|
+ name: 'techolInfo',
|
|
|
+ props: {
|
|
|
+ form: { type: Object },
|
|
|
+ showBtn: { type: Boolean, default: () => true },
|
|
|
+ },
|
|
|
+ components: { chat },
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ value: 2,
|
|
|
+ max: 3,
|
|
|
+ colors: ['#ff0000', '#ff0000', '#ff0000'],
|
|
|
+ texts: ['一般', '紧急', '长期'],
|
|
|
+ // 对接
|
|
|
+ dialogTableVisible: false,
|
|
|
+ room: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log(this.form);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...personRoom(['create']),
|
|
|
+ ...transaction({ getTran: 'query', createTran: 'create' }),
|
|
|
+ async btnPhone() {
|
|
|
+ if (!this.room.id) {
|
|
|
+ //TODO 请求房间号
|
|
|
+ let obj = {};
|
|
|
+ if (!_.get(this.user, 'id')) {
|
|
|
+ // this.$message.error('游客身份无法与卖家对话,请先注册');
|
|
|
+ this.$message({
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ message: '<strong><a href="http://broadcast.waityou24.cn/live/login" style="color:red;">游客身份无法与卖家对话,请先注册</a></strong>',
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ obj.p1_id = this.user.id;
|
|
|
+ obj.p1 = this.user.name;
|
|
|
+ }
|
|
|
+ if (!this.form.user_id) {
|
|
|
+ this.$message.error('缺少卖家信息,请联系卖家或管理员');
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ obj.p2_id = this.form.user_id;
|
|
|
+ obj.p2 = this.form.contacts;
|
|
|
+ }
|
|
|
+ let res = await this.create(obj);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `room`, res.data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.dialogTableVisible = true;
|
|
|
+ },
|
|
|
+ //供求对接
|
|
|
+ async onSubmit() {
|
|
|
+ const data = _.cloneDeep(this.form);
|
|
|
+ const obj = {
|
|
|
+ dock_id: this.dock_id,
|
|
|
+ supplier: _.get(data, 'user_id'),
|
|
|
+ s_name: _.get(data, 'contacts'),
|
|
|
+ s_phone: _.get(data, 'phone'),
|
|
|
+ product_id: _.get(data, 'id'),
|
|
|
+ product: _.get(data, 'name'),
|
|
|
+ demander: _.get(this.user, 'id'),
|
|
|
+ d_name: _.get(this.user, 'name'),
|
|
|
+ d_phone: _.get(this.user, 'phone'),
|
|
|
+ };
|
|
|
+ if (obj.demander === obj.supplier) {
|
|
|
+ this.$message.error('您不能对自己的成果进行对接!');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const list = await this.getTran({ product_id: obj.product_id, demander: obj.demander, dock_id: this.dock_id });
|
|
|
+ if (list.total > 0) {
|
|
|
+ this.$message.warning('您已申请供求对接,无需再次申请!');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const res = await this.createTran(obj);
|
|
|
+ this.$checkRes(res, '对接成功', res.errmsg || '对接失败');
|
|
|
+ },
|
|
|
+ // 隐藏手机号
|
|
|
+ getphone(value) {
|
|
|
+ if (value == undefined) {
|
|
|
+ return '暂无';
|
|
|
+ } else {
|
|
|
+ if (value.length === 11) {
|
|
|
+ let start = value.slice(0, 4);
|
|
|
+ let end = value.slice(-3);
|
|
|
+ return `${start}****${end}`;
|
|
|
+ } else {
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchdegre() {
|
|
|
+ if (this.form.degreeurgency == '一般') this.$set(this, `value`, 1);
|
|
|
+ else if (this.form.degreeurgency == '紧急') this.$set(this, `value`, 2);
|
|
|
+ else if (this.form.degreeurgency == '长期') this.$set(this, `value`, 3);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ dock_id() {
|
|
|
+ return this.$route.query.dock_id;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ form: {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {
|
|
|
+ this.searchdegre();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.main {
|
|
|
+ .top {
|
|
|
+ height: 315px;
|
|
|
+ overflow: hidden;
|
|
|
+ .right {
|
|
|
+ padding: 0 0 0 10px;
|
|
|
+ .name {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .otherInfo {
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down {
|
|
|
+ margin: 0 0 15px 0;
|
|
|
+ .downInfo {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ .tit {
|
|
|
+ height: 150px;
|
|
|
+ line-height: 150px;
|
|
|
+ text-align: center;
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 10px;
|
|
|
+ min-height: 150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .anniu {
|
|
|
+ text-align: center;
|
|
|
+ /deep/.el-button {
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .achieveImage {
|
|
|
+ height: 305px;
|
|
|
+ overflow: hidden;
|
|
|
+ p:nth-child(1) {
|
|
|
+ font-size: 25px;
|
|
|
+ text-align: left;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ p:nth-child(2) {
|
|
|
+ margin: 60px 0 0 0;
|
|
|
+ text-align: center;
|
|
|
+ .el-rate__icon {
|
|
|
+ font-size: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.el-rate__icon {
|
|
|
+ font-size: 60px;
|
|
|
+}
|
|
|
+</style>
|
