|
|
@@ -1,7 +1,63 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
<view class="info-box">
|
|
|
-
|
|
|
+ <view class="info-item-box flex">
|
|
|
+ <view class="label">
|
|
|
+ 用户名
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{ info.username }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-item-box flex">
|
|
|
+ <view class="label">
|
|
|
+ 支付项目
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{ info.payProject }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-item-box flex">
|
|
|
+ <view class="label">
|
|
|
+ 类型
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{ info.type }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-item-box flex">
|
|
|
+ <view class="label">
|
|
|
+ 年份
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{ info.year }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-item-box flex">
|
|
|
+ <view class="label">
|
|
|
+ 金额
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{ info.price }}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-item-box flex">
|
|
|
+ <view class="label">
|
|
|
+ 会籍有效期
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{ info.periodOfValidity }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-item-box row">
|
|
|
+ <view class="label">
|
|
|
+ 描述:
|
|
|
+ </view>
|
|
|
+ <view class="text" v-html="info.remark"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-box">
|
|
|
+ <u-button type="error" shape="circle" @click="onSubmit">支付</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -18,9 +74,14 @@
|
|
|
type: '个人会费',
|
|
|
year: '2024年',
|
|
|
price: '200',
|
|
|
- time: '2024.05.1-2025.4.30'
|
|
|
+ periodOfValidity: '2024.05.1-2025.4.30',
|
|
|
+ remark: '根据《协会章程》规定,个人会费200元/年/人,会员会籍为每年5月1日至4月30日。<br/>个人会员可享受以下会员服务:<br/>1、免费使用网络教育培训系统【系统已上线121个视频课程77本电子书,涵盖:政策法规、职业素养、商务礼仪、客户服务销售技能、市场营销、团队管理、办公软件等多个知识领域】<br/>2、优先优惠参加协会组织的公开培训课<br/>更多优惠请关注协会微信号【gzreavip】'
|
|
|
})
|
|
|
|
|
|
+ function onSubmit() {
|
|
|
+ console.log('点击支付');
|
|
|
+ }
|
|
|
+
|
|
|
onLoad((load) => {
|
|
|
id.value = load.id
|
|
|
})
|
|
|
@@ -31,6 +92,47 @@
|
|
|
height: 100vh;
|
|
|
width: 100vw;
|
|
|
background-color: $uni-bg-color;
|
|
|
- padding: 0 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ .info-box {
|
|
|
+ padding: 30rpx;
|
|
|
+ background-color: $uni-bg-color-grey;
|
|
|
+ border-radius: $uni-card-border-radius;
|
|
|
+ .info-item-box {
|
|
|
+ font-size: $uni-title-font-size-2;
|
|
|
+ border-bottom: 1rpx solid #E6E6E6;
|
|
|
+ height: 82rpx;
|
|
|
+ .label {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flex {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .label {
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ width: 70%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ .label {
|
|
|
+ line-height: 62rpx;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ line-height: 42rpx;
|
|
|
+ font-size: $uni-title-font-size-3;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-box {
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ bottom: 50rpx;
|
|
|
+ width: 95%;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
