|
|
@@ -1,352 +1,192 @@
|
|
|
<template>
|
|
|
- <view class="order-cantina">
|
|
|
- <!-- 商品信息1 -->
|
|
|
- <view class="shop-info public">
|
|
|
- <view class="title margin-bot flex">
|
|
|
- <text class="title-font"> {{ order_list.name }} </text>
|
|
|
- <text class="general-font">¥{{ order_list.specialPrice }}</text>
|
|
|
- </view>
|
|
|
- <view class="num margin-bot after-line flex">
|
|
|
- <text class="lighter-fornt">数量</text>
|
|
|
- <view class="buy-num-block flex">
|
|
|
- <view class="add-block block" @tap="handlerChangeOrderNumber(0)">+</view>
|
|
|
- <view class="order-number">{{ order_number }}</view>
|
|
|
- <view class="reduce-block block" @tap="handlerChangeOrderNumber(1)">-</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="account margin-bot flex">
|
|
|
- <text class="lighter-fornt">小计</text>
|
|
|
- <text style="color: rgb(250, 111, 25)">¥{{ shopAccount }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 优惠 -->
|
|
|
- <view class="discount public">
|
|
|
- <view class="discount-item after-line flex" v-for="(item, index) in discountGroup" :key="index">
|
|
|
- <view class="flex" style="justify-content: space-between; width: 250rpx">
|
|
|
- <text class="icon title-font">惠</text>
|
|
|
- <text class="general-font">活动优惠</text>
|
|
|
- </view>
|
|
|
- <text class="money general-font">-¥{{ item.money }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 订单总价 -->
|
|
|
- <view class="total-money flex public">
|
|
|
- <text>订单总价</text>
|
|
|
- <view class="order-total">
|
|
|
- <text class="bill">¥{{ orderTotalPrice > 0 ? orderTotalPrice : 0 }}</text>
|
|
|
- <text class="discount general-font">(已优惠¥{{ totalAccount }})</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 支付方式 -->
|
|
|
- <view class="pay-methods flex public">
|
|
|
- <view>支付方式</view>
|
|
|
- <!-- <text @tap="popupShow">微信支付 ></text> -->
|
|
|
- <view class="pay-methods-r">
|
|
|
- <span>微信支付</span>
|
|
|
- <image class="pay_img" src="@/static/order/ic_order_weixin.png" mode="aspectFit"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 购买须知 -->
|
|
|
- <view class="use-info public">
|
|
|
- <view class="after-line buy-info" style="position: relative">购买须知</view>
|
|
|
- <view class="lighter-fornt info-item">
|
|
|
- <span>
|
|
|
- 洗车机常见的类型有高压洗车机和无水洗车机两种，高压洗车机可以配有不同的喷嘴，可实现不同场景下的清洗需求。
|
|
|
- 无水洗车机则是一种更为环保的洗车方式，它可以用高科技的化学技术在不用水的情况下清洗车辆。因此，
|
|
|
- 在购买洗车机时需要根据自己的实际需求进行选择
|
|
|
- </span>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 底部支付 -->
|
|
|
- <view class="bottom-pay public flex">
|
|
|
- <view class="total-price">总计：<text class="price">¥{{ orderTotalPrice > 0 ? orderTotalPrice : 0 }}</text>
|
|
|
- </view>
|
|
|
- <view class="pay-button" @click="orderDetailUptick">立即支付</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 弹窗 -->
|
|
|
- <u-popup :show="show" mode="bottom" mask="true" closeable close-icon-pos="top-right" @close="show = false">
|
|
|
- <view>微信</view>
|
|
|
- <view>支付宝</view>
|
|
|
- <view>银联</view>
|
|
|
- </u-popup>
|
|
|
- </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="请输入您的订购电话" 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>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- successfulPayment
|
|
|
- } from '@/api/client/order';
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- shop: {
|
|
|
- buyQuantity: 1,
|
|
|
- shopPrice: 256,
|
|
|
- },
|
|
|
- show: false,
|
|
|
- discountGroup: [{
|
|
|
- money: 168.22,
|
|
|
- },
|
|
|
- {
|
|
|
- money: 22.5,
|
|
|
- },
|
|
|
- {
|
|
|
- money: 33.45,
|
|
|
- },
|
|
|
- ],
|
|
|
- id: '',
|
|
|
- order_list:{},
|
|
|
- order_number:1
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.id = option.id;
|
|
|
- this.order_list = this.$store.state.order.order_list
|
|
|
- },
|
|
|
- computed: {
|
|
|
- // 商品小计
|
|
|
- shopAccount() {
|
|
|
- return this.order_number < 0 ? 0 : this.order_list.specialPrice * this.order_number;
|
|
|
- },
|
|
|
- totalAccount() {
|
|
|
- let total = 0;
|
|
|
- this.discountGroup.forEach(i => {
|
|
|
- total += i.money;
|
|
|
- });
|
|
|
- return total.toFixed(2);
|
|
|
- },
|
|
|
- orderTotalPrice() {
|
|
|
- return (this.shopAccount - this.totalAccount).toFixed(2);
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- // 加减数量
|
|
|
- handlerChangeOrderNumber(e){
|
|
|
- switch(e){
|
|
|
- case 0 :
|
|
|
- ++ this.order_number
|
|
|
- break;
|
|
|
- case 1 :
|
|
|
- if(this.order_number == 0){
|
|
|
- uni.showToast({
|
|
|
- title:'不能再减了',
|
|
|
- icon:'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }else{
|
|
|
- --this.order_number
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- popupShow() {
|
|
|
- this.show = true;
|
|
|
- },
|
|
|
- /* 支付成功的回调 */
|
|
|
- orderDetailUptick() {
|
|
|
- successfulPayment(this.order_list.id).then(res=>{
|
|
|
- console.log('@@@@res',res);
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- };
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ value:'',
|
|
|
+ value3:''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .order-cantina {
|
|
|
- height: 100vh;
|
|
|
- width: 750rpx;
|
|
|
- background-color: rgb(235, 236, 237);
|
|
|
-
|
|
|
- view {
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .title-font {
|
|
|
- display: inline-block;
|
|
|
- width: 85%;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 800;
|
|
|
- }
|
|
|
-
|
|
|
- .general-font {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
-
|
|
|
- .lighter-fornt {
|
|
|
- font-weight: lighter;
|
|
|
- font-size: 25rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .public {
|
|
|
- background-color: #fff;
|
|
|
- width: 750rpx;
|
|
|
- padding: 30rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .flex {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .margin-bot {
|
|
|
- margin-bottom: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .after-line {
|
|
|
- &::after {
|
|
|
- display: block;
|
|
|
- content: ' ';
|
|
|
- width: 100%;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- position: absolute;
|
|
|
- background-color: rgb(229, 229, 229);
|
|
|
- height: 2px;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .shop-info {
|
|
|
- .num {
|
|
|
- height: 100rpx;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .buy-num-block {
|
|
|
- justify-content: center;
|
|
|
- width: 200rpx;
|
|
|
- .order-number{
|
|
|
- width: 40%;
|
|
|
- height: 52rpx;
|
|
|
- line-height: 45rpx;
|
|
|
- text-align: center;
|
|
|
- background-color: #EBECED;
|
|
|
- }
|
|
|
- .block {
|
|
|
- width: 30%;
|
|
|
- height: 52rpx;
|
|
|
- line-height: 45rpx;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid rgb(230, 230, 230);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .u-input {
|
|
|
- border: 1px solid rgb(229, 229, 229);
|
|
|
- border-right: none;
|
|
|
- border-left: none;
|
|
|
- border-radius: 0 !important;
|
|
|
- padding-top: 0 !important;
|
|
|
- padding-bottom: 0 !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .discount-item {
|
|
|
- height: 120rpx;
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .icon {
|
|
|
- height: 75rpx;
|
|
|
- line-height: 75rpx;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- width: 85rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- background-color: rgb(250, 111, 25);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .total-money .order-total {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .bill {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 800;
|
|
|
- color: rgb(250, 111, 25);
|
|
|
- }
|
|
|
-
|
|
|
- .discount {
|
|
|
- color: rgb(250, 111, 25);
|
|
|
- }
|
|
|
- }
|
|
|
- .pay-methods{
|
|
|
- max-height: 100rpx;
|
|
|
- .pay-methods-r{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .pay_img{
|
|
|
- width: 50rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .use-info {
|
|
|
- margin-bottom: 0 !important;
|
|
|
-
|
|
|
- .buy-info {
|
|
|
- padding-bottom: 30rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .info-item {
|
|
|
- margin-bottom: 20rpx;
|
|
|
- position: relative;
|
|
|
- text-indent: 15rpx;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- &:before {
|
|
|
- display: block;
|
|
|
- content: ' ';
|
|
|
- position: absolute;
|
|
|
- height: 6rpx;
|
|
|
- width: 6rpx;
|
|
|
- top: 10rpx;
|
|
|
- left: 4rpx;
|
|
|
- border-radius: 3rpx;
|
|
|
- background-color: rgb(128, 128, 128);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-pay {
|
|
|
- .total-price {
|
|
|
- color: rgb(250, 111, 25);
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 800;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pay-button {
|
|
|
- width: 400rpx;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- background-color: rgb(250, 111, 25);
|
|
|
- border-radius: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .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>
|
