front/pages/user/act/collect.vue

<template>
	<view class="bg-drak padding-lr-sm">
		<use-tabbar :tabbar="false"></use-tabbar>
	 
	
	  <!-- 商品列表 -->
	  <view>
	    <!-- 商品卡片（可重复使用） -->
		<u-empty v-if="fetch && fetch.list && fetch.list.length <= 0" marginTop="200" mode="data"></u-empty>
	    <view class="product border-radius padding margin-bottom-sm bg-main" style="padding-bottom: 7px;" v-if="fetch && fetch.list.length > 0" v-for="(item, index) in fetch.list" :key="index" @click="Dever.location('source/info?id=' + item.id + '&title=' + item.name)">
	      <view class="left">
	        <image :src="item.cover" />
	      </view>
	      <view class="margin-left-sm pos-r w-full">
	        <text class="clamp-2">{{item.name}}</text>
	        <view class="pos-a dflex-b price-box w-full">
	          <text class="price padding-tb-sm">{{item.price_text}}</text>
	          <view class="dflex-c ft-dark">
				  <!--
	            <button class="btn no-border padding-0 fs-sm ft-dark">
	              <view class="dflex-c fs-xs padding-tb-sm">
	                <text class="iconfont iconfenxiang margin-left-xs"></text>
	              </view>
	            </button>-->
	            <view class="dflex-c margin-left-sm padding-tb-sm" @tap.stop="del(item)">
	              <text class="iconfont iconlajitong-01 margin-left-xs"></text>
	            </view>
	          </view>
	        </view>
	      </view>
	    </view>
	
	    <!-- 可复制粘贴多个商品卡片结构（略） -->
	
	  </view>
	  <!--
	  <view class="fixed-top"><text class="iconfont iconlajitong-01 fs-xl"></text></view>
	  -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				fetch: {},
			}
		},
		onShow() {
			this.loadData(1);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData(1);
		},
		//加载更多
		onReachBottom() {
			this.loadData(2);
		},
		methods: {
			loadData(page) {
				this.DeverApi.page([page, 'list'], this, 'collect.getUserList');
			},
			del(item) {
				this.Dever.confirm('确认删除吗？', r => {
					this.DeverApi.post('collect.cancel', {
						type:1,
						type_id:item.id,
					}, res => {
						this.loadData(1);
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.product {
	    display: flex;
		.left image {
		    width: 86px;
		    height: 86px;
		}
		.price-box {
		    bottom: -18rpx;
		}
	}
</style>