hainan_2024/h5/pages/main/optionalProject/optionalProject.vue

<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2024年9月11日 19:24:50
 */
import { ref } from "vue";
import { $api, $response, $image } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "@/store";

const $props = defineProps({
  comboId: {
    type: String,
    default: "",
  },
  itemIds: {
    type: String,
    default: "",
  },
});

const $store = useStore();

let leftList = ref({}); // 左侧列表
let tabIndex = ref(""); // 默认选中
let rightLeft = ref([]); // 右侧列表
let selectIds = ref([]); // 选中id列表
let headImg = ref(""); // 头部图片
let packagePrice = ref(0); //套餐折扣价格
let packageOriginalPrice = ref(0); //套餐原始价格
let optionalPrice = ref(0); //自选折扣价格
let optionalOriginalPrice = ref(0); //自选原始价格
let totalPrice = ref(0); // 总折扣价格
let totalOriginalPrice = ref(0); // 总原始价格
let total = ref(0); // 总项目数
let comboId = ref(0); // 套餐id
let recommendPackageList = ref([]); // 推荐套餐列表
let popup = ref(null);

const getComboRecommend = async () => {
  const response = await $api("ComboRecommend", {
    person_id: $store.save_info.user_id || 1,
    item_ids: selectIds.value,
  });
  $response(response, () => {
    recommendPackageList.value = response.data.combos;
    if (recommendPackageList.value.length) {
      popup.value.open("center");
    }
  });
};

const getAllItems = async (e) => {
  // 获取全部项目
  const response = await $api("GetAllItems", {
    search: e?.value,
  });
  $response(response, () => {
    leftList.value = response.data.list;
    if (Object.keys(leftList.value).length) {
      let keys = Object.keys(leftList.value);
      tabIndex.value = keys[0];
      rightLeft.value = leftList.value[keys[0]].children;
      headImg.value = leftList.value[keys[0]].head_img;
    }
  });
};

const getBuyInfo = async () => {
  // 获取购买信息
  let obj = {
    item_ids: selectIds.value,
    hospital: $store.save_info.hospital,
  };
  if (comboId.value) {
    obj.combo_id = comboId.value;
  }
  const response = await $api("BuyInfo", obj);
  $response(response, () => {
    packagePrice.value = response.data.combo_info.price;
    packageOriginalPrice.value = response.data.combo_info.original_price;
    optionalPrice.value = response.data.items_info.price;
    optionalOriginalPrice.value = response.data.items_info.original_price;
    totalPrice.value = response.data.true_price;
    totalOriginalPrice.value = response.data.original_price;
    total.value = response.data.pay_item_count;
  });
};

const mountedAction = () => {
  selectIds.value = $props.itemIds?.split(",") || [];
  comboId.value = Number($props.comboId);
  getAllItems(); // 获取全部项目
  getComboRecommend();
  if (comboId.value) {
    getBuyInfo(); // 获取购买信息
  }
};

const config_ref = ref(null);
const configRef = (e) => {
  if (!config_ref.value) {
    config_ref.value = e;
    mountedAction();
  }
};

onShow(() => {
  if (!!config_ref.value) {
    mountedAction();
  }
});
</script>
<template>
  <view>
    <view v-if="!!$store.config">
      <view :ref="configRef"></view>
    </view>
  </view>
  <uni-popup ref="popup">
    <view class="bg-#fff rounded-15rpx w-95vw px-20rpx box-border">
      <view class="center relative pt-47rpx pb-32rpx text-36rpx">
        <text class="line-height-[1]">推荐套餐</text>
        <uni-icons @click="popup.close()" type="closeempty" color="#A6A6A6" size="26" class="absolute right-40rpx top-30rpx"></uni-icons>
      </view>
      <view v-for="(item, index) in recommendPackageList" :key="index">
        <image :src="$image(item.cover)" mode="widthFix" />
      </view>
    </view>
  </uni-popup>
  <view class="bg-#d8edf2">
    <uni-search-bar
      class="search"
      radius="100"
      placeholder="请输入关键字搜索"
      @clear="getAllItems()"
      @cancel="getAllItems()"
      @confirm="getAllItems"
    />
  </view>
  <view class="mt-20rpx flex min-h-100%">
    <view class="min-w-214rpx max-w-214rpx mr-20rpx h-100% text-center">
      <view
        class="w-100% rounded-r-full text-#0E0E0E text-25rpx px-20rpx w-100% center h-84rpx box-border"
        v-for="(item, index) in leftList"
        :key="index"
        :class="{
          'bg-gradient-to-r from-#edf6f5 to-#bbdfe2': tabIndex == index,
        }"
        @click="
          () => {
            tabIndex = index;
            rightLeft = item.children;
            headImg = item.head_img;
          }
        "
      >
        {{ item.title }}
      </view>
    </view>
    <view class="grow h-100% bg-#fff pb-200rpx">
      <image class="w-full" mode="widthFix" :src="$image(headImg)"></image>
      <view
        v-for="(item, index) in rightLeft"
        :key="index"
        :class="{
          '!b-0': index == rightLeft.length - 1,
        }"
        class="flex justify-between center py-30rpx px-20rpx b-b-1px b-b-solid b-b-#e5e5e5"
      >
        <view class="w-40% text-#0E0E0E text-25rpx flex items-center">
          <text>{{ item.title }}</text>
          <uni-tooltip>
            <!-- 定义插槽，插槽名为 content -->
            <template v-slot:content>
              <!-- 在这里编写自定义的 HTML 或组件 -->
              <view class="w-30vw">
                <text>{{ item.desc }}</text>
              </view>
            </template>

            <!-- 触发提示的按钮 -->
            <uni-icons color="#239ea4" type="help-filled" size="14"></uni-icons>
          </uni-tooltip>
        </view>
        <view
          class="w-58% items-end flex justify-between"
          @click="
            () => {
              if (selectIds.includes(item.id)) {
                selectIds.splice(selectIds.indexOf(item.id), 1);
              } else {
                selectIds.push(item.id);
              }
              getBuyInfo();
            }
          "
        >
          <text class="text-#EC3D15 text-26rpx">¥ {{ item.price }}</text>
          <text class="text-#9e9d9d text-20rpx line-through"
            >¥ {{ item.original_price }}</text
          >
          <view
            :class="{
              '!bg-#EEA61E !b-#EEA61E': selectIds.includes(item.id),
            }"
            class="w-24rpx h-24rpx b-1 b-solid b-#DCDCDC bg-#F8F8F8 rounded-3rpx center"
          >
            <image
              v-if="selectIds.includes(item.id)"
              class="w-20rpx"
              src="@/static/assets/select.png"
              mode="widthFix"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
  <view
    class="fixed bottom-0 left-0 w-100% h-135rpx bg-#fff px-20rpx py-30rpx box-border items-center flex justify-between"
  >
    <text
      class="text-26rpx text-#121212 b-r-1 b-r-solid b-#8D9698 pr-12rpx mr-12rpx min-w-120rpx max-w-120rpx"
    >
      您需付费 \n{{ total }}个项目
    </text>
    <view class="grow">
      <view class="flex items-end" v-if="comboId != 0">
        <text class="text-18rpx text-#878787">套餐价格</text>
        <text class="text-21rpx text-#ED6907 mx-20rpx"
          >¥ {{ packagePrice }}</text
        >
        <text class="text-18rpx text-#878787 line-through"
          >¥ {{ packageOriginalPrice }}</text
        >
      </view>
      <view class="flex items-end">
        <text class="text-18rpx text-#878787">自选项目价格</text>
        <text class="text-21rpx text-#ED6907 mx-20rpx"
          >¥ {{ optionalPrice }}</text
        >
        <text class="text-18rpx text-#878787 line-through"
          >¥ {{ optionalOriginalPrice }}</text
        >
      </view>
      <view class="flex items-end">
        <text class="text-18rpx text-#ED6907">合计费用</text>
        <text class="text-24rpx text-#ED6907 ml-20rpx mr-5rpx">¥</text>
        <text class="text-36rpx text-#ED6907 mr-20rpx font-bold">{{
          totalPrice
        }}</text>
        <text class="text-18rpx text-#878787 line-through"
          >¥ {{ totalOriginalPrice }}</text
        >
      </view>
    </view>
    <button
      type="primary"
      @click="
        async () => {
          if (comboId) {
            // 增加自选
            uni.navigateBack({ delta: 1 });
          } else {
            // 自选
            if (!selectIds.value.length) {
              uni.$lu.toast('请选择项目');
              return;
            }
            if (selectIds.value.length <= 1) {
              // 少量自选跳转自选详情
              uni.navigateTo('/pages/main/optionalProject/optionalDetails');
              return;
            }
            if (selectIds.value.length > 1) {
              // 多个自选触发推荐套餐
              getComboRecommend();
              return;
            }
          }
        }
      "
      class="text-#F8F8F8 w-240rpx h-hull rounded-full !bg-#239EA3 !mx-0 text-30rpx"
    >
      确定
    </button>
  </view>
</template>
<style>
.uni-tooltip-popup {
  background-color: #fff;
}
</style>