ZhiHuiJiaoWu_UniApp/pages/common/sys_msg_list.vue

<!--系统消息-列表-->
<template>
  <view class="main_box">

    <view class="main_section">
      <view class="section_1">
        <view class="item">
          <view class="title">吾悦校区停电通知</view>
          <image
              class="img_box"
              :src="$util.img('/upload/attachment/image/202504/02/1743562333d1bb6666f969da1b7170381d0845153e_local.png')"
              model="aspectFit"
          ></image>

          <view class="content">
            李老师将张包子的跟进人设置为您，需要您
            继续跟进，点击此消息查看张包子的信息，完
            成后续跟进
          </view>

          <view class="time">2024-03-07 10:30:00</view>
        </view>

        <view class="item">
          <view class="title">吾悦校区停电通知</view>
          <image
              class="img_box"
              :src="$util.img('/upload/attachment/image/202504/02/1743562333d1bb6666f969da1b7170381d0845153e_local.png')"
              model="aspectFit"
          ></image>


          <view class="time">2024-03-07 10:30:00</view>
        </view>

        <view class="item">
          <view class="title">吾悦校区停电通知</view>
          <image
              class="img_box"
              :src="$util.img('/upload/attachment/image/202504/02/1743562333d1bb6666f969da1b7170381d0845153e_local.png')"
              model="aspectFit"
          ></image>

          <view class="content">
            李老师将张包子的跟进人设置为您，需要您
            继续跟进，点击此消息查看张包子的信息，完
            成后续跟进
          </view>

          <view class="time">2024-03-07 10:30:00</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import memberApi from '@/api/member.js';
import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti';
import AQTabber from "@/components/AQ/AQTabber"


export default {
  components: {
    AQTabber,
    AQUplodeImgMulti,
  },
  data() {
    return {
      formData: {
        images_arr: [],
        images: '',
        content: '',
        mailbox: '',
      },
    }
  },
  onLoad() {
  },
  methods: {
    //######AQ上传文件组件相关######
    // 上传文件回调
    AQUploadSuccess(res) {
      console.log('接收AQ上传回调xxx1', res)
      // 使用 split 方法分割字符串
      let _inputValue = []
      if (res.filePathArr.length) {
        _inputValue = res.filePathArr
      }
      this.formData[res.inputName] = _inputValue
      // console.log('接收AQ上传回调xxx1',res)
      // console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr)
    },

    async submitForm() {
      let data = {...this.formData}
      data.images = data.images_arr.join(',')
      if (!data.content) {
        //反馈内容为必填项
        uni.showToast({
          title: '反馈内容为必填项',
          icon: 'none'
        })
        return
      }
      let res = await memberApi.setFeedback(data)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '提交成功',
          icon: 'none'
        })
        //延迟1s执行
        setTimeout(() => {
          this.$util.openHomeView();
        }, 1000);
      }
    },

  }
}
</script>

<style lang="less" scoped>
	.main_box {
		background: #292929;
	}

	//自定义导航栏
	.navbar_section {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #29d3b4;

		.title {
			padding: 20rpx 0;
			font-size: 30rpx;
			color: #315d55;
		}
	}

	.main_section {
		min-height: 100vh;
		background: #292929 100%;
		padding: 0 0rpx;
		padding-top: 32rpx;
		padding-bottom: 150rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.section {
			background-color: #434544;
			padding: 40rpx 40rpx;
		}

    .section_1{
      padding: 0 24rpx;
      display: flex;
      flex-direction: column;
      gap: 38rpx;
      .item{
        display: flex;
        flex-direction: column;

        padding: 32rpx 24rpx;
        border-radius: 14rpx;
        background-color: rgba(255,255,255,1);
        border: 2rpx solid rgba(187,187,187,1);

        color: #4F4F4F;
        font-size: 32rpx;

        .title{
        }
        .img_box{
          margin-top: 30rpx;
          width: 100%;
        }
        .content{
          margin-top: 30rpx;
        }
        .time{
          display: flex;
          justify-content: flex-end;
          margin-top: 36rpx;
        }
      }
    }




	}

	.describe {
		color: #999999;
		padding-left: 30rpx;
	}
</style>