jiuyiUniapp/jiuyi2/pages/shop/collect.vue

<script setup>
	// 商品收藏

	import {
		ref,
		reactive,
	} 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)
	// 收藏列表
	const list = reactive({
		data: [],
	})

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

	// 获取列表
	function getList() {
		api.shop.getCollectList({}).then(res => {
			console.log(res)
			if (res.code == 200) {
				list.data = res.data
				return
			}
			util.alert({
				content: res.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 规格选择
	 * @param {Object} secItem
	 */
	function handleSpec(secItem) {
		// 
	}
</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 list.data" :key="index">
				<!-- 店铺 -->
				<view class="store line df aic ptb20 thd f1 f28">
					<image class="wh50 br10" :src="item.rectangleLogo"
						mode="aspectFill" />
					<view class="name ml10 c333">{{item.name}}</view>
				</view>

				<!-- 商品信息 -->
				<view class="product line df ptb20" v-for="(secItem,secIndex) in item.shopifyProductInfos" :key="secIndex">
					<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="secItem.sliderImage.split(',')[0]"
							mode="aspectFill" />
					</view>

					<view class="info oh df fdc jcsb f1 ml20">
						<view class="name thd c333 f28">{{item.name}}</view>

						<view class="spec line df thd mtb10 ptb10 plr10 df aic c666 f24 br10" @click="handleSpec(secItem)">
							<text>已选规格： 升级款/小熊</text>
						</view>

						<view class="other df aic">
							<view class="price c333">
								<text class="f20">￥</text>
								<text class="f30">{{secItem.price}}</text>
							</view>
							<view class="count ml20 fs0 c999 f24">销量：{{secItem.sales}}</view>
						</view>
					</view>
				</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;
		}

		// 规格
		.spec {
			border: 2rpx solid #ddd;
		}
	}
</style>