小程序：用户信息

htmldev/wxMini/.cloudbase/container/debug.json

@@ -0,0 +1 @@
+{"containers":[],"config":{}}

htmldev/wxMini/app.json

@@ -2,7 +2,8 @@
   "pages": [
     "pages/home/home",
     "pages/login/login",
-    "pages/mine/mine"
+    "pages/mine/mine",
+    "pages/leavingAMessage/leavingAMessage"
   ],
   "permission": {
     "scope.userLocation": {

htmldev/wxMini/app.wxss

@@ -33,183 +33,6 @@ button::after {
   border: none;
 }
 
-.customer-picker {
-  height: 480rpx;
-  padding: 0 40rpx;
-}
-
-.customer-picker .customer-picker_indicator {
-  height: 96rpx;
-}
-
-.customer-picker .picker-list {
-  line-height: 96rpx;
-  text-align: center;
-  font-size: 32rpx;
-  color: rgba(0, 0, 0, 1);
-}
-
-.customer-picker .customer-picker_mask {
-  color: rgba(51, 51, 51, 0.4);
-}
-
-button.customer-picker_footer[type='primary'] {
-  width: 686rpx !important;
-  height: 104rpx;
-  border-radius: 24rpx;
-  margin: 40rpx auto !important;
-  padding: 0 !important;
-  background-color: rgba(74, 106, 150, 1);
-  color: rgba(255, 255, 255, 1);
-  font-size: 32rpx;
-  font-weight: 500;
-}
-
-button.customer-picker_footer[disabled] {
-  color: #FFF;
-  background-color: #DDDDDD;
-}
-
-.customer-van-popup .close-icon {
-  position: absolute;
-  z-index: 1;
-  padding: 40rpx 24rpx;
-}
-
-.customer-van-popup .close-icon .image {
-  display: block;
-  width: 48rpx;
-  height: 48rpx;
-}
-
-.customer-van-popup .title {
-  height: 122rpx;
-  padding-top: 48rpx;
-  color: rgba(0, 0, 0, 1);
-  font-size: 32rpx;
-  font-weight: 500;
-  text-align: center;
-}
-
-.agreement-wrap {
-  display: flex;
-  align-items: center;
-  margin-top: 57rpx;
-}
-
-.agreement-wrap .text-wrap {
-  display: flex;
-  flex-flow: row wrap;
-}
-
-.agreement-wrap .text-wrap text {
-  font-size: 24rpx;
-  line-height: 30rpx;
-}
-
-.customer-van-model {
-  width: 560rpx;
-  border-radius: 24rpx;
-  overflow: hidden;
-}
-
-.customer-van-model_body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 48rpx 0;
-}
-
-.customer-van-model_body .content {
-  width: 480rpx;
-  color: #333333;
-  font-size: 32rpx;
-  line-height: 48rpx;
-  text-align: center;
-  word-break: break-all;
-  word-wrap: break-word;
-}
-
-.customer-van-model_body .content.cancel-order {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-}
-
-.customer-van-model_body .content.cancel-order text {
-  color: #333333;
-  font-size: 32rpx;
-  line-height: 48rpx;
-}
-
-.customer-van-model_footer {
-  display: flex;
-  align-items: center;
-  border-top: 1rpx solid #EEEEEE;
-}
-
-.customer-van-model_footer button[type="default"].customer-van-model_cancel {
-  position: relative;
-  left: 0;
-  top: 0;
-  width: 50%;
-  height: 104rpx;
-  color: #666666;
-  font-size: 32rpx;
-  line-height: 48rpx;
-  background: transparent;
-
-}
-
-.customer-van-model_footer button[type="default"].customer-van-model_cancel:after {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  content: '';
-  border-right: 1rpx solid #EEEEEE;
-}
-
-.customer-van-model_footer button[type="primary"].customer-van-model_confirm {
-  width: 50%;
-  height: 104rpx;
-  color: #4A6A96;
-  font-size: 32rpx;
-  font-weight: 500;
-  line-height: 48rpx;
-  background: transparent;
-}
-
-.customer-van-model_footer button[type="warn"].customer-van-model_confirm {
-  width: 50%;
-  height: 104rpx;
-  color: #DC4F3F;
-  font-size: 32rpx;
-  font-weight: 500;
-  line-height: 48rpx;
-  background: transparent;
-}
-
-.list-bitmap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 320rpx;
-}
-
-.list-bitmap image {
-  width: 400rpx;
-  height: 400rpx;
-}
-
-
-.list-bitmap text {
-  margin-top: 8rpx;
-  color: rgba(102, 102, 102, 1);
-  font-size: 28rpx;
-  line-height: 34rpx;
-}
-
 view.footer-fixed-bottom {
   position: fixed;
   left: 0;
@@ -252,112 +75,39 @@ view.footer-fixed-bottom button[type='default'] {
   background-color: #DDDDDD;
 }
 
-.van-picker-column__item {
-  line-height: inherit;
-}
-
-.customer-van-popup-diff-price-body {
-  width: 690rpx;
-  margin: 0 auto;
-}
-
-.customer-van-popup-diff-price .alert {
-  width: 100%;
-  padding: 16rpx 0;
-  border-radius: 16rpx;
-  background: rgba(254, 248, 236, 1);
-}
-
-.customer-van-popup-diff-price .alert view {
-  width: 630rpx;
-  margin: 0 auto;
-  color: rgba(198, 150, 76, 1);
-  font-size: 26rpx;
-  line-height: 36rpx;
-}
-
-.customer-van-popup-diff-price .amount {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding-bottom: 48rpx;
-  margin-top: 48rpx;
-  border-bottom: 1px solid #EEEEEE;
-}
-
-.customer-van-popup-diff-price .amount .label view:nth-of-type(1) {
-  color: rgba(51, 51, 51, 1);
-  font-size: 30rpx;
-  line-height: 36rpx;
-}
-
-.customer-van-popup-diff-price .amount .label view:nth-of-type(2) {
-  margin-top: 8rpx;
-  color: rgba(153, 153, 153, 1);
-  font-size: 24rpx;
-  line-height: 30rpx;
-  text-align: center;
-}
-
-.customer-van-popup-diff-price .amount .value {
-  color: rgba(253, 102, 0, 1);
-  font-size: 30rpx;
-  line-height: 36rpx;
-}
-
-.customer-van-popup-diff-price .diff-price {
+.page-header-search {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   justify-content: center;
-  margin-top: 48rpx;
-  color: rgba(0, 0, 0, 1);
-}
-
-.customer-van-popup-diff-price .diff-price .label {
-  padding-bottom: 12rpx;
-  margin-right: 8rpx;
-  font-size: 48rpx;
-  font-weight: 500;
 }
 
-.customer-van-popup-diff-price .diff-price .value {
-  font-size: 80rpx;
-  font-weight: 500;
-}
-
-.customer-van-popup-diff-price .diff-price-text {
-  color: rgba(0, 0, 0, 1);
-  font-size: 26rpx;
-  text-align: center;
-}
-
-.customer-van-popup-diff-price .wechat {
+.page-header-search-warp {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding-top: 72rpx;
-  padding-bottom: 32rpx;
+  width: 640rpx;
+  height: 68rpx;
+  border-radius: 40rpx;
+  background: #F6F7FA;
+
 }
 
-.customer-van-popup-diff-price .wechat .name {
-  display: flex;
-  align-items: center;
+.page-header-search-warp label {
+  width: 66rpx;
 }
 
-.customer-van-popup-diff-price .wechat .logo {
-  width: 48rpx;
-  height: 48rpx;
+.page-header-search-warp image {
+  display: block;
+  width: 29rpx;
+  height: 29rpx;
+  background: pink;
 }
 
-.customer-van-popup-diff-price .wechat .logo + text {
-  margin-left: 16rpx;
-  color: rgba(51, 51, 51, 1);
-  font-size: 32rpx;
-  font-weight: Medium;
-  line-height: 40rpx;
+.page-header-search-warp input {
+  width: calc(100% - 66rpx);
+  font-size: 28rpx;
+  color: #1F1F39;
 }
 
-.customer-van-popup-diff-price .wechat .checked {
-  width: 32rpx;
-  height: 32rpx;
+.header-search-placeholder {
+  color: rgba(190, 192, 202, 1);
 }

htmldev/wxMini/pages/home/home.js

@@ -147,5 +147,10 @@ Page({
         })
       })
     })
+  },
+  jumpLeavingAMessage () {
+    wx.navigateTo({
+      url: '/pages/leavingAMessage/leavingAMessage',
+    })
   }
 })

htmldev/wxMini/pages/home/home.wxml

@@ -1,6 +1,6 @@
 <view class="home-wrapper">
-  <view class="header">
-    <view class="header-search-warp">
+  <view class="page-header-search">
+    <view class="page-header-search-warp">
       <label for="header-search">
         <image src=""></image>
       </label>
@@ -9,7 +9,9 @@
         value=""
         placeholder="搜索"></input>
     </view>
-    <view class="leaving-a-message">
+    <view
+      class="leaving-a-message"
+      bind:tap="jumpLeavingAMessage">
       <image src=""></image>
       <view>8</view>
     </view>

htmldev/wxMini/pages/home/home.wxss

@@ -3,43 +3,6 @@
   background: #FFF;
 }
 
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.header-search-warp {
-  display: flex;
-  align-items: center;
-  width: 640rpx;
-  height: 68rpx;
-  border-radius: 40rpx;
-  background: #F6F7FA;
-
-}
-
-.header-search-warp label {
-  width: 66rpx;
-}
-
-.header-search-warp image {
-  display: block;
-  width: 29rpx;
-  height: 29rpx;
-  background: pink;
-}
-
-.header-search-warp input {
-  width: calc(100% - 66rpx);
-  font-size: 28rpx;
-  color: #1F1F39;
-}
-
-.header-search-placeholder {
-  color: rgba(190, 192, 202, 1);
-}
-
 .leaving-a-message {
   position: relative;
   left: 0;
@@ -236,7 +199,7 @@
   height: 56rpx !important;
 }
 
-.waterfall{
+.waterfall {
   display: flex;
   justify-content: space-between;
   width: 690rpx;

htmldev/wxMini/pages/leavingAMessage/leavingAMessage.js

@@ -0,0 +1,92 @@
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    pagenum: 0,
+    pagesize: 20,
+    finished: false, // 所有数据是否加载完
+    isRefresh: false, // 是否下拉刷新
+    isFetchLock: false, // 接口调用加锁
+    list: [1],
+    booLock: false,
+    nav: [
+      {
+        name: '全部',
+        value: '1'
+      },
+      {
+        name: '消息',
+        value: '2'
+      }
+    ],
+    currentNav: '1'
+  },
+  freshing: false,
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage () {
+
+  },
+  handleNav (e) {
+    const { item } = e.target.dataset
+
+    if (item.value) {
+      this.setData({
+        currentNav: item.value
+      })
+    }
+  }
+})

htmldev/wxMini/pages/leavingAMessage/leavingAMessage.json

@@ -0,0 +1,9 @@
+{
+  "usingComponents": {
+    "van-loading": "@vant/weapp/loading/index"
+  },
+  "navigationBarBackgroundColor": "#CCCCCC",
+  "backgroundTextStyle": "dark",
+  "enablePullDownRefresh": true,
+  "onReachBottomDistance": 50
+}

htmldev/wxMini/pages/leavingAMessage/leavingAMessage.wxml

@@ -0,0 +1,63 @@
+<view class="wrapper">
+  <view class="page-header-search">
+    <view class="page-header-search-warp">
+      <label for="header-search">
+        <image src=""></image>
+      </label>
+      <input
+        placeholder-class="header-search-placeholder"
+        value=""
+        placeholder="搜索信息"></input>
+    </view>
+  </view>
+  <view class="nav-wrap">
+    <view
+      class="{{currentNav === item.value ? 'active' : ''}}"
+      wx:for="{{nav}}"
+      wx:key="value"
+      data-item="{{item}}"
+      bind:tap="handleNav">{{item.name}}
+    </view>
+  </view>
+  <view class="list"
+        wx:for="{{list}}"
+        wx:key="index"
+        data-item="{{item}}">
+    <view class="time-track">今天</view>
+    <view class="item-message system">
+      <image
+        class="icon-system"
+        src=""></image>
+      <view class="info">
+        <text class="title">系统信息</text>
+        <text class="date">2022/03/17 19:20</text>
+      </view>
+      <image
+        class="arrow"
+        src=""></image>
+    </view>
+    <view class="item-message business">
+      <image
+        class="icon-business"
+        src=""></image>
+      <view class="info">
+        <text class="title">商家：巴啦啦西瓜巴啦啦西瓜巴啦啦西瓜巴啦啦西瓜巴啦啦西瓜巴啦啦西瓜</text>
+        <text class="content">请问什么时候发货请问什么时候发货请问什么时候发货请问什么时候发货请问什么时候发货请问什么时候发货请问什么时候发货请问什么时候发货？</text>
+        <text class="date">2022/03/17 19:20</text>
+      </view>
+    </view>
+  </view>
+  <!-- 无数据 -->
+  <view class="list-bitmap" wx:if="{{finished && list.length < 1}}">
+    <image src="system"></image>
+    <text>暂无发票抬头</text>
+  </view>
+  <!-- 上拉加载 -->
+  <view class="pullup-wrapper" wx:if="{{!isRefresh}}">
+    <van-loading
+      wx:if="{{!finished}}"
+      size="24px"
+      type="spinner">加载中...
+    </van-loading>
+  </view>
+</view>

htmldev/wxMini/pages/leavingAMessage/leavingAMessage.wxss

@@ -0,0 +1,117 @@
+page {
+  min-height: 100%;
+  background-color: #FFFFFF;
+}
+
+.wrapper {
+  padding-top: 20rpx;
+  padding-bottom: 152rpx;
+}
+
+.page-header-search-warp {
+  width: 690rpx;
+}
+
+.nav-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1rpx solid rgba(189, 189, 189, 1);
+}
+
+.nav-wrap view {
+  flex: 1;
+  padding: 24rpx 0;
+  line-height: 40rpx;
+  font-size: 28rpx;
+  color: rgba(51, 51, 51, 1);
+  text-align: center;
+}
+
+.nav-wrap view.active {
+  position: relative;
+  left: 0;
+  top: 0;
+  color: rgba(145, 179, 121, 1);
+}
+
+.nav-wrap view.active:after {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  content: '';
+  width: 162rpx;
+  height: 8rpx;
+  border-radius: 40rpx 40rpx 0 0;
+  background: rgba(145, 179, 121, 1);
+  transform: translateX(-50%);
+}
+
+.list {
+  width: 654rpx;
+  padding-top: 42rpx;
+  margin-left: 32rpx;
+}
+
+.time-track {
+  line-height: 40rpx;
+  font-size: 24rpx;
+  color: rgba(153, 153, 153, 1);
+}
+
+.system .date {
+  margin-top: 10rpx;
+}
+
+.item-message {
+  display: flex;
+  margin-top: 34rpx;
+}
+
+.icon-system,
+.icon-business,
+.arrow {
+  width: 48rpx;
+  height: 48rpx;
+  background: pink;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  width: 558rpx;
+  padding: 0 32rpx;
+}
+
+.title {
+  font-size: 32rpx;
+  line-height: 48rpx;
+  color: rgba(51, 51, 51, 1);
+}
+
+.content {
+  margin: 4rpx 0 16rpx;
+  font-size: 28rpx;
+  line-height: 40rpx;
+  color: rgba(102, 102, 102, 1);
+}
+
+.date {
+  font-size: 24rpx;
+  line-height: 40rpx;
+  color: rgba(102, 102, 102, 1);
+}
+
+.pullup-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+}
+
+.van-loading__text {
+  color: #969799;
+  font-size: 14px;
+  line-height: 20px;
+}