czg_team/cashier_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

分销模块页面接口完成

Browse Source
This commit is contained in:
YeMingfei666
2025-11-20 10:26:25 +08:00
parent c6a1751e72
commit 1070049a9d
10 changed files with 1397 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
pages/pay.vue
View File

@@ -1,115 +1,105 @@
<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="box min-page">
<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 class="bg-fff container">
<view class="u-flex u-flex-between">
<view class="u-flex">
<view class="title-bg">
<view class="font-bold u-font-32 color-333">当前余额：{{distributionFlowRes.balanceAmount}}</view>
</view>
</view>
<view>
<text class="u-font-32 color-main" @click="go.to('PAGES_DISTRIBUTION_MONEY_RECODERS')"> 查看记录</text>
</view>
</view>
<view>
<text class="u-font-24 color-999"> 充值代表接受</text>
<text class="u-font-24 xieyi"> 《用户隐私协议》 </text>
<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 u-font-32">{{ item.price }}</text>
</view>
<image
class="sel"
v-show="selChargeIndex == index"
src="/static/iconimg/icon-sel.png"
></image>
</view>
</view>
</view>
<view class="u-flex input-box">
<text class="color-333 u-font-28 font-bold">其他金额</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>
<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="u-m-t-32"></view>
<my-button @click="buy">立即充值</my-button>
<view class="container u-m-t-32">
<view class="u-flex u-flex-between ">
<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 chargeList"
v-for="(item, index) in state.records"
: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 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="u-m-t-16">
<text class="color-666">时间：</text>
<text class="color-333">{{ item.createTime }}</text>
<view class="price">
<text>{{ item.changeAmount }}</text>
<text class="yuan">元</text>
</view>
</view>
<view class="price">
<text>{{ item.changeAmount }}</text>
<text class="yuan">元</text>
</view>
</view>
<up-loadmore :status="isEnd ? 'nomore' : 'loadmore'"></up-loadmore>
</view>
<up-loadmore :status="isEnd ? 'nomore' : 'loadmore'"></up-loadmore>
</view>
</view>
</view>
@@ -117,9 +107,11 @@
<script setup>
import { mchRecharge } from "@/http/api/pay";
import * as distributionFlowApi from "@/http/api/market/distributionFlow.js";
import * as distributionApi from "@/http/api/market/distribution.js";
import { onMounted, ref, reactive, watch } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import go from "@/commons/utils/go.js";
function back() {
uni.navigateBack();
}
@@ -158,11 +150,12 @@ onLoad((opt) => {
if (options.value.shopId) {
price.value = options.value.amount;
selChargeIndex.value = chargeList.value.findIndex(
(item) => item.price*1 === options.value.amount*1
(item) => item.price * 1 === options.value.amount * 1
);
init();
}
flow();
distributionFlow();
});
let timer = null;
@@ -202,7 +195,7 @@ function inputEvent(e) {
// 延迟更新，避免输入闪烁
timer = setTimeout(() => {
selChargeIndex.value = chargeList.value.findIndex(
(item) => item.price*1 === value*1
(item) => item.price * 1 === value * 1
);
price.value = value;
}, 30);
@@ -308,6 +301,7 @@ async function buy() {
function refresh() {
query.page = 1;
flow();
distributionFlow()
}
const query = reactive({
@@ -321,9 +315,16 @@ const state = reactive({
totalRecharge: 0,
});
const distributionFlowRes=ref({})
async function distributionFlow(){
const res=await distributionApi.distributionFlow();
distributionFlowRes.value=res
}
const isEnd = ref(false);
async function flow() {
const res = await distributionFlowApi.flow(query);
const res = await distributionApi.moneyRecoders(query);
if (query.page == 1) {
Object.assign(state, res);
} else {
@@ -341,6 +342,7 @@ onReachBottom(() => {
});
async function init() {
const code = await wxlogin();
distributionFlow();
const res = await mchRecharge({
...options.value,
code,
@@ -361,7 +363,7 @@ async function init() {
watch(
() => selChargeIndex.value,
(newval) => {
if (newval != -1 &&price.value*1!=chargeList.value[newval].price*1) {
if (newval != -1 && price.value * 1 != chargeList.value[newval].price * 1) {
price.value = chargeList.value[newval].price;
}
},
@@ -372,22 +374,19 @@ watch(
</script>
<style scoped lang="scss">
.min-page {
background: #f5f5f5;
}
.box {
position: relative;
}
.top {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: -1;
.image {
width: 100%;
}
.container {
padding: 32rpx 24rpx;
border-radius: 16rpx;
background-color: #fff;
}
.chrage-box {
width: 750rpx;
border-radius: 74rpx;
background: #ffffff4d;
padding: 42rpx 28rpx;
@@ -413,24 +412,20 @@ watch(
justify-content: space-between;
.item {
padding: 16rpx 36rpx;
border-radius: 22rpx;
background: linear-gradient(180deg, #f5f5f5 58.54%, #fff 104.47%);
border-radius: 8rpx;
background-color: #f8f8f8;
border: 6rpx solid transparent;
transition: all 0.3s ease-in-out;
margin-right: 30rpx;
margin-bottom: 62rpx;
margin-bottom: 36rpx;
position: relative;
width: 220rpx;
width: 172rpx;
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;
border: 6rpx solid $my-main-color;
.price {
.font-bold {
color: #ff6300;
}
color: $my-main-color;
}
}
.sel {
@@ -445,7 +440,7 @@ watch(
display: flex;
align-items: baseline;
flex-wrap: nowrap;
color: #5f2e0f;
color: #333;
}
}
.item:nth-of-type(2n) {
@@ -460,18 +455,7 @@ watch(
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 {
@@ -482,8 +466,8 @@ watch(
.price {
line-height: 44rpx;
font-weight: 700;
color: #fe7e00;
font-size: 48rpx;
color: $my-main-color;
font-size: 44rpx;
.yuan {
font-weight: 400;
font-size: 28rpx;