lanan-old/lanan-master-uniapp/pages/tabBar/mine/Recharge.vue

556 lines
13 KiB
Vue
Raw Normal View History

2024-07-17 14:16:22 +08:00
<template>
<view class="container">
<view class="cont-top">
<view class="top-left">充值金额:</view>
<view class="top-right">
<!-- @input="onInput" -->
<input type="number" placeholder="请输入充值金额" v-model="inputValue">
</view>
</view>
<view class="cont-box">
<view :class="{'indexbox' : actindex == index}" class="box" v-for="(item,index) in num " :key="index"
@click="getindex(index,item.text)">
<text>{{item.text}}</text>
</view>
</view>
<view class="anniu" @click="getpayment">
<text>点击充值</text>
</view>
<!-- 以下均为测试 -->
<view class="page flex-col">
<view class="box_2 flex-col">
<view class="yicang">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
:interval="interval" :duration="duration" indicator-active-color="#704e17"
@change="changeSwiper">
<swiper-item>
<view class="text-wrapper_1 flex-col"
:style="{ backgroundImage: 'url(' + imagesUrl + 'baiyinbg.png'+ ')' }">
<text class="text_2">升级会员享受更高优惠</text>
</view>
</swiper-item>
<swiper-item>
<view class="text-wrapper_1 flex-col"
:style="{ backgroundImage: 'url(' + imagesUrl + 'huangjinbg.png'+ ')' }">
<text class="text_2">升级会员享受更高优惠</text>
</view>
</swiper-item>
<swiper-item>
<view class="text-wrapper_1 flex-col"
:style="{ backgroundImage: 'url(' + imagesUrl + 'bojinbg.png'+ ')' }">
<text class="text_2">升级会员享受更高优惠</text>
</view>
</swiper-item>
</swiper>
</view>
<u-transition :show="current == 0" mode="fade-up">
<view class="transition">
<view class="group_2 flex-row justify-between">
<image class="image_2" :src="imagesUrl + 'bigline1.png'" />
<text class="text_3">白银会员</text>
<image class="image_3" :src="imagesUrl + 'bigline2.png'" />
</view>
<text class="text_4">升级会员享受更高优惠</text>
<view class="image-text_1 flex-row justify-between">
<image class="label_1" :src="imagesUrl + 'wenhao.png'" />
<text class="text-group_1">如何获得该卡</text>
</view>
<text class="text_5">{{ config.silverConditions }}</text>
<view class="image-text_2 flex-row justify-between">
<image class="label_2" :src="imagesUrl + 'zuanshi.png'" />
<text class="text-group_2">特权说明</text>
</view>
<view class="text-wrapper_2">
<rich-text :nodes="config.silverIntro" class="paragraph_1"></rich-text>
</view>
</view>
</u-transition>
<u-transition :show="current == 1" mode="fade-up">
<view class="transition">
<view class="group_2 flex-row justify-between">
<image class="image_2" :src="imagesUrl + 'bigline1.png'" />
<text class="text_3">黄金会员</text>
<image class="image_3" :src="imagesUrl + 'bigline2.png'" />
</view>
<text class="text_4">升级会员享受更高优惠</text>
<view class="image-text_1 flex-row justify-between">
<image class="label_1" :src="imagesUrl + 'wenhao.png'" />
<text class="text-group_1">如何获得该卡</text>
</view>
<text class="text_5">{{ config.goldConditions }}</text>
<view class="image-text_2 flex-row justify-between">
<image class="label_2" :src="imagesUrl + 'zuanshi.png'" />
<text class="text-group_2">特权说明</text>
</view>
<view class="text-wrapper_2">
<rich-text :nodes="config.goldIntro" class="paragraph_1"></rich-text>
</view>
</view>
</u-transition>
<u-transition :show="current == 2" mode="fade-up">
<view class="transition">
<view class="group_2 flex-row justify-between">
<image class="image_2" :src="imagesUrl + 'bigline1.png'" />
<text class="text_3">铂金会员</text>
<image class="image_3" :src="imagesUrl + 'bigline2.png'" />
</view>
<text class="text_4">升级会员享受更高优惠</text>
<view class="image-text_1 flex-row justify-between">
<image class="label_1" :src="imagesUrl + 'wenhao.png'" />
<text class="text-group_1">如何获得该卡</text>
</view>
<text class="text_5">{{ config.platinumConditions }}</text>
<view class="image-text_2 flex-row justify-between">
<image class="label_2" :src="imagesUrl + 'zuanshi.png'" />
<text class="text-group_2">特权说明</text>
</view>
<view class="text-wrapper_2">
<rich-text :nodes="config.platinumIntro" class="paragraph_1"></rich-text>
</view>
</view>
</u-transition>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
inputValue: '',
actindex: '',
num: [{
text: '500'
},
{
text: '1000'
},
{
text: '1500'
},
{
text: '2000'
},
{
text: '2500'
},
{
text: '3000'
},
],
imagesUrl: getApp().globalData.config.imagesUrl,
baseUrl: getApp().globalData.config.baseUrl,
background: ['color1', 'color2', 'color3'],
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 500,
current: 0,
config: {},
constants: {},
}
},
onLoad() {
this.getConfig()
},
methods: {
// 获取配置:电话与位置、坐标
async getConfig() {
const res = await this.$request({
url: '/system/shopconfig/listWx'
})
this.config = res.rows[0]
console.log(res.rows[0]);
},
// 切换轮播图
changeSwiper(e) {
console.log(e.detail.current);
this.current = e.detail.current
},
getindex(index, text) {
this.actindex = index
this.inputValue = text
},
onInput(event) {
const regex = /^\d*$/; // 只允许输入数字
if (!regex.test(event.target.value)) {
this.inputValue = this.inputValue.replace(/\D/g, ''); // 移除非数字字符
}
},
// 创建订单 吊起支付
async getpayment() {
if (this.inputValue == 0) {
uni.showToast({
title: '充值金额不能为0',
icon: 'none'
})
return
}
const res = await this.$request({
method: 'post',
url: '/orderApi/createOrder',
data: {
goodsId: 88888,
goodsType: 'cz',
balance: 0,
balanceCz: this.inputValue * 100
}
})
console.log(res);
this.orderid = res.data
const ress = await this.$request({
url: '/payApi/prepayment?type=jsapi' + '&orderId=' + this.orderid,
})
console.log(ress);
wx.requestPayment({
timeStamp: ress.timeStamp, // 时间戳从1970年1月1日00:00:00至今的秒数即当前的时间
nonceStr: ress.nonceStr, // 随机字符串长度为32个字符以下。
package: ress.package, // 统一下单接口返回的 prepay_id 参数值格式如“prepay_id=*”
signType: ress.signType, // 签名算法类型,默认为 MD5支持RSA等其他加密算法
paySign: ress.paySign, // 签名,详见签名生成算法
success: function(res) {
console.log('成功', res);
if (res.errMsg = 'requestPayment:ok') {
uni.showToast({
title: '支付成功'
})
uni.navigateTo({
url: '/subInspectionPages/Paymentsuccessful/Paymentsuccessful'
})
}
// 支付成功后的回调函数, res.errMsg = 'requestPayment:ok'
},
fail: function(res) {
const resx = this.$request({
url: '/orderApi/cancelPay'
})
uni.showToast({
title: '支付失败'
})
console.log(resx);
// 支付失败或取消支付后的回调函数, res.errMsg = 'requestPayment:fail cancel' 取消支付res.errMsg = 'requestPayment:fail (detail error message)'
}
})
// wx.requestPayment(ress)
},
}
}
</script>
<style scoped lang="scss">
.yicang {}
.container {
width: 100%;
height: calc(100vh);
box-sizing: border-box;
background-color: #242A38;
padding-top: 40px;
}
.cont-top {
width: 95%;
margin: 0 auto;
box-sizing: border-box;
overflow: hidden;
padding-bottom: 10px;
display: flex;
align-items: center;
border-bottom: 1px solid #FFE3AD;
}
.top-right {
width: 70%;
input {
width: 100%;
color: white;
font-size: 18px;
font-weight: 600;
}
}
.top-left {
color: #FFE3AD;
font-size: 18px;
font-weight: 600;
margin-right: 5px;
}
.cont-box {
margin: 0 auto;
margin-top: 20px;
width: 95%;
display: flex;
flex-wrap: wrap;
}
.box {
width: 30%;
height: 40px;
border-radius: 8px;
border: 1px solid #FFE3AD;
margin-top: 10px;
margin-right: 11px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: white;
font-weight: bold;
}
.anniu {
width: 80%;
height: 40px;
border-radius: 6px;
border: 1px solid #FFE3AD;
background-color: #FFE3AD;
margin: 0 auto;
margin-top: 40px;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
}
.indexbox {
background: #FFE3AD;
}
//
.swiper {
height: 230rpx;
}
.btn {
margin: 20rpx auto;
}
.page {
background-color: rgba(36, 42, 56, 1);
width: 750rpx;
height: 100vh;
}
.box_1 {
background-color: rgba(36, 42, 56, 1);
width: 750rpx;
height: 40rpx;
}
.box_2 {
width: 750rpx;
margin-bottom: 1rpx;
}
.group_1 {
background-color: rgba(36, 42, 56, 1);
width: 750rpx;
height: 88rpx;
}
.image_1 {
width: 15rpx;
height: 27rpx;
margin: 31rpx 0 0 33rpx;
}
.text_1 {
width: 120rpx;
height: 29rpx;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 30rpx;
font-family: MicrosoftYaHei;
font-weight: NaN;
text-align: left;
white-space: nowrap;
line-height: 80rpx;
margin: 30rpx 315rpx 0 267rpx;
}
.text-wrapper_1 {
height: 196rpx;
background-size: 100% 100%;
width: 700rpx;
margin: 27rpx 0 0 25rpx;
}
.text_2 {
width: 326rpx;
height: 24rpx;
overflow-wrap: break-word;
color: rgba(112, 78, 23, 1);
font-size: 24rpx;
font-family: MicrosoftYaHei;
font-weight: NaN;
text-align: left;
white-space: nowrap;
line-height: 24rpx;
margin: 130rpx 0 0 48rpx;
}
.group_2 {
width: 605rpx;
height: 38rpx;
margin: 69rpx 0 0 72rpx;
}
.image_2 {
width: 187rpx;
height: 23rpx;
margin-top: 15rpx;
}
.text_3 {
width: 160rpx;
height: 44rpx;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 44rpx;
font-family: YouSheBiaoTiHei;
font-weight: NaN;
text-align: left;
white-space: nowrap;
line-height: 44rpx;
margin-left: 35rpx;
}
.image_3 {
width: 187rpx;
height: 23rpx;
margin: 15rpx 0 0 36rpx;
}
.text_4 {
width: 263rpx;
height: 24rpx;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 24rpx;
font-family: MicrosoftYaHeiLight;
font-weight: 300;
text-align: left;
white-space: nowrap;
line-height: 80rpx;
margin: 18rpx 0 0 247rpx;
}
.image-text_1 {
width: 204rpx;
height: 30rpx;
margin: 57rpx 0 0 43rpx;
}
.label_1 {
width: 30rpx;
height: 30rpx;
}
.text-group_1 {
width: 156rpx;
height: 26rpx;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 26rpx;
font-family: MicrosoftYaHei;
font-weight: NaN;
text-align: left;
white-space: nowrap;
line-height: 26rpx;
margin-top: 2rpx;
}
.text_5 {
width: 238rpx;
height: 26rpx;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 26rpx;
font-family: MicrosoftYaHei;
font-weight: NaN;
text-align: left;
white-space: nowrap;
line-height: 80rpx;
margin: 52rpx 0 0 89rpx;
}
.image-text_2 {
width: 150rpx;
height: 28rpx;
margin: 73rpx 0 0 43rpx;
}
.label_2 {
width: 30rpx;
height: 26rpx;
margin-top: 2rpx;
}
.text-group_2 {
width: 102rpx;
height: 26rpx;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 26rpx;
font-family: MicrosoftYaHei;
font-weight: NaN;
text-align: left;
white-space: nowrap;
line-height: 26rpx;
}
.text-wrapper_2 {
width: 616rpx;
height: 306rpx;
overflow-wrap: break-word;
font-size: 0;
font-family: MicrosoftYaHei;
font-weight: NaN;
text-align: left;
line-height: 80rpx;
margin: 20rpx 0 20rpx 91rpx;
}
.paragraph_1 {
width: 616rpx;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 26rpx;
font-family: MicrosoftYaHei;
font-weight: NaN;
text-align: left;
line-height: 50rpx;
}
.paragraph_2 {
width: 616rpx;
height: 306rpx;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 26rpx;
font-family: MicrosoftYaHei;
font-weight: NaN;
text-align: left;
line-height: 26rpx;
}
</style>