wxThird/pages/index/paintSure.vue

<template>
	<view class="box">
		<view class="topBox"></view>
		<view class="yuanhu"></view>
		<view class="carBox">
			<view class="left">
				<image :src="carInfo.brandLogo" mode="widthFix" class="brandLogo" v-if="carInfo.brandLogo">
					<img src="../../static/timg/nocar.png" alt="" class="brandLogo" v-else>

				</image>
			</view>
			<view class="right">
				<view class="carPlate">{{carInfo.plateNumber}}</view>
				<view class="car" v-if="carInfo.carModel">{{carInfo.carModel}}</view>
				<view class="car" v-else>暂无</view>
			</view>

		</view>
		<view class="cont">
			<view class="contKk">
			
			<view class="contLine">
				<view class="contlineLeft">联系人</view>
				<view class="contlineRight">
					<input type="text" v-model="customerName" placeholder="请输入联系人姓名" class="contlineRightInput">
				</view>
			</view>
			<view class="contLine">
				<view class="contlineLeft">手机号</view>
				<view class="contlineRight">
					<input type="text" v-model="mobilePhone" placeholder="请输入联系人手机号" class="contlineRightInput">
				</view>
			</view>
				

				<view class="contLine">
					<view class="contlineLeft">
						<image src="../../static/img/icon_star.png" mode="" class="star"></image>
						服务门店
					</view>
					<view class="contlineRight carModelRight" @click="paintShopList">
						<span class="carModel" :class="{noColor:!shopInfo.shopName}">{{shopInfo.shopName?shopInfo.shopName:'选择服务门店'}}</span>
						<image src="../../static/img/little_rightArrow.png" mode="" class="contlineRightJt"></image>
					</view>
				</view>

				<view class="contLine" style="border-bottom: none;">
					<view class="contlineLeft">
						<image src="../../static/img/icon_star.png" mode="" class="star"></image>
						预约时间
					</view>
					<view class="contlineRight carModelRight" @click="cktime">
						<span class="carModel" :class="{noColor:!billDate}">{{billDate?billDate:'选择到店服务时间'}}</span>
						<image src="../../static/img/little_rightArrow.png" mode="" class="contlineRightJt"></image>
					</view>
				</view>

			</view>

			<view class="contKk" style="margin-top:20rpx;">
				<view class="detailedTitle">支付方式</view>
				<view class="contLine " style="border-bottom: none;">
					<view class="payLeft" v-if="PayType==1">
						<image src="../../static/img/icon_weixinzhifu.png" mode="" class="zhifuImg"></image>
						微信支付
					</view>
					<view class="payLeft" v-if="PayType==2">
						<image src="../../static/img/icon_xianxia.png" mode="" class="zhifuImg"></image>
						线下支付
					</view>
					<view class="contlineRight">
						<image src="../../static/img/icon_selectY.png" mode="" class="selectBtn"></image>
					</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>
			<view class="bottomBtn" @click="submit">提交订单</view>
		</view>
		
		<timeSelect ref="timeSelect" :timedata="timedata" @changeTime="changeTime"></timeSelect>
	</view>
</template>

<script>
	import timeSelect from '@/components/timeSelect/timeSelect.vue'
	export default {
		components: {
			timeSelect
		},
		
		data() {
			return {
				userInfo: '',
				goodsnum: 1,
				id: '',
				info: '',
				carInfo: '',
				shopInfo:{},
				goodsInfo: '',
				totalMoney: '',
				yhMoney: 0,
				customerName: '',
				mobilePhone: '',
				comment: '',
				mydata: '',
				orderData: '',
				PayType:0,
				timedata:'',
				billDate:'',
				itemList:[],
				sheetDetail:[],
			}
		},
		onLoad(opt) {
			this.itemList = JSON.parse(opt.itemList);
            console.log(this.itemList)
			this.itemList.forEach(item=>{
				var obj={
					itemId:item.id,
					itemName:item.name,
					itemQty:1,
					salePrice:item.money,
					totalPrice:item.money,
				}
				this.sheetDetail.push(obj)
			})
			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) */
			this.$http('openreservation/getInfo', {
				lat: '',
				lng: '',
			}, 'GET').then(res => {
				this.mydata = res.data
				this.customerName = this.mydata.customerInfo.customerName
				this.mobilePhone = this.mydata.customerInfo.mobilePhone
				this.shopInfo = this.mydata.shopInfo
				this.shopID=this.shopInfo.id
				uni.setStorage({
					key: 'yyshopInfo',
					data:this.shopInfo,
					 success: function () {
					    
					 }
				}); 
				
				console.log('默认服务门店-=',this.shopInfo)
			})
			
			this.$http('openSheetMetalSprayPaint/queryPayType', {
				
			}, 'GET').then(res => {
				this.PayType = res.data.PayType
				
				
			})
		},
		onShow() {
			this.carInfo = this.$store.state.carInfo;
			let shopInfo = this.$store.state.ckshopInfo;
			if (shopInfo) {
				this.shopInfo= shopInfo
				this.shopInfo.id = this.shopInfo.shopId
				this.shopID=this.shopInfo.id
				
				uni.setStorage({
					key: 'yyshopInfo',
					data:this.shopInfo,
					 success: function () {
					    
					 }
				}); 
			}
			
			console.log('服务门店选择过-=',this.shopInfo)
		},
		methods: {
			changeTime(data){
				console.log(data)
				this.billDate=data
			},
			cktime(){
				 this.$refs.timeSelect.open();
			},
			submit() {
				if (this.shopID == '') {
					uni.showToast({
						title: '请选择服务门店',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if (this.billDate == '') {
					uni.showToast({
						title: '请选择到店服务时间',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				//"bizType：1商品2项目3套餐
				var params = {
					sheetType:'5',
					sheetContent: '钣喷',
					customerName: this.customerName,
					mobilePhone: this.mobilePhone,
					plateNumber: this.carInfo.plateNumber,
					carModel: this.carInfo.carModel,
					totalMoney: this.totalMoney,
					shopId: this.shopID,
					comment: this.comment,
					hTime: this.billDate,
					sheetDetail: JSON.stringify(this.sheetDetail),
					payType:this.PayType,
				}
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openMallOrder/submitOrder', params, 'POST').then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.orderData = res.data;
						if(this.PayType==1){
							this.unifiedPay(res.data)
						}else{
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 2000
							});
						}
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
						if (this.orderData.sheetType==5){
							uni.navigateTo({
								url: "../user/myOrder/paintOrderDetail?id=" +that.orderData.id
							})
						}
					}
				})
			},
			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
							})
						}else if (that.orderData.sheetType==5){
							uni.navigateTo({
								url: "../user/myOrder/paintOrderDetail?id=" +that.orderData.id
							})
						}

					},
					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
							})
						}else if (that.orderData.sheetType==5){
							uni.navigateTo({
								url: "../user/myOrder/paintOrderDetail?id=" +that.orderData.id
							})
						}
					}
				});
			},
			openGoodsDetailById() {
				this.$http('openMall/openGoodsDetailById', {
					id: this.id
				}, 'GET').then(res => {
					this.info = res.data
				})
			},
			goINdex() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			paintShopList() {
				uni.navigateTo({
					url: 'paintShopList'
				})
			},
			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() {
				
				var money = 0.00
				this.itemList.forEach((item)=>{
					money += item.money
				})
				this.totalMoney = money;
				
				
			}

		}
	}
</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;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.bottomLeft {
		padding-top: 23rpx;
		padding-left: 30rpx;
		    height: 74rpx;
		    line-height: 74rpx;
	}

	.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;
	}
	.detailedTitle {
		padding: 22rpx 0;
		display: flex;
		text-align: center;
		align-content: flex-start;
		
		
		font-size: 24rpx;
		font-weight: bold;
		color: #666666;
	}

	.contLine {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		padding: 30rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.contlineLeft {
		color: #666666;
		line-height: 40rpx;
		align-items: center;
	}

	.star {
		width: 14rpx;
		height: 14rpx;
		padding-bottom: 5rpx;
	}

	.carModel {
		width: 400rpx;
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.noColor{
		color: #CCCCCC;
	}

	.carModelRight {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.contlineRight {
		color: #333333;
		line-height: 40rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 450rpx;
		text-align: right;
	}
	.selectBtn{
		width: 36rpx;
		height: 36rpx;
	}

	.contlineRightInput {
		color: #333333;
	}

	.contlineRightJt {
		width: 30rpx;
		height: 30rpx;
		
	}

	.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%;
	}

	.carBox {
		width: 662rpx;

		background: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 24rpx;
		margin-top: -100rpx;
		padding: 20rpx;
		display: flex;
	}

	.left {
		margin-right: 24rpx;

	}

	.brandLogo {
		width: 72rpx;
		height: 72rpx;
	}

	.carPlate {

		height: 42rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
	}

	.car {
		width: 562rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		line-height: 33rpx;
		margin-top: 10rpx;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.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;

	}
	.zhifuImg{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		
	}
	.payLeft{
		display: flex;
		align-items: center;
		
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}
</style>