hytc-customer/pages/serviceMall/orderDetail.vue

<template>
	<view class="warpbox">
		<view class="itembox">
			<view class="item_title">{{i18n['商品清单']}}</view>
			<view class="part_warp">
				<view class="part_item" v-for="(item,index) in partInfo" :key="index">
					<view class="partname">{{item.parts.name}}</view>
					<view class="partnum">{{i18n['编号']}}：{{item.parts.num}}</view>
					<view class="partinfo">
						<view class="parttext">{{i18n['单价']}}：￥{{item.parts.price}}</view>
						<view class="parttext">{{i18n['数量']}}：{{item.num}}</view>
						<view class="parttext">{{i18n['小计']}}：￥{{item.num * Number(item.parts.price)}}</view>
					</view>
				</view>
				<view class="part_total_money">{{i18n['合计']}}：￥{{totalMoney}}</view>
			</view>
		</view>
		<view class="itembox">
			<view class="item_title">{{i18n['描述信息']}}</view>
			<view class="fllow_area">
				<view class="area_head key">{{i18n['描述信息']}}</view>
				<textarea v-model="desc" class="textself" :placeholder="'（'+i18n['必填']+'）'+i18n['请输入描述信息']" placeholder-style="color:#999" />
			</view>
		</view>
		
		<view class="itembox">
			<view class="item_title">{{i18n['客户信息']}}</view>
			<view class="fllow_form">
				<view class="label key">{{i18n['公司名称']}}</view>
				<view class="form_right">
					<input type="text" :class="company ? 'valueActive' : '' " placeholder-style="color:#999999;font-size:24rpx" class="righttext" v-model="company"
						:placeholder="i18n['请输入公司名称']" />
				</view>
			</view>
			<view class="fllow_form">
				<view class="label key">{{i18n['联系人']}}</view>
				<view class="form_right">
					<input type="text" :class="name ? 'valueActive' : '' " placeholder-style="color:#999999;font-size:24rpx" class="righttext" v-model="name"
						:placeholder="i18n['请输入联系人姓名']" />
				</view>
			</view>
			<view class="fllow_form">
				<view class="label key">{{i18n['电话']}}</view>
				<view class="form_right">
					<input type="text" :class="mobile ? 'valueActive' : '' " placeholder-style="color:#999999;font-size:24rpx" class="righttext" v-model="mobile"
						:placeholder="i18n['请输入联系人手机号']" />
				</view>
			</view>
			<view class="info_warp">
				<view class="info_label">{{i18n['地址']}}</view>
				<view class="info_right">
					<view class="right_top">
						<pick-regions @getRegion="handleGetRegion">
							<view class="uni-input" :class="{valueActive:addrcity}">{{addrcity ? addrcity : i18n['请选择区域']}}</view>
						</pick-regions>
					</view>
					<view class="right_bot">
						<input type="text" v-model="addr" placeholder-style="color:#999999" :placeholder="i18n['请填写详细地址']" class="rightinput">
					</view>
				</view>
			</view>
		</view>
		<view class="button"@click="submit">{{i18n['提交订单']}}</view>
		<view style="height:100rpx;"></view>
	</view>
</template>

<script>
	import { netCartListnum, netSubOrder } from '@/api/api.js'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	
	export default{
		components:{
			pickRegions
		},
		data() {
			return{
				ids:'',
				company:'',
				name:'',
				mobile:'',
				desc:'',
				addrcity:'',
				addr:'',
				partInfo:[],
				totalMoney:0
			}
		},
		computed:{
			i18n() {
				return this.$t("shopmall")
			}
		},
		onLoad(options) {
			this.ids = options.ids
			//获取 购物车 下单配件
			this.getPartInfo()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.i18n['订单详情']
			})
		},
		methods:{
			getPartInfo() {
				netCartListnum({ids:this.ids,limit:100}).then(res=>{
					this.partInfo = res.data.data
					this.handleMoney()
				})
			},
			handleMoney() {
				let data = this.partInfo
				let money = 0
				data.forEach(ele=>{
					money += ele.num * Number(ele.parts.price)
				})
				this.totalMoney = money
			},
			submit() {
				if(!this.desc) {
					uni.showToast({
						title:'请填写描述信息',
						icon:'none'
					})
					return
				}
				if(!this.company){
					uni.showToast({
						title:'请输入公司名称',
						icon:'none'
					})
					return
				}
				if(!this.name){
					uni.showToast({
						title:'请输入联系人',
						icon:'none'
					})
					return
				}
				if(!this.mobile){
					uni.showToast({
						title:'请输入联系人手机号',
						icon:'none'
					})
					return
				}
				if(!this.addrcity){
					uni.showToast({
						title:'请选择区域',
						icon:'none'
					})
					return
				}
				if(!this.addr){
					uni.showToast({
						title:'请填写详细地址',
						icon:'none'
					})
					return
				}
				let params = {
					ids:this.ids,
					desc:this.desc,
					name:this.name,
					company:this.company,
					mobile:this.mobile,
					addr:this.addr,
					addrcity:this.addrcity
				}
				netSubOrder(params).then(res=>{
					// #ifdef H5
					console.log(res.data)
					window.location.href = res.data
					// #endif
				})
			},
			// 获取选择的地区
			handleGetRegion(region){
				this.addrcity = region[0].name+region[1].name+region[2].name
			}
		}
	}
</script>

<style lang="scss" scoped>
	.itembox{
		width:690rpx;
		margin:0 auto 24rpx;
		background:#fff;
		border-radius: 20rpx;
		padding:24rpx;
		.item_title{
			padding-left:35rpx;
			padding-bottom:24rpx;
			border-bottom:1rpx solid #EDEDED;
			font-size:26rpx;
			color:#666666;
			position: relative;
			&::before{
				content:'';
				width:14rpx;
				height:35rpx;
				border-radius: 8rpx;
				background:#65ABF6;
				position: absolute;
				left:0;
				top:3rpx;
			}
		}
	}
	.fllow_area {
		background-color: #fff;
		padding: 24rpx;
		border-bottom: 1rpx solid #EAEAEA;
		.area_head {
			font-size: 24rpx;
			margin-bottom:15rpx;
			text {
				color: #f00;
			}
		}
		.textself {
			width: 600rpx;
			height: 230rpx;
			background: rgba(202, 202, 202, 0.2);
			box-sizing: border-box;
			padding: 24rpx;
			font-size: 24rpx;
			margin: 0 auto;
			border-radius: 20rpx;
		}
	}
	
	
	.ordertit{
		width: 750rpx;
		height: 60rpx;
		background: rgba(2, 135, 255, 0.1);
		padding:0 30rpx;
		font-size:26rpx;
		color:#0287FF;
		line-height: 60rpx;
	}
	.part_warp{
		.part_item{
			padding:30rpx 50rpx;
			border-bottom:1rpx solid #f5f5f5;
			.partname{
				font-size:28rpx;
				color:#333333;
			}
			.partnum{
				font-size:24rpx;
				color:#999999;
				margin:15rpx 0;
			}
			.partinfo{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.parttext{
					font-size:24rpx;
					color:#999999;
				}
			}
		}
		.part_total_money{
			padding:20rpx 35rpx;
			text-align: right;
			font-size:28rpx;
			color:#65ABF6;
		}
	}
	
	
	.part_desc{
		border-top:10rpx solid #f5f5f5;
		padding:30rpx 50rpx;
		.desc_tit{
			font-size:28rpx;
			color:#333333;
			margin-bottom:20rpx;
		}
		.desc_text{
			.areabox{
				height:200rpx;
				width:100%;
				font-size:24rpx;
				color:#000;
			}
		}
	}
	.info_warp{
		padding:24rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom:1rpx solid #f5f5f5;
		.info_label{
			flex-shrink: 0;
			font-size:24rpx;
			color:#333333;
			width:100rpx;
			margin-right:30rpx;
		}
		.selfinfo{
			width:470rpx;
			font-size:24rpx;
		}
		.info_right{
			flex:1;
			.right_top{
				padding-right:24rpx;
				padding-bottom:26rpx;
				border-bottom:1rpx solid #f5f5f5;
				.uni-input{
					font-size:24rpx;
					color:#999999;
					text-align: right;
				}
			}
			.right_bot{
				box-sizing: border-box;
				padding-top:26rpx;
				.rightinput{
					width:450rpx;
					font-size:24rpx;
					color:#333;
					text-align: right;
				}
			}
		}
	}
	.fllow_form {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #EDEDED;
		padding: 24rpx;
		.label {
			font-size: 24rpx;
			color:#666;
			text {
				color: red;
			}
		}
		.form_right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			color: #999;
			width: 450rpx;
			text-align: right;
			input{
				width: 450rpx;
			}
			.righttext {
				font-size: 24rpx;
			}
		}
	}
</style>