wxThird/pages/shop/confirm.vue

<template>
<view class="box">
	<view class="topBox" :style="{background:'#'+themeColor}"></view>
	<view class="yuanhu" :style="{background:'#'+themeColor}"></view>
	<view class="goodsBox">
		<view class="goodsBoxLeft">
			<image :src="goodsInfo.ImgList[0].url" mode="" v-if="goodsInfo.ImgList.length>0" 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}}
				 <span v-if="goodsInfo.categoryIds=='7B97D114-C419-42B2-9C1E-0B4CA284CDA0'">万</span>
				</view>
				<view class="numJsbox">
					<view class="numJj" @click="calculation(1)">-</view>
					<view class="goodsnum">
					<input type="number" value="" v-model="goodsnum" class="goodsnumInput"/>
					</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" @click="goCarlist">
					<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 carModelRight" @click="goCarlist">
					<span class="carModel">{{carInfo.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" :style="{background:'#'+themeColor}" @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:'',
				mydata:'',
				orderData:'',
				shareId:'',
				themeColor:'',
			}
		},
		onLoad(opt) {
			this.shopID=opt.shopID;
			this.shopName=opt.shopName;
			this.goodsnum=opt.itemQty;
			if(opt.shareId){
				this.shareId=opt.shareId
			}
			//console.log(this.carInfo)
			this.themeColor = uni.getStorageSync("themeColor");
			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) */
			this.$http('openreservation/getInfo', {
				lat:  '',
				lng:'',
			}, 'GET').then(res => {
				this.mydata = res.data
			    this.mobilePhone=this.mydata.customerInfo.mobilePhone
			})
		},
		onShow() {
			this.carInfo=this.$store.state.carInfo;
		},
		methods: {
			submit(){
				if(!this.carInfo){
					uni.showToast({
						title: '请选择车辆',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if(!this.carInfo.plateNumber){
					uni.showToast({
						title: '请选择车辆',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				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),
					shareId:this.shareId
				}
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openMallOrder/submitOrder', params,'POST').then(res => {
					uni.hideLoading();
					if(res.code==0){
						this.orderData=res.data
						this.unifiedPay(res.data)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}
				 })
			},
			unifiedPay(res){
				this.$http('openMallOrder/unifiedPay', {
					sheetId:res.id
				},'POST').then(res => {
					
					if(res.code==0){
						
						this.requestPayment(res.data)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}
				 })
			},
			requestPayment(res){
				var payInfo=res;
				//console.log(payInfo)
				//console.log(String(Date.now()))
				var that=this;
				uni.requestPayment({
					provider: 'wxpay',
					//timeStamp: String(Date.now()),
					timeStamp: payInfo.timeStamp,
					nonceStr: payInfo.nonceStr,
					package:payInfo.package,
					signType: payInfo.signType,
					paySign: payInfo.paySign,
					appid:payInfo.appId,	
					/* provider: 'wxpay',
					orderInfo:{
						"appid":payInfo.appid,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						"noncestr": payInfo.nonceStr, // 随机字符串
						 "package": "Sign=WXPay",         // 固定值
						"partnerid":payInfo.mchId,      // 微信支付商户号
						"prepayid": payInfo.prepayId, // 统一下单订单号 
						"timeStamp": String(Date.now()),      // 时间戳（单位：秒）
						"sign": payInfo.sign // 签名，这里用的 MD5/RSA 签名
					}, */
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
						 uni.showToast({
							 title: '支付成功',
							 icon:'none',
							 duration: 2000
						 });
						  if((that.orderData.sheetType==1)||(that.orderData.sheetType==2)||(that.orderData.sheetType==3)){
						  	uni.redirectTo({
						  		url: "../user/myOrder/mallOrderDetail?id=" + that.orderData.id +"&SheetType=" + that.orderData.sheetType
						  	})
						  }
						
				    },
				    fail: function (err) {
					  console.log(err)
				      uni.showToast({
						 title: '支付失败',
						 icon:'none',
						 duration: 2000
				      });
					  console.log(that.orderData)
					   if(that.orderData.sheetType==1||that.orderData.sheetType==2||that.orderData.sheetType==3){
						   console.log("商城订单s")
						uni.redirectTo({
							url: "../user/myOrder/mallOrderDetail?id=" + that.orderData.id +"&SheetType=" + that.orderData.sheetType
						})
					   }
				    }
				}); 
			},
			openGoodsDetailById(){
				this.$http('openMall/openGoodsDetailById', {
				  id:this.id
				 },'GET').then(res => {
						this.info=res.data			
				 })
			},
			goINdex(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			goCarlist(){
				uni.navigateTo({
					url:'../user/addCar/cailist'
				})
			},
			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){
					if(this.goodsInfo.categoryIds=='7B97D114-C419-42B2-9C1E-0B4CA284CDA0'){
						this.totalMoney=this.goodsInfo.salePrice*this.goodsnum*10000;
					}else{
						this.totalMoney=this.goodsInfo.salePrice*this.goodsnum
					}
					
					if(this.goodsInfo.scribingPrice){
						var wyh=this.goodsInfo.scribingPrice*this.goodsnum;
						this.yhMoney=wyh-this.totalMoney;
						console.log(this.yhMoney)
						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: 23rpx;
	padding-left: 30rpx;
}
.bottomLeftLine{
	color: #666666;
	font-size: 24rpx;
}
.bottomLeftLine span{
	color: #FF0000;
}
.bottomPrice{
	font-size: 32rpx;
	font-weight: 500;
}
.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: 400rpx;
	    display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}
.carModelRight{
	display: flex;justify-content: space-between;
}
.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;
}
.goodsnumInput{
	width: 88rpx;
	height: 44rpx;
	background: #F4F5F7;
	line-height: 44rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 24rpx;
}
.numJsbox{
	display: flex;
}
.numJj{
	width: 44rpx;
	height: 44rpx;
	background: #F4F5F7;
	border-radius: 0px 6rpx 6rpx 0px;	
	text-align: center;
	line-height: 44rpx;
	font-size: 32rpx;
	color: #999999;
}
.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;
	font-weight: 500;
}
.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>