Compare commits
2 Commits
3dab4c34dd
...
bf3aa6a484
| Author | SHA1 | Date | |
|---|---|---|---|
| bf3aa6a484 | |||
| d3849a90b0 |
441
pages/user/recharge/index.vue
Normal file
441
pages/user/recharge/index.vue
Normal file
@@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<view class="recharge-page">
|
||||
<!-- 自定义导航栏 -->
|
||||
<nav-bar :title="$t('user.recharge')"></nav-bar>
|
||||
<view class="block">
|
||||
<view class="text">充值金额</view>
|
||||
<view class="recharge">
|
||||
<view class="recharge_block" @click="chosPric(item)"
|
||||
:class="aloneItem.priceTypeId === item.priceTypeId ? 'selected' : ''"
|
||||
v-for="item in rechargeList.bookBuyConfigList" :key="item.priceTypeId">
|
||||
<view class="recharge_money">￥{{item.money}}</view>
|
||||
<view>{{item.realMoney}}天医币</view>
|
||||
<!-- 红框位置的618活动标签 -->
|
||||
<!-- <view class="activity-tag">618活动</view> -->
|
||||
<span class="activity-label" v-if="item.givejf >0">618充值活动</span>
|
||||
<text class="recharge_give" v-if="item.givejf >0">（赠{{item.givejf}}币）</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="activity-container">
|
||||
<view v-html="remark.remark"></view>
|
||||
</view>
|
||||
<view class="cha_fangsh">
|
||||
<view class="cf_title PM_font">支付方式</view>
|
||||
<view class="cf_radio">
|
||||
<radio-group v-for="item in iosPaylist" @change="choseType(item.id)">
|
||||
<view style="width: 100%">
|
||||
<view :class="payType == item.id ? 'Tab_xf cf_xuanx' : 'cf_xuanx'">
|
||||
<!-- <image class="pay_item_img" :src="item.imgUrl" mode="aspectFil">
|
||||
</image> -->
|
||||
<text>{{ item.title }}</text>
|
||||
<radio :checked="payType === item.id" style="float: right"></radio>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="agree_wo flexbox">
|
||||
<radio-group class="agree" v-for="(item, index) in argee" :key="index" @change="radioCheck">
|
||||
<view>
|
||||
<radio class="agreeRadio" :value="item.id" :checked="state" color="#007bff"></radio>
|
||||
</view>
|
||||
</radio-group>
|
||||
<view>我已阅读并同意<span class="highlight" @click="showAgreement">《增值服务协议》</span></view>
|
||||
</view>
|
||||
<view class="bottom-button-container">
|
||||
<button class="recharge-button" @click="handleRecharge">立即充值</button>
|
||||
</view>
|
||||
<wd-popup v-model="agreemenState" position="bottom" :closeable="true">
|
||||
<view class="agreement">
|
||||
<view class="agreement_title">{{ agreementObj.title }}</view>
|
||||
<view class="agreement_row">
|
||||
<view v-html="agreementObj.content"></view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<wd-message-box />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, toRefs, reactive } from 'vue'
|
||||
|
||||
import { useMessage } from '@/uni_modules/wot-design-uni'
|
||||
import { getBookBuyConfigList, getAgreement, getActivityDescription } from '@/api/modules/user'
|
||||
const googlePay = uni.requireNativePlugin("sn-googlepay5");
|
||||
const message = useMessage()
|
||||
const payType = ref('1')
|
||||
const iosPaylist = ref([
|
||||
{
|
||||
title: "Google Pay",
|
||||
id: '1',
|
||||
// imgUrl: "/static/icon/currency.png"
|
||||
}
|
||||
])
|
||||
// 充值列表
|
||||
const rechargeList = ref([])
|
||||
// 金额列表单独每项
|
||||
const aloneItem = ref({})
|
||||
|
||||
// 充值列表type-固定传值
|
||||
const type = ref('point')
|
||||
|
||||
const qudao = ref('')
|
||||
const state = ref(false)
|
||||
const argee = ref([
|
||||
{
|
||||
value: false,
|
||||
id: "1",
|
||||
},
|
||||
])
|
||||
|
||||
const popup = ref(null)
|
||||
const agreemenState = ref(false)
|
||||
// 协议id
|
||||
const id = ref(101)
|
||||
|
||||
const richTextContent = ref('');
|
||||
// 协议数据
|
||||
const agreementObj = reactive({
|
||||
title: '',
|
||||
content: '',
|
||||
})
|
||||
const isAndroid = ref()
|
||||
|
||||
const remark = ref({})
|
||||
const isConnected = ref(false)
|
||||
|
||||
|
||||
|
||||
const getDevName = () => {
|
||||
// 获取使用环境
|
||||
if (uni.getSystemInfoSync().platform === "android") {
|
||||
qudao.value = 'Google'
|
||||
isAndroid.value = true;
|
||||
console.log('运行Android上')
|
||||
} else {
|
||||
qudao.value = 'Google'
|
||||
console.log('运行iOS上')
|
||||
}
|
||||
getData()
|
||||
}
|
||||
|
||||
// 点击金额
|
||||
const chosPric = (item : any) => {
|
||||
console.log(item,'金额每项');
|
||||
aloneItem.value = item;
|
||||
};
|
||||
|
||||
/**
|
||||
* 勾选协议
|
||||
*/
|
||||
const radioCheck = () => {
|
||||
console.log('点击了', state.value);
|
||||
state.value = !state.value
|
||||
}
|
||||
|
||||
/**
|
||||
* 协议弹窗显示
|
||||
*/
|
||||
const showAgreement = () => {
|
||||
agreemenState.value = true
|
||||
}
|
||||
/**
|
||||
* 获取充值列表数据
|
||||
*/
|
||||
const getData = async () => {
|
||||
try {
|
||||
rechargeList.value = await getBookBuyConfigList(type.value, qudao.value)
|
||||
console.log(rechargeList.value.bookBuyConfigList, '充值列表');
|
||||
// 默认选择第一个金额
|
||||
aloneItem.value = rechargeList.value.bookBuyConfigList[0]
|
||||
getGooglePay()
|
||||
} catch (error) {
|
||||
console.error('获取订单列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取协议数据
|
||||
*/
|
||||
const getAgreementData = async () => {
|
||||
try {
|
||||
const text = reactive(await getAgreement(id.value))
|
||||
const { title, content } = toRefs(text.agreement)
|
||||
agreementObj.title = title.value
|
||||
agreementObj.content = content.value.replace(/<\/h5>/g, "</view>");
|
||||
// console.log(agreementObj, '协议数据');
|
||||
} catch (error) {
|
||||
console.error('获取协议数据:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取活动说明数据
|
||||
*/
|
||||
const getActivityDescriptionData = async () => {
|
||||
try {
|
||||
const text = ref(await getActivityDescription())
|
||||
remark.value = text.value.res[0]
|
||||
// console.log(remark.value, '活动说明内容');
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取协议数据:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换支付方式
|
||||
*/
|
||||
const choseType = () => {
|
||||
// payType.value = val;
|
||||
}
|
||||
|
||||
const handleRecharge = () => {
|
||||
console.log('立即充值');
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
const getGooglePay = () => {
|
||||
googlePay.init({
|
||||
// autoReconnect: true, // 是否自动重连(插件实现)
|
||||
// enableAutoServiceReconnection: true, //是否自动重连（8.0+支持）
|
||||
}, (e:any) => {
|
||||
console.log('init', e);
|
||||
if (e.code == 0) {
|
||||
isConnected.value = true;
|
||||
getQuerySku()
|
||||
// 初始化成功
|
||||
} else {
|
||||
// 初始化失败
|
||||
isConnected.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询sku
|
||||
*/
|
||||
const getQuerySku = () =>{
|
||||
const id = aloneItem.value.priceTypeId
|
||||
console.log(id, '获取每项');
|
||||
googlePay.querySku(
|
||||
{
|
||||
inapp: [id], // 与subs二选一, 参数为商品ID（字符串）数组
|
||||
},
|
||||
(e:any) => {
|
||||
if (e.code == 0) {
|
||||
// 查询成功.
|
||||
console.log('查询成功',e);
|
||||
// e.list; // 查询结果, array
|
||||
} else {
|
||||
console.log('查询失败');
|
||||
// 查询失败
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const getPayAll = () =>{
|
||||
googlePay.payAll(
|
||||
{
|
||||
productId: "", // 产品id
|
||||
|
||||
},
|
||||
(e) => {
|
||||
if (e.code == 0) {
|
||||
// 支付成功
|
||||
e.data; //支付结果, array [ {original:{ }, signature: ''} ]
|
||||
} else {
|
||||
// 支付失败
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getDevName();
|
||||
getActivityDescriptionData()
|
||||
getAgreementData()
|
||||
|
||||
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$theme-color: #54a966;
|
||||
|
||||
.recharge-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f7faf9;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 30rpx;
|
||||
color: #007bff;
|
||||
padding: 30rpx 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.recharge {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 20rpx 0 20rpx 30rpx;
|
||||
|
||||
.recharge_block {
|
||||
box-shadow: 0 0 20rpx 0 #0000001a;
|
||||
float: left;
|
||||
width: 46%;
|
||||
margin: 0 3% 30rpx 0;
|
||||
text-align: center;
|
||||
padding: 30rpx 0 0;
|
||||
border-radius: 15rpx;
|
||||
position: relative;
|
||||
height: 160rpx;
|
||||
|
||||
.recharge_money {
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
}
|
||||
|
||||
.recharge_give {
|
||||
font-size: 16rpx;
|
||||
color: #FF0033;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
border: 2rpx solid #007bff;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.bottom-button-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30rpx;
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.recharge-button {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
background-color: #007bff;
|
||||
color: #ffffff;
|
||||
font-size: 18rpx;
|
||||
border-radius: 25rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.recharge-button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.activity-container {
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
padding: 15rpx;
|
||||
background-color: #e6f4ff;
|
||||
border-radius: 8rpx;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.activity-label {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -6rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background-color: #007bff;
|
||||
border-radius: 16rpx 0;
|
||||
padding: 6rpx 10rpx;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
|
||||
.cha_fangsh {
|
||||
padding: 20rpx 20rpx 60rpx 20rpx;
|
||||
|
||||
.cf_title {
|
||||
font-size: 30rpx;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.cf_radio {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.cf_xuanx {
|
||||
font-size: 24rpx;
|
||||
padding: 20rpx 0;
|
||||
margin-bottom: 20rpx;
|
||||
border-bottom: 1px solid #ededed;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: inline-block;
|
||||
margin-right: 20rpx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.Tab_xf {
|
||||
// background-color: #fdf1e9cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay_item_img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
float: left;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.agree_wo {
|
||||
display: flex;
|
||||
padding: 20rpx 20rpx 160rpx 20rpx;
|
||||
color: #aaa;
|
||||
font-size: 18rpx;
|
||||
align-items: center;
|
||||
|
||||
.highlight {
|
||||
color: #007bff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.agreeRadio {
|
||||
display: flex;
|
||||
zoom: 0.7;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||||
position: relative;
|
||||
|
||||
.agreement_title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 50rpx;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.agreement_row {
|
||||
max-height: 1000rpx;
|
||||
overflow-y: scroll
|
||||
}
|
||||
}
|
||||
</style>
|
||||
125
pages/user/virtual/index.vue
Normal file
125
pages/user/virtual/index.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<z-paging ref="paging" v-model="bookList" auto-show-back-to-top class="my-book-page" @query="loadBookList">
|
||||
<template #top>
|
||||
<!-- 自定义导航栏 -->
|
||||
<nav-bar :title="$t('book.myBook')"></nav-bar>
|
||||
</template>
|
||||
|
||||
<!-- 充值列表 -->
|
||||
<!-- <uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons> -->
|
||||
|
||||
<view class="recharge-record">
|
||||
<view><uni-icons type="right" size="30"></uni-icons></view>
|
||||
<view class="go-gecharge">
|
||||
立即充值
|
||||
<uni-icons type="contact" size="30"></uni-icons>
|
||||
</view>
|
||||
<view class="title">充值消费记录</view>
|
||||
<view class="recharge-record-block" v-for="(item) in 5">
|
||||
<view class="recharge-record-block-row">购买商品<text class="text">90</text></view>
|
||||
<view class="time">2025-10-20</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view v-if="(bookList && bookList.length > 0)" class="book-list">
|
||||
<BookCard
|
||||
v-for="item in bookList"
|
||||
:key="item.id"
|
||||
:book="item"
|
||||
/>
|
||||
</view> -->
|
||||
|
||||
<!-- 空状态 -->
|
||||
<!-- <view v-else-if="!loading && !firstLoad" class="empty-state">
|
||||
<image src="@/static/null_img.png" mode="aspectFit" />
|
||||
<text class="empty-text">{{ $t('book.nullText') }}</text>
|
||||
<wd-button type="primary" @click="goToBuy">
|
||||
{{ $t('book.choose') }}
|
||||
</wd-button>
|
||||
</view> -->
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { bookApi } from '@/api/modules/book'
|
||||
import type { IBook } from '@/types/book'
|
||||
import BookCard from '@/components/book/BookCard.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const paging = ref<any>()
|
||||
|
||||
// 数据状态
|
||||
const bookList = ref<IBook[]>([])
|
||||
const loading = ref(false)
|
||||
const firstLoad = ref(true)
|
||||
|
||||
// 加载书单列表
|
||||
async function loadBookList(pageNo : number, pageSize : number) {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await bookApi.getMyBooks(pageNo, pageSize)
|
||||
paging.value.complete(res.page.records)
|
||||
} catch (error) {
|
||||
paging.value.complete(false)
|
||||
console.error('Failed to load book list:', error)
|
||||
} finally {
|
||||
firstLoad.value = false
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-book-page {
|
||||
background: #f7faf9;
|
||||
min-height: 100vh;
|
||||
|
||||
.recharge-record {
|
||||
background: #fff;
|
||||
border-radius: 15rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
// padding: 20rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.go-gecharge{
|
||||
//height: 100rpx;
|
||||
background: linear-gradient(to right, #007bff, #17a2b8);
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
padding-left:20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
color: #007bff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.recharge-record-block {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding: 20rpx;
|
||||
|
||||
.time{
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.recharge-record-block-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.text{
|
||||
color: #007bff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user