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

新增支付成功、我的积分、地址管理、添加地址

master
ltlzx 4 years ago
parent
39669a3474
commit
538e76b84d
12 changed files with 599 additions and 7 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. 72
      common/common.scss
  2. 27
      pages.json
  3. 209
      pages/account/addAddress.vue
  4. 127
      pages/account/address.vue
  5. 8
      pages/account/index.vue
  6. 59
      pages/account/pointsDetails.vue
  7. 2
      pages/account/settings.vue
  8. 4
      pages/order/confirmation.vue
  9. 98
      pages/order/paySuccess.vue
  10. BIN
      static/img/address1.png
  11. BIN
      static/img/success.png
  12. BIN
      static/img/update.png

72
common/common.scss
View File

@ -1,3 +1,27 @@
// 导航栏
.nav_title{
position: fixed;
z-index: 99;
top: 0;
width: 100%;
&::after{
content: "";
background-color: #F6F5FA;
height: 14.67rpx;
width: 100%;
position: absolute;
bottom: -14.67rpx;
}
.uni-navbar{
font-size: 32rpx;
font-weight: bold;
}
}
.nav_body{
padding-top: 100rpx;
}
.mask{
position: fixed;
width: 100%;
@ -100,7 +124,53 @@
}
}
// 推荐
.recommend{
padding: 0 26.67rpx;
padding-top: 54rpx;
.recommend_title{
position: relative;
text-align: center;
font-size: 29.33rpx;
font-weight: bold;
margin-bottom: 64rpx;
&::after{
content: "";
position: absolute;
bottom: -13.33rpx;
width: 53.33rpx;
height: 4rpx;
background-color: black;
left: 50%;
margin-left: -26rpx;
}
}
.recommend_content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
font-size: 29.33rpx;
font-weight: 400;
.recommend_content_item{
width: 340rpx;
margin-bottom: 46.67rpx;
.recommend_content_item_image{
width: 100%;
height:340rpx ;
background-color: #999999;
margin-bottom: 37.33rpx;
}
.recommend_content_item_pric{
font-size: 32rpx;
font-weight: bold;
margin-top: 34rpx;
}
}
}
}
// 优惠卷
.coupons_item{
display: flex;

27
pages.json
View File

@ -110,6 +110,33 @@
"style": {
"titleNView":false
}
},
{
"path": "pages/order/paySuccess",
"style": {
"navigationBarTitleText": "Pay success",
"navigationBarBackgroundColor":"#FFFFFF"
}
},
{
"path": "pages/account/address",
"style": {
"navigationBarTitleText": "Shipping Address",
"navigationBarBackgroundColor":"#FFFFFF"
}
},
{
"path": "pages/account/addAddress",
"style": {
"navigationBarTitleText": "Shipping Address",
"navigationBarBackgroundColor":"#FFFFFF"
}
},
{
"path": "pages/account/pointsDetails",
"style": {
"titleNView":false
}
}
],
"globalStyle": {

209
pages/account/addAddress.vue
View File

@ -0,0 +1,209 @@
<template>
<view>
<view class="address_serch">
<input type="text" placeholder="ADDRESS FINDER:Search by postcode">
</view>
<view class="address_info">
<view class="address_info_item address_info_item1">
<view class="info_item_title">
<view>
<text>*Country/Region</text>
<view class="info_item_title_span">United States</view>
</view>
<image src="../../static/img/right1.png" mode=""></image>
</view>
</view>
<view class="address_info_item">
<view class="info_item_title">
<view>
<text>*Fall name</text>
</view>
</view>
<view class="info_item_input">
<input type="text">
</view>
</view>
<view class="address_info_item">
<view class="info_item_title">
<view>
<text>*Phone Number</text>
</view>
</view>
<view class="info_item_input">
<input type="text">
</view>
</view>
<view class="address_info_item">
<view class="info_item_title">
<view>
<text>＊Stree adderss or P.O.Box</text>
</view>
</view>
<view class="info_item_input">
<input type="text">
</view>
</view>
<view class="address_info_item">
<view class="info_item_title">
<view>
<text>*Appartment,suite,unit,etc.</text>
</view>
</view>
<view class="info_item_input">
<input type="text">
</view>
</view>
<view class="address_info_item">
<view class="info_item_title">
<view>
<text>*City/Town</text>
</view>
</view>
<view class="info_item_input">
<input type="text">
</view>
</view>
</view>
<view class="address_info">
<view class="address_info_item">
<view class="info_item_title">
<view>
<text class="info_item_title_span">State/Province</text>
</view>
<image src="../../static/img/bottom.png" mode=""></image>
</view>
<view class="info_item_input">
<input type="text">
</view>
</view>
<view class="address_info_item">
<view class="info_item_title">
<view>
<text>Zip code/Postcode/PLZ/Eircode</text>
</view>
</view>
<view class="info_item_input">
<input type="text">
</view>
</view>
</view>
<view class="address_switch">
<text>Make this my default address</text>
<switch checked="true" color="#B22234"/>
</view>
<view class="address_submit">
<button>FINISH</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
}
}
</script>
<style lang="scss" scoped>
page{
background-color: #F6F5FA;
}
.address_serch{
background-color: white;
padding: 26.67rpx 24rpx;
margin-top: 14.67rpx;
input{
font-size: 22.67rpx;
font-weight: 400;
border: 1px solid #E2E2E2;
padding: 23.33rpx 0;
padding-left: 64.67rpx;
position: relative;
&:before{
content: "";
background-image: url("@/static/img/address1.png");
background-size: 100% 100%;
width: 29.33rpx;
height: 29.33rpx;
position: absolute;
left: 20.67rpx;
}
}
}
.address_info{
background-color: white;
padding: 0 26.67rpx;
margin-top: 14.67rpx;
.address_info_item{
padding-top: 42.67rpx;
border-bottom: 1px solid #E2E2E2;
&:last-child{
border-bottom: none;
}
.info_item_title{
font-size: 24rpx;
color: #888888;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
margin-bottom: 10rpx;
.info_item_title_span{
color: black;
margin-top: 15.33rpx;
}
image{
width: 25.33rpx;
height: 25.33rpx;
}
}
.info_item_input{
input{
font-size: 24rpx;
padding-left: 10rpx;
}
}
}
.address_info_item1{
padding-top: 32.67rpx;
padding-bottom: 27.33rpx;
}
}
.address_switch{
margin-top: 14.67rpx;
background-color: white;
padding: 17.33rpx 0;
padding-left: 32rpx;
padding-right: 52.67rpx;
font-size: 24rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
}
.address_submit{
padding: 0 32rpx;
margin-top: 112rpx;
button{
background-color: black;
color: white;
font-size: 26.67rpx;
margin: 0;
font-weight: bold;
height: 88rpx;
line-height: 88rpx;
}
}
</style>

127
pages/account/address.vue
View File

@ -0,0 +1,127 @@
<template>
<view>
<view class="address_item" v-for="(item,index) in 2" :key="index">
<view class="address_info">
<view class="address_info_title">
<view class="info_title_span">Nathanael</view>
<text>5838590290</text>
</view>
<view class="address_info_content">
<view class="info_content_left">
<view>B Oakdale Mall</view>
<text>Johnson City NEW YORKUnitedStates13790-1294</text>
</view>
<image src="../../static/img/update.png" mode=""></image>
</view>
</view>
<view class="address_default">
<view class="address_default_left">
<image src="../../static/img/select2.png" mode=""></image>
<text>Default address</text>
</view>
<text>Delete</text>
</view>
</view>
<view class="address_foot">
<navigator url="/pages/account/addAddress" >
<button>ADD ADDRESS</button>
</navigator>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
}
}
</script>
<style lang="scss" scoped>
page{
background-color: #F6F5FA;
padding-bottom: 160rpx;
}
.address_foot{
padding: 42rpx 24rpx;
background-color: white;
border-top: #E2E2E2 solid 1px;
position: fixed;
bottom: 0;
width: 100%;
box-sizing: border-box;
button{
color: white;
background-color: black;
font-size: 26.67rpx;
font-weight: bold;
margin: 0;
}
}
.address_item{
margin-top: 17.33rpx;
width: 100%;
background-color: white;
padding-top: 32rpx;
font-size: 24rpx;
color: #666666;
font-weight: bold;
.address_info{
padding: 0 26.67rpx;
padding-bottom: 33.33rpx;
border-bottom: 1px solid #E2E2E2;
.address_info_title{
display: flex;
align-items: center;
margin-bottom: 37.33rpx;
.info_title_span{
font-size: 28rpx;
color: black;
margin-right: 38.67rpx;
}
}
.address_info_content{
display: flex;
align-items: center;
.info_content_left{
padding-right: 38.67rpx;
margin-right: 34rpx;
border-right: 1px solid #E2E2E2;
}
image{
width: 34.67rpx;
height: 34.67rpx;
}
}
}
.address_default{
padding: 29.33rpx 0;
padding-left: 26.67rpx;
padding-right: 52.67rpx;
display: flex;
align-items: center;
justify-content: space-between;
.address_default_left{
display: flex;
align-items: center;
image{
width: 25.33rpx;
height: 25.33rpx;
margin-right: 13.33rpx;
}
}
}
}
</style>

8
pages/account/index.vue
View File

@ -19,10 +19,10 @@
<text class="info_like_item_img">6</text>
<text class="info_like_item_span">Coupons</text>
</navigator>
<view class="info_like_item">
<navigator url="/pages/account/pointsDetails" class="info_like_item">
<text class="info_like_item_img">25</text>
<text class="info_like_item_span">Points</text>
</view>
</navigator>
<navigator url="/pages/account/wishlist" class="info_like_item">
<img src="/static/img/like.png" alt="" class="info_like_item_img">
<text class="info_like_item_span">Wishlist</text>
@ -67,10 +67,10 @@
<img src="/static/img/My Review.png" alt="" class="info_img">
<text>My Review</text>
</view>
<view class="order_info_item">
<navigator url="/pages/account/address" class="order_info_item">
<img src="/static/img/My Address.png" alt="" class="info_img">
<text>My Address</text>
</view>
</navigator>
<view class="order_info_item">
<img src="/static/img/Return Policy.png" alt="" class="info_img">
<text>Return Policy</text>

59
pages/account/pointsDetails.vue
View File

@ -0,0 +1,59 @@
<template>
<view>
<view class="nav_title">
<uni-nav-bar left-icon="left" title="Points Details" color="#000000" rightIcon="info" @clickLeft="back" :border="false"/>
</view>
<view class="nav_body">
<view class="points">
<view class="points_item" v-for="(item,index) in 10" :key="index">
<view class="points_item_title">
<text>Order return：202012245212</text>
<text class="item_title_price">+US$314.00</text>
</view>
<text>21/04/2022 15:42:31</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
back(){
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.points{
padding: 0 25.33rpx;
.points_item{
padding: 37.33rpx 0;
color: #999999;
font-size: 24rpx;
font-weight: 400;
border-bottom: 1px solid #E2E2E2;
.points_item_title{
font-size: 28rpx;
display: flex;
justify-content: space-between;
margin-bottom: 18rpx;
color: black;
.item_title_price{
color: #B22234;
}
}
}
}
</style>

2
pages/account/settings.vue
View File

@ -45,7 +45,7 @@
<style lang="scss" scoped>
page{
border-top: 13.33rpx #F7F7F7 solid;
border-top: 14.67rpx #F7F7F7 solid;
padding-left: 26.67rpx;
}
.profile_item{

4
pages/order/confirmation.vue
View File

@ -164,7 +164,9 @@
<text>Apple pay</text>
</view>
</view>
<button>PAY NOW</button>
<navigator url="/pages/order/paySuccess">
<button>PAY NOW</button>
</navigator>
</view>
<view class="order_popup_points" v-show="popup_index==3">

98
pages/order/paySuccess.vue
View File

@ -0,0 +1,98 @@
<template>
<view>
<view class="success">
<image src="../../static/img/success.png" mode=""></image>
<text class="success_title">Payment is successful</text>
<view>
This order will be rewarded with
<text class="success_span">10 points</text>
after receipt.
</view>
<view class="success_button">
<button class="details">Order details</button>
<button class="shop">Continue shopping</button>
</view>
</view>
<view class="recommend">
<view class="recommend_title">RECOMMEND</view>
<view class="recommend_content">
<view class="recommend_content_item" v-for="(item,index) in 2 " :key="index">
<view class="recommend_content_item_image"></view>
<text>Adidas Yeezy Boost 350 DazzlingBlue Black</text>
<view class="recommend_content_item_pric">US$314.00</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
}
}
</script>
<style lang="scss" scoped>
page{
border-top: 14.67rpx #F7F7F7 solid;
}
.success{
display: flex;
align-items: center;
justify-content: center;
padding-top: 72rpx;
font-size: 24rpx;
color: #555555;
font-weight: 400;
flex-direction: column;
border-bottom: 14.67rpx #F7F7F7 solid;
padding-bottom: 81.33rpx;
image{
width: 160rpx;
height: 160rpx;
margin-bottom: 46.67rpx;
}
.success_title{
font-size: 32rpx;
color: black;
font-weight: 500;
margin-bottom: 13.33rpx;
}
.success_span{
color: #B22234;
display: inline-block;
margin: 0 5rpx;
}
.success_button{
display: flex;
margin-top: 70.67rpx;
align-items: center;
justify-content: center;
button{
height: 63.33rpx;
font-size: 24rpx;
margin: 0;
font-weight: 500;
}
.details{
background-color: white;
border: 1px solid #CBCBCB;
color: black;
}
.shop{
color: white;
background-color: black;
margin-left: 48rpx;
}
}
}
</style>

BIN
static/img/address1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/img/success.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/img/update.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

Write Preview
Loading…
Cancel
Save