<template>
<view class="uni-container">
<uni-forms ref="form" :model="formData" validateTrigger="bind" labelWidth="90px">
<uni-forms-item name="title" label="商品标题" required>
<uni-easyinput placeholder="商品标题" v-model="formData.title" trim="both"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="primaryImage" label="商品主图" required>
<uni-file-picker file-mediatype="image" file-extname="jpg,png" return-type="object" v-model="formData.primaryImage"></uni-file-picker>
</uni-forms-item>
<uni-forms-item name="images" label="商品轮播图" required>
<uni-file-picker file-mediatype="image" file-extname="jpg,png" :limit="6" return-type="array" v-model="formData.images"></uni-file-picker>
</uni-forms-item>
<uni-forms-item name="classify" label="商品类别" required>
<uni-data-picker v-model="formData.classify" collection="lingshi_classify" field="name as value, name as text"></uni-data-picker>
</uni-forms-item>
<uni-forms-item name="price" label="商品价格" required>
<uni-easyinput placeholder="商品价格，单位为分" type="number" v-model="formData.price"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="stockQuantity" label="商品库存">
<uni-easyinput placeholder="商品库存" type="number" v-model="formData.stockQuantity"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="soldNum" label="已售数量">
<uni-easyinput placeholder="已售数量" type="number" v-model="formData.soldNum"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="tagList" label="商品标签">
<uni-easyinput placeholder="商品标签，以中文逗号分隔" v-model="formData.tagList"></uni-easyinput>
</uni-forms-item>
<uni-card title="商品详情" :image-styles="{'height': '500rpx','width' : '300rpx'}" margin="0">
<uni-forms-item name="describes" label="商品信息" required>
<textarea :maxlength="-1" auto-height placeholder="标题:内容,(符号全以中文书写,多个信息以逗号分隔)"
@input="binddata('describes', $event.detail.value)" class="uni-textarea-border"
v-model="formData.describes">
</textarea>
</uni-forms-item>
<uni-forms-item name="detaiLimages" label="商品详情图" required>
<uni-file-picker file-mediatype="image" file-extname="jpg,png" :limit="6" return-type="array" v-model="formData.detaiLimages"></uni-file-picker>
</uni-forms-item>
</uni-card>
<!-- <uni-forms-item name="create_date" label="创建时间">
<uni-dateformat return-type="timestamp" v-model="formData.create_date"></uni-dateformat>
</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/lingshi_goods_details.js';
const db = uniCloud.database();
const dbCmd = db.command;
const dbCollectionName = 'lingshi_goods_details';
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 = {
// "skuId": null,
"title": "",
"primaryImage": null,
"images": [],
"classify": "",
"price": 999,
"stockQuantity": 100,
"soldNum": 50,
// "tagList": [],
// "describes": [],
"tagList": null,
"describes": null,
"detaiLimages": null,
// "create_date": null
}
return {
formData,
formOptions: {},
// rules: {
// ...getValidator(Object.keys(formData))
// }
}
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
/
生成skuId唯一标识方法
作者：泽南Zn
链接：https://juejin.cn/post/7184359234060943421
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
/
// 利用时间戳
getSkuId () {
const time = Date.now()
return String(time)
},
/**
* 验证表单并提交
*/
submit() {
uni.showLoading({
mask: true
})
this.$refs.form.validate().then((res) => {
if(res.tagList && res.tagList.trim()){
let tagList = []
res.tagList.split('，').forEach((item) => {
if(item.trim()) tagList.push(item.trim())
})
if(tagList.length>0) {
res.tagList = tagList
} else {res.tagList = null}
}else{res.tagList = null}
if(res.price){
const cent_price = res.price*100
res.price = cent_price
}
if(res.stockQuantity){
const stockQuantity = res.stockQuantity
console.log(typeof(stockQuantity))
if(typeof(stockQuantity)=='string') res.stockQuantity = parseInt(stockQuantity)
}
if(res.soldNum){
const soldNum = res.soldNum
console.log(typeof(soldNum))
if(typeof(soldNum)=='string') res.soldNum = parseInt(soldNum)
}
if(res.describes && res.describes.trim()){
const desc_list = res.describes.split('，')
if (desc_list.length>0){
let desc_obj = {}
let describes = []
desc_list.forEach((item) => {
if(item.trim()){
try {
const desc_obj_str = item.split('：')
const title = desc_obj_str[0].trim()
const content = desc_obj_str[1].trim()
if (!title || !content) {
uni.showToast({
icon: 'error',
title: '商品信息格式错误'
})
throw '商品信息格式错误';
}
desc_obj['title'] = title
desc_obj['content'] = content
describes.push(desc_obj)
desc_obj = {}
}catch (e) {
uni.showToast({
icon: 'error',
title: '商品信息格式错误'
})
throw e;
}
}
})
if(describes.length>0){
res.describes = describes
}else{throw '商品信息格式错误';}
}
res['skuId'] = this.getSkuId()
}else{
uni.showToast({
icon: 'error',
title: '商品信息格式错误'
})
throw '商品信息格式错误';
}
console.log(res.describes)
return this.submitForm(res)
}).catch((e) => {
console.log(e)
}).finally(() => {
uni.hideLoading()
})
},
// 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>
