From ef77ac3b80ee3efa2b51716e40afb3a7ed327a72 Mon Sep 17 00:00:00 2001 From: peng <peng.com> Date: 星期一, 01 九月 2025 17:26:44 +0800 Subject: [PATCH] 自提设置 --- pages/subComponents/m-goods-list/base-list.vue | 277 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 277 insertions(+), 0 deletions(-) diff --git a/pages/subComponents/m-goods-list/base-list.vue b/pages/subComponents/m-goods-list/base-list.vue new file mode 100644 index 0000000..62d57a4 --- /dev/null +++ b/pages/subComponents/m-goods-list/base-list.vue @@ -0,0 +1,277 @@ +<template> + <div> + <!-- 涓�琛屼袱鍒楀晢鍝佸睍绀� --> + <view class="goods-list" v-if="type == 'twoColumns'"> + <view v-for="(item, index) in res" :key="index" class="goods-item"> + <view class="image-wrapper" @click="navigateToDetailPage(item)"> + <u-image + :src="item.thumbnail" + width="100%" + height="330rpx" + mode="aspectFit" + > + <u-loading slot="loading"></u-loading> + </u-image> + </view> + <view class="goods-detail"> + <div + class="title clamp" + v-html="lightSearchStr(keyword, item.goodsName)" + @click="navigateToDetailPage(item)" + ></div> + <view class="price-box" @click="navigateToDetailPage(item)"> + <div class="price" v-if="item.price != undefined"> + 楼<span + >{{ + $options.filters.goodsFormatPrice(item.price)[0] + }} </span + >.{{ $options.filters.goodsFormatPrice(item.price)[1] }} + </div> + </view> + <div class="count-config" @click="navigateToDetailPage(item)"> + <span>宸插敭 {{ item.buyCount || "0" }}</span> + <span>{{ item.commentNum || "0" }}鏉¤瘎璁�</span> + </div> + <div + class="store-seller-name" + v-if="storeName" + @click="navigateToStoreDetailPage(item)" + > + <div class="text-hidden"> + <u-tag + style="margin-right: 10rpx" + size="mini" + mode="dark" + v-if="item.selfOperated" + text="鑷惀" + type="error" + /> + <span>{{ item.storeName || "鏆傛棤" }}</span> + </div> + <span> + <u-icon name="arrow-right"></u-icon> + </span> + </div> + </view> + </view> + </view> + <!-- 涓�琛屼竴鍒楀晢鍝佸睍绀� --> + <div v-if="type == 'oneColumns'"> + <div v-for="(item, index) in res" :key="index" class="goods-row"> + <div class="flex goods-col"> + <div class="goods-img" @click="navigateToDetailPage(item)"> + <u-image + width="230rpx" + border-radius="16" + height="230rpx" + mode="aspectFit" + :src="item.goodsImage || item.thumbnail" + > + <u-loading slot="loading"></u-loading> + </u-image> + </div> + <div class="goods-detail"> + <div class="title clamp3" @click="navigateToDetailPage(item)"> + {{ item.goodsName }} + </div> + <view class="price-box" @click="navigateToDetailPage(item)"> + <div class="price" v-if="item.price != undefined"> + 楼<span + >{{ $options.filters.goodsFormatPrice(item.price)[0] }} </span + >.{{ $options.filters.goodsFormatPrice(item.price)[1] }} + </div> + </view> + <div class="promotion" @click="navigateToDetailPage(item)"> + <div v-if="item.salesModel == 'WHOLESALE'"> + <span>鎵�</span> + </div> + <div + v-for="(promotionItem, promotionIndex) in getPromotion(item)" + :key="promotionIndex" + > + <span v-if="promotionItem.indexOf('COUPON') != -1">鍔�</span> + <span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1" + >婊″噺</span + > + <span v-if="promotionItem.indexOf('SECKILL') != -1">绉掓潃</span> + </div> + </div> + <div + style="overflow: hidden" + @click="navigateToDetailPage(item)" + class="count-config" + > + <span style="float: left; font-size: 22rpx" + >宸插敭 {{ item.buyCount || "0" }}</span + > + <span style="float: right; font-size: 22rpx" + >{{ item.commentNum || "0" }}鏉¤瘎璁�</span + > + </div> + </div> + </div> + </div> + </div> + </div> +</template> + +<script> +import commonTpl from "@/pages/product/m-goods-list/common.vue"; +export default { + data() { + return { + lightColor: this.$mainColor, + }; + }, + mixins: [commonTpl], + props: { + // 灞曠ず鐨勭被鍨� + type:{ + type:String, + default:"oneColumns" + }, + // 閬嶅巻鐨勬暟鎹� + res: { + type: Array, + default: () => { + return []; + }, + }, + }, + methods: { + // 璺宠浆鍒板晢鍝佽鎯� + navigateToDetailPage(item) { + uni.navigateTo({ + url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`, + }); + }, + }, +}; +</script> + +<style lang="scss" scoped> +.goods-list { + display: flex; + flex-wrap: wrap; + margin: 10rpx 20rpx 284rpx; + width: 100%; + + > .goods-item { + background-color: #ffffff; + display: flex; + border-radius: 16rpx; + flex-direction: column; + width: calc(50% - 30rpx); + margin-bottom: 20rpx; + padding-bottom: 20rpx; + + &:nth-child(2n + 1) { + margin-right: 20rpx; + } + + .image-wrapper { + width: 100%; + height: 330rpx; + border-radius: 16rpx 16rpx 0 0; + overflow: hidden; + padding: 0; + } + } + + .count-config, + .store-seller-name { + font-size: $font-sm; + } + + .text-hidden { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +.goods-row { + background: #fff; + padding: 16rpx; + + > .goods-col { + display: flex; + + > .goods-img { + overflow: hidden; + flex: 4; + } + + > .goods-detail { + flex: 7; + } + } +} + +.goods-detail { + margin: 0 20rpx; + + > .title { + font-size: $font-base; + color: $font-color-dark; + line-height: 1.5; + height: 86rpx; + padding: 10rpx 0 0; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + } + + .promotion { + margin-top: 4rpx; + display: flex; + + div { + span { + font-size: 24rpx; + color: $light-color; + margin-right: 10rpx; + padding: 0 4rpx; + border-radius: 2rpx; + } + } + } + + .store-seller-name { + color: #666; + overflow: hidden; + display: flex; + justify-content: space-between; + } + + .count-config { + padding: 5rpx 0; + color: #666; + display: flex; + font-size: 24rpx; + justify-content: space-between; + } + + > .price-box { + margin-top: 10rpx; + display: flex; + align-items: center; + justify-content: space-between; + padding-right: 10rpx; + font-size: 24rpx; + color: $font-color-light; + + > .price { + font-size: 26rpx; + line-height: 1; + color: $main-color; + font-weight: bold; + + /deep/ span:nth-of-type(1) { + font-size: 38rpx; + } + } + } +} +</style> -- Gitblit v1.8.0