You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
213 lines
5.4 KiB
213 lines
5.4 KiB
<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>
|