yangchunlong/orico-association
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

活动按钮状态流转

Browse Source
This commit is contained in:
yangchunlong
2026-03-25 15:53:37 +08:00
commit 37346e790f
2762 changed files with 240282 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

414
pages/member/fees/index.vue Normal file
View File

@@ -0,0 +1,414 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 会费缴纳 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="container" :style="{'--theme-color': themeColor, paddingBottom: isShowPay ? '112rpx' : '0'}">
<!-- 标题栏 -->
<title-bar :showBack="true" title="会费缴纳"></title-bar>
<!-- 内容区 -->
<view class="container-main" v-if="loadEnd">
<view class="main-tips" :style="{top: titleBarHeight + 'px', background: '#FFA820'}" v-if="payDetails.apply_member_state.state == 4">会费缴纳审核中</view>
<view class="main-tips" :style="{top: titleBarHeight + 'px', background: '#FF6868'}" v-else-if="payDetails.apply_member_state.state == 5">驳回原因：{{payDetails.reject}}</view>
<view class="main-header">
<view class="header-box">
<view class="box-line flex-direction-column align-items-center">
<view class="free" v-if="payDetails.pay_method == 1">免费</view>
<view class="price" v-else><text>￥</text>{{payDetails.fees}}</view>
<view class="term" v-if="payDetails.apply_member_state.state == 7 && !isShowPay">
<text>暂未开启入会申请，详情请联系客服</text>
</view>
<view class="term" v-else>
<text>期限：</text>
<text v-if="payDetails.apply_member_state.state == 6">{{payDetails.join_time}}</text>
<text v-else>{{nowTime}}</text>
<text>—{{payDetails.expire_time}}</text>
</view>
<view class="level">级别：{{payDetails.level_name}}</view>
</view>
</view>
<view class="header-pocket" :style="{'background-image': 'url('+ iconFees +')'}" v-if="iconFees"></view>
</view>
<view class="main-content">
<view class="content-column">
<view class="column-title">级别介绍</view>
<view class="column-content column-text">
<mp-html :content="payDetails.content"></mp-html>
</view>
</view>
<view class="content-column">
<view class="column-title">缴纳明细</view>
<view class="column-content">
<view class="detail-list" v-if="payDetails.pay_list.length">
<view class="list-item flex align-items-center" v-for="record in payDetails.pay_list" :key="record.order_no">
<view class="item-info flex-item">
<view class="info-name">{{record.pay_method == 2 ? "线上" : "线下"}}-会费缴纳</view>
<view class="info-time">{{record.pay_time}}</view>
</view>
<view class="item-price">{{record.fees}}元</view>
</view>
</view>
<view class="detail-empty" v-else>暂无记录~</view>
</view>
</view>
</view>
<view class="main-footer" v-if="isShowPay">
<view class="footer-btn flex-item" @click="handleRenew()" v-if="payDetails.pay_method == 1">续期</view>
<view class="flex justify-content-between align-items-center" v-else>
<view class="footer-price flex align-items-center">
<view class="unit">￥</view>
<view class="number">{{payDetails.fees}}</view>
</view>
<view class="footer-btn flex-item" @click="toPayment">会费缴纳</view>
</view>
<view class="safe-padding"></view>
</view>
</view>
</view>
</template>
<script>
import { mapState } from "vuex"
import svgData from "@/common/svg.js"
export default {
data() {
return {
// 加载完成
loadEnd: false,
// 标题栏高度
titleBarHeight: 0,
// 会费缴纳详情
payDetails: {},
// 当前时间
nowTime: "",
// 是否可以支付
isShowPay: false,
}
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
iconFees: state => {
return svgData.svgToUrl("fees", state.app.themeColor)
},
})
},
mounted() {
// #ifdef MP-WEIXIN
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
// #endif
},
onLoad() {
uni.showLoading({
title: "加载中"
})
this.getNowTime()
this.getPayDetails()
},
methods: {
// 获取当前时间
getNowTime() {
this.nowTime = this.$util.getCurrentDate("y/m/d")
},
// 获取会费缴纳详情
getPayDetails() {
this.$util.request("member.payDetails").then(res => {
uni.hideLoading()
if (res.code == 1) {
this.payDetails = res.data
if (this.payDetails.apply_member_state.state == -1) {
uni.showModal({
title: "系统提示",
content: "请入会后查看此页面",
confirmText: "去申请",
success: (res) => {
if (res.confirm) {
this.$util.toPage({
mode: 2,
path: "/pages/member/apply/index"
})
}
}
})
return
} else if (this.payDetails.apply_member_state.state == 1 || this.payDetails.apply_member_state.state == 2) {
uni.showModal({
title: "系统提示",
content: "您已提交入会申请，请审核通过后查看",
confirmText: "前往查看",
success: (res) => {
if (res.confirm) {
uni.switchTab({
url: "/pages/mine/index"
})
}
}
})
return
} else if (this.payDetails.apply_member_state.state == 3 || this.payDetails.apply_member_state.state == 5) {
this.isShowPay = true
} else if (this.payDetails.apply_member_state.state == 7) {
let startTime = new Date(this.nowTime).getTime()
let endTime = new Date(this.payDetails.expire_time).getTime()
let timeDif = this.$util.getTimeDifference(startTime, endTime)
if (timeDif.day > 0) this.isShowPay = true
else this.isShowPay = false
} else {
this.isShowPay = false
}
this.loadEnd = true
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('获取会费缴纳详情 ', error)
})
},
// 跳转支付页
toPayment() {
this.$util.toPage({
mode: 1,
path: "/pages/member/fees/pay?fees=" + this.payDetails.fees + "&method=" + this.payDetails.pay_method
})
},
// 免费入会续费
handleRenew() {
uni.showLoading({
title: "加载中",
mask: true
})
this.$util.request("member.payFree").then(res => {
uni.hideLoading()
if (res.code == 1) {
this.$util.toPage({
mode: 2,
path: "/pages/member/fees/success?type=1"
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('免费入会续费 ', error)
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
.main-tips {
padding: 24rpx 32rpx;
font-size: 24rpx;
line-height: 34rpx;
color: #F6F7FB;
position: sticky;
top: 0;
z-index: 9;
}
.main-header {
padding: 32rpx 32rpx 20rpx;
position: relative;
.header-box {
border-radius: 10rpx;
background: var(--theme-color);
padding: 16rpx;
position: relative;
.box-line {
border: 1rpx solid #ffffff;
border-bottom: none;
border-radius: 10rpx;
padding: 48rpx 32rpx 66rpx;
.price {
color: #ffffff;
font-size: 72rpx;
font-weight: 600;
line-height: 60rpx;
text {
font-size: 36rpx;
}
}
.free {
color: #ffffff;
font-size: 44rpx;
font-weight: 600;
line-height: 60rpx;
}
.term {
margin-top: 24rpx;
color: #ffffff;
font-size: 24rpx;
line-height: 34rpx;
padding: 8rpx 16rpx;
border-radius: 8rpx;
background: rgba(255, 255, 255, 0.25);
}
.level {
position: absolute;
top: 48rpx;
left: 0;
color: var(--theme-color);
font-size: 20rpx;
line-height: 28rpx;
padding: 10rpx;
border-radius: 0 8rpx 8rpx 0;
background: #ffffff;
}
}
}
.header-pocket {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
width: 100%;
height: 120rpx;
background-size: 100% 120rpx;
background-repeat: no-repeat;
}
}
.main-content {
background: linear-gradient(180deg, rgb(255, 255, 255), rgba(246, 247, 251, 0) 100%);
padding: 32rpx;
.content-column {
margin-top: 48rpx;
&:first-child {
margin-top: 0;
}
.column-title {
color: #5A5B6E;
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
}
.column-text {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
.column-content {
padding: 24rpx;
border-radius: 16rpx;
box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.02);
background: #ffffff;
margin-top: 32rpx;
.detail-list {
.list-item {
margin-top: 32rpx;
&:first-child {
margin-top: 0;
}
.item-info {
.info-name {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
.info-time {
margin-top: 16rpx;
color: #8D929C;
font-size: 24rpx;
line-height: 34rpx;
}
}
.item-price {
margin-left: 24rpx;
color: var(--theme-color);
font-size: 28rpx;
line-height: 40rpx;
}
}
}
.detail-empty {
color: #8D929C;
font-size: 28rpx;
line-height: 40rpx;
padding: 48rpx 32rpx;
text-align: center;
}
}
}
}
.main-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
padding: 12rpx 32rpx;
background: #ffffff;
border-top: 1rpx solid #F6F7FB;
.footer-price {
margin-right: 40rpx;
.unit {
color: var(--theme-color);
font-size: 32rpx;
line-height: 44rpx;
}
.number {
margin-left: 16rpx;
color: var(--theme-color);
font-size: 40rpx;
font-weight: 600;
line-height: 56rpx;
}
}
.footer-btn {
color: #ffffff;
font-size: 32rpx;
line-height: 44rpx;
padding: 22rpx 24rpx;
border-radius: 16rpx;
background: var(--theme-color);
text-align: center;
}
}
}
}
</style>

567
pages/member/fees/pay.vue Normal file
View File

@@ -0,0 +1,567 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 会费缴纳 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="container" :style="{'--theme-color': themeColor}">
<!-- 标题栏 -->
<title-bar :showBack="true" title="会费缴纳"></title-bar>
<!-- 内容区 -->
<view class="container-main" v-if="loadEnd">
<view class="main-header">
<view class="header-price">{{payFees}}<text>元</text></view>
<view class="header-tag">会费缴纳</view>
</view>
<view class="main-content">
<view class="content-column">
<view class="column-title">支付方式</view>
<view class="column-method">
<view class="method-item flex align-items-center" @click="payMethod = 1" v-if="optionalPayMethod == 2 || optionalPayMethod == 4">
<view class="icon" :style="{'background-image': 'url('+ iconPay +')'}" v-if="iconPay"></view>
<view class="name flex-item">线上缴费</view>
<view class="radio" :class="{active: payMethod == 1}">
<image src="/static/tick.png" mode="aspectFill" v-if="payMethod == 1"></image>
</view>
</view>
<view class="method-item flex align-items-center" @click="payMethod = 2" v-if="optionalPayMethod == 3 || optionalPayMethod == 4">
<view class="icon" :style="{'background-image': 'url('+ iconPay +')'}" v-if="iconPay"></view>
<view class="name flex-item">线下缴费</view>
<view class="radio" :class="{active: payMethod == 2}">
<image src="/static/tick.png" mode="aspectFill" v-if="payMethod == 2"></image>
</view>
</view>
</view>
</view>
<view class="content-column" v-if="payMethod == 2">
<view class="column-title">支付凭证</view>
<view class="column-upload">
<view class="upload-image" v-if="certificate" @click="previewImage()">
<image class="image-select" :src="certificate" mode="aspectFill"></image>
<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage()"></image>
</view>
<view class="upload-image" v-else @click="chooseImage()">
<view class="image-background"></view>
<view class="image-choose">
<view class="icon">
<image src="/static/camera.png" mode="aspectFit"></image>
</view>
<view class="text">上传图片</view>
</view>
</view>
</view>
</view>
<view class="content-column" v-if="payMethod == 2">
<view class="column-title">汇款账户信息</view>
<view class="column-info">
<view class="info-item flex">
<view class="item-content flex-item">开户名称：{{accountInfo.bank_account_name || ""}}</view>
<view class="item-copy" @click="handleCopy(accountInfo.bank_account_name || '')">复制</view>
</view>
<view class="info-item flex">
<view class="item-content flex-item">收款账号：{{accountInfo.receiving_account || ""}}</view>
<view class="item-copy" @click="handleCopy(accountInfo.receiving_account || '')">复制</view>
</view>
<view class="info-item flex">
<view class="item-content flex-item">银行名称：{{accountInfo.bank_name || ""}}</view>
<view class="item-copy" @click="handleCopy(accountInfo.bank_name || '')">复制</view>
</view>
</view>
</view>
</view>
<view class="main-footer">
<view class="footer-btn" @click="toPayment" v-if="payMethod == 1">立即支付</view>
<view class="footer-btn" @click="toSubmit" v-else>提交审核</view>
<view class="safe-padding"></view>
</view>
</view>
</view>
</template>
<script>
import { mapState } from "vuex"
import svgData from "@/common/svg.js"
// #ifdef H5
import wx from 'weixin-js-sdk';
// #endif
export default {
data() {
return {
// 加载完成
loadEnd: false,
// 可选支付方式 缴费方式: 2=线上缴费, 3=线下缴费, 4=线上缴费+线下缴费
optionalPayMethod: 4,
// 支付方式
payMethod: 1,
// 支付凭证
certificate: "",
// 支付费用
payFees: 0,
// 汇款账户信息
accountInfo: {},
}
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
iconPay: state => {
return svgData.svgToUrl("pay", state.app.themeColor)
},
})
},
onLoad(option) {
this.optionalPayMethod = option.method
if (this.optionalPayMethod == 3) this.payMethod = 2
else this.payMethod = 1
this.payFees = option.fees
if (this.optionalPayMethod == 3 || this.optionalPayMethod == 4) {
uni.showLoading({
title: "加载中"
})
this.getAccountInfo(() => {
uni.hideLoading()
this.loadEnd = true
})
} else {
this.$nextTick(() => {
this.loadEnd = true
})
}
// #ifdef H5
this.initConfig()
// #endif
},
methods: {
// #ifdef H5
// 微信公众号初始化方法
initConfig() {
this.$util.request("main.WeChatConfig", {
url: location.href.split('#')[0]
}).then(res => {
if (res.code == 1) {
wx.config({
debug: false,
appId: res.data.appId,
timestamp: Number(res.data.timestamp),
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: ['chooseWXPay']
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
console.error('通过config接口注入权限验证配置 ', error)
})
},
// #endif
// 线上立即支付
toPayment() {
uni.showLoading({
title: "加载中",
mask: true
})
this.$util.request("member.payOnline").then(res => {
if (res.code == 1) {
let data = res.data
// #ifdef MP-WEIXIN
uni.requestPayment({
provider: "wxpay",
...data,
success: () => {
uni.hideLoading()
uni.reLaunch({
url: "/pages/member/fees/success"
})
},
fail: () => {
uni.hideLoading()
uni.showToast({
title: '支付已取消',
icon: 'none'
})
}
})
// #endif
// #ifdef H5
wx.ready(() => {
uni.hideLoading()
wx.chooseWXPay({
timestamp: data.timeStamp,
package: data.package,
nonceStr: data.nonceStr,
signType: data.signType,
paySign: data.paySign,
success: (res) => {
uni.hideLoading();
if (res.errMsg == "chooseWXPay:ok") {
uni.reLaunch({
url: "/pages/member/fees/success"
})
} else {
uni.showToast({
title: '支付失败',
icon: 'error'
})
}
},
fail: () => {
uni.hideLoading();
uni.showToast({
title: '支付已取消',
icon: 'none'
})
},
});
});
// #endif
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
console.error('线上缴费 ', error)
})
},
// 线下提交审核
toSubmit() {
if (!this.certificate) {
uni.showToast({
title: "请上传支付凭证",
icon: "none"
})
return
}
uni.showLoading({
title: "加载中",
mask: true
})
this.uploadImage((url) => {
this.$util.request("member.payOffline", {
pay_voucher: url
}).then(res => {
uni.hideLoading()
if (res.code == 1) {
uni.reLaunch({
url: "/pages/member/fees/success?type=1"
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
console.error('线下缴费 ', error)
})
})
},
// 上传图片
uploadImage(fn) {
this.$util.uploadFile(this.certificate).then(result => {
if (result.code == 1) {
fn(result.data.url)
} else {
uni.hideLoading()
uni.showToast({
title: result?.msg || "上传失败",
icon: 'none'
})
}
}).catch(error => {
console.error('上传图片 ', error)
})
},
// 选择图片
chooseImage() {
// #ifdef MP-WEIXIN
uni.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['album', 'camera'],
sizeType: ['compressed'],
success: (res) => {
this.certificate = res.tempFiles[0].tempFilePath
}
})
// #endif
// #ifndef MP-WEIXIN
uni.chooseImage({
count: 1,
mediaType: ['image'],
sourceType: ['album', 'camera '],
sizeType: ['compressed'],
success: (res) => {
this.certificate = res.tempFilePaths[0]
}
});
// #endif
},
// 删除图片
deleteImage() {
this.certificate = ""
},
// 预览图片
previewImage() {
uni.previewImage({
urls: [this.certificate],
current: 0
});
},
// 获取汇款账户信息
getAccountInfo(fn) {
this.$util.request("member.accountInfo").then(res => {
if (fn) fn()
if (res.code == 1) {
this.accountInfo = res.data
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取汇款账户信息 ', error)
})
},
// 复制
handleCopy(value) {
this.$util.toPage({
mode: 8,
content: value
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 32rpx 32rpx 144rpx;
.main-header {
border-radius: 16rpx;
box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.02);
background: #ffffff;
padding: 38rpx 32rpx;
.header-price {
color: var(--theme-color);
font-size: 48rpx;
font-weight: 600;
text-align: center;
text {
font-size: 24rpx
}
}
.header-tag {
margin-top: 26rpx;
color: #8D929C;
font-size: 28rpx;
line-height: 40rpx;
text-align: center;
}
}
.main-content {
.content-column {
margin-top: 32rpx;
padding: 32rpx;
border-radius: 16rpx;
box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.02);
background: #ffffff;
.column-title {
color: #5A5B6E;
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
}
.column-method {
margin-top: 32rpx;
.method-item {
margin-top: 32rpx;
&:first-child {
margin-top: 0;
}
.icon {
width: 32rpx;
height: 32rpx;
background-size: 32rpx;
}
.name {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
margin: 0 16rpx;
}
.radio {
width: 32rpx;
height: 32rpx;
background: #D6DBDE;
border-radius: 50%;
&.active {
background: var(--theme-color);
}
}
}
}
.column-upload {
display: flex;
flex-wrap: wrap;
margin-top: 32rpx;
column-gap: 3.5%;
row-gap: 24rpx;
.upload-image {
position: relative;
width: 31%;
height: 0;
padding-top: 31%;
.image-select {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10rpx;
}
.image-video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10rpx;
background: var(--theme-color);
padding: 56rpx;
}
.image-delete {
position: absolute;
top: -16rpx;
right: -16rpx;
width: 48rpx;
height: 48rpx;
}
.image-choose {
position: absolute;
top: 20rpx;
left: 20rpx;
right: 20rpx;
bottom: 20rpx;
z-index: 6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #ffffff;
border-radius: 10rpx;
.icon {
width: 80rpx;
height: 80rpx;
padding: 18rpx;
background: var(--theme-color);
border-radius: 50%;
}
.text {
margin-top: 16rpx;
color: var(--theme-color);
font-size: 28rpx;
line-height: 40rpx;
}
}
.image-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: var(--theme-color);
opacity: 0.08;
}
}
}
.column-info {
margin-top: 24rpx;
.info-item {
margin-top: 24rpx;
&:first-child {
margin-top: 0;
}
.item-content {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
.item-copy {
color: var(--theme-color);
font-size: 28rpx;
line-height: 40rpx;
margin-left: 24rpx;
}
}
}
}
}
.main-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
padding: 12rpx 32rpx;
background: #ffffff;
border-top: 1rpx solid #F6F7FB;
.footer-btn {
color: #ffffff;
font-size: 32rpx;
line-height: 44rpx;
padding: 22rpx 24rpx;
border-radius: 16rpx;
background: var(--theme-color);
text-align: center;
}
}
}
}
</style>

126
pages/member/fees/success.vue Normal file
View File

@@ -0,0 +1,126 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 提交成功 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="container" :style="{'--theme-color': themeColor}">
<!-- 标题栏 -->
<title-bar :showBack="true" title="提交成功"></title-bar>
<!-- 内容区 -->
<view class="container-main" v-if="loadEnd">
<view class="main-image">
<image class="icon" src="/static/check.png" mode="aspectFit"></image>
</view>
<view class="main-title">提交成功</view>
<view class="main-subtitle" v-if="payType == 1">提交成功，请等待管理员审核</view>
<view class="main-subtitle" v-else>提交成功，请前往个人中心查看会员状态</view>
<view class="main-btn" @click="toMine">前往查看</view>
<view class="main-back" @click="toIndex">返回首页</view>
</view>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
data() {
return {
// 加载完成
loadEnd: false,
// 支付类型
payType: null,
}
},
onLoad(option) {
this.payType = option.type
},
onReady() {
this.loadEnd = true
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
})
},
methods: {
// 跳转个人中心
toMine() {
uni.switchTab({
url: "/pages/mine/index"
})
},
// 返回首页
toIndex() {
uni.switchTab({
url: "/pages/index/index"
})
},
}
}
</script>
<style lang="scss">
page {
background: #ffffff;
}
.container {
.container-main {
padding: 144rpx 48rpx 32rpx;
.main-image {
width: 200rpx;
height: 200rpx;
margin: 0 auto;
padding: 48rpx;
background: var(--theme-color);
border-radius: 50%;
}
.main-title {
color: #333;
font-size: 36rpx;
font-weight: 600;
line-height: 50rpx;
margin-top: 48rpx;
text-align: center;
}
.main-subtitle {
color: #999;
font-size: 24rpx;
line-height: 34rpx;
margin-top: 24rpx;
text-align: center;
}
.main-btn {
color: #FFF;
font-size: 32rpx;
line-height: 44rpx;
padding: 34rpx;
border-radius: 16rpx;
text-align: center;
margin-top: 48rpx;
background: var(--theme-color);
}
.main-back {
color: #979797;
font-size: 32rpx;
line-height: 44rpx;
padding: 32rpx;
text-align: center;
margin-top: 16rpx;
}
}
}
</style>