2024-06-03 01:09:01 +08:00
|
|
|
|
<template>
|
2024-08-28 18:36:22 +08:00
|
|
|
|
<pb-layout
|
|
|
|
|
navbar="inner"
|
|
|
|
|
iconColor="#fff"
|
|
|
|
|
class="buy-point-wrap"
|
|
|
|
|
leftIcon="leftIcon"
|
|
|
|
|
color="#fff"
|
|
|
|
|
title="购买积分"
|
|
|
|
|
:bgStyle="bgStyle"
|
|
|
|
|
>
|
|
|
|
|
<view class="title ss-m-t-80">
|
|
|
|
|
<view class="main">购买商城积分</view>
|
|
|
|
|
<view class="sub ss-flex ss-row-center ss-m-t-55"
|
|
|
|
|
><text style="color: #f3d3bf" class="cicon-safe"></text>订单多多·出单多多<text
|
|
|
|
|
style="color: #f3d3bf"
|
|
|
|
|
class="cicon-safe"
|
|
|
|
|
></text
|
|
|
|
|
></view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="middle ss-m-t-150 ss-flex-col ss-row-center ss-col-center ss-gap-40">
|
|
|
|
|
<view class="title">积分额度选择</view>
|
|
|
|
|
<view class="sub">专属您的积分</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="combo ss-m-t-90 ss-m-b-50 ss-p-x-40">
|
|
|
|
|
<template v-for="(item, index) in state.pointList">
|
|
|
|
|
<button
|
|
|
|
|
:class="['ss-reset-button', state.currentIndex === index ? 'draw-btn' : 'draw-btn-raw', 'ui-Shadow-Main']"
|
|
|
|
|
@click="chooseItemClick(index)"
|
|
|
|
|
>
|
|
|
|
|
{{ `购买${item.point}积分/${item.price}元` }}
|
|
|
|
|
</button>
|
|
|
|
|
</template>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="agreement-box ss-flex ss-row-center" :class="{ shake: state.isShaking }">
|
|
|
|
|
<label class="radio ss-flex" @tap="onChange">
|
|
|
|
|
<radio
|
|
|
|
|
:checked="state.agreeStatus"
|
|
|
|
|
color="rgba(243, 192, 156, 1)"
|
|
|
|
|
style="transform: scale(0.8)"
|
|
|
|
|
@tap.stop="onChange"
|
|
|
|
|
/>
|
|
|
|
|
<view class="agreement-text ss-flex ss-m-l-8">
|
|
|
|
|
我已阅读并遵守
|
|
|
|
|
<view class="tcp-text" @tap.stop="onProtocol('积分须知')"> 《积分须知》 </view>
|
2024-06-03 01:09:01 +08:00
|
|
|
|
</view>
|
2024-08-28 18:36:22 +08:00
|
|
|
|
</label>
|
|
|
|
|
</view>
|
|
|
|
|
</pb-layout>
|
2024-06-03 01:09:01 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { ref } from 'vue'
|
2024-08-28 18:36:22 +08:00
|
|
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
|
|
|
import PointApi from '@/peach/api/pay/point'
|
|
|
|
|
import peach from '@/peach'
|
2024-06-03 01:09:01 +08:00
|
|
|
|
|
|
|
|
|
const state = ref({
|
2024-08-28 18:36:22 +08:00
|
|
|
|
isShaking: false,
|
|
|
|
|
agreeStatus: false,
|
|
|
|
|
pointList: [],
|
|
|
|
|
currentIndex: -1,
|
2024-06-03 01:09:01 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const bgStyle = {
|
2024-08-28 18:36:22 +08:00
|
|
|
|
backgroundImage: '/static/point.png',
|
|
|
|
|
imageType: 'local',
|
|
|
|
|
backgroundColor: '#fff',
|
|
|
|
|
description: '',
|
|
|
|
|
height: '100%',
|
2024-06-03 01:09:01 +08:00
|
|
|
|
}
|
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
|
function onProtocol() {
|
|
|
|
|
peach.$router.go('/pages/public/richtext?title=积分须知')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getPointConfig() {
|
|
|
|
|
PointApi.getPointConfig().then((res) => {
|
|
|
|
|
if (res.data.packagePoint) state.value.pointList = JSON.parse(res.data.packagePoint)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onChange() {
|
|
|
|
|
state.value.agreeStatus = !state.value.agreeStatus
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function chooseItemClick(index) {
|
|
|
|
|
if (!state.value.agreeStatus) {
|
|
|
|
|
state.value.isShaking = true
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
state.value.isShaking = false
|
|
|
|
|
}, 1000)
|
|
|
|
|
peach.$helper.toast('请勾选同意积分须知')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
state.value.currentIndex = index
|
|
|
|
|
uni.showModal({
|
|
|
|
|
title: '提示',
|
|
|
|
|
content: '确认购买该积分额度?',
|
2024-08-30 17:06:53 +08:00
|
|
|
|
success: async function (res) {
|
2024-08-28 18:36:22 +08:00
|
|
|
|
if (res.confirm) {
|
2024-08-30 17:06:53 +08:00
|
|
|
|
let data = await PointApi.buyIntegral({
|
|
|
|
|
point: state.value.pointList[index].point,
|
|
|
|
|
price: state.value.pointList[index].price * 100,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
uni.requestPayment({
|
|
|
|
|
provider: 'wxpay',
|
|
|
|
|
orderInfo: data.data,
|
|
|
|
|
success: (res) => {
|
|
|
|
|
payResult('success')
|
|
|
|
|
},
|
|
|
|
|
fail: (err) => {
|
|
|
|
|
err.errMsg !== 'requestPayment:fail cancel' && payResult('fail')
|
|
|
|
|
},
|
|
|
|
|
})
|
2024-08-28 18:36:22 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-30 17:06:53 +08:00
|
|
|
|
// 支付结果跳转,success:成功,fail:失败
|
|
|
|
|
function payResult(resultType) {
|
|
|
|
|
// peach.$router.redirect('/pages/pay/result', {
|
|
|
|
|
// payState: resultType,
|
|
|
|
|
// })
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
|
onShow(() => {
|
|
|
|
|
getPointConfig()
|
|
|
|
|
})
|
2024-06-03 01:09:01 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.buy-point-wrap {
|
2024-08-28 18:36:22 +08:00
|
|
|
|
.title {
|
|
|
|
|
.main {
|
|
|
|
|
font-size: 80rpx;
|
|
|
|
|
color: rgba(232, 181, 150, 1);
|
|
|
|
|
letter-spacing: 20px;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sub {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
color: #f3d3bf;
|
|
|
|
|
letter-spacing: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.middle {
|
2024-06-03 01:09:01 +08:00
|
|
|
|
.title {
|
2024-08-28 18:36:22 +08:00
|
|
|
|
font-size: 39rpx;
|
|
|
|
|
color: #fccdb1;
|
2024-06-03 01:09:01 +08:00
|
|
|
|
}
|
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
|
.title::before {
|
|
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
width: 80px;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: -100px;
|
|
|
|
|
top: 14px;
|
|
|
|
|
border-bottom: 1px dotted #e7b493;
|
2024-06-03 01:09:01 +08:00
|
|
|
|
}
|
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
|
.title::after {
|
|
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
width: 80px;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 130px;
|
|
|
|
|
top: -12px;
|
|
|
|
|
border-bottom: 1px dotted #e7b493;
|
2024-06-03 01:09:01 +08:00
|
|
|
|
}
|
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
|
.sub {
|
|
|
|
|
background-color: #e7b493;
|
|
|
|
|
border-radius: 18rpx;
|
|
|
|
|
border: 1px solid #979797;
|
|
|
|
|
letter-spacing: 5px;
|
|
|
|
|
padding: 0 10rpx 0 18rpx;
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.combo {
|
|
|
|
|
.draw-btn {
|
|
|
|
|
height: 82rpx;
|
|
|
|
|
line-height: normal;
|
|
|
|
|
background: linear-gradient(-90deg, rgba(230, 179, 147, 1), rgba(250, 232, 218, 1));
|
|
|
|
|
border-radius: 28rpx;
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
font-weight: 500;
|
2024-08-30 17:06:53 +08:00
|
|
|
|
margin-top: 20px;
|
2024-08-28 18:36:22 +08:00
|
|
|
|
}
|
2024-06-03 01:09:01 +08:00
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
|
.draw-btn-raw {
|
|
|
|
|
height: 82rpx;
|
|
|
|
|
line-height: normal;
|
|
|
|
|
background: transparent;
|
|
|
|
|
border-radius: 28rpx;
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #e7b493;
|
|
|
|
|
border: 1px solid #e7b493;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-06-03 01:09:01 +08:00
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
|
.agreement-box {
|
|
|
|
|
width: 100%;
|
2024-06-03 01:09:01 +08:00
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
|
.protocol-check {
|
|
|
|
|
transform: scale(0.7);
|
2024-06-03 01:09:01 +08:00
|
|
|
|
}
|
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
|
.agreement-text {
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #999999;
|
|
|
|
|
|
|
|
|
|
.tcp-text {
|
|
|
|
|
color: rgba(243, 192, 156, 1);
|
|
|
|
|
}
|
2024-06-03 01:09:01 +08:00
|
|
|
|
}
|
2024-08-28 18:36:22 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.shake {
|
|
|
|
|
animation: shake 0.05s linear 4 alternate;
|
|
|
|
|
}
|
2024-06-03 01:09:01 +08:00
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
|
@keyframes shake {
|
|
|
|
|
from {
|
|
|
|
|
transform: translateX(-5rpx);
|
|
|
|
|
}
|
2024-06-03 01:09:01 +08:00
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
|
to {
|
|
|
|
|
transform: translateX(5rpx);
|
2024-06-03 01:09:01 +08:00
|
|
|
|
}
|
2024-08-28 18:36:22 +08:00
|
|
|
|
}
|
2024-06-03 01:09:01 +08:00
|
|
|
|
}
|
2024-06-17 18:16:46 +08:00
|
|
|
|
</style>
|