更新个人中心页面

src/App.vue

@@ -59,7 +59,7 @@ export default {
 
 <style>
 @import './assets/global/font.css';
-@import '//at.alicdn.com/t/font_863923_qby3muwdoh.css';
+@import '//at.alicdn.com/t/font_863923_luoxdzztue.css';
 @import './assets/global/global.css';
 body,html{
   padding: 0px;

src/assets/css/newPersonalCenter/integral.css

@@ -115,17 +115,17 @@
 }
 
 /* 我的积分明细 */
-.integralDetail .integralDetail_row{
+.integralDetail .integralDetail_row,.exchange .integralDetail_row{
   background-color: white;
   padding: 13px 0;
   padding-left: 10px;
   display: flex;
   border-bottom: 1px solid #F2DADA;
 }
-.integralDetail .integralDetail_row ._drop{
+.integralDetail .integralDetail_row ._drop,.exchange .integralDetail_row ._drop{
   margin-right: 20px;
 }
-.integralDetail .integralDetail_row .el-date-editor{
+.integralDetail .integralDetail_row .el-date-editor,.exchange .integralDetail_row .el-date-editor{
   width: 120px !important;
 }
 .integralDetail .integralDetail_row .el-date-editor input{
@@ -145,4 +145,18 @@
 }
 .integralDetail .el-table--enable-row-hover .el-table__body tr:hover>td{
   background-color: #FFF0F0 !important;
+}
+/* exchange */
+.exchange .integralDetail_row ._drop{
+  min-width: 90px;
+}
+.exchange .list{
+  width: 100%;
+  background-color: white;
+  border:1px solid rgba(245,245,245,1);
+  padding: 20px;
+}
+.exchange .list li{
+  width: 220px;
+  position: relative;
 }
\ No newline at end of file

src/components/newPersonalCenter/integral/model/Coupon.vue

+<style scoped>
+._content_item{
+    display: flex;
+    flex-wrap: wrap;
+}
+._content_item ._item{
+    width: 220px;
+    position: relative;
+    transition: all linear .5s;
+    overflow: hidden;
+    margin: 5px 4px;
+}
+._content_item ._item:hover{
+    box-shadow: 0px 1px 13px 0px rgb(189, 189, 189);
+}
+._content_item ._top{
+    background-color: #F1BC69;
+}
+._content_item ._top ._time{
+    color: #A7711C;
+}
+._content_item ._top._blue{
+    background-color: #8794E2;
+}
+._content_item ._top._blue ._time{
+    color: #4C58A4;
+}
+._content_item div._top._gray{
+    background-color: #C3C3C3 !important;
+}
+._content_item div._top._gray ._overdue,._content_item div._top._gray ._info_bottom{
+    display: none
+}
+._content_item div._top._gray ._info_sale{
+    color: #FFFFFF !important;
+}
+._content_item div._top._gray ._time{
+    color: #777777 !important;
+}
+._top_raduis{
+    display: flex;
+    justify-content: space-between;
+}
+._top_raduis span{
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin: 3px;
+    border-radius: 50%;
+    background-color: white;
+    margin-top: -4px;
+}
+._item ._top ._overdue{
+    background-color: #B5E6A2;
+    color: #5CBA5E;
+    padding: 4px 6px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 12px;
+}
+._item ._top ._info_details{
+    padding: 15px 10px;
+}
+._item ._top ._info_details ._info_sale{
+    font-size: 30px;
+    color: white;
+}
+._item ._top ._info_details ._info_sale span{
+    font-size: 20px;
+    color: white;
+}
+._item ._top ._info_details ._info_full{
+    color: #FFFFFF;
+    font-size: 12px;
+    padding: 5px 0;
+}
+._item ._top ._info_details ._info_time{
+    font-size: 12px;
+}
+._item ._top ._info_details  ._info_bottom{
+    padding: 1px 5px;
+    color: #A7711C;
+    font-size: 12px;
+    position: absolute;
+    border: 1px solid #A7711C;
+    border-radius: 4px;
+    right: 13px;
+    top: 24px;
+    cursor: pointer;
+}
+._item ._bottom{
+    padding: 15px 10px;
+    background-color: #F9F9F9;
+}
+._item ._bottom p{
+    font-size: 12px;
+    color: #333333;
+    font-weight: bold;
+    margin-bottom: 13px;
+}
+._item ._bottom ._bottom_info{
+    color: #666666;
+    font-weight: 300;
+}
+._item ._bottom p._margin_bt0{
+    margin-bottom: 0 !important;
+}
+p._info_coupon_name{
+    font-size: 18px !important;
+    max-width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: white;
+}
+</style>
+<template>
+
+  <div class="_item">
+    <div class="_top" :class="{'_blue':item.couponsType===1,'_gray':item.couponEffectStatus===3,}">
+      <div class="_top_raduis">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <div class="_overdue" v-if="item.warning">兑换成功</div>
+      <div class="_info_details">
+        <p class="_info_coupon_name" :title="item.couponsName">{{item.couponsName}}</p>
+        <p class="_info_sale" v-if="item.couponsType !== 1">
+          {{item.denomination}}
+          <span>折</span>
+        </p>
+        <p class="_info_sale" v-else>
+          <span>￥</span>
+          {{item.denomination}}
+        </p>
+        <p class="_info_full">满{{item.useCondition}}可用</p>
+        <p class="_info_time _time">有效时间：{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}</p>
+        <p class="_info_bottom" @click="goUrl('heel',true)">去使用</p>
+      </div>
+    </div>
+    <div class="_bottom">
+      <p class="_bottom_tit">可用线路及系列</p>
+      <p class="_bottom_info">{{item.lineName === '' ? '不限' : item.lineName}}-{{item.lineTeamName === '' ? '不限' : item.lineTeamName}}</p>
+      <p class="_bottom_tit _margin_bt0">兑换时间: <span class="_bottom_info">{{item.duiTime}}</span></p>
+      <!-- <p class="_bottom_info _margin_bt0">{{item.accessType === 1 ? '抽奖活动' : '其他'}}</p> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  // props: ["item"],
+  data() {
+    return {
+      item: {
+        denomination: '250',
+        useCondition: 500,
+        lineName: '',
+        lineTeamName: '',
+        effectDate: '2019-5-7 11:04:42',
+        expirationDate: '2019-5-21 11:04:42',
+        warning: 1,
+        couponsName: '优惠券啊',
+        couponsType: 2,
+        couponEffectStatus: 2,
+        duiTime: '2019-5-1 11:04:42'
+      }
+    }
+  },
+  methods: {
+    goUrl(path) {
+      this.$router.push({ name: path });
+    }
+  },
+  mounted() {
+  }
+};
+</script>

src/components/newPersonalCenter/integral/model/exchange.vue

@@ -18,32 +18,104 @@
           </el-dropdown-menu>
         </el-dropdown>
       </div>
+      <div class="__cp _drop">
+        <el-dropdown trigger="click" @command="handleCommandOne">
+          <span class="el-dropdown-link">
+            {{Name2}}
+            <i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <template v-for="item in StatuList">
+              <el-dropdown-item :command="item">{{item.Name}}</el-dropdown-item>
+            </template>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div class="__cp _drop">
+        <el-dropdown trigger="click" @command="handleCommandOne">
+          <span class="el-dropdown-link">
+            {{Name3}}
+            <i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <template v-for="item in TimeList">
+              <el-dropdown-item :command="item">{{item.Name}}</el-dropdown-item>
+            </template>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
     </el-row>
+    <ul class="clearfix list">
+      <li class="_content_item">
+        <Coupon/>
+      </li>
+    </ul>
   </div>
 </template>
 <script>
+import Coupon from './Coupon'
+import Goods from './Goods'
 export default {
   components: {
-    
+    Coupon: Coupon,
+    Goods: Goods,
   },
   props:{},
   data(){
     return{
-      Name: '全部',
+      Name: '全部商品',
+      Name2: '所有状态',
+      Name3: '不限时间',
       TypeList: [
         {
           ID: -1,
-          Name: '全部'
+          Name: '全部商品'
         },
         {
           ID: 1,
-          Name: '收入'
+          Name: '实物'
         },
         {
           ID: 2,
-          Name: '支出'
+          Name: '电子/虚拟'
         },
       ],
+      StatuList: [
+        {
+          ID: -1,
+          Name: '所有状态'
+        },
+        {
+          ID: 1,
+          Name: '已兑换'
+        },
+        {
+          ID: 2,
+          Name: '未兑换'
+        },
+        {
+          ID: 3,
+          Name: '已发放'
+        },
+        {
+          ID: 3,
+          Name: '未发放'
+        },
+      ],
+      TimeList: [
+        {
+          ID: -1,
+          Name: '不限时间'
+        },
+        {
+          ID: 2,
+          Name: '昨天'
+        },
+        {
+          ID: 3,
+          Name: '前天'
+        },
+      ]
     }
   },
   mounted(){