From 2ea4de81cb7029a3edd97d452e8bff117114528d Mon Sep 17 00:00:00 2001 From: peng <peng.com> Date: 星期三, 10 九月 2025 14:13:51 +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