|
|
@@ -1,277 +1,260 @@
|
|
|
<template>
|
|
|
- <view class="Answering">
|
|
|
- <view
|
|
|
- v-for="(item, index) in answerList"
|
|
|
- :key="index"
|
|
|
- style="background-color: #ffffff"
|
|
|
- class="answer_item"
|
|
|
- >
|
|
|
- <view class="chat_box" @click.stop="clearCtx">
|
|
|
- <view style="display: flex; flex: 1">
|
|
|
- <view
|
|
|
- ><image
|
|
|
- :src="
|
|
|
+ <view class="Answering">
|
|
|
+ <view v-for="(item, index) in answerList" :key="index" style="background-color: #ffffff" class="answer_item">
|
|
|
+ <view class="chat_box" @click.stop="clearCtx">
|
|
|
+ <view style="display: flex; flex: 1">
|
|
|
+ <view>
|
|
|
+ <image :src="
|
|
|
item.assignUserId > 0 && !item.realname
|
|
|
? '/static/logo_xcx.png'
|
|
|
: $method.splitImgHost(item.avatar)
|
|
|
- "
|
|
|
- style="width: 64rpx; height: 64rpx"
|
|
|
- ></image
|
|
|
- ></view>
|
|
|
- <view style="margin-left: 15rpx">
|
|
|
- <view class="chat1">{{
|
|
|
+ " style="width: 64rpx; height: 64rpx"></image>
|
|
|
+ </view>
|
|
|
+ <view style="margin-left: 15rpx">
|
|
|
+ <view class="chat1">{{
|
|
|
item.assignUserId > 0 && !item.realname
|
|
|
? "祥粤老师"
|
|
|
: item.realname
|
|
|
}}</view>
|
|
|
- <view class="chat2">{{
|
|
|
+ <view class="chat2">{{
|
|
|
$method.timestampToTime(item.createTime, false)
|
|
|
}}</view>
|
|
|
- <view class="chat3">
|
|
|
- <text v-if="item.assignUserId > 0">回复</text>
|
|
|
- <text v-if="item.assignUserId > 0" style="color: #007aff"
|
|
|
- >@{{ item.assignRealname }}</text
|
|
|
- >
|
|
|
- <view style="word-break: break-all">{{ item.answerText }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="btnReply"
|
|
|
- @click.stop="replyContent(item)"
|
|
|
- v-if="item.userId != userId"
|
|
|
- >回复</view
|
|
|
- >
|
|
|
- <view v-else class="btnDel" @click.stop="delAnswer(item.answerId)"
|
|
|
- >删除</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- <u-line color="#D6D6DB" />
|
|
|
- </view>
|
|
|
- <view v-if="answerList.length == 0" style="text-align: center"
|
|
|
- >暂无记录</view
|
|
|
- >
|
|
|
- <view class="inputBottom" :style="{ bottom: bottomHeight + 'px' }">
|
|
|
- <view class="flex_auto">
|
|
|
- <input
|
|
|
- v-model="ctxValue"
|
|
|
- height="60"
|
|
|
- fixed="true"
|
|
|
- :focus="isFocus"
|
|
|
- :placeholder="placeholder"
|
|
|
- type="text"
|
|
|
- :custom-style="inputStyle"
|
|
|
- :adjust-position="false"
|
|
|
- class="input"
|
|
|
- @focus="focusNote"
|
|
|
- @blur="blur"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <view class="btn" @click="postContent">提交</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="chat3">
|
|
|
+ <text v-if="item.assignUserId > 0">回复</text>
|
|
|
+ <text v-if="item.assignUserId > 0" style="color: #007aff">@{{ item.assignRealname }}</text>
|
|
|
+ <view style="word-break: break-all">{{ item.answerText }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btnReply" @click.stop="replyContent(item)" v-if="item.userId != userId">回复</view>
|
|
|
+ <view v-else class="btnDel" @click.stop="delAnswer(item.answerId)">删除</view>
|
|
|
+ </view>
|
|
|
+ <u-line color="#D6D6DB" />
|
|
|
+ </view>
|
|
|
+ <view v-if="answerList.length == 0" style="text-align: center">暂无记录</view>
|
|
|
+ <view class="inputBottom" :style="{ bottom: bottomHeight + 'px' }">
|
|
|
+ <view class="flex_auto">
|
|
|
+ <input v-model="ctxValue" height="60" fixed="true" :focus="isFocus" :placeholder="placeholder"
|
|
|
+ type="text" :custom-style="inputStyle" :adjust-position="false" class="input" @focus="focusNote"
|
|
|
+ @blur="blur" />
|
|
|
+ </view>
|
|
|
+ <view class="btn" @click="postContent">提交</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- name: "SaasMiniprogramAnswerBox",
|
|
|
- props: {
|
|
|
- userId: {
|
|
|
- type: Number,
|
|
|
- defaule: 0,
|
|
|
- },
|
|
|
- },
|
|
|
- inject: ["paramsFn"],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- answerList: [],
|
|
|
- ctxValue: "",
|
|
|
- isFocus: false,
|
|
|
- placeholder: "您可以在这里输入答疑内容",
|
|
|
- inputStyle: {
|
|
|
- background: "rgba(244, 244, 244, 0.98)",
|
|
|
- borderRadius: "24rpx",
|
|
|
- padding: "8rpx",
|
|
|
- marginBottom: "10rpx",
|
|
|
- },
|
|
|
- bottomHeight: 0,
|
|
|
- assignUserId: 0,
|
|
|
- };
|
|
|
- },
|
|
|
+ export default {
|
|
|
+ name: "SaasMiniprogramAnswerBox",
|
|
|
+ props: {
|
|
|
+ userId: {
|
|
|
+ type: Number,
|
|
|
+ defaule: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ inject: ["paramsFn"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ answerList: [],
|
|
|
+ ctxValue: "",
|
|
|
+ isFocus: false,
|
|
|
+ placeholder: "您可以在这里输入答疑内容",
|
|
|
+ inputStyle: {
|
|
|
+ background: "rgba(244, 244, 244, 0.98)",
|
|
|
+ borderRadius: "24rpx",
|
|
|
+ padding: "8rpx",
|
|
|
+ marginBottom: "10rpx",
|
|
|
+ },
|
|
|
+ bottomHeight: 0,
|
|
|
+ assignUserId: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
|
|
|
- mounted() {
|
|
|
- this.getAnswerList();
|
|
|
- },
|
|
|
+ mounted() {
|
|
|
+ this.getAnswerList();
|
|
|
+ },
|
|
|
|
|
|
- methods: {
|
|
|
- postContent() {
|
|
|
- if (!this.ctxValue || this.ctxValue == "") {
|
|
|
- this.$u.toast("请输入内容");
|
|
|
- return;
|
|
|
- }
|
|
|
- this.postAnswer();
|
|
|
- },
|
|
|
- blur() {
|
|
|
- this.bottomHeight = 0;
|
|
|
- this.clearTimer = setTimeout(() => {
|
|
|
- this.ctxValue = "";
|
|
|
- this.isFocus = false;
|
|
|
- this.assignUserId = 0;
|
|
|
- this.placeholder = "您可以在这里输入答疑内容";
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
- focusNote(event) {
|
|
|
- this.bottomHeight = event.detail.height;
|
|
|
- },
|
|
|
- getAnswerList() {
|
|
|
- this.$api.answerList(this.params).then((res) => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- this.answerList = res.data.rows;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- postAnswer() {
|
|
|
- let self = this;
|
|
|
- let data = {
|
|
|
- answerText: this.ctxValue,
|
|
|
- ...this.params,
|
|
|
- };
|
|
|
- if (this.assignUserId > 0) {
|
|
|
- data.assignUserId = this.assignUserId;
|
|
|
- }
|
|
|
- this.$api.postAnswer(data).then((res) => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- this.$u.toast("发布成功");
|
|
|
- self.getAnswerList();
|
|
|
- this.isFocus = false;
|
|
|
- this.placeholder = "您可以在这里输入答疑内容";
|
|
|
- this.ctxValue = "";
|
|
|
- this.assignUserId = 0;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- delAnswer(answerId) {
|
|
|
- this.$api
|
|
|
- .delAnswer({
|
|
|
- answerId: answerId,
|
|
|
- status: -1,
|
|
|
- orderGoodsId: this.params.orderGoodsId,
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- this.getAnswerList();
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- clearCtx() {
|
|
|
- this.placeholder = "您可以在这里输入答疑内容";
|
|
|
- this.ctxValue = "";
|
|
|
- this.assignUserId = 0;
|
|
|
- },
|
|
|
- replyContent(item) {
|
|
|
- this.isFocus = true;
|
|
|
- this.assignUserId = item.userId;
|
|
|
- this.placeholder = "@" + item.realname;
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- params() {
|
|
|
- return this.paramsFn(["orderGoodsId", "goodsId", "courseId", "gradeId"]);
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ methods: {
|
|
|
+ postContent() {
|
|
|
+ if (!this.ctxValue || this.ctxValue == "") {
|
|
|
+ this.$u.toast("请输入内容");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.postAnswer();
|
|
|
+ },
|
|
|
+ blur() {
|
|
|
+ this.bottomHeight = 0;
|
|
|
+ this.clearTimer = setTimeout(() => {
|
|
|
+ this.ctxValue = "";
|
|
|
+ this.isFocus = false;
|
|
|
+ this.assignUserId = 0;
|
|
|
+ this.placeholder = "您可以在这里输入答疑内容";
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+ focusNote(event) {
|
|
|
+ this.bottomHeight = event.detail.height;
|
|
|
+ },
|
|
|
+ getAnswerList() {
|
|
|
+ this.$api.answerList(this.params).then((res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.answerList = res.data.rows;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ postAnswer() {
|
|
|
+ let self = this;
|
|
|
+ let data = {
|
|
|
+ answerText: this.ctxValue,
|
|
|
+ ...this.params,
|
|
|
+ };
|
|
|
+ if (this.assignUserId > 0) {
|
|
|
+ data.assignUserId = this.assignUserId;
|
|
|
+ }
|
|
|
+ this.$api.postAnswer(data).then((res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.$u.toast("发布成功");
|
|
|
+ self.getAnswerList();
|
|
|
+ this.isFocus = false;
|
|
|
+ this.placeholder = "您可以在这里输入答疑内容";
|
|
|
+ this.ctxValue = "";
|
|
|
+ this.assignUserId = 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ delAnswer(answerId) {
|
|
|
+ this.$api
|
|
|
+ .delAnswer({
|
|
|
+ answerId: answerId,
|
|
|
+ status: -1,
|
|
|
+ orderGoodsId: this.params.orderGoodsId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.getAnswerList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearCtx() {
|
|
|
+ this.placeholder = "您可以在这里输入答疑内容";
|
|
|
+ this.ctxValue = "";
|
|
|
+ this.assignUserId = 0;
|
|
|
+ },
|
|
|
+ replyContent(item) {
|
|
|
+ this.isFocus = true;
|
|
|
+ this.assignUserId = item.userId;
|
|
|
+ this.placeholder = "@" + item.realname;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ params() {
|
|
|
+ return this.paramsFn(["orderGoodsId", "goodsId", "courseId", "gradeId", "moduleId", "chapterId",
|
|
|
+ "sectionId"
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.Answering {
|
|
|
- .answer_item {
|
|
|
- &:nth-child(2) {
|
|
|
- border-radius: 16rpx 16rpx 0rpx 0rpx;
|
|
|
- }
|
|
|
- &:nth-last-child(1) {
|
|
|
- border-radius: 0rpx 0rpx 16rpx 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.chat_box {
|
|
|
- display: flex;
|
|
|
- padding: 20rpx;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-.chat3 {
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- margin-top: 10rpx;
|
|
|
-}
|
|
|
-.chat2 {
|
|
|
- font-size: 20rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- margin-top: 10rpx;
|
|
|
-}
|
|
|
-.chat1 {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
-}
|
|
|
-.btnReply {
|
|
|
- width: 80rpx;
|
|
|
- height: 40rpx;
|
|
|
- background: #e3f0ff;
|
|
|
- border-radius: 16rpx;
|
|
|
- text-align: center;
|
|
|
- color: #007aff;
|
|
|
-}
|
|
|
-.btnDel {
|
|
|
- width: 80rpx;
|
|
|
- height: 40rpx;
|
|
|
- background: #ffedf0;
|
|
|
- border-radius: 16rpx;
|
|
|
- text-align: center;
|
|
|
- color: #ff2d55;
|
|
|
-}
|
|
|
-.btnReply {
|
|
|
- width: 80rpx;
|
|
|
- height: 40rpx;
|
|
|
- background: #e3f0ff;
|
|
|
- border-radius: 16rpx;
|
|
|
- font-size: 24rpx;
|
|
|
-}
|
|
|
-.inputBottom {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- background: #ffffff;
|
|
|
- height: 98rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
+ .Answering {
|
|
|
+ .answer_item {
|
|
|
+ &:nth-child(2) {
|
|
|
+ border-radius: 16rpx 16rpx 0rpx 0rpx;
|
|
|
+ }
|
|
|
|
|
|
- .flex_auto {
|
|
|
- flex: 1;
|
|
|
- margin-left: 10%;
|
|
|
- word-break: break-all;
|
|
|
- // .input {
|
|
|
- // height: 60rpx;
|
|
|
- // }
|
|
|
- }
|
|
|
+ &:nth-last-child(1) {
|
|
|
+ border-radius: 0rpx 0rpx 16rpx 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .btn {
|
|
|
- color: #007aff;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- width: 15%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .input {
|
|
|
- background: rgba(244, 244, 244, 0.98);
|
|
|
- height: 60rpx;
|
|
|
- border-radius: 24rpx;
|
|
|
- margin-top: 12rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+ .chat_box {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat3 {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat2 {
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat1 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnReply {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #e3f0ff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #007aff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnDel {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #ffedf0;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ff2d55;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnReply {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #e3f0ff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .inputBottom {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ height: 98rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .flex_auto {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 10%;
|
|
|
+ word-break: break-all;
|
|
|
+ // .input {
|
|
|
+ // height: 60rpx;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ color: #007aff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 15%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ background: rgba(244, 244, 244, 0.98);
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
En route