<template>
|
<view class="business-card-list">
|
<!-- 筛选区域 -->
|
<view class="filter-section">
|
<view class="filter-item" :class="{ active: sortType === '' }" @tap="changeSort('latest')">
|
<text>最新</text>
|
</view>
|
<view class="filter-item" :class="{ active: showIndustryFilter }" @tap="toggleIndustryFilter">
|
<text>行业</text>
|
<text class="arrow">{{ showIndustryFilter ? '↑' : '↓' }}</text>
|
</view>
|
<view class="filter-item" :class="{ active: showRegionFilter }" @tap="toggleRegionFilter">
|
<text>地区</text>
|
<text class="arrow">{{ showRegionFilter ? '↑' : '↓' }}</text>
|
</view>
|
</view>
|
|
<!-- 行业筛选弹窗 -->
|
<view class="filter-popup" v-if="showIndustryFilter">
|
<scroll-view scroll-y="true" class="filter-content">
|
<view class="filter-group" v-for="(industry, index) in industryList" :key="index">
|
<!-- 一级行业也可以选择 -->
|
<view class="filter-option parent-option"
|
:class="{ active: selectedIndustryId === industry.industry_id }"
|
@tap="selectIndustry(industry.industry_id, industry.name)">
|
{{ industry.name }}
|
</view>
|
|
<!-- 二级行业 -->
|
<view class="filter-options" v-if="industry.child && industry.child.length > 0">
|
<view class="filter-option" :class="{ active: selectedIndustryId === child.industry_id }"
|
v-for="child in industry.child" :key="child.industry_id"
|
@tap="selectIndustry(child.industry_id, child.name)">
|
{{ child.name }}
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
<view class="filter-footer">
|
<view class="reset-btn" @tap="resetIndustryFilter">重置</view>
|
<view class="confirm-btn" @tap="confirmIndustryFilter">确定</view>
|
</view>
|
</view>
|
|
<!-- 地区筛选弹窗 -->
|
<view class="filter-popup" v-if="showRegionFilter">
|
<view class="region-selector">
|
<view class="region-tabs">
|
<view class="region-tab" :class="{ active: regionTab === 'province' }"
|
@tap="switchRegionTab('province')">
|
{{ selectedProvince || '选择省份' }}
|
</view>
|
<view class="region-tab" :class="{ active: regionTab === 'city' }" @tap="switchRegionTab('city')">
|
{{ selectedCity || '选择城市' }}
|
</view>
|
<view class="region-tab" :class="{ active: regionTab === 'area' }" @tap="switchRegionTab('area')">
|
{{ selectedArea || '选择区县' }}
|
</view>
|
</view>
|
<scroll-view scroll-y="true" class="region-content">
|
<view class="region-item" v-for="item in getCurrentRegionList()" :key="item.value"
|
:class="{ active: isSelectedRegion(item) }" @tap="selectRegion(item)">
|
{{ item.label }}
|
</view>
|
</scroll-view>
|
</view>
|
<view class="filter-footer">
|
<view class="reset-btn" @tap="resetRegionFilter">重置</view>
|
<view class="confirm-btn" @tap="confirmRegionFilter">确定</view>
|
</view>
|
</view>
|
|
<!-- 已选筛选条件 -->
|
<view class="selected-filters" v-if="selectedIndustryName || selectedProvince ">
|
<view class="filter-tag" v-if="selectedIndustryName">
|
<text>{{ selectedIndustryName }}</text>
|
<text class="close" @tap="clearIndustryFilter">×</text>
|
</view>
|
<view class="filter-tag" v-if="selectedProvince">
|
<text>{{ selectedProvince }} {{ selectedCity }} {{ selectedArea || '' }}</text>
|
<text class="close" @tap="clearRegionFilter">×</text>
|
</view>
|
</view>
|
|
<!-- 名片列表 -->
|
<scroll-view scroll-y="true" class="card-list" @scrolltolower="loadMore" lower-threshold="100">
|
<view class="card-item" v-for="(card, index) in cardList" :key="card.business_card_id">
|
<view class="card-main" @tap="viewCardDetail(card.business_card_id)">
|
<!-- 名片图片 -->
|
<view class="card-image">
|
<image :src="card.mp" mode="widthFix"></image>
|
</view>
|
<!-- 名片信息 -->
|
<view class="card-info">
|
<view class="card-header">
|
<view class="name-position">
|
<text class="name">{{ card.name }}</text>
|
<text class="position"
|
v-if="card.duties && card.duties.length > 0">{{ card.duties[0] }}</text>
|
</view>
|
</view>
|
<view class="company" v-if="card.unit && card.unit.length > 0">
|
{{ card.unit[0] }}
|
</view>
|
<view class="address">
|
<text class="iconfont icon-address"></text>
|
<text>{{ formatAddress(card) }}</text>
|
</view>
|
</view>
|
</view>
|
<!-- 操作按钮 -->
|
<view class="card-actions">
|
<!-- 价格标签 -->
|
<view class="price-tag" v-if="card.posterType === 'desensitization' && card.grade && card.grade.price > 0 && !card.has_purchased">
|
<text>￥{{ card.grade.price }}</text>
|
</view>
|
<view class="action-btn" @tap="handleCardAction(card)" >
|
{{ card.has_purchased || card.posterType !== 'desensitization' ? '查看详情' : '查看联系方式' }}
|
</view>
|
</view>
|
</view>
|
|
<!-- 空状态 -->
|
<view class="empty-state" v-if="cardList.length === 0 && !loading">
|
<image src="/static/none.png" class="empty-img"></image>
|
<text class="empty-text">暂无名片数据</text>
|
</view>
|
|
<!-- 加载中 -->
|
<view class="loading-more" v-if="loading">
|
<text>加载中...</text>
|
</view>
|
|
<!-- 没有更多 -->
|
<view class="no-more" v-if="!hasMore && cardList.length > 0">
|
<text>没有更多了</text>
|
</view>
|
</scroll-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">{{ selectedCard.name }}</text>
|
<text class="position"
|
v-if="selectedCard.duties && selectedCard.duties.length > 0">{{ selectedCard.duties[0] }}</text>
|
<text class="price">￥{{ selectedCard.grade.price }}</text>
|
</view>
|
<!-- <view class="payment-methods">
|
<view class="method-item" :class="{ active: paymentMethod === 'balance' }"
|
@tap="selectPaymentMethod('balance')">
|
<text class="method-name">联盟币支付</text>
|
<text class="iconfont icon-check" v-if="paymentMethod === 'balance'"></text>
|
</view>
|
<view class="method-item" :class="{ active: paymentMethod === 'wechat' }"
|
@tap="selectPaymentMethod('wechat')">
|
<text class="method-name">微信支付</text>
|
<text class="iconfont icon-check" v-if="paymentMethod === 'wechat'"></text>
|
</view>
|
</view> -->
|
<view class="modal-footer">
|
<view class="cancel-btn" @tap="closePaymentModal">取消</view>
|
<view class="confirm-btn" @tap="confirmPayment">确认</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
// 列表数据
|
cardList: [],
|
// 筛选条件
|
sortType: 'latest', // latest - 最新
|
selectedIndustryId: '',
|
selectedIndustryName: '',
|
selectedProvince: '',
|
selectedCity: '',
|
selectedArea: '',
|
selectedProvinceId: '',
|
selectedCityId: '',
|
selectedAreaId: '',
|
// 筛选弹窗状态
|
showIndustryFilter: false,
|
showRegionFilter: false,
|
regionTab: 'province',
|
// 行业数据
|
industryList: [],
|
// 地区数据
|
provinceList: [],
|
cityList: [],
|
areaList: [],
|
// 分页
|
page: 1,
|
list_rows: 10,
|
hasMore: true,
|
loading: false,
|
// 支付相关
|
showPayment: false,
|
selectedCard: {},
|
paymentMethod: 'balance'
|
}
|
},
|
onLoad() {
|
this.initData();
|
},
|
methods: {
|
// 初始化数据
|
initData() {
|
this.loading = true;
|
Promise.all([
|
this.getIndustryList(),
|
this.getRegionList()
|
]).then(() => {
|
this.loadCardList();
|
});
|
},
|
|
// 获取行业列表
|
getIndustryList() {
|
return new Promise((resolve) => {
|
this._post('plus.business.industry/getIndustryTree', {}, (res) => {
|
if (res.data && res.data.tree) {
|
this.industryList = res.data.tree;
|
}
|
resolve();
|
});
|
});
|
},
|
|
// 获取地区列表
|
getRegionList() {
|
return new Promise((resolve) => {
|
this._get('settings/getRegion', {}, (res) => {
|
if (res.data && res.data.regionData) {
|
// 适配地区数据结构
|
this.provinceList = res.data.regionData[0];
|
this.cityList = res.data.regionData[1];
|
this.areaList = res.data.regionData[2];
|
}
|
resolve();
|
});
|
});
|
},
|
|
// 加载名片列表
|
loadCardList(refresh = false) {
|
if (refresh) {
|
this.page = 1;
|
this.hasMore = true;
|
this.cardList = [];
|
}
|
|
if (!this.hasMore) return;
|
|
this.loading = true;
|
let params = {
|
page: this.page,
|
list_rows: this.list_rows,
|
industry_id: this.selectedIndustryId,
|
province_id: this.selectedProvinceId,
|
city_id: this.selectedCityId,
|
region_id: this.selectedAreaId
|
};
|
|
// 根据排序类型添加排序参数
|
if (this.sortType === 'latest') {
|
params.sort = 'time';
|
}
|
|
this._post('plus.business.business/getList', params, (res) => {
|
this.loading = false;
|
if (res.data && res.data.data) {
|
let newList = res.data.data;
|
// 确保每个名片项都有 grade 和 has_purchased 属性
|
newList = newList.map(item => {
|
// 如果没有 grade 信息，添加默认值
|
if (!item.grade) {
|
item.grade = {
|
price: 0
|
};
|
}
|
// 如果没有 has_purchased 信息，默认设置为 false
|
if (typeof item.has_purchased === 'undefined') {
|
item.has_purchased = false;
|
}
|
return item;
|
});
|
|
if (refresh) {
|
this.cardList = newList;
|
} else {
|
this.cardList = this.cardList.concat(newList);
|
}
|
|
// 检查是否还有更多数据
|
this.hasMore = newList.length >= this.list_rows;
|
if (this.hasMore) {
|
this.page++;
|
}
|
}
|
}, (err) => {
|
this.loading = false;
|
this.showError('加载失败，请重试');
|
});
|
},
|
|
// 加载更多
|
loadMore() {
|
if (!this.loading && this.hasMore) {
|
this.loadCardList();
|
}
|
},
|
|
// 切换排序
|
changeSort(sortType) {
|
if(this.sortType=='latest'){
|
this.sortType = ''
|
}else{
|
|
this.sortType = sortType;
|
}
|
|
this.loadCardList(true);
|
},
|
|
// 切换行业筛选弹窗
|
toggleIndustryFilter() {
|
this.showIndustryFilter = !this.showIndustryFilter;
|
this.showRegionFilter = false;
|
},
|
|
// 切换地区筛选弹窗
|
toggleRegionFilter() {
|
this.showRegionFilter = !this.showRegionFilter;
|
this.showIndustryFilter = false;
|
},
|
|
// 选择行业
|
selectIndustry(industryId, industryName) {
|
this.selectedIndustryId = industryId;
|
this.selectedIndustryName = industryName;
|
},
|
|
// 重置行业筛选
|
resetIndustryFilter() {
|
this.selectedIndustryId = '';
|
this.selectedIndustryName = '';
|
},
|
|
// 确认行业筛选
|
confirmIndustryFilter() {
|
this.showIndustryFilter = false;
|
this.loadCardList(true);
|
},
|
|
// 清除行业筛选
|
clearIndustryFilter() {
|
this.selectedIndustryId = '';
|
this.selectedIndustryName = '';
|
this.loadCardList(true);
|
},
|
|
// 切换地区标签
|
switchRegionTab(tab) {
|
this.regionTab = tab;
|
},
|
|
// 获取当前地区列表
|
getCurrentRegionList() {
|
switch (this.regionTab) {
|
case 'province':
|
return this.provinceList;
|
case 'city':
|
if (!this.selectedProvinceId) return [];
|
// 找到对应省份的索引
|
const provinceIndex = this.provinceList.findIndex(item => item.value === this.selectedProvinceId);
|
return provinceIndex !== -1 && this.cityList[provinceIndex] ? this.cityList[provinceIndex] : [];
|
case 'area':
|
if (!this.selectedProvinceId || !this.selectedCityId) return [];
|
// 找到对应省份和城市的索引
|
const pIndex = this.provinceList.findIndex(item => item.value === this.selectedProvinceId);
|
if (pIndex !== -1 && this.cityList[pIndex]) {
|
const cityIndex = this.cityList[pIndex].findIndex(item => item.value === this.selectedCityId);
|
return cityIndex !== -1 && this.areaList[pIndex] && this.areaList[pIndex][cityIndex] ? this.areaList[pIndex][cityIndex] : [];
|
}
|
return [];
|
default:
|
return [];
|
}
|
},
|
|
// 检查是否选中地区
|
isSelectedRegion(item) {
|
switch (this.regionTab) {
|
case 'province':
|
return item.value === this.selectedProvinceId;
|
case 'city':
|
return item.value === this.selectedCityId;
|
case 'area':
|
return item.value === this.selectedAreaId;
|
default:
|
return false;
|
}
|
},
|
|
// 选择地区
|
selectRegion(item) {
|
switch (this.regionTab) {
|
case 'province':
|
this.selectedProvinceId = item.value;
|
this.selectedProvince = item.label;
|
// 重置城市和区县
|
this.selectedCityId = '';
|
this.selectedCity = '';
|
this.selectedAreaId = '';
|
this.selectedArea = '';
|
// 切换到城市标签
|
this.regionTab = 'city';
|
break;
|
case 'city':
|
this.selectedCityId = item.value;
|
this.selectedCity = item.label;
|
// 重置区县
|
this.selectedAreaId = '';
|
this.selectedArea = '';
|
// 切换到区县标签
|
this.regionTab = 'area';
|
break;
|
case 'area':
|
this.selectedAreaId = item.value;
|
this.selectedArea = item.label;
|
break;
|
}
|
},
|
|
// 重置地区筛选
|
resetRegionFilter() {
|
this.selectedProvinceId = '';
|
this.selectedProvince = '';
|
this.selectedCityId = '';
|
this.selectedCity = '';
|
this.selectedAreaId = '';
|
this.selectedArea = '';
|
this.regionTab = 'province';
|
},
|
|
// 确认地区筛选
|
confirmRegionFilter() {
|
this.showRegionFilter = false;
|
this.loadCardList(true);
|
},
|
|
// 清除地区筛选
|
clearRegionFilter() {
|
this.resetRegionFilter();
|
this.loadCardList(true);
|
},
|
|
// 格式化地址
|
formatAddress(card) {
|
let addressParts = [];
|
// 优先使用名片中的region数据
|
if (card.region && card.region.province) {
|
addressParts.push(card.region.province);
|
if (card.region.city) {
|
addressParts.push(card.region.city);
|
}
|
if (card.region.region) {
|
addressParts.push(card.region.region);
|
}
|
}
|
// 其次使用选中的省市区筛选信息
|
else if (this.selectedProvince && this.selectedCity) {
|
addressParts.push(this.selectedProvince);
|
addressParts.push(this.selectedCity);
|
if (this.selectedArea) {
|
addressParts.push(this.selectedArea);
|
}
|
}
|
// 最后使用名片中的地址
|
if (card.address && card.address.length > 0) {
|
addressParts.push(card.address[0]);
|
}
|
return addressParts.join(' ');
|
},
|
|
// 查看名片详情
|
viewCardDetail(business_card_id) {
|
this.gotoPage(`/pages/plus/business/detail?business_card_id=${business_card_id}`);
|
},
|
|
// 处理名片操作
|
handleCardAction(card) {
|
// 如果已购买或不是脱敏名片，直接查看详情
|
if (card.has_purchased || card.posterType !== 'desensitization') {
|
this.viewCardDetail(card.business_card_id);
|
return;
|
}
|
|
// 如果是脱敏名片且未购买，显示支付弹窗
|
if (card.grade && card.grade.price > 0) {
|
this.showPaymentModal(card);
|
} else {
|
// 免费的脱敏名片也直接查看
|
this.viewCardDetail(card.business_card_id);
|
}
|
},
|
|
// 显示支付弹窗
|
showPaymentModal(card) {
|
this.selectedCard = card;
|
this.paymentMethod = 'balance';
|
this.showPayment = true;
|
},
|
|
// 关闭支付弹窗
|
closePaymentModal() {
|
this.showPayment = false;
|
this.selectedCard = {};
|
},
|
|
// 选择支付方式
|
selectPaymentMethod(method) {
|
this.paymentMethod = method;
|
},
|
|
// 确认支付
|
confirmPayment() {
|
let payType = this.paymentMethod === 'balance' ? 10 : 20;
|
let params = {
|
business_card_id: this.selectedCard.business_card_id,
|
grade_id: this.selectedCard.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('支付失败，请重试');
|
});
|
},
|
|
// 处理微信支付
|
handleWechatPay(payParams) {
|
// 这里根据项目的微信支付实现进行处理
|
// 一般需要调用微信支付API
|
console.log('微信支付参数:', payParams);
|
// 模拟支付成功
|
this.showSuccess('支付成功', () => {
|
this.closePaymentModal();
|
this.loadCardList(true);
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.business-card-list {
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
|
.filter-section {
|
display: flex;
|
background-color: #fff;
|
padding: 0 20rpx;
|
border-bottom: 1rpx solid #e0e0e0;
|
|
.filter-item {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 24rpx 0;
|
position: relative;
|
color: #333;
|
font-size: 28rpx;
|
|
&.active {
|
color: #37bde6;
|
}
|
|
.arrow {
|
margin-left: 8rpx;
|
font-size: 20rpx;
|
}
|
}
|
}
|
|
.filter-popup {
|
position: absolute;
|
top: 94rpx;
|
left: 0;
|
right: 0;
|
z-index: 999;
|
background-color: #fff;
|
border-bottom: 1rpx solid #e0e0e0;
|
|
.filter-content {
|
height: 500rpx;
|
padding: 20rpx;
|
|
.filter-group {
|
margin-bottom: 30rpx;
|
|
.filter-title {
|
font-size: 28rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 16rpx;
|
}
|
|
.parent-option {
|
font-weight: bold;
|
font-size: 28rpx;
|
margin-bottom: 12rpx;
|
color: #333;
|
background-color: #e6f4f9;
|
width: 100%;
|
text-align: center;
|
|
&.active {
|
background-color: #37bde6;
|
color: #fff;
|
}
|
}
|
|
.filter-options {
|
display: flex;
|
flex-wrap: wrap;
|
|
.filter-option {
|
padding: 12rpx 24rpx;
|
margin: 8rpx 12rpx 8rpx 0;
|
background-color: #f5f5f5;
|
border-radius: 20rpx;
|
font-size: 26rpx;
|
color: #666;
|
|
&.active {
|
background-color: #37bde6;
|
color: #fff;
|
}
|
}
|
|
|
}
|
}
|
}
|
|
.filter-footer {
|
display: flex;
|
border-top: 1rpx solid #e0e0e0;
|
|
.reset-btn,
|
.confirm-btn {
|
flex: 1;
|
text-align: center;
|
padding: 24rpx 0;
|
font-size: 28rpx;
|
}
|
|
.reset-btn {
|
color: #666;
|
border-right: 1rpx solid #e0e0e0;
|
}
|
|
.confirm-btn {
|
color: #37bde6;
|
}
|
}
|
}
|
|
.region-selector {
|
.region-tabs {
|
display: flex;
|
border-bottom: 1rpx solid #e0e0e0;
|
|
.region-tab {
|
flex: 1;
|
text-align: center;
|
padding: 24rpx 0;
|
font-size: 28rpx;
|
color: #666;
|
border-bottom: 3rpx solid transparent;
|
|
&.active {
|
color: #37bde6;
|
border-bottom-color: #37bde6;
|
}
|
}
|
}
|
|
.region-content {
|
height: 450rpx;
|
padding: 20rpx;
|
|
.region-item {
|
padding: 20rpx;
|
font-size: 28rpx;
|
color: #333;
|
|
&.active {
|
color: #37bde6;
|
}
|
}
|
}
|
}
|
|
.selected-filters {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 16rpx 20rpx;
|
background-color: #fff;
|
margin-bottom: 20rpx;
|
|
.filter-tag {
|
display: flex;
|
align-items: center;
|
background-color: #e6f4f9;
|
color: #37bde6;
|
padding: 8rpx 16rpx;
|
border-radius: 20rpx;
|
margin-right: 16rpx;
|
margin-bottom: 16rpx;
|
font-size: 26rpx;
|
|
.close {
|
margin-left: 8rpx;
|
font-size: 32rpx;
|
line-height: 26rpx;
|
}
|
}
|
}
|
|
.card-list {
|
width: calc(100% - 40rpx);
|
padding: 0 20rpx 20rpx;
|
|
.card-item {
|
background-color: #fff;
|
border-radius: 16rpx;
|
margin-top: 20rpx;
|
overflow: hidden;
|
|
.card-main {
|
padding: 20rpx;
|
|
.card-image {
|
width: 100%;
|
border-radius: 8rpx;
|
overflow: hidden;
|
margin-bottom: 16rpx;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.card-info {
|
.card-header {
|
margin-bottom: 12rpx;
|
|
.name-position {
|
display: flex;
|
align-items: center;
|
|
.name {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
margin-right: 16rpx;
|
}
|
|
.position {
|
font-size: 26rpx;
|
color: #666;
|
}
|
}
|
}
|
|
.company {
|
font-size: 28rpx;
|
color: #666;
|
margin-bottom: 12rpx;
|
}
|
|
.address {
|
display: flex;
|
align-items: center;
|
font-size: 26rpx;
|
color: #999;
|
|
.iconfont {
|
margin-right: 8rpx;
|
}
|
}
|
}
|
}
|
|
.card-actions {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 16rpx 20rpx;
|
border-top: 1rpx solid #f0f0f0;
|
|
.price-tag {
|
font-size: 28rpx;
|
color: #ff4757;
|
font-weight: bold;
|
}
|
|
.action-btn {
|
padding: 10rpx 32rpx;
|
background-color: #37bde6;
|
color: #fff;
|
border-radius: 20rpx;
|
font-size: 28rpx;
|
|
&.purchased {
|
background-color: #e0e0e0;
|
}
|
}
|
}
|
}
|
|
.empty-state {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 100rpx 0;
|
|
.empty-img {
|
width: 200rpx;
|
height: 200rpx;
|
margin-bottom: 20rpx;
|
}
|
|
.empty-text {
|
font-size: 28rpx;
|
color: #999;
|
}
|
}
|
|
.loading-more,
|
.no-more {
|
text-align: center;
|
padding: 20rpx 0;
|
font-size: 26rpx;
|
color: #999;
|
}
|
}
|
|
.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;
|
|
.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;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
