调试

MrShi

16 小时以前 62b483cc627b0a5f7d626d6b333a3ef7c7c1f4f4

 mini-program/pages/my-collection/my-collection.vue

@@ -1,75 +1,198 @@
<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="guanli">
            <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">
               <image src="/static/icon/ic_agree@2x.png" mode="widthFix"></image>
      <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" @click="select(index)">
               <image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-if="!item.active"></image>
               <image src="/static/icon/cart_ic_sel@2x.png" mode="widthFix" v-else></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">
                  <image src="/static/icon/ic_agree@2x.png" mode="widthFix"></image>
               <view class="check" v-if="edit" @click="select(index)">
                  <image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-if="!item.active"></image>
                  <image src="/static/icon/cart_ic_sel@2x.png" mode="widthFix" v-else></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.content}}</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" @click="quanxuan">
                  <image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-if="!selectAll"></image>
                  <image src="/static/icon/cart_ic_sel@2x.png" mode="widthFix" v-else></image>
                  <text>全选</text>
               </view>
               <view class="caozuo-btn" @click="shanchu">删除({{totalNum}})</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>
      <u-modal :show="show" :showCancelButton="true" @confirm="dele" @cancel="show = false">
         确认删除吗？
      </u-modal>
   </view>
</template>

<script>
   export default {
      computed: {
         totalNum() {
            let total = 0
            this.list.forEach((item) => {
               if (item.active) {
                  total++
               }
            })
            return total;
         },
         selectAll() {
            let isSelectAll = true
            this.list.forEach((item) => {
               if (!item.active) {
                  isSelectAll = false
               }
            })
            return isSelectAll;
         }
      },
      data() {
         return {
            i: 0,
            cate: ['商品(12)', '文章(5)']
            show: false,
            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: {
         shanchu() {
            if (this.totalNum > 0) {
               this.show = true
            } else {
               uni.showToast({
                  title: '至少选择一项内容',
                  icon: 'none'
               })
            }
         },
         dele() {
            this.$u.api.cancelbatch({
               ids: this.list.filter(item => item.active).map(item => item.id).join(',')
            }).then(res => {
               if (res.code === 200) {
                  this.show = false
                  this.edit = false
                  this.page = 1
                  this.list = []
                  this.next = true
                  this.getList()
                  this.getNum()
               }
            })
         },
         quanxuan() {
            this.list.forEach(item => {
               item.active = true
            })
         },
         guanli() {
            this.edit = !this.edit
            this.list.forEach(item => {
               item.active = false
            })
         },
         select(index) {
            this.list[index].active = !this.list[index].active
         },
         changeRow(id) {
            this.type = id
            this.edit = false
            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) {
                  this.page++
                  res.data.records.forEach(item => {
                     item.active = false
                  })
                  this.list.push(...res.data.records)
                  if (res.data.total === this.list.length) {
                     this.next = false
                  }
               }
            })
         }
      }
   }
</script>
@@ -324,6 +447,7 @@
                           font-size: 24rpx;
                           color: #999999;
                           margin-left: 10rpx;
                           text-decoration: line-through;
                        }
                     }
                  }