restaurant_system_ui_uni/yudao-ui-admin-uniapp/pages/restaurant/confirmOrder.vue

<template>
    <view style="margin-top: 40px;">
        <view style="background-color: #fff;">
           <view class="cu-bar bg-white ">
               <view class="action">
                   <text class="cuIcon-titles text-orange"></text> 配送方式
               </view>
           </view>
            <scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="TabCur=='1'?'text-orange cur':''"  @tap="tabSelect" :data-id="1">
					配送
				</view>
                <view class="cu-item flex-sub" :class="TabCur=='2'?'text-orange cur':''"  @tap="tabSelect" :data-id="2">
					到店
				</view>
			</view>
		</scroll-view>
		<uni-datetime-picker  type="datetime" v-model="datetimesingle" placeholder="预计时间" />
        </view>
        <view style="background-color: #fff;">
            <!-- <view style="font-size: 25px;padding:10px; border-bottom: 1px solid black;width: 100%;">收货地址</view><br /> -->
            <view class="cu-bar bg-white ">
                <view class="action">
                    <text class="cuIcon-titles text-orange"></text> 收货地址
                </view>
            </view>
            <view style="width: 100%;padding:10px;" class="ss-flex">
                <view style="width: 40%;font-size: 20px;">{{ addressList.name }}</view>
                <view style="width: 50%;font-size: 20px;">{{ addressList.phone }}</view>
            </view>
            <view style="width: 100%;padding:10px;">{{ addressList.address }}</view>
            <button style="margin: 20px;" type="primary"
                @tap="sheep.$router.go('/pages/user/address/edit')">修改地址</button>
        </view>
        <view style="height: 50vh;">
            <view class="cu-bar bg-white ">
                <view class="action">
                    <text class="cuIcon-titles text-orange"></text> 购物车
                </view>
            </view>
            <view style="height: 50vh;overflow-y: auto;background-color: #fff;">
                <view v-for="(i, j) in nowCartList" :key="j" class="minmi" style="width: 100vw;">
                    <image class="imgPic" :src="i.url" mode=""></image>
                    <view class="rightContainer">
                        <view class="foodName">
                            {{ i.name }}
                        </view>
                        <view class="foodPrice">
                            <view class="priceflex">
                                <text class="zero">￥</text>
                                {{ i.price }}
                            </view>
                            <view class="shopCar iconfont-themeColor-write" v-show="i.num == 0" @tap="addcart(i)">
                                <text class="lg text-white cuIcon-add"></text>
                            </view>
                            <view class="" v-if="i.num > 0">
                                <!-- <text class="lg text-white cuIcon-minus" @tap="addcart(i)" ></text> -->
                                <!-- <uni-number-box :min="0" :max="100" :step="1" v-model="i.num" @tap="chengeCart(i)"  /> -->
                                <text>{{ i.num }}</text>

                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <button class="bg-red submit" @click="handleOk()">立即支付</button>
        </view>
    </view>
</template>

<script setup>
import sheep from '@/sheep';
import { onLaunch, onShow, onError } from '@dcloudio/uni-app';
import { computed, reactive, ref } from 'vue';
import goodsApi from '@/sheep/api/restaurant/goods'

const cart = sheep.$store('cart');
const TabCur = ref(1)
const datetimesingle = ref('')
const nowCartList= computed(() => cart.list)
const addressList = computed(() => {
		let addressList = sheep.$store('user').addressList
		console.log('restaurant', addressList)
			return addressList
	})
const handleOk= async () =>{
	let pamser = {
		name: addressList.value.name,
        phone: addressList.value.phone,
        address: addressList.value.address,
		useTime:datetimesingle.value,
		type: TabCur.value,
		goodsList:nowCartList.value,
		openid :uni.getStorageSync('openid')
		
	}
	const formData = {
      ...pamser
    }
	console.log('pamser',formData)
	await goodsApi.createOrder(formData).then(res => {
		console.log(res)
    })
    
    
}
const tabSelect= (e) =>{
	console.log(e.currentTarget.dataset.id)
    TabCur.value = e.currentTarget.dataset.id;
}
</script>

<style scoped lang="scss">
  .title{
    width: 99%;
    text-align: left;
    padding-left: 10px;
    border-left: 5px solid red;
    font-size: 18px;
    margin-left: 20px;
    margin-top: 10px;
    font-weight: 800;
    }
	.active {
		font-size: 30upx;
		color: #F9BE3E;
	}

	.active2 {
		font-size: 30upx;
	}

	.min {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
		// margin: 20px 0;
		background-color: white;
        padding-bottom: 20px;
	}

	.minmi {
		display: flex;
		width: 592upx;
		margin-left: 25upx;
		padding-top: 51upx;

		.imgPic {
			width: 208upx;
			height: 167upx;
			border-radius: 10upx;
			margin-left: 20upx;
		}

		.rightContainer {
			display: flex;
			flex-direction: column;
			height: 167upx;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: flex-start;
			padding-left: 18upx;
			padding-right: 18upx;
			padding-top: 18upx;
			// padding-bottom: 18upx;
			flex: 1;

			.foodName {
				font-weight: 700;
				font-size: 25upx;
			}

			.foodPrice {
				display: flex;
				justify-content: space-between;
				width: 375upx;
				color: #F9BE3E;

				.priceflex {
					display: flex;
					align-items: center;

					.zero {
						font-size: 15upx;
					}
				}

				.shopCar {
					background-color: #F9BE3E;
					border-radius: 45upx;
					width: 112upx;
					height: 45upx;
					font-size: 25upx;
					text-align: center;
					line-height: 46upx;
				}
			}
		}
	}

	.aside-main {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.scroll-Y1 {
		flex: 1;
		box-sizing: border-box;
	}

	.scroll-Y1 view {
		text-align: center;
		padding-top: 33upx;
		// padding-bottom: 33upx;
	}

	.scroll-Y2 {
		flex: 3;
		box-sizing: border-box;
		// padding-bottom: 170upx;
	}

	.scroll-Y2 view {
		text-align: center;
		/* margin:20upx; */
	}

	.icon {
		width: 50upx;
		height: 50upx;
		margin-top: 10upx;
	}

	.icon1 {
		width: 30upx;
		height: 30upx;
		position: absolute;
		top: 15upx;
		left: 10upx;
	}

	.btn {
		width: 140upx;
		height: 60upx;
		line-height: 60upx;
		margin: 0;
		padding: 0;
		font-size: 30upx;
	}

	.serch {
		height: 60upx;
		flex: 2;
		margin-left: 20upx;
		margin-right: 20upx;
		box-sizing: border-box;
		border: solid 1upx #ccc;
		border-radius: 10upx;
		position: relative;
	}

	.serch input {
		height: 60upx;

		margin-left: 60upx;
	}
    </style>