feat(B批收尾): B1门禁可信/B7-1菜单环防护/B2空值守卫/B7-2分页/B7-3字段清洗/B3空态/B4索引key/B5-3 comment三集合选A新建schema(漂移清零)/B6清理+admin配置+changelog
This commit is contained in:
12914
+262
-280
@@ -1,281 +1,263 @@
|
||||
<template>
|
||||
<view class="uni-container">
|
||||
<uni-forms ref="form" :model="formData" validateTrigger="bind">
|
||||
<uni-forms-item name="font_color" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
文字颜色代码
|
||||
</view>
|
||||
<uni-easyinput placeholder="文字颜色代码" v-model="formData.font_color"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="backgrond_color" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
背景颜色代码
|
||||
</view>
|
||||
<uni-easyinput placeholder="背景颜色代码" v-model="formData.backgrond_color"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="select_src" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
素材选择地址
|
||||
</view>
|
||||
<uni-easyinput placeholder="素材选择地址" v-model="formData.select_src" disabled="false"></uni-easyinput>
|
||||
<view class="container" @click="updateImage('select_src')">
|
||||
<view v-if="!formData.select_src">
|
||||
<view class="cross-line horizontal"></view>
|
||||
<view class="cross-line vertical"></view>
|
||||
</view>
|
||||
<cloud-image v-else width="400rpx" height="400rpx" mode="scaleToFill" :src="formData.select_src">
|
||||
</cloud-image>
|
||||
</view>
|
||||
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="temptele_src" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
模板素材地址
|
||||
</view>
|
||||
<uni-easyinput placeholder="模板素材地址" v-model="formData.temptele_src" disabled="false"></uni-easyinput>
|
||||
<view class="container" @click="updateImage('temptele_src')">
|
||||
<view v-if="!formData.temptele_src">
|
||||
<view class="cross-line horizontal"></view>
|
||||
<view class="cross-line vertical"></view>
|
||||
</view>
|
||||
<cloud-image v-else width="400rpx" height="400rpx" mode="scaleToFill" :src="formData.temptele_src">
|
||||
</cloud-image>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="temptele_name" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
模板名称
|
||||
</view>
|
||||
<uni-easyinput placeholder="模板名称" v-model="formData.temptele_name"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="select_icon_color" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
图标选中颜色的代码
|
||||
</view>
|
||||
<uni-easyinput placeholder="图标选中颜色的代码" v-model="formData.select_icon_color"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="icon_color" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
图标未选中颜色的代码
|
||||
</view>
|
||||
<uni-easyinput placeholder="图标未选中颜色的代码" v-model="formData.icon_color"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="user_name_color" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
默认用户名字颜色的代码
|
||||
</view>
|
||||
<uni-easyinput placeholder="默认用户名字颜色的代码" v-model="formData.user_name_color"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="btn_color" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
按钮（回复和删除评论）默认颜色的代码
|
||||
</view>
|
||||
<uni-easyinput placeholder="按钮（回复和删除评论）默认颜色的代码" v-model="formData.btn_color"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<view class="uni-button-group">
|
||||
<button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
|
||||
<navigator open-type="navigateBack" style="margin-left: 15px;">
|
||||
<button class="uni-button" style="width: 100px;">返回</button>
|
||||
</navigator>
|
||||
</view>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cloudImage from "@/components/cloud-image.vue"
|
||||
import {
|
||||
validator
|
||||
} from '../../js_sdk/validator/cms-temp.js';
|
||||
|
||||
const db = uniCloud.database();
|
||||
const dbCmd = db.command;
|
||||
const dbCollectionName = 'cms-temp';
|
||||
|
||||
function getValidator(fields) {
|
||||
let result = {}
|
||||
for (let key in validator) {
|
||||
if (fields.includes(key)) {
|
||||
result[key] = validator[key]
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
cloudImage
|
||||
},
|
||||
data() {
|
||||
let formData = {
|
||||
"font_color": "",
|
||||
"backgrond_color": "",
|
||||
"select_src": "",
|
||||
"temptele_src": "",
|
||||
"temptele_name": "",
|
||||
"select_icon_color": "",
|
||||
"icon_color": "",
|
||||
"user_name_color": "",
|
||||
"btn_color": ""
|
||||
}
|
||||
return {
|
||||
formData,
|
||||
formOptions: {},
|
||||
rules: {
|
||||
...getValidator(Object.keys(formData))
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.form.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
getFileInfo(path) {
|
||||
const parts = path.split('/').pop();
|
||||
const [filename, ...extParts] = parts.split('.');
|
||||
const ext = extParts.length ? extParts.pop() : '';
|
||||
return {
|
||||
name: filename,
|
||||
extname: ext
|
||||
};
|
||||
},
|
||||
formatBytes(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
if (i >= sizes.length) return '> 1 TB';
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
},
|
||||
async updateImage(type) {
|
||||
const that = this;
|
||||
uni.chooseImage({
|
||||
type: "image",
|
||||
count: 1,
|
||||
success: async (res) => {
|
||||
console.log(res);
|
||||
if (res.tempFilePaths.length > 0) {
|
||||
let filePath = res.tempFilePaths[0];
|
||||
let {
|
||||
name,
|
||||
extname
|
||||
} = that.getFileInfo(filePath)
|
||||
const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co");
|
||||
console.log(`temp/${name}`)
|
||||
const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({
|
||||
cloudPath: `temp/${name}`
|
||||
});
|
||||
console.log(uploadFileOptionsRes)
|
||||
await uniCloud.uploadFile({
|
||||
...uploadFileOptionsRes.uploadFileOptions,
|
||||
filePath: filePath,
|
||||
cloudPath: uploadFileOptionsRes.cloudPath,
|
||||
success: () => {
|
||||
const res = {
|
||||
cloudPath: uploadFileOptionsRes.cloudPath,
|
||||
fileID: uploadFileOptionsRes.fileID,
|
||||
fileURL: uploadFileOptionsRes.fileURL
|
||||
};
|
||||
console.log(res)
|
||||
|
||||
that.setFormData_src(res, type);
|
||||
|
||||
console.log("上传成功", res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log("上传失败", err);
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
console.log("未选中文件")
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
async setFormData_src(uploadRes, type) {
|
||||
if (uploadRes && uploadRes.fileID) {
|
||||
if (type === "temptele_src") {
|
||||
this.formData.temptele_src = uploadRes.fileID;
|
||||
} else if (type === "select_src") {
|
||||
this.formData.select_src = uploadRes.fileID;
|
||||
}
|
||||
console.log("上传成功", uploadRes);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 验证表单并提交
|
||||
*/
|
||||
submit() {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
this.$refs.form.validate().then((res) => {
|
||||
return this.submitForm(res)
|
||||
}).catch(() => {}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交表单
|
||||
*/
|
||||
submitForm(value) {
|
||||
// 使用 clientDB 提交数据
|
||||
return db.collection(dbCollectionName).add(value).then((res) => {
|
||||
uni.showToast({
|
||||
title: '新增成功'
|
||||
})
|
||||
this.getOpenerEventChannel().emit('refreshData')
|
||||
setTimeout(() => uni.navigateBack(), 500)
|
||||
}).catch((err) => {
|
||||
uni.showModal({
|
||||
content: err.message || '请求服务失败',
|
||||
showCancel: false
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.margin_b_t_20 {
|
||||
margin_top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
}
|
||||
|
||||
.cross-line {
|
||||
position: absolute;
|
||||
background-color: #ccc;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
width: 50rpx;
|
||||
height: 5rpx;
|
||||
border-radius: 2rpx;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.vertical {
|
||||
height: 50rpx;
|
||||
width: 5rpx;
|
||||
border-radius: 2rpx;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
<template>
|
||||
<view class="uni-container">
|
||||
<uni-forms ref="form" :model="formData" validateTrigger="bind">
|
||||
<uni-forms-item name="font_color" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
文字颜色代码
|
||||
</view>
|
||||
<uni-easyinput placeholder="文字颜色代码" v-model="formData.font_color"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="backgrond_color" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
背景颜色代码
|
||||
</view>
|
||||
<uni-easyinput placeholder="背景颜色代码" v-model="formData.backgrond_color"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="select_src" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
素材选择地址
|
||||
</view>
|
||||
<uni-easyinput placeholder="素材选择地址" v-model="formData.select_src" :disabled="true"></uni-easyinput>
|
||||
<view class="container" @click="updateImage('select_src')">
|
||||
<view v-if="!formData.select_src">
|
||||
<view class="cross-line horizontal"></view>
|
||||
<view class="cross-line vertical"></view>
|
||||
</view>
|
||||
<cloud-image v-else width="400rpx" height="400rpx" mode="scaleToFill" :src="formData.select_src">
|
||||
</cloud-image>
|
||||
</view>
|
||||
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="temptele_src" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
模板素材地址
|
||||
</view>
|
||||
<uni-easyinput placeholder="模板素材地址" v-model="formData.temptele_src" :disabled="true"></uni-easyinput>
|
||||
<view class="container" @click="updateImage('temptele_src')">
|
||||
<view v-if="!formData.temptele_src">
|
||||
<view class="cross-line horizontal"></view>
|
||||
<view class="cross-line vertical"></view>
|
||||
</view>
|
||||
<cloud-image v-else width="400rpx" height="400rpx" mode="scaleToFill" :src="formData.temptele_src">
|
||||
</cloud-image>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="temptele_name" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
模板名称
|
||||
</view>
|
||||
<uni-easyinput placeholder="模板名称" v-model="formData.temptele_name"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="select_icon_color" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
图标选中颜色的代码
|
||||
</view>
|
||||
<uni-easyinput placeholder="图标选中颜色的代码" v-model="formData.select_icon_color"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="icon_color" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
图标未选中颜色的代码
|
||||
</view>
|
||||
<uni-easyinput placeholder="图标未选中颜色的代码" v-model="formData.icon_color"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="user_name_color" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
默认用户名字颜色的代码
|
||||
</view>
|
||||
<uni-easyinput placeholder="默认用户名字颜色的代码" v-model="formData.user_name_color"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="btn_color" label="" required>
|
||||
<view class="margin_b_t_20">
|
||||
按钮（回复和删除评论）默认颜色的代码
|
||||
</view>
|
||||
<uni-easyinput placeholder="按钮（回复和删除评论）默认颜色的代码" v-model="formData.btn_color"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<view class="uni-button-group">
|
||||
<button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
|
||||
<navigator open-type="navigateBack" style="margin-left: 15px;">
|
||||
<button class="uni-button" style="width: 100px;">返回</button>
|
||||
</navigator>
|
||||
</view>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cloudImage from "@/components/cloud-image.vue"
|
||||
import {
|
||||
validator
|
||||
} from '../../js_sdk/validator/cms-temp.js';
|
||||
|
||||
const db = uniCloud.database();
|
||||
const dbCmd = db.command;
|
||||
const dbCollectionName = 'cms-temp';
|
||||
|
||||
function getValidator(fields) {
|
||||
let result = {}
|
||||
for (let key in validator) {
|
||||
if (fields.includes(key)) {
|
||||
result[key] = validator[key]
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
cloudImage
|
||||
},
|
||||
data() {
|
||||
let formData = {
|
||||
"font_color": "",
|
||||
"backgrond_color": "",
|
||||
"select_src": "",
|
||||
"temptele_src": "",
|
||||
"temptele_name": "",
|
||||
"select_icon_color": "",
|
||||
"icon_color": "",
|
||||
"user_name_color": "",
|
||||
"btn_color": ""
|
||||
}
|
||||
return {
|
||||
formData,
|
||||
formOptions: {},
|
||||
rules: {
|
||||
...getValidator(Object.keys(formData))
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.form.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
getFileInfo(path) {
|
||||
const parts = path.split('/').pop();
|
||||
const [filename, ...extParts] = parts.split('.');
|
||||
const ext = extParts.length ? extParts.pop() : '';
|
||||
return {
|
||||
name: filename,
|
||||
extname: ext
|
||||
};
|
||||
},
|
||||
formatBytes(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
if (i >= sizes.length) return '> 1 TB';
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
},
|
||||
async updateImage(type) {
|
||||
// B4-2：照 edit.vue 的 try/catch + await 写法重写（此前 success 回调 + 未捕获异常）
|
||||
uni.chooseImage({
|
||||
sourceType: ['album', 'camera'],
|
||||
count: 1,
|
||||
success: async (res) => {
|
||||
const filePath = res.tempFilePaths && res.tempFilePaths[0]
|
||||
if (!filePath) return
|
||||
try {
|
||||
const { name } = await this.getFileInfo(filePath)
|
||||
const extCo = uniCloud.importObject('ext-storage-co')
|
||||
const upload = await extCo.getUploadFileOptions({
|
||||
cloudPath: `cms/image/${name}_${Math.random().toString(36).slice(2, 8)}`
|
||||
})
|
||||
const uploadResult = await uniCloud.uploadFile({
|
||||
...upload.uploadFileOptions,
|
||||
filePath,
|
||||
cloudPath: upload.cloudPath
|
||||
})
|
||||
this.setFormData_src({
|
||||
fileID: uploadResult.fileID || upload.fileID
|
||||
}, type)
|
||||
} catch (error) {
|
||||
uni.showModal({
|
||||
content: error && error.message ? error.message : '图片上传失败',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
async setFormData_src(uploadRes, type) {
|
||||
if (uploadRes && uploadRes.fileID) {
|
||||
if (type === "temptele_src") {
|
||||
this.formData.temptele_src = uploadRes.fileID;
|
||||
} else if (type === "select_src") {
|
||||
this.formData.select_src = uploadRes.fileID;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 验证表单并提交
|
||||
*/
|
||||
submit() {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
this.$refs.form.validate().then((res) => {
|
||||
return this.submitForm(res)
|
||||
}).catch(() => {}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交表单
|
||||
*/
|
||||
submitForm(value) {
|
||||
// 使用 clientDB 提交数据
|
||||
return db.collection(dbCollectionName).add(value).then((res) => {
|
||||
uni.showToast({
|
||||
title: '新增成功'
|
||||
})
|
||||
this.getOpenerEventChannel().emit('refreshData')
|
||||
setTimeout(() => uni.navigateBack(), 500)
|
||||
}).catch((err) => {
|
||||
uni.showModal({
|
||||
content: err.message || '请求服务失败',
|
||||
showCancel: false
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.margin_b_t_20 {
|
||||
margin_top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
}
|
||||
|
||||
.cross-line {
|
||||
position: absolute;
|
||||
background-color: #ccc;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
width: 50rpx;
|
||||
height: 5rpx;
|
||||
border-radius: 2rpx;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.vertical {
|
||||
height: 50rpx;
|
||||
width: 5rpx;
|
||||
border-radius: 2rpx;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user