Skip to content

C
center-shop
提交 91859b33 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

update

上级 379ed892
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 376 行增加 和 605 行删除
src/api/base.js
浏览文件 @ 91859b33
......@@ -17,5 +17,13 @@ export function getToken() {
// 获取oss signature
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' }
})
}
src/components/common/pageContainer.vue → src/components/base/card.vue
浏览文件 @ 91859b33
<template>
<div class="container">
<header class="container-header">
<div class="app-card">
<div class="app-card-hd">
<slot name="header">
<app-breadCrumb></app-breadCrumb>
<h2 class="app-card-hd__title" v-if="title">{{ title }}</h2>
<slot name="header-aside"></slot>
</slot>
</header>
<main class="container-main">
</div>
<div class="app-card-bd">
<slot></slot>
</main>
<footer class="container-footer">
<slot name="footer"></slot>
</footer>
</div>
</div>
</template>
<script>
import AppBreadCrumb from './breadCrumb'
export default {
components: { AppBreadCrumb },
props: { title: { type: String } },
data() {
return {}
}
name: 'AppCard',
props: { title: String }
}
</script>
<style>
.container::after {
content: '';
display: table;
clear: both;
}
.container {
padding: 0 24px;
}
.container-main {
.app-card {
background: #ffffff;
box-shadow: 0 1px 6px 0 rgb(228 232 235 / 20%);
border-radius: 8px;
margin-bottom: 64px;
margin-bottom: 20px;
padding: 32px;
}
.app-card-hd {
display: flex;
}
.app-card-hd__title {
flex: 1;
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
}
</style>
src/components/TableList.vue → src/components/base/tableList.vue
浏览文件 @ 91859b33
......@@ -57,6 +57,7 @@
:page-sizes="[10, 20, 30, 50, 100]"
:page-size="page.size"
:total="page.total"
:current-page.sync="page.currentPage"
@size-change="pageSizeChange"
@current-change="fetchList"
v-if="hasPagination"
......@@ -120,7 +121,7 @@ export default {
let params = this.params
// 翻页参数设置
if (this.hasPagination) {
params.page = this.page.currentPage.toString()
params.page = (this.page.currentPage - 1).toString()
params.page_size = this.page.size.toString()
}
// 接口请求之前
......
src/components/Upload.vue → src/components/base/upload.vue
浏览文件 @ 91859b33
......@@ -20,7 +20,7 @@
import { getSignature } from '@/api/base'
import md5 from 'blueimp-md5'
export default {
name: 'UploadImage',
name: 'AppUpload',
props: {
value: { type: String },
prefix: { type: String, default: 'upload/shop-admin/' }
......
src/components/common/dateTimePicker.vue deleted 100644 → 0
浏览文件 @ 379ed892
<!--日期组件-->
<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>
src/components/common/timerButton.vue deleted 100644 → 0
浏览文件 @ 379ed892
<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>
src/components/common/userAutoComplete.vue deleted 100644 → 0
浏览文件 @ 379ed892
<!--用户自动提示组件-->
<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>
src/components/common/sku.vue → src/components/goods/sku.vue
浏览文件 @ 91859b33
......@@ -20,6 +20,7 @@ import skuGroup from './skuGroup'
import { getSkuNameList } from '@/api/goods'
export default {
name: 'sku',
components: { skuGroup },
props: {
value: { type: Array, default: () => [] }
......@@ -30,7 +31,7 @@ export default {
{
spec_id: '1',
spec_name: '颜色',
value: [
spec_values: [
{ spec_value_id: '1', spec_value: '红' },
{ spec_value_id: '2', spec_value: '黄' },
{ spec_value_id: '3', spec_value: '蓝' }
......@@ -39,7 +40,7 @@ export default {
{
spec_id: '2',
spec_name: '大小',
value: [
spec_values: [
{ spec_value_id: '1', spec_value: 'L' },
{ spec_value_id: '2', spec_value: 'M' }
]
......@@ -64,18 +65,15 @@ export default {
},
// 添加规格
addSku() {
this.skuList.push({ key: '', value: [] })
this.skuList.push({ key: '', spec_values: [] })
},
// 删除规格
groupRemove(index) {
this.skuList.splice(index, 1)
},
groupChange(index, arg) {
this.skuList.splice(index, 1, arg[0])
}
},
beforeMount() {
// this.getSkuNameList()
this.getSkuNameList()
}
}
</script>
......
src/components/common/skuGroup.vue → src/components/goods/skuGroup.vue
浏览文件 @ 91859b33
......@@ -20,7 +20,7 @@
</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">
<el-select
v-model="data.spec_value_id"
......@@ -41,7 +41,7 @@
<div class="sku-item-row-right">
<div class="tools">
<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>
......@@ -49,8 +49,8 @@
</template>
<script>
import { getSkuValueList } from '@/api/goods'
export default {
name: 'skuGroup',
props: {
index: { type: Number, default: 0 }, // 索引
skuList: { type: Array, default: () => [] }, // 规格列表
......@@ -74,12 +74,12 @@ export default {
// 规格值列表
skuValueList() {
const found = this.skuNameList.find(item => item.spec_id === this.skuItem.spec_id)
return found ? found.value || [] : []
return found ? found.spec_values || [] : []
},
// 规格值数据处理后的列表
currentSkuValueList() {
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
})
}
......@@ -90,26 +90,23 @@ export default {
const found = this.skuNameList.find(item => item.spec_id === id)
// const value = { spec_id: id, spec_name: found.spec_name, value: [] }
this.skuItem.spec_name = found.spec_name
this.skuItem.value = [{}]
this.skuItem.spec_values = [{}]
},
// 规格值改变
skuValueChange(id, index) {
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) {
this.skuList.splice(index, 1)
},
// 添加
addSkuValue(index) {
this.skuItem.value.splice(index + 1, 0, {})
this.skuItem.spec_values.splice(index + 1, 0, {})
},
// 删除
removeSkuValue(index) {
this.skuItem.value.splice(index, 1)
},
getSkuValueList(item) {
getSkuValueList({ shop_id: this.shopId, spec_id: item.spec_id }).then(res => {})
this.skuItem.spec_values.splice(index, 1)
}
}
}
......
src/components/common/skuView.vue → src/components/goods/skuView.vue
浏览文件 @ 91859b33
......@@ -41,7 +41,8 @@
<div class="batch-buttons" v-if="!showBatchInput">
<el-button type="text" @click="batchUpdate('price')">价格</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 class="batch-input" v-else>
<el-input type="number" size="small" v-model="batchInputValue" ref="batchInput"></el-input>
......@@ -53,8 +54,8 @@
</template>
<script>
import DateTimePicker from './dateTimePicker'
export default {
name: 'skuView',
props: {
sku: {
type: Array,
......@@ -69,13 +70,13 @@ export default {
}
}
},
components: { DateTimePicker },
data() {
return {
header: [
{ formType: 'input', key: 'price', value: '价格（元）' },
{ formType: 'input', key: 'mark_price', value: '划线价（元）' },
{ formType: 'input', key: 'stock', value: '库存' },
{ formType: 'input', key: 'mark_price', value: '成本价' }
{ formType: 'input', key: 'prime_price', value: '成本价' }
],
showBatchInput: false,
batchKey: '', // 当前批量修改的字段
......@@ -92,27 +93,34 @@ export default {
skuValueList: {
handler: function (newValue) {
newValue.forEach((item, index) => {
console.log(item)
// 规格
const values = item.reduce(
(result, item) => {
result.ids.push(item.spec_value_id)
result.names.push(item.spec_value)
result.ids.push(item.spec_id)
result.names.push(item.spec_name)
result.valueIds.push(item.spec_value_id)
result.valueNames.push(item.spec_value)
return result
},
{ ids: [], names: [] }
{ ids: [], names: [], valueIds: [], valueNames: [] }
)
const valueIdsText = values.ids.join(',')
const valueNamesText = values.names.join(',')
const valueIdsText = values.valueIds.join(',')
// 设置默认数据
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
)
// 查找原始数据
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]
// 重新排列数据
if (!stock || (stock && stock.spec_id) !== valueIdsText) {
if (!stock || (stock && stock.spec_value_id) !== valueIdsText) {
this.stockList.splice(index, 0, foundStock || defaultStock)
}
})
......@@ -131,7 +139,7 @@ export default {
skuList() {
const skuList = []
this.sku.forEach(item => {
item.value && item.value.length && skuList.push(item)
item.spec_values && item.spec_values.length && skuList.push(item)
})
return skuList
},
......@@ -139,16 +147,17 @@ export default {
// tr总列数
let trLength = 1
this.skuList.map(item => {
trLength *= item.value.length
trLength *= item.spec_values.length
})
let rowspanDivide = 1
const list = this.skuList.map(item => {
rowspanDivide *= item.value.length
return item.value.map(value => {
return Object.assign({ rowspan: trLength / rowspanDivide }, value)
rowspanDivide *= item.spec_values.length
return item.spec_values.map(value => {
return Object.assign({ rowspan: trLength / rowspanDivide }, item, value)
})
})
console.log(list)
// 笛卡尔积
return list.length ? this.cartesianProduct(list) : list
},
......
src/components/layout/breadcrumb.vue 0 → 100644
浏览文件 @ 91859b33
<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>
src/components/layout/header.vue
浏览文件 @ 91859b33
......@@ -20,6 +20,7 @@
<script>
export default {
name: 'AppHeader',
computed: {
user() {
return this.$store.state.user
......
src/components/layout/layout.vue
浏览文件 @ 91859b33
<template>
<div class="app-wrapper">
<div class="app-layout">
<app-sidebar></app-sidebar>
<app-header></app-header>
<app-main></app-main>
<app-main v-bind="$attrs"></app-main>
</div>
</template>
......@@ -12,6 +12,7 @@ import AppHeader from './header'
import AppMain from './main'
export default {
name: 'AppLayout',
components: { AppSidebar, AppHeader, AppMain },
beforeMount() {
// 获取店铺信息
......@@ -20,7 +21,7 @@ export default {
}
</script>
<style>
.app-wrapper {
.app-layout {
min-height: 100vh;
background-color: #ededed;
}
......
src/components/layout/main.vue
浏览文件 @ 91859b33
<template>
<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>
</template>
<script>
import AppBreadcrumb from './breadcrumb'
export default {
name: 'AppMain',
props: { hasBreadcrumb: { type: Boolean, default: true } },
components: { AppBreadcrumb },
watch: {
$route: {
immediate: true,
handler() {
// 没有shopId
if (!this.$store.state.shopId) {
this.$router.push({ path: '/shop' })
}
},
immediate: true
}
}
}
}
......@@ -24,5 +33,11 @@ export default {
.app-main {
position: relative;
margin-left: 200px;
padding: 0 24px;
}
.app-main-container::after {
content: '';
display: table;
clear: both;
}
</style>
src/components/layout/sidebar.vue
浏览文件 @ 91859b33
......@@ -23,6 +23,7 @@
<script>
export default {
name: 'AppSidebar',
data() {
return {
menuList: [
......
src/pages/goods/index.vue → src/pages/goods/goods/index.vue
浏览文件 @ 91859b33
<template>
<page-container>
<app-card>
<!--列表-->
<table-list v-bind="tableOptions" ref="list">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
......@@ -16,18 +16,18 @@
<el-button type="text" @click="handleCopy(row)">复制</el-button>
</template>
</table-list>
</page-container>
</app-card>
</template>
<script>
// 组件
import TableList from '@/components/TableList'
import PageContainer from '@/components/common/pageContainer'
import TableList from '@/components/base/tableList'
import AppCard from '@/components/base/card'
// 接口
import { getGoodsList } from '@/api/goods'
export default {
components: { PageContainer, TableList },
components: { AppCard, TableList },
data() {
return {
activeName: '1',
......@@ -51,7 +51,7 @@ export default {
return {
remote: {
httpRequest: getGoodsList,
params: { shop_id: this.shopId, spu_name: '贵州空气', group_id: '' }
params: { shop_id: this.shopId, spu_id: '', spu_name: '', group_id: '' }
},
filters: [
{
......
src/pages/goods/group/detail.vue deleted 100644 → 0
浏览文件 @ 379ed892
<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>
src/pages/goods/group/index.vue
浏览文件 @ 91859b33
<template>
<page-container>
<app-card>
<table-list v-bind="tableOptions" :hasPagination="false" ref="list">
<template #header-aside>
<el-button type="primary" @click="handleAdd">新建商品分组</el-button>
......@@ -21,19 +21,19 @@
v-if="dialogVisible"
/>
</el-dialog>
</page-container>
</app-card>
</template>
<script>
// 组件
import PageContainer from '@/components/common/pageContainer'
import TableList from '@/components/TableList'
import AppCard from '@/components/base/card'
import TableList from '@/components/base/tableList'
import GroupEdit from './edit'
// 接口
import { getGroupList, deleteGroup } from '@/api/goods'
export default {
components: { PageContainer, TableList, GroupEdit },
components: { AppCard, TableList, GroupEdit },
data() {
return {
dialogVisible: false,
......
src/pages/order/orderDetail.vue → src/pages/order/detail.vue
浏览文件 @ 91859b33
<template>
<page-container v-loading="loading" element-loading-text="拼命加载中">
<app-card v-loading="loading" element-loading-text="拼命加载中">
<el-container>
<el-aside width="300px">
<div style="text-align: left; margin-left: 20px">
......@@ -99,15 +99,15 @@
订单共{{ tableData.length }}件商品，总计： <a style="color: red">￥{{ dataDetail.goodAmount }}</a
>（含运费 ￥0.00）
</div>
</page-container>
</app-card>
</template>
<script>
import PageContainer from '@/components/common/pageContainer'
import AppCard from '@/components/base/card'
import { getOrderDetail, closeOrder, refundOrder, Shipment } from '@/api/order'
import * as utils from '@/utils/index'
export default {
components: { PageContainer },
components: { AppCard },
data() {
return {
loading: false,
......
src/pages/order/orderList.vue → src/pages/order/index.vue
浏览文件 @ 91859b33
<template>
<page-container>
<app-card>
<!--列表-->
<table-list v-bind="tableOptions" ref="list">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
......@@ -16,18 +16,18 @@
<el-button type="text" @click="handleCopy(row)">复制</el-button>
</template>
</table-list>
</page-container>
</app-card>
</template>
<script>
// 组件
import TableList from '@/components/TableList'
import PageContainer from '@/components/common/pageContainer'
import TableList from '@/components/base/tableList'
import AppCard from '@/components/base/card'
// 接口
import { getGoodsList } from '@/api/goods'
export default {
components: { PageContainer, TableList },
components: { AppCard, TableList },
data() {
return {
activeName: '1',
......
src/pages/order/pageOrderList.vue deleted 100644 → 0
浏览文件 @ 379ed892
差异被折叠。
src/pages/setting/contact.vue
浏览文件 @ 91859b33
<template>
<page-container>
<app-card>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="width: 400px">
<el-form-item label="客户电话" prop="tel">
<el-input v-model="ruleForm.tel"></el-input>
......@@ -12,14 +12,14 @@
</el-input>
</el-form-item>
</el-form>
</page-container>
</app-card>
</template>
<script>
import PageContainer from '@/components/common/pageContainer'
import AppCard from '@/components/base/card'
export default {
components: { PageContainer },
components: { AppCard },
data() {
return {
ruleForm: { tel: '', address: '' },
......
src/pages/setting/goods.vue
浏览文件 @ 91859b33
<template>
<page-container>
<div class="module-item">
<div class="module-item-hd">
<h2 class="module-item-hd__title">商品规格</h2>
<app-card title="商品规格">
<div class="sku-item" v-for="(item, index) in skuList" :key="index">
<div class="sku-item-row">
<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 class="module-item-bd">
<div class="sku-item" v-for="(item, index) in skuList" :key="index">
<div class="sku-item-row">
<div class="sku-item-row-left">
<label class="label">规格{{ index + 1 }}</label>
<el-input v-model="item.spec_name" placeholder="规格名" />
</div>
<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">
<div class="sku-item-row-left">
<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 class="sku-item-row" v-for="item in item.spec_values" :key="item.spec_value_id">
<div class="sku-item-row-left">
<el-input
placeholder="规格值"
v-model="item.spec_value"
:readonly="!!item.spec_value_id"
@blur="onNameBlur(item)"
/>
</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>
<el-button type="text" @click="addSku">
<i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;创建新规格
</el-button>
</div>
<div class="sku-item-row">
<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>
</page-container>
<el-button type="text" @click="addSku">
<i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;创建新规格
</el-button>
</app-card>
</template>
<script>
import PageContainer from '@/components/common/pageContainer'
import { getSkuNameList } from '@/api/goods'
import AppCard from '@/components/base/card'
import { getSkuNameList, addSku, addSkuValue } from '@/api/goods'
export default {
components: { PageContainer },
components: { AppCard },
data() {
return {
ruleForm: { shop_name: '', shop_logo: '', shop_desc: '', shop_tel: '', shop_type: '1' },
......@@ -63,6 +74,25 @@ export default {
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() {
this.skuList.push({ spec_name: '' })
......@@ -80,19 +110,8 @@ export default {
</script>
<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 {
max-width: 800px;
background-color: #f9f9f9;
border-radius: 8px;
padding: 24px;
......
src/pages/setting/info.vue
浏览文件 @ 91859b33
<template>
<page-container>
<div class="module-item">
<div class="module-item-hd">
<h2 class="module-item-hd__title">基础信息</h2>
<el-button type="text" @click="handleUpdate">编辑</el-button>
</div>
<div class="module-item-bd shop-info">
<img :src="shop.shop_logo" class="shop-logo" />
<div class="shop-info-content">
<h3 class="title">{{ shop.shop_name }}</h3>
<div class="item">
<label class="label">店铺编号：</label><span class="content">{{ shop.shop_id }}</span>
</div>
<div class="item">
<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>
<app-card title="基础信息">
<template #header-aside><el-button type="text" @click="handleUpdate">编辑</el-button></template>
<div class="shop-info">
<img :src="shop.shop_logo" class="shop-logo" />
<div class="shop-info-content">
<h3 class="title">{{ shop.shop_name }}</h3>
<div class="item">
<label class="label">店铺编号：</label><span class="content">{{ shop.shop_id }}</span>
</div>
<div class="item">
<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>
......@@ -51,15 +46,15 @@
</el-form-item>
</el-form>
</el-dialog>
</page-container>
</app-card>
</template>
<script>
import PageContainer from '@/components/common/pageContainer'
import AppUpload from '@/components/Upload'
import AppCard from '@/components/base/card'
import AppUpload from '@/components/base/upload'
export default {
components: { PageContainer, AppUpload },
components: { AppCard, AppUpload },
data() {
return {
ruleForm: { shop_name: '', shop_logo: '', shop_desc: '', shop_tel: '', shop_type: '1' },
......@@ -91,17 +86,6 @@ export default {
</script>
<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 {
display: flex;
}
......
src/pages/shop/add.vue
浏览文件 @ 91859b33
......@@ -36,7 +36,7 @@
<script>
// 组件
import PageMain from '@/components/common/pageMain'
import AppUpload from '@/components/Upload'
import AppUpload from '@/components/base/upload'
// 接口
import { addShop } from '@/api/shop'
......
src/pages/shop/index.vue
浏览文件 @ 91859b33
<template>
<page-container v-loading="loading" element-loading-text="拼命加载中">
<!-- 基本信息 -->
<info-list :options="options" :data="detailData"></info-list>
</page-container>
<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 PageContainer from '@/components/common/pageContainer'
import InfoList from '@/components/common/infoList'
import { getShopDetail } from '@/api/shop'
import PageMain from '@/components/common/pageMain'
// 接口
import { getShopList } from '@/api/shop'
export default {
components: { PageContainer, InfoList },
components: { PageMain },
data() {
return {
pid: '', // ID
loading: true, // 加载中
options: [
{ label: '编号', code: 'id' },
{ label: '店铺名称', code: 'name' }
],
detailData: {} // 详情页数据
list: []
}
},
created() {
this.pid = this.$route.params.id
this.getDetail()
computed: {
user() {
return this.$store.state.user
}
},
methods: {
// 获取详情数据
getDetail() {
this.loading = true
// 请求接口
getShopDetail({ id: this.pid }).then(response => {
this.detailData = response.data
this.loading = false
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>
src/pages/shop/list.vue deleted 100644 → 0
浏览文件 @ 379ed892
<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>
src/router/routes.js
浏览文件 @ 91859b33
/* 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 [
{ path: '*', redirect: '/dashboard' },
{
path: '/dashboard',
component: Layout,
props: { hasBreadcrumb: false },
children: [
{
path: '',
component: () => import(/* webpackChunkName: "shop" */ '@/pages/dashboard/index'),
component: () => import(/* webpackChunkName: "dashboard" */ '@/pages/dashboard/index'),
meta: { title: '首页' }
}
]
},
// 店铺
{
path: '/shop',
component: () => import(/* webpackChunkName: "shop" */ '@/pages/shop/list'),
component: () => import(/* webpackChunkName: "shop" */ '@/pages/shop/index'),
meta: { title: '选择店铺' }
},
{
......@@ -44,47 +34,24 @@ export default [
children: [
{
path: '',
component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/index'),
component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/goods/index'),
meta: { title: '商品列表' }
},
{
path: 'add',
component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/edit'),
component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/goods/edit'),
meta: { title: '发布商品' }
},
{
path: 'edit/:id',
component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/edit'),
component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/goods/edit'),
meta: { title: '编辑商品' }
}
]
},
// 商品分组
{
path: '/goods/group',
component: Layout,
meta: { title: '商品' },
children: [
},
{
path: '',
path: 'group',
component: () => import(/* webpackChunkName: "goods-group" */ '@/pages/goods/group/index'),
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 [
component: Layout,
meta: { title: '订单' },
children: [
{ path: '', component: orderList, meta: { title: '订单列表' } }
{
path: '',
component: () => import(/* webpackChunkName: "order" */ '@/pages/order/index'),
meta: { title: '订单列表' }
}
// {
// path: 'detail/:id',
// component: orderDetail,
......
src/utils/axios.js
浏览文件 @ 91859b33
......@@ -16,6 +16,13 @@ httpRequest.interceptors.request.use(
if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
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
},
function(error) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论