wx-starlock/pages/setting/noticeWay.vue

<template>
  <view>
    <view class="py-3 px-4 bg-white flex items-center justify-between text-base">
      <view>APP推送</view>
      <view class="ml-a">管理员</view>
    </view>

    <view class="pt-2 px-4 bg-white text-base mt-20rpx">
      <view class="flex items-center w-full pb-2">
        <view>邮件提醒</view>
        <view class="ml-a h-50">
          <up-icon
            name="plus-circle-fill"
            color="#002ce5"
            size="50rpx"
            v-if="emailList.length < 3"
            @click="addItem('email')"
          ></up-icon
        ></view>
      </view>
      <view v-if="emailList.length > 0">
        <view
          v-for="(item, index) in emailList"
          :key="index"
          class="flex items-center border-t-1 border-t-solid border-t-gray-200"
        >
          <up-icon
            name="close-circle-fill"
            color="#858585"
            size="40rpx"
            @click="deleteItem('email', index)"
          ></up-icon>
          <view class="ml-3">接收者</view>
          <view class="ml-a">
            <input
              class="py-2 w-450 h-60 text-right font-bold text-base"
              :value="item.account"
              maxlength="50"
              placeholder="请输入Email"
              placeholder-class="text-base line-height-60rpx font-bold text-right"
              @input="updateName('email', index, $event)"
            />
          </view> </view
      ></view>
    </view>

    <view class="pt-2 px-4 bg-white text-base mt-20rpx">
      <view class="flex items-center w-full pb-2">
        <view>短信提醒</view>
        <view class="ml-a h-50">
          <up-icon
            name="plus-circle-fill"
            color="#002ce5"
            size="50rpx"
            v-if="smsList.length < 3"
            @click="addItem('sms')"
          ></up-icon
        ></view>
      </view>
      <view v-if="smsList.length > 0">
        <view
          v-for="(item, index) in smsList"
          :key="index"
          class="flex items-center border-t-1 border-t-solid border-t-gray-200"
        >
          <up-icon
            name="close-circle-fill"
            color="#858585"
            size="40rpx"
            @click="deleteItem('sms', index)"
          ></up-icon>
          <view class="ml-3">接收者</view>
          <view class="ml-a">
            <input
              class="py-2 w-450 h-60 text-right font-bold text-base"
              :value="item.account"
              type="number"
              maxlength="11"
              placeholder="请输入手机号"
              placeholder-class="text-base line-height-60rpx font-bold text-right"
              @input="updateName('sms', index, $event)"
            />
          </view> </view
      ></view>
    </view>

    <view
      @click="confirm"
      class="mt-10 w-686 mx-4 h-88 line-height-88rpx text-center bg-#4777ee text-white rounded-3xl"
      >确定
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { getCurrentInstance, ref } from 'vue'
  import test from 'uview-plus/libs/function/test'

  const instance = getCurrentInstance().proxy
  const eventChannel = instance.getOpenerEventChannel()

  const info = ref(null)
  const emailList = ref([])
  const smsList = ref([])

  onLoad(options => {
    info.value = JSON.parse(options.info)
    if (info.value?.noticeWay) {
      emailList.value = info.value.noticeWay[0].accounts
      smsList.value = info.value.noticeWay[1].accounts
    }
  })

  const confirm = () => {
    for (let i = 0; i < emailList.value.length; i++) {
      if (test.email(emailList.value[i].account) === false && emailList.value[i].account !== '') {
        uni.showToast({
          title: '含不符合规范的邮箱',
          icon: 'none'
        })
        return
      }
    }
    for (let i = 0; i < smsList.value.length; i++) {
      if (test.mobile(smsList.value[i].account) === false && smsList.value[i].account !== '') {
        uni.showToast({
          title: '含不符合规范的手机号',
          icon: 'none'
        })
        return
      }
    }

    const email = emailList.value.filter(item => item.account !== '')
    const sms = smsList.value.filter(item => item.account !== '')

    eventChannel.emit('confirm', {
      noticeWay: [
        { type: 'mail', accounts: email },
        { type: 'sms', accounts: sms }
      ]
    })
  }

  const addItem = type => {
    if (type === 'email') {
      emailList.value.push({ countryCode: 0, account: '' })
    } else {
      smsList.value.push({ countryCode: 86, account: '' })
    }
  }

  const deleteItem = (type, index) => {
    if (type === 'email') {
      emailList.value.splice(index, 1)
    } else {
      smsList.value.splice(index, 1)
    }
  }

  const updateName = (type, index, data) => {
    if (type === 'email') {
      emailList.value[index].account = data.detail.value
    } else {
      smsList.value[index].account = data.detail.value
    }
  }
</script>

<style lang="scss">
  page {
    background-color: $uni-bg-color-grey;
  }
</style>

<style scoped lang="scss">
  .input {
    border-radius: 16rpx;
    background: #ffffff;
    margin-left: 35rpx;
    margin-top: 24rpx;
    height: 108rpx;
    width: 616rpx;
    padding-left: 32rpx;
    padding-right: 32rpx;
  }

  .input-placeholder {
    height: 60rpx;
    font-size: 36rpx;
    font-weight: bold;
    line-height: 108rpx;
  }
</style>