7d54d38d by lttnew

支付

1 parent 3dd81aba
...@@ -220,6 +220,13 @@ export function addPersonToMyDept(data) { ...@@ -220,6 +220,13 @@ export function addPersonToMyDept(data) {
220 params: data 220 params: data
221 }) 221 })
222 } 222 }
223 export function insertSinglePay(data) {
224 return request({
225 url: '/person/paymentNew/insertSinglePay',
226 method: 'post',
227 params: data
228 })
229 }
223 // 提交人工审核 230 // 提交人工审核
224 export function addPersonCommit(data) { 231 export function addPersonCommit(data) {
225 return request({ 232 return request({
...@@ -228,6 +235,13 @@ export function addPersonCommit(data) { ...@@ -228,6 +235,13 @@ export function addPersonCommit(data) {
228 params: data 235 params: data
229 }) 236 })
230 } 237 }
238
239 export function getZtxFeeConfig() {
240 return request({
241 url: '/system/config/getZtxFeeConfig',
242 method: 'get'
243 })
244 }
231 // 图片上传 245 // 图片上传
232 export function uploadImg(e) { 246 export function uploadImg(e) {
233 const tempFilePaths = e.tempFilePaths; 247 const tempFilePaths = e.tempFilePaths;
......
...@@ -118,8 +118,8 @@ const request = function(req) { ...@@ -118,8 +118,8 @@ const request = function(req) {
118 }).catch(res => { 118 }).catch(res => {
119 reject(res) 119 reject(res)
120 }).finally(() => { 120 }).finally(() => {
121 // if (req.method == 'POST' && !req.hideLoding) { 121 // if (req.method == 'POST' && !req.hideLoading) {
122 // uni.hideLoading() 122 uni.hideLoading()
123 // } 123 // }
124 }) 124 })
125 }) 125 })
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 // staging 会员系统 5 // staging 会员系统
6 // const baseUrl_api = "http://22yidpjzjifv.ngrok.xiaomiqiu123.top/stage-api/"; 6 // const baseUrl_api = "http://22yidpjzjifv.ngrok.xiaomiqiu123.top/stage-api/";
7 // const baseUrl_api = "https://ztx.itechtop.cn:8443/stage-api"; 7 // const baseUrl_api = "https://ztx.itechtop.cn:8443/stage-api";
8 const baseUrl_api = 'http://192.168.1.154:8788' 8 const baseUrl_api = 'http://192.168.1.189:8788'
9 // const baseUrl_api = 'https://tkcn.19wk.cn:8443/stage-api' 9 // const baseUrl_api = 'https://tkcn.19wk.cn:8443/stage-api'
10 // const baseUrl_api = 'http://tk004.wxjylt.com/stage-api' 10 // const baseUrl_api = 'http://tk004.wxjylt.com/stage-api'
11 11
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -77,9 +77,10 @@ ...@@ -77,9 +77,10 @@
77 <view class="custom-modal"> 77 <view class="custom-modal">
78 <view class="modal-title">提示</view> 78 <view class="modal-title">提示</view>
79 <view class="modal-content"> 79 <view class="modal-content">
80 暂未查询到相关企业信息,企业信息异常请检查相关资料信息,确认无误后再次提交! 80 暂未查询到相关企业信息
81 </view> 81 </view>
82 <view class="modal-btns"> 82 <view class=" modal-content" style="color:red">企业信息异常请检查相关资料信息,确认无误后再次提交!</view>
83 <view class="modal-btns mt20">
83 <button class="btn-cancel" @click="closeVerifyPopup()">返回修改</button> 84 <button class="btn-cancel" @click="closeVerifyPopup()">返回修改</button>
84 <button class="btn-confirm" @click="confirmSubmit()">确认无误</button> 85 <button class="btn-confirm" @click="confirmSubmit()">确认无误</button>
85 </view> 86 </view>
......
...@@ -119,6 +119,13 @@ ...@@ -119,6 +119,13 @@
119 "navigationStyle": "custom" 119 "navigationStyle": "custom"
120 } 120 }
121 }, { 121 }, {
122 "path": "loginC",
123 "style": {
124 "navigationBarTitleText": "",
125 "enablePullDownRefresh": false,
126 "navigationStyle": "custom"
127 }
128 }, {
122 "path": "register", 129 "path": "register",
123 "style": { 130 "style": {
124 "navigationBarTitleText": "注册", 131 "navigationBarTitleText": "注册",
...@@ -126,15 +133,62 @@ ...@@ -126,15 +133,62 @@
126 "navigationStyle": "custom" 133 "navigationStyle": "custom"
127 } 134 }
128 }] 135 }]
129 },{ 136 },
137 {
138 "root": "personal",
139 "pages": [
140 {
141 "path": "addVip_per",
142 "style": {
143 "navigationBarTitleText": "个人会员申请",
144 "enablePullDownRefresh": false
145 }
146 },
147 {
148 "path" : "goPay_per",
149 "style" :
150 {
151 "navigationBarTitleText" : "付款详情",
152 "enablePullDownRefresh" : false
153 }
154 },
155 {
156 "path" : "submitPay",
157 "style" :
158 {
159 "navigationBarTitleText" : "确认支付",
160 "enablePullDownRefresh" : false
161 }
162 },
163 {
164 "path" : "sucPay",
165 "style" :
166 {
167 "navigationBarTitleText" : "支付详情",
168 "enablePullDownRefresh" : false
169 }
170 },
171 {
172 "path" : "home",
173 "style" :
174 {
175 "navigationBarTitleText" : "个人会员中心",
176 "enablePullDownRefresh" : false
177 }
178 }
179 ]
180 },
181 {
130 "root": "personalVip", 182 "root": "personalVip",
131 "pages": [{ 183 "pages": [
184 {
132 "path": "addVip", 185 "path": "addVip",
133 "style": { 186 "style": {
134 "navigationBarTitleText": "添加会员", 187 "navigationBarTitleText": "添加会员",
135 "enablePullDownRefresh": false 188 "enablePullDownRefresh": false
136 } 189 }
137 }, { 190 },
191 {
138 "path": "renew", 192 "path": "renew",
139 "style": { 193 "style": {
140 "navigationBarTitleText": "会员缴费", 194 "navigationBarTitleText": "会员缴费",
...@@ -721,7 +775,7 @@ ...@@ -721,7 +775,7 @@
721 "preloadRule": { 775 "preloadRule": {
722 "pages/index/index": { 776 "pages/index/index": {
723 "network": "all", 777 "network": "all",
724 "packages": ["login","personalVip", "group","level","myCenter"] 778 "packages": ["login","personalVip", "group","level","myCenter","personal"]
725 } 779 }
726 } 780 }
727 } 781 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -295,9 +295,9 @@ ...@@ -295,9 +295,9 @@
295 const isInit = ref(false) 295 const isInit = ref(false)
296 const isBlack = ref(0) 296 const isBlack = ref(0)
297 onShow(() => { 297 onShow(() => {
298 uni.showLoading({ 298 // uni.showLoading({
299 title:'加载中' 299 // title:'加载中'
300 }) 300 // })
301 if (app.globalData.isLogin) { 301 if (app.globalData.isLogin) {
302 init() 302 init()
303 } else { 303 } else {
......
1 <template>
2 <view>
3 <uni-segmented-control class="whitebg" :current="current" :values="items" @clickItem="onClickItem"
4 styleType="text" activeColor="#C40F18"></uni-segmented-control>
5 <view class="hasfixedbottom">
6 <view>
7 <uni-forms ref="baseForm" :border="true" :modelValue="baseFormData" label-width="80">
8 <view class="nolineform">
9 <uni-forms-item label="姓名" required name="name" v-show="current === 0">
10 <uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
11 v-model="baseFormData.name" placeholder="请输入姓名" />
12 </uni-forms-item>
13 <uni-forms-item label="证件类型" required name="idcType">
14 <uni-data-select v-model="baseFormData.idcType" style="width: 360rpx;"
15 @change="changeIdcType" :clear="false" :disabled="current === 0"
16 :localdata="idcTypeList"></uni-data-select>
17 </uni-forms-item>
18 <uni-forms-item label="证件照" required v-show="current === 1">
19 <view class="upCard">
20 <uni-file-picker v-model="cardObj" @delete="delimgFont" return-type="object" limit="1"
21 @select="upIdCardImgFront" :image-styles="imageStylesZJ">
22 <image v-if="!baseFormData.card" class="sfz"
23 :src="config.baseUrl_api+'/fs/static/login/sfz.png'">
24 </image>
25 </uni-file-picker>
26 </view>
27 </uni-forms-item>
28 <uni-forms-item label="姓名" required name="name" v-show="current === 1">
29 <text v-if="disabledName">{{baseFormData.name}}</text>
30 <uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
31 v-model="baseFormData.name" v-else placeholder="请输入姓名" />
32 </uni-forms-item>
33 <uni-forms-item label="证件号码" required name="idcCode" v-show="current === 0">
34 <uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
35 v-model="baseFormData.idcCode" @blur="giveBirthDay" placeholder="请输入证件号码" />
36 </uni-forms-item>
37 <uni-forms-item label="证件号码" required name="idcCode" v-show="current === 1">
38 <text>{{baseFormData.idcCode}}</text>
39 </uni-forms-item>
40 <uni-forms-item label="性别" required name="sex">
41 <text v-if="baseFormData.sex=='0'"></text>
42 <text v-else-if="baseFormData.sex=='1'"></text>
43 <!-- <uni-data-checkbox v-model="baseFormData.sex" @change="changeSex" :localdata="sexs" /> -->
44 </uni-forms-item>
45 <uni-forms-item label="出生日期" required name="birth">
46 {{baseFormData.birth?.slice(0,10)}}
47 <!-- <uni-datetime-picker type="date" placeholder="YYYY-MM-DD" :border='false'
48 :clear-icon="false" v-model="baseFormData.birth" /> -->
49 </uni-forms-item>
50 <uni-forms-item label="联系方式" name="phone">
51 <uni-easyinput :styles="inputstyle" :placeholderStyle="placeholderStyle"
52 v-model="baseFormData.phone" placeholder="请输入联系方式" />
53 </uni-forms-item>
54
55
56 <uni-forms-item label="所在地区">
57 <uni-data-picker class="fixUniFormItemStyle" v-model="baseFormData.cityId"
58 :localdata="regionsList" popup-title="请选择所在地区"></uni-data-picker>
59 </uni-forms-item>
60 <uni-forms-item label="详细地址"><uni-easyinput :styles="inputstyle"
61 :placeholderStyle="placeholderStyle" v-model="baseFormData.address"
62 placeholder="请输入详细地址" /></uni-forms-item>
63
64 <uni-forms-item label="头像" required>
65 <uni-file-picker v-model="photoArr" @delete="delPhoto" return-type="object" limit="1"
66 @select="upPhoto" :del-ico="false" :image-styles="imageStylesTx"></uni-file-picker>
67 <image mode="aspectFill" v-if="baseFormData.photo2" style="height:200rpx;width:200rpx;" :src="config.baseUrl_api + baseFormData.photo2"/>
68 </uni-forms-item>
69 </view>
70 </uni-forms>
71 </view>
72 <view class="agreeline">
73 <image @click="changeAgree(agree)" v-if="agree"
74 :src="config.baseUrl_api+'/fs/static/login/xz_dwn@2x.png'"></image>
75 <image @click="changeAgree(agree)" v-else :src="config.baseUrl_api+'/fs/static/login/xz@2x.png'">
76 </image>
77 <view>我已阅读<text @click="openpopup">《入会须知》</text></view>
78 </view>
79 </view>
80 <view class="fixedBottom"><button class="btn-red" @click="goSubmit">确 定</button></view>
81
82 <!-- 会员须知 -->
83 <uni-popup ref="popup" type="bottom" background-color="#fff" animation :disable-scroll="true" :mask-click="false">
84 <view class="tt">入会须知</view>
85 <view class="popBody">
86 _{{baseFormData.name}}_欢迎您申请成为中国跆拳道协会(以下简称中国跆协)会员,请确保本次申请是经过您本人或监护人授权同意后的自愿行为,请您务必仔细阅读本入会须知。
87 <br />
88 一、中国跆协会员分为个人会员和单位会员。
89 <br />
90 二、成为本协会会员条件:遵守中国跆协章程和协会各项规章制度及相关决议,按期交纳会费,积极支持和参与中国跆拳道事业发展的社会各届人士或地方跆拳道协会、俱乐部、培训机构等,均可自愿申请成为中国跆协会员。<br />
91 三、个人会员为在中国工作和生活的跆拳道爱好者,16 周岁以下应有监护人协助申请,会员须为中国公民。<br />
92 四、会员入会需向所在区域内中国跆协单位会员提出入会申请,并按程序报中国跆协批准,按规定交纳会费。<br />
93 五、会员享有《中国跆拳道协会会员管理办法》规定的会员权利。
94 <br />
95 六、会员应履行《中国跆拳道协会会员管理办法》规定的会员义务。
96 <br />
97 七、凡中国跆协会员,须按照《中国跆拳道协会会员会费标准(2021 版)》按时交纳年度会费。<br />
98 八、会员行为违反《中国跆拳道协会会员管理办法》中规定的,按照相关处罚规定进行处理。<br />
99 九、其它会员相关内容请查看《中国跆拳道协会章程》《中国跆拳道协会会员管理办法》。<br />
100
101 <button @click="closepopup" class="btn-red">我已阅读</button>
102 </view>
103 </uni-popup>
104
105 <uni-popup ref="infoConfirm" type="center" :disable-scroll="true" :mask-click="false">
106 <view class="tt">确认信息</view>
107 <view class="popBody">
108 <view>
109
110 </view>
111
112 <button @click="closepopup" class="btn-red">已确认</button>
113 </view>
114 </uni-popup>
115
116 </view>
117 </template>
118
119 <script setup>
120 import {
121 ref
122 } from 'vue'
123 import * as api from '@/common/api.js'
124 import {
125 onLoad
126 } from '@dcloudio/uni-app'
127 import config from '@/config.js'
128 import * as aes2 from '@/common/utils.js'
129 const current = ref(0)
130 const popup = ref(null)
131 const infoConfirm = ref(null)
132 const agree = ref(false)
133 const perId = ref()
134 const photoArr = ref({})
135 const regionsList = ref([])
136 const cardObj = ref({})
137 const disabledName = ref(true)
138 const baseFormData = ref({
139 photo: '',
140 sex: '',
141 idcType: '0',
142 perType: '1', // (1:个人会员;2:教练;3:考官;4:裁判;5:临时会员;)
143 })
144 const items = ref(['身份证添加', '证件照录入'])
145 const idcTypeList = ref([{
146 value: '0',
147 text: "身份证"
148 },
149 {
150 value: '1',
151 text: "来往大陆(内地)通行证"
152 },
153 {
154 value: '3',
155 text: "护照"
156 }, {
157 value: '4',
158 text: '户口本'
159 }, {
160 value: '5',
161 text: '香港身份证'
162 }
163 ])
164 const sexs = ref([{
165 text: '女',
166 value: '1'
167 }, {
168 text: '男',
169 value: '0'
170 }])
171 const placeholderStyle = ref('text-align: right;font-size:30rpx')
172 const inputstyle = ref({
173 borderColor: '#fff',
174 fontSize: '30rpx'
175 })
176 const imageStylesTx = ref({
177 width: '210rpx',
178 height: '280rpx',
179 background: {
180 color: '#F4F6FA'
181 },
182 border: {
183 radius: '2px'
184 }
185 });
186
187 const imageStylesZJ = ref({
188 width: '500rpx',
189 height: '316rpx'
190 });
191 onLoad((option) => {
192 if (option.tab == '1') {
193 current.value = 1
194 baseFormData.value.sourceFlag = 1
195 baseFormData.value.idcType = option.idcType || 0
196 if (baseFormData.value.idcType == '3') {
197 disabledName.value = false
198 } else {
199 disabledName.value = true
200 }
201 }
202 // console.log(current.value,option.tab)
203 getRegionsList()
204 })
205
206 function getRegionsList() {
207 api.regionsList().then(res => {
208 regionsList.value = res.data
209 })
210 }
211
212 function onClickItem(e) {
213 if (current.value != e.currentIndex) {
214 current.value = e.currentIndex
215 }
216 cardObj.value = {}
217 photoArr.value = {}
218 if (current.value == 0) {
219 baseFormData.value = {
220 photo: '',
221 idcType: '0',
222 perType: '1'
223 }
224 } else {
225 baseFormData.value = {
226 photo: '',
227 idcType: '0',
228 perType: '1',
229 sourceFlag: 1
230 }
231 }
232 }
233
234
235 function changeAgree(item) {
236 agree.value = !item
237 }
238
239 //身份证识别
240 function upIdCardImgFront(e) {
241 let file = e.tempFiles[0]
242 if (!file) {
243 return
244 }
245 uni.showLoading({
246 title: '加载中'
247 });
248 baseFormData.value.card = e.tempFiles;
249 // console.log(e)
250 // const formData = new FormData()
251 // formData.append('pic', e.tempFiles[0].file)
252 api.carUrl(e.tempFilePaths[0], baseFormData.value.idcType).then(res => {
253 console.log(res)
254 if (res.data) {
255 baseFormData.value.sex = res.data.sex
256 baseFormData.value.birth = res.data.birth
257 baseFormData.value.idcCode = res.data.code
258 baseFormData.value.name = res.data.name
259 baseFormData.value.uuid = res.data.uuid
260 baseFormData.value.cityId = res.data.cityId
261 baseFormData.value.address = res.data.address
262 photoArr.value = {}
263 getExtractInfo({
264 idcCode: baseFormData.value.idcCode,
265 idcType: baseFormData.value.idcType,
266 perType: baseFormData.value.perType
267 })
268
269 } else {
270 uni.hideLoading()
271 uni.showModal({
272 content: res.msg,
273 success: function(modalRes) {
274
275 }
276 })
277 }
278
279 })
280 }
281
282 function upPhoto(e) {
283 const tempFilePaths = e.tempFilePaths;
284 const imgUrl = tempFilePaths[0]
285 if (!imgUrl) {
286 return
287 }
288 wx.cropImage({
289 src: imgUrl,
290 cropScale: '4:5',
291 success: function(resp) {
292 uni.showLoading({
293 title: '加载中'
294 });
295 api.uploadImgCorpPhoto(resp.tempFilePath).then(data => {
296 console.log(data)
297 baseFormData.value.photo = data.data.fang;
298 baseFormData.value.photo2 = data.data.yuan;
299 photoArr.value = {
300 url: config.baseUrl_api+baseFormData.value.photo,
301 name: '头像',
302 extname: 'jpg'
303 }
304 });
305 },
306 fail: function(err) {
307 photoArr.value = {}
308 }
309 })
310
311
312 }
313
314
315 function delimgFont(n) {
316 photoArr.value = {}
317 cardObj.value = {}
318 baseFormData.value = {
319 photo: '',
320 idcType: baseFormData.value.idcType,
321 perType: '1',
322 sourceFlag: 1
323 };
324 }
325
326
327 function delPhoto(n) {
328 photoArr.value = {};
329 baseFormData.value.photo = '';
330 baseFormData.value.photo2 = '';
331 }
332
333
334 function getExtractInfo(obj) {
335 photoArr.value = {}
336 // baseFormData.value = {
337 // photo: '',
338 // idcType: baseFormData.value.idcType,
339 // idcCode: baseFormData.value.idcCode,
340 // perType: '1'
341 // };
342 uni.showLoading({
343 title: '加载中'
344 })
345 api.extractInfoFromChinaIdCard(obj).then(res => {
346 if (res.data.perCode) {
347 // if(baseFormData.value.idcType != 3){
348 disabledName.value = true
349 // }
350 perId.value = res.data.perId
351 baseFormData.value.sex = res.data.sex
352 baseFormData.value.birth = res.data.birth
353 baseFormData.value.name = res.data.name
354 baseFormData.value.phone = res.data.phone
355 baseFormData.value.cityId = res.data.cityId
356 baseFormData.value.address = res.data.address
357 if (res.data.photo) {
358 console.log(res.data.photo)
359 if (res.data.photo.indexOf('http') == -1) {
360 baseFormData.value.photo = res.data.photo
361 let obj = {
362 url: config.baseUrl_api + res.data.photo,
363 name: '头像',
364 extname: 'jpg'
365 }
366 photoArr.value = obj
367 } else {
368 baseFormData.value.photo = res.data.photo
369 let obj = {
370 url: res.data.photo,
371 name: '头像',
372 extname: 'jpg'
373 }
374 photoArr.value = obj
375 }
376
377 }
378 // baseFormData.value.name = res.data.name
379 baseFormData.value.perId = res.data.perId
380 console.log(res.data.photo, baseFormData.value.photo)
381 uni.hideLoading()
382 } else {
383 uni.hideLoading()
384 // 新会员
385 if (res.data.sex) {
386 baseFormData.value.sex = res.data.sex
387 baseFormData.value.birth = res.data.birth
388 }
389 if (baseFormData.value.idcType != 3 && current.value == 1) {
390 disabledName.value = true
391 } else {
392 disabledName.value = false
393 }
394 return
395 }
396 })
397 }
398
399
400 function giveBirthDay() {
401 // 判断身份证正确性/赋值生日
402 if (baseFormData.value.idcType == 0) {
403 if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(baseFormData.value.idcCode))) {
404 uni.showToast({
405 title: '请输入正确的身份证号码',
406 duration: 2000,
407 icon: 'none'
408 })
409 } else {
410 getExtractInfo({
411 idcCode: baseFormData.value.idcCode,
412 idcType: baseFormData.value.idcType,
413 perType: baseFormData.value.perType
414 })
415 }
416 }
417 // if (baseFormData.value.idcType == 1 || baseFormData.value.idcType == 3) {
418 // //转换为大写并判断位数12
419 // baseFormData.value.idcCode = baseFormData.value.idcCode.toUpperCase()
420 // // var regex = /^[a-zA-Z]/
421 // if (baseFormData.value.idcCode.length > 12) {
422 // uni.showToast({
423 // icon: 'none',
424 // title: '请输入正确的证件号',
425 // duration: 2000
426 // })
427 // return
428 // }
429 // }
430 }
431
432
433 function openpopup() {
434 popup.value.open()
435 }
436
437
438 function closepopup() {
439 agree.value = true
440 popup.value.close()
441 }
442
443
444 function changeIdcType(e) {
445 console.log(e)
446 // 切换证件照类型把当前页面数据清空
447 cardObj.value = {}
448 photoArr.value = {}
449 baseFormData.value = {
450 photo: '',
451 idcType: e,
452 perType: '1',
453 sourceFlag: 1
454 }
455 }
456
457
458 function goSubmit() {
459
460 if (!agree.value) {
461 uni.showToast({
462 icon: 'none',
463 title: '请阅知入会须知',
464 duration: 2000
465 });
466 return
467 }
468 // 验证必填项
469 if (!baseFormData.value.name) {
470 uni.showToast({
471 title: `请输入姓名`,
472 icon: 'none'
473 })
474 return
475 }
476 if (!baseFormData.value.idcCode) {
477 uni.showToast({
478 title: `请输入证件号码`,
479 icon: 'none'
480 })
481 return
482 }
483 console.log(baseFormData.value.photo)
484 if (baseFormData.value.photo == '' || baseFormData.value.photo == undefined || !baseFormData.value.photo) {
485 uni.showToast({
486 title: `请上传头像`,
487 icon: 'none'
488 })
489 return
490 }
491 //信息确认弹出
492 uni.showModal({
493 content: '请确认信息正确',
494 success: function(res) {
495 if (res.confirm) {
496 if(baseFormData.value.idcType=='4'){
497 baseFormData.value.idcType='0'
498 }
499 delete baseFormData.value.card
500
501 const time = new Date().valueOf() + ''
502 baseFormData.value.t = time + Math.floor(Math.random() * 10)
503 baseFormData.value.signT = aes2.AESEncrypt(baseFormData.value.idcType + time)
504 const baseFormDataJson = encodeURIComponent(JSON.stringify(baseFormData.value))
505 uni.navigateTo({
506 url: `/personal/goPay_per?baseFormData=${baseFormDataJson}`
507 })
508
509 // uni.showModal({
510 // content: '保存成功',
511 // title: '提示',
512 // confirmText:'去支付',
513 // cancelColor:'个人中心',
514 // success: function(res) {
515
516 // },
517 // fail:function(){
518 // uni.reLaunch({
519 // url:`/personal/home`
520 // })
521 // }
522 // })
523 // api.addPersonToMyDept(baseFormData.value).then(Response => {
524 // if (Response.data == 0) {
525 // let msg = '该成员,实名认证未通过,注册失败!'
526 // uni.showModal({
527 // content: msg,
528 // title: '提示',
529 // success: function() {}
530 // })
531 // return
532 // }
533 // if (Response.data * 1 < 0) {
534 // // 会员调入弹出
535 // uni.showModal({
536 // content: '该会员已存在其他道馆,如需添加,请发起会员调动',
537 // title: '提示',
538 // success: function() {}
539 // })
540 // return
541 // }
542 // // let msg = '保存成功'
543
544
545 // })
546 }
547 }
548 });
549 }
550 function getUserInfo() {
551 api.getInfo(perId.value).then(res => {
552 baseFormData.value = res.data
553 if (baseFormData.areaAssName) baseFormData.ancestorNameList = baseFormData.value.ancestorNameList.join(
554 ',').replaceAll(',',
555 '/')
556 })
557 }
558 </script>
559
560 <style lang="scss">
561
562 /* 字段名左对齐 */
563 .uni-forms-item .uni-forms-item__label {
564 text-align: left !important;
565 justify-content: flex-start !important;
566 padding-left: 0 !important;
567 width: auto !important;
568 }
569
570 /* 内容右对齐 */
571 .uni-forms-item .uni-forms-item__content {
572 display: flex !important;
573 align-items: center !important;
574 justify-content: flex-end !important;
575 text-align: right !important;
576 flex-wrap: nowrap !important;
577 }
578
579 /* 输入框内容右对齐 */
580 .uni-forms-item .uni-easyinput .uni-easyinput__content-input,
581 .uni-forms-item .uni-easyinput input,
582 .uni-forms-item input,
583 .uni-forms-item .uni-data-select .uni-select__input-box,
584 .uni-forms-item .uni-data-picker .uni-data-picker__input-box {
585 text-align: right !important;
586 }
587
588 /* 文本内容右对齐 */
589 .uni-forms-item .uni-forms-item__content text,
590 .uni-forms-item .uni-forms-item__content > text {
591 display: inline-block !important;
592 white-space: nowrap !important;
593 }
594
595 </style>
596
597 <style lang="scss" scoped>
598 :deep(.uni-popup__mask) {
599 overflow: hidden !important;
600 position: fixed !important;
601 top: 0;
602 left: 0;
603 right: 0;
604 bottom: 0;
605 }
606 :deep(.uni-popup) {
607 overflow: hidden !important;
608 }
609 :deep(.segmented-control) {
610 height: 100rpx;
611 }
612
613 :deep(.segmented-control__text) {
614 line-height: 2;
615 font-size: 30rpx;
616 }
617
618 .tt {
619 text-align: center;
620 font-size: 30rpx;
621 padding: 40rpx 0 0;
622 }
623
624 .popBody {
625 font-size: 28rpx;
626 line-height: 1.5;
627 height: 70vh;
628 overflow-y: auto;
629 font-family: 华文仿宋;
630 height: 80vh;
631 overflow: auto;
632 padding: 30rpx;
633
634 .btn-red {
635 margin: 50rpx 0 30rpx;
636 }
637 }
638
639 .agreeline {
640 padding: 20rpx 40rpx;
641 box-sizing: border-box;
642 display: flex;
643 font-size: 30rpx;
644
645
646 text {
647 color: #014A9F;
648 }
649
650 image {
651 width: 40rpx;
652 height: 40rpx;
653 margin-right: 20rpx;
654 }
655 }
656
657 .upCard {
658 position: relative;
659 width: 500rpx;
660 height: 316rpx;
661
662 .uni-file-picker {
663 position: absolute;
664 z-index: 1;
665 }
666
667 .sfz {
668 width: 476rpx;
669 position: absolute;
670 top: 0;
671 left: 0;
672 height: 293rpx;
673 }
674 }
675
676 .op0 {
677 opacity: 0;
678 }
679
680
681 :deep(.item-text-overflow) {
682 text-align: left;
683 }
684 :deep(.fixUniFormItemStyle .uni-data-picker__input-box) {
685 justify-content: flex-start !important;
686 text-align: left !important;
687 }
688
689 /* 让地区选择器的文本左对齐 */
690 :deep(.fixUniFormItemStyle .uni-data-picker__text) {
691 text-align: left !important;
692 }
693 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <view class="container">
3 <view class="content">
4 <view class="card">
5 <view class="yearRow">
6 <view class="label">缴费年限</view>
7 <view class="control">
8 <image class="icon" @click="minusYear" src="/static/dd_02.png" mode="widthFix" v-if="form.payYear > 1" ></image>
9 <image class="icon" src="/static/dd_02_g.png" mode="widthFix" v-else ></image>
10 <text class="num">{{ form.payYear }}</text>
11 <image class="icon" src="/static/btn_03.png" mode="widthFix" @click="plusYear" v-if="form.payYear < 5" ></image>
12 <image class="icon" src="/static/btn_03_g.png" mode="widthFix" v-else ></image>
13 </view>
14 </view>
15 </view>
16
17 <view class="card ">
18 <view class="row ">
19 <text class="label">费用合计</text>
20 <text class="value red">{{ form.payYear * memberFee }}</text>
21 </view>
22
23 </view>
24
25 <view class="payRow ">
26 <radio-group @change="onPayTypeChange">
27 <label class="radioItem">
28 <radio value="1" :checked="payType === '1'" class="custom-radio" />
29 <view class="payInfo">
30 <image class="icon" src="/static/min.png" mode="widthFix"></image>
31 <text>民生付</text>
32 </view>
33 </label>
34 </radio-group>
35 </view>
36
37 <view class="totalRow ">
38 <text class="label">支付费用合计</text>
39 <text class="value redBig">{{ memberTotalFee }}</text>
40 </view>
41
42 </view>
43
44 <view class="bottomBtn">
45 <button class="payBtn" @click="handelPay" :loading="isPaying">立即支付 ¥{{ memberTotalFee }}</button>
46 </view>
47
48 </view>
49 </template>
50
51 <script setup>
52 import { ref, computed, onMounted } from 'vue'
53 import { onLoad } from '@dcloudio/uni-app';
54 import * as api from '@/common/api.js'
55
56 const form = ref({
57 payYear: 1
58 })
59
60 // 支付方式
61 const payType = ref('1')
62 const isPaying = ref(false)
63
64 // 费用与优惠
65 const memberFee = ref(0)
66 const memberTotalFee = computed(() => {
67 return memberFee.value * form.value.payYear
68
69 })
70 onLoad((options) => {
71 if (options.baseFormData) {
72 const data = JSON.parse(decodeURIComponent(options.baseFormData))
73 form.value = {
74 ...data,
75 payYear: 1 // 年限默认1
76 }
77 }
78 // 初始化接口
79 getMyMemberCertUnitFeeApi()
80 })
81
82
83
84 // 减年限
85 const minusYear = () => {
86 if (form.value.payYear > 1) {
87 form.value.payYear--
88 }
89 }
90
91 // 加年限(最大 5 年)
92 const plusYear = () => {
93 if (form.value.payYear < 5) {
94 form.value.payYear++
95 }
96 }
97
98 // 支付方式切换
99 const onPayTypeChange = (e) => {
100 payType.value = e.detail.value
101 }
102
103 const handelPay = async () => {
104 if (memberTotalFee.value <= 0) {
105 uni.showToast({ title: '支付金额异常', icon: 'none' })
106 return
107 }
108
109 isPaying.value = true
110 try {
111 // 拼接完整参数
112 const postData = {
113 ...form.value,
114 payYear: form.value.payYear,
115 payType: payType.value,
116 totalFee: memberTotalFee.value
117 }
118
119 const res = await api.insertSinglePay(postData)
120 console.log(777,res)
121 if (res.data?.orderId) {
122 api.pcallBack2(res.data.orderId)
123 uni.navigateTo({
124 url: `/personal/sucPay`
125 })
126 }
127 // if (data.payFlag == 0 || data.orderId) {
128 // data.orderId && api.callBack2(data.orderId)
129 // uni.navigateTo({ url: `/personal/submitPay?price=${res.data.price}` })
130 // }
131 } catch (err) {
132 uni.showToast({ title: '支付失败', icon: 'none' })
133 } finally {
134 isPaying.value = false
135 }
136 }
137
138
139
140 // 获取会员费
141 async function getMyMemberCertUnitFeeApi() {
142 const res = await api.getZtxFeeConfig()
143 memberFee.value = Number(res.data.personMemberFee || 1500)
144 }
145
146 </script>
147
148 <style scoped>
149 .container {
150 min-height: 100vh;
151 background-color: #f7f7f7;
152 }
153 .content {
154 padding: 20rpx 20rpx 120rpx;
155 }
156 .card {
157 background: #fff;
158 border-radius: 8rpx;
159 padding: 25rpx 20rpx;
160 margin-bottom: 20rpx;
161 }
162 .yearRow {
163 display: flex;
164 align-items: center;
165 justify-content: space-between;
166 margin-bottom: 20rpx;
167 }
168 .yearRow .label {
169 font-size: 28rpx;
170 color: #333;
171 }
172 .yearRow .control {
173 display: flex;
174 align-items: center;
175 }
176 .control image {
177 width: 50rpx;
178 height: 50rpx;
179 }
180 .yearRow .num {
181 font-size: 28rpx;
182 color: #333;
183 min-width: 80rpx;
184 text-align: center;
185 margin: 0 10rpx;
186 }
187 .row {
188 display: flex;
189 justify-content: space-between;
190 align-items: center;
191 }
192 .row .label {
193 font-size: 28rpx;
194 color: #333;
195 }
196 .row .value {
197 font-size: 30rpx;
198 color: #C4121B;
199 font-weight: 500;
200 }
201 .hintRow {
202 display: flex;
203 align-items: flex-start;
204 font-size: 24rpx;
205 line-height: 1.4;
206 }
207 .hintRow .hintText {
208 color: #FF8124;
209 flex: 1;
210 margin-top: 10rpx;
211 }
212 .deductRow {
213 background: #fff;
214 padding: 20rpx 20rpx;
215 display: flex;
216 justify-content: space-between;
217 align-items: center;
218 margin-bottom: 10rpx;
219 border-radius: 8rpx;
220 }
221 .deductRow .label {
222 font-size: 28rpx;
223 color: #333;
224 }
225 .deductRow .value {
226 font-size: 30rpx;
227 color: #C4121B;
228 }
229 .payRow {
230 background: #fff;
231 border-radius: 8rpx;
232 padding: 20rpx 20rpx;
233 margin-bottom: 20rpx;
234 }
235 .radioItem {
236 display: flex;
237 align-items: center;
238 }
239 .payInfo {
240 display: flex;
241 align-items: center;
242 margin-left: 15rpx;
243 }
244 .payInfo .icon {
245 width: 40rpx;
246 height: 40rpx;
247 margin-right: 10rpx;
248 }
249 .payInfo text {
250 font-size: 28rpx;
251 color: #333;
252 }
253 .totalRow {
254 background: #fff;
255 border-radius: 8rpx;
256 padding: 20rpx 20rpx;
257 display: flex;
258 justify-content: space-between;
259 align-items: center;
260 margin-top: 10rpx;
261 }
262 .totalRow .label {
263 font-size: 28rpx;
264 color: #333;
265 }
266 .redBig {
267 font-size: 32rpx;
268 color: #C4121B;
269 font-weight: bold;
270 }
271 .bottomBtn {
272 position: fixed;
273 bottom: 0;
274 left: 0;
275 right: 0;
276 padding: 20rpx 20rpx;
277 background: #fff;
278 border-top: 1rpx solid #eee;
279 }
280 .payBtn {
281 width: 100%;
282 height: 88rpx;
283 line-height: 88rpx;
284 background-color: #C4121B;
285 color: #fff;
286 border-radius: 8rpx;
287 font-size: 32rpx;
288 text-align: center;
289 border: none;
290 }
291 .payBtn[disabled] {
292 background-color: #ccc;
293 color: #999;
294 }
295 .red {
296 color: #C4121B;
297 }
298 .icon{
299 width:30px;
300 }
301 ::v-deep .custom-radio .wx-radio-input {
302 width: 30rpx;
303 height: 30rpx;
304 border-radius: 50%;
305 border: 2rpx solid #ccc;
306 }
307 ::v-deep .custom-radio .wx-radio-input.wx-radio-input-checked {
308 border-color: #C4121B !important;
309 background: #C4121B !important;
310 }
311 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <view class="page-container">
3 <view class="top-section">
4 <!-- 用户信息 -->
5 <view class="user-info">
6 <view class="avatar">
7 <view class="avatar-placeholder">📄</view>
8 </view>
9 <view class="user-desc">注册会员8709745760778985472</view>
10 </view>
11
12 <!-- 会员卡片 -->
13 <view class="member-card">
14 <view class="card-header">
15 <view class="card-name">江行知</view>
16 <view class="bind-btn">绑定学员 ⇄</view>
17 </view>
18 <view class="card-id">证件号:360681201804040811</view>
19
20 <view class="card-func">
21 <view class="func-item" @click="goToInfo">
22 <view class="func-icon"></view>
23 <view class="func-text">人员信息</view>
24 </view>
25 <view class="func-item">
26 <view class="func-icon"></view>
27 <view class="func-text">参赛能力认证</view>
28 </view>
29 <view class="func-item">
30 <view class="func-icon">🏆</view>
31 <view class="func-text">成绩查询</view>
32 </view>
33 <view class="func-item">
34 <view class="func-icon"></view>
35 <view class="func-text">参赛记录</view>
36 </view>
37 </view>
38 </view>
39 </view>
40
41 <view class="bottom-section">
42 <view class="info-title">
43 <view class="title-line"></view>
44 <text>人员信息</text>
45 </view>
46
47 <view class="info-list">
48 <view class="info-item">
49 <view class="item-label">姓名</view>
50 <view class="item-value">江行知</view>
51 </view>
52 <view class="info-item">
53 <view class="item-label">国籍</view>
54 <view class="item-value">中国</view>
55 </view>
56 <view class="info-item">
57 <view class="item-label">证件类型</view>
58 <view class="item-value">身份证</view>
59 </view>
60 <view class="info-item">
61 <view class="item-label">身份证号</view>
62 <view class="item-value">360681201804040811</view>
63 </view>
64 <view class="info-item">
65 <view class="item-label">生日</view>
66 <view class="item-value">2018-04-04</view>
67 </view>
68 </view>
69 </view>
70 </view>
71 </template>
72
73 <script setup>
74 import { ref } from 'vue'
75
76 const userInfo = ref({
77 memberNo: '8709745760778985472',
78 name: '江行知',
79 idCard: '360681201804040811',
80 nationality: '中国',
81 idType: '身份证',
82 birthday: '2018-04-04'
83 })
84
85 const goToInfo = () => {
86 console.log('跳转到人员信息页')
87 }
88 </script>
89
90 <style lang="scss" scoped>
91 .page-container {
92 min-height: 100vh;
93 background: linear-gradient(180deg, #FFF9E8 0%, #FFFFFF 100%);
94 padding: 0 30rpx;
95 box-sizing: border-box;
96 }
97
98 .top-section {
99 padding-top: 40rpx;
100 }
101
102 .header {
103 display: flex;
104 justify-content: space-between;
105 align-items: center;
106 margin-bottom: 40rpx;
107 }
108
109 .title {
110 font-size: 36rpx;
111 font-weight: 500;
112 color: #333;
113 margin: 0 auto;
114 position: absolute;
115 left: 50%;
116 transform: translateX(-50%);
117 }
118
119 .more-btn {
120 display: flex;
121 align-items: center;
122 gap: 20rpx;
123 margin-left: auto;
124 background: #FFFFFF;
125 padding: 10rpx 20rpx;
126 border-radius: 40rpx;
127 }
128
129 .dots {
130 font-size: 32rpx;
131 color: #666;
132 line-height: 1;
133 }
134
135 .circle {
136 width: 40rpx;
137 height: 40rpx;
138 border-radius: 50%;
139 border: 2rpx solid #666;
140 position: relative;
141 &::after {
142 content: '';
143 position: absolute;
144 top: 50%;
145 left: 50%;
146 transform: translate(-50%, -50%);
147 width: 16rpx;
148 height: 16rpx;
149 border-radius: 50%;
150 background: #666;
151 }
152 }
153
154 .user-info {
155 display: flex;
156 align-items: center;
157 gap: 30rpx;
158 margin-bottom: 40rpx;
159 }
160
161 .avatar {
162 width: 120rpx;
163 height: 120rpx;
164 border-radius: 50%;
165 background: #F5F5F5;
166 display: flex;
167 align-items: center;
168 justify-content: center;
169 font-size: 48rpx;
170 border: 4rpx solid #E8E8E8;
171 }
172
173 .avatar-placeholder {
174 color: #999;
175 }
176
177 .user-desc {
178 font-size: 36rpx;
179 color: #333;
180 font-weight: 500;
181 }
182
183 /* 会员卡片 */
184 .member-card {
185 background: linear-gradient(135deg, #F7E090 0%, #E6C560 100%);
186 border-radius: 24rpx;
187 padding: 40rpx;
188 position: relative;
189 overflow: hidden;
190 margin-bottom: 30rpx;
191
192 &::before {
193 content: '';
194 position: absolute;
195 top: 0;
196 left: 0;
197 right: 0;
198 bottom: 0;
199 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');
200 background-size: cover;
201 z-index: 0;
202 }
203 }
204
205 .card-header {
206 display: flex;
207 justify-content: space-between;
208 align-items: center;
209 margin-bottom: 20rpx;
210 position: relative;
211 z-index: 1;
212 }
213
214 .card-name {
215 font-size: 40rpx;
216 font-weight: bold;
217 color: #222;
218 }
219
220 .bind-btn {
221 font-size: 28rpx;
222 color: #666;
223 }
224
225 .card-id {
226 font-size: 28rpx;
227 color: #555;
228 margin-bottom: 40rpx;
229 position: relative;
230 z-index: 1;
231 }
232
233 /* 功能入口 */
234 .card-func {
235 display: flex;
236 justify-content: space-between;
237 position: relative;
238 z-index: 1;
239 }
240
241 .func-item {
242 display: flex;
243 flex-direction: column;
244 align-items: center;
245 gap: 10rpx;
246 cursor: pointer;
247 }
248
249 .func-icon {
250 width: 60rpx;
251 height: 60rpx;
252 border-radius: 12rpx;
253 display: flex;
254 align-items: center;
255 justify-content: center;
256 font-size: 32rpx;
257 color: #333;
258 }
259
260 .func-text {
261 font-size: 28rpx;
262 color: #333;
263 font-weight: 500;
264 }
265
266 /* ========== 下半部分:人员信息 ========== */
267 .bottom-section {
268 background: #FFFFFF;
269 border-radius: 24rpx 24rpx 0 0;
270 padding: 30rpx;
271 margin-top: 20rpx;
272 }
273
274 .info-title {
275 display: flex;
276 align-items: center;
277 gap: 16rpx;
278 margin-bottom: 30rpx;
279 font-size: 36rpx;
280 font-weight: 500;
281 color: #333;
282 }
283
284 .title-line {
285 width: 12rpx;
286 height: 32rpx;
287 background: #E6C560;
288 border-radius: 4rpx;
289 }
290
291 .info-list {
292 display: flex;
293 flex-direction: column;
294 gap: 30rpx;
295 }
296
297 .info-item {
298 display: flex;
299 justify-content: space-between;
300 align-items: center;
301 padding-bottom: 30rpx;
302 border-bottom: 1rpx solid #F0F0F0;
303
304 &:last-child {
305 border-bottom: none;
306 padding-bottom: 0;
307 }
308 }
309
310 .item-label {
311 font-size: 32rpx;
312 color: #333;
313 font-weight: 500;
314 }
315
316 .item-value {
317 font-size: 32rpx;
318 color: #999;
319 }
320
321 /* 底部固定按钮(可选) */
322 .fixedBottom {
323 position: fixed;
324 bottom: 0;
325 left: 0;
326 right: 0;
327 padding: 20rpx 30rpx;
328 background: #FFFFFF;
329 border-top: 1rpx solid #F0F0F0;
330 }
331
332 .btn-red {
333 width: 100%;
334 height: 88rpx;
335 line-height: 88rpx;
336 background: #C40F18;
337 color: #FFFFFF;
338 border-radius: 12rpx;
339 font-size: 32rpx;
340 font-weight: 500;
341 border: none;
342 }
343 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <view class="pay-order-container">
3
4
5 <view class="order-info">
6
7 <view class="info-item total-price">
8 <text class="label">支付总费用:</text>
9 <text class="value red">{{ price ?? 0 }}</text>
10 </view>
11 </view>
12
13 <view class="pay-type-section">
14 <text class="section-title">选择支付方式</text>
15 <radio-group :value="payType" @change="handlePayTypeChange">
16 <label class="radio-item">
17 <radio value="0" color="#E60012" :checked="payType === '0'" />
18 <view class="pay-method">
19 <image class="icon" src="/static/min.png" mode="widthFix"></image>
20 <text class="pay-name">民生付</text>
21 </view>
22 </label>
23 </radio-group>
24 </view>
25
26 <!-- 底部支付按钮 -->
27 <view class="fixed-bottom">
28 <button class="pay-btn red-bg" :loading="payLoading" @click="handlePay">立即支付</button>
29 </view>
30 </view>
31 </template>
32
33 <script setup>
34 import { ref } from 'vue'
35 import { onLoad } from '@dcloudio/uni-app';
36 import * as api from '@/common/api.js'
37
38 // 核心数据
39 const formData = ref({}) // 订单统计数据
40 const price = ref('') // 核心业务ID
41 const payType = ref('0') // 支付方式(默认0=民生付)
42 const payLoading = ref(false) // 支付按钮加载状态
43
44 // 页面加载接收参数
45 onLoad(async (options) => {
46 console.log('订单ID:', options.price)
47 if (options.price) {
48 price.value = options.price
49 }
50 })
51
52
53 // 支付方式切换
54 function handlePayTypeChange(e) {
55 payType.value = e.detail.value
56 }
57
58 // 立即支付核心逻辑
59 async function handlePay() {
60
61
62 try {
63 payLoading.value = true
64 const res = await api.goPay()
65
66 if (res.data?.orderId) {
67 api.pcallBack2(res.data.orderId)
68 uni.navigateTo({
69 url: `/personal/sucPay`
70 })
71 }
72
73 // 跳转到支付成功页
74
75 } catch (err) {
76 const errMsg = err?.data?.msg || err?.message || '支付失败,请稍后重试'
77 uni.showToast({ title: errMsg, icon: 'none' })
78 } finally {
79 payLoading.value = false
80 }
81 }
82 </script>
83
84 <style scoped lang="scss">
85 .pay-order-container {
86 padding: 30rpx;
87 background-color: #fff;
88 min-height: 100vh;
89 box-sizing: border-box;
90 }
91 .icon{
92 width:30px;
93 }
94 // 页面头部
95 .page-header {
96 text-align: center;
97 padding: 20rpx 0;
98 border-bottom: 1px solid #eee;
99 margin-bottom: 40rpx;
100
101 .title {
102 font-size: 36rpx;
103 font-weight: 600;
104 color: #333;
105 }
106 }
107
108 // 订单信息区域
109 .order-info {
110 margin-bottom: 60rpx;
111
112 .info-item {
113 display: flex;
114 justify-content: space-between;
115 align-items: center;
116 padding: 25rpx 0;
117 border-bottom: 1px solid #f5f5f5;
118 font-size: 32rpx;
119
120 .label {
121 color: #666;
122 }
123
124 .value {
125 font-weight: 600;
126 font-size: 34rpx;
127 }
128
129 .red {
130 color: #E60012;
131 }
132 }
133
134 .total-price {
135 border-bottom: none;
136 margin-top: 10rpx;
137
138 .label {
139 font-size: 34rpx;
140 color: #333;
141 }
142
143 .value {
144 font-size: 38rpx;
145 }
146 }
147 }
148
149 // 支付方式区域
150 .pay-type-section {
151 margin-bottom: 80rpx;
152
153 .section-title {
154 font-size: 32rpx;
155 color: #333;
156 margin-bottom: 20rpx;
157 display: block;
158 }
159
160 .radio-item {
161 display: flex;
162 align-items: center;
163 font-size: 32rpx;
164 padding: 10rpx 0;
165
166 .pay-method {
167 display: flex;
168 align-items: center;
169 margin-left: 10rpx;
170
171 .pay-name {
172 font-size: 32rpx;
173 margin-left: 20rpx;
174 color: #333;
175 }
176 }
177 }
178 }
179
180 // 底部支付按钮
181 .fixed-bottom {
182 position: fixed;
183 bottom: 0;
184 left: 0;
185 right: 0;
186 padding: 20rpx 30rpx 30rpx;
187 background-color: #fff;
188 border-top: 1px solid #eee;
189
190 .pay-btn {
191 width: 100%;
192 height: 88rpx;
193 line-height: 88rpx;
194 border-radius: 44rpx;
195 font-size: 34rpx;
196 font-weight: 600;
197 }
198
199 .red-bg {
200 background-color: #E60012;
201 color: #fff;
202 }
203 }
204 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <view class="success-container">
3 <!-- 成功图标(渐变圆形+动效) -->
4 <view class="success-icon">
5 <view class="icon-circle">
6 <text class="check-icon"></text>
7 </view>
8 </view>
9
10 <!-- 支付成功标题(动画) -->
11 <view class="success-title">支付成功</view>
12 <view class="success-subtitle">支付成功,请等待审核</view>
13
14 <!-- 订单信息卡片(带阴影) -->
15 <view class="info-card">
16 <view class="info-item">
17 <text class="label">付款账户</text>
18 <text class="value">(5437)</text>
19 </view>
20 <view class="info-item">
21 <text class="label">交易流水号</text>
22 <text class="value">2205051351076117833</text>
23 </view>
24 <view class="info-item">
25 <text class="label">商户名称</text>
26 <text class="value">中国跆拳道协会</text>
27 </view>
28 <view class="info-item">
29 <text class="label">订单金额</text>
30 <text class="value amount">1500.00元</text>
31 </view>
32 <view class="info-item">
33 <text class="label">会员编号</text>
34 <text class="value">CTA00004</text>
35 </view>
36 <view class="info-item">
37 <text class="label">会员有效期</text>
38 <text class="value">2028年1月25日</text>
39 </view>
40 </view>
41
42 <!-- 确定按钮(渐变+动效) -->
43 <view class="confirm-btn-area">
44 <button class="confirm-btn" @click="goBack">确定</button>
45 </view>
46 </view>
47 </template>
48
49 <script setup>
50 import { onLoad } from '@dcloudio/uni-app'
51 const goBack = () => {
52 uni.navigateTo({
53 url: `/personal/home`
54 })
55 }
56
57 onLoad((option) => {
58 })
59 </script>
60
61 <style scoped>
62 /* 全局容器 */
63 .success-container {
64 display: flex;
65 flex-direction: column;
66 align-items: center;
67 padding: 100rpx 40rpx 60rpx;
68 min-height: 100vh;
69 background-color: #f8f9fa;
70 box-sizing: border-box;
71 }
72
73 /* 成功图标容器 */
74 .success-icon {
75 margin-bottom: 40rpx;
76 animation: fadeIn 0.6s ease-out;
77 }
78
79 /* 渐变圆形背景 */
80 .icon-circle {
81 width: 180rpx;
82 height: 180rpx;
83 border-radius: 50%;
84 /* 青绿色渐变 */
85 background: linear-gradient(135deg, #06c1ae, #04a896);
86 display: flex;
87 align-items: center;
88 justify-content: center;
89 box-shadow: 0 8rpx 30rpx rgba(6, 193, 174, 0.3);
90 /* 轻微上浮动效 */
91 animation: scaleIn 0.8s ease-out;
92 }
93
94 /* 对勾图标 */
95 .check-icon {
96 font-size: 90rpx;
97 color: #ffffff;
98 font-weight: bold;
99 }
100
101 /* 支付成功标题 */
102 .success-title {
103 font-size: 48rpx;
104 font-weight: 700;
105 color: #333333;
106 margin-bottom: 12rpx;
107 animation: slideUp 0.6s ease-out;
108 }
109
110 /* 副标题 */
111 .success-subtitle {
112 font-size: 28rpx;
113 color: #666666;
114 margin-bottom: 60rpx;
115 animation: slideUp 0.8s ease-out;
116 }
117
118 /* 订单信息卡片 */
119 .info-card {
120 width: 100%;
121 background: #ffffff;
122 border-radius: 20rpx;
123 padding: 40rpx 30rpx;
124 box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
125 margin-bottom: 80rpx;
126 animation: fadeIn 1s ease-out;
127 }
128
129 /* 单个信息项 */
130 .info-item {
131 display: flex;
132 justify-content: space-between;
133 align-items: center;
134 padding: 24rpx 0;
135 border-bottom: 1rpx solid #f5f5f5;
136 }
137 /* 最后一项去掉下划线 */
138 .info-item:last-child {
139 border-bottom: none;
140 }
141
142 /* 标签样式 */
143 .label {
144 font-size: 32rpx;
145 color: #666666;
146 }
147
148 /* 值样式 */
149 .value {
150 font-size: 32rpx;
151 color: #333333;
152 text-align: right;
153 }
154 /* 金额特殊样式 */
155 .amount {
156 color: #cd1e27;
157 font-weight: 600;
158 }
159
160 /* 确定按钮区域 */
161 .confirm-btn-area {
162 width: 100%;
163 padding: 0 20rpx;
164 box-sizing: border-box;
165 }
166
167 /* 确定按钮(渐变+动效) */
168 .confirm-btn {
169 width: 100%;
170 height: 90rpx;
171 line-height: 90rpx;
172 /* 按钮渐变背景 */
173 background: #fff;
174 color: #C4121B;
175 font-size: 36rpx;
176 font-weight: 600;
177 border-radius: 45rpx;
178 border: 1px solid #C4121B;
179 animation: slideUp 1s ease-out;
180 /* 禁止默认样式 */
181 position: relative;
182 overflow: hidden;
183 }
184 /* 按钮点击反馈 */
185 .confirm-btn::after {
186 border: none;
187 }
188 .confirm-btn:active {
189 transform: scale(0.98);
190 box-shadow: 0 4rpx 10rpx rgba(6, 193, 174, 0.2);
191 }
192
193 /* 动画定义 */
194 @keyframes fadeIn {
195 0% { opacity: 0; }
196 100% { opacity: 1; }
197 }
198 @keyframes scaleIn {
199 0% { transform: scale(0); }
200 70% { transform: scale(1.1); }
201 100% { transform: scale(1); }
202 }
203 @keyframes slideUp {
204 0% { opacity: 0; transform: translateY(30rpx); }
205 100% { opacity: 1; transform: translateY(0); }
206 }
207 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
21 <text class="add-text">新建缴费</text> 21 <text class="add-text">新建缴费</text>
22 </view> 22 </view>
23 </view> 23 </view>
24 <view style="width:100%;height:20rpx;background-color:#f8f9fa"></view>
24 25
25 <!-- 审核状态筛选 Tab --> 26 <!-- 审核状态筛选 Tab -->
26 <view class="status-tabs"> 27 <view class="status-tabs">
...@@ -341,6 +342,7 @@ onUnmounted(() => { ...@@ -341,6 +342,7 @@ onUnmounted(() => {
341 padding-bottom: 60rpx; 342 padding-bottom: 60rpx;
342 min-height: 100vh; 343 min-height: 100vh;
343 box-sizing: border-box; 344 box-sizing: border-box;
345 margin-top: 20rpx;
344 } 346 }
345 347
346 /* 搜索栏 */ 348 /* 搜索栏 */
...@@ -521,11 +523,6 @@ onUnmounted(() => { ...@@ -521,11 +523,6 @@ onUnmounted(() => {
521 margin:0 8rpx; 523 margin:0 8rpx;
522 border:none; 524 border:none;
523 font-weight: 500; 525 font-weight: 500;
524
525 &:disabled {
526 background: #f0f0f0 !important;
527 color: #ccc !important;
528 }
529 } 526 }
530 527
531 .delete-btn { 528 .delete-btn {
...@@ -541,7 +538,11 @@ onUnmounted(() => { ...@@ -541,7 +538,11 @@ onUnmounted(() => {
541 color:#faad14; 538 color:#faad14;
542 } 539 }
543 } 540 }
544 541 .action-btn[disabled] {
542 background: #f0f0f0 !important;
543 color: #ccc !important;
544 opacity: 0.6 !important;
545 }
545 /* 空状态 */ 546 /* 空状态 */
546 .empty-state { 547 .empty-state {
547 display: flex; 548 display: flex;
......
static/bg.png

64.6 KB

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!