JIALDemo/target/classes/front/page/add-order.html

211 lines
9.1 KiB
HTML
Raw Normal View History

2023-12-06 23:19:44 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
<title>菩提阁</title>
<link rel="icon" href="./../images/favico.ico">
<!--不同屏幕尺寸根字体设置-->
<script src="./../js/base.js"></script>
<!--element-ui的样式-->
<link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
<!--引入vant样式-->
<link rel="stylesheet" href="../styles/vant.min.css"/>
<!-- 引入样式 -->
<link rel="stylesheet" href="../styles/index.css" />
<!--本页面内容的样式-->
<link rel="stylesheet" href="./../styles/add-order.css" />
</head>
<body>
<div id="add_order" class="app">
<div class="divHead">
<div class="divTitle">
<i class="el-icon-arrow-left" @click="goBack"></i>菩提阁
</div>
</div>
<div class="divContent">
<div class="divAddress">
<div @click="toAddressPage">
<div class="address">{{address.detail}}</div>
<div class="name">
<span>{{address.consignee}}{{address.sex === '1' ? '先生':'女士'}}</span>
<span>{{address.phone}}</span>
</div>
<i class="el-icon-arrow-right"></i>
</div>
<div class="divSplit"></div>
<div class="divFinishTime">预计{{finishTime}}送达</div>
</div>
<div class="order">
<div class="title">订单明细</div>
<div class="divSplit"></div>
<div class="itemList">
<div class="item" v-for="(item,index) in cartData" :key="index">
<el-image :src="imgPathConvert(item.image)">
<div slot="error" class="image-slot">
<img src="./../images/noImg.png"/>
</div>
</el-image>
<div class="desc">
<div class="name">{{item.name}}</div>
<div class="numPrice">
<span class="num">x{{item.number}}</span>
<div class="price">
<span class="spanMoney"></span>{{item.amount}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="note">
<div class="title">备注</div>
<van-field
v-model="note"
rows="2"
autosize
type="textarea"
maxlength="50"
placeholder="请输入您需要备注的信息"
show-word-limit
/>
</div>
</div>
<div class="divCart">
<div :class="{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}"></div>
<div :class="{divGoodsNum:1===1, moreGoods:cartData && cartData.length > 99}" v-if="cartData && cartData.length > 0">{{ goodsNum }}</div>
<div class="divNum">
<span></span>
<span>{{goodsPrice}}</span>
</div>
<div class="divPrice"></div>
<div :class="{btnSubmitActive: cartData && cartData.length > 0, btnSubmit:!cartData || cartData.length<1}" @click="goToPaySuccess">去支付</div>
</div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="../../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../backend/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./../js/vant.min.js"></script>
<script src="./../api/address.js"></script>
<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../js/common.js"></script>
<script src="./../api/main.js"></script>
<script src="./../api/order.js"></script>
<script>
new Vue({
el:"#add_order",
data(){
return {
address:{
phone:'',//手机号
consignee:'',//姓名
detail:'',//详细地址
sex:'1',
id:undefined
},
finishTime:'',//送达时间
cartData:[],
note:''//备注信息
}
},
computed:{
goodsNum(){
let num = 0
this.cartData.forEach(item=>{
num += item.number
})
if(num <99){
return num
}else{
return '99+'
}
},
goodsPrice(){
let price = 0
this.cartData.forEach(item=>{
price += (item.number * item.amount)
})
return price
}
},
created(){
this.initData()
},
mounted(){},
methods:{
goBack(){
history.go(-1)
},
initData(){
//获取默认的地址
this.defaultAddress()
//获取购物车的商品
this.getCartData()
},
//获取默认地址
async defaultAddress(){
const res = await getDefaultAddressApi()
if(res.code === 1){
this.address = res.data
this.getFinishTime()
}else{
window.requestAnimationFrame(()=>{
window.location.href = '/front/page/address-edit.html'
})
}
},
//获取送达时间
getFinishTime(){
let now = new Date()
let hour = now.getHours() +1
let minute = now.getMinutes()
if(hour.toString().length <2){
hour = '0' + hour
}
if(minute.toString().length <2){
minute = '0' + minute
}
this.finishTime = hour + ':' + minute
},
toAddressPage(){
window.requestAnimationFrame(()=>{
window.location.href = '/front/page/address.html'
})
},
//获取购物车数据
async getCartData(){
const res = await cartListApi({})
if(res.code === 1){
this.cartData = res.data
}else{
this.$notify({ type:'warning', message:res.msg});
}
},
async goToPaySuccess(){
const params = {
remark:this.note,
payMethod:1,
addressBookId:this.address.id
}
const res = await addOrderApi(params)
if(res.code === 1){
window.requestAnimationFrame(()=>{
window.location.replace('/front/page/pay-success.html')
})
}else{
this.$notify({ type:'warning', message:res.msg});
}
},
//网络图片路径转换
imgPathConvert(path){
return imgPath(path)
},
}
})
</script>
</body>
</html>