hainan_2024/h5/pages/main/tjyy/tjyy.vue

<script setup>
import DraggableButton from "@/pages/components/goHome.vue";
/**
 * name：
 * user：yytjsj
 * date：2024年9月25日 10:25:00
 */
import { ref } from "vue";
import { $api, $response, $image } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import wx from "weixin-js-sdk";
import { useStore } from "@/store";
const $store = useStore();

let buyInfo = ref({}); // 购买信息
let groupInfo = ref({});
let comboInfo = ref({});
let itemsInfo = ref({});
let userInfo = ref(""); // 病人信息
let truePrice = ref(0); // 总价
let yytjInfo = ref({}); // 预约信息
let popup = ref(null);
let save_money = ref(0);
let integral = ref(0);
let couponList = ref([]);
let selectStatus = ref(null);
let selectIndex = ref(0);

const mountedAction = async () => {
  uni.showLoading({
    title: "加载中",
  });
  console.log($store.getYytjInfo(), "123123");
  buyInfo.value = $store.getBuyInfo();
  userInfo.value = buyInfo.value.group_id
    ? $store.getGroupInfo()
    : $store.getUser();
  let time = setTimeout(() => {
    getnmrList();
    GetPersonIntegralSaveMoneyCouponInfo();
    clearTimeout(time);
  }, 500);
};

const GetPersonIntegralSaveMoneyCouponInfo = async () => {
  // 获取个人积分, 预存款, 优惠券
  const response = await $api("GetPersonIntegralSaveMoneyCouponInfo", {
    person_id: $store.getUser()?.person_id,
  });
  $response(response, () => {
    couponList.value = response.data.coupon_list;
    save_money.value = response.data.save_money;
    integral.value = response.data.integral;
  });
};

const selectDiscount = (status) => {
  // 选择折扣
  if (status == 2) {
    // 优惠券
    if (couponList.value.length) {
      toRouter("/pages/main/coupon/coupon");
    } else {
      uni.$lu.toast("暂无优惠券");
    }
  }

  if (status == 1) {
    // 积分
    if (integral.value) {
      selectStatus.value = status;
      popup.value.open("bottom");
      if (yytjInfo.value.pointsPrice) {
        selectIndex.value = 1;
      } else {
        selectIndex.value = 0;
      }
    } else {
      uni.$lu.toast("暂无积分");
    }
  }

  if (status == 3) {
    // 预付款
    if (save_money.value) {
      selectStatus.value = status;
      if (yytjInfo.value.prepaidPrice) {
        selectIndex.value = 1;
      } else {
        selectIndex.value = 0;
      }
      popup.value.open("bottom");
    } else {
      uni.$lu.toast("暂无预付款");
    }
  }
};

const comfrimSelect = () => {
  // 确定选择折扣
  if (selectStatus.value == 1) {
    // 积分
    if (selectIndex.value) {
      yytjInfo.value.pointsPrice = integral.value;
      $store.setYytjInfo(yytjInfo.value);
    } else {
      yytjInfo.value.pointsPrice = 0;
      $store.setYytjInfo(yytjInfo.value);
    }
  } else {
    //预存款
    if (selectIndex.value) {
      yytjInfo.value.prepaidPrice = save_money.value;
      $store.setYytjInfo(yytjInfo.value);
    } else {
      yytjInfo.value.prepaidPrice = 0;
      $store.setYytjInfo(yytjInfo.value);
    }
  }
  popup.value.close();
};

const getnmrList = async () => {
  // 获取号源项目
  yytjInfo.value = $store.getYytjInfo();
  console.log(yytjInfo.value);
  const response = await $api("BuyInfo", buyInfo.value);
  $response(response, () => {
    if (buyInfo.value.group_id && response.data.group_info.length) {
      // 团检
      groupInfo.value = response.data.group_info[0];
    }
    comboInfo.value = response.data.combo_info;
    itemsInfo.value = response.data.items_info;
    truePrice.value = response.data.true_price;

    if (!yytjInfo.value?.nmr_list?.length) {
      yytjInfo.value.nmr_list = response.data.nmr_list.map((val) => {
        return {
          ...val,
          time: "",
          id: "",
        };
      });
      yytjInfo.value.nmr_list.push({
        item_id: -1,
        name: "体检时间",
        time: "",
        id: "",
      });
    }
    uni.hideLoading();
  });
};

const comfrimyy = async () => {
  let plan_id = "";
  let plan_nmr_id = "";
  // if(!yytjInfo.value?.doctor_name){
  //   uni.$lu.toast("请选择医生");
  //   return;
  // }
  console.log(yytjInfo.value?.nmr_list);
  for (let i = 0; i < yytjInfo.value?.nmr_list?.length; i++) {
    if (!yytjInfo.value?.nmr_list[i].id) {
      uni.$lu.toast("请完善预约时间");
      return;
    }
  }

  if (yytjInfo.value?.nmr_list?.length > 1) {
    plan_nmr_id = yytjInfo.value?.nmr_list[0]?.id;
  }
  if (yytjInfo.value?.nmr_list?.length > 0) {
    plan_id = yytjInfo.value?.nmr_list[yytjInfo.value?.nmr_list.length - 1]?.id;
  }

  console.log(groupInfo.value);

  let obj = {
    person_id: buyInfo.value.person_id,
    type: buyInfo.value.group_id ? 2 : 1,
    hospital: buyInfo.value.hospital,
    group_id: buyInfo.value.group_id,
    combo_id:
      buyInfo.value?.combo_id ||
      (groupInfo.value?.combo_id ? "" : userInfo.value?.combo_id) ||
      "",
    item_ids: buyInfo.value.item_ids,
    plan_id: plan_id,
    plan_nmr_id: plan_nmr_id,
    doctor: yytjInfo.value?.doctor_name || "",
  };
  console.log(obj);

  const response = await $api("OrderCreate", obj);
  // return
  $response(response, () => {
    if (response.status) {
      if (response.data.action == "pay") {
        StartPay(response.data.orderid);
      } else {
        uni.navigateTo({
          url: "/pages/buy/done/done?id=" + response.data.orderid,
        });
      }
    }
  });
};

const StartPay = async (id) => {
  //继续支付
  uni.showLoading();
  const response = await $api("StartPay", {
    openid: localStorage.getItem("OPENID"),
    id: id,
  });
  uni.hideLoading();
  $response(response, () => {
    if (response.status) {
      let info = response.data.info;
      let p =
        "&appid=" +
        info.appid +
        "&sub_org_code=" +
        info.sub_org_code +
        "&ghzid=" +
        info.ghzid +
        "&orderid=" +
        info.orderid +
        "&order_desc=" +
        info.order_desc +
        "&amount=" +
        info.amount +
        "&notify_url=" +
        info.notify_url +
        "&timestamp=" +
        info.timestamp +
        "&nonce=" +
        info.nonce +
        "&signature=" +
        info.signature;
      console.log(p);
      wx.miniProgram.navigateTo({
        url:
          "/pages/other/entry/index?path=/pages/physical-examination/payment/index" +
          p,
      });
    }
  });
};

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

onShow(() => {
  if (!!config_ref.value) {
    mountedAction();
  }
});

const toRouter = (url, status) => {
  if (status) {
    uni.setStorageSync("yytjInfoS", yytjInfo.value);
  }
  uni.navigateTo({
    url: url,
  });
};
</script>
<template>
  <DraggableButton />
  <uni-popup ref="popup">
    <view
      class="center relative px-10rpx pb-30rpx text-36rpx bg-#fff rounded-t-15rpx box-border col"
    >
      <view
        class="text-28rpx p-[40rpx_50rpx_25rpx_50rpx] between w-full bs b-b-1 b-#DEDEDE box-border"
      >
        <text class="line-height-[1] text-#171717 mr-10rpx">{{
          selectStatus == 1 ? "积分" : "预存款"
        }}</text>
        <view class="mr-auto text-#888787">
          （剩余<text class="text-#FB670E">{{
            selectStatus == 1 ? integral : save_money
          }}</text
          >)
        </view>
        <uni-icons
          @click="popup.close()"
          type="closeempty"
          color="#A6A6A6"
          size="26"
          class=""
        ></uni-icons>
      </view>
      <view class="text-#171717 text-28rpx px-40rpx box-border w-full">
        <view
          class="between pl-20rpx pr-10rpx box-border bs b-b-1 b-#E1ECEE h-90rpx"
          @click="selectIndex = 0"
        >
          <text>暂不使用{{ selectStatus == 1 ? "积分" : "预存款" }}</text>
          <uni-icons
            :type="!selectIndex ? 'checkbox-filled' : 'circle'"
            :color="!selectIndex ? '#239EA3' : '#A6A6A6'"
            size="20"
            class=""
          ></uni-icons>
        </view>
        <view
          class="between pl-20rpx pr-10rpx box-border bs b-b-1 b-#E1ECEE h-90rpx"
          @click="selectIndex = 1"
        >
          <text v-if="selectStatus == 1"
            >抵扣￥{{ integral }}使用{{ integral }}积分</text
          >
          <text v-else>抵扣￥{{ save_money }}使用{{ save_money }}积分</text>
          <uni-icons
            :type="selectIndex ? 'checkbox-filled' : 'circle'"
            :color="selectIndex ? '#239EA3' : '#A6A6A6'"
            size="20"
            class=""
          ></uni-icons>
        </view>
      </view>
      <view
        @click="comfrimSelect"
        class="text-#fff text-34rpx rounded-full bg-#239EA3 mt-80rpx ma w-520rpx h-100rpx center"
      >
        确定
      </view>
    </view>
  </uni-popup>
  <view>
    <view v-if="!!$store.config">
      <view :ref="configRef"></view>
    </view>
    <view class="px-20rpx box-border pb-200rpx comboInfo">
      <view
        style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04)"
        class="p-16rpx pb-20rpx pt-30rpx rounded-15rpx bg-#fff"
      >
        <view
          class="flex w-full b-0 b-solid b-#E1ECEE mb-7rpx"
          :class="{
            'b-b-1 pb-25rpx': itemsInfo?.items?.length,
          }"
          v-if="!buyInfo.group_id && comboInfo?.items?.length"
        >
          <!-- 1 个检套餐 显示套餐信息 -->
          <image
            v-if="comboInfo.img"
            :src="$image(comboInfo.img)"
            class="w-190rpx h-190rpx mr-37rpx"
            mode="widthFix"
          />
          <view class="flex flex-col grow">
            <text>{{ comboInfo.combo_name }}</text>
            <view class="mt-13rpx mb-18rpx">
              <uni-tag
                v-for="(val, i) in comboInfo.tags"
                :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="comboInfo.tags2?.length">
              <text
                v-for="(val, i) in comboInfo.tags2"
                :key="i"
                class="text-#8B8B8B text-20rpx line-height-[1] px-5rpx b-0 b-solid b-#8B8B8B"
                :class="i == comboInfo.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">{{
                comboInfo.price
              }}</text>
              <text class="text-18rpx text-#878787 line-through">{{
                comboInfo.original_price
              }}</text>
              <text class="text-18rpx text-#878787 ml-auto mr-55rpx"
                >已售{{ comboInfo.sale_count }}</text
              >
            </view>
          </view>
        </view>
        <view
          v-if="buyInfo.group_id"
          class="b-0 b-solid b-#E1ECEE pb-25rpx mb-7rpx"
          :class="{
            'b-b-1': itemsInfo?.items?.length,
          }"
        >
          <!-- 3团检套餐 4团检自选 都要显示头像和名字 -->
          <view class="flex items-center">
            <image
              src="@/static/assets/userm.png"
              class="w-70rpx h-70rpx mr-35rpx"
            />
            <view class="flex items-center grow">
              <text class="text-#707070 text-24rpx">您好，</text>
              <text class="text-#0E0E0E text-32rpx">{{ groupInfo.name }}</text>
            </view>
          </view>
          <view class="text-24rpx mt-40rpx">
            <!-- 3团检套餐 4团检自选 都要显示单位部门等信息 -->
            <view class="pb-30rpx">
              <text class="text-#8B8B8B">单位名称：</text>
              <text>{{ groupInfo.group_name }}</text>
            </view>
            <view class="pb-30rpx">
              <text class="text-#8B8B8B">部门名称：</text>
              <text>{{ groupInfo.bumen_name }}</text>
            </view>
            <view
              class="pb-30rpx"
              v-if="groupInfo.combo_name || comboInfo?.combo_name"
            >
              <text class="text-#8B8B8B">套餐名称：</text>
              <text>{{ groupInfo?.combo_name || comboInfo?.combo_name }}</text>
            </view>
            <view>
              <text class="text-#8B8B8B">体检额度：</text>
              <text>{{ groupInfo.tongshou_xiane }}</text>
            </view>
          </view>
        </view>
        <view class="pt-15rpx" v-if="itemsInfo?.items?.length">
          <view class="text-30rpx text-#0E0E0E pb-30rpx"> 自选项目 </view>
          <view class="text-#8B8B8B text-24rpx">
            <view
              class="flex mb-20rpx"
              v-for="(val, index) in itemsInfo?.items.length > 3
                ? 3
                : itemsInfo?.items"
              :key="index"
            >
              <text class="whitespace-nowrap"
                >{{ itemsInfo?.items[index]?.keshi_name }} -
              </text>
              <view class="line-clamp-2">
                <text
                  class="ml-10rpx text-#0E0E0E"
                  v-for="(v, i) in itemsInfo?.items[index]?.children"
                  :key="i"
                  >{{ v.name }}</text
                >
              </view>
            </view>
          </view>
        </view>
      </view>
      <view
        style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04)"
        class="p-16rpx pb-20rpx pt-30rpx rounded-15rpx bg-#fff my-16rpx"
      >
        <view
          class="text-#0E0E0E text-30rpx b-0 b-solid b-b-1 b-#E1ECEE pb-20rpx mb-35rpx"
          >预约人信息</view
        >
        <view>
          <view class="text-28rpx text-#000 bold mb-20rpx">{{
            userInfo.name
          }}</view>
          <view class="text-24rpx text-#8B8B8B mb-30rpx between">
            <text>{{ userInfo.sex == 1 ? "男性" : "女性" }}</text>
            <text class="ml-20rpx">{{
              userInfo.married == 1
                ? "已婚"
                : userInfo.married == 2
                ? "未婚"
                : "未知"
            }}</text>
            <text class="ml-20rpx mr-auto">{{ userInfo.phone }}</text>
            <button
              v-if="!buyInfo.group_id"
              @click="toRouter('/pages/user/choose/choose')"
              class="text-24rpx text-#fff bg-#31AEB6 rounded-full px-26rpx h55rpx !m-0 center !ml-auto"
            >
              更改预约人
            </button>
          </view>
          <view
            class="text-24rpx text-#040404 mb-30rpx"
            @click="toRouter('/pages/main/yytjsj/yytjsj', 1)"
          >
            <view
              class="mb-20rpx between"
              v-for="(val, index) in yytjInfo?.nmr_list"
              :key="index"
              v-if="yytjInfo?.nmr_list?.length"
            >
              <view class="flex-col flex">
                <text v-for="(v, i) in val.name?.split('/')" :key="i">{{
                  v
                }}</text>
              </view>
              <text class="ml-20rpx mr-auto text-#239EA3">{{ val.time }}</text>
              <text class="text-30rpx">{{
                val.time ? "重新预约" : "预约时间"
              }}</text>
            </view>
            <view class="mb-20rpx between">
              <text>体检医生</text>
              <text class="text-30rpx">{{
                yytjInfo?.doctor_name || "选择医生"
              }}</text>
            </view>
          </view>
        </view>
      </view>

      <view
        style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04)"
        class="p-38rpx pr-17rpx rounded-15rpx bg-#fff between text-24rpx line-height-[1] mb-15rpx"
        @click="selectDiscount(1)"
      >
        <view>
          <text class="text-#050505">积分抵扣</text>
          <text v-if="integral" class="text-#828383"
            >（共{{ integral }}个）</text
          >
        </view>
        <view class="ml-auto mr-20rpx">
          <text class="text-#FB4F1A" v-if="yytjInfo.pointsPrice"
            >-¥{{ yytjInfo.pointsPrice }}</text
          >
          <text class="text-#070707" v-else>去选择</text>
        </view>
        <uni-icons type="right" size="12"></uni-icons>
      </view>

      <view
        style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04)"
        class="p-38rpx pr-17rpx rounded-15rpx bg-#fff between text-24rpx line-height-[1] mb-15rpx"
        @click="selectDiscount(2)"
      >
        <view>
          <text class="text-#050505">优惠券</text>
          <text v-if="couponList.length" class="text-#828383"
            >（共{{ couponList.length }}个）</text
          >
        </view>
        <view class="ml-auto mr-20rpx">
          <text class="text-#FB4F1A" v-if="yytjInfo.couponPrice"
            >-¥{{ yytjInfo.couponPrice }}</text
          >
          <text class="text-#070707" v-else>去选择</text>
        </view>
        <uni-icons type="right" size="12"></uni-icons>
      </view>

      <view
        style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04)"
        class="p-38rpx pr-17rpx rounded-15rpx bg-#fff between text-24rpx line-height-[1] mb-15rpx"
        @click="selectDiscount(3)"
      >
        <view>
          <text class="text-#050505">预存款</text>
          <text v-if="save_money" class="text-#828383"
            >（共{{ save_money }}个）</text
          >
        </view>
        <view class="ml-auto mr-20rpx">
          <text class="text-#FB4F1A" v-if="yytjInfo.prepaidPrice"
            >-¥{{ yytjInfo.prepaidPrice }}</text
          >
          <text class="text-#070707" v-else>去选择</text>
        </view>
        <uni-icons type="right" size="12"></uni-icons>
      </view>

      <view class="text-#FB4F1A text-20rpx mb-30rpx">
        <view class="flex items-center mt-20rpx">
          <uni-icons
            type="info-filled"
            class="rotate-180"
            color="#FB4F1A"
            size="22"
          ></uni-icons>
          <text>选择“预约人”和“体检时间”后，请点击提交按钮,完成预约。</text>
        </view>
        <view class="flex items-center mt-30rpx">
          <uni-icons
            type="info-filled"
            class="rotate-180"
            color="#FB4F1A"
            size="22"
          ></uni-icons>
          <text
            >购买后如需退款，未到预约体检日期者可在“我的订单”中点击申请退款，体检当日取消或逾期未检者须至体检中心服务台办理
          </text>
        </view>
      </view>

      <view
        style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04)"
        class="px-16rpx rounded-15rpx bg-#fff"
      >
        <view
          class="pt-42rpx pb-36rpx b-0 b-solid b-b-1 b-#E1ECEE"
          v-if="
            (comboInfo && comboInfo?.items?.length) || groupInfo?.items?.length
          "
        >
          <view class="text-#0E0E0E text-30rpx mb-35rpx">套餐名称</view>
          <view class="text-24rpx between">
            <text class="text-#0E0E0E">{{
              comboInfo?.combo_name || groupInfo?.combo_name
            }}</text>
            <text
              >¥{{ comboInfo?.price || groupInfo?.sixi_zong_ji_jin_e }}</text
            >
          </view>
        </view>

        <view
          class="pt-42rpx pb-36rpx b-0 b-solid b-b-1 b-#E1ECEE"
          v-if="itemsInfo && itemsInfo?.items?.length"
        >
          <view class="text-#0E0E0E text-30rpx mb-35rpx">自选项目</view>
          <view
            class="text-24rpx"
            v-for="(val, index) in itemsInfo?.items"
            :key="index"
          >
            <view
              v-for="(v, i) in val.children"
              :key="i"
              class="between mb-30rpx"
              :class="{
                '!mb-0':
                  index == itemsInfo?.items?.length - 1 &&
                  i == val.children.length - 1,
              }"
            >
              <text class="text-#8B8B8B">{{ val.keshi_name }} -</text>
              <text class="text-#0E0E0E mr-auto ml-20rpx">{{ v.name }}</text>
              <text class="text-#6D6D6D">¥{{ v.price }}</text>
            </view>
          </view>
        </view>
      </view>
      <view
        class="shadow-[0px_1px_1px_0px_rgba(0,0,0,0.08)] fixed bottom-0 left-0 w-full bg-#fff py-30rpx pl-55rpx pr-45rpx box-border between"
      >
        <view class="text-#ED6907 text-48rpx center items-end line-height-[1]">
          <text class="text-24rpx">¥</text>
          <text>{{ truePrice }}</text>
        </view>
        <button
          @click="comfrimyy"
          class="w-276rpx h-76rpx center text-#fff text-30rpx rounded-full bg-#239EA3 !m-0"
        >
          提交预约
        </button>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
.activeTime {
  background-color: #239ea3;
  color: #fff;
}

.acitvetc {
  background-color: #e0f1f2;
}

.comboInfo {
  position: relative;
  z-index: 1;
  &::after {
    content: "";
    width: 100%;
    height: 50rpx;
    background-color: #239ea3;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .active {
    color: #239ea3;
    font-weight: bold;
    position: relative;

    &::after {
      content: "";
      width: 26rpx;
      height: 3rpx;
      background-color: #239ea3;
      position: absolute;
      left: 50%;
      bottom: -10rpx;
      transform: translateX(-50%);
    }
  }
}
</style>