Przeglądaj źródła

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

tags/2.2.4
meo 6 lat temu
rodzic
commit
3c5d748124
7 zmienionych plików z 198 dodań i 99 usunięć
  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 Wyświetl plik

Przed Po
Szerokość: 1152  |  Wysokość: 1980  |  Rozmiar: 13 KiB Szerokość: 1380  |  Wysokość: 3200  |  Rozmiar: 22 KiB

+ 4
- 1
components/coupons/index.wxss Wyświetl plik

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

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

+ 2
- 2
pages/order/detail/index.wxml Wyświetl plik

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

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


+ 65
- 34
pages/order/detail/index.wxss Wyświetl plik

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

.order {
width: 100%;
}

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

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

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

.section {
margin-top: 2%;
}

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

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

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

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

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

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

.info view:nth-child(1) text:nth-child(2) {
@@ -73,22 +79,18 @@
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;
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;
color: #b8b8b8;
}

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

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

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

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

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

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

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

.classif > view:nth-child(1) text:nth-child(2) {
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) {
padding-left: 15rpx;
}

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

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

/*mask*/

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

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

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

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

.top {
padding-top: 8px;
}

.bottom {
padding-bottom: 8px;
}

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

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

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

.input_h60 {
height: 60px;
}

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

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

radio {
margin-right: 20px;
}

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

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

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

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

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

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

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

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


+ 10
- 11
pages/order/index/index.wxml Wyświetl plik

@@ -2,7 +2,7 @@
<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-tabs>
<view>
<view style='padding-top:90rpx;'>
<view wx:if="{{list.length!=0}}" class='section' wx:for='{{list}}' wx:key='{{index}}'>
<view class='detail_msg'>
<view class='logo'>
@@ -12,23 +12,22 @@
<view>
<text>{{item.title}}</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 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>
</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 class='payment'>
<view>
<text>¥{{item.salePrice/100}}</text>
<text>¥{{item.price/100}}</text>
<text>实付金额:</text><text>{{item.salePrice/100}}元</text>
</view>
<!--
orderStatus
@@ -45,9 +44,9 @@
<!-- <view wx:if="{{item.orderStatus==2}}" style="background:#999;opacity: .6;" class="btn">
<text>已取消</text>
</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>
</view>
</view> -->
<view wx:if="{{item.orderStatus==4}}" style="background:#999;opacity: .6;" class="btn">
<text>已退款</text>
</view>


+ 73
- 30
pages/order/index/index.wxss Wyświetl plik

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


+ 44
- 21
pages/orderquanma/index.wxss Wyświetl plik

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

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

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

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

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

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

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

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

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

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

.jine {
color: #f96563 !important;
font-size: 36rpx !important;
@@ -109,23 +121,34 @@ page {
.buy {
background: #fff;
height: 88rpx;
width: 98%;
margin: 0 auto;
color: #7e7e7e;
width: 100%;
margin: 60rpx auto 0;
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%;
margin: 0 auto;
color: #878d95;
color: #878d95;
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;
}
font-size: 24rpx;
color: #333;
letter-spacing: 0;
line-height: 42rpx;
}

Ładowanie…
Anuluj
Zapisz