Skip to content

严立 / mini-shimao

Go to a project
Commit 97317f00 by 严立
Options

LL - 我的订单

parent 4b293916
Inline Side-by-side
Showing with 215 additions and 88 deletions
app.json
{ {
"pages": [ "pages": [
"pages/mine/order/order",
"pages/home/home/home", "pages/home/home/home",
"pages/home/dynamic/dynamic", "pages/home/dynamic/dynamic",
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
"pages/campsite/home-mirror/home-mirror", "pages/campsite/home-mirror/home-mirror",
"pages/mine/home/home", "pages/mine/home/home",
"pages/mine/info/info", "pages/mine/info/info",
"pages/mine/order/order",
"pages/mine/card/card", "pages/mine/card/card",
"pages/mine/accumulate/accumulate", "pages/mine/accumulate/accumulate",
"pages/mine/appointment/appointment", "pages/mine/appointment/appointment",
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
"pages/mine/authentication-input/authentication-input", "pages/mine/authentication-input/authentication-input",
"pages/mine/question/question", "pages/mine/question/question",
"pages/mine/question-more/question-more", "pages/mine/question-more/question-more",
"pages/pay/home/home",
"pages/pay/home/home",
"pages/pay/order-input/order-input", "pages/pay/order-input/order-input",
"pages/pay/order-detail/order-detail", "pages/pay/order-detail/order-detail",
"pages/pay/coupon/coupon", "pages/pay/coupon/coupon",
......
pages/mine/home/home.js
...@@ -6,6 +6,8 @@ Page({ ...@@ -6,6 +6,8 @@ Page({
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
imageBase: App.globalData.appImageBase,
mobile: '', mobile: '',
nickName: '', nickName: '',
avatarUrl: '/pages/mine/home/image/avatar.png', avatarUrl: '/pages/mine/home/image/avatar.png',
...@@ -242,6 +244,18 @@ Page({ ...@@ -242,6 +244,18 @@ Page({
toHide: function (array) { toHide: function (array) {
var mphone = array.substring(0, 3) + '****' + array.substring(7); var mphone = array.substring(0, 3) + '****' + array.substring(7);
return mphone; return mphone;
} },
// 二期代码
onOrder: function () {
console.log('onOrder')
wx.navigateTo({
url: '/pages/mine/order/order'
})
},
}) })
\ No newline at end of file
pages/mine/home/home.wxml
...@@ -61,6 +61,24 @@ ...@@ -61,6 +61,24 @@
</view> </view>
<view class="menu"> <view class="menu">
<view class="order">
<view class="row con-b align-c">
<view class="row align-c">
<text>我的订单</text>
</view>
<view class="row align-c" bindtap="onOrder">
<text>查看全部</text>
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
</view>
<view></view>
</view>
<l-list l-content-class="menu-title" l-class="listClass" bind:lintap="myActivity"> <l-list l-content-class="menu-title" l-class="listClass" bind:lintap="myActivity">
<view slot="left-section"> <view slot="left-section">
<image class="fontImg" src="./image/myactive.png"></image> <image class="fontImg" src="./image/myactive.png"></image>
......
pages/mine/home/home.wxss
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
.mine-info view:nth-child(2) text { .mine-info view:nth-child(2) text {
font-size: 26rpx; font-size: 26rpx;
color: #959DA9; color: #959da9;
} }
.status { .status {
...@@ -34,20 +34,20 @@ ...@@ -34,20 +34,20 @@
height: 130rpx; height: 130rpx;
padding: 24rpx 32rpx 24rpx 40rpx; padding: 24rpx 32rpx 24rpx 40rpx;
border-radius: 4px; border-radius: 4px;
background: linear-gradient(180deg,rgba(63,67,87,1) 0%,rgba(37,37,50,1) 100%); background: linear-gradient(180deg, rgba(63, 67, 87, 1) 0%, rgba(37, 37, 50, 1) 100%);
} }
.status-symbol text:nth-child(1) { .status-symbol text:nth-child(1) {
font-size: 30rpx; font-size: 30rpx;
font-weight: bolder; font-weight: bolder;
color:rgba(255,227,195,1); color: rgba(255, 227, 195, 1);
} }
.status-symbol text:nth-child(2) { .status-symbol text:nth-child(2) {
margin-top: 10rpx; margin-top: 10rpx;
font-size: 22rpx; font-size: 22rpx;
font-weight:300; font-weight: 300;
color: #F1DBBD; color: #f1dbbd;
} }
.status-operation { .status-operation {
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
height: 52rpx; height: 52rpx;
border-radius: 4px; border-radius: 4px;
/* border: 1px solid rgba(72, 53, 34, 1) !important; */ /* border: 1px solid rgba(72, 53, 34, 1) !important; */
background:linear-gradient(180deg,rgba(255,243,227,1) 0%,rgba(255,227,195,1) 100%); background: linear-gradient(180deg, rgba(255, 243, 227, 1) 0%, rgba(255, 227, 195, 1) 100%);
color: #282836; color: #282836;
font-size: 26rpx; font-size: 26rpx;
} }
...@@ -65,11 +65,13 @@ ...@@ -65,11 +65,13 @@
font-weight: bolder; font-weight: bolder;
color: #483522; color: #483522;
} }
.status-operation image{
.status-operation image {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
margin-right: 8rpx; margin-right: 8rpx;
} }
.menu { .menu {
width: 750rpx; width: 750rpx;
margin-top: 38rpx; margin-top: 38rpx;
...@@ -88,42 +90,51 @@ ...@@ -88,42 +90,51 @@
font-size: 30rpx; font-size: 30rpx;
border-bottom: none; border-bottom: none;
} }
.listClass{
.listClass {
border-bottom: none !important; border-bottom: none !important;
} }
.my-activities{
.my-activities {
width: 798rpx; width: 798rpx;
overflow-x: scroll; overflow-x: scroll;
height: 300rpx; height: 300rpx;
white-space: nowrap; white-space: nowrap;
} }
.my-activities::-webkit-scrollbar {display:none}
.my-activities-item{ .my-activities::-webkit-scrollbar {
margin-top:15rpx ; display: none;
}
.my-activities-item {
margin-top: 15rpx;
height: 80%; height: 80%;
width: 600rpx; width: 600rpx;
margin-right: 40rpx; margin-right: 40rpx;
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
.my-activities-item:last-child{
width:40rpx !important; .my-activities-item:last-child {
width: 40rpx !important;
background-color: white; background-color: white;
} }
.my-activities-top{
.my-activities-top {
position: absolute; position: absolute;
top: 0; top: 0;
/* width: 350rpx; */ /* width: 350rpx; */
height: 60rpx; height: 60rpx;
background-color: rgb(2, 0, 2); background-color: rgb(2, 0, 2);
color: white; color: white;
line-height:60rpx ; line-height: 60rpx;
z-index: 2; z-index: 2;
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
font-size: 30rpx; font-size: 30rpx;
} }
.my-activities-bottom{
.my-activities-bottom {
width: 100%; width: 100%;
height: 220rpx; height: 220rpx;
position: absolute; position: absolute;
...@@ -131,80 +142,87 @@ ...@@ -131,80 +142,87 @@
background-color: rgb(239, 242, 250); background-color: rgb(239, 242, 250);
border-radius: 3px; border-radius: 3px;
} }
.my-activities-bottom-view{
.my-activities-bottom-view {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
height: 110rpx; height: 110rpx;
margin-top: 70rpx; margin-top: 70rpx;
} }
.my-activities-title{
padding-left:50rpx ; .my-activities-title {
padding-left: 50rpx;
line-height: 2; line-height: 2;
font-size:30rpx; font-size: 30rpx;
font-weight:500; font-weight: 500;
color:rgba(21,25,31,1); color: rgba(21, 25, 31, 1);
} }
.my-activities-content{
.my-activities-content {
font-size: 26rpx; font-size: 26rpx;
font-weight:400; font-weight: 400;
color:rgba(101,110,123,1); color: rgba(101, 110, 123, 1);
padding-left:50rpx ; padding-left: 50rpx;
line-height: 2; line-height: 2;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
word-break: break-all; word-break: break-all;
} }
.subscribe{
.subscribe {
width: 150rpx; width: 150rpx;
height: 70rpx; height: 70rpx;
position: absolute; position: absolute;
border: 1px solid #15191F; border: 1px solid #15191f;
border-radius: 3px; border-radius: 3px;
right: 50rpx; right: 50rpx;
line-height: 70rpx; line-height: 70rpx;
text-align: center; text-align: center;
font-size: 26rpx; font-size: 26rpx;
top:92rpx ; top: 92rpx;
font-weight: 500; font-weight: 500;
color: #15191F; color: #15191f;
} }
.fontImg{
.fontImg {
width: 120rpx; width: 120rpx;
height: 30rpx; height: 30rpx;
} }
.approve{
.approve {
padding-top: 100rpx; padding-top: 100rpx;
} }
.approve-icon{
.approve-icon {
width: 168rpx; width: 168rpx;
height: 103rpx; height: 103rpx;
} }
.rule{
width:148rpx; .rule {
height:64rpx; width: 148rpx;
background:linear-gradient(180deg,rgba(252,239,224,1) 0%,rgba(196,174,151,1) 100%); height: 64rpx;
font-size:26rpx; background: linear-gradient(180deg, rgba(252, 239, 224, 1) 0%, rgba(196, 174, 151, 1) 100%);
font-size: 26rpx;
line-height: 54rpx; line-height: 54rpx;
color:rgba(24,26,35,1); color: rgba(24, 26, 35, 1);
text-align: center; text-align: center;
margin-left: -60rpx; margin-left: -60rpx;
z-index: -1; z-index: -1;
border-radius:4px; border-radius: 4px;
border:1px solid; border: 1px solid;
border-image:linear-gradient(180deg, rgba(255,237,215,1), rgba(113,95,76,1)) 2 2; border-image: linear-gradient(180deg, rgba(255, 237, 215, 1), rgba(113, 95, 76, 1)) 2 2;
margin-top: 10rpx; margin-top: 10rpx;
} }
.mask-content{
.mask-content {
width: 606rpx; width: 606rpx;
height: 974rpx; height: 974rpx;
background:linear-gradient(180deg,rgba(63,67,87,1) 0%,rgba(37,37,50,1) 100%); background: linear-gradient(180deg, rgba(63, 67, 87, 1) 0%, rgba(37, 37, 50, 1) 100%);
} }
.close{ .close {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
background-color: rgb(172, 169, 170); background-color: rgb(172, 169, 170);
...@@ -213,32 +231,48 @@ ...@@ -213,32 +231,48 @@
margin-top: 45rpx; margin-top: 45rpx;
border-radius: 50%; border-radius: 50%;
line-height: 80rpx; line-height: 80rpx;
} }
.mask-img{
width: 274rpx; .mask-img {
height: 52rpx; width: 274rpx;
margin-top: 76rpx; height: 52rpx;
} margin-top: 76rpx;
.mask-icon{ }
width: 33rpx;
height: 33rpx; .mask-icon {
} width: 33rpx;
.mask-font{ height: 33rpx;
font-size: 50rpx; }
color: white;
margin:0 26rpx 0 26rpx; .mask-font {
} font-size: 50rpx;
.mask-items{ color: white;
width: 426rpx; margin: 0 26rpx 0 26rpx;
margin: auto; }
margin-top: 50rpx;
display: flex; .mask-items {
flex-wrap: wrap; width: 426rpx;
justify-content: space-between; margin: auto;
} margin-top: 50rpx;
.maskItem{ display: flex;
font-weight:400; flex-wrap: wrap;
font-size:26rpx; justify-content: space-between;
color:rgba(246,219,191,1); }
.maskItem {
font-weight: 400;
font-size: 26rpx;
color: rgba(246, 219, 191, 1);
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
\ No newline at end of file
/* 二期样式 */
.order {
}
.order image {
width: 32rpx;
height: 32rpx;
}
pages/mine/order/order.js
Page({ Page({
data: { data: {
statusActive: 0,
statusList: [
{
'name': '全部',
}
],
}, },
onLoad: function (options) { onLoad: function (options) {
}, },
onSelectionStatus: function (event) {
console.log(event.currentTarget.dataset.type)
this.setData({
statusActive: Number(event.currentTarget.dataset.type)
})
},
}) })
\ No newline at end of file
pages/mine/order/order.wxml
<!--pages/home/home/home.wxml--> <view class="navigation-order">
<text>pages/home/home/home.wxml</text>
</view>
<view class="container-order">
<view class="status row con-b align-c">
<view class="status-item status-item-active row con-c align-c" data-type="1" bindtap="onSelectionStatus">
<text>全部</text>
</view>
<view class="status-item row con-c align-c" data-type="2" bindtap="onSelectionStatus">
<text>待付款</text>
</view>
<view class="status-item row con-c align-c" data-type="3" bindtap="onSelectionStatus">
<text>待使用</text>
</view>
<view class="status-item row con-c align-c" data-type="4" bindtap="onSelectionStatus">
<text>取消/过期</text>
</view>
</view>
</view>
\ No newline at end of file
pages/mine/order/order.wxss
/* pages/home/home/home.wxss */ .navigation-order {
\ No newline at end of file width: 750rpx;
height: 176rpx;
background: #FFFFFF;
}
.container {
position: relative;
}
.status {
width: 750rpx;
height: 112rpx;
padding: 0 34rpx 0 64rpx;
border-bottom: 1px #E2E7EF solid;
}
.status-item {
height: 112rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #959DA9;
}
.status-item-active {
color: #000000;
border-bottom: 4px #000000 solid;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment