foodie-shop
/
pay.html

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>结算页面</title>
	<link rel="shortcut icon" href="img/foodie.ico" />

	<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="basic/css/demo.css" rel="stylesheet" type="text/css" />
	<link href="css/cartstyle.css" rel="stylesheet" type="text/css" />
	<link href="css/jsstyle.css" rel="stylesheet" type="text/css" />
	<link href="css/lee.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="js/address.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
	<div id="pay">
		<!--顶部导航条 -->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd" v-show="!userIsLogin">
						<a href="login.html" target="_top" class="h">亲，请登录</a>
						<a href="register.html" target="_top">免费注册</a>
					</div>
					<div class="menu-hd" v-show="userIsLogin">
						<span style="color: #d2364c">欢迎，{{userInfo.username}}</span>
					</div>
				</div>
			</ul>
			<ul class="message-r">
				<div class="topMessage home">
					<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
				</div>
				<div class="topMessage my-shangcheng">
					<div class="menu-hd MyShangcheng"><a href="javascript:void(0);" @click="goUserCenter">
						<i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
				</div>
			</ul>
		</div>

		<!--悬浮搜索框-->
		<div class="nav white">
			<!-- <div class="logo"><img src="images/logo.png" /></div> -->
			<div class="logoBig">
				<li><img src="images/logobig.png" /></li>
			</div>

			<div class="search-bar pr">
				<a name="index_none_header_sysc" href="#"></a>
				<form>
					<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
						autocomplete="off">
					<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
				</form>
			</div>
		</div>

		<div class="clear"></div>
		<div class="concent">
			<!--地址 -->
			<div class="paycont">
				<div class="address">
					<h3>确认收货地址 </h3>
					<div class="control">
						<div class="tc-btn createAddr theme-login am-btn am-btn-danger">使用新地址</div>
					</div>
					<div class="clear"></div>
					<ul>
						<span v-show="addressList.length > 0">
							<!-- <block v-for="(address, aindex) in addressList" :key="aindex">
								<div class="per-border"></div> -->
							<!-- <li class="user-addresslist " v-for="(address, aindex) in addressList" :key="aindex" style="margin-top: 6px;"> -->
							<li :class="['user-addresslist', {'defaultAddr' : address.id == choosedAddressId}]"
								v-for="(address, aindex) in addressList"
								:key="aindex"
								@click="chooseAddress(address.id)"
								style="margin-top: 6px;">
								<!-- <li :class="['user-addresslist', {'DefaultAddr' : address.isDefault == 1}]"> -->

								<div class="address-left">
									<!-- background: url(../images/peraddbg.png)no-repeat scroll 0% 0%; -->
									<!-- :style="address.isDefault == 1 ? " -->
									<div class="user DefaultAddr">

										<span class="buy-address-detail">
											<span class="buy-user">{{address.receiver}}</span>
											<span class="buy-phone">{{address.mobile}}</span>
										</span>
									</div>
									<div class="default-address DefaultAddr">
										<span class="buy-line-title buy-line-title-type">收货地址：</span>
										<span class="buy--address-detail">
											<span class="province">{{address.province}}</span>
											<span class="city">{{address.city}}</span>
											<span class="dist">{{address.district}}</span>
											<span class="street">{{address.detail}}</span>
										</span>
									</div>
									<ins class="deftip" v-show="address.isDefault == 1">默认地址</ins>
								</div>
								<div class="address-right">
									<a href="person/address.html">
										<span class="am-icon-angle-right am-icon-lg"></span></a>
								</div>
								<div class="clear"></div>

								<div class="new-addr-btn">
									<a href="javascript:void(0);" @click.stop="setDefaultAddress(address.id)" :class="[{'hidden' : address.id == defaultAddressId}]" >设为默认</a>
									<span :class="['new-addr-bar', {'hidden' : address.id == defaultAddressId}]">|</span>
									<a href="javascript:void(0);" @click.stop="editAddress(address.id)">编辑</a>
									<span class="new-addr-bar">|</span>
									<a href="javascript:void(0);" @click.stop="deleteAddress(address.id)">删除</a>
								</div>
							</li>
							<!-- </block> -->
						</span>

					</ul>

					<div class="clear"></div>
				</div>

				<!--支付方式-->
				<div class="logistics">
					<h3>选择支付方式</h3>
					<ul class="pay-list">
						<li class="" @click="choosePayMethod(1)" style="width: 180px;height:40px;padding:3px;"><img src="img/wxpay.png"/><span></span></li>
						<!-- <li class="pay qq" @click="choosePayMethod(1)"><img src="images/weizhifu.jpg"/>微信<span></span></li> -->
						<!-- <li class="pay taobao" @click="choosePayMethod(2)"><img src="images/zhifubao.jpg"/>支付宝<span></span></li> -->
						<li class="" @click="choosePayMethod(2)" style="width: 180px;height:40px;padding:3px;"><img src="img/alipay.png"/><span></span></li>
					</ul>
				</div>
				<div class="clear"></div>

				<!--订单 -->
				<div class="concent">
					<div id="payTable">
						<h3>确认订单信息</h3>
						<div class="cart-table-th">
							<div class="wp">

								<div class="th th-item">
									<div class="td-inner">商品信息</div>
								</div>
								<div class="th th-price">
									<div class="td-inner">单价</div>
								</div>
								<div class="th th-amount">
									<div class="td-inner">数量</div>
								</div>
								<div class="th th-sum">
									<div class="td-inner">金额</div>
								</div>
								<div class="th th-oplist">
									<div class="td-inner">配送方式</div>
								</div>

							</div>
						</div>
						<div class="clear"></div>

						<tr class="item-list">
							<div class="bundle  bundle-last" v-for="(orderItem, index) in orderItemList">

								<div class="bundle-main">
									<ul class="item-content clearfix">
										<div class="pay-phone">
											<li class="td td-item">
												<div class="item-pic">
													<a :href="'item.html?itemId=' + orderItem.itemId" target="_blank" class="J_MakePoint">
														<img :src="orderItem.itemImgUrl" class="itempic J_ItemImg"
															style="width: 80px;height: 80px"></a>
												</div>
												<div class="item-info">
													<div class="item-basic-info">
														<a :href="'item.html?itemId=' + orderItem.itemId" target="_blank"  class="item-title J_MakePoint"
															data-point="tbcart.8.11">{{orderItem.itemName}}</a>
													</div>
												</div>
											</li>
											<li class="td td-info">
												<div class="item-props">
													<span class="sku-line">规格：{{orderItem.specName}}</span>
												</div>
											</li>
											<li class="td td-price">
												<div class="item-price price-promo-promo">
													<div class="price-content">
														<em
															class="J_Price price-now">{{orderItem.priceDiscount / 100}}</em>
													</div>
												</div>
											</li>
										</div>
										<li class="td td-amount">
											<div class="amount-wrapper ">
												<div class="item-amount ">
													<span class="phone-title">购买数量</span>
													<div class="sl">
														{{orderItem.buyCounts}}
													</div>
												</div>
											</div>
										</li>
										<li class="td td-sum">
											<div class="td-inner">
												<em tabindex="0"
													class="J_ItemSum number">{{orderItem.priceDiscount * orderItem.buyCounts / 100}}</em>
											</div>
										</li>
										<li class="td td-oplist">
											<div class="td-inner">
												<span class="phone-title">配送方式</span>
												<div class="pay-logis">
													包邮
												</div>
											</div>
										</li>

									</ul>
									<div class="clear"></div>
								</div>
							</div>
						</tr>
						<div class="clear"></div>
					</div>

				</div>
				<div class="clear"></div>
				<div class="pay-total">
					<!--留言-->
					<div class="order-extra">
						<div class="order-user-info">
							<div id="holyshit257" class="memo">
								<label>买家留言：</label>
								<input v-model="orderRemarker" type="text" title="选填, 可写备注" placeholder="选填, 可写备注"
									class="memo-input J_MakePoint c2c-text-default memo-close">
								<div class="msg hidden J-msg">
									<p class="error">最多输入500个字符</p>
								</div>
							</div>
						</div>

					</div>
					<div class="clear"></div>
				</div>
				<!--含运费小计 -->
				<div class="buy-point-discharge ">
					<p class="price g_price ">
						合计（包邮）
						<!-- <span>¥</span> -->
						<em class="pay-sum">¥{{totalAmount / 100}}</em>
					</p>
				</div>

				<!--信息 -->
				<div class="order-go clearfix">
					<div class="pay-confirm clearfix">
						<div class="box">
							<div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
								<span class="price g_price ">
									<!-- <span>¥</span>  -->
									<em class="style-large-bold-red " id="J_ActualFee">¥{{totalAmount / 100}}</em>
								</span>
							</div>

							<div id="holyshit268" class="pay-address">

								<p class="buy-footer-address">
									<span class="buy-line-title buy-line-title-type">寄送至：</span>
									<span class="buy--address-detail">
										<span class="province">{{confirmAddress.province}}</span>
										<span class="city">{{confirmAddress.city}}</span>
										<span class="dist">{{confirmAddress.district}}</span>
										<span class="street">{{confirmAddress.detail}}</span>
									</span>
								</p>
								<p class="buy-footer-address">
									<span class="buy-line-title">收货人：</span>
									<span class="buy-address-detail">
										<span class="buy-user">{{confirmAddress.receiver}}</span>
										<span class="buy-phone">{{confirmAddress.mobile}}</span>
									</span>
								</p>
							</div>
						</div>

						<div id="holyshit269" class="submitOrder">
							<div class="go-btn-wrap">
								<a id="J_Go"
									href="javascript:void(0);"
									@click="submitOrder"
									class="btn-go"
									tabindex="0"
									title="点击此按钮，提交订单">提交订单</a>
							</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>

			<div class="clear"></div>
		</div>
		<!-- </div> -->
		<div class="footer ">
			<div class="footer-hd ">
				<p>
					<a href="https://www.imooc.com/" target="_blank">慕课网</a>
					<b>|</b>
					<a href="https://coding.imooc.com/class/217.html" target="_blank">分布式架构仿抖音短视频</a>
					<b>|</b>
					<a href="https://coding.imooc.com/class/261.html" target="_blank">Netty仿微信聊天</a>
					<b>|</b>
					<a href="https://coding.imooc.com/class/201.html" target="_blank">Zookeeper与dubbo入门</a>
					<b>|</b>
					<a href="https://coding.imooc.com/class/293.html" target="_blank">支付宝小程序</a>
				</p>
			</div>
			<div class="footer-bd ">
				<p>
					<em>© 2019 imooc.com 京ICP备12003892号-11 北京奥鹏文化传媒有限公司 版权所有</em>
				</p>
			</div>
		</div>
		<!-- </div> -->
		<div class="theme-popover-mask"></div>
		<div class="theme-popover">

			<!--标题 -->
			<div class="am-cf am-padding">
				<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add
						address</small></div>
			</div>
			<hr />

			<div class="am-u-md-12">
				<form class="am-form am-form-horizontal">
					<div class="am-form-group">
						<label for="user-name" class="am-form-label">收货人</label>
						<div class="am-form-content">
							<input type="text" id="user-name" placeholder="收货人" v-model="receiver" maxlength="12">
						</div>
					</div>

					<div class="am-form-group">
						<label for="user-phone" class="am-form-label">手机号码</label>
						<div class="am-form-content">
							<input id="user-phone" placeholder="手机号必填" v-model="mobile" maxlength="11">
						</div>
					</div>

					<div class="am-form-group">
						<label for="user-phone" class="am-form-label">所在地</label>
						<div id="example" class="am-form-content address">
							<select v-model="prov">
								<option v-for="option in arr" :value="option.name">{{ option.name }}</option>
							</select>
							<select v-model="city">
								<option v-for="option in cityArr" :value="option.name">{{ option.name }}</option>
							</select>
							<select v-model="district" v-if="district">
								<option v-for="option in districtArr" :value="option.name">{{ option.name }}</option>
							</select>
						</div>
					</div>

					<div class="am-form-group">
						<label for="user-intro" class="am-form-label">详细地址</label>
						<div class="am-form-content">
							<textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"
								v-model="detail"></textarea>
							<small>100字以内写出你的详细地址...</small>
						</div>
					</div>

					<div class="am-form-group theme-poptit">
						<div class="am-u-sm-9 am-u-sm-push-3">
							<div class="am-btn am-btn-danger" @click="saveNewAddressOrUpdate">保存</div>
							<div class="am-btn am-btn-danger close" @click="closeAddressDialog">取消</div>
						</div>
					</div>
				</form>
			</div>

			<!-- <input type="hidden" id="hiddenOrderId" :value="orderId"/>
			<a href="" id="alipayLink" target="_blank"></a> -->
		</div>

		<div class="clear"></div>
	</div>
	<script type="text/javascript " src="js/app.js"></script>
	<script type="text/javascript " src="js/cities.js"></script>
	<script type="text/javascript">
		// $(document).ready(function(){
		// 	$("#alipayLink").one("click",function(){
		// 		var orderId = $("#hiddenOrderId").val();
		// 		debugger;
		// 		window.open('alipayTempTransit.html?orderId='+orderId);
		// 	});
		// });
		var index = new Vue({
			el: "#pay",
			data: {
				userIsLogin: false,
				userInfo: {},

				orderItemList: [], // 订单结算的商品列表
				totalAmount: 0, // 订单总价格

				defaultAddressId: "",	// 默认地址id
				choosedAddressId: "",	// 选中的地址id
				addressList: [],

				updatedAddressId: "",	// 用于更新地址的id，如果为空，新增，如果不为空，修改

				confirmAddress: {},	// 确认地址

				choosedPayMethod: 0,
				orderRemarker: "",		// 用户备注留言

				receiver: "",
				mobile: "",
				province: "",
				// city: "",
				// district: "",
				detail: "",

				orderId: "",

				arr: arrAll,
				prov: '北京',
				city: '北京',
				district: '东城区',
				cityArr: [],
				districtArr: []
			},

			watch: {
				prov: {
					// 表格数据刷新后需清空之前查看的订单详情内容
					handler: function (newVal, oldVal) {
						this.updateCity();
						this.updateDistrict();
					},
					deep: true,
				},
				city: {
					// 表格数据刷新后需清空之前查看的订单详情内容
					handler: function (newVal, oldVal) {
						this.updateDistrict();
					},
					deep: true,
				},

			},

			created() {
				this.updateCity();
				this.updateDistrict();

				// var me = this;
				// 通过cookie判断用户是否登录
				this.judgeUserLoginStatus();

				// 渲染结算订单信息
				this.renderOrderInfoList();

				// 渲染地址信息
				this.renderUserAddressList();
			},
			methods: {
				goUserCenter() {
					// 判断用户是否登录
					var userIsLogin = this.userIsLogin;
					if (!userIsLogin) {
						// 用户未登录，则跳转
						window.location.href = "login.html?returnUrl=" + app.centerServerUrl;
					} else {
						window.location.href = app.centerServerUrl;
					}
				},
				// goAlipay() {
                //     window.open("alipayTempTransit.html?orderId=" + this.orderId);
                // },
				choosePayMethod(payMethod) {
					this.choosedPayMethod = payMethod;

				},
				// 提交订单，创建订单
				submitOrder() {
					// 判断提交的商品不能为空
					var orderItemList = this.orderItemList;
					if (orderItemList == null || orderItemList == undefined || orderItemList == '' || orderItemList.length <= 0) {
						alert("没有商品信息，订单无法提交~！");
						return;
					}
					// 拼接规格ids
					var itemSpecIds = "";
					for (var i = 0 ; i < orderItemList.length ; i ++) {
						var tmpSpecId = orderItemList[i].specId;
						itemSpecIds += tmpSpecId;
						if (i < orderItemList.length-1) {
							itemSpecIds += ",";
						}
					}

					// 判断选中的地址id不能为空
					var choosedAddressId = this.choosedAddressId;
					if (choosedAddressId == null || choosedAddressId == undefined || choosedAddressId == '') {
						alert("请选择收货地址！");
						return;
					}

					// 判断支付方式不能为空
					var choosedPayMethod = parseInt(this.choosedPayMethod);
					if (choosedPayMethod != 1 && choosedPayMethod != 2) {
						alert("请选择支付方式！");
						return;
					}

					// var newWindow = window.open();

					// 买家备注可以为空
					var orderRemarker = this.orderRemarker;
					// console.log(orderRemarker);

					var userInfo = this.userInfo;
					var serverUrl = app.serverUrl;
					axios.defaults.withCredentials = true;
					axios.post(
							serverUrl + '/orders/create',
							{
								"userId": userInfo.id,
								"itemSpecIds": itemSpecIds,
								"addressId": choosedAddressId,
								"payMethod": choosedPayMethod,
								"leftMsg": orderRemarker,
							},
							{
								headers: {
									'headerUserId': userInfo.id,
									'headerUserToken': userInfo.userUniqueToken
								}
							})
							.then(res => {
								if (res.data.status == 200) {
									// alert("OK");
									var orderId = res.data.data;
									// 判断是否微信还是支付宝支付
									if (choosedPayMethod == 1) {
										// 微信支付则跳转到微信支付页面，并且获得支付二维码
										window.location.href = "wxpay.html?orderId=" + orderId;
									} else if (choosedPayMethod == 2) {
										this.orderId = orderId;

										// 支付宝支付直接跳转
										window.location.href = "alipay.html?orderId=" + orderId + "&amount="+this.totalAmount;
										window.open("alipayTempTransit.html?orderId=" + orderId);
										// const newWindow = window.open();
										// 弹出的新窗口进行支付
										// newWindow.location = "alipayTempTransit.html?orderId=" + orderId;
										// this.$nextTick(()=> {
										// 	// 当前页面跳转后会轮训支付结果
										// 	newWindow.location.href = "alipay.html?orderId=" + orderId;
										// })
									} else {
										alert("目前只支持微信或支付宝支付！");
									}

								} else {
									alert(res.data.msg);
								}
							});
				},
				// 编辑地址
				editAddress(addressId) {
					// 获得编辑的地址内容
					var addressList = this.addressList;
					var updateAddress = null;
					for (var i = 0 ; i < addressList.length ; i ++) {
						var tmpAddress = addressList[i];
						if (tmpAddress.id == addressId) {
							updateAddress = tmpAddress;
							break;
						}
					}

					// 赋值
					this.receiver = updateAddress.receiver;
					this.mobile = updateAddress.mobile;
					this.prov = updateAddress.province;
					this.city = updateAddress.city;
					this.district = updateAddress.district;
					this.detail = updateAddress.detail;

					// 弹出对话框
					this.showAddressDialog();

					// 设置更新地址的id
					this.updatedAddressId = addressId;
				},
				// 弹出对话框
				showAddressDialog() {
					// 禁止遮罩层下面的内容滚动
					$(document.body).css("overflow","hidden");
					$(this).addClass("selected");
					$(this).parent().addClass("selected");

					$('.theme-popover-mask').show();
					$('.theme-popover-mask').height($(window).height());
					$('.theme-popover').slideDown(200);
				},
				// 删除地址
				deleteAddress(addressId) {
					var isDel = window.confirm("确认删除改地址吗");
					if (!isDel) {
						return;
					}

					// 如果删除的地址是默认地址或者选中地址，则choosedAddressId和defaultAddressId要设置为空
					if (addressId == this.choosedAddressId) {
						this.choosedAddressId = "";
					}

					if (addressId == this.defaultAddressId) {
						this.defaultAddressId = "";
					}

					var userInfo = this.userInfo;
					var serverUrl = app.serverUrl;
					axios.defaults.withCredentials = true;
					axios.post(
							serverUrl + '/address/delete?userId=' + userInfo.id + "&addressId=" + addressId,
							{},
							{
								headers: {
									'headerUserId': userInfo.id,
									'headerUserToken': userInfo.userUniqueToken
								}
							})
							.then(res => {
								if (res.data.status == 200) {
									this.renderUserAddressList();
								} else {
									alert(res.data.msg);
								}
							});
				},
				// 设置默认地址
				setDefaultAddress(addressId) {
					var userInfo = this.userInfo;
					var serverUrl = app.serverUrl;
					axios.defaults.withCredentials = true;
					axios.post(
							serverUrl + '/address/setDefalut?userId=' + userInfo.id + "&addressId=" + addressId,
							{},
							{
								headers: {
									'headerUserId': userInfo.id,
									'headerUserToken': userInfo.userUniqueToken
								}
							})
							.then(res => {
								if (res.data.status == 200) {
									this.renderUserAddressList();
								} else {
									alert(res.data.msg);
								}
							});
				},
				// 选择地址，切换选中效果
				chooseAddress(choosedAddressId) {
					this.choosedAddressId = choosedAddressId;
					// this.defaultAddressId = choosedAddressId;
					// console.log("this.defaultAddressId:" + this.defaultAddressId);
					// console.log("this.choosedAddressId:" + this.choosedAddressId);

					// 确认地址动态改变
					this.renderConfirmAddress(choosedAddressId);
				},
				renderConfirmAddress(addressId) {
					// 提交订单的确认地址要跟着动态改变
					var addressList = this.addressList;
					var confirmAddress = null;
					for (var i = 0 ; i < addressList.length ; i ++) {
						var tmpAddress = addressList[i];
						if (tmpAddress.id == addressId) {
							confirmAddress = tmpAddress;
							break;
						}
					}
					// 赋值
					this.confirmAddress = confirmAddress;
				},
				updateCity() {
					for (var i in this.arr) {
						var obj = this.arr[i];
						if (obj.name == this.prov) {
							this.cityArr = obj.sub;
							break;
						}
					}
					this.city = this.cityArr[1].name;
				},
				updateDistrict() {
					for (var i in this.cityArr) {
						var obj = this.cityArr[i];
						if (obj.name == this.city) {
							this.districtArr = obj.sub;
							break;
						}
					}
					if (this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
						this.district = this.districtArr[1].name;
					} else {
						this.district = '';
					}
				},
				// 创建用户新地址
				saveNewAddressOrUpdate() {
					var receiver = this.receiver;
					if (receiver == null || receiver == '' || receiver == undefined) {
						alert("收货人姓名不能为空");
						return;
					}
					if (receiver.length > 12) {
						alert("收货人姓名不能太长");
						return;
					}

					var mobile = this.mobile;
					if (mobile == null || mobile == '' || mobile == undefined) {
						alert("手机不能为空");
						return;
					}
					if (mobile.length != 11) {
						alert("手机号长度为11位");
						return;
					}
					var checkMobile = app.checkMobile(mobile);
					if (!checkMobile) {
						alert('请输入有效的手机号码！');
						return;
					}

					var prov = this.prov;
					var city = this.city;
					var district = this.district;

					var detail = this.detail;
					if (detail == null || detail == '' || detail == undefined) {
						alert("详细地址不能为空");
						return;
					}

					// 添加新地址
					var userInfo = this.userInfo;
					var serverUrl = app.serverUrl;
					axios.defaults.withCredentials = true;

					var addressId = this.updatedAddressId;

					// 地址id为空，则新增地址，否则更新地址
					if (addressId == "" || addressId == undefined || addressId == null) {
						axios.post(
							serverUrl + '/address/add',
							{
								"userId": userInfo.id,
								"receiver": receiver,
								"mobile": mobile,
								"province": prov,
								"city": city,
								"district": district,
								"detail": detail
							},
							{
								headers: {
									'headerUserId': userInfo.id,
									'headerUserToken': userInfo.userUniqueToken
								}
							})
							.then(res => {
								if (res.data.status == 200) {
									this.closeAddressDialog();
									this.renderUserAddressList();

									// 设置更新地址的id为空
									this.updatedAddressId = "";
								} else if (res.data.status == 500) {
									alert(res.data.msg);
								}
							});
					} else {
						axios.post(
							serverUrl + '/address/update',
							{
								"addressId": addressId,
								"userId": userInfo.id,
								"receiver": receiver,
								"mobile": mobile,
								"province": prov,
								"city": city,
								"district": district,
								"detail": detail
							},
							{
								headers: {
									'headerUserId': userInfo.id,
									'headerUserToken': userInfo.userUniqueToken
								}
							})
							.then(res => {
								if (res.data.status == 200) {
									this.closeAddressDialog();
									this.renderUserAddressList();
								} else if (res.data.status == 500) {
									alert(res.data.msg);
								}
							});
					}

				},
				closeAddressDialog() {
					$(document.body).css("overflow","visible");
					$('.theme-login').removeClass("selected");
					$('.item-props-can').removeClass("selected");
					$('.theme-popover-mask').hide();
					$('.theme-popover').slideUp(200);

					// 设置更新地址的id为空
					this.updatedAddressId = "";
					this.flushAddressForm();
				},
				renderUserAddressList() {
					var userInfo = this.userInfo;
					// 请求后端获得最新数据
					var serverUrl = app.serverUrl;
					axios.defaults.withCredentials = true;
					axios.post(
							serverUrl + '/address/list?userId=' + userInfo.id, {},
							{
								headers: {
									'headerUserId': userInfo.id,
									'headerUserToken': userInfo.userUniqueToken
								}
							})
						.then(res => {
							if (res.data.status == 200) {
								var addressList = res.data.data;
								// console.log(addressList);
								this.addressList = addressList;

								// 设置默认应该选中的地址id
								this.setDefaultChoosedAddressId(addressList);

								// 清空地址内容
								this.flushAddressForm();
							} else if (res.data.status == 500) {
								alert(res.data.msg);
								console.log(res.data.msg);
							} else {
								alert(res.data.msg);
								console.log(res.data.msg);
							}
						});
				},
				flushAddressForm() {
					this.receiver = "";
					this.mobile = "";
					this.prov = "北京";
					this.city = "北京";
					this.district = "东城区";
					this.detail = "";
					this.updateCity();
					this.updateDistrict();
				},
				setDefaultChoosedAddressId(addressList) {
					var confirmAddress = {};
					for (var i = 0 ; i < addressList.length ; i ++) {
						var address = addressList[i];
						if (address.isDefault == 1) {
							this.defaultAddressId = address.id;
							confirmAddress = address;
							// 如果当前页面还没有选中的地址，则把默认地址作为选中地址
							var choosedAddressId = this.choosedAddressId;
							if (choosedAddressId == null || choosedAddressId == undefined || choosedAddressId == '') {
								this.choosedAddressId = address.id;
							}
							break;
						}
					}

					// 赋值
					this.confirmAddress = confirmAddress;
				},
				renderOrderInfoList() {
					var selectedItemSpecIds = app.getUrlParam("selectedItemSpecIds");
					if (selectedItemSpecIds == null || selectedItemSpecIds == '' || selectedItemSpecIds ==
						undefined) {
						app.goErrorPage();
					}

					var specIdsArray = new Array();
					specIdsArray = selectedItemSpecIds.split(",");

					var orderItemList = [];
					var totalAmount = 0;
					for (var i = 0; i < specIdsArray.length; i++) {
						var tmpSpecId = specIdsArray[i];
						var orderItem = this.getItemFromCookieShopcartList(tmpSpecId);
						orderItemList.push(orderItem);
						totalAmount += (orderItem.priceDiscount * orderItem.buyCounts);
					}
					// console.log(orderItemList);
					this.orderItemList = orderItemList;
					this.totalAmount = totalAmount;

					if (orderItemList.length <= 0) {
						alert("没有商品信息，或订单已经提交");
						window.location.href = "shopcart.html";
					}
				},
				getItemFromCookieShopcartList(specId) {
					var shopcartList = app.getShopcartList();

					if (shopcartList == null || shopcartList == undefined || shopcartList.length == 0) {
						app.goErrorPage();
					}

					for (var i = 0; i < shopcartList.length; i++) {
						var tmpSpecId = shopcartList[i].specId;
						if (tmpSpecId == specId) {
							return shopcartList[i];
						}
					}
				},
				// 打开商品详情页面
				showItemDetail(itemId) {
					window.open("item.html?itemId=" + itemId);
				},
				// 通过cookie判断用户是否登录
				judgeUserLoginStatus() {
					var userCookie = app.getCookie("user");
					if (userCookie != null && userCookie != undefined && userCookie != '') {
						var userInfoStr = decodeURIComponent(userCookie);
						// console.log(userInfo);
						if (userInfoStr != null && userInfoStr != undefined && userInfoStr != '') {
							var userInfo = JSON.parse(userInfoStr);
                            // 判断是否是一个对象
                            if ( typeof(userInfo)  == "object" ) {
                                this.userIsLogin = true;
                                // console.log(userInfo);
                                this.userInfo = userInfo;
                            } else {
                                this.userIsLogin = false;
                                this.userInfo = {};
                            }
						}
					} else {
						this.userIsLogin = false;
						this.userInfo = {};
					}
				}
			}
		});
	</script>
</body>

</html>