8.22提交
This commit is contained in:
zoujiandong
parent
f8003ca7a6
commit
1c08455389
73
pages.json
73
pages.json
@ -359,6 +359,79 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "myDownLoad/myDownLoad",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "uni-app分页",
|
||||
"app": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "myCollect/myCollect",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "uni-app分页",
|
||||
"app": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "myCourseware/myCourseware",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "uni-app分页",
|
||||
"app": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "changeMobile/changeMobile",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "uni-app分页",
|
||||
"app": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "wechatContact/wechatContact",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "uni-app分页",
|
||||
"app": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "idcardAuth/idcardAuth",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "uni-app分页",
|
||||
"app": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "videoHistroy/videoHistroy",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "uni-app分页",
|
||||
"app": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pwdLogin/pwdLogin",
|
||||
"style": {
|
||||
|
||||
193
pages_app/changeMobile/changeMobile.vue
Normal file
193
pages_app/changeMobile/changeMobile.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<view class="change-mobile-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="更换手机号"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
></uni-nav-bar>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<view class="form-wrapper">
|
||||
<!-- 新手机号 -->
|
||||
<view class="input-row">
|
||||
<view class="left-icon">
|
||||
<up-image :src="phoneImg" width="36rpx" height="36rpx" ></up-image>
|
||||
</view>
|
||||
<input
|
||||
class="text-input"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
v-model="mobile"
|
||||
placeholder="请输入新手机号码"
|
||||
placeholder-style="color:#c7c7c7"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 验证码 -->
|
||||
<view class="input-row">
|
||||
<view class="left-icon">
|
||||
<up-image :src="smsImg" width="36rpx" height="36rpx" ></up-image>
|
||||
</view>
|
||||
<input
|
||||
class="text-input"
|
||||
type="number"
|
||||
maxlength="6"
|
||||
v-model="code"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-style="color:#c7c7c7"
|
||||
/>
|
||||
<button
|
||||
class="code-btn"
|
||||
:disabled="sending || !canSend"
|
||||
@click="sendCode"
|
||||
>
|
||||
{{ sending ? countdown + 's' : '获取验证码' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部确定按钮 -->
|
||||
<view class="bottom-bar">
|
||||
<button class="confirm-btn" @click="onConfirm">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onUnmounted,computed } from 'vue';
|
||||
import phoneImg from "@/static/phone.png"
|
||||
import smsImg from "@/static/sms.png"
|
||||
const mobile = ref('');
|
||||
const code = ref('');
|
||||
const sending = ref(false);
|
||||
const countdown = ref(60);
|
||||
let timer = null;
|
||||
|
||||
const canSend = computed(() => /^1\d{10}$/.test(mobile.value));
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const startTimer = () => {
|
||||
sending.value = true;
|
||||
countdown.value = 60;
|
||||
timer = setInterval(() => {
|
||||
countdown.value -= 1;
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
sending.value = false;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const sendCode = () => {
|
||||
if (!canSend.value) {
|
||||
uni.showToast({ title: '请先输入正确的手机号', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
if (sending.value) return;
|
||||
// TODO: 调用发送验证码接口
|
||||
uni.showToast({ title: '验证码已发送', icon: 'success' });
|
||||
startTimer();
|
||||
};
|
||||
|
||||
const onConfirm = () => {
|
||||
if (!canSend.value) {
|
||||
uni.showToast({ title: '手机号格式不正确', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
if (!/^\d{4,6}$/.test(code.value)) {
|
||||
uni.showToast({ title: '请输入正确的验证码', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
// TODO: 提交更换手机号
|
||||
uni.showToast({ title: '已提交', icon: 'success' });
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) clearInterval(timer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.change-mobile-page {
|
||||
min-height: 100vh;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
padding: 40rpx 30rpx 0; // 顶部导航占位
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid #eeeeee;
|
||||
border-radius: 16rpx;
|
||||
height: 90rpx;
|
||||
padding: 0 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.left-icon {
|
||||
width: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.text-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
width: 200rpx;
|
||||
height: 44rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
font-size: 25rpx;
|
||||
color:#8B2316;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: 2rpx solid #8B2316;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.code-btn:disabled {
|
||||
opacity: 0.5;
|
||||
color:#8B2316;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 40rpx;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
margin: 0 30rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid #8B2316;
|
||||
background: #ffffff;
|
||||
color: #8B2316;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
</style>
|
||||
303
pages_app/idcardAuth/idcardAuth.vue
Normal file
303
pages_app/idcardAuth/idcardAuth.vue
Normal file
@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<view class="idcard-auth-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="身份验证"
|
||||
@cviewckLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
>
|
||||
</uni-nav-bar>
|
||||
<!-- 内容区域 -->
|
||||
<view class="content-area">
|
||||
<!-- 进度指示器 -->
|
||||
<view class="progress-bar">
|
||||
<view class="barbox">
|
||||
<view class="imgbox">
|
||||
<up-image :src="stepImg" width="46rpx" height="46rpx" ></up-image>
|
||||
<view class="desc ">身份信息</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="imgbox">
|
||||
<up-image :src="stepImg" width="46rpx" height="46rpx" ></up-image>
|
||||
<view class="desc">添加银行卡</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="imgbox">
|
||||
<up-image :src="stepImg" width="46rpx" height="46rpx" ></up-image>
|
||||
<view class="desc">完成</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="progress-step active">
|
||||
<view class="step-icon">
|
||||
<uni-icons type="checkmarkempty" color="#ff0000" size="20"></uni-icons>
|
||||
</view>
|
||||
<text class="step-text">身份信息</text>
|
||||
</view>
|
||||
<view class="progress-line active"></view>
|
||||
<view class="progress-step">
|
||||
<view class="step-icon">
|
||||
<uni-icons type="checkmarkempty" color="#cccccc" size="20"></uni-icons>
|
||||
</view>
|
||||
<text class="step-text">添加银行卡</text>
|
||||
</view>
|
||||
<view class="progress-line"></view>
|
||||
<view class="progress-step">
|
||||
<view class="step-icon">
|
||||
<uni-icons type="checkmarkempty" color="#cccccc" size="20"></uni-icons>
|
||||
</view>
|
||||
<text class="step-text">完成</text>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<!-- 输入表单 -->
|
||||
<view class="form-section">
|
||||
<view class="form-item">
|
||||
<text class="form-label">姓名</text>
|
||||
<input
|
||||
class="form-input"
|
||||
placeholder="请输入您的姓名"
|
||||
v-model="formData.name"
|
||||
placeholder-style="color: #cccccc"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">身份证号</text>
|
||||
<input
|
||||
class="form-input"
|
||||
placeholder="请输入您的身份证号"
|
||||
v-model="formData.idNumber"
|
||||
placeholder-style="color: #cccccc"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提示文字 -->
|
||||
<view class="warning-text">
|
||||
平台不支持绑定多人银行卡,请务必绑定本人卡,实名认证信息,谨慎填写!
|
||||
</view>
|
||||
|
||||
<!-- 下一步按钮 -->
|
||||
<view class="bottom-actions">
|
||||
<button class="next-btn" @click="onNextStep">下一步</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import stepImg from "@/static/add_card_no.png"
|
||||
import stepActiveImg from "@/static/add_card_yes.png"
|
||||
const formData = ref({
|
||||
name: '',
|
||||
idNumber: ''
|
||||
});
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const onNextStep = () => {
|
||||
if (!formData.value.name.trim()) {
|
||||
uni.showToast({ title: '请输入姓名', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
if (!formData.value.idNumber.trim()) {
|
||||
uni.showToast({ title: '请输入身份证号', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showToast({ title: '验证通过，跳转下一步', icon: 'success' });
|
||||
// 这里可以跳转到下一步页面
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.idcard-auth-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding-top: 160rpx;
|
||||
padding: 0rpx 0rpx 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
padding: 80rpx 20rpx 120rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 30rpx;
|
||||
.barbox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.imgbox{
|
||||
flex:1;
|
||||
|
||||
position: relative;
|
||||
.desc{
|
||||
position: absolute;
|
||||
left:-50%;
|
||||
color:#d0d0d0;
|
||||
top:80rpx;
|
||||
font-size: 28rpx;
|
||||
margin-left: -10rpx;
|
||||
white-space: nowrap;
|
||||
transform: translateY(-50%);
|
||||
&.active{
|
||||
color:#8B2316;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.imgbox:last-child{
|
||||
.desc{
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
}
|
||||
.line{
|
||||
width:240rpx;
|
||||
margin:0 -2rpx;
|
||||
height: 16rpx;
|
||||
background:#cccccc;
|
||||
&.active{
|
||||
background:#8B2316;
|
||||
}
|
||||
}
|
||||
}
|
||||
.steptext{
|
||||
margin:0 30rpx;
|
||||
display: flex;
|
||||
width:900rpx;
|
||||
justify-content: space-between;
|
||||
align-items:center ;
|
||||
}
|
||||
.progress-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.step-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&.active {
|
||||
background: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
|
||||
&.active {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.step-icon {
|
||||
background: #ff0000;
|
||||
}
|
||||
.step-text {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
flex: 1;
|
||||
height: 4rpx;
|
||||
background: #f0f0f0;
|
||||
margin: 0 20rpx;
|
||||
|
||||
&.active {
|
||||
background: #ff0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2rpx solid #eee;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
width:120rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex:1;
|
||||
height: 80rpx;
|
||||
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
background: #ffffff;
|
||||
|
||||
&:focus {
|
||||
border-color: #ff0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 60rpx;
|
||||
font-size: 26rpx;
|
||||
color: #000000;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
padding: 0 30rox 40rpx;
|
||||
|
||||
.next-btn {
|
||||
margin:0 30rpx;
|
||||
height: 88rpx;
|
||||
background: #cccccc;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 8rpx;
|
||||
font-size: 32rpx;
|
||||
|
||||
&:active {
|
||||
background: #8B2316;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -24,43 +24,50 @@
|
||||
</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 class="qrbox">
|
||||
<view class="qr-card">
|
||||
<view class="leftCircle"></view>
|
||||
<view class="rightCircle"></view>
|
||||
<view class="halfCircle"></view>
|
||||
<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>
|
||||
<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 class="squrebox">
|
||||
<view class="square">
|
||||
<view class="s-top"></view>
|
||||
<view class="s-middle">
|
||||
<view id="head">如何添加我为随访医生？</view>
|
||||
</view>
|
||||
<view class="s-bottom">
|
||||
<view>
|
||||
<view class="descrow"><text>1</text>微信扫一扫上方二维码，关注“肝胆相照一家人”公众号</view>
|
||||
<view class="descrow"><text>2</text>点击“邹建东专家工作室”，选择微信登录，注册后直接发送随访申请</view>
|
||||
<view class="descrow"><text>3</text>若未弹出“随访申请发送成功”提示，请再次点击“邹建东专家工作室”发送随访申请</view>
|
||||
<view class="descrow"><text>4</text>审核通过后，点击“就医服务-随访交流”，与专家进行图文交流</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="s-half-circle"></view>
|
||||
<view class="s-half-circle-left"></view>
|
||||
</view>
|
||||
<view class="s-half-circle"></view>
|
||||
<view class="s-half-circle-left"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-gap"></view>
|
||||
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部保存按钮 -->
|
||||
@ -92,18 +99,48 @@ const onSave = () => {
|
||||
min-height: 100vh;
|
||||
background-color: #0d7dfd;
|
||||
}
|
||||
.square{
|
||||
.squrebox{
|
||||
margin:0 30rpx;
|
||||
padding-bottom: 40rpx;
|
||||
border: 2rpx solid #fff;
|
||||
|
||||
|
||||
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.square{
|
||||
background-color: #3492FC;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
padding-bottom: 40rpx;
|
||||
border: 2rpx solid #fff;
|
||||
position: relative;
|
||||
.s-half-circle-left{
|
||||
border: 2rpx solid #fff;
|
||||
position: absolute;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
z-index:1;
|
||||
border-radius:50%;
|
||||
top:53rpx;
|
||||
background-color: #0d7dfd;
|
||||
left: -30rpx;
|
||||
}
|
||||
.s-half-circle{
|
||||
border: 2rpx solid #fff;
|
||||
position: absolute;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
z-index:1;
|
||||
border-radius:50%;
|
||||
top:53rpx;
|
||||
background-color: #0d7dfd;
|
||||
right: -30rpx;
|
||||
}
|
||||
text{
|
||||
display: inline-flex;
|
||||
width: 40rpx;
|
||||
background-color: #6FB3FE;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
border-radius:50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -126,8 +163,12 @@ const onSave = () => {
|
||||
.s-bottom{
|
||||
padding:0 40rpx;
|
||||
font-size: 26rpx;
|
||||
margin-top: 30rpx;
|
||||
line-height: 40rpx;
|
||||
color:#fff;
|
||||
.descrow{
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -157,19 +198,54 @@ const onSave = () => {
|
||||
|
||||
.qr-card {
|
||||
position: relative;
|
||||
margin: -120rpx 30rpx 0;
|
||||
margin: -120rpx 30rpx 30rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 140rpx 30rpx 30rpx;
|
||||
box-shadow: 0 12rpx 30rpx rgba(0,0,0,.08);
|
||||
|
||||
box-shadow: 0 12rpx 30rpx rgba(0,0,0,.08);
|
||||
.leftCircle{
|
||||
position: absolute;
|
||||
top:251rpx;
|
||||
left:-20rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #0d7dfd;
|
||||
}
|
||||
.rightCircle{
|
||||
position: absolute;
|
||||
top:251rpx;
|
||||
right:-20rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #0d7dfd;
|
||||
}
|
||||
.halfCircle{
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
border: 10rpx solid #6DB7FD;
|
||||
border-width: 10rpx 10rpx 0 10rpx;
|
||||
width: 160rpx;
|
||||
padding:10rpx;
|
||||
height: 80rpx;
|
||||
left: 50%;
|
||||
border-radius: 100rpx 100rpx 0 0;
|
||||
top: -110rpx;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-wrapper {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -60rpx;
|
||||
|
||||
top: -100rpx;
|
||||
|
||||
transform: translateX(-50%);
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
padding: 8rpx;
|
||||
@ -182,13 +258,13 @@ const onSave = () => {
|
||||
}
|
||||
|
||||
.name-viewne {
|
||||
text-aviewgn: center;
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
color: #1a76d2;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.org-viewne {
|
||||
text-aviewgn: center;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #4a90e2;
|
||||
margin-top: 16rpx;
|
||||
@ -196,7 +272,7 @@ const onSave = () => {
|
||||
.dash-viewne {
|
||||
margin: 24rpx auto;
|
||||
height: 0;
|
||||
border-bottom: 2rpx dashed #cfd8dc;
|
||||
border-bottom: 2rpx dashed #1c90fd;
|
||||
}
|
||||
.slogan {
|
||||
display: flex;
|
||||
@ -207,6 +283,9 @@ const onSave = () => {
|
||||
font-size: 40rpx;
|
||||
color: #1e88e5;
|
||||
viewne-height: 1.6;
|
||||
text{
|
||||
text-align: center;
|
||||
}
|
||||
.hl {
|
||||
color: #ff9f1a;
|
||||
margin-left: 8rpx;
|
||||
@ -254,6 +333,7 @@ const onSave = () => {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index:10;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx soviewd #eaeaea;
|
||||
.save-btn {
|
||||
|
||||
109
pages_app/myCollect/myCollect.vue
Normal file
109
pages_app/myCollect/myCollect.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view class="my-collect-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<!-- 顶部导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="我的收藏"
|
||||
@cviewckLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
>
|
||||
|
||||
</uni-nav-bar>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="content-area">
|
||||
<!-- 观看历史 -->
|
||||
<view class="list-item" @click="goToHistory">
|
||||
<text class="item-text">英文期刊</text>
|
||||
<uni-icons type="right" color="#999999" size="16"></uni-icons>
|
||||
</view>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 离线缓存 -->
|
||||
<view class="list-item" @click="goToCache">
|
||||
<text class="item-text">病例荟萃</text>
|
||||
<uni-icons type="right" color="#999999" size="16"></uni-icons>
|
||||
</view>
|
||||
<!-- 分隔线 -->
|
||||
<view class="divider"></view>
|
||||
<view class="list-item" @click="goToCache">
|
||||
<text class="item-text">病例讨论</text>
|
||||
<uni-icons type="right" color="#999999" size="16"></uni-icons>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="list-item" @click="goToCache">
|
||||
<text class="item-text">肝胆视频</text>
|
||||
<uni-icons type="right" color="#999999" size="16"></uni-icons>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="list-item" @click="goToCache">
|
||||
<text class="item-text">课件文档</text>
|
||||
<uni-icons type="right" color="#999999" size="16"></uni-icons>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="list-item" @click="goToCache">
|
||||
<text class="item-text">肝胆新闻</text>
|
||||
<uni-icons type="right" color="#999999" size="16"></uni-icons>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="list-item" @click="goToCache">
|
||||
<text class="item-text">患教学堂</text>
|
||||
<uni-icons type="right" color="#999999" size="16"></uni-icons>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const goToHistory = () => {
|
||||
uni.showToast({ title: '观看历史', icon: 'none' });
|
||||
};
|
||||
|
||||
const goToCache = () => {
|
||||
uni.showToast({ title: '离线缓存', icon: 'none' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-collect-page {
|
||||
min-height: 100vh;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 30rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.item-text {
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 2rpx;
|
||||
background: #f0f0f0;
|
||||
|
||||
}
|
||||
</style>
|
||||
278
pages_app/myCourseware/myCourseware.vue
Normal file
278
pages_app/myCourseware/myCourseware.vue
Normal file
@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<view class="my-courseware-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="我的课件"
|
||||
@cviewckLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
>
|
||||
|
||||
</uni-nav-bar>
|
||||
|
||||
<!-- 标签页导航 -->
|
||||
<view class="tab-nav">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 'download' }"
|
||||
@click="switchTab('download')"
|
||||
>
|
||||
我的下载
|
||||
</view>
|
||||
<view class="divder"></view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 'share' }"
|
||||
@click="switchTab('share')"
|
||||
>
|
||||
我的分享
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 摘要栏 -->
|
||||
<view class="summary-bar">
|
||||
<view class="summary-item">
|
||||
<up-image :src="downLoadImg" width="36rpx" height="36rpx" ></up-image>
|
||||
<text class="summary-text">: {{ downloadCount }}</text>
|
||||
</view>
|
||||
<view class="summary-item">
|
||||
<up-image :src="moneyImg" width="36rpx" height="36rpx" ></up-image>
|
||||
<text class="summary-text">: {{ totalAmount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 课件列表 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="courseware-list"
|
||||
refresher-enabled
|
||||
@refresherrefresh="onRefresh"
|
||||
:refresher-triggered="refreshing"
|
||||
@scrolltolower="onLoadMore"
|
||||
:lower-threshold="100"
|
||||
>
|
||||
<view class="courseware-item" v-for="(item, index) in coursewareList" :key="index" @click="onItemClick(item)">
|
||||
<view class="item-content">
|
||||
<view class="courseware-name">
|
||||
<text class="label">课件名称:</text>
|
||||
<text class="value">{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="courseware-time">
|
||||
<text class="label">时间:</text>
|
||||
<text class="value">{{ item.time }}</text>
|
||||
</view>
|
||||
<view class="courseware-status">
|
||||
<text class="label">状态:</text>
|
||||
<text class="value status-paid">{{ item.status }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view v-if="loading" class="loading-more">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 没有更多数据提示 -->
|
||||
<view v-if="noMore" class="no-more">
|
||||
<text>没有更多数据了</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import downLoadImg from "@/static/course_download.png"
|
||||
import moneyImg from "@/static/course_yuan.png"
|
||||
const activeTab = ref('download');
|
||||
const refreshing = ref(false);
|
||||
const loading = ref(false);
|
||||
const noMore = ref(false);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const downloadCount = ref(4);
|
||||
const totalAmount = ref('20.00');
|
||||
|
||||
const coursewareList = ref([
|
||||
{
|
||||
name: '慢性病毒性肝炎患者干扰素治疗不良反应临床处理专家共识',
|
||||
time: '2025-02-21',
|
||||
status: '已支付'
|
||||
},
|
||||
{
|
||||
name: '慢乙肝抗病毒治疗-把握时机正确选择',
|
||||
time: '2024-11-27',
|
||||
status: '已支付'
|
||||
},
|
||||
{
|
||||
name: '肝病相关血小板减少症临床管理中国专家共识(2023)解读',
|
||||
time: '2024-10-06',
|
||||
status: '已支付'
|
||||
},
|
||||
{
|
||||
name: '俞云松:耐药阳性菌感染诊疗思路(CHINET数据云)',
|
||||
time: '2022-10-24',
|
||||
status: '已支付'
|
||||
}
|
||||
]);
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const switchTab = (tab) => {
|
||||
activeTab.value = tab;
|
||||
// 切换标签时重置数据
|
||||
page.value = 1;
|
||||
noMore.value = false;
|
||||
// 这里可以根据标签加载不同数据
|
||||
};
|
||||
|
||||
const onItemClick = (item) => {
|
||||
uni.showToast({ title: `点击了: ${item.name}`, icon: 'none' });
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
refreshing.value = true;
|
||||
page.value = 1;
|
||||
noMore.value = false;
|
||||
|
||||
setTimeout(() => {
|
||||
refreshing.value = false;
|
||||
uni.showToast({ title: '刷新完成', icon: 'success' });
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const onLoadMore = () => {
|
||||
if (loading.value || noMore.value) return;
|
||||
|
||||
loading.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
if (page.value < 3) {
|
||||
page.value++;
|
||||
uni.showToast({ title: '加载完成', icon: 'success' });
|
||||
} else {
|
||||
noMore.value = true;
|
||||
}
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-courseware-page {
|
||||
min-height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
.tab-nav {
|
||||
display: flex;
|
||||
background: #ffffff;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
position: fixed;
|
||||
top: 140rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
.divder{
|
||||
width: 2rpx;
|
||||
height:100rpx;
|
||||
background:#eee;
|
||||
}
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
color: #8B2316;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #8B2316;
|
||||
padding: 20rpx 30rpx;
|
||||
position: fixed;
|
||||
top: 260rpx; // 标签页导航下方
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.summary-text {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.courseware-list {
|
||||
height: calc(100vh - 140rpx - 116rpx - 80rpx);
|
||||
position: fixed;
|
||||
top: 336rpx; // 调整顶部位置，为固定的摘要栏腾出空间
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.courseware-item {
|
||||
background: #ffffff;
|
||||
margin-bottom: 2rpx;
|
||||
padding: 30rpx;
|
||||
border-bottom:2rpx solid #eee;
|
||||
.item-content {
|
||||
.courseware-name,
|
||||
.courseware-time,
|
||||
.courseware-status {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 120rpx;
|
||||
color: #8B2316;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.4;
|
||||
|
||||
&.status-paid {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-more, .no-more {
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
</style>
|
||||
90
pages_app/myDownLoad/myDownLoad.vue
Normal file
90
pages_app/myDownLoad/myDownLoad.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="my-download-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<!-- 顶部导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="我的下载"
|
||||
@cviewckLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
>
|
||||
|
||||
</uni-nav-bar>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="content-area">
|
||||
<!-- 观看历史 -->
|
||||
<view class="list-item" @click="goToHistory">
|
||||
<text class="item-text">诊疗指南</text>
|
||||
<uni-icons type="right" color="#999999" size="16"></uni-icons>
|
||||
</view>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 离线缓存 -->
|
||||
<view class="list-item" @click="goToCache">
|
||||
<text class="item-text">期刊杂志</text>
|
||||
<uni-icons type="right" color="#999999" size="16"></uni-icons>
|
||||
</view>
|
||||
<!-- 分隔线 -->
|
||||
<view class="divider"></view>
|
||||
<view class="list-item" @click="goToCache">
|
||||
<text class="item-text">课件文档</text>
|
||||
<uni-icons type="right" color="#999999" size="16"></uni-icons>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const goToHistory = () => {
|
||||
uni.showToast({ title: '观看历史', icon: 'none' });
|
||||
};
|
||||
|
||||
const goToCache = () => {
|
||||
uni.showToast({ title: '离线缓存', icon: 'none' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-download-page {
|
||||
min-height: 100vh;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 30rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.item-text {
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 2rpx;
|
||||
background: #f0f0f0;
|
||||
|
||||
}
|
||||
</style>
|
||||
82
pages_app/myVideo/myVideo.vue
Normal file
82
pages_app/myVideo/myVideo.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<view class="my-video-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<!-- 顶部导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="我的视频"
|
||||
@cviewckLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
>
|
||||
|
||||
</uni-nav-bar>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="content-area">
|
||||
<!-- 观看历史 -->
|
||||
<view class="list-item" @click="goToHistory">
|
||||
<text class="item-text">观看历史</text>
|
||||
<uni-icons type="right" color="#999999" size="16"></uni-icons>
|
||||
</view>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 离线缓存 -->
|
||||
<view class="list-item" @click="goToCache">
|
||||
<text class="item-text">离线缓存</text>
|
||||
<uni-icons type="right" color="#999999" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const goToHistory = () => {
|
||||
uni.showToast({ title: '观看历史', icon: 'none' });
|
||||
};
|
||||
|
||||
const goToCache = () => {
|
||||
uni.showToast({ title: '离线缓存', icon: 'none' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-video-page {
|
||||
min-height: 100vh;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 30rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.item-text {
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 2rpx;
|
||||
background: #f0f0f0;
|
||||
|
||||
}
|
||||
</style>
|
||||
214
pages_app/videoHistroy/videoHistroy.vue
Normal file
214
pages_app/videoHistroy/videoHistroy.vue
Normal file
@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<view class="video-history-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="观看历史"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
>
|
||||
<template v-slot:right>
|
||||
<text class="edit-btn" @click="onEdit">编辑</text>
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
|
||||
<!-- 观看历史列表 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="history-list"
|
||||
refresher-enabled
|
||||
@refresherrefresh="onRefresh"
|
||||
:refresher-triggered="refreshing"
|
||||
@scrolltolower="onLoadMore"
|
||||
:lower-threshold="100"
|
||||
>
|
||||
<view class="history-item" v-for="(item, index) in historyList" :key="index" @click="onItemClick(item)">
|
||||
<view class="thumbnail">
|
||||
<up-image :src="item.thumbnail" width="200rpx" height="120rpx" mode="aspectFill"></up-image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="title">{{ item.title }}</view>
|
||||
<view class="author">{{ item.author }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view v-if="loading" class="loading-more">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 没有更多数据提示 -->
|
||||
<view v-if="noMore" class="no-more">
|
||||
<text>没有更多数据了</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const refreshing = ref(false);
|
||||
const loading = ref(false);
|
||||
const noMore = ref(false);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const historyList = ref([
|
||||
{
|
||||
thumbnail: '/static/bo_bg.png',
|
||||
title: '隐球菌性脑膜(脑)炎的诊治',
|
||||
author: '蒋荣猛'
|
||||
},
|
||||
{
|
||||
thumbnail: '/static/bo_bg.png',
|
||||
title: '南京市第二医院疑难肝病病理读片会暨疑难肝病MDT 第135期',
|
||||
author: '南京市第二医院'
|
||||
},
|
||||
{
|
||||
thumbnail: '/static/bo_bg.png',
|
||||
title: '徐医感染: 硬化出血发热路, 关关难过关关过',
|
||||
author: '徐州医科大学附属医院感染科'
|
||||
},
|
||||
{
|
||||
thumbnail: '/static/bo_bg.png',
|
||||
title: '自身免疫性肝病专栏|免疫治疗的双刃剑——1例自身免疫肝炎患者的…',
|
||||
author: '首都医科大学附属北京佑安医院…'
|
||||
},
|
||||
{
|
||||
thumbnail: '/static/bo_bg.png',
|
||||
title: '慢性乙肝功能性治愈讨论',
|
||||
author: '庄辉'
|
||||
},
|
||||
{
|
||||
thumbnail: '/static/bo_bg.png',
|
||||
title: '《2025年版慢加急性肝衰竭指南》解读',
|
||||
author: '陈煜'
|
||||
},
|
||||
{
|
||||
thumbnail: '/static/bo_bg.png',
|
||||
title: '《2025年版慢加急性肝衰竭指南》解读',
|
||||
author: '陈煜'
|
||||
},
|
||||
{
|
||||
thumbnail: '/static/bo_bg.png',
|
||||
title: '慢性乙肝功能性治愈讨论',
|
||||
author: '庄辉'
|
||||
}
|
||||
]);
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const onEdit = () => {
|
||||
uni.showToast({ title: '编辑功能', icon: 'none' });
|
||||
};
|
||||
|
||||
const onItemClick = (item) => {
|
||||
uni.showToast({ title: `点击了: ${item.title}`, icon: 'none' });
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
refreshing.value = true;
|
||||
page.value = 1;
|
||||
noMore.value = false;
|
||||
|
||||
// 模拟刷新数据
|
||||
setTimeout(() => {
|
||||
refreshing.value = false;
|
||||
uni.showToast({ title: '刷新完成', icon: 'success' });
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const onLoadMore = () => {
|
||||
if (loading.value || noMore.value) return;
|
||||
|
||||
loading.value = true;
|
||||
|
||||
// 模拟加载更多数据
|
||||
setTimeout(() => {
|
||||
// 这里可以调用API加载更多数据
|
||||
// 示例：添加更多数据到列表
|
||||
if (page.value < 3) { // 模拟只有3页数据
|
||||
page.value++;
|
||||
// 可以在这里添加新的数据到 historyList
|
||||
uni.showToast({ title: '加载完成', icon: 'success' });
|
||||
} else {
|
||||
noMore.value = true;
|
||||
}
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video-history-page {
|
||||
min-height: 100vh;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
height: calc(100vh - 140rpx);
|
||||
position: fixed;
|
||||
top:140rpx;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
color: #8B2316;
|
||||
font-size: 28rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
background: #ffffff;
|
||||
margin-bottom: 2rpx;
|
||||
|
||||
.thumbnail {
|
||||
margin-right: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 10rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-more, .no-more {
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
</style>
|
||||
96
pages_app/wechatContact/wechatContact.vue
Normal file
96
pages_app/wechatContact/wechatContact.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<view class="wechat-contact-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="微信关联"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
></uni-nav-bar>
|
||||
|
||||
<!-- 微信卡片 -->
|
||||
<view class="card">
|
||||
<view class="wx-left">
|
||||
<up-image :src="wxIcon" width="120rpx" height="120rpx" mode="aspectFill"></up-image>
|
||||
</view>
|
||||
<view class="wx-center">
|
||||
<view class="wx-title">微信</view>
|
||||
<view class="wx-sub">未绑定微信</view>
|
||||
</view>
|
||||
<view class="wx-right">
|
||||
<button class="bind-btn" @click="onBind">绑定</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作说明 -->
|
||||
<view class="tips">
|
||||
<view class="tips-title">操作说明:</view>
|
||||
<view class="tips-line">1. 肝胆相照注册账号与微信绑定，肝胆相照相关直播、视频无忧随心看</view>
|
||||
<view class="tips-line">2. 仅需操作一次，后续通过微信观看直播、视频无需额外操作，立即进入</view>
|
||||
<view class="tips-line">
|
||||
若您有任何疑问或需要我们协助，请与您的小助手联系或直接微信联系
|
||||
<text class="highlight">igandan1000</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import wxIcon from '@/static/wechat_icon.png';
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const onBind = () => {
|
||||
uni.showToast({ title: '去绑定', icon: 'none' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wechat-contact-page {
|
||||
min-height: 100vh;
|
||||
background: #ffffff;
|
||||
padding-top: 160rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
margin: 20rpx 0;
|
||||
padding: 30rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
.wx-left { margin-right: 24rpx; }
|
||||
.wx-center {
|
||||
flex: 1;
|
||||
.wx-title { font-size: 34rpx; color: #222222; }
|
||||
.wx-sub { margin-top: 10rpx; font-size: 26rpx; color: #9e9e9e; }
|
||||
}
|
||||
.wx-right {
|
||||
.bind-btn {
|
||||
min-width: 140rpx;
|
||||
height: 64rpx;
|
||||
background: #2ecc71;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
padding: 30rpx;
|
||||
background: #f7f7f7;
|
||||
.tips-title { font-size: 30rpx; color: #222222; margin-bottom: 16rpx; }
|
||||
.tips-line { font-size: 28rpx; color: #666666; line-height: 1.8; margin-bottom: 10rpx; }
|
||||
.highlight { color: #e53935; }
|
||||
}
|
||||
</style>
|
||||
BIN
static/add_card_no.png
Normal file
BIN
static/add_card_no.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/add_card_yes.png
Normal file
BIN
static/add_card_yes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
static/course_download.png
Normal file
BIN
static/course_download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
static/course_yuan.png
Normal file
BIN
static/course_yuan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/fapaio_tip.png
Normal file
BIN
static/fapaio_tip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
x
Reference in New Issue
Block a user