Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[完成] 确认订单页面UI 

[完成] 商品详情页商品选规格模态框
master
邓平艺 4 years ago
parent
9ed3e754db
commit
e752916122
3 changed files with 375 additions and 6 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. 7
      pages.json
  2. 213
      pages/order/confirm/confirm.vue
  3. 161
      pages/shop/goodsdetail.vue

7
pages.json
View File

@ -823,6 +823,13 @@
"navigationBarTitleText": "发表",
"navigationStyle": "custom"
}
},
{
"path" : "pages/order/confirm/confirm",
"style" : {
"navigationBarTitleText": "确认订单",
"navigationStyle": "custom"
}
}
],
"globalStyle": {

213
pages/order/confirm/confirm.vue
View File

@ -0,0 +1,213 @@
<template>
<view>
<lf-nav title="确认订单" :showIcon="true"></lf-nav>
<view class="card head">
<view class="lf-font-32 lf-color-222">选择收货方式</view>
<view class="capsule">
<view class="item" :class="{'capsule-active': mode == 1}" @click="mode = 1">邮寄</view>
<view class="item" :class="{'capsule-active': mode == 2}" @click="mode = 2">自提</view>
</view>
</view>
<view class="card address" v-if="mode == 1">
<view>
<text class="lf-font-28 lf-color-primary lf-m-r-10">更换收获地址</text>
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-color-777"></text>
</view>
<view class="lf-m-t-20">
<text class="lf-font-28 lf-color-222 lf-font-bold">王小二</text>
<text class="lf-font-28 lf-color-777 lf-m-l-20">18284385380</text>
</view>
<view class="lf-font-28 lf-color-333 lf-m-t-10">
<text>广西壮族自治区-南宁市-青秀区-民族大道民族大道民族大道民族大道民族大道民族大道15号</text>
</view>
</view>
<view class="card goods">
<view>
<text class="lf-iconfont icon-Group- lf-font-30"></text>
<text class="shop-name">精品超市</text>
<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
</view>
<view class="lf-flex lf-m-t-20">
<image class="goods-img"></image>
<view class="info">
<view class="lf-font-26 lf-color-333 lf-line-1">爱他美较大婴儿配方奶粉较大配方奶粉较2段 </view>
<view class="lf-font-24 lf-color-777">500g</view>
<view class="lf-row-between" style="line-height: 1;">
<text class="price">¥385</text>
<text class="lf-font-28 lf-color-777">x 2</text>
</view>
</view>
</view>
<view class="tips">支付成功后15天内柜台提货</view>
<view class="lf-flex lf-m-t-20">
<view class="lf-font-28 lf-color-777">留言</view>
<input v-model="value" class="input" placeholder="有什么要求，请备注留言" />
</view>
</view>
<view class="card lf-m-t-20">
<view class="lf-row-between">
<view class="lf-font-28 lf-color-777">优惠券</view>
<view>
<text class="lf-font-26 lf-color-999 lf-m-r-10">暂无优惠券</text>
<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
</view>
</view>
<view class="lf-row-between lf-m-t-20">
<view class="lf-font-28 lf-color-777">商品金额</view>
<view class="lf-font-26 lf-color-222">¥385</view>
</view>
<view class="lf-row-between lf-m-t-20" v-if="mode == 1">
<view class="lf-font-28 lf-color-777">运费</view>
<view class="lf-font-26" style="color: #F63434;">¥0</view>
</view>
<view class="lf-row-between lf-m-t-20">
<view class="lf-font-28 lf-color-777">优惠</view>
<view class="lf-font-26" style="color: #F63434;">¥0</view>
</view>
</view>
<view class="spread-out"></view>
<view class="fixed-bottom">
<view class="fixed-content">
<view class="lf-font-24 lf-color-777">共1件</view>
<view class="lf-flex">
<view class="lf-font-32 lf-color-primary" style="max-width: 400rpx;">合计 ¥385</view>
<view class="confirm-btn" hover-class="lf-opacity">提交订单</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
mode: 1, // 1邮寄，2自提
value: '' // 备注
}
},
onLoad(){
},
methods: {
}
}
</script>
<style>
page{
background-color: #F8F8F8;
}
</style>
<style lang="scss" scoped="scoped">
.card{
height: max-content;
width: 750rpx;
padding: 30rpx 32rpx;
background-color: #FFFFFF;
}
.head{
.capsule{
width: 614rpx;
height: 100rpx;
margin: 30rpx auto 0;
border-radius: 100px;
border: 2rpx solid #15716E;
display: flex;
overflow: hidden;
.item{
width: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
font-weight: bold;
color: #15716E;
}
.capsule-active{
background-color: #15716E;
color: #FFFFFF;
}
}
}
.address{
margin-top: 20rpx;
}
.goods{
margin-top: 20rpx;
.shop-name{
font-size: 28rpx;
color: #222222;
font-weight: bold;
margin: 0 15rpx;
}
.goods-img{
width: 130rpx;
height: 130rpx;
border-radius: 4rpx;
margin-right: 15rpx;
background-color: #EEEEEE;
}
.info{
width: 540rpx;
height: 130rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
.price{
font-size: 32rpx;
color: #F63434;
font-weight: bold;
}
}
.tips{
font-size: 22rpx;
margin-top: 30rpx;
color: #15716E;
}
.input{
margin-left: 30rpx;
font-size: 28rpx;
width: 596rpx;
}
}
.spread-out{
height: 138rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: content-box;
}
.fixed-bottom{
position: fixed;
left: 0;
bottom: 0;
width: 750rpx;
height: max-content;
background-color: #FFFFFF;
border-top: 1rpx solid #e5e5e5;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.fixed-content{
width: 100%;
height: 118rpx;
padding: 0 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
.confirm-btn{
width: 167rpx;
height: 80rpx;
background: #15716E;
border-radius: 40rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
margin-left: 30rpx;
font-size: 26rpx;
}
}
}
</style>

161
pages/shop/goodsdetail.vue
View File

@ -1,6 +1,6 @@
<template>
<view>
<lf-nav :spreadOut="false" :showIcon="true" bgColor="transparent!important"></lf-nav>
<lf-nav title="商品详情" titleColor="#fff" :spreadOut="false" :showIcon="true" bgColor="transparent"></lf-nav>
<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true">
<block>
<!-- 商品图片轮播 -->
@ -129,13 +129,58 @@
</button>
</view>
<view class="lf-flex">
<button class="btn1" @click="toAddOrder">加入购物车</button>
<button class="btn lf-m-l-15" @click="toAddOrder">立即购买</button>
<button class="btn1" @click="shoot(1)">加入购物车</button>
<button class="btn lf-m-l-15" @click="shoot(2)">立即购买</button>
</view>
</view>
<!-- 加入购物车、立即购买模态框选规格 -->
<u-popup v-model="show_popup" mode="bottom">
<view class="popup-content">
<!-- 商品信息及关闭按钮 -->
<view class="popup-head">
<view class="lf-flex">
<image class="goods-img" src="https://picsum.photos/200"></image>
<view class="goods-info">
<view class="price">¥5.8</view>
<view class="goods-name">桃子</view>
</view>
</view>
<view @click="show_popup = false">
<text class="lf-iconfont icon-cuo lf-font-50"></text>
</view>
</view>
<!-- 规格 -->
<view class="spec-title">重量</view>
<view class="lf-flex-wrap">
<view :class="{
'spec-item': true,
'spec-active': spec_current == index}"
@click="activeSpec(index)"
v-for="(item, index) in 5"
:key="index">{{ item +'0克' }}
</view>
</view>
<!-- 数量 -->
<view class="lf-row-between lf-m-t-40">
<view class="lf-font-28 lf-color-555">数量</view>
<view class="lf-flex">
<view class="num-btn">
<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
</view>
<view>
<input class="input" value="1" />
</view>
<view class="num-btn lf-text-right">
<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
</view>
</view>
</view>
<!-- 操作按钮 -->
<button class="comfirm-btn" @click="confirm">{{ click_type == 1 ? '加入购物车' : '立即购买' }}</button>
</view>
</u-popup>
<!-- 回到顶部 -->
<!-- <u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}" :icon-style="{color: '#ffffff'}"></u-back-top> -->
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
<u-back-top :scroll-top="pageScrollTop"></u-back-top>
</block>
</skeleton>
</view>
@ -154,7 +199,10 @@
'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png'
]
],
show_popup: false, // 是否显示选规格模态框
spec_current: null, // 规格下标
click_type: null // 当前点击的是加入购物车[1]还是立即购买[2]
}
},
onLoad(options){
@ -171,6 +219,23 @@
}
},
methods: {
shoot(type){
// TODO 判断type做不同的逻辑
this.click_type = type;
this.show_popup = true;
},
activeSpec(index){
if(this.spec_current == index){
this.spec_current = null;
}else{
this.spec_current = index;
}
},
confirm(){
if(this.click_type == 2){
this.$url('/pages/order/confirm/confirm');
}
},
shareGraphic(){
this.getCreateShareImg();
},
@ -571,4 +636,88 @@
border-radius: 42rpx;
}
}
.popup-content{
height: max-content;
width: 750rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 0rpx 0rpx !important;
padding: 40rpx 32rpx;
.popup-head{
display: flex;
justify-content: space-between;
.goods-img{
width: 150rpx;
height: 150rpx;
border-radius: 2rpx;
margin-right: 20rpx;
}
.goods-info{
width: 400rpx;
height: 150rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
.price{
font-size: 48rpx;
font-weight: bold;
color: #F63434;
line-height: 1;
}
.goods-name{
font-size: 32rpx;
color: #222222;
line-height: 1.4;
}
}
}
.spec-title{
font-size: 28rpx;
color: #555555;
margin-top: 40rpx;
margin-bottom: 20rpx;
}
.spec-item{
width: 142rpx;
height: 64rpx;
border-radius: 33rpx;
border: 2rpx solid #555555;
font-size: 28rpx;
color: #555555;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20rpx;
&:nth-child(4n){
margin-right: 0rpx;
}
&:nth-child(n+5){
margin-top: 20rpx;
}
}
.spec-active{
border: none;
background-color: #15716E;
color: #FFFFFF;
}
.input{
width: 40rpx;
height: 45rpx;
border-radius: 2rpx;
background-color: #F3F8F7;
text-align: center;
}
.num-btn{
width: 36rpx;
}
.comfirm-btn{
width: 550rpx;
height: 100rpx;
background: #15716E;
border-radius: 50rpx;
color: #FFFFFF;
line-height: 100rpx;
margin-top: 62rpx;
}
}
</style>
Write Preview
Loading…
Cancel
Save