uniapp-商城-61-后臺新增商品（添加商品到數據庫）

完成商品的布局，完成商品的屬性添加，最后的目的還是要完成數據添加，將我們前臺的數據添加后臺的數據庫。

1、界面

2、點擊提交完成商品添加

點擊下方的提交按鈕，將數據添加到數據庫。

onSubmit? 使用該函數---見3

??????????? <view class="btnView">
??????????????? <button type="primary" @click="onSubmit">確認提交</button>
??????????? </view>

3、提交按鈕的處理邏輯

3.1?onSubmit接口

??????????? //點擊提交表單
??????????? onSubmit() {
??????????????? this.$refs.goodsForm.validate().then(res => {
??????????????????? this.toDataBase();?? //調用toDataBase?? ---見 3.2

??????????????? }).catch(err => {
??????????????????? console.log(err);
??????????????? })
??????????? },

這里看出，先找到了?goodsForm的表單名，進行驗證，通過驗證就執行?toDataBase

表單?goodsForm 在代碼的開始部分已經定義了

驗證采用的規則也在前面講過了

3.2?toDataBase 接口到數據庫保存

??????????? //上傳到云數據庫
??????????? async toDataBase() {
??????????????? //這里缺少一個更新的按鈕，需要在list中去實現

??????????????? // console.log(this.goodsFormData.thumb);?? //這里的數據太多了，需要處理一下
??????????????? this.goodsFormData.thumb = this.goodsFormData.thumb.map(item => {
??????????????????? return {
??????????????????????? url: item.url,
??????????????????????? name: item.name,
??????????????????????? extname: item.extname
??????????????????? }
??????????????? })

??????????????? let res = await goodsCloudObj.add(this.goodsFormData)? //使用云對象處理
??????????????? uni.showToast({
??????????????????? title: "新增商品成功"
??????????????? })
??????????????? setTimeout(() => {
??????????????????? uni.navigateBack()
??????????????? }, 1500)

??????????? }

3.2.1 處理圖片??this.goodsFormData.thumb

前面商家信息也遇到這個問題，商家信息也要處理，主要默認上傳的圖片的數據太多了，需要清理一下，截取我們需要的數據。

??????????????? //這里缺少一個更新的按鈕，需要在list中去實現
??????????????? // console.log(this.goodsFormData.thumb);?? //這里的數據太多了，需要處理一下
??????????????? this.goodsFormData.thumb = this.goodsFormData.thumb.map(item => {
??????????????????? return {
??????????????????????? url: item.url,
??????????????????????? name: item.name,
??????????????????????? extname: item.extname
??????????????????? }
??????????????? })

?3.2.2 云對象上傳商品數據

3.2.2.1、創建云對象?green-mall-goods

???

代碼：

const db = uniCloud.database();

async add(params){
??????? params.price = Number(params.price).toFixed(2)*100
??????? params.before_price = params.before_price ? Number(params.before_price).toFixed(2)*100 : null
??????? return await db.collection("green-mall-goods").add(params);?????? ?
??? },

3.2.2.2 頁面邏輯引入

在頁面引入：

??? const goodsCloudObj = uniCloud.importObject("green-mall-goods", {
??????? "customUI": true
??? })

4、整體代碼

<template><view class="goodsView"><!-- 添加商品 --><uni-forms ref="goodsForm" :model="goodsFormData" :rules="goodsRules" :label-width="100" label-align="right"><uni-forms-item label="商品圖片" required="true"><uni-file-picker v-model="goodsFormData.thumb" fileMediatype="image" mode="grid" ></uni-file-picker></uni-forms-item><uni-forms-item label="商品名稱" required name="name" ><!-- trim 去空格 --><uni-easyinput v-model="goodsFormData.name" placeholder="請輸入商品名稱" trim="both"></uni-easyinput></uni-forms-item><uni-forms-item label="產品分類" required name="category_id"><!-- 云端數據  下拉框獲取  field 就是獲取的內容  一定要寫成 value text 這是官方定義的  value選中的值，text顯示的文本，也就是value后臺用，text前臺用 --><!-- 利用這個組件就實現了后端數據庫的讀取 --><uni-data-select collection="green-mall-categories" field="_id as value, name as text"v-model="goodsFormData.category_id"></uni-data-select></uni-forms-item><uni-forms-item label="商品價格" required name="price"><!-- trim 去空格 --><uni-easyinput type="number" v-model="goodsFormData.price" placeholder="請輸入商品價格"trim="both"></uni-easyinput></uni-forms-item><uni-forms-item label="商品原價"><!-- trim 去空格 --><uni-easyinput type="number" v-model="goodsFormData.before_price" placeholder="請輸入原價"trim="both"></uni-easyinput></uni-forms-item><uni-forms-item label="商品屬性" ><u-cell :title="skuTitle" isLink :border="false" @click="clickSelect"></u-cell><view class="skuList"><view class="item" v-for="item in goodsFormData.sku_select" @click="clickSelect"><view class="left">{{item.skuName}}:</view><view class="right">{{skuChildName(item.children)}}</view></view></view></uni-forms-item><uni-forms-item label="商品描述"><!-- type 是類型  textarea 就是大框 --><uni-easyinput type="textarea" placeholder="請輸入詳細的描述信息"v-model="goodsFormData.description"></uni-easyinput></uni-forms-item><view class="btnView"><button type="primary" @click="onSubmit">確認提交</button></view></uni-forms><uni-popup ref="attrWrapPop" type="bottom"><!-- 底部彈出 type ref 是一個名字屬性，便于被調用 給 clickSelect 在 clickSelect 函數中調用了該接口--><view class="attrWrapper"><!-- 分三部分  就是上中下 頭身體和尾部 --><view class="head"><view class="title">商品屬性</view><!-- clickAddAttr函數  添加屬性的--><view class="addAttr" @click="clickAddAttr()">+ 添加屬性</view></view><view class="body"><!-- 讀取 skuArr 循環顯示 分兩部分顯示 top 和 btngroup--><view class="item" v-for="(item,index) in skuArr"><view class="top"><checkbox :checked="item.checked" @click="changeCheckbox(index)"></checkbox><!-- changeCheckbox  選中就做這個操作 --><!-- checked 是否被選中的屬性標識 --><view class="font">{{item.skuName}}</view></view><view class="btnGroup" v-if="item.checked"><!-- 需要判斷checked 是不是true  是不是選中，選中了就展示--><view class="btn" :class="child.checked?'active':''" v-for="(child,cIdx) in item.children"@click="clickChlidBtn(index,cIdx)">{{child.name}}</view><!-- btn 讀取skuArr ，循環顯示選中就加class 為active  點擊 就執行 clickChlidBtn函數--><view class="btn" @click="clickAddAttr(index)"><!-- btn 該盒子就是一個 + 號，用來添加該屬性下的選項 clickAddAttr 點就執行uicon就一個 + 號圖標  --><u-icon name="plus"></u-icon></view></view></view></view><view class="foot"><button type="primary" @click="clickConfirmSelect">確認選擇</button><!-- 按鈕 ，藍色提交按鈕type 就是顏色格式點擊就是確認該商品的屬性clickConfirmSelect--></view></view><view class="safe-area-bottom"></view><!--防止被蘋果虛擬home鍵 擋住 --><!-- 這里就是直接調用的app.vue的全局樣式。什么是全局樣式：就是樣式那里沒有scoped 的，所以在以前老是要寫一個表示局部樣式，就怕vue 中class名字一樣了如果你不些scoped ，就要把全局的view 的class 寫在最前面。不知道懂不懂，慢慢悟吧--></uni-popup><!-- 這里是點擊的添加屬性的彈窗 --><!-- 你可能懵逼了那個添加屬性的彈窗？兩個彈窗都要用一個是第一個彈窗中的右上角的添加屬性  class名字 addAttr一個是屬性規格下的選項中的 + class的名字就是btn--><uni-popup ref="addAttrPop"><uni-popup-dialog mode="input" title="新增" placeholder="請輸入新增的內容"@confirm="dialogConfirm"></uni-popup-dialog><!-- dialogConfirm 是一個確認后處理邏輯 --></uni-popup></view>
</template><script>const skuCloudObj = uniCloud.importObject("green-mall-sku", {"customUI": true});const goodsCloudObj = uniCloud.importObject("green-mall-goods", {"customUI": true})export default {data() {return {goodsFormData: {thumb: [],name: "",category_id: null,price: null,before_price: null,description: "",sku_select: []},addAttrType: "parent", //parent代表父，child代表子goodsRules: {name: {rules: [{required: true,errorMessage: "請輸入產品名稱"}]},price: {rules: [{required: true,errorMessage: "請輸入產品價格"}]},category_id: {rules: [{required: true,errorMessage: "請輸入產品分類"}]}},/*skuArr: [{_id:1,skuName:"顏色",checked:false,children:[{name:"紅",checked:false},{name:"藍",checked:false}]},{_id:2,skuName:"規格",checked:false,children:[{name:"M",checked:false},{name:"S",checked:false}]}],*/// 上面是一個數據結構例子，后臺數據就應該著這樣存// 實際是下面的[]skuArr: [],};},onLoad() {},computed: {skuTitle() {if (this.goodsFormData.sku_select.length) {let arr = this.goodsFormData.sku_select.map(item => {return item.skuName})console.log(arr);return arr.join("/")} else {return "點擊添加屬性"}}},methods: {//屬性返回子元素的名稱skuChildName(arr) {let nsArr = arr.map(item => {return item.name})return nsArr.join("/")},//點擊確認選擇 是在彈出框上選//some 數組至少有一個滿足 沒有就是false   every就是每一個都要滿足，不滿足就是false// 這里filter 選出父級屬性 checked =true 被選中的 且子級屬性有一個被選中的數組對象；// 然后再對選中的對象，逐一進行map運算//運算就是filter 過濾出來選中的子級元素//返回一個 數組 arr 且元素為一個對象，對象展開了item ，然后將children的值放到里面，覆蓋item中的childrenclickConfirmSelect() {let arr = this.skuArr.filter(item => {let state = item.children.some(child => child.checked)  return item.checked && state}).map(item => {let children = item.children.filter(child => {return child.checked})// console.log(item,11111111);// console.log(children,2222222);return {...item,// children   //覆蓋了item中children}})this.goodsFormData.sku_select = arr   //賦值后，頁面在使用這個數組來顯示  立即回顯this.$refs.attrWrapPop.close();   //關閉掉彈窗},//獲取sku列表async getSkuData() {let res = await skuCloudObj.get();this.skuArr = res.data// console.log(res);},//點擊添加屬性 index 存在就是嵌套下 父類屬性的子類選項 ，不存在就是添加父類屬性clickAddAttr(index = null) {if (index == null) {this.addAttrType = "parent"this.attrIndex = null} else {this.addAttrType = "child"this.attrIndex = index}this.$refs.addAttrPop.open();},//添加屬性彈窗的確認按鈕async dialogConfirm(e) {if (!e) return;if (this.addAttrType == "parent") {let obj = {skuName: e,checked: true,children: []}let res = await skuCloudObj.add(obj)obj._id = res.id;this.skuArr.push(obj)//向數組中添加一個元素，就彈窗的確認按鈕} else if (this.addAttrType == "child") {let obj = {name: e,checked: true}let id = this.skuArr[this.attrIndex]._id;let res = await skuCloudObj.updateChild(id, obj)this.skuArr[this.attrIndex].children.push(obj)}},//點擊屬性的復選框	改變了值，也相應改變了顯示 后面也把值存到了數據庫changeCheckbox(index) {this.skuArr[index].checked = !this.skuArr[index].checked},//點擊屬性值的子元素  改變了值，也相應改變了顯示 后面也把值存到了數據庫clickChlidBtn(index, cIdx) {this.skuArr[index].children[cIdx].checked = !this.skuArr[index].children[cIdx].checked},//點擊選擇屬性clickSelect() {this.$refs.attrWrapPop.open(); //使用open方法彈出來if (this.skuArr.length) return;this.getSkuData();},//點擊提交表單onSubmit() {this.$refs.goodsForm.validate().then(res => {this.toDataBase();}).catch(err => {console.log(err);})},//上傳到云數據庫async toDataBase() {//這里缺少一個更新的按鈕，需要在list中去實現// console.log(this.goodsFormData.thumb);   //這里的數據太多了，需要處理一下this.goodsFormData.thumb = this.goodsFormData.thumb.map(item => {return {url: item.url,name: item.name,extname: item.extname}})let res = await goodsCloudObj.add(this.goodsFormData)uni.showToast({title: "新增商品成功"})setTimeout(() => {uni.navigateBack()}, 1500)}}}
</script><style lang="scss" scoped>.goodsView {padding: 30rpx;.skuList {.item {padding: 30rpx;background: $page-bg-color;margin: 15rpx 0;@include flex-box-set(start);}}}.attrWrapper {padding: 30rpx;background: #fff;border-radius: 20rpx 20rpx 0 0;.head {@include flex-box();font-size: 34rpx;margin-bottom: 30rpx;.title {font-weight: bold;}.addAttr {color: $brand-theme-color-aux;}}.body {.item {border-top: 1px solid $border-color-light;&:last-child {border-bottom: 1px solid $border-color-light;}.top {padding: 30rpx 0;@include flex-box-set(start);.font {padding-left: 10rpx;font-weight: bold;}}.btnGroup {padding: 10rpx 0 30rpx;@include flex-box-set(start);flex-wrap: wrap;.btn {padding: 0rpx 25rpx;height: 60rpx;border: 1rpx solid $border-color-light;margin-right: 20rpx;border-radius: 10rpx;color: $text-font-color-2;margin-bottom: 20rpx;@include flex-box-set();&.active {border-color: $brand-theme-color;color: $brand-theme-color;background: rgba(236, 87, 79, 0.1);}}}}}.foot {padding: 50rpx 200rpx;}}
</style>