修改养殖端小程序，保险前后端和小程序
This commit is contained in:
xuqiuyun
@@ -5,59 +5,7 @@ Page({
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
// 热门产品数据
|
||||
hotProducts: [
|
||||
{
|
||||
id: 1,
|
||||
name: '综合意外险',
|
||||
description: '全面保障意外伤害，保费低廉',
|
||||
min_premium: 99,
|
||||
icon: '🛡️'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '重疾保险',
|
||||
description: '重大疾病保障，安心无忧',
|
||||
min_premium: 299,
|
||||
icon: '🏥'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '车险',
|
||||
description: '车辆全面保障，理赔快速',
|
||||
min_premium: 1999,
|
||||
icon: '🚗'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '旅行险',
|
||||
description: '出行安全保障，全球覆盖',
|
||||
min_premium: 59,
|
||||
icon: '✈️'
|
||||
}
|
||||
],
|
||||
|
||||
// 新闻资讯数据
|
||||
newsList: [
|
||||
{
|
||||
id: 1,
|
||||
title: '2024年保险新政策解读',
|
||||
summary: '了解最新的保险政策变化，为您的保障规划提供参考',
|
||||
date: '2024-01-15'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '如何选择适合自己的保险产品',
|
||||
summary: '专业指导帮助您选择最合适的保险方案',
|
||||
date: '2024-01-12'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '理赔流程优化，服务更便捷',
|
||||
summary: '我们持续优化理赔流程，让您的理赔更加便捷快速',
|
||||
date: '2024-01-10'
|
||||
}
|
||||
]
|
||||
// 精选保险数据将直接在WXML中定义
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -65,7 +13,6 @@ Page({
|
||||
*/
|
||||
onLoad(options) {
|
||||
console.log('首页加载完成')
|
||||
this.loadPageData()
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -96,12 +43,42 @@ Page({
|
||||
console.log('首页卸载')
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示更多选项
|
||||
*/
|
||||
showMoreOptions() {
|
||||
console.log('显示更多选项')
|
||||
wx.showActionSheet({
|
||||
itemList: ['关于我们', '帮助中心', '意见反馈'],
|
||||
success: function(res) {
|
||||
console.log('用户选择了第' + (res.tapIndex + 1) + '项')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 最小化应用
|
||||
*/
|
||||
minimizeApp() {
|
||||
console.log('最小化应用')
|
||||
wx.navigateBackMiniProgram()
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示设置
|
||||
*/
|
||||
showSettings() {
|
||||
console.log('显示设置')
|
||||
wx.navigateTo({
|
||||
url: '/pages/settings/settings'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
console.log('下拉刷新')
|
||||
this.loadPageData()
|
||||
// 停止下拉刷新
|
||||
setTimeout(() => {
|
||||
wx.stopPullDownRefresh()
|
||||
@@ -121,21 +98,12 @@ Page({
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '保险服务 - 专业安全的保险平台',
|
||||
title: '生资保险 - 专业的农业保险服务',
|
||||
path: '/pages/index/index',
|
||||
imageUrl: '/static/images/share-cover.jpg'
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载页面数据
|
||||
*/
|
||||
loadPageData() {
|
||||
console.log('加载首页数据')
|
||||
// 这里可以调用API获取数据
|
||||
// 目前使用模拟数据
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到产品详情页
|
||||
*/
|
||||
@@ -158,12 +126,12 @@ Page({
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到我的页面
|
||||
* 跳转到我的保单页面
|
||||
*/
|
||||
goToMy() {
|
||||
console.log('跳转到我的页面')
|
||||
goToPolicies() {
|
||||
console.log('跳转到我的保单页面')
|
||||
wx.switchTab({
|
||||
url: '/pages/my/my'
|
||||
url: '/pages/policies/policies'
|
||||
})
|
||||
},
|
||||
|
||||
@@ -178,36 +146,12 @@ Page({
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示客服服务
|
||||
* 跳转到牛只估重页面
|
||||
*/
|
||||
goToService() {
|
||||
console.log('显示客服服务')
|
||||
wx.showModal({
|
||||
title: '客服服务',
|
||||
content: '客服电话：400-888-8888\n服务时间：周一至周日 9:00-18:00',
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到新闻列表页
|
||||
*/
|
||||
goToNews() {
|
||||
console.log('跳转到新闻列表页')
|
||||
goToWeightEstimation() {
|
||||
console.log('跳转到牛只估重页面')
|
||||
wx.navigateTo({
|
||||
url: '/pages/news/news'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到新闻详情页
|
||||
*/
|
||||
goToNewsDetail(e) {
|
||||
const newsId = e.currentTarget.dataset.id
|
||||
console.log('跳转到新闻详情页:', newsId)
|
||||
wx.navigateTo({
|
||||
url: `/pages/news-detail/news-detail?id=${newsId}`
|
||||
url: '/pages/weight-estimation/weight-estimation'
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "保险服务",
|
||||
"navigationBarTitleText": "生资保险",
|
||||
"enablePullDownRefresh": true,
|
||||
"backgroundTextStyle": "dark",
|
||||
"backgroundColor": "#f5f5f5"
|
||||
|
||||
@@ -1,80 +1,81 @@
|
||||
<!--pages/index/index.wxml-->
|
||||
<view class="container">
|
||||
<!-- 欢迎横幅 -->
|
||||
<view class="welcome-banner">
|
||||
<text class="welcome-title">欢迎使用保险服务</text>
|
||||
<text class="welcome-subtitle">专业、安全、便捷的保险服务平台</text>
|
||||
<!-- 页面头部 -->
|
||||
<view class="page-header">
|
||||
<text class="header-title">生资保险</text>
|
||||
<view class="header-actions">
|
||||
<view class="header-icon" bindtap="showMoreOptions">...</view>
|
||||
<view class="header-icon" bindtap="minimizeApp">━</view>
|
||||
<view class="header-icon" bindtap="showSettings">⚙️</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷入口 -->
|
||||
<view class="quick-actions">
|
||||
<view class="action-item" bindtap="goToProducts">
|
||||
<view class="action-icon">📋</view>
|
||||
<text class="action-text">保险产品</text>
|
||||
</view>
|
||||
<view class="action-item" bindtap="goToMy">
|
||||
<view class="action-icon">📄</view>
|
||||
<text class="action-text">我的保单</text>
|
||||
</view>
|
||||
<view class="action-item" bindtap="goToClaims">
|
||||
<view class="action-icon">💰</view>
|
||||
<text class="action-text">理赔申请</text>
|
||||
</view>
|
||||
<view class="action-item" bindtap="goToService">
|
||||
<view class="action-icon">📞</view>
|
||||
<text class="action-text">客服服务</text>
|
||||
</view>
|
||||
<view class="action-icon">
|
||||
<text>📋</text>
|
||||
</view>
|
||||
<text class="action-text">保险产品</text>
|
||||
</view>
|
||||
<view class="action-item" bindtap="goToPolicies">
|
||||
<view class="action-icon">
|
||||
<text>📄</text>
|
||||
</view>
|
||||
<text class="action-text">我的保单</text>
|
||||
</view>
|
||||
<view class="action-item" bindtap="goToClaims">
|
||||
<view class="action-icon">
|
||||
<text>💰</text>
|
||||
</view>
|
||||
<text class="action-text">我的理赔</text>
|
||||
</view>
|
||||
<view class="action-item" bindtap="goToWeightEstimation">
|
||||
<view class="action-icon">
|
||||
<text>⚖️</text>
|
||||
</view>
|
||||
<text class="action-text">牛只估重</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 热门产品 -->
|
||||
<!-- 精选保险 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">热门产品</text>
|
||||
<text class="section-more" bindtap="goToProducts">更多 ></text>
|
||||
<text class="section-title">精选保险</text>
|
||||
</view>
|
||||
|
||||
<view class="product-grid">
|
||||
<view
|
||||
wx:for="{{hotProducts}}"
|
||||
wx:key="id"
|
||||
class="product-card"
|
||||
bindtap="goToProductDetail"
|
||||
data-id="{{item.id}}"
|
||||
>
|
||||
<view class="product-icon">{{item.icon}}</view>
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{item.name}}</text>
|
||||
<text class="product-desc">{{item.description}}</text>
|
||||
<view class="product-price">
|
||||
<text class="price-label">起保费：</text>
|
||||
<text class="price-value">¥{{item.min_premium}}</text>
|
||||
<view class="featured-products">
|
||||
<!-- 第一个保险产品 -->
|
||||
<view class="featured-product-card" bindtap="goToProductDetail" data-id="1">
|
||||
<view class="product-image-placeholder">
|
||||
<text class="product-image-icon">🛡️</text>
|
||||
</view>
|
||||
<view class="product-details">
|
||||
<text class="product-name">牲畜意外死亡险</text>
|
||||
<text class="product-desc">牛猪羊保险，性价比高</text>
|
||||
<view class="product-features">
|
||||
<text class="feature-tag">保障全面</text>
|
||||
<text class="feature-tag">性价比高</text>
|
||||
<text class="feature-tag">方案灵活</text>
|
||||
</view>
|
||||
<text class="coverage-info">保险额度：1000-88888元</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务优势 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">服务优势</text>
|
||||
</view>
|
||||
|
||||
<view class="advantage-grid">
|
||||
<view class="advantage-item">
|
||||
<view class="advantage-icon">🛡️</view>
|
||||
<text class="advantage-title">专业保障</text>
|
||||
<text class="advantage-desc">专业团队提供全方位保险咨询</text>
|
||||
</view>
|
||||
<view class="advantage-item">
|
||||
<view class="advantage-icon">⚡</view>
|
||||
<text class="advantage-title">快速理赔</text>
|
||||
<text class="advantage-desc">7x24小时快速理赔服务</text>
|
||||
</view>
|
||||
<view class="advantage-item">
|
||||
<view class="advantage-icon">🔒</view>
|
||||
<text class="advantage-title">安全可靠</text>
|
||||
<text class="advantage-desc">银行级安全保障体系</text>
|
||||
|
||||
<!-- 第二个保险产品 -->
|
||||
<view class="featured-product-card" bindtap="goToProductDetail" data-id="2">
|
||||
<view class="product-image-placeholder">
|
||||
<text class="product-image-icon">📊</text>
|
||||
</view>
|
||||
<view class="product-details">
|
||||
<text class="product-name">牲畜意外死亡</text>
|
||||
<text class="product-desc">牛猪羊保险，性价比高</text>
|
||||
<view class="product-features">
|
||||
<text class="feature-tag">明星产品</text>
|
||||
<text class="feature-tag">专家推荐</text>
|
||||
</view>
|
||||
<text class="coverage-info">保险额度：2000-99999元</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -4,25 +4,38 @@
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 欢迎横幅 */
|
||||
.welcome-banner {
|
||||
background: linear-gradient(135deg, #1890ff, #40a9ff);
|
||||
padding: 60rpx 30rpx;
|
||||
text-align: center;
|
||||
color: white;
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 48rpx;
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.9;
|
||||
display: block;
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 快捷入口 */
|
||||
@@ -32,29 +45,37 @@
|
||||
padding: 40rpx 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 120rpx;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 60rpx;
|
||||
margin-bottom: 20rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f0f8ff;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.action-icon image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 通用区块 */
|
||||
@@ -75,111 +96,97 @@
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: relative;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.section-more {
|
||||
color: #1890ff;
|
||||
font-size: 28rpx;
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8rpx;
|
||||
height: 32rpx;
|
||||
background-color: #1890ff;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
/* 产品网格 */
|
||||
.product-grid {
|
||||
/* 精选保险产品 */
|
||||
.featured-products {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
.featured-product-card {
|
||||
display: flex;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 12rpx;
|
||||
background: #fafafa;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.product-icon {
|
||||
font-size: 60rpx;
|
||||
/* 产品图片占位符样式 */
|
||||
.featured-product-card .product-image-placeholder {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f0f8ff;
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
.product-image-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 32rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
color: #666666;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
.product-features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 32rpx;
|
||||
color: #ff6b35;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 优势网格 */
|
||||
.advantage-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.advantage-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.advantage-icon {
|
||||
font-size: 60rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
gap: 15rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f0f8ff;
|
||||
border-radius: 50%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.advantage-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.advantage-desc {
|
||||
.feature-tag {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
color: #1890ff;
|
||||
background-color: #e6f7ff;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
|
||||
.coverage-info {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 新闻列表 */
|
||||
|
||||
@@ -90,7 +90,7 @@ Page({
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '保险服务 - 专业安全的保险平台',
|
||||
title: '生资保险 - 专业安全的养殖保险平台',
|
||||
path: '/pages/login/login',
|
||||
imageUrl: '/static/images/share-login.jpg'
|
||||
}
|
||||
@@ -184,6 +184,8 @@ Page({
|
||||
this.setData({
|
||||
agreeTerms: e.detail.value
|
||||
})
|
||||
// 切换协议状态后重新验证表单，更新登录按钮状态
|
||||
this.validateForm()
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -193,17 +195,19 @@ Page({
|
||||
const { phone, password, smsCode } = this.data.formData
|
||||
const { loginType } = this.data
|
||||
|
||||
// 验证手机号
|
||||
// 验证手机号或用户名
|
||||
const isValidPhone = /^1[3-9]\d{9}$/.test(phone)
|
||||
this.setData({ isValidPhone })
|
||||
const isValidUsername = phone.length >= 4 // 用户名至少4个字符
|
||||
const isValidAccount = isValidPhone || isValidUsername
|
||||
this.setData({ isValidPhone: isValidAccount })
|
||||
|
||||
// 验证密码登录
|
||||
if (loginType === 'password') {
|
||||
const canLogin = isValidPhone && password.length >= 6
|
||||
const canLogin = isValidAccount && password.length >= 6
|
||||
this.setData({ canLogin })
|
||||
}
|
||||
|
||||
// 验证短信登录
|
||||
// 验证短信登录（短信登录仍然需要手机号格式）
|
||||
if (loginType === 'sms') {
|
||||
const canSmsLogin = isValidPhone && smsCode.length === 6
|
||||
this.setData({ canSmsLogin })
|
||||
@@ -270,18 +274,10 @@ Page({
|
||||
*/
|
||||
onPasswordLogin() {
|
||||
const { phone, password } = this.data.formData
|
||||
const { canLogin, loading, agreeTerms } = this.data
|
||||
const { canLogin, loading } = this.data
|
||||
|
||||
if (!canLogin || loading) return
|
||||
|
||||
if (!agreeTerms) {
|
||||
wx.showToast({
|
||||
title: '请先同意用户协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
console.log('密码登录:', phone)
|
||||
this.performLogin('password', { phone, password })
|
||||
},
|
||||
@@ -291,18 +287,10 @@ Page({
|
||||
*/
|
||||
onSmsLogin() {
|
||||
const { phone, smsCode } = this.data.formData
|
||||
const { canSmsLogin, loading, agreeTerms } = this.data
|
||||
const { canSmsLogin, loading } = this.data
|
||||
|
||||
if (!canSmsLogin || loading) return
|
||||
|
||||
if (!agreeTerms) {
|
||||
wx.showToast({
|
||||
title: '请先同意用户协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
console.log('短信登录:', phone, smsCode)
|
||||
this.performLogin('sms', { phone, smsCode })
|
||||
},
|
||||
@@ -344,7 +332,7 @@ Page({
|
||||
// 延迟跳转
|
||||
setTimeout(() => {
|
||||
wx.switchTab({
|
||||
url: '/pages/my/my'
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}, 1500)
|
||||
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
<!-- Logo区域 -->
|
||||
<view class="logo-section">
|
||||
<view class="logo-icon">🛡️</view>
|
||||
<text class="app-name">保险服务</text>
|
||||
<text class="app-slogan">专业、安全、便捷的保险平台</text>
|
||||
<text class="app-name">生资保险</text>
|
||||
<text class="app-slogan">专业、安全的养殖保险平台</text>
|
||||
</view>
|
||||
|
||||
<!-- 登录方式切换 -->
|
||||
@@ -41,11 +41,11 @@
|
||||
<view class="input-icon">📱</view>
|
||||
<input
|
||||
class="form-input"
|
||||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
type="text"
|
||||
placeholder="请输入用户名或手机号"
|
||||
value="{{formData.phone}}"
|
||||
bindinput="onPhoneInput"
|
||||
maxlength="11"
|
||||
maxlength="20"
|
||||
/>
|
||||
</view>
|
||||
<view class="input-wrapper">
|
||||
@@ -91,11 +91,11 @@
|
||||
<view class="input-icon">📱</view>
|
||||
<input
|
||||
class="form-input"
|
||||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
type="text"
|
||||
placeholder="请输入用户名或手机号"
|
||||
value="{{formData.phone}}"
|
||||
bindinput="onPhoneInput"
|
||||
maxlength="11"
|
||||
maxlength="20"
|
||||
/>
|
||||
</view>
|
||||
<view class="input-wrapper sms-input">
|
||||
@@ -147,19 +147,6 @@
|
||||
<text class="register-link" bindtap="goToRegister">立即注册</text>
|
||||
</view>
|
||||
|
||||
<!-- 用户协议 -->
|
||||
<view class="agreement">
|
||||
<checkbox
|
||||
checked="{{agreeTerms}}"
|
||||
bindchange="onAgreeChange"
|
||||
color="#1890ff"
|
||||
/>
|
||||
<text class="agreement-text">
|
||||
我已阅读并同意
|
||||
<text class="link" bindtap="goToTerms">《用户协议》</text>
|
||||
和
|
||||
<text class="link" bindtap="goToPrivacy">《隐私政策》</text>
|
||||
</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
@@ -1,18 +1,20 @@
|
||||
/* pages/login/login.wxss */
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, #4e6ef2 0%, #2a3ba7 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 顶部装饰 */
|
||||
/* 顶部装饰 - 增强视觉效果 */
|
||||
.header-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 200rpx;
|
||||
height: 400rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -20,91 +22,134 @@
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
top: -100rpx;
|
||||
right: -50rpx;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
top: -150rpx;
|
||||
right: -100rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
top: 50rpx;
|
||||
left: -75rpx;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
top: 100rpx;
|
||||
left: -100rpx;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
top: 20rpx;
|
||||
right: 100rpx;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
top: 250rpx;
|
||||
right: 150rpx;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
/* 登录表单 */
|
||||
/* 浮动动画 */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20rpx) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 登录表单 - 优化布局 */
|
||||
.login-form {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 100rpx 60rpx 60rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 120rpx 60rpx 60rpx;
|
||||
}
|
||||
|
||||
/* Logo区域 */
|
||||
/* Logo区域 - 增强品牌展示 */
|
||||
.logo-section {
|
||||
text-align: center;
|
||||
margin-bottom: 80rpx;
|
||||
transform: translateY(10rpx);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 120rpx;
|
||||
font-size: 140rpx;
|
||||
margin-bottom: 30rpx;
|
||||
display: inline-block;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 48rpx;
|
||||
font-size: 52rpx;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.app-slogan {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 30rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
display: block;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
/* 登录方式切换 */
|
||||
/* 脉冲动画 */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 登录方式切换 - 更现代的设计 */
|
||||
.login-tabs {
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 50rpx;
|
||||
padding: 8rpx;
|
||||
margin-bottom: 60rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 42rpx;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
transition: all 0.3s;
|
||||
font-size: 30rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
background: white;
|
||||
color: #1890ff;
|
||||
color: #4e6ef2;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 表单内容 */
|
||||
/* 表单内容 - 更现代化的卡片设计 */
|
||||
.form-content {
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
border-radius: 30rpx;
|
||||
padding: 60rpx 40rpx;
|
||||
box-shadow: 0 30rpx 60rpx rgba(0, 0, 0, 0.15);
|
||||
backdrop-filter: blur(10rpx);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.form-content:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@@ -197,26 +242,51 @@
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
/* 登录按钮 - 更吸引人的按钮设计 */
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 46rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
margin-bottom: 40rpx;
|
||||
transition: all 0.3s;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-btn.active {
|
||||
background: #1890ff;
|
||||
background: linear-gradient(135deg, #07c160 0%, #069448 100%);
|
||||
color: white;
|
||||
box-shadow: 0 10rpx 30rpx rgba(7, 193, 96, 0.4);
|
||||
}
|
||||
|
||||
.login-btn.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transform: rotate(45deg);
|
||||
animation: shine 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn.disabled {
|
||||
background: #f0f0f0;
|
||||
color: #ccc;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.login-btn::after {
|
||||
@@ -304,22 +374,35 @@
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 用户协议 */
|
||||
.agreement {
|
||||
/* 用户协议提示 - 更简洁的显示方式 */
|
||||
.agreement-tip {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
margin-left: 10rpx;
|
||||
flex: 1;
|
||||
.agreement-tip .tip-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.agreement-tip .link {
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #1890ff;
|
||||
color: #4e6ef2;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(78, 110, 242, 0.3);
|
||||
text-decoration-thickness: 1rpx;
|
||||
text-underline-offset: 4rpx;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@@ -333,24 +416,39 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.tab-item {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.social-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
/* 加载状态 - 更友好的提示 */
|
||||
.login-btn:disabled {
|
||||
opacity: 0.6;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 输入框焦点效果增强 */
|
||||
.input-wrapper:focus-within {
|
||||
border-color: #4e6ef2;
|
||||
background: white;
|
||||
box-shadow: 0 4rpx 12rpx rgba(78, 110, 242, 0.1);
|
||||
}
|
||||
|
||||
/* 复选框样式优化 */
|
||||
checkbox.wx-checkbox-input {
|
||||
border-radius: 50%;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
checkbox.wx-checkbox-input.wx-checkbox-input-checked {
|
||||
background-color: #4e6ef2;
|
||||
border-color: #4e6ef2;
|
||||
}
|
||||
|
||||
/* 微信按钮样式优化 */
|
||||
.wechat-btn {
|
||||
border-color: #07c160;
|
||||
color: #07c160;
|
||||
background: #f9fff8;
|
||||
}
|
||||
|
||||
.wechat-btn:active {
|
||||
background: #07c160;
|
||||
color: white;
|
||||
}
|
||||
@@ -10,17 +10,8 @@ Page({
|
||||
|
||||
// 用户信息
|
||||
userInfo: {
|
||||
nickname: '',
|
||||
phone: '',
|
||||
nickname: '养殖户1007',
|
||||
avatar: ''
|
||||
},
|
||||
|
||||
// 统计数据
|
||||
stats: {
|
||||
policyCount: 0,
|
||||
applicationCount: 0,
|
||||
claimCount: 0,
|
||||
favoriteCount: 0
|
||||
}
|
||||
},
|
||||
|
||||
@@ -126,15 +117,7 @@ Page({
|
||||
*/
|
||||
loadUserData() {
|
||||
console.log('加载用户数据')
|
||||
// 模拟加载用户统计数据
|
||||
this.setData({
|
||||
stats: {
|
||||
policyCount: 3,
|
||||
applicationCount: 2,
|
||||
claimCount: 1,
|
||||
favoriteCount: 5
|
||||
}
|
||||
})
|
||||
// 用户数据已在data中设置为固定值
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -147,20 +130,6 @@ Page({
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到个人资料页
|
||||
*/
|
||||
goToProfile() {
|
||||
console.log('跳转到个人资料页')
|
||||
if (!this.data.isLoggedIn) {
|
||||
this.goToLogin()
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/profile/profile'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到我的保单页
|
||||
*/
|
||||
@@ -175,20 +144,6 @@ Page({
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到投保申请页
|
||||
*/
|
||||
goToApplications() {
|
||||
console.log('跳转到投保申请页')
|
||||
if (!this.data.isLoggedIn) {
|
||||
this.goToLogin()
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/application/application'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到理赔申请页
|
||||
*/
|
||||
@@ -204,50 +159,44 @@ Page({
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到收藏产品页
|
||||
* 跳转到我的卡券页
|
||||
*/
|
||||
goToFavorites() {
|
||||
console.log('跳转到收藏产品页')
|
||||
goToCoupons() {
|
||||
console.log('跳转到我的卡券页')
|
||||
if (!this.data.isLoggedIn) {
|
||||
this.goToLogin()
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/favorites/favorites'
|
||||
url: '/pages/coupons/coupons'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到设置页
|
||||
* 跳转到视频面签页
|
||||
*/
|
||||
goToSettings() {
|
||||
console.log('跳转到设置页')
|
||||
wx.navigateTo({
|
||||
url: '/pages/settings/settings'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到安全中心页
|
||||
*/
|
||||
goToSecurity() {
|
||||
console.log('跳转到安全中心页')
|
||||
goToVideoSign() {
|
||||
console.log('跳转到视频面签页')
|
||||
if (!this.data.isLoggedIn) {
|
||||
this.goToLogin()
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/security/security'
|
||||
url: '/pages/video-sign/video-sign'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到帮助中心页
|
||||
* 跳转到征信授权页
|
||||
*/
|
||||
goToHelp() {
|
||||
console.log('跳转到帮助中心页')
|
||||
goToCreditAuth() {
|
||||
console.log('跳转到征信授权页')
|
||||
if (!this.data.isLoggedIn) {
|
||||
this.goToLogin()
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/help/help'
|
||||
url: '/pages/credit-auth/credit-auth'
|
||||
})
|
||||
},
|
||||
|
||||
@@ -273,22 +222,12 @@ Page({
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到意见反馈页
|
||||
* 跳转到隐私协议页
|
||||
*/
|
||||
goToFeedback() {
|
||||
console.log('跳转到意见反馈页')
|
||||
goToPrivacyPolicy() {
|
||||
console.log('跳转到隐私协议页')
|
||||
wx.navigateTo({
|
||||
url: '/pages/feedback/feedback'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到关于我们页
|
||||
*/
|
||||
goToAbout() {
|
||||
console.log('跳转到关于我们页')
|
||||
wx.navigateTo({
|
||||
url: '/pages/about/about'
|
||||
url: '/pages/privacy/privacy'
|
||||
})
|
||||
},
|
||||
|
||||
@@ -313,15 +252,8 @@ Page({
|
||||
this.setData({
|
||||
isLoggedIn: false,
|
||||
userInfo: {
|
||||
nickname: '',
|
||||
phone: '',
|
||||
nickname: '养殖户1007',
|
||||
avatar: ''
|
||||
},
|
||||
stats: {
|
||||
policyCount: 0,
|
||||
applicationCount: 0,
|
||||
claimCount: 0,
|
||||
favoriteCount: 0
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -1,126 +1,94 @@
|
||||
<!--pages/my/my.wxml-->
|
||||
<view class="container">
|
||||
<!-- 页面头部 -->
|
||||
<view class="page-header">
|
||||
<text class="header-title">个人中心</text>
|
||||
<view class="header-actions">
|
||||
<view class="header-icon" bindtap="showMoreOptions">•••</view>
|
||||
<view class="header-icon" bindtap="minimizeApp">−</view>
|
||||
<view class="header-icon" bindtap="showSettings">⚙️</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户信息区域 -->
|
||||
<view class="user-section">
|
||||
<view class="user-info" bindtap="goToProfile">
|
||||
<view class="avatar">
|
||||
<image wx:if="{{userInfo.avatar}}" src="{{userInfo.avatar}}" class="avatar-img" />
|
||||
<text wx:else class="avatar-text">{{userInfo.nickname ? userInfo.nickname.charAt(0) : '未'}}</text>
|
||||
</view>
|
||||
<view class="user-details">
|
||||
<text class="username">{{userInfo.nickname || '未登录'}}</text>
|
||||
<text class="user-phone">{{userInfo.phone || '点击登录'}}</text>
|
||||
</view>
|
||||
<view class="arrow-icon">></view>
|
||||
<view class="avatar">
|
||||
<image wx:if="{{userInfo.avatar}}" src="{{userInfo.avatar}}" class="avatar-img" />
|
||||
<text wx:else class="avatar-text">👤</text>
|
||||
</view>
|
||||
|
||||
<!-- 登录状态 -->
|
||||
<view wx:if="{{!isLoggedIn}}" class="login-prompt">
|
||||
<button class="login-btn" bindtap="goToLogin">立即登录</button>
|
||||
<text class="username">{{userInfo.nickname || '养殖户1007'}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 我的服务 -->
|
||||
<view class="service-section">
|
||||
<view class="service-item" bindtap="goToPolicies">
|
||||
<view class="service-icon">📄</view>
|
||||
<text class="service-text">我的保单</text>
|
||||
<view class="service-arrow">></view>
|
||||
</view>
|
||||
<view class="service-item" bindtap="goToClaims">
|
||||
<view class="service-icon">💰</view>
|
||||
<text class="service-text">我的理赔</text>
|
||||
<view class="service-arrow">></view>
|
||||
</view>
|
||||
<view class="service-item" bindtap="goToCoupons">
|
||||
<view class="service-icon">🎟️</view>
|
||||
<text class="service-text">我的卡券</text>
|
||||
<view class="service-arrow">></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据统计 -->
|
||||
<view wx:if="{{isLoggedIn}}" class="stats-section">
|
||||
<view class="stats-grid">
|
||||
<view class="stat-item" bindtap="goToPolicies">
|
||||
<text class="stat-number">{{stats.policyCount}}</text>
|
||||
<text class="stat-label">我的保单</text>
|
||||
</view>
|
||||
<view class="stat-item" bindtap="goToApplications">
|
||||
<text class="stat-number">{{stats.applicationCount}}</text>
|
||||
<text class="stat-label">投保申请</text>
|
||||
</view>
|
||||
<view class="stat-item" bindtap="goToClaims">
|
||||
<text class="stat-number">{{stats.claimCount}}</text>
|
||||
<text class="stat-label">理赔申请</text>
|
||||
</view>
|
||||
<view class="stat-item" bindtap="goToFavorites">
|
||||
<text class="stat-number">{{stats.favoriteCount}}</text>
|
||||
<text class="stat-label">收藏产品</text>
|
||||
</view>
|
||||
<!-- 其他服务 -->
|
||||
<view class="other-services">
|
||||
<view class="other-item" bindtap="goToVideoVerification">
|
||||
<view class="other-icon">📹</view>
|
||||
<text class="other-text">视频面签</text>
|
||||
<text class="other-desc">远程视频面签</text>
|
||||
<view class="other-arrow">></view>
|
||||
</view>
|
||||
<view class="other-item" bindtap="goToCreditAuth">
|
||||
<view class="other-icon">📝</view>
|
||||
<text class="other-text">征信授权</text>
|
||||
<text class="other-desc">电子征信授权</text>
|
||||
<view class="other-arrow">></view>
|
||||
</view>
|
||||
<view class="other-item" bindtap="goToContactUs">
|
||||
<view class="other-icon">📞</view>
|
||||
<text class="other-text">联系我们</text>
|
||||
<text class="other-desc">联系处理渠道</text>
|
||||
<view class="other-arrow">></view>
|
||||
</view>
|
||||
<view class="other-item" bindtap="goToPrivacyPolicy">
|
||||
<view class="other-icon">🔒</view>
|
||||
<text class="other-text">隐私协议</text>
|
||||
<text class="other-desc">个人信息保护</text>
|
||||
<view class="other-arrow">></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<view class="menu-section">
|
||||
<!-- 我的服务 -->
|
||||
<view class="menu-group">
|
||||
<view class="group-title">我的服务</view>
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" bindtap="goToPolicies">
|
||||
<view class="menu-icon">📄</view>
|
||||
<text class="menu-text">我的保单</text>
|
||||
<view class="menu-badge" wx:if="{{stats.policyCount > 0}}">{{stats.policyCount}}</view>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="goToApplications">
|
||||
<view class="menu-icon">📝</view>
|
||||
<text class="menu-text">投保申请</text>
|
||||
<view class="menu-badge" wx:if="{{stats.applicationCount > 0}}">{{stats.applicationCount}}</view>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="goToClaims">
|
||||
<view class="menu-icon">💰</view>
|
||||
<text class="menu-text">理赔申请</text>
|
||||
<view class="menu-badge" wx:if="{{stats.claimCount > 0}}">{{stats.claimCount}}</view>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="goToFavorites">
|
||||
<view class="menu-icon">❤️</view>
|
||||
<text class="menu-text">收藏产品</text>
|
||||
<view class="menu-badge" wx:if="{{stats.favoriteCount > 0}}">{{stats.favoriteCount}}</view>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
<!-- 帮助支持 -->
|
||||
<view class="menu-group">
|
||||
<view class="group-title">帮助支持</view>
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" bindtap="goToHelp">
|
||||
<view class="menu-icon">❓</view>
|
||||
<text class="menu-text">帮助中心</text>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 账户管理 -->
|
||||
<view class="menu-group">
|
||||
<view class="group-title">账户管理</view>
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" bindtap="goToProfile">
|
||||
<view class="menu-icon">👤</view>
|
||||
<text class="menu-text">个人资料</text>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="goToSettings">
|
||||
<view class="menu-icon">⚙️</view>
|
||||
<text class="menu-text">设置</text>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="goToSecurity">
|
||||
<view class="menu-icon">🔒</view>
|
||||
<text class="menu-text">安全中心</text>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="goToContact">
|
||||
<view class="menu-icon">📞</view>
|
||||
<text class="menu-text">联系客服</text>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 帮助支持 -->
|
||||
<view class="menu-group">
|
||||
<view class="group-title">帮助支持</view>
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" bindtap="goToHelp">
|
||||
<view class="menu-icon">❓</view>
|
||||
<text class="menu-text">帮助中心</text>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="goToContact">
|
||||
<view class="menu-icon">📞</view>
|
||||
<text class="menu-text">联系客服</text>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="goToFeedback">
|
||||
<view class="menu-icon">💬</view>
|
||||
<text class="menu-text">意见反馈</text>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="goToAbout">
|
||||
<view class="menu-icon">ℹ️</view>
|
||||
<text class="menu-text">关于我们</text>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="goToFeedback">
|
||||
<view class="menu-icon">💬</view>
|
||||
<text class="menu-text">意见反馈</text>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
<view class="menu-item" bindtap="goToAbout">
|
||||
<view class="menu-icon">ℹ️</view>
|
||||
<text class="menu-text">关于我们</text>
|
||||
<view class="menu-arrow">></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,219 +1,181 @@
|
||||
/* pages/my/my.wxss */
|
||||
|
||||
/* 容器样式 */
|
||||
.container {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 80rpx;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 30rpx;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
border-radius: 50%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 用户信息区域 */
|
||||
.user-section {
|
||||
background: linear-gradient(135deg, #1890ff, #40a9ff);
|
||||
padding: 40rpx 30rpx 60rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
|
||||
padding: 60rpx 40rpx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 30rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
font-size: 64rpx;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
color: #333;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.user-phone {
|
||||
.logout-btn {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.8;
|
||||
display: block;
|
||||
color: #1890ff;
|
||||
border: 1rpx solid #1890ff;
|
||||
border-radius: 40rpx;
|
||||
padding: 8rpx 40rpx;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 32rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.login-prompt {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
padding: 20rpx 60rpx;
|
||||
}
|
||||
|
||||
/* 数据统计 */
|
||||
.stats-section {
|
||||
background: white;
|
||||
margin: -30rpx 30rpx 20rpx;
|
||||
border-radius: 12rpx;
|
||||
/* 我的服务 */
|
||||
.service-section {
|
||||
background-color: #fff;
|
||||
margin: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
.service-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
.service-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 15rpx;
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #1890ff;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
.service-item:nth-child(1) .service-icon {
|
||||
background-color: #fff3cd;
|
||||
}
|
||||
|
||||
/* 功能菜单 */
|
||||
.menu-section {
|
||||
padding: 0 30rpx;
|
||||
.service-item:nth-child(2) .service-icon {
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
|
||||
.menu-group {
|
||||
margin-bottom: 30rpx;
|
||||
.service-item:nth-child(3) .service-icon {
|
||||
background-color: #f3e5f5;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
.service-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 10rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
background: white;
|
||||
border-radius: 12rpx;
|
||||
/* 其他服务 */
|
||||
.other-services {
|
||||
background-color: #fff;
|
||||
margin: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
.other-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
.other-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
.other-icon {
|
||||
font-size: 40rpx;
|
||||
margin-right: 30rpx;
|
||||
width: 50rpx;
|
||||
width: 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
flex: 1;
|
||||
.other-text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.menu-badge {
|
||||
background: #ff4d4f;
|
||||
color: white;
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
min-width: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
.other-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.other-arrow {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 退出登录 */
|
||||
.logout-section {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background: #ff4d4f;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12rpx;
|
||||
font-size: 30rpx;
|
||||
padding: 25rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logout-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 750rpx) {
|
||||
.stats-grid {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
width: 50%;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.menu-item {
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.stat-item:active {
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.2s;
|
||||
margin-left: auto;
|
||||
}
|
||||
@@ -342,5 +342,19 @@ Page({
|
||||
wx.navigateTo({
|
||||
url: `/pages/product-detail/product-detail?id=${productId}`
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 直接跳转到投保页面
|
||||
*/
|
||||
goToApplication(e) {
|
||||
// 阻止事件冒泡，避免触发产品项的点击事件
|
||||
e.stopPropagation()
|
||||
|
||||
const productId = e.currentTarget.dataset.id
|
||||
console.log('直接跳转到投保页面:', productId)
|
||||
wx.navigateTo({
|
||||
url: `/pages/application/application?productId=${productId}`
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -96,8 +96,8 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="product-actions">
|
||||
<button class="btn-apply" size="mini" type="primary">立即投保</button>
|
||||
</view>
|
||||
<button class="btn-apply" size="mini" type="primary" bindtap="goToApplication" data-id="{{item.id}}">立即投保</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
<text class="price-value">¥{{item.min_premium}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="btn-apply" size="mini" type="primary">立即投保</button>
|
||||
<button class="btn-apply" size="mini" type="primary" bindtap="goToApplication" data-id="{{item.id}}">立即投保</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -12,7 +12,16 @@
|
||||
"outputPath": ""
|
||||
},
|
||||
"useCompilerPlugins": false,
|
||||
"minifyWXML": true
|
||||
"minifyWXML": true,
|
||||
"compileWorklet": false,
|
||||
"uploadWithSourceMap": true,
|
||||
"packNpmManually": false,
|
||||
"minifyWXSS": true,
|
||||
"localPlugins": false,
|
||||
"disableUseStrict": false,
|
||||
"condition": false,
|
||||
"swc": false,
|
||||
"disableSWC": true
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"simulatorPluginLibVersion": {},
|
||||
@@ -21,5 +30,6 @@
|
||||
"include": []
|
||||
},
|
||||
"appid": "wx363d2520963f1853",
|
||||
"editorSetting": {}
|
||||
"editorSetting": {},
|
||||
"libVersion": "3.10.0"
|
||||
}
|
||||
@@ -9,6 +9,14 @@
|
||||
"preloadBackgroundData": false,
|
||||
"autoAudits": false,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"compileHotReLoad": true
|
||||
"compileHotReLoad": true,
|
||||
"useApiHook": true,
|
||||
"useApiHostProcess": true,
|
||||
"useStaticServer": false,
|
||||
"useLanDebug": false,
|
||||
"showES6CompileOption": false,
|
||||
"checkInvalidKey": true,
|
||||
"ignoreDevUnusedFiles": true,
|
||||
"bigPackageSizeSupport": false
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user