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 63a3c7020c
commit 2e4f6848e4
1 changed files with 755 additions and 0 deletions
Show Stats Download Patch File Download Diff File

755
flower_user_front/src/views/OrderView.vue
Unescape View File

@ -0,0 +1,755 @@
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick" style="margin: 30px 30px">
<el-tab-pane label="商品订单" name="1">
<el-table
ref="multipleTable1"
:data="tableData_flower"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column prop="order_id" label="订单号" width="100"></el-table-column>
<el-table-column prop="flower_pic" label="商品" width="120">
<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="300">
<template slot-scope="scope">
<div style="margin-bottom: 5px">
{{scope.row.flower_name}}
</div>
<span style="margin-right: 5px">包装辅材：</span>
<span v-if="scope.row.packs===null">无</span>
<span v-else>
<el-tag style="margin-left: 5px" type="info" v-for="pack in scope.row.packs">{{pack.pack_name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column prop="flower_price" label="单价(元)" width="100">
<template slot-scope="scope">
{{scope.row.flower_price.toFixed(2)}}
</template>
</el-table-column>
<el-table-column prop="order_state" label="交易状态" width="100">
<template slot-scope="scope">
<span v-if="scope.row.order_state===0">待支付</span>
<span v-else-if="scope.row.order_state===1">待发货</span>
<span v-else-if="scope.row.order_state===2">待收货</span>
<span v-else-if="scope.row.order_state===3">已收货</span>
<span v-else-if="scope.row.order_state===4">待退款</span>
<span v-else-if="scope.row.order_state===5">已退款</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleOpen(scope.row)" type="primary" size="mini" plain style="margin-right:5px;">查看订单</el-button>
<el-button @click="handleDelete(scope.row)" type="danger" size="mini" plain style="margin-right:10px;">删除</el-button>
<span v-if="scope.row.order_state===0">
<el-button @click="pay(scope.row)" :underline="false" type="text">支付</el-button>
</span>
<span v-else-if="scope.row.order_state===1">等待商家发货</span>
<span v-else-if="scope.row.order_state===2">
<el-button @click="receive(scope.row)" :underline="false" type="text">确认收货</el-button>
</span>
<span v-else-if="scope.row.order_state===3">
<el-button @click="writeComment(scope.row)" :underline="false" type="text">评价</el-button>
<el-button @click="refund(scope.row)" :underline="false" type="text">退款</el-button>
</span>
<span v-else-if="scope.row.order_state===4">等待商家退款</span>
<span v-else-if="scope.row.order_state===5">商家已退款</span>
</template>
</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-dialog title="花卉订单详情" :visible.sync="flowerDialogVisible">
<el-form align="left" ref="FlowerDialogForm" :model="FlowerDialogForm" label-width="150px">
<el-form-item label="订单号：" prop="order_id">
{{this.FlowerDialogForm.order_id}}
</el-form-item>
<el-form-item label="用户账号：" prop="user_id">
{{this.FlowerDialogForm.user_id}}
</el-form-item>
<el-form-item label="配送方式：" prop="order_method">
<span v-show="this.FlowerDialogForm.order_method===1">送货上门</span>
<span v-show="this.FlowerDialogForm.order_method===0">到店自取</span>
</el-form-item>
<el-form-item label="订单状态：" prop="order_state">
<span v-show="this.FlowerDialogForm.order_state===0">待支付</span>
<span v-show="this.FlowerDialogForm.order_state===1">待发货</span>
<span v-show="this.FlowerDialogForm.order_state===2">待收货</span>
<span v-show="this.FlowerDialogForm.order_state===3">已收货</span>
<span v-show="this.FlowerDialogForm.order_state===4">待退款</span>
<span v-show="this.FlowerDialogForm.order_state===5">已退款</span>
</el-form-item>
<el-form-item label="订单地址：" prop="order_address">
{{this.FlowerDialogForm.order_address}}
</el-form-item>
<el-form-item label="联系电话：" prop="order_phone">
{{this.FlowerDialogForm.order_phone}}
</el-form-item>
<el-form-item label="快递单号：" prop="order_delivery_number">
{{this.FlowerDialogForm.order_delivery_number}}
</el-form-item>
<el-form-item label="下单时间：" prop="order_time">
{{this.FlowerDialogForm.order_time}}
</el-form-item>
<el-form-item label="支付时间：" prop="order_time_pay">
{{this.FlowerDialogForm.order_time_pay}}
</el-form-item>
<el-form-item label="发货时间：" prop="order_time_delivery">
{{this.FlowerDialogForm.order_time_delivery}}
</el-form-item>
<el-form-item label="收货时间：" prop="order_time_receive">
<span>{{this.FlowerDialogForm.order_time_receive}}</span>
</el-form-item>
<el-table :data="FlowerDialogForm.flowers" stripe border :height="theHeight" style="width:100%">
<el-table-column type="expand">
<template slot-scope="scope">
<el-form label-position="left" inline class="demo-table-expand">
<span v-for="pack in scope.row.packs">
<el-form-item label="包装辅料名称：" style="display:block">
<span>{{ pack.pack_name }}</span>
</el-form-item>
<el-form-item label="包装辅料单价(元)：" style="display:block;margin-top: -20px">
<span>{{ pack.pack_price.toFixed(2) }}</span>
</el-form-item>
</span>
</el-form>
</template>
</el-table-column>
<el-table-column prop="flower_id" label="花卉id" width="150"></el-table-column>
<el-table-column prop="flower_name" label="花卉名称"></el-table-column>
<el-table-column prop="flower_price" sortable label="花卉单价"></el-table-column>
<el-table-column prop="number" label="数量"></el-table-column>
<el-table-column prop="sum" label="小计(元)">
<template slot-scope="scope">
<div v-if="scope.row.packs!==null">{{scope.row.sum.toFixed(2)}}</div>
<div v-if="scope.row.packs===null">{{scope.row.sum}}</div>
</template>
</el-table-column>
</el-table>
<el-form-item label="运费(元)：" prop="trans_fee">
{{this.FlowerDialogForm.trans_fee}}
</el-form-item>
<el-form-item label="订单总金额(元)：" prop="order_price">
{{this.FlowerDialogForm.order_price}}
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">关 闭</el-button>
</div>
</el-dialog>
<!--评论表单 -->
<el-dialog title="评论" :visible.sync="commentDialogVisible" :before-close="handleCommentClose">
<el-form align="left" ref="commentDialogForm" :rules="rules" :model="comment" label-width="130px" style="margin-right: 150px">
<el-form-item label="商品名称" prop="flower_name">
{{comment.flower_name}}
</el-form-item>
<el-form-item label="评论内容" prop="comment_content">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入评论内容"
v-model="comment.comment_content">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCommentClose">取 消</el-button>
<el-button type="primary" @click="submitComment">确 定</el-button>
</div>
</el-dialog>
</el-tab-pane>
<el-tab-pane label="换赠订单" name="2">
<el-table
ref="multipleTable2"
:data="tableData_gift"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="order_id" label="订单号" width="100"></el-table-column>
<el-table-column prop="gift_pic" label="商品" width="120">
<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="150"></el-table-column>
<el-table-column prop="gift_point" label="积分" width="100"></el-table-column>
<el-table-column prop="order_state" label="交易状态" width="100">
<template slot-scope="scope">
<span v-if="scope.row.order_state===0">待支付</span>
<span v-else-if="scope.row.order_state===1">待发货</span>
<span v-else-if="scope.row.order_state===2">待收货</span>
<span v-else-if="scope.row.order_state===3">已收货</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleOpen(scope.row)" type="primary" size="mini" plain style="margin-right:5px;">查看订单</el-button>
<el-button @click="handleDelete(scope.row)" type="danger" size="mini" plain style="margin-right:10px;">删除</el-button>
<span v-if="scope.row.order_state===0">
<el-button @click="pay(scope.row)" :underline="false" type="text">支付</el-button>
</span>
<span v-else-if="scope.row.order_state===1">等待商家发货</span>
<span v-else-if="scope.row.order_state===2">
<el-button @click="receive(scope.row)" :underline="false" type="text">确认收货</el-button>
</span>
<span v-else-if="scope.row.order_state===3">已收货</span>
</template>
</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-dialog title="赠品订单详情" :visible.sync="giftDialogVisible">
<el-form align="left" ref="GiftDialogForm" :model="GiftDialogForm" label-width="150px">
<el-form-item label="订单号：" prop="order_id">
{{this.GiftDialogForm.order_id}}
</el-form-item>
<el-form-item label="用户账号：" prop="user_id">
{{this.GiftDialogForm.user_id}}
</el-form-item>
<el-form-item label="配送方式：" prop="order_method">
<span v-show="this.GiftDialogForm.order_method===1">送货上门</span>
<span v-show="this.GiftDialogForm.order_method===0">到店自取</span>
</el-form-item>
<el-form-item label="订单状态：" prop="order_state">
<span v-show="this.GiftDialogForm.order_state===0">待支付</span>
<span v-show="this.GiftDialogForm.order_state===1">待发货</span>
<span v-show="this.GiftDialogForm.order_state===2">待收货</span>
<span v-show="this.GiftDialogForm.order_state===3">已收货</span>
<span v-show="this.GiftDialogForm.order_state===4">待退款</span>
<span v-show="this.GiftDialogForm.order_state===5">已退款</span>
</el-form-item>
<el-form-item label="订单地址：" prop="order_address">
{{this.GiftDialogForm.order_address}}
</el-form-item>
<el-form-item label="联系电话：" prop="order_phone">
{{this.GiftDialogForm.order_phone}}
</el-form-item>
<el-form-item label="快递单号：" prop="order_delivery_number">
{{this.GiftDialogForm.order_delivery_number}}
</el-form-item>
<el-form-item label="下单时间：" prop="order_time">
{{this.GiftDialogForm.order_time}}
</el-form-item>
<el-form-item label="支付时间：" prop="order_time_pay">
{{this.GiftDialogForm.order_time_pay}}
</el-form-item>
<el-form-item label="发货时间：" prop="order_time_delivery">
{{this.GiftDialogForm.order_time_delivery}}
</el-form-item>
<el-form-item label="收货时间：" prop="order_time_receive">
{{this.GiftDialogForm.order_time_receive}}
</el-form-item>
<el-table
:data="GiftDialogForm.gifts" stripe border :height="theHeight" style="width:100%">
<el-table-column prop="gift_id" label="赠品号" width="150"></el-table-column>
<el-table-column prop="gift_name" label="赠品名"></el-table-column>
<el-table-column prop="gift_point" sortable label="赠品兑换积分"></el-table-column>
<el-table-column prop="number" label="数量"></el-table-column>
<el-table-column prop="sum" label="小计"></el-table-column>
</el-table>
<el-form-item label="运费(元)：" prop="trans_fee">
{{this.GiftDialogForm.trans_fee}}
</el-form-item>
<el-form-item label="总消耗积分：" prop="order_price">
{{this.GiftDialogForm.order_price}}
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">关 闭</el-button>
</div>
</el-dialog>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Cookie from "js-cookie";
export default {
data(){
return{
activeName: '1',
tableData_flower:[{}],
tableData_gift:[{}],
//多选
multipleSelection: [],
//订单详情表单
FlowerDialogForm:[{
order_id: 1,
user_id: 1,
order_type: 1,
order_price: 1.00,
order_delivery_number:'',
order_time: '',
order_time_pay:'',
order_time_delivery: '',
order_time_receive: '',
order_address:'',
order_phone:'',
order_state: 1,
order_method: 1,
trans_fee:1.00,
order_discount_name:'',
order_discount_num:1,
flowers:[{
flower_id:1,
flower_name:'',
flower_price:0.00,
number:1,
sum:1,
packs:[{
pack_id:1,
pack_name:'',
pack_price:0.00
}]
}]
}],
theHeight:'',
GiftDialogForm:[{
order_id: 1,
user_id: 1,
order_type: 1,
order_price: 1.00,
order_delivery_number:'',
order_time: '',
order_time_pay:'',
order_time_delivery: '',
order_time_receive: '',
order_address:'',
order_phone:'',
order_state: 1,
order_method: 1,
trans_fee:1.00,
gifts:[{
gift_id:1,
gift_name:'',
gift_point:1,
number:1,
sum:1
}]
}],
//表单可见控制
flowerDialogVisible:false, //花卉订单详情
giftDialogVisible:false, //赠品订单详情
//评论相关
commentDialogVisible:false, //评论表单
comment: [{
flower_id:1,
flower_name:'',
comment_content:'',
comment_time:''
}],
//表单校验
rules:{
comment_content:[
{ required:true, trigger:'blur', message:'请输入评论内容'}
]
},
//分页相关
currentPage:1,
pageSize:4,
page_number:1,//总页数
total:10,//总条数
}
},
created() {
this.getFlowerOrder();
},
methods: {
handleClick(tab) {
this.currentPage=1
if(tab.name==="1"){ //商品订单
this.getFlowerOrder()
}
else if(tab.name==="2"){ //换赠订单
this.getGiftOrder()
}
},
getFlowerOrder(){
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/order/userListFlower',
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.tableData_flower=response.data.data.orders;
_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('页面加载出错,请重试!')
}
},
getGiftOrder(){
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/order/userListGift',
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.tableData_gift=response.data.data.orders;
_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('页面加载出错,请重试!')
}
},
//分页
handleCurrentChange(page) {
this.currentPage = page;
if(this.activeName==="1")
this.getFlowerOrder()
else if(this.activeName==="2")
this.getFlowerOrder()
},
//多选
handleSelectionChange(val) {
this.multipleSelection = val;
},
//订单详情
handleOpen(row){
const _this=this;
if(row.order_type === 0){ //花卉订单详情
this.flowerDialogVisible = true;
try {
axios({
method: 'post',
url: 'http://localhost:8181/order/detail/flower',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
order_id: row.order_id
}
}).then(function (response){
if (response.data.code===200){
_this.FlowerDialogForm=response.data.data;
}
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('页面加载出错,请重试!')
}
}
else if(row.order_type === 1){ //赠品订单详情
this.giftDialogVisible = true;
this.GiftDialogForm.order_id = row.order_id
try {
axios({
method: 'post',
url: 'http://localhost:8181/order/detail/gift',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
order_id: row.order_id
}
}).then(function (response){
if (response.data.code===200){
_this.GiftDialogForm=response.data.data;
}
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('页面加载出错,请重试!')
}
}
},
handleClose(){
this.FlowerDialogForm=[];
this.GiftDialogForm=[];
this.flowerDialogVisible = false;
this.giftDialogVisible = false;
},
//订单删除
handleDelete(row){
const _this = this;
this.$confirm('此操作将删除该订单信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认删除
axios({
method: 'post',
url: 'http://localhost:8181/order/userDelete',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
order_id:row.order_id
}
}).then(function (response){
if (response.data.code===200) {
if(_this.activeName==="1") //商品订单
_this.getFlowerOrder()
else if(_this.activeName==="2") //换赠订单
_this.getGiftOrder()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
this.$message({type: 'success', message: '删除成功!'});
}).catch(() => {
this.$message({type: 'info', message: '已取消删除'});
});
},
//支付
pay(row){
const _this = this;
this.$confirm('确认支付该订单?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios({
method: 'post',
url: 'http://localhost:8181/order/modify',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
order_id: row.order_id,
state:1, //支付
order_delivery_number:''
}
}).then(function (response){
if (response.data.code===200){
if(_this.activeName==="1") //商品订单
_this.getFlowerOrder()
else if(_this.activeName==="2") //换赠订单
_this.getGiftOrder()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
this.$message({type: 'success', message: '支付成功!'});
}).catch(() => {
this.$message({type: 'info', message: '已取消支付'});
});
},
//收货
receive(row){
const _this = this;
this.$confirm('是否确认收货?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios({
method: 'post',
url: 'http://localhost:8181/order/modify',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
order_id: row.order_id,
state:3, //确认收货
order_delivery_number:''
}
}).then(function (response){
if (response.data.code===200){
if(_this.activeName==="1") //商品订单
_this.getFlowerOrder()
else if(_this.activeName==="2") //换赠订单
_this.getGiftOrder()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
this.$message({type: 'success', message: '收货成功!'});
}).catch(() => {
this.$message({type: 'info', message: '已取消收货'});
});
},
//退款
refund(row){
const _this = this;
this.$confirm('确认申请退款?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios({
method: 'post',
url: 'http://localhost:8181/order/modify',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
order_id: row.order_id,
state:4, //申请退款
order_delivery_number:''
}
}).then(function (response){
if (response.data.code===200){
if(_this.activeName==="1") //商品订单
_this.getFlowerOrder()
else if(_this.activeName==="2") //换赠订单
_this.getGiftOrder()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
this.$message({type: 'success', message: '申请退款成功，请耐心等待商家确认!'});
}).catch(() => {
this.$message({type: 'info', message: '已取消申请退款'});
});
},
//评论
writeComment(row){
this.commentDialogVisible=true;
this.comment.flower_id=row.flower_id;
this.comment.flower_name=row.flower_name;
},
submitComment(){
const _this=this;
this.$refs.commentDialogForm.validate((valid) =>{
if(valid){
axios({
method: 'post',
url: 'http://localhost:8181/comment/add',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
flower_id:_this.comment.flower_id,
comment_content:_this.comment.comment_content
}
}).then(function (response){
if (response.data.code===200) {
_this.$message.success('评论成功!')
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
}
})
this.handleCommentClose()
},
handleCommentClose(){
this.commentDialogVisible=false;
this.comment=[]
}
}
}
</script>
Write Preview
Loading…
Cancel
Save