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

新增购物车和商品列表页

master
ltlzx 4 years ago
parent
0b274df219
commit
77a1343963
18 changed files with 685 additions and 116 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. 6
      App.vue
  2. 97
      common/common.scss
  3. 71
      common/scss/order.scss
  4. 16
      pages.json
  5. 26
      pages/account/pointsDetails.vue
  6. 7
      pages/category/index.vue
  7. 297
      pages/category/productList.vue
  8. 2
      pages/order/details.vue
  9. 1
      pages/order/refundDetails.vue
  10. 278
      pages/shippingCart/index.vue
  11. BIN
      static/img/bottom1.png
  12. BIN
      static/img/cart3.png
  13. BIN
      static/img/delete1.png
  14. BIN
      static/img/delete2.png
  15. BIN
      static/img/pets_nav.png
  16. BIN
      static/img/pets_nav1.png
  17. BIN
      static/img/seach1.png
  18. BIN
      static/img/top.png

6
App.vue
View File

@ -1,13 +1,13 @@
<script>
export default {
onLaunch: function() {
console.log('App Launch')
// console.log('App Launch')
},
onShow: function() {
console.log('App Show')
// console.log('App Show')
},
onHide: function() {
console.log('App Hide')
// console.log('App Hide')
}
}
</script>

97
common/common.scss
View File

@ -3,30 +3,6 @@
width: 100%;
}
// 导航栏
.nav_title{
position: fixed;
z-index: 99;
top: 0;
width: 100%;
background-color: white;
&::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 + var(--status-bar-height);
}
//地址信息
.address{
@ -395,4 +371,75 @@
margin: 0 4px;
}
}
}
}
// 商品展示
.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;
.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;
display: flex;
align-items: center;
justify-content: space-between;
button{
margin: 0;
height: 45.33rpx;
line-height: 45.33rpx;
border: #999999 solid 1px;
font-size: 17.33rpx;
color: #999999;
background: none;
&::after{
content: none;
}
}
}
}
}
}

71
common/scss/order.scss
View File

@ -1,76 +1,7 @@
.order_popup_commodity{
padding:0 26rpx;
.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;
display: flex;
align-items: center;
justify-content: space-between;
button{
margin: 0;
height: 45.33rpx;
line-height: 45.33rpx;
border: #999999 solid 1px;
font-size: 17.33rpx;
color: #999999;
background: none;
&::after{
content: none;
}
}
}
}
}
}
}

16
pages.json
View File

@ -173,6 +173,18 @@
"navigationBarTitleText": "Refund Details",
"navigationBarBackgroundColor":"#FFFFFF"
}
},
{
"path": "pages/category/productList",
"style": {
"titleNView":false
}
},
{
"path": "pages/shippingCart/index",
"style": {
"titleNView":false
}
}
],
"globalStyle": {
@ -206,9 +218,9 @@
"text": "Category"
},
{
"pagePath": "pages/tabbar/tabbar-4/tabbar-4",
"pagePath": "pages/shippingCart/index",
"iconPath": "static/img/Cart.png",
"selectedIconPath": "static/img/Cart1.png",
"selectedIconPath": "static/img/cart1.png",
"text": "Cart"
},
{

26
pages/account/pointsDetails.vue
View File

@ -1,20 +1,13 @@
<template>
<view>
<view class="nav_title">
<view class="status_bar"></view>
<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</text>
<text class="item_title_price">+US$314.00</text>
</view>
<text>21/04/2022 15:42:31</text>
<uni-nav-bar left-icon="left" title="Points Details" color="#000000" rightIcon="info" @clickLeft="back" :border="false" :statusBar="true" :fixed="true" />
<view class="points">
<view class="points_item" v-for="(item,index) in 10" :key="index">
<view class="points_item_title">
<text>Order return</text>
<text class="item_title_price">+US$314.00</text>
</view>
<text>21/04/2022 15:42:31</text>
</view>
</view>
</view>
@ -36,6 +29,11 @@
</script>
<style lang="scss" scoped>
.uni-navbar{
font-size: 32rpx;
font-weight: bold;
border-bottom: 14.67rpx #F6F5FA solid;
}
.points{
padding: 0 25.33rpx;

7
pages/category/index.vue
View File

@ -30,7 +30,7 @@
<view class="good_body">
<view class="good_title">PICKS FOR YOU</view>
<view class="good_content">
<view class="good_item" v-for="(item,index) in 5" :key="index">
<view class="good_item" v-for="(item,index) in 5" :key="index" @click="goPets">
<view class="good_item_img"></view>
<text>Women Drese</text>
</view>
@ -59,6 +59,11 @@
methods:{
changeCategory(i){
this.categoryIndex=i
},
goPets(){
uni.navigateTo({
url:"productList"
})
}
}
}

297
pages/category/productList.vue
View File

@ -0,0 +1,297 @@
<template>
<view>
<uni-nav-bar :statusBar="true" title="Pets" color="#000000" :border="false" :fixed="true">
<block slot="left">
<view class="nav_left">
<image src="../../static/img/left.png" mode="" @click="back"></image>
<image src="../../static/img/seach1.png" mode=""></image>
</view>
</block>
<block slot="right">
<view class="nav_right">
<uni-badge :text="5" type="error" absolute="rightTop">
<image src="../../static/img/shop_cart.png" mode=""></image>
</uni-badge>
</view>
</block>
</uni-nav-bar>
<view class="pets_nav">
<text>Synthesis</text>
<view class="pets_nav_item">
<text>Sales</text>
<image src="/static/img/bottom1.png" mode="" class="pets_nav_arrow"></image>
</view>
<view class="pets_nav_item">
<text>Sales</text>
<view class="pets_nav_item_right">
<image src="../../static/img/top.png" mode="" class="pets_nav_arrow"></image>
<image src="/static/img/bottom1.png" mode="" class="pets_nav_arrow"></image>
</view>
</view>
<view class="pets_nav_image">
<image src="/static/img/pets_nav.png" mode="" v-show="pets_index==0" @click="pets_index=1"></image>
<image src="/static/img/pets_nav1.png" mode="" v-show="pets_index==1" @click="pets_index=0"></image>
</view>
</view>
<view class="body">
<view class="product" v-show="pets_index==0">
<view class="product_item" v-for="(item,index) in 5" :key="index">
<view class="product_item_image"></view>
<view class="product_item_right">
<view >Adidas Yeezy Boost 350 V2 Dazzling Blue Black GY7164 Men's</view>
<view class="item_right_lable">
<view class="right_lable_item">Hashtag buzzword</view>
</view>
<view class="item_right_price">
<text>US$314.00</text>
<view class="right_price_operation">
<image src="/static/img/like.png" mode=""></image>
<image src="../../static/img/cart2.png" mode=""></image>
</view>
</view>
</view>
</view>
</view>
<view class="product1" v-show="pets_index==1">
<custom-waterfalls-flow :value="list">
<template v-slot:default="item">
<view class="product1_item">
<view>{{item.title}}</view>
<view class="desc">
<text>{{item.desc}}</text>
<image src="../../static/img/cart2.png" mode=""></image>
</view>
<view class="lable" v-if="item.lable!=''">{{item.lable}}</view>
</view>
</template>
</custom-waterfalls-flow>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pets_index:1,
navWidth:"160rpx",
list: [
{
image: 'https://via.placeholder.com/200x200.png/ff0000',
title: 'Adidas Yeezy Boost 350 V2 Dazzling Blue Black GY7164 Men',
desc: 'US$314.00',
lable:"Hashtag buzzword" ,
},
{
image: 'https://via.placeholder.com/200x200.png/ff0000',
title: 'Adidas Yeezy Boost 350 V2 Dazzling Blue Black GY7164 Men',
desc: 'US$314.00',
lable:"" ,
},
{
image: 'https://via.placeholder.com/200x200.png/ff0000',
title: 'Adidas Yeezy Boost 350 V2 Dazzling Blue Black GY7164 Men',
desc: 'US$314.00',
lable:"" ,
},
{
image: 'https://via.placeholder.com/200x200.png/ff0000',
title: 'Adidas Yeezy Boost 350 V2 Dazzling Blue Black GY7164 Men',
desc: 'US$314.00',
lable:"" ,
},
]
}
},
methods:{
back(){
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.uni-navbar{
font-size: 32rpx;
font-weight: bold;
}
.nav_left{
image{
width: 36rpx;
height: 36rpx;
&:last-child{
margin-left: 36.67rpx;
}
}
}
.nav_right{
padding-right: 30rpx;
image{
width: 44rpx;
height: 44rpx;
}
}
.pets_nav{
padding: 28.67rpx 32.67rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 26.67rpx;
color: #666666;
font-weight: 600;
// border-top: 1px solid #F5F6FA;
border-bottom: 1px solid #F5F6FA;
position: fixed;
top: 0;
margin-top: 155rpx;
/* #ifdef H5 */
margin-top: 85rpx;
/* #endif */
width: 100%;
box-sizing: border-box;
z-index: 99;
.pets_nav_item{
display: flex;
align-items: center;
.pets_nav_arrow{
width: 16rpx;
height: 16rpx;
margin-left: 9.33rpx;
}
.pets_nav_item_right{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
}
.pets_nav_image{
width: 30.67rpx;
height: 30.67rpx;
position: relative;
&:before{
content: "";
height: 25.33rpx;
width: 1px;
background-color: #999999;
position: absolute;
left: -40rpx;
z-index: 99;
top: 50%;
margin-top: -13rpx;
}
image{
width: 100%;
height: 100%;
}
}
}
.body{
padding: 0 26.67rpx;
padding-top: 90rpx;
}
.product1{
padding-top: 26.67rpx;
/deep/.column-value{
border-radius: 0 !important;
margin-bottom: 40rpx !important;
}
.product1_item{
font-size: 29.33rpx;
font-weight: 400;
padding-top: 32rpx;
color: #000000;
.desc{
margin-top: 28.67rpx;
display: flex;
font-size: 32rpx;
color: #191919;
align-items: center;
justify-content: space-between;
font-weight: 500;
image{
width: 34.67rpx;
height: 34.67rpx;
}
}
.lable{
padding: 11.33rpx 18rpx;
background-color: #FCF6F7;
border-radius: 8rpx;
color: #B22234;
font-size: 20rpx;
font-weight: 400;
width: max-content;
margin-top: 16rpx;
}
}
}
.product{
padding-top: 34.67rpx;
.product_item{
display: flex;
align-items: center;
font-size: 26.67rpx;
font-weight: 400;
margin-bottom: 34.67rpx;
.product_item_image{
width: 213.33rpx;
height: 213.33rpx;
background-color: #999999;
}
.product_item_right{
width: 440rpx;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 36rpx;
.item_right_lable{
display: flex;
flex-wrap: wrap;
margin-top: 20.33rpx;
margin-bottom: 30.67rpx;
.right_lable_item{
padding: 11.33rpx 18rpx;
background-color: #FCF6F7;
border-radius: 8rpx;
color: #B22234;
font-size: 20rpx;
margin-right: 11.33rpx;
}
}
.item_right_price{
display: flex;
color: #191919;
font-size: 32rpx;
align-items: center;
justify-content: space-between;
font-weight: 600;
.right_price_operation{
display: flex;
align-items: center;
image{
width: 40rpx;
height: 40rpx;
&:last-child{
margin-left: 26.67rpx;
}
}
}
}
}
}
}
</style>

2
pages/order/details.vue
View File

@ -92,7 +92,7 @@
</view>
<view class="info_price">
<text>US$314.00</text>
<button v-if="details_index!=3">RREFUND</button>
<button v-if="details_index!=3 && details_index!=1">RREFUND</button>
</view>
</view>
</view>

1
pages/order/refundDetails.vue
View File

@ -180,6 +180,7 @@
export default {
data() {
return {
// 0、售后已取消 1、商家驳回申请 2、待买家退货 3、待商家收货 4、待退款 5、等待商家审核 6、退款成功
details_index:0,
isShow:false,
}

278
pages/shippingCart/index.vue
View File

@ -0,0 +1,278 @@
<template>
<view>
<uni-nav-bar :statusBar="true" left-icon="left" title="Shipping Cart" color="#000000" :fixed="true" @clickLeft="back">
<block slot="right">
<view class="nav_right">
<image src="../../static/img/delete1.png" mode=""></image>
</view>
</block>
</uni-nav-bar>
<view class="empty" v-if="isEmpty">
<image src="/static/img/cart3.png" mode=""></image>
<text>Your cart is empty</text>
<button>Shop Now</button>
</view>
<template v-if="!isEmpty">
<view class="cart_info">
<image src="/static/img/Shipped.png" mode=""></image>
<view class="cart_title_content">Buy US$32.00 more to enjoy FREE STANDARD SHIPPING!</view>
<view class="cart_title_right">Add</view>
</view>
<view class="cart">
<view class="cart_content">
<view class="good_info" v-for="(item,index) in 3 " :key="index">
<image src="../../static/img/select2.png" mode="" class="cart_select"></image>
<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">
<text>US$314.00</text>
<uni-number-box background="#FFFFFF">1</uni-number-box>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="cart">
<view class="cart_content">
<view class="good_info" v-for="(item,index) in 3 " :key="index">
<image src="../../static/img/select.png" mode="" class="cart_select"></image>
<view class="good_info_left ">
<view class="good_info_image">
<view class="good_info_image_tips">sold out</view>
</view>
<view class="left_info left_info1">
<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">
<text>US$314.00</text>
<image src="../../static/img/delete2.png" mode="" class="delete"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<view class="recommend">
<view class="recommend_title">RECOMMEND</view>
<view class="recommend_content">
<view class="recommend_content_item" v-for="(item,index) in 4 " :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 {
isEmpty:false
}
},
methods:{
back(){
uni.switchTab({
url: '/pages/index/index'
});
}
},
onShow() {
uni.hideTabBar()
},
onHide(){
uni.showTabBar()
}
}
</script>
<style>
page{
background-color: #F6F5FA;
}
</style>
<style lang="scss" scoped>
.uni-navbar{
font-size: 32rpx;
font-weight: bold;
}
.uni-numbox{
border: 1px solid #999999;
border-radius: 14rpx;
height: 42.67rpx;
/deep/ .uni-numbox__minus{
border-radius: 14rpx;
}
/deep/.uni-numbox__plus{
border-radius: 14rpx;
}
/deep/.uni-numbox__value{
border-left: 1px solid #999999;
border-right: 1px solid #999999;
height: 100%;
width: 63.33rpx;
font-size: 21.33rpx;
}
}
.nav_right{
image{
width: 36rpx;
height: 36rpx;
}
}
.empty{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 136rpx;
font-size: 30.67rpx;
font-weight: 400;
image{
width: 125.33rpx;
height: 125.33rpx;
margin-bottom: 49.33rpx;
}
button{
font-size: 29.33rpx;
font-weight: 500;
background-color: black;
color: white;
height: 45.67rpx;
line-height: 45.67rpx;
border-radius: 0;
margin-top: 33.33rpx;
}
}
.recommend{
margin-top: 124rpx;
}
.cart_info{
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 36.67rpx 32rpx;
font-size: 24rpx;
font-weight: 400;
image{
width: 41.33rpx;
height: 41.33rpx;
}
.cart_title_content{
width: 510.67rpx;
}
.cart_title_right{
font-size: 26rpx;
font-weight: bold;
}
}
.cart{
background-color: white;
margin: 0 18rpx;
padding: 42rpx 12.67rpx;
margin-top: 16.67rpx;
.cart_title{
padding-left: 12.67rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
margin-bottom: 76rpx;
}
.cart_content{
.good_info{
display: flex;
align-items: center;
color: #000000;
justify-content: space-between;
border-bottom: none;
padding: 0;
margin-bottom: 78.67rpx;
&:last-child{
margin-bottom: 0;
}
.good_info_image{
position: relative;
.good_info_image_tips{
width: 117.33rpx;
height: 117.33rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
color: white;
font-size: 22rpx;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
position: absolute;
top: 50%;
margin-top: -60rpx;
left: 50%;
margin-left: -60rpx;
}
}
.left_info1{
color: #C4C4C4;
.left_info_bottom{
color: #C4C4C4;
.info_lable{
border: 1px solid #C4C4C4;
}
}
.info_price{
color: #C4C4C4;
}
}
.cart_select{
width: 34.67rpx;
height: 34.67rpx;
}
.info_name{
width: 406.67rpx;
}
.delete{
width: 36rpx;
height: 36rpx;
}
}
}
}
</style>

BIN
static/img/bottom1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 604 B

BIN
static/img/cart3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
static/img/delete1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/img/delete2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/img/pets_nav.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/img/pets_nav1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
static/img/seach1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/img/top.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 540 B

Write Preview
Loading…
Cancel
Save