|
|
@@ -0,0 +1,119 @@
|
|
|
+<template>
|
|
|
+ <view class="confirm-order-box iPhone-bottom flex-common-css box-border-box">
|
|
|
+ <view class="bg-box"></view>
|
|
|
+ <Nav title='提交订单' bgckgroundBox='transparent'></Nav>
|
|
|
+
|
|
|
+ <view class="scroll-view-css box-border-box p-24">
|
|
|
+ <view class="box-card box-border-box mb-20 bgc-f">
|
|
|
+ <view class="box-input box-border-box p-b-20 mb-20">
|
|
|
+ <view class="flex-justify-space mb-12">
|
|
|
+ <view class="fs-36 fw-600 text-overflow-ellipsis w570">
|
|
|
+ 重庆工商职业学校3栋1楼503重庆工 商职业学校3栋1楼503重庆工商职业学校3栋1楼503重庆工 商职业学校3栋1楼503
|
|
|
+ </view>
|
|
|
+ <image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ <span class="mr-24 fs-28 fc-9">张晓鹏</span><span class="fs-28 fc-9">18883660721</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box-input flex-justify-space box-border-box p-b-20 mb-20">
|
|
|
+ <view class="fs-28 fw-600">配送方式</view>
|
|
|
+ <view class="fs-24 fw-400 sd-box fc-FB3D03">送达宿舍</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="box-card box-border-box mb-20 bgc-f flex-justify-space">
|
|
|
+ <view class="fs-28 fw-600 w158">支付方式</view>
|
|
|
+ <view class="wx-box display-flex">
|
|
|
+ <image src="@/static/img/common/wx-zf.png" mode="scaleToFill"></image>
|
|
|
+ <view class="fs-28 fw-400 ml-10">微信支付</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="bottom-box box-border-box p-24">
|
|
|
+ <view class="flex-justify-space">
|
|
|
+ <view class="align-items-flex-end box-1">
|
|
|
+ <span class="fs-28 fc-f fw-600">¥</span>
|
|
|
+ <span class="fs-44 fc-f fw-600">19.5</span>
|
|
|
+ </view>
|
|
|
+ <view class="text-align-center box-2 fs-32 fc-f fw-600" @click="toSave()">立即支付</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .right-icon{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ .w570{
|
|
|
+ width: 570rpx;
|
|
|
+ }
|
|
|
+ .sd-box{
|
|
|
+ padding: 3rpx 16rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: rgba(251,61,3,0.1);
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-order-box{
|
|
|
+ position: relative;
|
|
|
+ .bg-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 448rpx;
|
|
|
+ filter: blur(80rpx);
|
|
|
+ background: linear-gradient(to right,rgba(176, 252, 250, 0.6),rgba(249,246,224,0.87),rgba(249,246,224,0.87));
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ .bottom-box{
|
|
|
+ background-color: #fff;
|
|
|
+ .box-1{
|
|
|
+ flex: 1;
|
|
|
+ height: 100rpx;
|
|
|
+ background: #333;
|
|
|
+ border-radius: 200rpx 0rpx 0rpx 200rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 32rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .box-2{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ background: #41ABF5;
|
|
|
+ border-radius: 0rpx 200rpx 200rpx 0rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card{
|
|
|
+ width: 100%;
|
|
|
+ min-height: 88rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 24rpx 24rpx 0 24rpx;
|
|
|
+ }
|
|
|
+ .wx-box{
|
|
|
+ image{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-input{
|
|
|
+ border-bottom: 2rpx solid #F9F9F9;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|