MrShi
8 小时以前 bdf43a9baa02560fd2bd47564178c1d5633b04d1
mini-program/pages/my-collection/my-collection.vue
@@ -1,65 +1,68 @@
<template>
   <view class="box">
      <view class="cate">
         <view v-for="(item, index) in cate" :key="index" @click="i = index" :class="i === index ? 'cate-item active' : 'cate-item'">
            <text>{{item}}</text>
            <view class="cate-item-x" v-if="i === index"></view>
         <view v-for="(item, index) in cate" :key="index" @click="changeRow(item.id)" :class="type === item.id ? 'cate-item active' : 'cate-item'">
            <text>{{item.name}}</text>
            <view class="cate-item-x" v-if="type === item.id"></view>
         </view>
         <view class="cate-item" style="flex: 0.7; justify-content: flex-end; padding-right: 30rpx; box-sizing: border-box;">
            <image src="/static/icon/ic_guanli@2x.png" mode="widthFix"></image>
            <text class="wz">管理</text>
         <view class="cate-item" style="flex: 0.7; justify-content: flex-end; padding-right: 30rpx; box-sizing: border-box;" @click="edit = !edit">
            <image src="/static/icon/ic_guanli@2x.png" mode="widthFix" v-show="!edit"></image>
            <image src="/static/icon/ic_guanli_sel@2x.png" mode="widthFix" v-show="edit"></image>
            <text class="wz" :style="{ color: edit ? '#004096' : '' }">管理</text>
         </view>
      </view>
      <!-- <view class="list1">
         <view class="list-item">
            <view class="left">
      <view class="list1" v-if="type === '1'">
         <view class="list-item" v-for="(item, index) in list" :key="index">
            <view class="left" v-if="edit">
               <image src="/static/icon/ic_agree@2x.png" mode="widthFix"></image>
            </view>
            <view class="right">
               <view class="list-item-image">
                  <image src="/static/logo.png" mode="widthFix"></image>
                  <image :src="item.imgurl" mode="widthFix"></image>
               </view>
               <view class="list-item-info">
                  <view class="list-item-info-top">曲轴减震器皮带轮A12</view>
                  <view class="list-item-info-top">{{item.name}}</view>
                  <view class="list-item-info-bottom">
                     <text>¥398.00</text>
                     <text>¥498.00</text>
                     <text>¥{{item.price}}</text>
                     <text>¥{{item.linePrice}}</text>
                  </view>
               </view>
            </view>
         </view>
      </view> -->
      <view class="list">
         <view class="list-item" v-for="(item, index) in 5" :key="index">
      </view>
      <view class="list" v-else>
         <view class="list-item" v-for="(item, index) in list" :key="index">
            <view class="info">
               <view class="check">
               <view class="check" v-if="edit">
                  <image src="/static/icon/ic_agree@2x.png" mode="widthFix"></image>
               </view>
               <view class="info-right">
                  <view class="info-title">挖掘机在冬季起动为什么困难?</view>
                  <view class="info-desc">挖掘机在冬季起动为什么困难?不仅决定于本身的技术状况,还受外界气温的影响</view>
                  <view class="info-title">{{item.name}}</view>
                  <view class="info-desc">{{item.remark}}</view>
                  <view class="info-data">
                     <view class="tips">维修</view>
                     <text>100 阅读|2025-10-10 21:00</text>
                     <view class="tips">{{item.labelName}}</view>
                     <text>{{item.readNum}} 阅读|{{item.createDate}}</text>
                  </view>
               </view>
            </view>
            <view class="image">
               <image src="/static/logo.png" mode="widthFix"></image>
               <image :src="item.imgurl" mode="widthFix"></image>
            </view>
         </view>
      </view>
      <view style="width: 100%; height: calc(100rpx + env(safe-area-inset-bottom));"></view>
      <view class="footer">
         <view class="caozuo">
            <view class="caozuo-left">
               <image src="/static/icon/ic_agree@2x.png" mode="widthFix"></image>
               <text>全选</text>
      <template v-if="edit">
         <view style="width: 100%; height: calc(100rpx + env(safe-area-inset-bottom));"></view>
         <view class="footer">
            <view class="caozuo">
               <view class="caozuo-left">
                  <image src="/static/icon/ic_agree@2x.png" mode="widthFix"></image>
                  <text>全选</text>
               </view>
               <view class="caozuo-btn">删除(0)</view>
            </view>
            <view class="caozuo-btn">删除(0)</view>
            <view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
         </view>
         <view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
      </view>
      </template>
   </view>
</template>
@@ -67,9 +70,60 @@
   export default {
      data() {
         return {
            i: 0,
            cate: ['商品(12)', '文章(5)']
            edit: false,
            type: '1',
            page: 1,
            list: [],
            next: true,
            cate: [
               { name: '商品(0)', id: '1' },
               { name: '文章(0)', id: '0' }
            ]
         };
      },
      onLoad() {
         this.getList()
         this.getNum()
      },
      onReachBottom() {
         this.getList()
      },
      methods: {
         changeRow(id) {
            this.type = id
            this.page = 1
            this.list = []
            this.next = true
            this.getList()
         },
         getNum() {
            this.$u.api.getCollectNum({})
               .then(res => {
                  if (res.code === 200) {
                     this.cate[0].name = `商品(${res.data.goodsNum})`
                     this.cate[1].name = `文章(${res.data.activityNum})`
                  }
               })
         },
         getList() {
            if (!this.next) return
            this.$u.api.myCollectPage({
               capacity: 10,
               page: 1,
               model: {
                  objType: this.type
               }
            }).then(res => {
               if (res.code === 200) {
                  console.log(res)
                  this.page++
                  this.list.push(...res.data.records)
                  if (res.data.total === this.list.length) {
                     this.next = false
                  }
               }
            })
         }
      }
   }
</script>