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

优化确认订单、新增优惠卷领取、我的优惠卷

master
ltlzx 4 years ago
parent
f706ea8f5a
commit
39669a3474
14 changed files with 396 additions and 20 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. 112
      common/common.scss
  2. 12
      pages.json
  3. 4
      pages/account/index.vue
  4. 55
      pages/account/myCoupons.vue
  5. 4
      pages/account/myOrders.vue
  6. 65
      pages/index/pickUpCentre.vue
  7. 164
      pages/order/confirmation.vue
  8. BIN
      static/img/APay.png
  9. BIN
      static/img/GPay.png
  10. BIN
      static/img/card.png
  11. BIN
      static/img/coupons.png
  12. BIN
      static/img/coupons_bg.png
  13. BIN
      static/img/pay_pal.png
  14. BIN
      static/img/select3.png

112
common/common.scss
View File

@ -101,6 +101,118 @@
} }
// 优惠卷
.coupons_item{
display: flex;
background-color: #FEF6F4;
height: 186.67rpx;
color: #F66C46;
margin-bottom: 25.33rpx;
.coupons_item_left{
width: 216.67rpx;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 20rpx;
font-weight: 400;
&:before{
content: "";
background-color: white;
z-index: 99;
position: absolute;
right: -15rpx;
top: 0;
width: 30rpx;
height: 20rpx;
border-radius: 0 0 15rpx 15rpx;
}
&:after{
content: "";
background-color: white;
z-index: 99;
position: absolute;
right: -15rpx;
bottom: 0;
width: 30rpx;
height: 20rpx;
border-radius: 15rpx 15rpx 0 0;
}
.item_left_prcie{
font-weight: bold;
font-size: 40rpx;
// margin-bottom: 13.33rpx;
}
.item_left_span{
text-align: center;
}
}
.coupons_item_right{
width: 480.67rpx;
height: 100%;
font-size: 20rpx;
font-weight: 400;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding-left: 36rpx;
padding-right: 23.33rpx;
&:before{
content: "";
z-index: 99;
position: absolute;
left: -5rpx;
height: 120rpx;
border: dashed #F66C46 1rpx;
}
.coupons_item_right_select{
width: 34.67rpx;
height: 34.67rpx;
position: absolute;
top: 12.67rpx;
right: 15.33rpx;
}
.coupons_item_right_bg{
width: 82.67rpx;
height: 60.67rpx;
position: absolute;
top: 0;
right:116.67rpx;
}
.coupons_right_info{
.coupons_right_info_title{
font-size: 32rpx;
font-weight: bold;
}
.coupons_right_info_time{
font-size: 16rpx;
margin-top: 13.33rpx;
}
}
button{
background: none;
border-radius: 0;
margin: 0;
border: #F66C46 1px solid;
font-size: 25.33rpx;
height: 39.33rpx;
line-height: 39.33rpx;
color: #F66C46;
font-weight: bold;
white-space:nowrap;
padding:0 10rpx;
box-sizing: content-box;
overflow: inherit;
&::after{
content: none;
}
}
}
}
.login{ .login{
padding: 0 32rpx; padding: 0 32rpx;

12
pages.json
View File

@ -98,6 +98,18 @@
"navigationBarTitleText": "0rder Confirmation", "navigationBarTitleText": "0rder Confirmation",
"navigationBarBackgroundColor":"#FFFFFF" "navigationBarBackgroundColor":"#FFFFFF"
} }
},
{
"path": "pages/account/myCoupons",
"style": {
"titleNView":false
}
},
{
"path": "pages/index/pickUpCentre",
"style": {
"titleNView":false
}
} }
], ],
"globalStyle": { "globalStyle": {

4
pages/account/index.vue
View File

@ -15,10 +15,10 @@
</view> </view>
<view class="info_like"> <view class="info_like">
<view class="info_like_item"> <navigator url="/pages/account/myCoupons" class="info_like_item">
<text class="info_like_item_img">6</text> <text class="info_like_item_img">6</text>
<text class="info_like_item_span">Coupons</text> <text class="info_like_item_span">Coupons</text>
</view> </navigator>
<view class="info_like_item"> <view class="info_like_item">
<text class="info_like_item_img">25</text> <text class="info_like_item_img">25</text>
<text class="info_like_item_span">Points</text> <text class="info_like_item_span">Points</text>

55
pages/account/myCoupons.vue
View File

@ -0,0 +1,55 @@
<template>
<view>
<uni-nav-bar left-icon="left" title="My Coupons" color="#000000" rightIcon="info" @clickLeft="back" @clickRight="goPage" :border="false"/>
<view class="body">
<view class="coupons_item" v-for="(item,index) in 3 " :key="index">
<view class="coupons_item_left">
<view class="item_left_prcie">$20.00</view>
<text class="item_left_span">Min.spend</text>
<view>$200.00</view>
</view>
<view class="coupons_item_right">
<view class="coupons_right_info">
<view class="coupons_right_info_title">All-purpose</view>
<text>The tide zone is available</text>
<view class="coupons_right_info_time">2022.09.23 10:37 - 2022.12.23 10:37</view>
</view>
<button>Use Now</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
back(){
uni.navigateBack()
},
goPage(){
console.info(111)
uni.navigateTo({
url:"/pages/index/pickUpCentre"
})
}
}
}
</script>
<style lang="scss" scoped>
.uni-navbar{
font-size: 32rpx;
font-weight: bold;
}
.body{
border-top: 14.67rpx #F7F7F7 solid;
padding:0 26rpx;
padding-top: 31.33rpx;
}
</style>

4
pages/account/myOrders.vue
View File

@ -173,7 +173,7 @@
<template v-if="isList==true && scroll_active==2"> <template v-if="isList==true && scroll_active==2">
<view class="order"> <view class="order">
<view class="order_title"> <view class="order_title">
<text>Waiting for payment</text> <text>To be shipped</text>
<view class="order_title_right"> <view class="order_title_right">
<text>order#20245512141212</text> <text>order#20245512141212</text>
<image src="../../static/img/right.png" mode=""></image> <image src="../../static/img/right.png" mode=""></image>
@ -195,7 +195,7 @@
<view class="order"> <view class="order">
<view class="order_title"> <view class="order_title">
<text>Shipped</text> <text>To be shipped</text>
<view class="order_title_right"> <view class="order_title_right">
<text>order#20245512141212</text> <text>order#20245512141212</text>
<image src="../../static/img/right.png" mode=""></image> <image src="../../static/img/right.png" mode=""></image>

65
pages/index/pickUpCentre.vue
View File

@ -0,0 +1,65 @@
<template>
<view>
<uni-nav-bar left-icon="left" title="Pick up centre" color="#000000" @clickLeft="back" @clickRight="goPage" :border="false">
<block slot="right">
<view class="head_coupons">
<image src="../../static/img/coupons.png" mode=""></image>
</view>
</block>
</uni-nav-bar>
<view class="body">
<view class="coupons_item" v-for="(item,index) in 3 " :key="index">
<view class="coupons_item_left">
<view class="item_left_prcie">$20.00</view>
<text class="item_left_span">Min.spend</text>
<view>$200.00</view>
</view>
<view class="coupons_item_right">
<view class="coupons_right_info">
<view class="coupons_right_info_title">All-purpose</view>
<text>The tide zone is available</text>
<view class="coupons_right_info_time">2022.09.23 10:37 - 2022.12.23 10:37</view>
</view>
<button>Receive</button>
<image src="../../static/img/coupons_bg.png" mode="" class="coupons_item_right_bg"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
back(){
uni.navigateBack()
},
}
}
</script>
<style lang="scss" scoped>
.uni-navbar{
font-size: 32rpx;
font-weight: bold;
}
.body{
border-top: 14.67rpx #F7F7F7 solid;
padding:0 26rpx;
padding-top: 31.33rpx;
}
.head_coupons{
width: 34.67rpx;
height: 34.67rpx;
image{
width: 100%;
height: 100%;
}
}
</style>

164
pages/order/confirmation.vue
View File

@ -16,7 +16,7 @@
<image src="../../static/img/address_xian.png" class="address_xian" mode=""></image> <image src="../../static/img/address_xian.png" class="address_xian" mode=""></image>
</view> </view>
<view class="order_info"> <view class="order_info" @click="openMore(0)">
<view class="info_title"> <view class="info_title">
<text>Items in cart</text> <text>Items in cart</text>
<view class="info_title_right"> <view class="info_title_right">
@ -47,14 +47,14 @@
</view> </view>
<view class="discount"> <view class="discount">
<view class="discount_item"> <view class="discount_item" @click="openMore(1)">
<text>Coupons</text> <text>Coupons</text>
<view class="discount_item_right"> <view class="discount_item_right">
<text>-US$12.5</text> <text>-US$12.5</text>
<image src="../../static/img/right.png" mode="" class="address_more"></image> <image src="../../static/img/right.png" mode="" class="address_more"></image>
</view> </view>
</view> </view>
<view class="discount_item"> <view class="discount_item" @click="openMore(3)">
<view class="discount_item_left"> <view class="discount_item_left">
<text>Points</text> <text>Points</text>
<text class="discount_item_left_span">(2.5)</text> <text class="discount_item_left_span">(2.5)</text>
@ -77,22 +77,25 @@
</view> </view>
<view class="settlement_item"> <view class="settlement_item">
<text>Discount :</text> <text>Discount :</text>
<text class="settlement_item_right1">US$1.5</text> <text class="settlement_item_right1">-US$2.5</text>
</view> </view>
</view> </view>
<view class="total"> <view class="total">
<text>Total: US$314.00</text> <text>Total: US$314.00</text>
<button>PLACE ORDER</button> <button @click="openMore(2)">PLACE ORDER</button>
</view> </view>
<view class="mask" v-show="isShow"></view> <view class="mask" v-show="isShow" @click="isShow=false"></view>
<view class="order_popup" v-show="isShow"> <view class="order_popup" v-show="isShow">
<view class="order_popup_title"> <view class="order_popup_title">
<text>Commodity information</text> <text>
<image src="../../static/img/close1.png" mode=""></image> {{popup_index==0?'Commodity information':popup_index==1?'Coupons':popup_index==2?'Payment Method':'Points'}}<text v-show="popup_index==3">(total:<text class="order_popup_title_span" >2.5</text>)</text>
</text>
<image src="../../static/img/close1.png" mode="" @click="isShow=false"></image>
</view> </view>
<view class="order_popup_commodity">
<view class="order_popup_commodity" v-show="popup_index==0">
<view class="good_info" v-for="(item,index) in 3 " :key="index"> <view class="good_info" v-for="(item,index) in 3 " :key="index">
<view class="good_info_left "> <view class="good_info_left ">
@ -110,10 +113,71 @@
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="order_popup_coupons" v-show="popup_index==1">
<view class="coupons_item" v-for="(item,index) in 3 " :key="index">
<view class="coupons_item_left">
<view class="item_left_prcie">$20.00</view>
<text class="item_left_span">Min.spend</text>
<view>$200.00</view>
</view>
<view class="coupons_item_right">
<view class="coupons_right_info">
<view class="coupons_right_info_title">All-purpose</view>
<text>The tide zone is available</text>
<view class="coupons_right_info_time">2022.09.23 10:37 - 2022.12.23 10:37</view>
</view>
<button>Use Now</button>
<image src="../../static/img/select3.png" mode="" class="coupons_item_right_select"></image>
</view>
</view>
</view>
<view class="order_popup_pay" v-show="popup_index==2">
<view class="pay_item">
<image src="../../static/img/select1.png" mode="" class="pay_item_select"></image>
<view class="pay_item_right">
<image src="../../static/img/pay_pal.png" mode=""></image>
<text>Pay Pal</text>
</view>
</view>
<view class="pay_item">
<image src="../../static/img/select2.png" mode="" class="pay_item_select"></image>
<view class="pay_item_right">
<image src="../../static/img/card.png" mode=""></image>
<text>Credit/Debit Card</text>
</view>
</view>
<view class="pay_item">
<image src="../../static/img/select2.png" mode="" class="pay_item_select"></image>
<view class="pay_item_right">
<image src="../../static/img/GPay.png" mode=""></image>
<text>Google Pay</text>
</view>
</view>
<view class="pay_item">
<image src="../../static/img/select2.png" mode="" class="pay_item_select"></image>
<view class="pay_item_right">
<image src="../../static/img/APay.png" mode=""></image>
<text>Apple pay</text>
</view>
</view>
<button>PAY NOW</button>
</view>
<view class="order_popup_points" v-show="popup_index==3">
<view class="points_item">
<image src="../../static/img/select2.png" mode=""></image>
<text>Use points</text>
</view>
<view class="points_item">
<image src="../../static/img/select1.png" mode=""></image>
<text>Do not use points</text>
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
@ -122,11 +186,15 @@
export default { export default {
data() { data() {
return { return {
isShow:false isShow:false,
popup_index:''
} }
}, },
methods:{ methods:{
openMore(i){
this.popup_index=i
this.isShow=true
}
} }
} }
</script> </script>
@ -376,6 +444,9 @@
top: 50%; top: 50%;
margin-top: -5.5rpx; margin-top: -5.5rpx;
} }
.order_popup_title_span{
color: #B22234;
}
} }
.order_popup_coupons{ .order_popup_coupons{
@ -383,9 +454,6 @@
padding-top: 28rpx; padding-top: 28rpx;
padding-bottom: 106.67rpx; padding-bottom: 106.67rpx;
.coupons_item{
}
} }
.order_popup_commodity{ .order_popup_commodity{
padding:0 26rpx; padding:0 26rpx;
@ -447,5 +515,69 @@
} }
} }
} }
.order_popup_pay{
padding: 0 26.67rpx;
padding-bottom: 56.67rpx;
.pay_item{
border-bottom: 1px solid #EEEEEE;
padding: 13.33rpx 0;
display: flex;
align-items: center;
font-size: 28rpx;
&:nth-child(4){
border-bottom: none
}
.pay_item_select{
width: 29.33rpx;
height: 29.33rpx;
margin-right: 26rpx;
}
.pay_item_right{
display: flex;
align-items: center;
image{
width: 74.67rpx;
height: 74.67rpx;
margin-right: 28.67rpx;
}
}
}
button{
background: black;
color: white;
height: 88rpx;
line-height: 88rpx;
font-size: 26.67rpx;
font-weight: bold;
margin-top: 33.33rpx;
}
}
.order_popup_points{
padding-bottom: 63.33rpx;
padding-left: 47.33rpx;
padding-top: 34.67rpx;
font-size: 28rpx;
.points_item{
display: flex;
align-items: center;
margin-bottom: 40rpx;
&:last-child{
margin-bottom: 0;
}
image{
width: 29.33rpx;
height: 29.33rpx;
margin-right: 26rpx;
}
}
}
} }
</style> </style>

BIN
static/img/APay.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
static/img/GPay.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
static/img/card.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/img/coupons.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/img/coupons_bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
static/img/pay_pal.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
static/img/select3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

Write Preview
Loading…
Cancel
Save