提交 91859b33 authored 作者: 王鹏飞's avatar 王鹏飞

update

上级 379ed892
...@@ -17,5 +17,13 @@ export function getToken() { ...@@ -17,5 +17,13 @@ export function getToken() {
// 获取oss signature // 获取oss signature
export function getSignature() { export function getSignature() {
return httpRequest.get('/api/usercenter//aliyun/get-signature') return httpRequest.get('/api/usercenter/aliyun/get-signature')
}
// 图片上传
export function uploadFile(data) {
return httpRequest.post('https://webapp-pub.ezijing.com', data, {
withCredentials: false,
headers: { 'Content-Type': 'multipart/form-data' }
})
} }
<template> <template>
<div class="container"> <div class="app-card">
<header class="container-header"> <div class="app-card-hd">
<slot name="header"> <slot name="header">
<app-breadCrumb></app-breadCrumb> <h2 class="app-card-hd__title" v-if="title">{{ title }}</h2>
<slot name="header-aside"></slot>
</slot> </slot>
</header> </div>
<main class="container-main"> <div class="app-card-bd">
<slot></slot> <slot></slot>
</main> </div>
<footer class="container-footer">
<slot name="footer"></slot>
</footer>
</div> </div>
</template> </template>
<script> <script>
import AppBreadCrumb from './breadCrumb'
export default { export default {
components: { AppBreadCrumb }, name: 'AppCard',
props: { title: { type: String } }, props: { title: String }
data() {
return {}
}
} }
</script> </script>
<style> <style>
.container::after { .app-card {
content: '';
display: table;
clear: both;
}
.container {
padding: 0 24px;
}
.container-main {
background: #ffffff; background: #ffffff;
box-shadow: 0 1px 6px 0 rgb(228 232 235 / 20%); box-shadow: 0 1px 6px 0 rgb(228 232 235 / 20%);
border-radius: 8px; border-radius: 8px;
margin-bottom: 64px; margin-bottom: 20px;
padding: 32px; padding: 32px;
} }
.app-card-hd {
display: flex;
}
.app-card-hd__title {
flex: 1;
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
}
</style> </style>
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
:page-sizes="[10, 20, 30, 50, 100]" :page-sizes="[10, 20, 30, 50, 100]"
:page-size="page.size" :page-size="page.size"
:total="page.total" :total="page.total"
:current-page.sync="page.currentPage"
@size-change="pageSizeChange" @size-change="pageSizeChange"
@current-change="fetchList" @current-change="fetchList"
v-if="hasPagination" v-if="hasPagination"
...@@ -120,7 +121,7 @@ export default { ...@@ -120,7 +121,7 @@ export default {
let params = this.params let params = this.params
// 翻页参数设置 // 翻页参数设置
if (this.hasPagination) { if (this.hasPagination) {
params.page = this.page.currentPage.toString() params.page = (this.page.currentPage - 1).toString()
params.page_size = this.page.size.toString() params.page_size = this.page.size.toString()
} }
// 接口请求之前 // 接口请求之前
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
import { getSignature } from '@/api/base' import { getSignature } from '@/api/base'
import md5 from 'blueimp-md5' import md5 from 'blueimp-md5'
export default { export default {
name: 'UploadImage', name: 'AppUpload',
props: { props: {
value: { type: String }, value: { type: String },
prefix: { type: String, default: 'upload/shop-admin/' } prefix: { type: String, default: 'upload/shop-admin/' }
......
<!--日期组件-->
<template>
<el-date-picker v-model="defaultValue" :type="type" :placeholder="placeholder" suffix-icon="el-icon-date" v-bind="$attrs">
</el-date-picker>
</template>
<script>
export default {
name: 'DateTimePicker',
data: () => ({
defaultValue: null
}),
props: {
value: null,
type: {
type: String,
default: 'datetime'
},
placeholder: {
type: String,
default: '请选择日期'
}
},
watch: {
value: {
handler(value) {
this.defaultValue = value ? new Date(value) : null
},
immediate: true
},
defaultValue(value) {
const result = value ? +new Date(value) : null
this.$emit('input', result)
}
}
}
</script>
<template>
<el-button type="primary" class="phone-code-btn" :disabled="disabled">{{text}}</el-button>
</template>
<script>
export default {
name: 'TimerButton',
props: {
seconds: { type: Number, default: 60 }
},
data: function() {
return {
disabled: false,
time: 0,
timer: null // 倒计时定时器
}
},
computed: {
text() {
return this.time > 0 ? this.time + 's' : '发送验证码'
}
},
methods: {
startTimer() {
clearInterval(this.timer)
this.timer = setInterval(() => {
if (this.time <= 0) {
this.disabled = false
clearInterval(this.timer)
} else {
this.disabled = true
}
this.time--
}, 1000)
},
start() {
this.time = this.seconds
this.startTimer()
},
stop() {
clearInterval(this.timer)
this.disabled = false
this.time = 0
}
},
beforeDestroy() {
clearInterval(this.timer)
}
}
</script>
<!--用户自动提示组件-->
<template>
<el-autocomplete v-model="nickName" valueKey="nickName" popper-class="user-autocomplete" :disabled="disabled" :fetch-suggestions="querySearchAsync" :placeholder="placeholder" @select="handleSelect" suffix-icon="el-icon-search" style="width:100%;">
<template slot-scope="props">
<div class="pic"><img :src="props.item.avatar | setImageUrl" /></div>
<div class="content">
<div class="zcode">{{ props.item.zcode }}</div>
<div class="name">{{ props.item.nickName }}</div>
</div>
</template>
</el-autocomplete>
</template>
<script>
import { fetchUser } from '@/api/base' // 按照昵称查询用户接口
export default {
name: 'UserAutoComplete',
props: {
value: null,
showValue: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请输入'
},
disabled: {
type: Boolean,
default: false
}
},
data: () => ({
nickName: '',
dataList: []
}),
watch: {
showValue: function(value) {
this.nickName = value
},
nickName: function(value) {
if (!value) {
this.$emit('input', null)
}
}
},
filters: {
setImageUrl: value => {
let url = ''
if (!value) {
url = '//www.zai-art.com/appwrapper_dist/appDefaultImage/user.png'
} else {
url = /(http)|(https)|(\/\/)/gi.test(value)
? value.replace(/(^http:)|(^https:)/gi, '')
: `//img.zai-art.com/${value}`
}
return `${url}?imageView2/1/w/80/h/80`
}
},
created() {
this.nickName = this.showValue
},
methods: {
// 用户自动匹配
querySearchAsync(query, callback) {
fetchUser({ nickName: query }).then(response => {
this.dataList = (response.data.data && response.data.data.list) || []
callback(this.dataList)
})
},
// 处理用户自动匹配点击
handleSelect(item) {
this.$emit('input', item.id)
this.$emit('change', item)
}
}
}
</script>
<style>
.user-autocomplete li {
padding: 10px;
}
.user-autocomplete .pic {
float: left;
width: 40px;
height: 40px;
}
.user-autocomplete .pic img {
width: 100%;
height: 100%;
}
.user-autocomplete .content {
margin-left: 50px;
line-height: 20px;
}
.user-autocomplete .content .name {
font-size: 14px;
}
.user-autocomplete .content .zcode {
font-size: 12px;
color: #b4b4b4;
}
</style>
...@@ -20,6 +20,7 @@ import skuGroup from './skuGroup' ...@@ -20,6 +20,7 @@ import skuGroup from './skuGroup'
import { getSkuNameList } from '@/api/goods' import { getSkuNameList } from '@/api/goods'
export default { export default {
name: 'sku',
components: { skuGroup }, components: { skuGroup },
props: { props: {
value: { type: Array, default: () => [] } value: { type: Array, default: () => [] }
...@@ -30,7 +31,7 @@ export default { ...@@ -30,7 +31,7 @@ export default {
{ {
spec_id: '1', spec_id: '1',
spec_name: '颜色', spec_name: '颜色',
value: [ spec_values: [
{ spec_value_id: '1', spec_value: '红' }, { spec_value_id: '1', spec_value: '红' },
{ spec_value_id: '2', spec_value: '黄' }, { spec_value_id: '2', spec_value: '黄' },
{ spec_value_id: '3', spec_value: '蓝' } { spec_value_id: '3', spec_value: '蓝' }
...@@ -39,7 +40,7 @@ export default { ...@@ -39,7 +40,7 @@ export default {
{ {
spec_id: '2', spec_id: '2',
spec_name: '大小', spec_name: '大小',
value: [ spec_values: [
{ spec_value_id: '1', spec_value: 'L' }, { spec_value_id: '1', spec_value: 'L' },
{ spec_value_id: '2', spec_value: 'M' } { spec_value_id: '2', spec_value: 'M' }
] ]
...@@ -64,18 +65,15 @@ export default { ...@@ -64,18 +65,15 @@ export default {
}, },
// 添加规格 // 添加规格
addSku() { addSku() {
this.skuList.push({ key: '', value: [] }) this.skuList.push({ key: '', spec_values: [] })
}, },
// 删除规格 // 删除规格
groupRemove(index) { groupRemove(index) {
this.skuList.splice(index, 1) this.skuList.splice(index, 1)
},
groupChange(index, arg) {
this.skuList.splice(index, 1, arg[0])
} }
}, },
beforeMount() { beforeMount() {
// this.getSkuNameList() this.getSkuNameList()
} }
} }
</script> </script>
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<!-- 规格值 --> <!-- 规格值 -->
<div class="sku-item-row" v-for="(data, index) in skuItem.value" :key="index"> <div class="sku-item-row" v-for="(data, index) in skuItem.spec_values" :key="index">
<div class="sku-item-row-left"> <div class="sku-item-row-left">
<el-select <el-select
v-model="data.spec_value_id" v-model="data.spec_value_id"
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
<div class="sku-item-row-right"> <div class="sku-item-row-right">
<div class="tools"> <div class="tools">
<i class="el-icon-circle-plus-outline" @click="addSkuValue(index)"></i> <i class="el-icon-circle-plus-outline" @click="addSkuValue(index)"></i>
<i class="el-icon-delete" @click="removeSkuValue(index)" v-if="skuItem.value.length > 1"></i> <i class="el-icon-delete" @click="removeSkuValue(index)" v-if="skuItem.spec_values.length > 1"></i>
</div> </div>
</div> </div>
</div> </div>
...@@ -49,8 +49,8 @@ ...@@ -49,8 +49,8 @@
</template> </template>
<script> <script>
import { getSkuValueList } from '@/api/goods'
export default { export default {
name: 'skuGroup',
props: { props: {
index: { type: Number, default: 0 }, // 索引 index: { type: Number, default: 0 }, // 索引
skuList: { type: Array, default: () => [] }, // 规格列表 skuList: { type: Array, default: () => [] }, // 规格列表
...@@ -74,12 +74,12 @@ export default { ...@@ -74,12 +74,12 @@ export default {
// 规格值列表 // 规格值列表
skuValueList() { skuValueList() {
const found = this.skuNameList.find(item => item.spec_id === this.skuItem.spec_id) const found = this.skuNameList.find(item => item.spec_id === this.skuItem.spec_id)
return found ? found.value || [] : [] return found ? found.spec_values || [] : []
}, },
// 规格值数据处理后的列表 // 规格值数据处理后的列表
currentSkuValueList() { currentSkuValueList() {
return this.skuValueList.map(item => { return this.skuValueList.map(item => {
item.selected = !!this.skuItem.value.find(data => data.spec_value_id === item.spec_value_id) item.selected = !!this.skuItem.spec_values.find(data => data.spec_value_id === item.spec_value_id)
return item return item
}) })
} }
...@@ -90,26 +90,23 @@ export default { ...@@ -90,26 +90,23 @@ export default {
const found = this.skuNameList.find(item => item.spec_id === id) const found = this.skuNameList.find(item => item.spec_id === id)
// const value = { spec_id: id, spec_name: found.spec_name, value: [] } // const value = { spec_id: id, spec_name: found.spec_name, value: [] }
this.skuItem.spec_name = found.spec_name this.skuItem.spec_name = found.spec_name
this.skuItem.value = [{}] this.skuItem.spec_values = [{}]
}, },
// 规格值改变 // 规格值改变
skuValueChange(id, index) { skuValueChange(id, index) {
const found = this.skuValueList.find(item => item.spec_value_id === id) const found = this.skuValueList.find(item => item.spec_value_id === id)
this.skuItem.value[index].spec_value = found.spec_value this.skuItem.spec_values[index].spec_value = found.spec_value
}, },
removeSku(index) { removeSku(index) {
this.skuList.splice(index, 1) this.skuList.splice(index, 1)
}, },
// 添加 // 添加
addSkuValue(index) { addSkuValue(index) {
this.skuItem.value.splice(index + 1, 0, {}) this.skuItem.spec_values.splice(index + 1, 0, {})
}, },
// 删除 // 删除
removeSkuValue(index) { removeSkuValue(index) {
this.skuItem.value.splice(index, 1) this.skuItem.spec_values.splice(index, 1)
},
getSkuValueList(item) {
getSkuValueList({ shop_id: this.shopId, spec_id: item.spec_id }).then(res => {})
} }
} }
} }
......
...@@ -41,7 +41,8 @@ ...@@ -41,7 +41,8 @@
<div class="batch-buttons" v-if="!showBatchInput"> <div class="batch-buttons" v-if="!showBatchInput">
<el-button type="text" @click="batchUpdate('price')">价格</el-button> <el-button type="text" @click="batchUpdate('price')">价格</el-button>
<el-button type="text" @click="batchUpdate('stock')">库存</el-button> <el-button type="text" @click="batchUpdate('stock')">库存</el-button>
<el-button type="text" @click="batchUpdate('mark_price')">成本价</el-button> <el-button type="text" @click="batchUpdate('mark_price')">划线价</el-button>
<el-button type="text" @click="batchUpdate('prime_price')">成本价</el-button>
</div> </div>
<div class="batch-input" v-else> <div class="batch-input" v-else>
<el-input type="number" size="small" v-model="batchInputValue" ref="batchInput"></el-input> <el-input type="number" size="small" v-model="batchInputValue" ref="batchInput"></el-input>
...@@ -53,8 +54,8 @@ ...@@ -53,8 +54,8 @@
</template> </template>
<script> <script>
import DateTimePicker from './dateTimePicker'
export default { export default {
name: 'skuView',
props: { props: {
sku: { sku: {
type: Array, type: Array,
...@@ -69,13 +70,13 @@ export default { ...@@ -69,13 +70,13 @@ export default {
} }
} }
}, },
components: { DateTimePicker },
data() { data() {
return { return {
header: [ header: [
{ formType: 'input', key: 'price', value: '价格(元)' }, { formType: 'input', key: 'price', value: '价格(元)' },
{ formType: 'input', key: 'mark_price', value: '划线价(元)' },
{ formType: 'input', key: 'stock', value: '库存' }, { formType: 'input', key: 'stock', value: '库存' },
{ formType: 'input', key: 'mark_price', value: '成本价' } { formType: 'input', key: 'prime_price', value: '成本价' }
], ],
showBatchInput: false, showBatchInput: false,
batchKey: '', // 当前批量修改的字段 batchKey: '', // 当前批量修改的字段
...@@ -92,27 +93,34 @@ export default { ...@@ -92,27 +93,34 @@ export default {
skuValueList: { skuValueList: {
handler: function (newValue) { handler: function (newValue) {
newValue.forEach((item, index) => { newValue.forEach((item, index) => {
console.log(item)
// 规格 // 规格
const values = item.reduce( const values = item.reduce(
(result, item) => { (result, item) => {
result.ids.push(item.spec_value_id) result.ids.push(item.spec_id)
result.names.push(item.spec_value) result.names.push(item.spec_name)
result.valueIds.push(item.spec_value_id)
result.valueNames.push(item.spec_value)
return result return result
}, },
{ ids: [], names: [] } { ids: [], names: [], valueIds: [], valueNames: [] }
) )
const valueIdsText = values.ids.join(',') const valueIdsText = values.valueIds.join(',')
const valueNamesText = values.names.join(',')
// 设置默认数据 // 设置默认数据
const defaultStock = Object.assign( const defaultStock = Object.assign(
{ spec_id: valueIdsText, spec_name: valueNamesText }, {
spec_id: valueIdsText,
spec_name: values.names.join(','),
spec_value_id: values.valueIds.join(','),
spec_value: values.valueNames.join(',')
},
this.defaultStockParams this.defaultStockParams
) )
// 查找原始数据 // 查找原始数据
const foundStock = this.stockList.find(item => item.spec_id === valueIdsText) const foundStock = this.stockList.find(item => item.spec_value_id === valueIdsText)
const stock = this.stockList[index] const stock = this.stockList[index]
// 重新排列数据 // 重新排列数据
if (!stock || (stock && stock.spec_id) !== valueIdsText) { if (!stock || (stock && stock.spec_value_id) !== valueIdsText) {
this.stockList.splice(index, 0, foundStock || defaultStock) this.stockList.splice(index, 0, foundStock || defaultStock)
} }
}) })
...@@ -131,7 +139,7 @@ export default { ...@@ -131,7 +139,7 @@ export default {
skuList() { skuList() {
const skuList = [] const skuList = []
this.sku.forEach(item => { this.sku.forEach(item => {
item.value && item.value.length && skuList.push(item) item.spec_values && item.spec_values.length && skuList.push(item)
}) })
return skuList return skuList
}, },
...@@ -139,16 +147,17 @@ export default { ...@@ -139,16 +147,17 @@ export default {
// tr总列数 // tr总列数
let trLength = 1 let trLength = 1
this.skuList.map(item => { this.skuList.map(item => {
trLength *= item.value.length trLength *= item.spec_values.length
}) })
let rowspanDivide = 1 let rowspanDivide = 1
const list = this.skuList.map(item => { const list = this.skuList.map(item => {
rowspanDivide *= item.value.length rowspanDivide *= item.spec_values.length
return item.value.map(value => { return item.spec_values.map(value => {
return Object.assign({ rowspan: trLength / rowspanDivide }, value) return Object.assign({ rowspan: trLength / rowspanDivide }, item, value)
}) })
}) })
console.log(list)
// 笛卡尔积 // 笛卡尔积
return list.length ? this.cartesianProduct(list) : list return list.length ? this.cartesianProduct(list) : list
}, },
......
<template>
<div class="app-breadcrumb">
<el-breadcrumb>
<el-breadcrumb-item v-for="route in routes" :key="route.path">
<router-link :to="route.path">{{ route.meta.title }}</router-link>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
name: 'Breadcrumb',
computed: {
routes() {
return this.$route.matched.filter(route => route.meta.title)
}
}
}
</script>
<style lang="scss">
.app-breadcrumb {
padding: 40px 0 32px;
.el-breadcrumb {
font-size: 24px;
font-weight: 400;
line-height: 1;
}
.el-breadcrumb__inner a {
font-weight: normal;
color: #5b91fd;
}
.router-link-active {
color: #1a1b1c;
}
}
</style>
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
<script> <script>
export default { export default {
name: 'AppHeader',
computed: { computed: {
user() { user() {
return this.$store.state.user return this.$store.state.user
......
<template> <template>
<div class="app-wrapper"> <div class="app-layout">
<app-sidebar></app-sidebar> <app-sidebar></app-sidebar>
<app-header></app-header> <app-header></app-header>
<app-main></app-main> <app-main v-bind="$attrs"></app-main>
</div> </div>
</template> </template>
...@@ -12,6 +12,7 @@ import AppHeader from './header' ...@@ -12,6 +12,7 @@ import AppHeader from './header'
import AppMain from './main' import AppMain from './main'
export default { export default {
name: 'AppLayout',
components: { AppSidebar, AppHeader, AppMain }, components: { AppSidebar, AppHeader, AppMain },
beforeMount() { beforeMount() {
// 获取店铺信息 // 获取店铺信息
...@@ -20,7 +21,7 @@ export default { ...@@ -20,7 +21,7 @@ export default {
} }
</script> </script>
<style> <style>
.app-wrapper { .app-layout {
min-height: 100vh; min-height: 100vh;
background-color: #ededed; background-color: #ededed;
} }
......
<template> <template>
<section class="app-main"> <section class="app-main">
<router-view></router-view> <div class="app-main-header">
<app-breadcrumb v-if="hasBreadcrumb"></app-breadcrumb>
</div>
<div class="app-main-container">
<router-view></router-view>
</div>
</section> </section>
</template> </template>
<script> <script>
import AppBreadcrumb from './breadcrumb'
export default { export default {
name: 'AppMain',
props: { hasBreadcrumb: { type: Boolean, default: true } },
components: { AppBreadcrumb },
watch: { watch: {
$route: { $route: {
immediate: true,
handler() { handler() {
// 没有shopId // 没有shopId
if (!this.$store.state.shopId) { if (!this.$store.state.shopId) {
this.$router.push({ path: '/shop' }) this.$router.push({ path: '/shop' })
} }
}, }
immediate: true
} }
} }
} }
...@@ -24,5 +33,11 @@ export default { ...@@ -24,5 +33,11 @@ export default {
.app-main { .app-main {
position: relative; position: relative;
margin-left: 200px; margin-left: 200px;
padding: 0 24px;
}
.app-main-container::after {
content: '';
display: table;
clear: both;
} }
</style> </style>
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<script> <script>
export default { export default {
name: 'AppSidebar',
data() { data() {
return { return {
menuList: [ menuList: [
......
<template> <template>
<page-container> <app-card>
<!--列表--> <!--列表-->
<table-list v-bind="tableOptions" ref="list"> <table-list v-bind="tableOptions" ref="list">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
...@@ -16,18 +16,18 @@ ...@@ -16,18 +16,18 @@
<el-button type="text" @click="handleCopy(row)">复制</el-button> <el-button type="text" @click="handleCopy(row)">复制</el-button>
</template> </template>
</table-list> </table-list>
</page-container> </app-card>
</template> </template>
<script> <script>
// 组件 // 组件
import TableList from '@/components/TableList' import TableList from '@/components/base/tableList'
import PageContainer from '@/components/common/pageContainer' import AppCard from '@/components/base/card'
// 接口 // 接口
import { getGoodsList } from '@/api/goods' import { getGoodsList } from '@/api/goods'
export default { export default {
components: { PageContainer, TableList }, components: { AppCard, TableList },
data() { data() {
return { return {
activeName: '1', activeName: '1',
...@@ -51,7 +51,7 @@ export default { ...@@ -51,7 +51,7 @@ export default {
return { return {
remote: { remote: {
httpRequest: getGoodsList, httpRequest: getGoodsList,
params: { shop_id: this.shopId, spu_name: '贵州空气', group_id: '' } params: { shop_id: this.shopId, spu_id: '', spu_name: '', group_id: '' }
}, },
filters: [ filters: [
{ {
......
<template>
<page-container v-loading="loading" element-loading-text="拼命加载中">
<!-- 基本信息 -->
<info-list :options="options" :data="detail"></info-list>
</page-container>
</template>
<script>
// 组件
import PageContainer from '@/components/common/pageContainer'
import InfoList from '@/components/common/infoList'
// 接口
import { viewGoodsGroup } from '@/api/goods'
export default {
components: { PageContainer, InfoList },
data() {
return {
pid: '', // ID
loading: true, // 加载中
options: [{ label: '分组名称', code: 'name' }],
detail: {} // 详情页数据
}
},
created() {
this.init()
},
methods: {
// 初始化
init() {
this.pid = this.$route.params.id
this.getDetail()
},
// 获取详情数据
getDetail() {
viewGoodsGroup({ id: this.pid }).then(response => {
this.detail = response.data
this.loading = false
})
}
}
}
</script>
<template> <template>
<page-container> <app-card>
<table-list v-bind="tableOptions" :hasPagination="false" ref="list"> <table-list v-bind="tableOptions" :hasPagination="false" ref="list">
<template #header-aside> <template #header-aside>
<el-button type="primary" @click="handleAdd">新建商品分组</el-button> <el-button type="primary" @click="handleAdd">新建商品分组</el-button>
...@@ -21,19 +21,19 @@ ...@@ -21,19 +21,19 @@
v-if="dialogVisible" v-if="dialogVisible"
/> />
</el-dialog> </el-dialog>
</page-container> </app-card>
</template> </template>
<script> <script>
// 组件 // 组件
import PageContainer from '@/components/common/pageContainer' import AppCard from '@/components/base/card'
import TableList from '@/components/TableList' import TableList from '@/components/base/tableList'
import GroupEdit from './edit' import GroupEdit from './edit'
// 接口 // 接口
import { getGroupList, deleteGroup } from '@/api/goods' import { getGroupList, deleteGroup } from '@/api/goods'
export default { export default {
components: { PageContainer, TableList, GroupEdit }, components: { AppCard, TableList, GroupEdit },
data() { data() {
return { return {
dialogVisible: false, dialogVisible: false,
......
<template> <template>
<page-container v-loading="loading" element-loading-text="拼命加载中"> <app-card v-loading="loading" element-loading-text="拼命加载中">
<el-container> <el-container>
<el-aside width="300px"> <el-aside width="300px">
<div style="text-align: left; margin-left: 20px"> <div style="text-align: left; margin-left: 20px">
...@@ -99,15 +99,15 @@ ...@@ -99,15 +99,15 @@
订单共{{ tableData.length }}件商品,总计: <a style="color: red">¥{{ dataDetail.goodAmount }}</a 订单共{{ tableData.length }}件商品,总计: <a style="color: red">¥{{ dataDetail.goodAmount }}</a
>(含运费 ¥0.00) >(含运费 ¥0.00)
</div> </div>
</page-container> </app-card>
</template> </template>
<script> <script>
import PageContainer from '@/components/common/pageContainer' import AppCard from '@/components/base/card'
import { getOrderDetail, closeOrder, refundOrder, Shipment } from '@/api/order' import { getOrderDetail, closeOrder, refundOrder, Shipment } from '@/api/order'
import * as utils from '@/utils/index' import * as utils from '@/utils/index'
export default { export default {
components: { PageContainer }, components: { AppCard },
data() { data() {
return { return {
loading: false, loading: false,
......
<template> <template>
<page-container> <app-card>
<!--列表--> <!--列表-->
<table-list v-bind="tableOptions" ref="list"> <table-list v-bind="tableOptions" ref="list">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
...@@ -16,18 +16,18 @@ ...@@ -16,18 +16,18 @@
<el-button type="text" @click="handleCopy(row)">复制</el-button> <el-button type="text" @click="handleCopy(row)">复制</el-button>
</template> </template>
</table-list> </table-list>
</page-container> </app-card>
</template> </template>
<script> <script>
// 组件 // 组件
import TableList from '@/components/TableList' import TableList from '@/components/base/tableList'
import PageContainer from '@/components/common/pageContainer' import AppCard from '@/components/base/card'
// 接口 // 接口
import { getGoodsList } from '@/api/goods' import { getGoodsList } from '@/api/goods'
export default { export default {
components: { PageContainer, TableList }, components: { AppCard, TableList },
data() { data() {
return { return {
activeName: '1', activeName: '1',
......
差异被折叠。
<template> <template>
<page-container> <app-card>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="width: 400px"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="width: 400px">
<el-form-item label="客户电话" prop="tel"> <el-form-item label="客户电话" prop="tel">
<el-input v-model="ruleForm.tel"></el-input> <el-input v-model="ruleForm.tel"></el-input>
...@@ -12,14 +12,14 @@ ...@@ -12,14 +12,14 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</page-container> </app-card>
</template> </template>
<script> <script>
import PageContainer from '@/components/common/pageContainer' import AppCard from '@/components/base/card'
export default { export default {
components: { PageContainer }, components: { AppCard },
data() { data() {
return { return {
ruleForm: { tel: '', address: '' }, ruleForm: { tel: '', address: '' },
......
<template> <template>
<page-container> <app-card title="商品规格">
<div class="module-item"> <div class="sku-item" v-for="(item, index) in skuList" :key="index">
<div class="module-item-hd"> <div class="sku-item-row">
<h2 class="module-item-hd__title">商品规格</h2> <div class="sku-item-row-left">
<label class="label">规格{{ index + 1 }}</label>
<el-input
v-model="item.spec_name"
placeholder="规格名"
:readonly="!!item.spec_id"
@blur="onNameBlur(item)"
@keyup.enter.native="onNameBlur(item)"
/>
</div>
<div class="sku-item-row-right is-right">
<el-button type="text" @click="removeSku(item, index)">删除规格</el-button>
</div>
</div> </div>
<div class="module-item-bd"> <div class="sku-item-row" v-for="item in item.spec_values" :key="item.spec_value_id">
<div class="sku-item" v-for="(item, index) in skuList" :key="index"> <div class="sku-item-row-left">
<div class="sku-item-row"> <el-input
<div class="sku-item-row-left"> placeholder="规格值"
<label class="label">规格{{ index + 1 }}</label> v-model="item.spec_value"
<el-input v-model="item.spec_name" placeholder="规格名" /> :readonly="!!item.spec_value_id"
</div> @blur="onNameBlur(item)"
<div class="sku-item-row-right is-right"> />
<el-button type="text" @click="removeSku(item, index)">删除规格</el-button> </div>
</div> <div class="sku-item-row-right">
</div> <div class="tools">
<div class="sku-item-row"> <!-- <i class="el-icon-circle-plus-outline" @click="addSkuValue(item, index)"></i> -->
<div class="sku-item-row-left"> <i class="el-icon-delete" @click="removeSkuValue(item, index)"></i>
<el-input placeholder="规格值" />
</div>
<div class="sku-item-row-right">
<div class="tools">
<i class="el-icon-circle-plus-outline" @click="addSkuValue(item, index)"></i>
<i class="el-icon-delete" @click="removeSkuValue(item, index)"></i>
</div>
</div>
</div> </div>
</div> </div>
<el-button type="text" @click="addSku"> </div>
<i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;创建新规格 <div class="sku-item-row">
</el-button> <div class="sku-item-row-left">
<el-button type="text" @click="addSkuValue(item)">
<i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;添加规格值
</el-button>
</div>
</div> </div>
</div> </div>
</page-container> <el-button type="text" @click="addSku">
<i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;创建新规格
</el-button>
</app-card>
</template> </template>
<script> <script>
import PageContainer from '@/components/common/pageContainer' import AppCard from '@/components/base/card'
import { getSkuNameList } from '@/api/goods' import { getSkuNameList, addSku, addSkuValue } from '@/api/goods'
export default { export default {
components: { PageContainer }, components: { AppCard },
data() { data() {
return { return {
ruleForm: { shop_name: '', shop_logo: '', shop_desc: '', shop_tel: '', shop_type: '1' }, ruleForm: { shop_name: '', shop_logo: '', shop_desc: '', shop_tel: '', shop_type: '1' },
...@@ -63,6 +74,25 @@ export default { ...@@ -63,6 +74,25 @@ export default {
this.skuList = res.data this.skuList = res.data
}) })
}, },
onNameBlur(item) {
if (item.spec_id) {
return
}
if (!item.spec_name) {
return
}
addSku({ shop_id: this.shopId, spec_name: item.spec_name }).then(res => {
this.getSkuNameList()
})
},
onValueBlur(item) {
if (item.spec_value_id) {
return
}
addSkuValue({ shop_id: this.shopId, spec_value: item.spec_value }).then(res => {
this.getSkuNameList()
})
},
// 添加规格 // 添加规格
addSku() { addSku() {
this.skuList.push({ spec_name: '' }) this.skuList.push({ spec_name: '' })
...@@ -80,19 +110,8 @@ export default { ...@@ -80,19 +110,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.module-item {
max-width: 800px;
}
.module-item-hd {
display: flex;
}
.module-item-hd__title {
flex: 1;
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
}
.sku-item { .sku-item {
max-width: 800px;
background-color: #f9f9f9; background-color: #f9f9f9;
border-radius: 8px; border-radius: 8px;
padding: 24px; padding: 24px;
......
<template> <template>
<page-container> <app-card title="基础信息">
<div class="module-item"> <template #header-aside><el-button type="text" @click="handleUpdate">编辑</el-button></template>
<div class="module-item-hd"> <div class="shop-info">
<h2 class="module-item-hd__title">基础信息</h2> <img :src="shop.shop_logo" class="shop-logo" />
<el-button type="text" @click="handleUpdate">编辑</el-button> <div class="shop-info-content">
</div> <h3 class="title">{{ shop.shop_name }}</h3>
<div class="module-item-bd shop-info"> <div class="item">
<img :src="shop.shop_logo" class="shop-logo" /> <label class="label">店铺编号:</label><span class="content">{{ shop.shop_id }}</span>
<div class="shop-info-content"> </div>
<h3 class="title">{{ shop.shop_name }}</h3> <div class="item">
<div class="item"> <label class="label">创建时间:</label><span class="content">{{ shop.create_time }}</span>
<label class="label">店铺编号:</label><span class="content">{{ shop.shop_id }}</span> </div>
</div> <div class="item">
<div class="item"> <label class="label">联系电话:</label><span class="content">{{ shop.tel }}</span>
<label class="label">创建时间:</label><span class="content">{{ shop.create_time }}</span>
</div>
<div class="item">
<label class="label">联系电话:</label><span class="content">{{ shop.tel }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -51,15 +46,15 @@ ...@@ -51,15 +46,15 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-dialog> </el-dialog>
</page-container> </app-card>
</template> </template>
<script> <script>
import PageContainer from '@/components/common/pageContainer' import AppCard from '@/components/base/card'
import AppUpload from '@/components/Upload' import AppUpload from '@/components/base/upload'
export default { export default {
components: { PageContainer, AppUpload }, components: { AppCard, AppUpload },
data() { data() {
return { return {
ruleForm: { shop_name: '', shop_logo: '', shop_desc: '', shop_tel: '', shop_type: '1' }, ruleForm: { shop_name: '', shop_logo: '', shop_desc: '', shop_tel: '', shop_type: '1' },
...@@ -91,17 +86,6 @@ export default { ...@@ -91,17 +86,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.module-item {
}
.module-item-hd {
display: flex;
}
.module-item-hd__title {
flex: 1;
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
}
.shop-info { .shop-info {
display: flex; display: flex;
} }
......
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<script> <script>
// 组件 // 组件
import PageMain from '@/components/common/pageMain' import PageMain from '@/components/common/pageMain'
import AppUpload from '@/components/Upload' import AppUpload from '@/components/base/upload'
// 接口 // 接口
import { addShop } from '@/api/shop' import { addShop } from '@/api/shop'
......
<template> <template>
<page-container v-loading="loading" element-loading-text="拼命加载中"> <page-main title="选择店铺">
<!-- 基本信息 --> <el-card class="box-card shop-card">
<info-list :options="options" :data="detailData"></info-list> <template #header>
</page-container> <div class="header">
<el-button type="primary" size="mini" @click="addShop">创建店铺</el-button>
</div>
</template>
<div class="shop-list" v-if="list.length">
<div class="item" v-for="item in list" :key="item.shop_id" @click="entryShop(item)">
<h2 class="title">{{ item.shop_name }}</h2>
<p>主体信息:{{ item.business_entity }}</p>
<p>有效期至:{{ item.end_time }}</p>
<span class="type">{{ typeName(item.shop_type) }}</span>
</div>
</div>
<div class="shop-tips" v-else>
<p><router-link to="/shop/add">创建</router-link>你的专属店铺</p>
</div>
</el-card>
</page-main>
</template> </template>
<script> <script>
// 组件 // 组件
import PageContainer from '@/components/common/pageContainer' import PageMain from '@/components/common/pageMain'
import InfoList from '@/components/common/infoList' // 接口
import { getShopDetail } from '@/api/shop' import { getShopList } from '@/api/shop'
export default { export default {
components: { PageContainer, InfoList }, components: { PageMain },
data() { data() {
return { return {
pid: '', // ID list: []
loading: true, // 加载中
options: [
{ label: '编号', code: 'id' },
{ label: '店铺名称', code: 'name' }
],
detailData: {} // 详情页数据
} }
}, },
created() { computed: {
this.pid = this.$route.params.id user() {
this.getDetail() return this.$store.state.user
}
}, },
methods: { methods: {
// 获取详情数据 typeName(value) {
getDetail() { const map = { 1: '微商城' }
this.loading = true return map[value]
// 请求接口 },
getShopDetail({ id: this.pid }).then(response => { // 获取店铺
this.detailData = response.data getShop() {
this.loading = false getShopList().then(res => {
this.list = res.data || []
}) })
},
entryShop(item) {
this.$store.dispatch('setShopId', item.shop_id)
// 进入店铺概括
this.$router.push({ path: '/dashboard' })
},
// 创建店铺
addShop() {
this.$router.push('/shop/add')
} }
},
beforeMount() {
this.getShop()
} }
} }
</script> </script>
<style lang="scss">
.shop-card {
border: 0;
border-radius: 0;
}
.shop-card .el-card__header {
padding: 0 40px;
background: #f8f8f8;
border-bottom: 0;
}
.shop-card .header {
height: 70px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.shop-list {
overflow: hidden;
display: flex;
flex-wrap: wrap;
margin-left: -22px;
.item {
width: 300px;
height: 130px;
padding: 0 20px;
margin-left: 25px;
margin-bottom: 25px;
border-radius: 2px;
border: 1px solid #e5e5e5;
border-top: 3px solid #d5d7db;
background: #fff;
cursor: pointer;
color: #999;
box-sizing: border-box;
p {
padding-bottom: 5px;
}
}
.title {
margin-top: 18px;
line-height: 20px;
padding-bottom: 5px;
font-size: 14px;
color: #111;
font-weight: 400;
}
.type {
display: inline-block;
padding: 0 3px;
font-size: 12px;
line-height: 1.5;
color: var(--main-color);
border: 1px solid var(--main-color);
border-radius: 2px;
}
}
.shop-tips {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<template>
<page-main title="选择店铺">
<el-card class="box-card shop-card">
<template #header>
<div class="header">
<el-button type="primary" size="mini" @click="addShop">创建店铺</el-button>
</div>
</template>
<div class="shop-list" v-if="list.length">
<div class="item" v-for="item in list" :key="item.shop_id" @click="entryShop(item)">
<h2 class="title">{{ item.shop_name }}</h2>
<p>主体信息:{{ item.business_entity }}</p>
<p>有效期至:{{ item.end_time }}</p>
<span class="type">{{ typeName(item.shop_type) }}</span>
</div>
</div>
<div class="shop-tips" v-else>
<p><router-link to="/shop/add">创建</router-link>你的专属店铺</p>
</div>
</el-card>
</page-main>
</template>
<script>
// 组件
import PageMain from '@/components/common/pageMain'
// 接口
import { getShopList } from '@/api/shop'
export default {
components: { PageMain },
data() {
return {
list: []
}
},
computed: {
user() {
return this.$store.state.user
}
},
methods: {
typeName(value) {
const map = { 1: '微商城' }
return map[value]
},
// 获取店铺
getShop() {
getShopList().then(res => {
this.list = res.data || []
})
},
entryShop(item) {
this.$store.dispatch('setShopId', item.shop_id)
// 进入店铺概括
this.$router.push({ path: '/dashboard' })
},
// 创建店铺
addShop() {
this.$router.push('/shop/add')
}
},
beforeMount() {
this.getShop()
}
}
</script>
<style lang="scss">
.shop-card {
border: 0;
border-radius: 0;
}
.shop-card .el-card__header {
padding: 0 40px;
background: #f8f8f8;
border-bottom: 0;
}
.shop-card .header {
height: 70px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.shop-list {
overflow: hidden;
display: flex;
flex-wrap: wrap;
margin-left: -22px;
.item {
width: 300px;
height: 130px;
padding: 0 20px;
margin-left: 25px;
margin-bottom: 25px;
border-radius: 2px;
border: 1px solid #e5e5e5;
border-top: 3px solid #d5d7db;
background: #fff;
cursor: pointer;
color: #999;
box-sizing: border-box;
p {
padding-bottom: 5px;
}
}
.title {
margin-top: 18px;
line-height: 20px;
padding-bottom: 5px;
font-size: 14px;
color: #111;
font-weight: 400;
}
.type {
display: inline-block;
padding: 0 3px;
font-size: 12px;
line-height: 1.5;
color: var(--main-color);
border: 1px solid var(--main-color);
border-radius: 2px;
}
}
.shop-tips {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
/* layout */ /* layout */
import Layout from '@/components/layout/layout' import Layout from '@/components/layout/layout'
// /* 商品 */
// const GoodsEdit = () => import(/* webpackChunkName: "goods" */ '@/pages/goods/edit')
// /* 商品分组 */
// const GoodsGroup = () => import(/* webpackChunkName: "goods" */ '@/pages/goods/group/index')
// const GoodsGroupEdit = () => import(/* webpackChunkName: "goods" */ '@/pages/goods/group/edit')
// const GoodsGroupDetail = () => import(/* webpackChunkName: "goods" */ '@/pages/goods/group/detail')
// /* 订单 */
const orderList = () => import(/* webpackChunkName: "order" */ '@/pages/order/orderList')
// const orderDetail = () => import(/* webpackChunkName: "order" */ '@/pages/order/orderDetail')
export default [ export default [
{ path: '*', redirect: '/dashboard' }, { path: '*', redirect: '/dashboard' },
{ {
path: '/dashboard', path: '/dashboard',
component: Layout, component: Layout,
props: { hasBreadcrumb: false },
children: [ children: [
{ {
path: '', path: '',
component: () => import(/* webpackChunkName: "shop" */ '@/pages/dashboard/index'), component: () => import(/* webpackChunkName: "dashboard" */ '@/pages/dashboard/index'),
meta: { title: '首页' } meta: { title: '首页' }
} }
] ]
}, },
// 店铺
{ {
path: '/shop', path: '/shop',
component: () => import(/* webpackChunkName: "shop" */ '@/pages/shop/list'), component: () => import(/* webpackChunkName: "shop" */ '@/pages/shop/index'),
meta: { title: '选择店铺' } meta: { title: '选择店铺' }
}, },
{ {
...@@ -44,47 +34,24 @@ export default [ ...@@ -44,47 +34,24 @@ export default [
children: [ children: [
{ {
path: '', path: '',
component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/index'), component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/goods/index'),
meta: { title: '商品列表' } meta: { title: '商品列表' }
}, },
{ {
path: 'add', path: 'add',
component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/edit'), component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/goods/edit'),
meta: { title: '发布商品' } meta: { title: '发布商品' }
}, },
{ {
path: 'edit/:id', path: 'edit/:id',
component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/edit'), component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/goods/edit'),
meta: { title: '编辑商品' } meta: { title: '编辑商品' }
} },
]
},
// 商品分组
{
path: '/goods/group',
component: Layout,
meta: { title: '商品' },
children: [
{ {
path: '', path: 'group',
component: () => import(/* webpackChunkName: "goods-group" */ '@/pages/goods/group/index'), component: () => import(/* webpackChunkName: "goods-group" */ '@/pages/goods/group/index'),
meta: { title: '商品分组' } meta: { title: '商品分组' }
} }
// {
// path: 'add',
// component: GoodsGroupEdit,
// meta: { title: '新建商品分组' }
// },
// {
// path: 'edit/:id',
// component: GoodsGroupEdit,
// meta: { title: '编辑商品分组' }
// },
// {
// path: 'detail/:id',
// component: GoodsGroupDetail,
// meta: { title: '查看商品分组' }
// }
] ]
}, },
// 订单管理 // 订单管理
...@@ -93,7 +60,11 @@ export default [ ...@@ -93,7 +60,11 @@ export default [
component: Layout, component: Layout,
meta: { title: '订单' }, meta: { title: '订单' },
children: [ children: [
{ path: '', component: orderList, meta: { title: '订单列表' } } {
path: '',
component: () => import(/* webpackChunkName: "order" */ '@/pages/order/index'),
meta: { title: '订单列表' }
}
// { // {
// path: 'detail/:id', // path: 'detail/:id',
// component: orderDetail, // component: orderDetail,
......
...@@ -16,6 +16,13 @@ httpRequest.interceptors.request.use( ...@@ -16,6 +16,13 @@ httpRequest.interceptors.request.use(
if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') { if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
config.data = qs.stringify(config.data) config.data = qs.stringify(config.data)
} }
if (config.headers['Content-Type'] === 'multipart/form-data') {
const formData = new window.FormData()
for (const key in config.data) {
formData.append(key, config.data[key])
}
config.data = formData
}
return config return config
}, },
function(error) { function(error) {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论