优惠券

src/App.vue

@@ -58,6 +58,7 @@ onMounted(async () => {
 <style lang="scss">
 @import './assets/styles.css';
 body {
+  --arcoblue-11: 240, 241, 235;//#F0F1EB
   --arcoblue-10: 245, 246, 240;//#F5F6F0
   --arcoblue-9: 255, 151, 7;//#FF9707
   --arcoblue-8: 38, 54, 40;//#263628
@@ -97,6 +98,7 @@ body {
 }
 
 :root {
+  --customPrimary-11: #F0F1EB;
   --customPrimary-10: #F5F6F0;
   --customPrimary-9: #ff9707;
   --customPrimary-8: #263628;
@@ -117,6 +119,7 @@ body {
   --customColor-text-5: #4A664D;
   --customColor-text-4: #8EAD8E;
 }
+.customPrimary-11{color: var(--customPrimary-11);}
 .customPrimary-10{color: var(--customPrimary-10);}
 .customPrimary-9{color: var(--customPrimary-9);}
 .customPrimary-8{color: var(--customPrimary-8);}
@@ -128,6 +131,7 @@ body {
 .customPrimary-2{color: var(--customPrimary-2);}
 .customPrimary-1{color: var(--customPrimary-1);}
 
+.customPrimary-bg-11{background-color: var(--customPrimary-11);}
 .customPrimary-bg-10{background-color: var(--customPrimary-10);}
 .customPrimary-bg-9{background-color: var(--customPrimary-9);}
 .customPrimary-bg-8{background-color: var(--customPrimary-8);}

src/i18n/locales/zh-CN.ts

@@ -238,6 +238,11 @@ export default {
     city: '城市',
     placeholderCity: '请输入城市',
     default: '默认',
+    validPeriod: '有效期',
+    useCoupon: '去使用',
+    discount: '折',
+    noCoupon: '暂无优惠券',
+    noCollection: '暂无收藏',
   },
   // HTTP 错误状态码
   httpError: {  

src/i18n/locales/zh-TW.ts

@@ -121,6 +121,7 @@ export default {
     travelService: '旅行服務',
     food: '美食'
   },
+  // 邮箱验证
   emailValidation: {
     checking: '正在檢查郵箱...',
     available: '郵箱可用',

src/utils/couponTypeEnum.ts

 import i18n from '@/i18n'
-// 优惠券类型枚举
+// 优惠券状态枚举
 const CouponTypeEnum = Object.freeze({
     UNUSED: {
         value: 1,

src/views/personalCenter/components/LeftView.vue

@@ -170,4 +170,7 @@ getPersonalInfor()
     /* background-color: rgb(var(--arcoblue-7)); */
     color: rgb(var(--arcoblue-6));
 }
+:deep(.arco-badge-number){
+    box-shadow: 0 0 0 0px rgba(255, 151, 7, 0);
+}
 </style>
\ No newline at end of file

src/views/personalCenter/components/accountCenter/basicInfor.vue

@@ -322,7 +322,7 @@ const handleAreaCodeChange = (value: string) => {
   formData.phoneCode = `${value.indexOf('+')>-1?value:('+'+value)}`
 }
 
-const initPullDown = () =>{
+const initData = () =>{
   getUserDetail()
   getSimples()
 }
@@ -391,7 +391,7 @@ const getUserDetail = async () => {
   }
 }
 
-initPullDown()
+initData()
 </script>
 <style scoped lang="scss">
 :deep(.arco-form-item-content){

src/views/personalCenter/components/accountCenter/mailingAddressList.vue

@@ -232,7 +232,7 @@ const handleDivScroll = (e: any) => {
     }
 }
 
-const initPullDown = () =>{
+const initData = () =>{
   loadData()
   getSimples()
 }
@@ -357,7 +357,7 @@ const handleSubmit = async () => {
   }
 }
 
-initPullDown()
+initData()
 
 </script>
 <style scoped lang="scss">

src/views/personalCenter/components/accountCenter/passengerList.vue

@@ -262,7 +262,7 @@ const handleDivScroll = (e: any) => {
     }
 }
 
-const initPullDown = () =>{
+const initData = () =>{
   loadData()
   getSimples()
 }
@@ -385,7 +385,7 @@ const handleSubmit = async () => {
   }
 }
 
-initPullDown()
+initData()
 
 </script>
 <style scoped lang="scss">

src/views/personalCenter/myCoupon.vue

@@ -31,28 +31,79 @@
                     class="myOrder-status mr-[45px] py-[22px] cursor-pointer relative"
                     :class="[currentStatus==item.value?'active font-medium':'font-light',index?'ml-[45px]':null]"
                     @click="changeStatus(item.value)">
-                    {{ item.lable }}
+                    <span class="pr-[10px]">{{ item.lable }}</span>
+                    <template v-if="item.badge">({{ item.badge }})</template>
                     <div class="myOrder-status-border absolute left-0 bottom-0 w-full flex justify-center">
                         <div></div>
                     </div>
                 </div>
             </div>
             <a-divider class="!m-[0]"/>
-            <a-scrollbar class="max-h-[615px] overflow-auto"
+            <a-scrollbar class="flex max-h-[733px] overflow-auto mt-[23px]"
+            :class="[dataList.length==0&&!loading?'h-[733px] tems-center justify-center':'']"
                 @scroll="handleDivScroll"
                 ref="scrollContainer">
+                <div v-if="dataList.length" class="flex flex-wrap">
+                    <a-space wrap direction="horizontal" size="medium">
+                        <div class="myCouponItem w-[450px] h-[128px] 
+                        border-[1px] border-solid border-[#E5E5E5]
+                        rounded-[8px] flex items-center
+                        ml-[10px] mb-[10px]" v-for="(item,index) in dataList" :key="index">
+                            <div class="w-[181px] flex flex-col justify-center items-center">
+                                <div class="h-[16px] flex items-center justify-center customPrimary-6 mb-[10px]">
+                                    <div class="w-[4px]"><a-divider class="myCouponItemType" /></div>
+                                    <div class="text-base fontlight text-nowrap px-[5px]">门票</div>
+                                    <div class="w-[4px]"><a-divider class="myCouponItemType" /></div>
+                                </div>
+                                <div class="customPrimary-6">
+                                    <span class="text-base font-normal mr-[5px]">¥</span>
+                                    <span class="text-[2.875rem] font-bold">300</span>
+                                    <span class="text-base font-normal">{{ t('personal.discount') }}</span>
+                                </div>
+                            </div>
+                            <div class="h-full relative">
+                                <a-divider class="h-full myCouponItem-line" direction="vertical" type="dashed"></a-divider>
+                                <div class="myCouponItem-top absolute top-[-5px] left-[8px] w-[10px] h-[9px] rounded-full bg-[#FFFFFF]">
+                                    &nbsp;
+                                </div>
+                                <div class="myCouponItem-bottom absolute bottom-[-5px] left-[8px] w-[10px] h-[9px] rounded-full bg-[#FFFFFF]">
+                                    &nbsp;
+                                </div>
+                                <div class="absolute top-[-6px] left-[8px] bg-[#FFFFFF] w-[10px] h-[4px] z-[2]"></div>
+                                <div class="absolute bottom-[-8 px] left-[8px] bg-[#FFFFFF] w-[10px] h-[4px] z-[2]"></div>
+                            </div>
+                            <div class="flex-1 ml-[16px] mr-[28px] overflow-hidden">
+                                <div class="mb-[8px] truncate">
+                                    景点门票满200减30景点门票满200减30景点门票满200减30
+                                </div>
+                                <div class="text-xs customColor-text-6 truncate">
+                                    {{ t('personal.validPeriod') }}：2025-11-07{{t('personal.to')}}2025-12-07
+                                </div>
+                                <div class="mt-[10px]">
+                                    <a-button type="primary" size="small" class="min-w-[97px] !h-[32px] !rounded-[8px] !text-xs font-light">
+                                        {{ t('personal.useCoupon') }}
+                                    </a-button>
+                                </div>
+                            </div>
+                        </div>
+                    </a-space>
+                </div>
+                <div v-else-if="dataList.length==0&&!loading" class="flex flex-col items-center justify-center">
+                    <img class="w-[250px] h-[213px]" src="../../assets/images/personal/zwyhq.png" alt="" />
+                    <span class="text-base SourceHanSansCN mt-[15px]">{{ t('personal.noCoupon') }}</span>
+                </div>
             </a-scrollbar>
         </a-spin>
     </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref,reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/stores/user'
 import { useSystemConfigStore } from '@/stores/index'
-// 引入状态枚举
+import { Message } from '@arco-design/web-vue'
+import UserService from '@/services/UserService'
 import CouponTypeEnum from '@/utils/couponTypeEnum'
-// 引入产品类型枚举
 import ListProductTypeEnum from '@/utils/listProductType'
 
 
@@ -63,7 +114,6 @@ const systemConfigStore = useSystemConfigStore()
 const TitleBars = ref<{value: number, lable: string}[]>([])
 const currentStatus = ref(1)
 
-const loading = ref(false)
 // TitleBars.value.push({
 //     value: 0,
 //     lable: t('personal.orderStatus.ALL'),
@@ -71,6 +121,7 @@ const loading = ref(false)
 TitleBars.value.push({
     value: CouponTypeEnum.UNUSED.value,
     lable: CouponTypeEnum.UNUSED.desc,
+    badge: 18,
 })
 TitleBars.value.push({
     value: CouponTypeEnum.USED.value,
@@ -93,30 +144,60 @@ productTypeList.value.push({
     label: ListProductTypeEnum.SCENIC.desc,
 })
 
-const queryParams = ref<any>({
-    pageIndex: 1,
-    pageSize: 10,
+const queryParams = reactive({
+    SkipCount: 1,//跳过的记录数
+    MaxResultCount: 15,//最大结果数
     orderStatus: currentStatus.value,
 })
-
-
-
-const dataList = ref<any>([])
-const loding = ref(false)
-const noMoreData = ref(false)
+const noMoreData = ref(true)
 const scrollContainer = ref<any>(null)
 const scrollThreshold = 0 // 阈值，距离底部多少距离时触发加载
+const totalCount = ref(100)//总记录数
+const pageCount = ref(10)//总页数
+const dataList = ref<any[]>([])
+const loading = ref(true)
+
+
 
 const changeStatus = (key: number) => {
     currentStatus.value = key
 }
-const loadData = async () => {
 
+const initData = () =>{
+  loadData()
+}
+
+const resetQuery = () => {
+    queryParams.SkipCount = 1
+    queryParams.Name = ''
+    dataList.value = []
+    noMoreData.value = true
+    loadData()
+}
+
+const loadData = async () => {
+    loading.value = true
+    try{
+        // const response = await UserService.memberMailingAddress(systemConfig.tenantId,queryParams)
+        // if(response){
+        //     dataList.value = [...dataList.value,...(response.items || [])]
+        //     if(queryParams.SkipCount==1){
+        //         totalCount.value = response.totalCount || 0
+        //         pageCount.value = Math.ceil(totalCount.value/queryParams.MaxResultCount) || 0
+        //     }
+        //     noMoreData.value = pageCount.value >= queryParams.SkipCount
+        // }
+    } catch (error: any) {
+        console.error('加载失败:', error)
+        Message.error(error.message)
+    } finally {
+        loading.value = false
+    }
 }
 
 // 处理 div 滚动事件（核心修改）
 const handleDivScroll = (e: any) => {
-    if (loding.value || noMoreData.value) return;
+    if (loading.value || noMoreData.value) return;
     const container = e.target;
     if (!container) return;
     // 计算滚动位置（兼容不同浏览器）
@@ -124,13 +205,13 @@ const handleDivScroll = (e: any) => {
     const clientHeight = container.clientHeight;
     const scrollHeight = container.scrollHeight;
     // 触底条件：滚动距离 + 可见高度 ≥ 总高度 - 阈值
-    if (scrollTop + clientHeight >= scrollHeight - scrollThreshold) {
+    if (scrollTop + clientHeight >= scrollHeight - scrollThreshold&&queryParams.SkipCount<pageCount.value) {
         noMoreData.value = false
-        queryParams.value.pageIndex ++
+        queryParams.SkipCount ++
         loadData(); // 加载下一页
     }
 }
-
+initData()
 </script>
 <style scoped lang="scss">
 .myOrder-status:hover{
@@ -145,4 +226,28 @@ const handleDivScroll = (e: any) => {
 .myOrder-status.active{
     color: rbg(var(--gray-10));
 }
+.myCouponItem{
+    border-color: rgb(var(--arcoblue-4));
+    background: rgb(var(--arcoblue-11));
+}
+
+.myCouponItemType{
+    border-color: rgb(var(--arcoblue-6));
+}
+.myCouponItem-line{
+    border-color: rgb(var(--arcoblue-4));
+}
+.myCouponItem-top{
+    border-bottom: 1px solid rgb(var(--arcoblue-4));
+    border-left: 1px solid rgb(var(--arcoblue-4));
+    border-right: 1px solid rgb(var(--arcoblue-4));
+}
+.myCouponItem-bottom{
+    border-top: 1px solid rgb(var(--arcoblue-4));
+    border-left: 1px solid rgb(var(--arcoblue-4));
+    border-right: 1px solid rgb(var(--arcoblue-4));
+}
+:deep(.arco-scrollbar-track-direction-vertical){
+    display: none;
+}
 </style>
\ No newline at end of file