【微信小程序-原生开发】实用教程13 - 新用户注册审核(含页面的下拉刷新)

简介: 【微信小程序-原生开发】实用教程13 - 新用户注册审核(含页面的下拉刷新)

建议在实用教程12 - 注册页的基础上继续开发,也可以单独开发

【微信小程序-原生开发】实用教程12 - 注册页(含获取用户微信昵称,原生form的表单提交,t-result 的使用)_朝阳39的博客-CSDN博客

https://blog.csdn.net/weixin_41192489/article/details/129320056


页面效果

业务逻辑

  1. 加载已注册,但状态为“待审核”的用户列表
  2. 在备注输入框中,可以添加对用户的备注
  3. 点击通过按钮,可通过审核,该用户从待审核列表移除,并标记其审核状态为“审核通过”,同时给该用户信息中添加用户编号(从配置表中获取最新的用户编号+1),在动态表中增加一个动态记录。
  4. 点击拒绝按钮,该用户从待审核列表移动到被拒绝列表,并标记其审核状态为“被拒绝”

代码实现

pages\me\friend\new\index.wxml

<!-- 分类页签 tab -->
<t-tabs defaultValue="{{defaultTab}}" theme="card" bindchange='tabChange'>
  <t-tab-panel wx:for="{{tabList}}" wx:key="index" label="{{item.label}}" value="{{item.index}}" />
</t-tabs>

<!-- 注册申请列表 -->
<view wx:for="{{dataList}}" wx:key="index">
  <t-cell>
    <view slot="title">
      <text bindtap="copyIdentification" data-identification="{{item.identification}}">{{item.nickname}}</text>
    </view>

    <view slot="description" class="descriptionBox">
      <t-input style="{{style}}" bindclear="inputChange" bindchange="inputChange" data-index='{{index}}' clearable value="{{item.mark||''}}" placeholder="备注" />

      <button data-index='{{index}}' capture-catch:tap="pass" data-id="{{item._id}}" data-nickname="{{item.nickname}}" style="margin-right: 20rpx;" type="primary" size="mini">通过</button>

      <button wx:if="{{item.accountStatus !== '被拒绝'}}" capture-catch:tap="refuse" data-id="{{item._id}}" type="warn" size="mini">拒绝</button>
    </view>
  </t-cell>
</view>

pages\me\friend\new\index.wxss

.descriptionBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30rpx;
}

pages\me\friend\new\index.json

{
  "navigationBarTitleText": "新人审核",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "usingComponents": {
    "t-tabs": "tdesign-miniprogram/tabs/tabs",
    "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
    "t-cell": "tdesign-miniprogram/cell/cell",
    "t-input": "tdesign-miniprogram/input/input"
  }
}

pages\me\friend\new\index.js

import {
  getObjArrIndex
} from "../../../../utils/comFunc.js"
import {
  addMessage
} from "../../../../utils/api.js"
// 指定操作的数据库
const db = wx.cloud.database().collection('user')
Page({
  data: {
    style: 'border: 2rpx solid rgba(220,220,220,1);border-radius: 12rpx;margin-right:30rpx;padding: 10rpx;',
    dataList: [],
    // 页签 tab
    currentTab: '待审核',
    defaultTab: '待审核',
    tabList: [{
        index: '待审核',
        label: '待审核'
      },
      {
        index: '被拒绝',
        label: '被拒绝'
      },
    ]
  },
  inputChange: function (e) {
    let newMark = e.detail.value
    let index = e.currentTarget.dataset.index
    let newDataList = JSON.parse(JSON.stringify(this.data.dataList))
    newDataList[index].mark = newMark
    this.setData({
      dataList: newDataList
    })
  },
  onLoad(options) {
    this.getList()
  },
  // 切换页签
  tabChange: function (e) {
    this.setData({
      currentTab: e.detail.value
    })
    this.getList()
  },
  pass(e) {
    let that = this
    let {
      index,
      id,
      nickname
    } = e.currentTarget.dataset
    let configID = ''
    wx.showModal({
      content: '确定通过审核吗?',
      success(res) {
        if (res.confirm) {
          let lastNo = 1
          wx.cloud.database().collection('config').where({
            label: '最终用户编号'
          }).get().then(
            res => {
              if (res.data.length > 0) {
                lastNo = res.data[0].value + 1
                configID = res.data[0]._id
              } else {
                wx.cloud.database().collection('config').add({
                  data: {
                    label: '最终用户编号',
                    value: 1
                  }
                })
              }
              db.doc(id).update({
                data: {
                  mark: that.data.dataList[index].mark,
                  accountStatus: '审核通过',
                  No: lastNo
                }
              }).then(
                res => {
                  addMessage({
                      memberID: id
                    },
                    3,
                    nickname
                  )

                  wx.cloud.database().collection('config').doc(configID).update({
                    data: {
                      value: lastNo
                    }
                  })

                  wx.showToast({
                    title: `审核通过`
                  })

                  let itemIndex = getObjArrIndex(that.data.dataList, '_id', id)
                  that.data.dataList.splice(itemIndex, 1)
                  that.setData({
                    dataList: that.data.dataList
                  })
                }
              )
            })
        }
      }
    })
  },
  refuse(e) {
    let that = this
    wx.showModal({
      content: '确定拒绝吗?',
      success(res) {
        if (res.confirm) {
          let id = e.currentTarget.dataset.id // 获取操作数据的id
          db.doc(id).update({
            data: {
              accountStatus: '被拒绝'
            }
          }).then(
            res => {
              wx.showToast({
                title: `拒绝成功`
              })
              let itemIndex = getObjArrIndex(that.data.dataList, '_id', id)
              that.data.dataList.splice(itemIndex, 1)
              that.setData({
                dataList: that.data.dataList
              })
            }
          )
        }
      }
    })
  },
  copyIdentification(e) {
    let identification = e.currentTarget.dataset.identification
    wx.setClipboardData({
      data: identification,
      success: function (res) {
        wx.showToast({
          title: '复制成功',
        });
      }
    })
  },
  getList() {
    wx.showLoading({
      title: '加载中',
    })
    db.where({
        accountStatus: this.data.currentTab
      })
      .get().then(res => {
        this.setData({
          dataList: res.data
        })
        wx.hideLoading()
      })
  },
  onPullDownRefresh() {
    this.getList()
    wx.stopPullDownRefresh() //  解决:下拉刷新时,页面不回弹
  }
})

utils\api.js

// 新增动态
export function addMessage(data, type, publisher) {
  wx.cloud.database().collection('message').add({
    data: {
      ...data,
      type: type,
      publisher: publisher,
      date: new Date()
    }
  })
}

utils\comFunc.js

// 对象数组获取指定对象下标
export function getObjArrIndex(arr, prop, value) {
  let targetIndex = arr.findIndex((itemTemp) => itemTemp[prop] === value);
  if (targetIndex !== -1) {
    return targetIndex
  }
}

页面的下拉刷新

js 文件中

  onPullDownRefresh() {
    this.getList()
    wx.stopPullDownRefresh() //  解决:下拉刷新时,页面不回弹
  }

json文件中

  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",

目录
相关文章
|
5月前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
9月前
|
XML 小程序 前端开发
小程序制作教程
小程序制作教程
403 3
小程序制作教程
|
9月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
563 1
|
9月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
1346 0
|
10月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
3月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
4月前
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
1348 11
技术小白如何利用DeepSeek半小时开发微信小程序?
|
3月前
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
|
9月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2026 7
|
9月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
1401 1

热门文章

最新文章