wxThird/pages/shop/confirm.vue

<template>
<view class="box">
	<view class="topBox"></view>
	<view class="yuanhu"></view>
	<view class="goodsBox">
		<view class="goodsBoxLeft">
			<image :src="goodsInfo.ImgList[0].url" mode="" v-if="goodsInfo.ImgList.length>1" class="hotGoodsLineImg"></image>
			<image src="../../static/timg/noimg.png" v-else class="hotGoodsLineImg" ></image>
		</view>
		<view class="goodsBoxRgiht">
			<view class="goodsName">{{goodsInfo.name}}</view>
			<view class="goodsBottom">
				<view class="goodsPrice"> <span class="goodsPrice1">￥</span> {{goodsInfo.salePrice?goodsInfo.salePrice:goodsInfo.scribingPrice}}</view>
				<view class="numJsbox">
					<view class="numJj" @click="calculation(1)">-</view>
					<view class="goodsnum">{{goodsnum}}</view>
					<view class="numJj" @click="calculation(2)">+</view>
				</view>
			</view>
		</view>
	</view>
	<view class="cont">
		<view class="contKk">
			<view class="contLine">
				<view class="contlineLeft">服务门店</view>
				<view class="contlineRight">{{shopName}}</view>
			</view>
			<view class="contLine">
				<view class="contlineLeft">车牌号</view>
				<view class="contlineRight">
					<span>{{carInfo.plateNumber}}</span>
					<image src="../../static/timg/icon_arrow_right.png" mode="" class="contlineRightJt"></image>
				</view>
			</view>
			<view class="contLine">
				<view class="contlineLeft">车型</view>
				<view class="contlineRight">
					<span class="carModel">{{carInfo.carModel}}</span>
					<image src="../../static/timg/icon_arrow_right.png" mode="" class="contlineRightJt"></image>
				</view>
			</view>
			<view class="contLine">
				<view class="contlineLeft">联系人</view>
				<view class="contlineRight">
					<input type="text" v-model="customerName" placeholder="请输入联系人姓名" class="contlineRightInput">
				</view>
			</view>
			<view class="contLine " style="border-bottom: none;">
				<view class="contlineLeft">手机号</view>
				<view class="contlineRight">
					<input type="text" v-model="mobilePhone" placeholder="请输入联系人手机号" class="contlineRightInput">
				</view>
			</view>
		</view>
		
		<view class="contKk" style="margin-top:20rpx;">
			<view class="contLine " style="border-bottom: none;">
				<view class="contlineLeft">订单备注</view>
				<view class="contlineRight">
					<input type="text" v-model="comment" placeholder="请输入" class="contlineRightInput2">
				</view>
			</view>
		</view>
	</view>
	
	<view style="height:120rpx"></view>
	<view class="bottomBox">
		<view class="bottomLeft">
			<view class="bottomLeftLine">合计: <span>￥</span> <span class="bottomPrice">{{totalMoney}}</span> </view>
			<view class="bottomLeftLine2">总优惠：¥{{yhMoney}}</view>
		</view>
		<view class="bottomBtn" @click="submit">提交订单</view>
	</view>
</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				userInfo:'',
				goodsnum:1,
				id:'',
				info:'',
				carInfo:'',
				shopID:'',
				shopName:'',
				goodsInfo:'',
				totalMoney:'',
				yhMoney:0,
				customerName:'',
				mobilePhone:'',
				comment:'',
			}
		},
		onLoad(opt) {
			this.shopID=opt.shopID;
			this.shopName=opt.shopName;
			this.carInfo=this.$store.state.carInfo;
			this.goodsnum=opt.itemQty;
			//console.log(this.carInfo)
			this.userInfo = uni.getStorageSync("userInfo");
			this.goodsInfo=uni.getStorageSync("goodsDetail");
			this.jsMoney()
			//this.openGoodsDetailById()
			/* var a=[
				{name:1},{name:2}
			]
			var b=a.map(i=>i.name);
			console.log(b) */
		},
		
		methods: {
			submit(){
				var jsonArray = [];
				var obj={
					itemId:this.goodsInfo.id,
					itemName:this.goodsInfo.name,
					itemQty:this.goodsnum,
					salePrice:this.goodsInfo.salePrice,
					totalPrice:this.totalMoney
				}
				jsonArray.push(obj)
				//"bizType：1商品2项目3套餐
				var params={
					sheetType:this.goodsInfo.bizType,
					sheetContent:this.goodsInfo.name,
					customerName:this.customerName,
					mobilePhone:this.mobilePhone,
					plateNumber:this.carInfo.plateNumber,
					carModel:this.carInfo.carModel,
					totalMoney:this.totalMoney,
					shopId:this.shopID,
					comment:this.comment,
					sheetDetail:JSON.stringify(jsonArray)
				}
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openMallOrder/submitOrder', params,'POST').then(res => {
					uni.hideLoading();
					if(res.code==0){
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}
				 })
			},
			openGoodsDetailById(){
				this.$http('openMall/openGoodsDetailById', {
				  id:this.id
				 },'GET').then(res => {
						this.info=res.data			
				 })
			},
			goINdex(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			calculation(type){
				if(type==1){
					if(this.goodsnum>1){
						this.goodsnum--
						this.jsMoney()
					}
				}else{
					if(this.goodsInfo.oneQty>this.goodsnum){
						this.goodsnum++
						this.jsMoney()
					}
				}
			},
			jsMoney(){
				if(this.goodsInfo.salePrice){
					this.totalMoney=this.goodsInfo.salePrice*this.goodsnum;
					if(this.goodsInfo.scribingPrice){
						var wyh=this.goodsInfo.scribingPrice*this.goodsnum;
						this.yhMoney=wyh-this.totalMoney;
						this.yhMoney=this.yhMoney.tofixed(2)
					}else{
						this.yhMoney=0
					}
					this.totalMoney=this.totalMoney.tofixed(2)
				}else{
					this.totalMoney=this.goodsInfo.scribingPrice*this.goodsnum
					this.totalMoney=this.totalMoney.tofixed(2)
					this.yhMoney=0
				}
			}
			
		}
	}
</script>

<style scoped lang="less">
.bottomBox{
	width: 750rpx;
	height: 120rpx;
	background: #FFFFFF;
	box-shadow: 0px -2px 10rpx 0px rgba(153,153,153,0.2000);
	display: flex;
	justify-content: space-between;
	position: fixed;
	left: 0;
	bottom: 0;
}
.bottomLeft{
	padding-top: 25rpx;
	padding-left: 30rpx;
}
.bottomLeftLine{
	color: #666666;
	font-size: 24rpx;
}
.bottomLeftLine span{
	color: #FF0000;
}
.bottomPrice{
	font-size: 32rpx;
}
.bottomLeftLine2{
	color: #999999;
	line-height: 33rpx;
	font-size: 24rpx;
}
.bottomBtn{
	width: 204rpx;
	height: 74rpx;
	background: #D53533;
	border-radius: 37rpx;
	text-align: center;
	line-height: 74rpx;
	color: #FFFFFF;
	font-size: 30rpx;
	margin-top: 23rpx;
	margin-right: 30rpx;
}
.cont{
	padding: 20rpx 24rpx;
}
.contKk{
	background: #FFFFFF;border-radius: 10rpx;
	padding: 0 20rpx;
}
.contLine{
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	padding: 30rpx 0;
	border-bottom: 1px solid #EEEEEE;
}
.contlineLeft{
	color: #666666;
	line-height: 40rpx;
	
}
.carModel{
	    width: 500rpx;
	    display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}
.contlineRight{
	color: #333333;
	line-height: 40rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 450rpx;
	text-align: right;
}
.contlineRightInput{
	color: #333333;
}
.contlineRightJt{
	width: 12rpx;
	height: 20rpx;
	margin-left: 20rpx;
	margin-top: 10rpx;
}
.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.topBox{
	height: 140rpx;
	background: #FF0000;
	width: 750rpx;
}
.yuanhu{
	width: 750rpx;
	height: 30rpx;
	background: #FF0000;
	border-radius: 0 0 100% 100%;
}
.goodsBox{
	width: 662rpx;
	height: 194rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-left: 24rpx;
	margin-top: -100rpx;
	padding: 20rpx;
	display: flex;
}
.goodsBoxLeft{
	width: 208rpx;
	height: 194rpx;
	border-radius: 16rpx;
	border: 1px solid #EEEEEE;
}
.hotGoodsLineImg{
	width: 208rpx;
	height: 194rpx;
}
.goodsnum{
	width: 88rpx;
	height: 44rpx;
	background: #F4F5F7;
	line-height: 44rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 24rpx;
	margin: 0 4rpx;
}
.numJsbox{
	display: flex;
}
.numJj{
width: 44rpx;
height: 44rpx;
background: #F4F5F7;
border-radius: 0px 6rpx 6rpx 0px;	
text-align: center;
line-height: 44rpx;
font-size: 30rpx;
color: #F4F5F7;
}
.goodsnum{
	width: 88rpx;
	height: 44rpx;
	background: #F4F5F7;
	line-height: 44rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 24rpx;
	margin: 0 4rpx;
}
.goodsBottom{
	display: flex;
	justify-content: space-between;
	padding-top: 60rpx;
}
.goodsPrice{
	color: #333333;
	font-size: 32rpx;
}
.goodsPrice1{
	color: #333333;
	font-size: 22rpx;
}
.goodsName{
	font-weight: 400;
	color: #333333;
	line-height: 40rpx;
	font-size: 28rpx;
	height: 80rpx;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;				
	text-overflow: ellipsis;		
	display: -webkit-box;			
	-webkit-line-clamp: 2;		
	line-clamp: 2;					
	-webkit-box-orient: vertical;
	width: 420rpx;
}
.goodsBoxRgiht{
	padding-left: 24rpx;
	
}

</style>