uniapp-商城-54-后台 新增商品1

        后台页面中还存在商品信息的添加和修改等。接下来我们逐步进行分析和展开。包含页面布局和数据库逻辑等等。

1、整体效果

样式效果如下，依然采用了表单形式来完成和商家信息差不多，但在商品属性上多做了一些弹窗等界面，样式和功能点表多。

2、整体样式和布局

2.1 代码效果：

2.2 表单间隔

从图上看到 每一个标签有一个间隔。

.goodsView{
    padding:30rpx;

3、 这里的布局是使用的uni-froms 以及uni-forms-item

3.1   uni-froms 的使用

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

依然是ref 、model、rules 

rules 这里就没有自定义规则（没有uniapp-商城-50-后台 商家信息 第4点的问题）

创作中心-CSDNhttps://mpbeta.csdn.net/mp_blog/creation/editor/147853834

3.2 商品图片的上传 uni-file-picker

上传图片依然用的是   uni-file-picker  没有对上传张数限制

    <uni-file-picker v-model="goodsFormData.thumb" fileMediatype="image" mode="grid"></uni-file-picker>

uni-app官网uni-app,uniCloud,serverless,介绍,基础用法,选择指定后缀图片，且限制选择个数,手动上传,单选图片且点击再次选择,自定义样式,使用插槽,API,FilePicker Props,value 格式,list-styles 格式,image-styles 格式,FilePickhttps://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html

3.3 商品名称的页面 uni-easyinput

使用的是 uni-easyinput 进行名称的添加。trim是否自动去掉空格。

uni-easyinput 增强输入框 | uni-app官网uni-app,uniCloud,serverless,uni-easyinput 增强输入框,介绍,基本用法,输入框带左右图标,插槽,输入框禁用,密码框,输入框聚焦,多行文本,多行文本自动高度,取消边框,API,Easyinput Props,Type Options,ConfirmType Ophttps://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html<uni-data-select collection="kt-mall-category" field="_id as value, name as text"
                    v-model="goodsFormData.category_id"></uni-data-select>

collection 数据库

field 选择数据的范围

3.4 商品分类 uni-data-select

这里的数据来源于前面商品分类添加的数据，需要进行后台数据联动。

使用的是选择组件 uni-data-select，然后根据前面商品属性添加的类别进行选择。

uni-app官网uni-app,uniCloud,serverless,介绍,安装方式,基本用法,云端数据示例,API,DataSelect Props,使用云端数据时的属性（DataCom Props）,Localdata Options,DataSelect Events,示例https://uniapp.dcloud.net.cn/component/uniui/uni-data-select.html

安装：

uni-data-select 下拉框选择器 - DCloud 插件市场 通过数据驱动的下拉框选择器https://ext.dcloud.net.cn/plugin?name=uni-data-select

3.5 商品价格 uni-easyinput

使用的 uni-forms-item uni-easyinput， trim是否自动去掉空格。

3.6 商品属性  u-cell 

使用 u-cell  展示。

这个是u-view 提供的组件，需要重新安装和使用

Cell 单元格 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架uView UI，是 uni-app 生态最优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://uviewui.com/components/cell.html<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>

3.7 商品描述 uni-easyinput

使用的 uni-forms-item 、uni-easyinput， trim是否自动去掉空格。

4、页面中使用 弹出层  uni-popup   用于3.6的商品属性

4.1 bug处理

主要是使用的 uni-popup，依然会有前面的bug  但是我们在前面的章节已经处理了。

创作中心-CSDNhttps://mpbeta.csdn.net/mp_blog/creation/editor/147851881

4. 2 整体页面感知

包含两部分弹窗，上面部分是从底部弹出，下面的是弹出聚焦在中部。

上面分三个盒子  上中下 三个，

复杂的就是中部盒子。

<view class="safe-area-bottom"></view>    兼容ios系统的下边的安全区域遮挡我们也页面显示。

中部：

整体样式结果：（这里没有联动分类数据所以没有分类数据可以选择）

5、整体代码

<template>
	<view class="goodsView">
		<!-- 添加商品 -->
		<uni-forms ref="goodsForm" :model="goodsFormData" :rules="goodsRules" :label-width="100" label-align="right">
			<uni-forms-item label="商品图片">
				<uni-file-picker v-model="goodsFormData.thumb" fileMediatype="image" mode="grid"></uni-file-picker>
			</uni-forms-item>

			<uni-forms-item label="商品名称" required name="name">
				<uni-easyinput v-model="goodsFormData.name" placeholder="请输入商品名称" trim="both"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="产品分类" required name="category_id">
				<uni-data-select collection="kt-mall-category" 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">
				<uni-easyinput type="number" v-model="goodsFormData.price" placeholder="请输入商品价格"
					trim="both"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="商品原价">
				<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="商品描述">
				<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 = arr
				this.$refs.attrWrapPop.close();

			},
			//获取sku列表
			async getSkuData() {
				let res = await skuCloudObj.get();
				this.skuArr = res.data
				console.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() {
				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>