用户端下单页前端代码

<template>
	<view class="order_detail">
		<!-- 商店信息 -->
		<view class="ally">
			<view>联盟：{{super_union_name}}</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="goods_item_list" v-for="item in orderDetail" :key="item.super_goods_id">
			<view class="goods_item">
				<view class="left_image">  <!-- 左侧图片 -->
					<image :src="item.super_goods_pic" mode="heightFix"></image>
				</view>
				<view class="right_text">  <!-- 右侧商品信息 -->
					<view class="goods_name">{{item.super_goods_name}}</view>
					<view class="goods_info">单价：{{item.super_goods_price}}元</view>
					<view class="goods_info">数量：{{item.num}}</view>
					<view class="goods_info">总价：{{item.super_goods_price*item.num}}元</view>				
					<view class="goods_info">折扣：{{item.super_goods_discount}}</view>
				</view>
			</view>
		</view>
		
		<!-- 总价 -->
		<view class="total_price">总价：{{total_price}}元</view>
		
		<!-- 输入框 -->
		<view class="input">
			<view>用户姓名：</view>
			<view class="input_wrapper">
				<input v-model="userInfo.user_name" placeholder="请输入用户姓名"></input>
			</view>
			<view>收货地址：</view>
			<view class="input_wrapper">
				<input v-model="userInfo.user_address" placeholder="请输入收货地址"></input>
			</view>
			<view>联系电话：</view>
			<view class="input_wrapper">
				<input v-model="userInfo.user_phone_number" placeholder="请输入联系电话"></input>
			</view>
			<view>配送商店：</view>
			<picker 
				mode="selector" 
				:range="selectShop" 
				range-key="super_address"
				@change="selectShopChange">
				{{selectedShop ? selectedShop : '联盟派送'}}
			</picker>
		</view>
		
		<!-- 按钮 -->
		<view class="button">
			<button @click="createOrder">下单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 商品id数组和商品数量数组
				// 由购物车界面传过来
				super_goods_id: [],
				num: [],
				
				// 订单详情信息
				orderDetail: [],
				
				// 用户信息
				userInfo: {},
				
				// 联盟名称
				super_union_name: '',
				
				// 选择商铺
				selectShop: [],
				
				// 商品总价
				total_price: 0,
				
				// 选择商铺
				selectedShop: '',
				super_user_id: 0
			}
		},
		
		methods: {
			// 获取下单数据
			async getOrderDetail() {
				// 获取联盟信息
				const res0 = await this.$myRequest({
					url: '/superunion/getUnionNameByUnionId',
					method: 'POST',
					data: JSON.stringify({
						super_union_id: getApp().globalData.SUPER_UNION_ID
					})
				})
				this.super_union_name = res0.data.description
				
				// 获取商品信息
				const res1 = await this.$myRequest({
					url: '/goods/getGoodsListByUnionIdAndGoodsId',
					method:'POST',
					data: JSON.stringify({
						super_union_id: getApp().globalData.SUPER_UNION_ID,
						super_goods_id: this.super_goods_id
					}),
				})
				this.orderDetail = res1.data.description
				for (let i=0; i<this.orderDetail.length; i++) {
					this.orderDetail[i].num = this.num[i]
					this.total_price += this.orderDetail[i].num * this.orderDetail[i].super_goods_price
				}
				
				//获取用户信息
				const res2 = await this.$myRequest({
					url: '/user/getAllById',
					method:'POST',
					data: JSON.stringify({
						user_id: uni.getStorageSync('user_id')
					})
				})     
				this.userInfo = res2.data.description
				
				// 获取商铺数据
				const res3 = await this.$myRequest({
					url: '/superuser/getAllMarketByUnionId',
					method: 'POST',
					data: JSON.stringify({
						super_union_id: getApp().globalData.SUPER_UNION_ID,
					})
				})
				this.selectShop = res3.data.description
				this.selectShop.unshift({
					super_user_id: 0,
					super_address: '联盟派送',
				})
			},
			
			// 选择商铺事件
			selectShopChange(event) {
				this.selectedShop = this.selectShop[event.target.value].super_address
				this.super_user_id = this.selectShop[event.target.value].super_user_id
			},
			
			// 生成订单
			async createOrder(){
				// 判断是否是联盟派单
				let dispatch_choice = 0
				if(this.super_user_id) {
					dispatch_choice = 1
				}
				// 请求接口
				await this.$myRequest({
					url: '/order/createOrder',
					method: 'POST',
					data: JSON.stringify({
						user_id: uni.getStorageSync('user_id'),
						user_name: this.userInfo.user_name,
						phone_number: this.userInfo.user_phone_number,
						order_address: this.userInfo.user_address,
						super_union_id: getApp().globalData.SUPER_UNION_ID,
						goods_id: this.super_goods_id,
						num: this.num,
						dispatch_choice: dispatch_choice,
						super_user_id: this.super_user_id
					})
				})
				// 前往订单页面
				uni.switchTab({
					url: '../order/order'
				})
				// 提示
				uni.showToast({
					title: '成功下单'
				})
			}
		},
		
		// 加载页面
		onLoad(options) {
			// 给商品id和商品数量赋值
			this.super_goods_id = JSON.parse(options.super_goods_id)
			this.num = JSON.parse(options.num)
			// 获取下单数据
			this.getOrderDetail()
		}
	}
</script>

<style lang="scss">
.order_detail {
	.ally { 
		padding: 0 30rpx;
		font-size: 50rpx;
		line-height: 100rpx;
		border-bottom: 5rpx solid #eee;
	}
	
	.goods_item_list {
		.goods_item {
			border-bottom: 5rpx solid #eee;
			display: flex;
			
			.left_image { // 左侧图片
				image {
					padding: 30rpx;
					height: 310rpx;
				}
			}
			
			.right_text {  // 右侧文本
				padding: 20rpx 30rpx 20rpx 0;
				
				.goods_name { // 商品名称
					font-size: 45rpx;
					line-height: 80rpx;
				}
				
				.goods_info { // 商品信息
					color: #555555;
					font-size: 40rpx;
					line-height: 60rpx;
				}
			}
		}
	}
	
	.total_price{
		text-align: right;
		padding-right: 30rpx;
		font-size: 45rpx;
		line-height: 80rpx;
		border-bottom: 5rpx solid #eee;
	}
	
	.input {
		font-size: 45rpx;
		line-height: 80rpx;
		border-bottom: 5rpx solid #eee;
		padding: 0 30rpx 30rpx;
		.input_wrapper {
			input {
				font-size: 40rpx;
				width: 100%;
				height: 80rpx;
				color: black;
				text-align: center;
				border-bottom: 3rpx solid #eee;
			}
		}
		
		picker {
			font-size: 40rpx;
			border-bottom: 3rpx solid #eee;
			text-align: center;
		}
	}
	
	.button {
		padding: 0 100rpx 50rpx;
		button {
			margin-top: 50rpx;
			width: 100%;
			height: 80rpx;
			color: white;
			background: #007AFF;
			border-radius: 50px;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>