前面47和48章节对代码进行了分析和解读。但是还是又很多地方需要加精。如方法中的注释，执行中的提示，特别是添加和修改中，相关值的初始化，另外还有页面的刷新，并且在页面刷新时的异步操作 同步化实现。
但这里唯一不好的是 使用的数据传输在页面上进行的。推荐可以修改为云对象的方式。
不妨来看看代码：
<template>
<view class="category">
<!-- 分类管理 -->
<!-- 第二步 -->
<!-- 这里的row add 中间有一个空格，下面样式就可以写成 .row.add -->
<view class="row add" @click="clickAdd">
<view class="left">
<!-- https://uviewui.com/components/icon.html 使用的是uview的icon -->
<u-icon name="plus" color="#576b95" size="22"></u-icon>
<text class="text">新增分类</text>
</view>
</view>
<!-- 第一步 -->
<view class="row" v-for="(item,index) in categoryList" :key="item._id">
<view class="left">
<!-- 分类名称 -->
<view class="name">{{item.name}}</view>
</view>
<view class="right">
<!-- 编辑和删除图标 -->
<!-- 使用的u-icon组件，自动生成一个class名字为 u-icon -->
<u-icon name="edit-pen" size="26" color="#576b95" @click="updateData(item._id,item.name)"></u-icon>
<u-icon name="trash" size="26" color="#EC544F" @click="deleteData(item._id)"></u-icon>
</view>
</view>
<!-- 第三步 -->
<!-- https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html 使用这里弹出层 官方 使用的是输入框示例 -->
<!-- 下载安装相应的组件 ref来获取方法进行相应的动作，uview 是通过show 来完成相应的动作 -->
<!-- @confirm 这是一个回调函数，我们通过这就知道输入的到底是什么 -->
<uni-popup ref="inputDialog">
<uni-popup-dialog mode="input" :value="iptValue" placeholder="请输入分类名称" title="分类名称"
@confirm="dialogConfirm"></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script>
const db = uniCloud.database()
export default {
data() {
return {
// categoryList:[{_id:1,name:"水果"},{_id:2,name:"肉类"}],
// 上面是模拟数据 实际写的是空 下面这样的 真实数据来之云存储，并给该变量赋值
categoryList: [],
iptValue: "",
updateID: null
};
},
onLoad() {
this.getCateGory()
},
methods: {
//获取数据库中的分类
getCateGory() {
db.collection("green-mall-categories").get().then(res => {
// console.log(res);
this.categoryList = res.result.data
})
},
//添加分类
clickAdd() {
// 值的初始化
this.iptValue = "" // 防止修改后，该值不为空，那么新增就先置为空。
this.updateID = null; //防止修改后，该值不为空，那么新增就先置为空。
//https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html 使用的是Popup Methods中open
// 这里的inputDialog 的属性是ref在uni-popup中
// 所以这里使用的是 this.$refs.inputDialog.open();
this.$refs.inputDialog.open();
},
//点击确认按钮 这里的name 是我们green-mall-categories 表里提供的key
async dialogConfirm(e) {
// popup的处理，解决添加时值未空的操作，应该popup有判断，但是自己还是做一个
if (!e) {
this.warningshow("分类名称为空");
return
}
// 修改的判断，没有变化也不要请求数据库，这里上线了都流量费呀
if (this.iptValue == e) {
this.warningshow("分类名称未修改");
return
}
//下面才是真的操作
if (this.updateID) {
//这里 有一个异步同步化的操作，满满的知识载荷
await db.collection("green-mall-categories").doc(this.updateID).update({
name: e
}).then(res => {
this.warningshow("修改分类成功");
this.getCateGory();
})
} else {
await db.collection("green-mall-categories").add({
name: e
}).then(res => {
this.warningshow("添加分类成功");
this.getCateGory();
})
}
//把输入或修改的值改为空，以免下一次在调用就还有上一次的值
// this.iptValue = "";
},
//修改一条分类
updateData(id, name) {
this.iptValue = name;
this.updateID = id;
this.$refs.inputDialog.open();
},
//删除一条分类
deleteData(id) {
uni.showModal({
content: "是否删除该分类?",
success: res => {
if (res.confirm) {
db.collection("green-mall-categories").doc(id).remove().then(res => {
this.warningshow("删除分类成功");
this.getCateGory();
})
}
},
fail: err => {
console.log(err);
}
})
},
//弹窗提示，人性化的提示。
warningshow(str) {
uni.showToast({
title: str
})
}
}
}
</script>
<style lang="scss">
.category {
padding: 30rpx;
.row {
@include flex-box();
border-bottom: 1px solid $border-color-light;
padding: 26rpx 0;
.left {
font-size: 34rpx;
}
.right {
@include flex-box();
//使用的u-icon组件，自动生成一个class名字为 u-icon
.u-icon {
margin-left: 30rpx;
}
}
}
// 对应的class 就是 row add
.row.add {
.left {
color: $brand-theme-color-aux;
@include flex-box();
.text {
font-size: 36rpx;
padding-left: 10rpx;
}
}
}
}
</style>
