代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>202订单结算页</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/vue.js"></script>
<script src="./js/elementui.js"></script>
<link rel="stylesheet" href="./css/elementui.css">
</head>
<style>
.el-input {
width: 400px;
}
</style>
<body>
<div id="main7">
<div class="header">
<div class="minwidth">
<!-- <div style="width:1200px;overflow: hidden;margin:5px auto;">
<dl class="login">
<div class="top_left">
<dd><a href="#"><img src="images/header_top_1.jpg" alt=""/> 收藏本站</a></dd>
<dd>Hi！欢迎来到必购商城</dd>
<dd><a href="#">[登录]</a></dd>
<dd><a href="#">[注册]</a></dd>
</div>
<div class="top_right">
<dd><a href="#" ><img src="images/header_top_2.jpg" alt=""/>购物车</a></dd>
<dd><a href="402-00买家中心首页.html" target="_blank"><img src="images/header_top_3.jpg" alt=""/>会员中心</a></dd>
<dd><a href="#"><img src="images/header_top_4.jpg" alt=""/>帮助中心</a></dd>
<dd><a href="#"><img src="images/header_top_5.jpg" alt=""/>网站地图</a></dd>
</div>
</dl>
</div> -->
<div class="clear"></div>
<!-- <div class="topadv">
<div style="width: 1200px;margin: 0 auto;">
<img src="./images/header_bgad.png" alt="" class="header_img">
</div>
</div> -->
<div class="login_d" style="width:1200px; margin:0 auto;overflow: hidden;padding:10px 0">
<a href="101首页.html">
<div class="logo"></div>
</a>
<div class="search">
<!-- 搜索框修改start -->
<div id="selectdiv">
<el-input placeholder="请输入商品名称" v-model="searchinput" class="input-with-select"
@keyup.enter.native="searchBtn()">
<el-button slot="append" icon="el-icon-search" @click="searchBtn()"></el-button>
</el-input>
</div>
<!-- 搜索框修改end -->
<!-- <div class="search-triggers">
<ul class="switchable-nav" id="sear_ch">
<li class="J_SearchTab goods-search-tab selected" onClick="seachTag('seach_tag1')" id="seach_tag1">商品</li>
<li class="J_SearchTab tmall-search-tab"onClick="seachTag('seach_tag2')" id="seach_tag2">店铺</li>
<li class="J_SearchTab shop-search-tab" onClick="seachTag('seach_tag3')" id="seach_tag3">样品</li>
</ul>
<div class="search-tab-icon"><i><em></em><span></span></i></div>
</div>
<div class="i-search ld">
<ul id="shelper" class="hide"></ul>
<div class="form">
<input type="text" class="text" accesskey="s" id="key" autocomplete="off"
onkeydown="javascript:if(event.keyCode==13) search('key');">
<input type="button" value="搜索" class="button" onclick="search('key');return false;">
</div>
<div class="advanced_search"><a href="#">高级搜索</a></div>
</div>
<div class="hotwords"><strong>热门搜索：</strong><a href="#" target="_blank" style="color:#ff0000">新年盛典</a><a
href="#" target="_blank">圣诞活动</a><a href="#" target="_blank">家电满减</a><a href="#" target="_blank">车品满减</a>
</div> -->
</div>
<div class="tab">
<div>
<img src="images/index/make.png" alt="" class="make_img" />
</div>
<!--<div class="nav-mycart">-->
<!--<div><a href="#"><img src="images/mycart.jpg" alt=""/><span>我的购物车(<b>1</b>)</span></a></div>-->
<!--</div>-->
</div>
</div>
</div>
<div class="nav-menu minwidth">
<div class="nav-menu_1">
<ul>
<li style="width: 215px"><a a href="#">全部商品分类﹀</a></li>
<li><a href="101首页.html" class="act">首页</a></li>
<li><a href="#">批发馆</a></li>
<li><a href="#">供爆款</a></li>
<li><a href="#">品牌汇</a></li>
<li><a href="#">新资讯</a></li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="cartnew-title">
<h2 class="step2">我的购物车</h2>
<ul>
<li><span>查看购物车</span></li>
<li><span class="act">填写订单</span></li>
<li class="end"><span>付款到畅捷通</span></li>
</ul>
</div>
<table class="cartnew_table">
<tr>
<th colspan="2" class="th8">填写收货人信息</th>
</tr>
<tr>
<td class="th4">确认收货地址</td>
<td class="th8">
<div class="shr">
<!-- <div class="radio" v-if="showCreat==1">
<input name="" type="radio" value="" checked="checked" />
</div> -->
<div class="left" v-if="showCreat==1">
<b
v-if="myinfo.userSex!=undefined">{{myinfo.username}} ({{myinfo.userSex==0?'女士':'先生'}})</b>
{{myinfo.userPhone}}
{{myinfo.userAddress}}
</div>
<div class="left" v-if="showCreat==2">
姓名：<el-input placeholder="姓名" v-model="myinfo.username" clearable size="small"
style="width: 200px;"></el-input>
性别：<el-radio v-model="myinfo.userSex" :label="1" size="small">男</el-radio>
<el-radio v-model="myinfo.userSex" :label="0" size="small">女</el-radio>
电话：<el-input placeholder="电话" v-model="myinfo.userPhone" clearable size="small"
style="width: 200px;"></el-input>
地址：<el-input placeholder="地址" v-model="myinfo.userAddress" clearable size="small"
style="width: 200px;"></el-input>
</div>
<div class="right" v-if="showCreat==1" @click="addressInfo(1)">
<el-button type="primary" icon="el-icon-edit" circle size="small"></el-button>
</div>
<div class="right" v-if="showCreat==2" @click="addressInfo(2)">
<el-button type="success" icon="el-icon-check" circle size="small"></el-button>
</div>
</div>
<!-- <div class="shr">
<div class="radio">
<input name="" type="radio" value="" />
</div>
<div class="left"><b>宋秋</b> 北京海淀区五环到六环之间北京市海淀区北清路68号用友软件园</div>
<div class="right">【<a href="#">编辑</a>】</div>
</div>
<div class="shr">
<div class="radio">
<input name="" type="radio" value="" />
</div>
<div class="left"><b>宋秋</b> 北京西城区二环到三环北京市西城区裕民路裕中西里46号</div>
<div class="right">【<a href="#">编辑</a>】</div>
</div> -->
<!--<div class="shr">-->
<!--<div class="radio">-->
<!--<input name="" type="radio" value="" />-->
<!--</div>-->
<!--<div class="left">其它地址</div>-->
<!--</div>-->
</td>
</tr>
</table>
<table class="cartnew_table" style="margin-bottom:5px;">
<tr>
<th style="text-align:left; padding-left:20px;"> 商品清单</th>
</tr>
</table>
<table class="cartnew_table">
<tr>
<th class="th7_1">图片</th>
<!-- <th class="th2_1">货号</th> -->
<th class="th1_1">商品名称</th>
<th class="th3_1">价格/单位</th>
<th class="th4_1">数量</th>
<!-- <th class="th5_1">小计</th> -->
</tr>
<!-- <tr>
<td colspan="7" style="text-align: left;font-size: 14px;font-weight: bold">用友旗舰店</td>
</tr> -->
<tr v-for="(order,index) in orderInfo.bigoCarts">
<td style="display: flex; justify-content: center;">
<div class="cartnew-img"><img :src="order.bigoGoods.bigoGoodsPicture">
</div>
</td>
<!-- <td> 100001234456 </td> -->
<td>
<div class="cartnew-img">
<p><b>{{order.bigoGoods.bigoGoodsName}}</b><br>
<span>规格：{{order.bigoGoodsNorms}}</span>
</p>
</div>
</td>
<td>
<strong>
￥{{order.bigoGoods.bigoGoodsPrice}}
</strong>
</td>
<td><strong>{{order.bigoGoodsNum}}</strong></td>
</tr>
<tr>
<td colspan="6">
<p class="proNum" style="text-align: left; margin-left: 10px; font-size: larger;">
单号： <el-tag type="danger">{{orderInfo.bigoOrderNum}}</el-tag> </p>
<p class="tx_r font_14">总额：<b class="font_red"
style="font-size:20px;">￥{{orderInfo.bigoOrderTotal}}</b></p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<!-- <table class="cartnew_table">
<tr><td colspan="7" style="text-align: left;font-size: 14px;font-weight: bold">黄河旗舰店</td></tr>
<tr>
<td style="width: 100px;"><div class="cartnew-img"> <a href="#"><img src="images/p_l_02.png"></a> </div></td>
<td style="width: 180px;"> 100001234456 </td>
<td style="width: 498px;"><div class="cartnew-img">
<p><a class="a_e" href="#" ><b>2014韩版新品 皮裙半身裙子 一步裙大码女装打底裙修身显瘦包臀</b></a><br>
<span>颜色：灰 尺码：L</span></p>
</div></td>
<td style="width: 150px;">￥299.00 </td>
<td style="width: 100px;"><p class="amount_wrapper">
<input class="amount_cut" type="button">
<input value="1" type="text">
<input class="amount_add" type="button">
</p></td>
<td style="width: 150px;"><strong>￥299.00 </strong></td>
</tr>
<tr><td colspan="7" style="text-align: left;font-size: 12px;">
给卖家留言：<input type="text" style="width: 560px"/>
<div style="float: right">
<table border="0" style="border-collapse:collapse;border: 1px solid #ccc">
<tr><td>配送方式：</td>
<td style="text-align: left"><select name="" id=""><option>免邮</option><option>顺丰</option></select></td>
<td><span style="color: red">+￥0</span></td></tr>
<tr><td>店铺活动一：</td>
<td style="text-align: left">满100减10</td>
<td><span style="color: red">-￥0</span></td></tr>
<tr><td>优惠券：</td>
<td style="text-align: left"><select name="" id=""><option>店庆大优惠</option></select></td>
<td><span style="color: red">-￥0</span></td></tr>
<tr><td>礼品卡：</td>
<td style="text-align: left"><input type="text" value="LC1234567890"/></td>
<td><span style="color: red">-￥20</span></td></tr>
<tr><td colspan="3"> <p class="tx_r font_14">总额：<b class="font_red" style="font-size:20px;">￥599</b></p></td></tr>
</table>
</div>
</td>
</tr>
</table>
<div class="js">
<p>平台优惠一：选择已有的优惠券
<select name="">
<option>请选择</option>
</select></p>
<p>平台优惠二：选择已有的优惠券
<select name="">
<option>请选择（卡号）</option>
</select> 或者输入礼品卡卡号 <input name="textfield" type="text" id="textfield" size="40" /> <a href="#" class="btn_h"><span>确认</span></a></p>
<p>余额支付： <input name="textfield" type="text" id="textfield" size="20" /> <a href="#" class="btn_h"><span>查看我的余额</span></a> <span class="font_org">￥3490</span>-->
<!-- </p>
<p>积分抵扣： <input name="textfield" type="text" id="textfield" size="20" /> <span class="font_blue">￥200元
</span> <a href="#" class="btn_h"><span>查询我的积分</span></a> <span class="font_org">2000</span>
</p>
<p>商品总金额：<b>12345</b> + 运费：12 + 发票税费：20 + 保险费：10 - 优惠券：100 - 礼品卡：50 - 积分抵扣：20 - 余额支付：300</p>
<p class="tx_r font_14">应付总额：<b class="font_red" style="font-size:20px;">￥1499</b></p>
<p class="tx_r">赠送积分：1499</p>
</div>
<div class="hr_10"></div>
<div class="cartnew-submit"> <a class="btn_continue" href="#">返回购物车</a> <a class="btn_account">确认提交</a> </div>
</div> -->
<div class="cartnew-submit"> <a class="btn_continue" href="javascript:void(0)" @click="ToBack">返回购物车</a>
<a class="btn_account" href="javascript:void(0)" @click="ToBuy">确认提交</a>
</div>
</div>
<div class="hr_20"></div>
<div class="help">
<div class="wrapper">
<div class="helpinfo">
<ul>
<li>
<dl class="li-1">
<dt>新手指南</dt>
<dd><a href="#" target="_blank">新人购物指南</a></dd>
<dd><a href="#" target="_blank">商户服务平台</a></dd>
<dd><a href="#" target="_blank">黄河交易规则</a></dd>
</dl>
</li>
<li>
<dl class="li-2">
<dt>诚信保证计划</dt>
<dd><a href="#" target="_blank">先行赔付</a></dd>
<dd><a href="#" target="_blank">7天包退</a></dd>
<dd><a href="#" target="_blank">诚保代充</a></dd>
</dl>
</li>
<li>
<dl class="li-3">
<dt>支付方式</dt>
<dd><a href="#" target="_blank">一点通支付</a></dd>
<dd><a href="#" target="_blank">信用卡支付</a></dd>
<dd><a href="#" target="_blank">借记卡支付</a></dd>
</dl>
</li>
<li>
<dl class="li-4">
<dt>售后服务</dt>
<dd><a href="#" target="_blank">联系客服</a></dd>
<dd><a href="#" target="_blank">消费者维权中心</a></dd>
<dd><a href="#" target="_blank">快捷支付</a></dd>
</dl>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<!--/*邮件订阅*/-->
<div class="nav_d">
<div class="wrapper">
<div class="e-mial">
<img src="images/index/email.png" alt="" />
<span>邮件订阅</span>
<input type="text" name="email" class="input_email" />
<a href="#" style="margin: 0px 2px;"><img src="images/index/dingyue.png" alt="" /></a>
<a href="#" style="margin: 0px 2px;"><img src="images/index/tuiding.png" alt="" /></a>
</div>
</div>
</div>
<!--/*底部导航*/-->
<div class="nav_d">
<div class="wrapper">
<a href="#">公司简介</a>|
<a href="#">合作意向</a>|
<a href="#">联系我们</a>|
<a href="#">招标信息</a>|
<a href="#">房地产</a>|
<a href="#">休闲农业</a>|
<a href="#">环保能源</a>
</div>
</div>
<div class="nav_d">
<div class="wrapper">
友情链接：
<a href="#">黄河在线电商</a>|
<a href="#">淘宝</a>|
<a href="#">京东</a>|
<a href="#">当当</a>|
<a href="#">亚马逊</a>|
<a href="#">腾讯</a>|
<a href="#">阿里巴巴</a>|
<a href="#">百度</a>|
<a href="#">人人网</a>
</div>
</div>
<!--/*版权信息*/-->
<div class="hr_20"></div>
<div class="footer">
<p>Copyright ©黄河在线商城. All Rights Reserved. 粤ICP证080047号</p>
</div>
<div style="text-align: center;margin: 5px auto 10px;">
<img src="images/copyright.png" alt="">
</div>
<!--backtoTop1-->
<!--兼容所有现代浏览器同时包括 ie6/7/8/9 （ie6会有一点点抖动）-->
<div class="backtoTop" id="backToTop1">
<div id="backToTop-up" class="up-back"><i class="fa fa-angle-up"></i></div>
<div id="backToTop-down" class="down-back"><i class="fa fa-angle-down"></i></div>
</div>
</div>
<script type=text/javascript src="./js/axios.js"></script>
<script type=text/javascript src="api.js"></script>
<script type="application/javascript">
new Vue({
el: "#main7",
data() {
return {
searchinput: '',
showCreat: 1,
name: '',
phone: '',
address: '',
orderInfo: {},
myinfo: {
userniname: "",
username: "",
userPhone: "",
userAddress: "",
userSex: 0
},
orderflag: []
};
},
mounted() {
//获取订单信息
const loading = this.$loading({
lock: true,
text: '正在生成订单',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
Promise.all([getOrderInfo(window.localStorage.getItem("userID")).then(res => {
// console.log(res.data);
this.orderInfo = res.data.data
this.orderInfo.bigoCarts = this.orderInfo.bigoCarts.map(e => {
//处理图片
let GoodsPicture = e.bigoGoods.bigoGoodsPicture.split(',')[0]
e.bigoGoods.bigoGoodsPicture = baseUrl + GoodsPicture
return { ...e }
})
}),
//获取个人信息
accountinfo(window.localStorage.getItem("userID")).then(res1 => {
// console.log(res1.data);
this.myinfo.userniname = res1.data.data.bigoUsername
this.myinfo.username = res1.data.data.bigoUserNiname
this.myinfo.userPhone = res1.data.data.bigoUserPhone
this.myinfo.userAddress = res1.data.data.bigoUserAddress
this.myinfo.userSex = res1.data.data.bigoUserSex
})]).then(e => {
loading.close();
})
},
methods: {
//搜索
searchBtn() {
if (this.searchinput.length > 0) {
window.location.href = "./115商品搜索页.html?goodsname=" + this.searchinput
} else {
this.$message({
message: '搜索不能为空',
type: 'warning'
});
}
},
addressInfo(val) {
if (val == 1) {
this.showCreat = 2;
} else if (val == 2) {
let rex = new RegExp("^[ ]+$")
if (this.myinfo.username == undefined || this.myinfo.userPhone == undefined || this.myinfo.userAddress == undefined || this.myinfo.userSex == undefined) {
this.$message({
message: '请添加收货信息,在点击修改！',
type: 'warning'
});
return
} else if (this.myinfo.username == "" || this.myinfo.userPhone == "" || this.myinfo.userAddress == "" || this.myinfo.userSex.toString() == "") {
this.$message({
message: '个人信息不能为空！',
type: 'warning'
});
} else if (rex.test(this.myinfo.username) || rex.test(this.myinfo.userPhone) || rex.test(this.myinfo.userAddress) || rex.test(this.myinfo.userSex)) {
this.$message({
message: '个人信息不能为空！',
type: 'warning'
});
return
} else {
//修改地址信息
accountinfoPut({
"bigoUserid": window.localStorage.getItem("userID"),
"bigoUsername": this.myinfo.userniname,
"bigoUserPhone": this.myinfo.userPhone,
"bigoUserPassword": "",
"bigoUserAddress": this.myinfo.userAddress,
"bigoUserSex": this.myinfo.userSex,
"bigoUserNiname": this.myinfo.username
}).then(res2 => {
console.log(res2);
if (res2.data.code == 200) {
this.$message({
message: '修改成功',
type: 'success'
});
} else {
this.$message({
message: '修改失败!',
type: 'error'
});
return
}
})
this.showCreat = 1;
}
}
},
ToBuy() {
console.log(this.myinfo.bigoUserAddress, this.myinfo.bigoUserPhone);
if (this.myinfo.username == undefined || this.myinfo.userPhone == undefined || this.myinfo.userAddress == undefined || this.myinfo.userSex == undefined) {
this.$message({
message: '请添加收货地址！',
type: 'warning'
});
return
} else {
const loading = this.$loading({
lock: true,
text: '正在准备结算',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
console.log(this.orderInfo);
//将修改购物车的id放入数组中
let cartlist = []
for (let val of this.orderInfo.bigoCarts) {
cartlist.push({
"bigoUserid": val.bigoUserid,
"bigoGoodsid": val.bigoGoodsid,
"bigoGoodsNorms": val.bigoGoodsNorms,
"bigoGoodsNum": val.bigoGoodsNum
})
}
this.orderflag = []
Promise.all([
//修改订单状态
updateOrderStatus(this.orderInfo.bigoOrderNum).then(res3 => {
console.log(res3.data);
if (res3.data.code == 200) {
this.orderflag.push(1)
} else {
this.orderflag.push(2)
}
}),//修改购物车状态
updateCartState(cartlist).then(res4 => {
console.log(res4.data);
if (res4.data.code == 200) {
this.orderflag.push(1)
} else {
this.orderflag.push(2)
}
})]).then(e => {
//判断修改状态是否执行成功
let result = this.orderflag.every(e => {
return e === 1;
});
if (result) {
loading.close();
window.location.replace("./203提交订单页.html")
} else {
loading.close();
this.$message({
message: '请求结算失败,请联系管理员',
type: 'error'
});
}
})
}
},
ToBack() {
window.location.replace("./201购物车.html")
}
}
}
)
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
