uniapp-商城-52-后台商家信息（商家信息数据，云对象利用） - qidao123.com技术社区-IT企服评测·应用市场

// 云对象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj// jsdoc语法提示教程：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/129//第一步：链接数据库const db = uniCloud.database();const utils = require("self-utils")module.exports = { _before: async function () { // 通用预处理器
this.userInfo =await utils.getUserInfo(this);
this.params = this.getParams()[0]
}, async get(){
return await db.collection("green-mall-brand").get()
},
async add(){
//需要登录
if(!this.userInfo.uid) return {msg:"没有权限",code:-1};
//需要管理权限
if(!this.userInfo.role.includes('manage')) return {msg:"没有权限",code:-1};
return await db.collection("green-mall-brand").add(this.params)
},
async update(){
if(!this.userInfo.uid) return {msg:"没有权限",code:-1};
if(!this.userInfo.role.includes('manage')) return {msg:"没有权限",code:-1};
let params = {...this.params};
delete params._id
return await db.collection("green-mall-brand").doc(this.params._id).update(params)
}} /** * method1方法形貌 * @param {string} param1 参数1形貌 * @returns {object} 返回值形貌 */ /* method1(param1) { // 参数校验，如无参数则不必要 if (!param1) { return { errCode: 'PARAM_IS_NULL', errMsg: '参数不能为空' } } // 业务逻辑 // 返回结果 return { param1 //请根据实际必要返回值 } } */}

复制代码

<template>
<view class="brand">
<uni-forms ref="brandRef" :model="brandFormData" :label-width="100" label-align="right">
<!--
https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html
ref 就是定义这个表单的标识
model：数据
rules：校验规则
label-width 加冒号绑定就数字，不加冒号就要写成100px，不能rpx
label-align 对齐方式
-->
<uni-forms-item label="品牌招牌" required name="thumb">
<uni-file-picker v-model="brandFormData.thumb" fileMediatype="image" mode="grid" :limit="1" />
<!--
v-model="brandFormData.thumb" 双向绑定所里略图这里默认是一个数组下面定义data 就一个数组
fileMediatype 文件类型是图像
mode 文件呈现的样式要不是list 列表要不是九宫格的grid
上面是三个基本的属性
limit 限制传几个文件一般logo就一张。
-->
</uni-forms-item>
<uni-forms-item label="品牌名称" name="name" required>
<uni-easyinput type="text" v-model="brandFormData.name" placeholder="请输入品牌名称" />
</uni-forms-item>
<uni-forms-item label="商户电话" name="mobile" required>
<uni-easyinput type="text" v-model="brandFormData.mobile" placeholder="请输入商户电话" />
</uni-forms-item>
<uni-forms-item label="商户地址" name="address" required>
<uni-easyinput v-model="brandFormData.address" placeholder="请输入商户地址" />
</uni-forms-item>
<uni-forms-item label="商家介绍" name="about">
<uni-easyinput v-model="brandFormData.about" placeholder="请输入商家介绍" type="textarea" />
</uni-forms-item>
<button type="primary" @click="onSubmit">提交信息</button>
</uni-forms>
</view>
</template>
<script>
import {
mapMutations
} from "vuex"
const brandCloudObj = uniCloud.importObject("green-mall-brand")
export default {
data() {
return {
brandFormData: {
thumb: [], //数组
name: "", //品牌名称
mobile: "",
address: "",
about: ""
},
brandRules: {
thumb: {
rules: [{
required: true,
errorMessage: "品牌招聘需要上传"
}]
},
name: {
rules: [{
required: true,
errorMessage: "请输入正确的品牌名称"
}, {
minLength: 3,
maxLength: 20,
errorMessage: '长度在{minLength}到{maxLength}的字符'
}]
},
mobile: {
rules: [{
required: true,
errorMessage: "请输入正确的手机号码"
}, {
validateFunction: function(rule, value, data, callback) {
let res = /^1[3-9]\d{9}$/.test(value);
if (!res) {
callback("手机格式不正确")
}
return;
}
}]
},
address: {
rules: [{
required: true,
errorMessage: "请输入正确的商户地址"
}, {
minLength: 6,
maxLength: 100,
errorMessage: '长度在{minLength}到{maxLength}的字符'
}]
}
}
};
},
onLoad() {
this.isManage();
this.getBrand();
},
//这是日狗了，它大爷的
onReady() {
this.$nextTick(() => {
this.$refs.brandRef.setRules(this.brandRules);
});
},
methods: {
...mapMutations(["SET_BRAND"]),
//获取数据库中的品牌信息
getBrand() {
brandCloudObj.get().then(res => {
if (!res.data.length) return;
this.brandFormData = res.data[0]
})
},
//点击提交按钮
onSubmit() {
this.$refs.brandRef.validate().then(res => {
let arr = this.brandFormData.thumb.map(item => {
return {
extname: item.extname,
url: item.url,
name: item.name,
size: item.size
}
})
this.brandFormData.thumb = arr;
this.addAndUpdate();
}).catch(err => {
// console.log(err);
})
},
//新增或者修改品牌啊信息
async addAndUpdate() {
let title;
if (this.brandFormData._id) {
let res = await brandCloudObj.update(this.brandFormData)
title = "修改成功"
} else {
//新增
await brandCloudObj.add(this.brandFormData)
title = "新增成功"
}
uni.showToast({
title,
mask: true
})
setTimeout(() => {
uni.navigateBack();
}, 1500)
this.SET_BRAND(this.brandFormData);
}
}
}
</script>
<style lang="scss" scoped>
.brand {
padding: 30rpx;
//间距是30rpx，每一个标签之标签内部需要label-width 来调整
}
</style>

复制代码