hainan_2024_zhenghe/h5/pages/main/combo/tcdb.vue

<script setup>
	import DraggableButton from "@/pages/components/goHome.vue";
	import TabBar from "@/common/TabBar.vue";
	/**
	 * name：
	 * user：tcdb
	 * date：2024年9月26日 19:26:00
	 */
	import {
		ref
	} from "vue";
	import {
		$api,
		$response,
		$image
	} from "@/api";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "@/store";
	const $store = useStore();

	let comboIds = ref([]); // 未删除的
	let newComboIds = ref([]); // 未取消的

	const mountedAction = () => {
		comboIds.value = $store.getComboContrast() || [];
		newComboIds.value = $store.getComboContrast() || [];
		getdbAxios();
	};
	const comboInfo = ref(false);
	const getdbAxios = async () => {
		uni.showLoading({
			title: "加载中",
		});
		let obj = {
			combo_ids: $store.getComboContrast(),
		};
		const response = await $api("ComboCompare", obj);
		$response(response, () => {
			comboInfo.value = response.data.list || false;
			console.log(response.data, "response.data");
			uni.hideLoading();
		});
	};
	const clickdb = async () => {
		$store.setComboContrast(comboIds.value);
		uni.navigateTo({
			url: "/pages/buy/contrast/contrast",
		});
	};
	const config_ref = ref(null);
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e;
			mountedAction();
		}
	};

	const selectClick = (id, status) => {
		console.log(comboIds.value.indexOf(id));
		if (status) {
			// 删除
			if (comboIds.value.indexOf(id) > -1) {
				comboIds.value.splice(comboIds.value.indexOf(id), 1);
				$store.setComboContrast(comboIds.value);
			}
			getdbAxios();
			return;
		}
		// 取消选择
		if (newComboIds.value.includes(id)) {
			newComboIds.value.splice(newComboIds.value.indexOf(id), 1);
		} else {
			newComboIds.value.push(id);
		}
	};

	onShow(() => {
		if (!!config_ref.value) {
			mountedAction();
		}
	});
</script>
<template>
	<TabBar />
	<view style="background-color: #c4d7db;min-height: calc(100vh - 100rpx);">
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view class="p-20rpx main_k">
			<view   class=" taocan flex w-full pb-50rpx mt-20rpx relative"
				v-for="(obj, f) in comboInfo" :key="f">
				<view class="flex flex-items-center pl-30rpx pr-10rpx pt-10rpx">
					<!-- <uni-icons
            @click="selectClick(obj.combo_id)"
            :type="
              newComboIds.includes(obj.combo_id) ? 'checkbox-filled' : 'circle'
            "
            color="#239EA3"
            size="30"
          ></uni-icons> -->
				</view>
				<view
					class="w-48rpx h-48rpx rounded-15rpx  absolute flex flex-items-center flex-justify-center right-50rpx top-30px">
					<uni-icons @click="selectClick(obj.combo_id, 1)" type="trash" color="#e95513" size="25"></uni-icons>
				</view>
				<!-- 1个检套餐 显示套餐信息 -->
				<!-- <image
          v-if="obj.cover"
          :src="$image(obj.cover)"
          class="w-190rpx h-190rpx mr-37rpx"
          mode="widthFix"
        /> -->
				<view class="flex flex-col grow">
					<text style="font-weight: 700;color: #3e3a39;">{{ obj.name }}</text>
					<view class="mt-13rpx mb-0rpx">
						<uni-tag v-for="(val, i) in obj.tag" :key="i" size="small" :inverted="true" :text="val.text"
							class="mr-8rpx"
							:custom-style="'background-color:' +val.color + ';border-color:' + val.color + '; color:' + val.text_color + ';' " />
					</view>
					<view v-if="obj.tags?.length">
						<text v-for="(val, i) in obj.tags" :key="i"
							class="text-#8B8B8B text-20rpx line-height-[1] px-5rpx b-0 b-solid b-#8B8B8B biaoqian"
							:class="i == obj.tags?.length - 1 ? 'b-r-0' : 'b-r-2'">{{ val.text }}</text>
					</view>
					<view class="mt-20rpx w-full flex items-end">
						<text class="text-22rpx text-#EC3D15">¥</text>
						<text style="font-weight: 600;"
							class="text-38rpx text-#EC3D15 mx-10rpx -mb-8rpx">{{obj.price }}</text>
						<text class="text-18rpx text-#878787 line-through">
							{{obj.original_price}}
						</text>
						<!--  <text class="text-18rpx text-#878787 ml-auto mr-55rpx"
              >已售{{ obj.saleCount }}</text> -->
					</view>
				</view>
			</view>
			<view style="display: flex;width: 100%; justify-content: center;">
				<view @click="clickdb"
					class="start_button">
					开始对比
				</view>
			</view>
			
		</view>
		
	</view>
</template>
<style scoped>
	.biaoqian {
		color: #009da5;
		margin: 10rpx 8rpx 10rpx 0rpx;
		border: 1rpx solid #009da5;
		border-radius: 6rpx;
	}

	.main_k {
		background-color: #fff;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		padding: 20rpx 20rpx 20rpx 20rpx;
	}
	.taocan:not(:nth-last-child(2)) {
	 	border-bottom: 1px solid #5eb7b8
	}
	.start_button{
		background-color: #009da5;
		color:#fff;
		text-align: center;
		width: 266rpx;
		height: 54rpx;
		line-height: 54rpx;
		border-radius: 26rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}
</style>