|
@@ -0,0 +1,256 @@
|
|
|
|
+<template>
|
|
|
|
+ <div id="dockDetail">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="24" class="style">
|
|
|
|
+ <el-col :span="24" class="info">
|
|
|
|
+ <div class="w_1200">
|
|
|
|
+ <el-col :span="24" class="main">
|
|
|
|
+ <el-col :span="6" class="btn">
|
|
|
|
+ <el-col :span="24">
|
|
|
|
+ <el-button type="primary" icon="el-icon-tickets" @click="btnInfo">项目信息</el-button>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="24" v-if="this.user.uid != productInfo.userid">
|
|
|
|
+ <el-button type="danger" icon="el-icon-phone-outline" @click="btnPhone">对接</el-button>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="24" v-if="this.user.uid != productInfo.userid">
|
|
|
|
+ <el-button type="success" icon="el-icon-check" @click="btnTrade">申请交易</el-button>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="18" class="mainInfo">
|
|
|
|
+ <el-col :span="24" v-if="display === '1'">
|
|
|
|
+ <p class="name textOver">{{ productInfo.name }}</p>
|
|
|
|
+ <div class="brief">
|
|
|
|
+ <p>
|
|
|
|
+ <span>应用领域:{{ productInfo.field }}</span>
|
|
|
|
+ <span>服务范围:{{ productInfo.scope }}</span>
|
|
|
|
+ </p>
|
|
|
|
+ <p>
|
|
|
|
+ <span>产品类型:{{ productInfo.product_type_name }}</span>
|
|
|
|
+ <span>研发阶段:{{ productInfo.phase == 1 ? '阶段成果' : '最终成果' }}</span>
|
|
|
|
+ </p>
|
|
|
|
+ <p>
|
|
|
|
+ <span>{{ productInfo.business == '0' ? '公用' : productInfo.business == '1' ? '转让' : '竞价' }}</span>
|
|
|
|
+ <span>交易价格:{{ productInfo.price }}/{{ productInfo.priceunit }}</span>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ <p class="intro">
|
|
|
|
+ <span><i class="el-icon-date"></i>项目简介</span>
|
|
|
|
+ <span>{{ productInfo.introduction }}</span>
|
|
|
|
+ </p>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="24" v-if="display === '2'" class="contact">
|
|
|
|
+ <!-- <p>
|
|
|
|
+ 联系人姓名:<span style="color:red;">{{ productInfo.contact_user }}</span>
|
|
|
|
+ </p>
|
|
|
|
+ <p>
|
|
|
|
+ 联系人电话:<span style="color:red;">{{ productInfo.contact_tel }}</span>
|
|
|
|
+ </p> -->
|
|
|
|
+ <chat :room="room"></chat>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
|
+import chat from '@/views/hall/dock/parts/chat.vue';
|
|
|
|
+const { mapActions: mapProduct } = createNamespacedHelpers('marketproduct');
|
|
|
|
+const { mapActions: personalRoom } = createNamespacedHelpers('personalroom');
|
|
|
|
+const { mapActions: transaction } = createNamespacedHelpers('transaction');
|
|
|
|
+export default {
|
|
|
|
+ name: 'dockDetail',
|
|
|
|
+ props: {},
|
|
|
|
+ components: { chat }, //
|
|
|
|
+ data: () => ({
|
|
|
|
+ display: '1',
|
|
|
|
+ productInfo: {},
|
|
|
|
+ room: {},
|
|
|
|
+ }),
|
|
|
|
+ created() {
|
|
|
|
+ if (this.$route.query.id) {
|
|
|
|
+ this.searchInfo();
|
|
|
|
+ }
|
|
|
|
+ this.test();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ ...mapProduct(['fetch']),
|
|
|
|
+ ...personalRoom(['create']),
|
|
|
|
+ ...transaction({ buyProduct: 'create' }),
|
|
|
|
+ async searchInfo() {
|
|
|
|
+ let res = await this.fetch(this.$route.query.id);
|
|
|
|
+ if (res.errcode === 0) {
|
|
|
|
+ this.$set(this, `productInfo`, res.data);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 项目信息
|
|
|
|
+ btnInfo() {
|
|
|
|
+ this.display = '1';
|
|
|
|
+ },
|
|
|
|
+ // 线下对接
|
|
|
|
+ async btnPhone() {
|
|
|
|
+ if (!this.room.id) {
|
|
|
|
+ //TODO 请求房间号
|
|
|
|
+ let obj = {};
|
|
|
|
+ if (!this.user.uid) {
|
|
|
|
+ this.$message.error('游客身份无法与卖家对话,请先注册');
|
|
|
|
+ return;
|
|
|
|
+ } else {
|
|
|
|
+ obj.buyer_id = this.user.uid;
|
|
|
|
+ obj.buyer_name = this.user.name;
|
|
|
|
+ }
|
|
|
|
+ if (!this.productInfo.userid) {
|
|
|
|
+ this.$message.error('缺少卖家信息,请联系卖家或管理员');
|
|
|
|
+ return;
|
|
|
|
+ } else {
|
|
|
|
+ obj.seller_id = this.productInfo.userid;
|
|
|
|
+ obj.seller_name = this.productInfo.contact_user;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ let res = await this.create(obj);
|
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
|
+ this.$set(this, `room`, res.data);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.display = '2';
|
|
|
|
+ },
|
|
|
|
+ async btnTrade() {
|
|
|
|
+ let form = {};
|
|
|
|
+ form.userid = this.user.uid;
|
|
|
|
+ form.username = this.user.name;
|
|
|
|
+ form.product_id = this.productInfo.id;
|
|
|
|
+ form.product_name = this.productInfo.name;
|
|
|
|
+ form.market_userid = this.productInfo.userid;
|
|
|
|
+ form.market_username = this.productInfo.contact_user;
|
|
|
|
+ form.status = '0';
|
|
|
|
+ let res = await this.buyProduct(form);
|
|
|
|
+ this.$checkRes(res, '购买申请成功', res.errmsg || '购买申请失败');
|
|
|
|
+ },
|
|
|
|
+ test() {
|
|
|
|
+ console.log(this.user.uid);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapState(['user']),
|
|
|
|
+ pageTitle() {
|
|
|
|
+ return `${this.$route.meta.title}`;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ metaInfo() {
|
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+.w_1200 {
|
|
|
|
+ width: 1200px;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+}
|
|
|
|
+p {
|
|
|
|
+ padding: 0;
|
|
|
|
+ margin: 0;
|
|
|
|
+}
|
|
|
|
+.style {
|
|
|
|
+ height: 100vh;
|
|
|
|
+}
|
|
|
|
+.style .info {
|
|
|
|
+ padding-top: 50px;
|
|
|
|
+}
|
|
|
|
+.style .top {
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ z-index: 999;
|
|
|
|
+ height: 230px;
|
|
|
|
+ margin: 0 0 20px 0;
|
|
|
|
+}
|
|
|
|
+.style .top p:first-child {
|
|
|
|
+ font-size: 50px;
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+.style .top p:last-child {
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 100%;
|
|
|
|
+ top: 170px;
|
|
|
|
+}
|
|
|
|
+.style .main {
|
|
|
|
+ height: 740px;
|
|
|
|
+ border: 1px solid red;
|
|
|
|
+ background: #fff;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ padding: 30px 20px;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+}
|
|
|
|
+.main .btn div {
|
|
|
|
+ padding: 30px 0 0px 0;
|
|
|
|
+}
|
|
|
|
+/deep/.main .btn .el-button {
|
|
|
|
+ float: left;
|
|
|
|
+ margin: 0 40px;
|
|
|
|
+ width: 70%;
|
|
|
|
+}
|
|
|
|
+.main .mainInfo {
|
|
|
|
+ border: 1px solid red;
|
|
|
|
+ height: 680px;
|
|
|
|
+}
|
|
|
|
+.mainInfo .name {
|
|
|
|
+ font-size: 25px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ height: 90px;
|
|
|
|
+ line-height: 90px;
|
|
|
|
+ border-bottom: 2px solid red;
|
|
|
|
+ margin: 0 60px;
|
|
|
|
+}
|
|
|
|
+.mainInfo .brief {
|
|
|
|
+ float: left;
|
|
|
|
+ padding: 0 88px 15px 88px;
|
|
|
|
+ color: red;
|
|
|
|
+ margin: 15px 20px 0 19px;
|
|
|
|
+ width: 75%;
|
|
|
|
+ border-bottom: 1px dashed red;
|
|
|
|
+}
|
|
|
|
+.mainInfo .brief p {
|
|
|
|
+ float: left;
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 0 0 15px 0;
|
|
|
|
+}
|
|
|
|
+.mainInfo .brief p span:first-child {
|
|
|
|
+ float: left;
|
|
|
|
+ width: 50%;
|
|
|
|
+}
|
|
|
|
+.mainInfo .intro {
|
|
|
|
+ float: left;
|
|
|
|
+ padding: 20px;
|
|
|
|
+ width: 95%;
|
|
|
|
+}
|
|
|
|
+.mainInfo .intro span:first-child {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ color: red;
|
|
|
|
+}
|
|
|
|
+.mainInfo .intro span:last-child {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ line-height: 25px;
|
|
|
|
+ color: #666;
|
|
|
|
+ text-indent: 2rem;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ -webkit-line-clamp: 13;
|
|
|
|
+ word-break: break-all;
|
|
|
|
+ display: -webkit-box;
|
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
|
+}
|
|
|
|
+.mainInfo .contact {
|
|
|
|
+ padding: 20px;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+}
|
|
|
|
+</style>
|