海外网站的建设,重庆市建筑从业人员信息网,保亭交通工程建设局网站,深圳网站建设信科公司便宜文章目录 界面效果界面实现悬浮按钮实现商品分类选择界面使元素均匀分布 闲置商品描述信息填写界面价格校验 界面效果
【悬浮按钮】 【闲置商品描述信息填写界面】 【商品分类选择界面】 【分类选择完成】
界面实现
悬浮按钮实现
悬浮按钮漂浮于页面之上#xff0c;等页面… 文章目录 界面效果界面实现悬浮按钮实现商品分类选择界面使元素均匀分布 闲置商品描述信息填写界面价格校验 界面效果
【悬浮按钮】 【闲置商品描述信息填写界面】 【商品分类选择界面】 【分类选择完成】
界面实现
悬浮按钮实现
悬浮按钮漂浮于页面之上等页面滑动时悬浮按钮的位置相对于屏幕不会改变
【悬浮按钮组件】
templatediv classfloating-button clickonClickslot!-- 这里可以放置默认的按钮样式等 --/slot/div
/templatescriptexport default {name: FloatButton,props: {},data() {return {};},mounted() {},methods: {onClick() {this.$emit(click);}},computed: {}};
/scriptstyle.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 clickcellMyProduct()u--image :srcfloatButtonPic shapecircle width60px height60px/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}]
}templateview classcontaineru-toast refuToast/u-toastview classtitleViewview classcontrolButton clickbacku-icon namearrow-left color#ffffff/u-icon上一级/viewtext{{getCategoryLayerName()}}/textview classcontrolButton clickcommit完成u-icon namecheckmark color#ffffff/u-icon/view/viewview styleheight: 20px;/viewu-empty v-ifcurLayerCategoryData.length0 modesearch texColor#ffffff iconSize180 iconColor#2b92ff text分类选择完成,请点击右上角的完成 textColor#2b92ff textSize18 marginTop30/u-emptyu-list scrolltolowerscrolltolower v-elseu-list-item v-for(category, index) in curLayerCategoryData :keyindexu-cell :titlecategory.name clickselectCurCategory(category)u-avatar sloticon shapesquare size35 :srccategory.iconcustomStylemargin: -3px 5px -3px 0/u-avatar/u-cell/u-list-item/u-list/view
/templatescriptimport {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;// 将当前层的数据设置进haveSelectLayerCategoryDatathis.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();}}}}
/scriptstyle langscss.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 classtitleViewview classcontrolButton clickbacku-icon namearrow-left color#ffffff/u-icon上一级/viewtext{{getCategoryLayerName()}}/textview classcontrolButton clickcommit完成u-icon namecheckmark color#ffffff/u-icon/view
/viewdisplay: flex;
justify-content: space-between;闲置商品描述信息填写界面
templateview classcontaineru-toast refuToast/u-toastview classcontentview classitemview classlabelName商品名称/viewu--input placeholder请输入商品名称 bordersurround v-modelproduct.name/u--input/viewu-divider text商品描述和外观/u-divider!-- 商品描述 --u--textarea v-modelproduct.descripption placeholder请输入商品描述 height150/u--textarea!-- 图片上传 --viewimageUpload v-modelproduct.picList maxCount9/imageUpload/viewu-divider text分类选择/自定义标签/u-divider!-- 分类选择/自定义标签 --view classitemview classlabelName分类/viewview classselectTextClass clickselectCategory{{getCategoryLayerName()}}/view/view!-- 商品的属性 新度 功能完整性 --view classitemview classlabelName成色/viewview classcolumnClassview :classproduct.finenessindex?selectTextClass:textClassv-for(finessName,index) in finenessList :keyindex clickchangeFineness(index){{finessName}}/view/view/viewview classitemview classlabelName功能状态/viewview classcolumnClassview :classproduct.functionalStatusindex?selectTextClass:textClassv-for(functionName,index) in functionList :keyindexclickchangeFunctionalStatus(index){{functionName}}/view/view/viewu-row customStylemargin-bottom: 10pxu-col span5view classitemview classlabelName数量/viewu--input placeholder请输入商品数量 bordersurround v-modelproduct.number/u--input/view/u-colu-col span7view classitemview classlabelName计量单位/viewu--input placeholder请输入计量单位 bordersurround v-modelproduct.unit/u--input/view/u-col/u-row!-- 价格 原价 现价 --u-divider text价格/u-divideru-row customStylemargin-bottom: 10pxu-col span6view classitemview classlabelName原价/viewu-input placeholder请输入原价 bordersurround v-modelproduct.originalPrice color#ff0000bluroriginalPriceChangeu--text text¥ slotprefix margin0 3px 0 0 typeerror/u--text/u-input/view/u-colu-col span6view classitemview classlabelName出售价格/viewu-input placeholder请输入出售价格 bordersurround v-modelproduct.price color#ff0000blurpriceChangeu--text text¥ slotprefix margin0 3px 0 0 typeerror/u--text/u-input/view/u-col/u-rowu-button text出售 sizelarge typeprimary clickuploadSellProduct/u-button/view/view
/templatescriptimport imageUpload from /components/ImageUpload/ImageUpload.vue;import {uploadSellProduct} from /api/market/prodct.jsexport 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})}}}
/scriptstyle langscss.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;
},
