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

优化文字、新增我的订单

master
ltlzx 4 years ago
parent
549ceef60e
commit
29edfeb567
12 changed files with 542 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      pages.json
  2. 2
      pages/account/favorites.vue
  3. 4
      pages/account/index.vue
  4. 505
      pages/account/myOrders.vue
  5. 17
      pages/account/settings.vue
  6. 2
      pages/account/wishlist.vue
  7. 11
      pages/index/index.vue
  8. 2
      pages/login/index.vue
  9. 6
      pages/login/verifyEmail.vue
  10. BIN
      static/img/bottom.png
  11. BIN
      static/img/gantan1.png
  12. BIN
      static/img/order_nodate.png

7
pages.json
View File

@ -84,6 +84,13 @@
"navigationBarTitleText": "Change Password",
"navigationBarBackgroundColor":"#FFFFFF"
}
},
{
"path": "pages/account/myOrders",
"style": {
"navigationBarTitleText": "My orders",
"navigationBarBackgroundColor":"#FFFFFF"
}
}
],
"globalStyle": {

2
pages/account/favorites.vue
View File

@ -18,7 +18,7 @@
<text>All</text>
</view>
<view class="wishlist_foot_right">
<button>Delete</button>
<button>DELETE</button>
</view>
</view>
</view>

4
pages/account/index.vue
View File

@ -37,10 +37,10 @@
<view class="order">
<view class="order_title">My Orders</view>
<view class="order_info">
<view class="order_info_item">
<navigator url="/pages/account/myOrders" class="order_info_item">
<img src="/static/img/unpaid.png" alt="" class="info_img">
<text>Unpaid</text>
</view>
</navigator>
<view class="order_info_item">
<img src="/static/img/Processing.png" alt="" class="info_img">
<text>Processing</text>

505
pages/account/myOrders.vue
View File

@ -0,0 +1,505 @@
<template>
<view>
<view class="order_nav">
<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
<view :class="scroll_active==index?'scroll_active':''" v-for="(item,index) in scrollList" @click="scrollChange(index)" :key="index">{{item.text}}</view>
</scroll-view>
</view>
<view class="body">
<template v-if="isList==true && scroll_active==0">
<view class="order">
<view class="order_title">
<text>Waiting for payment</text>
<view class="order_title_right">
<text>order#20245512141212</text>
<image src="../../static/img/right.png" mode=""></image>
</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>
</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 class="order">
<view class="order_title">
<text>To be shipped</text>
<view class="order_title_right">
<text>order#20245512141212</text>
<image src="../../static/img/right.png" mode=""></image>
</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 2" :key="index"></view>
</view>
<view class="good_info_right">
<text>2 ltems</text>
<image src="../../static/img/right.png" mode=""></image>
</view>
</view>
<view class="good_price">total:US$12.5</view>
</view>
</view>
<view class="order">
<view class="order_title">
<text>Shipped</text>
<view class="order_title_right">
<text>order#20245512141212</text>
<image src="../../static/img/right.png" mode=""></image>
</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 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>×2</text>
</view>
</view>
</view>
</view>
<view class="good_price">total:US$12.5</view>
<view class="order_button">
<button class="cancel">LOGISTICS</button>
<button class="pay">CONFIRM RECEIPT</button>
</view>
</view>
</view>
<view class="order">
<view class="order_title">
<text>Completed</text>
<view class="order_title_right">
<text>order#20245512141212</text>
<image src="../../static/img/right.png" mode=""></image>
</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>
</view>
</view>
<view class="good_price">total:US$12.5</view>
<view class="order_button">
<button class="cancel">DELETE ORDER</button>
<button class="pay">COMMENT</button>
</view>
</view>
</view>
<view class="order">
<view class="order_title">
<text>Return and exchange</text>
<view class="order_title_right">
<text>order#20245512141212</text>
<image src="../../static/img/right.png" mode=""></image>
</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>
</view>
</view>
<view class="good_price">total:US$12.5</view>
<view class="order_button">
<button class="pay">CANCEL RETURN</button>
</view>
</view>
</view>
<view class="order">
<view class="order_title">
<text>cancelled</text>
<view class="order_title_right">
<text>order#20245512141212</text>
<image src="../../static/img/right.png" mode=""></image>
</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>
</view>
</view>
<view class="good_price">total:US$12.5</view>
<view class="order_button">
<button class="cancel">DELETE ORDER</button>
</view>
</view>
</view>
</template>
<template v-if="isList==true && scroll_active==2">
<view class="order">
<view class="order_title">
<text>Waiting for payment</text>
<view class="order_title_right">
<text>order#20245512141212</text>
<image src="../../static/img/right.png" mode=""></image>
</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 2" :key="index"></view>
</view>
<view class="good_info_right">
<text>2 ltems</text>
<image src="../../static/img/right.png" mode=""></image>
</view>
</view>
<view class="good_price">total:US$12.5</view>
</view>
</view>
<view class="order">
<view class="order_title">
<text>Shipped</text>
<view class="order_title_right">
<text>order#20245512141212</text>
<image src="../../static/img/right.png" mode=""></image>
</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 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>×2</text>
</view>
</view>
</view>
</view>
<view class="good_price">total:US$12.5</view>
</view>
</view>
</template>
<template v-if="isList==true && scroll_active==1">
<view class="order">
<view class="order_title">
<text>Waiting for payment</text>
<view class="order_title_right">
<text>order#20245512141212</text>
<image src="../../static/img/right.png" mode=""></image>
</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>
</view>
</view>
<view class="good_price">total:US$12.5</view>
<view class="order_button">
<button class="cancel">CANCEL ORDER</button>
<button class="pay">PAY NOW</button>
</view>
</view>
</view>
<view class="order">
<view class="order_title">
<text>Waiting for payment</text>
<view class="order_title_right">
<text>order#20245512141212</text>
<image src="../../static/img/right.png" mode=""></image>
</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>
</view>
</view>
<view class="good_price">total:US$12.5</view>
<view class="order_button">
<button class="cancel">CANCEL ORDER</button>
<button class="pay">PAY NOW</button>
</view>
</view>
</view>
</template>
<template v-if="isList==false">
<view class="order1">
<image src="../../static/img/order_nodate.png" mode=""></image>
<text>You made no order yet!</text>
<button>Continue shopping</button>
</view>
</template>
</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollList:[{text:'All'},{text:'Unpaid'},{text:'Processing'},{text:'Shipped'},{text:'Returns'},{text:'Completed'},{text:'Closed'}],
scroll_active:0,
isList:false
}
},
methods:{
scrollChange(index){
this.scroll_active=index
},
}
}
</script>
<style lang="scss" scoped>
.body{
padding-top: 100rpx;
}
.order_nav{
padding:0 38.67rpx ;
border-bottom: 13.33rpx #F7F7F7 solid;
position: fixed;
width: 100%;
box-sizing: border-box;
z-index: 99;
background-color: white;
.scroll-view_H{
white-space: nowrap;
font-size: 28rpx;
color: #666666;
width: 100%;
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
view{
margin-left: 37.33rpx;
display: inline-block;
padding: 25.33rpx 0;
}
view:first-child{
margin-left: 0;
}
.scroll_active{
color: #000000;
font-size: 28rpx;
font-weight: bold;
border-bottom: 2px solid #000000;
}
}
}
.order{
border-bottom: 13.33rpx #F7F7F7 solid;
padding-bottom: 26.67rpx;
.order_title{
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 34.67rpx;
padding-right: 25.33rpx;
font-size: 28rpx;
padding-top: 26.67rpx;
padding-bottom: 20rpx;
border-bottom: 1px solid #F1F1F1;
.order_title_right{
font-size: 22.67rpx;
font-weight: bold;
color: #666666;
image{
width: 16rpx;
height: 16rpx;
margin-left: 14.67rpx;
}
}
}
.order_content{
padding-left: 32rpx;
padding-right: 26.67rpx;
.good_info{
padding: 30.67rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 22.67rpx;
color: #666666;
font-weight: bold;
border-bottom: 1px solid #F1F1F1;
.good_info_left{
display: flex;
align-items: center;
.good_info_image{
width: 133.33rpx;
height: 133.33rpx;
background-color: #999999;
margin-right: 8rpx;
}
.left_info{
margin-left: 24rpx;
.info_name{
font-size: 26.67rpx;
font-weight: 400;
width: 477.33rpx;
}
.left_info_bottom{
width: 533.33rpx !important;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 32rpx;
color: #909090;
width: 100%;
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;
}
}
}
}
}
.good_info_right{
display: flex;
align-items: center;
image{
width: 16rpx;
height: 16rpx;
margin-left: 20rpx;
}
}
}
.good_price{
font-size: 28rpx;
text-align: right;
margin: 24rpx 0;
}
.good_points{
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 24rpx;
color: #B22234;
image{
width: 29.33rpx;
height: 29.33rpx;
margin-right: 13.33rpx;
}
}
.order_button{
margin-top: 33.33rpx;
display: flex;
justify-content: flex-end;
button{
height: 57.33rpx;
line-height: 57.33rpx;
font-weight: bold;
font-size: 22.67rpx;
border: none;
margin: 0;
border-radius: 0;
&:last-child{
margin-right: 0 !important;
}
}
.cancel{
color: #666666;
margin-right: 20rpx;
background-color: white;
}
.pay{
color: white;
background: black;
}
}
}
}
.order1{
padding-top: 90.67rpx;
font-size: 24rpx;
font-weight: 400;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image{
width: 146.67rpx;
height: 146.67rpx;
margin-bottom: 36rpx;
}
button{
background-color: #000000;
font-size: 24rpx;
color: white;
border-radius: 13.33rpx;
height: 63.33rpx;
margin-top: 20rpx;
}
}
</style>

17
pages/account/settings.vue
View File

@ -23,6 +23,10 @@
<view class="set_button">
<button>SIGN OUT</button>
</view>
<view class="edition">
<view class="edition_title">CHIC BUYER</view>
<text>Version 1.0</text>
</view>
</view>
</template>
@ -81,4 +85,17 @@
border-radius: 0;
}
}
.edition{
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
font-size: 20rpx;
font-weight: bold;
margin-bottom: 112rpx;
.edition_title{
font-size: 25.33rpx;
margin-bottom: 16rpx;
}
}
</style>

2
pages/account/wishlist.vue
View File

@ -18,7 +18,7 @@
<text>All</text>
</view>
<view class="wishlist_foot_right">
<button>Delete</button>
<button>DELETE</button>
</view>
</view>
</view>

11
pages/index/index.vue
View File

@ -10,7 +10,7 @@
<img src="/static/img/msg.png" alt="">
</uni-badge>
</navigator>
<text>Dope plus</text>
<text>Dope VIDEO</text>
</template>
<view class="navigation_title_right">
@ -96,7 +96,7 @@
<!-- 标题 -->
<view class="index_title page_padding">
<text>HOT SELLS</text>
<text>HOT Selle</text>
<view class="title_right">
<img src="/static/img/right.png" alt="">
</view>
@ -117,7 +117,7 @@
<!-- 标题 -->
<view class="index_title page_padding">
<text>HOT SELLS</text>
<text>HOT Selle</text>
<view class="title_right">
<img src="/static/img/right.png" alt="">
</view>
@ -132,7 +132,7 @@
<!-- 标题 -->
<view class="index_title page_padding">
<text>HOT SELLS</text>
<text>HOT Selle</text>
<view class="title_right">
<img src="/static/img/right.png" alt="">
</view>
@ -205,7 +205,7 @@
isScrollShow:false,
scroll_active:0,
scrollList:[
{text:'DoPE'},{text:'VIDEo'},{text:'MEN'},{text:'KIDS'},{text:'PETS'},{text:'MEN'},{text:'PETS'},{text:'MEN'},
{text:'DOPE'},{text:'VIDEO'},{text:'MEN'},{text:'KIDS'},{text:'PETS'},{text:'MEN'},{text:'PETS'},{text:'MEN'},
],
current:0,
list: [
@ -316,7 +316,6 @@
padding-left: 40rpx;
.scroll-view_H{
white-space: nowrap;
font-size: 26.67rpx;
color: #161616;
width: 100%;

2
pages/login/index.vue
View File

@ -9,7 +9,7 @@
<navigator url="/pages/login/verifyEmail" >
<view class="forgot">Forgot your Password?</view>
</navigator>
<button class="login_submit" >SIGIN IN</button>
<button class="login_submit" >SIGN IN</button>
<view class="agreement">
<img src="../../static/img/select2.png" mode="" class="agreement_image"></img>
<view class="">

6
pages/login/verifyEmail.vue
View File

@ -4,8 +4,8 @@
<view class="verify_tips">
To verify your email,we've send a verification code to xxxx@xx.com
</view>
<input type="text" class="login_input" placeholder="eamil address">
<view class="tips">The email address or password you enterde is incorrect.</view>
<input type="text" class="login_input" placeholder="Enter code">
<view class="tips">The code is incorrect.</view>
<button class="login_submit" >CONTINUE</button>
<view class="verify_text">Resend code</view>
</view>
@ -17,7 +17,7 @@
<view class="verify_popup_title">Send!</view>
<view class="verify_popup_msg">we send a new verification code to xxxx@xx.com</view>
<view class="verify_popup_btn">
<button>okay</button>
<button>OKAY</button>
</view>
</view>
</view>

BIN
static/img/bottom.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 846 B

BIN
static/img/gantan1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/img/order_nodate.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

Write Preview
Loading…
Cancel
Save