界面效果

【說明】

界面中商品的圖片來源于閑魚，若侵權請聯系刪除
關于商品分類頁面的實現，請在我的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 + "%";}});},
}

頁面

首頁

<template><view class="content"><view style="display: flex;align-items: center;"><u-search placeholder="請輸入商品名稱" v-model="searchForm.keyword" @search="listProductVo" :showAction="false":clearabled="true"></u-search><text class="iconfont" style="font-size: 35px;" @click="selectCategory()">&#xe622;</text></view><u-row customStyle="margin-top: 10px" gutter="10" align="start" v-if="productList[0].length>0&&loadData==false"><u-col span="6" class="col" v-for="(data,index) in productList" :key="index"><view class="productVoItem" v-for="(productVo,index1) in data" :key="index1"@click="seeProductDetail(productVo)"><u--image v-if="productVo.picList!=null&&productVo.picList.length>0" :showLoading="true":src="productVo.picList[0]" width="100%" :height="getAspectRatio(productVo.picList[0])"radius="10" mode="widthFix"></u--image><!-- <u--image v-else :showLoading="true" :src="src" @click="click"></u--image> --><view class="productMes"><text class="productName">【{{productVo.name}}】</text><text>{{productVo.description==null?'':productVo.description}}</text></view><view style="display: flex;align-items: center;"><!-- 現價 --><view class="price">￥<text class="number">{{productVo.price}}</text>/{{productVo.unit}}</view><view style="width: 10px;"></view><!-- 原價 --><view class="originPrice">￥{{productVo.originalPrice}}/{{productVo.unit}}</view></view><view style="display: flex;align-items: center;"><u--image :src="productVo.avatar" width="20" height="20" shape="circle"></u--image><view style="width: 10px;"></view><view> {{productVo.nickname}}</view></view></view></u-col></u-row><u-empty v-if="productList[0].length==0&&loadData==false" mode="data" texColor="#ffffff" iconSize="180"iconColor="#D7DEEB" text="所選擇的分類沒有對應的商品,請重新選擇" textColor="#D7DEEB" textSize="18" marginTop="30"></u-empty><view style="margin-top: 20px;" v-if="loadData==true"><u-skeleton :loading="true" :animate="true" rows="10"></u-skeleton></view><!-- 浮動按鈕 --><FloatButton @click="cellMyProduct()"><u--image :src="floatButtonPic" shape="circle" width="60px" height="60px"></u--image></FloatButton></view>
</template><script>import 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))})}}}
</script><style lang="scss">.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);}List<ProductVo> list = productService.selectProductVoList(productVo);return getDataTable(list);}

service

/*** 查詢商品Vo列表** @param productVo* @return*/
@Override
public List<ProductVo> selectProductVoList(ProductVo productVo) {
//        List<ProductVo> productVoList = new ArrayList<>();List<ProductVo> productVoList = baseMapper.selectProductVoList(productVo);///設置每個商品的圖片// 獲取所有商品的idList<Long> productIdList = productVoList.stream().map(item -> {return item.getId();}).collect(Collectors.toList());// 查詢出所有商品的圖片if (productIdList.size() > 0) {List<Picture> pictureList = pictureService.selectPictureListByItemIdListAndType(productIdList, PictureType.PRODUCT.getType());Map<Long, List<String>> itemIdAndPicList = new HashMap<>();for (Picture picture : pictureList) {if (!itemIdAndPicList.containsKey(picture.getItemId())) {List<String> 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 id="selectProductVoList" parameterType="ProductVo" resultMap="ProductVoResult">SELECTp.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_id<where><if test="keyword != null  and keyword != ''">and p.name like concat('%', #{keyword}, '%')</if><if test="keyword != null  and keyword != ''">or p.description like concat('%', #{keyword}, '%')</if><if test="productCategoryId != null  and productCategoryId != ''">and p.product_category_id =#{productCategoryId}</if></where></select>