From 45245cd878ad0600b9352a9cd84304bf3d3532a4 Mon Sep 17 00:00:00 2001
From: caiyuhao <3281194902@qq.com>
Date: Thu, 19 Sep 2024 08:22:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A4=E8=AF=81=E5=AE=A0=E6=89=98=E5=B8=88?=
 =?UTF-8?q?=20=E5=AE=A0=E6=89=98=E5=B8=88=E8=B5=84=E6=A0=BC=E8=AF=81?=
 =?UTF-8?q?=E7=94=B3=E8=AF=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Modal/authentication/1.vue |   2 +-
 src/pages/Modal/authentication/2.vue | 106 ++++++++++
 src/pages/Modal/authentication/3.vue | 296 +++++++++++++++++++++++++++
 src/pages/Modal/blankPage/1.vue      |   0
 src/pages/Modal/index.vue            |  20 +-
 5 files changed, 422 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/Modal/authentication/2.vue
 create mode 100644 src/pages/Modal/authentication/3.vue
 create mode 100644 src/pages/Modal/blankPage/1.vue

diff --git a/src/pages/Modal/authentication/1.vue b/src/pages/Modal/authentication/1.vue
index 4676823..0193be9 100644
--- a/src/pages/Modal/authentication/1.vue
+++ b/src/pages/Modal/authentication/1.vue
@@ -57,7 +57,7 @@ function close() {
 <style scoped>
 .modal {
   display: flex;
-  position: relative;
+  position: fixed;
   z-index: 1000;
   left: 0;
   top: 0;
diff --git a/src/pages/Modal/authentication/2.vue b/src/pages/Modal/authentication/2.vue
new file mode 100644
index 0000000..e1f9718
--- /dev/null
+++ b/src/pages/Modal/authentication/2.vue
@@ -0,0 +1,106 @@
+<template>
+  <div v-if="isVisible" class="modal">
+    <div class="certificate_content">
+      <image :src="imgUrl('@/static/certificate/认证宠托师.png')" class="modal-content" />
+      <div class="details">
+        <div class="content">您还未认证，</div>
+        <div class="content">加入我们成为宠托师!</div>
+      </div>
+      <div style="display: flex; align-items: center; margin-top: 40px">
+        <button open-type="" hover-class="button-hover" class="button_return">返回</button>
+        <button open-type="" hover-class="button-hover" class="button_join">加入</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { imgUrl } from '@/utils/commUtils'
+
+const props = defineProps({
+  isVisible: Boolean,
+  message: String,
+})
+
+const emit = defineEmits(['update:isVisible'])
+
+function close() {
+  emit('update:isVisible', false)
+}
+</script>
+
+<style scoped>
+.modal {
+  display: flex;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.certificate_content {
+  top: 340rpx;
+  left: 90rpx;
+  position: absolute;
+  background-color: #ffffff;
+  height: 800rpx;
+  border-radius: 15px;
+}
+
+.modal-content {
+  margin: 25px 0;
+  width: 310rpx;
+  height: 362rpx;
+  left: 25%;
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.details {
+  display: inline-block;
+  height: 100rpx;
+  width: 100%;
+}
+
+.content {
+  text-align: center;
+  color: #363636;
+  padding-bottom: 10px;
+}
+
+.button_return {
+  height: 90rpx;
+  width: 239rpx;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 70px;
+  background-color: #ffffff;
+  border: 1px solid #000000;
+}
+
+.button_join {
+  height: 90rpx;
+  width: 239rpx;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 70px;
+  background-color: #fccb30;
+}
+</style>
diff --git a/src/pages/Modal/authentication/3.vue b/src/pages/Modal/authentication/3.vue
new file mode 100644
index 0000000..c8785e3
--- /dev/null
+++ b/src/pages/Modal/authentication/3.vue
@@ -0,0 +1,296 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '宠托师资格证申请',
+  },
+}
+</route>
+
+<template>
+  <view class="hot">
+    <keep-alive>
+      <view class="container">
+        <view style="position: fixed; top: 0; z-index: 19">
+          <view style="position: relative">
+            <view
+              style="
+                background: #761ee9;
+                width: 100vw;
+                height: 230rpx;
+                border-radius: 0 0 28rpx 28rpx;
+                padding-top: 280px;
+              "
+            ></view>
+            <view style="background: #f6f7f9; width: 250vw; height: 60rpx"></view>
+            <view class="swiperImg" style="position: absolute; top: 180px; width: 100vw">
+              <view style="padding: 0 30rpx">
+                <swiper
+                  :autoplay="autoplay"
+                  :duration="duration"
+                  :indicator-dots="indicatorDots"
+                  :interval="interval"
+                  circular
+                  class="swiper"
+                  indicator-active-color="rgba(0, 0, 0, 0.3)"
+                  indicator-color="rgba(255, 255, 255, 0.5)"
+                  style="height: 300rpx"
+                >
+                  <swiper-item v-for="(item, index) in swiperList" :key="index">
+                    <image
+                      :src="item.url"
+                      style="height: 100%; width: 100%; border-radius: 30rpx"
+                    ></image>
+                  </swiper-item>
+                </swiper>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </keep-alive>
+  </view>
+  <view class="p-5 bg-gray-100 h-screen" style="margin-top: 480rpx">
+    <!-- 表单区域 -->
+    <view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
+      <!-- 导航栏 -->
+      <view class="mb-4 navigation">
+        <text class="text-gray-800 card_font">
+          <image
+            :src="imgUrl('@/static/service/1726299427263.png')"
+            mode="scaleToFill"
+            class="card_accompany"
+          />
+          先行赔付
+        </text>
+        <text class="text-gray-800 card_font">
+          <image
+            :src="imgUrl('@/static/service/1726299704300.png')"
+            mode="scaleToFill"
+            class="card_accompany"
+          />
+          喂水喂食
+        </text>
+        <text class="text-gray-800 card_font">
+          <image
+            :src="imgUrl('@/static/service/1726299755235.png')"
+            mode="scaleToFill"
+            class="card_accompany"
+          />
+          全程监管
+        </text>
+        <text class="text-gray-800 card_font">
+          <image
+            :src="imgUrl('@/static/service/1726299776227.png')"
+            mode="scaleToFill"
+            class="card_accompany"
+          />
+          安全保障
+        </text>
+      </view>
+      <view class="position">
+        <div class="specific_position">点击此处定位具体位置</div>
+        <image
+          :src="imgUrl('@/static/service/1726370894136.png')"
+          mode="scaleToFill"
+          class="specific_img"
+        />
+        <div class="get_address">
+          <div
+            style="
+              background-color: #9093ff;
+              border-radius: 10px;
+              width: 15px;
+              height: 15px;
+              margin-left: 10px;
+            "
+          ></div>
+          <input placeholder="请输入上车地址" v-model="petName" class="address_input" />
+          <image
+            :src="imgUrl('@/static/service/1726383571208.png')"
+            mode="scaleToFill"
+            style="width: 20px; height: 20px"
+          />
+        </div>
+        <div class="get_address">
+          <div
+            style="
+              background-color: #ffd27d;
+              border-radius: 10px;
+              width: 15px;
+              height: 15px;
+              margin-left: 10px;
+            "
+          ></div>
+          <input placeholder="请输入宠物到达地址" v-model="petName" class="address_input" />
+          <image
+            :src="imgUrl('@/static/service/1726383534059.png')"
+            mode="scaleToFill"
+            style="width: 20px; height: 20px"
+          />
+        </div>
+        <div class="get_phone">
+          <image
+            :src="imgUrl('@/static/service/1726383956983.png')"
+            mode="scaleToFill"
+            style="width: 20px; height: 20px"
+          />
+          <input placeholder="请输入下单人电话" v-model="petName" class="address_input" />
+          <image
+            :src="imgUrl('@/static/service/1726383571208.png')"
+            mode="scaleToFill"
+            style="width: 20px; height: 20px"
+          />
+        </div>
+
+        <button class="get_quote">免费获取报价</button>
+      </view>
+    </view>
+    <view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
+      <div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
+        <image
+          :src="imgUrl('@/static/service/1726389632384.png')"
+          mode="scaleToFill"
+          style="height: 80rpx; padding-bottom: 10px; width: 70%"
+        />
+        <image
+          :src="imgUrl('@/static/service/1726389664958.png')"
+          mode="scaleToFill"
+          style="height: 100rpx"
+        />
+      </div>
+    </view>
+    <view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
+      <div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
+        <image
+          :src="imgUrl('@/static/service/1726403986495.png')"
+          mode="scaleToFill"
+          style="height: 80rpx; padding-bottom: 10px; width: 70%"
+        />
+        <image
+          :src="imgUrl('@/static/service/1726404642077.png')"
+          mode="scaleToFill"
+          style="height: 550rpx"
+        />
+      </div>
+    </view>
+    <view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
+      <div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
+        <image
+          :src="imgUrl('@/static/service/1726405469570.png')"
+          mode="scaleToFill"
+          style="height: 80rpx; padding-bottom: 10px; width: 70%"
+        />
+      </div>
+    </view>
+  </view>
+</template>
+
+<script lang="js" setup>
+import { ref, reactive } from 'vue'
+import { imgUrl, toPath } from '@/utils/commUtils'
+// 轮播图
+const swiperList = [
+  {
+    url: 'C:/Users/Administrator/Desktop/picture(2)/100-1.png',
+  },
+  {
+    url: 'C:/Users/Administrator/Desktop/picture(2)/100-1.png',
+  },
+]
+const status = 'loadmore'
+const indicatorDots = true
+const autoplay = true
+const interval = 5000
+const duration = 500
+const screenInfoList = []
+const locationInfo = {
+  pageNum: 1,
+  pageSize: 10,
+  lat: 39.908868,
+  lon: 116.404424,
+  labelList: [1, 2, 3],
+}
+const total = 0
+const scrollTop = 0
+
+const props = defineProps({
+  tabbar: {
+    type: [String, Boolean],
+    default: '',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.navigation {
+  border-radius: 10px 10px 0 0;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  background-color: #ffefeb;
+}
+
+.card_accompany {
+  width: 40rpx;
+  height: 40rpx;
+  margin-left: 18rpx;
+}
+
+.card_font {
+  font-size: 13px;
+  color: #ff9a81;
+}
+
+.position {
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+  color: #fa3534;
+}
+
+.specific_img {
+  margin: 7px 0;
+  height: 20px;
+  width: 30px;
+}
+
+.specific_position {
+  font-weight: bold;
+}
+
+.get_address {
+  display: flex;
+  align-items: center;
+  border: 1px solid #9093ff;
+  margin-bottom: 40rpx;
+  width: 90%;
+  height: 130rpx;
+  // padding: 15px 80px 15px 80px;
+  border-radius: 10px;
+}
+
+.reach_address {
+  border: 1px solid #9093ff;
+}
+
+.address_input {
+  margin-left: 15px;
+  width: 80%;
+}
+
+.get_phone {
+  display: flex;
+  align-items: center;
+  width: 90%;
+  height: 100rpx;
+  border-bottom: 1px solid #f4f6f8;
+}
+
+.get_quote {
+  margin: 25px 0 20px 0;
+  background-color: #9093ff;
+  color: #f4f6f8;
+  width: 90%;
+}
+</style>
diff --git a/src/pages/Modal/blankPage/1.vue b/src/pages/Modal/blankPage/1.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Modal/index.vue b/src/pages/Modal/index.vue
index 1907278..56f462a 100644
--- a/src/pages/Modal/index.vue
+++ b/src/pages/Modal/index.vue
@@ -1,19 +1,37 @@
 <template>
-  <button @click="showModal">显示弹窗</button>
+  <button @click="showModal">显示弹窗1</button>
+  <button @click="showModal2">显示弹窗2</button>
+  <button @click="toPath('/pages/Modal/authentication/3')">显示弹窗3</button>
   <Modal
     :isVisible="isModalVisible"
     @update:isVisible="isModalVisible = $event"
     message="这是一个弹窗内容！"
   />
+  <Modal2
+    :isVisible="isModalVisible2"
+    @update:isVisible="isModalVisible2 = $event"
+    message="这是一个弹窗内容！"
+  />
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import Modal from './authentication/1.vue'
+import Modal2 from './authentication/2.vue'
+import Modal3 from './authentication/3.vue'
 
 const isModalVisible = ref(false)
+const isModalVisible2 = ref(false)
+const toPath = (path) => {
+  uni.navigateTo({
+    url: path,
+  })
+}
 
 function showModal() {
   isModalVisible.value = true
 }
+function showModal2() {
+  isModalVisible2.value = true
+}
 </script>