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

ADD file via upload

Browse Source
main
pjhmizn49 1 year ago
parent 2e4f6848e4
commit bc31e2e271
1 changed files with 296 additions and 0 deletions
Show Stats Download Patch File Download Diff File

296
flower_user_front/src/views/PayView.vue
Unescape View File

@ -0,0 +1,296 @@
<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 prop="flower_pic" label="商品" width="150">
<template slot-scope="scope">
<img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+scope.row.flower_pic)" style="height: 80px;width: 80px" alt="">
</template>
</el-table-column>
<el-table-column prop="flower_name" label="商品名" width="550">
<template slot-scope="scope">
<div style="font-size: 16px;font-weight: bold;margin-bottom: 5px">
{{scope.row.flower_name}}
</div>
<span style="margin-right: 5px">包装辅材：</span>
<span v-if="typeof(scope.row.pack)!=='object'">无</span>
<span v-else>
<el-tag style="margin-left: 5px" type="info" v-for="pack in scope.row.pack">{{pack.pack_name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column prop="single_price" label="单价(元)" width="150"></el-table-column>
<el-table-column prop="number" label="数量" width="150"></el-table-column>
<el-table-column label="小计">
<template slot-scope="scope">
<span style="color: red">￥ {{ (scope.row.single_price * scope.row.number).toFixed(2) }}</span>
</template>
</el-table-column>
</el-table>
<!-- 底部总计 -->
<div class="tableTop" style="margin-left: 100px">
<div>
<el-link :underline="false" @click="navTo('/cart')" style="font-weight: normal;margin-top: -15px">
<i class="el-icon-arrow-left"></i>返回购物车
</el-link>
</div>
<div style="font-size: 18px;font-weight: bold">
运费：<span style="color: red;font-size: 20px;margin-right: 30px">￥ {{this.trans_fee.toFixed(2)}} </span>
合计：<span style="color: red;font-size: 20px">￥{{(this.total_price + 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:[
// {
// cart_id:1,
// flower_id: 1,
// flower_name: '',
// flower_price: 1,
// flower_pic:'',
// number:1,
// single_price:1.00,
// pack:[{
// pack_id:1,
// pack_name:'',
// pack_price:1.00
// }],
// pack_total_price:1.00
// }
],
type:0, //订单类型：商品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
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;
let pack_t_price=0.00;
_this.selectedData.forEach(item =>{
if(typeof(item.pack)==="object")
item.pack.forEach(pack =>{
pack_t_price += pack.pack_price
})
item.pack_total_price = pack_t_price
});
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 + _this.trans_fee,
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('下单成功！')
// 将购物车中已下单的物品删除
_this.selectedData.forEach(item =>{
if(item.cart_id!==1)
_this.handleDelete(item.cart_id)
})
// 跳转到购物车
let timer = setInterval(() => {
_this.navTo('/cart')
}, 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('页面加载出错,请重试!')
}
},
handleDelete(val){
const _this = this;
axios({
method: 'post',
url: 'http://localhost:8181/cart/deletePer',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
cart_id:val
}
}).then(function (response){
if (response.data.code===200) {
//移除成功
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
},
}
}
</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