1.增加自选项目价格说明

h5/pages/main/optionalProject/optionalProject.vue

@@ -5,17 +5,42 @@
  * date：2024年9月11日 19:24:50
  */
 import { ref } from "vue";
-import { $api, $response } from "@/api";
+import { $api, $response, $image } from "@/api";
 import { onShow } from "@dcloudio/uni-app";
 import { useStore } from "@/store";
+
+const $props = defineProps({
+  hospital: {
+    type: String,
+    default: "",
+  },
+  comboId: {
+    type: String,
+    default: "",
+  },
+  itemIds: {
+    type: String,
+    default: "",
+  },
+});
+
 const $store = useStore();
 
 let leftList = ref({}); // 左侧列表
 let tabIndex = ref(""); // 默认选中
 let rightLeft = ref([]); // 右侧列表
-let selectList = 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); // 总项目数
 
 const getAllItems = async (e) => {
+  // 获取全部项目
   const response = await $api("GetAllItems", {
     search: e?.value,
   });
@@ -25,12 +50,32 @@ const getAllItems = async (e) => {
       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 () => {
+  const response = await $api("BuyInfo", {
+    item_ids: selectIds.value,
+    hospital: $props.hospital,
+    combo_id: $props.comboId,
+  });
+  $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 = () => {
-  getAllItems();
+  selectIds.value = $props.itemIds?.split(",") || [];
+  getAllItems(); // 获取全部项目
+  getBuyInfo(); // 获取购买信息
 };
 
 const config_ref = ref(null);
@@ -72,12 +117,17 @@ onShow(() => {
         :class="{
           'bg-gradient-to-r from-#edf6f5 to-#bbdfe2': tabIndex == index,
         }"
-        @click="(tabIndex = index), (rightLeft = item.children)"
+        @click="
+          (tabIndex = index),
+            (rightLeft = item.children),
+            (headImg = item.head_img)
+        "
       >
         {{ item.title }}
       </view>
     </view>
     <view class="grow h-100% bg-#fff">
+      <image class="w-full" mode="widthFix" :src="$image(headImg)"></image>
       <view
         v-for="(item, index) in rightLeft"
         :key="index"
@@ -87,23 +137,29 @@ onShow(() => {
         class="flex justify-between center py-30rpx px-20rpx b-b-1px b-b-solid b-b-#e5e5e5"
         @click="
           () => {
-            selectList.push(item.id);
+            if (selectIds.includes(item.id)) {
+              selectIds.splice(selectIds.indexOf(item.id), 1);
+            } else {
+              selectIds.push(item.id);
+            }
+            getBuyInfo();
           }
         "
       >
         <text class="w-40% text-#0E0E0E text-25rpx">{{ item.title }}</text>
-        <view class="w-50% items-center flex justify-end">
-          <text class="text-#EC3D15 text-26rpx mr-40rpx"
-            >¥ {{ item.price }}</text
+        <view class="w-58% items-end flex justify-between">
+          <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': selectList.includes(item.id),
+              '!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="selectList.includes(item.id)"
+              v-if="selectIds.includes(item.id)"
               class="w-20rpx"
               src="@/static/assets/select.png"
               mode="widthFix"
@@ -113,6 +169,51 @@ onShow(() => {
       </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">
+        <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"
+      class="text-#F8F8F8 w-240rpx h-hull rounded-full !bg-#239EA3 !mx-0 text-30rpx"
+    >
+      确定
+    </button>
+  </view>
 </template>
 <style scoped>
 .search > .uni-searchbar__box {