pjhmizn49
/
softwareEngineeringPractice
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ADD file via upload

Browse Source
main
pjhmizn49 1 year ago
parent 02375d0154
commit 98dd540ad8
1 changed files with 241 additions and 0 deletions
Show Stats Download Patch File Download Diff File

241
flower_user_front/src/views/GiftPayView.vue
Unescape View File

@ -0,0 +1,241 @@
<template>
<div>
<!-- 收货方式选择 -->
<div style="width: 1300px;margin-left: 100px;margin-bottom:30px; border: #e4e7ed 2px solid">
<el-tabs v-model="method" @tab-click="handleTabClick" style="margin: 20px 50px">
<el-tab-pane label="到店自取" name="0">
<div style="margin: 10px auto;font-size: 18px;font-weight: bold">
本店地址：山东省 济南市 历城区 港沟街道舜华路1400号山东大学软件园校区 好花花店
</div>
<div style="margin: 10px auto;font-size: 16px;font-weight: bold">
请于下单时间<span style="color: red">1小时后</span>到店领取
</div>
</el-tab-pane>
<el-tab-pane label="送货上门" name="1">
<el-table ref="singleTable"
:data="addressData"
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column property="address_name" label="收件人" width="120"></el-table-column>
<el-table-column property="address_sheng" label="地址" width="80"></el-table-column>
<el-table-column property="address_shi" label="" width="80"></el-table-column>
<el-table-column property="address_qu" label="" width="80"></el-table-column>
<el-table-column property="address_detail" label="详细地址" width="480"></el-table-column>
<el-table-column property="address_phone" label="联系电话"></el-table-column>
</el-table>
<el-pagination
background
:current-page="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="total"
:page-count="page_number"
style="margin-top: 30px"
@current-change="handleCurrentChange">
</el-pagination>
</el-tab-pane>
</el-tabs>
</div>
<!-- 下单商品 -->
<el-table
ref="Table"
:data="selectedData"
style="width: 100%;margin-left: 100px">
<el-table-column width="100"></el-table-column>
<el-table-column prop="gift_pic" label="商品" width="200">
<template slot-scope="scope">
<img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+scope.row.gift_pic)" style="height: 80px;width: 80px" alt="">
</template>
</el-table-column>
<el-table-column prop="gift_name" label="商品名" width="400">
<template slot-scope="scope">
<div style="font-size: 16px;font-weight: bold;margin-bottom: 5px">
{{scope.row.gift_name}}
</div>
</template>
</el-table-column>
<el-table-column prop="number" label="数量" width="150"></el-table-column>
<el-table-column prop="gift_point" label="积分">
<template slot-scope="scope">
<div style="color: red">
{{scope.row.gift_point}}
</div>
</template>
</el-table-column>
</el-table>
<!-- 底部总计 -->
<div style="margin-top: 50px;text-align: right;margin-right: 200px">
<div style="font-size: 18px;font-weight: bold">
运费：<span style="color: red;font-size: 20px;margin-right: 30px">￥ {{this.trans_fee.toFixed(2)}} </span>
<button @click="submitOrder" class="order-button">提交订单</button>
</div>
</div>
</div>
</template>
<script>
import Cookie from "js-cookie";
export default {
data(){
return{
selectedData:[
// {
// gift_id: 1,
// gift_name: '',
// gift_point: 1,
// gift_pic:'',
// number:1,
// }
],
type:1, //订单类型：商品0 换赠1
total_price:1.00,
method:"0",
trans_fee:0.00,
//地址选择
addressData:[
// {
// address_id:1,
// address_name:'',
// address_sheng:'',
// address_shi:'',
// address_qu:'',
// address_detail:'',
// address_phone:''
// }
],
currentAddress: {}, //选中的地址
//分页相关
currentPage:1,
pageSize:5,
page_number:1,//总页数
total:10,//总条数
}
},
created() {
this.selectedData = this.$route.params.data
console.log(this.selectedData)
this.type = this.$route.params.type
this.total_price = this.$route.params.total_price
this.getAddress()
},
methods: {
getAddress(){
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/address/list',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
page:_this.currentPage,
page_size:_this.pageSize
}
}).then(function (response){
if (response.data.code===200){
//查询所有信息成功
_this.addressData=response.data.data.addresses;
_this.page_number=response.data.data.page_number;
_this.total=response.data.data.total;
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
}catch (error){
this.$message.warning('页面加载出错,请重试!')
}
},
handleTabClick(tab){
if(tab.name==="0")//到店自取运费为0
this.trans_fee = 0.00
else if(tab.name==="1")//送货上门运费
this.trans_fee = 20.00
this.method = tab.name
},
navTo(url){
location.href = url
},
//地址选择
handleCurrentChange(val) {
this.currentAddress = val;
},
submitOrder(){ //提交订单
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/order/add',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
order_type:_this.type,
order_price:_this.total_price,
order_address:_this.currentAddress.address_sheng+_this.currentAddress.address_shi+ _this.currentAddress.address_qu+_this.currentAddress.address_detail,
order_phone:_this.currentAddress.address_phone,
order_method:_this.method,
trans_fee:_this.trans_fee,
order_discount:null,
shoppingData:_this.selectedData
}
}).then(function (response){
if (response.data.code===200){
_this.$message.success('下单成功！')
// 跳转到购物车
let timer = setInterval(() => {
_this.navTo('/gift')
}, 1500);
// 离开当前页面时销毁定时器
_this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
timer = null;
})
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
}catch (error){
this.$message.warning('页面加载出错,请重试!')
}
}
}
}
</script>
<style>
.el-tabs__item{
height: 15px;
color: #505050 !important;
text-align: center;
font-size: 16px !important;
}
.is-active{
color: #000 !important;
}
.el-tabs__active-bar{
background-color: red !important;
}
.el-link--inner:hover{
color: red;
}
</style>
Write Preview
Loading…
Cancel
Save