|
|
@@ -13,11 +13,12 @@
|
|
|
<view class="file-box">
|
|
|
<block v-for="item in detail.attinfos" :key="item.attachmentid">
|
|
|
<view v-if="item.fileType == 'image'" @click="viewImages(item.url)" class="item">
|
|
|
- <u-image :src="item.url" :width="tovw(105)" :height="tovw(105)" :lazy-load="true" radius="5"></u-image>
|
|
|
+ <u-image :src="item.url" :width="tovw(105)" :height="tovw(105)" :lazy-load="true"
|
|
|
+ radius="5"></u-image>
|
|
|
</view>
|
|
|
<view v-else-if="item.fileType == 'video'" class="item">
|
|
|
- <video class="video" :style="{width:tovw(105),height:tovw(105)}" :poster="item.subfiles[0].url"
|
|
|
- :src="item.url" />
|
|
|
+ <video class="video" :style="{ width: tovw(105), height: tovw(105) }" :poster="item.subfiles[0].url"
|
|
|
+ :src="item.url" />
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
@@ -25,25 +26,31 @@
|
|
|
<view class="message-box">
|
|
|
<view class="message-header">
|
|
|
<text>回复</text>
|
|
|
- <text>共{{ total }}条</text>
|
|
|
+ <text>共<text style="padding: 0 5px;">{{ total }}</text>条</text>
|
|
|
</view>
|
|
|
- <My_listbox ref="List" @getlist="getComment">
|
|
|
- <view class="content">
|
|
|
- <view class="message-item" v-for="item in list" :key="item.sys_datacommentid">
|
|
|
- <u-image :src="item.headpic ? item.headpic : 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404231713854678447B26b4363.svg'" :width="tovw(32)" :height="tovw(32)" :lazy-load="true" radius="50%"></u-image>
|
|
|
- <view class="user-info">
|
|
|
- <text class="name">{{ item.name }}</text>
|
|
|
- <view class="message-text">
|
|
|
- {{ item.content }}
|
|
|
- </view>
|
|
|
- <text class="time">{{ item.createdate }}</text>
|
|
|
+ <view class="content">
|
|
|
+ <view class="message-item" v-for="item in list" :key="item.sys_datacommentid">
|
|
|
+ <u-image
|
|
|
+ :src="item.headpic ? item.headpic : 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404231713854678447B26b4363.svg'"
|
|
|
+ :width="tovw(32)" :height="tovw(32)" :lazy-load="true" radius="50%"></u-image>
|
|
|
+ <view class="user-info">
|
|
|
+ <text class="name">{{ item.name }}</text>
|
|
|
+ <view class="message-text">
|
|
|
+ {{ item.content }}
|
|
|
</view>
|
|
|
+ <text class="time">{{ item.createdate }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </My_listbox>
|
|
|
+ <view v-if="!list.length" style="padding:50px 0 100px 0;">
|
|
|
+ <u-empty mode="data" text="暂无回复" />
|
|
|
+ </view>
|
|
|
+ <view v-else style="padding-bottom: 10px;">
|
|
|
+ <u-divider text="已经到底部" :dashed="true" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
-
|
|
|
- <view :style="{height:tovw(70)}"></view>
|
|
|
+ <view :style="{ height: tovw(75) }"></view>
|
|
|
+
|
|
|
<view class="footer">
|
|
|
<view class="input-box" hover-class="navigator-hover">
|
|
|
<input class="input" type="text" placeholder="评论" :value="commentText" maxlength="499"
|
|
|
@@ -51,37 +58,38 @@
|
|
|
<icon v-if="commentText" class="icon" type="clear" size="3.733vw" @click="onClear" />
|
|
|
</view>
|
|
|
<view class="add-box">
|
|
|
- <view class="add" hover-class="navigator-hover"
|
|
|
- @click="loading ? '' : onSend()">
|
|
|
+ <view class="add" hover-class="navigator-hover" @click="loading ? '' : onSend()">
|
|
|
<u-loading-icon v-if="loading" />
|
|
|
<block v-else>
|
|
|
发送
|
|
|
</block>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { formattedFiles,viewImage } from "../../utils/settleFiles.js"
|
|
|
+import { formattedFiles, viewImage } from "../../utils/settleFiles.js"
|
|
|
export default {
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
- detail:{attinfos:[]},
|
|
|
+ detail: { attinfos: [] },
|
|
|
"content": {
|
|
|
"sa_feedbackid": '',
|
|
|
"pageNumber": 1,
|
|
|
"pageSize": 20
|
|
|
},
|
|
|
- list:[],
|
|
|
- id:'',
|
|
|
- commentText:'',
|
|
|
- total:0,
|
|
|
- loading:false
|
|
|
+ list: [],
|
|
|
+ id: '',
|
|
|
+ commentText: '',
|
|
|
+ total: 0,
|
|
|
+ loading: false
|
|
|
}
|
|
|
},
|
|
|
+ onReachBottom() {
|
|
|
+ if (!this.loadingGetList) this.getComment();
|
|
|
+ },
|
|
|
methods: {
|
|
|
async getDetail(id) {
|
|
|
let res = await this.$Http.basic({
|
|
|
@@ -94,28 +102,28 @@ export default {
|
|
|
this.detail = res.data
|
|
|
console.log(this.detail, '反馈信息');
|
|
|
},
|
|
|
- async getComment (init = false) {
|
|
|
+ async getComment(init = false) {
|
|
|
return new Promise(async (resolve, reject) => {
|
|
|
if (this.paging(this.content, init)) return resolve();
|
|
|
- this.content.sa_feedbackid = this.id
|
|
|
+ this.content.sa_feedbackid = this.id
|
|
|
await this.$Http.basic({
|
|
|
"id": 20240517103002,
|
|
|
- content:this.content
|
|
|
+ content: this.content
|
|
|
}).then(res => {
|
|
|
- this.$refs.List.RefreshToComplete()
|
|
|
resolve();
|
|
|
if (this.cutoff(res.msg)) return;
|
|
|
this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
|
|
|
- this.content = this.$refs.List.paging(this.content, res)
|
|
|
+ this.content.pageNumber = res.pageNumber - 0 + 1;
|
|
|
+ this.content.pageTotal = res.pageTotal;
|
|
|
+ this.content.pageSize = res.pageSize;
|
|
|
this.total = res.total;
|
|
|
- this.$refs.List.setHeight()
|
|
|
- console.log('回复列表',this.list);
|
|
|
+ console.log('回复列表', this.list);
|
|
|
})
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
/* 预览图片 */
|
|
|
- viewImages (url) {
|
|
|
+ viewImages(url) {
|
|
|
viewImage(url)
|
|
|
},
|
|
|
changeComment(e) {
|
|
|
@@ -154,7 +162,7 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
},
|
|
|
- onLoad (options) {
|
|
|
+ onLoad(options) {
|
|
|
this.id = options.id
|
|
|
this.getDetail(options.id)
|
|
|
this.getComment(true)
|
|
|
@@ -166,6 +174,7 @@ export default {
|
|
|
.detail {
|
|
|
box-sizing: border-box;
|
|
|
font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+
|
|
|
.header-info {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -173,11 +182,13 @@ export default {
|
|
|
margin: 10px;
|
|
|
border-radius: 8px 8px 8px 8px;
|
|
|
background: #FFFFFF;
|
|
|
+
|
|
|
.title {
|
|
|
font-weight: bold;
|
|
|
font-size: 16px;
|
|
|
color: #333333;
|
|
|
}
|
|
|
+
|
|
|
.type {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -185,68 +196,80 @@ export default {
|
|
|
font-size: 12px;
|
|
|
color: #666666;
|
|
|
margin: 10px 0;
|
|
|
- text {
|
|
|
|
|
|
- }
|
|
|
+ text {}
|
|
|
}
|
|
|
+
|
|
|
.remarks {
|
|
|
font-weight: 400;
|
|
|
font-size: 12px;
|
|
|
color: #666666;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
+
|
|
|
.file-box {
|
|
|
display: block;
|
|
|
+
|
|
|
.item {
|
|
|
margin: 0 10px 10px 0;
|
|
|
display: inline-block;
|
|
|
+
|
|
|
&:nth-child(3n) {
|
|
|
margin-right: 0 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.message-box {
|
|
|
background: #FFFFFF;
|
|
|
padding: 12px 10px 0 10px;
|
|
|
+
|
|
|
.message-header {
|
|
|
display: flex;
|
|
|
- justify-content:space-between;
|
|
|
+ justify-content: space-between;
|
|
|
padding-bottom: 20px;
|
|
|
+
|
|
|
text {
|
|
|
color: #333333;
|
|
|
+
|
|
|
&:first-child {
|
|
|
font-weight: 500;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
+
|
|
|
&:last-child {
|
|
|
font-weight: 400;
|
|
|
font-size: 14px;
|
|
|
- letter-spacing: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.content {
|
|
|
.message-item {
|
|
|
margin-bottom: 20px;
|
|
|
display: flex;
|
|
|
align-self: self-start;
|
|
|
padding-bottom: 10px;
|
|
|
+
|
|
|
.user-info {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
margin-left: 10px;
|
|
|
+
|
|
|
.name {
|
|
|
font-weight: 500;
|
|
|
font-size: 14px;
|
|
|
color: #666666;
|
|
|
}
|
|
|
+
|
|
|
.message-text {
|
|
|
font-weight: 400;
|
|
|
font-size: 14px;
|
|
|
color: #333333;
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
+
|
|
|
.time {
|
|
|
font-weight: 400;
|
|
|
font-size: 12px;
|
|
|
@@ -256,6 +279,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.footer {
|
|
|
display: flex;
|
|
|
position: fixed;
|
|
|
@@ -265,9 +289,11 @@ export default {
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
|
|
|
padding: 10px 10px 15px 10px;
|
|
|
+
|
|
|
.add-box {
|
|
|
- padding:0 20px 0 20px;
|
|
|
+ padding: 0 20px 0 20px;
|
|
|
}
|
|
|
+
|
|
|
.add {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -281,10 +307,11 @@ export default {
|
|
|
font-size: 14px;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
+
|
|
|
.input-box {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- flex:1;
|
|
|
+ flex: 1;
|
|
|
height: 45px;
|
|
|
background: #F7F7F7;
|
|
|
border-radius: 50px;
|
|
|
@@ -304,5 +331,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
</style>
|
