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
Unified 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", "navigationBarTitleText": "Change Password",
"navigationBarBackgroundColor":"#FFFFFF" "navigationBarBackgroundColor":"#FFFFFF"
} }
},
{
"path": "pages/account/myOrders",
"style": {
"navigationBarTitleText": "My orders",
"navigationBarBackgroundColor":"#FFFFFF"
}
} }
], ],
"globalStyle": { "globalStyle": {

2
pages/account/favorites.vue
View File

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

4
pages/account/index.vue
View File

@ -37,10 +37,10 @@
<view class="order"> <view class="order">
<view class="order_title">My Orders</view> <view class="order_title">My Orders</view>
<view class="order_info"> <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"> <img src="/static/img/unpaid.png" alt="" class="info_img">
<text>Unpaid</text> <text>Unpaid</text>
</view> </navigator>
<view class="order_info_item"> <view class="order_info_item">
<img src="/static/img/Processing.png" alt="" class="info_img"> <img src="/static/img/Processing.png" alt="" class="info_img">
<text>Processing</text> <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"> <view class="set_button">
<button>SIGN OUT</button> <button>SIGN OUT</button>
</view> </view>
<view class="edition">
<view class="edition_title">CHIC BUYER</view>
<text>Version 1.0</text>
</view>
</view> </view>
</template> </template>
@ -81,4 +85,17 @@
border-radius: 0; 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> </style>

2
pages/account/wishlist.vue
View File

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

11
pages/index/index.vue
View File

@ -10,7 +10,7 @@
<img src="/static/img/msg.png" alt=""> <img src="/static/img/msg.png" alt="">
</uni-badge> </uni-badge>
</navigator> </navigator>
<text>Dope plus</text> <text>Dope VIDEO</text>
</template> </template>
<view class="navigation_title_right"> <view class="navigation_title_right">
@ -96,7 +96,7 @@
<!-- 标题 --> <!-- 标题 -->
<view class="index_title page_padding"> <view class="index_title page_padding">
<text>HOT SELLS</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 SELLS</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 SELLS</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>
@ -205,7 +205,7 @@
isScrollShow:false, isScrollShow:false,
scroll_active:0, scroll_active:0,
scrollList:[ 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, current:0,
list: [ list: [
@ -316,7 +316,6 @@
padding-left: 40rpx; padding-left: 40rpx;
.scroll-view_H{ .scroll-view_H{
white-space: nowrap; white-space: nowrap;
font-size: 26.67rpx; font-size: 26.67rpx;
color: #161616; color: #161616;
width: 100%; width: 100%;

2
pages/login/index.vue
View File

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

6
pages/login/verifyEmail.vue
View File

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