|
@@ -16,12 +16,15 @@
|
|
<!-- 商品列表 -->
|
|
<!-- 商品列表 -->
|
|
<view class="goods-item" v-for="(item,index) in 6" :key="index">
|
|
<view class="goods-item" v-for="(item,index) in 6" :key="index">
|
|
<view class="goods-imgs">
|
|
<view class="goods-imgs">
|
|
- <u-image width="150rpx" height="150rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
|
|
|
|
|
|
+ <u-image border-radius="12" width="158rpx" height="140rpx" src="/static/goods.png"></u-image>
|
|
</view>
|
|
</view>
|
|
<view class="goods-info">
|
|
<view class="goods-info">
|
|
<view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
|
|
<view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
|
|
<view class="goods-price">
|
|
<view class="goods-price">
|
|
- <view><text>50</text>乐豆</view>
|
|
|
|
|
|
+ <view>
|
|
|
|
+ <text>50</text>
|
|
|
|
+ <u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
|
|
|
|
+ </view>
|
|
<view>×2</view>
|
|
<view>×2</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -29,19 +32,25 @@
|
|
<!-- 总计 -->
|
|
<!-- 总计 -->
|
|
<view class="goods-heji">
|
|
<view class="goods-heji">
|
|
<view>
|
|
<view>
|
|
- <view>商品合计</view>
|
|
|
|
- <view><text>250</text>乐豆</view>
|
|
|
|
|
|
+ <view>商品合计:</view>
|
|
|
|
+ <view class="heji">
|
|
|
|
+ <text>250</text>
|
|
|
|
+ <u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view>
|
|
- <view>运费</view>
|
|
|
|
|
|
+ <view>运费:</view>
|
|
<view>免运费</view>
|
|
<view>免运费</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cart-submit">
|
|
<view class="cart-submit">
|
|
- <view>总计:<text>450</text> 乐豆</view>
|
|
|
|
<view>
|
|
<view>
|
|
- <u-button type="warning" @click="toPay">确认支付</u-button>
|
|
|
|
|
|
+ <view>总计:<text>450</text></view>
|
|
|
|
+ <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
|
|
|
|
+ </view>
|
|
|
|
+ <view>
|
|
|
|
+ <u-button size="mini" :custom-style="toOrderButton" type="error" @click="toPay">确认支付</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -51,6 +60,12 @@
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ toOrderButton: {
|
|
|
|
+ borderRadius:'100rpx',
|
|
|
|
+ fontSize:'30rpx',
|
|
|
|
+ width: '180rpx',
|
|
|
|
+ height: '60rpx'
|
|
|
|
+ }
|
|
};
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
@@ -75,17 +90,17 @@ page{
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
box-shadow: 1px 1px 3px #eee;
|
|
box-shadow: 1px 1px 3px #eee;
|
|
border-bottom: 1px solid #eee;
|
|
border-bottom: 1px solid #eee;
|
|
|
|
+ border-top: 10upx solid #F8F8F8;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
- padding:20upx 10upx;
|
|
|
|
|
|
+ padding:15upx 20upx;
|
|
.position{
|
|
.position{
|
|
flex-grow: 1;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
> view{
|
|
> view{
|
|
- padding: 0 5upx;
|
|
|
|
|
|
+ padding: 10upx;
|
|
.address{
|
|
.address{
|
|
- font-weight: bold;
|
|
|
|
- padding: 10upx 0;
|
|
|
|
|
|
+ padding: 5upx 0;
|
|
}
|
|
}
|
|
&:last-child{
|
|
&:last-child{
|
|
padding: 0 20upx;
|
|
padding: 0 20upx;
|
|
@@ -103,7 +118,7 @@ page{
|
|
}
|
|
}
|
|
|
|
|
|
.goods-item{
|
|
.goods-item{
|
|
- padding: 20upx;
|
|
|
|
|
|
+ padding: 20upx 40upx;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
@@ -117,6 +132,9 @@ page{
|
|
}
|
|
}
|
|
.goods-info{
|
|
.goods-info{
|
|
padding-left: 20upx;
|
|
padding-left: 20upx;
|
|
|
|
+ .good-name{
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.goods-price{
|
|
.goods-price{
|
|
display: flex;
|
|
display: flex;
|
|
@@ -125,11 +143,13 @@ page{
|
|
padding-top: 20upx;
|
|
padding-top: 20upx;
|
|
>view{
|
|
>view{
|
|
&:first-child{
|
|
&:first-child{
|
|
- font-size: 22upx;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
text{
|
|
text{
|
|
color: red;
|
|
color: red;
|
|
- font-size: 30upx;
|
|
|
|
|
|
+ font-size: 35upx;
|
|
margin-right: 6upx;
|
|
margin-right: 6upx;
|
|
|
|
+ font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -137,7 +157,7 @@ page{
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.goods-heji{
|
|
.goods-heji{
|
|
- padding: 20upx;
|
|
|
|
|
|
+ padding: 20upx 40upx;
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
box-shadow: 1px 1px 3px #eee;
|
|
box-shadow: 1px 1px 3px #eee;
|
|
margin-top: 20upx;
|
|
margin-top: 20upx;
|
|
@@ -146,14 +166,20 @@ page{
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
padding: 10upx 0;
|
|
padding: 10upx 0;
|
|
- text{
|
|
|
|
- color: red;
|
|
|
|
- margin-right: 6upx;
|
|
|
|
|
|
+ .heji{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ text{
|
|
|
|
+ color: red;
|
|
|
|
+ margin-right: 6upx;
|
|
|
|
+ font-size: 35upx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cart-submit{
|
|
.cart-submit{
|
|
- padding: 20upx;
|
|
|
|
|
|
+ padding: 20upx 30upx;
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
box-shadow: 1px 1px 3px #eee;
|
|
box-shadow: 1px 1px 3px #eee;
|
|
border-top: 1px solid #eee;
|
|
border-top: 1px solid #eee;
|
|
@@ -161,10 +187,15 @@ page{
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
> view{
|
|
> view{
|
|
- text{
|
|
|
|
- color: red;
|
|
|
|
- font-size: 36upx;
|
|
|
|
- margin-right: 6upx;
|
|
|
|
|
|
+ &:first-child{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ text{
|
|
|
|
+ color: red;
|
|
|
|
+ font-size: 40upx;
|
|
|
|
+ margin-right: 6upx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|