【簡単ミニプログラムプロジェクト】 ミニプログラムホームページ（商品表示、商品検索、商品分類検索） 【Ruoyi管理システムをベースに開発されたバックエンド】

インターフェース効果

【イラスト】

• インターフェース内の製品の写真はXianyuからのものですが、侵害がある場合は、削除するために私達に連絡してください。
• 製品分類ページの実装については、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>

テキストを 2 行だけ表示する

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))
})

項目を 2 列に表示する

まず、クエリされた製品は 2 つのグループに分けられます。

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]);
	}
}

次に、レイアウト内で行と列のレイアウトを使用するだけです。つまり、1 行と 2 列を使用して製品情報を表示します。

元の価格を取り消すにはダッシュを使用します

// 给文字添加中划线
text-decoration: line-through;

後部

商品

コントローラ

 /**
  * 查询商品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);
 }

サービス

/**
 * 查询商品Vo列表
 *
 * @param productVo
 * @return
 */
@Override
public List<ProductVo> selectProductVoList(ProductVo productVo) {
    
    
//        List<ProductVo> productVoList = new ArrayList<>();
    List<ProductVo> productVoList = baseMapper.selectProductVoList(productVo);
    ///设置每个商品的图片
    // 获取所有商品的id
    List<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;
}

マッパー

void starNumDiffOne(@Param("productId") Long productId);

SQL

  <select id="selectProductVoList" parameterType="ProductVo" resultMap="ProductVoResult">
      SELECT
      p.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 brandName
      FROM
      product AS p
      LEFT JOIN product_category AS pc ON p.product_category_id = pc.id
      LEFT JOIN brand AS b ON p.brand_id = b.id
      LEFT JOIN sys_user AS u ON p.user_id = u.user_id
      LEFT 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>

同じプロジェクトに関する他の記事

このプロジェクトのその他の記事は、 【簡単ミニプログラムプロジェクト】プロジェクト紹介、ミニプログラムページ表示、連載記事集をご覧ください。