{"version":3,"file":"coupon.73353b55.mjs","sources":["../../../../pages/account/coupon.vue"],"sourcesContent":["<template>\n    <NuxtLayout name=\"account\">\n      <div class=\"page-account-coupon\">\n        <el-tabs v-model=\"couponType\" class=\"demo-tabs\" @tab-click=\"handleClick\">\n          <el-tab-pane\n            v-for=\"(item, index) in data.tabsList\"\n            :key=\"index\"\n            :label=\"item.name\"\n            :name=\"item.type\"\n          ></el-tab-pane>\n        </el-tabs>\n        <div class=\"list\">\n          <div class=\"item\" v-for=\"(item, index) in data.list\" :key=\"index\">\n            <div class=\"head_top\">\n              <div class=\"lf\">\n                <div class=\"name\">{{ item.name }}</div>\n                <div class=\"cgray time\">有效期：{{ item.time }}</div>\n              </div>\n              <div class=\"price\">\n                ￥<span>{{ item.price }}</span>\n              </div>\n            </div>\n            <div class=\"bottom\">\n              <span class=\"cgray\">{{ item.desc }}</span>\n              <NuxtLink v-if=\"item.type === 1\" to=\"\"\n                >去使用 <el-icon><arrow-right /></el-icon\n              ></NuxtLink>\n            </div>\n          </div>\n        </div>\n        <client-only>\n          <el-pagination\n            class=\"pagination\"\n            v-model:currentPage=\"data.current\"\n            layout=\"total, prev, pager, next, jumper\"\n            :total=\"data.totalCount\"\n            @current-change=\"handleCurrentChange\"\n          >\n          </el-pagination>\n        </client-only>\n      </div>\n    </NuxtLayout>\n</template>\n\n<script setup>\nimport { ArrowRight } from \"@element-plus/icons-vue\";\nimport {} from \"~/api/user\";\nuseHead({\n  title:'我的优惠券'\n});\n\nconst router = useRouter();\n\nconst couponType = ref(\"1\");\nconst data = reactive({\n  tabsList: [\n    {\n      name: \"未使用\",\n      type: \"1\",\n    },\n    {\n      name: \"已失效\",\n      type: \"2\",\n    },\n  ],\n  list: [\n    {\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 1,\n    },\n    {\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 2,\n    },{\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 1,\n    },\n    {\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 2,\n    },{\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 1,\n    },\n    {\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 2,\n    },{\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 1,\n    },\n    {\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 2,\n    },{\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 1,\n    },\n    {\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 2,\n    },{\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 1,\n    },\n    {\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 2,\n    },{\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 1,\n    },\n    {\n      name: \"优惠券名称优惠券名称\",\n      time: \"2022-01-20 ~ 2022-05-20\",\n      desc: \"指定课程满999.0元减100.0元\",\n      price: \"100\",\n      type: 2,\n    }\n  ],\n  pages: 0,\n  current: 1,\n  totalCount: 0,\n});\n\nonMounted(() => {\n  getData();\n});\n\nconst handleClick = (tab, event) => {\n  getData();\n};\n\nconst toCourse = (courseId) => {\n  router.push(\"/course/detail?id=\" + courseId);\n};\n\nconst handleCurrentChange = (val) => {\n  getData(val);\n};\n\nconst getData = (page = 1) => {\n  // userCoursePage({\n  //   couponType: couponType.value,\n  //   pageCurrent: page,\n  //   pageSize: 10,\n  // }).then((res) => {\n  //   if (res) {\n  //     data.list = res.list;\n  //     data.pages = res.totalPage;\n  //     data.current = res.pageCurrent;\n  //     data.totalCount = res.totalCount;\n  //   }\n  // });\n};\n</script>\n\n<style lang=\"scss\">\n.page-account-coupon {\n  .el-tabs__header {\n    margin: 0;\n  }\n  .el-tabs__nav-wrap {\n    padding: 0 30px;\n  }\n  .el-tabs__nav {\n    padding: 10px 0;\n  }\n}\n</style>\n<style lang=\"scss\" scoped>\n.list {\n  padding: 0 30px;\n  display: flex;\n  flex-wrap: wrap;\n  .item {\n    width: 48%;\n    height: 123px;\n    margin-top: 30px;\n    padding: 12px;\n    border-bottom: 1px solid #f5f6fa;\n    background: url(\"@/assets/images/coupon_bg.png\") no-repeat;\n    background-size: 100% 100%;\n    color: #333;\n    .head_top {\n      display: flex;\n      justify-content: space-between;\n      .name {\n        width: 210px;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n        font-size: 16px;\n        margin-bottom: 5px;\n      }\n      .time {\n        font-size: 12px;\n      }\n      .price {\n        display: flex;\n        align-items: center;\n        color: #2256f6;\n        span {\n          font-weight: 700;\n          font-size: 34px;\n          position: relative;\n          top: -10px;\n        }\n      }\n    }\n    .bottom {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-top: 28px;\n      a {\n        display: flex;\n        align-items: center;\n      }\n    }\n    &:nth-child(odd) {\n      margin-right: 4%;\n    }\n  }\n}\n.cgray {\n  color: #999;\n}\n.cred {\n  color: #f61818;\n}\n</style>\n"],"names":["useHead","title","useRouter","couponType","ref","data","reactive","tabsList","name","type","list","time","desc","price","pages","current","totalCount","onMounted","handleClick","tab","event","handleCurrentChange","val","getData","page"],"mappings":"odA+CAA,EAAA,CACAC,MAAA,UAGAC,IAEA,MAAAC,EAAAC,EAAA,KACAC,EAAAC,EAAA,CACAC,SAAA,CACA,CACAC,KAAA,MACAC,KAAA,KAEA,CACAD,KAAA,MACAC,KAAA,MAGAC,KAAA,CACA,CACAF,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GAEA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GACA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GAEA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GACA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GAEA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GACA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GAEA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GACA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GAEA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GACA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GAEA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GACA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,GAEA,CACAD,KAAA,aACAG,KAAA,0BACAC,KAAA,qBACAC,MAAA,MACAJ,KAAA,IAGAK,MAAA,EACAC,QAAA,EACAC,WAAA,IAGAC,GAAA,YAIA,MAAAC,EAAA,CAAAC,EAAAC,KAAA,EAQAC,EAAAC,IAAA,EAIAC,EAAA,CAAAC,EAAA,KAAA"}