建议在实用教程12 - 注册页的基础上继续开发,也可以单独开发
【微信小程序-原生开发】实用教程12 - 注册页(含获取用户微信昵称,原生form的表单提交,t-result 的使用)_朝阳39的博客-CSDN博客
https://blog.csdn.net/weixin_41192489/article/details/129320056
页面效果
业务逻辑
- 加载已注册,但状态为“待审核”的用户列表
- 在备注输入框中,可以添加对用户的备注
- 点击通过按钮,可通过审核,该用户从待审核列表移除,并标记其审核状态为“审核通过”,同时给该用户信息中添加用户编号(从配置表中获取最新的用户编号+1),在动态表中增加一个动态记录。
- 点击拒绝按钮,该用户从待审核列表移动到被拒绝列表,并标记其审核状态为“被拒绝”
代码实现
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",