|
|
@@ -0,0 +1,197 @@
|
|
|
+<!--
|
|
|
+ * @Author: liuzhenlin 461480418@qq.ocm
|
|
|
+ * @Date: 2023-01-12 11:57:48
|
|
|
+ * @LastEditors: liuzhenlin
|
|
|
+ * @LastEditTime: 2023-05-22 15:31:58
|
|
|
+ * @Description: file content
|
|
|
+ * @FilePath: \oms\pages\distributor\index.vue
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <view class="home">
|
|
|
+ <view class="nav">
|
|
|
+ <view :style="{ paddingTop }">
|
|
|
+ <view class="title" :style="[{ height }, { lineHeight: height }]">
|
|
|
+ <text>评论回复</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+ <view class="flex top-tips">
|
|
|
+ <u-text type="error" text="*请先回复完以下评论"></u-text>
|
|
|
+ <u-text type="primary" :text="'待回复信息' + replyIndex + '/' + commentList.length"></u-text>
|
|
|
+ </view>
|
|
|
+ <transition-group name="fade" tag="view">
|
|
|
+ <view class="comment-wrap" v-show="replyIndex - 1 == i" v-for="(v, i) in commentList" :key="i">
|
|
|
+ <view class="header flex">
|
|
|
+ <u-image
|
|
|
+ :src="require('../../static/images/user_avatar.png')"
|
|
|
+ width="40px"
|
|
|
+ height="40px"
|
|
|
+ shape="circle"></u-image>
|
|
|
+ <view class="name">{{ v.createdName }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-wrap">
|
|
|
+ <view class="content">
|
|
|
+ <u-text :text="v.content"></u-text>
|
|
|
+ </view>
|
|
|
+ <view class="flex">
|
|
|
+ <text>{{ parseTime(v.createdTime, '{y}-{m}-{d} {h}:{i}') }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="replyText">
|
|
|
+ <u-textarea v-model="replyContent" height="100" placeholder="回复内容:"></u-textarea>
|
|
|
+ <view style="float: right; margin: 20px 0 0">
|
|
|
+ <u-button :loading="loading" customStyle="width:60px" type="primary" @click="handleReply(v)">
|
|
|
+ 回复
|
|
|
+ </u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </transition-group>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import followApi from '@/api/follow/index'
|
|
|
+ import to from 'await-to-js'
|
|
|
+ export default {
|
|
|
+ name: 'omsIndex',
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ height: '',
|
|
|
+ paddingTop: '',
|
|
|
+ commentList: [],
|
|
|
+ replyIndex: 1,
|
|
|
+ replyContent: '',
|
|
|
+ loading: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const navData = uni.getMenuButtonBoundingClientRect()
|
|
|
+ this.height = navData.height + 'px'
|
|
|
+ this.paddingTop = navData.top + 'px'
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getCommentList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getCommentList() {
|
|
|
+ const [err, res] = await to(followApi.getNeedReplyComments())
|
|
|
+ if (err) return
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ this.commentList = res.data.list
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async handleReply(row) {
|
|
|
+ if (!this.replyContent) {
|
|
|
+ return this.$u.toast('请输入回复内容')
|
|
|
+ }
|
|
|
+ const params = {
|
|
|
+ followId: '' + row.followId,
|
|
|
+ content: this.replyContent,
|
|
|
+ pid: row.id,
|
|
|
+ }
|
|
|
+ this.loading = true
|
|
|
+ const [err, res] = await to(followApi.onReply(params))
|
|
|
+ this.loading = false
|
|
|
+ if (err) return
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ this.replyContent = ''
|
|
|
+ if (this.replyIndex < this.commentList.length) {
|
|
|
+ this.replyIndex++
|
|
|
+ return this.$u.toast('回复成功,请继续回复下一条')
|
|
|
+ }
|
|
|
+ this.$u.toast('已全部回复,即将返回首页')
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.switchTab({ url: '/pages/home/index' })
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ page {
|
|
|
+ background: #f2f3f5;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .home {
|
|
|
+ padding-top: 188rpx;
|
|
|
+ .nav {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 284rpx;
|
|
|
+ background: #3e7ef8;
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ .back {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ left: 70rpx;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 188rpx);
|
|
|
+ background: #f5f5f5;
|
|
|
+ box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
|
|
|
+ border-radius: 31rpx 31rpx 0 0;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ padding-bottom: 64rpx;
|
|
|
+ .top-tips {
|
|
|
+ padding: 10px 10px 20px;
|
|
|
+ }
|
|
|
+ .comment-wrap {
|
|
|
+ border: 1px solid #d7e8f4;
|
|
|
+ background: #f7fbfe;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ .header {
|
|
|
+ align-items: center;
|
|
|
+ .name {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-wrap {
|
|
|
+ padding-left: 50px;
|
|
|
+ .content {
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .replyText {
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fade-enter-active,
|
|
|
+ .fade-leave-active {
|
|
|
+ transition: opacity 0.5s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fade-enter-from,
|
|
|
+ .fade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .is-hidden {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+</style>
|