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/list.vue | 343 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 343 insertions(+), 0 deletions(-)
diff --git a/pages/subComponents/m-goods-list/list.vue b/pages/subComponents/m-goods-list/list.vue
new file mode 100644
index 0000000..fa54ff5
--- /dev/null
+++ b/pages/subComponents/m-goods-list/list.vue
@@ -0,0 +1,343 @@
+<template>
+ <view>
+ <!-- 涓�琛屼袱鍒楀晢鍝佸睍绀� -->
+ <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="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 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'" class="goods-one-row">
+ <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" mode="aspectFit" border-radius='16' height="230rpx" :src="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 style="overflow: hidden" @click="navigateToStoreDetailPage(item)" class="count-config">
+ <div class="text-hidden" v-if="storeName">
+ <u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated"
+ text="鑷惀" type="error" />
+ <span class="line1-store-name">{{ item.storeName }}</span>
+ <span class="to-store">杩涘簵<u-icon size="24" name="arrow-right" color="#666"></u-icon>
+ </span>
+ </div>
+ <span>
+ <u-icon name="arrow-right" color="#c5c5c5"></u-icon>
+ </span>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ </view>
+</template>
+
+<script>
+ import '@/components/uview-components/uview-ui';
+
+ import commonTpl from '@/pages/product/m-goods-list/common.vue'
+ export default {
+ data() {
+ return {
+ lightColor: this.$mainColor
+ }
+ },
+ mixins: [commonTpl],
+
+ props: {
+ // 閬嶅巻鐨勬暟鎹�
+ res: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ },
+ // 涓�琛屼袱鍒楄繕鏄竴琛屼竴鍒楁樉绀�
+ type: {
+ type: String,
+ default: 'twoColumns',
+ validator() {
+ return ['twoColumns', 'oneColumns']
+ }
+ },
+ storeName: {
+ type: Boolean,
+ default: true
+ },
+ keyword: {
+ type: null,
+ default: ''
+ }
+
+ },
+ watch: {
+ keyword(val) {
+ if (val) {
+ this.lightSearchStr(val)
+ }
+ }
+ },
+ methods: {
+
+ // 楂樹寒鏄剧ず鎼滅储鍐呭
+ lightSearchStr(keyword, str) {
+ if (!keyword) {
+ return str
+ } else {
+ let unicodes = '';
+ for (let i of Array.from(keyword)) {
+ unicodes += this.unicode(i) + "|"
+ }
+ const rule = '(' + unicodes + ')'
+ const reg = new RegExp(rule, 'gi');
+ return str ? str.replace(reg, matchValue =>
+ `<span style="color:${this.lightColor}">${matchValue}</span>`
+ ) : ''
+ }
+ },
+ // 杞崲涓簎nicode
+ unicode(str) {
+ var value = '';
+ for (var i = 0; i < str.length; i++) {
+ value += '\\u' + this.left_zero_4(parseInt(str.charCodeAt(i)).toString(16));
+ }
+ return value;
+ },
+ left_zero_4(str) {
+ if (str != null && str != '' && str != 'undefined') {
+ if (str.length == 2) {
+ return '00' + str;
+ }
+ }
+ return str;
+ },
+ // 鏁版嵁鍘婚噸涓�涓� 鍙樉绀轰竴娆� 鍑忓厤 鍔� 浠�涔堢殑
+ getPromotion(item) {
+ if (item ? item.promotionMap : item.promotionMap) {
+ const fieldList = item ? item.promotionMap : item.promotionMap
+ let array = [];
+ Object.keys(fieldList).forEach((child) => {
+ if (!array.includes(child.split("-")[0])) {
+ array.push(child.split("-")[0]);
+ }
+ });
+ return array;
+ }
+ },
+ // 璺宠浆鍒板晢鍝佽鎯�
+ navigateToDetailPage(item) {
+ uni.navigateTo({
+ url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
+ });
+ },
+ // 璺宠浆鍦板潃
+ navigateToStoreDetailPage(item) {
+ uni.navigateTo({
+ url: `/pages/product/shopPage?id=${item.storeId}`,
+ });
+ },
+ }
+ }
+</script>
+
+<style lang='scss' scoped>
+ .goods-one-row{
+ padding-bottom: 250rpx;
+ }
+ /* 鍟嗗搧鍒楄〃 */
+ .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