diff --git a/.env.development b/.env.development
index 4051359..30e5588 100644
--- a/.env.development
+++ b/.env.development
@@ -2,4 +2,7 @@
 # VITE_BASE_URL = 'http://192.168.110.50:8083'
 # 邮储奶茶活动
 # VITE_BASE_URL = 'http://milk.api.test.86698.cn'
-VITE_BASE_URL = 'http://milk.test.api.cdlsxd.cn'
+# VITE_BASE_URL = 'http://milk.test.api.cdlsxd.cn'
+# 邮储音视频
+# VITE_BASE_URL = 'http://milk.api.test.86698.cn'
+VITE_BASE_URL = 'http://192.168.110.128:8081'
diff --git a/custom.page.js b/custom.page.js
index c0d301a..4737eca 100644
--- a/custom.page.js
+++ b/custom.page.js
@@ -4,7 +4,7 @@ import path from 'path'
 
 const config = {
    pages:'./src/pages',
-   pagesInclude:['ycysp/pay.vue']
+   pagesInclude:['ycysp/home.vue','ycysp/pay.vue','ycysp/order.vue','ycysp/orderDetail.vue',]
 }
 const { pages, pagesInclude } = config
 
diff --git a/src/api/ycysp.js b/src/api/ycysp.js
new file mode 100644
index 0000000..8bf12c9
--- /dev/null
+++ b/src/api/ycysp.js
@@ -0,0 +1,28 @@
+import http  from "../utils/http";
+
+
+export const login = (params) => http({
+	url:'/api/v1/login',
+	method:'POST',
+	noToken:true,
+	...params
+})
+
+export const getBrandList = (params) => http({
+	url:'/api/v1/brand',
+	method:'GET',
+	...params
+})
+
+export const getProductList = (params) => http({
+	url:'/api/v1/product',
+	method:'GET',
+	...params
+})
+
+
+export const createOrder = (params) => http({
+	url:'/api/v1/order',
+	method:'POST',
+	...params
+})
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index c7641be..a9efabd 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,17 +1,53 @@
 {
   "pages": [
     {
-      "path": "pages/ycysp/coupon",
-      "type": "page"
+      "path": "pages/ycysp/home",
+      "type": "home",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "音视频专区",
+        "navigationBarBackgroundColor": "#FFF"
+      }
+    },
+    {
+      "path": "pages/ycysp/order",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "我的订单",
+        "navigationBarBackgroundColor": "#FFF"
+      }
+    },
+    {
+      "path": "pages/ycysp/orderDetail",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "订单详情",
+        "navigationBarBackgroundColor": "#FFF"
+      }
     },
     {
       "path": "pages/ycysp/pay",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "支付确认",
+        "navigationBarBackgroundColor": "#FFF"
+      }
+    },
+    {
+      "path": "pages/ycysp/component/coupon-item",
       "type": "page"
     },
     {
       "path": "pages/ycysp/component/member",
       "type": "page"
     },
+    {
+      "path": "pages/ycysp/component/order-item",
+      "type": "page"
+    },
     {
       "path": "pages/ycysp/component/recharge-item",
       "type": "page"
diff --git a/src/pages/ycysp/component/coupon-item.vue b/src/pages/ycysp/component/coupon-item.vue
new file mode 100644
index 0000000..c100985
--- /dev/null
+++ b/src/pages/ycysp/component/coupon-item.vue
@@ -0,0 +1,84 @@
+<template>
+  <view class="flex coupon-wrapper">
+    <view class="flex flex-justify-center flex-items-center left">
+        <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>
+  </view>
+</template>
+
+<script setup>
+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%;
+}
+.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;
+        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%);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/ycysp/component/member.vue b/src/pages/ycysp/component/member.vue
index 559f048..1e3de06 100644
--- a/src/pages/ycysp/component/member.vue
+++ b/src/pages/ycysp/component/member.vue
@@ -1,18 +1,56 @@
 <template>
-  <view class="wrapper"></view>
+  <view class="wrapper">
+    <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" />
+        <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="#FE3B34" fill-opacity="1" class="gou" v-if="detail.isChecked"/>
+        <ellipse cx="6.5" cy="6.5" rx="6.199999988079071" ry="6.199999988079071" fill-opacity="0" stroke-opacity="1"
+          stroke="#FE3B34" fill="none" stroke-width="0.6000000238418579" />
+      </g>
+    </svg>
+  </view>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, unref, onMounted} from 'vue';
+import { e } from 'unocss';
+import { ref, reactive, unref, onMounted } from 'vue';
+
+const props = defineProps({
+  detail:{
+    type:Object,
+    required:true
+  }
+})
+const emits = defineEmits(['checked'])
+
+const checkedEvent = () => {
+  emits('checked',props.detail.id)
+}
 
 </script>
 <style scoped lang="scss">
-.wrapper{
-    // width:226rpx;
-    width:100%;
-    height:110rpx;
-    box-sizing: border-box;
-    background: url('@/static/ycysp/cloud.webp') no-repeat;
-    background-size: 100% 100%;
+.wrapper {
+  // width:226rpx;
+  width: 100%;
+  height: 110rpx;
+  box-sizing: border-box;
+  background: url('@/static/ycysp/cloud.webp') no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.gou{
+  width:14rpx;
+  height:10rpx;
+  transform: translate(5rpx,8rpx);
+}
+.svg {
+  position: absolute;
+  right: 6rpx;
+  top: 6rpx;
+  width: 26rpx;
+  height: 26rpx;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/ycysp/component/order-item.vue b/src/pages/ycysp/component/order-item.vue
new file mode 100644
index 0000000..02e20e5
--- /dev/null
+++ b/src/pages/ycysp/component/order-item.vue
@@ -0,0 +1,178 @@
+<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.state] || ''}">{{ stateConfig[detail.state] }}</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.price }}<text>元</text></view>
+                    </view>
+                    <view class="flex flex-justify-between num">
+                        <view>数量</view>
+                        <view>x1</view>
+                    </view>
+                </view>
+            </view>
+            <view class="time">下单时间：{{ detail.create_time }}</view>
+        </view>
+        <view class="btns flex flex-justify-end">
+            <view class="btn del" @click="goDel">删除订单</view>
+            <view class="btn pay"  v-if="[1].includes(detail.state)" @click="goPay">立即付款</view>
+            <view class="btn view"  v-if="[3].includes(detail.state) && !!detail.voucher_link" @click="goPwd">查看卡券</view>
+            <view class="btn pay"   @click="goRefund"  v-if="[4].includes(detail.state)">申请退款</view>
+        </view>
+    </view>
+ </template>
+ 
+ <script setup>
+    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'])
+
+    function goPay(e){
+        if(e.stopPropagation) { //W3C阻止冒泡方法  
+            e.stopPropagation();  
+        }
+        emits('pay-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 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);
+    }
+</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;
+    }
+    :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;
+    }
+ }
+ .btns{
+    border-top: 1rpx solid #F0E1E1;
+    padding:36rpx 0 12rpx;
+    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: #EA0000;
+    }
+    .view{
+        background: #FFFFFF;
+        border-radius: 68rpx;
+        border: 2rpx solid #EA0000;
+        color:#EA0000;
+    }
+ }
+ </style>
\ No newline at end of file
diff --git a/src/pages/ycysp/component/recharge-item.vue b/src/pages/ycysp/component/recharge-item.vue
index 34137d2..e47a80b 100644
--- a/src/pages/ycysp/component/recharge-item.vue
+++ b/src/pages/ycysp/component/recharge-item.vue
@@ -1,16 +1,28 @@
 <template>
-    <view class="flex flex-col flex-items-center flex-justify-center re-wrapper">
-      <view class="type-name">黄金月卡</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">18</view>
+        <view class="num">{{ detail.sell_price }}</view>
       </view>
-      <view class="type-ori">原价30</view>
+      <view class="type-ori">原价{{ detail.price }}</view>
     </view>
   </template>
   
   <script setup lang="ts">
   import { ref, reactive, unref, onMounted} from 'vue';
+  const props = defineProps({
+    detail:{
+      type:Object,
+      required:true
+    }
+  })
+
+  const emits = defineEmits(['selected'])
+
+  const selectEvent = () => {
+    emits('selected',props.detail.id)
+  }
   
   </script>
   <style scoped lang="scss">
@@ -20,8 +32,12 @@
     box-sizing: border-box;
     border-radius: 10rpx;
     opacity: 1;
-    background: #DCEFFF;
+    background: #fff;
     box-sizing: border-box;
+    border: 1.6rpx solid #ececec;
+  }
+  .is-checked{
+    background: #DCEFFF;
     border: 1.6rpx solid #2D91FF;
   }
   .type-name{
@@ -34,21 +50,17 @@
   }
   .type-amount{
     margin-top:6rpx;
+    color: $sub-price-color;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: 0em;
     .icon{
       font-size: 28rpx;
-      font-weight: 600;
-      line-height: normal;
-      letter-spacing: 0em;
-      color: #659BEB;
       margin-bottom:4rpx;
     }
     .num{
       /* 价格 */
       font-size: 48rpx;
-      font-weight: 600;
-      line-height: normal;
-      letter-spacing: 0em;
-      color: #659BEB;
     }
   }
   .type-ori{
diff --git a/src/pages/ycysp/component/ticket-recieve.vue b/src/pages/ycysp/component/ticket-recieve.vue
index eba3f40..3b1fe6d 100644
--- a/src/pages/ycysp/component/ticket-recieve.vue
+++ b/src/pages/ycysp/component/ticket-recieve.vue
@@ -1,9 +1,9 @@
 <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">
+    <view class="amount" :style="{width:['small'].includes(type) ? '120rpx' : '140rpx'}">
         <view class="icon">￥</view>
-        <view class="number">10</view>
+        <view class="number">100</view>
     </view>
     <view class="operation" v-if="['small'].includes(type)">
         <view class="name">优酷喵喵年卡适用</view>
@@ -33,7 +33,6 @@ const props = defineProps({
 <style scoped lang="scss">
 .wrapper{
     height: 136rpx;
-    color: #0E9BF2;
 }
 .small{
     width: 322rpx;
@@ -49,7 +48,8 @@ const props = defineProps({
 .tips{
     border-radius: 20rpx 0rpx 20rpx 0rpx;
     opacity: 1;
-    background: #69C5FF;width: 100rpx;
+    background: #69C5FF;
+    width: 100rpx;
     height: 20rpx;
     width: 100rpx;
     font-size: 12rpx;
@@ -61,12 +61,11 @@ const props = defineProps({
 .amount{
     display: flex;
     justify-content: center;
-    // width:120rpx;
-    width:140rpx;
     height:100%;
     font-weight: bold;
     line-height: normal;
     letter-spacing: 0.04em;
+    color:$price-color;
 }
 .icon{
     font-size: 18rpx;
@@ -94,7 +93,7 @@ const props = defineProps({
     font-weight: normal;
     line-height: normal;
     letter-spacing: 0em;
-    color: #1F93DA;
+    color: $text-color;
     overflow: hidden; /*文本超出隐藏*/
 	display:-webkit-box; /*盒子模型微弹性伸缩模型*/
 	-webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/
diff --git a/src/pages/ycysp/coupon.vue b/src/pages/ycysp/coupon.vue
index 0af89bc..3ff0bf6 100644
--- a/src/pages/ycysp/coupon.vue
+++ b/src/pages/ycysp/coupon.vue
@@ -1,11 +1,12 @@
 <template>
   <view class="page-wrapper">
-    
+    <couponItem />
   </view>
 </template>
 
 <script setup>
 import { ref, reactive, unref, onMounted} from 'vue';
+import couponItem from './component/coupon-item.vue';
 
 </script>
 <style scoped lang="scss">
diff --git a/src/pages/ycysp/home.vue b/src/pages/ycysp/home.vue
index 4478193..67b2e03 100644
--- a/src/pages/ycysp/home.vue
+++ b/src/pages/ycysp/home.vue
@@ -1,3 +1,13 @@
+<route lang="json5" type="home">
+  {
+    style: {
+      navigationStyle: 'custom',
+      navigationBarTitleText: '音视频专区',
+      navigationBarBackgroundColor:'#FFF',
+    },
+  }
+</route>
+
 <template>
   <scroll-view class="page-wrapper" scroll-y>
     <view class="w-full box-border banner-container">
@@ -8,7 +18,7 @@
       />
     </view>
     <!-- //优惠券 -->
-    <view class="ticket-container">
+    <!-- <view class="ticket-container">
       <view class="title">
         <view class="title-line"></view>
         <view class="title-text">领券更划算</view>
@@ -19,7 +29,7 @@
         <ticketRecieve />
         <ticketRecieve type="large"/>
       </view>
-    </view>
+    </view> -->
     <!-- //选择充值类型的会员 -->
     <view class="member-container">
       <view class="title">
@@ -27,8 +37,8 @@
       </view>
       <scroll-view scroll-x class="scroll">
         <view class="swiper">
-          <view v-for="(item,index) in typeArr" class="member-item">
-            <member key="index"/>
+          <view v-for="(item,index) in brandArr" class="member-item">
+            <member :key="item.id" :detail="item" @checked="handleChecked"/>
           </view>
         </view>
       </scroll-view>
@@ -39,18 +49,17 @@
         <view class="title-text">充值选项</view>
       </view>
       <scroll-view scroll-x class="recharge-scroll">
-      
-          <view v-for="(item,index) in typeArr" class="recharge-item">
-            <rechargeItem key="index"/>
-          </view>
+        <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="请输入手机号码充值"  placeholder-class="pcs">
+        <input type="text" placeholder="请输入手机号码充值"  placeholder-class="pcs" v-model="account">
      </view>
      <!-- 下一步 -->
-     <view class="flex flex-items-center flex-justify-center next-btn">
+     <view class="flex flex-items-center flex-justify-center next-btn" @click="nextEvent">
        下一步
      </view>
      <!-- 描述 -->
@@ -69,12 +78,94 @@
 </template>
 
 <script setup >
-import { ref, reactive, unref, onMounted} from 'vue';
-import ticketRecieve from './component/ticket-recieve.vue';
+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} from '@/api/ycysp';
+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 brandArr = ref([])
+const productArr = ref([])
+const account = ref('')
 
-const typeArr = new Array(8).fill(new Date().getTime())
+//获取品牌
+const getBrand = () => {
+  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 handleChecked = (checkedId) => {
+  brandArr.value = brandArr.value.map((item,index) => {
+    const {id,isChecked} = item;
+    if(checkedId === id){
+      return {...item,isChecked:!isChecked}
+    }
+    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}
+    }
+    return {...item,isSelected:false}
+  })
+}
+
+//下一步事件
+const nextEvent = () => {
+  const selectProduct = productArr.value.find(item => item.isSelected)
+  if(!selectProduct){
+    uni.showToast({
+      title: '请选择充值选项',
+      icon: 'none'
+    });
+    return
+  }
+  if(!account.value){
+    uni.showToast({
+      title: '请填写充值手机号',
+      icon: 'none'
+    });
+    return
+  }
+  if(!reg.test(account.value)){
+    uni.showToast({
+      title: '手机号格式不正确',
+      icon: 'none'
+    });
+    return
+  }
+  uni.navigateTo({
+    url:`/pages/ycysp/pay?account=${encodeURIComponent(account.value)}&product=${encodeURIComponent(JSON.stringify(selectProduct))}`
+  })
+}
+
+onMounted(async () => {
+  await getBrand()
+  getProduct()
+})
 
 </script>
 
@@ -83,7 +174,8 @@ const typeArr = new Array(8).fill(new Date().getTime())
     width:100vw;
     height:100vh;
     opacity: 1;
-    background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
+    // background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
+    background: #FFFFFF;
     overflow-y: auto;
 }
 .banner-container{
@@ -145,15 +237,15 @@ const typeArr = new Array(8).fill(new Date().getTime())
 }
 .scroll{
   width:100%;
-  height:240rpx;
+  // height:250rpx;
   overflow-x: auto;
 }
 .swiper{
-  width:calc((100vw - 68rpx) / 3 * 4 + 64rpx)
-  // white-space: nowrap;
+  display: flex;
+  flex-wrap: wrap;
+  max-width:calc((100vw - 68rpx) / 3 * 4 + 64rpx)
 }
 .member-item{
-  display: inline-block;
   margin:0 16rpx 16rpx 0;
   width:calc((100vw - 68rpx) / 3);
 }
diff --git a/src/pages/ycysp/hooks/useCode.js b/src/pages/ycysp/hooks/useCode.js
new file mode 100644
index 0000000..614ef37
--- /dev/null
+++ b/src/pages/ycysp/hooks/useCode.js
@@ -0,0 +1,29 @@
+import md5 from 'js-md5';
+export default function useCode(){
+    return new Promise((resolve,reject) => {
+        const authCallback = (params) => {
+            console.log('authCallback-use',params);
+            const {code} = params
+            resolve(code)
+        }
+        const getNewAuthorization = () => {
+            let appId = import.meta.env.VITE_YCNC_APPID; 
+            let time = Date.now().toString();
+            let secret = import.meta.env.VITE_YCNC_SECRET; 
+            let signBefore = appId + time + secret;
+            let sign = md5(signBefore);//普通md5
+            let param = {
+                appId: appId,
+                sign: sign,
+                time: time,
+                tran_code: "157",
+                fn: "authCallback",
+                needBind: ""
+            };
+            console.log('auth-param157-use',param);
+            Fw.device.api.getNewAuthorization(param)
+        };
+        window.authCallback = authCallback;
+        getNewAuthorization()
+    })
+}
\ No newline at end of file
diff --git a/src/pages/ycysp/hooks/usePay.js b/src/pages/ycysp/hooks/usePay.js
new file mode 100644
index 0000000..1145335
--- /dev/null
+++ b/src/pages/ycysp/hooks/usePay.js
@@ -0,0 +1,41 @@
+import dayjs from "dayjs";
+import md5 from 'js-md5';
+const handleParams = (obj) => Object.entries(obj).reduce((total,curr) => {
+    if(!total){
+        total += `${curr[0]}=${curr[1]}`
+    }else{
+        total += `|${curr[0]}=${curr[1]}`
+    }
+    return total
+},'')
+
+
+export default function usePay(){
+    const payFunc = (args) => {
+        const {order_no,notify_url,TranAmt,MerName,sign,plain_text} = args;
+        const MercCode = import.meta.env.VITE_YCNC_MERCH_CODE
+        const tranAmt = Number(TranAmt).toFixed(2)
+        // const plainText = handleParams({MercCode,TranAmt:tranAmt,TermSsn:order_no})
+        const Plain = {
+            MercUrl:notify_url,
+            TranAmt:tranAmt,
+            TermSsn:order_no,
+            BackLink:encodeURIComponent(`${window.location.origin}/#/pages/ycnc/orderDetail?order_no=${order_no}&isPayBack=true`),
+            psbcmcc:'LSXD',
+            TxnDt:dayjs(Date.now()).format('YYYY-MM-DD'),
+            MercCode:MercCode,
+            IsIntegral:'1',
+            MerName:MerName,
+        }
+        const params = {
+            Plain:handleParams(Plain),
+            plainText:plain_text,
+            sign:sign,
+            Signature: '',
+        }
+        console.log('handCodePay-plain',Plain);
+        console.log('handCodePay-params',params);
+        Fw.device.api.handCodePay(params);
+    }
+    return {payFunc}
+}
\ No newline at end of file
diff --git a/src/pages/ycysp/order.vue b/src/pages/ycysp/order.vue
new file mode 100644
index 0000000..4e3cfab
--- /dev/null
+++ b/src/pages/ycysp/order.vue
@@ -0,0 +1,266 @@
+<route lang="json5" type="page">
+    {
+      style: {
+        navigationStyle: 'custom',
+        navigationBarTitleText: '我的订单',
+        navigationBarBackgroundColor:'#FFF',
+      },
+    }
+</route>
+
+<template>
+    <wd-tabs color="#333" inactiveColor="#888" @click="handleClick">
+        <block v-for="item in tabs" :key="item.state">
+            <wd-tab :title="item.tabName" :name="item.state">
+                <scroll-view scroll-y class="page-wrapper" @scrolltolower="queryNext">
+                    <!-- <view class="order-wrapper flex flex-col flex-items-center" v-if="Array.isArray(list[item.state]) && list[item.state].length > 0"> -->
+                        <!-- <view v-for="(ele,index) in list[item.state]" :key="`${ele.id}-${item.state}`">
+                            <OrderItem :detail="ele" @pay-event="pay" @detail-event="viewDetail" @pwd-event="viewPwd"/>
+                        </view> -->
+                    <view class="order-wrapper flex flex-col flex-items-center" v-if="Array.isArray(list) && list.length > 0">
+                        <view v-for="(ele,index) in list" :key="`${ele.id}-${item.state}`">
+                            <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/ycnc/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 './components/order-item';
+    import usePay from './hooks/usePay';
+    import { getOrderList,deleteOrder,refundOrder } from '../../api/ycnc';
+    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 total = ref(0);
+    const page = ref(1);
+    const list = ref([]);
+    const replace = ref(false);
+    //页码
+    // const enumPage = tabs.reduce((prev,cur) => {
+    //     prev[cur.state] = 1
+    //     return prev
+    // },{})
+    // const page = ref(enumPage)
+    // //总数
+    // const enumObj = tabs.reduce((prev,cur) => {
+    //     prev[cur.state] = 0
+    //     return prev
+    // },{})
+    // const total = reactive(enumObj);
+    //数据列表
+    // const enumOrder = tabs.reduce((prev,cur) => {
+    //     prev[cur.state] = []
+    //     return prev
+    // },{})
+    // const list = reactive(enumOrder)
+
+    //获取订单列表
+    const queryOrderList = () => {
+        const activeTab = unref(activeName);
+        const params = {
+			page:unref(page),
+			pageSize:pageSize,
+            ...(activeTab !== 0 && {state:activeTab})
+		}
+		getOrderList({params}).then(res => {
+			const {count,data} = res
+            total.value = count
+            // Object.assign(list,{[activeTab]:[...list[activeTab],...data]})
+            if(replace.value){
+                const prevPage = page.value - 1;
+                const prevList = list.value.slice(0,  prevPage * pageSize);
+                list.value = [...prevList,...data];
+            }else{
+                list.value = [...list.value,...data]
+            }
+            replace.value = false
+		}).catch(err => {
+            total.value = 0;
+            // Object.assign(list,{[activeTab]:[]})
+            list.value = []
+        })
+    }
+
+    function handleClick({index, name}){
+        page.value = 1;
+        total.value = 0;
+        // Object.assign(list,{[name]:[]})
+        list.value = [];
+        activeName.value = name;
+        // name代表状态值
+        queryOrderList()
+     
+    }
+
+    function pay(orderData){
+        console.log(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})
+    }
+
+    function viewDetail(orderData){
+        const {id,order_no} = orderData;
+        uni.navigateTo({
+            url:`/pages/ycnc/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 isLastPage = computed(()=>{
+        return unref(page) === Math.ceil(unref(total) / 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
+}
+.order-wrapper{
+    display: flex;
+    flex-direction: column;
+    width:100%;
+}
+.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: 24rpx;
+        color: #999999;
+    }
+}
+/* 修改标签页下划线颜色*/
+// :deep(.wd-button.is-primary){
+//     background: #EA0000;
+// }
+:deep(.wd-tabs__line) {
+    background: #EA0000;
+}
+:deep(.wd-tabs){
+    display: flex;
+    flex-direction: column;
+    height:100%;
+}
+:deep(.wd-tab__body){
+    height:calc(100vh - 42rpx);
+}
+:deep(.wd-tabs__container){
+    flex:1;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/ycysp/orderDetail.vue b/src/pages/ycysp/orderDetail.vue
new file mode 100644
index 0000000..7782de0
--- /dev/null
+++ b/src/pages/ycysp/orderDetail.vue
@@ -0,0 +1,292 @@
+<route lang="json5" type="page">
+    {
+      style: {
+        navigationStyle: 'custom',
+        navigationBarTitleText: '订单详情',
+        navigationBarBackgroundColor:'#FFF',
+      },
+    }
+</route>
+
+<template>
+    <view class="w-full h-full flex flex-col flex-items-center page">
+        <view class="wrapper" v-if="pageType === 1">
+            <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.price }}<text>元</text></view>
+                        </view>
+                        <view class="flex flex-justify-between num">
+                            <view>数量</view>
+                            <view>x1</view>
+                        </view>
+                    </view>
+                </view>
+            </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.state)">支付时间：{{
+                    orderDetail.exchange_time }}</view>
+                <view class="info-item">下单时间：{{ orderDetail.create_time }}</view>
+                <view class="info-item" style="margin-bottom: 24rpx;">订单金额：{{ orderDetail.price }}</view>
+            </view>
+        </view>
+        <view class="btns" v-if="pageType === 1">
+            <view class="btn pwd" @click="viewPwd(orderDetail)"
+                v-if="[3].includes(orderDetail.state) && orderDetail.voucher_link">查看卡券</view>
+            <view class="btn pwd" @click="pay(orderDetail)" v-if="[1].includes(orderDetail.state)">立即付款</view>
+            <view class="btn pwd" v-if="[4].includes(orderDetail.state)" @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 { queryOrderDetail, refundOrder, queryOrderState } from '../../api/ycnc';
+import { getQueryString } from '../../utils/utils'
+import usePay from './hooks/usePay';
+const id = ref('');
+const orderNo = ref('');
+const orderDetail = reactive({});
+const pageType = ref(0)
+let timer = undefined
+
+// 用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);
+    console.log('isPayBack', isPayBack);
+    if (!order_id && !order_no) return
+    id.value = order_id
+    orderNo.value = order_no;
+    if (isPayBack) {
+        queryEvent()
+    } else {
+        getDetail();
+    }
+})
+
+onHide(() => {
+    timer && clearInterval(timer)
+})
+
+onUnload(() => {
+    timer && clearInterval(timer)
+})
+
+const backIndex = () => {
+    uni.navigateTo({
+        url: `/pages/ycnc/index`
+    })
+}
+
+const timerEvent = () => {
+    timer && clearInterval(timer)
+    uni.showLoading({
+        title: "加载中",
+        mask: true,
+    });
+    timer = setInterval(()=>{
+        queryEvent()
+    }, 2500)
+}
+
+const queryEvent = () => {
+    uni.hideLoading()
+    const params = {
+        order_id: unref(id),
+        order_no: unref(orderNo)
+    }
+    queryOrderState({ params }).then(res => {
+        const { state, voucher_link } = res
+        if([3].includes(state)){
+            if(voucher_link){
+                timer && clearInterval(timer)
+                window.location.replace(voucher_link)
+            }else{
+                timerEvent()
+            }
+        }else if([1,2].includes(state)){
+            timerEvent()
+        }else{
+            timer && clearInterval(timer)
+            getDetail()
+        }
+    })
+}
+
+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 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);
+    })
+}
+
+function pay(orderData) {
+    console.log(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 })
+}
+
+onMounted(() => {
+    //   getDetail()
+})
+
+const getDetail = () => {
+    const params = {
+        order_id: unref(id),
+        order_no: unref(orderNo)
+    }
+    pageType.value = 1
+    queryOrderDetail({ params }).then(res => {
+        Object.assign(orderDetail, res)
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+    background-color: #fafafa;
+}
+
+.wrapper {
+    width: 702rpx;
+    height: 486rpx;
+    background: #FFFFFF;
+    border-radius: 24rpx;
+    margin-top: 24rpx;
+    box-sizing: border-box;
+    padding: 32rpx 24rpx;
+
+    .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;
+            }
+        }
+    }
+
+    .order-info {
+        border-bottom: 1rpx solid #F0E1E1;
+
+        .info-item {
+            font-weight: 400;
+            font-size: 22rpx;
+            color: #6C6C6C;
+            margin-top: 24rpx;
+        }
+    }
+}
+
+.btns {
+    margin-top: 146rpx;
+    display: flex;
+
+    .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: #EA0000;
+        margin-right: 10rpx;
+    }
+
+    .back {
+        font-weight: 400;
+        font-size: 32rpx;
+        color: #B9C8C7;
+        border: 2rpx solid #B9C8C7;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/ycysp/pay.vue b/src/pages/ycysp/pay.vue
index 9c5efd8..d8f0196 100644
--- a/src/pages/ycysp/pay.vue
+++ b/src/pages/ycysp/pay.vue
@@ -1,13 +1,28 @@
+<route lang="json5" type="page">
+    {
+      style: {
+        navigationStyle: 'custom',
+        navigationBarTitleText: '支付确认',
+        navigationBarBackgroundColor:'#FFF',
+      },
+    }
+  </route>
+
 <template>
   <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"></view>
+            <view class="detail-img">
+                <image
+                    :src="_product.main_image"
+                    mode="scaleToFill"
+                />
+            </view>
             <view class="detail-other">
                 <view class="flex flex-justify-between name-info">
-                    <text>优酷VIP视频月卡</text>
-                    <text><text style="font-size:20rpx">￥</text>15元</text>
+                    <text>{{ _product.product_name }}</text>
+                    <text><text style="font-size:20rpx">￥</text>{{ _product.price}}元</text>
                 </view>
                 <view class="flex flex-justify-between count-info">
                     <text>数量</text>
@@ -15,17 +30,57 @@
                 </view>
             </view>
         </view>
+         <view class="line"></view>
         <view class="order-info">
-            <view class="order-item">充值账户：152****7226</view>
+            <view class="order-item">充值账户：{{ _account }}</view>
             <view class="order-item">充值类型：月卡</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;">￥{{ _product.price }}</text></view>
+            <view class="number-item">实际支付：¥{{ _product.sell_price }}</view>
         </view>
     </view>
-    <view class="pay-btn">立即支付</view>
+    <view class="pay-btn" @click="goPay">立即支付</view>
   </view>
 </template>
 
 <script setup>
-import { ref, reactive, unref, onMounted} from 'vue';
+import { onShow,onLoad} from '@dcloudio/uni-app';
+import { ref, reactive, unref, onMounted,computed} from 'vue';
+import {createOrder} from '@/api/ycysp';
+import usePay from './hooks/usePay';
+
+const _account = ref('')
+const _product = ref('')
+
+onLoad((options) => {
+    const {account,product} = options
+    _account.value = decodeURIComponent(account)
+    _product.value = JSON.parse(decodeURIComponent(product))
+})
+
+const discount = computed(() => {
+    if(!_product.value)return 0
+    return (Number(_product.value.price)*100 - Number(_product.value.sell_price)*100) / 100
+})
+
+const goPay = () => {
+    const params = {
+        account:unref(_account),
+        product_id:unref(_product).id
+    }
+    createOrder({params}).then(res => {
+        const {order_no,notify_url,sign,plain_text} = res;
+        const {payFunc} = usePay();
+        payFunc({order_no,notify_url,TranAmt:voucherAmount,MerName:config[brandFlag].name,sign,plain_text})
+    }).catch(err => {
+        console.error(err);
+    })
+}
+
+onMounted(() => {})
 
 </script>
 <style scoped lang="scss">
@@ -33,41 +88,50 @@ import { ref, reactive, unref, onMounted} from 'vue';
     width:100vw;
     height:100vh;
     opacity: 1;
-    background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
+    // 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: 374rpx;
+    height: 514rpx;
     border-radius: 24rpx;
     opacity: 1;
     background: #FFFFFF;
     box-sizing: border-box;
     padding:32rpx 24rpx;
 }
+.line{
+    width: 100%;
+    height: 1rpx;
+    background: #e1e1f0;
+    transform: scaleY(0.5);
+}
 .title-small{
     font-size: 28rpx;
     font-weight: normal;
     line-height: 32rpx;
-    letter-spacing: 0px;
+    letter-spacing: 0rpx;
     color: #333333;
 }
 .detail-info{
     padding:24rpx 0;
-    border-bottom:1rpx solid #E1E1F0;
 }
 .detail-img{
     width:92rpx;
     height:92rpx;
-    border:1px solid red;
     margin-right:30rpx;
+    image{
+        width:100%;
+        height:100%;
+    }
 }
 .detail-other{
     flex:1;
     font-weight:400;
     line-height: 32rpx;
-    letter-spacing: 0px;
+    letter-spacing: 0rpx;
     .name-info{
         font-size: 24rpx;
         color: #333333;
@@ -79,17 +143,35 @@ import { ref, reactive, unref, onMounted} from 'vue';
     }
 }
 .order-info{
-    border-bottom:1rpx solid #E1E1F0;
     padding-bottom:24rpx;
 }
 .order-item{
     font-size: 22rpx;
     font-weight: normal;
     line-height: 32rpx;
-    letter-spacing: 0px;
+    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;
diff --git a/src/static/ycysp/aiqiyi.webp b/src/static/ycysp/aiqiyi.webp
new file mode 100644
index 0000000..1ff131e
Binary files /dev/null and b/src/static/ycysp/aiqiyi.webp differ
diff --git a/src/static/ycysp/bilibili.webp b/src/static/ycysp/bilibili.webp
new file mode 100644
index 0000000..e270961
Binary files /dev/null and b/src/static/ycysp/bilibili.webp differ
diff --git a/src/static/ycysp/circle.svg b/src/static/ycysp/circle.svg
new file mode 100644
index 0000000..7cc4371
--- /dev/null
+++ b/src/static/ycysp/circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="13" height="13" viewBox="0 0 13 13"><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.199999988079071" ry="6.199999988079071" fill-opacity="0" stroke-opacity="1" stroke="#4A98FB" fill="none" stroke-width="0.6000000238418579"/></g></svg>
\ No newline at end of file
diff --git a/src/static/ycysp/cloud.webp b/src/static/ycysp/cloud.webp
index a944d8d..1a85187 100644
Binary files a/src/static/ycysp/cloud.webp and b/src/static/ycysp/cloud.webp differ
diff --git a/src/static/ycysp/coupon.webp b/src/static/ycysp/coupon.webp
new file mode 100644
index 0000000..526ce50
Binary files /dev/null and b/src/static/ycysp/coupon.webp differ
diff --git a/src/static/ycysp/gou.svg b/src/static/ycysp/gou.svg
new file mode 100644
index 0000000..3748820
--- /dev/null
+++ b/src/static/ycysp/gou.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="7" height="5" viewBox="0 0 7 5"><g><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="#4B99FB" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/static/ycysp/mgtv.webp b/src/static/ycysp/mgtv.webp
new file mode 100644
index 0000000..0a57cdc
Binary files /dev/null and b/src/static/ycysp/mgtv.webp differ
diff --git a/src/static/ycysp/qqyy.webp b/src/static/ycysp/qqyy.webp
new file mode 100644
index 0000000..4910179
Binary files /dev/null and b/src/static/ycysp/qqyy.webp differ
diff --git a/src/static/ycysp/txsp.webp b/src/static/ycysp/txsp.webp
new file mode 100644
index 0000000..937720f
Binary files /dev/null and b/src/static/ycysp/txsp.webp differ
diff --git a/src/static/ycysp/xmly.webp b/src/static/ycysp/xmly.webp
new file mode 100644
index 0000000..c7c9572
Binary files /dev/null and b/src/static/ycysp/xmly.webp differ
diff --git a/src/static/ycysp/yksp.webp b/src/static/ycysp/yksp.webp
new file mode 100644
index 0000000..ef8c6d5
Binary files /dev/null and b/src/static/ycysp/yksp.webp differ
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..948eed3
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,3 @@
+$price-color:#1F93DA;
+$sub-price-color:#659BEB;
+$text-color:#0e9bf2;
\ No newline at end of file
diff --git a/uni-pages.d.ts b/uni-pages.d.ts
index 45464f5..4420a27 100644
--- a/uni-pages.d.ts
+++ b/uni-pages.d.ts
@@ -4,9 +4,13 @@
 // Generated by vite-plugin-uni-pages
 
 interface NavigateToOptions {
-  url: "/pages/ycysp/coupon" |
+  url: "/pages/ycysp/home" |
+       "/pages/ycysp/order" |
+       "/pages/ycysp/orderDetail" |
        "/pages/ycysp/pay" |
+       "/pages/ycysp/component/coupon-item" |
        "/pages/ycysp/component/member" |
+       "/pages/ycysp/component/order-item" |
        "/pages/ycysp/component/recharge-item" |
        "/pages/ycysp/component/ticket-recieve";
 }
diff --git a/vite.config.js b/vite.config.js
index 2673ce5..b3f2d75 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,6 +7,7 @@ import dayjs from "dayjs";
 import vitePluginRemoveDir from './vite.plugin'; // 自己写的删除插件  
 
 import getPages from './custom.page'
+import { preprocessCSS } from 'vite'
 const {exclude} = getPages();
 const excludeStaticModule = exclude.filter(item => item.indexOf('.vue') === -1)
 
@@ -37,5 +38,13 @@ export default defineConfig(({ command, mode }) => {
     esbuild: {
       // drop: ["console", "debugger"], //打包去掉console,debugger
     },
+    //ycysp css变量配置
+    css:{
+      preprocessorOptions:{
+        scss:{
+          additionalData: `@use "src/styles/variables.scss" as *;`
+        }
+      }
+    }
   }
 })
\ No newline at end of file