ZhiHuiJiaoWu_UniApp/pages/common/my_message.vue

<!--我的消息-列表-->
<template>
  <view class="main_box">

    <view class="main_section">
      <view class="section_1">

<!--        <view class="item" @click="openViewSysMsgList()">-->
<!--          <view class="left">-->
<!--            <image class="pic" src="@/static/images/common/xi_tong_xiao_xi.png"></image>-->
<!--            <view>系统消息</view>-->
<!--          </view>-->
<!--          <view class="right">-->
<!--            <view>99</view>-->
<!--            <fui-icon name="arrowright" :size="60"></fui-icon>-->
<!--          </view>-->
<!--        </view>-->

        <view
            v-for="(v,k) in contactList"
            :key="k"
            class="item"
            @click="openViewImChatInfo(v)"
        >
          <view class="left">
            <image
                v-if="v.type==2"
                class="pic"
                :src="(v.header ? $util.img(v.header) : `@/static/images/common/yong_hu.png`)"
                model="aspectFit"
            ></image>

            <image v-else class="pic" src="@/static/images/common/xi_tong_xiao_xi.png"></image>

            <view>{{v.name}}</view>
          </view>
          <view class="right">
            <view>{{v.count >= 99 ? '99':v.count}}</view>
            <fui-icon name="arrowright" :size="60"></fui-icon>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import memberApi from '@/api/member.js';
import commonApi from '@/api/common.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: '',
      },

      //联系人列表
      contactList:[],
    }
  },
  onLoad() {
  },
  onShow() {
    this.init();
  },
  methods: {
    //初始化
    async init(){
      this.getContactList()
    },

    //获取联系人列表
    async getContactList(){
      let res = await commonApi.getContactList()
      console.log('获取联系人列表', res)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      this.contactList = res.data
    },

    //######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);
      }
    },

    //跳转页面-系统消息列表
    openViewSysMsgList(e){
      let hair_staff_id = e.hair_staff_id//发信人id
      uni.navigateTo({
        url: `/pages/common/sys_msg_list?hair_staff_id=${hair_staff_id}`
      })
    },

    //跳转页面-聊天页面
    openViewImChatInfo(e){

      if(e.type == 1){
        //系统消息
        this.openViewSysMsgList(e)
      }else{
        //站内信
        let hair_staff_id = e.hair_staff_id//发信人id
        uni.navigateTo({
          url: `/pages/common/im_chat_info?hair_staff_id=${hair_staff_id}`
        })
      }


    },

  }
}
</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;
        justify-content: space-between;
        align-items: center;

        padding: 40rpx 18rpx 36rpx;

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

        .left{
          display: flex;
          align-items: center;
          gap: 16rpx;
          .pic{
            width: 68rpx;
            height: 68rpx;
            border-radius: 50%;
          }
          view{
            color: #D9001B;
            font-size: 32rpx;
          }
        }
        .right{
          display: flex;
          align-items: center;
          view{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50rpx;
            height: 50rpx;
            padding: 5rpx;
            border: 1px solid #BBBBBB;
            border-radius: 50%;
            color: #D9001B;
          }
        }
      }
    }




	}

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