wxThird/pages/subPack/maintainSubmit.vue

<template>
<view class="box">
 <view class="cont">
	 <view class="itemBox flex">
		  <image class="itemIMg" v-if="itemDefault.mainImgUrl" :src="itemDefault.mainImgUrl" mode=""></image>
		 <image class="itemIMg" v-else src="../../static/timg/noimg.png" mode=""></image>
		 <view class="itemRight">
		 	<view class="itemName">{{itemDefault.goodsname}}</view>
			<view style="display: flex;">
					<view class="buyType">{{itemDefault.title}}</view>
			</view>
		
			<view class="priceBox">
				<view class="price">¥{{itemDefault.money}}</view>
				<view class="itemNum">x{{itemDefault.goodsnum}}</view>
			</view>
			<view class="itemnotes">注：该商品购买后不支持线上退款</view>
		 </view>
	 </view>

 
      <view class="mealBox" v-if="itemDefault.content">
		 <view class="fwlcTitle" >套餐内容</view>
		 <rich-text :nodes="itemDefault.content" style="background: #fff;"></rich-text>
	 </view>
	 <view class="goodsBox">
	 	 <view class="goodsline flex" style="border-bottom: 1px solid #EEEEEE;">
	 		 <view class="goodsLeft">商品总价</view>
	 		 <view class="goodRight">¥{{totalPrice}}</view>
	 	 </view>
	 	 <view class="goodsline flex" >
	 	 		 <view class="goodsLeft"></view>
	 	 		 <view class="goodRight" style="font-size: 26rpx;font-weight: 500;">合计 <span style="color: #EC0F0A;padding-left: 6rpx;">¥{{totalPrice}}</span></view>
	 	 </view>
	 </view>
	 <view class="goodsBox">
	 	 <view class="goodsline flex" style="border-bottom: 1px solid #EEEEEE;">
	 		 <view class="goodsLeft">支付方式</view>
	 		 <view class="goodRight">线上支付</view>
	 	 </view>
	 	 <view class="goodsline flex" >
	 	 		 <view class="goodsLeft">使用方式</view>
	 	 		 <view class="goodRight" >到店使用</view>
	 	 </view>
	 </view>
	 
 </view>
 
<view style="height: 200rpx;"></view>
 
 <view class="bottom">
	 <view class="bleft">
		 <span>合计</span>
		 <span style="color: #EC0F0A;padding-left: 6rpx;">¥</span>
		 <span style="font-weight: 500;font-size: 34rpx;color: #EC0F0A;">{{totalPrice}}</span>
	 </view>
	 <view class="Btn commonBtn" @click="submitFn">提交订单</view>
 </view>
 
</view>
</template>

<script>
	export default {
		components: {
			
		},
		
		data() {
			return {
				themeColor:'',
				ext:'',
				goodsnum:1,
				itemDefault:'',
				totalPrice:'',
				sheetDetail:[],
				userInfo:'',
				carInfo:'',
				customerInfo:'',
			}
		},
		onLoad(opt) {
			this.ext = this.$common.getExtStoreId();
			this.themeColor = uni.getStorageSync("themeColor");
			this.itemDefault=uni.getStorageSync("itemDefault");
			this.totalPrice=this.itemDefault.goodsnum*this.itemDefault.money
			this.totalPrice=this.totalPrice.toFixed(2)
			var obj={
				itemId:this.itemDefault.itemId,
				itemName:this.itemDefault.goodsname,
				itemQty:this.itemDefault.goodsnum,
				salePrice:this.itemDefault.money,
				totalPrice:this.totalPrice,
				packageItemID:this.itemDefault.id,
			}
			this.sheetDetail.push(obj)
			this.carInfo=this.$store.state.carInfo;
			
			this.userInfo=uni.getStorageSync("wxOpenData");
			this.customerInfo=uni.getStorageSync("customerInfo")
			console.log(this.userInfo)
		},
		onShow() {
			
		},
		methods: {
			
			submitFn(){
				if(this.userInfo.loginInfo){
					var customerName=this.userInfo.loginInfo.customerInfo.customerName
					var mobilePhone=this.userInfo.loginInfo.customerInfo.mobilePhone
					var shopID=this.userInfo.loginInfo.customerInfo.shopID
				}else{
					var customerName=this.customerInfo.customerName
					var mobilePhone=this.customerInfo.mobilePhone
					var shopID=this.customerInfo.shopID
				}
				
				
				var params={
					sheetType:7,
					sheetContent:this.itemDefault.goodsname,
					customerName:customerName,
					mobilePhone:mobilePhone,
					plateNumber:this.carInfo.plateNumber,
					carModel:this.carInfo.carModel,
					totalMoney:this.totalPrice,
					sheetDetail:JSON.stringify(this.sheetDetail),
					groupType:0,
					comment:'',
					shareId:'',
					shopId:shopID,
				}
				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 => {
					this.isgo=true;
					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,	
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
						 uni.showToast({
							 title: '支付成功',
							 icon:'none',
							 duration: 2000
						 });
						 uni.navigateTo({
						 	url:'paySuccess?type=1&orderType=1'
						 })
						
						
				    },
				    fail: function (err) {
					  console.log(err)
				      uni.showToast({
						 title: '支付失败',
						 icon:'none',
						 duration: 2000
				      });
					  uni.navigateTo({
					  	url:'paySuccess?type=2&orderType=1'
					  })
					  }
					 
				}); 
			},
			
			
			
			
		}
	}
</script>

<style scoped lang="less">
.box {
	width: 100vw;
	min-height: 100vh;
	background: #F4F4F4;
}
.cont{
	padding: 20rpx 24rpx;
}
.itemBox{
	background: #FFFFFF;
	border-radius: 16rpx;padding: 24rpx;
}
.itemIMg{
	width: 180rpx;
	height: 180rpx;border-radius: 10rpx;
}
.flex{
	display: flex;
}
.itemRight{
	width: 450rpx;padding-left: 24rpx;
}
.itemName{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;
}
.buyType{
	padding: 0 8rpx;text-align: center;
	height: 32rpx;line-height: 34rpx;
	border-radius: 5rpx;
	border: 1px solid #FF0035;font-size: 22rpx;
color: #FF0035;
margin-top: 10rpx;
}
.priceBox{
	display: flex;justify-content: space-between;padding-top: 10rpx;
}
.price{
	font-weight: 500;
	font-size: 36rpx;
	color: #222222;
	line-height: 50rpx;
}
.itemNum{
	font-size: 34rpx;line-height: 50rpx;
	color: #686868;
}
.itemnotes{
	font-size: 24rpx;padding-top: 12rpx;
	color: #FFC107;
}
.mealBox{
	background: #FFFFFF;
	padding: 20rpx 24rpx;
	margin-top: 20rpx;
	font-size: 26rpx;
	color: #666666;
	    border-radius: 16rpx;
}
.fwlcTitle{
	color: #333333;font-size: 30rpx;font-weight: 500;
	padding-bottom: 20rpx;
}
.mealTop{
	display: flex;
	justify-content: space-between;
	height: 72rpx;
	line-height: 72rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	font-size: 26rpx;
	padding: 0 20rpx;
}
.mealNum{
	text-align: center;
	width: 120rpx;
}
.mealexpire{
	text-align: center;	width: 120rpx;
}
.mealName{
	width: 460rpx;
}
.mealTop2{
	display: flex;
	justify-content: space-between;
	height: 72rpx;
	line-height: 72rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	font-size: 26rpx;
	padding: 0 20rpx;
	background: #FFF6DB;
}
.mealXj{
	background: #FFFCF3;
}
.xjLine{
	display: flex;
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	padding: 20rpx 20rpx;
}
.xjyd{
	width: 8rpx;
	height: 8rpx;
	background: #FABF1B;
	border-radius: 50rpx;
	margin-top: 12rpx;
	margin-right: 10rpx;
}
.mealMs{
	background: #FFFFFF;
	padding: 20rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #9A9A9A;
	line-height: 38rpx;
}
.goodsBox{
	padding: 0rpx 18rpx;font-size: 26rpx;
color: #222222;background: #FFFFFF;margin-top: 20rpx;
border-radius: 16rpx;
}
.goodsline{
	justify-content: space-between;
	padding: 28rpx 0;
}
.bottom{
	background: #FFFFFF;
	display: flex;
	justify-content: space-between;
	position: fixed;
	width: 100%;
	padding:30rpx 0;
   padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom); 
	left: 0;bottom: 0;
	box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153, 153, 153, 0.2);
}
.bleft{
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	line-height: 86rpx;
	padding-left: 50rpx;
}
.Btn{
	width: 223rpx;text-align: center;
	height: 86rpx;line-height: 86rpx;
	background: #FCD903;
	border-radius: 43rpx;
	font-size: 32rpx;
	color: #110B01;
	margin-right: 36rpx;
}
.mealBox img{
	width: 100%;
}
.mealBox image{
	width: 100%;
}
</style>