From f226d5fe6327e31bb471a96b7370cf94689c6608 Mon Sep 17 00:00:00 2001
From: quanwei <419654421@qq.com>
Date: Fri, 31 Oct 2025 16:54:48 +0800
Subject: [PATCH] 名片设置 名片置顶 名片分享
---
mobile/pages/plus/business/detail.vue | 845 ++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 543 insertions(+), 302 deletions(-)
diff --git a/mobile/pages/plus/business/detail.vue b/mobile/pages/plus/business/detail.vue
index f0dbb02..1accef6 100644
--- a/mobile/pages/plus/business/detail.vue
+++ b/mobile/pages/plus/business/detail.vue
@@ -1,112 +1,85 @@
<template>
<view>
- <header-bar title="名片详情" :isBack="true" @click="back"></header-bar>
<scroll-view scroll-y="true" class="scroll-view">
<view class="card-container" v-if="businessInfo">
- <!-- 名片头部 -->
- <view class="card-header" :style="{backgroundColor: backgroundColor}">
- <image v-if="businessInfo.background_image" class="card-bg" :src="businessInfo.background_image" mode="aspectFill"></image>
- <view class="header-content">
- <image class="avatar" :src="businessInfo.avatar || '/static/default.png'" mode="aspectFill"></image>
- <view class="user-info">
- <view class="name">{{businessInfo.real_name}}</view>
- <view class="company">{{businessInfo.company_name}}</view>
- <view class="position">{{businessInfo.position}}</view>
- </view>
+ <!-- 名片主体 -->
+ <view class="business-card" @click="viewCard">
+ <image class="card-image" :src="businessInfo.mp" mode="widthFix"></image>
+ </view>
+
+ <!-- 操作按钮区域 -->
+ <view class="action-buttons">
+ <view class="action-btn" @click="makePhoneCall(businessInfo.mobile)">
+ <text class="btn-icon">📞</text>
+ <text class="btn-text">拨打电话</text>
+ </view>
+ <view class="action-btn" @click="shareToWechat">
+ <text class="btn-icon">💬</text>
+ <text class="btn-text">分享微信</text>
+ </view>
+ <view class="action-btn" @click="openLocation(businessInfo)">
+ <text class="btn-icon">📍</text>
+ <text class="btn-text">导航地址</text>
+ </view>
+ <button open-type="share" class="action-btn">
+ <text class="btn-icon">➤</text>
+ <text class="btn-text">分享名片</text>
+ </button>
+ </view>
+
+ <!-- 名片简介 -->
+ <view class="card-intro" v-if="businessInfo.Introduction || businessInfo.business_scope">
+ <view v-if="businessInfo.Introduction" class="intro-item">
+ <view class="intro-title">个人简介</view>
+ <view class="intro-content">{{businessInfo.Introduction}}</view>
+ </view>
+ <view v-if="businessInfo.business_scope" class="intro-item">
+ <view class="intro-title">业务范围</view>
+ <view class="intro-content">{{businessInfo.business_scope}}</view>
</view>
</view>
- <!-- 公司Logo -->
- <view class="logo-section" v-if="businessInfo.logo_image">
- <image class="logo" :src="businessInfo.logo_image.file_path" mode="aspectFit"></image>
- </view>
-
- <!-- 联系信息 -->
- <view class="contact-section">
- <view class="section-title">联系方式</view>
-
- <view class="contact-item" @click="makePhoneCall(businessInfo.phone)">
- <view class="item-left">
- <view class="icon-circle">
- <text class="icon iconfont icon-phone"></text>
- </view>
- <text class="item-label">电话</text>
- </view>
- <view class="item-right">
- <text class="item-value">{{businessInfo.phone}}</text>
- <text class="icon iconfont icon-jiantou"></text>
- </view>
+ <!-- 数字资产卡片 -->
+ <view class="asset-cards">
+ <view class="asset-card" @click="goToPlatform">
+ <image class="asset-img" :src="background.digital_asset_1" mode="aspectFill"></image>
</view>
-
- <view class="contact-item" v-if="businessInfo.mobile" @click="makePhoneCall(businessInfo.mobile)">
- <view class="item-left">
- <view class="icon-circle">
- <text class="icon iconfont icon-mobile"></text>
- </view>
- <text class="item-label">手机</text>
- </view>
- <view class="item-right">
- <text class="item-value">{{businessInfo.mobile}}</text>
- <text class="icon iconfont icon-jiantou"></text>
- </view>
- </view>
-
- <view class="contact-item" v-if="businessInfo.email" @click="copyEmail(businessInfo.email)">
- <view class="item-left">
- <view class="icon-circle">
- <text class="icon iconfont icon-email"></text>
- </view>
- <text class="item-label">邮箱</text>
- </view>
- <view class="item-right">
- <text class="item-value">{{businessInfo.email}}</text>
- <text class="icon iconfont icon-jiantou"></text>
- </view>
- </view>
-
- <view class="contact-item" v-if="businessInfo.address" @click="openLocation(businessInfo.address)">
- <view class="item-left">
- <view class="icon-circle">
- <text class="icon iconfont icon-location"></text>
- </view>
- <text class="item-label">地址</text>
- </view>
- <view class="item-right">
- <text class="item-value">{{businessInfo.address}}</text>
- <text class="icon iconfont icon-jiantou"></text>
- </view>
+ <view class="asset-card" @click="goToShop">
+ <image class="asset-img" :src="background.digital_asset_2" mode="aspectFill"></image>
</view>
</view>
- <!-- 详细信息 -->
- <view class="detail-section">
- <view class="section-title">详细信息</view>
-
- <view class="detail-item" v-if="businessInfo.intro">
- <view class="detail-label">个人简介</view>
- <view class="detail-content">{{businessInfo.intro}}</view>
- </view>
-
- <view class="detail-item" v-if="businessInfo.business_scope">
- <view class="detail-label">业务范围</view>
- <view class="detail-content">{{businessInfo.business_scope}}</view>
- </view>
- </view>
- </view>
-
- <!-- 底部操作按钮 -->
- <view class="action-section">
- <view class="action-left">
- <view class="action-btn" @click="saveCard" :class="{active: isSaved}">
- <text class="icon iconfont" :class="isSaved ? 'icon-success' : 'icon-star'"></text>
- <text>{{isSaved ? '已保存' : '收藏'}}</text>
- </view>
- </view>
- <view class="action-right">
- <view class="share-btn" @click="shareCard">分享名片</view>
- </view>
+ <!-- 底部间距 -->
+ <view class="bottom-space"></view>
</view>
</scroll-view>
+
+ <!-- 底部固定按钮 -->
+ <view class="bottom-btn-section">
+ <button class="create-card-btn" @click="createNewCard">新建我的数字名片</button>
+ <button class="create-card-btn desensitization" @click="buyCard"
+ v-if="businessInfo.posterType === 'desensitization' && !businessInfo.has_purchased">查看联系方式</button>
+ </view>
+
+ <!-- 支付弹窗 -->
+ <view class="payment-modal" v-if="showPayment">
+ <view class="modal-content">
+ <view class="modal-header">
+ <text class="title">查看联系方式确认</text>
+ <text class="close" @tap="closePaymentModal">×</text>
+ </view>
+ <view class="payment-info">
+ <text class="name">{{ businessInfo.name }}</text>
+ <text class="position"
+ v-if="businessInfo.duties && businessInfo.duties.length > 0">{{ businessInfo.duties[0] }}</text>
+ <text class="price">￥{{ businessInfo.grade.price }}</text>
+ </view>
+ <view class="modal-footer">
+ <view class="cancel-btn" @tap="closePaymentModal">取消</view>
+ <view class="confirm-btn" @tap="confirmPayment">确认</view>
+ </view>
+ </view>
+ </view>
</view>
</template>
@@ -116,90 +89,139 @@
return {
businessInfo: null,
business_card_id: '',
- isSaved: false,
- backgroundColor: '#37bde6',
- loading: true
+ loading: true,
+ // 支付相关
+ showPayment: false,
+ selectedGrade: {},
+ paymentMethod: 'balance',
+ background: {}
};
},
onLoad(options) {
if (options.business_card_id) {
this.business_card_id = options.business_card_id;
this.getBusinessDetail();
- this.checkSavedStatus();
// 记录访问日志
this.recordVisit();
}
+ this.getSettingBackground()
},
methods: {
back() {
uni.navigateBack();
},
+ viewCard() {
+ let _this = this
+ // 预览图片
+ uni.previewImage({
+ urls: [_this.businessInfo.mp],
+ complete: function(res) {
+ console.log(res);
+ }
+ })
+ },
+ getSettingBackground() {
+ let _this = this;
+ _this._post('plus.business.setting/getBackground', {}, function(res) {
+ _this.background = res.data
+ })
+ },
// 获取名片详情
getBusinessDetail() {
let _this = this;
_this.loading = true;
- _this._post('plus.business/business/detail', { business_card_id: _this.business_card_id }, function(res) {
+ _this._post('plus.business.business/detail', {
+ business_card_id: _this.business_card_id
+ }, function(res) {
_this.businessInfo = res.data;
- // 设置背景色
- if (_this.businessInfo.template && _this.businessInfo.template.style?.background?.color) {
- _this.backgroundColor = _this.businessInfo.template.style.background.color;
- }
_this.loading = false;
- });
- },
- // 检查是否已保存
- checkSavedStatus() {
- let _this = this;
- _this._post('plus.business/saving/check', { business_card_id: _this.business_card_id }, function(res) {
- _this.isSaved = res.data.is_saved;
+ // 设置默认选中的等级
+ if (_this.businessInfo.grade && _this.businessInfo.grade.length > 0) {
+ _this.selectedGrade = _this.businessInfo.grade;
+ }
});
},
// 记录访问
recordVisit() {
let _this = this;
const params = {
- business_card_id: _this.business_card_id
+ business_card_id: _this.business_card_id,
+ type: 10
};
- // 如果有推荐人ID，也记录下来
- if (this.$route.query.referee_id) {
- params.referee_id = this.$route.query.referee_id;
- }
- _this._post('plus.business/business/recordVisit', params, function() {
+ _this._post('plus.business.saving/add', params, function() {
// 无需处理返回结果
});
},
// 拨打电话
makePhoneCall(phone) {
+ if (!phone) {
+ this.showError('暂无联系电话');
+ return;
+ }
uni.makePhoneCall({
phoneNumber: phone
});
},
- // 复制邮箱
- copyEmail(email) {
- uni.setClipboardData({
- data: email,
- success: () => {
- this.showSuccess('邮箱已复制');
- }
- });
+ // 分享到微信
+ shareToWechat() {
+ // 实现分享到微信的逻辑
+ if (this.businessInfo && this.businessInfo.wechat) {
+ uni.setClipboardData({
+ data: this.businessInfo.wechat,
+ success: () => {
+ this.showSuccess('微信号已复制');
+ }
+ });
+ } else {
+ this.showError('暂未填写微信');
+ }
},
// 打开地图
- openLocation(address) {
- // 这里简化处理，实际项目中可能需要调用地图API进行地理编码
- uni.openLocation({
- latitude: 0,
- longitude: 0,
- name: address,
- address: address,
- scale: 18
- });
- },
- // 保存名片
- saveCard() {
- let _this = this;
- _this._post('plus.business/saving/save', { business_card_id: _this.business_card_id }, function(res) {
- _this.isSaved = !_this.isSaved;
- _this.showSuccess(_this.isSaved ? '保存成功' : '取消保存');
+ openLocation(businessInfo) {
+ let address = businessInfo.region.province + ' ' + businessInfo.region.city + ' ' + businessInfo.region
+ .region + ' ' + businessInfo.address
+ if (!address) {
+ this.showError('暂无地址信息');
+ return;
+ }
+
+ // 使用腾讯地图API进行地理编码
+ const apiKey = 'LS7BZ-NHSWK-CWOJQ-AJC7Y-H5HE2-UGBWR';
+ const url = `https://apis.map.qq.com/ws/geocoder/v1/?address=${encodeURIComponent(address)}&key=${apiKey}`;
+
+ uni.request({
+ url: url,
+ success: (res) => {
+ if (res.data.status === 0 && res.data.result) {
+ const location = res.data.result.location;
+ uni.openLocation({
+ latitude: location.lat,
+ longitude: location.lng,
+ name: address,
+ address: address,
+ scale: 18
+ });
+ } else {
+ // 地理编码失败，使用默认方式
+ uni.openLocation({
+ latitude: 0,
+ longitude: 0,
+ name: address,
+ address: address,
+ scale: 18
+ });
+ }
+ },
+ fail: () => {
+ // 请求失败，使用默认方式
+ uni.openLocation({
+ latitude: 0,
+ longitude: 0,
+ name: address,
+ address: address,
+ scale: 18
+ });
+ }
});
},
// 分享名片
@@ -208,12 +230,78 @@
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
});
+ },
+ // 跳转到平台
+ goToPlatform() {
+ uni.navigateTo({
+ url: '/pages/shop/shop?shop_supplier_id=1'
+ });
+ },
+ // 跳转到店铺
+ goToShop() {
+ let _this = this;
+ _this._post('store.store/getUserStore', {
+ user_id: _this.businessInfo.user_id
+ }, function(res) {
+ if (res.data.list) {
+ uni.navigateTo({
+ url: '/pages/shop/shop?shop_supplier_id=' + res.data.list.shop_supplier_id
+ });
+ } else {
+ _this.showError('该用户暂无店铺')
+ }
+ /* uni.navigateTo({
+ url: '/pages/shop/shop?shop_supplier_id=1'
+ }); */
+ });
+ },
+ // 新建数字名片
+ createNewCard() {
+ uni.navigateTo({
+ url: '/pages/plus/business/add'
+ });
+ },
+ // 购买名片
+ buyCard() {
+ // 显示支付弹窗
+ this.showPayment = true;
+ },
+ // 关闭支付弹窗
+ closePaymentModal() {
+ this.showPayment = false;
+ },
+ // 选择支付方式
+ selectPaymentMethod(method) {
+ this.paymentMethod = method;
+ },
+ // 确认支付
+ confirmPayment() {
+ let payType = this.paymentMethod === 'balance' ? 10 : 20;
+ let params = {
+ business_card_id: this.business_card_id,
+ grade_id: this.businessInfo.grade.grade_id,
+ order_source: 10, // 查看名片
+ pay_type: payType
+ };
+
+ this._post('plus.business.order/create', params, (res) => {
+ if (res.code === 1) {
+ // 跳转到收银台支付
+ uni.redirectTo({
+ url: '/pages/order/cashier?order_id=' + res.data.order_id + '&order_type=100'
+ });
+ } else {
+ this.showError(res.msg || '支付失败');
+ }
+ }, (err) => {
+ this.showError('支付失败，请重试');
+ });
}
},
onShareAppMessage() {
if (this.businessInfo) {
return {
- title: `${this.businessInfo.real_name}的电子名片`,
+ title: `${this.businessInfo.name}的电子名片`,
path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.getUserId()}`
};
}
@@ -225,7 +313,7 @@
onShareTimeline() {
if (this.businessInfo) {
return {
- title: `${this.businessInfo.real_name}的电子名片`,
+ title: `${this.businessInfo.name}的电子名片`,
path: `/pages/plus/business/detail?business_card_id=${this.business_card_id}&referee_id=${this.getUserId()}`
};
}
@@ -242,206 +330,359 @@
height: calc(100vh - 80rpx);
}
- .card-header {
- position: relative;
- color: #fff;
- padding: 40rpx;
+ .card-container {
+ padding: 0 30rpx;
+ }
- .card-bg {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 1;
+ // 名片主体样式
+ .card-image {
+ width: 100%;
+ }
+
+ .card-header {
+ display: flex;
+ align-items: center;
+
+ .avatar {
+ width: 140rpx;
+ height: 140rpx;
+ border-radius: 50%;
+ border: 6rpx solid rgba(255, 255, 255, 0.8);
+ background: #fff;
+ }
+
+ .user-info {
+ margin-left: 30rpx;
+
+ .name {
+ font-size: 48rpx;
+ font-weight: bold;
+ margin-bottom: 8rpx;
+ }
+
+ .position {
+ font-size: 32rpx;
+ opacity: 0.9;
+ }
+ }
+ }
+
+ .company-info {
+ margin-top: 30rpx;
+
+ .company-name {
+ font-size: 34rpx;
opacity: 0.9;
}
-
- .header-content {
- position: relative;
- z-index: 2;
- display: flex;
- align-items: center;
-
- .avatar {
- width: 180rpx;
- height: 180rpx;
- border-radius: 50%;
- border: 6rpx solid rgba(255, 255, 255, 0.8);
- background: #fff;
- }
-
- .user-info {
- margin-left: 30rpx;
-
- .name {
- font-size: 48rpx;
- font-weight: bold;
- margin-bottom: 12rpx;
- }
-
- .company {
- font-size: 34rpx;
- margin-bottom: 8rpx;
- opacity: 0.9;
- }
-
- .position {
- font-size: 30rpx;
- opacity: 0.8;
- }
- }
- }
}
- .logo-section {
- background: #fff;
- padding: 30rpx 0;
- display: flex;
- justify-content: center;
-
- .logo {
- width: 150rpx;
- height: 150rpx;
- border-radius: 10rpx;
- }
- }
-
- .contact-section,
- .detail-section {
- background: #fff;
- margin-top: 20rpx;
- padding: 30rpx;
-
- .section-title {
- font-size: 32rpx;
- font-weight: bold;
- color: #333;
- margin-bottom: 20rpx;
- padding-bottom: 20rpx;
- border-bottom: 1rpx solid #f0f0f0;
- }
+ .contact-info {
+ margin-top: 30rpx;
.contact-item {
display: flex;
- justify-content: space-between;
align-items: center;
- padding: 25rpx 0;
- border-bottom: 1rpx solid #f0f0f0;
+ margin-bottom: 16rpx;
- &:last-child {
- border-bottom: none;
+ .contact-label {
+ font-size: 30rpx;
+ margin-right: 16rpx;
}
- .item-left {
- display: flex;
- align-items: center;
-
- .icon-circle {
- width: 60rpx;
- height: 60rpx;
- border-radius: 50%;
- background: #f5f5f5;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 20rpx;
-
- .icon {
- font-size: 36rpx;
- color: #37bde6;
- }
- }
-
- .item-label {
- font-size: 30rpx;
- color: #666;
- }
- }
-
- .item-right {
- display: flex;
- align-items: center;
-
- .item-value {
- font-size: 30rpx;
- color: #333;
- margin-right: 10rpx;
- }
-
- .icon {
- font-size: 24rpx;
- color: #999;
- }
+ .contact-value {
+ font-size: 30rpx;
+ opacity: 0.9;
+ flex: 1;
+ word-break: break-all;
}
}
+ }
- .detail-item {
- margin-bottom: 30rpx;
+ .verification-info {
+ margin-top: 30rpx;
+ display: flex;
+ align-items: center;
- .detail-label {
- font-size: 30rpx;
- font-weight: bold;
- color: #666;
- margin-bottom: 15rpx;
+ .verification-text {
+ font-size: 28rpx;
+ opacity: 0.8;
+ margin-right: 20rpx;
+ }
+
+ .verification-tags {
+ display: flex;
+
+ .verification-tag {
+ background: rgba(255, 255, 255, 0.2);
+ padding: 6rpx 16rpx;
+ border-radius: 16rpx;
+ font-size: 24rpx;
+ margin-right: 12rpx;
+ }
+ }
+ }
+
+ // 操作按钮区域
+ .action-buttons {
+ display: flex;
+ justify-content: space-between;
+ background: #fff;
+ border-radius: 20rpx;
+ padding: 30rpx;
+ margin-top: 30rpx;
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+
+ .action-btn {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ flex: 1;
+ line-height: normal;
+ background: #ffffff00;
+
+ .btn-icon {
+ font-size: 56rpx;
+ margin-bottom: 12rpx;
}
- .detail-content {
+ .btn-text {
font-size: 28rpx;
+ color: #666;
+ }
+ }
+ }
+
+ // 名片简介
+ .card-intro {
+ background: #fff;
+ border-radius: 20rpx;
+ padding: 30rpx;
+ margin-top: 30rpx;
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+
+ .intro-item {
+ margin-bottom: 30rpx;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ .intro-title {
+ font-size: 32rpx;
+ font-weight: bold;
color: #333;
+ margin-bottom: 16rpx;
+ }
+
+ .intro-content {
+ font-size: 28rpx;
+ color: #666;
line-height: 1.6;
}
}
}
- .action-section {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- background: #fff;
- box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.1);
+ // 跳转卡片
+ .redirect-cards {
+ margin-top: 30rpx;
display: flex;
- padding: 20rpx;
- z-index: 999;
+ justify-content: space-between;
- .action-left {
- flex: 1;
+ .redirect-card {
+ flex: 0 0 calc(50% - 15rpx);
+ background: #fff;
+ border-radius: 20rpx;
+ overflow: hidden;
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
+ padding: 20rpx;
- .action-btn {
+ .redirect-img {
+ width: 80rpx;
+ height: 80rpx;
+ border-radius: 12rpx;
+ }
+
+ .redirect-info {
+ flex: 1;
+ margin-left: 20rpx;
display: flex;
+ justify-content: space-between;
align-items: center;
- padding: 15rpx 30rpx;
- border-radius: 30rpx;
- border: 2rpx solid #37bde6;
- color: #37bde6;
- &.active {
- background: #37bde6;
- color: #fff;
+ .redirect-title {
+ font-size: 30rpx;
+ color: #333;
}
- .icon {
- font-size: 28rpx;
- margin-right: 10rpx;
+ .redirect-arrow {
+ font-size: 40rpx;
+ color: #999;
}
}
}
+ }
- .action-right {
- flex: 2;
+ // 数字资产卡片
+ .asset-cards {
+ margin-top: 30rpx;
+ display: flex;
+ justify-content: space-between;
- .share-btn {
+ .asset-card {
+ flex: 0 0 calc(50% - 15rpx);
+ overflow: hidden;
+ border-radius: 20rpx;
+
+ .asset-img {
width: 100%;
- background: linear-gradient(90deg, #44bbff, #2b81ff);
- color: #fff;
+ height: 200rpx;
+ border-radius: 20rpx;
+ }
+ }
+ }
+
+ // 底部间距
+ .bottom-space {
+ height: 150rpx;
+ }
+
+ // 底部固定按钮
+ .bottom-btn-section {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: calc(100% - 60rpx);
+ background: #fff;
+ padding: 20rpx 30rpx 40rpx;
+ box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
+ z-index: 999;
+ display: flex;
+ gap: 10rpx;
+
+ .create-card-btn {
+ background: linear-gradient(90deg, #0078d7, #00b4ff);
+ color: #fff;
+ font-weight: bold;
+ padding: 10rpx 0;
+ border-radius: 60rpx;
+ border: none;
+ width: 100%;
+ }
+
+ .desensitization {
+ background: linear-gradient(-45deg, #fe632a 0%, #ff7a04 100%) !important;
+ }
+ }
+
+ // 支付弹窗
+ .payment-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+
+ .modal-content {
+ background-color: #fff;
+ width: 80%;
+ border-radius: 20rpx;
+ overflow: hidden;
+
+ .modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 24rpx 32rpx;
+ border-bottom: 1rpx solid #e0e0e0;
+
+ .title {
+ font-size: 32rpx;
+ font-weight: bold;
+ color: #333;
+ }
+
+ .close {
+ font-size: 40rpx;
+ color: #999;
+ }
+ }
+
+ .payment-info {
+ padding: 32rpx;
text-align: center;
- padding: 24rpx 0;
- border-radius: 30rpx;
- font-size: 32rpx;
- font-weight: bold;
+
+ .name {
+ font-size: 36rpx;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 8rpx;
+ }
+
+ .position {
+ font-size: 28rpx;
+ color: #666;
+ margin-bottom: 24rpx;
+ }
+
+ .price {
+ font-size: 48rpx;
+ font-weight: bold;
+ color: #ff4757;
+ }
+ }
+
+ .payment-methods {
+ border-top: 1rpx solid #e0e0e0;
+
+ .method-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 28rpx 32rpx;
+ border-bottom: 1rpx solid #f0f0f0;
+ font-size: 28rpx;
+ color: #333;
+
+ &.active {
+ color: #37bde6;
+ }
+
+ .icon-check {
+ font-size: 32rpx;
+ }
+ }
+ }
+
+ .modal-footer {
+ display: flex;
+ padding: 24rpx 32rpx;
+
+ .cancel-btn,
+ .confirm-btn {
+ flex: 1;
+ text-align: center;
+ padding: 20rpx 0;
+ border-radius: 8rpx;
+ font-size: 28rpx;
+ }
+
+ .cancel-btn {
+ color: #666;
+ margin-right: 20rpx;
+ background-color: #f5f5f5;
+ }
+
+ .confirm-btn {
+ color: #fff;
+ background-color: #37bde6;
+ }
}
}
}
--
Gitblit v1.9.2