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 41c5069f05
commit 61a2ab4ce9
1 changed files with 551 additions and 0 deletions
Show Stats Download Patch File Download Diff File

551
flower_user_front/src/views/CartView.vue
Unescape View File

@ -0,0 +1,551 @@
<template>
<div>
<el-row style="margin: 30px auto">
<el-col :span="8">
<div style="">
<el-input @input="handleSearch" suffix-icon="el-icon-search" style="width: 300px" placeholder="请输入搜索商品关键字" v-model="input" clearable></el-input>
<el-button @click="handleDeleteMul" type="danger" style="margin-left: 30px">移除</el-button>
</div>
</el-col>
<el-col :span="16">
<div style="font-size: 18px;font-weight: bold">
<span style="margin-right: 30px">已选商品 <span style="color: red;font-size: 20px">{{this.selectedData.length}}</span>件</span>
合计（不含运费）：<span style="color: red;font-size: 20px">￥{{this.total_price.toFixed(2)}}</span>
<button @click="pay" class="order-button">立即下单</button>
</div>
</el-col>
</el-row>
<!-- 表单 -->
<el-dialog title="商品辅材详情" :visible.sync="dialogVisible" :before-close="handleClose">
<el-form align="left" ref="dialogForm" :model="dialogForm" label-width="130px" style="margin-right: 150px">
<el-form-item label="包装辅材">
<template slot-scope="scope">
<el-checkbox-group class="pack-check" v-model="flower_pack">
<el-checkbox-button v-for="pack in packs" :label="pack.pack_id" :key="pack.pack_id" style="margin-bottom: 20px">
{{pack.pack_name}} ￥{{pack.pack_price.toFixed(2)}}
</el-checkbox-button>
</el-checkbox-group>
</template>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="danger" @click="handleClose" plain>取 消</el-button>
<el-button type="danger" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%;margin-left: 30px"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="100"></el-table-column>
<el-table-column prop="flower_pic" label="商品" width="150">
<template slot-scope="scope">
<el-link :underline="false" @click="navTo('/detail?id=' + scope.row.flower_id)">
<img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+scope.row.flower_pic)" style="height: 80px;width: 80px" alt="">
</el-link>
</template>
</el-table-column>
<el-table-column prop="flower_name" label="商品名" width="500">
<template slot-scope="scope">
<div>
<el-link class="good-name" @click="navTo('/detail?id=' + scope.row.flower_id)" :underline="false" style="font-size: 16px;font-weight: bold">
{{scope.row.flower_name}}
</el-link>
</div>
<el-link @click="handleModify(scope.row)" :underline="false" style="color: #8c8c8c;margin-top: 10px">
<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>
<i class="el-icon-arrow-down" style="margin-left: 10px"></i>
</el-link>
</template>
</el-table-column>
<el-table-column prop="single_price" label="单价(元)" width="150">
<template slot-scope="scope">
{{scope.row.single_price.toFixed(2)}}
</template>
</el-table-column>
<el-table-column prop="number" label="数量" width="250">
<template slot-scope="scope">
<el-input-number @change="changeNum(scope.row)" v-model="scope.row.number" :min="1" size="small"></el-input-number>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleDelete(scope.row)" type="danger" size="small" plain>移除</el-button>
</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>
</div>
</template>
<script>
import Cookie from "js-cookie";
export default {
data() {
return {
//页面数据
tableData: [{
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
}]
}],
dialogForm:[{
cart_id:1,
number:1,
pack:[{
pack_id:1,
pack_name:'',
pack_price:1.00
}]
}],
//数据处理
multipleSelection: [],
//小计、下单
total_price:0,
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
// }]
// }
],
input: '',
dialogVisible:false,
//自选花材
flower_pack: [],
//花材列表-修改显示用
packs: [{
pack_id:1,
pack_name:'',
pack_price:1.00,
}],
//分页相关
currentPage:1,
pageSize:10,
page_number:1,//总页数
total:10,//总条数
}
},
created() {
this.currentPage=1;
this.fetchData();
this.getPackList()
},
methods: {
fetchData(){
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/cart/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.tableData=response.data.data.carts;
_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('页面加载出错,请重试!')
}
},
//搜索
handleSearch(){
const _this = this
try {
axios({
method: 'post',
url: 'http://localhost:8181/cart/query',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
page:_this.currentPage,
page_size:_this.pageSize,
flower_name:_this.input
}
}).then(function (response){
if (response.data.code===200){
//查询信息成功
_this.tableData=response.data.data.carts;
_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;
this.total_price = 0.00;
this.fetchData();
},
//多选
handleSelectionChange(val) {
this.total_price = 0
this.selectedData = val
this.multipleSelection = val
val.forEach(item => {
this.total_price += item.single_price * item.number
})
},
getPackList(){
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/pack/list',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
page:1,
page_size:100
}
}).then(function (response){
if (response.data.code===200){
//查询信息成功
_this.packs=response.data.data.packs;
}
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('页面加载出错,请重试!')
}
},
//获取修改初始信息
handleModify(row){
const _this = this
axios({
method: 'post',
url: 'http://localhost:8181/cart/info',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
cart_id: row.cart_id
}
}).then(function (response){
if (response.data.code===200) {
//获取信息成功
_this.dialogForm = response.data.data
//花材多选框展示
if(typeof(_this.dialogForm.pack)==="object"){
_this.flower_pack = response.data.data.pack_id_array //数据必须为array才能正常回显
}
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
this.dialogVisible = true
},
//提交修改的表单
//修改花材
submitForm(){ //提交表单
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/cart/modify',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
cart_id:_this.dialogForm.cart_id,
pack_ids:_this.flower_pack.toString(),
number:_this.dialogForm.number
}
}).then(function (response){
if (response.data.code===200) {
//修改信息成功
_this.$message.success('购物车修改成功!')
//再次获取数据以更新页面
_this.handleSearch()
}
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('页面加载出错,请重试!')
}
//清空表单数据
this.handleClose();
},
//修改数量
changeNum(row){ //提交表单
const _this=this;
this.total_price = 0
this.selectedData.forEach(item => {
this.total_price += item.single_price * item.number
})
try {
axios({
method: 'post',
url: 'http://localhost:8181/cart/modify_num',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
cart_id:row.cart_id,
number:row.number
}
}).then(function (response){
if (response.data.code===200) {
//再次获取数据以更新页面
// _this.handleSearch()
}
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(row){
const _this = this;
this.$confirm('确定从购物车中移除该商品?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认移除
axios({
method: 'post',
url: 'http://localhost:8181/cart/deletePer',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
cart_id:row.cart_id
}
}).then(function (response){
if (response.data.code===200) {
//移除成功
_this.handleSearch()
}
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: '已取消'});
});
},
handleDeleteMul(){
const _this = this
if(_this.multipleSelection.length===0)
this.$message({type: 'warning', message: '请选择商品'});
else{
let ids = []
for (let i=0; i<_this.multipleSelection.length; i++){
ids[i] = _this.multipleSelection[i].cart_id
}
this.$confirm('确定从购物车中移除商品?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认移除
axios({
method: 'post',
url: 'http://localhost:8181/cart/deleteMul',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
cart_ids:ids
}
}).then(function (response){
if (response.data.code===200) {
//移除成功
_this.handleSearch()
}
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: '已取消'});
});
}
},
//dialog弹窗关闭时触发该方法
handleClose(){
this.$refs.dialogForm.resetFields()
//重置表单
this.dialogForm.cart_id = 1;
this.dialogForm.flower_number=1;
this.dialogForm.pack=[];
this.flower_pack=[];
this.dialogVisible = false;
},
navTo(url){
location.href = url
},
// 下单
pay(){
if(this.selectedData.length===0)
this.$message({type: 'warning', message: '请选择商品'});
else{
this.$router.push({name: 'pay', params: {
data: this.selectedData,
type:0,
total_price:this.total_price
}})
}
}
}
}
</script>
<style>
.tableTop{
/*width: 1500px;*/
/*display: flex;*/
/*justify-content: space-between;*/
/*margin: 10px 0 20px 50px;*/
}
.good-name .el-link--inner:hover{
color: red;
}
.order-button{
margin-left: 30px;
font-size: 18px;
font-weight: bold;
height: 50px;
width: 150px;
color: #f7f7f7;
border: 1px solid #ff3134;
background-color: #ff3134;
border-radius: 30px
}
.order-button:hover{
color: #f7f7f7;
background-color: #fd7b6d;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #ff3134 !important;
border-color: #ff3134 !important;
}
.el-checkbox__inner:hover{
border-color: #ff3134!important;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
border-color: #ff3134!important;
}
</style>
Write Preview
Loading…
Cancel
Save