ruochen
/
produck03vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品购物车

master
rouchen 2024-04-10 19:51:09 +08:00
parent b0cf5c58f5
commit 9a9ec2750a
14 changed files with 571 additions and 557 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/product/info.js
View File

@ -10,16 +10,16 @@ export function listInfo(query) {
}
// 查询商品信息详细
export function getDetailInfo(id) {
export function getInfo(id) {
return request({
url: '/product/info/detail/' + id,
url: '/product/info/' + id,
method: 'get'
})
}
// 查询商品信息详细
export function getInfo(id) {
export function getDetailInfo(id) {
return request({
url: '/product/info/' + id,
url: '/product/info/detail/' + id,
method: 'get'
})
}
@ -36,7 +36,7 @@ export function addInfo(data) {
// 修改商品信息
export function updateInfo(data) {
return request({
url: '/product/info/'+data.projectAddModel.id,
url: '/product/info/'+data.id,
method: 'put',
data: data
})

75
src/api/shopCart/Info.js 100644
View File

@ -0,0 +1,75 @@
import request from '@/utils/request'
// 查询购物车列表
export function listInfo(query) {
return request({
url: '/shopCart/Info/list',
method: 'get',
params: query
})
}
// 查询购物车详细
export function getInfo(id) {
return request({
url: '/shopCart/Info/' + id,
method: 'get'
})
}
// 查询购物车详细
export function getDetailInfo() {
return request({
url: '/shopCart/Info/detail',
method: 'get'
})
}
// 新增购物车
export function addInfo(data) {
return request({
url: '/shopCart/Info',
method: 'post',
data: data
})
}
export function cartInfoIsSelected(data) {
return request({
url: '/shopCart/Info/selected',
method: 'post',
data: data
})
}
export function cartInfoEditNum(data) {
return request({
url: '/shopCart/Info/num',
method: 'post',
data: data
})
}
// 修改购物车
export function updateInfo(data) {
return request({
url: '/shopCart/Info/'+data.id,
method: 'put',
data: data
})
}
// 删除购物车
export function delInfo(id) {
return request({
url: '/shopCart/Info/' + id,
method: 'delete'
})
}
// 删除购物车
export function removeCartInfo(data) {
return request({
url: '/shopCart/Info/remove',
method: 'delete',
data: data
})
}

44
src/api/shopCart/info.js
View File

@ -1,44 +0,0 @@
import request from '@/utils/request'
// 查询购物车列表
export function listInfo(query) {
return request({
url: '/shopCart/info/list',
method: 'get',
params: query
})
}
// 查询购物车详细
export function getInfo(id) {
return request({
url: '/shopCart/info/' + id,
method: 'get'
})
}
// 新增购物车
export function addInfo(data) {
return request({
url: '/shopCart/info',
method: 'post',
data: data
})
}
// 修改购物车
export function updateInfo(data) {
return request({
url: '/shopCart/info/'+data.id,
method: 'put',
data: data
})
}
// 删除购物车
export function delInfo(id) {
return request({
url: '/shopCart/info/' + id,
method: 'delete'
})
}

4
src/components/Editor/index.vue
View File

@ -125,7 +125,7 @@ export default {
init() {
const editor = this.$refs.editor;
if (this.readOnly){
this.options.modules.toolbar= {}
this.options.modules.toolbar = {};
}
this.Quill = new Quill(editor, this.options);
// 如果设置了上传地址则自定义图片上传事件
@ -179,7 +179,7 @@ export default {
},
handleUploadSuccess(res, file) {
// 如果上传成功
if (res.data.code == 200) {
if (res.code == 200) {
// 获取富文本组件实例
let quill = this.Quill;
// 获取光标所在位置

45
src/layout-shop/index.vue
View File

@ -1,27 +1,23 @@
<template>
<div>
<el-container>
<el-header>
<el-menu
default-active="1"
default-active="2"
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="1">
<router-link :to="'/index'" class="link-type">
<span>返回首页</span>
</router-link>
</el-menu-item>
<el-menu-item index="2">
<router-link :to="'/cart/detail'" class="link-type">
<span>我的购物车</span>
</router-link>
</el-menu-item>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
@ -34,18 +30,23 @@
</el-row>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
name: "layoutShop"
name: "layoutShop",
data() {
return {}
},
created() {
},
methods: {}
}
</script>
<style scoped>
.el-header, el-footer {
background-color: #E9EEF3;
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
@ -60,11 +61,11 @@ body > .el-container {
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside{
line-height: 260;
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7).el.el-aside{
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

7
src/main.js
View File

@ -1,9 +1,4 @@
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import Vue from 'vue'
import Cookies from 'js-cookie'

1
src/permission.js
View File

@ -6,7 +6,6 @@ import 'nprogress/nprogress.css'
import {getToken} from '@/utils/auth'
import {isRelogin} from '@/utils/request'
NProgress.configure({showSpinner: false})
const whiteList = ['/login', '/register']

27
src/router/index.js
View File

@ -2,8 +2,8 @@ import Vue from 'vue'
import Router from 'vue-router'
/* Layout */
import Layout from '@/layout'
import LayoutShop from "@/layout-shop/index.vue";
import detail from "@/views/product/info/detail/index.vue";
import LayoutShop from "@/layout-shop";
Vue.use(Router)
/**
@ -82,27 +82,24 @@ export const constantRoutes = [
{
path: 'product-detail/:detailId(\\d+)',
component: () => import('@/views/product/info/detail/index'),
name: 'ShopProduct',
name: 'productDetail',
meta: {title: '商品详情', icon: 'dashboard', affix: true}
}
]
},{
path: '',
component: Layout,
redirect: 'shopindex',
},
{
path: '/cart',
component: LayoutShop,
redirect: 'cart-detail',
children: [
{
path: 'shopindex',
component: () => import('@/views/shopCart/info/detail/index'),
name: 'shopindex',
meta: {title: '购物车', icon: 'dashboard', affix: true}
path: '/cart/detail',
component: () => import('@/views/shopCart/detail/index'),
name: 'myCart',
meta: {title: '我的购物车', icon: 'dashboard', affix: true}
}
]
},
// {
// path: '/gb',
// component: detail
// },
{
path: '/user',
component: Layout,

257
src/views/product/info/detail/index.vue
View File

@ -2,32 +2,32 @@
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="breadcrumb in receivedShop.categoryInfoList">{{breadcrumb.name}}</el-breadcrumb-item>
<el-breadcrumb-item v-for="categoryInfo in projectDetail.categoryInfoList">{{categoryInfo.name}}</el-breadcrumb-item>
<el-breadcrumb-item>{{projectDetail.projectInfo.name}}</el-breadcrumb-item>
</el-breadcrumb>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="12">
<el-carousel trigger="click" height="300px">
<el-carousel-item v-for="item in Products" :key="item">
<img :src="item" alt="坏了" width="100%" height="100%">
<el-carousel trigger="click" height="400px">
<el-carousel-item v-for="item in carouselImages" :key="item">
<el-image :src="item" style="height: 100%; width: 100%"/>
</el-carousel-item>
</el-carousel>
<div style="margin-top: 10px ">
<div style="margin-top: 20px;">
<el-row :gutter="20">
<el-col :span="6">
<div>
<el-statistic
group-separator=","
:precision="2"
:value="value2"
:value="123"
:title="title"
></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic title="男女比">
<el-statistic title="商品评价">
<template slot="formatter">
456/2
456
</template>
</el-statistic>
</div>
@ -36,32 +36,19 @@
<div>
<el-statistic
group-separator=","
:precision="2"
:precision="0"
decimal-separator="."
:value="value1"
:title="title"
:value="123"
title="收藏人气"
>
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
<template slot="suffix">
<i class="el-icon-s-flag" style="color: blue"></i>
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic :value="like ? 521 : 520" title="Feedback">
<template slot="suffix">
<span @click="like = !like" class="like">
<i
class="el-icon-star-on"
style="color:red"
v-show="!!like"
></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span>
<el-statistic title="品牌信息">
<template slot="formatter">
{{projectDetail.brandInfo.nam}}
</template>
</el-statistic>
</div>
@ -70,59 +57,45 @@
</div>
</el-col>
<el-col :span="12">
{{receivedShop.projectInfo.name}}
商品规格 {{checkSkuInfo.sku}}
<h2 style="color: red">{{ checkSkuInfo.price }}</h2>
<el-card shadow="hover" style="width: 100%;">
<div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" time-indices title="🎉商品降价🎉">
<template slot="suffix">
抢购即将开始
</template>
</el-statistic>
</div>
</el-card>
<el-form ref="form" :model="form" label-width="80" style="margin-top: 30px">
<el-form-item v-for="(ruleAttr,index) in receivedShop.ruleAttrModelList":label="ruleAttr.name">
<!-- <el-radio-group v-model="form['rule'+index]" @change="selectRuleSku">-->
<!-- <el-radio v-for="value in ruleAttr.valueList" :label="value" border>{{value}}</el-radio>-->
<!-- </el-radio-group>-->
<h1>商品名称</h1>
<h3>商品规格（{{checkSkuInfo.sku}}）</h3>
<h2 style="color: #2200ff">库存：{{checkSkuInfo.stock}}</h2>
<h2 style="color: red">￥{{checkSkuInfo.price}}</h2>
<el-form ref="form" :model="form" label-width="80px" style="margin-top: 110px">
<el-form-item v-for="(ruleAttr, index) in projectDetail.ruleAttrModelList" :label="ruleAttr.name">
<!-- <el-radio-group v-model="form['rule'+index]" @change="selectRuleSku">
</el-radio-group>-->
<el-radio v-model="form['rule'+index]" @change="selectRuleSku"
v-for="value in ruleAttr.valueList"
:label="value" :key="value" :value="value" border>{{value}}</el-radio>
</el-form-item>
<el-form-item label="数量">
<el-input-number v-model="form.num" :min="1" :max="10" label="描述文字" ></el-input-number>
<el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addCart()">加入购物车</el-button>
<el-button type="primary" @click="addCart">加入购物车</el-button>
<el-button>立即购买</el-button>
</el-form-item>
</el-form>
总价格{{num}}
</el-col>
</el-row>
<el-row style="margin-top: 50px">
<el-row style="margin-top: 30px;">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="">商品详情</span>
<el-descriptions v-for="item in receivedShop.attributeGroupList" :title="attributeGroup.groupName" :column="1" >
<el-descriptions-item v-for="attribute in item.attributeList" :label="attribute.name">
{{attributeMap[attribute.id]}}
</el-descriptions-item>
</el-descriptions>
<el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
title="其他属性" :column="1" >
<el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
:label="attributeInfo.name">
{{attributeMap[attributeInfo.id]}}
</el-descriptions-item>
</el-descriptions>
<editor v-model="editorValue" :read-only="true"></editor>
<span>商品详情</span>
</div>
<el-descriptions v-for="attributeGroup in projectDetail.attributeGroupList" :title="attributeGroup.groupName" :column="1">
<el-descriptions-item v-for="attribute in attributeGroup.attributeList"
:label="attribute.name">{{attributeMap[attribute.id]}}</el-descriptions-item>
</el-descriptions>
<el-descriptions v-if="projectDetail.attributeInfoList.length !== 0" title="其他属性" :column="1">
<el-descriptions-item v-for="attributeInfo in projectDetail.attributeInfoList"
:label="attributeInfo.name">{{attributeMap[attributeInfo.id]}}</el-descriptions-item>
</el-descriptions>
<editor v-model="projectDetail.projectInfo.introduction" :read-only="true" >
</editor>
</el-card>
</el-row>
</div>
@ -130,26 +103,18 @@
<script>
import {getDetailInfo} from "@/api/product/info";
import {addInfo} from "@/api/shopCart/Info";
import {Message} from "element-ui";
export default {
name: "productDetail",
data() {
return {
breadcrumbList: [
"服装",
"外衣",
"女士移除"
],
like: true,
value1: 4154.564,
value2: 1314,
title: "增长人数",
title: "销量人气",
form: {
num: 1,
price: 0
num: 1
},
shopData: {},
receivedShop: {
projectDetail: {
projectInfo: {
name: ""
},
@ -158,128 +123,60 @@ export default {
},
attributeInfoList: []
},
num: 1,
editorValue: "阿萨德刚",
attributeMap: [],
// 商品轮播图
Products: [],
checkSkuInfo: {
price : 0.00
price: 0.00
},
price: 0.00,
attributeGroup: [],
deadline2 : Date.now() + 1 * 10000 // 10小时 * 60分钟/小时 * 60秒/分钟 * 1000毫秒/秒
carouselImages: [],
attributeMap: {}
}
},
created() {
const detailId=this.$route.params && this.$route.params.detailId
this.initProjectDetailInfo(detailId)
// this.parseShopFromRoute();
// 设置定时器
const timerId = setTimeout(() => {
// 时间到了，调用 hilarity 函数
this.hilarity();
clearTimeout(timerId);
}, this.deadline2 - Date.now());
const detailId = this.$route.params && this.$route.params.detailId;
this.initProjectDetailInfo(detailId);
},
watch: {
'form.num':{
handler:"updateNum",
immediate:true
}
},
methods:{
methods: {
addCart(){
addInfo(this.form).then(responser => {
console.log(responser)
addInfo(this.form).then(response => {
Message({message: "购物车添加成功", type: 'success'})
})
},
// ShopingCardAdd(){
// console.log("用户信息",this.receivedShop)
// this.$router.push('shopCart/info/detail')
// },
updateNum() {
this.num = this.price * this.form.num
console.log("qqqqq",this.num)
},
hilarity() {
this.$notify({
title: "提示",
message: "时间已到",
duration: 0,
});
},
initSku(){
let sku =this.receivedShop.projectSkuInfoList[0]['sku'];
let skuArr =sku.split("-");
skuArr.forEach((rule,index) => {
this.form['rule'+index] = rule
let sku = this.projectDetail.projectSkuInfoList[0]["sku"];
let skuArr = sku.split("-");
skuArr.forEach((rule, index) => {
this.form['rule'+index] = rule;
})
this.selectRuleSku()
this.selectRuleSku();
},
selectRuleSku(){
let ruleSize =this.receivedShop.ruleAttrModelList.length
let ruleSize = this.projectDetail.ruleAttrModelList.length;
let sku = "";
for (let index = 0 ; ;index++){
sku +=this.form['rule'+index]
if (index+1 === ruleSize){
for (let index = 0; ; index++) {
sku += this.form['rule'+index];
if (index + 1 === ruleSize){
break
}
sku += "-";
}
this.form.projectSku=sku;
this.checkSkuInfo= this.receivedShop.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
console.log("sdf",this.checkSkuInfo)
console.log("ppp",this.checkSkuInfo.price)
this.price = this.checkSkuInfo.price
this.updateNum()
this.form.projectSku = sku;
this.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
},
initProjectDetailInfo(detailId){
getDetailInfo(detailId).then(response => {
this.receivedShop = response.data
console.log("商品",this.receivedShop)
let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
this.Products.push(...ccc)
this.receivedShop.productAttributeInfoList.map(productAttributeInfo => {
let key =productAttributeInfo.attributeId;
this.projectDetail = response.data;
this.projectDetail.productAttributeInfoList.map(productAttributeInfo => {
let key = productAttributeInfo.attributeId;
this.attributeMap[key] = productAttributeInfo["value"]
})
this.form.projectId= this.receivedShop.projectInfo.id
let ruleAttrLength = this.receivedShop.ruleAttrModelList.length;
console.log("hieng",ruleAttrLength)
for (let index = 0 ;index < ruleAttrLength ;index++){
this.form["rule"+index] = null
this.form.projectId = this.projectDetail.projectInfo.id;
let ruleAttrLength = this.projectDetail.ruleAttrModelList.length;
for (let index = 0; index < ruleAttrLength; index++) {
this.form["rule"+index] = null;
}
console.log("shjo",this.receivedShop.ruleAttrModelList)
this.initSku()
this.carouselImages = this.projectDetail.projectInfo.carouselImages.split(",")
this.initSku();
})
},
//商品列表
// parseShopFromRoute() {
// // 尝试解析shop查询参
// this.receivedShop = this.$route.query.shop;
// // 确保receivedShop和data属性都存在，并且data下有name属性
// console.log("hhhh ",this.receivedShop); // 打印店铺名称
// // 图片轮播图
// let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
// this.Products.push(...ccc)
// this.receivedShop.productAttributeInfoList.map(productAttributeInfo => {
// let key =productAttributeInfo.attributeId;
// this.attributeMap[key] = productAttributeInfo["value"]
// })
//
// let ruleAttrLength = this.receivedShop.ruleAttrModelList.length;
// console.log("hieng",ruleAttrLength)
// for (let index = 0 ;index < ruleAttrLength ;index++){
// this.form["rule"+index] = null
// }
// console.log("shjo",this.receivedShop.ruleAttrModelList)
// this.initSku()
// },
},
beforeDestroy() {
}
}
}
</script>
@ -289,7 +186,7 @@ export default {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
line-height: 150px;
margin: 0;
}
@ -300,5 +197,7 @@ export default {
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
.ql-toolbar{
display: none;
}
</style>

111
src/views/product/info/index.vue
View File

@ -116,7 +116,7 @@
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button class="link-type" @click="toProjectDetail(scope.row.id)">
商品詳情
商品详情
</el-button>
<el-button
size="mini"
@ -335,7 +335,6 @@
<el-button type="primary" @click="oneSetting">一键设置</el-button>
</el-form-item>
</el-form>
{{skuList}}
<el-table
:data="skuList"
border
@ -415,15 +414,7 @@ export default {
brandId: null,
},
// 表单参数
form: {
mianType: '',
parentType: '',
type:'',
image: '',
price: '',
stock: ''
},
fufObj: [],
form: {},
// 表单校验
rules: {
name: [
@ -489,9 +480,7 @@ export default {
"image": null,
"stock": null,
"price": null
},
respData:[],
fifObj: []
}
};
},
watch: {
@ -510,56 +499,17 @@ export default {
},
"form.type": {
handler(value) {
console.log(value)
if (value != null){
getTemplateAttribute(value).then(response => {
console.log("res",response)
const {data} = response;
const {templateAttributeGroupList,templateAttributeList,attributeList} = data;
this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
this.categoryCommonElement.templateAttributeList = templateAttributeList;
this.categoryCommonElement.attributeList = attributeList;
})
}
console.log("resData",this.respData);
if (this.respData != null && this.respData.length !== 0){
this.categoryCommonElement.templateAttributeGroupList.forEach(template => {
template.attributeList.forEach(te => {
this.respData.forEach(asPro => {
if (te.id == asPro.attributeId){
console.log("value",asPro.value)
te.value = asPro.value;
this.fufObj.push(asPro);
}
});
});
});
this.categoryCommonElement.templateAttributeList.forEach(tem => {
this.respData.forEach(asPro => {
console.log(asPro)
if (tem.id === asPro.attributeId){
tem.value = asPro.value;
this.fufObj.push(asPro);
}
});
});
this.respData.forEach(asPro => {
if (!this.fufObj.includes(asPro)){
this.attributeCheckedList.push(asPro);
}
});
this.categoryCommonElement.attributeList.forEach(attr => {
this.attributeCheckedList.forEach(attri => {
if (attr.id == attri.attributeId){
attri.name = attr.name;
this.attributeIdCheckedList.push(Number(attr.id));
}
});
});
}
});
}
}
}
},
@ -573,29 +523,26 @@ export default {
},
oneSetting(){
this.skuList.forEach(skuInfo => {
console.log(skuInfo)
skuInfo.image = this.oneSettingForm.image;
skuInfo.stock = this.oneSettingForm.stock;
skuInfo.price = this.oneSettingForm.price;
})
},
changeRule(ruleId){
console.log("ruleId",ruleId)
this.titleList = []
let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id == ruleId);
console.log("ruleInfo",ruleInfo)
let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === ruleId);
const {ruleAttrList} = ruleInfo;
console.log(ruleAttrList)
let skuTotal = 1;
for (let ruleAttrListKey of Object.keys(ruleAttrList)) {
for (let ruleAttrListKey in ruleAttrList) {
let ruleAttrInfo = ruleAttrList[ruleAttrListKey];
this.titleList.push({
"label": ruleAttrInfo.name,
"prop": "prop" + ruleAttrListKey
});
skuTotal *= ruleAttrInfo.valueList.length;
"label":ruleAttrInfo.name,
"prop":"prop"+ruleAttrListKey
})
skuTotal = skuTotal * ruleAttrInfo.valueList.length;
}
this.titleList.push(...this.templateTitleList) ;
console.log(this.titleList);
this.skuList = [];
for (let i = 0; i < skuTotal; i++) {
this.skuList.push(
@ -687,6 +634,7 @@ export default {
listCategory().then(response => {
this.categoryOptions = [];
this.categoryOptions = this.handleTree(response.data, "id", "parentId");
console.log(this.categoryOptions)
});
},
remoteSearchBrandList(queryValue){
@ -700,7 +648,7 @@ export default {
next() {
let isValidate = true;
this.$refs["form"].validateField(this.rulesTemplateMap[this.stepNumber],(valid) => {
console.log(valid)
if (valid) {
isValidate = false;
}
@ -735,16 +683,13 @@ export default {
image: null,
carouselImages: null,
status: null,
ruleId: null,
brandId: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
skuList: [],
titleList: [],
categoryCommonElement: [],
oneSettingForm: {}
updateTime: null
};
this.resetForm("form");
this.initCategoryTree();
@ -769,11 +714,7 @@ export default {
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.initCategoryTree()
this.open = true;
this.skuList=[]
this.titleList= []
this.oneSettingForm = {}
this.title = "添加商品信息";
},
/** 修改按钮操作 */
@ -781,23 +722,7 @@ export default {
this.reset();
const id = row.id || this.ids
getInfo(id).then(response => {
console.log("response",response)
this.respData = response.data.asProductAttributeInfos
this.form = response.data;
console.log("sd",this.form.id)
this.initCategoryTree()
this.oneSettingForm = response.data.projectSkuInfos
this.categoryOptionValue = [Number(response.data.mianType),Number(response.data.parentType),Number(response.data.type)]
this.changeRule(response.data.ruleId)
console.log("sku",this.changeRule)
console.log("skuu",response.data.projectSkuInfos)
for (var i = 0; i < this.skuList.length; i++) {
this.$set(this.skuList[i], 'image', response.data.projectSkuInfos[i].image);
this.$set(this.skuList[i], 'price', response.data.projectSkuInfos[i].price);
this.$set(this.skuList[i], 'stock', response.data.projectSkuInfos[i].stock);
console.log(this.skuList[i].price, response.data.projectSkuInfos[i].price);
}
console.log("sfdf",this.skuList)
this.open = true;
this.title = "修改商品信息";
});
@ -838,7 +763,7 @@ export default {
attrValueList: attrValueList,
productSkuList: productSkuList
};
console.log("pto",productAddReq)
console.log(productAddReq)
if (this.form.id != null) {
updateInfo(productAddReq).then(response => {
this.$modal.msgSuccess("修改成功");

36
src/views/shopCart/info/index.vue → src/views/shopCart/Info/index.vue
View File

@ -9,10 +9,10 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="sku" prop="projectSku">
<el-form-item label="SKU" prop="projectSku">
<el-input
v-model="queryParams.projectSku"
placeholder="请输入sku"
placeholder="请输入SKU"
clearable
@keyup.enter.native="handleQuery"
/>
@ -55,7 +55,7 @@
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['shopCart:info:add']"
v-hasPermi="['shopCart:Info:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
@ -66,7 +66,7 @@
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['shopCart:info:edit']"
v-hasPermi="['shopCart:Info:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
@ -77,7 +77,7 @@
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['shopCart:info:remove']"
v-hasPermi="['shopCart:Info:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
@ -87,17 +87,17 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['shopCart:info:export']"
v-hasPermi="['shopCart:Info:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="InfoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="id" />
<el-table-column label="商品" align="center" prop="projectId" />
<el-table-column label="sku" align="center" prop="projectSku" />
<el-table-column label="SKU" align="center" prop="projectSku" />
<el-table-column label="用户" align="center" prop="userId" />
<el-table-column label="数量" align="center" prop="num" />
<el-table-column label="是否选中" align="center" prop="isSelected" />
@ -109,14 +109,14 @@
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['shopCart:info:edit']"
v-hasPermi="['shopCart:Info:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['shopCart:info:remove']"
v-hasPermi="['shopCart:Info:remove']"
>删除</el-button>
</template>
</el-table-column>
@ -136,8 +136,8 @@
<el-form-item label="商品" prop="projectId">
<el-input v-model="form.projectId" placeholder="请输入商品" />
</el-form-item>
<el-form-item label="sku" prop="projectSku">
<el-input v-model="form.projectSku" placeholder="请输入sku" />
<el-form-item label="SKU" prop="projectSku">
<el-input v-model="form.projectSku" placeholder="请输入SKU" />
</el-form-item>
<el-form-item label="用户" prop="userId">
<el-input v-model="form.userId" placeholder="请输入用户" />
@ -161,7 +161,7 @@
</template>
<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/shopCart/info";
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/shopCart/Info";
export default {
name: "Info",
@ -180,7 +180,7 @@ export default {
// 总条数
total: 0,
// 购物车表格数据
infoList: [],
InfoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
@ -203,7 +203,7 @@ export default {
{ required: true, message: "商品不能为空", trigger: "blur" }
],
projectSku: [
{ required: true, message: "sku不能为空", trigger: "blur" }
{ required: true, message: "SKU不能为空", trigger: "blur" }
],
userId: [
{ required: true, message: "用户不能为空", trigger: "blur" }
@ -231,7 +231,7 @@ export default {
getList() {
this.loading = true;
listInfo(this.queryParams).then(response => {
this.infoList = response.data.rows;
this.InfoList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
@ -322,9 +322,9 @@ export default {
},
/** 导出按钮操作 */
handleExport() {
this.download('shopCart/info/export', {
this.download('shopCart/Info/export', {
...this.queryParams
}, `info_${new Date().getTime()}.xlsx`)
}, `Info_${new Date().getTime()}.xlsx`)
}
}
};

30
src/views/shopCart/detail/dataStructure 100644
View File

@ -0,0 +1,30 @@
{
购物车商品集合: [
{
购物车ID: 1,
商品SKU图片: "url",
商品名称: "",
商品规格SKU集合: [
{
规格名称："",
规格属性：""
}
]，
商品单价：125.36,
商品购物车数量：1,
商品小计：125.36,
是否选中: Y/N
}
],
// 购物车统计
statisticsCart: {
// 商品总数
total: 0,
// 选择总数
selectTotal: 0,
// 商品总价
priceTotal: 0.00,
// 实际总价
actualTotal: 0.00
}
}

240
src/views/shopCart/detail/index.vue 100644
View File

@ -0,0 +1,240 @@
<template>
<div>
<el-skeleton v-if="!loading" :rows="12" animated />
<el-table v-if="loading" ref="cartProjectTable" :data="cartProjectList" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="商品信息">
<template slot-scope="scope">
<div style="height: 150px; width: 100%">
<el-row :gutter="10">
<el-col :span="8">
<el-card class="box-card">
<image-preview :src="scope.row.image" height="150px"/>
</el-card>
</el-col>
<el-col :span="16">
<el-row>
<span style="font-weight: bolder; font-size: 20px">{{ scope.row.name }}</span>
</el-row>
<el-divider style="margin: 10px 0;"/>
<el-row>
<el-col :span="24" v-for="skuRule in scope.row.skuRuleList">
{{ skuRule.ruleName }}：{{ skuRule.ruleValue }}
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
</el-table-column>
<el-table-column label="单价" width="120">
<template slot-scope="scope">{{ scope.row.price }}</template>
</el-table-column>
<el-table-column label="数量" width="120">
<template slot-scope="scope">
<el-input-number v-model="scope.row.num" controls-position="right" style="width: 110px"
@change="editCartProjectNum(scope.row)"
:min="1"
:max="scope.row.stock"
size="mini"></el-input-number>
</template>
</el-table-column>
<el-table-column label="小计" width="120">
<template slot-scope="scope">{{ scope.row.subtotal }}</template>
</el-table-column>
<el-table-column label="操作" width="80">
<template slot-scope="scope">
<el-button type="text" @click="removeCartProject(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div v-if="failureCartProjectList.length > 0" style="height: 50px; align-items: center; ">
<span style="margin: 20px 0px; float: left; color: #787be8">已失效</span>
</div>
<el-table v-if="failureCartProjectList.length > 0" :show-header="false" ref="multipleTable"
:data="failureCartProjectList"
tooltip-effect="dark"
style="width: 100%">
<el-table-column width="55">
<template slot-scope="scope">
<el-checkbox disabled></el-checkbox>
</template>
</el-table-column>
<el-table-column
label="日期"
>
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
<el-card v-if="loading" style="margin-top: 20px;">
<div class="clearfix">
<el-row>
<el-col :span="6">
<el-checkbox v-model="isAllCheck" @change="changeIsAllCheck">全选</el-checkbox>
<el-button type="text" style="margin-left: 10px" @click="removeCartProject(undefined)">删除选中商品</el-button>
</el-col>
<el-col v-if="statisticsCart == null" :span="16">
<span style="font-size: 24px; font-weight: bolder;">购物车内无购物商品，请先去加入购物车</span>
</el-col>
<el-col v-if="statisticsCart != null" :span="14">
<div>
<span>共 <span style="color: red">{{ statisticsCart.total }}</span> 件商品，已选择 <span
style="color:red;">{{ statisticsCart.selectTotal }}</span> 件</span>
<el-divider direction="vertical"></el-divider>
<span> 商品合计 : ¥{{ statisticsCart.priceTotal }}</span>
<el-divider direction="vertical"></el-divider>
<span>应付总额：<span style="color:red; font-size: 24px;">¥{{ statisticsCart.actualTotal }}</span></span>
</div>
</el-col>
<el-col v-if="statisticsCart != null" :span="4">
<el-button style="float: right;" type="success">下单</el-button>
</el-col>
</el-row>
</div>
</el-card>
</div>
</template>
<script>
import {cartInfoEditNum, cartInfoIsSelected, getDetailInfo, removeCartInfo} from "@/api/shopCart/Info";
export default {
name: "shopCartDetail",
data() {
return {
// 生效商品
cartProjectList: [],
// 失效商品
failureCartProjectList: [],
cartProjectSelected: [],
// 购物车统计
statisticsCart: {
// 商品总数
total: 0,
// 选择总数
selectTotal: 0,
// 商品总价
priceTotal: 0.00,
// 实际总价
actualTotal: 0.00
},
// 时候全部选择
isAllCheck: false,
loading: false
}
},
created() {
this.init()
},
methods: {
removeCartProject(row){
let removeCartProjectParams = [];
if (row){
removeCartProjectParams.push({
"projectId": row.projectId,
"projectSku": row.projectSku,
"cartInfoId": row.cartInfoId
});
}else {
debugger
if (this.cartProjectSelected.length === 0){
this.$message.warning("请先选择购物车内商品")
return;
}
this.cartProjectSelected.forEach(cartInfoIsSelect => removeCartProjectParams.push({
"projectId": cartInfoIsSelect.projectId,
"projectSku": cartInfoIsSelect.projectSku,
"cartInfoId": cartInfoIsSelect.cartInfoId
}))
}
removeCartInfo(removeCartProjectParams).then(response => {
this.init();
})
},
editCartProjectNum(row){
let editCartProjectNumParams = {
"projectId": row.projectId,
"projectSku": row.projectSku,
"num": row.num
};
cartInfoEditNum(editCartProjectNumParams).then(response => {
this.init();
})
},
init() {
this.loading = false;
this.cartProjectList = [];
this.cartProjectSelected = []
getDetailInfo().then(response => {
const {data} = response;
this.statisticsCart = data == null ? null : data.statisticsCart;
this.cartProjectList = data == null ? [] : data.cartSkuList;
this.loading = true;
setTimeout(this.initCartSelected, 200);
})
},
initCartSelected() {
this.cartProjectList.forEach(cartProject => {
if ("Y" === cartProject.isSelected) {
this.$refs.cartProjectTable.toggleRowSelection(cartProject, true);
}
})
},
changeIsAllCheck() {
if (this.isAllCheck) {
this.$refs.cartProjectTable.toggleAllSelection();
} else {
this.$refs.cartProjectTable.clearSelection();
}
},
handleSelectionChange(selectedRow) {
let editCartProjectList = [];
this.cartProjectSelected
.filter(cartProject => selectedRow.indexOf(cartProject) === -1)
.forEach(cartProject => editCartProjectList.push({
"projectId": cartProject.projectId,
"projectSku": cartProject.projectSku,
"isSelected": "N"
}))
selectedRow
.filter(cartProject => this.cartProjectSelected.indexOf(cartProject) === -1)
.forEach(cartProject => editCartProjectList.push({
"projectId": cartProject.projectId,
"projectSku": cartProject.projectSku,
"isSelected": "Y"
}))
let cartProjectMap = {};
this.cartProjectList.map(cartProject => cartProjectMap[`${cartProject.projectId} + ${cartProject.projectSku}`] = cartProject.isSelected)
let editCartProjectFilterList
= editCartProjectList.filter(editCartProject => editCartProject.isSelected !== cartProjectMap[`${editCartProject.projectId} + ${editCartProject.projectSku}`])
if (editCartProjectFilterList.length > 0){
cartInfoIsSelected(editCartProjectList).then(response => {
this.init();
})
}
this.isAllCheck = selectedRow.length === this.cartProjectList.length
this.cartProjectSelected = selectedRow;
}
}
}
</script>
<style scoped>
</style>

103
src/views/shopCart/info/detail/index.vue
View File

@ -1,103 +0,0 @@
<template>
<div>
<el-page-header @back="goBack" content="购物车">
</el-page-header>
<el-table
:data="cartItems"
style="width: 100%"@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column label="商品信息">
<template slot-scope="scope">
<div style="display: flex; align-items: center;">
<img :src="scope.row.image" style="width: 100px; height: 100px; margin-right: 10px;" alt="">
<div>
<span>{{ scope.row.name }}</span><br>
<span>{{ scope.row.sku }}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="数量">
<template slot-scope="scope">
<el-input-number v-model="scope.row.quantity" controls-position="right" @change="handleChange(scope.row)" :min="1" :max="10"></el-input-number>
</template>
</el-table-column>
<el-table-column label="价格" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.price }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<span style="color: red">购物车中已选{{process}}件商品，总计金额为{{aggregate}}</span>
</div>
</template>
<script>
export default {
name: "ShoppingCart",
data() {
return {
cartItems: [
{
name: "商品1",
image: "http://127.0.0.1:9300/statics/2024/03/26/0d73d0b8ac7fbcb12194a0835f1632a4_20240326200358A001.png",
sku: "规格1",
quantity: 1,
price:188
},
{
name: "商品2",
image: "http://127.0.0.1:9300/statics/2024/03/26/0d73d0b8ac7fbcb12194a0835f1632a4_20240326200358A001.png",
sku: "规格2",
quantity: 1,
price:155
}
],
process: 0, //商品数量
aggregate: 0, //总计
selectedItems: [] // 选中的项
};
},
methods: {
handleDelete(index, row) {
console.log("index",index)
console.log(index, row);
},
goBack() {
console.log('go back');
},
handleChange(item) {
const index = this.cartItems.findIndex(cartItem => cartItem === item);
if (index !== -1) {
this.cartItems[index].quantity = item.quantity;
if (this.selectedItems.includes(this.cartItems[index])) {
this.calculateTotal();
}
}
},
handleSelectionChange(val) {
this.selectedItems = val; // 更新选中的项
this.calculateTotal();
},
calculateTotal() {
this.process = 0;
this.aggregate = 0;
for (let i = 0; i < this.selectedItems.length; i++) {
this.process += this.selectedItems[i].quantity;
this.aggregate += this.selectedItems[i].price * this.selectedItems[i].quantity;
}
}
}
};
</script>