feat: 页面：我发布的列表详情

src/pages.json

@@ -102,6 +102,18 @@
       "style": {
         "navigationBarTitleText": "查看物流"
       }
+    },
+    {
+      "path": "pages/mine/myIssue/list",
+      "style": {
+        "navigationBarTitleText": "我发布的"
+      }
+    },
+    {
+      "path": "pages/mine/myIssue/detail",
+      "style": {
+        "navigationBarTitleText": "订单详情"
+      }
     },
     {
       "path": "pages/goods/list",

src/pages/mine/index.vue

@@ -31,10 +31,10 @@
         <view class="stats-container card">
           <view class="top">
             <view class="left">我发布的</view>
-            <view class="right">全部<text class="iconfont icon-jinru"></text></view>
+            <view class="right" @tap="$navPage(`/pages/mine/myIssue/list`)">全部<text class="iconfont icon-jinru"></text></view>
           </view>
           <view class="stats">
-            <view class="item" v-for="(item, index) in issueStats" :key="index">
+            <view class="item" v-for="(item, index) in issueStats" :key="index" @tap="$navPage(`/pages/mine/myIssue/list`)">
               <view class="icon">
                 <text class="iconfont" :class="item.icon"></text>
                 <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>

src/pages/mine/myBuy/list.vue

@@ -24,7 +24,7 @@
       </view>
     </template>
 
-    <view class="list-container">
+    <view class="common-order-list">
       <view class="item" @tap="$navPage(`/pages/mine/myBuy/detail`)">
         <view class="top">
           <image src="@/static/common/logo.png"></image>
@@ -44,7 +44,7 @@
         </view>
         <view class="total">订单总金额<text>¥1200.00</text></view>
         <view class="bottom">
-          <view class="left-location">天河区棠下</view>
+          <view class="left-location"><text class="iconfont icon-dingwei"></text>天河区棠下</view>
           <view class="right-btn">
             <u-button text="取消订单" shape="circle"></u-button>
           </view>
@@ -124,93 +124,5 @@
   background: #ffffff;
 }
 
-.list-container {
-  .item {
-    margin-top: 30rpx;
-    background: #ffffff;
-    padding: 20rpx 30rpx;
-    .top {
-      display: flex;
-      align-items: center;
-      image {
-        width: 88rpx;
-        height: 88rpx;
-        border-radius: 50%;
-        flex-shrink: 0;
-      }
-      .user {
-        margin-left: 20rpx;
-        flex: 1;
-        .name {
 
-        }
-        .time {
-          color: $sec-font;
-          font-size: 24rpx;
-          margin-top: 8rpx;
-        }
-      }
-      .status {
-        color: $assist-color;
-      }
-    }
-    .goods {
-      display: flex;
-      padding: 30rpx 0;
-      image {
-        width: 120rpx;
-        height: 120rpx;
-      }
-      .main {
-        flex: 1;
-        margin-left: 20rpx;
-        .name {
-          font-size: 32rpx;
-        }
-        .des {
-          margin-top: 12rpx;
-          font-size: 28rpx;
-          color: $reg-font;
-        }
-        .price {
-          margin-top: 12rpx;
-        	text {
-        		color: $assist-color;
-        		font-weight: 500;
-        		font-size: 32rpx;
-            margin-right: 12rpx;
-        	}
-        }
-      }
-    }
-    .total {
-      border-top: 1px solid #eaeaea;
-      height: 80rpx;
-      display: flex;
-      align-items: center;
-      justify-content: end;
-      font-size: 28rpx;
-      text {
-        margin-left: 12rpx;
-        color: $assist-color;
-      }
-    }
-    .bottom {
-      border-top: 1px solid #eaeaea;
-      padding-top: 20rpx;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .left-location {
-        font-size: 24rpx;
-        color: $sec-font;
-      }
-      .right-btn {
-        .u-button {
-          height: 60rpx;
-        }
-      }
-    }
-  }
-}
 </style>

src/pages/mine/myIssue/detail.vue

@@ -0,0 +1,175 @@
+<template>
+  <zj-page-layout
+  	:hasFooter="true"
+  	:isScroll="true"
+  	:refresherTriggered="refresherTriggered"
+  	@refresherrefresh="refresherrefresh">
+
+    <view class="address-container">
+      <view class="icon"><text class="iconfont icon-dingwei1"></text></view>
+      <view class="hasdata">
+        <view class="name">莫先生<text>13686123123</text></view>
+        <view class="address ellipsis-2">广东省广州市</view>
+      </view>
+    </view>
+
+    <view class="goods-container">
+      <view class="title">商品信息</view>
+      <view class="goods">
+        <image src="@/static/user/other_book.png"></image>
+        <view class="main">
+          <view class="name">商品名称</view>
+          <view class="des">商品描述</view>
+          <view class="price"><text>¥18.00</text>x2</view>
+        </view>
+      </view>
+      <view class="total">订单总金额<text>¥1200.00</text></view>
+    </view>
+
+    <view class="order-container">
+      <view class="title">订单信息</view>
+      <view class="row">订单编号：1234321232</view>
+      <view class="row">创建时间：1234321232</view>
+      <view class="row">付款时间：1234321232</view>
+      <view class="row">支付方式：1234321232</view>
+      <view class="row">支付单号：1234321232</view>
+      <view class="row">发货时间：1234321232</view>
+      <view class="row">收货时间：1234321232</view>
+    </view>
+
+    <template slot="footer">
+      <view class="bottom-container">
+        <u-button text="取消订单" shape="circle"></u-button>
+      </view>
+    </template>
+
+  </zj-page-layout>
+</template>
+
+<script>
+
+</script>
+
+<style lang="scss" scoped>
+.address-container {
+  background: #FFFFFF;
+  display: flex;
+  align-items: center;
+  height: 150rpx;
+  padding: 0 20rpx;
+  margin-top: 30rpx;
+  .icon {
+    width: 52rpx;
+    height: 52rpx;
+    border-radius: 50%;
+    background: $theme-color;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin-right: 20rpx;
+    .iconfont {
+      font-size: 36rpx;
+      color: #ffffff;
+    }
+  }
+  .hasdata {
+    .name {
+      font-size: 32rpx;
+      color: #333333;
+      text {
+        color: #999999;
+        font-size: 28rpx;
+        margin-left: 16rpx;
+      }
+    }
+    .address {
+      font-size: 28rpx;
+      color: #666666;
+      line-height: 34rpx;
+      margin-top: 10rpx;
+    }
+  }
+}
+
+.goods-container {
+  background: #ffffff;
+  margin-top: 30rpx;
+  padding: 30rpx 30rpx 0;
+  .title {
+    font-weight: 500;
+  }
+  .goods {
+    display: flex;
+    padding: 30rpx 0;
+    image {
+      width: 120rpx;
+      height: 120rpx;
+    }
+    .main {
+      flex: 1;
+      margin-left: 20rpx;
+      .name {
+        font-size: 32rpx;
+      }
+      .des {
+        margin-top: 12rpx;
+        font-size: 28rpx;
+        color: $reg-font;
+      }
+      .price {
+        margin-top: 12rpx;
+      	text {
+      		color: $assist-color;
+      		font-weight: 500;
+      		font-size: 32rpx;
+          margin-right: 12rpx;
+      	}
+      }
+    }
+  }
+  .total {
+    border-top: 1px solid #eaeaea;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    font-size: 28rpx;
+    text {
+      margin-left: 12rpx;
+      color: $assist-color;
+    }
+  }
+}
+
+.order-container {
+  background: #ffffff;
+  margin-top: 30rpx;
+  padding: 30rpx;
+  .title {
+    font-weight: 500;
+    margin-bottom: 20rpx;
+  }
+  .row {
+    margin-top: 12rpx;
+    font-size: 28rpx;
+    text {
+      color: $assist-color;
+    }
+  }
+}
+
+.bottom-container {
+  padding: 20rpx 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  .u-button {
+    width: auto;
+    height: 60rpx;
+    margin: 0;
+    margin-left: 20rpx;
+  }
+}
+
+</style>

src/pages/mine/myIssue/list.vue

@@ -0,0 +1,125 @@
+<template>
+  <zj-page-layout
+  	:hasFooter="false"
+  	:isScroll="true"
+  	:refresherTriggered="refresherTriggered"
+  	@refresherrefresh="refresherrefresh"
+  	@scrolltolower="scrolltolower">
+    <template slot="header">
+      <view class="header-container">
+        <u-tabs
+        	:scrollable="false"
+        	:list="tabList"
+        	:current="curTab"
+        	@click="changeTab"
+        	lineColor="#01C30B"
+        	:activeStyle="{
+        		color: '#01C30B'
+        	}"
+        	:inactiveStyle="{
+        		color: '#666666'
+        	}"
+        	itemStyle="padding-left: 0; padding-right: 0; height: 88rpx;">
+        </u-tabs>
+      </view>
+    </template>
+
+    <view class="common-order-list">
+      <view class="item" @tap="$navPage(`/pages/mine/myBuy/detail`)">
+        <view class="top">
+          <image src="@/static/common/logo.png"></image>
+          <view class="user">
+            <view class="name">李海</view>
+            <view class="time">21小时前发布</view>
+          </view>
+          <view class="status">待付款</view>
+        </view>
+        <view class="goods">
+          <image src="@/static/user/other_book.png"></image>
+          <view class="main">
+            <view class="name">商品名称</view>
+            <view class="des">商品描述</view>
+            <view class="price"><text>¥18.00</text>x2</view>
+          </view>
+        </view>
+        <view class="total">订单总金额<text>¥1200.00</text></view>
+        <view class="bottom">
+          <view class="left-location"><text class="iconfont icon-dingwei"></text>天河区棠下</view>
+          <view class="right-btn">
+            <u-button text="取消订单" shape="circle"></u-button>
+          </view>
+        </view>
+      </view>
+    </view>
+
+  </zj-page-layout>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        imgUrl: this.$imageUrl,
+        tabList: [
+          {name: '我发布的', value: 1},
+          {name: '已卖出', value: 2},
+          {name: '已下架', value: 3},
+        ],
+        curTab: 0,
+        dataList: [],
+        pageNum: 1,
+        refresherTriggered: false,
+      }
+    },
+
+    async onLoad() {
+      // await this.getList()
+    },
+
+    methods: {
+      //获取列表数据
+      async getList() {
+        this.$api.post('/xxx/xxxlist', {
+          pageNum: this.pageNum,
+          pageSize: 10,
+        }).then(res => {
+          this.loadStatus = 0;
+          let list = res.data.records;
+          if(list.length < 10){
+          	this.loadStatus = 2;
+          }
+          this.dataList = this.dataList.concat(list);
+        }).catch(() => {
+					this.loadStatus = 2;
+				}).finally(res => {
+					this.refresherTriggered = false;
+				})
+      },
+
+      // 滚动到底部
+      scrolltolower(e) {
+      	if (this.loadStatus === 0) {
+      		this.pageNum++;
+      		this.getList();
+      	}
+      },
+
+      // 触发下拉刷新
+      refresherrefresh(e) {
+      	this.refresherTriggered = true;
+      	this.dataList = [];
+      	this.pageNum = 1;
+      	this.getList();
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.header-container {
+  background: #ffffff;
+}
+
+
+</style>

src/styles/common.scss

@@ -98,8 +98,13 @@
           align-items: center;
           margin-left: 16rpx;
           .iconfont {
-            font-size: 28rpx;
+            font-size: 24rpx;
             color: $sec-font;
+            display: flex;
+            align-items: center;
+            .iconfont {
+              margin-right: 4rpx;
+            }
           }
           .text {
             font-size: 24rpx;
@@ -111,3 +116,100 @@
     }
   }
 }
+
+.common-order-list {
+  .item {
+    margin-top: 30rpx;
+    background: #ffffff;
+    padding: 20rpx 30rpx;
+    .top {
+      display: flex;
+      image {
+        width: 88rpx;
+        height: 88rpx;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      .user {
+        margin-left: 20rpx;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .name {
+
+        }
+        .time {
+          color: $sec-font;
+          font-size: 24rpx;
+          margin-top: 8rpx;
+        }
+      }
+      .status {
+        color: $assist-color;
+      }
+    }
+    .goods {
+      display: flex;
+      padding: 30rpx 0;
+      image {
+        width: 120rpx;
+        height: 120rpx;
+      }
+      .main {
+        flex: 1;
+        margin-left: 20rpx;
+        .name {
+          font-size: 32rpx;
+        }
+        .des {
+          margin-top: 12rpx;
+          font-size: 28rpx;
+          color: $reg-font;
+        }
+        .price {
+          margin-top: 12rpx;
+        	text {
+        		color: $assist-color;
+        		font-weight: 500;
+        		font-size: 32rpx;
+            margin-right: 12rpx;
+        	}
+        }
+      }
+    }
+    .total {
+      border-top: 1px solid #eaeaea;
+      height: 80rpx;
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      font-size: 28rpx;
+      text {
+        margin-left: 12rpx;
+        color: $assist-color;
+      }
+    }
+    .bottom {
+      border-top: 1px solid #eaeaea;
+      padding-top: 20rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .left-location {
+        font-size: 24rpx;
+        color: $sec-font;
+        display: flex;
+        align-items: center;
+        .iconfont {
+          margin-right: 4rpx;
+        }
+      }
+      .right-btn {
+        .u-button {
+          height: 60rpx;
+        }
+      }
+    }
+  }
+}