uniapp-商城-55-后臺新增商品（分類、驗證和彈窗屬性）

1、概述

????????在前面，我們將商品頁面的布局給完成了，這里來對表單的標簽輸入進行校驗，看看這里的校驗還是不是也需要兼容微信小程序，還有沒有前面遇到的自定義正則進行校驗的情況。

????????另外這里還需要完成商品屬性的添加，就是前面在布局中提到的彈窗。彈窗這里涉及的內容還很多，后面我們還會進一步來分析和研究。

2、表單校驗

包含圖片、名稱、價格、類別、屬性、描述等等，這里我們看到應該必須要有圖片、名稱、價格、類別這個幾個元素。

??? <uni-forms ref="goodsForm" :model="goodsFormData" :rules="goodsRules" :label-width="100" label-align="right">

2.1 這里就沒有刪除rules ，因為我們這里沒有自定義的校驗規則。

2.2? 必須填寫的屬性，頁面的froms-item 中要加入 required這個屬性值，js規則部分，要通過name定義其他規則，也加入required，沒有就不管了，如這里的圖。

2.3 要進行規則的校驗，必須填寫name 便于進行規則的指定

沒有name，沒有辦法指定，見上圖

2.4 data的規則數據定義。綁定到標簽的 name

如這里的name 和 price? 就是名稱和價格的規則。寫道我們表單的rules里面（goodsRules）

特別要注意書寫的格式。

3、分類使用的下拉框? 云端數據獲取就這個uni-data-select 可以獲取云端數據，所以用這個組件較為方便。

? 需要安裝，并使用云端數據獲取

			<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>

4、商品屬性采用的cell的單元格（uview中組件，可以被點擊）

4.1 cell

該組件就是cell單元格。一般用于一組列表的情況，比如個人中心頁，設置頁等，默認有一個邊框，且整個可以被點擊。

title是組件顯示的名稱；?

isLink? 就是顯示一個右側的箭頭；

border：不用顯示默認的邊框；注意使用加v-band（也就是加：）

<u-cell :title="skuTitle" isLink :border="false" @click="clickSelect"></u-cell>

然后我們給這個點擊加一個事件。需要-可以讀5小節代碼。

??????????? //點擊選擇屬性
??????????? clickSelect() {
??????????????? this.$refs.attrWrapPop.open();
??????????????? if (this.skuArr.length) return;
??????????????? this.getSkuData();

??????????? },

4.2 在這個組件下面，可以將填寫的屬性展示出來。

具體可以閱讀，5小節的代碼。

??????????????? <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>

4.3 彈出窗使用的uni-popup

前面的章節，也對這個組件進行過研究。

/https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html

在 47 48章節。

4.3.1 第一點擊cell 從底部彈出窗

注意：type要加

		<uni-popup ref="attrWrapPop" type="bottom"><!-- 底部彈出 type ref 是一個名字屬性，便于被調用 給 clickSelect 在 clickSelect 函數中調用了該接口--><view class="attrWrapper"><view class="head"><view class="title">商品屬性</view><view class="addAttr" @click="clickAddAttr()">+ 添加屬性</view></view><view class="body"><view class="item" v-for="(item,index) in skuArr"><view class="top"><checkbox :checked="item.checked" @click="changeCheckbox(index)"></checkbox><view class="font">{{item.skuName}}</view></view><view class="btnGroup" v-if="item.checked"><view class="btn" :class="child.checked?'active':''" v-for="(child,cIdx) in item.children"@click="clickChlidBtn(index,cIdx)">{{child.name}}</view><view class="btn" @click="clickAddAttr(index)"><u-icon name="plus"></u-icon></view></view></view></view><view class="foot"><button type="primary" @click="clickConfirmSelect">確認選擇</button></view></view><view class="safe-area-bottom"></view></uni-popup>

4.3.2 就是展示可以選手屬性元素布局如下

這一部分就是顯示可以選的屬性值

1、屬性可以有多個，如顏色、規格、口味等，就是一個循環實現

????????<view class="item" v-for="(item,index) in skuArr">

2、每一個屬性可以羅列多個可選項進行選擇，并可以手動添加可選項

??????? 2.1 分成兩部分一個top（顯示屬性）前面有一個可選框checkbox，后面是屬性名字

??????? <checkbox :checked="item.checked" @click="changeCheckbox(index)"></checkbox>

????????<view class="font">{{item.skuName}}</view>

??????? 2.2 一個就是可以選的屬性組排列，最后跟一個圖標 +號

?<view class="top">
????????? <checkbox :checked="item.checked" @click="changeCheckbox(index)"></checkbox>
????????? <view class="font">{{item.skuName}}</view>
? </view>

<view class="btnGroup" v-if="item.checked">
?????????? <view class="btn" :class="child.checked?'active':''" v-for="(child,cIdx) in item.children"
??????????????????????????????? @click="clickChlidBtn(index,cIdx)">{{child.name}}</view>
?????????? <view class="btn" @click="clickAddAttr(index)">
?????????? ????????<u-icon name="plus"></u-icon>
?????????? </view>
?</view>

3、點擊添加，又有點擊事件--->彈出窗

???????????????? <view class="btn" @click="clickAddAttr(index)">
??????????????????????? <u-icon name="plus"></u-icon>
???????????????? </view>

4、具體的css樣式見5的代碼

5、代碼

<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"><view class="attrWrapper"><view class="head"><view class="title">商品屬性</view><view class="addAttr" @click="clickAddAttr()">+ 添加屬性</view></view><view class="body"><view class="item" v-for="(item,index) in skuArr"><view class="top"><checkbox :checked="item.checked" @click="changeCheckbox(index)"></checkbox><view class="font">{{item.skuName}}</view></view><view class="btnGroup" v-if="item.checked"><view class="btn" :class="child.checked?'active':''" v-for="(child,cIdx) in item.children"@click="clickChlidBtn(index,cIdx)">{{child.name}}</view><view class="btn" @click="clickAddAttr(index)"><u-icon name="plus"></u-icon></view></view></view></view><view class="foot"><button type="primary" @click="clickConfirmSelect">確認選擇</button></view></view><view class="safe-area-bottom"></view></uni-popup><uni-popup ref="addAttrPop"><uni-popup-dialog mode="input" title="新增" placeholder="請輸入新增的內容"@confirm="dialogConfirm"></uni-popup-dialog></uni-popup></view>
</template><script>const skuCloudObj = uniCloud.importObject("kt-mall-sku", {"customUI": true});const goodsCloudObj = uniCloud.importObject("kt-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: []};},onLoad() {},computed: {skuTitle() {if (this.goodsFormData.sku_select.length) {let arr = this.goodsFormData.sku_select.map(item => {return item.skuName})return arr.join("/")} else {return "點擊添加屬性"}}},methods: {//屬性返回子元素的名稱skuChildName(arr) {let nsArr = arr.map(item => {return item.name})return nsArr.join("/")},//點擊確認選擇clickConfirmSelect() {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})return {...item,children}})this.goodsFormData.sku_select = arrthis.$refs.attrWrapPop.close();},//獲取sku列表async getSkuData() {let res = await skuCloudObj.get();this.skuArr = res.dataconsole.log(res);},//點擊添加屬性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();if (this.skuArr.length) return;this.getSkuData();},//點擊提交表單onSubmit() {this.$refs.goodsForm.validate().then(res => {this.toDataBase();}).catch(err => {console.log(err);})},//上傳到云數據庫async toDataBase() {//這里缺少一個更新的按鈕，需要在list中去實現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>