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.
193 lines
3.4 KiB
193 lines
3.4 KiB
<template>
|
|
<view>
|
|
<view class="address-window" :class="show==true?'on':''">
|
|
<view class="weikuan">
|
|
<view class="title">
|
|
确认商品数量
|
|
</view>
|
|
<view v-for="item in info.cartInfo">
|
|
<view class="product">
|
|
<image :src="item.productInfo.image" mode=""></image>
|
|
<view class="details">
|
|
<view class="pTitle">
|
|
{{item.productInfo.store_name}}
|
|
</view>
|
|
<view class="price">
|
|
￥{{item.attrInfo.price}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="num">
|
|
<text>数量:{{item.cart_num}}</text>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="totalInfo">
|
|
<view class="totalItem">
|
|
<text class="totalTitle">总计:</text>
|
|
<text class="totalDesc">¥{{info.total_price}}</text>
|
|
</view>
|
|
<view class="totalItem">
|
|
<text class="totalTitle">已支付:</text>
|
|
<text class="totalDesc">¥{{info.pay_price}}</text>
|
|
</view>
|
|
<view class="totalItem">
|
|
<text class="totalTitle">剩余尾款:</text>
|
|
<text class="totalDesc">¥{{info.pay_money_wei}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btnPay" @click="payHandle">
|
|
支付尾款
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class='mask' catchtouchmove="true" :hidden='show==false' @tap='close'></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
HTTP_REQUEST_URL
|
|
} from '@/config/app';
|
|
export default {
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
info:{
|
|
type:Object,
|
|
default:()=>{
|
|
return {}
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
|
|
close: function() {
|
|
this.$emit("close")
|
|
},
|
|
payHandle(){
|
|
this.$emit("weikuanPay")
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.address-window {
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
transform: translate3d(0, 100%, 0);
|
|
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
|
}
|
|
|
|
.address-window.on {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
.weikuan{
|
|
padding:30rpx 24rpx 53rpx 24rpx;
|
|
.title {
|
|
text-align: center;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 34rpx;
|
|
color: #333333;
|
|
|
|
}
|
|
.product{
|
|
display: flex;
|
|
margin-top:36rpx;
|
|
image{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
background: #EEEEEE;
|
|
border-radius: 20rpx;
|
|
}
|
|
.details{
|
|
|
|
flex:1;
|
|
margin-left:20rpx;
|
|
.pTitle{
|
|
|
|
margin-top: 16rpx;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
}
|
|
.price{
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #E4884E;
|
|
margin-top:25rpx;
|
|
}
|
|
}
|
|
}
|
|
.num{
|
|
margin-top:60rpx;
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
|
|
}
|
|
.totalInfo{
|
|
display: flex;
|
|
margin-top:40rpx;
|
|
.totalItem{
|
|
margin-right:31rpx;
|
|
.totalTitle{
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
|
|
}
|
|
.totalDesc{
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
|
|
}
|
|
}
|
|
}
|
|
.btnPay{
|
|
margin-top:50rpx;
|
|
line-height: 98rpx;
|
|
height: 98rpx;
|
|
background: #A8D178;
|
|
border-radius: 49px;
|
|
border: 1px solid #A8D178;
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|