feat: 静态页面：首页、商品列表、商品详情、确认订单

src/components/zj-container/zj-page-layout.vue

@@ -2,7 +2,7 @@
 	<view
 		class="app-container"
 		:class="hasFooter || isTabbar ? '':'pb'"
-		:style="{background: bgColor, height: 'calc(100vh - ' + (isTabbar ? '94' : '44') + 'px)'}">
+		:style="{background: bgColor, height: 'calc(100vh - ' + (isTabbar ? '50' : '44') + 'px)'}">
 		<u-loading-page
 			loading-text="家盛茂工程师"
 			color="#333333"

src/pages.json

@@ -18,6 +18,7 @@
     {
       "path": "pages/index/index",
       "style": {
+        "navigationStyle": "custom",
         "navigationBarTitleText": "首页"
       }
     },
@@ -59,6 +60,24 @@
       "style": {
         "navigationBarTitleText": "我的收益"
       }
+    },
+    {
+      "path": "pages/goods/list",
+      "style": {
+        "navigationBarTitleText": "商品列表"
+      }
+    },
+    {
+      "path": "pages/goods/detail",
+      "style": {
+        "navigationBarTitleText": "商品详情"
+      }
+    },
+    {
+      "path": "pages/goods/order",
+      "style": {
+        "navigationBarTitleText": "确认订单"
+      }
     }
 
   ],
@@ -79,7 +98,7 @@
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "uni-app",
     "navigationBarBackgroundColor": "#fff",
-    "backgroundColor": "#F8F8F8",
+    "backgroundColor": "#f4f2f2",
     "onReachBottomDistance": 100
   },
   "tabBar": {

src/pages/goods/detail.vue

@@ -0,0 +1,182 @@
+<template>
+  <zj-page-layout
+  	:hasFooter="false"
+  	:isScroll="true"
+  	:refresherTriggered="refresherTriggered"
+  	@refresherrefresh="refresherrefresh">
+    <view class="top-container">
+      <view class="user">
+        <image src="@/static/common/logo.png"></image>
+        <view class="info">
+          <view class="name">张三</view>
+          <view class="phone">联系电话：138****2233</view>
+        </view>
+      </view>
+      <view class="btns">
+        <u-button type="warning" text="分享好友" class="share"></u-button>
+        <u-button type="error" text="立即联系" class="contact"></u-button>
+        <u-button type="primary" text="立即购买" class="buy" @tap="$navPage(`/pages/goods/order`)"></u-button>
+      </view>
+    </view>
+
+    <view class="info-container">
+      <view class="title">
+        <view class="tit">商品名称</view>
+        <view class="price">¥1234.00</view>
+      </view>
+      <view class="des">商品描述商品描述商品描述商品描述商品描述</view>
+      <view class="tags">
+        <view class="it">格力</view>
+        <view class="it">7200w</view>
+        <view class="it">一级能效</view>
+      </view>
+      <view class="info">
+        <view class="left">
+          <text>23小时前发布</text>
+          <text>20人浏览</text>
+        </view>
+        <view class="right">库存10</view>
+      </view>
+      <view class="bottom">
+        <view class="left-location">天河区棠下</view>
+        <view class="right-stats">
+          <view class="it">
+            <text class="iconfont icon-dianzan"></text>
+            <text class="text">点赞</text>
+          </view>
+          <view class="it">
+            <text class="iconfont icon-pinglun"></text>
+            <text class="text">收藏</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+  </zj-page-layout>
+</template>
+
+<script>
+
+</script>
+
+<style lang="scss" scoped>
+.top-container {
+  background: #ffffff;
+  margin-top: 30rpx;
+  padding: 30rpx;
+  .user {
+    display: flex;
+    align-items: center;
+    image {
+      width: 88rpx;
+      height: 88rpx;
+      border-radius: 50%;
+    }
+    .info {
+      margin-left: 12rpx;
+      .name {
+        font-size: 28rpx;
+      }
+      .phone {
+        font-size: 28rpx;
+        margin-top: 12rpx;
+      }
+    }
+  }
+  .btns {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 30rpx;
+    ::v-deep .u-button {
+      width: 188rpx;
+      height: 68rpx;
+      line-height: 68rpx;
+      font-size: 28rpx;
+      color: #ffffff;
+      margin: 0;
+    }
+    .share {
+
+    }
+  }
+}
+
+.info-container {
+  background: #ffffff;
+  padding: 30rpx;
+  margin-top: 30rpx;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    .tit {
+      font-size: 32rpx;
+    }
+    .price {
+      font-size: 28rpx;
+      color: $assist-color;
+    }
+  }
+  .des {
+    margin-top: 12rpx;
+    font-size: 28rpx;
+    color: $reg-font;
+  }
+  .tags {
+    margin-top: 12rpx;
+    display: flex;
+    .it {
+      background: #f1f1f1;
+      font-size: 20rpx;
+      margin-right: 20rpx;
+      padding: 8rpx 12rpx;
+      border-radius: 8rpx;
+    }
+  }
+  .info {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20rpx;
+    .left {
+      text {
+        font-size: 24rpx;
+        color: $sec-font;
+        margin-right: 20rpx;
+      }
+    }
+    .right {
+      font-size: 24rpx;
+      color: $sec-font;
+    }
+  }
+  .bottom {
+    border-top: 1px solid #eaeaea;
+    margin-top: 20rpx;
+    padding-top: 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .left-location {
+      font-size: 24rpx;
+      color: $sec-font;
+    }
+    .right-stats {
+      display: flex;
+      align-items: center;
+      .it {
+        display: flex;
+        align-items: center;
+        margin-left: 16rpx;
+        .iconfont {
+          font-size: 28rpx;
+          color: $sec-font;
+        }
+        .text {
+          font-size: 24rpx;
+          margin-left: 4rpx;
+          color: $sec-font;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/goods/list.vue

@@ -0,0 +1,152 @@
+<template>
+  <zj-page-layout
+  	:hasFooter="false"
+  	:isScroll="true"
+  	:refresherTriggered="refresherTriggered"
+  	@refresherrefresh="refresherrefresh"
+  	@scrolltolower="scrolltolower">
+    <template slot="header">
+      <view class="header-container">
+        <u-tabs
+          :list="categoryList"
+          @click="click"
+          :scrollable="false"
+          lineColor="#01C30B">
+        </u-tabs>
+        <u-search
+          placeholder="输入商品名称搜索"
+          :showAction="false"
+          clearabled
+          v-model="keyword">
+        </u-search>
+        <u-tabs
+          :list="tabList"
+          @click="click"
+          :scrollable="false"
+          lineColor="#01C30B">
+        </u-tabs>
+      </view>
+    </template>
+
+    <view class="common-goods-list">
+      <view class="item" @tap="$navPage(`/pages/goods/detail`)">
+        <view class="top">
+          <image src="@/static/common/logo.png"></image>
+          <view class="user">
+            <view class="name">张三</view>
+            <view class="time">23小时前发布</view>
+          </view>
+          <view class="price">¥1888.00</view>
+        </view>
+        <view class="title">商品名称</view>
+        <view class="des">商品描述</view>
+        <view class="imgs">
+          <image src="@/static/user/other_speech.png"></image>
+          <image src="@/static/user/other_speech.png"></image>
+          <image src="@/static/user/other_speech.png"></image>
+        </view>
+        <view class="bottom">
+          <view class="left-location">天河区棠下</view>
+          <view class="right-stats">
+            <view class="it">
+              <text class="iconfont icon-dianzan"></text>
+              <text class="text">2</text>
+            </view>
+            <view class="it">
+              <text class="iconfont icon-pinglun"></text>
+              <text class="text">2</text>
+            </view>
+            <view class="it">
+              <text class="iconfont icon-liulan"></text>
+              <text class="text">2</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </zj-page-layout>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        imgUrl: this.$imageUrl,
+        categoryList: [
+          {name: '家用空调', value: 1},
+          {name: '商用空调', value: 2},
+          {name: '冷冻空调', value: 3},
+          {name: '特种空调', value: 4},
+        ],
+        tabList: [
+          {name: '默认顺序', value: 1},
+          {name: '在售商品', value: 2},
+          {name: '离我最近', value: 3},
+          {name: '人气最高', value: 4},
+        ],
+        keyword: '',
+        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;
+  padding: 0 30rpx;
+  ::v-deep .u-search {
+    margin-top: 20rpx !important;
+  }
+}
+.common-goods-list {
+  padding: 0 30rpx;
+  .item {
+    @include zj-card;
+  }
+}
+</style>

src/pages/goods/order.vue

@@ -0,0 +1,184 @@
+<template>
+  <zj-page-layout :hasFooter="true">
+    <view class="address-container" @tap="$navPage(`/pages/mine/address/list?isChoose=1`)">
+    	<view class="left">
+    		<view class="icon"><text class="iconfont icon-dingwei1"></text></view>
+    		<view class="nodata" v-if="!hasAddress">选择收货地址</view>
+    		<view class="hasdata" v-else>
+    			<view class="name">{{addressInfo.name}}<text>{{addressInfo.phone}}</text></view>
+    			<view class="address ellipsis-2">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.area}}{{addressInfo.street}}{{addressInfo.address}}{{addressInfo.houseNo}}</view>
+    		</view>
+    	</view>
+    	<text class="right iconfont icon-jinru"></text>
+    </view>
+
+    <view class="goods-container">
+      <view class="goods">
+        <image src="@/static/user/other_book.png"></image>
+        <view class="main">
+          <view class="name">商品名称</view>
+          <view class="des">商品描述</view>
+          <view class="bottom">
+          	<view class="price">¥1200.00</view>
+          	<u-number-box
+          		@tap.stop
+          		v-model="num"
+          		:min="1"
+          		:buttonSize="26"
+          		iconStyle="font-size: 12px;"
+          		:disabled="!hasAddress"
+          		@change="changeCount($event, index)">
+          	</u-number-box>
+          </view>
+        </view>
+      </view>
+      <view class="total">订单总金额<text>¥1200.00</text></view>
+    </view>
+
+    <template slot="footer">
+      <view class="bottom-container">
+      	<view class="left">
+          实付款：<text>¥1200.00</text>
+      	</view>
+      	<u-button type="primary" text="提交订单" @click="submitOrder"></u-button>
+      </view>
+    </template>
+
+  </zj-page-layout>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+.address-container {
+  background: #FFFFFF;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 150rpx;
+  padding: 0 20rpx;
+  margin-top: 30rpx;
+  .right {
+    font-size: 36rpx;
+    flex-shrink: 0;
+    color: $sec-font;
+  }
+  .left {
+    display: flex;
+    align-items: center;
+    margin-right: 20rpx;
+    .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;
+      }
+    }
+    .nodata {
+      font-size: 28rpx;
+      color: #999999;
+    }
+    .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: 0 30rpx;
+  .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;
+      }
+      .bottom {
+      	display: flex;
+      	justify-content: space-between;
+      	align-items: center;
+        margin-top: 12rpx;
+      	.price {
+      		color: $assist-color;
+      		font-weight: 500;
+      		font-size: 32rpx;
+      		text {
+      			font-size: 24rpx;
+      		}
+      	}
+      	::v-deep .u-number-box {
+      		.u-number-box__minus, .u-number-box__plus {
+      			width: 26px;
+      		}
+      	}
+      }
+    }
+  }
+  .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-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 30rpx;
+  .left {
+    flex-shrink: 0;
+    font-size: 28rpx;
+    text {
+      color: $assist-color;
+    }
+  }
+  ::v-deep .u-button {
+    width: 180rpx;
+    margin: 0;
+  }
+}
+</style>

src/pages/index/index.vue

@@ -1,12 +1,92 @@
 <template>
-  <zj-page-layout
-  	:hasFooter="false"
-  	:isScroll="true"
-		:refresherTriggered="refresherTriggered"
-		@refresherrefresh="refresherrefresh"
-		@scrolltolower="scrolltolower">
-    <view>首页</view>
-  </zj-page-layout>
+  <view>
+    <view class="bg-container"></view>
+    <zj-page-layout
+    	:hasFooter="false"
+    	:isScroll="true"
+    	:refresherTriggered="refresherTriggered"
+    	@refresherrefresh="refresherrefresh"
+    	@scrolltolower="scrolltolower">
+      <template slot="header">
+        <view class="header-container">二手空调</view>
+      </template>
+
+      <view class="all-container">
+        <view class="search-container">
+          <u-search
+            placeholder="输入商品名称搜索"
+            :showAction="false"
+            clearabled
+            v-model="keyword">
+          </u-search>
+        </view>
+
+        <view class="swiper-container card mt30">
+          <u-swiper
+            :list="bannerList"
+            indicator
+            indicatorMode="line"
+            circular
+          ></u-swiper>
+        </view>
+
+        <view class="category-container card mt30">
+          <view class="item" v-for="(item, index) in categoryList" :key="index" @tap="$navPage(`/pages/goods/list`)">
+            <image src="@/static/user/icon_2.png"></image>
+            <view class="name">家用空调</view>
+          </view>
+        </view>
+
+        <view class="tab-container mt30">
+          <u-tabs
+            :list="tabList"
+            @click="click"
+            :scrollable="false"
+            lineColor="#01C30B">
+          </u-tabs>
+        </view>
+
+        <view class="common-goods-list">
+          <view class="item card" v-for="(item, index) in [1,2,3]" :key="index" @tap="$navPage(`/pages/goods/detail`)">
+            <view class="top">
+              <image src="@/static/common/logo.png"></image>
+              <view class="user">
+                <view class="name">张三</view>
+                <view class="time">23小时前发布</view>
+              </view>
+              <view class="price">¥1888.00</view>
+            </view>
+            <view class="title">商品名称</view>
+            <view class="des">商品描述</view>
+            <view class="imgs">
+              <image src="@/static/user/other_speech.png"></image>
+              <image src="@/static/user/other_speech.png"></image>
+              <image src="@/static/user/other_speech.png"></image>
+            </view>
+            <view class="bottom">
+              <view class="left-location">天河区棠下</view>
+              <view class="right-stats">
+                <view class="it">
+                  <text class="iconfont icon-dianzan"></text>
+                  <text class="text">2</text>
+                </view>
+                <view class="it">
+                  <text class="iconfont icon-pinglun"></text>
+                  <text class="text">2</text>
+                </view>
+                <view class="it">
+                  <text class="iconfont icon-liulan"></text>
+                  <text class="text">2</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+      </view>
+
+    </zj-page-layout>
+  </view>
 </template>
 
 <script>
@@ -17,6 +97,19 @@
         dataList: [],
         pageNum: 1,
         refresherTriggered: false,
+        keyword: '',
+        bannerList: [
+          'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+          'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+          'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+        ],
+        categoryList: [1,2,3,4],
+        tabList: [
+          {name: '默认顺序', value: 1},
+          {name: '在售商品', value: 2},
+          {name: '离我最近', value: 3},
+          {name: '人气最高', value: 4},
+        ],
       }
     },
 
@@ -43,7 +136,7 @@
 					this.refresherTriggered = false;
 				})
       },
-      
+
       // 滚动到底部
       scrolltolower(e) {
       	if (this.loadStatus === 0) {
@@ -51,7 +144,7 @@
       		this.getList();
       	}
       },
-      
+
       // 触发下拉刷新
       refresherrefresh(e) {
       	this.refresherTriggered = true;
@@ -65,5 +158,50 @@
 </script>
 
 <style lang="scss" scoped>
-
+.all-container {
+  padding: 0 30rpx 30rpx;
+}
+.header-container {
+  font-size: 32rpx;
+  color: #ffffff;
+  height: 88rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  position: relative;
+}
+.bg-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 750rpx;
+  height: 750rpx;
+  background: linear-gradient(to bottom, $theme-color, #f4f2f2);
+}
+.card {
+  @include zj-card;
+}
+.swiper-container {
+  border-radius: 20rpx;
+  overflow: hidden;
+}
+.category-container {
+  display: flex;
+  padding: 30rpx 0;
+  .item {
+    width: 25%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    image {
+      width: 44rpx;
+      height: 44rpx;
+    }
+    .name {
+      font-size: 28rpx;
+      margin-top: 16rpx;
+    }
+  }
+}
 </style>

src/pages/mine/index.vue

@@ -1,80 +1,79 @@
-<!-- 我的主页 -->
 <template>
-  <view class="container">
-    <u-navbar
-      title="我的"
-      bgColor="#ffffff"
-      titleStyle="color: #333333; font-weight: 500;"
-      placeholder
-      v-show="isCustom"
-      leftIcon="">
-    </u-navbar>
-
+  <view>
     <view class="bg-container"></view>
 
-    <view class="title-container">我的</view>
+    <zj-page-layout
+    	:hasFooter="false"
+    	:isScroll="true"
+    	:refresherTriggered="refresherTriggered"
+    	@refresherrefresh="refresherrefresh">
+      <template slot="header">
+        <view class="header-container">我的</view>
+      </template>
 
-    <view class="user-container card">
-      <view class="user">
-        <image src="@/static/common/logo.png" mode="aspectFill"></image>
-        <view class="main">
-          <view class="name">张三</view>
-          <view class="real">实名认证</view>
-        </view>
-      </view>
-      <view class="stats">
-        <view class="item" v-for="(item, index) in userStats" :key="index" @tap="$navPage(item.url)">
-          <view class="num">{{item.num}}</view>
-          <view class="text">{{item.name}}</view>
+      <view class="all-container">
+        <view class="user-container card">
+          <view class="user">
+            <image src="@/static/common/logo.png" mode="aspectFill"></image>
+            <view class="main">
+              <view class="name">张三</view>
+              <view class="real">实名认证</view>
+            </view>
+          </view>
+          <view class="stats">
+            <view class="item" v-for="(item, index) in userStats" :key="index" @tap="$navPage(item.url)">
+              <view class="num">{{item.num}}</view>
+              <view class="text">{{item.name}}</view>
+            </view>
+          </view>
         </view>
-      </view>
-    </view>
 
-    <view class="stats-container card">
-      <view class="top">
-        <view class="left">我发布的</view>
-        <view class="right">全部<text class="iconfont icon-jinru"></text></view>
-      </view>
-      <view class="stats">
-        <view class="item" v-for="(item, index) in issueStats" :key="index">
-          <view class="icon">
-            <text class="iconfont" :class="item.icon"></text>
-            <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>
+        <view class="stats-container card">
+          <view class="top">
+            <view class="left">我发布的</view>
+            <view class="right">全部<text class="iconfont icon-jinru"></text></view>
+          </view>
+          <view class="stats">
+            <view class="item" v-for="(item, index) in issueStats" :key="index">
+              <view class="icon">
+                <text class="iconfont" :class="item.icon"></text>
+                <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>
+              </view>
+              <view class="text">{{item.name}}</view>
+            </view>
           </view>
-          <view class="text">{{item.name}}</view>
         </view>
-      </view>
-    </view>
 
-    <view class="stats-container card">
-      <view class="top">
-        <view class="left">我买到的</view>
-        <view class="right">全部<text class="iconfont icon-jinru"></text></view>
-      </view>
-      <view class="stats">
-        <view class="item" v-for="(item, index) in buyStats" :key="index">
-          <view class="icon">
-            <text class="iconfont" :class="item.icon"></text>
-            <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>
+        <view class="stats-container card">
+          <view class="top">
+            <view class="left">我买到的</view>
+            <view class="right">全部<text class="iconfont icon-jinru"></text></view>
+          </view>
+          <view class="stats">
+            <view class="item" v-for="(item, index) in buyStats" :key="index">
+              <view class="icon">
+                <text class="iconfont" :class="item.icon"></text>
+                <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>
+              </view>
+              <view class="text">{{item.name}}</view>
+            </view>
           </view>
-          <view class="text">{{item.name}}</view>
         </view>
-      </view>
-    </view>
 
-    <view class="menu-container card">
-      <block v-for="(item, index) in pageList" :key="index">
-        <view class="item" v-if="item.url != 'contact'" @tap="$navPage(item.url)">
-          <view class="name">{{item.name}}</view>
-          <text class="iconfont icon-jinru"></text>
+        <view class="menu-container card">
+          <block v-for="(item, index) in pageList" :key="index">
+            <view class="item" v-if="item.url != 'contact'" @tap="$navPage(item.url)">
+              <view class="name">{{item.name}}</view>
+              <text class="iconfont icon-jinru"></text>
+            </view>
+            <button class="item" v-else open-type="contact" :plain="true">
+            	<view class="name">{{item.name}}</view>
+            	<text class="iconfont icon-jinru"></text>
+            </button>
+          </block>
         </view>
-        <button class="item" v-else open-type="contact" :plain="true">
-        	<view class="name">{{item.name}}</view>
-        	<text class="iconfont icon-jinru"></text>
-        </button>
-      </block>
-    </view>
-
+      </view>
+    </zj-page-layout>
   </view>
 </template>
 
@@ -82,8 +81,7 @@
 export default {
   data() {
     return {
-      scrollTop: 0, // 滚动高度（用于控制自定义导航）
-      isCustom: false, // 是否显示自定义导航
+      refresherTriggered: false,
       userInfo: uni.getStorageSync('recycle_mobile_user'),
 
       userStats: [
@@ -113,13 +111,7 @@ export default {
   },
 
   watch: {
-    scrollTop() {
-      if(this.scrollTop > 100) {
-        this.isCustom = true;
-      }else {
-        this.isCustom = false;
-      }
-    }
+
   },
 
   onShow() {
@@ -128,36 +120,26 @@ export default {
     })
   },
 
-  onPageScroll(res) {
-    this.scrollTop = res.scrollTop;
-  },
+  methods: {
+    // 触发下拉刷新
+    refresherrefresh(e) {
+    	this.refresherTriggered = true;
+
+    },
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-.container {
-    margin-bottom: 20rpx;
-    // background-color: #fff;
-    overflow: auto;
+.all-container {
+  padding: 0 30rpx 30rpx;
 }
 
 .card {
-  background: #ffffff;
-  border-radius: 20rpx;
-  position: relative;
-  margin: 0 30rpx;
-}
-
-.bg-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 750rpx;
-  height: 750rpx;
-  background: linear-gradient(to bottom, $theme-color, #f4f2f2);
+  @include zj-card;
 }
 
-.title-container {
+.header-container {
   font-size: 32rpx;
   color: #ffffff;
   height: 88rpx;
@@ -168,8 +150,16 @@ export default {
   position: relative;
 }
 
+.bg-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 750rpx;
+  height: 750rpx;
+  background: linear-gradient(to bottom, $theme-color, #f4f2f2);
+}
+
 .user-container {
-  margin-top: 10rpx;
   padding: 20rpx 20rpx 40rpx;
   .user {
     display: flex;

src/pages/mine/myCollection.vue

@@ -5,7 +5,7 @@
   	:refresherTriggered="refresherTriggered"
   	@refresherrefresh="refresherrefresh"
   	@scrolltolower="scrolltolower">
-    <view class="list-container">
+    <view class="common-goods-list">
       <view class="item">
         <view class="top">
           <image src="@/static/common/logo.png"></image>
@@ -23,8 +23,8 @@
           <image src="@/static/user/other_speech.png"></image>
         </view>
         <view class="bottom">
-          <view class="location">天河区棠下</view>
-          <view class="right">
+          <view class="left-location">天河区棠下</view>
+          <view class="right-btn">
             <u-button text="取消收藏" shape="circle"></u-button>
           </view>
         </view>
@@ -89,67 +89,5 @@
 </script>
 
 <style lang="scss" scoped>
-.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;
-        }
-      }
-      .price {
-        color: $assist-color;
-      }
-    }
-    .title {
-      margin-top: 20rpx;
-    }
-    .des {
-      margin-top: 20rpx;
-    }
-    .imgs {
-      display: flex;
-      flex-wrap: wrap;
-      image {
-        width: 140rpx;
-        height: 140rpx;
-        margin-right: 20rpx;
-        margin-top: 20rpx;
-      }
-    }
-    .bottom {
-      border-top: 1px solid #eaeaea;
-      margin-top: 20rpx;
-      padding-top: 20rpx;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .location {
-        font-size: 24rpx;
-        color: $sec-font;
-      }
-      .u-button {
-        height: 60rpx;
-      }
-    }
-  }
-}
 </style>

src/pages/mine/myLike.vue

@@ -5,7 +5,7 @@
   	:refresherTriggered="refresherTriggered"
   	@refresherrefresh="refresherrefresh"
   	@scrolltolower="scrolltolower">
-    <view class="list-container">
+    <view class="common-goods-list">
       <view class="item">
         <view class="top">
           <image src="@/static/common/logo.png"></image>
@@ -23,8 +23,8 @@
           <image src="@/static/user/other_speech.png"></image>
         </view>
         <view class="bottom">
-          <view class="location">天河区棠下</view>
-          <view class="right">
+          <view class="left-location">天河区棠下</view>
+          <view class="right-btn">
             <u-button text="取消点赞" shape="circle"></u-button>
           </view>
         </view>
@@ -89,67 +89,5 @@
 </script>
 
 <style lang="scss" scoped>
-.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;
-        }
-      }
-      .price {
-        color: $assist-color;
-      }
-    }
-    .title {
-      margin-top: 20rpx;
-    }
-    .des {
-      margin-top: 20rpx;
-    }
-    .imgs {
-      display: flex;
-      flex-wrap: wrap;
-      image {
-        width: 140rpx;
-        height: 140rpx;
-        margin-right: 20rpx;
-        margin-top: 20rpx;
-      }
-    }
-    .bottom {
-      border-top: 1px solid #eaeaea;
-      margin-top: 20rpx;
-      padding-top: 20rpx;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .location {
-        font-size: 24rpx;
-        color: $sec-font;
-      }
-      .u-button {
-        height: 60rpx;
-      }
-    }
-  }
-}
 </style>

src/styles/common.scss

@@ -1 +1,94 @@
 
+@mixin zj-card {
+	background: #FFFFFF;
+	border-radius: 20rpx;
+	box-shadow: -10rpx 12rpx 96rpx 2rpx rgba(31, 36, 99, 0.1);
+	overflow: hidden;
+  position: relative;
+}
+
+.common-goods-list {
+  .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;
+        }
+      }
+      .price {
+        color: $assist-color;
+      }
+    }
+    .title {
+      margin-top: 20rpx;
+    }
+    .des {
+      margin-top: 20rpx;
+      font-size: 28rpx;
+      color: $reg-font;
+    }
+    .imgs {
+      display: flex;
+      flex-wrap: wrap;
+      image {
+        width: 140rpx;
+        height: 140rpx;
+        margin-right: 20rpx;
+        margin-top: 20rpx;
+      }
+    }
+    .bottom {
+      border-top: 1px solid #eaeaea;
+      margin-top: 20rpx;
+      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;
+        }
+      }
+      .right-stats {
+        display: flex;
+        align-items: center;
+        .it {
+          display: flex;
+          align-items: center;
+          margin-left: 16rpx;
+          .iconfont {
+            font-size: 28rpx;
+            color: $sec-font;
+          }
+          .text {
+            font-size: 24rpx;
+            margin-left: 4rpx;
+            color: $sec-font;
+          }
+        }
+      }
+    }
+  }
+}

src/styles/iconfont.css

@@ -1,9 +1,9 @@
 /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
 @font-face {
   font-family: 'iconfont';  /* Project id 4308323 */
-  src: url('https://at.alicdn.com/t/c/font_4308323_1d4707qto5j.woff2?t=1698659322164') format('woff2'),
-       url('https://at.alicdn.com/t/c/font_4308323_1d4707qto5j.woff?t=1698659322164') format('woff'),
-       url('https://at.alicdn.com/t/c/font_4308323_1d4707qto5j.ttf?t=1698659322164') format('truetype');
+  src: url('https://at.alicdn.com/t/c/font_4308323_1lk0nfjgk3z.woff2?t=1698722688359') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_4308323_1lk0nfjgk3z.woff?t=1698722688359') format('woff'),
+       url('https://at.alicdn.com/t/c/font_4308323_1lk0nfjgk3z.ttf?t=1698722688359') format('truetype');
 }
 
 .iconfont {
@@ -14,6 +14,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-pinglun:before {
+  content: "\e600";
+}
+
+.icon-liulan:before {
+  content: "\e693";
+}
+
+.icon-dianzan:before {
+  content: "\ec7f";
+}
+
 .icon-jinru:before {
   content: "\e60c";
 }

src/styles/index.scss

@@ -14,10 +14,13 @@ view {
   overflow: hidden;
 }
 
+.mt10 {margin-top: 10rpx;}
+.mt20 {margin-top: 20rpx;}
+.mt30 {margin-top: 30rpx;}
+.mt40 {margin-top: 40rpx;}
 
 .flex {
     display: flex;
-
 }
 .t-border::before {
     content: '';