用户行为分享基础埋点

peng

昨天 d50a3ed44e2edab2a7a661c43491c3aa42c57794

 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" style="height: 100%;" @scrolltolower="loadMoreData()">
         <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">&#xe761;</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,18 +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)
            // console.log("触底加载------------》", this.maxPages)
            if (this.getGoodsParam.pageNumber < this.maxPages) {
               this.getGoodsParam.pageNumber++;
               await this.getgoodsData()
@@ -264,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 => {
@@ -286,9 +403,9 @@
                  item.cardNum = cardItem.num;
               }
            })
            this.goodsList = [...this.goodsList,...goodsList.data.result.records];
            this.goodsList = [...this.goodsList, ...goodsList.data.result.records];
            this.maxPages = goodsList.data.result.pages
            console.log('this.goodsList----------------------->',JSON.stringify(goodsList.data.result))
            // console.log('this.goodsList----------------------->', JSON.stringify(goodsList.data.result))

         },
         async chooseCategory(id) {
@@ -308,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();

@@ -320,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;
@@ -333,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;
@@ -343,7 +497,9 @@
   }

   .goodsInfos {
      box-sizing: border-box;
      width: 500rpx;
      height: 1050rpx;
      margin-left: 10rpx;
   }

@@ -376,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 {