mall-app-t/pages/user/point/share.vue

<template>
  <pb-layout
    navbar="inner"
    iconColor="#fff"
    class="share-point-wrap"
    leftIcon="leftIcon"
    color="#fff"
    title="分发积分"
    right="历史积分"
    :bgStyle="bgStyle"
  >
    <view class="title ss-m-t-80">
      <view class="main">分发积分</view>
      <view class="sub ss-flex ss-row-center ss-m-t-55"
        ><text style="color: #f3d3bf" class="cicon-safe"></text>订单多多·出单多多<text
          style="color: #f3d3bf"
          class="cicon-safe"
        ></text
      ></view>
    </view>

    <view class="user-search">
      <view class="search">
        <uni-easyinput
          v-model="state.inputData"
          :styles="{ backgroundColor: 'transparent', color: '#E7B493' }"
          placeholderStyle="color: #E7B493;"
          @input="inputUserFunc"
          :clearable="false"
          :inputBorder="false"
          trim="all"
          suffixIcon="search"
          placeholder="请输入用户名/手机号"
        />
      </view>
      <view class="result" :style="{ height: resultHeight, overflow: 'auto' }">
        <view v-for="item in state.userList" class="user ss-flex ss-row-between ss-col-center">
          <view class="user-info ss-flex ss-col-center ss-gap-20">
            <image
              style="width: 48rpx; height: 48rpx; border-radius: 50%"
              :src="item.avatar ? item.avatar : '/static/default_avatar.png'"
            />
            <view class="nickname">{{ item.nickname }}</view>
          </view>
          <view class="input-point">
            <uni-easyinput
              :styles="{ backgroundColor: 'transparent', color: '#E7B493' }"
              :placeholderStyle="placeholderStyle"
              v-model="item.point"
              :clearable="false"
              :inputBorder="false"
              @input="inputPointFunc(item)"
              type="number"
              trim="all"
              placeholder="请输入积分额度"
            />
          </view>
        </view>
      </view>
    </view>

    <view class="ss-p-x-30 bottom">
      <button class="ss-reset-button share-btn" @tap="confirmShare">确定</button>
    </view>
  </pb-layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import PointApi from '@/peach/api/pay/point'
import UserUtil from '@/peach/api/member/user'
import peach from '@/peach'

const placeholderStyle = ref('color: #E7B493')

const resultHeight = computed(() => {
  return `calc(100vh - 728rpx)`
})

const state = ref({
  inputData: '',
  userList: [],
  isShaking: false,
  agreeStatus: false,
  userParams: {
    mobile: '',
    nickname: '',
    pageNo: 1,
    pageSize: 10,
  },
  pointParams: {
    memberId: '',
    point: '',
  },
})

const bgStyle = {
  backgroundImage: '/static/point.png',
  imageType: 'local',
  backgroundColor: '#fff',
  description: '',
  height: '100%',
}

let timer
function inputUserFunc() {
  clearTimeout(timer)
  timer = setTimeout(() => {
    getUserList()
  }, 1000)
}

async function confirmShare() {
  let user = state.value.userList.find((item) => item.point)

  if (!user) {
    peach.$helper.toast('请选择需要赠送积分的用户')
    return
  }

  state.value.pointParams.memberId = user.id
  state.value.pointParams.point = user.point

  await PointApi.sendPoint(state.value.pointParams)

  state.value.inputData = ''
  state.value.userList = []
  state.value.pointParams = {
    memberId: '',
    point: '',
  }
}

function inputPointFunc(data) {
  state.value.userList.forEach((item) => {
    console.log(data.id !== item.id)
    if (data.id !== item.id) {
      item.point = ''
    }
  })

  // state.value.pointParams.memberId = data.id
  // state.value.pointParams.point = data.point
}

async function getUserList() {
  // 清空 userParams 数据
  state.value.userParams = {
    mobile: '',
    nickname: '',
    pageNo: 1,
    pageSize: 10,
  }
  // 判断 inputData 的输入类型
  // 如果 string 是纯数字
  if (/^\d+$/.test(state.value.inputData)) {
    state.value.userParams.mobile = state.value.inputData
  } else {
    state.value.userParams.nickname = state.value.inputData
  }

  let { data } = await UserUtil.getUserList(state.value.userParams)
  data.list.forEach((item) => {
    item.point = ''
  })
  state.value.userList = data.list
}
</script>

<style lang="scss" scoped>
.share-point-wrap {
  .title {
    .main {
      font-size: 80rpx;
      color: rgba(232, 181, 150, 1);
      letter-spacing: 20px;
      position: relative;
      left: 10px;
      text-align: center;
    }

    .sub {
      font-size: 32rpx;
      color: #f3d3bf;
      letter-spacing: 4px;
    }
  }

  .user-search {
    margin: 50rpx 40rpx 0;

    .search {
      border: 1px solid #e7b493;
      border-radius: 30px;
    }

    :deep(.uniui-search) {
      color: #e7b493 !important;
      padding-right: 10px;
    }

    :deep(.uni-easyinput__content-input) {
      padding-left: 15px !important;
    }

    .result {
      .user {
        margin-top: 20px;
        border: 1px solid #e7b493;
        border-radius: 30px;
        padding: 0 40rpx;

        .user-info {
          .nickname {
            font-size: 26rpx;
            color: #e7b493;
          }
        }

        .input-point {
          :deep(.uni-easyinput__content-input) {
            text-align: right;
          }
        }
      }
    }
  }

  .bottom {
    position: absolute;
    bottom: 20px;
    width: calc(100% - 60rpx);

    .share-btn {
      height: 82rpx;
      line-height: normal;
      background: linear-gradient(-90deg, rgba(230, 179, 147, 1), rgba(250, 232, 218, 1));
      border-radius: 28rpx;
      font-size: 26rpx;
      font-weight: 500;
    }
  }
}
</style>