integrated_traffic_uniapp/pages/news/news-list-detail.vue

<template>
	<view>
		<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">通知详情</block>
		</cu-custom>
		<scroll-view scroll-y>
			<view class="message-warp">
        <view class="title">
           通知标题：
        </view>
				<view class="info">
					{{pd.TITLE}}
				</view>
        <view class="title">
          通知内容：
        </view>
        <rich-text class="info" :nodes="content"></rich-text>
        <view class="info">
          <text>{{pd.CREATETIME}}</text>
        </view>

        <view class="message-warp" v-if="pd.VIDEO_ROUTE">
          <video :src="pd.VIDEO_ROUTE" controls="true"></video>
        </view>
        <view class="message-warp" v-if="pd.ATTACHMENT_ROUTE">
          <view class="cu-item" @click="$noMultipleClicks(goStuToOpen,pd.ATTACHMENT_ROUTE)">
            <view class="content">
              <text class="cuIcon-read text-blue"></text>
              <text class="text-grey">附件</text>
            </view>
          </view>
        </view>
        <view v-if="pd.REPLYSTATUS === '1'">
          <view class="reply-title">回复内容</view>
          <input type="text" class="reply-input" v-model="replyContent" placeholder="请输入回复内容" />
          <button class="submit-btn" @click="confirmReply" v-show="pd.REPLYSTATUS === '1'">确定</button>
        </view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		basePath,loginUser,baseImgPath
	} from '@/common/tool.js';
	import HTMLParser  from "@/components/html-parser.js"
	export default {
		data() {
			return {
        id:'',
				content:'',
				pd: {},
				type:'',
				noClick:true,
        isConfirmed: false,
        replyContent: '',
			}
		},
		onLoad(e){
			this.type =e.type;
			this.id=e.id;
			this.getData();
      this.sendEditRequest();
      this.markAsRead();
			console.log(e)
		},
		methods: {
      confirmReply() {
        this.isConfirmed = true;
        this.sendEditRequest();
        },
        getData() {
        var _this = this;
        uni.showLoading({
          title: '请稍候'
        });

        var requestData = {
          NOTIFICATION_ID: _this.id,
          USER_ID: loginUser.USER_ID,
        };

        uni.request({
          url: basePath + '/app/trafficNotice/listForCp',
          method: 'POST',
          dataType: 'json',
          header: {
            'Content-type': 'application/x-www-form-urlencoded'
          },
          data: requestData,
          success: (res) => {
            if ("success" == res.data.result && res.data.varList && res.data.varList.length > 0) {
              _this.pd = res.data.varList[0];
              _this.content = new HTMLParser(_this.pd.NOTIFICATIONCONTENT.trim());
              if (_this.pd.REPLYCONTENT && _this.pd.REPLYCONTENT.trim() !== '') {
                _this.replyContent = _this.pd.REPLYCONTENT;
              }
              uni.hideLoading();
            } else {
              uni.showToast({
                title: '数据加载失败',
                duration: 2000
              });
              uni.hideLoading();
            }
          },
          fail: () => {
            uni.showToast({
              title: '请求失败',
              icon: 'none',
              duration: 2000
            });
            uni.hideLoading();
          }
        });
      },
      markAsRead() {
        const _this = this;
        uni.request({
          url: basePath + '/app/trafficNotice/edit',
          method: 'POST',
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: {
            NOTIFICATION_ID: _this.id,
            USER_ID: loginUser.USER_ID,
            TYPE: _this.type,
          },
        });
      },
      sendEditRequest() {
        if (!this.isConfirmed) {
          return;
        }
        var _this = this;
        var requestData = {
          NOTIFICATION_ID: _this.id,
          USER_ID: loginUser.USER_ID,
          REPLYCONTENT: _this.replyContent
        };
        if (!_this.replyContent) {
          uni.showToast({
            title: '回复内容不能为空',
            icon: 'none',
            duration: 2000
          });
          return;
        }
        uni.request({
          url: basePath + '/app/trafficNotice/edit',
          method: 'POST',
          dataType: 'json',
          header: {
            'Content-type': 'application/x-www-form-urlencoded'
          },
          data: requestData,
          success: (res) => {
            if (res.data.result === "success") {
              uni.showToast({
                title: '回复成功',
                duration: 2000
              });
              _this.replyContent = ''; // 清空回复内容
              this.isConfirmed = false; // 重置确认状态
            }
          },
        });
      },

			goStuToOpen(e) {
				var url=baseImgPath + e ;
				var url2 = encodeURI(url);
				plus.runtime.openURL(url2, function(res) {
				});
			},
		}
	}
</script>

<style>
	.message-warp{
		background-color: #fff;
		padding: 30upx;
	}
	.message-warp .title {
		font-size: 34upx;
		margin-bottom: 20upx;
	}
  .submit-btn {
    background-color: #007AFF; /* 蓝色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 5upx 10upx; /* 内边距 */
    font-size: 18upx; /* 字体大小 */
    margin-top: 10upx; /* 上边距 */
    border-radius: 5upx; /* 圆角 */
    width: auto; /* 修改处：宽度自动，取决于内容和内边距 */
    max-width: 100upx; /* 修改处：最大宽度，可以根据需要调整 */
    display: block; /* 块级元素 */
    margin-left: auto; /* 水平居中 */
    margin-right: auto; /* 水平居中 */
  }
  .reply-input {
    box-sizing: border-box;
    border: 1px solid #dcdfe6; /* 设置边框颜色和宽度 */
    border-radius: 4px; /* 轻微圆角效果 */
    padding: 10px; /* 设置一些内边距*/
    font-size: 16px; /* 设置适当的字体大小 */
    color: #606266; /* 设置字体颜色 */
    margin: 10px 0; /* 设置上下外边距 */
    width: 100%; /* 宽度设置为100% */
    height: 40px; /* 设置一个固定的高度 */
  }
	.info {
		display: flex;
		justify-content: space-between;
		color: #888;
		font-size: 24upx;
		margin-bottom: 20upx;
	}

	.content {
		padding: 0upx;
		line-height: 1.6;
	}
	.content img{
		width: 100%;
		height: auto;
	}
</style>