作者 乔爽

update

{
"pages": [
"pages/mine/myOrder/myOrder",
"pages/mine/addr_2/addr_2",
"pages/mine/addr_1/addr_1",
"pages/homeindex/homeindex",
... ...
... ... @@ -2,7 +2,153 @@
<view class='container'>
<view class='mid'>
<view class='mid_item'>
<!-- 顶部 -->
<view class='mid_item_top'>
<!-- 左边 -->
<view class='mid_item_top_left'>
<view class='top_left_pic'>
<image src='../../../img/goods_1.png'></image>
</view>
<view class='top_left_text'>
距结束23时59分
</view>
</view>
<!-- 右边 -->
<view class='mid_item_top_right'>
<!-- 右上 -->
<view class='right_top'>
<view class='right_top_lef'>
纯进口有机菜花
</view>
<view class='right_top_rig'>
产地:智力
</view>
</view>
<!-- 右中1 -->
<view class='right_mid'>
<view class='right_mid_lef'>
<view class='right_mid_lef_color'></view>
</view>
<view class='right_mid_rig'>
42%
</view>
</view>
<!-- 右中2 -->
<view class='right_text'>
已拼300份,目标500份
</view>
<!-- 右下 -->
<view class='right_bottom'>
<!-- 右下左 -->
<view class='right_bottom_lef'>
<span class='RBM'>¥</span>
<span class='number'>52/</span>
<span class='text'>1磅1份</span>
</view>
<!-- 右下中 -->
<view class='right_bottom_mid'>
<view class='right_bottom_mid_t'>
40mm-50m
</view>
<view class='right_bottom_mid_b'>
番茄果径
</view>
</view>
<!-- 右下右 -->
<view class='right_bottom_rig'>
立即参团
</view>
</view>
</view>
</view>
<view class='mid_item_bottom'>
<view class='mid_item_bottom_left'>
经典推荐
</view>
<!-- 竖线 -->
<view class='mid_line'></view>
<!-- 底部文本 -->
<view class='mid_item_bottom_bot'>
智利进口,绿色健康,硕大饱满
</view>
</view>
</view>
<view class='mid_item'>
<!-- 顶部 -->
<view class='mid_item_top'>
<!-- 左边 -->
<view class='mid_item_top_left'>
<view class='top_left_pic'>
<image src='../../../img/goods_1.png'></image>
</view>
<view class='top_left_text'>
距结束2时22分
</view>
</view>
<!-- 右边 -->
<view class='mid_item_top_right'>
<!-- 右上 -->
<view class='right_top'>
<view class='right_top_lef'>
纯进口有机菜花
</view>
<view class='right_top_rig'>
产地:智力
</view>
</view>
<!-- 右中1 -->
<view class='right_mid'>
<view class='right_mid_lef'>
<view class='right_mid_lef_color'></view>
</view>
<view class='right_mid_rig'>
42%
</view>
</view>
<!-- 右中2 -->
<view class='right_text'>
已拼300份,目标500份
</view>
<!-- 右下 -->
<view class='right_bottom'>
<!-- 右下左 -->
<view class='right_bottom_lef'>
<span class='RBM'>¥</span>
<span class='number'>52/</span>
<span class='text'>1磅1份</span>
</view>
<!-- 右下中 -->
<view class='right_bottom_mid'>
<view class='right_bottom_mid_t'>
40mm-50m
</view>
<view class='right_bottom_mid_b'>
番茄果径
</view>
</view>
<!-- 右下右 -->
<view class='right_bottom_rig'>
立即参团
</view>
</view>
</view>
</view>
<view class='mid_item_bottom'>
<view class='mid_item_bottom_left'>
经典推荐
</view>
<!-- 竖线 -->
<view class='mid_line'></view>
<!-- 底部文本 -->
<view class='mid_item_bottom_bot'>
智利进口,绿色健康,硕大饱满
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
... ... @@ -6,14 +6,202 @@
flex-flow: column;
}
.mid{
margin-top: 32rpx;
margin-top: 16rpx;
display: flex;
flex-flow: column;
}
.mid_item{
margin-top: 16rpx;
width:688rpx;
height:400rpx;
/* height:400rpx; */
background:rgba(249,250,252,1);
opacity:1;
border-radius:8rpx;
display: flex;
align-items: center;
flex-flow: column;
box-sizing: border-box;
padding: 52rpx 16rpx 48rpx;
}
.mid_item_top{
display: flex;
width: 100%;
}
.mid_item_top_left{
width:208rpx;
height:208rpx;
/* background:rgba(250,250,250,1); */
opacity:1;
display: flex;
flex-flow: column;
}
.top_left_pic{
width: 208rpx;
height: 160rpx;
display: flex;
}
.top_left_pic image{
width: 100%;
height: 100%;
}
.top_left_text{
height:48rpx;
background:rgba(251,4,4,1);
opacity:0.2;
text-align: center;
font-size:24rpx;
font-family:PingFang SC;
font-weight:400;
line-height:48rpx;
color:rgba(255,255,255,1);
}
.mid_item_top_right{
width: 100%;
margin-left: 14rpx;
}
.right_top{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
}
.right_top_lef{
font-size:32rpx;
font-family:PingFang SC;
font-weight:600;
color:rgba(51,51,51,1);
opacity:1;
}
.right_top_rig{
font-size:22rpx;
font-family:PingFang SC;
font-weight:400;
line-height:32rpx;
color:rgba(204,204,204,1);
opacity:1;
}
.right_mid{
margin-top: 16rpx;
display: flex;
align-items: center;
}
.right_mid_lef{
width:288rpx;
height:16rpx;
background:rgba(236,236,236,1);
opacity:1;
border-radius:8rpx;
}
.right_mid_lef_color{
width:206rpx;
height:16rpx;
background:rgba(181,222,150,1);
opacity:1;
border-radius:8rpx;
}
.right_mid_rig{
margin-left: 16rpx;
font-size:24rpx;
font-family:PingFang SC;
font-weight:400;
line-height:34rpx;
color:rgba(181,222,150,1);
opacity:1;
}
.right_text{
margin-top: 14rpx;
font-size:22rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(204,204,204,1);
opacity:1;
}
.right_bottom{
display: flex;
align-items: center;
justify-content: space-between;
}
.RBM{
font-size: 22rpx;
color: #ff0000;
}
.number{
font-size: 30rpx;
color: #ff0000;
}
.text{
font-size:22rpx;
font-family:PingFang SC;
font-weight:400;
line-height:32rpx;
color:rgba(204,204,204,1);
opacity:1;
}
.right_bottom_mid_t{
font-size:22rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
opacity:1;
}
.right_bottom_mid_b{
font-size:18rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
opacity:1;
}
.right_bottom_rig{
width:144rpx;
height:48rpx;
line-height: 48rpx;
background:rgba(249,150,20,1);
box-shadow:0rpx 2rpx 12rpx rgba(255,145,0,0.16);
opacity:1;
border-radius:24rpx;
text-align: center;
font-size:26rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
}
.mid_item_bottom{
margin-top: 32rpx;
width:640rpx;
height:80rpx;
background:rgba(181,222,150,0.1);
border-radius:16rpx;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0 32rpx;
}
.mid_item_bottom_left{
font-size:30rpx;
font-family:汉真广标;
font-weight:400;
color:rgba(110,172,61,1);
opacity:1;
}
.mid_line{
margin: 0 36rpx;
width:2rpx;
height:60rpx;
background:rgba(181,222,150,1);
opacity:1;
border-radius:4rpx;
}
.mid_item_bottom_bot{
font-size:24rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
opacity:1;
}
\ No newline at end of file
... ...
Page({
/**
* 页面的初始数据
*/
data: {
navbar: [{
name: '全部'
},
{
name: '待付款'
},
{
name: '待拼团'
},
{
name: '代发货'
},
{
name: '待完成'
}],
currentTab: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
navbarTap: function (e) {
console.log(88)
let that = this;
this.setData({
currentTab: e.currentTarget.dataset.idx,
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{
"navigationBarTitleText": "我的订单",
"navigationBarBackgroundColor": "#6EAC3D",
"navigationBarTextStyle": "white"
}
\ No newline at end of file
... ...
<view class='container'>
<!-- 顶部菜单栏 -->
<!-- <view class='top'>
<view class='top_item'></view>
</view> -->
<view class="nav mainindex_nav top">
<view wx:for="{{navbar}}" data-idx="{{index}}" class="nav_item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap" data-categoryid="{{item.id}}">{{item.name}}
</view>
</view>
</view>
\ No newline at end of file
... ...
.container{
width: 750rpx;
display: flex;
flex-flow: column;
}
.top{
width: 750rpx;
height: 80rpx;
background: #6EAC3D;
display: flex;
align-items: center;
font-size:28rpx;
font-family:PingFang SC;
font-weight:600;
color:rgba(255,255,255,0.5);
opacity:1;
overflow-x: scroll;
}
.nav_item{
width: 200rpx;
text-align: center;
}
.active{
color: #FFFFFF;
position: relative;
}
.active:before{
content: "";
width:48rpx;
height:4rpx;
background:rgba(255,255,255,1);
opacity:1;
position: absolute;
left: 0;
right: 0;
bottom: -20rpx;
margin: 0 auto;
}
... ...
... ... @@ -37,7 +37,7 @@
"list": []
},
"miniprogram": {
"current": 3,
"current": 4,
"list": [
{
"id": -1,
... ... @@ -64,6 +64,13 @@
"id": -1,
"name": "收藏",
"pathName": "pages/mine/collect/collect",
"query": "",
"scene": null
},
{
"id": -1,
"name": "我的订单",
"pathName": "pages/mine/myOrder/myOrder",
"scene": null
}
]
... ...