<template>
<!--orderinfo{{cartIds}}{{amount}}-->
<view class="parent">
<view class="view-address">
<view class="view-addressleft">
<image src="/images/white_loc.png"></image>
<view class="view-addressleft-info">
<text class="text-name">收货人:{{ address.consignee }}</text>
<text class="text-address">收货地址:{{ address.address }}</text>
</view>
</view>
<view class="view-addressright">
<text class="text-mobile">{{ address.mobile }}</text>
<image src="/images/white_hint.png"></image>
</view>
</view>
<view v-for="(item,index) in cartList" :key="index" class="container carts-list">
<view v-if="item.show == 1" class="view-title">
<image src="/images/icon_order.png"></image>
<text>供应商:{{ item.store_name }}</text>
</view>
<view v-if="item.show == 1" class="class-line"></view>
<view class="carts-item">
<view>
<!-- 缩略图 -->
<image class="carts-image" src="{{item.image}}" mode="aspectFill" />
</view>
<view class="carts-text">
<!-- 商品标题 -->
<text class="carts-title">{{ item.goods_name }}</text>
<text class="carts-key-name">{{ item.spec_key_name }}</text>
<view class="carts-subtitle">
<!-- 价格 -->
<!--<text class="carts-price">{{item.goods_price}}</text>
-->
<!-- 数量加减 -->
</view>
</view>
<view class="carts-right">
<text class="text-red">¥{{ item.member_goods_price }}</text>
<text class="text-price">x{{ item.goods_num }}</text>
</view>
</view>
</view>
<view class="class-line1"></view>
<view class="view-freemoney">
<!--
<text class="text-hint">优 惠 劵:</text>
<input bindchange="bindChange" placeholder-style="color:#999999" class="input-money" placeholder="输入余额"/>
-->
<radio color="red" class="radio-style" value="0" checked="{{check[0]}}" />
<picker value="{{index}}" range="{{coupon}}">
<view class="view-picker">{{ cv }}</view>
</picker>
<text class="text-hint">或者</text>
<radio color="red" class="radio-style" value="1" checked="{{check[1]}}" />
<input placeholder-style="color:#999999" class="input-money" placeholder="直接输入优惠劵" style="width:200rpx" />
</view>
<view class="view-freemoney">
<text class="text-hint">使用余额:</text>
<input placeholder-style="color:#999999" class="input-money" placeholder="输入余额" />
<text class="btn-use" >使用</text>
<text class="text-hint1">您的可用余额{{ freemoney }}</text>
</view>
<view class="view-freemoney">
<text class="text-hint">使用积分:</text>
<input placeholder-style="color:#999999" class="input-money" placeholder="输入积分" />
<text class="btn-use">使用</text>
<text class="text-hint1">您的可用积分{{ pay_points }}</text>
</view>
<view class="class-line1"></view>
<view class="view-price">
<view class="view-price1">
<text class="text-price1">商品总额:</text>
<text class="text-red">¥{{ totalPrice.total_fee }}元</text>
</view>
<view hidden class="view-price1">
<text class="text-price1">邮费:</text>
<text class="text-red">¥20元</text>
</view>
<view class="view-price1">
<text class="text-price1">应付总金额:</text>
<text class="text-red">¥{{ totalPrice.total_fee }}元</text>
</view>
</view>
<view class="text-save" @longtap="longtap">提交订单</view>
</view>
</template>
<script>
export default {
methods:{
clickTest: function(e){
console.log(e);
console.log('click');
},
longtap: function(e){
console.log(e);
console.log('longtap');
}
}
}
</script>
<style lang="scss">
/ pages/order/ordersubmit/index.wxss /
.view-address {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 150rpx;
background: #3aa0b7;
}
.view-addressleft {
display: flex;
flex-direction: row;
padding: 20rpx 0 0 3;
justify-content: flex-start;
align-items: center;
width: 450rpx;
}
.view-addressleft image {
width: 50rpx;
height: 50rpx;
}
.view-addressleft-info {
display: flex;
flex-direction: column;
margin-left: 10rpx;
justify-content: space-around;
align-items: flex-start;
height: 85rpx;
}
.text-name {
font-size: 29rpx;
color: #ffffff;
}
.text-address {
font-size: 29rpx;
color: #ffffff;
}
.view-addressright {
height: 50rpx;
margin-right: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.text-mobile {
font-size: 29rpx;
color: #ffffff;
}
.view-addressright image {
width: 30rpx;
height: 30rpx;
margin-left: 15rpx;
}
.view-title {
display: flex;
flex-direction: row;
height: 75rpx;
align-items: center;
}
.view-title image {
width: 50rpx;
height: 50rpx;
}
.view-title text {
font-size: 29rpx;
color: black;
}
.class-line {
width: 670rpx;
margin-left: 0rpx;
height: 2rpx;
background: #f4f4f4;
}
/外部容器/
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
}
/整体列表/
.carts-list {
display: flex;
flex-direction: column;
padding: 0 40rpx;
}
/每行单元格/
.carts-item {
display: flex;
flex-direction: row;
height: 150rpx;
/width属性解决标题文字太短而缩略图偏移/
width: 100%;
border-bottom: 1px solid #eee;
padding: 30rpx 0;
justify-content: space-between;
}
/左部图片/
.carts-image {
width: 130rpx;
height: 150rpx;
border-width: 3rpx;
border-style: solid;
border-color: #ccc;
}
/右部描述/
.carts-text {
margin-left: 10rpx;
width: 370rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.carts-right {
height: 100%;
width: 110rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/右上部分标题/
.carts-title {
font-size: 27rpx;
color: #444;
line-height: 38rpx;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.carts-key-name {
margin-top: 10rpx;
font-size: 27rpx;
color: #999999;
}
/右下部分价格与数量/
.carts-subtitle {
font-size: 25rpx;
color: darkgray;
padding: 0 20rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
/价格/
.carts-price {
color: #f60;
font-size: 14px;
line-height: 22px;
margin-top: 12rpx;
}
/商品加减按钮/
/stepper容器/
.stepper {
border: 1px solid #ccc;
border-radius: 3px;
width: 80px;
height: 26px;
margin: 0 auto;
}
/加号与减号/
.stepper text {
width: 19px;
line-height: 26px;
text-align: center;
float: left;
}
/数值/
.stepper input {
color: black;
float: left;
margin: 0 auto;
width: 40px;
height: 26px;
text-align: center;
font-size: 12px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
/普通样式/
.stepper .normal {
color: black;
}
/禁用样式/
.stepper .disabled {
color: #ccc;
}
/复选框样式/
.carts-list icon {
margin-top: 60rpx;
margin-right: 20rpx;
}
/底部按钮/
.carts-footer {
width: 100%;
height: 80rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
border-top: 1px solid #eee;
background: white;
}
/复选框/
.carts-footer icon {
margin-left: 20rpx;
margin-top: 20rpx;
}
/全选字样/
.carts-footer text {
font-size: 30rpx;
margin-left: 8rpx;
line-height: 10rpx;
}
/立即结算按钮/
.carts-footer .button {
line-height: 80rpx;
text-align: center;
width: 220rpx;
height: 80rpx;
background-color: #f60;
color: white;
font-size: 36rpx;
border-radius: 0;
border: 0;
}
.carts-footer-left {
display: flex;
flex-direction: row;
align-items: center;
}
.carts-footer-left text {
margin-top: 20rpx;
}
.text-price {
font-size: 32rpx;
color: #999999;
}
.text-red {
font-size: 32rpx;
color: orangered;
}
.image-delete {
width: 50rpx;
height: 60rpx;
}
.class-line1 {
width: 750rpx;
height: 20rpx;
background: #f4f4f4;
}
.view-price {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
}
.view-price1 {
margin-top: 30rpx;
margin-right: 20rpx;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.text-price1 {
font-size: 29rpx;
color: grey;
}
.text-save {
width: 680rpx;
align-self: center;
font-size: 32rpx;
margin-top: 30rpx;
color: #ffffff;
text-align: center;
height: 70rpx;
border-radius: 9rpx;
background: orange;
line-height: 70rpx;
margin-bottom: 40rpx;
}
.parent {
display: flex;
flex-direction: column;
width: 100%;
}
.view-freemoney {
width: 100%;
height: 100rpx;
background: #ffffff;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid #eee;
}
.text-hint {
font-size: 28rpx;
color: #000000;
margin-left: 40rpx;
}
.text-hint1 {
font-size: 28rpx;
color: #000000;
margin-left: 20rpx;
flex-shrink: 0;
flex-grow: 0;
}
.input-money {
font-size: 26rpx;
color: #999999;
margin-left: 6rpx;
border-style: solid;
border-width: 1rpx;
padding-left: 15rpx;
width: 140rpx;
}
.btn-use {
line-height: 55rpx;
background: red;
color: #ffffff;
text-align: center;
font-size: 28rpx;
padding-left: 10rpx;
margin-left: 5rpx;
padding-right: 10rpx;
}
.radio-style {
font-size: 28rpx;
color: red;
margin-left: 40rpx;
}
.text-redhint {
font-size: 28rpx;
color: red;
}
.text-select {
font-size: 28rpx;
color: #999999;
width: 200rpx;
height: 40rpx;
line-height: 28rpx;
}
.view-picker {
border-style: solid;
border-color: #999999;
padding-left: 20rpx;
display: flex;
flex: row;
height: 60rpx;
justify-content: flex-start;
align-items: center;
width: 200rpx;
border-width: 1rpx;
font-size: 28rpx;
color: #999999;
}
</style>
0 个评论
要回复文章请先登录或注册