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

<script setup>
/**
 * 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([]);

const mountedAction = () => {
  comboIds.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) => {
	if (status) {
		comboIds.value.splice(comboIds.value.indexOf(id), 1);
		$store.setComboContrast(comboIds.value);
		getdbAxios();
		return
	}
  if (comboIds.value.includes(id)) {
    comboIds.value.splice(comboIds.value.indexOf(id), 1);
  } else {
    comboIds.value.push(id);
  }
};

onShow(() => {
  if (!!config_ref.value) {
    mountedAction();
  }
});
</script>
<template>
  <view>
    <view v-if="!!$store.config">
      <view :ref="configRef"></view>
    </view>
    <view class="p-20rpx">
      <view
        style="border-bottom: 1px solid #e1ecee"
        class="flex w-full pb-50rpx mt-50rpx relative"
        v-for="(obj, f) in comboInfo"
        :key="f"
      >
        <view class="flex flex-items-center pl-10rpx pr-10rpx pt-10rpx">
          <uni-icons
            @click="selectClick(obj.combo_id)"
            :type="
              comboIds.includes(obj.combo_id) ? 'checkbox-filled' : 'circle'
            "
            color="#239EA3"
            size="30"
          ></uni-icons>
        </view>
        <view
          class="w-48rpx h-48rpx rounded-15rpx bg-#F9E7E7 absolute flex flex-items-center flex-justify-center right-50rpx top-30px"
        >
          <uni-icons
            @click="selectClick(obj.combo_id, 1)"
            type="trash-filled"
            color="#D70F0F"
            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>{{ obj.name }}</text>
          <view class="mt-13rpx mb-18rpx">
            <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.tags2?.length">
            <text
              v-for="(val, i) in obj.tags2"
              :key="i"
              class="text-#8B8B8B text-20rpx line-height-[1] px-5rpx b-0 b-solid b-#8B8B8B"
              :class="i == obj.tags2?.length - 1 ? 'b-r-0' : 'b-r-2'"
              >{{ val }}</text
            >
          </view>

          <view class="mt-20rpx w-full flex items-end">
            <text class="text-18rpx text-#EC3D15">¥</text>
            <text 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>
    <view
      @click="clickdb"
      class="h-110rpx bg-#239EA3 text-#fff text-32rpx flex flex-justify-center flex-items-center absolute bottom-0 w-100%"
    >
      开始对比
    </view>
  </view>
</template>
<style scoped></style>