feat: 搭建微信小程序展示端
- 初始化小程序工程配置与类型声明 - 增加首页、律所、律师列表、详情与历史页面 - 补充公共组件、运行时配置与示例素材
This commit is contained in:
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"enableShareAppMessage": true,
|
||||
"usingComponents": {
|
||||
"app-header": "/components/app-header/app-header",
|
||||
"action-dock": "/components/action-dock/action-dock",
|
||||
"empty-state": "/components/empty-state/empty-state"
|
||||
}
|
||||
}
|
||||
245
frontend_miniprogram/miniprogram/pages/lawyer-detail/index.less
Normal file
245
frontend_miniprogram/miniprogram/pages/lawyer-detail/index.less
Normal file
@@ -0,0 +1,245 @@
|
||||
.detail-page {
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
.detail-bg {
|
||||
height: 300rpx;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
border-radius: 0 0 40rpx 40rpx;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 160rpx var(--spacing-md) 0;
|
||||
background: #fff;
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-base);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #fff;
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-top: -60rpx;
|
||||
/* Overlap effect */
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
margin-left: var(--spacing-md);
|
||||
padding-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.name-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
color: var(--primary-color);
|
||||
background: rgba(142, 34, 48, 0.08);
|
||||
/* Primary opacity */
|
||||
padding: 2rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.firm-name {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-tertiary);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.qr-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.qr-icon-text {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.qr-btn text {
|
||||
font-size: 20rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.content-body {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #fff;
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
position: relative;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
.section-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6rpx;
|
||||
bottom: 6rpx;
|
||||
width: 6rpx;
|
||||
background: var(--accent-color);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
width: 80rpx;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
flex: 1;
|
||||
color: var(--text-main);
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 60rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background: var(--bg-page);
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
.tags-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 24rpx;
|
||||
color: var(--primary-color);
|
||||
background: rgba(142, 34, 48, 0.05);
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.bio-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
text-align: justify;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.bio-scroll {
|
||||
height: 360rpx;
|
||||
box-sizing: border-box;
|
||||
padding-right: 8rpx;
|
||||
}
|
||||
|
||||
.firm-mini-card {
|
||||
background: #fff;
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.firm-logo-mini-placeholder {
|
||||
height: 60rpx;
|
||||
width: 140rpx;
|
||||
background: var(--bg-surface);
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mini-logo-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
.firm-mini-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.firm-mini-name {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-main);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.firm-mini-address {
|
||||
font-size: 22rpx;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: var(--text-placeholder);
|
||||
}
|
||||
|
||||
.detail-bottom-space {
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.not-found-action {
|
||||
padding: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
188
frontend_miniprogram/miniprogram/pages/lawyer-detail/index.ts
Normal file
188
frontend_miniprogram/miniprogram/pages/lawyer-detail/index.ts
Normal file
@@ -0,0 +1,188 @@
|
||||
import { getLawyerDetail, recordCardShare } from '../../api/open';
|
||||
import type { FirmInfo } from '../../types/card';
|
||||
import type { Lawyer } from '../../types/card';
|
||||
import { appendCardViewRecord } from '../../utils/history';
|
||||
|
||||
function createEmptyFirm(): FirmInfo {
|
||||
return {
|
||||
id: '',
|
||||
name: '',
|
||||
logo: '',
|
||||
intro: '',
|
||||
hotlinePhone: '',
|
||||
hqAddress: '',
|
||||
hqLatitude: 0,
|
||||
hqLongitude: 0,
|
||||
officeCount: 0,
|
||||
lawyerCount: 0,
|
||||
heroImage: '',
|
||||
officeList: [],
|
||||
practiceAreas: [],
|
||||
};
|
||||
}
|
||||
|
||||
function buildDetailBgStyle(coverImage?: string): string {
|
||||
const cover = typeof coverImage === 'string' ? coverImage.trim() : '';
|
||||
if (!cover) {
|
||||
return '';
|
||||
}
|
||||
return `background-image: url("${cover}"); background-size: cover; background-position: center;`;
|
||||
}
|
||||
|
||||
function shouldUseBioScroll(bio?: string): boolean {
|
||||
const text = typeof bio === 'string' ? bio.trim() : '';
|
||||
return text.length > 180;
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
firm: createEmptyFirm(),
|
||||
lawyer: null as Lawyer | null,
|
||||
notFound: false,
|
||||
specialtiesText: '',
|
||||
detailBgStyle: '',
|
||||
bioScrollable: false,
|
||||
loading: false,
|
||||
},
|
||||
|
||||
async onLoad(options: Record<string, string | undefined>) {
|
||||
const lawyerId = typeof options.id === 'string' ? options.id : '';
|
||||
const sourceType = typeof options.sourceType === 'string' ? options.sourceType : 'DIRECT';
|
||||
const shareFromCardId = typeof options.shareFromCardId === 'string' ? options.shareFromCardId : '';
|
||||
|
||||
if (!lawyerId) {
|
||||
this.setData({ notFound: true, specialtiesText: '', detailBgStyle: '', bioScrollable: false });
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({ loading: true });
|
||||
try {
|
||||
const payload = await getLawyerDetail(lawyerId, sourceType, shareFromCardId);
|
||||
this.setData({
|
||||
firm: payload.firm,
|
||||
lawyer: payload.lawyer,
|
||||
notFound: false,
|
||||
specialtiesText: payload.lawyer.specialties.join('；'),
|
||||
detailBgStyle: buildDetailBgStyle(payload.lawyer.coverImage),
|
||||
bioScrollable: shouldUseBioScroll(payload.lawyer.bio),
|
||||
});
|
||||
appendCardViewRecord(payload.lawyer);
|
||||
wx.showShareMenu({ menus: ['shareAppMessage'] });
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : '律师信息不存在';
|
||||
this.setData({ notFound: true, specialtiesText: '', detailBgStyle: '', bioScrollable: false });
|
||||
wx.showToast({
|
||||
title: message,
|
||||
icon: 'none',
|
||||
});
|
||||
} finally {
|
||||
this.setData({ loading: false });
|
||||
}
|
||||
},
|
||||
|
||||
handleDockAction(event: WechatMiniprogram.CustomEvent<{ action: string }>) {
|
||||
const action = event.detail.action;
|
||||
switch (action) {
|
||||
case 'save':
|
||||
this.saveContact();
|
||||
break;
|
||||
case 'location':
|
||||
this.navigateOffice();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
saveContact() {
|
||||
const lawyer = this.data.lawyer;
|
||||
if (!lawyer) {
|
||||
return;
|
||||
}
|
||||
|
||||
wx.addPhoneContact({
|
||||
firstName: lawyer.name,
|
||||
mobilePhoneNumber: lawyer.phone,
|
||||
email: lawyer.email,
|
||||
organization: this.data.firm.name,
|
||||
title: lawyer.title,
|
||||
workAddressStreet: lawyer.address,
|
||||
remark: lawyer.specialties.join('、'),
|
||||
success: () => {
|
||||
wx.showToast({ title: '已添加到通讯录', icon: 'success' });
|
||||
},
|
||||
fail: () => {
|
||||
wx.showToast({ title: '添加失败', icon: 'none' });
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
callPhone() {
|
||||
const phone = this.data.lawyer ? this.data.lawyer.phone : '';
|
||||
if (!phone) {
|
||||
wx.showToast({ title: '暂无联系电话', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
wx.makePhoneCall({
|
||||
phoneNumber: phone,
|
||||
fail: () => {
|
||||
wx.showToast({ title: '拨号失败', icon: 'none' });
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
navigateOffice() {
|
||||
if (!this.data.firm.hqLatitude || !this.data.firm.hqLongitude) {
|
||||
wx.showToast({ title: '暂未配置地图位置', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
wx.openLocation({
|
||||
latitude: this.data.firm.hqLatitude,
|
||||
longitude: this.data.firm.hqLongitude,
|
||||
name: this.data.firm.name,
|
||||
address: this.data.firm.hqAddress,
|
||||
scale: 18,
|
||||
fail: () => {
|
||||
wx.showToast({ title: '打开地图失败', icon: 'none' });
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
previewWechatQr() {
|
||||
const url = this.data.lawyer ? this.data.lawyer.wechatQrImage : '';
|
||||
if (!url) {
|
||||
wx.showToast({ title: '二维码未配置', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
wx.previewImage({
|
||||
current: url,
|
||||
urls: [url],
|
||||
});
|
||||
},
|
||||
|
||||
goLawyerList() {
|
||||
wx.navigateTo({ url: '/pages/lawyer-list/index' });
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
const lawyer = this.data.lawyer;
|
||||
if (!lawyer) {
|
||||
return {
|
||||
title: `${this.data.firm.name || '电子名片'}电子名片`,
|
||||
path: '/pages/firm/index',
|
||||
};
|
||||
}
|
||||
|
||||
const sharePath = `/pages/lawyer-detail/index?id=${lawyer.id}&sourceType=SHARE&shareFromCardId=${lawyer.id}`;
|
||||
recordCardShare(lawyer.id, sharePath).catch(() => {
|
||||
// 分享埋点失败不阻断分享动作
|
||||
});
|
||||
|
||||
return {
|
||||
title: `${lawyer.name}律师电子名片`,
|
||||
path: sharePath,
|
||||
imageUrl: lawyer.avatar,
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
<view class="container-page detail-page">
|
||||
<app-header title="名片详情" back="{{true}}" background="transparent"></app-header>
|
||||
|
||||
<block wx:if="{{notFound}}">
|
||||
<view class="page-content">
|
||||
<empty-state text="未找到律师信息"></empty-state>
|
||||
<view class="not-found-action">
|
||||
<button class="back-btn" bindtap="goLawyerList">返回律师列表</button>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:else>
|
||||
<scroll-view class="page-content" scroll-y="true" type="list">
|
||||
<!-- Top Background -->
|
||||
<view class="detail-bg" style="{{detailBgStyle}}"></view>
|
||||
|
||||
<!-- Profile Card (Overlapping) -->
|
||||
<view class="profile-card">
|
||||
<image class="avatar" src="{{lawyer.avatar}}" mode="aspectFill"></image>
|
||||
<view class="profile-info">
|
||||
<view class="name-row">
|
||||
<text class="name">{{lawyer.name}}</text>
|
||||
<text class="title">{{lawyer.title}}</text>
|
||||
</view>
|
||||
<text class="firm-name">{{firm.name}} | {{lawyer.office}}</text>
|
||||
</view>
|
||||
<view class="qr-btn" bindtap="previewWechatQr">
|
||||
<!-- Replaced icon with text for simplicity if icon missing -->
|
||||
<text class="qr-icon-text">⚲</text>
|
||||
<text>二维码</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Content Sections -->
|
||||
<view class="content-body">
|
||||
|
||||
<!-- Contact Section -->
|
||||
<view class="section-card">
|
||||
<view class="section-header">联系方式</view>
|
||||
<view class="contact-item" bindtap="callPhone">
|
||||
<text class="contact-label">电话</text>
|
||||
<text class="contact-value">{{lawyer.phone}}</text>
|
||||
<view class="action-icon phone">📞</view>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="contact-item">
|
||||
<text class="contact-label">邮箱</text>
|
||||
<text class="contact-value">{{lawyer.email}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Practise Areas -->
|
||||
<view class="section-card">
|
||||
<view class="section-header">执业领域</view>
|
||||
<view class="tags-row">
|
||||
<text class="tag" wx:for="{{lawyer.specialties}}" wx:key="*this">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Bio -->
|
||||
<view class="section-card">
|
||||
<view class="section-header">个人简介</view>
|
||||
<scroll-view wx:if="{{bioScrollable}}" class="bio-scroll" scroll-y="true" show-scrollbar="true">
|
||||
<view class="bio-text">{{lawyer.bio}}</view>
|
||||
</scroll-view>
|
||||
<view wx:else class="bio-text">{{lawyer.bio}}</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="detail-bottom-space"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- Fixed Action Dock -->
|
||||
<action-dock bind:action="handleDockAction"></action-dock>
|
||||
</block>
|
||||
</view>
|
||||
Reference in New Issue
Block a user