界面效果

【悬浮按钮】

在这里插入图片描述
【闲置商品描述信息填写界面】

在这里插入图片描述
【商品分类选择界面】

在这里插入图片描述
【分类选择完成】

界面实现

悬浮按钮实现

悬浮按钮漂浮于页面之上，等页面滑动时，悬浮按钮的位置相对于屏幕不会改变

【悬浮按钮组件】

<template>
	<div class="floating-button" @click="onClick">
		<slot>
			<!-- 这里可以放置默认的按钮样式等 -->
		</slot>
	</div>
</template>

<script>
	export default {
		name: 'FloatButton',
		props: {

		},
		data() {
			return {

			};
		},
		mounted() {

		},
		methods: {
			onClick() {
				this.$emit('click');
			}
		},
		computed: {

		}
	};
</script>

<style>
	.floating-button {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 58px;
		height: 58px;
		border-radius: 50%;
		background-color: #007aff;
		color: #fff;

		position: fixed;
		right: 20rpx;
		bottom: 20rpx;
	}

	/* 按钮点击之后会产生偏移 */
	.floating-button:active {
		transform: translate(0, 2px);
	}
</style>

【在其他界面中使用】

因为组件中使用了插槽，可以在该组件中插入其他组件

<FloatButton @click="cellMyProduct()">
	<u--image :src="floatButtonPic" shape="circle" width="60px" height="60px"></u--image>
</FloatButton>

示例中，我给浮动按钮的插槽中添加了图片组件，图片使用项目静态资源中的图片

在这里插入图片描述

data() {
		return {
			title: 'Hello',
			floatButtonPic: require("@/static/cellLeaveUnused.png"),
		}
	},

商品分类选择界面

分类数据的格式如下

{
  "msg": "productCategoryItemVoList",
  "code": 200,
  "data": [
    {
      "id": 5,
      "name": "数码产品",
      "children": [
        {
          "id": 10,
          "name": "电脑",
          "children": [
            {
              "id": 12,
              "name": "台式机",
              "children": [
                
              ],
              "icon": "a",
              "sort": 1,
              "description": "a"
            },
            {
              "id": 13,
              "name": "笔记本",
              "children": [
                
              ],
              "icon": "a",
              "sort": 1,
              "description": "a"
            }
          ],
          "icon": "a",
          "sort": 1,
          "description": "a"
        },
        {
          "id": 11,
          "name": "手机",
          "children": [
            {
              "id": 14,
              "name": "老人机",
              "children": [
                
              ],
              "icon": "a",
              "sort": 1,
              "description": "a"
            },
            {
              "id": 15,
              "name": "智能手机",
              "children": [
                
              ],
              "icon": "a",
              "sort": 1,
              "description": "a"
            }
          ],
          "icon": "a",
          "sort": 1,
          "description": "a"
        }
      ],
      "icon": "a",
      "sort": 1,
      "description": "a"
    },
    {
      "id": 6,
      "name": "服装",
      "children": [
        
      ],
      "icon": "a",
      "sort": 1,
      "description": "a"
    },
    {
      "id": 7,
      "name": "教育用品",
      "children": [
        
      ],
      "icon": "a",
      "sort": 1,
      "description": "a"
    },
    {
      "id": 8,
      "name": "食品",
      "children": [
        
      ],
      "icon": "a",
      "sort": 1,
      "description": "a"
    }
  ]
}

<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="titleView">
			<view class="controlButton" @click="back">
				<u-icon name="arrow-left" color="#ffffff"></u-icon>
				上一级
			</view>
			<text>{{getCategoryLayerName()}}</text>
			<view class="controlButton" @click="commit">
				完成
				<u-icon name="checkmark" color="#ffffff"></u-icon>
			</view>
		</view>
		<view style="height: 20px;"></view>
		<u-empty v-if="curLayerCategoryData.length==0" mode="search" texColor="#ffffff" iconSize="180" iconColor="#2b92ff" text="分类选择完成,请点击右上角的完成" textColor="#2b92ff" textSize="18" marginTop="30">
		</u-empty>
		<u-list @scrolltolower="scrolltolower" v-else>
			<u-list-item v-for="(category, index) in curLayerCategoryData" :key="index">
				<u-cell :title="category.name" @click="selectCurCategory(category)">
					<u-avatar slot="icon" shape="square" size="35" :src="category.icon"
						customStyle="margin: -3px 5px -3px 0"></u-avatar>
				</u-cell>
			</u-list-item>
		</u-list>

	</view>
</template>

<script>
	import {
		getProductCategoryTree
	} from "@/api/market/category.js";
	export default {
		data() {
			return {
				categoryNameList: ["分类未选择"],
				categoryTreeData: [],
				// 当前层级分类数据
				curLayerCategoryData: [],
				// 已经选择的层级分类数据
				haveSelectLayerCategoryData: [],
				// 层级
				layer: 0,
				// 商品所属分类
				productCategoryId: 0,
			}
		},
		created() {
			this.getProductCategoryTree();
		},
		methods: {
			getCategoryLayerName() {
				let str = '';
				for (let i = 0; i < this.categoryNameList.length - 1; i++) {
					str += this.categoryNameList[i] + '/';
				}
				return str + this.categoryNameList[this.categoryNameList.length - 1];
			},
			/**
			 * 查询商品分类的树形结构数据
			 */
			getProductCategoryTree() {
				getProductCategoryTree().then(res => {
					// console.log("getProductCategoryTree:" + JSON.stringify(res));
					this.categoryTreeData = res.data;
					this.curLayerCategoryData = this.categoryTreeData;
				})
			},
			/**
			 * 选择分类
			 * @param {Object} category 当前选择的分类
			 */
			selectCurCategory(category) {
				if (this.layer == 0) {
					this.categoryNameList = [];
				}
				this.categoryNameList.push(category.name);
				this.productCategoryId = category.id;
				this.layer++;
				// 将当前层的数据设置进haveSelectLayerCategoryData
				this.haveSelectLayerCategoryData.push(this.curLayerCategoryData);
				this.curLayerCategoryData = category.children;
				if (this.curLayerCategoryData.length == 0) {
					this.$refs.uToast.show({
						type: 'success',
						message: "分类选择完成，请提交数据"
					})
				}
			},
			/**
			 * 返回上一级
			 */
			back() {
				if (this.layer == 0) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "已经是第一层级，无法返回上一级"
					})
				} else {
					this.layer--;
					this.curLayerCategoryData = this.haveSelectLayerCategoryData[this.haveSelectLayerCategoryData.length -
						1];
					// 删掉最后一条数据
					this.haveSelectLayerCategoryData.splice(this.haveSelectLayerCategoryData.length - 1, 1);
				}
			},
			/**
			 * 提交分类数据
			 */
			commit() {
				if (this.curLayerCategoryData.length != 0) {
					this.$refs.uToast.show({
						type: 'error',
						message: "分类还没有选择完成，请继续选择"
					})
				} else {
					uni.setStorageSync("productCategoryId", this.productCategoryId);
					uni.setStorageSync("categoryNameList", this.categoryNameList);
					uni.navigateBack();
				}

			}

		}
	}
</script>

<style lang="scss">
	.container {
		background: #F6F6F6;
		min-height: 100vh;
		padding: 20rpx;

		.titleView {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #2b92ff;
			color: #ffffff;
			border-radius: 4px;

			.controlButton {
				// width: 100px;
				display: flex;
				// border: #2b92ff 1px solid;

				padding: 10px;
			}
		}
	}
</style>

使元素均匀分布

使用下面的代码，可以让元素在组件中的子组件在组件中横向均匀分布，效果如下图

在这里插入图片描述

<view class="titleView">
	<view class="controlButton" @click="back">
		<u-icon name="arrow-left" color="#ffffff"></u-icon>
		上一级
	</view>
	<text>{{getCategoryLayerName()}}</text>
	<view class="controlButton" @click="commit">
		完成
		<u-icon name="checkmark" color="#ffffff"></u-icon>
	</view>
</view>

display: flex;
justify-content: space-between;

闲置商品描述信息填写界面

<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="content">
			<view class="item">
				<view class="labelName">商品名称</view>
				<u--input placeholder="请输入商品名称" border="surround" v-model="product.name"></u--input>
			</view>
			<u-divider text="商品描述和外观"></u-divider>
			<!-- 商品描述 -->
			<u--textarea v-model="product.descripption" placeholder="请输入商品描述" height="150"></u--textarea>
			<!-- 图片上传 -->
			<view>
				<imageUpload v-model="product.picList" maxCount="9"></imageUpload>
			</view>

			<u-divider text="分类选择/自定义标签"></u-divider>
			<!-- 分类选择/自定义标签 -->
			<view class="item">
				<view class="labelName">分类</view>
				<view class="selectTextClass" @click="selectCategory">{{getCategoryLayerName()}}</view>
			</view>
			<!-- 商品的属性 新度 功能完整性 -->
			<view class="item">
				<view class="labelName">成色</view>
				<view class="columnClass">
					<view :class="product.fineness==index?'selectTextClass':'textClass'"
						v-for="(finessName,index) in finenessList" :key="index" @click="changeFineness(index)">
						{{finessName}}
					</view>
				</view>
			</view>
			<view class="item">
				<view class="labelName">功能状态</view>
				<view class="columnClass">
					<view :class="product.functionalStatus==index?'selectTextClass':'textClass'"
						v-for="(functionName,index) in functionList" :key="index"
						@click="changeFunctionalStatus(index)">{{functionName}}
					</view>
				</view>
			</view>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="5">
					<view class="item">
						<view class="labelName">数量</view>
						<u--input placeholder="请输入商品数量" border="surround" v-model="product.number"></u--input>
					</view>
				</u-col>
				<u-col span="7">
					<view class="item">
						<view class="labelName">计量单位</view>
						<u--input placeholder="请输入计量单位" border="surround" v-model="product.unit"></u--input>
					</view>
				</u-col>
			</u-row>

			<!-- 价格 原价 现价 -->
			<u-divider text="价格"></u-divider>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="6">
					<view class="item">
						<view class="labelName">原价</view>
						<u-input placeholder="请输入原价" border="surround" v-model="product.originalPrice" color="#ff0000"
							@blur="originalPriceChange">
							<u--text text="¥" slot="prefix" margin="0 3px 0 0" type="error"></u--text>
						</u-input>
					</view>
				</u-col>
				<u-col span="6">
					<view class="item">
						<view class="labelName">出售价格</view>
						<u-input placeholder="请输入出售价格" border="surround" v-model="product.price" color="#ff0000"
							@blur="priceChange">
							<u--text text="¥" slot="prefix" margin="0 3px 0 0" type="error"></u--text>
						</u-input>
					</view>
				</u-col>
			</u-row>

			<u-button text="出售" size="large" type="primary" @click="uploadSellProduct"></u-button>
		</view>
	</view>
</template>

<script>
	import imageUpload from "@/components/ImageUpload/ImageUpload.vue";
	import {
		uploadSellProduct
	} from "@/api/market/prodct.js"
	export default {
		components: {
			imageUpload
		},
		onShow: function() {
			let categoryNameList = uni.getStorageSync("categoryNameList");
			if (categoryNameList) {
				this.categoryNameList = categoryNameList;
				this.product.productCategoryId = uni.getStorageSync("productCategoryId");
				uni.removeStorageSync("categoryNameList");
				uni.removeStorageSync("productCategoryId");
			}
		},
		data() {
			return {
				product: {
					name: '',
					descripption: '',
					picList: [],
					productCategoryId: 0,
					number: 1,
					unit: '',
					isContribute: 0,
					originalPrice: 0.00,
					price: 0.00,
					// 成色
					fineness: 0,
					// 功能状态
					functionalStatus: 0,
					brandId: 0
				},
				value: 'dasdas',
				categoryNameList: ["选择分类"],
				finenessList: ["全新", "几乎全新", "轻微使用痕迹", "明显使用痕迹", "外观破损"],
				functionList: ["功能完好无维修", "维修过，可正常使用", "有小问题，不影响使用", "无法正常使用"]
			}
		},
		methods: {
			getCategoryLayerName() {
				let str = '';
				for (let i = 0; i < this.categoryNameList.length - 1; i++) {
					str += this.categoryNameList[i] + '/';
				}
				return str + this.categoryNameList[this.categoryNameList.length - 1];
			},
			/**
			 * 价格校验
			 * @param {Object} price 价格
			 */
			priceVerify(price) {
				if (isNaN(price)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "输入的价格不是数字，请重新输入"
					})
					return false;
				}
				if (price < 0) {

					this.$refs.uToast.show({
						type: 'error',
						message: "输入的价格不能为负数，请重新输入"
					})
					return false;
				}
				if (price.toString().indexOf('.') !== -1 && price.toString().split('.')[1].length > 2) {
					this.$refs.uToast.show({
						type: 'error',
						message: "输入的价格小数点后最多只有两位数字，请重新输入"
					})
					return false;
				}
				return true;
			},
			originalPriceChange() {
				let haha = this.priceVerify(this.product.originalPrice);
				if (haha === false) {
					console.log("haha:" + haha);
					this.product.originalPrice = 0.00;
					console.log("this.product" + JSON.stringify(this.product));
				}
			},
			priceChange() {
				if (this.priceVerify(this.product.price) === false) {
					this.product.price = 0.00;
				}
			},
			/**
			 * 修改成色
			 * @param {Object} index
			 */
			changeFineness(index) {
				this.product.fineness = index;
			},
			/**
			 * 修改功能状态
			 * @param {Object} index
			 */
			changeFunctionalStatus(index) {
				this.product.functionalStatus = index;
			},
			/**
			 * 上传闲置商品
			 */
			uploadSellProduct() {
				uploadSellProduct(this.product).then(res => {
					this.$refs.uToast.show({
						type: 'success',
						message: "您的商品已经发布到平台"
					})
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}, 1500)
				})
			},
			/**
			 * 选择分类
			 */
			selectCategory() {
				uni.navigateTo({
					url: "/pages/sellMyProduct/selectCategory"
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background: #F6F6F6;
		min-height: 100vh;
		padding: 20rpx;

		.content {
			background: #ffffff;
			padding: 20rpx;


			.item {
				display: flex;
				align-items: center;
				height: 50px;
				margin-bottom: 5px;

				.labelName {
					width: 70px;
					margin-right: 10px;
				}

				.textClass {
					display: inline;
					background: #F7F7F7;
					padding: 10px;
					margin-right: 15px;
					border-radius: 5px;
				}

				.selectTextClass {
					display: inline;
					background: #2B92FF;
					padding: 10px;
					margin-right: 15px;
					border-radius: 5px;
					color: #ffffff;
					font-weight: bold;
				}

				.columnClass {
					// height: 50px;
					display: flex;
					align-items: center;

					width: calc(100% - 70px);
					overflow-x: auto;
					// // 让内容只有一行
					white-space: nowrap;
				}

				.columnClass::-webkit-scrollbar {
					background-color: transparent;
					/* 设置滚动条背景颜色 */
					// width: 0px;
					height: 0px;
				}

			}

		}
	}
</style>

价格校验

价格是商品比较关键的属性，一定要确保其数据没有问题，所以在用户提交之前一定要对商品的价格进行校验，防止用户乱输或者输错数据，这里对价格有如下规定：

输入的价格必须是数字，不可以是字符串
输入的价格必须是正数，不可以是负数
输入的价格的小数点有限制，不可以输入太多小数点

那么校验应该在什么时候触发呢？本示例在用户输入结束之后，手指离开输入组件时触发，即当元素失去焦点时触发，使用的是@blur事件

/**
 * 价格校验
* @param {Object} price 价格
 */
priceVerify(price) {
	if (isNaN(price)) {
		this.$refs.uToast.show({
			type: 'error',
			message: "输入的价格不是数字，请重新输入"
		})
		return false;
	}
	if (price < 0) {
		this.$refs.uToast.show({
			type: 'error',
			message: "输入的价格不能为负数，请重新输入"
		})
		return false;
	}
	if (price.toString().indexOf('.') !== -1 && price.toString().split('.')[1].length > 2) {
		this.$refs.uToast.show({
			type: 'error',
			message: "输入的价格小数点后最多只有两位数字，请重新输入"
		})
		return false;
	}
	return true;
},