Skip to content

杨炀 / ztx_wx_gzt

Go to a project
Toggle navigation
Toggle navigation pinning
7d54d38d by lttnew
Options

支付

1 parent 3dd81aba
Expand all
Inline Side-by-side
Showing 21 changed files with 1153 additions and 18 deletions
common/api.js
......@@ -220,6 +220,13 @@ export function addPersonToMyDept(data) {
params: data
})
}
export function insertSinglePay(data) {
return request({
url: '/person/paymentNew/insertSinglePay',
method: 'post',
params: data
})
}
// 提交人工审核
export function addPersonCommit(data) {
return request({
......@@ -228,6 +235,13 @@ export function addPersonCommit(data) {
params: data
})
}
export function getZtxFeeConfig() {
return request({
url: '/system/config/getZtxFeeConfig',
method: 'get'
})
}
// 图片上传
export function uploadImg(e) {
const tempFilePaths = e.tempFilePaths;
......
common/request.js
......@@ -118,8 +118,8 @@ const request = function(req) {
}).catch(res => {
reject(res)
}).finally(() => {
// if (req.method == 'POST' && !req.hideLoding) {
// uni.hideLoading()
// if (req.method == 'POST' && !req.hideLoading) {
uni.hideLoading()
// }
})
})
......
config.js
......@@ -5,7 +5,7 @@
// staging 会员系统
// const baseUrl_api = "http://22yidpjzjifv.ngrok.xiaomiqiu123.top/stage-api/";
// const baseUrl_api = "https://ztx.itechtop.cn:8443/stage-api";
const baseUrl_api = 'http://192.168.1.154:8788'
const baseUrl_api = 'http://192.168.1.189:8788'
// const baseUrl_api = 'https://tkcn.19wk.cn:8443/stage-api'
// const baseUrl_api = 'http://tk004.wxjylt.com/stage-api'
......
login/login.vue
This diff could not be displayed because it is too large.
login/loginC.vue 0 → 100644
This diff could not be displayed because it is too large.
myCenter/perfect.vue
......@@ -77,9 +77,10 @@
<view class="custom-modal">
<view class="modal-title">提示</view>
<view class="modal-content">
暂未查询到相关企业信息，企业信息异常请检查相关资料信息，确认无误后再次提交！
暂未查询到相关企业信息
</view>
<view class="modal-btns">
<view class=" modal-content" style="color:red">企业信息异常请检查相关资料信息，确认无误后再次提交！</view>
<view class="modal-btns mt20">
<button class="btn-cancel" @click="closeVerifyPopup()">返回修改</button>
<button class="btn-confirm" @click="confirmSubmit()">确认无误</button>
</view>
......
pages.json
......@@ -119,6 +119,13 @@
"navigationStyle": "custom"
}
}, {
"path": "loginC",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}, {
"path": "register",
"style": {
"navigationBarTitleText": "注册",
......@@ -126,15 +133,62 @@
"navigationStyle": "custom"
}
}]
},{
},
{
"root": "personal",
"pages": [
{
"path": "addVip_per",
"style": {
"navigationBarTitleText": "个人会员申请",
"enablePullDownRefresh": false
}
},
{
"path" : "goPay_per",
"style" :
{
"navigationBarTitleText" : "付款详情",
"enablePullDownRefresh" : false
}
},
{
"path" : "submitPay",
"style" :
{
"navigationBarTitleText" : "确认支付",
"enablePullDownRefresh" : false
}
},
{
"path" : "sucPay",
"style" :
{
"navigationBarTitleText" : "支付详情",
"enablePullDownRefresh" : false
}
},
{
"path" : "home",
"style" :
{
"navigationBarTitleText" : "个人会员中心",
"enablePullDownRefresh" : false
}
}
]
},
{
"root": "personalVip",
"pages": [{
"pages": [
{
"path": "addVip",
"style": {
"navigationBarTitleText": "添加会员",
"enablePullDownRefresh": false
}
}, {
},
{
"path": "renew",
"style": {
"navigationBarTitleText": "会员缴费",
......@@ -721,7 +775,7 @@
"preloadRule": {
"pages/index/index": {
"network": "all",
"packages": ["login","personalVip", "group","level","myCenter"]
"packages": ["login","personalVip", "group","level","myCenter","personal"]
}
}
}
\ No newline at end of file
......
pages/index/index.vue
......@@ -295,9 +295,9 @@
const isInit = ref(false)
const isBlack = ref(0)
onShow(() => {
uni.showLoading({
title:'加载中'
})
// uni.showLoading({
// title:'加载中'
// })
if (app.globalData.isLogin) {
init()
} else {
......
personal/goPay_per.vue 0 → 100644
<template>
<view class="container">
<view class="content">
<view class="card">
<view class="yearRow">
<view class="label">缴费年限</view>
<view class="control">
<image class="icon" @click="minusYear" src="/static/dd_02.png" mode="widthFix" v-if="form.payYear > 1" ></image>
<image class="icon" src="/static/dd_02_g.png" mode="widthFix" v-else ></image>
<text class="num">{{ form.payYear }}年</text>
<image class="icon" src="/static/btn_03.png" mode="widthFix" @click="plusYear" v-if="form.payYear < 5" ></image>
<image class="icon" src="/static/btn_03_g.png" mode="widthFix" v-else ></image>
</view>
</view>
</view>
<view class="card ">
<view class="row ">
<text class="label">费用合计</text>
<text class="value red">{{ form.payYear * memberFee }}元</text>
</view>
</view>
<view class="payRow ">
<radio-group @change="onPayTypeChange">
<label class="radioItem">
<radio value="1" :checked="payType === '1'" class="custom-radio" />
<view class="payInfo">
<image class="icon" src="/static/min.png" mode="widthFix"></image>
<text>民生付</text>
</view>
</label>
</radio-group>
</view>
<view class="totalRow ">
<text class="label">支付费用合计</text>
<text class="value redBig">{{ memberTotalFee }}元</text>
</view>
</view>
<view class="bottomBtn">
<button class="payBtn" @click="handelPay" :loading="isPaying">立即支付 ¥{{ memberTotalFee }}</button>
</view>
</view>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import * as api from '@/common/api.js'
const form = ref({
payYear: 1
})
// 支付方式
const payType = ref('1')
const isPaying = ref(false)
// 费用与优惠
const memberFee = ref(0)
const memberTotalFee = computed(() => {
return memberFee.value * form.value.payYear
})
onLoad((options) => {
if (options.baseFormData) {
const data = JSON.parse(decodeURIComponent(options.baseFormData))
form.value = {
...data,
payYear: 1 // 年限默认1
}
}
// 初始化接口
getMyMemberCertUnitFeeApi()
})
// 减年限
const minusYear = () => {
if (form.value.payYear > 1) {
form.value.payYear--
}
}
// 加年限（最大 5 年）
const plusYear = () => {
if (form.value.payYear < 5) {
form.value.payYear++
}
}
// 支付方式切换
const onPayTypeChange = (e) => {
payType.value = e.detail.value
}
const handelPay = async () => {
if (memberTotalFee.value <= 0) {
uni.showToast({ title: '支付金额异常', icon: 'none' })
return
}
isPaying.value = true
try {
// 拼接完整参数
const postData = {
...form.value,
payYear: form.value.payYear,
payType: payType.value,
totalFee: memberTotalFee.value
}
const res = await api.insertSinglePay(postData)
console.log(777,res)
if (res.data?.orderId) {
api.pcallBack2(res.data.orderId)
uni.navigateTo({
url: `/personal/sucPay`
})
}
// if (data.payFlag == 0 || data.orderId) {
// data.orderId && api.callBack2(data.orderId)
// uni.navigateTo({ url: `/personal/submitPay?price=${res.data.price}` })
// }
} catch (err) {
uni.showToast({ title: '支付失败', icon: 'none' })
} finally {
isPaying.value = false
}
}
// 获取会员费
async function getMyMemberCertUnitFeeApi() {
const res = await api.getZtxFeeConfig()
memberFee.value = Number(res.data.personMemberFee || 1500)
}
</script>
<style scoped>
.container {
min-height: 100vh;
background-color: #f7f7f7;
}
.content {
padding: 20rpx 20rpx 120rpx;
}
.card {
background: #fff;
border-radius: 8rpx;
padding: 25rpx 20rpx;
margin-bottom: 20rpx;
}
.yearRow {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
}
.yearRow .label {
font-size: 28rpx;
color: #333;
}
.yearRow .control {
display: flex;
align-items: center;
}
.control image {
width: 50rpx;
height: 50rpx;
}
.yearRow .num {
font-size: 28rpx;
color: #333;
min-width: 80rpx;
text-align: center;
margin: 0 10rpx;
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
}
.row .label {
font-size: 28rpx;
color: #333;
}
.row .value {
font-size: 30rpx;
color: #C4121B;
font-weight: 500;
}
.hintRow {
display: flex;
align-items: flex-start;
font-size: 24rpx;
line-height: 1.4;
}
.hintRow .hintText {
color: #FF8124;
flex: 1;
margin-top: 10rpx;
}
.deductRow {
background: #fff;
padding: 20rpx 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
border-radius: 8rpx;
}
.deductRow .label {
font-size: 28rpx;
color: #333;
}
.deductRow .value {
font-size: 30rpx;
color: #C4121B;
}
.payRow {
background: #fff;
border-radius: 8rpx;
padding: 20rpx 20rpx;
margin-bottom: 20rpx;
}
.radioItem {
display: flex;
align-items: center;
}
.payInfo {
display: flex;
align-items: center;
margin-left: 15rpx;
}
.payInfo .icon {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
.payInfo text {
font-size: 28rpx;
color: #333;
}
.totalRow {
background: #fff;
border-radius: 8rpx;
padding: 20rpx 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10rpx;
}
.totalRow .label {
font-size: 28rpx;
color: #333;
}
.redBig {
font-size: 32rpx;
color: #C4121B;
font-weight: bold;
}
.bottomBtn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 20rpx;
background: #fff;
border-top: 1rpx solid #eee;
}
.payBtn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background-color: #C4121B;
color: #fff;
border-radius: 8rpx;
font-size: 32rpx;
text-align: center;
border: none;
}
.payBtn[disabled] {
background-color: #ccc;
color: #999;
}
.red {
color: #C4121B;
}
.icon{
width:30px;
}
::v-deep .custom-radio .wx-radio-input {
width: 30rpx;
height: 30rpx;
border-radius: 50%;
border: 2rpx solid #ccc;
}
::v-deep .custom-radio .wx-radio-input.wx-radio-input-checked {
border-color: #C4121B !important;
background: #C4121B !important;
}
</style>
\ No newline at end of file
personal/home.vue 0 → 100644
<template>
<view class="page-container">
<view class="top-section">
<!-- 用户信息 -->
<view class="user-info">
<view class="avatar">
<view class="avatar-placeholder">📄</view>
</view>
<view class="user-desc">注册会员8709745760778985472</view>
</view>
<!-- 会员卡片 -->
<view class="member-card">
<view class="card-header">
<view class="card-name">江行知</view>
<view class="bind-btn">绑定学员 ⇄</view>
</view>
<view class="card-id">证件号：360681201804040811</view>
<view class="card-func">
<view class="func-item" @click="goToInfo">
<view class="func-icon">⿱</view>
<view class="func-text">人员信息</view>
</view>
<view class="func-item">
<view class="func-icon">✓</view>
<view class="func-text">参赛能力认证</view>
</view>
<view class="func-item">
<view class="func-icon">🏆</view>
<view class="func-text">成绩查询</view>
</view>
<view class="func-item">
<view class="func-icon">↻</view>
<view class="func-text">参赛记录</view>
</view>
</view>
</view>
</view>
<view class="bottom-section">
<view class="info-title">
<view class="title-line"></view>
<text>人员信息</text>
</view>
<view class="info-list">
<view class="info-item">
<view class="item-label">姓名</view>
<view class="item-value">江行知</view>
</view>
<view class="info-item">
<view class="item-label">国籍</view>
<view class="item-value">中国</view>
</view>
<view class="info-item">
<view class="item-label">证件类型</view>
<view class="item-value">身份证</view>
</view>
<view class="info-item">
<view class="item-label">身份证号</view>
<view class="item-value">360681201804040811</view>
</view>
<view class="info-item">
<view class="item-label">生日</view>
<view class="item-value">2018-04-04</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const userInfo = ref({
memberNo: '8709745760778985472',
name: '江行知',
idCard: '360681201804040811',
nationality: '中国',
idType: '身份证',
birthday: '2018-04-04'
})
const goToInfo = () => {
console.log('跳转到人员信息页')
}
</script>
<style lang="scss" scoped>
.page-container {
min-height: 100vh;
background: linear-gradient(180deg, #FFF9E8 0%, #FFFFFF 100%);
padding: 0 30rpx;
box-sizing: border-box;
}
.top-section {
padding-top: 40rpx;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40rpx;
}
.title {
font-size: 36rpx;
font-weight: 500;
color: #333;
margin: 0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.more-btn {
display: flex;
align-items: center;
gap: 20rpx;
margin-left: auto;
background: #FFFFFF;
padding: 10rpx 20rpx;
border-radius: 40rpx;
}
.dots {
font-size: 32rpx;
color: #666;
line-height: 1;
}
.circle {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
border: 2rpx solid #666;
position: relative;
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background: #666;
}
}
.user-info {
display: flex;
align-items: center;
gap: 30rpx;
margin-bottom: 40rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: #F5F5F5;
display: flex;
align-items: center;
justify-content: center;
font-size: 48rpx;
border: 4rpx solid #E8E8E8;
}
.avatar-placeholder {
color: #999;
}
.user-desc {
font-size: 36rpx;
color: #333;
font-weight: 500;
}
/* 会员卡片 */
.member-card {
background: linear-gradient(135deg, #F7E090 0%, #E6C560 100%);
border-radius: 24rpx;
padding: 40rpx;
position: relative;
overflow: hidden;
margin-bottom: 30rpx;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('data:image/svg+xml,%3Csvg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0,50 Q250,20 500,50 T1000,50" fill="none" stroke="%23E6C560" stroke-width="2" opacity="0.3"/%3E%3C/svg%3E');
background-size: cover;
z-index: 0;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
position: relative;
z-index: 1;
}
.card-name {
font-size: 40rpx;
font-weight: bold;
color: #222;
}
.bind-btn {
font-size: 28rpx;
color: #666;
}
.card-id {
font-size: 28rpx;
color: #555;
margin-bottom: 40rpx;
position: relative;
z-index: 1;
}
/* 功能入口 */
.card-func {
display: flex;
justify-content: space-between;
position: relative;
z-index: 1;
}
.func-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10rpx;
cursor: pointer;
}
.func-icon {
width: 60rpx;
height: 60rpx;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #333;
}
.func-text {
font-size: 28rpx;
color: #333;
font-weight: 500;
}
/* ========== 下半部分：人员信息 ========== */
.bottom-section {
background: #FFFFFF;
border-radius: 24rpx 24rpx 0 0;
padding: 30rpx;
margin-top: 20rpx;
}
.info-title {
display: flex;
align-items: center;
gap: 16rpx;
margin-bottom: 30rpx;
font-size: 36rpx;
font-weight: 500;
color: #333;
}
.title-line {
width: 12rpx;
height: 32rpx;
background: #E6C560;
border-radius: 4rpx;
}
.info-list {
display: flex;
flex-direction: column;
gap: 30rpx;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 30rpx;
border-bottom: 1rpx solid #F0F0F0;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
}
.item-label {
font-size: 32rpx;
color: #333;
font-weight: 500;
}
.item-value {
font-size: 32rpx;
color: #999;
}
/* 底部固定按钮（可选） */
.fixedBottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 30rpx;
background: #FFFFFF;
border-top: 1rpx solid #F0F0F0;
}
.btn-red {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background: #C40F18;
color: #FFFFFF;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: 500;
border: none;
}
</style>
\ No newline at end of file
personal/submitPay.vue 0 → 100644
<template>
<view class="pay-order-container">
<view class="order-info">
<view class="info-item total-price">
<text class="label">支付总费用：</text>
<text class="value red">{{ price ?? 0 }}元</text>
</view>
</view>
<view class="pay-type-section">
<text class="section-title">选择支付方式</text>
<radio-group :value="payType" @change="handlePayTypeChange">
<label class="radio-item">
<radio value="0" color="#E60012" :checked="payType === '0'" />
<view class="pay-method">
<image class="icon" src="/static/min.png" mode="widthFix"></image>
<text class="pay-name">民生付</text>
</view>
</label>
</radio-group>
</view>
<!-- 底部支付按钮 -->
<view class="fixed-bottom">
<button class="pay-btn red-bg" :loading="payLoading" @click="handlePay">立即支付</button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import * as api from '@/common/api.js'
// 核心数据
const formData = ref({}) // 订单统计数据
const price = ref('') // 核心业务ID
const payType = ref('0') // 支付方式（默认0=民生付）
const payLoading = ref(false) // 支付按钮加载状态
// 页面加载接收参数
onLoad(async (options) => {
console.log('订单ID：', options.price)
if (options.price) {
price.value = options.price
}
})
// 支付方式切换
function handlePayTypeChange(e) {
payType.value = e.detail.value
}
// 立即支付核心逻辑
async function handlePay() {
try {
payLoading.value = true
const res = await api.goPay()
if (res.data?.orderId) {
api.pcallBack2(res.data.orderId)
uni.navigateTo({
url: `/personal/sucPay`
})
}
// 跳转到支付成功页
} catch (err) {
const errMsg = err?.data?.msg || err?.message || '支付失败，请稍后重试'
uni.showToast({ title: errMsg, icon: 'none' })
} finally {
payLoading.value = false
}
}
</script>
<style scoped lang="scss">
.pay-order-container {
padding: 30rpx;
background-color: #fff;
min-height: 100vh;
box-sizing: border-box;
}
.icon{
width:30px;
}
// 页面头部
.page-header {
text-align: center;
padding: 20rpx 0;
border-bottom: 1px solid #eee;
margin-bottom: 40rpx;
.title {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
}
// 订单信息区域
.order-info {
margin-bottom: 60rpx;
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25rpx 0;
border-bottom: 1px solid #f5f5f5;
font-size: 32rpx;
.label {
color: #666;
}
.value {
font-weight: 600;
font-size: 34rpx;
}
.red {
color: #E60012;
}
}
.total-price {
border-bottom: none;
margin-top: 10rpx;
.label {
font-size: 34rpx;
color: #333;
}
.value {
font-size: 38rpx;
}
}
}
// 支付方式区域
.pay-type-section {
margin-bottom: 80rpx;
.section-title {
font-size: 32rpx;
color: #333;
margin-bottom: 20rpx;
display: block;
}
.radio-item {
display: flex;
align-items: center;
font-size: 32rpx;
padding: 10rpx 0;
.pay-method {
display: flex;
align-items: center;
margin-left: 10rpx;
.pay-name {
font-size: 32rpx;
margin-left: 20rpx;
color: #333;
}
}
}
}
// 底部支付按钮
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 30rpx 30rpx;
background-color: #fff;
border-top: 1px solid #eee;
.pay-btn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
border-radius: 44rpx;
font-size: 34rpx;
font-weight: 600;
}
.red-bg {
background-color: #E60012;
color: #fff;
}
}
</style>
\ No newline at end of file
personal/sucPay.vue 0 → 100644
<template>
<view class="success-container">
<!-- 成功图标（渐变圆形+动效） -->
<view class="success-icon">
<view class="icon-circle">
<text class="check-icon">✓</text>
</view>
</view>
<!-- 支付成功标题（动画） -->
<view class="success-title">支付成功</view>
<view class="success-subtitle">支付成功，请等待审核</view>
<!-- 订单信息卡片（带阴影） -->
<view class="info-card">
<view class="info-item">
<text class="label">付款账户</text>
<text class="value">(5437)</text>
</view>
<view class="info-item">
<text class="label">交易流水号</text>
<text class="value">2205051351076117833</text>
</view>
<view class="info-item">
<text class="label">商户名称</text>
<text class="value">中国跆拳道协会</text>
</view>
<view class="info-item">
<text class="label">订单金额</text>
<text class="value amount">1500.00元</text>
</view>
<view class="info-item">
<text class="label">会员编号</text>
<text class="value">CTA00004</text>
</view>
<view class="info-item">
<text class="label">会员有效期</text>
<text class="value">2028年1月25日</text>
</view>
</view>
<!-- 确定按钮（渐变+动效） -->
<view class="confirm-btn-area">
<button class="confirm-btn" @click="goBack">确定</button>
</view>
</view>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app'
const goBack = () => {
uni.navigateTo({
url: `/personal/home`
})
}
onLoad((option) => {
})
</script>
<style scoped>
/* 全局容器 */
.success-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 100rpx 40rpx 60rpx;
min-height: 100vh;
background-color: #f8f9fa;
box-sizing: border-box;
}
/* 成功图标容器 */
.success-icon {
margin-bottom: 40rpx;
animation: fadeIn 0.6s ease-out;
}
/* 渐变圆形背景 */
.icon-circle {
width: 180rpx;
height: 180rpx;
border-radius: 50%;
/* 青绿色渐变 */
background: linear-gradient(135deg, #06c1ae, #04a896);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 30rpx rgba(6, 193, 174, 0.3);
/* 轻微上浮动效 */
animation: scaleIn 0.8s ease-out;
}
/* 对勾图标 */
.check-icon {
font-size: 90rpx;
color: #ffffff;
font-weight: bold;
}
/* 支付成功标题 */
.success-title {
font-size: 48rpx;
font-weight: 700;
color: #333333;
margin-bottom: 12rpx;
animation: slideUp 0.6s ease-out;
}
/* 副标题 */
.success-subtitle {
font-size: 28rpx;
color: #666666;
margin-bottom: 60rpx;
animation: slideUp 0.8s ease-out;
}
/* 订单信息卡片 */
.info-card {
width: 100%;
background: #ffffff;
border-radius: 20rpx;
padding: 40rpx 30rpx;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
margin-bottom: 80rpx;
animation: fadeIn 1s ease-out;
}
/* 单个信息项 */
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 0;
border-bottom: 1rpx solid #f5f5f5;
}
/* 最后一项去掉下划线 */
.info-item:last-child {
border-bottom: none;
}
/* 标签样式 */
.label {
font-size: 32rpx;
color: #666666;
}
/* 值样式 */
.value {
font-size: 32rpx;
color: #333333;
text-align: right;
}
/* 金额特殊样式 */
.amount {
color: #cd1e27;
font-weight: 600;
}
/* 确定按钮区域 */
.confirm-btn-area {
width: 100%;
padding: 0 20rpx;
box-sizing: border-box;
}
/* 确定按钮（渐变+动效） */
.confirm-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
/* 按钮渐变背景 */
background: #fff;
color: #C4121B;
font-size: 36rpx;
font-weight: 600;
border-radius: 45rpx;
border: 1px solid #C4121B;
animation: slideUp 1s ease-out;
/* 禁止默认样式 */
position: relative;
overflow: hidden;
}
/* 按钮点击反馈 */
.confirm-btn::after {
border: none;
}
.confirm-btn:active {
transform: scale(0.98);
box-shadow: 0 4rpx 10rpx rgba(6, 193, 174, 0.2);
}
/* 动画定义 */
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes scaleIn {
0% { transform: scale(0); }
70% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@keyframes slideUp {
0% { opacity: 0; transform: translateY(30rpx); }
100% { opacity: 1; transform: translateY(0); }
}
</style>
\ No newline at end of file
personalVip/payment.vue
......@@ -21,6 +21,7 @@
<text class="add-text">新建缴费</text>
</view>
</view>
<view style="width:100%;height:20rpx;background-color:#f8f9fa"></view>
<!-- 审核状态筛选 Tab -->
<view class="status-tabs">
......@@ -341,6 +342,7 @@ onUnmounted(() => {
padding-bottom: 60rpx;
min-height: 100vh;
box-sizing: border-box;
margin-top: 20rpx;
}
/* 搜索栏 */
......@@ -521,11 +523,6 @@ onUnmounted(() => {
margin:0 8rpx;
border:none;
font-weight: 500;
&:disabled {
background: #f0f0f0 !important;
color: #ccc !important;
}
}
.delete-btn {
......@@ -541,7 +538,11 @@ onUnmounted(() => {
color:#faad14;
}
}
.action-btn[disabled] {
background: #f0f0f0 !important;
color: #ccc !important;
opacity: 0.6 !important;
}
/* 空状态 */
.empty-state {
display: flex;
......
static/bg.png 0 → 100644
static/bg.png

64.6 KB
static/di.png 0 → 100644
static/di.png

59.4 KB
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!