jiuyiUniapp/jiuyi2/pages/shop/collect.vue

<script setup>
	// 商品收藏

	import {
		ref
	} from 'vue';
	import apex from '@/components/header/apex'
	import {
		onReachBottom,
		onPullDownRefresh,
		onShow,
		onLoad,
		onReady,
	} from '@dcloudio/uni-app';
	// 
	import api from '@/api/index.js';
	// util
	import util from '@/common/js/util';
	// 
	const setting = ref(false)

	onLoad(() => {
		// 获取列表
		getList()
	})

	// 获取列表
	function getList() {
		api.shop.getCollectList({}).then(res => {
			console.log(res)
		})
	}
</script>

<template>
	<view class="app">
		<apex title="商品收藏">
			<template #right>
				<view class="f26" @click="setting = !setting">
					<text v-if="setting">完成</text>
					<text v-else>管理</text>
				</view>
			</template>
		</apex>

		<view class="list">
			<view class="item oh mb20 plr30 bfff" v-for="(item,index) in 10" :key="index">
				<!-- 店铺 -->
				<view class="store line df aic ptb20 thd f1 f28">
					<image class="wh50 br10"
						src="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
						mode="aspectFill" />
					<view class="name ml10 c333">家纺专营店</view>
				</view>

				<!-- 商品信息 -->
				<view class="product line df ptb20">
					<view class="fmid mr10">
						<template v-if="index == 0">
							<uni-icons type="circle" size="40rpx" color="#aaa" />
						</template>
						<template v-else>
							<uni-icons type="checkbox-filled" size="40rpx" color="#F8BA4D" />
						</template>
					</view>

					<view class="poster wh160">
						<image class="wh160 br10"
							src="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
							mode="aspectFill" />
					</view>

					<view class="info df fdc jcsb f1 ml20">
						<view class="name c333 f28">靠枕 纯棉靠枕 车载居家 纯棉100% 卡通靠枕 人体工学</view>

						<view class="other df aic">
							<view class="price c333">
								<text class="f20">￥</text>
								<text class="f30">89</text>
							</view>
							<view class="count ml20 fs0 c999 f24">销量：0</view>
						</view>
					</view>
				</view>

				<view class="spec line df ptb20 df aic c666 f24">
					<text>已选规格： 升级款/小熊</text>
				</view>
			</view>
		</view>

		<view class="fill" style="height: 180rpx;"></view>

		<view class="footer rows plr30 bfff shadow">
			<view class="c999 f26">已选择9款</view>
			<view class="col df aic">
				<view class="total mr20" v-if="!setting">
					<text class="c333 f20">合计</text>
					<text class="cFF9B27 f20">￥</text>
					<text class="cFF9B27 f46">98</text>
				</view>
				<view class="btn primary w200">去结算</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 产品
	.item {
		.line+.line {
			border-top: 2rpx solid #eee;
		}
	}
</style>