8.21提交
This commit is contained in:
zoujiandong
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<view class="group-msg-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="群发消息"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
/>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="content-area">
|
||||
<view class="emptybox">
|
||||
<up-image :src="emptyImg" width="176rpx" height="204rpx" ></up-image>
|
||||
<text class="empty-text">暂无数据</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部固定按钮 -->
|
||||
<view class="bottom-bar">
|
||||
<button class="send-btn" @click="openModal">群发消息</button>
|
||||
</view>
|
||||
|
||||
<!-- 弹窗与遮罩 -->
|
||||
<view v-if="showModal" class="mask" @click="closeModal"></view>
|
||||
<view v-if="showModal" class="center-modal">
|
||||
<view class="modal-title">温馨提示</view>
|
||||
<view class="modal-divider"></view>
|
||||
<view class="modal-item" @click="onSelect('single')">
|
||||
<text>单独选择</text>
|
||||
</view>
|
||||
<view class="modal-divider"></view>
|
||||
<view class="modal-item" @click="onSelect('group')">
|
||||
<text>分组选择</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import emptyImg from "@/static/icon_empty.png"
|
||||
const showModal = ref(true);
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const openModal = () => {
|
||||
showModal.value = true;
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
showModal.value = false;
|
||||
};
|
||||
|
||||
const onSelect = (type) => {
|
||||
showModal.value = false;
|
||||
if (type === 'single') {
|
||||
uni.showToast({ title: '单独选择', icon: 'none' });
|
||||
} else if (type === 'group') {
|
||||
uni.showToast({ title: '分组选择', icon: 'none' });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-msg-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
// 为 nav-bar 腾出空间
|
||||
padding-bottom: 120rpx; // 为底部按钮留空
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 280rpx);
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx solid #eaeaea;
|
||||
padding: 0; // 让按钮顶满
|
||||
.send-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: #00cac1;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
/* 遮罩与弹窗 */
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.center-modal {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 650rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
z-index: 11;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
color: #8B2316;
|
||||
padding: 28rpx 20rpx;
|
||||
}
|
||||
|
||||
.modal-item {
|
||||
padding: 36rpx 28rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.modal-divider {
|
||||
height: 2rpx;
|
||||
background: #eeeeee;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<view class="my-code-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="我的二维码"
|
||||
@cviewckLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="redo" color="#8B2316" size="22"></uni-icons>
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
|
||||
<!-- 内容 -->
|
||||
<scroll-view scroll-y class="page-scroll">
|
||||
<!-- 顶部蓝色横幅 -->
|
||||
<view class="blue-banner">
|
||||
<up-image :src="bgImg" width="100%" mode="widthFix" ></up-image>
|
||||
</view>
|
||||
|
||||
<!-- 白色信息卡 -->
|
||||
<view class="qr-card">
|
||||
<view class="avatar-wrapper">
|
||||
<image class="avatar" :src="avatarImg" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="name-viewne">邹建东 主任医师</view>
|
||||
<view class="org-viewne">北京肝胆相照公益基金会</view>
|
||||
<view class="dash-viewne"></view>
|
||||
<view class="slogan">
|
||||
<text class="h1">不方便到医院就诊</text>
|
||||
<text >我在<text class="hl">肝胆相照</text>线上帮助您！</text>
|
||||
</view>
|
||||
<view class="contact-qr">
|
||||
<view class="contact-btn">
|
||||
<up-image :src="viewnkImg" width="430rpx" height="131rpx" ></up-image>
|
||||
|
||||
</view>
|
||||
<image class="qr-img" :src="qrImg" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="square">
|
||||
<view class="s-top"></view>
|
||||
<view class="s-middle">
|
||||
<view id="head">如何添加我为随访医生？</view>
|
||||
</view>
|
||||
<view class="s-bottom">
|
||||
<view>
|
||||
<view><text>1</text>微信扫一扫上方二维码，关注“肝胆相照一家人”公众号</view>
|
||||
<view><text>2</text>点击“邹建东专家工作室”，选择微信登录，注册后直接发送随访申请</view>
|
||||
<view><text>3</text>若未弹出“随访申请发送成功”提示，请再次点击“邹建东专家工作室”发送随访申请</view>
|
||||
<view><text>4</text>审核通过后，点击“就医服务-随访交流”，与专家进行图文交流</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="s-half-circle"></view>
|
||||
<view class="s-half-circle-left"></view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-gap"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部保存按钮 -->
|
||||
<view class="save-bar">
|
||||
<button class="save-btn" @cviewck="onSave">保存二维码到手机</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const avatarImg = '/static/xxtx.png';
|
||||
const qrImg = '/static/sfewm.png';
|
||||
import bgImg from "@/static/background.jpg"
|
||||
import viewnkImg from "@/static/arr.png"
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const onSave = () => {
|
||||
uni.showToast({ title: '已保存(示例)', icon: 'none' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-code-page {
|
||||
min-height: 100vh;
|
||||
background-color: #0d7dfd;
|
||||
}
|
||||
.square{
|
||||
margin:0 30rpx;
|
||||
padding-bottom: 40rpx;
|
||||
border: 2rpx solid #fff;
|
||||
background-color: #3492FC;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
text{
|
||||
display: inline-flex;
|
||||
width: 40rpx;
|
||||
background-color: #6FB3FE;
|
||||
height: 40rpx;
|
||||
border-radius:50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#head {
|
||||
|
||||
width: 75%;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-radius: 30rpx;
|
||||
border: 2rpx solid white;
|
||||
letter-spacing: 8rpx;
|
||||
}
|
||||
.s-top{
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
.s-bottom{
|
||||
padding:0 40rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
color:#fff;
|
||||
|
||||
}
|
||||
}
|
||||
.page-scroll {
|
||||
height: calc(100vh - 100rpx);
|
||||
padding-bottom: 140rpx;
|
||||
}
|
||||
|
||||
.blue-banner {
|
||||
height: 520rpx;
|
||||
|
||||
width:100%;
|
||||
color: #ffffff;
|
||||
text-aviewgn: center;
|
||||
|
||||
.banner-title-small {
|
||||
font-size: 26rpx;
|
||||
opacity: .9;
|
||||
}
|
||||
.banner-title {
|
||||
margin-top: 40rpx;
|
||||
font-size: 44rpx;
|
||||
letter-spacing: 2rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-card {
|
||||
position: relative;
|
||||
margin: -120rpx 30rpx 0;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 140rpx 30rpx 30rpx;
|
||||
box-shadow: 0 12rpx 30rpx rgba(0,0,0,.08);
|
||||
|
||||
.avatar-wrapper {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -60rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
padding: 8rpx;
|
||||
box-shadow: 0 6rpx 20rpx rgba(0,0,0,.1);
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.name-viewne {
|
||||
text-aviewgn: center;
|
||||
font-size: 34rpx;
|
||||
color: #1a76d2;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.org-viewne {
|
||||
text-aviewgn: center;
|
||||
font-size: 28rpx;
|
||||
color: #4a90e2;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.dash-viewne {
|
||||
margin: 24rpx auto;
|
||||
height: 0;
|
||||
border-bottom: 2rpx dashed #cfd8dc;
|
||||
}
|
||||
.slogan {
|
||||
display: flex;
|
||||
font-weight:bold;
|
||||
letter-spacing: 8rpx;
|
||||
flex-direction: column;
|
||||
text-aviewgn: center;
|
||||
font-size: 40rpx;
|
||||
color: #1e88e5;
|
||||
viewne-height: 1.6;
|
||||
.hl {
|
||||
color: #ff9f1a;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
.contact-qr {
|
||||
display: flex;
|
||||
aviewgn-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.contact-btn {
|
||||
flex: 1;
|
||||
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
|
||||
display: flex;
|
||||
aviewgn-items: center;
|
||||
justify-content: space-between;
|
||||
.contact-text {
|
||||
white-space: pre-viewne;
|
||||
font-size: 26rpx;
|
||||
viewne-height: 1.5;
|
||||
}
|
||||
.arrow {
|
||||
font-size: 36rpx;
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
.qr-img {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx soviewd #e0e0e0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-gap { height: 120rpx; }
|
||||
|
||||
.save-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx soviewd #eaeaea;
|
||||
.save-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: #00cac1;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +1,14 @@
|
||||
<template>
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="我的鲜花"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
/>
|
||||
|
||||
<view class="flower-page">
|
||||
<!-- 顶部统计栏（与截图一致：两项） -->
|
||||
<view class="stats-bar">
|
||||
<view class="stat">
|
||||
<text class="icon">🌸</text>
|
||||
<up-image :src="flowerImg" width="36rpx" height="36rpx" ></up-image>
|
||||
<text class="num">{{ stat.totalCount }}</text>
|
||||
</view>
|
||||
<view class="stat">
|
||||
<text class="icon">￥</text>
|
||||
<up-image :src="moneyImg" width="36rpx" height="36rpx" ></up-image>
|
||||
<text class="num">{{ stat.totalAmount.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -42,7 +32,7 @@
|
||||
lower-threshold="80"
|
||||
>
|
||||
<view v-if="records.length === 0" class="empty-wrap">
|
||||
<image class="empty-icon" src="/static/wdfl.png" mode="aspectFit" />
|
||||
<up-image :src="emptyImg" width="176rpx" height="204rpx" ></up-image>
|
||||
<text class="empty-text">您暂未收到鲜花</text>
|
||||
</view>
|
||||
|
||||
@@ -60,7 +50,9 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import flowerImg from "@/static/flowers.png"
|
||||
import moneyImg from "@/static/mind_totle_money.png"
|
||||
import emptyImg from "@/static/icon_empty.png"
|
||||
// 与截图一致的顶部两项统计：总鲜花数与累计金额
|
||||
const stat = ref({ totalCount: 0, totalAmount: 0.0 });
|
||||
|
||||
@@ -132,13 +124,16 @@ $card: #ffffff;
|
||||
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
padding: 24rpx 30rpx;
|
||||
background: #fff;
|
||||
border-bottom: 2rpx solid #eee;
|
||||
|
||||
.stat { display: flex; align-items: center; gap: 16rpx; }
|
||||
.stat:last-child{
|
||||
margin-left: 120px;
|
||||
}
|
||||
.icon { font-size: 34rpx; }
|
||||
.num { font-size: 30rpx; color: #333; }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,482 @@
|
||||
<template>
|
||||
|
||||
<view class="new-patient-page">
|
||||
|
||||
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="我的患者"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
/>
|
||||
|
||||
|
||||
<!-- 提醒区域 -->
|
||||
<view class="reminder-section">
|
||||
<view class="reminder-icon">
|
||||
<uni-icons type="notification" size="16" color="#ff9500"></uni-icons>
|
||||
</view>
|
||||
<text class="reminder-text">提醒: 为了避免不必要的纠纷,请您务必选择线下就诊过的患者</text>
|
||||
</view>
|
||||
|
||||
<!-- 随访申请 -->
|
||||
<view class="follow-up-section">
|
||||
<view class="section-title">随访申请</view>
|
||||
<view class="pending-request" v-if="pendingRequest">
|
||||
<view class="request-item">
|
||||
<view class="avatar">
|
||||
<view class="avatar-icon"></view>
|
||||
</view>
|
||||
<view class="request-content">
|
||||
<view class="request-time">2025-08-18 15:55:03</view>
|
||||
<view class="request-text">我是陈新华,在线上和您沟通过,请您同意我作为您的随访患者</view>
|
||||
|
||||
<view class="action-buttons">
|
||||
<button class="reject-btn" @click="rejectRequest">拒绝</button>
|
||||
<button class="agree-btn" @click="agreeRequest">同意</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 申请记录 -->
|
||||
<view class="history-section">
|
||||
<view class="section-title">申请记录(近一月)</view>
|
||||
<view class="history-list">
|
||||
<view class="history-item" v-for="(item, index) in historyList" :key="index">
|
||||
<view class="avatar">
|
||||
<view class="avatar-icon"></view>
|
||||
</view>
|
||||
<view class="history-content">
|
||||
<view class="history-time">{{ item.time }}</view>
|
||||
<view class="nickname">昵称: {{ item.nickname }}</view>
|
||||
<view class="history-text">{{ item.message }}</view>
|
||||
<view class="status-info">
|
||||
<up-image :src="goImg" width="30rpx" height="30rpx" ></up-image>
|
||||
<text class="status-text">已同意</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="bottom-button">
|
||||
<button class="add-patient-btn" @click="addPatient">加患者</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import goImg from "@/static/go_big.png"
|
||||
// 响应式数据
|
||||
const pendingRequest = ref({
|
||||
name: '陈新华',
|
||||
message: '我是陈新华,在线上和您沟通过,请您同意我作为您的随访患者',
|
||||
time: '2025-08-18 15:55:03'
|
||||
});
|
||||
|
||||
const historyList = ref([
|
||||
{
|
||||
nickname: '韩夫臣',
|
||||
message: '我是韩夫臣,在线上和您沟通过,请您...',
|
||||
time: '2025-08-19 22:41:35'
|
||||
},
|
||||
{
|
||||
nickname: '鲁保山',
|
||||
message: '我是鲁保山,在线上和您沟通过,请您...',
|
||||
time: '2025-08-19 22:41:27'
|
||||
},
|
||||
{
|
||||
nickname: '蒋宁宁',
|
||||
message: '我是蒋宁宁,在线上和您沟通过,请您...',
|
||||
time: '2025-08-19 11:25:46'
|
||||
},
|
||||
{
|
||||
nickname: '蒋宁',
|
||||
message: '我是蒋宁,在线上和您沟通过,请您同...',
|
||||
time: '2025-08-19 11:25:39'
|
||||
}
|
||||
]);
|
||||
|
||||
// 方法
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const rejectRequest = () => {
|
||||
uni.showModal({
|
||||
title: '确认拒绝',
|
||||
content: '确定要拒绝陈新华的随访申请吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: '已拒绝申请',
|
||||
icon: 'success'
|
||||
});
|
||||
// 这里可以调用API拒绝申请
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const agreeRequest = () => {
|
||||
uni.showModal({
|
||||
title: '确认同意',
|
||||
content: '确定要同意陈新华的随访申请吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: '已同意申请',
|
||||
icon: 'success'
|
||||
});
|
||||
// 这里可以调用API同意申请
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const addPatient = () => {
|
||||
uni.showToast({
|
||||
title: '跳转到添加患者页面',
|
||||
icon: 'none'
|
||||
});
|
||||
// 这里可以跳转到添加患者页面
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.new-patient-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
|
||||
.status-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.time {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-icons {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
|
||||
.status-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background-color: #ff0000;
|
||||
color: #ffffff;
|
||||
border-radius: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.network {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.wifi-icon {
|
||||
width: 32rpx;
|
||||
height: 24rpx;
|
||||
background-color: #333;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.battery {
|
||||
width: 40rpx;
|
||||
height: 20rpx;
|
||||
border: 2rpx solid #333;
|
||||
border-radius: 4rpx;
|
||||
background-color: #ff0000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.battery-text {
|
||||
font-size: 20rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.back-btn {
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-weight: normal;
|
||||
color: #ff0000;
|
||||
margin-right: 60rpx; // 为了保持标题居中
|
||||
}
|
||||
}
|
||||
|
||||
.reminder-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 30rpx;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.reminder-icon {
|
||||
margin-right: 20rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.reminder-text {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-up-section {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.section-title {
|
||||
padding: 30rpx 30rpx 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.pending-request {
|
||||
padding: 30rpx;
|
||||
|
||||
.request-item {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ffb6c1;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.avatar-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.request-content {
|
||||
flex: 1;
|
||||
|
||||
.request-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.request-time {
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
gap:60rpx;
|
||||
.reject-btn {
|
||||
|
||||
width:180rpx;
|
||||
height: 70rpx;
|
||||
border: 2rpx solid #8B2316;
|
||||
background-color: #ffffff;
|
||||
color: #8B2316;
|
||||
padding:0;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.agree-btn {
|
||||
margin: 0;
|
||||
width:180rpx;
|
||||
padding:0;
|
||||
height: 70rpx;
|
||||
background-color: #8B2316;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history-section {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 120rpx; // 为底部按钮留出空间
|
||||
|
||||
.section-title {
|
||||
padding: 30rpx 30rpx 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
padding-bottom: 100rpx;
|
||||
.history-item {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ffb6c1;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.avatar-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.history-content {
|
||||
flex: 1;
|
||||
|
||||
.nickname {
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
color: #8B2316;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.history-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.status-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8rpx solid transparent;
|
||||
border-right: 8rpx solid transparent;
|
||||
border-bottom: 12rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.history-time {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
background-color: #ffffff;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
.add-patient-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background-color: #00cac1;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 0rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,474 @@
|
||||
<template>
|
||||
<view class="patient-group-page">
|
||||
|
||||
<!-- 头部 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="患者分组"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
/>
|
||||
|
||||
|
||||
<!-- 筛选排序栏 -->
|
||||
<view class="filter-sort-bar">
|
||||
<view class="sort-section" @click="toggleGroupSort">
|
||||
<text class="sort-label">分组排序</text>
|
||||
<view class="imgbox">
|
||||
<up-image :src="upImg" width="26rpx" height="26rpx" ></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="current-sort" @click="toggleInnerSort">
|
||||
<text class="sort-text">按首字母</text>
|
||||
<view class="imgbox">
|
||||
<up-image :src="upImg" width="26rpx" height="26rpx" ></up-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分组排序弹窗 -->
|
||||
<view v-if="showGroupSort" class="popup-panel">
|
||||
<view class="popup-item" :class="{ active: selectedGroupSort==='letter' }" @click.stop="chooseGroupSort('letter')">
|
||||
<text class="item-text">按首字母</text>
|
||||
<uni-icons v-if="selectedGroupSort==='letter'" type="checkmarkempty" color="#8B2316" size="22"></uni-icons>
|
||||
</view>
|
||||
<view class="popup-divider"></view>
|
||||
<view class="popup-item" :class="{ active: selectedGroupSort==='count' }" @click.stop="chooseGroupSort('count')">
|
||||
<text class="item-text">分组人数</text>
|
||||
<uni-icons v-if="selectedGroupSort==='count'" type="checkmarkempty" color="#8B2316" size="22"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="showGroupSort" class="popup-mask" @click="closeGroupSort"></view>
|
||||
|
||||
<!-- 组内排序弹窗 -->
|
||||
<view v-if="showInnerSort" class="popup-panel">
|
||||
<view class="popup-item" :class="{ active: selectedInnerSort==='letter' }" @click.stop="chooseInnerSort('letter')">
|
||||
<text class="item-text">按首字母</text>
|
||||
<uni-icons v-if="selectedInnerSort==='letter'" type="checkmarkempty" color="#8B2316" size="22"></uni-icons>
|
||||
</view>
|
||||
<view class="popup-divider"></view>
|
||||
<view class="popup-item" :class="{ active: selectedInnerSort==='count' }" @click.stop="chooseInnerSort('count')">
|
||||
<text class="item-text">分组人数</text>
|
||||
<uni-icons v-if="selectedInnerSort==='count'" type="checkmarkempty" color="#8B2316" size="22"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="showInnerSort" class="popup-mask" @click="closeInnerSort"></view>
|
||||
|
||||
<!-- 患者列表 -->
|
||||
<scroll-view class="patient-list-section" scroll-y="true" :style="{ height: scrollViewHeight }">
|
||||
<view class="groupcell">
|
||||
<view class="section-title">
|
||||
|
||||
<view class="imgbox">
|
||||
<up-image :src="groupRightImg" width="19rpx" height="32rpx" ></up-image>
|
||||
</view>
|
||||
<view class="title">待分组患者 | 5</view>
|
||||
</view>
|
||||
<view class="patient-list" >
|
||||
<view class="patient-item" v-for="(patient, index) in patientList" :key="index">
|
||||
<view class="patient-avatar">
|
||||
<up-image :src="patient.avatar" width="80rpx" height="80rpx" mode="aspectFill"></up-image>
|
||||
</view>
|
||||
<view class="patient-info">
|
||||
<view class="patient-name">{{ patient.name }}</view>
|
||||
<view class="follow-up-time">随访于{{ patient.lastFollowUp }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import upImg from "@/static/triangle_green_theme.png"
|
||||
import downImg from "@/static/triangle_normal.png"
|
||||
import groupRightImg from "@/static/groupright_big.png"
|
||||
import groupDownImg from "@/static/groupup_big.png"
|
||||
// 响应式数据
|
||||
const patientList = ref([
|
||||
{
|
||||
name: 'aa',
|
||||
lastFollowUp: '2020-12-02',
|
||||
avatar: '/static/avatar1.png' // 云朵天空头像
|
||||
},
|
||||
{
|
||||
name: '测试',
|
||||
lastFollowUp: '2023-10-08',
|
||||
avatar: '/static/avatar2.png' // 粉色背景白色人像
|
||||
},
|
||||
{
|
||||
name: '刘三多',
|
||||
lastFollowUp: '2021-12-16',
|
||||
avatar: '/static/avatar3.png' // 绿色山水风景
|
||||
},
|
||||
{
|
||||
name: '路测试',
|
||||
lastFollowUp: '2019-10-28',
|
||||
avatar: '/static/avatar4.png' // 粉色背景卡通人像
|
||||
},
|
||||
{
|
||||
name: '哦哦哦',
|
||||
lastFollowUp: '2023-10-08',
|
||||
avatar: '/static/avatar5.png' // 粉色背景白色人像
|
||||
}
|
||||
]);
|
||||
|
||||
// 计算滚动视图高度
|
||||
const scrollViewHeight = computed(() => {
|
||||
// 获取系统信息计算可用高度
|
||||
// 导航栏高度(140rpx) + 筛选栏高度(约80rpx) + 标题高度(约80rpx) = 300rpx
|
||||
// 转换为px并减去，得到可用高度
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const windowHeight = systemInfo.windowHeight;
|
||||
const navHeight = 140 / 2; // rpx转px
|
||||
const filterHeight = 80 / 2;
|
||||
const titleHeight = 80 / 2;
|
||||
const availableHeight = windowHeight - navHeight - filterHeight - titleHeight;
|
||||
return `${availableHeight}px`;
|
||||
});
|
||||
|
||||
// 分组排序弹窗状态
|
||||
const showGroupSort = ref(false);
|
||||
const selectedGroupSort = ref('letter'); // letter | count
|
||||
|
||||
// 组内排序弹窗状态
|
||||
const showInnerSort = ref(false);
|
||||
const selectedInnerSort = ref('letter');
|
||||
|
||||
const toggleGroupSort = () => {
|
||||
showGroupSort.value = !showGroupSort.value;
|
||||
if (showGroupSort.value) showInnerSort.value = false;
|
||||
};
|
||||
|
||||
const closeGroupSort = () => {
|
||||
showGroupSort.value = false;
|
||||
};
|
||||
|
||||
const chooseGroupSort = (type) => {
|
||||
selectedGroupSort.value = type;
|
||||
closeGroupSort();
|
||||
};
|
||||
|
||||
const toggleInnerSort = () => {
|
||||
showInnerSort.value = !showInnerSort.value;
|
||||
if (showInnerSort.value) showGroupSort.value = false;
|
||||
};
|
||||
|
||||
const closeInnerSort = () => {
|
||||
showInnerSort.value = false;
|
||||
};
|
||||
|
||||
const chooseInnerSort = (type) => {
|
||||
selectedInnerSort.value = type;
|
||||
closeInnerSort();
|
||||
};
|
||||
|
||||
// 方法
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const createNew = () => {
|
||||
uni.showToast({
|
||||
title: '跳转到新建分组页面',
|
||||
icon: 'none'
|
||||
});
|
||||
// 这里可以跳转到新建分组页面
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.patient-group-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.popup-mask {
|
||||
position: fixed;
|
||||
top: 220rpx; /* 位于筛选栏下方 */
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.3);
|
||||
z-index: 8;
|
||||
}
|
||||
|
||||
.popup-panel {
|
||||
position: fixed;
|
||||
top: 220rpx; /* 紧贴筛选栏 */
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.popup-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 30rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.popup-divider {
|
||||
height: 2rpx;
|
||||
background: #eaeaea;
|
||||
}
|
||||
|
||||
.popup-item.active .item-text {
|
||||
color: #8B2316;
|
||||
}
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
|
||||
.status-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.time {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.app-icons {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
|
||||
.app-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 4rpx;
|
||||
|
||||
&.weibo {
|
||||
background-color: #ff8200;
|
||||
}
|
||||
|
||||
&.taobao {
|
||||
background-color: #ff6a00;
|
||||
}
|
||||
|
||||
&.xiaohongshu {
|
||||
background-color: #ff2442;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15rpx;
|
||||
|
||||
.network {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.signal-icon {
|
||||
width: 32rpx;
|
||||
height: 20rpx;
|
||||
background-color: #333;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.battery-text {
|
||||
font-size: 20rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.battery {
|
||||
width: 40rpx;
|
||||
height: 20rpx;
|
||||
border: 2rpx solid #333;
|
||||
border-radius: 4rpx;
|
||||
background-color: #4caf50;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -6rpx;
|
||||
top: 6rpx;
|
||||
width: 4rpx;
|
||||
height: 8rpx;
|
||||
background-color: #333;
|
||||
border-radius: 0 2rpx 2rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.back-btn {
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-weight: normal;
|
||||
color: #ff0000;
|
||||
margin-right: 60rpx; // 为了保持标题居中
|
||||
}
|
||||
|
||||
.new-btn {
|
||||
padding: 10rpx;
|
||||
|
||||
.new-text {
|
||||
font-size: 28rpx;
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-sort-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #ffff;
|
||||
position: fixed;
|
||||
top: 140rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
.imgbox{
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
.sort-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
|
||||
.sort-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sort-icon.down {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8rpx solid transparent;
|
||||
border-right: 8rpx solid transparent;
|
||||
border-top: 12rpx solid #999;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 2rpx;
|
||||
height: 40rpx;
|
||||
background-color: #e0e0e0;
|
||||
margin: 0 80rpx;
|
||||
}
|
||||
|
||||
.current-sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
|
||||
.sort-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sort-icon.up {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8rpx solid transparent;
|
||||
border-right: 8rpx solid transparent;
|
||||
border-bottom: 12rpx solid #999;
|
||||
|
||||
&.active {
|
||||
border-bottom-color: #ff0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.patient-list-section {
|
||||
top: 240rpx;
|
||||
width:100%;
|
||||
bottom:0;
|
||||
position: fixed;
|
||||
background-color: #ffffff;
|
||||
|
||||
.section-title {
|
||||
padding: 30rpx 30rpx 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
color: #333;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
.imgbox{
|
||||
margin-top: 4rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.patient-list {
|
||||
// 滚动视图样式
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.patient-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.patient-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.patient-info {
|
||||
flex: 1;
|
||||
|
||||
.patient-name {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.follow-up-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -21,7 +21,12 @@
|
||||
<scroll-view class="content-scroll" scroll-y :show-scrollbar="false" @scrolltolower="onScrollToLower" lower-threshold="60">
|
||||
<!-- 视频区域 -->
|
||||
<view class="player-wrapper">
|
||||
<video class="player" :src="videoSrc" :poster="poster" controls objectFit="contain"></video>
|
||||
<!-- #ifdef APP -->
|
||||
<uniVideo></uniVideo>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<video class="player" :src="videoSrc" :poster="poster" controls objectFit="contain"></video>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<!-- 标签切换 -->
|
||||
@@ -70,7 +75,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import uniVideo from '@/components/uniVideo/uniVideo.vue';
|
||||
const videoSrc = ref('');
|
||||
const poster = ref('/static/livebg.png');
|
||||
const activeTab = ref('info');
|
||||
|
||||
Reference in New Issue
Block a user