|
|
@@ -1,192 +1,383 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
-
|
|
|
- <view class="content-box">
|
|
|
- <view class="message-box">
|
|
|
- <view class="message-item">
|
|
|
- <view class="item-left"> 订购人电话 </view>
|
|
|
- <view class="item-right">
|
|
|
- <u--input border='none' type='number' fontSize='14' placeholder="请输入您的订购电话" border="surround" v-model="value"></u--input>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <u-line margin='20rpx 0'></u-line>
|
|
|
-
|
|
|
- <view class="message-item">
|
|
|
- <view class="item-left"> 备注 </view>
|
|
|
- <view class="item-right">
|
|
|
- <u--textarea v-model="value3" placeholder="请输入内容" autoHeight ></u--textarea>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="message-box">
|
|
|
- <view class="message-item">
|
|
|
- <view class="item-left"> 支付方式 </view>
|
|
|
- <view class="item-right flex-end">
|
|
|
- <span >在线支付</span>
|
|
|
- <image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="message-box">
|
|
|
- <view class="goods-title"> 猫牙米·卖瓜的(红雷店) </view>
|
|
|
- <u-line margin='20rpx 0'></u-line>
|
|
|
- <view class="goods-item" v-for="item of 3">
|
|
|
- <view class="item-left">
|
|
|
- <image class="left-img" src="@/static/QR57a.jpg"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="message-box" >
|
|
|
- <view class="couon-box">
|
|
|
- <view class="coupon-left">
|
|
|
- <image class="img" src='@/static/images/coupon.png'></image>
|
|
|
- <view>通用优惠</view>
|
|
|
- </view>
|
|
|
- <view class="coupon-right red-color"> -0.1 </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <u-line margin='20rpx 0'></u-line>
|
|
|
-
|
|
|
- <view class="couon-box">
|
|
|
- <view class="coupon-left">
|
|
|
- <image class="img" src='@/static/images/coupon.png'></image>
|
|
|
- <span>商家优惠券</span>
|
|
|
- </view>
|
|
|
- <view class="coupon-right">
|
|
|
- <view class="red-color">暂无可用</view>
|
|
|
- <u-icon name="arrow-right" size='13'></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="message-box" >
|
|
|
- <view class="message-item">
|
|
|
- <view class="item-left"> 订单总价 </view>
|
|
|
- <view class="item-right flex-end red-color">
|
|
|
- <p style="margin-right: 20rpx; font-size: 36rpx; font-weight: bold;">￥9.9</p>
|
|
|
- <p>( 已优惠￥1.2 )</p>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="message-box" >
|
|
|
- <view class="message-name"> 购买须知 </view>
|
|
|
- <view class="message-text" style="text-indent:32.4px;">
|
|
|
- 洗车机常见的类型有高压洗车机和无水洗车机两种，高压洗车机可以配有不同的喷嘴，可实现不同场景下的清洗需求。
|
|
|
- 无水洗车机则是一种更为环保的洗车方式，它可以用高科技的化学技术在不用水的情况下清洗车辆。因此，
|
|
|
- 在购买洗车机时需要根据自己的实际需求进行选择
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
+ <view class="container">
|
|
|
+
|
|
|
+ <view class="content-box">
|
|
|
+ <view class="message-box">
|
|
|
+ <view class="message-item">
|
|
|
+ <view class="item-left"> 订购人电话 </view>
|
|
|
+ <view class="item-right">
|
|
|
+ <u--input border='none' type='number' fontSize='14' placeholder="请输入您的订购电话"
|
|
|
+ v-model="value"></u--input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-line margin='20rpx 0'></u-line>
|
|
|
+ <view class="message-item">
|
|
|
+ <view class="item-left"> 备注 </view>
|
|
|
+ <view class="item-right">
|
|
|
+ <u--textarea v-model="value3" placeholder="请输入内容" autoHeight></u--textarea>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="message-box">
|
|
|
+ <view class="message-item">
|
|
|
+ <view class="item-left"> 支付方式 </view>
|
|
|
+ <view class="item-right flex-end">
|
|
|
+ <span>在线支付</span>
|
|
|
+ <image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="message-box">
|
|
|
+ <view class="goods-title"> 猫牙米·卖瓜的(红雷店) </view>
|
|
|
+ <u-line margin='20rpx 0'></u-line>
|
|
|
+ <view class="goods-item" v-for="item of 3">
|
|
|
+ <view class="item-left">
|
|
|
+ <image class="left-img" src="@/static/QR57a.jpg"></image>
|
|
|
+ <view class="left-text">
|
|
|
+ <view class="text-name">测试内容1233啊啊是s冲破阿斯玛阿松出门</view>
|
|
|
+ <view class="text-number">×1</view>
|
|
|
+ <view class="price-box">
|
|
|
+ <p class="price red-color"> <span style="font-size: 24rpx;">￥</span>21.2 </p><span
|
|
|
+ class="false-price">￥5.9</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item-right">
|
|
|
+ <u-number-box v-model="numb"></u-number-box>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="message-box">
|
|
|
+ <view class="couon-box">
|
|
|
+ <view class="coupon-left">
|
|
|
+ <image class="img" src='@/static/images/coupon.png'></image>
|
|
|
+ <view>通用优惠</view>
|
|
|
+ </view>
|
|
|
+ <view class="coupon-right red-color"> -0.1 </view>
|
|
|
+ </view>
|
|
|
+ <u-line margin='20rpx 0'></u-line>
|
|
|
+ <view class="couon-box">
|
|
|
+ <view class="coupon-left">
|
|
|
+ <image class="img" src='@/static/images/coupon.png'></image>
|
|
|
+ <span>商家优惠券</span>
|
|
|
+ </view>
|
|
|
+ <view class="coupon-right" @click="coupon_show = true">
|
|
|
+ <view class="">暂无可用</view>
|
|
|
+ <u-icon name="arrow-right" size='13'></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="message-box">
|
|
|
+ <view class="message-item">
|
|
|
+ <view class="item-left"> 订单总价 </view>
|
|
|
+ <view class="item-right flex-end red-color">
|
|
|
+ <p style="margin-right: 20rpx; font-size: 36rpx; font-weight: bold;">￥9.9</p>
|
|
|
+ <p>( 已优惠￥1.2 )</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="message-box">
|
|
|
+ <view class="message-name"> 购买须知 </view>
|
|
|
+ <view class="message-text" style="text-indent:32.4px;">
|
|
|
+ 洗车机常见的类型有高压洗车机和无水洗车机两种，高压洗车机可以配有不同的喷嘴，可实现不同场景下的清洗需求。
|
|
|
+ 无水洗车机则是一种更为环保的洗车方式，它可以用高科技的化学技术在不用水的情况下清洗车辆。因此，
|
|
|
+ 在购买洗车机时需要根据自己的实际需求进行选择
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-popup :show="coupon_show" @close="coupon_show = false" mode='bottom' round='20'>
|
|
|
+ <view class="pop-box">
|
|
|
+ <view class="pop-title"> 商家优惠券 </view>
|
|
|
+ <u-line margin='20rpx 0'></u-line>
|
|
|
+ <view class="pop-item">
|
|
|
+ <view class="item-box">
|
|
|
+ <view class="item-left">
|
|
|
+ <view class="img-box">
|
|
|
+ <image class="left-img" src="@/static/images/honglei.png"></image>
|
|
|
+ </view>
|
|
|
+ <view class="left-text">
|
|
|
+ <view class="text-title">
|
|
|
+ 测试娜娜那是就擦拭破产马上
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 有效期至2024.01.25
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-right">
|
|
|
+ <view class="price red-color">
|
|
|
+ <span class="price-symbol">￥</span> 26
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 满减29可用
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="btn">
|
|
|
+ 结算
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- value:'',
|
|
|
- value3:''
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ value: '',
|
|
|
+ value3: '',
|
|
|
+ numb: 5,
|
|
|
+ coupon_show: false
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .container {
|
|
|
- min-height: calc(100vh - 40rpx);
|
|
|
- background: linear-gradient(to bottom, #c9d6ff, #D2DAF5, #F2F4FA, #fff);
|
|
|
- padding: 20rpx;
|
|
|
-
|
|
|
- .content-box {
|
|
|
- padding: 20rpx;
|
|
|
- max-height: calc(100vh - 80rpx);
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .message-box {
|
|
|
- padding: 20rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- background-color: #fff;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- box-shadow: 5px 5px 5px rgb(0, 0, 0,0.1);
|
|
|
- .message-item{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .item-left{
|
|
|
- font-size:32rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .item-right{
|
|
|
- width: 60%;
|
|
|
- align-items: center;
|
|
|
- .right-img{
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .couon-box{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .coupon-left{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 30rpx;
|
|
|
- .img{
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .coupon-right{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .goods-title{
|
|
|
- font-size:32rpx;
|
|
|
- }
|
|
|
- .goods-item{
|
|
|
- margin-bottom: 20rpx;
|
|
|
- .item-left{
|
|
|
- .left-img{
|
|
|
- width: 130rpx;
|
|
|
- height: 130rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .message-name{
|
|
|
- font-size:32rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .message-text{
|
|
|
- margin-top: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .flex-end{
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
-
|
|
|
- .red-color{
|
|
|
- color: #FF4B10;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .u-border{
|
|
|
- border-style: none !important;
|
|
|
- }
|
|
|
-</style>
|
|
|
+ .container {
|
|
|
+ min-height: calc(100vh - 40rpx);
|
|
|
+ background: linear-gradient(to bottom, #c9d6ff, #D2DAF5, #F2F4FA, #fff);
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .content-box {
|
|
|
+ padding: 20rpx 20rpx 120rpx;
|
|
|
+ max-height: calc(100vh - 180rpx);
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .message-box {
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .message-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item-left {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-right {
|
|
|
+ width: 60%;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .right-img {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .couon-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .coupon-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-item {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item-left {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .left-img {
|
|
|
+ width: 130rpx;
|
|
|
+ height: 130rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-text {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-left: 20rpx;
|
|
|
+
|
|
|
+ .text-name {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ width: 260rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ display: flex;
|
|
|
+ font-style: italic;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .false-price {
|
|
|
+ color: #CACDD4;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-text {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flex-end {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red-color {
|
|
|
+ color: #FF4B10;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .u-border {
|
|
|
+ border-style: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pop-box {
|
|
|
+ height: 700rpx;
|
|
|
+ background-color: #F4F4F4;
|
|
|
+
|
|
|
+ .pop-title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pop-item {
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .item-box {
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .item-left {
|
|
|
+ display: flex;
|
|
|
+ width: 70%;
|
|
|
+
|
|
|
+ .img-box,
|
|
|
+ .left-img {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-text {
|
|
|
+ margin-left: 20rpx;
|
|
|
+
|
|
|
+ .text-title {
|
|
|
+ font-size: 34rpx;
|
|
|
+ width: 350rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-right {
|
|
|
+ text-align: center;
|
|
|
+ width: 30%;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 56rpx;
|
|
|
+
|
|
|
+ .price-symbol {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #656565;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-box{
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 5%;
|
|
|
+ .btn{
|
|
|
+ width: 90%;
|
|
|
+ padding: 20rpx;
|
|
|
+ background: linear-gradient(to right, #1d4350, #a43931);
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
