Skip to content

严立 / mini-shimao

Go to a project
Commit 97317f00 by 严立
Options

LL - 我的订单

parent 4b293916
Inline Side-by-side
Showing with 199 additions and 72 deletions
app.json
{
"pages": [
"pages/mine/order/order",
"pages/home/home/home",
"pages/home/dynamic/dynamic",
......@@ -31,7 +31,7 @@
"pages/campsite/home-mirror/home-mirror",
"pages/mine/home/home",
"pages/mine/info/info",
"pages/mine/order/order",
"pages/mine/card/card",
"pages/mine/accumulate/accumulate",
"pages/mine/appointment/appointment",
......@@ -41,8 +41,8 @@
"pages/mine/authentication-input/authentication-input",
"pages/mine/question/question",
"pages/mine/question-more/question-more",
"pages/pay/home/home",
"pages/pay/home/home",
"pages/pay/order-input/order-input",
"pages/pay/order-detail/order-detail",
"pages/pay/coupon/coupon",
......
pages/mine/home/home.js
......@@ -6,6 +6,8 @@ Page({
* 页面的初始数据
*/
data: {
imageBase: App.globalData.appImageBase,
mobile: '',
nickName: '',
avatarUrl: '/pages/mine/home/image/avatar.png',
......@@ -242,6 +244,18 @@ Page({
toHide: function (array) {
var mphone = array.substring(0, 3) + '****' + array.substring(7);
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 @@
</view>
<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">
<view slot="left-section">
<image class="fontImg" src="./image/myactive.png"></image>
......
pages/mine/home/home.wxss
......@@ -26,7 +26,7 @@
.mine-info view:nth-child(2) text {
font-size: 26rpx;
color: #959DA9;
color: #959da9;
}
.status {
......@@ -34,20 +34,20 @@
height: 130rpx;
padding: 24rpx 32rpx 24rpx 40rpx;
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) {
font-size: 30rpx;
font-weight: bolder;
color:rgba(255,227,195,1);
color: rgba(255, 227, 195, 1);
}
.status-symbol text:nth-child(2) {
margin-top: 10rpx;
font-size: 22rpx;
font-weight:300;
color: #F1DBBD;
font-weight: 300;
color: #f1dbbd;
}
.status-operation {
......@@ -55,7 +55,7 @@
height: 52rpx;
border-radius: 4px;
/* 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;
font-size: 26rpx;
}
......@@ -65,11 +65,13 @@
font-weight: bolder;
color: #483522;
}
.status-operation image{
.status-operation image {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.menu {
width: 750rpx;
margin-top: 38rpx;
......@@ -88,42 +90,51 @@
font-size: 30rpx;
border-bottom: none;
}
.listClass{
.listClass {
border-bottom: none !important;
}
.my-activities{
.my-activities {
width: 798rpx;
overflow-x: scroll;
height: 300rpx;
white-space: nowrap;
}
.my-activities::-webkit-scrollbar {display:none}
.my-activities-item{
margin-top:15rpx ;
.my-activities::-webkit-scrollbar {
display: none;
}
.my-activities-item {
margin-top: 15rpx;
height: 80%;
width: 600rpx;
margin-right: 40rpx;
display: inline-block;
position: relative;
}
.my-activities-item:last-child{
width:40rpx !important;
.my-activities-item:last-child {
width: 40rpx !important;
background-color: white;
}
.my-activities-top{
.my-activities-top {
position: absolute;
top: 0;
/* width: 350rpx; */
height: 60rpx;
background-color: rgb(2, 0, 2);
color: white;
line-height:60rpx ;
line-height: 60rpx;
z-index: 2;
border-radius: 3px;
text-align: center;
font-size: 30rpx;
}
.my-activities-bottom{
.my-activities-bottom {
width: 100%;
height: 220rpx;
position: absolute;
......@@ -131,80 +142,87 @@
background-color: rgb(239, 242, 250);
border-radius: 3px;
}
.my-activities-bottom-view{
.my-activities-bottom-view {
display: flex;
flex-direction: column;
justify-content: center;
height: 110rpx;
margin-top: 70rpx;
}
.my-activities-title{
padding-left:50rpx ;
}
.my-activities-title {
padding-left: 50rpx;
line-height: 2;
font-size:30rpx;
font-weight:500;
color:rgba(21,25,31,1);
font-size: 30rpx;
font-weight: 500;
color: rgba(21, 25, 31, 1);
}
.my-activities-content{
.my-activities-content {
font-size: 26rpx;
font-weight:400;
color:rgba(101,110,123,1);
padding-left:50rpx ;
font-weight: 400;
color: rgba(101, 110, 123, 1);
padding-left: 50rpx;
line-height: 2;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.subscribe{
.subscribe {
width: 150rpx;
height: 70rpx;
position: absolute;
border: 1px solid #15191F;
border: 1px solid #15191f;
border-radius: 3px;
right: 50rpx;
line-height: 70rpx;
text-align: center;
font-size: 26rpx;
top:92rpx ;
top: 92rpx;
font-weight: 500;
color: #15191F;
color: #15191f;
}
.fontImg{
.fontImg {
width: 120rpx;
height: 30rpx;
}
.approve{
.approve {
padding-top: 100rpx;
}
.approve-icon{
.approve-icon {
width: 168rpx;
height: 103rpx;
}
.rule{
width:148rpx;
height:64rpx;
background:linear-gradient(180deg,rgba(252,239,224,1) 0%,rgba(196,174,151,1) 100%);
font-size:26rpx;
.rule {
width: 148rpx;
height: 64rpx;
background: linear-gradient(180deg, rgba(252, 239, 224, 1) 0%, rgba(196, 174, 151, 1) 100%);
font-size: 26rpx;
line-height: 54rpx;
color:rgba(24,26,35,1);
color: rgba(24, 26, 35, 1);
text-align: center;
margin-left: -60rpx;
z-index: -1;
border-radius:4px;
border:1px solid;
border-image:linear-gradient(180deg, rgba(255,237,215,1), rgba(113,95,76,1)) 2 2;
border-radius: 4px;
border: 1px solid;
border-image: linear-gradient(180deg, rgba(255, 237, 215, 1), rgba(113, 95, 76, 1)) 2 2;
margin-top: 10rpx;
}
.mask-content{
.mask-content {
width: 606rpx;
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;
height: 80rpx;
background-color: rgb(172, 169, 170);
......@@ -213,32 +231,48 @@
margin-top: 45rpx;
border-radius: 50%;
line-height: 80rpx;
}
.mask-img{
}
.mask-img {
width: 274rpx;
height: 52rpx;
margin-top: 76rpx;
}
.mask-icon{
}
.mask-icon {
width: 33rpx;
height: 33rpx;
}
.mask-font{
}
.mask-font {
font-size: 50rpx;
color: white;
margin:0 26rpx 0 26rpx;
}
.mask-items{
margin: 0 26rpx 0 26rpx;
}
.mask-items {
width: 426rpx;
margin: auto;
margin-top: 50rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.maskItem{
font-weight:400;
font-size:26rpx;
color:rgba(246,219,191,1);
}
.maskItem {
font-weight: 400;
font-size: 26rpx;
color: rgba(246, 219, 191, 1);
margin-bottom: 30rpx;
}
\ No newline at end of file
}
/* 二期样式 */
.order {
}
.order image {
width: 32rpx;
height: 32rpx;
}
pages/mine/order/order.js
Page({
data: {
statusActive: 0,
statusList: [
{
'name': '全部',
}
],
},
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-->
<text>pages/home/home/home.wxml</text>
<view class="navigation-order">
</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 */
\ No newline at end of file
.navigation-order {
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