ltlzx
/
cnic_buyer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增确认订单

master
ltlzx 4 years ago
parent
29edfeb567
commit
f706ea8f5a
9 changed files with 499 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      common/common.scss
  2. 7
      pages.json
  3. 53
      pages/account/myOrders.vue
  4. 6
      pages/index/index.vue
  5. 10
      pages/login/verifyEmail.vue
  6. 451
      pages/order/confirmation.vue
  7. BIN
      static/img/address.png
  8. BIN
      static/img/address_xian.png
  9. BIN
      static/img/close1.png

10
common/common.scss
View File

@ -1,3 +1,13 @@
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 998;
top: 0;
left: 0;
}
.wishlist_body{ .wishlist_body{
position: relative; position: relative;

7
pages.json
View File

@ -91,6 +91,13 @@
"navigationBarTitleText": "My orders", "navigationBarTitleText": "My orders",
"navigationBarBackgroundColor":"#FFFFFF" "navigationBarBackgroundColor":"#FFFFFF"
} }
},
{
"path": "pages/order/confirmation",
"style": {
"navigationBarTitleText": "0rder Confirmation",
"navigationBarBackgroundColor":"#FFFFFF"
}
} }
], ],
"globalStyle": { "globalStyle": {

53
pages/account/myOrders.vue
View File

@ -7,35 +7,38 @@
</view> </view>
<view class="body"> <view class="body">
<template v-if="isList==true && scroll_active==0"> <template v-if="isList==true && scroll_active==0">
<view class="order"> <navigator url="/pages/order/confirmation">
<view class="order_title"> <view class="order">
<text>Waiting for payment</text> <view class="order_title">
<view class="order_title_right"> <text>Waiting for payment</text>
<text>order#20245512141212</text> <view class="order_title_right">
<image src="../../static/img/right.png" mode=""></image> <text>order#20245512141212</text>
</view>
</view>
<view class="order_content">
<view class="good_info">
<view class="good_info_left">
<view class="good_info_image" v-for="(item,index) in 4" :key="index"></view>
</view>
<view class="good_info_right">
<text>4 ltems</text>
<image src="../../static/img/right.png" mode=""></image> <image src="../../static/img/right.png" mode=""></image>
</view> </view>
</view> </view>
<view class="good_price">total:US$12.5</view> <view class="order_content">
<view class="good_points"> <view class="good_info">
<image src="/static/img/gantan1.png" mode=""></image> <view class="good_info_left">
<text>Reward 10 points</text> <view class="good_info_image" v-for="(item,index) in 4" :key="index"></view>
</view> </view>
<view class="order_button"> <view class="good_info_right">
<button class="cancel">CANCEL ORDER</button> <text>4 ltems</text>
<button class="pay">PAY NOW</button> <image src="../../static/img/right.png" mode=""></image>
</view>
</view>
<view class="good_price">total:US$12.5</view>
<view class="good_points">
<image src="/static/img/gantan1.png" mode=""></image>
<text>Reward 10 points</text>
</view>
<view class="order_button">
<button class="cancel">CANCEL ORDER</button>
<button class="pay">PAY NOW</button>
</view>
</view> </view>
</view> </view>
</view> </navigator>
<view class="order"> <view class="order">
<view class="order_title"> <view class="order_title">
@ -291,7 +294,7 @@
return { return {
scrollList:[{text:'All'},{text:'Unpaid'},{text:'Processing'},{text:'Shipped'},{text:'Returns'},{text:'Completed'},{text:'Closed'}], scrollList:[{text:'All'},{text:'Unpaid'},{text:'Processing'},{text:'Shipped'},{text:'Returns'},{text:'Completed'},{text:'Closed'}],
scroll_active:0, scroll_active:0,
isList:false isList:true
} }
}, },
methods:{ methods:{

6
pages/index/index.vue
View File

@ -96,7 +96,7 @@
<!-- 标题 --> <!-- 标题 -->
<view class="index_title page_padding"> <view class="index_title page_padding">
<text>HOT Selle</text> <text>Hot Selle</text>
<view class="title_right"> <view class="title_right">
<img src="/static/img/right.png" alt=""> <img src="/static/img/right.png" alt="">
</view> </view>
@ -117,7 +117,7 @@
<!-- 标题 --> <!-- 标题 -->
<view class="index_title page_padding"> <view class="index_title page_padding">
<text>HOT Selle</text> <text>Hot Selle</text>
<view class="title_right"> <view class="title_right">
<img src="/static/img/right.png" alt=""> <img src="/static/img/right.png" alt="">
</view> </view>
@ -132,7 +132,7 @@
<!-- 标题 --> <!-- 标题 -->
<view class="index_title page_padding"> <view class="index_title page_padding">
<text>HOT Selle</text> <text>Hot Selle</text>
<view class="title_right"> <view class="title_right">
<img src="/static/img/right.png" alt=""> <img src="/static/img/right.png" alt="">
</view> </view>

10
pages/login/verifyEmail.vue
View File

@ -57,16 +57,6 @@
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 998;
top: 0;
left: 0;
}
.verify_popup{ .verify_popup{
width: 540rpx; width: 540rpx;
height: 366.67rpx; height: 366.67rpx;

451
pages/order/confirmation.vue
View File

@ -0,0 +1,451 @@
<template>
<view>
<view class="address">
<view class="address_left">
<view class="address_title">
<image src="../../static/img/address.png" mode=""></image>
<view class="address_title_name">Nathanael</view>
<text>5838590290</text>
</view>
<view class="address_content">
B Oakdale Mall
Johnson City NEW YORKUnitedStates13790-1294
</view>
</view>
<image src="../../static/img/right.png" class="address_more"></image>
<image src="../../static/img/address_xian.png" class="address_xian" mode=""></image>
</view>
<view class="order_info">
<view class="info_title">
<text>Items in cart</text>
<view class="info_title_right">
<text>4 ltems</text>
<image src="../../static/img/right.png" mode="" class="address_more"></image>
</view>
</view>
<view class="info_image">
<view class="info_image_item" v-for="(item,index) in 4 " :key="index"></view>
</view>
</view>
<view class="method">
<view class="method_title">Shipping Method</view>
<view class="method_item" v-for="(item,index) in 2 " :key="index">
<image src="../../static/img/select2.png" mode=""></image>
<view class="method_item_right">
<view class="item_price">
<text>STANDARD SHIPPING:</text>
<text class="item_price_span">US$59</text>
</view>
<view class="item_time">
<text class="item_time_span">estimated to be deliverd on </text>
<text> 15/05/2022-04/05/2022</text>
</view>
</view>
</view>
</view>
<view class="discount">
<view class="discount_item">
<text>Coupons</text>
<view class="discount_item_right">
<text>-US$12.5</text>
<image src="../../static/img/right.png" mode="" class="address_more"></image>
</view>
</view>
<view class="discount_item">
<view class="discount_item_left">
<text>Points</text>
<text class="discount_item_left_span">(2.5)</text>
</view>
<view class="discount_item_right">
<text>-US$2.5</text>
<image src="../../static/img/right.png" mode="" class="address_more"></image>
</view>
</view>
</view>
<view class="settlement">
<view class="settlement_item">
<text>Subtotal:</text>
<text class="settlement_item_right">US$12.5</text>
</view>
<view class="settlement_item">
<text>Shipping fee:</text>
<text class="settlement_item_right">US$1.5</text>
</view>
<view class="settlement_item">
<text>Discount :</text>
<text class="settlement_item_right1">US$1.5</text>
</view>
</view>
<view class="total">
<text>Total: US$314.00</text>
<button>PLACE ORDER</button>
</view>
<view class="mask" v-show="isShow"></view>
<view class="order_popup" v-show="isShow">
<view class="order_popup_title">
<text>Commodity information</text>
<image src="../../static/img/close1.png" mode=""></image>
</view>
<view class="order_popup_commodity">
<view class="good_info" v-for="(item,index) in 3 " :key="index">
<view class="good_info_left ">
<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view>
<view class="left_info">
<view class="info_name">Adidas Yeezy Boost 350 V2 DazzlingBlue Black GY7164 Men's</view>
<view class="left_info_bottom">
<view class="info_lable">
<text>Multicolor;41</text>
<image src="/static/img/bottom.png" mode=""></image>
</view>
<text>x1</text>
</view>
<view class="info_price">US$314.00</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isShow:false
}
},
methods:{
}
}
</script>
<style lang="scss" scoped>
page{
border-top:14.67rpx #F6F5FA solid ;
padding-bottom: 140rpx;
}
.address_more{
width: 20rpx;
height: 20rpx;
}
.address{
padding-top: 33.33rpx;
padding-bottom: 36rpx;
padding-left: 29.33rpx;
padding-right: 22.67rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 14.67rpx #F6F5FA solid;
position: relative;
.address_left{
.address_title{
display: flex;
align-items: center;
color: #666666;
font-size: 24rpx;
margin-bottom: 30.67rpx;
image{
width: 32rpx;
height: 32rpx;
}
.address_title_name{
font-size: 28rpx;
color: black;
font-weight: bold;
margin-left: 24rpx;
margin-right: 38.67rpx;
}
}
.address_content{
padding-left: 56rpx;
color: #666666;
font-size: 24rpx;
font-weight: bold;
}
}
.address_xian{
height: 4rpx;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
}
.order_info{
padding-left: 26.67rpx;
padding-right: 22.67rpx;
padding-top: 50.67rpx;
padding-bottom: 42.67rpx;
border-bottom:14.67rpx #F6F5FA solid ;
.info_title{
display: flex;
align-items: center;
justify-content: space-between;
font-weight: bold;
font-size: 26.67rpx;
.info_title_right{
display: flex;
align-items: center;
color: #666666;
font-size: 24rpx;
image{
margin-left: 33.33rpx;
}
}
}
.info_image{
display: flex;
margin-top: 26.67rpx;
.info_image_item{
width: 133.33rpx;
height: 133.33rpx;
margin-right: 12rpx;
background-color: #999999;
}
}
}
.method{
border-bottom:14.67rpx #F6F5FA solid ;
padding-top: 50rpx;
.method_title{
font-size: 26.67rpx;
font-weight: bold;
padding-left: 25.33rpx;
}
.method_item{
padding:41.33rpx 0 ;
border-bottom: 1px #E2E2E2 solid;
padding-left: 42.67rpx;
padding-right: 29.33rpx;
display: flex;
align-items: center;
&:last-child{
border-bottom: none;
}
image{
width: 29.33rpx;
height: 29.33rpx;
margin-right: 30.67rpx;
}
.method_item_right{
.item_price{
font-size: 28rpx;
margin-bottom: 14rpx;
.item_price_span{
color: #B22234;
}
}
.item_time{
font-size: 25.33rpx;
font-weight: 400;
.item_time_span{
color: #555555;
}
}
}
}
}
.discount{
border-bottom:14.67rpx #F6F5FA solid ;
padding-left: 26rpx;
padding-right: 22.67rpx;
padding-top: 42rpx;
padding-bottom: 45.33rpx;
.discount_item{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
margin-bottom: 42rpx;
&:last-child{
margin-bottom: 0;
}
.discount_item_left{
.discount_item_left_span{
color: #666666;
}
}
.discount_item_right{
display: flex;
align-items: center;
color: #B22234;
font-weight: bold;
image{
margin-left: 14rpx;
}
}
}
}
.settlement{
border-bottom:14.67rpx #F6F5FA solid ;
padding: 44rpx 26rpx;
.settlement_item{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
margin-bottom: 44rpx;
&:last-child{
margin-bottom: 0;
}
.settlement_item_right{
color: #3C3B6E;
font-weight: bold;
}
.settlement_item_right1{
color: #B22234;
font-weight: bold;
}
}
}
.total{
padding: 30.67rpx 0;
padding-left: 26rpx;
padding-right: 19.33rpx;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: white;
z-index: 99;
box-sizing: border-box;
font-size: 36rpx;
font-weight: 600;
button{
font-size: 26.67rpx;
color: white;
height: 73.33rpx;
line-height: 73.33rpx;
border-radius: 0;
border: none;
background-color: black;
margin: 0;
}
}
.order_popup{
position: fixed;
z-index: 999;
background-color: white;
width: 100%;
bottom: 0;
.order_popup_title{
position: relative;
font-size: 32rpx;
font-weight: bold;
border-bottom: 1px solid #E2E2E2;
display: flex;
align-items: center;
justify-content: center;
padding-top: 44.67rpx;
padding-bottom: 30.67rpx;
image{
width: 21.33rpx;
height: 21.33rpx;
position: absolute;
right: 26rpx;
top: 50%;
margin-top: -5.5rpx;
}
}
.order_popup_coupons{
padding:0 26.67rpx;
padding-top: 28rpx;
padding-bottom: 106.67rpx;
.coupons_item{
}
}
.order_popup_commodity{
padding:0 26rpx;
padding-bottom: 40rpx;
border-bottom:1px solid #E2E2E2 ;
.good_info{
padding: 40rpx 0;
font-size: 22.67rpx;
color: #666666;
font-weight: bold;
border-bottom: 2.67rpx solid #F1F1F1;
&:last-child{
border-bottom: none;
}
.good_info_left{
display: flex;
align-items: center;
width: 100%;
.good_info_image{
width: 200rpx ;
height: 200rpx;
background-color: #999999;
margin-right: 32.67rpx;
}
.left_info{
.info_name{
font-size: 26.67rpx;
font-weight: 400;
width: 461.33rpx;
}
.left_info_bottom{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 32rpx;
color: #909090;
margin-top: 24rpx;
.info_lable{
padding: 5.33rpx 20rpx;
font-size: 22.67rpx;
border-radius: 33.33rpx;
border: 1px solid #D3D3D3;
image{
width: 17.33rpx;
height: 17.33rpx;
margin-left: 14.67rpx;
}
}
}
.info_price{
font-size: 28rpx;
color: black;
font-weight: bold;
margin-top: 43.33rpx;
}
}
}
}
}
}
</style>

BIN
static/img/address.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/img/address_xian.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
static/img/close1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 990 B

Write Preview
Loading…
Cancel
Save