deming/pageC/cart/ConfirmOrder.vue
2020-06-10 16:06:01 +08:00

280 lines
6.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="order">
<view class="info-address" @click="changeAddress">
<image src="../static/image/2.png" class="address-icon"></image>
<view class="address">
<view class="user-info">
<view>胖胖</view>
<view>18220171014</view>
</view>
<view class="address-text u-line-2">山东省泰安市泰山区东岳大街与克山路交汇口银山店四楼橙天影视南邻山东省泰安市泰山区东岳大街与克山路交汇口银山店四楼橙天影视南邻</view>
</view>
<image src="../static/image/1.png" class="right"></image>
</view>
<view class="main">
<view class="goods-info">
<view class="store">
<image class="avatar"></image>
<view>胖胖的店</view>
<image src="../static/image/1.png" class="right"></image>
</view>
<view class="goods">
<view v-for="(goods, g_index) in 1" :key="g_index" class="goods-item">
<image></image>
<view class="info">
<view class="name u-line-2">木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子</view>
<view class="cart-info">
<view class="price">¥99</view>
<u-number-box :input-width="38" :input-height="39" :size="22" bg-color="#FFFFFF" color="#FF780F" :index="g_index"></u-number-box>
</view>
</view>
</view>
</view>
</view>
<view class="order-info">
<view>
<view class="title">优惠券折扣</view>
<view class="value">
<view>-10.00</view>
<image src="../static/image/1.png"></image>
</view>
</view>
<view>
<view class="title">配送方式</view>
<view class="value">
<view>快递</view>
<image src="../static/image/1.png"></image>
</view>
</view>
<view>
<view class="title">支付方式</view>
<view class="value">
<view>微信</view>
<image src="../static/image/1.png"></image>
</view>
</view>
</view>
</view>
<view class="bottom">
<view class="left">
<view class="title">合计</view>
<view class="price">9.80</view>
</view>
<view class="right">
<view class="num">共1件商品</view>
<view class="btn" @click="settlement">结算</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
settlement() {
uni.navigateTo({
url: '/pageE/order/Details'
});
},
changeAddress() {
uni.navigateTo({
url: '/pageE/more/Address'
});
}
},
};
</script>
<style lang="scss" scoped>
.order {
min-height: calc(100vh - var(--window-top));
background-color: #ECECEC;
padding-top: 1rpx;
.info-address {
padding: 30rpx;
display: flex;
align-items: center;
margin-bottom: 10rpx;
background:rgba(255,255,255,1);
.address-icon {
width: 28rpx;
height: 34rpx;
margin-right: 31rpx;
flex-shrink: 0;
}
.address {
width: 570rpx;
.user-info {
display: flex;
align-items: center;
font-size: 28rpx;
color: rgba(51,51,51,1);
margin-bottom: 20rpx;
margin-right: 13rpx;
}
.address-text {
font-size: 24rpx;
color: rgba(102,102,102,1);
line-height: 42rpx;
}
}
.right {
flex-shrink: 0;
margin-left: auto;
width: 12rpx;
height: 22rpx;
}
}
.main {
.goods-info {
background-color: #ffffff;
padding: 30rpx;
margin-bottom: 2rpx;
.store {
display: flex;
align-items: center;
margin-bottom: 20rpx;
.avatar {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 1rpx solid #000;
margin-right: 15rpx;
}
> view {
font-size: 28rpx;
color: rgba(51,51,51,1);
margin-right: 15rpx;
}
.right {
flex-shrink: 0;
width: 11rpx;
height: 22rpx;
}
}
.goods {
.goods-item {
display: flex;
align-items: center;
&:not(:last-child) {
margin-bottom: 20rpx;
}
> image {
margin-right: 30rpx;
width: 180rpx;
height: 160rpx;
border-radius: 10rpx;
background-color: aqua;
flex-shrink: 0;
}
.info {
// width: 418rpx;
height: 160rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 30rpx;
color: rgba(51,51,51,1);
}
.cart-info {
display: flex;
align-items: center;
justify-content: space-between;
.price {
font-size: 30rpx;
font-weight: 500;
color: rgba(255,49,49,1);
}
.u-numberbox {
border: 1rpx solid rgba(217,215,215,1);
border-radius:4px;
/deep/ .u-number-input {
margin: 0;
color: #333 !important;
border: 1rpx #D9D7D7 solid {
top: 0px;
bottom: 0px;
}
}
}
}
}
}
}
}
.order-info {
> view {
height: 98rpx;
background: rgba(255,255,255,1);
padding: 35rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rpx;
.title {
font-size: 28rpx;
color: rgba(102,102,102,1);
}
.value {
display: flex;
align-items: center;
font-size: 30rpx;
color:rgba(51,51,51,1);
> image {
width: 12rpx;
height: 22rpx;
flex-shrink: 0;
margin-left: 20rpx;
}
}
}
}
}
.bottom {
padding: 35rpx 30rpx;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 98rpx;
background-color: rgba(255,255,255,1);
box-shadow: 0rpx 10rpx 14rpx 2rpx rgba(0, 0, 0, 0.34);
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
font-size: 30rpx;
.title {
color:rgba(153,153,153,1);
margin-right: 10rpx;
}
.price {
color: #F40E0E;
}
}
.right {
display: flex;
align-items: center;
.num {
font-size: 26rpx;
color: rgba(153,153,153,1);
margin-right: 50rpx;
}
.btn {
width: 160rpx;
height: 60rpx;
background: rgba(255,120,15,1);
border-radius: 30rpx;
font-size: 30rpx;
color: rgba(255,255,255,1);
line-height: 60rpx;
text-align: center;
}
}
}
}
</style>