8.27更新自定义组件
This commit is contained in:
parent
ef5b3fb59f
commit
58d9fb3d7a
166
components/dialog/dialog.vue
Normal file
166
components/dialog/dialog.vue
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
<template>
|
||||||
|
<view class="dialog-overlay" v-if="visible" @click="handleOverlayClick">
|
||||||
|
<view class="dialog-container" @click.stop>
|
||||||
|
<!-- 弹窗标题 -->
|
||||||
|
<view class="dialog-header">
|
||||||
|
<text class="dialog-title">{{ title }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 弹窗内容 -->
|
||||||
|
<view class="dialog-content">
|
||||||
|
<slot name="content">
|
||||||
|
<text class="default-content">{{ content }}</text>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 弹窗底部按钮 -->
|
||||||
|
<view class="dialog-footer">
|
||||||
|
<view
|
||||||
|
class="dialog-btn cancel"
|
||||||
|
|
||||||
|
@click="oncancel"
|
||||||
|
>
|
||||||
|
<text class="btn-text">取消</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="dialog-btn confirm"
|
||||||
|
@click="onconfirm"
|
||||||
|
>
|
||||||
|
<text class="btn-text">确定</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineProps, defineEmits } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '温馨提示'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
closeOnOverlay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['close'])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const oncancel=()=>{
|
||||||
|
emit('close');
|
||||||
|
|
||||||
|
}
|
||||||
|
const onconfirm=()=>{
|
||||||
|
emit('close')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
width: 92%;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-header {
|
||||||
|
padding: 40rpx 40rpx 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
.dialog-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #8B2316;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-content {
|
||||||
|
padding: 40rpx;
|
||||||
|
min-height: 120rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.default-content {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-footer {
|
||||||
|
display: flex;
|
||||||
|
padding:0 40rpx;
|
||||||
|
|
||||||
|
.dialog-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
border-right: 1rpx solid #f0f0f0;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cancel {
|
||||||
|
.btn-text {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.confirm {
|
||||||
|
.btn-text {
|
||||||
|
color: #8B2316;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.default {
|
||||||
|
.btn-text {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -232,6 +232,7 @@
|
|||||||
@tabChange="onTabChange"
|
@tabChange="onTabChange"
|
||||||
></custom-tabbar>
|
></custom-tabbar>
|
||||||
</view>
|
</view>
|
||||||
|
<unidialog :visible="visible" :content="'有福利待领取'" @close="visible=false" ></unidialog>
|
||||||
<up-overlay :show="showSign" >
|
<up-overlay :show="showSign" >
|
||||||
<view class="signwrap">
|
<view class="signwrap">
|
||||||
<view class="signbox">
|
<view class="signbox">
|
||||||
@ -252,12 +253,14 @@
|
|||||||
|
|
||||||
</view>
|
</view>
|
||||||
</up-overlay>
|
</up-overlay>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, nextTick, computed } from 'vue';
|
import { ref, reactive, onMounted, nextTick, computed } from 'vue';
|
||||||
import { onShow, onLoad, onPageScroll } from "@dcloudio/uni-app";
|
import { onShow, onLoad, onPageScroll } from "@dcloudio/uni-app";
|
||||||
import CustomTabbar from '@/components/tabBar/tabBar.vue';
|
import CustomTabbar from '@/components/tabBar/tabBar.vue';
|
||||||
|
import unidialog from "@/components/dialog/dialog.vue"
|
||||||
import navTo from "@/utils/navTo.js";
|
import navTo from "@/utils/navTo.js";
|
||||||
import bg from "@/static/more_bg.png"
|
import bg from "@/static/more_bg.png"
|
||||||
import patient from "@/static/icon_home_my_patient.png"
|
import patient from "@/static/icon_home_my_patient.png"
|
||||||
@ -272,10 +275,11 @@
|
|||||||
import nosign from "@/static/home_no_qiandao_icon.png"
|
import nosign from "@/static/home_no_qiandao_icon.png"
|
||||||
import sign from "@/static/home_qiandao_icon.png"
|
import sign from "@/static/home_qiandao_icon.png"
|
||||||
import signImg from "@/static/sign_in_bng_big.png"
|
import signImg from "@/static/sign_in_bng_big.png"
|
||||||
|
|
||||||
const showSign=ref(false)
|
const showSign=ref(false)
|
||||||
// 定义refs
|
// 定义refs
|
||||||
const tabbarRef = ref(null);
|
const tabbarRef = ref(null);
|
||||||
|
const visible=ref(true)
|
||||||
// 滚动相关状态
|
// 滚动相关状态
|
||||||
const scrollTop = ref(0);
|
const scrollTop = ref(0);
|
||||||
const bannerHeight = 400; // 轮播图高度,单位rpx
|
const bannerHeight = 400; // 轮播图高度,单位rpx
|
||||||
|
|||||||
@ -24,7 +24,7 @@
|
|||||||
<view class="base-info">
|
<view class="base-info">
|
||||||
<view class="name-row">
|
<view class="name-row">
|
||||||
<text class="name">aa</text>
|
<text class="name">aa</text>
|
||||||
<uni-icons type="person" size="20" color="#c0392b" style="margin-left: 8rpx;"></uni-icons>
|
<up-image :src="manImg" width="36rpx" height="36rpx" ></up-image>
|
||||||
</view>
|
</view>
|
||||||
<view class="line"><text class="label">昵称:</text><text class="value">Android</text></view>
|
<view class="line"><text class="label">昵称:</text><text class="value">Android</text></view>
|
||||||
<view class="line"><text class="label">年龄:</text><text class="value">23</text><text class="sep">|</text><text class="label">民族:</text><text class="value">未知</text></view>
|
<view class="line"><text class="label">年龄:</text><text class="value">23</text><text class="sep">|</text><text class="label">民族:</text><text class="value">未知</text></view>
|
||||||
@ -88,6 +88,8 @@
|
|||||||
import msgImg from "@/static/icon_message_big.png"
|
import msgImg from "@/static/icon_message_big.png"
|
||||||
import planImg from "@/static/image_backgrond_red_big1.png"
|
import planImg from "@/static/image_backgrond_red_big1.png"
|
||||||
import recordImg from "@/static/image_backgrond_red_big.png"
|
import recordImg from "@/static/image_backgrond_red_big.png"
|
||||||
|
import manImg from "@/static/new_man_big.png"
|
||||||
|
import womanImg from "@/static/new_woman_big.png"
|
||||||
const showAllHistory = ref(false)
|
const showAllHistory = ref(false)
|
||||||
const historyText = '2025年检查出戊型肝炎, 同时患有结核。有饮酒史、无吸烟史, 无输血或其他血液制品史, 使用过恩…'
|
const historyText = '2025年检查出戊型肝炎, 同时患有结核。有饮酒史、无吸烟史, 无输血或其他血液制品史, 使用过恩…'
|
||||||
|
|
||||||
@ -110,7 +112,7 @@
|
|||||||
.avatar { width: 140rpx; height: 140rpx; border-radius: 12rpx; margin-right: 20rpx; }
|
.avatar { width: 140rpx; height: 140rpx; border-radius: 12rpx; margin-right: 20rpx; }
|
||||||
.base-info { flex:1; }
|
.base-info { flex:1; }
|
||||||
.name-row { display:flex; align-items:center; margin-bottom: 10rpx; }
|
.name-row { display:flex; align-items:center; margin-bottom: 10rpx; }
|
||||||
.name { font-size: 40rpx; color:#222; font-weight: 600; }
|
.name { font-size: 40rpx; color:#222; margin-right: 10rpx;}
|
||||||
.line { font-size: 28rpx; color:#666; margin-top: 6rpx; display:flex; align-items:center; }
|
.line { font-size: 28rpx; color:#666; margin-top: 6rpx; display:flex; align-items:center; }
|
||||||
.label { color:#999;white-space: nowrap; }
|
.label { color:#999;white-space: nowrap; }
|
||||||
.value { color:#333; }
|
.value { color:#333; }
|
||||||
|
|||||||
BIN
static/new_man_big.png
Normal file
BIN
static/new_man_big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/new_woman_big.png
Normal file
BIN
static/new_woman_big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Loading…
x
Reference in New Issue
Block a user