liuqing
/
huazhiyu
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

1

Browse Source
pull/1/head
liudan 1 year ago
parent d2b53131b2
commit 2d2bfa09bc
2 changed files with 61 additions and 205 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 130
      pages/ConfirmOrder/ConfirmOrder.scss
  2. 136
      pages/ConfirmOrder/ConfirmOrder.vue

130
pages/ConfirmOrder/ConfirmOrder.scss
Unescape View File

@ -4,11 +4,10 @@
/* 地址 */
.address-data{
position: relative;
padding: 10rpx 4%;
padding: 10rpx 20rpx;
background-color: #FFFFFF;
margin:0 24rpx;
overflow: hidden;
border:1px solid red;
margin-top:24rpx;
border-radius: 8rpx;
.address-list{
@ -18,14 +17,23 @@
align-items: center;
width: 100%;
height: 60rpx;
text{
.moren{
padding:5rpx 10rpx;
background-color: #9F751F;
border-radius: 10rpx;
font-size: 24rpx;
color: #555555;
color:#ffffff;
margin-right: 10rpx;
}
text{
font-weight: bold;
font-size: 28rpx;
color: #9F751F;
margin-right: 10rpx;
}
.address{
font-size: 32rpx;
color: #222222;
font-size: 24rpx;
color: #9F751F;
}
.tips{
color: $base;
@ -35,20 +43,11 @@
}
/* 商品 */
.goods-data{
padding: 10rpx 4%;
background-color: #FFFFFF;
border-radius: 20rpx;
margin: 20rpx auto;
.goods-title{
display: flex;
align-items: center;
width: 100%;
height: 80rpx;
text{
font-size: 26rpx;
color: #222222;
}
}
.goods-list{
width: 100%;
.list{
@ -130,88 +129,9 @@
}
}
}
.delivery{
width: 100%;
.list{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 80rpx;
.title{
font-size: 26rpx;
color: #555555;
}
.content{
display: flex;
align-items: center;
height: 40rpx;
text{
font-size: 26rpx;
color: #222222;
}
.iconfont{
// font-size: 24rpx;
margin-top: 6rpx;
margin-left: 10rpx;
}
.icon-check{
font-size: 34rpx;
}
input{
height: 80%;
font-size: 26rpx;
color: #222222;
text-align: right;
}
}
}
}
}
/* 优惠 */
.discounts-data{
width: 100%;
margin: 20rpx auto;
background-color: #FFFFFF;
border-radius: 20rpx;
.discounts{
padding: 0 4%;
.list{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 80rpx;
.title{
font-size: 26rpx;
color: #555555;
}
.content{
display: flex;
align-items: center;
height: 40rpx;
text{
font-size: 26rpx;
color: #222222;
}
.iconfont{
// font-size: 24rpx;
margin-top: 6rpx;
margin-left: 10rpx;
}
.icon-check{
font-size: 34rpx;
}
input{
height: 80%;
font-size: 26rpx;
color: #222222;
text-align: right;
}
}
}
}
}
/**
* 地址提示
*/
@ -234,8 +154,7 @@
}
/* 订单金额 */
.order-price{
width: 100%;
margin: 20rpx auto;
margin: 20rpx 24rpx;
background-color: #FFFFFF;
border-radius: 20rpx;
.price-list{
@ -260,7 +179,7 @@
text{
font-size: 26rpx;
font-weight: bold;
color: #222222;
color: $base;
}
.highlight{
color: $base;
@ -286,15 +205,12 @@
display: flex;
align-items: flex-end;
text{
font-weight: bold;
color: $base;
}
.min{
font-size: 32rpx;
}
.max{
font-size: 48rpx;
font-size: 28rpx;
}
}
.submit{
display: flex;
@ -303,7 +219,7 @@
width: 200rpx;
height: 70rpx;
background-color: $base;
border-radius: 70rpx;
border-radius: 10rpx;
text{
font-size: 26rpx;
color: #FFFFFF;

136
pages/ConfirmOrder/ConfirmOrder.vue
Unescape View File

@ -4,137 +4,78 @@
<view class="address-data">
<view class="address-list" @click="onSkip('address')">
<view class="list">
<view class="moren">
默认
</view>
<text>张三</text>
<text>178****8888</text>
<text style="font-weight: normal;">178****8888</text>
</view>
<view class="list">
<text>黑龙江哈尔滨市道里区城区</text>
<text style="font-weight: normal;">黑龙江哈尔滨市道里区城区</text>
</view>
<view class="list">
<text class="address">爱建路1333号</text>
</view>
<view class="list">
<text class="tips">(如果快递不方便接收，您可以选择暂时寄存服务)</text>
</view>
</view>
</view>
<!-- 商品 -->
<view class="goods-data">
<view class="goods-title">
<text>商品信息</text>
</view>
<view class="goods-list">
<view class="list" v-for="(item,index) in 4" :key="index">
<view class="thumb">
<image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'" mode=""></image>
</view>
<view class="item">
<view class="title">
<text class="name one-omit">美连诚雪纺连衣裙 2020新款女夏裙子波点气质沙滩裙仙气时尚女装休闲衣服大码女装 白底红点 M</text>
<text class="attr">颜色：灰色,XL</text>
<view class="goods-data">
<view class="goods-list">
<view class="list">
<view class="thumb">
<image :src="'/static/img/goods_thumb_01'+'.png'" mode=""></image>
</view>
<view class="price-number">
<view class="price">
<text class="min">￥</text>
<text class="max">299</text>
<text class="min">.00</text>
<view class="item">
<view class="title">
<text class="name one-omit">美连诚雪纺连衣裙 2020新款女夏裙子波点气质沙滩裙仙气时尚女装休闲衣服大码女装 白底红点 M</text>
<text class="attr">颜色：灰色,XL</text>
</view>
<view class="number">
<text>x 1</text>
<view class="price-number">
<view class="price">
<text class="min">￥</text>
<text class="max">299</text>
<text class="min">.00</text>
</view>
<view class="number">
<text>x 1</text>
</view>
</view>
<!-- <view class="tag">
<text>支持七天无理由退货</text>
</view> -->
</view>
<!-- <view class="tag">
<text>支持七天无理由退货</text>
</view> -->
</view>
</view>
</view>
<view class="delivery">
<div class="list">
<view class="title">配送</view>
<view class="content">
<text>快递运输</text>
<text class="iconfont icon-more"></text>
</view>
</div>
<div class="list">
<view class="title">运费险</view>
<view class="content">
<text>￥10.00</text>
<text class="iconfont icon-check"></text>
</view>
</div>
<div class="list">
<view class="title">留言</view>
<view class="content">
<input type="text" placeholder="选填,建议先和商家沟通确认">
</view>
</div>
</view>
</view>
<!-- 优惠 -->
<view class="discounts-data">
<view class="discounts">
<div class="list" @click="$refs['InvoiceInfo'].show()">
<view class="title">发票</view>
<view class="content">
<text>不开发票</text>
<text class="iconfont icon-more"></text>
</view>
</div>
<div class="list" @click="$refs['UseCoupon'].show()">
<view class="title">优惠券</view>
<view class="content">
<text>无可用</text>
<text class="iconfont icon-more"></text>
</view>
</div>
<div class="list">
<view class="title">积分</view>
<view class="content">
<text>共300，满1000可用</text>
<!-- <text class="iconfont icon-more"></text> -->
</view>
</div>
</view>
</view>
<!-- 订单金额 -->
<view class="order-price">
<view class="price-list">
<view class="list">
<view class="title">
<text>商品金额</text>
<text>备注</text>
</view>
<view class="price">
<text>￥299.00</text>
<text class="iconfont icon-more"></text>
</view>
</view>
<view class="list">
<view class="title">
<text>会员折扣</text>
<text>商品总额</text>
</view>
<view class="price">
<text>-￥19.00</text>
</view>
</view>
<view class="list">
<view class="title">
<text>运费</text>
</view>
<view class="price">
<text class="highlight">+￥0.00</text>
</view>
</view>
<view class="list">
<view class="title">
<text>运费险</text>
</view>
<view class="price">
<text class="highlight">+￥0.00</text>
</view>
</view>
</view>
</view>
<!-- 地址提示 -->
@ -144,9 +85,8 @@
<!-- 底部合计提交 -->
<view class="footer-submit">
<view class="price">
<text class="min">￥</text>
<text class="max">299</text>
<text class="min">.00</text>
<text class="min">合计：￥299</text>
</view>
<view class="submit" @click="onSubmit">
<text>提交订单</text>

Write Preview
Loading…
Cancel
Save