jiuyiUniapp/jiuyi2/pages/shop/collect.vue

<script setup>
	// 商品收藏

	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
	} 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';
	// 生成订单
	import makeOrder from '@/components/shop/detail/makeOrder.vue'

	const {
		proxy
	} = getCurrentInstance()
	// 
	const setting = ref(false)
	// 当前操作的收藏下标
	const listCurrent = reactive([0, 0])
	// 收藏列表
	const list = reactive({
		data: [],
	})
	// 已选的商品列表
	const selectList = computed(() => {
		let result = []
		list.data.map(item => {
			result.push(...item.shopifyProductInfos.filter(secItem => secItem.selected))
		})
		return result
	})
	// 总价
	const totalPrice = computed(() => {
		return selectList.value.reduce((last, current) => {
			return last + current.price * current.payNum
		}, 0)
	})
	// 当前商品
	const productCurrent = computed({
		get() {
			let result = {}
			if (list.data[listCurrent[0]]) result = list.data[listCurrent[0]].shopifyProductInfos[listCurrent[
				1]]
			return result
		},
		set(val) {
			list.data[listCurrent[0]].shopifyProductInfos[listCurrent[1]] = val
		}
	})

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

	// 获取列表
	function getList() {
		api.shop.getCollectList({}).then(res => {
			if (res.code == 200) {
				// 收藏列表的数据
				list.data = res.data.map(item => {
					// 收藏列表里面的商品
					item.shopifyProductInfos = item.shopifyProductInfos.map(secItem => {
						// 产品图片
						secItem.formatSliderImage = secItem.sliderImage.split(',')[0]
						// 产品购买数量
						secItem.payNum = 1
						// 产品规格的索引
						secItem.spaceIndex = 0
						// 产品购买规格
						secItem.spec = secItem.specs[secItem.spaceIndex] || {}
						// 是否选择
						secItem.selected = false
						return secItem
					})
					return item
				})
				return
			}
			util.alert({
				content: res.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 规格选择
	 * @param {Object} index
	 * @param {Object} secIndex
	 */
	function handleSpec(index, secIndex) {
		Object.assign(listCurrent, [index, secIndex])
		proxy.$refs.makeOrderRef.open({
			spaceIndex: productCurrent.value.spaceIndex,
			payNum: productCurrent.value.payNum,
		})
	}

	/**
	 * 选择规格和数量
	 * @param {Object} event
	 */
	function handleMakeConfirm(event) {
		productCurrent.value.payNum = event.payNum
		productCurrent.value.spec = event.spec
		productCurrent.value.spaceIndex = event.spaceIndex
	}

	/**
	 * 商品的选中
	 * @param {Object} index 商家下标
	 * @param {Object} secIndex 商品下标
	 */
	function handleSelect(index, secIndex) {
		const item = list.data[index].shopifyProductInfos[secIndex]
		item.selected = !item.selected
	}

	// 取消收藏
	function handleCancelCollect() {
		console.log('data', selectList.value, list.data)
	}

	// 提交
	function handleSubmit() {
		console.log('data', selectList.value, list.data)
		// 验证必填项
		if (selectList.value.length == 0) {
			util.alert('请选择商品')
			return
		}

		let data = selectList.value.map(item => {
			return {
				// 产品id
				productId: item.id,
				// 规格id
				attrValueId: item.spec.id,
				// 数量
				payNum: item.payNum,
				// 0-普通订单，1-视频号订单
				orderType: 0,
			}
		})

		console.log('request data', data)
		// 产生待付款订单
		api.shop.addOrder({
			data,
		}).then(rs => {
			if (rs.code === 200) {
				// 如果返回了订单 继续支付订单
				if (rs.data && rs.data[0]) uni.navigateTo({
					url: util.setUrl('/pages/shop/commodity/payment', {
						orderId: rs.data[0].orderId,
					})
				})
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})

	}
</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="item.id">
				<!-- 店铺 -->
				<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="secItem.id">
					<view class="fmid mr10" @click="handleSelect(index,secIndex)">
						<template v-if="secItem.selected">
							<uni-icons type="checkbox-filled" size="40rpx" color="#F8BA4D" />
						</template>
						<template v-else>
							<uni-icons type="circle" size="40rpx" color="#aaa" />
						</template>
					</view>

					<view class="poster wh160">
						<image class="wh160 br10" :src="secItem.formatSliderImage" 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 aic thd mtb10 ptb10 plr10 df aic c666 f24 br10"
							@click="handleSpec(index,secIndex)">
							<view class="thd f1">已选规格： {{secItem.spec.sku}}</view>
							<view class="">x{{secItem.payNum}}</view>
						</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">已选择{{selectList.length}}款</view>
			<view class="col df aic" v-if="!setting">
				<view class="total mr20">
					<text class="c333 f20">合计</text>
					<text class="cFF9B27 f20">￥</text>
					<text class="cFF9B27 f46">{{totalPrice}}</text>
				</view>
				<view class="btn primary w200" @click="handleSubmit">去结算</view>
			</view>

			<view class="btn primary w200" @click="handleCancelCollect" v-else>取消收藏</view>
		</view>
	</view>

	<!-- 立即支付 -->
	<makeOrder ref="makeOrderRef" mode="collect" :detail="productCurrent" @confirm="handleMakeConfirm" />
</template>

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

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