作者 乔爽

update

1 { 1 {
2 "pages": [ 2 "pages": [
3 - 3 + "pages/mine/myOrder/myOrder",
4 "pages/mine/addr_2/addr_2", 4 "pages/mine/addr_2/addr_2",
5 "pages/mine/addr_1/addr_1", 5 "pages/mine/addr_1/addr_1",
6 "pages/homeindex/homeindex", 6 "pages/homeindex/homeindex",
@@ -2,7 +2,153 @@ @@ -2,7 +2,153 @@
2 <view class='container'> 2 <view class='container'>
3 <view class='mid'> 3 <view class='mid'>
4 <view class='mid_item'> 4 <view class='mid_item'>
5 - 5 + <!-- 顶部 -->
  6 + <view class='mid_item_top'>
  7 + <!-- 左边 -->
  8 + <view class='mid_item_top_left'>
  9 + <view class='top_left_pic'>
  10 + <image src='../../../img/goods_1.png'></image>
  11 + </view>
  12 + <view class='top_left_text'>
  13 + 距结束23时59分
  14 + </view>
  15 + </view>
  16 + <!-- 右边 -->
  17 + <view class='mid_item_top_right'>
  18 + <!-- 右上 -->
  19 + <view class='right_top'>
  20 + <view class='right_top_lef'>
  21 + 纯进口有机菜花
  22 + </view>
  23 + <view class='right_top_rig'>
  24 + 产地:智力
  25 + </view>
  26 + </view>
  27 + <!-- 右中1 -->
  28 + <view class='right_mid'>
  29 + <view class='right_mid_lef'>
  30 + <view class='right_mid_lef_color'></view>
  31 + </view>
  32 + <view class='right_mid_rig'>
  33 + 42%
  34 + </view>
  35 + </view>
  36 + <!-- 右中2 -->
  37 + <view class='right_text'>
  38 + 已拼300份,目标500份
  39 + </view>
  40 + <!-- 右下 -->
  41 + <view class='right_bottom'>
  42 + <!-- 右下左 -->
  43 + <view class='right_bottom_lef'>
  44 + <span class='RBM'>¥</span>
  45 + <span class='number'>52/</span>
  46 + <span class='text'>1磅1份</span>
  47 + </view>
  48 + <!-- 右下中 -->
  49 + <view class='right_bottom_mid'>
  50 + <view class='right_bottom_mid_t'>
  51 + 40mm-50m
  52 + </view>
  53 + <view class='right_bottom_mid_b'>
  54 + 番茄果径
  55 + </view>
  56 + </view>
  57 + <!-- 右下右 -->
  58 + <view class='right_bottom_rig'>
  59 + 立即参团
  60 + </view>
  61 + </view>
  62 + </view>
  63 +
  64 +
  65 + </view>
  66 + <view class='mid_item_bottom'>
  67 + <view class='mid_item_bottom_left'>
  68 + 经典推荐
  69 + </view>
  70 + <!-- 竖线 -->
  71 + <view class='mid_line'></view>
  72 + <!-- 底部文本 -->
  73 + <view class='mid_item_bottom_bot'>
  74 + 智利进口,绿色健康,硕大饱满
  75 + </view>
  76 + </view>
  77 + </view>
  78 +
  79 + <view class='mid_item'>
  80 + <!-- 顶部 -->
  81 + <view class='mid_item_top'>
  82 + <!-- 左边 -->
  83 + <view class='mid_item_top_left'>
  84 + <view class='top_left_pic'>
  85 + <image src='../../../img/goods_1.png'></image>
  86 + </view>
  87 + <view class='top_left_text'>
  88 + 距结束2时22分
  89 + </view>
  90 + </view>
  91 + <!-- 右边 -->
  92 + <view class='mid_item_top_right'>
  93 + <!-- 右上 -->
  94 + <view class='right_top'>
  95 + <view class='right_top_lef'>
  96 + 纯进口有机菜花
  97 + </view>
  98 + <view class='right_top_rig'>
  99 + 产地:智力
  100 + </view>
  101 + </view>
  102 + <!-- 右中1 -->
  103 + <view class='right_mid'>
  104 + <view class='right_mid_lef'>
  105 + <view class='right_mid_lef_color'></view>
  106 + </view>
  107 + <view class='right_mid_rig'>
  108 + 42%
  109 + </view>
  110 + </view>
  111 + <!-- 右中2 -->
  112 + <view class='right_text'>
  113 + 已拼300份,目标500份
  114 + </view>
  115 + <!-- 右下 -->
  116 + <view class='right_bottom'>
  117 + <!-- 右下左 -->
  118 + <view class='right_bottom_lef'>
  119 + <span class='RBM'>¥</span>
  120 + <span class='number'>52/</span>
  121 + <span class='text'>1磅1份</span>
  122 + </view>
  123 + <!-- 右下中 -->
  124 + <view class='right_bottom_mid'>
  125 + <view class='right_bottom_mid_t'>
  126 + 40mm-50m
  127 + </view>
  128 + <view class='right_bottom_mid_b'>
  129 + 番茄果径
  130 + </view>
  131 + </view>
  132 + <!-- 右下右 -->
  133 + <view class='right_bottom_rig'>
  134 + 立即参团
  135 + </view>
  136 + </view>
  137 + </view>
  138 +
  139 +
  140 + </view>
  141 + <view class='mid_item_bottom'>
  142 + <view class='mid_item_bottom_left'>
  143 + 经典推荐
  144 + </view>
  145 + <!-- 竖线 -->
  146 + <view class='mid_line'></view>
  147 + <!-- 底部文本 -->
  148 + <view class='mid_item_bottom_bot'>
  149 + 智利进口,绿色健康,硕大饱满
  150 + </view>
  151 + </view>
6 </view> 152 </view>
7 </view> 153 </view>
8 </view> 154 </view>
@@ -6,14 +6,202 @@ @@ -6,14 +6,202 @@
6 flex-flow: column; 6 flex-flow: column;
7 } 7 }
8 .mid{ 8 .mid{
9 - margin-top: 32rpx; 9 + margin-top: 16rpx;
10 display: flex; 10 display: flex;
  11 + flex-flow: column;
11 } 12 }
12 .mid_item{ 13 .mid_item{
  14 + margin-top: 16rpx;
13 width:688rpx; 15 width:688rpx;
14 - height:400rpx; 16 + /* height:400rpx; */
15 background:rgba(249,250,252,1); 17 background:rgba(249,250,252,1);
16 opacity:1; 18 opacity:1;
17 border-radius:8rpx; 19 border-radius:8rpx;
18 display: flex; 20 display: flex;
  21 + align-items: center;
  22 + flex-flow: column;
  23 + box-sizing: border-box;
  24 + padding: 52rpx 16rpx 48rpx;
  25 +}
  26 +.mid_item_top{
  27 + display: flex;
  28 + width: 100%;
  29 +}
  30 +.mid_item_top_left{
  31 + width:208rpx;
  32 + height:208rpx;
  33 + /* background:rgba(250,250,250,1); */
  34 + opacity:1;
  35 + display: flex;
  36 + flex-flow: column;
  37 +}
  38 +.top_left_pic{
  39 + width: 208rpx;
  40 + height: 160rpx;
  41 + display: flex;
  42 +}
  43 +.top_left_pic image{
  44 + width: 100%;
  45 + height: 100%;
  46 +}
  47 +.top_left_text{
  48 + height:48rpx;
  49 + background:rgba(251,4,4,1);
  50 + opacity:0.2;
  51 + text-align: center;
  52 + font-size:24rpx;
  53 + font-family:PingFang SC;
  54 + font-weight:400;
  55 + line-height:48rpx;
  56 + color:rgba(255,255,255,1);
  57 +}
  58 +.mid_item_top_right{
  59 + width: 100%;
  60 + margin-left: 14rpx;
  61 +}
  62 +.right_top{
  63 + display: flex;
  64 + align-items: center;
  65 + justify-content: space-between;
  66 + margin-top: 20rpx;
  67 +}
  68 +.right_top_lef{
  69 +
  70 + font-size:32rpx;
  71 + font-family:PingFang SC;
  72 + font-weight:600;
  73 + color:rgba(51,51,51,1);
  74 + opacity:1;
  75 +}
  76 +.right_top_rig{
  77 +
  78 + font-size:22rpx;
  79 + font-family:PingFang SC;
  80 + font-weight:400;
  81 + line-height:32rpx;
  82 + color:rgba(204,204,204,1);
  83 + opacity:1;
  84 +}
  85 +.right_mid{
  86 + margin-top: 16rpx;
  87 + display: flex;
  88 + align-items: center;
  89 +}
  90 +.right_mid_lef{
  91 + width:288rpx;
  92 + height:16rpx;
  93 + background:rgba(236,236,236,1);
  94 + opacity:1;
  95 + border-radius:8rpx;
  96 +}
  97 +.right_mid_lef_color{
  98 + width:206rpx;
  99 + height:16rpx;
  100 + background:rgba(181,222,150,1);
  101 + opacity:1;
  102 + border-radius:8rpx;
  103 +}
  104 +.right_mid_rig{
  105 + margin-left: 16rpx;
  106 + font-size:24rpx;
  107 + font-family:PingFang SC;
  108 + font-weight:400;
  109 + line-height:34rpx;
  110 + color:rgba(181,222,150,1);
  111 + opacity:1;
  112 +}
  113 +.right_text{
  114 + margin-top: 14rpx;
  115 + font-size:22rpx;
  116 + font-family:PingFang SC;
  117 + font-weight:400;
  118 + color:rgba(204,204,204,1);
  119 + opacity:1;
  120 +}
  121 +.right_bottom{
  122 + display: flex;
  123 + align-items: center;
  124 + justify-content: space-between;
  125 +}
  126 +.RBM{
  127 + font-size: 22rpx;
  128 + color: #ff0000;
  129 +}
  130 +.number{
  131 + font-size: 30rpx;
  132 + color: #ff0000;
  133 +}
  134 +.text{
  135 +
  136 + font-size:22rpx;
  137 + font-family:PingFang SC;
  138 + font-weight:400;
  139 + line-height:32rpx;
  140 + color:rgba(204,204,204,1);
  141 + opacity:1;
  142 +}
  143 +.right_bottom_mid_t{
  144 +
  145 + font-size:22rpx;
  146 + font-family:PingFang SC;
  147 + font-weight:400;
  148 + color:rgba(51,51,51,1);
  149 + opacity:1;
  150 +}
  151 +.right_bottom_mid_b{
  152 + font-size:18rpx;
  153 + font-family:PingFang SC;
  154 + font-weight:400;
  155 + color:rgba(153,153,153,1);
  156 + opacity:1;
  157 +}
  158 +.right_bottom_rig{
  159 + width:144rpx;
  160 + height:48rpx;
  161 + line-height: 48rpx;
  162 + background:rgba(249,150,20,1);
  163 + box-shadow:0rpx 2rpx 12rpx rgba(255,145,0,0.16);
  164 + opacity:1;
  165 + border-radius:24rpx;
  166 +
  167 + text-align: center;
  168 + font-size:26rpx;
  169 + font-family:PingFang SC;
  170 + font-weight:400;
  171 + color:rgba(255,255,255,1);
  172 +}
  173 +.mid_item_bottom{
  174 + margin-top: 32rpx;
  175 + width:640rpx;
  176 + height:80rpx;
  177 + background:rgba(181,222,150,0.1);
  178 + border-radius:16rpx;
  179 + display: flex;
  180 + align-items: center;
  181 + box-sizing: border-box;
  182 + padding: 0 32rpx;
  183 +}
  184 +.mid_item_bottom_left{
  185 + font-size:30rpx;
  186 + font-family:汉真广标;
  187 + font-weight:400;
  188 + color:rgba(110,172,61,1);
  189 + opacity:1;
  190 +
  191 +}
  192 +.mid_line{
  193 + margin: 0 36rpx;
  194 + width:2rpx;
  195 + height:60rpx;
  196 + background:rgba(181,222,150,1);
  197 + opacity:1;
  198 + border-radius:4rpx;
  199 +}
  200 +.mid_item_bottom_bot{
  201 +
  202 + font-size:24rpx;
  203 + font-family:PingFang SC;
  204 + font-weight:400;
  205 + color:rgba(153,153,153,1);
  206 + opacity:1;
19 } 207 }
  1 +Page({
  2 +
  3 + /**
  4 + * 页面的初始数据
  5 + */
  6 + data: {
  7 + navbar: [{
  8 + name: '全部'
  9 + },
  10 + {
  11 + name: '待付款'
  12 + },
  13 + {
  14 + name: '待拼团'
  15 + },
  16 + {
  17 + name: '代发货'
  18 + },
  19 + {
  20 + name: '待完成'
  21 + }],
  22 + currentTab: 0,
  23 + },
  24 +
  25 + /**
  26 + * 生命周期函数--监听页面加载
  27 + */
  28 + onLoad: function (options) {
  29 +
  30 + },
  31 + navbarTap: function (e) {
  32 + console.log(88)
  33 + let that = this;
  34 + this.setData({
  35 + currentTab: e.currentTarget.dataset.idx,
  36 + })
  37 + },
  38 + /**
  39 + * 生命周期函数--监听页面初次渲染完成
  40 + */
  41 + onReady: function () {
  42 +
  43 + },
  44 +
  45 + /**
  46 + * 生命周期函数--监听页面显示
  47 + */
  48 + onShow: function () {
  49 +
  50 + },
  51 +
  52 + /**
  53 + * 生命周期函数--监听页面隐藏
  54 + */
  55 + onHide: function () {
  56 +
  57 + },
  58 +
  59 + /**
  60 + * 生命周期函数--监听页面卸载
  61 + */
  62 + onUnload: function () {
  63 +
  64 + },
  65 +
  66 + /**
  67 + * 页面相关事件处理函数--监听用户下拉动作
  68 + */
  69 + onPullDownRefresh: function () {
  70 +
  71 + },
  72 +
  73 + /**
  74 + * 页面上拉触底事件的处理函数
  75 + */
  76 + onReachBottom: function () {
  77 +
  78 + },
  79 +
  80 + /**
  81 + * 用户点击右上角分享
  82 + */
  83 + onShareAppMessage: function () {
  84 +
  85 + }
  86 +})
  1 +{
  2 + "navigationBarTitleText": "我的订单",
  3 + "navigationBarBackgroundColor": "#6EAC3D",
  4 + "navigationBarTextStyle": "white"
  5 +}
  1 +
  2 +<view class='container'>
  3 + <!-- 顶部菜单栏 -->
  4 + <!-- <view class='top'>
  5 + <view class='top_item'></view>
  6 + </view> -->
  7 +
  8 + <view class="nav mainindex_nav top">
  9 +<view wx:for="{{navbar}}" data-idx="{{index}}" class="nav_item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap" data-categoryid="{{item.id}}">{{item.name}}
  10 + </view>
  11 + </view>
  12 +
  13 +
  14 +</view>
  1 +.container{
  2 + width: 750rpx;
  3 + display: flex;
  4 + flex-flow: column;
  5 +}
  6 +.top{
  7 + width: 750rpx;
  8 + height: 80rpx;
  9 + background: #6EAC3D;
  10 +
  11 + display: flex;
  12 + align-items: center;
  13 + font-size:28rpx;
  14 + font-family:PingFang SC;
  15 + font-weight:600;
  16 + color:rgba(255,255,255,0.5);
  17 + opacity:1;
  18 + overflow-x: scroll;
  19 +}
  20 +.nav_item{
  21 + width: 200rpx;
  22 + text-align: center;
  23 +}
  24 +.active{
  25 + color: #FFFFFF;
  26 + position: relative;
  27 +}
  28 +.active:before{
  29 + content: "";
  30 + width:48rpx;
  31 + height:4rpx;
  32 + background:rgba(255,255,255,1);
  33 + opacity:1;
  34 + position: absolute;
  35 + left: 0;
  36 + right: 0;
  37 + bottom: -20rpx;
  38 + margin: 0 auto;
  39 +}
@@ -37,7 +37,7 @@ @@ -37,7 +37,7 @@
37 "list": [] 37 "list": []
38 }, 38 },
39 "miniprogram": { 39 "miniprogram": {
40 - "current": 3, 40 + "current": 4,
41 "list": [ 41 "list": [
42 { 42 {
43 "id": -1, 43 "id": -1,
@@ -64,6 +64,13 @@ @@ -64,6 +64,13 @@
64 "id": -1, 64 "id": -1,
65 "name": "收藏", 65 "name": "收藏",
66 "pathName": "pages/mine/collect/collect", 66 "pathName": "pages/mine/collect/collect",
  67 + "query": "",
  68 + "scene": null
  69 + },
  70 + {
  71 + "id": -1,
  72 + "name": "我的订单",
  73 + "pathName": "pages/mine/myOrder/myOrder",
67 "scene": null 74 "scene": null
68 } 75 }
69 ] 76 ]