Browse Source

[我的订单][修改]:我的订单样式的修改

tags/2.2.4
meo 6 years ago
parent
commit
3c5d748124
7 changed files with 198 additions and 99 deletions
  1. BIN
      assets/img/bg.png
  2. +4
    -1
      components/coupons/index.wxss
  3. +2
    -2
      pages/order/detail/index.wxml
  4. +65
    -34
      pages/order/detail/index.wxss
  5. +10
    -11
      pages/order/index/index.wxml
  6. +73
    -30
      pages/order/index/index.wxss
  7. +44
    -21
      pages/orderquanma/index.wxss

BIN
assets/img/bg.png View File

Before After
Width: 1152  |  Height: 1980  |  Size: 13 KiB Width: 1380  |  Height: 3200  |  Size: 22 KiB

+ 4
- 1
components/coupons/index.wxss View File

@@ -7,7 +7,6 @@
position: relative; position: relative;
height: 184rpx; height: 184rpx;
} }

.coupons-border { .coupons-border {
height: 1rpx; height: 1rpx;
/* width: 100%; */ /* width: 100%; */
@@ -226,3 +225,7 @@ scroll-view {
font-size: 26rpx; font-size: 26rpx;
line-height: 15rpx; line-height: 15rpx;
} }
.navigator-hover{
opacity: 1!important;
background: #fff;
}

+ 2
- 2
pages/order/detail/index.wxml View File

@@ -19,7 +19,7 @@
<text>购买数量:</text>1件 <text>购买数量:</text>1件
</view> --> </view> -->
<view> <view>
<text>下单时间</text>{{createDate}}</view>
<text>下单时间</text>{{createDate}}</view>
</view> </view>
</view> </view>


@@ -61,7 +61,7 @@
</view> </view>
<view> <view>
<text>订单金额</text> <text>订单金额</text>
<text class="jine">{{order.salePrice/100}}</text>
<text class="jine">{{order.salePrice/100}}</text>
</view> </view>
</view> </view>
<!-- 待付款 显示立即购买的按钮 --> <!-- 待付款 显示立即购买的按钮 -->


+ 65
- 34
pages/order/detail/index.wxss View File

@@ -1,7 +1,9 @@
@import "../../../app.wxss"; @import "../../../app.wxss";

.order { .order {
width: 100%; width: 100%;
} }

.tips { .tips {
width: 92%; width: 92%;
height: 88rpx; height: 88rpx;
@@ -10,10 +12,12 @@
padding: 0 4%; padding: 0 4%;
line-height: 88rpx; line-height: 88rpx;
} }

.tips text:nth-child(2) { .tips text:nth-child(2) {
font-size: 24rpx; font-size: 24rpx;
padding-left: 16rpx; padding-left: 16rpx;
} }

.tips text:nth-child(1) { .tips text:nth-child(1) {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
@@ -25,28 +29,31 @@
display: inline-block; display: inline-block;
font-size: 28rpx; font-size: 28rpx;
} }

.section { .section {
margin-top: 2%; margin-top: 2%;
} }

.detail_msg { .detail_msg {
width: 92%; width: 92%;
height: 220rpx !important;
background: #fff; background: #fff;
display: flex; display: flex;
margin: 0 4%; margin: 0 4%;
margin-top: 2%;
/* border-bottom: 1px solid #ededed; */
margin-top: 30rpx;
padding-bottom: 30rpx;
border-bottom: 1rpx solid #eee;
} }


.logo { .logo {
width: 248rpx;
height: 184rpx;
border-radius: 30rpx;
display: block;
width: 180rpx;
height: 180rpx;
border-radius: 16rpx;
} }


.logo image { .logo image {
width: 100%;
height: 100%;
width: 180rpx;
height: 180rpx;
border-radius: 16rpx; border-radius: 16rpx;
} }


@@ -60,12 +67,11 @@
width: 100%; width: 100%;
} }


.info view:nth-child(1) {
margin-bottom: 30rpx;
}


.info view:nth-child(1) text { .info view:nth-child(1) text {
font-size: 30rpx; font-size: 30rpx;
color: #000;
letter-spacing: 0;
} }


.info view:nth-child(1) text:nth-child(2) { .info view:nth-child(1) text:nth-child(2) {
@@ -73,22 +79,18 @@
font-size: 24rpx; font-size: 24rpx;
} }


.info view:nth-child(2),
.info view:nth-child(3) {
color: #ff3434;
.info view:nth-child(2), .info view:nth-child(3) {
font-size: 24rpx; font-size: 24rpx;
padding-left: 4%; padding-left: 4%;
color: #919191;
letter-spacing: 0;
} }


.info view:nth-child(2) text,
.info view:nth-child(3) text {
.info view:nth-child(2) text, .info view:nth-child(3) text {
font-size: 22rpx; font-size: 22rpx;
color: #b8b8b8; color: #b8b8b8;
} }


.info view:nth-child(3) {
margin-top: 5rpx;
}


.payment { .payment {
width: 92%; width: 92%;
@@ -112,50 +114,59 @@
padding-left: 18rpx; padding-left: 18rpx;
text-decoration: line-through; text-decoration: line-through;
} }

.classif { .classif {
width: 100%;
width: 92%;
padding-left: 4%;
padding-right: 4%;
} }

.classif > view { .classif > view {
height: 88rpx;
line-height: 88rpx;
position: relative;
height: 70rpx;
line-height: 70rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-left: 4%;
padding-right: 4%;
border-bottom: 1rpx solid #eee; border-bottom: 1rpx solid #eee;
} }

.classif > view text { .classif > view text {
font-size: 30rpx;
font-size: 24rpx;
} }

.classif > view text:nth-child(2) { .classif > view text:nth-child(2) {
color: #b8b8b8; color: #b8b8b8;
font-size: 30rpx;
font-size: 24rpx;
} }

.classif > view:nth-child(1) { .classif > view:nth-child(1) {
display: block; display: block;
border-top: 20rpx solid #f8f8f8;
} }

.classif > view:nth-child(1) text:nth-child(2) { .classif > view:nth-child(1) text:nth-child(2) {
padding-left: 15rpx; padding-left: 15rpx;
} }
.classif > view:nth-child(3),
.classif > view:nth-child(4) {
border-top: 20rpx solid #f8f8f8;
}

.classif > view:nth-child(3) view text:nth-child(2) { .classif > view:nth-child(3) view text:nth-child(2) {
padding-left: 15rpx; padding-left: 15rpx;
} }

.classif > view:nth-child(6) text:nth-child(2) { .classif > view:nth-child(6) text:nth-child(2) {
color: #ff3434; color: #ff3434;
font-weight: bold; font-weight: bold;
} }

.spcode { .spcode {
width: 60rpx;
display: inline-block;
margin-top: 15rpx;
position: absolute;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 50rpx;
} }


/*mask*/ /*mask*/

.drawer_screen { .drawer_screen {
position: absolute; position: absolute;
width: 100%; width: 100%;
@@ -178,15 +189,18 @@
margin: -150px 50rpx 0 50rpx; margin: -150px 50rpx 0 50rpx;
border-radius: 3px; border-radius: 3px;
} }

.drawer_title { .drawer_title {
padding: 15px; padding: 15px;
font: 20px "microsoft yahei"; font: 20px "microsoft yahei";
text-align: center; text-align: center;
} }

.drawer_content { .drawer_content {
height: 210px; height: 210px;
overflow-y: scroll; /*超出父盒子高度可滚动*/ overflow-y: scroll; /*超出父盒子高度可滚动*/
} }

.btn_ok { .btn_ok {
padding: 10px; padding: 10px;
font: 20px "microsoft yahei"; font: 20px "microsoft yahei";
@@ -194,12 +208,15 @@
border-top: 1px solid #e8e8ea; border-top: 1px solid #e8e8ea;
color: #3cc51f; color: #3cc51f;
} }

.top { .top {
padding-top: 8px; padding-top: 8px;
} }

.bottom { .bottom {
padding-bottom: 8px; padding-bottom: 8px;
} }

.title { .title {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
@@ -208,40 +225,49 @@
display: inline-block; display: inline-block;
font: 300 28rpx/30px "microsoft yahei"; font: 300 28rpx/30px "microsoft yahei";
} }

.input_base { .input_base {
border: 2rpx solid #ccc; border: 2rpx solid #ccc;
padding-left: 10rpx; padding-left: 10rpx;
margin-right: 50rpx; margin-right: 50rpx;
} }

.input_h30 { .input_h30 {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }

.input_h60 { .input_h60 {
height: 60px; height: 60px;
} }

.input_view { .input_view {
font: 12px "microsoft yahei"; font: 12px "microsoft yahei";
background: #fff; background: #fff;
color: #000; color: #000;
line-height: 30px; line-height: 30px;
} }

input { input {
font: 12px "microsoft yahei"; font: 12px "microsoft yahei";
background: #fff; background: #fff;
color: #000; color: #000;
} }

radio { radio {
margin-right: 20px; margin-right: 20px;
} }

.grid { .grid {
display: -webkit-box; display: -webkit-box;
display: box; display: box;
} }

.col-0 { .col-0 {
-webkit-box-flex: 0; -webkit-box-flex: 0;
box-flex: 0; box-flex: 0;
} }

.col-1 { .col-1 {
-webkit-box-flex: 1; -webkit-box-flex: 1;
box-flex: 1; box-flex: 1;
@@ -250,6 +276,7 @@ radio {
.fl { .fl {
float: left; float: left;
} }

.fr { .fr {
float: right; float: right;
} }
@@ -261,6 +288,7 @@ radio {
clear: both; clear: both;
visibility: hidden; visibility: hidden;
} }

.panel { .panel {
width: 600rpx; width: 600rpx;
border-radius: 10rpx; border-radius: 10rpx;
@@ -270,10 +298,12 @@ radio {
position: relative; position: relative;
z-index: 10000000000; z-index: 10000000000;
} }

.pane2 { .pane2 {
background: #fff; background: #fff;
opacity: 0.6; opacity: 0.6;
} }

.pane2 image { .pane2 image {
width: 500rpx; width: 500rpx;
display: block; display: block;
@@ -318,6 +348,7 @@ radio {
width: 350rpx; width: 350rpx;
height: 350rpx; height: 350rpx;
} }

.jine { .jine {
color: #f96563 !important; color: #f96563 !important;
font-size: 36rpx !important; font-size: 36rpx !important;


+ 10
- 11
pages/order/index/index.wxml View File

@@ -2,7 +2,7 @@
<i-tabs class='tabs' current="{{ current_scroll }}" scroll bindchange="handleChangeScroll"> <i-tabs class='tabs' current="{{ current_scroll }}" scroll bindchange="handleChangeScroll">
<i-tab class='i-tab' wx:for="{{tabs}}" wx:key="unique" key="{{item.key}}" title="{{item.name}}"></i-tab> <i-tab class='i-tab' wx:for="{{tabs}}" wx:key="unique" key="{{item.key}}" title="{{item.name}}"></i-tab>
</i-tabs> </i-tabs>
<view>
<view style='padding-top:90rpx;'>
<view wx:if="{{list.length!=0}}" class='section' wx:for='{{list}}' wx:key='{{index}}'> <view wx:if="{{list.length!=0}}" class='section' wx:for='{{list}}' wx:key='{{index}}'>
<view class='detail_msg'> <view class='detail_msg'>
<view class='logo'> <view class='logo'>
@@ -12,23 +12,22 @@
<view> <view>
<text>{{item.title}}</text> <text>{{item.title}}</text>
<text class='wait' wx:if="{{item.orderStatus==0}}">等待付款</text> <text class='wait' wx:if="{{item.orderStatus==0}}">等待付款</text>
<text wx:if="{{item.orderStatus==3}}">待退款</text>
<text class='sucess' wx:if="{{item.orderStatus==3}}">待退款</text>
<text class='close' wx:if="{{item.orderStatus==2}}">交易关闭</text> <text class='close' wx:if="{{item.orderStatus==2}}">交易关闭</text>
<text wx:if="{{item.orderStatus==4}}">已退款</text>
<text wx:if="{{item.orderStatus==5}}">退款失败</text>
<text class='sucess' wx:if="{{item.orderStatus==4}}">已退款</text>
<text class='sucess' wx:if="{{item.orderStatus==5}}">退款失败</text>
<text class='sucess' wx:if="{{item.orderStatus==1&&item.salePrice==0}}">免费领取</text> <text class='sucess' wx:if="{{item.orderStatus==1&&item.salePrice==0}}">免费领取</text>
<text class='sucess' wx:if="{{item.orderStatus==1&&item.salePrice!=0}}">付款成功</text> <text class='sucess' wx:if="{{item.orderStatus==1&&item.salePrice!=0}}">付款成功</text>
</view> </view>
<view>{{item.subTitle}}</view>
<view>
<text>下单时间:</text>{{item.createDate}}
<view class="sub">{{item.subTitle}}</view>
<view class="value">面额:<text>{{item.price/100}}元</text></view>
<view class="value">下单时间:<text>{{item.createDate}}</text>
</view> </view>
</view> </view>
</view> </view>
<view class='payment'> <view class='payment'>
<view> <view>
<text>¥{{item.salePrice/100}}</text>
<text>¥{{item.price/100}}</text>
<text>实付金额:</text><text>{{item.salePrice/100}}元</text>
</view> </view>
<!-- <!--
orderStatus orderStatus
@@ -45,9 +44,9 @@
<!-- <view wx:if="{{item.orderStatus==2}}" style="background:#999;opacity: .6;" class="btn"> <!-- <view wx:if="{{item.orderStatus==2}}" style="background:#999;opacity: .6;" class="btn">
<text>已取消</text> <text>已取消</text>
</view> --> </view> -->
<view wx:if="{{item.orderStatus==3}}" style="background:#999;opacity: .6;color:#fff;" class="btn">
<!-- <view wx:if="{{item.orderStatus==3}}" style="background:#999;opacity: .6;color:#fff;" class="btn">
<text>待退款</text> <text>待退款</text>
</view>
</view> -->
<view wx:if="{{item.orderStatus==4}}" style="background:#999;opacity: .6;" class="btn"> <view wx:if="{{item.orderStatus==4}}" style="background:#999;opacity: .6;" class="btn">
<text>已退款</text> <text>已退款</text>
</view> </view>


+ 73
- 30
pages/order/index/index.wxss View File

@@ -4,9 +4,15 @@
} }
.tabs { .tabs {
position: fixed;
width: 100% !important; width: 100% !important;
height: 88rpx; height: 88rpx;
top: 0;
left: 0;
right: 0;
text-align: center; text-align: center;
background: #fff;
z-index: 10000000;
} }
.i-tab { .i-tab {
@@ -14,18 +20,14 @@
display: inline-block; display: inline-block;
} }
.section {
margin-top: 2%;
}
.detail_msg { .detail_msg {
width: 92%; width: 92%;
height: 200rpx !important;
background: #fff; background: #fff;
display: flex; display: flex;
margin: 0 4%;
margin-top: 2%;
border-bottom: 1rpx solid #ededed;
margin: 0 30rpx;
padding-bottom: 30rpx;
padding-top: 30rpx;
border-bottom: 1rpx solid #eee;
} }
.logo { .logo {
@@ -34,39 +36,49 @@
height: 180rpx; height: 180rpx;
border: 1px solid #f8f8f8; border: 1px solid #f8f8f8;
border-radius: 16rpx; border-radius: 16rpx;
overflow: hidden;
} }
.logo image { .logo image {
display: block; display: block;
width: 180rpx; width: 180rpx;
height: 180rpx; height: 180rpx;
border-radius: 16rpx;
} }
.info view:nth-child(1) { .info view:nth-child(1) {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 4%;
margin-top: 8rpx;
padding: 0 0 0 4%;
} }
.info { .info {
width: 100%; width: 100%;
} }
.info view:nth-child(1) {
margin-bottom: 15rpx;
.sub {
font-size: 24rpx !important;
color: #919191 !important;
letter-spacing: 0;
line-height: 33rpx;
padding-left: 4%;
} }
.info view:nth-child(1) text { .info view:nth-child(1) text {
display: inline-block;
width: 300rpx;
font-size: 30rpx; font-size: 30rpx;
/* width: 340rpx;
letter-spacing: 0;
height: 42rpx;
overflow: hidden; overflow: hidden;
line-height: 42rpx;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; */
text-overflow: ellipsis;
} }
.info .sucess { .info .sucess {
display: inline-block;
width: 123rpx !important;
overflow: hidden;
font-size: 28rpx; font-size: 28rpx;
color: #02c0ff; color: #02c0ff;
letter-spacing: 0; letter-spacing: 0;
@@ -75,14 +87,20 @@
} }
.wait { .wait {
display: inline-block;
width: 123rpx !important;
overflow: hidden;
font-size: 28rpx; font-size: 28rpx;
color: #ff4949; color: #ff4949;
letter-spacing: 0; letter-spacing: 0;
text-align: right; text-align: right;
line-height: 28rpx;
line-height: 28rpx!important;
} }
.close { .close {
display: inline-block;
width: 123rpx !important;
overflow: hidden;
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #999;
letter-spacing: 0; letter-spacing: 0;
@@ -90,38 +108,63 @@
line-height: 28rpx; line-height: 28rpx;
} }
.info view:nth-child(2), .info view:nth-child(3) {
color: #f96563;
/*
.info view:nth-child(2),
.info view:nth-child(3),
.info view:nth-child(4) {
color: #333;
font-size: 24rpx;
} */
.value {
font-size: 24rpx; font-size: 24rpx;
color: #999;
letter-spacing: 0;
padding-left: 4%; padding-left: 4%;
line-height: 33rpx;
} }
.info view:nth-child(2) text, .info view:nth-child(3) text {
font-size: 22rpx;
color: #b8b8b8;
.value text {
font-size: 24rpx;
color: #333;
letter-spacing: 0;
line-height: 33rpx;
} }
/* .info view:nth-child(2) text, .info view:nth-child(3) text {
font-size: 22rpx;
} */
.info view:nth-child(3) { .info view:nth-child(3) {
margin-top: 5rpx;
margin-top: 20rpx;
} }
.payment { .payment {
position: relative; position: relative;
width: 92%; width: 92%;
height: 120rpx;
line-height: 120rpx;
height: 88rpx;
line-height: 88rpx;
padding: 0 4%; padding: 0 4%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 20rpx solid #f8f8f8;
border-bottom: 1rpx solid #eee;
} }
.payment view:nth-child(1) text:nth-child(1) { .payment view:nth-child(1) text:nth-child(1) {
font-size: 36rpx;
color: #f96563;
font-size: 24rpx;
color: #1f2d3d;
letter-spacing: 0;
} }
.payment view:nth-child(1) text:nth-child(2) { .payment view:nth-child(1) text:nth-child(2) {
font-size: 28rpx;
color: #ff4949;
letter-spacing: 0;
margin-left: 10rpx;
}
.payment view:nth-child(1) text:nth-child(3) {
font-size: 24rpx; font-size: 24rpx;
color: #b4b4b4; color: #b4b4b4;
padding-left: 18rpx; padding-left: 18rpx;
@@ -135,8 +178,8 @@
margin: auto; margin: auto;
right: 20rpx; right: 20rpx;
width: 180rpx; width: 180rpx;
height: 60rpx;
line-height: 60rpx;
height: 52rpx;
line-height: 52rpx;
text-align: center; text-align: center;
color: #fff; color: #fff;
float: right; float: right;
@@ -147,7 +190,7 @@
.payment view:nth-child(2) text { .payment view:nth-child(2) text {
font-size: 30rpx; font-size: 30rpx;
color: #02C0FF;
color: #02c0ff;
} }
.dingdan { .dingdan {


+ 44
- 21
pages/orderquanma/index.wxss View File

@@ -1,10 +1,12 @@
page { page {
background: #4e99f8;
background: #02c0ff;
} }

.couponbg { .couponbg {
position: relative; position: relative;
width: 100%; width: 100%;
} }

.couponbg image { .couponbg image {
display: block; display: block;
position: absolute; position: absolute;
@@ -16,15 +18,18 @@ page {
right: 0; right: 0;
margin: auto; margin: auto;
z-index: -19999; z-index: -19999;
border-radius: 26rpx;
border-radius: 16rpx;
} }

.title { .title {
font-size: 33rpx;
color: #0c1829;
line-height: 36rpx; line-height: 36rpx;
text-align: center; text-align: center;
padding-top: 106rpx; padding-top: 106rpx;
font-size: 32rpx;
color: #1f2d3d;
letter-spacing: 0;
} }

.subtitle { .subtitle {
color: #7f8b9e; color: #7f8b9e;
font-size: 26rpx; font-size: 26rpx;
@@ -32,10 +37,9 @@ page {
margin-top: 16rpx; margin-top: 16rpx;
text-align: center; text-align: center;
} }
.panel,.zhuangtai image{
width: 510rpx;
height: 581rpx;
border-radius: 10rpx;

.panel, .zhuangtai image {
width: 600rpx;
background-color: #fff; background-color: #fff;
margin: 22rpx auto 0; margin: 22rpx auto 0;
padding: 30rpx 0; padding: 30rpx 0;
@@ -47,6 +51,7 @@ page {
background: #fff; background: #fff;
opacity: 0.6; opacity: 0.6;
} }

.pane2 image { .pane2 image {
width: 500rpx; width: 500rpx;
display: block; display: block;
@@ -70,7 +75,12 @@ page {
} }


.barnum text { .barnum text {
color: #767676;
display: inline-block;
vertical-align: top;
font-size: 24rpx;
color: #999;
letter-spacing: 0;
margin-right:6rpx;
} }


.barcode > canvas { .barcode > canvas {
@@ -85,12 +95,14 @@ page {
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
margin-top:30rpx;
} }


.qrcode > canvas { .qrcode > canvas {
width: 350rpx; width: 350rpx;
height: 350rpx; height: 350rpx;
} }

.jine { .jine {
color: #f96563 !important; color: #f96563 !important;
font-size: 36rpx !important; font-size: 36rpx !important;
@@ -109,23 +121,34 @@ page {
.buy { .buy {
background: #fff; background: #fff;
height: 88rpx; height: 88rpx;
width: 98%;
margin: 0 auto;
color: #7e7e7e;
width: 100%;
margin: 60rpx auto 0;
line-height: 88rpx; line-height: 88rpx;
border-radius: 16rpx;
border: 1px solid #eee;
border: 2rpx solid #ccc;
border-radius: 10px;
font-size: 36rpx;
color: #333;
letter-spacing: 0;
} }
.gou{

.gou {
width: 87%; width: 87%;
margin: 0 auto; margin: 0 auto;
color: #878d95;
color: #878d95;
font-size: 26rpx; font-size: 26rpx;
padding-bottom:74rpx;
padding-bottom: 74rpx;
} }
.mai{
color: #333;

.mai {
font-size: 24rpx;
color: #919191;
letter-spacing: 0;
} }
.remark{

.remark {
padding-top: 17rpx; padding-top: 17rpx;
}
font-size: 24rpx;
color: #333;
letter-spacing: 0;
line-height: 42rpx;
}

Loading…
Cancel
Save