网页模版比较出名的网站,网站seo诊断报告例子,磁盘阵列做网站,榆林建设局网站文章目录 界面效果界面实现工具js页面首页让文字只显示两行路由跳转传递对象将商品分为两列显示使用中划线划掉原价 后端商品controllerservicemappersql 界面效果
【说明】
界面中商品的图片来源于闲鱼#xff0c;若侵权请联系删除关于商品分类页面的实现#xff0c;请在我… 文章目录 界面效果界面实现工具js页面首页让文字只显示两行路由跳转传递对象将商品分为两列显示使用中划线划掉原价 后端商品controllerservicemappersql 界面效果
【说明】
界面中商品的图片来源于闲鱼若侵权请联系删除关于商品分类页面的实现请在我的Uniapp系列文章中寻找来查看关于页面中悬浮按钮的实现请在我的Uniapp系列文章中寻找来查看 界面实现
工具js
该工具类的作用是给定一个图片的url地址计算出图片的高宽比计算高宽比的作用是让图片可以按照正常比例显示
/*** 获取uuid*/
export default {/*** 获取高宽比 乘以 100%*/getAspectRatio(url) {uni.getImageInfo({src: url,success: function(res) {let aspectRatio res.height * 100.0 / res.width;// console.log(aspectRatio: aspectRatio);return aspectRatio %;}});},
}页面
首页
templateview classcontentview styledisplay: flex;align-items: center;u-search placeholder请输入商品名称 v-modelsearchForm.keyword searchlistProductVo :showActionfalse:clearabledtrue/u-searchtext classiconfont stylefont-size: 35px; clickselectCategory()#xe622;/text/viewu-row customStylemargin-top: 10px gutter10 alignstart v-ifproductList[0].length0loadDatafalseu-col span6 classcol v-for(data,index) in productList :keyindexview classproductVoItem v-for(productVo,index1) in data :keyindex1clickseeProductDetail(productVo)u--image v-ifproductVo.picList!nullproductVo.picList.length0 :showLoadingtrue:srcproductVo.picList[0] width100% :heightgetAspectRatio(productVo.picList[0])radius10 modewidthFix/u--image!-- u--image v-else :showLoadingtrue :srcsrc clickclick/u--image --view classproductMestext classproductName【{{productVo.name}}】/texttext{{productVo.descriptionnull?:productVo.description}}/text/viewview styledisplay: flex;align-items: center;!-- 现价 --view classprice¥text classnumber{{productVo.price}}/text/{{productVo.unit}}/viewview stylewidth: 10px;/view!-- 原价 --view classoriginPrice¥{{productVo.originalPrice}}/{{productVo.unit}}/view/viewview styledisplay: flex;align-items: center;u--image :srcproductVo.avatar width20 height20 shapecircle/u--imageview stylewidth: 10px;/viewview {{productVo.nickname}}/view/view/view/u-col/u-rowu-empty v-ifproductList[0].length0loadDatafalse modedata texColor#ffffff iconSize180iconColor#D7DEEB text所选择的分类没有对应的商品,请重新选择 textColor#D7DEEB textSize18 marginTop30/u-emptyview stylemargin-top: 20px; v-ifloadDatatrueu-skeleton :loadingtrue :animatetrue rows10/u-skeleton/view!-- 浮动按钮 --FloatButton clickcellMyProduct()u--image :srcfloatButtonPic shapecircle width60px height60px/u--image/FloatButton/view
/templatescriptimport FloatButton from /components/FloatButton/FloatButton.vue;import {listProductVo} from /api/market/prodct.js;import pictureApi from /utils/picture.js;export default {components: {FloatButton},onShow: function() {let categoryNameList uni.getStorageSync(categoryNameList);if (categoryNameList) {this.categoryNameList categoryNameList;this.searchForm.productCategoryId uni.getStorageSync(productCategoryId);this.searchForm.keyword this.getCategoryLayerName(this.categoryNameList);uni.removeStorageSync(categoryNameList);uni.removeStorageSync(productCategoryId);this.listProductVo();}},data() {return {title: Hello,// 浮动按钮的图片floatButtonPic: require(/static/cellLeaveUnused.png),searchForm: {// 商品搜索关键词keyword: ,productCategoryId: undefined},productList: [[],[]],loadData: false,}},onLoad() {},created() {this.listProductVo();},methods: {/*** 查询商品vo集合*/listProductVo() {this.loadData true;listProductVo(this.searchForm).then(res {this.loadData false;// console.log(listProductVo: JSON.stringify(res))let productVoList res.rows;this.productList [[],[]];for (var i 0; i productVoList.length; i) {if (i % 2 0) {// 第一列数据this.productList[0].push(productVoList[i]);} else {// 第二列数据this.productList[1].push(productVoList[i]);}}})},/*** 跳转到卖闲置页面*/cellMyProduct() {console.log(我要卖闲置);uni.navigateTo({url: /pages/sellMyProduct/sellMyProduct})},/*** 获取高宽比 乘以 100%*/getAspectRatio(url) {return pictureApi.getAspectRatio(url);},/*** 选择分类*/selectCategory() {uni.navigateTo({url: /pages/sellMyProduct/selectCategory})},/*** 获取商品名称*/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];},/*** 查看商品的详情*/seeProductDetail(productVo) {// console.log(productVo:JSON.stringify(productVo))uni.navigateTo({url: /pages/product/detail?productVo encodeURIComponent(JSON.stringify(productVo))})}}}
/scriptstyle langscss.content {padding: 20rpx;.col {width: 50%;}.productVoItem {margin-bottom: 20px;.productMes {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;/* 显示2行 */-webkit-line-clamp: 2;-webkit-box-orient: vertical;.productName {font-weight: bold;}}.price {color: #ff0000;font-weight: bold;.number {font-size: 22px;}}.originPrice {color: #A2A2A2;font-size: 15px;// 给文字添加中划线text-decoration: line-through;}}}
/style让文字只显示两行
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 显示2行 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;路由跳转传递对象
因为首页已经查询到商品的很多信息了点击查看商品详情的时候很多信息不需要再查询一遍了可以直接将商品的已知信息通过路由传递到新的页面去需要注意的时候将对象作为参数传递之前需要先将对象进行编码
uni.navigateTo({url: /pages/product/detail?productVo encodeURIComponent(JSON.stringify(productVo))
})将商品分为两列显示
首先将查询到的商品分为两组
let productVoList res.rows;
this.productList [[],[]
];
for (var i 0; i productVoList.length; i) {if (i % 2 0) {// 第一列数据this.productList[0].push(productVoList[i]);} else {// 第二列数据this.productList[1].push(productVoList[i]);}
}然后在布局中使用行列布局即可即使用一行两列的方式来显示商品信息
使用中划线划掉原价 // 给文字添加中划线
text-decoration: line-through;后端
商品
controller /*** 查询商品Vo列表*/PreAuthorize(ss.hasPermi(market:product:list))PostMapping(/listProductVo)ApiOperation(获取商品列表)public TableDataInfo listProductVo(RequestBody ProductVo productVo) {startPage();if (productVo.getProductCategoryId() ! null) {// --if-- 当分类不为空的时候只按照分类来搜索productVo.setKeyword(null);}ListProductVo list productService.selectProductVoList(productVo);return getDataTable(list);}service
/*** 查询商品Vo列表** param productVo* return*/
Override
public ListProductVo selectProductVoList(ProductVo productVo) {
// ListProductVo productVoList new ArrayList();ListProductVo productVoList baseMapper.selectProductVoList(productVo);///设置每个商品的图片// 获取所有商品的idListLong productIdList productVoList.stream().map(item - {return item.getId();}).collect(Collectors.toList());// 查询出所有商品的图片if (productIdList.size() 0) {ListPicture pictureList pictureService.selectPictureListByItemIdListAndType(productIdList, PictureType.PRODUCT.getType());MapLong, ListString itemIdAndPicList new HashMap();for (Picture picture : pictureList) {if (!itemIdAndPicList.containsKey(picture.getItemId())) {ListString picList new ArrayList();picList.add(picture.getAddress());itemIdAndPicList.put(picture.getItemId(), picList);} else {itemIdAndPicList.get(picture.getItemId()).add(picture.getAddress());}}// 给每个商品设置图片for (ProductVo vo : productVoList) {vo.setPicList(itemIdAndPicList.get(vo.getId()));}}return productVoList;
}mapper
void starNumDiffOne(Param(productId) Long productId);sql select idselectProductVoList parameterTypeProductVo resultMapProductVoResultSELECTp.id,p.NAME,p.description,p.original_price,p.price,p.product_category_id,pc.NAME AS productCategoryName,p.user_id,u.user_name as username,u.nick_name as nickname,u.avatar as avatar,p.reviewer_id,u1.user_name as reviewerUserName,p.fineness,p.unit,p.STATUS,p.is_contribute,p.functional_status,p.brand_id,b.NAME AS brandNameFROMproduct AS pLEFT JOIN product_category AS pc ON p.product_category_id pc.idLEFT JOIN brand AS b ON p.brand_id b.idLEFT JOIN sys_user AS u ON p.user_id u.user_idLEFT JOIN sys_user AS u1 ON p.reviewer_id u1.user_idwhereif testkeyword ! null and keyword ! and p.name like concat(%, #{keyword}, %)/ifif testkeyword ! null and keyword ! or p.description like concat(%, #{keyword}, %)/ifif testproductCategoryId ! null and productCategoryId ! and p.product_category_id #{productCategoryId}/if/where/select
