增加分销充值功能
This commit is contained in:
35
http/api/market/distributionFlow.js
Normal file
35
http/api/market/distributionFlow.js
Normal file
@@ -0,0 +1,35 @@
|
||||
import http from '@/http/http.js'
|
||||
const request = http.request
|
||||
const urlType='market'
|
||||
|
||||
export function distributionFlow(data) {
|
||||
return request({
|
||||
url: `${urlType}/admin/distribution/distributionFlow`,
|
||||
method: "GET",
|
||||
data: {
|
||||
...data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function openFlow(data) {
|
||||
return request({
|
||||
url: `${urlType}/admin/distribution/openFlow`,
|
||||
method: "GET",
|
||||
data: {
|
||||
...data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function flow(data) {
|
||||
return request({
|
||||
url: `${urlType}/admin/distribution/flow`,
|
||||
method: "GET",
|
||||
data: {
|
||||
...data
|
||||
}
|
||||
})
|
||||
}
|
||||
490
pageDistributionFlow/charge.vue
Normal file
490
pageDistributionFlow/charge.vue
Normal file
@@ -0,0 +1,490 @@
|
||||
<template>
|
||||
<view class="box">
|
||||
<up-navbar
|
||||
title="分销"
|
||||
bg-color="transparent"
|
||||
:placeholder="true"
|
||||
@leftClick="back"
|
||||
></up-navbar>
|
||||
<view class="top">
|
||||
<image
|
||||
src="/static/market/top-bg.png"
|
||||
class="image"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</view>
|
||||
<view style="height: 38rpx"></view>
|
||||
<view class="chrage-box">
|
||||
<view class="u-flex u-flex-between">
|
||||
<view class="u-flex">
|
||||
<image
|
||||
src="/static/market/gold.png"
|
||||
style="width: 44rpx; height: 44rpx"
|
||||
></image>
|
||||
<view class="title-bg">
|
||||
<image src="/static/market/title-bg.png" class="image"></image>
|
||||
<view class="font-bold u-font-32 color-333 u-m-l-24">立即充值</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<text class="u-font-24 color-999"> 充值代表接受</text>
|
||||
<text class="u-font-24 xieyi"> 《用户隐私协议》 </text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="list u-m-t-32 u-flex u-m-t-60"
|
||||
style="align-items: flex-start"
|
||||
>
|
||||
<text class="font-bold u-font-32 color-333 u-text-nowrap"
|
||||
>选择金额</text
|
||||
>
|
||||
<view class="u-m-l-60 chargeList">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in chargeList"
|
||||
:key="index"
|
||||
:class="{ active: selChargeIndex == index }"
|
||||
@click="changeCharge(index)"
|
||||
>
|
||||
<view class="price">
|
||||
<text class="u-font-28">¥ </text>
|
||||
<text class="font-bold" style="font-size: 48rpx">{{
|
||||
item.price
|
||||
}}</text>
|
||||
</view>
|
||||
<image
|
||||
class="sel"
|
||||
v-show="selChargeIndex == index"
|
||||
src="/static/market/sel.png"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex input-box u-m-t-30">
|
||||
<text class="color-333 u-font-28 font-700">其他金额</text>
|
||||
<view class="u-flex-1 u-flex u-m-l-28">
|
||||
<input
|
||||
:min="0.01"
|
||||
placeholder-class="u-font-24"
|
||||
type="digit"
|
||||
class="u-flex-1 u-font-28"
|
||||
placeholder="请输入充值金额"
|
||||
@input="inputEvent"
|
||||
v-model="price"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buy" @click="buy">立即充值</view>
|
||||
|
||||
<view class="u-flex u-flex-between u-m-t-60">
|
||||
<view class="u-flex">
|
||||
<view class="title-bg">
|
||||
<image src="/static/market/title-bg.png" class="image"></image>
|
||||
<view class="font-bold u-font-32 color-333 u-m-l-24">充值记录</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<text class="u-font-28 color-333">
|
||||
总计：{{ state.totalRecharge || 0 }}元</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="recoders-list" v-if="state.records.length">
|
||||
<view class="item" v-for="(item, index) in state.records" :key="index">
|
||||
<view class="u-flex u-flex-between">
|
||||
<view class="u-font-28">
|
||||
<view class="color-666">
|
||||
<text v-if="item.type === 'self_recharge'">自助充值</text>
|
||||
<text v-if="item.type === 'manual_recharge'">手动充值</text>
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<text class="color-666">时间：</text>
|
||||
<text class="color-333">{{ item.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text>{{ item.changeAmount }}</text>
|
||||
<text class="yuan">元</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<up-loadmore :status="isEnd ? 'nomore' : 'loadmore'"></up-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { mchRecharge } from "@/http/api/pay";
|
||||
import * as distributionFlowApi from "@/http/api/market/distributionFlow.js";
|
||||
import { onMounted, ref, reactive, watch } from "vue";
|
||||
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
|
||||
function back() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
const options = ref({});
|
||||
|
||||
const price = ref("");
|
||||
|
||||
const chargeList = ref([
|
||||
{ price: "50.00" },
|
||||
{ price: "800.00" },
|
||||
{ price: "1000.00" },
|
||||
{ price: "2000.00" },
|
||||
]);
|
||||
const selChargeIndex = ref(0);
|
||||
function changeCharge(index) {
|
||||
selChargeIndex.value = index;
|
||||
}
|
||||
function parseQueryString(queryString) {
|
||||
const queryParams = queryString.split("&").map((param) => param.split("="));
|
||||
const params = {};
|
||||
for (const [key, value] of queryParams) {
|
||||
params[key] = value;
|
||||
}
|
||||
return params;
|
||||
}
|
||||
onLoad((opt) => {
|
||||
console.log(opt);
|
||||
if (opt.q) {
|
||||
const q = decodeURIComponent(opt.q);
|
||||
const params = parseQueryString(q.split("?")[1]);
|
||||
Object.assign(options.value, params);
|
||||
} else {
|
||||
Object.assign(options.value, opt);
|
||||
}
|
||||
console.log(options.value);
|
||||
if (options.value.shopId) {
|
||||
price.value= options.value.amount
|
||||
init();
|
||||
}
|
||||
flow();
|
||||
});
|
||||
|
||||
let timer = null;
|
||||
|
||||
function inputEvent(e) {
|
||||
console.log(e);
|
||||
clearTimeout(timer);
|
||||
|
||||
let value = e.detail.value;
|
||||
selChargeIndex.value = -1;
|
||||
// 1. 只保留数字和小数点，过滤其他所有字符
|
||||
value = value.replace(/[^\d.]/g, "");
|
||||
|
||||
// 2. 处理多个小数点（只保留第一个）
|
||||
const dotIndex = value.indexOf(".");
|
||||
if (dotIndex !== -1) {
|
||||
// 从第二个小数点开始，移除后续所有小数点
|
||||
value =
|
||||
value.slice(0, dotIndex + 1) +
|
||||
value.slice(dotIndex + 1).replace(/\./g, "");
|
||||
}
|
||||
|
||||
// 3. 限制小数位最多两位
|
||||
if (dotIndex !== -1 && value.length > dotIndex + 3) {
|
||||
value = value.slice(0, dotIndex + 3);
|
||||
}
|
||||
|
||||
// 4. 处理特殊情况：避免以多个0开头（如"000123" -> "0123"不合法，应改为"123"）
|
||||
// 但允许"0.12"这类合法格式
|
||||
if (value.startsWith("0") && value.length > 1 && !value.startsWith("0.")) {
|
||||
value = value.replace(/^0+/, "0"); // 多个0开头时只保留一个0
|
||||
// 如果是"000"则清空（根据需求调整，也可保留为"0"）
|
||||
if (value === "0" && !value.includes(".")) {
|
||||
value = "";
|
||||
}
|
||||
}
|
||||
|
||||
// 延迟更新，避免输入闪烁
|
||||
timer = setTimeout(() => {
|
||||
price.value = value;
|
||||
}, 30);
|
||||
}
|
||||
function wxlogin() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.login({
|
||||
success: (res) => {
|
||||
if (res.code) {
|
||||
resolve(res.code);
|
||||
} else {
|
||||
reject(res.errMsg);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err.errMsg);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const pay = (res) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.requestPayment({
|
||||
// #ifdef MP-WEIXIN
|
||||
provider: "wxpay", //支付类型-固定值
|
||||
partnerid: res.appId, // 微信支付商户号
|
||||
timeStamp: res.timeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.nonceStr, // 随机字符串
|
||||
package: res.package, // 固定值
|
||||
signType: res.signType, //固定值
|
||||
paySign: res.paySign, //签名
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
provider: "alipay", //支付类型-固定值
|
||||
orderInfo: res.tradeNo, // 微信支付商户号
|
||||
// #endif
|
||||
success: (res) => {
|
||||
console.log("pay");
|
||||
console.log(res);
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.showToast({
|
||||
title: "支付成功",
|
||||
icon: "none",
|
||||
});
|
||||
console.log("支付成功");
|
||||
resolve(true);
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
if (res.resultCode == "9000") {
|
||||
uni.showToast({
|
||||
title: "支付成功",
|
||||
icon: "none",
|
||||
});
|
||||
resolve(true);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "支付失败",
|
||||
icon: "none",
|
||||
});
|
||||
reject(false);
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
fail: (res) => {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
}, 1000);
|
||||
reject(false);
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
async function buy() {
|
||||
if (price.value <= 0) {
|
||||
uni.showToast({
|
||||
title: "金额不能小于0",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const code = await wxlogin();
|
||||
const shopInfo = uni.getStorageSync("shopInfo");
|
||||
const res = await mchRecharge({
|
||||
amount: price.value,
|
||||
shopId: shopInfo.id,
|
||||
code,
|
||||
payType: options.value.payType || "wechatPay",
|
||||
});
|
||||
if (res) {
|
||||
const paySuccess = await pay(res);
|
||||
if (paySuccess) {
|
||||
uni.showToast({
|
||||
title: "支付成功",
|
||||
icon: "none",
|
||||
});
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
query.page = 1;
|
||||
flow();
|
||||
}
|
||||
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
type:'self_recharge,manual_recharge'
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
records: [],
|
||||
totalRecharge: 0,
|
||||
});
|
||||
|
||||
const isEnd = ref(false);
|
||||
async function flow() {
|
||||
const res = await distributionFlowApi.flow(query);
|
||||
if (query.page == 1) {
|
||||
Object.assign(state, res);
|
||||
} else {
|
||||
state.records = state.records.concat(res.records || []);
|
||||
state.totalRecharge = res.totalRecharge || 0;
|
||||
}
|
||||
isEnd.value = query.page >= res.totalPage * 1;
|
||||
}
|
||||
onReachBottom(() => {
|
||||
if (isEnd.value) {
|
||||
return;
|
||||
}
|
||||
query.page++;
|
||||
flow();
|
||||
});
|
||||
async function init() {
|
||||
const code = await wxlogin();
|
||||
const res = await mchRecharge({
|
||||
...options.value,
|
||||
code,
|
||||
payType: options.value.payType || "wechatPay",
|
||||
});
|
||||
if (res) {
|
||||
const paySuccess = await pay(res);
|
||||
if (paySuccess) {
|
||||
uni.showToast({
|
||||
title: "支付成功",
|
||||
icon: "none",
|
||||
});
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
console.log(res);
|
||||
}
|
||||
watch(
|
||||
() => selChargeIndex.value,
|
||||
(newval) => {
|
||||
if (newval != -1) {
|
||||
price.value = chargeList.value[newval].price;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
position: relative;
|
||||
}
|
||||
.top {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.chrage-box {
|
||||
width: 750rpx;
|
||||
border-radius: 74rpx;
|
||||
background: #ffffff4d;
|
||||
padding: 42rpx 28rpx;
|
||||
}
|
||||
.title-bg {
|
||||
position: relative;
|
||||
.image {
|
||||
position: absolute;
|
||||
height: 14rpx;
|
||||
width: 94rpx;
|
||||
right: -10rpx;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.xieyi {
|
||||
color: #ecb592;
|
||||
}
|
||||
.chargeList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 68rpx;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
padding: 16rpx 36rpx;
|
||||
border-radius: 22rpx;
|
||||
background: linear-gradient(180deg, #f5f5f5 58.54%, #fff 104.47%);
|
||||
border: 6rpx solid transparent;
|
||||
transition: all 0.3s ease-in-out;
|
||||
margin-right: 30rpx;
|
||||
margin-bottom: 62rpx;
|
||||
position: relative;
|
||||
width: 220rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
&.active {
|
||||
border: 6rpx solid #fe6c0e;
|
||||
background: linear-gradient(180deg, #ffc29a -26.17%, #fff 64.06%);
|
||||
box-shadow: 0 0 31.2rpx 2rpx #fe8b435e;
|
||||
.price {
|
||||
.font-bold {
|
||||
color: #ff6300;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sel {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -22rpx;
|
||||
}
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: nowrap;
|
||||
color: #5f2e0f;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.u-text-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.input-box {
|
||||
padding: 24rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
.buy {
|
||||
padding: 32rpx 32rpx;
|
||||
background: linear-gradient(98deg, #fe6d1100 40.64%, #ffd1b4 105.2%),
|
||||
linear-gradient(259deg, #fe6d11 50.14%, #ffd1b4 114.93%);
|
||||
box-shadow: 0 14rpx 30.4rpx 0 #fe8b435e;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
border-radius: 40rpx;
|
||||
text-align: center;
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
.recoders-list {
|
||||
margin-top: 40rpx;
|
||||
.item {
|
||||
margin-bottom: 36rpx;
|
||||
background-color: #f8f8f8;
|
||||
padding: 32rpx 28rpx;
|
||||
border-radius: 16rpx;
|
||||
.price {
|
||||
line-height: 44rpx;
|
||||
font-weight: 700;
|
||||
color: #fe7e00;
|
||||
font-size: 48rpx;
|
||||
.yuan {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
15
pages.json
15
pages.json
@@ -98,7 +98,8 @@
|
||||
"pageId": "PAGES_PAY",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "支付"
|
||||
"navigationBarTitleText" : "分销",
|
||||
"navigationStyle" : "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
@@ -629,7 +630,17 @@
|
||||
"navigationBarTitleText": "消费返现"
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pageDistributionFlow",
|
||||
"pages": [{
|
||||
"pageId": "PAGES_DISTRIBUTION_FLOW_CHARGE",
|
||||
"path": "charge",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分销"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@@ -78,6 +78,12 @@
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_MARKET_CONSUME_CASHBACK'
|
||||
},
|
||||
{
|
||||
title: '分销',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_PAY'
|
||||
},
|
||||
|
||||
|
||||
];
|
||||
console.log(menusStore.adminPages);
|
||||
|
||||
389
pages/pay.vue
389
pages/pay.vue
@@ -1,13 +1,142 @@
|
||||
<template>
|
||||
<view> </view>
|
||||
<view class="box">
|
||||
<up-navbar
|
||||
title="分销"
|
||||
bg-color="transparent"
|
||||
:placeholder="true"
|
||||
@leftClick="back"
|
||||
></up-navbar>
|
||||
<view class="top">
|
||||
<image
|
||||
src="/static/market/top-bg.png"
|
||||
class="image"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</view>
|
||||
<view style="height: 38rpx"></view>
|
||||
<view class="chrage-box">
|
||||
<view class="u-flex u-flex-between">
|
||||
<view class="u-flex">
|
||||
<image
|
||||
src="/static/market/gold.png"
|
||||
style="width: 44rpx; height: 44rpx"
|
||||
></image>
|
||||
<view class="title-bg">
|
||||
<image src="/static/market/title-bg.png" class="image"></image>
|
||||
<view class="font-bold u-font-32 color-333 u-m-l-24">立即充值</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<text class="u-font-24 color-999"> 充值代表接受</text>
|
||||
<text class="u-font-24 xieyi"> 《用户隐私协议》 </text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="list u-m-t-32 u-flex u-m-t-60"
|
||||
style="align-items: flex-start"
|
||||
>
|
||||
<text class="font-bold u-font-32 color-333 u-text-nowrap"
|
||||
>选择金额</text
|
||||
>
|
||||
<view class="u-m-l-60 chargeList">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in chargeList"
|
||||
:key="index"
|
||||
:class="{ active: selChargeIndex == index }"
|
||||
@click="changeCharge(index)"
|
||||
>
|
||||
<view class="price">
|
||||
<text class="u-font-28">¥ </text>
|
||||
<text class="font-bold" style="font-size: 48rpx">{{
|
||||
item.price
|
||||
}}</text>
|
||||
</view>
|
||||
<image
|
||||
class="sel"
|
||||
v-show="selChargeIndex == index"
|
||||
src="/static/market/sel.png"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex input-box u-m-t-30">
|
||||
<text class="color-333 u-font-28 font-700">其他金额</text>
|
||||
<view class="u-flex-1 u-flex u-m-l-28">
|
||||
<input
|
||||
:min="0.01"
|
||||
placeholder-class="u-font-24"
|
||||
type="digit"
|
||||
class="u-flex-1 u-font-28"
|
||||
placeholder="请输入充值金额"
|
||||
@input="inputEvent"
|
||||
v-model="price"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buy" @click="buy">立即充值</view>
|
||||
|
||||
<view class="u-flex u-flex-between u-m-t-60">
|
||||
<view class="u-flex">
|
||||
<view class="title-bg">
|
||||
<image src="/static/market/title-bg.png" class="image"></image>
|
||||
<view class="font-bold u-font-32 color-333 u-m-l-24">充值记录</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<text class="u-font-28 color-333">
|
||||
总计：{{ state.totalRecharge || 0 }}元</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="recoders-list" v-if="state.records.length">
|
||||
<view class="item" v-for="(item, index) in state.records" :key="index">
|
||||
<view class="u-flex u-flex-between">
|
||||
<view class="u-font-28">
|
||||
<view class="color-666">
|
||||
<text v-if="item.type === 'self_recharge'">自助充值</text>
|
||||
<text v-if="item.type === 'manual_recharge'">手动充值</text>
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<text class="color-666">时间：</text>
|
||||
<text class="color-333">{{ item.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text>{{ item.changeAmount }}</text>
|
||||
<text class="yuan">元</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<up-loadmore :status="isEnd ? 'nomore' : 'loadmore'"></up-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { mchRecharge } from "@/http/api/pay";
|
||||
import { onMounted, ref, reactive } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import * as distributionFlowApi from "@/http/api/market/distributionFlow.js";
|
||||
import { onMounted, ref, reactive, watch } from "vue";
|
||||
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
|
||||
function back() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
const options = ref({});
|
||||
|
||||
const price = ref("");
|
||||
|
||||
const chargeList = ref([
|
||||
{ price: "500.00" },
|
||||
{ price: "800.00" },
|
||||
{ price: "1000.00" },
|
||||
{ price: "2000.00" },
|
||||
]);
|
||||
const selChargeIndex = ref(0);
|
||||
function changeCharge(index) {
|
||||
selChargeIndex.value = index;
|
||||
}
|
||||
function parseQueryString(queryString) {
|
||||
const queryParams = queryString.split("&").map((param) => param.split("="));
|
||||
const params = {};
|
||||
@@ -26,9 +155,58 @@ onLoad((opt) => {
|
||||
Object.assign(options.value, opt);
|
||||
}
|
||||
console.log(options.value);
|
||||
init();
|
||||
if (options.value.shopId) {
|
||||
price.value = options.value.amount;
|
||||
selChargeIndex.value = chargeList.value.findIndex(
|
||||
(item) => item.price*1 === options.value.amount*1
|
||||
);
|
||||
init();
|
||||
}
|
||||
flow();
|
||||
});
|
||||
|
||||
let timer = null;
|
||||
|
||||
function inputEvent(e) {
|
||||
console.log(e);
|
||||
clearTimeout(timer);
|
||||
|
||||
let value = e.detail.value;
|
||||
// 1. 只保留数字和小数点，过滤其他所有字符
|
||||
value = value.replace(/[^\d.]/g, "");
|
||||
|
||||
// 2. 处理多个小数点（只保留第一个）
|
||||
const dotIndex = value.indexOf(".");
|
||||
if (dotIndex !== -1) {
|
||||
// 从第二个小数点开始，移除后续所有小数点
|
||||
value =
|
||||
value.slice(0, dotIndex + 1) +
|
||||
value.slice(dotIndex + 1).replace(/\./g, "");
|
||||
}
|
||||
|
||||
// 3. 限制小数位最多两位
|
||||
if (dotIndex !== -1 && value.length > dotIndex + 3) {
|
||||
value = value.slice(0, dotIndex + 3);
|
||||
}
|
||||
|
||||
// 4. 处理特殊情况：避免以多个0开头（如"000123" -> "0123"不合法，应改为"123"）
|
||||
// 但允许"0.12"这类合法格式
|
||||
if (value.startsWith("0") && value.length > 1 && !value.startsWith("0.")) {
|
||||
value = value.replace(/^0+/, "0"); // 多个0开头时只保留一个0
|
||||
// 如果是"000"则清空（根据需求调整，也可保留为"0"）
|
||||
if (value === "0" && !value.includes(".")) {
|
||||
value = "";
|
||||
}
|
||||
}
|
||||
|
||||
// 延迟更新，避免输入闪烁
|
||||
timer = setTimeout(() => {
|
||||
selChargeIndex.value = chargeList.value.findIndex(
|
||||
(item) => item.price*1 === value*1
|
||||
);
|
||||
price.value = value;
|
||||
}, 30);
|
||||
}
|
||||
function wxlogin() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.login({
|
||||
@@ -48,7 +226,6 @@ function wxlogin() {
|
||||
|
||||
const pay = (res) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
uni.requestPayment({
|
||||
// #ifdef MP-WEIXIN
|
||||
provider: "wxpay", //支付类型-固定值
|
||||
@@ -100,6 +277,68 @@ const pay = (res) => {
|
||||
});
|
||||
};
|
||||
|
||||
async function buy() {
|
||||
if (price.value <= 0) {
|
||||
uni.showToast({
|
||||
title: "金额不能小于0",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const code = await wxlogin();
|
||||
const shopInfo = uni.getStorageSync("shopInfo");
|
||||
const res = await mchRecharge({
|
||||
amount: price.value,
|
||||
shopId: shopInfo.id,
|
||||
code,
|
||||
payType: options.value.payType || "wechatPay",
|
||||
});
|
||||
if (res) {
|
||||
const paySuccess = await pay(res);
|
||||
if (paySuccess) {
|
||||
uni.showToast({
|
||||
title: "支付成功",
|
||||
icon: "none",
|
||||
});
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
query.page = 1;
|
||||
flow();
|
||||
}
|
||||
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
type: "self_recharge,manual_recharge",
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
records: [],
|
||||
totalRecharge: 0,
|
||||
});
|
||||
|
||||
const isEnd = ref(false);
|
||||
async function flow() {
|
||||
const res = await distributionFlowApi.flow(query);
|
||||
if (query.page == 1) {
|
||||
Object.assign(state, res);
|
||||
} else {
|
||||
state.records = state.records.concat(res.records || []);
|
||||
state.totalRecharge = res.totalRecharge || 0;
|
||||
}
|
||||
isEnd.value = query.page >= res.totalPage * 1;
|
||||
}
|
||||
onReachBottom(() => {
|
||||
if (isEnd.value) {
|
||||
return;
|
||||
}
|
||||
query.page++;
|
||||
flow();
|
||||
});
|
||||
async function init() {
|
||||
const code = await wxlogin();
|
||||
const res = await mchRecharge({
|
||||
@@ -107,15 +346,149 @@ async function init() {
|
||||
code,
|
||||
payType: options.value.payType || "wechatPay",
|
||||
});
|
||||
if(res){
|
||||
const paySuccess= await pay(res);
|
||||
if(paySuccess){
|
||||
if (res) {
|
||||
const paySuccess = await pay(res);
|
||||
if (paySuccess) {
|
||||
uni.showToast({
|
||||
title: "支付成功",
|
||||
icon: "none",
|
||||
});
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
console.log(res);
|
||||
}
|
||||
watch(
|
||||
() => selChargeIndex.value,
|
||||
(newval) => {
|
||||
if (newval != -1 &&price.value*1!=chargeList.value[newval].price*1) {
|
||||
price.value = chargeList.value[newval].price;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
position: relative;
|
||||
}
|
||||
.top {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.chrage-box {
|
||||
width: 750rpx;
|
||||
border-radius: 74rpx;
|
||||
background: #ffffff4d;
|
||||
padding: 42rpx 28rpx;
|
||||
}
|
||||
.title-bg {
|
||||
position: relative;
|
||||
.image {
|
||||
position: absolute;
|
||||
height: 14rpx;
|
||||
width: 94rpx;
|
||||
right: -10rpx;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.xieyi {
|
||||
color: #ecb592;
|
||||
}
|
||||
.chargeList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 68rpx;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
padding: 16rpx 36rpx;
|
||||
border-radius: 22rpx;
|
||||
background: linear-gradient(180deg, #f5f5f5 58.54%, #fff 104.47%);
|
||||
border: 6rpx solid transparent;
|
||||
transition: all 0.3s ease-in-out;
|
||||
margin-right: 30rpx;
|
||||
margin-bottom: 62rpx;
|
||||
position: relative;
|
||||
width: 220rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
&.active {
|
||||
border: 6rpx solid #fe6c0e;
|
||||
background: linear-gradient(180deg, #ffc29a -26.17%, #fff 64.06%);
|
||||
box-shadow: 0 0 31.2rpx 2rpx #fe8b435e;
|
||||
.price {
|
||||
.font-bold {
|
||||
color: #ff6300;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sel {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -22rpx;
|
||||
}
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: nowrap;
|
||||
color: #5f2e0f;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.u-text-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.input-box {
|
||||
padding: 24rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
.buy {
|
||||
padding: 32rpx 32rpx;
|
||||
background: linear-gradient(98deg, #fe6d1100 40.64%, #ffd1b4 105.2%),
|
||||
linear-gradient(259deg, #fe6d11 50.14%, #ffd1b4 114.93%);
|
||||
box-shadow: 0 14rpx 30.4rpx 0 #fe8b435e;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
border-radius: 40rpx;
|
||||
text-align: center;
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
.recoders-list {
|
||||
margin-top: 40rpx;
|
||||
.item {
|
||||
margin-bottom: 36rpx;
|
||||
background-color: #f8f8f8;
|
||||
padding: 32rpx 28rpx;
|
||||
border-radius: 16rpx;
|
||||
.price {
|
||||
line-height: 44rpx;
|
||||
font-weight: 700;
|
||||
color: #fe7e00;
|
||||
font-size: 48rpx;
|
||||
.yuan {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
arr: [],
|
||||
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
||||
timer: null, // 定时器
|
||||
isTabClickOver:true
|
||||
isTabClickOver: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -192,9 +192,9 @@
|
||||
let height2 = this.arr[i + 1];
|
||||
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
||||
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
|
||||
if(this.isTabClickOver){
|
||||
if (this.isTabClickOver) {
|
||||
this.leftMenuStatus(i);
|
||||
}else{
|
||||
} else {
|
||||
this.isTabClickOver = true;
|
||||
}
|
||||
return;
|
||||
|
||||
BIN
static/market/gold.png
Normal file
BIN
static/market/gold.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
static/market/sel.png
Normal file
BIN
static/market/sel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 937 B |
BIN
static/market/title-bg.png
Normal file
BIN
static/market/title-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 882 B |
BIN
static/market/top-bg.png
Normal file
BIN
static/market/top-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
@@ -51,7 +51,9 @@ export const useMenusStore = defineStore('menus', {
|
||||
async getMenus() {
|
||||
const data = await menusApi.getMenus()
|
||||
this.originMenus = data;
|
||||
const arr = flattenNestedChildren(data).filter(v => v.miniPath)
|
||||
const arr = flattenNestedChildren(data).filter(v =>{
|
||||
return v.miniPath
|
||||
})
|
||||
this.adminPages=arr;
|
||||
this.menuList = this.allPages.filter(v => {
|
||||
const findItem = arr.find(item => item.miniPath == v.pageId || item.miniPath
|
||||
|
||||
Reference in New Issue
Block a user