<template> <view class="browsing"> <view class="browsing-hd"> <view class="do" @click="openPage(1)">{{isToggle?'操作':'编辑'}}</view> </view> <view class="browsing-bd"> <view class="li" v-for="(a, i) in list" :key="i"> <view class="a">{{a.week == '今天'?a.week: a.name}}</view> <u-swipe-action class="b" v-for="(b,k) in a.list" :key="k" @click="clickItem(i,b.id)" :options="options"> <view class="item u-border-bottom"> <view class="select" v-if="isToggle" @click.stop="openPage(4,i,k)"> <image mode="aspectFill" v-if="b.isSelect" :src="$picUrl+'/static/invoice/select-on.png'" /> <image mode="aspectFill" v-else :src="$picUrl+'/static/invoice/select.png'" /> </view> <view class="pic" @click.stop="openPage(5,b.goods_id)"> <image mode="aspectFill" v-if="b.imgs" :src="b.imgs" /> </view> <!-- 此层wrap在此为必写的,否则可能会出现标题定位错误 --> <view class="info title-wrap" @click.stop="openPage(5,b.goods_id)"> <view class="title">{{b.goods.goods_name}}</view> <view class="sku" v-if="b.skustr"> <view class="box">{{b.skustr}}</view><u-icon style="margin-left: 10rpx;" name="arrow-down"></u-icon> </view> <view class="sku" v-else></view> <view class="fd"> <view class="price">¥<text>{{b.goods.goods_price_min}}</text></view> <image class="icon" :src="$picUrl+'/static/news/icon-recycling-08.png'"></image> </view> </view> </view> </u-swipe-action> </view> <u-empty text="暂无信息" v-if="isShow" mode="list"></u-empty> </view> <view class="browsing-fd" v-if="isToggle"> <view class="a" @click="openPage(3)"> <image mode="aspectFill" v-if="isSelect" :src="$picUrl+'/static/invoice/select-on.png'" /> <image mode="aspectFill" v-else :src="$picUrl+'/static/invoice/select.png'" />全选 </view> <view class="b">共<text>{{goodsids.length}}</text>件商品</view> <view class="c" @click="openPage(2)">删除</view> </view> <addShuiyin /> </view> </template> <script> import * as GoodsApi from '@/api/goods' export default { data() { return { isToggle: false, isSelect: false, list: [], isShow: false, pageNum: 1, goodsids: [], options: [ { text: '删除', style: { backgroundColor: '#FF564A' } } ], }; }, onShow() { this.getBrowseHistoryList(); }, methods: { openPage(index,i,k){ const that = this; if(index == 1){ this.isToggle = !this.isToggle }else if(index == 2){ uni.showModal({ title: "温馨提示", content: "确定要全部删除吗?", confirmColor: "#FF564A", complete(res) { that.toDel() } }) }else if(index == 3){ if(this.list && this.list.length >0){ this.list.map(a=>{ if(a.list && a.list.length > 0){ a.list.map(b=>{ if(that.isSelect == false){ b.isSelect = true }else { b.isSelect = false } }) } }) } that.isSelect = !that.isSelect this.totallGoods(); }else if(index == 4){ this.list[i].list[k].isSelect = !this.list[i].list[k].isSelect this.totallGoods(); }else if(index == 5){ uni.navigateTo({ url: "/pages/goods/detail?goodsId="+i }) } }, //统计选中多少商品 totallGoods() { let arr = [] if(this.list && this.list.length >0){ this.list.map(a=>{ if(a.list && a.list.length > 0){ a.list.map(b=>{ if(b.isSelect){ arr.push(b.id) } }) } }) } this.goodsids = Array.from(new Set(arr)); }, //删除 async toDel() { const that = this; const {status, data} = await GoodsApi.browseHistoryDel({ ids: this.goodsids }) if(status == 200){ uni.showToast({ title: "删除成功" }) setTimeout(()=>{ that.getBrowseHistoryList(); },1000) } }, /** * 获取浏览记录列表 */ async getBrowseHistoryList() { let {status, data} = await GoodsApi.browseHistoryList({ page: this.pageNum }) if(status == 200){ uni.hideLoading(); if(data && data.length > 0){ data.map(a=>{ if(a.list && a.list.length > 0){ a.list.map(b=>{ b.isSelect = false; b.imgs = "" if(b.images && b.images.length > 0){ b.imgs = b.images[0].file.external_url } b.skustr = "" if(b.sku){ if(b.sku.goods_props && b.sku.goods_props.length>0){ b.sku.goods_props.map(c=>{ b.skustr+= c.value.name }) } } }) } }) } this.list = data; this.isShow = data && data.length > 0?false:true } }, clickItem(idx,id){ const that = this; uni.showModal({ title: "温馨提示", content: "确定要删除吗?", confirmColor: "#FF564A", complete(res) { that.goodsids = id; that.toDel() } }) } } } </script> <style lang="scss" scoped> .browsing{ padding: 0 0 130rpx; overflow: hidden; &-fd{ width: 100%; padding: 20rpx; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; position: fixed; left: 0; bottom: 0; z-index: 999; background-color: #fff; .a{ margin-right: 20rpx; font-size: 28rpx; font-weight: 400; color: #313131; display: flex; align-items: center; image{ width: 40rpx; height: 40rpx; margin-right: 10rpx; } } .b{ text{ color: #ED2B00; padding: 0 10rpx; } font-size: 28rpx; font-weight: 400; color: #A2A2A2; margin-right: 20rpx; } .c{ width: 408rpx; line-height: 80rpx; background: #FF564A; border-radius: 80rpx; text-align: center; font-size: 28rpx; font-weight: 500; color: #FFFFFF; } } &-hd{ padding: 30rpx; display: flex; justify-content: flex-end; overflow: hidden; } &-bd{ overflow: hidden; .li{ padding: 0 30rpx; overflow: hidden; background-color: #fff; .a{ overflow: hidden; font-size: 32rpx; font-weight: 500; color: #303030; padding-top: 20rpx; } .item{ padding: 25rpx 0; overflow: hidden; display: flex; align-items: center; justify-content: space-between; .select{ width: 40rpx; height: 40rpx; margin-right: 20rpx; image{ width: 100%; height: 100%; } } .pic{ width: 190rpx; height: 190rpx; margin-right: 20rpx; image{ width: 100%; height: 100%; } } .info{ flex: 1; margin-right: 20rpx; .title{ font-size: 28rpx; font-weight: 400; color: #000000; height: 80rpx; overflow: hidden; } .sku{ width: 320rpx; padding: 0 10rpx; line-height: 48rpx; background: #F7F8FA; border-radius: 48rpx; margin-top: 10rpx; display: flex; align-items: center; .box{ width: 260rpx; overflow: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .fd{ display: flex; align-items: center; justify-content: space-between; margin-top: 10rpx; .price{ font-size: 20rpx; font-weight: 400; color: #ED2B00; text{ font-size: 32rpx; } } .icon{ width: 40rpx; height: 40rpx; } } } } } } } </style>