978 lines
31 KiB
HTML
978 lines
31 KiB
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> |