调整了页面命名和组织
This commit is contained in:
43
pages/home/index.js
Normal file
43
pages/home/index.js
Normal file
@@ -0,0 +1,43 @@
|
||||
Page({
|
||||
data: {
|
||||
contact: {
|
||||
icon: 'logo-wechat-stroke',
|
||||
phone: '18618162956'
|
||||
},
|
||||
services: {},
|
||||
},
|
||||
|
||||
async onLoad() {
|
||||
const app = getApp()
|
||||
const services = await app.globalData.servicesReady
|
||||
this.setData({
|
||||
services: services.sort((a, b) => parseFloat(a.price) - parseFloat(b.price))
|
||||
});
|
||||
},
|
||||
|
||||
makePhoneCall() {
|
||||
const phoneNumber = this.data.contact.phone;
|
||||
wx.makePhoneCall({
|
||||
phoneNumber: phoneNumber,
|
||||
success: () => {
|
||||
console.log('拨打电话成功');
|
||||
},
|
||||
fail: () => {
|
||||
console.log('拨打电话失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
goToDetail(e) {
|
||||
const id = e.currentTarget.dataset.id;
|
||||
wx.navigateTo({
|
||||
url: `/pages/escort/itemdetail?id=${id}`
|
||||
});
|
||||
},
|
||||
|
||||
goToAIChat() {
|
||||
wx.switchTab({
|
||||
url: '/pages/ai/aichat'
|
||||
});
|
||||
}
|
||||
});
|
||||
6
pages/home/index.json
Normal file
6
pages/home/index.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "暖橙陪诊",
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
73
pages/home/index.wxml
Normal file
73
pages/home/index.wxml
Normal file
@@ -0,0 +1,73 @@
|
||||
<view class="container">
|
||||
<view class="header-section">
|
||||
<image class="header-bg" src="/images/background.jpg" mode="aspectFill"></image>
|
||||
<view class="user-info">
|
||||
<image class="avatar" src="/images/home-active2.png" mode="aspectFill"></image>
|
||||
<view class="welcome-text">
|
||||
<text class="user-name">专业陪诊</text>
|
||||
<text class="welcome-subtitle">让就医更简单，让客户更安心</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="services-section">
|
||||
<view class="service-item">
|
||||
<view class="service-icon-wrap blue">
|
||||
<image class="service-icon" src="/images/home-w.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<text class="service-name">陪诊</text>
|
||||
</view>
|
||||
<view class="service-item" bindtap="goToAIChat">
|
||||
<view class="service-icon-wrap blue">
|
||||
<image class="service-icon" src="/images/zixun-w.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<text class="service-name">AI客服</text>
|
||||
</view>
|
||||
<view class="service-item" bindtap="goToAIChat">
|
||||
<view class="service-icon-wrap blue">
|
||||
<image class="service-icon" src="/images/team-w.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<text class="service-name">商务合作</text>
|
||||
</view>
|
||||
|
||||
<view class="service-item" bindtap="makePhoneCall">
|
||||
<view class="service-icon-wrap blue">
|
||||
<image class="service-icon" src="/images/call-w.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<text class="service-name">电话联系</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="articles-section">
|
||||
<view class="section-header">
|
||||
<view class="section-title-wrap">
|
||||
<t-icon name="view-list" class="section-icon" />
|
||||
<text class="section-title">陪诊项目</text>
|
||||
</view>
|
||||
<text class="section-more"></text>
|
||||
</view>
|
||||
|
||||
<view class="article-list">
|
||||
<view class="article-item" wx:for="{{ services }}" wx:key="id" bindtap="goToDetail" data-id="{{ item.id }}">
|
||||
<image class="article-image" src="{{ item.image }}" mode="aspectFill"></image>
|
||||
<view class="article-content">
|
||||
<text class="article-title">{{ item.title }}</text>
|
||||
<view class="article-meta">
|
||||
<text class="article-date">{{ item.subtitle }}</text>
|
||||
<text class="article-time">{{ item.readTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="article-price">¥{{ item.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="contact-section">
|
||||
<view class="contact-box">
|
||||
<t-icon name="{{ contact.icon }}" class="contact-icon" />
|
||||
<text class="contact-phone">18618162956</text>
|
||||
<button class="contact-btn" bindtap="makePhoneCall">打电话 </button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
268
pages/home/index.wxss
Normal file
268
pages/home/index.wxss
Normal file
@@ -0,0 +1,268 @@
|
||||
page {
|
||||
background-color: #FAF6F1;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
overflow: hidden;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-blur-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.doctor-image {
|
||||
position: absolute;
|
||||
right: -60rpx;
|
||||
bottom: 0;
|
||||
width: 380rpx;
|
||||
height: 420rpx;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 100rpx 40rpx 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
padding: 0 32rpx;
|
||||
margin-top: 40rpx;
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.contact-box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 34rpx 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 38rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.contact-text {
|
||||
font-size: 30rpx;
|
||||
color: #9CA3AF;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.contact-phone {
|
||||
font-size: 28rpx;
|
||||
color: #1F2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contact-btn {
|
||||
background: linear-gradient(135deg, #FF9B33 0%, #FF8500 100%);
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
padding: 26rpx 6rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.services-section {
|
||||
padding: 36rpx 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #FFFFFF;
|
||||
margin: 30rpx 0rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.service-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.service-icon-wrap {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.service-icon-wrap.blue {
|
||||
background-color: #FF9B33;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
color: #FF9B33;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-size: 28rpx;
|
||||
color: #374151;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.articles-section {
|
||||
padding: 10rpx 0rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
font-size: 36rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.section-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-more {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
.section-more {
|
||||
font-size: 26rpx;
|
||||
color: #FF9B33;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.article-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.article-item {
|
||||
background: #FFFFFF;
|
||||
border-radius: 0rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.article-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
padding-right: 16rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 22rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.article-date {
|
||||
font-size: 26rpx;
|
||||
color: #6c6c6c;
|
||||
}
|
||||
|
||||
.article-time {
|
||||
font-size: 22rpx;
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
.article-price {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #FF9B33;
|
||||
align-self: flex-start;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user