上海机械网站建设,全球最好的云服务器,贵阳网站建设制作,郑州做网站九零后文章目录 “我的”界面修改效果界面实现界面整体代码 查看已发布商品界面效果商品数据表后端上架、下架商品ControllerMapper 界面整体代码back方法 编辑商品、商品发布、保存草稿后端商品校验方法Controller 页面整体代码 “我的”界面修改
效果 界面实现
界面的实现使用了一… 文章目录 “我的”界面修改效果界面实现界面整体代码 查看已发布商品界面效果商品数据表后端上架、下架商品ControllerMapper 界面整体代码back方法 编辑商品、商品发布、保存草稿后端商品校验方法Controller 页面整体代码 “我的”界面修改
效果 界面实现
界面的实现使用了一张png图片图片直接使用PS制作一张即可资源下载可以查看易售小程序我的界面上方背景 将图片放到项目的静态资源文件夹下面 使用下方的代码来设置页面的背景图片
.background {background-image: url(/static/uniappMineBackground.png);background-repeat: no-repeat;background-size: 100%;width: 100%;padding-top: 20px;margin-bottom: 25rpx;
}要想实现元素悬浮在背景图片上面的感觉只需要修改一下元素的透明度即可如下面的代码
.top {background: rgba(255, 255, 255, 0.5);border-radius: 15px;box-shadow: 5rpx 10rpx 20rpx rgba(0, 0, 0, 0.2);margin: 0px 20rpx;height: 350rpx;
}界面整体代码
templateview classcontainerview classbackgroundview classtop!-- 头像、昵称展示 --view classuserDisplayview classavatar clickthis.avatarChangeShowtrueu--image :srcuserInfo.avatar width120rpx height120rpx shapecircle:lazy-loadtrueview sloterror stylefont-size: 24rpx;加载失败/view/u--image/viewview classnameViewviewview stylefont-weight: bold;font-size: 36rpx;color: #000000;{{userInfo.nickName}}/viewview stylefont-size: 30rpx;display: flex;margin-top: 10rpx;color: #6f6d71;!-- text classiconfont stylemargin-right: 7rpx;color: #ffffff;#xe654;/text --text classselfIntroductionText简介{{userInfo.selfIntroduction}}/text/view/view/view/viewview classbuttonViewview classbuttonItem clickgoToMyPublishtext classiconfont stylemargin-right: 15rpx;font-size: 50rpx;#xe613;/text我发布的/view!-- 一条竖线 --view styleborder-right: #2b92ff solid 1px;height: 40rpx;/viewview classbuttonItemtext classiconfont stylemargin-right: 15rpx;font-size: 50rpx;#xe638;/text我的足迹/view/view/view/viewview classuserMessage!-- view stylefont-size: 18px;font-weight: bold; padding: 20rpx;text我的信息/text/view --u-cell-groupu-cell nameuserName :valueuserInfo.userName :isLinktrueclickeditMessage(userName,userInfo.userName,用户名)view slottitle classu-slot-titletext classiconfont stylemargin-right: 10rpx;#xe605;/texttext classu-cell-text用户名/text/view/u-cellu-cell namenickName :valueuserInfo.nickName :isLinktrueclickeditMessage(nickName,userInfo.nickName,昵称)view slottitle classu-slot-titletext classiconfont stylemargin-right: 10rpx;#xe605;/texttext classu-cell-text昵称/text/view/u-cellu-cell nameavatar :isLinktrue clickeditMessage(avatar,userInfo.avatar,头像)view slottitle classu-slot-titletext classiconfont stylemargin-right: 10rpx;#xe60d;/texttext classu-cell-text头像/text/view/u-cellu-cell nameschoolName :valueuserInfo.schoolName :isLinktrueclickeditMessage(schoolId,userInfo.schoolName,大学,userInfo.schoolId)view slottitle classu-slot-titletext classiconfont stylemargin-right: 10rpx;#xe916;/texttext classu-cell-text大学/text/view/u-cellu-cell namecampusName :valueuserInfo.campusName :isLinktrueclickeditMessage(campusId,userInfo.campusName,校区,userInfo.campusId,userInfo.schoolId)view slottitle classu-slot-titletext classiconfont stylemargin-right: 10rpx;#xe628;/texttext classu-cell-text校区/text/view/u-cellu-cell namesex :valuesexName :isLinktrue clickeditMessage(sex,userInfo.sex,性别)view slottitle classu-slot-titletext classiconfont stylemargin-right: 10rpx;#xe614;/texttext classu-cell-text性别/text/view/u-cellu-cell nameemail :valueuserInfo.email :isLinktrueclickeditMessage(email,userInfo.email,邮箱)view slottitle classu-slot-titletext classiconfont stylemargin-right: 10rpx;#xe672;/texttext classu-cell-text邮箱/text/view/u-cellu-cell namecontactInformation :isLinktrueclickeditMessage(contactInformation,userInfo.contactInformation,联系方式)view slottitle classu-slot-titletext classiconfont stylemargin-right: 10rpx;#xe637;/texttext classu-cell-text联系方式/text/view/u-cellu-cell nameselfIntroduction :isLinktrueclickeditMessage(selfIntroduction,userInfo.selfIntroduction,自我介绍)view slottitle classu-slot-titletext classiconfont stylemargin-right: 10rpx;#xe654;/texttext classu-cell-text自我介绍/text/view/u-cellu-cell namepassword :isLinktrue clickeditMessage(password,-1,修改密码)view slottitle classu-slot-titletext classiconfont stylemargin-right: 10rpx;#xe603;/texttext classu-cell-text修改密码/text/view/u-cellu-cell :isLinktrue clicklogout()view slottitle classu-slot-titletext classiconfont stylemargin-right: 10rpx;#xe659;/texttext classu-cell-text退出账号/text/view/u-cell/u-cell-group/view/view
/templatescriptimport {logout} from /api/login;import {getUserProfileVo} from /api/user;export default {data() {return {userInfo: {avatar: ,nickName: 你好呀,userName: admin,schoolName: XX大学,campusName: XX学院,sex: 0,selfIntroduction: 自我介绍,打撒活动啊速宏达搜好滴傻大搜到阿斯顿撒旦好骚,contactInformation: 联系方式,email: 32136712361qq.com},sexName: 其他,}},created() {// this.getUserProfile();},onShow: function() {console.log(查询个人信息)this.getUserProfile();},methods: {editMessage(editKey, currentValue, editName, valueId undefined, schoolId undefined) {uni.navigateTo({url: /pages/my/profileEdit?editKey editKey currentValue currentValue editName editName valueId valueId schoolId schoolId})},/*** 登出账号*/logout() {// console.log(退出账号)logout().then(res {// console.log(退出账号 JSON.stringify(res));// 清除所有缓存uni.clearStorageSync();// 跳转到登录页uni.redirectTo({url: /pages/login/login})})},/*** 获取用户信息*/getUserProfile() {getUserProfileVo().then(res {// console.log(getUserProfile JSON.stringify(res));this.userInfo res.data;this.sexName this.getSexName(this.userInfo.sex);console.log(头像 this.userInfo.avatar);// console.log(this.userInfo.sex: this.userInfo.sex ,this.sexName: this.sexName);// console.log(this.userInfo JSON.stringify(this.userInfo));})},getSexName(type) {if (type 0) {return 男;} else if (type 1) {return 女;} else if (type 2) {return 其他;}},/*** 查看我的发布*/goToMyPublish(){uni.navigateTo({url:/pages/myPublish/myPublish})}}}
/scriptstyle langscss.container {background: #F4F5F7;min-height: 100vh;font-family: sans-serif;.background {background-image: url(/static/uniappMineBackground.png);background-repeat: no-repeat;background-size: 100%;width: 100%;// height: 150px;padding-top: 20px;margin-bottom: 25rpx;.top {background: rgba(255, 255, 255, 0.5);border-radius: 15px;box-shadow: 5rpx 10rpx 20rpx rgba(0, 0, 0, 0.2);margin: 0px 20rpx;height: 350rpx;.userDisplay {display: flex;padding: 25rpx;.avatar {display: flex;justify-content: center;align-items: center;margin-right: 20rpx;background: #ffffff;border-radius: 50%;padding: 3px;}.nameView {display: flex;justify-content: center;align-items: center;.selfIntroductionText {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;/* 显示1行 */-webkit-line-clamp: 1;-webkit-box-orient: vertical;}}}.buttonView {display: flex;height: 180rpx;align-items: center;.buttonItem {flex: 1;display: flex;align-items: center;justify-content: center;font-size: 32rpx;}}}}.userMessage {margin: 0rpx 20rpx;background: #F4F5F7;border-radius: 20rpx;}}
/style查看已发布商品
界面效果 商品数据表 因为使用了status字段来表示了商品的状态直接设置不同的status就可以分别查询出在售、草稿或者已下架的商品
后端
上架、下架商品
实现产品状态的切换非常简单直接设置状态并发送请求即可。要注意的是后台要判断执行修改的用户是不是当前登录的用户防止用户直接绕过前端发请求随意修改其他用户的商品
Controller
/*** 修改商品*/
PreAuthorize(ss.hasPermi(market:product:edit))
Log(title 商品, businessType BusinessType.UPDATE)
PutMapping
public AjaxResult edit(RequestBody Product product) {// 设置当前登录用户的用户idproduct.setUserId(getLoginUser().getUserId());if (product.getStatus() 0) {// 如果想要将商品改成发布状态需要对数据库的商品进行校验Product productInDatabase productService.getById(product.getId());ProductValidate.validate(productInDatabase);}return toAjax(productService.updateProduct(product));
}Mapper
通过添加and user_id #{userId}确保修改人为商品主人才能修改商品信息
update idupdateProduct parameterTypeProductupdate producttrim prefixSET suffixOverrides,if testcreateTime ! nullcreate_time #{createTime},/ifif testupdateTime ! nullupdate_time #{updateTime},/ifif testisDeleted ! nullis_deleted #{isDeleted},/ifif testname ! null and name ! name #{name},/ifif testdescription ! nulldescription #{description},/ifif testoriginalPrice ! nulloriginal_price #{originalPrice},/ifif testprice ! nullprice #{price},/ifif testproductCategoryId ! nullproduct_category_id #{productCategoryId},/ifif testuserId ! nulluser_id #{userId},/ifif testreviewerId ! nullreviewer_id #{reviewerId},/ifif testfineness ! nullfineness #{fineness},/ifif testnumber ! null and number ! number #{number},/ifif testunit ! null and unit ! unit #{unit},/ifif teststatus ! nullstatus #{status},/ifif testisContribute ! nullis_contribute #{isContribute},/ifif testfunctionalStatus ! nullfunctional_status #{functionalStatus},/ifif testbrandId ! nullbrand_id #{brandId},/if/trimwhere id #{id} and user_id #{userId}
/update界面整体代码
templateview classoutsideu-toast refuToast/u-toastu-tabs :listtabNameList clicktabClick/u-tabsview classcontaineru-empty modedata iconhttp://cdn.uviewui.com/uview/empty/data.png v-ifproductVoList.length0:textemptyText/u-emptyview v-for(productVo,index) in productVoList classitemview classproductItemu--image v-ifproductVo.picList!nullproductVo.picList.length0 :showLoadingtrue:srcproductVo.picList[0].address width200rpx height200rpx radius10 modeaspectFill:fadetrue duration450 clickseeProductDetail(productVo)view sloterror stylefont-size: 24rpx;加载失败/view/u--imageview stylemargin: 10rpx;/viewview classproductMessage stylewidth: 100%;view clickseeProductDetail(productVo)view classproductTitle{{productVo.name}}/viewview classprice¥text classnumber{{productVo.price}}/text/view/viewview styledisplay: flex; justify-content: space-between;align-items: center;width: 100%;view stylefont-size: 28rpx;color: #B6B6B6;{{formatDateToString(productVo.createTime)}}/viewview styledisplay: flex;align-items: center;view classbuttonView clickeditProduct(productVo)styleborder: #00BFFF solid 1px;color: #00BFFF;编 辑/viewview stylewidth: 15rpx;/viewview classbuttonView clickoffShelf(productVo.id)styleborder: #FF5A5F solid 1px;color: #FF5A5F; v-ifproductStatus0下 架/viewview classbuttonView clickonShelf(productVo.id)styleborder: #76D7C4 solid 1px;color: #76D7C4; v-ifproductStatus3上 架/viewview classbuttonView clickonShelf(productVo.id) v-ifproductStatus2styleborder: #76D7C4 solid 1px;color: #76D7C4;重新上架/view/view/view/view/view/view/view/view
/templatescriptimport {listProductVo,updateProduct} from /api/market/product.js;export default {data() {return {tabNameList: [{name: 在售,}, {name: 草稿,}, {name: 已下架}],page: {pageNum: 1,pageSize: 10},productVoList: [],emptyText: 您还没有商品处于出售状态哟,// 商品状态 0在售 1售出 2下架 3草稿productStatus: 0,}},created() {this.listProductVo();},methods: {tabClick(item) {// console.log(item, item);if (item.name 在售) {this.emptyText 您还没有商品处于出售状态哟;this.productStatus 0;} else if (item.name 草稿) {this.emptyText 您的草稿箱是空的;this.productStatus 3;} else if (item.name 已下架) {this.emptyText 您还没有下架过商品哟;this.productStatus 2;}this.listProductVo();},/*** 获取商品*/listProductVo() {listProductVo({userId: uni.getStorageSync(curUser).userId,status: this.productStatus}, this.page).then(res {console.log(listProductVo: JSON.stringify(res))this.productVoList res.data.pageMes.rows;})},/*** 查看商品的详情*/seeProductDetail(productVo) {uni.navigateTo({url: /pages/product/detail?productVo encodeURIComponent(JSON.stringify(productVo))})},/*** 格式化日期* param {Object} date*/formatDateToString(dateStr) {let date new Date(dateStr);// 今天的日期let curDate new Date();if (date.getFullYear() curDate.getFullYear() date.getMonth() curDate.getMonth() date.getDate() curDate.getDate()) {// 如果和今天的年月日都一样那就只显示时间return this.toDoubleNum(date.getHours()) : this.toDoubleNum(date.getMinutes());} else {// 如果年份一样就只显示月日return (curDate.getFullYear() date.getFullYear() ? : (date.getFullYear() -)) this.toDoubleNum((date.getMonth() 1)) - this.toDoubleNum(date.getDate());}},/*** 如果传入的数字是两位数直接返回* 否则前面拼接一个0* param {Object} num*/toDoubleNum(num) {if (num 10) {return num;} else {return 0 num;}},/*** 编辑商品*/editProduct(productVo) {uni.navigateTo({url: /pages/sellMyProduct/sellMyProduct?productVo encodeURIComponent(JSON.stringify(productVo))})},/*** 下架商品* param {Object} productId*/offShelf(productId) {let product {id: productId,status: 2};updateProduct(product).then(res {this.$refs.uToast.show({type: success,message: 下架成功,duration: 500});this.listProductVo();})},/*** 上架商品* param {Object} productId*/onShelf(productId) {let product {id: productId,status: 0};updateProduct(product).then(res {this.$refs.uToast.show({type: success,message: 上架成功,duration: 500});this.listProductVo();})},/*** 跳转回来所执行的方法*/back() {// 重新获取一遍数据this.listProductVo();}}}
/scriptstyle langscss.outside {// background-color: #0093E9;// background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);font-family: sans-serif;}.container {padding: 25rpx;.item {background: rgba(255, 255, 255, 1.0);border-radius: 5px;box-shadow: 10rpx 10rpx 20rpx rgba(234, 235, 236, 1.0),inset 1rpx 1rpx 1rpx rgba(234, 235, 236, 0.7);padding: 30rpx;margin-bottom: 30rpx;.productItem {display: flex;.productMessage {display: flex;flex-direction: column;justify-content: space-between;.productTitle {font-weight: 500;margin-bottom: 10rpx;// color: #ffffff;}.price {color: #F84442;// font-weight: bold;.number {font-size: 20px;}}}}.buttonView {padding: 10rpx 20rpx;color: #B6B6B6;border-radius: 10px;// border: #B6B6B6 solid 1px;font-size: 24rpx;font-weight: bold;}}}
/styleback方法
这里写了一个back方法但是这个页面却没有调用过该方法写这个方法是何用意呢其实这个方法是给其他页面调用的。当用户修改商品时会跳转到商品编辑发布的页面即sellMyProduct页面当商品信息修改结束之后执行uni.navigateBack();返回到上一个页面这时可以先执行相应页面的back方法再进行跳转。这样开发的优点是跳转到sellMyProduct页面的前置页面不只有一个如果指定跳转页面的话需要写一些判断逻辑来判断要跳转到哪个页面同时还需要传参来告诉所跳转到的页面要执行什么样的逻辑。而如果使用了back方法可以将方法的实现交给页面本身如果页面不需要执行逻辑则直接将方法留空调用者不需要管back如何实现只需要调用即可这样更加方便代码的维护和拓展。调用者的具体代码如下
// 获取上一页
let pages getCurrentPages();
let prevPage pages[pages.length - 2];
// 调用上一页的返回方法
prevPage.$vm.back();
uni.navigateBack();编辑商品、商品发布、保存草稿
后端
后端没有什么特殊的地方只需要区分一下商品发布和草稿保存的校验过程即可
商品校验方法
package com.shm.dataValidate;import com.ruoyi.common.core.domain.entity.Product;
import com.ruoyi.common.enums.ErrorCode;
import com.ruoyi.common.exception.ServiceException;
import com.ruoyi.common.utils.StringUtils;import java.math.BigDecimal;/*** Author dam* create 2023/9/2 17:14*/
public class ProductValidate {public static void validate(Product product) {if (StringUtils.isEmpty(product.getName())) {throw new ServiceException(请填写商品名称, ErrorCode.OPERATION_ERROR.getCode());} else if (StringUtils.isEmpty(product.getDescription())) {throw new ServiceException(请填写商品描述, ErrorCode.OPERATION_ERROR.getCode());} else if (product.getOriginalPrice() null) {throw new ServiceException(请填写商品原价, ErrorCode.OPERATION_ERROR.getCode());} else if (product.getPrice() null) {throw new ServiceException(请填写商品现价, ErrorCode.OPERATION_ERROR.getCode());} else if (product.getProductCategoryId() null) {throw new ServiceException(请选择商品分类, ErrorCode.OPERATION_ERROR.getCode());} else if (product.getFineness() null) {throw new ServiceException(请选择商品成色, ErrorCode.OPERATION_ERROR.getCode());} else if (product.getNumber() null) {throw new ServiceException(请填写商品数量, ErrorCode.OPERATION_ERROR.getCode());} else if (StringUtils.isEmpty(product.getUnit())) {throw new ServiceException(请填写商品单位, ErrorCode.OPERATION_ERROR.getCode());} else if (product.getFunctionalStatus() null) {throw new ServiceException(请选择商品功能状态, ErrorCode.OPERATION_ERROR.getCode());}if (product.getPrice().compareTo(product.getOriginalPrice()) 1) {throw new ServiceException(商品的销售价格比原价高请重新填写, ErrorCode.OPERATION_ERROR.getCode());}if (!validateNumber(product.getPrice())) {throw new ServiceException(商品出售价格输入有误需要是正数且只有两位小数, ErrorCode.OPERATION_ERROR.getCode());}if (!validateNumber(product.getOriginalPrice())) {throw new ServiceException(商品原价输入有误需要是正数且只有两位小数, ErrorCode.OPERATION_ERROR.getCode());}}/*** 校验价格是否符合要求* 正数* 小数点后面最多只有两位小数* param number* return*/private static boolean validateNumber(BigDecimal number) {// 判断是否为正数if (number.compareTo(BigDecimal.ZERO) 0) {return false;}// 判断小数位数是否超过两位BigDecimal fractionalPart number.remainder(BigDecimal.ONE);if (fractionalPart.scale() 2) {return false;}return true;}
}
Controller
/*** 上传商品*/
PreAuthorize(ss.hasPermi(market:product:add))
Log(title 商品, businessType BusinessType.INSERT)
PostMapping(/uploadSellProduct)
// 因为操作了多个数据表添加事务注解要么都成功要么都失败
Transactional
public AjaxResult uploadSellProduct(RequestBody ProductVo productVo) {/// 存储商品Product product new Product();BeanUtils.copyProperties(productVo, product);if (product.getStatus() 0) {//--if-- 如果是要发布商品要先进行数据校验确保商品的数据都是合法的ProductValidate.validate(product);if (product.getId() null) {// 设置商品主人product.setUserId(getLoginUser().getUserId());productService.insertProduct(product);} else {// 更新商品信息productService.updateProduct(product);}if (productVo.getPicList() null || productVo.getPicList().size() 0) {throw new ServiceException(商品没有上传对应的图片, ErrorCode.OPERATION_ERROR.getCode());}} else if (product.getStatus() 3) {if (StringUtils.isEmpty(product.getName())) {throw new ServiceException(保存草稿时商品名称不能为空, ErrorCode.OPERATION_ERROR.getCode());}//--if-- 如果只是保存草稿不需要进行数据校验if (product.getId() null) {// 设置商品主人product.setUserId(getLoginUser().getUserId());productService.insertProduct(product);} else {// 更新商品信息productService.updateProduct(product);}}/// 存储图片if (product.getId() ! null) {// 先将商品绑定的图片删除pictureService.deletePicturesByItem(product.getId(), 0);}for (Picture picture : productVo.getPicList()) {picture.setItemId(product.getId());picture.setType(0);}if (productVo.getPicList().size() 0) {pictureService.insertPictures(productVo.getPicList());}return AjaxResult.success();
}页面整体代码
该页面已经在【UniApp开发小程序】悬浮按钮出售闲置商品商品分类选择【后端基于若依管理系统开发】文章中进行了介绍这里主要做一些微小的调整
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.description placeholder请输入商品描述 height150/u--textarea!-- 图片上传 --viewimageUpload v-modelpicList maxCount9/imageUpload/viewu-divider text分类选择/自定义标签/u-divider!-- 分类选择/自定义标签 --view classitemview classlabelName分类/viewview classselectTextClass clickselectCategory{{product.productCategoryName?product.productCategoryName:请选择分类}}/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-rowview styledisplay: flex;margin: 0rpx 60rpx;view stylebackground:#A9A9A9 ; classbuttonView clicksaveDraft存 草 稿/viewview stylewidth: 40rpx;/viewview stylebackground:#3C9CFF ; classbuttonView clickuploadSellProduct发 布/view/view/view/view
/templatescriptimport imageUpload from /components/ImageUpload/ImageUpload.vue;import {uploadSellProduct} from /api/market/product.jsexport default {components: {imageUpload},onShow: function() {let categoryNameList uni.getStorageSync(categoryNameList);if (categoryNameList) {this.categoryNameList categoryNameList;this.product.productCategoryId uni.getStorageSync(productCategoryId);this.product.productCategoryName categoryNameList[categoryNameList.length - 1];uni.removeStorageSync(categoryNameList);uni.removeStorageSync(productCategoryId);}},data() {return {product: {id: undefined,name: ,descripption: ,picList: [],productCategoryId: undefined,productCategoryName: undefined,number: 1,unit: 个,isContribute: 0,originalPrice: 0.00,price: 0.00,// 成色fineness: 0,// 功能状态functionalStatus: 0,brandId: 0},value: dasdas,categoryNameList: [选择分类],finenessList: [全新, 几乎全新, 轻微使用痕迹, 明显使用痕迹, 外观破损],functionList: [功能完好无维修, 维修过可正常使用, 有小问题不影响使用, 无法正常使用],picList: [],}},onLoad(e) {if (e.productVo) {// 路由中携带了产品信息说明是要修改产品信息this.product JSON.parse(decodeURIComponent(e.productVo));for (var i 0; i this.product.picList.length; i) {this.picList.push(this.product.picList[i].address);}console.log(this.product: JSON.stringify(this.product));console.log(this.picList: JSON.stringify(this.picList));}},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() {// console.log(上传闲置商品picList: JSON.stringify(this.picList));if (this.product.productCategoryId) {if (this.picList.length 0) {this.$refs.uToast.show({type: error,message: 商品图片没有上传成功})} else {this.setPicAspectRatio().then(() {// console.log(即将上传的商品 JSON.stringify(this.product));this.product.status 0;uploadSellProduct(this.product).then(res {if (!this.product.id) {this.$refs.uToast.show({type: success,message: 您的商品已经发布到平台})} else {this.$refs.uToast.show({type: success,message: 您的商品修改并发布成功})}setTimeout(() {// 获取上一页let pages getCurrentPages();let prevPage pages[pages.length - 2];// 调用上一页的返回方法prevPage.$vm.back();uni.navigateBack();}, 500)}).catch(error {console.log(error: JSON.stringify(error));this.$refs.uToast.show({type: error,message: 商品发布失败})});});}} else {this.$refs.uToast.show({type: error,message: 请选择分类})}},/*** 保存商品草稿*/saveDraft() {this.setPicAspectRatio().then(() {// console.log(即将上传的商品 JSON.stringify(this.product));this.product.status 3;uploadSellProduct(this.product).then(res {this.$refs.uToast.show({type: success,message: 您的草稿保存成功})setTimeout(() {// 获取上一页let pages getCurrentPages();let prevPage pages[pages.length - 2];// 调用上一页的返回方法prevPage.$vm.back();uni.navigateBack();}, 500)}).catch(error {// console.log(error: JSON.stringify(error));this.$refs.uToast.show({type: error,message: 草稿保存失败})});});},/*** 设置图片的宽高比*/setPicAspectRatio() {return new Promise((resolve, reject) {this.product.picList [];let promises [];for (let i 0; i this.picList.length; i) {let picUrl this.picList[i];promises.push(this.getAspectRatio(picUrl).then((res) {let pic {address: picUrl,aspectRatio: res}this.product.picList.push(pic);console.log(当前图片高宽比设置完成);}))}Promise.all(promises).then(() {console.log(所有图片高宽比设置完成this.product.picList: JSON.stringify(this.product.picList));resolve();})})},/*** 获取单个图片的高宽比* param {Object} url*/getAspectRatio(url) {return new Promise((resolve, reject) {uni.getImageInfo({src: url,success: function(res) {let aspectRatio res.height / res.width;resolve(aspectRatio);}});})},/*** 选择分类*/selectCategory() {uni.navigateTo({url: /pages/sellMyProduct/selectCategory})}}}
/scriptstyle langscss.container {background: #F6F6F6;min-height: 100vh;padding: 20rpx;font-family: sans-serif;.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: 15rpx;margin-right: 15px;border-radius: 5px;}.selectTextClass {display: inline;background: #2B92FF;padding: 15rpx;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;}}.buttonView {padding: 20rpx;flex: 1;text-align: center;border-radius: 10rpx;color: #ffffff;font-weight: bold;}}}
/style
