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

新增商品详情、优化部分内容

master
ltlzx 4 years ago
parent
77a1343963
commit
8292e2b26b
10 changed files with 839 additions and 4 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. 6
      pages.json
  2. 2
      pages/category/productList.vue
  3. 7
      pages/index/index.vue
  4. 769
      pages/productDetails/index.vue
  5. 59
      pages/shippingCart/index.vue
  6. BIN
      static/img/goods_lable.png
  7. BIN
      static/img/like1.png
  8. BIN
      static/img/security.png
  9. BIN
      static/img/share.png
  10. BIN
      static/img/transport.png

6
pages.json
View File

@ -185,6 +185,12 @@
"style": { "style": {
"titleNView":false "titleNView":false
} }
},
{
"path": "pages/productDetails/index",
"style": {
"titleNView":false
}
} }
], ],
"globalStyle": { "globalStyle": {

2
pages/category/productList.vue
View File

@ -22,7 +22,7 @@
<image src="/static/img/bottom1.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_item"> <view class="pets_nav_item">
<text>Sales</text> <text>Price</text>
<view class="pets_nav_item_right"> <view class="pets_nav_item_right">
<image src="../../static/img/top.png" mode="" class="pets_nav_arrow"></image> <image src="../../static/img/top.png" mode="" class="pets_nav_arrow"></image>
<image src="/static/img/bottom1.png" mode="" class="pets_nav_arrow"></image> <image src="/static/img/bottom1.png" mode="" class="pets_nav_arrow"></image>

7
pages/index/index.vue
View File

@ -87,7 +87,7 @@
<!-- SPIKE 1 --> <!-- SPIKE 1 -->
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false"> <scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false">
<view class="spike1_item" v-for="(item,index) in 8" :key="index"> <view class="spike1_item" v-for="(item,index) in 8" :key="index" @click="goPage">
<view class="spike1_item_img"></view> <view class="spike1_item_img"></view>
<view class="spike1_item_bottom"> <view class="spike1_item_bottom">
<text>US$314.00</text> <text>US$314.00</text>
@ -221,6 +221,11 @@
}, },
methods: { methods: {
goPage(){
uni.navigateTo({
url: '/pages/productDetails/index',
});
},
scrollChange(index){ scrollChange(index){
this.scroll_active=index this.scroll_active=index
}, },

769
pages/productDetails/index.vue
View File

@ -0,0 +1,769 @@
<template>
<view>
<uni-nav-bar :statusBar="true" left-icon="left" color="#000000" :leftWidth="navWidth" :rightWidth="navWidth" :fixed="true" @clickLeft="back">
<view class="input-view">
<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
<input confirm-type="search" class="nav-bar-input" type="text" placeholder="search" @confirm="confirm" />
</view>
<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="uni-margin-wrap">
<uni-swiper-dot :info="info" :current="current" field="content" mode="nav" class="page_padding">
<swiper class="swiper" @change="gridSwiper" :circular="true">
<swiper-item>
<view class="swiper-item uni-bg-red">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">C</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
</view>
<view class="goods_info">
<view class="goods_info_price">
<text>US$314.00</text>
<view class="info_price_right">
<image src="/static/img/like.png" mode=""></image>
<image src="../../static/img/share.png" mode=""></image>
</view>
</view>
<view>Adidas Yeezy Boost 350 V2 Dazzling Blue Black GY 7164 Men's Sizes </view>
<view class="evaluate">
<uni-rate size="18" :value="4" active-color="red" :is-fill="false"/>
<view class="evaluate_text">4.0</view>
<text>(24reviews)</text>
</view>
<view class="variations">
<view class="variations_title">
<view class="variations_title_left">Variations</view>
<text>2color</text>
</view>
<view class="variations_select">
<view class="variations_select_varieties">
<view class="select_varieties_image" v-for="(item,index) in 3" :key="index"></view>
</view>
<view class="variations_select_size">
<view class="select_size_item">34</view>
<view class="select_size_item">35</view>
<view class="select_size_item">M</view>
<view class="select_size_item">L</view>
</view>
</view>
</view>
</view>
<view class="promotion">
<view class="promotion_title">Promotion</view>
<view class="promotion_content">
<view class="promotion_content_item">
<image src="/static/img/goods_lable.png" mode=""></image>
<view class="promotion_item_right">
<view class="title">5% OFF</view>
<text>ON ORDERS OF $39+</text>
</view>
</view>
<view class="promotion_content_item">
<image src="/static/img/goods_lable.png" mode=""></image>
<view class="promotion_item_right">
<view class="title">US5% OFF</view>
<text>ON ORDERS OF $39+</text>
</view>
</view>
</view>
</view>
<view class="transport">
<view class="goods_title">Shipping to United States</view>
<view class="goods_title title_Mtop">
<view class="goods_title_left">
<image src="/static/img/transport.png" mode=""></image>
<text>Delivery</text>
</view>
</view>
<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false">
<view class="spike1_item" v-for="(item,index) in 3" :key="index" >
<view class="spike1_item_title">
<view >
stankard shipping: <text class="text_black">US$12.5</text>
</view>
<view >
free on orders <text class="text_red">US$59</text>
</view>
<view >Estimated to be deliverd on </view>
<view >15/05/2022-04/05/2022.</view>
</view>
</view>
</scroll-view>
<view class="security">
<view class="goods_title">
<view class="goods_title_left">
<image src="/static/img/security.png" mode=""></image>
<text>Shipping security</text>
</view>
<view class="goods_title_right">
<image src="../../static/img/right.png" mode=""></image>
</view>
</view>
<view class="security_content">
<ul>
<li>Safe Payments </li>
<li>Safe Payments </li>
</ul>
<ul>
<li>Safe Payments </li>
<li>Safe Payments </li>
</ul>
</view>
</view>
<view class="description goods_title">
<view class="goods_title_left">
<text>Shipping security</text>
</view>
<view class="goods_title_right">
<view>#Iron #Pearls,Flowers #Fashionable</view>
<image src="../../static/img/right.png" mode=""></image>
</view>
</view>
</view>
<view class="reviews">
<view class="goods_title">
<view class="goods_title_left">
<text>Reviews(24)</text>
</view>
<view class="goods_title_right">
<image src="../../static/img/right.png" mode=""></image>
</view>
</view>
<view class="allReviews">
<text>4.0</text>
<uni-rate size="40" :disabled="true" disabledColor="red" :value="4" active-color="red" :is-fill="false"/>
</view>
<view class="reviews_item" v-for="(item,index) in 2" :key="index">
<view class="reviews_item_title">
<view class="reviews_title_user">
<text>e***8</text>
<uni-rate size="18" :disabled="true" disabledColor="red" :value="4" active-color="red" :is-fill="false"/>
</view>
<view class="reviews_title_time">07/03/2022</view>
</view>
<view class="reviews_item_color">Color:Multicolor</view>
<view class="reviews_item_content">So unique! Can’t wait to wear these.</view>
<view class="reviews_item_image">
<view class="reviews_image_content" v-for="(item,index) in 2" :key="index"></view>
</view>
</view>
</view>
<view class="productImage">
<view class="productImage_title">Product lmage gallery</view>
<view class="productImage_image"></view>
<view class="recommend recommend1">
<view class="recommend_title">Other options</view>
<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false">
<view class="spike1_item1" v-for="(item,index) in 8" :key="index" @click="goPage">
<view class="spike1_item_img"></view>
<view class="spike1_item_bottom">
<text>US$314.00</text>
</view>
</view>
</scroll-view>
</view>
<view class="productImage_image1"></view>
<view class="recommend">
<view class="recommend_title">You might also like</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>
<view class="footer">
<view class="footer_left">
<text>US$314.00</text>
</view>
<view class="footer_right">
<button>ADD TO CART</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
navWidth:'80rpx',
current:0,
info: [{
colorClass: 'uni-bg-red',
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
content: ''
},
{
colorClass: 'uni-bg-green',
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
content: ''
},
{
colorClass: 'uni-bg-blue',
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
content: ''
}
],
}
},
methods:{
gridSwiper(e){
this.current = e.detail.current
},
confirm(){
},
back(){
uni.navigateBack()
}
}
}
</script>
<style>
page{
background-color: #F6F5FA;
padding-bottom: 150rpx;
background-color: white;
}
</style>
<style lang="scss" scoped>
$nav-height: 30px;
/deep/ .uni-swiper__dots-nav{
background:none;
justify-content: center;
.uni-swiper__dots-nav-item{
padding: 6rpx 24.67rpx;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 25rpx;
}
}
.spike1{
white-space: nowrap;
width: 100%;
margin-top: 36.67rpx;
padding-bottom: 34rpx;
border-bottom: 1px solid #E2E2E2;
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.spike1_item{
width: 410rpx;
background-color: #F6F6F6;
padding: 21.33rpx 24.67rpx;
margin-right: 19.33rpx;
font-size: 20rpx;
display: inline-block;
color: #737373;
&:last-child{
margin-right: 0;
}
view{
margin-bottom: 10rpx;
}
.spike1_item_title{
font-weight: bold;
.text_black{
color: black;
display: inline-block;
margin-left: 10rpx;
}
.text_red{
color: #B22234;
display: inline-block;
margin-left: 10rpx;
}
}
}
.spike1_item1{
color: #191919;
font-size: 29.33rpx;
margin-right: 16.67rpx;
width: 200rpx;
display: inline-block;
font-weight: bold;
.spike1_item_img{
width: 200rpx;
height: 200rpx;
background-color: #999999;
}
.spike1_item_bottom{
padding-left: 9.33rpx;
margin-top: 22.67rpx;
.spike1_item_text{
color: #9D9D9D;
font-size: 21.33rpx;
text-decoration: line-through;
}
.spike1_item_text1{
color: #9D9D9D;
font-size: 21.33rpx;
}
}
.spike1_item_bottom1{
padding-left: 9.33rpx;
margin-top: 19.33rpx;
font-weight: bold;
.spike1_item_text{
color: #000000;
font-size: 16rpx;
font-weight: 400;
margin-bottom: 20.67rpx;
white-space: break-spaces;
}
}
}
.spike1_item:last-child{
margin-right: 0;
}
}
.goods_title{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 29.33rpx;
font-weight: 600;
.goods_title_left{
display: flex;
align-items: center;
image{
width: 33.33rpx;
height: 33.33rpx;
margin-right: 14rpx;
}
}
.goods_title_right{
color: #737373;
display: flex;
align-items: center;
font-size: 24rpx;
font-weight: 400;
image{
width: 24rpx;
height: 24rpx;
margin-left: 22rpx;
}
}
}
.uni-margin-wrap{
width: 100%;
.swiper {
height: 750rpx;
.swiper-item {
display: block;
height: 750rpx;
line-height: 750rpx;
text-align: center;
color: white;
}
.uni-bg-red{
background-color: red;
}
.uni-bg-green{
background-color: green;
}
.uni-bg-blue{
background-color: blue;
}
}
}
.uni-navbar{
font-size: 32rpx;
font-weight: bold;
.input-view {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
// width: 500rpx;
flex: 1;
background-color: #F7F7F7;
height: $nav-height;
border-radius: 15px;
padding: 0 15px;
flex-wrap: nowrap;
margin: 7px 0;
line-height: $nav-height;
}
.input-uni-icon {
line-height: $nav-height;
}
.nav-bar-input {
height: $nav-height;
line-height: $nav-height;
/* #ifdef APP-PLUS-NVUE */
width: 370rpx;
/* #endif */
padding: 0 5px;
font-size: 12px;
background-color: #F7F7F7;
font-weight: 500;
}
.nav_right{
padding-right: 30rpx;
image{
width: 44rpx;
height: 44rpx;
}
}
}
.goods_info{
padding: 0 26.67rpx;
padding-top: 60.67rpx;
padding-bottom: 35.33rpx;
border-bottom: #F7F7F7 13.33rpx solid;
font-size: 30.67rpx;
font-weight: 400;
.goods_info_price{
display: flex;
align-items: center;
font-size: 44rpx;
justify-content: space-between;
margin-bottom: 45.33rpx;
.info_price_right{
display: flex;
align-items: center;
image{
width: 40rpx;
height: 40rpx;
&:last-child{
margin-left: 27.33rpx;
}
}
}
}
.evaluate{
margin-top: 34.67rpx;
display: flex;
align-items: center;
font-size: 24rpx;
padding-bottom: 33.33rpx;
border-bottom: 1px solid #E2E2E2;
margin-bottom: 35.33rpx;
.evaluate_text{
font-weight: 500;
color: #B22234;
margin: 0 10rpx;
}
}
.variations{
font-size: 29.33rpx;
.variations_title{
display: flex;
align-items: center;
margin-bottom: 34.67rpx;
.variations_title_left{
font-weight: bold;
margin-right: 35rpx;
}
}
.variations_select{
display: flex;
align-items: center;
.variations_select_varieties{
display: flex;
.select_varieties_image{
width: 126.67rpx;
height: 126.67rpx;
margin-right: 9.33rpx;
background-color: #999999;
&:last-child{
margin-right: 0;
}
}
}
.variations_select_size{
margin-left: 20.67rpx;
display: flex;
flex-wrap: wrap;
.select_size_item{
background-color: #F8F8F8;
width: 121.33rpx;
height: 54.67rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12.67rpx;
color: #666666;
font-size: 24rpx;
margin-right: 18.67rpx;
&:nth-child(-n+2){
margin-bottom: 16.67rpx;
}
}
}
}
}
}
.promotion{
padding-top: 36rpx;
padding-left: 30.67rpx;
border-bottom: #F7F7F7 13.33rpx solid;
padding-bottom: 35.33rpx;
.promotion_title{
font-size: 29.33rpx;
font-weight: bold;
margin-bottom: 34rpx;
}
.promotion_content{
display: flex;
align-items: center;
color: #B22234;
font-size: 18rpx;
.promotion_content_item{
background-color: #FBFAF8;
padding: 20rpx 0;
padding-left: 22.67rpx;
display: flex;
align-items: center;
padding-right: 18rpx;
margin-right: 18.67rpx;
image{
width: 57.33rpx;
height: 57.33rpx;
}
.promotion_item_right{
margin-left: 8.67rpx;
.title{
font-weight: 600;
}
}
}
}
}
.transport{
padding: 0 26.67rpx;
padding-top: 37.33rpx;
border-bottom: #F7F7F7 13.33rpx solid;
.title_Mtop{
margin-top: 25.33rpx;
}
.security{
padding-top: 36rpx;
padding-bottom: 32.67rpx;
border-bottom: 1px solid #E2E2E2;
.security_content{
margin-top: 26rpx;
padding-left: 50rpx;
font-size: 24rpx;
font-weight: 400;
ul{
display: flex;
align-items: center;
padding-left: 0;
margin-bottom: 18.67rpx;
&:last-child{
margin-bottom: 0;
}
li{
margin-right: 64.67rpx;
}
}
}
}
.description{
padding: 34.67rpx 0;
}
}
.reviews{
border-bottom: #F7F7F7 13.33rpx solid;
padding: 0 26.67rpx;
padding-top: 36rpx;
.allReviews{
background-color: #F7F7F7;
display: flex;
align-items: center;
padding-left: 26.67rpx;
border-radius: 6.67rpx;
font-size: 66.67rpx;
font-weight: 800;
margin-top: 32.67rpx;
height: 118.67rpx;
text{
display: inline-block;
margin-right: 42rpx;
}
}
.reviews_item{
padding: 34rpx 0;
border-bottom: 1px solid #E2E2E2;
&:last-child{
border-bottom: none;
}
.reviews_item_title{
display: flex;
align-items: center;
justify-content: space-between;
.reviews_title_user{
font-size: 32rpx;
display: flex;
align-items: center;
color: #3D3D3D;
text{
display: inline-block;
margin-right: 26rpx;
}
}
.reviews_title_time{
font-size: 24rpx;
font-weight: 400;
color: #909090;
}
}
.reviews_item_color{
font-size: 24rpx;
color: #909090;
font-weight: 400;
margin-bottom: 21.33rpx;
margin-top: 10rpx;
}
.reviews_item_content{
font-size: 26.67rpx;
font-weight: 400;
margin-bottom: 34.67rpx;
}
.reviews_item_image{
display: flex;
align-items: center;
.reviews_image_content{
width: 233.33rpx;
height: 233.33rpx;
margin-left: 16.67rpx;
background-color: #999999;
&:first-child{
margin-left: 0;
}
}
}
}
}
.productImage{
.productImage_title{
padding: 35.33rpx 36.67rpx;
font-size: 29.33rpx;
font-weight: bold;
}
.productImage_image{
width: 100%;
height: 788rpx;
margin-bottom: 62rpx;
background-color: #999999;
}
.productImage_image1{
width: 100%;
height: 532rpx;
background-color: #999999;
}
.recommend1{
padding-top: 0;
padding-right: 0;
.spike1{
border-bottom: none;
}
}
}
.footer{
padding: 42rpx 0;
padding-left: 27.33rpx;
padding-right: 19.33rpx;
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
box-sizing: border-box;
border-top: 1px solid #F6F5FA;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 36rpx;
.footer_left{
font-weight: bold;
display: flex;
align-items: center;
}
.footer_right{
display: flex;
align-items: center;
font-weight: 400;
button{
height: 73.33rpx;
line-height: 73.33rpx;
background-color: #191919;
margin: 0;
font-size: 26.67rpx;
color: white;
border-radius: 0;
width: 383.33rpx;
}
}
}
</style>

59
pages/shippingCart/index.vue
View File

@ -31,7 +31,6 @@
<text>Multicolor;41</text> <text>Multicolor;41</text>
<image src="/static/img/bottom.png" mode=""></image> <image src="/static/img/bottom.png" mode=""></image>
</view> </view>
<text>x1</text>
</view> </view>
<view class="info_price"> <view class="info_price">
<text>US$314.00</text> <text>US$314.00</text>
@ -86,6 +85,18 @@
</view> </view>
</view> </view>
</view> </view>
<view class="footer">
<view class="footer_left">
<image src="../../static/img/select2.png" mode=""></image>
<text>All</text>
</view>
<view class="footer_right">
<text>US$314.00</text>
<button>CHECKOUT(2)</button>
</view>
</view>
</view> </view>
</template> </template>
@ -115,6 +126,7 @@
<style> <style>
page{ page{
background-color: #F6F5FA; background-color: #F6F5FA;
padding-bottom: 150rpx;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -274,5 +286,48 @@
} }
} }
.footer{
padding: 42rpx 0;
padding-left: 27.33rpx;
padding-right: 19.33rpx;
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
box-sizing: border-box;
border-top: 2px solid #F6F5FA;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 36rpx;
.footer_left{
font-weight: 400;
display: flex;
align-items: center;
image{
width: 34.67rpx;
height: 34.67rpx;
margin-right: 10rpx;
}
}
.footer_right{
display: flex;
align-items: center;
font-weight: 600;
button{
height: 73.33rpx;
line-height: 73.33rpx;
background-color: #191919;
margin: 0;
font-size: 26.67rpx;
font-weight: bold;
color: white;
margin-left: 23.33rpx;
border-radius: 0;
}
}
}
</style> </style>

BIN
static/img/goods_lable.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
static/img/like1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/img/security.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/img/share.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/img/transport.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

Write Preview
Loading…
Cancel
Save