|
|
@@ -4,40 +4,44 @@
|
|
|
<el-col :span="24" class="main">
|
|
|
<el-col :span="24" class="right_one">
|
|
|
<p class="right_one_name">{{ customer.name }}</p>
|
|
|
- <p class="right_one_address">
|
|
|
- {{ address.name }},{{ address.phone }},{{ address.province }},{{ address.city }},{{ address.area }},{{ address.address }}
|
|
|
- </p>
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="right_two">
|
|
|
- <el-col :span="24" v-for="item in list" :key="item._id">
|
|
|
+ <div id="scrolldIV" class="scroll-div" ref="scrollContent">
|
|
|
+ <!-- <el-col :span="24" class="right_two"> -->
|
|
|
+ <el-col :span="24" v-for="item in chatRecordList" :key="item._id">
|
|
|
<el-col :span="24" class="right_time">{{ item.time }}</el-col>
|
|
|
- <el-col :span="24" class="right_left" v-if="item.speaker._id != user._id">
|
|
|
+ <el-col :span="24" class="right_left" v-if="item.speaker != user.shop._id">
|
|
|
<el-col :span="24">
|
|
|
<el-col :span="2" class="right_image">
|
|
|
- <el-image :src="item.speaker.icon[0].url" class="right_icon"> </el-image>
|
|
|
+ <el-avatar v-if="customer.icon && customer.icon.length != 0" :src="customer.icon[0].url" class="right_icon"></el-avatar>
|
|
|
+ <el-avatar v-else icon="el-icon-user-solid"></el-avatar>
|
|
|
</el-col>
|
|
|
<el-col :span="20" class="right_left_cont">
|
|
|
- <p class="test">{{ item.content }}</p>
|
|
|
+ <span class="test" v-if="item.msg_type == '0' && item.content.length < 50">{{ item.content }}</span>
|
|
|
+ <div class="test" v-if="item.msg_type == '0' && item.content.length > 50">{{ item.content }}</div>
|
|
|
+ <el-image v-else-if="item.msg_type == '1'" :src="item.content" :preview-src-list="srcList" style="width: 300px" mode="widthFix"> </el-image>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="right_right" v-else-if="item.speaker._id == user._id">
|
|
|
+ <el-col :span="24" class="right_right" v-else-if="item.speaker == user.shop._id">
|
|
|
<el-col :span="24">
|
|
|
<el-col :span="20" class="right_right_cont">
|
|
|
- <p class="test">{{ item.content }}</p>
|
|
|
+ <span class="test" v-if="item.msg_type == '0' && item.content.length < 50">{{ item.content }}</span>
|
|
|
+ <div class="test" v-if="item.msg_type == '0' && item.content.length > 50">{{ item.content }}</div>
|
|
|
+ <el-image v-if="item.msg_type == '1'" :src="item.content" :preview-src-list="srcList" style="width: 300px" mode="widthFix"> </el-image>
|
|
|
</el-col>
|
|
|
<el-col :span="2" class="right_image">
|
|
|
- <el-image :src="item.speaker.icon[0].url" class="right_icon"> </el-image>
|
|
|
+ <el-avatar v-if="shop.logo && shop.logo.length != 0" :src="shop.logo[0].url" class="right_icon"></el-avatar>
|
|
|
+ <el-avatar v-else icon="el-icon-user-solid"></el-avatar>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
- </el-col>
|
|
|
+ <!-- </el-col> -->
|
|
|
+ </div>
|
|
|
<el-col :span="24" class="right_thr">
|
|
|
<el-col :span="20" class="right_thr_1">
|
|
|
- <!-- <el-input v-model="message" :autosize="{ minRows: 5, maxRows: 7 }" maxlength="-1" placeholder="消息" type="textarea" size="small"></el-input> -->
|
|
|
<el-form ref="form" :model="form" label-width="80px">
|
|
|
- <el-input v-model="form.message" :autosize="{ minRows: 5, maxRows: 7 }" maxlength="-1" placeholder="消息" type="textarea" size="small"></el-input>
|
|
|
+ <el-input v-model="form.content" :autosize="{ minRows: 5, maxRows: 7 }" maxlength="-1" placeholder="消息" type="textarea" size="small"></el-input>
|
|
|
</el-form>
|
|
|
</el-col>
|
|
|
<el-col :span="4" class="right_thr_2">
|
|
|
@@ -57,17 +61,34 @@ import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
export default {
|
|
|
name: 'right-1',
|
|
|
props: {
|
|
|
- list: { type: Array },
|
|
|
- address: { type: Object },
|
|
|
+ chatRecordList: { type: Array },
|
|
|
customer: { type: Object },
|
|
|
+ shop: { type: Object },
|
|
|
form: { type: Object },
|
|
|
+ srcList: { type: Array },
|
|
|
},
|
|
|
components: {},
|
|
|
data: function () {
|
|
|
return {};
|
|
|
},
|
|
|
- created() {},
|
|
|
+ created() {
|
|
|
+ this.setBottom();
|
|
|
+ },
|
|
|
+
|
|
|
methods: {
|
|
|
+ // 滚送到底部
|
|
|
+ setBottom() {
|
|
|
+ const me = this;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ //一定要在this.$nextTick进行设置
|
|
|
+ me.$refs.scrollContent.scrollTop = 100000;
|
|
|
+ var container = this.$el.querySelector('scrolldIV');
|
|
|
+ // container.scrollTop = container.scrollHeight;
|
|
|
+ // console.log(container.scrollHeight);
|
|
|
+ });
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
toUp() {
|
|
|
this.$emit('toUp');
|
|
|
},
|
|
|
@@ -75,6 +96,9 @@ export default {
|
|
|
this.$emit('onSubmit', data);
|
|
|
},
|
|
|
},
|
|
|
+ updated: function () {
|
|
|
+ this.setBottom();
|
|
|
+ },
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
},
|
|
|
@@ -108,69 +132,80 @@ export default {
|
|
|
color: #666;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-.right_two {
|
|
|
+.scroll-div {
|
|
|
background: rgb(246, 246, 246);
|
|
|
- height: 62vh;
|
|
|
- overflow-y: auto;
|
|
|
- .right_icon {
|
|
|
- border-radius: 10px;
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
- .right_time {
|
|
|
- text-align: center;
|
|
|
- padding: 10px 0;
|
|
|
- color: #666;
|
|
|
+ height: 65vh;
|
|
|
+ width: 56vw;
|
|
|
+ overflow: auto;
|
|
|
+ margin: 0 15px;
|
|
|
+}
|
|
|
+// .right_two {
|
|
|
+// background: rgb(246, 246, 246);
|
|
|
+// height: 62vh;
|
|
|
+// overflow-y: auto;
|
|
|
+.right_icon {
|
|
|
+ border-radius: 10px;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+}
|
|
|
+.right_time {
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+.right_left {
|
|
|
+ text-align: left;
|
|
|
+ padding: 0 30px;
|
|
|
+
|
|
|
+ .right_image {
|
|
|
+ padding: 10px 15px;
|
|
|
}
|
|
|
- .right_left {
|
|
|
- text-align: left;
|
|
|
- padding: 0 30px;
|
|
|
|
|
|
- .right_image {
|
|
|
- padding: 10px 15px;
|
|
|
+ .right_left_cont {
|
|
|
+ padding: 20px 10px 10px 10px;
|
|
|
+ span {
|
|
|
+ margin: 20px 0 0 0;
|
|
|
}
|
|
|
-
|
|
|
- .right_left_cont {
|
|
|
- padding: 10px 10px;
|
|
|
- .test {
|
|
|
- border-radius: 8px;
|
|
|
- border: 1px #ccc solid;
|
|
|
- background: rgb(235, 249, 162);
|
|
|
- padding: 10px;
|
|
|
- }
|
|
|
+ .test {
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px #ccc solid;
|
|
|
+ background: rgb(235, 249, 162);
|
|
|
+ padding: 10px;
|
|
|
+ word-wrap: break-word;
|
|
|
}
|
|
|
}
|
|
|
- .right_right {
|
|
|
- text-align: right;
|
|
|
- padding: 0 30px;
|
|
|
- .right_image {
|
|
|
- padding: 10px 15px;
|
|
|
- }
|
|
|
- .right_time {
|
|
|
- padding: 10px 0;
|
|
|
- }
|
|
|
- .right_right_cont {
|
|
|
- margin: 0 0 0 8.3%;
|
|
|
- padding: 10px 10px;
|
|
|
- text-align: left;
|
|
|
- .test {
|
|
|
- border-radius: 8px;
|
|
|
- border: 1px #ccc solid;
|
|
|
- background: rgb(174, 254, 149);
|
|
|
- padding: 10px;
|
|
|
- }
|
|
|
+}
|
|
|
+.right_right {
|
|
|
+ padding: 0 30px;
|
|
|
+ .right_image {
|
|
|
+ padding: 10px 15px;
|
|
|
+ }
|
|
|
+ .right_time {
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ .right_right_cont {
|
|
|
+ margin: 0 0 0 8.3%;
|
|
|
+ padding: 20px 10px 10px 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ .test {
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px #ccc solid;
|
|
|
+ background: rgb(174, 254, 149);
|
|
|
+ padding: 10px;
|
|
|
+ word-break: break-all; // 强制内容换行
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+// }
|
|
|
.right_thr {
|
|
|
position: relative;
|
|
|
bottom: 0;
|
|
|
- padding: 3px 5px;
|
|
|
+ padding: 3px 10px 3px 13px;
|
|
|
.right_thr_2 {
|
|
|
padding: 20px;
|
|
|
.btn {
|
|
|
- margin: 20px 0 0 0;
|
|
|
+ margin: 15px 0 0 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
