From 89efee9a2e20fc04b4537d859917b47cf68a814c Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期五, 26 九月 2025 18:28:40 +0800
Subject: [PATCH] 用户行为分享基础埋点
---
pages/commodity-square/commoditySquare.vue | 246 +++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 208 insertions(+), 38 deletions(-)
diff --git a/pages/commodity-square/commoditySquare.vue b/pages/commodity-square/commoditySquare.vue
index 7bbfbd0..0601ad1 100644
--- a/pages/commodity-square/commoditySquare.vue
+++ b/pages/commodity-square/commoditySquare.vue
@@ -3,11 +3,23 @@
<input type="text" value="flushDom" v-if="false" />
<top-bar selectedTitleIndex="shop" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>
<view class="search">
- <u-search class="nav-search" @blur='searchGoods' v-model="searchInfo" placeholder="鎼滅储鍟嗗搧"
+ <u-search class="nav-search" @change='searchGoods' v-model="searchInfo" placeholder="鎼滅储鍟嗗搧"
:show-action="false"></u-search>
</view>
- <view style="display: flex;padding: 32rpx;box-sizing: border-box;height: 100%;">
- <view class="navigatorMenue">
+ <view class="banner" style="margin-top: 14rpx;" v-if="bannerList.length>0">
+ <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
+ style="width: 100%;height: 160rpx;">
+ <swiper-item v-for="item in bannerList" :key="item.id"
+ @click="navigateGoodsInfo(item.skuId,item.goodsId)">
+ <view style="width: 100%; display: flex; align-items: center;justify-content: center;">
+ <image :src="item.showBannerUrl" mode="aspectFill"
+ style="width: 690rpx;height: 150rpx;border-radius: 24rpx;overflow: hidden;"></image>
+ </view>
+ </swiper-item>
+ </swiper>
+ </view>
+ <view style="display: flex;padding: 32rpx;box-sizing: border-box;">
+ <view class="navigatorMenue" style="height: 1050rpx;">
<scroll-view class="typeNavigation" :scroll-y="true" :show-scrollbar="false">
<view class="typeNavigationItem" :class="{typeNavigationItemCheck:currentCategort ==item.id}"
@click="chooseCategory(item.id)" v-for="item in categoryList" :key="item.id">
@@ -16,37 +28,39 @@
</scroll-view>
</view>
- <view class="goodsInfos">
- <scroll-view :scroll-y="true" :show-scrollbar="false">
+ <view class="goodsInfos" style="position: relative;overflow: hidden;box-sizing: border-box;">
+ <scroll-view :scroll-y="true" :show-scrollbar="false" style="height: 1050rpx;"
+ @scrolltolower="loadMoreData()">
<view class="goodsItem" v-for="item in goodsList" :key="item.id"
- @click.prevent="goToGoodsInfo(item.id)"
- style="display: flex;align-items: flex-start;justify-content: flex-start;margin: 10rpx 0;
- box-sizing: border-box; ">
+ @click.prevent="goToGoodsInfo(item.id)" style="display: flex;align-items: flex-start;justify-content: flex-start;margin: 10rpx 0;
+ box-sizing: border-box; border-bottom: 1rpx solid lightgray;">
<view class="pic" style="position: relative;">
<image :src="item.thumbnail" mode="aspectFill"
- style="height: 150rpx;width: 150rpx;border-radius: 24rpx;">
+ style="height: 200rpx;width: 200rpx;border-radius: 24rpx;">
</image>
<text style="background-color: #f92e20;color: #fff;
font-weight: bold;border-radius: 12rpx;padding: 5rpx;
margin-right: 15rpx;position: absolute;top: 0;left: 0;" v-if="item.salesModel==='PRESALE'">棰勫敭</text>
</view>
- <view class="goodsContent" style="display: flex;align-items: flex-start;justify-content: space-between;
+ <view style="display: flex;align-items: flex-start;justify-content: space-between;
margin-left: 10rpx;flex-direction: column;width: 100%;">
<view class="goodsName">
<text>{{item.goodsName}}</text>
</view>
-
- <view
- style="display: flex; justify-content: space-between;align-items:center; 100%;margin-top: 32rpx;width: 100%;">
- <view class="goodsPrice">锟{item.price}}</view>
- <view class="addCard" style="display: flex; align-items: center;">
+ <view class="goodsContent" style="font-size: 24rpx;">
+ {{item.sellingPoint}}
+ </view>
+ <view
+ style="display: flex; justify-content: space-between;align-items:center;height: 100%;width: 100%;">
+ <view class="goodsPrice" style="padding: 20rpx 0;">锟{item.price}}</view>
+ <view class="addCard" style="display: flex; align-items: center;" v-if="item.goodsType !=='VIRTUAL_GOODS'">
<view style="padding: 20rpx 0 20rpx 20rpx;" v-show="item.cardNum && item.cardNum>0"
@click.stop="miousCardNum($event,item.id)">
<uni-icons type="minus" size="30" color="#96a6bc"></uni-icons>
</view>
- <input v-show="item.cardNum&&item.cardNum>0" @click.stop="" :maxlength="2" type="number"
- confirm-type="numeric" style="width: 50rpx;text-align: center;"
+ <input v-show="item.cardNum&&item.cardNum>0" @click.stop="" :maxlength="2"
+ type="number" confirm-type="numeric" style="width: 50rpx;text-align: center;"
v-model="item.cardNum" :disabled="true" />
<view style="padding: 20rpx 20rpx 20rpx 0;"
@click.stop="addCardNum($event,item.id)">
@@ -59,16 +73,38 @@
</view>
</scroll-view>
</view>
+ <!-- <view @click="gotoCardList()" style="position: absolute;bottom: 120rpx; right: 32rpx;">
+ <view class="settlement">鍘昏喘鐗╄溅缁撶畻</view>
+ </view> -->
</view>
-
+ <view @click="gotoCardList()" class="squareFotter" style="width: 750rpx; display: flex;align-items: center;
+ justify-content: space-between;padding: 0 32rpx;box-sizing: border-box;">
+ <view style="display: flex;align-items: center;justify-content: center;">
+ <view class="icon" style="position: relative;">
+ <text class="iconfont"></text>
+ <view style=" height: 36rpx;width:36rpx;display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #f9583b;border-radius: 100%; position: absolute;
+ top: -25rpx; right: -20rpx;color: #fff;font-size: 24rpx;">
+ {{priceInfo.num > 99?'路路路':priceInfo.num}}
+ </view>
+ </view>
+ <view style="margin-left: 10rpx;color: #e06c75;font-size: 48rpx;font-weight: bold;">
+ 锟{priceInfo.price}}</view>
+ </view>
+ <view class="settlement">鍘荤粨绠�</view>
+ </view>
</view>
</template>
<script>
import TopBar from "@/components/TopBar.vue";
+ import { getSessionId, userAction } from "@/api/userAction.js";
import {
getCategoryList,
- getGoodsList
+ getGoodsList,
+ getBannerList
} from "@/api/goods.js";
import {
addCard,
@@ -87,6 +123,13 @@
},
data() {
return {
+ priceInfo: {
+ price: 0,
+ num: 0
+ },
+ bannerList: [],
+ canGoToCarList: false,
+ nums: 10,
searchInfo: '',
//鍟嗗搧鍒楄〃
goodsList: [],
@@ -109,13 +152,54 @@
pageNumber: 1,
categoryId: null,
canFilter: true,
- needFilterPre:true
+ needFilterPre: true,
+ order: 'asc',
+ sort: 'goodsSort'
},
+ pageSessionNo:"",
+ sendOnShow:false,
+ actionParam:{
+ sessionId:'',
+ actionType:"PAGE",
+ joinType:"SELF",
+ pageCode:"SHOPPING_SQUARE",
+ pageParams:"{}",
+ pageStatus:"JOIN",
+ pageType:"LIST"
+ }
}
},
methods: {
- addCardNum(e, id) {
- this.goodsList.forEach(item => {
+ navigateGoodsInfo(skuId, goodsId) {
+ uni.navigateTo({
+ url: `/pages/product/goods?id=${skuId}&goodsId=${goodsId}`
+ });
+ },
+ gotoCardList() {
+ uni.navigateTo({
+ url: '/pages/cusbar/cart/cartList'
+ })
+ },
+ async addCardNum(e, id) {
+ // this.goodsList.forEach(item => {
+ // if (item.id === id) {
+ // if (item.cardNum) {
+ // item.cardNum++;
+ // } else {
+ // item.cardNum = 1;
+ // }
+ // this.flushDom = new Date().getMilliseconds();
+ // const data = {
+ // skuId: item.id,
+ // num: item.cardNum
+ // }
+ // await addCard(data)
+ // await this.getCartList();
+ // return;
+ // }
+ // })
+ for (let i = 0; i < this.goodsList.length; i++) {
+ const item = this.goodsList[i];
if (item.id === id) {
if (item.cardNum) {
item.cardNum++;
@@ -123,27 +207,27 @@
item.cardNum = 1;
}
this.flushDom = new Date().getMilliseconds();
- console.log("閫変腑鐨勫晢鍝佷负------------------->", JSON.stringify(item))
const data = {
skuId: item.id,
num: item.cardNum
}
- addCard(data)
+ await addCard(data)
+ await this.getCartList();
return;
}
- })
-
+ }
},
- miousCardNum(e, id) {
+ async miousCardNum(e, id) {
for (let i = 0; i < this.goodsList.length; i++) {
const item = this.goodsList[i];
if (item.id === id) {
if (item.cardNum && item.cardNum > 1) {
item.cardNum--;
} else {
- deleteSkuItem([id]);
+ await deleteSkuItem([id]);
item.cardNum = 0;
this.flushDom = new Date().getMilliseconds();
+ await this.getCartList();
break; // 閫�鍑烘暣涓惊鐜�
}
this.flushDom = new Date().getMilliseconds();
@@ -151,7 +235,8 @@
skuId: item.id,
num: item.cardNum
};
- addCard(data);
+ await addCard(data);
+ await this.getCartList();
break; // 閫�鍑烘暣涓惊鐜�
}
}
@@ -197,6 +282,7 @@
this.getGoodsParam.keyword = keyWard
this.getGoodsParam.pageNumber = 1
this.getGoodsParam.categoryId = ''
+ this.goodsList = [];
await this.getgoodsData();
},
confirm() {},
@@ -235,17 +321,19 @@
this.listHeight1 -= videoHeight;
}
}
- console.log(this[arrName][index].width, this[arrName][index].height)
+ // console.log(this[arrName][index].width, this[arrName][index].height)
this.flushDom = new Date();
},
goToGoodsInfo(id) {
const item = this.goodsList.find(item => id === item.id);
+ // console.log(item)
uni.navigateTo({
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`
});
},
//瑙﹀簳鑾峰彇鏁版嵁
async loadMoreData() {
+ // console.log("瑙﹀簳鍔犺浇------------銆�", this.maxPages)
if (this.getGoodsParam.pageNumber < this.maxPages) {
this.getGoodsParam.pageNumber++;
await this.getgoodsData()
@@ -263,10 +351,40 @@
})
this.categoryList = list.data.result
},
+ async getBannerList() {
+ const bannerList = await getBannerList();
+ this.bannerList = bannerList.data.data
+ // console.log(this.bannerList)
+ },
+ async getCartList() {
+ const cardInfos = await getCarts();
+ const cardList = cardInfos.data.result.cartList.flatMap(item => {
+ return item.skuList.map(sku => {
+ return (sku.goodsSku.id, {
+ skuId: sku.goodsSku.id,
+ num: sku.num,
+ price: sku.priceDetailDTO.flowPrice
+ })
+ })
+
+ })
+
+ this.priceInfo = cardList.reduce((newVal, current) => {
+ return {
+ num: newVal.num + current.num,
+ price: newVal.price + current.price
+ }
+ }, {
+ num: 0,
+ price: 0
+ })
+ },
async getgoodsData() {
const cardInfos = await getCarts();
+ // console.log('--------------------->', cardInfos)
// 澶勭悊璐墿杞︿俊鎭�
let cardMap = new Map();
+ this.canGoToCarList = cardInfos.data.result.cartList.length > 0
cardInfos.data.result.cartList.forEach(item => {
item.skuList.forEach(sku => {
@@ -285,8 +403,9 @@
item.cardNum = cardItem.num;
}
})
- this.goodsList = goodsList.data.result.records;
- console.log('this.goodsList----------------------->',JSON.stringify(this.goodsList))
+ this.goodsList = [...this.goodsList, ...goodsList.data.result.records];
+ this.maxPages = goodsList.data.result.pages
+ // console.log('this.goodsList----------------------->', JSON.stringify(goodsList.data.result))
},
async chooseCategory(id) {
@@ -306,8 +425,33 @@
console.log(this.maxPages)
}
},
+ onUnload() {
+ let param = this.actionParam;
+ if (this.sendOnShow)return
+ param.pageStatus = "LEAVE"
+ userAction(param)
+ },
+ onHide() {
+ this.startHidenTime = Date.now()
+ let param = this.actionParam;
+ this.sendOnShow = true;
+ param.pageStatus = "LEAVE"
+ userAction(param)
+ },
+ onShow() {
+ getSessionId().then(res=>{
+ this.pageSessionNo = res.data.data
+ if(this.pageSessionNo){
+ let param = this.actionParam;
+ param.sessionId = this.pageSessionNo
+ userAction(param)
+ }
+ })
+ },
+ async onLoad(options) {
+ this.actionParam.pageParams = JSON.stringify(options)
- async onLoad() {
+ await this.getCartList();
// 鑾峰彇鐘舵�佹爮楂樺害
const systemInfo = uni.getSystemInfoSync();
@@ -318,12 +462,14 @@
this.getGoodsParam.categoryId = ""
this.getGoodsParam.keyword = ""
await this.getgoodsData()
+ await this.getBannerList()
}
}
</script>
<style lang="scss" scoped>
.container {
+ box-sizing: border-box;
width: 750rpx;
padding-bottom: 64rpx;
height: 100vh;
@@ -331,6 +477,16 @@
}
+ .settlement {
+ width: 180rpx;
+ height: 70rpx;
+ line-height: 70rpx;
+ background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
+ border-radius: 900rpx;
+ text-align: center;
+ color: #fff;
+ margin-right: 10rpx;
+ }
.navigatorMenue {
margin-left: -32rpx;
@@ -341,7 +497,9 @@
}
.goodsInfos {
+ box-sizing: border-box;
width: 500rpx;
+ height: 1050rpx;
margin-left: 10rpx;
}
@@ -374,17 +532,29 @@
}
.goodsName {
- padding: 10rpx;
+ // padding: 10rpx;
box-sizing: border-box;
+ // display: -webkit-box;
+ // -webkit-box-orient: vertical;
+ // -webkit-line-clamp: 1;
+ // height: 52rpx;
+ font-weight: bold;
+ // overflow: hidden;
+ // text-overflow: ellipsis;
+ // text-align: start;
+ // vertical-align: middle;
+ text-wrap: wrap;
+ }
+
+ .goodsContent {
+ text-indent: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
- -webkit-line-clamp: 1;
- height: 52rpx;
- font-weight: bold;
+ -webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
- text-align: start;
vertical-align: middle;
+ color: #e7c463;
}
.goodsPrice {
--
Gitblit v1.8.0