个人中心页功能开发

src/App.vue

@@ -10,7 +10,7 @@ export default {
 };
 </script>
 <style>
-@import url("//at.alicdn.com/t/c/font_1890699_sm7qminrp2.css");
+@import url("//at.alicdn.com/t/c/font_1890699_yrr2mh5n7ln.css");
 @font-face {
   font-family: "oswald";
   src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");

src/css/app.scss

@@ -141,4 +141,7 @@
     color: #2D90FF;
     margin:0 20px;
     cursor: pointer;
+}
+.border-b {
+    border-bottom: 1px solid #eee;
 }
\ No newline at end of file

src/pages/usercenter/components/navs.vue

@@ -12,11 +12,10 @@
   display: block;
 }
 .nav-item {
-  margin: 10px 20px;
+  margin: 10px 28px;
   padding: 10px;
 }
 .select {
-  width: 184px;
 height: 41px;
 background: #F43849;
 border-radius: 8px;

src/pages/usercenter/coupon.vue

@@ -142,6 +142,7 @@
             <div class="flex flex-center q-mt-lg">
               <q-btn :disable="CouponTimeStatus !== 1"
                 color="primary"
+                @click="useCoupon(item)"
                 unelevated
                 outline
                 label="立即使用"
@@ -208,6 +209,15 @@ export default {
     this.getCouponList();
   },
   methods: {
+    useCoupon(coupon) {
+      console.log('useCoupon', coupon)
+      const id = coupon.couponsType - 1
+      if(id) {
+      this.CommonJump('/search', {categoryId: id})
+      } else {
+      this.CommonJump('/index')
+      }
+    },
     pageChange(value) {
       this.current = value;
       this.getCouponList();

src/pages/usercenter/order.vue

@@ -13,9 +13,9 @@
 }
 .card {
   margin: 10px;
-background: #FFFFFF;
-border: 1px solid #EEEEEE;
-border-radius: 8px;
+  background: #ffffff;
+  border: 1px solid #eeeeee;
+  border-radius: 8px;
 }
 .card-title {
   height: 37px;
@@ -49,19 +49,27 @@ border-radius: 8px;
   margin-left: 100px;
 }
 .name {
-  width: 300px;
   padding: 10px;
+  max-width: 400px;
 }
 .user-name {
+  padding-top: 10px;
+  border-left: 1px solid #eee;
   width: 120px;
 }
 .pay-info {
+  padding-top: 10px;
+  border-left: 1px solid #eee;
   width: 120px;
 }
 .order-info {
+  padding-top: 10px;
+  border-left: 1px solid #eee;
   width: 120px;
 }
 .order-action {
+  padding-top: 10px;
+  border-left: 1px solid #eee;
   width: 120px;
 }
 .nav-item {
@@ -76,124 +84,153 @@ border-radius: 8px;
   background-color: $primary;
   margin: -8px auto 0 auto;
 }
+.product-img {
+  width: 64px;
+  height: 64px;
+}
 </style>
 <template>
   <div class="content q-ma-lg bg-white">
     <div class="flex justify-between">
       <div>
         <q-input
-          ref="lastName"
           class="form-item"
-          placeholder="名字（需與旅遊證件一致）"
-          v-model="form.lastName"
+          placeholder="輸入商品名稱/訂單號"
+          v-model="GoodsName"
+          clearable
           outlined
-          :rules="[(val) => val !== '' || '请输入名字']"
         ></q-input>
       </div>
     </div>
-      <div class="tips flex">
-        <div
-          @click="changeCouponType(item)"
-          class="nav-item cursor-pointer"
-          v-for="item in ['全部', '待付款', '待出行', '已完成', '已取消']"
-          :key="item"
-        >
-          {{ item }}
-          <div :class="orderStatus === item ? 'border-bottom' : ''"></div>
-        </div>
+    <div class="tips flex">
+      <div
+        @click="changeOrderType(item)"
+        class="nav-item cursor-pointer"
+        v-for="item in orderEnums"
+        :key="item.ID"
+      >
+        {{ item.Name }}
+        <div :class="orderStatus === item.ID ? 'border-bottom' : ''"></div>
       </div>
+    </div>
     <div>
       <div class="card" v-for="item in orderList" :key="item.id">
         <div class="flex card-title justify-between">
           <div class="flex">
-            <span>订单号:{{item.orderNo}}</span>
-            <span class="phone">联系客服</span>
+            <span><span class="text-grey-6">订单号:</span>{{ item.orderNo }}</span>
+            <span class="phone text-grey-6">
+              <i class="iconfont iconmessage"></i>
+              联系客服
+            </span>
           </div>
-          <span>{{item.createTimeStr}}</span>
+          <span class="text-grey-6">{{ item.createTimeStr }}</span>
         </div>
-        <div class="flex q-py-sm">
-          <img :src="item.goodsPic" />
-          <div class="name">
-            <div>{{item.goodsName}}</div>
-            <div>xl</div>
+        <div class="flex justify-between">
+          <div class="name flex no-wrap">
+            <img class="product-img mr" :src="item.goodsPic" />
+            <div style="max-width: 300px">
+            <div class="ellipsis-2">{{ item.goodsName }}</div>
+            <div>x1</div>
+            </div>
           </div>
-          <div class="user-name">{{item.surName}}{{item.name}}</div>
-          <div class="pay-info">
-            <div>CNY{{item.totalPrice}}</div>
-            <div>{{item.payType}}</div>
-          </div>
-          <div class="order-info">
-            <div>等待收貨</div>
-            <div>订单详情</div>
-          </div>
-          <div class="order-action">
-            <div>确认收货</div>
-            <div>取消订单</div>
-            <div>查看發票</div>
+          <div class="flex">
+            <div class="user-name text-center">
+              <i class="iconfont iconpeople1"></i>{{ item.surName
+              }} {{ item.name }}
+            </div>
+            <div class="pay-info text-center">
+              <div class="  text-grey-6">CNY{{ item.totalPrice }}</div>
+              <div>{{ item.payTypeStr }}</div>
+            </div>
+            <div class="order-info text-center">
+              <div class="primary">{{item.orderStatusStr}}</div>
+              <div class="q-mt-sm cursor-pointer">订单详情</div>
+            </div>
+            <div class="order-action text-center">
+              <q-btn 
+                color="primary"
+                @click="cancalOrder(item)"
+                unelevated
+                outline
+                size="sm"
+                label="取消订单">
+                </q-btn>
+              <div>查看發票</div>
+            </div>
           </div>
         </div>
       </div>
+      <noneData v-show="!orderList.length"></noneData>
     </div>
   </div>
 </template>
 
 <script>
-import noneData from '../../components/noneData.vue'
+import noneData from "../../components/noneData.vue";
 export default {
   components: {
-    noneData
+    noneData,
   },
   data() {
     return {
-      form: {},
+      orderEnums: [],
+      GoodsName: '',
       orderList: [],
       current: 1,
       pageCount: 0,
-      couponsType: 1, // 优惠券类型 1：抵用券，2：折扣卷
-      orderStatus: 1, // 优惠券状态（b2b）1-可使用，2-已使用，3-已过期
-      CouponsUseScope: 1, // 平台1:全场通用,2:团队,3:签证,4:机票,5:门票,6:车辆,7:自由行,8:当地游
-      useScopeMap: {
-        1: "全场通用",
-        2: "团队",
-        3: "签证",
-        4: "机票",
-        5: "门票",
-        6: "车辆",
-        7: "自由行",
-        8: "当地游",
-      },
-      statusMap: [{key: 1, label: "可使用", },{key: 2, label: "已使用",},{key: 3, label: "已过期"}],
-      colorMap: {
-        1: "bg-blue",
-        2: "bg-blue",
-        3: "bg-red",
-        4: "bg-yellow",
-        5: "bg-green",
-        6: "bg-green",
-        7: "bg-red",
-        8: "bg-yellow",
-      }
+      orderStatus: "",
     };
   },
   mounted() {
+    this.getOrderEnums();
     this.getOrderList();
   },
   methods: {
+    cancalOrder() {},
     pageChange(value) {
       this.current = value;
       this.getOrderList();
     },
-    changeCouponType(item) {
-      this.orderStatus = item.key;
-      this.current = 1
-      this.pageCount = 0
-      this.orderList = []
-      this.getOrderList()
+    changeOrderType(item) {
+      if (this.orderStatus === item.ID) {
+        this.orderStatus = "";
+      } else {
+        this.orderStatus = item.ID;
+      }
+      this.current = 1;
+      this.pageCount = 0;
+      this.orderList = [];
+      this.getOrderList();
+    },
+    getOrderEnums() {
+      this.apipost(
+        "GetDirectOrderStatusEnum_post",
+        {},
+        (res) => {
+          if (res.data.resultCode == 1) {
+            this.orderEnums = res.data.data;
+          } else {
+            // this.$notify(res.data.message);
+            this.$q.notify({
+              type: "negative",
+              message: res.data.message,
+              position: "top",
+              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+            });
+          }
+        },
+        null
+      );
     },
     getOrderList() {
       this.apipost(
         "GetMyDirectOrderPageList_post",
-        { pageIndex: this.current, pageSize: 10, orderStatus: this.orderStatus },
+        {
+          pageIndex: this.current,
+          pageSize: 10,
+          orderStatus: this.orderStatus,
+          GoodsName: this.GoodsName,
+        },
         (res) => {
           if (res.data.resultCode == 1) {
             const { count, pageData, pageCount } = res.data.data;