YNUtdPlatform/pages/workPlan/messagePush/index.vue

<template>
  <view>
    <u-navbar
      class="u-navbar"
      title="短信推送"
      placeholder
      @leftClick="leftClick"
      leftIconColor="#fff"
      bgColor="#00337A"
      :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
    />
    <view class="push-container">
      <view class="receipt-person">
        <view>收件人：</view>
        <view>
          <u--textarea v-model="phoneStr" placeholder="请输入手机号" autoHeight />
        </view>
        <view class="search-icon" @tap="onSearchPerson" />
      </view>

      <!-- 内容区域 -->
      <view class="message-content">
        <view class="btn-container">
          <view class="report-btn" @tap="getReportMessage">报告</view>
        </view>

        <view class="message-ipt">
          <u--textarea v-model="reportMessage" placeholder="请输入或点击报告填写内容" autoHeight />
        </view>
      </view>

      <view class="send-btn" @tap="onSendMessage">发送</view>
      <!-- <view class="send-btn" @tap="handleClick">测试</view> -->
    </view>

    <!-- 人员弹框 -->
    <uni-popup ref="popupAuditing" background-color="#fff">
      <view class="auditing-content">
        <view class="auditing-title">
          <view class="title">
            <text style="margin-left: 15rpx">请选择推送人</text>
          </view>
          <view class="search">
            <view class="search-ipt">
              <uni-easyinput :clear="false" type="text" placeholder="请输入姓名关键字" v-model="searchUserName" />
            </view>
            <view class="search-btn" @tap="onSearchUserInfo">搜索</view>
          </view>
        </view>

        <view class="user-info">
          <view class="user-title">
            <view style="width: 8%"></view>
            <view style="width: 12%">姓名</view>
            <view style="width: 40%">岗位</view>
            <view style="width: 40%">电话</view>
          </view>

          <scroll-view :scroll-y="true" style="height: 33vh" @scrolltolower="onScrollTolower">
            <view class="user-content" v-for="item in auditingUserList" :key="item.id">
              <view style="width: 8%">
                <label>
                  <checkbox
                    :checked="item.isChecked"
                    color="#fff"
                    borderColor="#ccc"
                    backgroundColor="#fff"
                    activeBorderColor="#003778"
                    activeBackgroundColor="#003778"
                    style="transform: scale(0.7)"
                    @tap="onCheckBoxChange(item)"
                  />
                </label>
              </view>
              <view style="width: 12%">{{ item.name }}</view>
              <view style="width: 40%">{{ item.orgName }}</view>
              <view style="width: 40%">{{ item.phone }}</view>
            </view>
          </scroll-view>
        </view>

        <view class="user-btn">
          <view class="btn-cancel" @tap="onHandlerCancel">取消</view>
          <view class="btn-submit" @tap="onHandlerSubmit">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getPushPersonListApi, getReportMessageApi, messagePushApi } from '../../../api/workPlan/my'

export default {
  data() {
    return {
      pageNo: 0, // 当前页数
      phoneStr: '',
      reportMessage: '',
      searchUserName: '',
      mobilePhoneNumber: '',
      phoneList: [],
      auditingUserList: [],
      pushPersonListAll: [],
      isSending: false
    }
  },

  methods: {
    debounce(fn, delay) {
      let timer = null
      return (...args) => {
        // 清除之前的定时器
        if (timer) {
          clearTimeout(timer)
        }

        // 设置新的定时器，延迟执行函数
        timer = setTimeout(() => {
          fn.apply( ...args) // 使用 `apply` 确保 `this` 指向 Vue 实例
        }, delay)
      }
    },
    leftClick() {
      uni.navigateBack()
    },
    onSearchPerson() {
      // console.log('查找收件人')
      this.searchUserName = ''
      this.$refs.popupAuditing.open('center')
      this.getPushPersonListData()
    },

    async getPushPersonListData() {
      this.pageNo = 0
      uni.showLoading({ title: '正在查询，请勿重复点击', mask: true })
      const res = await getPushPersonListApi({ name: this.searchUserName })
      uni.hideLoading()
      // console.log(res, '人员信息')
      // 1. 先存储所有数据
      this.pushPersonListAll = res
      this.pushPersonListAll.forEach(e => {
        this.$set(e, 'isChecked', false)
      })

      // 2. 展示 10 条数据
      this.auditingUserList = this.pushPersonListAll.slice(this.pageNo, 10)
      this.pageNo++
    },
    // 搜索人员
    onSearchUserInfo() {
      this.getPushPersonListData()
    },
    // 取消
    onHandlerCancel() {
      this.$refs.popupAuditing.close()
    },
    // 确定
    onHandlerSubmit() {
      const selectPersonList = this.auditingUserList.filter(e => e.isChecked === true)

      // console.log('selectPersonList', selectPersonList)

      let phoneList = []
      if (selectPersonList.length > 0) {
        selectPersonList.forEach(e => {
          phoneList.push(e.phone)
        })
      }

      this.phoneList = phoneList // 选中的人员号码
      this.phoneStr = phoneList.join(',') // 回显号码
      this.$refs.popupAuditing.close()
    },
    // 复选框单击事件
    onCheckBoxChange(item) {
      // console.log(item, '*****')
      item.isChecked = !item.isChecked
    },
    // 滚动触底
    onScrollTolower() {
      // console.log('滚动触底---')
      this.auditingUserList = [
        ...this.auditingUserList,
        ...this.pushPersonListAll.splice(this.pageNo * 10, (this.pageNo + 1) * 10)
      ]
      this.pageNo++
    },
    // 报告按钮
    async getReportMessage() {
      const res = await getReportMessageApi()
      this.reportMessage = res
      // console.log('报告内容', res)
    },
    async onSendMessage() {
      // console.log(this, 'this')
      if (!this.phoneStr) {
        uni.showToast({ title: '请选择收件人或填写收件人号码', icon: 'none' })
        // this.isSending = false // 请求结束，解除锁定
        return
      }

      if (!this.reportMessage) {
        uni.showToast({ title: '请填写短信内容', icon: 'none' })
        // this.isSending = false // 请求结束，解除锁定
        return
      }

      const sendPhoneList = this.phoneStr.split(',')
      const params = {
        content: `【作业计划管控平台】${this.reportMessage}`,
        phoneStr: sendPhoneList.join('@')
      }

      uni.showLoading({ title: '短信正在发送，请不要重复点击', mask: true })
      console.log('推送参数', params)
      messagePushApi(params).then(res => {
        console.log('推送结果', res)
        uni.hideLoading()

        if (res.res === 1) {
          uni.showToast({ title: '短信发送成功！', icon: 'none' })
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        } else {
          uni.showToast({ title: '短信发送失败！', icon: 'none' })
        }
      })
    }

    // // 发送按钮
    // async onSendMessage() {
    //   if (this.isSending) {
    //     // 如果正在发送短信，阻止继续点击
    //     uni.showToast({ title: '正在发送中，请勿重复点击', icon: 'none' })
    //     return
    //   }

    //   // 设置为正在发送
    //   this.isSending = true

    //   const sendPhoneList = this.phoneStr.split(',')
    //   const params = {
    //     content: `【作业计划管控平台】${this.reportMessage}`,
    //     phoneStr: sendPhoneList.join('@')
    //   }

    //   uni.showLoading({ title: '短信正在发送，请不要重复点击', mask: true })

    //   console.log(params, '参数')

    //   try {

    //   } catch (error) {
    //     uni.hideLoading()
    //     uni.showToast({ title: '短信发送失败！', icon: 'none' })
    //     console.error(error)
    //   } finally {
    //     // 请求结束，解除锁定
    //     this.isSending = false
    //   }

    //   // console.log(res, '发送结果')
    //   // if (!this.phoneStr) {
    //   //   uni.showToast({ title: '请选择收件人或填写收件人号码', icon: 'none' })
    //   //   return
    //   // }
    //   // if (!this.reportMessage) {
    //   //   uni.showToast({ title: '请填写短信内容', icon: 'none' })
    //   //   return
    //   // }
    //   // const sendPhoneList = this.phoneStr.split(',')
    //   // const params = {
    //   //   content: `【作业计划管控平台】${this.reportMessage}`,
    //   //   phoneStr: sendPhoneList.join('@')
    //   // }
    //   // uni.showLoading({ title: '短信正在发送，请不要重复点击', mask: true })
    //   // console.log(params, '参数')
    //   // const res = await messagePushApi(params)
    //   // uni.hideLoading()
    //   // if (res.res == 1) {
    //   //   uni.hideLoading()
    //   //   uni.showToast({ title: '短信发送成功！', icon: 'none' })
    //   //   setTimeout(() => {
    //   //     uni.navigateBack()
    //   //   }, 500)
    //   // } else {
    //   //   uni.showToast({ title: '短信发送失败！', icon: 'none' })
    //   // }
    //   // console.log(res, '发送结果')

    //   if (true) return

    //   // console.log('sendPhoneList', sendPhoneList)
    //   uni.showLoading({ title: '短信正在发送，请勿刷新页面或重复点击！' })
    //   new Promise((resolve, reject) => {
    //     let promisesFun = []

    //     sendPhoneList.forEach(e => {
    //       console.log(e, '手机号码')

    //       // 封装 uni.request 为 Promise
    //       let promise = new Promise((reqResolve, reqReject) => {
    //         let params = {
    //           ddtKey: 'bonusyn',
    //           secretkey: 'IU0ypHbH',
    //           mobile: e,
    //           content: `【作业计划管控平台】${this.reportMessage}`
    //         }
    //         console.log('发送参数', params)

    //         uni.request({
    //           url: 'http://api.ktsms.cn/sms_token',
    //           method: 'POST',
    //           data: params,
    //           header: {
    //             'Content-Type': 'application/x-www-form-urlencoded'
    //           },
    //           // dataType: 'json',
    //           success: res => {
    //             console.log('短信发送成功', res)
    //             reqResolve(res) // 请求成功，调用 reqResolve
    //           },
    //           fail: err => {
    //             console.log(err, '发送失败')
    //             reqReject(err) // 请求失败，调用 reqReject
    //           }
    //         })
    //       })

    //       // 将返回的 promise 添加到数组中
    //       promisesFun.push(promise)
    //     })

    //     // 等待所有请求完成
    //     Promise.all(promisesFun)
    //       .then(() => {
    //         resolve() // 所有请求成功后调用 resolve
    //       })
    //       .catch(err => {
    //         reject(err) // 如果有任何请求失败，调用 reject
    //       })
    //   })
    //     .then(res => {
    //       // console.log('短信发送结果---')
    //       uni.hideLoading()
    //       uni.showToast({ title: '短信发送成功！', icon: 'none' })
    //       setTimeout(() => {
    //         uni.navigateBack()
    //       }, 500)
    //     })
    //     .catch(err => {
    //       uni.hideLoading()
    //       console.log('短信发送失败')
    //     })
    // },

    // onSendMessage: debounce(
    //   function () {
    //     console.log(this,'this')
    //     // const this_ = this
    //     if (!this.phoneStr) {
    //       uni.showToast({ title: '请选择收件人或填写收件人号码', icon: 'none' })
    //       this.isSending = false // 请求结束，解除锁定
    //       return
    //     }

    //     if (!this.reportMessage) {
    //       uni.showToast({ title: '请填写短信内容', icon: 'none' })
    //       this.isSending = false // 请求结束，解除锁定
    //       return
    //     }

    //     const sendPhoneList = this.phoneStr.split(',')
    //     const params = {
    //       content: `【作业计划管控平台】${this.reportMessage}`,
    //       phoneStr: sendPhoneList.join('@')
    //     }

    //     uni.showLoading({ title: '短信正在发送，请不要重复点击', mask: true })
    //     console.log('推送参数', params)
    //     messagePushApi(params).then(res => {
    //       console.log('推送结果', res)
    //       uni.hideLoading()

    //       if (res.res == 1) {
    //         uni.showToast({ title: '短信发送成功！', icon: 'none' })
    //         setTimeout(() => {
    //           uni.navigateBack()
    //         }, 500)
    //       } else {
    //         uni.showToast({ title: '短信发送失败！', icon: 'none' })
    //       }
    //     })
    //   }.bind(this),
    //   1500
    // )
    // onSendMessage: debounce(() => {
    //   // 使用箭头函数，自动绑定 `this`
    //   console.log(this, 'this') // 这里 `this` 会指向 Vue 实例
    //   if (!this.phoneStr) {
    //     uni.showToast({ title: '请选择收件人或填写收件人号码', icon: 'none' })
    //     // this.isSending = false // 请求结束，解除锁定
    //     return
    //   }

    //   if (!this.reportMessage) {
    //     uni.showToast({ title: '请填写短信内容', icon: 'none' })
    //     // this.isSending = false // 请求结束，解除锁定
    //     return
    //   }

    //   const sendPhoneList = this.phoneStr.split(',')
    //   const params = {
    //     content: `【作业计划管控平台】${this.reportMessage}`,
    //     phoneStr: sendPhoneList.join('@')
    //   }

    //   uni.showLoading({ title: '短信正在发送，请不要重复点击', mask: true })
    //   console.log('推送参数', params)
    //   messagePushApi(params).then(res => {
    //     console.log('推送结果', res)
    //     uni.hideLoading()

    //     if (res.res == 1) {
    //       uni.showToast({ title: '短信发送成功！', icon: 'none' })
    //       setTimeout(() => {
    //         uni.navigateBack()
    //       }, 500)
    //     } else {
    //       uni.showToast({ title: '短信发送失败！', icon: 'none' })
    //     }
    //   })
    // }, 1500)
  },
  created() {
    // 将防抖应用到 `onSendMessage` 方法上
    this.onSendMessage = this.debounce(this.onSendMessage, 1000);
  }
}
</script>

<style lang="scss" scoped>
.push-container {
  background-color: #eef3f7;
  height: 100vh;
  width: 100vw;
  padding-top: 20rpx;

  .receipt-person {
    width: 94%;
    margin: 0 auto;
    padding: 22rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #fff;

    .search-icon {
      width: 78rpx;
      height: 78rpx;
      background: url('../../../static/images/workPlan/contacts.png') no-repeat;
      background-size: 100% 100%;
    }

    view {
      margin: 0 12rpx;
    }
  }

  .receipt-person view:nth-child(2) {
    flex: 1;
  }

  .message-content {
    width: 94%;
    height: 50vh;
    margin: 20rpx auto 15rpx;
    padding: 22rpx 0;
    background-color: #fff;

    .btn-container {
      width: 95%;
      margin: 15rpx auto;
    }

    .report-btn {
      width: 165rpx;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      border-radius: 16rpx;
      background-color: #003778;
      font-size: 26rpx;
      color: #fff;
    }

    .message-ipt {
      width: 95%;
      margin: 20rpx auto 0;
    }
  }

  .send-btn {
    width: 60%;
    height: 78rpx;
    margin: 30rpx auto 0;
    line-height: 78rpx;
    text-align: center;
    border-radius: 12rpx;
    background-color: #003778;
    color: #fff;
  }
}

.auditing-content {
  width: 95vw;
  height: 60vh;
  background-color: #eee;

  .auditing-title {
    width: 100%;
    padding-bottom: 4rpx;
    margin-bottom: 16rpx;
    background-color: #fff;

    .title {
      width: 93%;
      margin: 20rpx auto;
      padding: 13rpx 0;
      border: 1px solid #ccc;
      font-size: 26rpx;
      color: #333;
      border-radius: 5rpx;
      box-sizing: border-box;
    }

    .search {
      width: 93%;
      margin: 20rpx auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .search-ipt {
        width: 65%;
      }

      .search-btn {
        width: 25%;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        color: #fff;
        border-radius: 12rpx;
        background-color: #003778;
      }
    }
  }

  .user-info {
    width: 93%;
    margin: 0 auto;
    box-sizing: content-box;
    background-color: #fff;
    .user-title,
    .user-content {
      display: flex;
      align-items: center;
      margin-bottom: 8rpx;

      view {
        text-align: center;
      }
    }

    .user-content {
      padding: 15rpx 0;
      border-bottom: 1px solid #ccc;
    }
  }

  .user-btn {
    width: 93%;
    margin: 0 auto;
    padding-top: 28rpx;
    display: flex;
    justify-content: space-around;

    view {
      width: 40%;
      height: 82rpx;
      text-align: center;
      line-height: 82rpx;
      border-radius: 12rpx;
    }
    .btn-cancel {
      background-color: #ccc !important;
      color: #000;
    }

    .btn-submit {
      color: #fff;
      background-color: #003778 !important;
    }
  }
}
</style>