300 lines
8.3 KiB
Vue
300 lines
8.3 KiB
Vue
<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 {
|
||
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 {
|
||
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))
|
||
}
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
if (e.id) {
|
||
const id = e.id
|
||
this.formDataId = id
|
||
this.getDetail(id)
|
||
}
|
||
},
|
||
onReady() {
|
||
this.$refs.form.setRules(this.rules)
|
||
},
|
||
methods: {
|
||
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()
|
||
})
|
||
},
|
||
|
||
async updateImage(index) {
|
||
const that = this;
|
||
uni.chooseImage({
|
||
sourceType:["album","camera"],
|
||
count: 1,
|
||
success: async (res) => {
|
||
console.log(res);
|
||
if (!this.cms.cmsLst[index] && this.cms.cmsLst[index].image.src) {
|
||
await uniCloudStorageExtCo.deleteFile([this.cms.cmsLst[index].image.src]);
|
||
}
|
||
if (res.tempFilePaths.length > 0) {
|
||
let filePath = res.tempFilePaths[0];
|
||
let {
|
||
name,
|
||
extname
|
||
} = that.getFileInfo(filePath)
|
||
console.log(`cms/image/${name}_${Math.random().toString(36).substr(2,6)}`)
|
||
const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({
|
||
cloudPath: `cms/image/${name}_${Math.random().toString(36).substr(2,6)}`
|
||
});
|
||
console.log(uploadFileOptionsRes)
|
||
|
||
await uniCloud.uploadFile({
|
||
...uploadFileOptionsRes.uploadFileOptions,
|
||
filePath: filePath,
|
||
cloudPath: uploadFileOptionsRes.cloudPath,
|
||
success: async () => {
|
||
const res2 = {
|
||
cloudPath: uploadFileOptionsRes.cloudPath,
|
||
fileID: uploadFileOptionsRes.fileID,
|
||
fileURL: uploadFileOptionsRes.fileURL
|
||
};
|
||
console.log(res2)
|
||
|
||
const selectedMedia = {
|
||
src: res2.fileID,
|
||
alt: name
|
||
}
|
||
console.log(selectedMedia)
|
||
|
||
this.cms.cmsLst[index].image.src = selectedMedia.src;
|
||
console.log("上传成功", res2);
|
||
},
|
||
fail: (err) => {
|
||
console.log("上传失败", err);
|
||
}
|
||
});
|
||
|
||
} else {
|
||
console.log("未选中文件")
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 提交表单
|
||
*/
|
||
submitForm(value) {
|
||
// 使用 clientDB 提交数据
|
||
return db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {
|
||
uni.showToast({
|
||
title: '修改成功'
|
||
})
|
||
this.getOpenerEventChannel().emit('refreshData')
|
||
setTimeout(() => uni.navigateBack(), 500)
|
||
}).catch((err) => {
|
||
uni.showModal({
|
||
content: err.message || '请求服务失败',
|
||
showCancel: false
|
||
})
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 获取表单数据
|
||
* @param {Object} id
|
||
*/
|
||
getDetail(id) {
|
||
uni.showLoading({
|
||
mask: true
|
||
})
|
||
db.collection(dbCollectionName).doc(id).field(
|
||
"font_color,backgrond_color,select_src,temptele_src,temptele_name,select_icon_color,icon_color,user_name_color,btn_color"
|
||
).get().then((res) => {
|
||
const data = res.result.data[0]
|
||
if (data) {
|
||
this.formData = data
|
||
|
||
}
|
||
}).catch((err) => {
|
||
uni.showModal({
|
||
content: err.message || '请求服务失败',
|
||
showCancel: false
|
||
})
|
||
}).finally(() => {
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</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> |