diff --git a/http/api/market/distributionFlow.js b/http/api/market/distributionFlow.js
new file mode 100644
index 0000000..181ac2d
--- /dev/null
+++ b/http/api/market/distributionFlow.js
@@ -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
+        }
+    })
+}
diff --git a/pageDistributionFlow/charge.vue b/pageDistributionFlow/charge.vue
new file mode 100644
index 0000000..a472cbd
--- /dev/null
+++ b/pageDistributionFlow/charge.vue
@@ -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>
+  
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 4ef467a..7fa2055 100644
--- a/pages.json
+++ b/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": "分销"
+				}
+			}
 		]
 		}
 
diff --git a/pages/appliccation/marketing.vue b/pages/appliccation/marketing.vue
index 1a3365d..8c34b50 100644
--- a/pages/appliccation/marketing.vue
+++ b/pages/appliccation/marketing.vue
@@ -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);
diff --git a/pages/pay.vue b/pages/pay.vue
index adf7562..f127d40 100644
--- a/pages/pay.vue
+++ b/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>
diff --git a/pages/permission/permission.vue b/pages/permission/permission.vue
index b74084c..b2568ef 100644
--- a/pages/permission/permission.vue
+++ b/pages/permission/permission.vue
@@ -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;
diff --git a/static/market/gold.png b/static/market/gold.png
new file mode 100644
index 0000000..0e327e9
Binary files /dev/null and b/static/market/gold.png differ
diff --git a/static/market/sel.png b/static/market/sel.png
new file mode 100644
index 0000000..557284f
Binary files /dev/null and b/static/market/sel.png differ
diff --git a/static/market/title-bg.png b/static/market/title-bg.png
new file mode 100644
index 0000000..08dedba
Binary files /dev/null and b/static/market/title-bg.png differ
diff --git a/static/market/top-bg.png b/static/market/top-bg.png
new file mode 100644
index 0000000..be867fa
Binary files /dev/null and b/static/market/top-bg.png differ
diff --git a/store/menus.js b/store/menus.js
index c1f4c1e..5f44d1a 100644
--- a/store/menus.js
+++ b/store/menus.js
@@ -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