diff --git a/src/pages/ycysp/component/coupon-item.vue b/src/pages/ycysp/component/coupon-item.vue
index c100985..fb400b6 100644
--- a/src/pages/ycysp/component/coupon-item.vue
+++ b/src/pages/ycysp/component/coupon-item.vue
@@ -1,84 +1,85 @@
 <template>
   <view class="flex coupon-wrapper">
     <view class="flex flex-justify-center flex-items-center left">
-        <text>￥</text>
-        <text>10</text>
+      <text>￥</text>
+      <text>10</text>
     </view>
     <view class="flex flex-justify-between flex-items-center right">
-        <view class="coupon-info">
-            <view class="coupon-name">芒果全屏会员年卡适用</view>
-            <view class="coupon-time">2024.09.19 -2024.10.31</view>
-            <view class="coupon-time">单日限领取1张</view>
-        </view>
-        <view class="flex flex-justify-center flex-items-center btn">立即领取</view>
+      <view class="coupon-info">
+        <view class="coupon-name">芒果全屏会员年卡适用</view>
+        <view class="coupon-time">2024.09.19 -2024.10.31</view>
+        <view class="coupon-time">单日限领取1张</view>
+      </view>
+      <view class="flex flex-justify-center flex-items-center btn"
+        >立即领取</view
+      >
     </view>
   </view>
 </template>
 
 <script setup>
-import { ref, reactive, unref, onMounted} from 'vue';
-
+import { ref, reactive, unref, onMounted } from "vue";
 </script>
 <style scoped lang="scss">
-.coupon-wrapper{
-    width: 686rpx;
-    height: 178rpx;
-    box-sizing: border-box;
-    background: url('@/static/ycysp/coupon.webp') no-repeat;
-    background-size: 100% 100%;
+.coupon-wrapper {
+  width: 686rpx;
+  height: 178rpx;
+  box-sizing: border-box;
+  background: url("@/static/ycysp/coupon.webp") no-repeat;
+  background-size: 100% 100%;
 }
-.left{
-    width:150rpx;
-    height:100%;
-    color: #0E9BF2;
-    letter-spacing: 0.04em;
-    font-weight: bold;
+.left {
+  width: 150rpx;
+  height: 100%;
+  color: #0e9bf2;
+  letter-spacing: 0.04em;
+  font-weight: bold;
+  line-height: normal;
+  margin-right: 20rpx;
+
+  text:first-child {
+    font-size: 26rpx;
+  }
+  text:last-child {
+    font-size: 74rpx;
+  }
+}
+.right {
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+  padding-left: 10rpx;
+  padding-right: 20rpx;
+  overflow: hidden;
+  .coupon-info {
+    width: calc(100% - 30rpx - 162rpx);
+    font-weight: normal;
     line-height: normal;
-    margin-right:20rpx;
-   
-    text:first-child{
-        font-size: 26rpx;
-    }
-    text:last-child{
-        font-size: 74rpx;
-    }
-}
-.right{
-    flex:1;
-    height:100%;
-    box-sizing: border-box;
-    padding-left:10rpx;
-    padding-right:20rpx;
+    letter-spacing: 0.04em;
+  }
+  .coupon-name {
+    width: 100%;
+    font-size: 28rpx;
+    color: #1f93da;
     overflow: hidden;
-    .coupon-info{
-        width:calc(100% - 30rpx - 162rpx);
-        font-weight: normal;
-        line-height: normal;
-        letter-spacing: 0.04em;
-    }
-    .coupon-name{
-        width:100%;
-        font-size: 28rpx;
-        color: #1F93DA;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-    .coupon-time{
-        font-size: 24rpx;
-        color: #78839E;
-        margin-top:6rpx;
-    }
-    .btn{
-        width: 162rpx;
-        height: 64rpx;
-        border-radius: 27rpx;
-        opacity: 1;
-        font-size: 28rpx;
-        font-weight: normal;
-        line-height: 32rpx;
-        color: #FFFFFF;
-        background: linear-gradient(270deg, #9ad2ff  0%, #0e9bf2  100%);
-    }
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .coupon-time {
+    font-size: 24rpx;
+    color: #78839e;
+    margin-top: 6rpx;
+  }
+  .btn {
+    width: 162rpx;
+    height: 64rpx;
+    border-radius: 27rpx;
+    opacity: 1;
+    font-size: 28rpx;
+    font-weight: normal;
+    line-height: 32rpx;
+    color: #ffffff;
+    background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/ycysp/component/member.vue b/src/pages/ycysp/component/member.vue
index 9738672..01e6c01 100644
--- a/src/pages/ycysp/component/member.vue
+++ b/src/pages/ycysp/component/member.vue
@@ -1,35 +1,64 @@
 <template>
-  <view class="wrapper" :style="{backgroundImage:`url(${detail.brand_logo})`}">
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
-      viewBox="0 0 13 13" class="svg" @click="checkedEvent">
+  <view
+    class="wrapper"
+    :style="{ backgroundImage: `url(${detail.brand_logo})` }"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      fill="none"
+      version="1.1"
+      viewBox="0 0 13 13"
+      class="svg"
+      @click="checkedEvent"
+    >
       <g>
-        <ellipse cx="6.5" cy="6.5" rx="6.5" ry="6.5" fill="#FFFFFF" fill-opacity="1" />
+        <ellipse
+          cx="6.5"
+          cy="6.5"
+          rx="6.5"
+          ry="6.5"
+          fill="#FFFFFF"
+          fill-opacity="1"
+        />
         <path
-d="M6.85467,0.16026C6.65747,-0.049906,6.33416,-0.0538585,6.13257,0.151333L2.65289,3.69208L0.855769,1.81926C0.669146,1.62458,0.356251,1.63538,0.156706,1.84316C-0.0428302,2.05098,-0.0532221,2.37714,0.133625,2.57177L2.33038,4.86098C2.51696,5.05539,2.82989,5.04459,3.0294,4.83682C3.07511,4.78922,3.10934,4.73525,3.13501,4.67819C3.15477,4.66321,3.17447,4.649,3.19236,4.63059L6.84614,0.91282C7.048,0.707426,7.05164,0.370686,6.85467,0.16026L6.85467,0.16026Z"
-:fill="checkedColor[detail.id]" fill-opacity="1" class="gou" v-if="detail.isChecked"/>
-        <ellipse cx="6.5" cy="6.5" rx="6.2" ry="6.2" fill-opacity="0" stroke-opacity="1"
-          :stroke="checkedColor[detail.id]" fill="none" stroke-width="0.6" />
+          d="M6.85467,0.16026C6.65747,-0.049906,6.33416,-0.0538585,6.13257,0.151333L2.65289,3.69208L0.855769,1.81926C0.669146,1.62458,0.356251,1.63538,0.156706,1.84316C-0.0428302,2.05098,-0.0532221,2.37714,0.133625,2.57177L2.33038,4.86098C2.51696,5.05539,2.82989,5.04459,3.0294,4.83682C3.07511,4.78922,3.10934,4.73525,3.13501,4.67819C3.15477,4.66321,3.17447,4.649,3.19236,4.63059L6.84614,0.91282C7.048,0.707426,7.05164,0.370686,6.85467,0.16026L6.85467,0.16026Z"
+          :fill="checkedColor[detail.id]"
+          fill-opacity="1"
+          class="gou"
+          v-if="detail.isChecked"
+        />
+        <ellipse
+          cx="6.5"
+          cy="6.5"
+          rx="6.2"
+          ry="6.2"
+          fill-opacity="0"
+          stroke-opacity="1"
+          :stroke="checkedColor[detail.id]"
+          fill="none"
+          stroke-width="0.6"
+        />
       </g>
     </svg>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, unref, onMounted } from 'vue';
-import {checkedColor} from '../config'
+import { ref, reactive, unref, onMounted } from "vue";
+import { checkedColor } from "../config";
 
 const props = defineProps({
-  detail:{
-    type:Object,
-    required:true
-  }
-})
-const emits = defineEmits(['checked'])
+  detail: {
+    type: Object,
+    required: true,
+  },
+});
+const emits = defineEmits(["checked"]);
 
 const checkedEvent = () => {
-  emits('checked',props.detail.id)
-}
-
+  emits("checked", props.detail.id);
+};
 </script>
 <style scoped lang="scss">
 .wrapper {
@@ -42,10 +71,10 @@ const checkedEvent = () => {
   background-size: 100% 100%;
   position: relative;
 }
-.gou{
-  width:14rpx;
-  height:10rpx;
-  transform: translate(6rpx,8rpx);
+.gou {
+  width: 14rpx;
+  height: 10rpx;
+  transform: translate(6rpx, 8rpx);
 }
 .svg {
   position: absolute;
@@ -54,4 +83,4 @@ const checkedEvent = () => {
   width: 27rpx;
   height: 27rpx;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/ycysp/component/order-item.vue b/src/pages/ycysp/component/order-item.vue
index 89d49e4..768dc45 100644
--- a/src/pages/ycysp/component/order-item.vue
+++ b/src/pages/ycysp/component/order-item.vue
@@ -1,225 +1,244 @@
 <template>
-    <view class="order-item-wrapper flex flex-col box-border" @click="goDetail">
-        <view class="nav-info flex flex-justify-between" >
-            <view>订单编号：{{ detail.order_no }}</view>
-            <view :style="{color:stateColor[detail.status] || ''}">{{ stateConfig[detail.status] }}</view>
+  <view class="order-item-wrapper flex flex-col box-border" @click="goDetail">
+    <view class="nav-info flex flex-justify-between">
+      <view>订单编号：{{ detail.order_no }}</view>
+      <view :style="{ color: stateColor[detail.status] || '' }">{{
+        stateConfig[detail.status]
+      }}</view>
+    </view>
+    <view class="order-info">
+      <view class="content flex">
+        <image :src="detail.main_image" class="pro-img" />
+        <view class="flex flex-1 flex-col">
+          <view class="flex flex-justify-between name info-item">
+            <view class="text-over">{{ detail.product_name }}</view>
+            <view class="amount"
+              ><text>￥</text>{{ detail.order_amount }}<text>元</text></view
+            >
+          </view>
+          <view class="flex num">
+            <view>充值账号：</view>
+            <view>{{ maskPhoneNumber(detail.account) }}</view>
+          </view>
+          <view class="flex flex-justify-between num">
+            <view>数量</view>
+            <view>x1</view>
+          </view>
         </view>
-        <view class="order-info">
-            <view class="content flex">
-                <image
-                    :src="detail.main_image"
-                    class="pro-img"
-                />
-                <view class="flex flex-1 flex-col">
-                    <view class="flex flex-justify-between name info-item">
-                        <view class="text-over">{{ detail.product_name }}</view>
-                        <view class="amount"><text>￥</text>{{ detail.order_amount }}<text>元</text></view>
-                    </view>
-                    <view class="flex num">
-                        <view>充值账号：</view>
-                        <view>{{ maskPhoneNumber(detail.account) }}</view>
-                    </view>
-                    <view class="flex flex-justify-between num">
-                        <view>数量</view>
-                        <view>x1</view>
-                    </view>
-                </view>
-            </view>
-            <view class="flex flex-justify-between time">
-                <view>下单时间：{{ detail.create_time }}</view>
-                <!-- <view v-if="[1].includes(detail.status)">优惠金额：¥{{ discount  }}</view> -->
-            </view>
-        </view>
-        <view class="line"></view>
-        <view class="bottoms">
-            <!-- <view class="pay-des" v-if="[1].includes(detail.status)">
+      </view>
+      <view class="flex flex-justify-between time">
+        <view>下单时间：{{ detail.create_time }}</view>
+        <!-- <view v-if="[1].includes(detail.status)">优惠金额：¥{{ discount  }}</view> -->
+      </view>
+    </view>
+    <view class="line"></view>
+    <view class="bottoms">
+      <!-- <view class="pay-des" v-if="[1].includes(detail.status)">
                 <view class="count-item">共 1 件，应付总额：<text style="text-decoration: line-through;">￥{{ detail.order_amount }}</text></view>
                 <view class="number-item">实际支付：¥{{ detail.wait_amount }}</view>
             </view> -->
-            <view class="btns">
-                 <!-- <view class="btn del" @click="goDel">删除订单</view> -->
-                <view class="btn pay"  v-if="[1].includes(detail.status)" @click="goPay">立即付款</view>
-                <view class="btn pay"   @click="goRefund"  v-if="[4].includes(detail.status)">申请退款</view>
-            </view>
-        </view>
+      <view class="btns">
+        <!-- <view class="btn del" @click="goDel">删除订单</view> -->
+        <view class="btn pay" v-if="[1].includes(detail.status)" @click="goPay"
+          >立即付款</view
+        >
+        <view
+          class="btn pay"
+          @click="goRefund"
+          v-if="[4].includes(detail.status)"
+          >申请退款</view
+        >
+      </view>
     </view>
- </template>
- 
- <script setup>
-    import { computed} from 'vue';
-    import { stateConfig, stateColor } from '../config';
-    const props = defineProps({
-        detail:{
-            type:Object,
-            required: true,
-            default:() => ({})
-        }
-    })
-    const emits = defineEmits(['pay-event','detail-event','pwd-event','del-event'])
+  </view>
+</template>
 
-    function goPay(e){
-        if(e.stopPropagation) { //W3C阻止冒泡方法  
-            e.stopPropagation();  
-        }
-        emits('pay-event', props.detail);
-    }
+<script setup>
+import { computed } from "vue";
+import { stateConfig, stateColor } from "../config";
+const props = defineProps({
+  detail: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const emits = defineEmits([
+  "pay-event",
+  "detail-event",
+  "pwd-event",
+  "del-event",
+]);
 
-    const discount = computed(() => {
-        if(!Object.keys(props.detail).length)return 0
-        return (Number(props.detail.order_amount)*100 - Number(props.detail.wait_amount)*100) / 100
-    })
+function goPay(e) {
+  if (e.stopPropagation) {
+    //W3C阻止冒泡方法
+    e.stopPropagation();
+  }
+  emits("pay-event", props.detail);
+}
 
+const discount = computed(() => {
+  if (!Object.keys(props.detail).length) return 0;
+  return (
+    (Number(props.detail.order_amount) * 100 -
+      Number(props.detail.wait_amount) * 100) /
+    100
+  );
+});
 
-    function maskPhoneNumber(phoneNumber) {
-        return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
-    }
+function maskPhoneNumber(phoneNumber) {
+  return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
+}
 
+function goDetail(e) {
+  emits("detail-event", props.detail);
+}
 
-    function goDetail(e){
-        emits('detail-event', props.detail);
-    }
+function goPwd(e) {
+  if (e.stopPropagation) {
+    //W3C阻止冒泡方法
+    e.stopPropagation();
+  }
+  emits("pwd-event", props.detail);
+}
 
-    function goPwd(e){
-        if(e.stopPropagation) { //W3C阻止冒泡方法  
-            e.stopPropagation();  
-        }
-        emits('pwd-event', props.detail);
-    }
+function goDel(e) {
+  if (e.stopPropagation) {
+    //W3C阻止冒泡方法
+    e.stopPropagation();
+  }
+  emits("del-event", props.detail);
+}
 
-    function goDel(e){
-        if(e.stopPropagation) { //W3C阻止冒泡方法  
-            e.stopPropagation();  
-        }
-        emits('del-event', props.detail);
-    }
-
-    function goRefund(e){
-        if(e.stopPropagation) { //W3C阻止冒泡方法  
-            e.stopPropagation();  
-        }
-        emits('refund-event', props.detail);
-    }
+function goRefund(e) {
+  if (e.stopPropagation) {
+    //W3C阻止冒泡方法
+    e.stopPropagation();
+  }
+  emits("refund-event", props.detail);
+}
 </script>
- 
- <style lang="scss">
- .order-item-wrapper{
-    width: 702rpx;
-    // height: 386rpx;
-    background: #FFFFFF;
-    border-radius: 24rpx;
-    padding:24rpx;
-    margin:24rpx 0 16rpx;
- }
- .nav-info{
-    font-size:22rpx;
-    font-weight:400;
-    :first-child{
-        color: #333333;
+
+<style lang="scss">
+.order-item-wrapper {
+  width: 702rpx;
+  // height: 386rpx;
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 24rpx;
+  margin: 24rpx 0 16rpx;
+}
+.nav-info {
+  font-size: 22rpx;
+  font-weight: 400;
+  :first-child {
+    color: #333333;
+  }
+  :last-child {
+    color: #787878;
+  }
+}
+.order-info {
+  margin-top: 24rpx;
+  .content {
+    margin-bottom: 24rpx;
+    font-weight: 400;
+    .pro-img {
+      display: block;
+      width: 90rpx;
+      height: 90rpx;
+      margin-right: 34rpx;
     }
-    :last-child{
-        color: #787878;
-    }
- }
- .order-info{
-    margin-top:24rpx;
-    .content{
-        margin-bottom:24rpx;
-        font-weight: 400;
-        .pro-img{
-            display: block;
-            width:90rpx;
-            height:90rpx;
-            margin-right:34rpx;
-        }
-    }
-    .time{
-        font-size: 22rpx;
-        color: #6C6C6C;
-    }
-    .info-item{
-        font-weight: bold;
-        margin-bottom:12rpx;
-    }
-    .text-over{
-        max-width:80%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap; 
-    }
-    .amount{
-        color: #333333;
-        font-weight: bold;
-        font-size:24rpx;
-        text:nth-child(1){
-            font-size:20rpx;
-            font-weight: 400;
-        }
-        text:nth-child(2){
-            font-size:22rpx;
-        }
-    }
-    .name{
-        font-size: 24rpx;
-        color: #333333;
-        font-weight: 700;
-    }
-    .num{
-        font-size: 20rpx;
-        color: #9E9E9E;
-        font-weight: 400;
-        margin-bottom:10rpx;
-    }
- }
- .count-item{
+  }
+  .time {
     font-size: 22rpx;
-    color: #878787;
-    text-align: right;
-    margin-top:8rpx;
-}
-.number-item{
+    color: #6c6c6c;
+  }
+  .info-item {
+    font-weight: bold;
+    margin-bottom: 12rpx;
+  }
+  .text-over {
+    max-width: 80%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .amount {
+    color: #333333;
+    font-weight: bold;
     font-size: 24rpx;
-    color: #2E92FF;
-    text-align: right;
-    margin-top:16rpx;
+    text:nth-child(1) {
+      font-size: 20rpx;
+      font-weight: 400;
+    }
+    text:nth-child(2) {
+      font-size: 22rpx;
+    }
+  }
+  .name {
+    font-size: 24rpx;
+    color: #333333;
+    font-weight: 700;
+  }
+  .num {
+    font-size: 20rpx;
+    color: #9e9e9e;
+    font-weight: 400;
+    margin-bottom: 10rpx;
+  }
 }
-.bottoms{
-    padding:10rpx 0 12rpx;
+.count-item {
+  font-size: 22rpx;
+  color: #878787;
+  text-align: right;
+  margin-top: 8rpx;
 }
- .btns{
+.number-item {
+  font-size: 24rpx;
+  color: #2e92ff;
+  text-align: right;
+  margin-top: 16rpx;
+}
+.bottoms {
+  padding: 10rpx 0 12rpx;
+}
+.btns {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 24rpx;
+  .btn {
+    width: 168rpx;
+    height: 64rpx;
+    border-radius: 68rpx;
+    font-weight: 400;
+    font-size: 28rpx;
     display: flex;
-    justify-content: flex-end;
-    margin-top:24rpx;
-    .btn{
-        width: 168rpx;
-        height: 64rpx;
-        border-radius: 68rpx;
-        font-weight: 400;
-        font-size: 28rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-left:48rpx;
-    }
-    .del{
-        color: #545454;
-        border: 2rpx solid #B9C8C7;
-    }
-    .pay{
-        color: #FFFFFF;
-        background: linear-gradient(270deg, #2C91FF 0%, #9AD2FF 100%);
-    }
-    .view{
-        background: #FFFFFF;
-        border-radius: 68rpx;
-        border: 2rpx solid #EA0000;
-        color:#EA0000;
-    }
- }
- .line{
-    margin-top:24rpx;
-    width: 662rpx;
-    height: 1rpx;
-    background-color: #E1E1F0;
-    transform: scaleY(0.5);
+    align-items: center;
+    justify-content: center;
+    margin-left: 48rpx;
+  }
+  .del {
+    color: #545454;
+    border: 2rpx solid #b9c8c7;
+  }
+  .pay {
+    color: #ffffff;
+    background: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
+  }
+  .view {
+    background: #ffffff;
+    border-radius: 68rpx;
+    border: 2rpx solid #ea0000;
+    color: #ea0000;
+  }
 }
- </style>
\ No newline at end of file
+.line {
+  margin-top: 24rpx;
+  width: 662rpx;
+  height: 1rpx;
+  background-color: #e1e1f0;
+  transform: scaleY(0.5);
+}
+</style>
diff --git a/src/pages/ycysp/component/recharge-item.vue b/src/pages/ycysp/component/recharge-item.vue
index 6747726..959f933 100644
--- a/src/pages/ycysp/component/recharge-item.vue
+++ b/src/pages/ycysp/component/recharge-item.vue
@@ -1,78 +1,81 @@
 <template>
-    <view class="flex flex-col flex-items-center flex-justify-center re-wrapper" :class="{'is-checked':detail.isSelected}" @click="selectEvent">
-      <view class="type-name">{{ detail.product_name }}</view>
-      <view class="flex type-amount">
-        <view class="flex flex-col flex-justify-end icon">￥</view>
-        <view class="num">{{ detail.sell_price }}</view>
-      </view>
-      <view class="type-ori">原价{{ detail.price }}</view>
+  <view
+    class="flex flex-col flex-items-center flex-justify-center re-wrapper"
+    :class="{ 'is-checked': detail.isSelected }"
+    @click="selectEvent"
+  >
+    <view class="type-name">{{ detail.product_name }}</view>
+    <view class="flex type-amount">
+      <view class="flex flex-col flex-justify-end icon">￥</view>
+      <view class="num">{{ detail.sell_price }}</view>
     </view>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, reactive, unref, onMounted} from 'vue';
-  const props = defineProps({
-    detail:{
-      type:Object,
-      required:true
-    }
-  })
+    <view class="type-ori">原价{{ detail.price }}</view>
+  </view>
+</template>
 
-  const emits = defineEmits(['selected'])
+<script setup lang="ts">
+import { ref, reactive, unref, onMounted } from "vue";
+const props = defineProps({
+  detail: {
+    type: Object,
+    required: true,
+  },
+});
 
-  const selectEvent = () => {
-    emits('selected',props.detail.id)
+const emits = defineEmits(["selected"]);
+
+const selectEvent = () => {
+  emits("selected", props.detail.id);
+};
+</script>
+<style scoped lang="scss">
+.re-wrapper {
+  width: 100%;
+  height: 200rpx;
+  box-sizing: border-box;
+  border-radius: 10rpx;
+  opacity: 1;
+  background: #fff;
+  box-sizing: border-box;
+  border: 1.6rpx solid #ececec;
+}
+.is-checked {
+  background: #dcefff;
+  border: 1.6rpx solid #2d91ff;
+}
+.type-name {
+  width: 80%;
+  font-size: 26rpx;
+  font-weight: normal;
+  line-height: normal;
+  color: #070b1b;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+}
+.type-amount {
+  margin-top: 6rpx;
+  color: $sub-price-color;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 0em;
+  .icon {
+    font-size: 28rpx;
+    margin-bottom: 4rpx;
   }
-  
-  </script>
-  <style scoped lang="scss">
-  .re-wrapper{
-    width:100%;
-    height:200rpx;
-    box-sizing: border-box;
-    border-radius: 10rpx;
-    opacity: 1;
-    background: #fff;
-    box-sizing: border-box;
-    border: 1.6rpx solid #ececec;
+  .num {
+    /* 价格 */
+    font-size: 48rpx;
   }
-  .is-checked{
-    background: #DCEFFF;
-    border: 1.6rpx solid #2D91FF;
-  }
-  .type-name{
-    width:80%;
-    font-size: 26rpx;
-    font-weight: normal;
-    line-height: normal;
-    color: #070B1B;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap; 
-    text-align: center;
-  }
-  .type-amount{
-    margin-top:6rpx;
-    color: $sub-price-color;
-    font-weight: 600;
-    line-height: normal;
-    letter-spacing: 0em;
-    .icon{
-      font-size: 28rpx;
-      margin-bottom:4rpx;
-    }
-    .num{
-      /* 价格 */
-      font-size: 48rpx;
-    }
-  }
-  .type-ori{
-    font-size: 24rpx;
-    font-weight: normal;
-    line-height: normal;
-    letter-spacing: 0em;
-    text-decoration: line-through;
-    color: #A4C4FA;
-    margin-top:6rpx;
-  }
-  </style>
\ No newline at end of file
+}
+.type-ori {
+  font-size: 24rpx;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0em;
+  text-decoration: line-through;
+  color: #a4c4fa;
+  margin-top: 6rpx;
+}
+</style>
diff --git a/src/pages/ycysp/component/ticket-recieve.vue b/src/pages/ycysp/component/ticket-recieve.vue
index 3b1fe6d..83524ee 100644
--- a/src/pages/ycysp/component/ticket-recieve.vue
+++ b/src/pages/ycysp/component/ticket-recieve.vue
@@ -1,151 +1,167 @@
 <template>
-  <view class="flex pos-relative wrapper flex-justify-between" :class="{small:['small'].includes(type),large:['large'].includes(type)}">
-    <view class="flex flex-items-center flex-justify-center pos-absolute tips" v-if="['small'].includes(type)">每日限量50张</view>
-    <view class="amount" :style="{width:['small'].includes(type) ? '120rpx' : '140rpx'}">
-        <view class="icon">￥</view>
-        <view class="number">100</view>
+  <view
+    class="flex pos-relative wrapper flex-justify-between"
+    :class="{
+      small: ['small'].includes(type),
+      large: ['large'].includes(type),
+    }"
+  >
+    <view
+      class="flex flex-items-center flex-justify-center pos-absolute tips"
+      v-if="['small'].includes(type)"
+      >每日限量50张</view
+    >
+    <view
+      class="amount"
+      :style="{ width: ['small'].includes(type) ? '120rpx' : '140rpx' }"
+    >
+      <view class="icon">￥</view>
+      <view class="number">100</view>
     </view>
     <view class="operation" v-if="['small'].includes(type)">
-        <view class="name">优酷喵喵年卡适用</view>
-        <view class="flex flex-items-center flex-justify-center btn">立即领取</view>
+      <view class="name">优酷喵喵年卡适用</view>
+      <view class="flex flex-items-center flex-justify-center btn"
+        >立即领取</view
+      >
     </view>
     <view class="operation-large" v-else>
-        <view class="name-tips">
-            <view class="name-large">芒果全屏会员年卡适用</view>
-            <view class="tips-large">每日限量50张</view>
-        </view>
-        <view class="flex flex-items-center flex-justify-center btn-large">立即领取</view>
+      <view class="name-tips">
+        <view class="name-large">芒果全屏会员年卡适用</view>
+        <view class="tips-large">每日限量50张</view>
+      </view>
+      <view class="flex flex-items-center flex-justify-center btn-large"
+        >立即领取</view
+      >
     </view>
   </view>
 </template>
 
 <script setup>
-import { ref, reactive, unref, onMounted} from 'vue';
+import { ref, reactive, unref, onMounted } from "vue";
 
 const props = defineProps({
-   type:{
-    type:String,
-    default:'small'
-   }
-})
-
+  type: {
+    type: String,
+    default: "small",
+  },
+});
 </script>
 <style scoped lang="scss">
-.wrapper{
-    height: 136rpx;
+.wrapper {
+  height: 136rpx;
 }
-.small{
-    width: 322rpx;
-    background: url('@/static/ycysp/ticket-small.webp') no-repeat;
-    margin-bottom:18rpx;
-    background-size: cover;
+.small {
+  width: 322rpx;
+  background: url("@/static/ycysp/ticket-small.webp") no-repeat;
+  margin-bottom: 18rpx;
+  background-size: cover;
 }
-.large{
-    width: 662rpx;
-    background: url('@/static/ycysp/ticket-large.webp') no-repeat;
-    background-size: cover;
+.large {
+  width: 662rpx;
+  background: url("@/static/ycysp/ticket-large.webp") no-repeat;
+  background-size: cover;
 }
-.tips{
-    border-radius: 20rpx 0rpx 20rpx 0rpx;
-    opacity: 1;
-    background: #69C5FF;
-    width: 100rpx;
-    height: 20rpx;
-    width: 100rpx;
-    font-size: 12rpx;
-    font-weight: normal;
-    line-height: normal;
-    letter-spacing: 0.04em;
-    color: #FFFFFF;
+.tips {
+  border-radius: 20rpx 0rpx 20rpx 0rpx;
+  opacity: 1;
+  background: #69c5ff;
+  width: 100rpx;
+  height: 20rpx;
+  width: 100rpx;
+  font-size: 12rpx;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0.04em;
+  color: #ffffff;
 }
-.amount{
-    display: flex;
-    justify-content: center;
-    height:100%;
-    font-weight: bold;
-    line-height: normal;
-    letter-spacing: 0.04em;
-    color:$price-color;
+.amount {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  font-weight: bold;
+  line-height: normal;
+  letter-spacing: 0.04em;
+  color: $price-color;
 }
-.icon{
-    font-size: 18rpx;
-    display: flex;
-    align-items: center;
-    margin-top:20rpx;
+.icon {
+  font-size: 18rpx;
+  display: flex;
+  align-items: center;
+  margin-top: 20rpx;
 }
-.number{
-    font-size: 48rpx;
-    display: flex;
-    align-items: center;
+.number {
+  font-size: 48rpx;
+  display: flex;
+  align-items: center;
 }
-.operation{
-    width:180rpx;
-    height:100%;
-    display:flex;
-    flex-direction: column;
-    justify-content: center;
-    box-sizing: border-box;
-    padding:0 15rpx;
+.operation {
+  width: 180rpx;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0 15rpx;
 }
-.name{
-    width:100%;
-    font-size: 22rpx;
-    font-weight: normal;
-    line-height: normal;
-    letter-spacing: 0em;
-    color: $text-color;
-    overflow: hidden; /*文本超出隐藏*/
-	display:-webkit-box; /*盒子模型微弹性伸缩模型*/
-	-webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/
-	-webkit-line-clamp: 2; /*文本显示3行*/
+.name {
+  width: 100%;
+  font-size: 22rpx;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0em;
+  color: $text-color;
+  overflow: hidden; /*文本超出隐藏*/
+  display: -webkit-box; /*盒子模型微弹性伸缩模型*/
+  -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
+  -webkit-line-clamp: 2; /*文本显示3行*/
 }
-.btn{
-    margin-top:10rpx;
-    width: 134rpx;
-    height: 34rpx;
-    background: linear-gradient(270deg, #9ad2ff  0%, #0e9bf2  100%);
-    border-radius:38rpx;
-    font-size: 20rpx;
-    font-weight: normal;
-    line-height: 24rpx;
-    color: #FFFFFF;
+.btn {
+  margin-top: 10rpx;
+  width: 134rpx;
+  height: 34rpx;
+  background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
+  border-radius: 38rpx;
+  font-size: 20rpx;
+  font-weight: normal;
+  line-height: 24rpx;
+  color: #ffffff;
 }
-.operation-large{
-    width:500rpx;
-    height:100%;
-    display:flex;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    padding:0 24rpx 0 10rpx;
+.operation-large {
+  width: 500rpx;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 24rpx 0 10rpx;
 }
-.name-tips{
-    display: flex;
-    flex-direction: column;
+.name-tips {
+  display: flex;
+  flex-direction: column;
 }
-.name-large{
-    font-size: 28rpx;
-    font-weight: normal;
-    line-height: normal;
-    letter-spacing: 0.04em;
-    color: #1F93DA;
+.name-large {
+  font-size: 28rpx;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0.04em;
+  color: #1f93da;
 }
-.tips-large{
-    font-size: 20rpx;
-    font-weight: normal;
-    line-height: normal;
-    letter-spacing: 0.04em;
-    color: #8CA1D1;
-    margin-top:4rpx;
+.tips-large {
+  font-size: 20rpx;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0.04em;
+  color: #8ca1d1;
+  margin-top: 4rpx;
 }
-.btn-large{
-    width: 162rpx;
-    height: 64rpx;
-    background: linear-gradient(270deg, #9ad2ff  0%, #0e9bf2  100%);
-    border-radius:68rpx;
-    font-size: 28rpx;
-    font-weight: normal;
-    line-height: 64rpx;
-    color: #FFFFFF;
+.btn-large {
+  width: 162rpx;
+  height: 64rpx;
+  background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
+  border-radius: 68rpx;
+  font-size: 28rpx;
+  font-weight: normal;
+  line-height: 64rpx;
+  color: #ffffff;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/ycysp/config.js b/src/pages/ycysp/config.js
index efab93f..4a55e96 100644
--- a/src/pages/ycysp/config.js
+++ b/src/pages/ycysp/config.js
@@ -1,47 +1,53 @@
 export const stateConfig = {
-    1: '待支付',  
-    2: '已支付',  
-    3: '充值中',  
-    4: '充值失败',  
-    5: '退款中',  
-    6: '退款失败',  
-    7: '退款成功',  
-    8: '充值成功' ,
-    9: '订单作废'
-}
+  1: "待支付",
+  2: "已支付",
+  3: "充值中",
+  4: "充值失败",
+  5: "退款中",
+  6: "退款失败",
+  7: "退款成功",
+  8: "充值成功",
+  9: "订单作废",
+};
 
 export const stateColor = {
-    2: '#FF911A',
-    3: '#FF8400',  
-    4: '#FF0000',
-    7: '#EA722D',  
-    8: '#FF0000 ',
-}
+  2: "#FF911A",
+  3: "#FF8400",
+  4: "#FF0000",
+  7: "#EA722D",
+  8: "#FF0000 ",
+};
 
 export const checkedColor = {
-  1:'#4A98FB',
-  2:'#4A98FB',
-  3:'#FE3B34',
-  4:'#FF8103',
-  5:'#17BE73',
-  6:'#F82801',
-  7:'#FE306E',
-  8:'#61D93F',
-}
+  1: "#4A98FB",
+  2: "#4A98FB",
+  3: "#FE3B34",
+  4: "#FF8103",
+  5: "#17BE73",
+  6: "#F82801",
+  7: "#FE306E",
+  8: "#61D93F",
+};
 
-export const tabs = [{
-  tabName:'全部订单',
-  status:0,
-},{
-  tabName:'待付款',
-  status:1,
-},{
-  tabName:'处理中',
-  status:2,
-},{
-  tabName:'已完成',
-  status:8,
-},{
-  tabName:"已退款",
-  status:7
-}]
+export const tabs = [
+  {
+    tabName: "全部订单",
+    status: 0,
+  },
+  {
+    tabName: "待付款",
+    status: 1,
+  },
+  {
+    tabName: "处理中",
+    status: 2,
+  },
+  {
+    tabName: "已完成",
+    status: 8,
+  },
+  {
+    tabName: "已退款",
+    status: 7,
+  },
+];
diff --git a/src/pages/ycysp/home.vue b/src/pages/ycysp/home.vue
index b93c687..d110709 100644
--- a/src/pages/ycysp/home.vue
+++ b/src/pages/ycysp/home.vue
@@ -1,11 +1,11 @@
 <route lang="json5" type="home">
-  {
-    style: {
-      navigationStyle: 'custom',
-      navigationBarTitleText: '音视频专区',
-      navigationBarBackgroundColor:'#FFF',
-    },
-  }
+{
+  style: {
+    navigationStyle: "custom",
+    navigationBarTitleText: "音视频专区",
+    navigationBarBackgroundColor: "#FFF",
+  },
+}
 </route>
 
 <template>
@@ -37,8 +37,8 @@
       </view>
       <scroll-view scroll-x class="scroll">
         <view class="swiper">
-          <view v-for="(item,index) in brandArr" class="member-item">
-            <member :key="item.id" :detail="item" @checked="handleChecked"/>
+          <view v-for="(item, index) in brandArr" class="member-item">
+            <member :key="item.id" :detail="item" @checked="handleChecked" />
           </view>
         </view>
       </scroll-view>
@@ -49,278 +49,342 @@
         <view class="title-text">充值选项</view>
       </view>
       <scroll-view scroll-x class="recharge-scroll">
-        <view v-for="(item,index) in productArr" class="recharge-item">
-          <rechargeItem :key="item.id" :detail="item" @selected="handleSelected"/>
+        <view v-for="(item, index) in productArr" class="recharge-item">
+          <rechargeItem
+            :key="item.id"
+            :detail="item"
+            @selected="handleSelected"
+          />
         </view>
       </scroll-view>
     </view>
     <!-- //手机号 -->
-     <view class="input-container">
-        <input type="text" placeholder="请输入手机号/QQ号充值"  placeholder-class="pcs" v-model="account">
-     </view>
-     <!-- 下一步 -->
-     <view class="flex flex-items-center flex-justify-center next-btn" @click="nextEvent">
-       下一步
-     </view>
-     <!-- 描述 -->
-      <view class="description">
-        <view class="small-title">产品介绍</view>
-        <view class="small-text">1、充值后可登录官方APP<text class="small-red">查看会员状态及有效期，</text>过期不可使用。</view>
-        <view class="small-text">2、<text class="small-red">充值前请您确认充值信息是否正确，一旦提交无法取消或更改。</text>如因账号信息输入错误导致充值至他人账户，仍视为充值成功，无法补券。</view>
-        <view class="small-text">3、此权益中包含的优酷/腾讯黄金会员、芒果视频会员可在手机、电脑、平板上使用，不支持电视端，不支持投屏。<text class="small-red">腾讯视频、QQ音乐支持QQ号或手机号，</text>其余会员账号均为手机号。</view>
-        <view class="small-text">4、本产品仅适用于中国大陆地区用户，暂不支持开通中国港澳台、海外地区服务。</view>
-        <view class="small-text">5、如有疑问请联系成都蓝色兄弟网络科技有限公司，<text class="small-red">客服电话400-118-1216</text>（服务时间09:00-18:00）。</view>
+    <view class="input-container">
+      <input
+        type="text"
+        placeholder="请输入手机号/QQ号充值"
+        placeholder-class="pcs"
+        v-model="account"
+      />
+    </view>
+    <!-- 下一步 -->
+    <view
+      class="flex flex-items-center flex-justify-center next-btn"
+      @click="nextEvent"
+    >
+      下一步
+    </view>
+    <!-- 描述 -->
+    <view class="description">
+      <view class="small-title">产品介绍</view>
+      <view class="small-text"
+        >1、充值后可登录官方APP<text class="small-red"
+          >查看会员状态及有效期，</text
+        >过期不可使用。</view
+      >
+      <view class="small-text"
+        >2、<text class="small-red"
+          >充值前请您确认充值信息是否正确，一旦提交无法取消或更改。</text
+        >如因账号信息输入错误导致充值至他人账户，仍视为充值成功，无法补券。</view
+      >
+      <view class="small-text"
+        >3、此权益中包含的优酷/腾讯黄金会员、芒果视频会员可在手机、电脑、平板上使用，不支持电视端，不支持投屏。<text
+          class="small-red"
+          >腾讯视频、QQ音乐支持QQ号或手机号，</text
+        >其余会员账号均为手机号。</view
+      >
+      <view class="small-text"
+        >4、本产品仅适用于中国大陆地区用户，暂不支持开通中国港澳台、海外地区服务。</view
+      >
+      <view class="small-text"
+        >5、如有疑问请联系成都蓝色兄弟网络科技有限公司，<text class="small-red"
+          >客服电话400-118-1216</text
+        >（服务时间09:00-18:00）。
       </view>
-      <view style="height:40rpx;"></view>
-      <!-- 我的订单 -->
-       <view class="flex flex-justify-center flex-items-center order-btn" @click="toOrder">我的<br/>订单</view>
+    </view>
+    <view style="height: 40rpx"></view>
+    <!-- 我的订单 -->
+    <view
+      class="flex flex-justify-center flex-items-center order-btn"
+      @click="toOrder"
+      >我的<br />订单</view
+    >
   </scroll-view>
 </template>
 
-<script setup >
-import { ref, reactive, unref, onMounted, nextTick} from 'vue';
+<script setup>
+import { ref, reactive, unref, onMounted, nextTick } from "vue";
 // import ticketRecieve from './component/ticket-recieve.vue';
-import member from './component/member.vue';
-import rechargeItem from './component/recharge-item.vue';
-import {getBrandList,getProductList,login} from '@/api/ycysp';
-import {generateUUID} from '@/utils/utils';
-import {createOrder} from '@/api/ycysp';
-import useCode from './hooks/useCode';
-const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
+import member from "./component/member.vue";
+import rechargeItem from "./component/recharge-item.vue";
+import { getBrandList, getProductList, login } from "@/api/ycysp";
+import { generateUUID } from "@/utils/utils";
+import { createOrder } from "@/api/ycysp";
+import useCode from "./hooks/useCode";
+const reg =
+  /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
 const _reg = /^[1-9][0-9]{4,}$/;
-const brandArr = ref([])
-const productArr = ref([])
-const account = ref('')
-const authCode = ref('')
+const brandArr = ref([]);
+const productArr = ref([]);
+const account = ref("");
+const authCode = ref("");
 
 //获取品牌
 const getBrand = () => {
-  return getBrandList().then(res => {
-    const {list} = res;
-    brandArr.value = list.map((item,index) => ({...item,isChecked:index === 0}))
-  }).catch(err => {
-    console.error(err);
-  })
-}
+  return getBrandList()
+    .then((res) => {
+      const { list } = res;
+      brandArr.value = list.map((item, index) => ({
+        ...item,
+        isChecked: index === 0,
+      }));
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+};
 
 //获取商品
 const getProduct = () => {
-  const checkedBrand = brandArr.value.find(item => item.isChecked)
-  const params = {brand_id:checkedBrand.id}
-  getProductList({params}).then(res => {
-    const {list} = res;
-    productArr.value = list.map((item,index) => ({...item,isSelected:index === 0}))
-  }).catch(err => {
-    console.error(err);
-  })
-}
+  const checkedBrand = brandArr.value.find((item) => item.isChecked);
+  const params = { brand_id: checkedBrand.id };
+  getProductList({ params })
+    .then((res) => {
+      const { list } = res;
+      productArr.value = list.map((item, index) => ({
+        ...item,
+        isSelected: index === 0,
+      }));
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+};
 
 //选中品牌
 const handleChecked = (checkedId) => {
-  brandArr.value = brandArr.value.map((item,index) => {
-    const {id,isChecked} = item;
-    if(checkedId === id){
-      return {...item,isChecked:!isChecked}
+  brandArr.value = brandArr.value.map((item, index) => {
+    const { id, isChecked } = item;
+    if (checkedId === id) {
+      return { ...item, isChecked: !isChecked };
     }
-    return {...item,isChecked:false}
-  })
-  getProduct()
-}
+    return { ...item, isChecked: false };
+  });
+  getProduct();
+};
 
 //选中商品
 const handleSelected = (selectedId) => {
-  productArr.value = productArr.value.map((item,index) => {
-    const {id,isSelected} = item;
-    if(selectedId === id){
-      return {...item,isSelected:!isSelected}
+  productArr.value = productArr.value.map((item, index) => {
+    const { id, isSelected } = item;
+    if (selectedId === id) {
+      return { ...item, isSelected: !isSelected };
     }
-    return {...item,isSelected:false}
-  })
-}
+    return { ...item, isSelected: false };
+  });
+};
 
 //下一步事件
 const nextEvent = () => {
-  const selectProduct = productArr.value.find(item => item.isSelected)
-  if(!selectProduct){
+  const selectProduct = productArr.value.find((item) => item.isSelected);
+  if (!selectProduct) {
     uni.showToast({
-      title: '请选择充值选项',
-      icon: 'none'
+      title: "请选择充值选项",
+      icon: "none",
     });
-    return
+    return;
   }
-  if(!account.value){
+  if (!account.value) {
     uni.showToast({
-      title: '请填写充值手机号或QQ号',
-      icon: 'none'
+      title: "请填写充值手机号或QQ号",
+      icon: "none",
     });
-    return
+    return;
   }
-  if(!reg.test(account.value) && !_reg.test(account.value)){
+  if (!reg.test(account.value) && !_reg.test(account.value)) {
     uni.showToast({
-      title: '充值账号格式不正确',
-      icon: 'none'
+      title: "充值账号格式不正确",
+      icon: "none",
     });
-    return
+    return;
   }
-  addOrder(selectProduct.id)
-}
+  addOrder(selectProduct.id);
+};
 
 const addOrder = (id) => {
   const params = {
-        account:unref(account),
-        product_id:id
-    }
-    createOrder({params}).then(res => {
-        const {order_no,notify_url,sign,plain_text} = res;
-        uni.navigateTo({
-          url:`/pages/ycysp/pay?order_no=${order_no}`
-        })
-    }).catch(err => {
-        console.error(err);
+    account: unref(account),
+    product_id: id,
+  };
+  createOrder({ params })
+    .then((res) => {
+      const { order_no, notify_url, sign, plain_text } = res;
+      uni.navigateTo({
+        url: `/pages/ycysp/pay?order_no=${order_no}`,
+      });
     })
-}
+    .catch((err) => {
+      console.error(err);
+    });
+};
 
 const toOrder = () => {
   uni.navigateTo({
-    url:`/pages/ycysp/order`
-  })
-}
+    url: `/pages/ycysp/order`,
+  });
+};
 
 onMounted(async () => {
-  await getBrand()
-  getProduct()
-  const token = window.localStorage.getItem('token') || '';
-  if(!token){
-      // const code = await useCode();
-      // authCode.value = code
-      authCode.value = generateUUID()
-      const {token} = await login({params:{code:unref(authCode)}});
-      window.localStorage.setItem('token',token);
-  } 
-})
-
+  await getBrand();
+  getProduct();
+  const token = window.localStorage.getItem("token") || "";
+  if (!token) {
+    // const code = await useCode();
+    // authCode.value = code
+    authCode.value = generateUUID();
+    const { token } = await login({ params: { code: unref(authCode) } });
+    window.localStorage.setItem("token", token);
+  }
+});
 </script>
 
 <style scoped lang="scss">
-.page-wrapper{
-    width:100vw;
-    height:100vh;
-    opacity: 1;
-    // background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
-    background: #FFFFFF;
-    overflow-y: auto;
+.page-wrapper {
+  width: 100vw;
+  height: 100vh;
+  opacity: 1;
+  // background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
+  background: #ffffff;
+  overflow-y: auto;
 }
-.banner-container{
-  height:338rpx;
+
+.banner-container {
+  height: 338rpx;
   padding: 36rpx 20rpx 0 4rpx;
-  background: url('@/static/ycysp/banner-bg.webp') no-repeat;
+  background: url("@/static/ycysp/banner-bg.webp") no-repeat;
   background-size: 100% auto;
 }
-.ticket-container{
+
+.ticket-container {
   width: 710rpx;
   height: 416rpx;
   border-radius: 28rpx;
   opacity: 1;
-  background: #FFFFFF;
+  background: #ffffff;
   box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
-  margin:40rpx auto 0;
+  margin: 40rpx auto 0;
   box-sizing: border-box;
   padding: 24rpx;
 }
-.title{
-  width:100%;
-  height:50rpx;
+
+.title {
+  width: 100%;
+  height: 50rpx;
   display: flex;
   align-items: center;
   position: relative;
-  margin-bottom:20rpx;
-  .title-line{
+  margin-bottom: 20rpx;
+
+  .title-line {
     width: 10rpx;
     height: 34rpx;
     border-radius: 0rpx 6rpx 6rpx 0rpx;
     opacity: 1;
-    background: linear-gradient(180deg, #95CEFF 0%, #439FFF 100%);
+    background: linear-gradient(180deg, #95ceff 0%, #439fff 100%);
   }
-  .title-text{
+
+  .title-text {
     font-size: 36rpx;
     font-weight: 400;
     letter-spacing: 0.04em;
-    color: #212F3B;
-    margin-left:14rpx;
+    color: #212f3b;
+    margin-left: 14rpx;
   }
-  .title-more{
+
+  .title-more {
     position: absolute;
-    right:0;
+    right: 0;
     font-size: 26rpx;
     font-weight: normal;
     letter-spacing: 0.04em;
-    color: #666E7E;
+    color: #666e7e;
   }
 }
-.member-container{
-  width:100%;
-  padding-left:20rpx;
+
+.member-container {
+  width: 100%;
+  padding-left: 20rpx;
   box-sizing: border-box;
-  margin:40rpx auto 0;
+  margin: 40rpx auto 0;
 }
-.scroll{
-  width:100%;
+
+.scroll {
+  width: 100%;
   // height:250rpx;
   overflow-x: auto;
 }
-.swiper{
+
+.swiper {
   display: flex;
   flex-wrap: wrap;
-  width:calc((100vw - 68rpx) / 3 * 4 + 64rpx)
+  width: calc((100vw - 68rpx) / 3 * 4 + 64rpx);
 }
-.member-item{
-  margin:0 16rpx 16rpx 0;
-  width:calc((100vw - 68rpx) / 3);
+
+.member-item {
+  margin: 0 16rpx 16rpx 0;
+  width: calc((100vw - 68rpx) / 3);
 }
-.recharge-container{
-  width:100%;
-  margin:40rpx auto 0;
-  padding-left:20rpx;
+
+.recharge-container {
+  width: 100%;
+  margin: 40rpx auto 0;
+  padding-left: 20rpx;
   box-sizing: border-box;
 }
-.recharge-scroll{
-  width:100%;
+
+.recharge-scroll {
+  width: 100%;
   overflow-x: auto;
   white-space: nowrap;
 }
-.recharge-item{
+
+.recharge-item {
   display: inline-block;
-  margin:0 16rpx 16rpx 0;
-  width:calc((100vw - 20rpx) / 3.5);
+  margin: 0 16rpx 16rpx 0;
+  width: calc((100vw - 20rpx) / 3.5);
 }
-.input-container{
+
+.input-container {
   width: 710rpx;
   height: 88rpx;
   border-radius: 84rpx;
   opacity: 1;
-  background: #EEF7FF;
+  background: #eef7ff;
   margin: 40rpx auto 0;
   display: flex;
   align-items: center;
-  padding:0 40rpx;
+  padding: 0 40rpx;
   box-sizing: border-box;
-  input{
+
+  input {
     width: 100%;
     font-size: 32rpx;
     font-weight: normal;
     line-height: normal;
     letter-spacing: 0em;
-    color: #8DBFF6;
+    color: #8dbff6;
   }
 }
-.pcs{
+
+.pcs {
   font-size: 32rpx;
   font-weight: normal;
   line-height: normal;
   letter-spacing: 0em;
-  color: #8DBFF6;
+  color: #8dbff6;
 }
-.next-btn{
+
+.next-btn {
   width: 710rpx;
   height: 88rpx;
   padding: 12rpx 28rpx;
@@ -329,48 +393,53 @@ onMounted(async () => {
   font-weight: normal;
   line-height: normal;
   letter-spacing: 0em;
-  color: #FFFFFF;
-  background: linear-gradient(270deg, #3194FF 0%, #96CFFF 100%);
+  color: #ffffff;
+  background: linear-gradient(270deg, #3194ff 0%, #96cfff 100%);
   box-sizing: border-box;
   border-radius: 392rpx;
 }
-.description{
-  width:100%;
+
+.description {
+  width: 100%;
   box-sizing: border-box;
   padding: 0 20rpx;
-  margin-top:40rpx;
+  margin-top: 40rpx;
 }
-.small-title{
+
+.small-title {
   /* 标题二 */
   font-size: 28rpx;
   font-weight: normal;
   line-height: 32rpx;
   letter-spacing: 0px;
-  color: #0F0F0F;
-  margin-bottom:20rpx;
+  color: #0f0f0f;
+  margin-bottom: 20rpx;
 }
-.small-text{
+
+.small-text {
   font-size: 24rpx;
   font-weight: normal;
   line-height: 44rpx;
-  color: #383838
+  color: #383838;
 }
-.small-red{
-  color: #FF0000
+
+.small-red {
+  color: #ff0000;
 }
-.order-btn{
+
+.order-btn {
   position: fixed;
   right: 20rpx;
-  bottom:100rpx;
+  bottom: 100rpx;
   width: 96rpx;
   height: 96rpx;
   font-size: 24rpx;
   font-weight: normal;
   line-height: 32rpx;
   letter-spacing: 0px;
-  color: #FFFFFF;
+  color: #ffffff;
   opacity: 1;
   background: rgba(45, 145, 255, 0.6);
-  border-radius:96rpx;
+  border-radius: 96rpx;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/ycysp/order.vue b/src/pages/ycysp/order.vue
index 25db405..468c870 100644
--- a/src/pages/ycysp/order.vue
+++ b/src/pages/ycysp/order.vue
@@ -1,241 +1,260 @@
 <route lang="json5" type="page">
-    {
-      style: {
-        navigationStyle: 'custom',
-        navigationBarTitleText: '我的订单',
-        navigationBarBackgroundColor:'#FFF',
-      },
-    }
+{
+  style: {
+    navigationStyle: "custom",
+    navigationBarTitleText: "我的订单",
+    navigationBarBackgroundColor: "#FFF",
+  },
+}
 </route>
 
 <template>
-    <wd-tabs color="#333" inactiveColor="#888" @click="handleClick">
-        <block v-for="item in tabs" :key="item.status">
-            <wd-tab :title="item.tabName" :name="item.status">
-                <scroll-view scroll-y class="page-wrapper" @scrolltolower="queryNext">
-                    <view class="order-wrapper flex flex-col flex-items-center" v-if="Array.isArray(listData) && listData.length > 0">
-                        <view v-for="(ele,index) in listData" :key="`${ele.id}-${item.status}`">
-                            <OrderItem 
-                                :detail="ele" 
-                                @pay-event="pay" 
-                                @detail-event="viewDetail" 
-                                @pwd-event="viewPwd" 
-                                @del-event="removeOrder" 
-                                @refund-event="refund"
-                            />
-                        </view>
-                        <view class="no-more" v-if="isLastPage">没有更多了~</view>
-                    </view>
-                    <view class="no-data" v-else>
-                        <image
-                            src="/static/ycysp/bg-nodata.png"
-                            mode="scaleToFill"
-                            class="no-img"
-                        />
-                        <text class="no-text">暂无订单，快去下单吧~</text>
-                    </view>
-                </scroll-view>
-            </wd-tab>
-        </block>
-    </wd-tabs>
-    <wd-message-box />
+  <wd-tabs color="#333" inactiveColor="#888" @click="handleClick">
+    <block v-for="item in tabs" :key="item.status">
+      <wd-tab :title="item.tabName" :name="item.status">
+        <scroll-view scroll-y class="page-wrapper" @scrolltolower="queryNext">
+          <view
+            class="order-wrapper flex flex-col flex-items-center"
+            v-if="Array.isArray(listData) && listData.length > 0"
+          >
+            <view
+              v-for="(ele, index) in listData"
+              :key="`${ele.id}-${item.status}`"
+            >
+              <OrderItem
+                :detail="ele"
+                @pay-event="pay"
+                @detail-event="viewDetail"
+                @pwd-event="viewPwd"
+                @del-event="removeOrder"
+                @refund-event="refund"
+              />
+            </view>
+            <view class="no-more" v-if="isLastPage">没有更多了~</view>
+          </view>
+          <view class="no-data" v-else>
+            <image
+              src="/static/ycysp/bg-nodata.png"
+              mode="scaleToFill"
+              class="no-img"
+            />
+            <text class="no-text">暂无订单，快去下单吧~</text>
+          </view>
+        </scroll-view>
+      </wd-tab>
+    </block>
+  </wd-tabs>
+  <wd-message-box />
 </template>
 
 <script setup>
-    import { useMessage } from 'wot-design-uni'
-    import OrderItem  from './component/order-item';
-    import usePay from './hooks/usePay';
-    import { getOrderList,refundOrder } from '../../api/ycysp';
-    import { onMounted, ref, unref,reactive,computed } from 'vue';
-    import { tabs } from './config';
-    import {deepClone} from '../../utils/utils'
-    const message = useMessage()
-    const pageSize = 10;
-    const activeName = ref(0);
-    const totalData = ref(0);
-    const page = ref(1);
-    const listData = ref([]);
-    const replace = ref(false);
-    
-    //获取订单列表
-    const queryOrderList = () => {
-        const activeTab = unref(activeName);
-        const params = {
-			page:unref(page),
-			page_size:pageSize,
-            ...(activeTab !== 0 && {status:activeTab})
-		}
-		getOrderList({params}).then(res => {
-			const {total,list} = res
-            totalData.value = total
-            if(replace.value){
-                const prevPage = page.value - 1;
-                const prevList = listData.value.slice(0,  prevPage * pageSize);
-                listData.value = [...prevList,...list];
-            }else{
-                listData.value = [...listData.value,...list]
-            }
-            replace.value = false
-		}).catch(err => {
-            totalData.value = 0;
-            listData.value = []
-        })
-    }
+import { useMessage } from "wot-design-uni";
+import OrderItem from "./component/order-item";
+import usePay from "./hooks/usePay";
+import { getOrderList, refundOrder } from "../../api/ycysp";
+import { onMounted, ref, unref, reactive, computed } from "vue";
+import { tabs } from "./config";
+import { deepClone } from "../../utils/utils";
+const message = useMessage();
+const pageSize = 10;
+const activeName = ref(0);
+const totalData = ref(0);
+const page = ref(1);
+const listData = ref([]);
+const replace = ref(false);
 
-    function handleClick({index, name}){
-        page.value = 1;
-        totalData.value = 0;
-        listData.value = [];
-        activeName.value = name;
-        // name代表状态值
-        queryOrderList()
-     
-    }
-
-    function pay(orderData){
-        console.log(orderData);
-        const {order_no,notify_url,price,brand,sign,plain_text} = orderData.pay_info
-        const {payFunc} = usePay();
-        payFunc({order_no,notify_url,TranAmt:price,MerName:brand,sign,plain_text})
-    }
-
-    function viewDetail(orderData){
-        const {id,order_no} = orderData;
-        uni.navigateTo({
-            url:`/pages/ycysp/orderDetail?order_id=${id}&order_no=${order_no}`
-        })
-    }
-
-    function viewPwd(orderData){
-        const {voucher_link} = orderData
-        if(voucher_link){
-            console.log('跳转外部链接--->',voucher_link);
-            window.location.href = voucher_link
-        }else{
-            console.error(`${voucher_link}无有效值`);
-        }
-    }
-
-    function removeOrder(orderData){
-        message
-        .confirm({
-            msg: '删除订单后无法恢复，确认继续吗？',
-            title: '提示'
-        })
-        .then(() => {
-            const {id} = orderData
-            const params = {order_id:id}
-            deleteOrder({params}).then(res => {
-                replace.value = true;
-                queryOrderList()
-            }).catch(err => {
-                console.log(err);
-            })
-        })
-        .catch(() => {
-            console.log('点击了取消按钮')
-        })
-    }
-
-    function refund(orderData){
-        const {id} = orderData
-        if(!id){
-            uni.showToast({
-                icon:'none',
-                title: '无有效的订单id',
-            });
-            return
-        }
-        const params = {order_id:id}
-        refundOrder({params}).then(res => {
-            uni.showToast({
-                icon:'success',
-                title: '退款成功',
-            });
-            replace.value = true;
-            queryOrderList();
-        }).catch(err => {
-            console.log(err);
-        })
-    }
-
-    onMounted(()=>{
-        queryOrderList()
+//获取订单列表
+const queryOrderList = () => {
+  const activeTab = unref(activeName);
+  const params = {
+    page: unref(page),
+    page_size: pageSize,
+    ...(activeTab !== 0 && { status: activeTab }),
+  };
+  getOrderList({ params })
+    .then((res) => {
+      const { total, list } = res;
+      totalData.value = total;
+      if (replace.value) {
+        const prevPage = page.value - 1;
+        const prevList = listData.value.slice(0, prevPage * pageSize);
+        listData.value = [...prevList, ...list];
+      } else {
+        listData.value = [...listData.value, ...list];
+      }
+      replace.value = false;
     })
+    .catch((err) => {
+      totalData.value = 0;
+      listData.value = [];
+    });
+};
 
-    const isLastPage = computed(()=>{
-        return unref(page) === Math.ceil(unref(totalData) / pageSize)
+function handleClick({ index, name }) {
+  page.value = 1;
+  totalData.value = 0;
+  listData.value = [];
+  activeName.value = name;
+  // name代表状态值
+  queryOrderList();
+}
+
+function pay(orderData) {
+  console.log(orderData);
+  const { order_no, notify_url, price, brand, sign, plain_text } =
+    orderData.pay_info;
+  const { payFunc } = usePay();
+  payFunc({
+    order_no,
+    notify_url,
+    TranAmt: price,
+    MerName: brand,
+    sign,
+    plain_text,
+  });
+}
+
+function viewDetail(orderData) {
+  const { id, order_no } = orderData;
+  uni.navigateTo({
+    url: `/pages/ycysp/orderDetail?order_id=${id}&order_no=${order_no}`,
+  });
+}
+
+function viewPwd(orderData) {
+  const { voucher_link } = orderData;
+  if (voucher_link) {
+    console.log("跳转外部链接--->", voucher_link);
+    window.location.href = voucher_link;
+  } else {
+    console.error(`${voucher_link}无有效值`);
+  }
+}
+
+function removeOrder(orderData) {
+  message
+    .confirm({
+      msg: "删除订单后无法恢复，确认继续吗？",
+      title: "提示",
     })
+    .then(() => {
+      const { id } = orderData;
+      const params = { order_id: id };
+      deleteOrder({ params })
+        .then((res) => {
+          replace.value = true;
+          queryOrderList();
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    })
+    .catch(() => {
+      console.log("点击了取消按钮");
+    });
+}
 
-    function queryNext(){
-    console.log(unref(isLastPage));
-        if(unref(isLastPage)){
-			console.error('已经是最后一页');
-			return false;
-		};
-        page.value  = page.value + 1
-        queryOrderList()
-    }
+function refund(orderData) {
+  const { id } = orderData;
+  if (!id) {
+    uni.showToast({
+      icon: "none",
+      title: "无有效的订单id",
+    });
+    return;
+  }
+  const params = { order_id: id };
+  refundOrder({ params })
+    .then((res) => {
+      uni.showToast({
+        icon: "success",
+        title: "退款成功",
+      });
+      replace.value = true;
+      queryOrderList();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
+onMounted(() => {
+  queryOrderList();
+});
+
+const isLastPage = computed(() => {
+  return unref(page) === Math.ceil(unref(totalData) / pageSize);
+});
+
+function queryNext() {
+  console.log(unref(isLastPage));
+  if (unref(isLastPage)) {
+    console.error("已经是最后一页");
+    return false;
+  }
+  page.value = page.value + 1;
+  queryOrderList();
+}
 </script>
 
-<style lang='scss' scoped>
-.page-wrapper{
-    width:100%;
-    // height: 100%;
-    height: calc(100vh - 42rpx);
-    overflow-y: auto;
-    background: #FAFBFD;
-    box-sizing: border-box;
-    padding-bottom:30rpx
+<style lang="scss" scoped>
+.page-wrapper {
+  width: 100%;
+  // height: 100%;
+  height: calc(100vh - 42rpx);
+  overflow-y: auto;
+  background: #fafbfd;
+  box-sizing: border-box;
+  padding-bottom: 30rpx;
 }
-.order-wrapper{
-    display: flex;
-    flex-direction: column;
-    width:100%;
+.order-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
-.no-more{
+.no-more {
+  font-weight: normal;
+  font-size: 18rpx;
+  color: #999999;
+  height: 146rpx;
+  padding: 28rpx 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.no-data {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  .no-img {
+    width: 446rpx;
+    height: 446rpx;
+  }
+  .no-text {
     font-weight: normal;
-    font-size: 18rpx;
+    font-size: 24rpx;
     color: #999999;
-    height:146rpx;
-    padding: 28rpx 0;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    box-sizing: border-box;
-}
-.no-data{
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    .no-img{
-        width:446rpx;
-        height: 446rpx;
-    }
-    .no-text{
-        font-weight: normal;
-        font-size: 24rpx;
-        color: #999999;
-    }
+  }
 }
 /* 修改标签页下划线颜色*/
 // :deep(.wd-button.is-primary){
 //     background: #EA0000;
 // }
 :deep(.wd-tabs__line) {
-    background: linear-gradient( 180deg, #99D1FF 0%, #3194FF 100%);
+  background: linear-gradient(180deg, #99d1ff 0%, #3194ff 100%);
 }
-:deep(.wd-tabs){
-    display: flex;
-    flex-direction: column;
-    height:100%;
+:deep(.wd-tabs) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
-:deep(.wd-tab__body){
-    height:calc(100vh - 42rpx);
+:deep(.wd-tab__body) {
+  height: calc(100vh - 42rpx);
 }
-:deep(.wd-tabs__container){
-    flex:1;
+:deep(.wd-tabs__container) {
+  flex: 1;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/ycysp/orderDetail.vue b/src/pages/ycysp/orderDetail.vue
index d7dae5a..6a12d0f 100644
--- a/src/pages/ycysp/orderDetail.vue
+++ b/src/pages/ycysp/orderDetail.vue
@@ -1,259 +1,296 @@
 <route lang="json5" type="page">
-    {
-      style: {
-        navigationStyle: 'custom',
-        navigationBarTitleText: '订单详情',
-        navigationBarBackgroundColor:'#FFF',
-      },
-    }
+{
+  style: {
+    navigationStyle: "custom",
+    navigationBarTitleText: "订单详情",
+    navigationBarBackgroundColor: "#FFF",
+  },
+}
 </route>
 
 <template>
-    <view class="w-full h-full flex flex-col flex-items-center page">
-        <view class="wrapper">
-            <view class="pro-info">
-                <view class="title">订单详情</view>
-                <view class="content flex">
-                    <image class="pro-img" :src="orderDetail.main_image" />
-                    <view class="flex flex-1 flex-col">
-                        <view class="flex flex-justify-between name" style="margin-bottom:12rpx">
-                            <view class="text-over">{{ orderDetail.product_name }}</view>
-                            <view class="amount"><text>￥</text>{{ orderDetail.order_amount }}<text>元</text></view>
-                        </view>
-                        <view class="flex num">
-                            <view>充值账号：</view>
-                            <view>{{ maskPhoneNumber(orderDetail.account) }}</view>
-                        </view>
-                        <view class="flex flex-justify-between num">
-                            <view>数量</view>
-                            <view>x1</view>
-                        </view>
-                    </view>
-                </view>
+  <view class="w-full h-full flex flex-col flex-items-center page">
+    <view class="wrapper">
+      <view class="pro-info">
+        <view class="title">订单详情</view>
+        <view class="content flex">
+          <image class="pro-img" :src="orderDetail.main_image" />
+          <view class="flex flex-1 flex-col">
+            <view
+              class="flex flex-justify-between name"
+              style="margin-bottom: 12rpx"
+            >
+              <view class="text-over">{{ orderDetail.product_name }}</view>
+              <view class="amount"
+                ><text>￥</text>{{ orderDetail.order_amount
+                }}<text>元</text></view
+              >
             </view>
-            <view class="line"></view>
-            <view class="order-info">
-                <view class="info-item">订单编号：{{ orderDetail.order_no }}</view>
-                <view class="info-item" v-if="!!orderDetail.exchange_time && ![9].includes(orderDetail.status)">支付时间：{{
-                    orderDetail.exchange_time }}</view>
-                <view class="info-item">下单时间：{{ orderDetail.create_time }}</view>
-                <view class="info-item" style="margin-bottom: 24rpx;">订单金额：{{ orderDetail.order_amount }}</view>
-                <!-- <view class="info-item" style="margin-bottom: 24rpx;">优惠金额：{{ orderDetail.order_amount}}</view> -->
-                <view class="flex flex-justify-between info-item" style="margin-bottom: 24rpx;" v-if="[3,4,8].includes(orderDetail.status)">
-                    <view>充值状态：</view>
-                    <view :style="{color:stateColor[orderDetail.status] || ''}">{{ stateConfig[orderDetail.status] }}</view>
-                </view>
+            <view class="flex num">
+              <view>充值账号：</view>
+              <view>{{ maskPhoneNumber(orderDetail.account) }}</view>
             </view>
-            <view class="line"></view>
+            <view class="flex flex-justify-between num">
+              <view>数量</view>
+              <view>x1</view>
+            </view>
+          </view>
         </view>
-        <view class="btns">
-            <view class="btn pwd" @click="pay(orderDetail)" v-if="[1].includes(orderDetail.status)">立即付款</view>
-            <view class="btn pwd" v-if="[4].includes(orderDetail.status)" @click="goRefund">申请退款</view>
-            <view class="btn back" @click="backIndex">返回首页</view>
+      </view>
+      <view class="line"></view>
+      <view class="order-info">
+        <view class="info-item">订单编号：{{ orderDetail.order_no }}</view>
+        <view
+          class="info-item"
+          v-if="
+            !!orderDetail.exchange_time && ![9].includes(orderDetail.status)
+          "
+          >支付时间：{{ orderDetail.exchange_time }}</view
+        >
+        <view class="info-item">下单时间：{{ orderDetail.create_time }}</view>
+        <view class="info-item" style="margin-bottom: 24rpx"
+          >订单金额：{{ orderDetail.order_amount }}</view
+        >
+        <!-- <view class="info-item" style="margin-bottom: 24rpx;">优惠金额：{{ orderDetail.order_amount}}</view> -->
+        <view
+          class="flex flex-justify-between info-item"
+          style="margin-bottom: 24rpx"
+          v-if="[3, 4, 8].includes(orderDetail.status)"
+        >
+          <view>充值状态：</view>
+          <view :style="{ color: stateColor[orderDetail.status] || '' }">{{
+            stateConfig[orderDetail.status]
+          }}</view>
         </view>
+      </view>
+      <view class="line"></view>
     </view>
+    <view class="btns">
+      <view
+        class="btn pwd"
+        @click="pay(orderDetail)"
+        v-if="[1].includes(orderDetail.status)"
+        >立即付款</view
+      >
+      <view
+        class="btn pwd"
+        v-if="[4].includes(orderDetail.status)"
+        @click="goRefund"
+        >申请退款</view
+      >
+      <view class="btn back" @click="backIndex">返回首页</view>
+    </view>
+  </view>
 </template>
 
 <script setup>
-import { onShow, onHide, onUnload } from '@dcloudio/uni-app';
-import { onMounted, reactive, ref, unref } from 'vue';
-import { getOrderList, refundOrder} from '@/api/ycysp';
-import { getQueryString } from '@/utils/utils';
-import { stateConfig, stateColor } from './config';
-import usePay from './hooks/usePay';
-const id = ref('');
-const orderNo = ref('');
+import { onShow, onHide, onUnload } from "@dcloudio/uni-app";
+import { onMounted, reactive, ref, unref } from "vue";
+import { getOrderList, refundOrder } from "@/api/ycysp";
+import { getQueryString } from "@/utils/utils";
+import { stateConfig, stateColor } from "./config";
+import usePay from "./hooks/usePay";
+const id = ref("");
+const orderNo = ref("");
 const orderDetail = reactive({});
 
 // 用onshow 解决h5页面被缓存的问题
 onShow(() => {
-    const url = window.location.href
-    console.log('url-->', url);
-    const order_id = getQueryString('order_id')
-    const order_no = getQueryString('order_no')
-    const isPayBack = getQueryString('isPayBack')
-    console.log(order_id, order_no);
-    if (!order_id && !order_no) return
-    id.value = order_id
-    orderNo.value = order_no;
-    getDetail();
-})
-
+  const url = window.location.href;
+  console.log("url-->", url);
+  const order_id = getQueryString("order_id");
+  const order_no = getQueryString("order_no");
+  const isPayBack = getQueryString("isPayBack");
+  console.log(order_id, order_no);
+  if (!order_id && !order_no) return;
+  id.value = order_id;
+  orderNo.value = order_no;
+  getDetail();
+});
 
 const backIndex = () => {
-    uni.navigateTo({
-        url: `/pages/ycysp/home`
-    })
-}
+  uni.navigateTo({
+    url: `/pages/ycysp/home`,
+  });
+};
 
 const viewPwd = (detailData) => {
-    const { voucher_link } = detailData
-    if (voucher_link) {
-        console.log(`跳转外部链接-->${voucher_link}`);
-        window.location.href = voucher_link
-    } else {
-        console.error(`voucher_link无有效值`);
-    }
-}
+  const { voucher_link } = detailData;
+  if (voucher_link) {
+    console.log(`跳转外部链接-->${voucher_link}`);
+    window.location.href = voucher_link;
+  } else {
+    console.error(`voucher_link无有效值`);
+  }
+};
 
 const goRefund = () => {
-    const { id } = orderDetail
-    if (!id) {
-        uni.showToast({
-            icon: 'none',
-            title: '无有效的订单id',
-        });
-        return
-    }
-    const params = { order_id: id }
-    refundOrder({ params }).then(res => {
-        uni.showToast({
-            icon: 'success',
-            title: '退款成功',
-        });
-    }).catch(err => {
-        console.log(err);
+  const { id } = orderDetail;
+  if (!id) {
+    uni.showToast({
+      icon: "none",
+      title: "无有效的订单id",
+    });
+    return;
+  }
+  const params = { order_id: id };
+  refundOrder({ params })
+    .then((res) => {
+      uni.showToast({
+        icon: "success",
+        title: "退款成功",
+      });
     })
-}
+    .catch((err) => {
+      console.log(err);
+    });
+};
 
 function maskPhoneNumber(phoneNumber) {
-    return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+  return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
 }
 
 function pay(orderData) {
-    const { order_no, notify_url, price,brand,sign,plain_text } = orderData;
-    const { payFunc } = usePay();
-    payFunc({ order_no, notify_url, TranAmt: price,MerName:brand,sign,plain_text })
+  const { order_no, notify_url, price, brand, sign, plain_text } = orderData;
+  const { payFunc } = usePay();
+  payFunc({
+    order_no,
+    notify_url,
+    TranAmt: price,
+    MerName: brand,
+    sign,
+    plain_text,
+  });
 }
 
 const getDetail = () => {
-    const params = {
-        id: unref(id),
-        order_no: unref(orderNo),
-    }
-    getOrderList({ params }).then(res => {
-        const {total,list} = res
-        Object.assign(orderDetail, res.list[0])
-    })
-}
+  const params = {
+    id: unref(id),
+    order_no: unref(orderNo),
+  };
+  getOrderList({ params }).then((res) => {
+    const { total, list } = res;
+    Object.assign(orderDetail, res.list[0]);
+  });
+};
 </script>
 
 <style lang="scss" scoped>
 .page {
-    background-color: #fafafa;
+  background-color: #fafafa;
 }
-.line{
-    width: 662rpx;
-    height: 1rpx;
-    background-color: #E1E1F0;
-    transform: scaleY(0.5);
+.line {
+  width: 662rpx;
+  height: 1rpx;
+  background-color: #e1e1f0;
+  transform: scaleY(0.5);
 }
 
 .wrapper {
-    width: 702rpx;
-    // height: 542rpx;
-    min-height: 442rpx;
-    background: #FFFFFF;
-    border-radius: 24rpx;
-    margin-top: 24rpx;
-    box-sizing: border-box;
-    padding: 32rpx 24rpx;
+  width: 702rpx;
+  // height: 542rpx;
+  min-height: 442rpx;
+  background: #ffffff;
+  border-radius: 24rpx;
+  margin-top: 24rpx;
+  box-sizing: border-box;
+  padding: 32rpx 24rpx;
 
-    .pro-info {
-        // border-bottom: 1rpx solid #F0E1E1;
+  .pro-info {
+    // border-bottom: 1rpx solid #F0E1E1;
 
-        .title {
-            font-weight: 500;
-            font-size: 28rpx;
-            color: #333333;
-            margin-bottom: 28rpx;
-        }
-
-        .content {
-            margin-bottom: 24rpx;
-            font-weight: 400;
-
-            .pro-img {
-                display: block;
-                width: 90rpx;
-                height: 90rpx;
-                margin-right: 34rpx;
-            }
-
-            .text-over {
-                max-width: 80%;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-            }
-
-            .name {
-                font-size: 24rpx;
-                color: #333333;
-                font-weight: 700;
-            }
-
-            .amount {
-                color: #333333;
-                font-weight: 400;
-                font-size: 24rpx;
-
-                text:nth-child(1) {
-                    font-size: 20rpx;
-                }
-
-                text:nth-child(2) {
-                    font-size: 22rpx;
-                }
-            }
-
-            .num {
-                font-weight: 400;
-                font-size: 24rpx;
-                color: #9E9E9E;
-                margin-bottom:10rpx;
-            }
-        }
+    .title {
+      font-weight: 500;
+      font-size: 28rpx;
+      color: #333333;
+      margin-bottom: 28rpx;
     }
 
-    .order-info {
-        // border-bottom: 1rpx solid #F0E1E1;
-        .info-item {
-            font-weight: 400;
-            font-size: 22rpx;
-            color: #6C6C6C;
-            margin-top: 24rpx;
+    .content {
+      margin-bottom: 24rpx;
+      font-weight: 400;
+
+      .pro-img {
+        display: block;
+        width: 90rpx;
+        height: 90rpx;
+        margin-right: 34rpx;
+      }
+
+      .text-over {
+        max-width: 80%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .name {
+        font-size: 24rpx;
+        color: #333333;
+        font-weight: 700;
+      }
+
+      .amount {
+        color: #333333;
+        font-weight: 400;
+        font-size: 24rpx;
+
+        text:nth-child(1) {
+          font-size: 20rpx;
         }
+
+        text:nth-child(2) {
+          font-size: 22rpx;
+        }
+      }
+
+      .num {
+        font-weight: 400;
+        font-size: 24rpx;
+        color: #9e9e9e;
+        margin-bottom: 10rpx;
+      }
     }
+  }
+
+  .order-info {
+    // border-bottom: 1rpx solid #F0E1E1;
+    .info-item {
+      font-weight: 400;
+      font-size: 22rpx;
+      color: #6c6c6c;
+      margin-top: 24rpx;
+    }
+  }
 }
 
 .btns {
-    margin-top: 146rpx;
+  margin-top: 146rpx;
+  display: flex;
+
+  .btn {
+    width: 312rpx;
+    height: 76rpx;
+    border-radius: 38rpx;
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
 
-    .btn {
-        width: 312rpx;
-        height: 76rpx;
-        border-radius: 38rpx;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
+  .pwd {
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #ffffff;
+    background: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
+    margin-right: 10rpx;
+  }
 
-    .pwd {
-        font-weight: 500;
-        font-size: 32rpx;
-        color: #FFFFFF;
-        background: linear-gradient(270deg, #2C91FF 0%, #9AD2FF 100%);
-        margin-right: 10rpx;
-    }
-
-    .back {
-        font-weight: 400;
-        font-size: 32rpx;
-        color: #B9C8C7;
-        border: 2rpx solid #B9C8C7;
-    }
+  .back {
+    font-weight: 400;
+    font-size: 32rpx;
+    color: #b9c8c7;
+    border: 2rpx solid #b9c8c7;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/ycysp/pay.vue b/src/pages/ycysp/pay.vue
index 2620ee3..13be27c 100644
--- a/src/pages/ycysp/pay.vue
+++ b/src/pages/ycysp/pay.vue
@@ -1,43 +1,47 @@
 <route lang="json5" type="page">
-    {
-      style: {
-        navigationStyle: 'custom',
-        navigationBarTitleText: '支付确认',
-        navigationBarBackgroundColor:'#FFF',
-      },
-    }
-  </route>
+{
+  style: {
+    navigationStyle: "custom",
+    navigationBarTitleText: "支付确认",
+    navigationBarBackgroundColor: "#FFF",
+  },
+}
+</route>
 
 <template>
-  <view class="flex flex-col flex-items-center flex-justify-between page-wrapper">
+  <view
+    class="flex flex-col flex-items-center flex-justify-between page-wrapper"
+  >
     <view class="info">
-        <view class="title-small">订单详情</view>
-        <view class="flex detail-info">
-            <view class="detail-img">
-                <image
-                    :src="orderDetail.main_image"
-                    mode="scaleToFill"
-                />
-            </view>
-            <view class="detail-other">
-                <view class="flex flex-justify-between name-info">
-                    <text>{{ orderDetail.product_name }}</text>
-                    <text><text style="font-size:20rpx">￥</text>{{ orderDetail.order_amount}}元</text>
-                </view>
-                <view class="flex flex-justify-between count-info">
-                    <text>数量</text>
-                    <text>x1</text>
-                </view>
-            </view>
+      <view class="title-small">订单详情</view>
+      <view class="flex detail-info">
+        <view class="detail-img">
+          <image :src="orderDetail.main_image" mode="scaleToFill" />
         </view>
-         <view class="line"></view>
-        <view class="order-info">
-            <view class="order-item">充值账户：{{ maskPhoneNumber(orderDetail.account) }}</view>
-            <view class="order-item">充值类型：{{ orderDetail.product_type}}</view>
-            <!-- <view class="order-item">优惠金额：{{ discount }}</view> -->
+        <view class="detail-other">
+          <view class="flex flex-justify-between name-info">
+            <text>{{ orderDetail.product_name }}</text>
+            <text
+              ><text style="font-size: 20rpx">￥</text
+              >{{ orderDetail.order_amount }}元</text
+            >
+          </view>
+          <view class="flex flex-justify-between count-info">
+            <text>数量</text>
+            <text>x1</text>
+          </view>
         </view>
-        <view class="line"></view>
-        <!-- <view class="order-info">
+      </view>
+      <view class="line"></view>
+      <view class="order-info">
+        <view class="order-item"
+          >充值账户：{{ maskPhoneNumber(orderDetail.account) }}</view
+        >
+        <view class="order-item">充值类型：{{ orderDetail.product_type }}</view>
+        <!-- <view class="order-item">优惠金额：{{ discount }}</view> -->
+      </view>
+      <view class="line"></view>
+      <!-- <view class="order-info">
             <view class="count-item">共 1 件，应付总额：<text style="text-decoration: line-through;">￥{{ detail.order_amount }}</text></view>
             <view class="number-item">实际支付：¥{{ detail.order_amount }}</view>
         </view> -->
@@ -47,157 +51,166 @@
 </template>
 
 <script setup>
-import { onShow,onLoad} from '@dcloudio/uni-app';
-import { ref, reactive, unref, onMounted,computed} from 'vue';
-import {createOrder,getOrderList} from '@/api/ycysp';
-import usePay from './hooks/usePay';
+import { onShow, onLoad } from "@dcloudio/uni-app";
+import { ref, reactive, unref, onMounted, computed } from "vue";
+import { createOrder, getOrderList } from "@/api/ycysp";
+import usePay from "./hooks/usePay";
 const orderDetail = reactive({});
 
-const _order_no = ref('')
+const _order_no = ref("");
 
 onLoad((options) => {
-    const {order_no} = options
-    _order_no.value = order_no
-})
+  const { order_no } = options;
+  _order_no.value = order_no;
+});
 
 const discount = computed(() => {
-    if(!unref(_product))return 0
-    return (Number(unref(_product).price)*100 - Number(unref(_product).sell_price)*100) / 100
-})
-
+  if (!unref(_product)) return 0;
+  return (
+    (Number(unref(_product).price) * 100 -
+      Number(unref(_product).sell_price) * 100) /
+    100
+  );
+});
 
 function maskPhoneNumber(phoneNumber) {
-  return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+  return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
 }
 
 const goPay = () => {
-    const {payFunc} = usePay();
-    const {order_no,notify_url,sign,plain_text} = orderDetail.pay_info;
-    payFunc({order_no,notify_url,TranAmt:voucherAmount,MerName:config[brandFlag].name,sign,plain_text})
-}
+  const { payFunc } = usePay();
+  const { order_no, notify_url, sign, plain_text } = orderDetail.pay_info;
+  payFunc({
+    order_no,
+    notify_url,
+    TranAmt: voucherAmount,
+    MerName: config[brandFlag].name,
+    sign,
+    plain_text,
+  });
+};
 
 onMounted(() => {
-    getDetail()
-})
+  getDetail();
+});
 
 const getDetail = () => {
-    const params = {
-        order_no: unref(_order_no),
-    }
-    getOrderList({ params }).then(res => {
-        const {total,list} = res
-        Object.assign(orderDetail, res.list[0])
-    })
-}
-
+  const params = {
+    order_no: unref(_order_no),
+  };
+  getOrderList({ params }).then((res) => {
+    const { total, list } = res;
+    Object.assign(orderDetail, res.list[0]);
+  });
+};
 </script>
 <style scoped lang="scss">
-.page-wrapper{
-    width:100vw;
-    height:100vh;
-    opacity: 1;
-    // background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
-    background: #FAFBFD;;
-    padding:33rpx 0;
-    box-sizing: border-box;
+.page-wrapper {
+  width: 100vw;
+  height: 100vh;
+  opacity: 1;
+  // background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
+  background: #fafbfd;
+  padding: 33rpx 0;
+  box-sizing: border-box;
 }
-.info{
-    width: 702rpx;
-    // height: 514rpx;
-    height: 374rpx;
-    border-radius: 24rpx;
-    opacity: 1;
-    background: #FFFFFF;
-    box-sizing: border-box;
-    padding:32rpx 24rpx;
+.info {
+  width: 702rpx;
+  // height: 514rpx;
+  height: 374rpx;
+  border-radius: 24rpx;
+  opacity: 1;
+  background: #ffffff;
+  box-sizing: border-box;
+  padding: 32rpx 24rpx;
 }
-.line{
+.line {
+  width: 100%;
+  height: 1rpx;
+  background: #e1e1f0;
+  transform: scaleY(0.5);
+}
+.title-small {
+  font-size: 28rpx;
+  font-weight: normal;
+  line-height: 32rpx;
+  letter-spacing: 0rpx;
+  color: #333333;
+}
+.detail-info {
+  padding: 24rpx 0;
+}
+.detail-img {
+  width: 92rpx;
+  height: 92rpx;
+  margin-right: 30rpx;
+  image {
     width: 100%;
-    height: 1rpx;
-    background: #e1e1f0;
-    transform: scaleY(0.5);
+    height: 100%;
+  }
 }
-.title-small{
-    font-size: 28rpx;
-    font-weight: normal;
-    line-height: 32rpx;
-    letter-spacing: 0rpx;
-    color: #333333;
-}
-.detail-info{
-    padding:24rpx 0;
-}
-.detail-img{
-    width:92rpx;
-    height:92rpx;
-    margin-right:30rpx;
-    image{
-        width:100%;
-        height:100%;
-    }
-}
-.detail-other{
-    flex:1;
-    font-weight:400;
-    line-height: 32rpx;
-    letter-spacing: 0rpx;
-    .name-info{
-        font-size: 24rpx;
-        color: #333333;
-    }
-    .count-info{
-        font-size: 20rpx;
-        color: #9E9E9E;
-        margin-top:12rpx;
-    }
-}
-.order-info{
-    padding-bottom:24rpx;
-}
-.order-item{
-    font-size: 22rpx;
-    font-weight: normal;
-    line-height: 32rpx;
-    letter-spacing: 0rpx;
-    color: #6C6C6C;
-    margin-top:24rpx;
-}
-.bottom{
-    font-weight: 400;
-    line-height: 32rpx;
-    text-align: right;
-    font-style: normal;
-    text-transform: none;
-}
-.count-item{
-    font-size: 22rpx;
-    color: #878787;
-    text-align: right;
-    margin-top:16rpx;
-}
-.number-item{
+.detail-other {
+  flex: 1;
+  font-weight: 400;
+  line-height: 32rpx;
+  letter-spacing: 0rpx;
+  .name-info {
     font-size: 24rpx;
-    color: #2E92FF;
-    text-align: right;
-    margin-top:16rpx;
+    color: #333333;
+  }
+  .count-info {
+    font-size: 20rpx;
+    color: #9e9e9e;
+    margin-top: 12rpx;
+  }
 }
-.pay-btn{
-    width: 710rpx;
-    height: 88rpx;
-    /* 自动布局 */
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 12rpx 28rpx;
-    border-radius: 392rpx;
-    opacity: 1;
-    background: linear-gradient(270deg, #2C91FF 0%, #9AD2FF 100%);
-    box-sizing: border-box;
-    font-size: 32rpx;
-    font-weight: normal;
-    line-height: normal;
-    letter-spacing: 0em;
-    color: #FFFFFF;
+.order-info {
+  padding-bottom: 24rpx;
 }
-</style>
\ No newline at end of file
+.order-item {
+  font-size: 22rpx;
+  font-weight: normal;
+  line-height: 32rpx;
+  letter-spacing: 0rpx;
+  color: #6c6c6c;
+  margin-top: 24rpx;
+}
+.bottom {
+  font-weight: 400;
+  line-height: 32rpx;
+  text-align: right;
+  font-style: normal;
+  text-transform: none;
+}
+.count-item {
+  font-size: 22rpx;
+  color: #878787;
+  text-align: right;
+  margin-top: 16rpx;
+}
+.number-item {
+  font-size: 24rpx;
+  color: #2e92ff;
+  text-align: right;
+  margin-top: 16rpx;
+}
+.pay-btn {
+  width: 710rpx;
+  height: 88rpx;
+  /* 自动布局 */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 12rpx 28rpx;
+  border-radius: 392rpx;
+  opacity: 1;
+  background: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
+  box-sizing: border-box;
+  font-size: 32rpx;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0em;
+  color: #ffffff;
+}
+</style>