master
parent
3fb8128278
commit
a66724edf9
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view>
|
||||
<image class="bkg" mode="aspectFill" src="~@/static/login/bkg.png"></image>
|
||||
|
||||
<view class="container">
|
||||
<image class="logo" mode="aspectFit" src="~@/static/login/logo.png"></image>
|
||||
|
||||
<view class="login">
|
||||
<view class="text">
|
||||
<view>医康养 申请获取以下权限! </view>
|
||||
<view>获取您绑定的手机号码</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<u-button ripple
|
||||
:hair-line="false"
|
||||
:custom-style="mobileBtnStyle"
|
||||
open-type="getPhoneNumber"
|
||||
@getphonenumber="mobileLogin">手机登录</u-button>
|
||||
<u-button ripple :hair-line="false" :custom-style="authBtnStyle" @click="authLogin">一件授权登录</u-button>
|
||||
</view>
|
||||
<view class="auth">
|
||||
<u-checkbox v-model="isAuth" shape="circle" active-color="#c20d12">
|
||||
<text style="padding-left: 18rpx;">阅读并同意</text>
|
||||
<text style="color: #c20d12;" @click.stop.prevent>《用户协议》</text>
|
||||
<text>和</text>
|
||||
<text style="color: #c20d12;" @click.stop.prevent>《隐私协议》</text>
|
||||
</u-checkbox>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="bottom" src="~@/static/login/bottom.png" mode="aspectFit"></image>
|
||||
|
||||
<u-top-tips :navbar-height="navbarHeight" ref="uTips"></u-top-tips>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mobileBtnStyle: {
|
||||
width: '185rpx',
|
||||
height: '72rpx',
|
||||
'border-radius': '5rpx',
|
||||
'line-height': '72rpx',
|
||||
'font-size': '28rpx',
|
||||
'color': '#333',
|
||||
background: '#e1e0e4'
|
||||
},
|
||||
authBtnStyle: {
|
||||
width: '434rpx',
|
||||
height: '72rpx',
|
||||
'border-radius': '5rpx',
|
||||
'line-height': '72rpx',
|
||||
'font-size': '28rpx',
|
||||
'color': '#fff',
|
||||
background: 'linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)'
|
||||
},
|
||||
|
||||
isAuth: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
navbarHeight() {
|
||||
return getApp().globalData.navbarHeight
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
authLogin() {
|
||||
if (!this.isAuth) {
|
||||
this.$refs.uTips.show({
|
||||
title: '请阅读《用户协议》和《隐私协议》',
|
||||
type: 'warning',
|
||||
duration: '2000'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.login({
|
||||
provider: 'weixin', //使用微信登录
|
||||
success: (loginRes) => {
|
||||
console.log(loginRes);
|
||||
this.$u.route({
|
||||
type: 'switchTab',
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
mobileLogin(e) {
|
||||
if (!this.isAuth) {
|
||||
this.$refs.uTips.show({
|
||||
title: '请阅读《用户协议》和《隐私协议》',
|
||||
type: 'warning',
|
||||
duration: '2000'
|
||||
})
|
||||
return
|
||||
}
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.bkg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 510rpx;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
padding-top: 15.5vh;
|
||||
z-index: 3;
|
||||
|
||||
.logo {
|
||||
width: 399rpx;
|
||||
height: 392rpx;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
.login {
|
||||
margin-top: 10.5vh;
|
||||
|
||||
.text {
|
||||
padding-left: 50rpx;
|
||||
& > view:nth-child(1) {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
& > view:nth-child(2) {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 50rpx;
|
||||
margin-top: 2.1vh;
|
||||
}
|
||||
.auth {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
padding: 4.61vh 0 0 95rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
position: absolute;
|
||||
width: 491rpx;
|
||||
height: 192rpx;
|
||||
left: 50%;
|
||||
bottom: 7.82vh;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
@ -1,24 +1,307 @@
|
||||
<template>
|
||||
<view>
|
||||
order
|
||||
<tabbar />
|
||||
<view class="wrap safe-area-inset-bottom">
|
||||
<view class="u-tabs-box">
|
||||
<u-tabs-swiper :height="76"
|
||||
:font-size="24"
|
||||
active-color="#c20d12"
|
||||
bg-color="transparent"
|
||||
inactive-color="#999"
|
||||
ref="tabs"
|
||||
:list="tabs"
|
||||
:current="current"
|
||||
@change="change"
|
||||
:is-scroll="false"
|
||||
:offset="[5,5]"
|
||||
swiperWidth="750"></u-tabs-swiper>
|
||||
</view>
|
||||
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
|
||||
<view class="order" v-for="i in 10" :key="i">
|
||||
<view class="title">
|
||||
<view class="title__name">专享半天陪诊</view>
|
||||
<view class="title__status">待支付</view>
|
||||
</view>
|
||||
|
||||
<view class="price">
|
||||
<view class="price-icon">
|
||||
<u-icon name="integral" size="30"></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="price-text">
|
||||
<view class="price-text__num">￥600</view>
|
||||
<view class="price-text__no">订单号 PZ2024111855448048</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info">
|
||||
<view class="info__item">
|
||||
<text>就诊城市</text>
|
||||
<text>苏州</text>
|
||||
</view>
|
||||
<view class="info__item">
|
||||
<text>就诊医院</text>
|
||||
<text>苏大附属</text>
|
||||
</view>
|
||||
<view class="info__item">
|
||||
<text>就诊人</text>
|
||||
<text>萍萍</text>
|
||||
</view>
|
||||
<view class="info__item">
|
||||
<text>就诊时间</text>
|
||||
<text>2024-12-18 17:00</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
<view class="time">
|
||||
<text>下单时间: </text>
|
||||
<text>2024-11-18 17:48:47</text>
|
||||
</view>
|
||||
|
||||
<u-button ripple shape="circle" :custom-style="payBtnStyle">立即支付</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
|
||||
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;width: 100%;">
|
||||
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
|
||||
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
|
||||
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
|
||||
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<Tabbar />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tabbar from "@/component/Tabbar/Tabbar.vue";
|
||||
|
||||
import Tabbar from '@/component/Tabbar/Tabbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
Tabbar
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
payBtnStyle: {
|
||||
'background-image': 'linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)',
|
||||
'font-weight': '500',
|
||||
'font-size': '28rpx',
|
||||
'color': '#fff',
|
||||
'width': '185rpx',
|
||||
'height': '60rpx',
|
||||
'line-height': '60rpx'
|
||||
},
|
||||
tabs: [
|
||||
{
|
||||
name: '全部'
|
||||
},
|
||||
{
|
||||
name: '待支付'
|
||||
},
|
||||
{
|
||||
name: '待评价'
|
||||
},
|
||||
{
|
||||
name: '服务中',
|
||||
count: 12
|
||||
},
|
||||
{
|
||||
name: '已完成'
|
||||
},
|
||||
{
|
||||
name: '已取消'
|
||||
}
|
||||
],
|
||||
current: 0,
|
||||
swiperCurrent: 0,
|
||||
tabsHeight: 0,
|
||||
dx: 0,
|
||||
loadStatus: [],
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
created() {
|
||||
this.loadStatus = Array.from({ length: this.tabs.length },_ => 'loadmore')
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
reachBottom() {
|
||||
// 此tab为空数据
|
||||
|
||||
},
|
||||
// tab栏切换
|
||||
change(index) {
|
||||
this.swiperCurrent = index;
|
||||
},
|
||||
transition({ detail: { dx } }) {
|
||||
this.$refs.tabs.setDx(dx);
|
||||
},
|
||||
animationfinish({ detail: { current } }) {
|
||||
this.$refs.tabs.setFinishCurrent(current);
|
||||
this.swiperCurrent = current;
|
||||
this.current = current;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: #eee;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--window-top) - calc(60px + 6px));
|
||||
width: 100%;
|
||||
}
|
||||
.swiper-box {
|
||||
flex: 1;
|
||||
}
|
||||
.swiper-item {
|
||||
height: 100%;
|
||||
}
|
||||
.order {
|
||||
margin: 0 25rpx;
|
||||
border-radius: 10rpx;
|
||||
filter: drop-shadow(0 0 10rpx rgba(211,211,214,0.3));
|
||||
background-color: #ffffff;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 37rpx 39rpx 32rpx 45rpx;
|
||||
position: relative;
|
||||
|
||||
&__name {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
&__status {
|
||||
font-size: 24rpx;
|
||||
color: #c20d12;
|
||||
font-weight: 500;
|
||||
margin-left: auto;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
height: 2rpx;
|
||||
background: #999999;
|
||||
opacity: 0.302;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 39rpx;
|
||||
right: 39rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28rpx 0 0 44rpx;
|
||||
|
||||
&-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 90rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #f3e7d8;
|
||||
}
|
||||
&-text {
|
||||
padding-left: 28rpx;
|
||||
&__num {
|
||||
font-size: 24rpx;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
&__no {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
padding-top: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 35rpx 45rpx 0;
|
||||
|
||||
&__item {
|
||||
flex-basis: 50%;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
& > text {
|
||||
display: block;
|
||||
|
||||
}
|
||||
& > text:nth-child(1) {
|
||||
color: #999;
|
||||
padding-right: 20rpx;
|
||||
flex: 0;
|
||||
word-break: keep-all;
|
||||
}
|
||||
& > text:nth-child(2) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding: 6rpx 28rpx 35rpx 43rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 74 KiB |
Loading…
Reference in new issue