JP-ChargeTeam51/pages/store/orderConfirm.vue

<template>
	<view>
		<ujp-navbar title="确认订单"></ujp-navbar>
		<!-- 地址 -->
		<view class="address">
			<!-- 填写地址 -->
			<view class="fill-address"  @click="showPopup">
				<view class="icon">
					<img src="@/assets/img/riFill-add-circle-fill@3x.png" alt="">
				</view>
				<view class="text">
					填写收货地址
					
					<!-- https://blog.csdn.net/a472066275/article/details/103401969
					 -->
				</view>
				<view class="right-icon">
					<u-icon name="arrow-right" color="#cccccc" size="24"></u-icon>
				</view>
			</view>


			<!-- 获取地址 -->
			<view class="get-address" v-if="false">
				<view class="icon">
					<img src="@/assets/img/riFill-wechat-fill@3x.png" alt="">
				</view>
				<view class="text">
					一键获取微信地址
				</view>
				<view class="right-icon">
					<u-icon name="arrow-right" color="#cccccc" size="24"></u-icon>
				</view>
			</view>

		</view>
		
		<!-- 已填写 -->
		<view class="filled"   @click="showPopup">
			<view class="filled-address">
				<view class="address1" v-if="false">
					湖北省荆州市沙市区朝阳街道
				</view>
				<view class="address2">
					{{deliveryAddress?deliveryAddress:'未填写详细地址'}}
				</view>
				<view class="infos">
					<view class="name">
						{{receiver?receiver:'未填写收货人姓名'}}
					</view>
					<view class="tel">
						  {{contactPhone?contactPhone:'未填写收货人手机号'}}
					</view>
				</view>
			</view>
			
			<view class="icon">
				<u-icon name="arrow-right" color="#cccccc" size="24"></u-icon>
			</view>
		</view>
		
		
		<!-- 商品信息 -->
		<view class="commodity-infos">
			<!-- 图片 -->
			<view class="picture">
				<img v-if="info.mallProduct.pic" :src="info.mallProduct.pic" alt="">
				<img v-else src="@/assets/img/chargesite_default.png"  ></img>
			</view>
			<!-- 信息 -->
			<view class="infos">
				<view class="title">
					{{info.mallProduct.name}}
				</view>
				<view class="name">
					 
				</view>
				<view class="price">
					{{info.mallProductPrice}}元
				</view>
			</view>
			<!-- 数量 -->
			<view class="amount">
				
			</view>
		</view>
		<!-- 订单金额 -->
		<view class="order-amount" v-if="priceAttrList.length">
			<view class="title">
				选配
			</view>
			<view class="infos">
				
				<template v-for="(item,i) in priceAttrList" >
				
					<view class="infos-item"   :key="i">
						<view class="item-title">
							{{item.attribute.name}}
						</view>
						<view class="item-value item-value-end">
							<view v-for="(option , oindex) in item.options"  :key="i+'__'+oindex">
							{{option.label}} <span style="margin-left: 8px;" v-if="option.price">{{option.price}}元</span>
							</view>
							
						</view>
					
					</view>
				</template>
			</view>
		</view>	
		<!-- 订单金额 -->
		<view class="order-amount">
			<view class="title">
				订单金额
			</view>
			<view class="infos">
				<view class="item">
					<view class="item-title">
						商品金额
					</view>
					<view class="item-value">
						{{info.mallProductPrice}}元
					</view>

				</view>
				
				
				<view class="item" v-if="false">
					<view class="item-title">
						优惠金额
					</view>
					<view class="item-value">
						0元
					</view>

				</view>
				<view class="item">
					<view class="item-title">
						运费
					</view>
					<view class="item-value">
						包邮
					</view>

				</view>
				<view class="item">
					<view class="item-title">
						合计
					</view>
					<view class="item-value">
						{{mallProductOrder.price}}元
					</view>

				</view>
			</view>

		</view>
		<!-- 支付方式 -->
		<view class="payment">
			<view class="title">
				支付方式
			</view>
			<radio-group  @change="radioChange">

			<view class="way">
				<view class="way-name">
					<text><img src="@/assets/img/riFill-wechat-pay-fill@3x.png" alt=""></text>
					微信支付
				</view>
				<view class="way-radio">
					<label class="radio">
						<radio value="0"  name="abc"  :checked="submitType === '0'"  /><text></text>
					</label>
				</view>
			</view>

			<view class="way">
				<view class="way-name">
					<text><img src="@/assets/img/ze-alipay Copy@3x.png" alt=""></text>
					支付宝
				</view>
				<view class="way-radio">
					<label class="radio">
						<radio value="1"  name="abc"  :checked="submitType === '1'"  /><text></text>
					</label>
				</view>
			</view>
			</radio-group>

		</view>

		<!-- 底部 -->
		<view class="bottom">
			<view class="unpaid">
				待支付: {{mallProductOrder.price}}元
			</view>
			<view class="btn" @click="submit">
				<button class="submit">
					提交订单
				</button>
			</view>
		</view>

	<!-- 填写收货地址 -->
	   <u-popup v-model="show" mode="center" :closeable="true">
				<view class="address-popup">
					<view class="headline">
						填写收货地址
					</view>
					<view class="infos">
						<view class="item">
							<view class="item-title">
								收货人
							</view>
							<view class="item-value"  style="border-bottom: 1px solid #9E9E9E;">
								<input type="text"  v-model="receiverTemp" placeholder="请输入收货人姓名">
							</view>
						</view>
						<view class="item">
							<view class="item-title">
								手机号码
							</view>
							<view class="item-value"   style="border-bottom: 1px solid #9E9E9E;">
								<input type="text"  v-model="contactPhoneTemp" placeholder="请输入收货人手机号">
							</view>
						</view>
						<view class="item" v-if="false">
							<view class="item-title">
								所在区域
							</view>
							<view class="item-value"  style="border: 1px solid #9E9E9E;">
								<input type="text" placeholder="请选择省/市/区">
								
							</view>
							<view class="icon">
								<u-icon name="arrow-right" color="#cccccc" size="24"></u-icon>
							</view>
						</view>
						
						<view class="item">
							详细地址
							<view class="icon" @click="getPoint">
								
								<view class="img">
									<img src="@/assets/img/riLine-map-pin-line@3x.png" alt="">定位
								</view>
								<view class="text">
									
								</view>
							</view>
							
						</view>
						<view class="item" style="border: 1px solid #9E9E9E;">
							
							<u-input  type="textarea"  placeholder="请输入详细地址" v-model="deliveryAddressTemp">
							</u-input>
							
						</view>
					</view>
					<!-- 保存 -->
					<button class="save" @click="closePopup">保存并使用</button>
				</view>
			
				
			</u-popup>
			<u-modal v-model="showModel" :show-cancel-button="true"  @confirm="confirm"
				confirm-text="支付成功？" title="扫码支付">
				<view style="
									text-align: center;
								">
					<img id="qrcode2" :src="qrCodeImg">
				</view>
				<view style="
									text-align: center;
								">请使用支付宝扫码</view>
			
			</u-modal>
			<img id="qrcode" style="display: none;">
			
	
	</view>
</template>

<script>
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import * as API from '@/apis/mall.js'
	import {
		wxPayJs
	} from '@/utils/wxpay'
	import QRCode from 'qrcodejs2'
	import {
		newDate,checkPhone,
		convertCanvasToImage,
	} from '@/utils'

import MapLoader from '@/utils/AMap'
	export default {
		data() {
			return {
               show:false,
			   id:"",
			   opinions:"",
			   mallProductOrder:{},
			   priceAttrList:{},
			   info:{
			   	mallProduct:{},
			   	mallProductAttributeList:[],
			   	mallProductOptionList:[],
			   	mallProductPrice:0,
			
			   },
			   receiver:"",
			   contactPhone:"",
			   deliveryAddress:"",
			   receiverTemp:"",
			   contactPhoneTemp:"",
			   deliveryAddressTemp:"",
			   submitForm:{},
			   submitType:"0",
			   	qrCodeImg: "",
			   showModel:false,
			   outOrderNo:"",
			   
			}
		},
		onLoad(op) {
			this.personInfo = this.carhelp.getPersonInfo()
			
			if (op.id) {
				this.id = op.id;
				this.opinions=op.opinions
				this.onLoadApi()
				this.getDetail()
			}
			
			
		
		},
		methods: {
			getPoint() {
				var _this = this;
				WxJsApi.getLocation().then((res) => {
			
					
					var lnglatXY =[parseFloat(res.longitude),parseFloat(res.latitude)]
					
			
					if (res.errMsg != 'getLocation:ok') {
						uni.showToast({
							title: res
						})
					} else {
			
						
					}
					MapLoader().then(AMap => {
					AMap.service('AMap.Geocoder', function() {
						let geocoder = new AMap.Geocoder({});
						geocoder.getAddress(lnglatXY, function(status, result) {
							console.log(lnglatXY);
							console.log(status, result);
							if (status === 'complete' && result.info === 'OK') {
								var address = result.regeocode.formattedAddress;
								console.log(address);
								_this.deliveryAddressTemp = address;
							} else {
								uni.showToast({
									title: '无法获取定位'
								})
								
							}
						});
					});
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			confirm() {
				 
				uni.redirectTo({
					url: "/pages/store/paymentSuccess?id=" + this.outOrderNo
				})
			},
			 radioChange: function(evt) {
				 
				this.submitType=evt.detail.value
			    
			},
			init(){
				if(this.deliveryAddress){
					
				}else{
					this.showPopup()
				}
				
			},
			showPopup(){
				this.show=true;
				this.receiverTemp=this.receiver
				this.contactPhoneTemp=this.contactPhone
				this.deliveryAddressTemp=this.deliveryAddress
			},
			closePopup(){
				this.show=false;
				this.receiver=this.receiverTemp
				this.contactPhone=this.contactPhoneTemp
				this.deliveryAddress=this.deliveryAddressTemp
			},
			submit(){
				var type=this.submitType
				if(!this.receiver){
					uni.showToast({
								
						title: "请输入收货人姓名"
					})
					return
				}
				if(!this.contactPhone){
					uni.showToast({
								
						title: "请输入收货人手机号码"
					})
					return
				}
				
				var checkPhoneResult = checkPhone(this.contactPhone);
				
				if (checkPhoneResult !== true) {
					uni.showToast({
						title: checkPhoneResult,
					})
					return;
				}
				
				if(!this.deliveryAddress){
					uni.showToast({
								
						title: "请输入详细地址"
					})
					return
				}
				
				if (type == 0) {
					this.wxpy()
				}
				if (type == 1) {
					this.alpy()
				}
				
			},
			
			alpy() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var listcanvas = document.getElementsByTagName('canvas')
			
				if (listcanvas.length > 0) {
					document.getElementById("qrcode").removeChild(document.getElementsByTagName('canvas')[0]);
				}
				API.tradePrecreatePay({
					productId: this.id,
					opinions:this.opinions,
					buyNum:1,
					receiver:this.receiver,
					contactPhone:this.contactPhone,
					deliveryAddress:this.deliveryAddress,
				}).then((response) => {
			
					let qrcode = new QRCode('qrcode', {
						width: 200,
						height: 200,
						text: response.data.qr_code,
						correctLevel: QRCode.CorrectLevel.M,
			
					})
					this.outOrderNo = response.data.outOrderNo;
					var canvas = document.getElementsByTagName('canvas')[0];
					this.qrCodeImg = convertCanvasToImage(canvas);
					uni.hideLoading()
					this.showModel = true
			
				}).catch(error => {
					uni.showToast({
			
						title: error
					})
				})
			},
			wxpy() {
				API.wxJsapiPay({
					productId: this.id,
					opinions:this.opinions,
					buyNum:1,
					receiver:this.receiver,
					contactPhone:this.contactPhone,
					deliveryAddress:this.deliveryAddress,
				}).then((response) => {
					this.submitForm = response.data
					wxPayJs(this.submitForm);
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
				
			},
			getDetail(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.mallDetails({
					id:this.id
				}).then((res) => {
					uni.hideLoading();
					this.info=res.data
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			onLoadApi(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.orderMessage({
					productId:this.id,
					opinions:this.opinions,
					buyNum:1,
				}).then((res) => {
					uni.hideLoading();
					this.mallProductOrder=res.data.mallProductOrder;
					this.priceAttrList=res.data.priceAttrList;
					
					this.receiver=this.personInfo.realName
					this.contactPhone=this.personInfo.phone
					
					if(res.data.lastReceiver){
						this.receiver=res.data.lastReceiver
						this.contactPhone=res.data.lastContactPhone
						this.deliveryAddress=res.data.lastDeliveryAddress
					}
					this.init();
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 100px;
	}

	//地址
	.address {
		background-color: #fff;
		margin: 24rpx;
		border-radius: 8px;

		.fill-address,
		.get-address {
			padding: 24rpx;
			display: flex;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 40rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				color: rgba(16, 16, 16, 1);
				margin-left: 8rpx;
			}

			.right-icon {
				margin-left: auto;
			}
		}

	}
	.item-value-end{
		    text-align: end;
		
	}
	// 已填写
	.filled {
		background-color: #fff;
		margin: 24rpx;
		padding: 24rpx;
		border-radius: 8px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.filled-address {
			.address1 {
				color: rgba(51, 51, 51, 1);
				font-size: 24rpx;
			}

			.address2 {
				color: rgba(51, 51, 51, 1);
				margin-top: 16rpx;
				font-weight: bold;
			}

			.infos {
				display: flex;
				font-size: 12px;
				margin-top: 16rpx;

				.tel {
					margin-left: 16rpx;
				}
			}
		}
	}



	// 商品信息
	.commodity-infos {
		background-color: #fff;
		margin: 24rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;

		// 图片
		.picture {
			width: 152rpx;
			height: 152rpx;
			border-radius: 4px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		// 信息
		.infos {
			margin-left: 16rpx;

			.title {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				font-weight: bold;
			}

			.name {
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
				margin-top: 8rpx;
			}

			.price {
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
				margin-top: 24rpx;
			}
		}
		// 数量
		.amount {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			margin-left: auto;
		}
	}

	// 订单金额
	.order-amount {
		margin: 24rpx;
		padding: 32rpx 24rpx;
		background-color: #fff;

		.title {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			margin-bottom: 32rpx;
			font-weight: bold;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 24rpx;

			.item-title {
				color: rgba(51, 51, 51, 1);
			}

			.item-value {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				font-weight: bold;
			}
			
		}
	}

	// 支付方式
	.payment {
		margin: 24rpx;
		padding: 32rpx 24rpx;
		background-color: #fff;

		.title {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			margin-bottom: 32rpx;
			font-weight: bold;
		}

		.way {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 24rpx;

			.way-name {
				display: flex;
				align-items: center;

				text {
					margin-right: 16rpx;

					img {
						width: 48rpx;
						height: 48rpx;
						vertical-align: middle;
					}
				}
			}

			::v-deep.uni-radio-input-checked {
				background-color: #00b962 !important;

			}

			::v-deep.uni-radio-input {
				width: 40rpx !important;
				height: 40rpx !important;
			}
		}

	}
// 底部
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 24rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.unpaid {
			color: rgba(16, 16, 16, 1);
			font-size: 40rpx;
			font-weight: bold;
		}

		.submit {
			width: 338rpx;
			height: 96rpx;
			background-color: rgba(0, 185, 98, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
			border-radius: 50px;


		}
	}

// 填写地址
.address-popup{
	padding: 48rpx;
	width: 640rpx;
	border-radius: 8px;
	
	.headline{
		text-align: center;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-weight: bold;
	}
	.infos{
		margin-top: 70rpx;
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 48rpx;
			.item-title{
				width: 112rpx;
				color: rgba(16, 16, 16, 1);
			}
			.item-value{
				display: flex;
				align-items: center;
				margin-left: 40rpx;
				display: flex;
				
				
			}
			.item-value-end{
				    text-align: end;
				
			}
			
		}
		.icon{
			text-align: center;
			color: rgba(22, 119, 255, 1);
			margin-left: auto;
			img{
				width: 32rpx;
				height: 32rpx;
			}
			.text{
				font-size: 20rpx
			}
		}
	}

// 保存
.save{
	border-radius: 4px;
	background-color: rgba(0, 185, 98, 1);
	color: rgba(255, 255, 255, 1);
	font-size: 16px;
	height: 80rpx;
}

}



 ::v-deep.u-mode-center-box{
	border-radius: 8px !important;
}
uni-input{
	font-size: 14px;
	color: #777777;
	
}

</style>