提交 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">
<div class="app-main-header">
<app-breadcrumb v-if="hasBreadcrumb"></app-breadcrumb>
</div>
<div class="app-main-container">
<router-view></router-view> <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 v-loading="loading" element-loading-text="拼命加载中"> <div v-loading="loading" element-loading-text="拼命加载中">
<div class="main-form" style="max-width: none">
<el-form :model="ruleForm" :rules="rules" label-width="120px" ref="ruleForm" @submit.native.prevent> <el-form :model="ruleForm" :rules="rules" label-width="120px" ref="ruleForm" @submit.native.prevent>
<div class="module-item"> <app-card title="商品类型">
<div class="module-item-title">商品类型</div>
<div class="module-item-content">
<el-radio-group v-model="ruleForm.category_id"> <el-radio-group v-model="ruleForm.category_id">
<el-radio :label="item.id" border v-for="item in goodsType" :key="item.id">{{ item.name }}</el-radio> <el-radio :label="item.id" border v-for="item in goodsType" :key="item.id">{{ item.name }}</el-radio>
</el-radio-group> </el-radio-group>
</div> </app-card>
</div> <app-card title="基本信息">
<div class="module-item"> <el-form-item label="商品名" prop="spu_name">
<div class="module-item-title">基本信息</div> <el-input placeholder="请输入店铺、品牌、机构的全称" v-model="ruleForm.spu_name"></el-input>
<div class="module-item-content">
<el-form-item label="商品名" prop="name">
<el-input placeholder="请输入店铺、品牌、机构的全称" v-model="ruleForm.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="分享描述" prop="describe"> <el-form-item label="分享描述" prop="describe">
<el-input v-model="ruleForm.describe"></el-input> <el-input v-model="ruleForm.describe"></el-input>
...@@ -36,19 +30,11 @@ ...@@ -36,19 +30,11 @@
</el-form-item> </el-form-item>
<el-form-item label="商品分组" prop="group_id"> <el-form-item label="商品分组" prop="group_id">
<el-select v-model="ruleForm.group_id" placeholder="选择商品分组"> <el-select v-model="ruleForm.group_id" placeholder="选择商品分组">
<el-option <el-option v-for="item in groupList" :label="item.group_name" :value="item.group_id" :key="item.group_id" />
v-for="item in groupList"
:label="item.group_name"
:value="item.group_id"
:key="item.group_id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</div> </app-card>
</div> <app-card title="价格库存">
<div class="module-item">
<div class="module-item-title">价格库存</div>
<div class="module-item-content">
<el-form-item label="商品规格" prop="skuKeyValueList"> <el-form-item label="商品规格" prop="skuKeyValueList">
<sku v-model="ruleForm.skuKeyValueList"></sku> <sku v-model="ruleForm.skuKeyValueList"></sku>
</el-form-item> </el-form-item>
...@@ -59,7 +45,7 @@ ...@@ -59,7 +45,7 @@
> >
<sku-view :sku="ruleForm.skuKeyValueList" v-model="ruleForm.goodStockList"></sku-view> <sku-view :sku="ruleForm.skuKeyValueList" v-model="ruleForm.goodStockList"></sku-view>
</el-form-item> </el-form-item>
<el-form-item label="价格" prop="sellPrice"> <!-- <el-form-item label="价格" prop="sellPrice">
<el-input v-model="ruleForm.sellPrice" :disabled="disabledInput"> <el-input v-model="ruleForm.sellPrice" :disabled="disabledInput">
<template slot="prepend">¥</template> <template slot="prepend">¥</template>
</el-input> </el-input>
...@@ -74,12 +60,9 @@ ...@@ -74,12 +60,9 @@
<el-input v-model="ruleForm.code"> <el-input v-model="ruleForm.code">
<template slot="prepend">¥</template> <template slot="prepend">¥</template>
</el-input> </el-input>
</el-form-item> </el-form-item> -->
</div> </app-card>
</div> <app-card title="其他信息">
<div class="module-item">
<div class="module-item-title">其他信息</div>
<div class="module-item-content">
<el-form-item label="开售方式" prop="sales_type"> <el-form-item label="开售方式" prop="sales_type">
<el-radio-group v-model="ruleForm.sales_type"> <el-radio-group v-model="ruleForm.sales_type">
<el-radio label="1">立即开售</el-radio> <el-radio label="1">立即开售</el-radio>
...@@ -97,44 +80,38 @@ ...@@ -97,44 +80,38 @@
<el-input v-model="ruleForm.buy_button_text" /> <el-input v-model="ruleForm.buy_button_text" />
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="售后服务" prop="endTime"> <el-form-item label="售后服务" prop="after_sales_mode">
<el-radio-group v-model="ruleForm.after_sales_mode"> <el-radio-group v-model="ruleForm.after_sales_mode">
<el-radio label="1" disabled>支持买家申请退款</el-radio> <el-radio label="1" disabled>支持买家申请退款</el-radio>
<el-radio label="2">不支持买家申请退款</el-radio> <el-radio label="2">不支持买家申请退款</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</div> </app-card>
</div>
</el-form>
</div>
<template slot="footer">
<div class="form-action"> <div class="form-action">
<div class="inner"> <div class="inner">
<el-button size="small" type="primary" @click="onSubmit">保存并查看</el-button> <el-button size="small" type="primary" @click="onSubmit">保存并查看</el-button>
<el-button size="small" @click="onCancel">下一步</el-button> <el-button size="small" @click="onCancel">下一步</el-button>
</div> </div>
</div> </div>
</template> </el-form>
</page-container> </div>
</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'
import sku from '@/components/common/sku' import sku from '@/components/goods/sku'
import skuView from '@/components/common/skuView' import skuView from '@/components/goods/skuView'
// import Editor from '@/components/common/editor'
// 接口 // 接口
import { addGoods, updateGoods, getGoodsList } from '@/api/goods' import { addGoods, updateGoods, getGoodsList } from '@/api/goods'
export default { export default {
components: { components: {
PageContainer, AppCard,
AppUpload, AppUpload,
sku, sku,
skuView skuView
// Editor
}, },
data() { data() {
return { return {
...@@ -146,46 +123,85 @@ export default { ...@@ -146,46 +123,85 @@ export default {
goodsGroupValue: [], // 商品分组value goodsGroupValue: [], // 商品分组value
disabledInput: false, disabledInput: false,
ruleForm: { ruleForm: {
category_id: '1', // 商品类型 category_id: '1',
spu_name: '', // 商品名 spu_name: '标题',
describe: '', // 分享描述 describe: '分享描述',
charact: '', // 商品亮点 charact: '商品卖点',
chart_oss: '', // 商品图 chart_oss: 'https://webapp-pub.ezijing.com/upload/shop-admin/aafa464602ae315e56534e81b687522b.jpg',
main_chart_oss: '', // 商品主图 main_chart_oss: 'https://webapp-pub.ezijing.com/upload/shop-admin/95500a48092218bb7805eb31701ce209.jpg',
group_id: '', // 商品分组 group_id: '6800703015822032896',
balanceCount: '', // 库存 startTime: null,
sales_type: '1',
buy_button_text: '1',
goodStockList: [], // 规格明细 goodStockList: [], // 规格明细
originPrice: '', // 原价 spu_context: '',
sellPrice: '', // 现价
skuKeyValueList: [ skuKeyValueList: [
{ // {
spec_id: '1', // spec_id: '1',
spec_name: '颜色', // spec_name: '颜色',
value: [{ spec_value_id: '1', spec_value: '红' }] // value: [{ spec_value_id: '1', spec_value: '红' }]
}, // },
{ // {
spec_id: '2', // spec_id: '2',
spec_name: '大小', // spec_name: '大小',
value: [ // value: [
{ 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' }
] // ]
} // }
], // 商品规格 ],
startTime: null // 售卖开始时间 stock_sub_method: '2',
after_sales_mode: '2',
app_button_text: '',
sales_time: '',
buy_limit: '1'
}, },
// ruleForm: {
// category_id: '1', // 商品类型
// spu_name: '', // 商品名
// describe: '', // 分享描述
// charact: '', // 商品亮点
// chart_oss: '', // 商品图
// main_chart_oss: '', // 商品主图
// group_id: '', // 商品分组
// balanceCount: '', // 库存
// goodStockList: [], // 规格明细
// originPrice: '', // 原价
// sellPrice: '', // 现价
// skuKeyValueList: [
// {
// spec_id: '1',
// spec_name: '颜色',
// value: [{ spec_value_id: '1', spec_value: '红' }]
// },
// {
// spec_id: '2',
// spec_name: '大小',
// value: [
// { spec_value_id: '1', spec_value: 'L' },
// { spec_value_id: '2', spec_value: 'M' }
// ]
// }
// ], // 商品规格
// spu_context: '',
// after_sales_mode:'2',
// startTime: null // 售卖开始时间
// },
rules: { rules: {
spu_name: [{ required: true, message: '商品名称不可为空', trigger: 'blur' }], spu_name: [{ required: true, message: '商品名称不可为空', trigger: 'blur' }]
goodPhotoList: [{ required: true, message: '最少需要添加一张商品图', trigger: 'blur' }], // goodPhotoList: [{ required: true, message: '最少需要添加一张商品图', trigger: 'blur' }],
sellPrice: [{ required: true, message: '请输入价格', trigger: 'blur' }], // sellPrice: [{ required: true, message: '请输入价格', trigger: 'blur' }],
balanceCount: [{ required: true, message: '请输入库存', trigger: 'blur' }], // balanceCount: [{ required: true, message: '请输入库存', trigger: 'blur' }],
freight: [{ required: true, message: '请输入运费', trigger: 'blur' }], // startTime: [{ required: true, message: '请选择售卖开始时间', trigger: 'blur' }],
startTime: [{ required: true, message: '请选择售卖开始时间', trigger: 'blur' }], // endTime: [{ required: true, message: '请选择售卖结束时间', trigger: 'blur' }]
endTime: [{ required: true, message: '请选择售卖结束时间', trigger: 'blur' }]
} }
} }
}, },
computed: { computed: {
shopId() {
return this.$store.state.shopId
},
groupList() { groupList() {
return this.$store.state.groups return this.$store.state.groups
} }
...@@ -270,9 +286,6 @@ export default { ...@@ -270,9 +286,6 @@ export default {
// 确定 // 确定
onSubmit() { onSubmit() {
let isPass = true let isPass = true
const [firstImage = {}] = this.ruleForm.goodPhotoList
const { imageUrl = '', imageWidth = null, imageHeight = null } = firstImage
Object.assign(this.ruleForm, { imageUrl, imageWidth, imageHeight })
// 基本信息表单校验 // 基本信息表单校验
this.$refs.ruleForm.validate(valid => { this.$refs.ruleForm.validate(valid => {
if (!valid) { if (!valid) {
...@@ -282,27 +295,31 @@ export default { ...@@ -282,27 +295,31 @@ export default {
}) })
// 规格明细校验 // 规格明细校验
if ( // if (
isPass && // isPass &&
this.ruleForm.skuKeyValueList && // this.ruleForm.skuKeyValueList &&
this.ruleForm.skuKeyValueList.length && // this.ruleForm.skuKeyValueList.length &&
this.ruleForm.goodStockList && // this.ruleForm.goodStockList &&
this.ruleForm.goodStockList.length // this.ruleForm.goodStockList.length
) { // ) {
this.$lodash.forEach(this.ruleForm.goodStockList, item => { // this.$lodash.forEach(this.ruleForm.goodStockList, item => {
if (isNaN(parseFloat(item.sellPrice)) || isNaN(parseFloat(item.balanceCount))) { // if (isNaN(parseFloat(item.sellPrice)) || isNaN(parseFloat(item.balanceCount))) {
this.$message({ message: '请完善规格明细表单', type: 'error' }) // this.$message({ message: '请完善规格明细表单', type: 'error' })
isPass = false // isPass = false
return false // return false
} // }
}) // })
if (!isPass) { // if (!isPass) {
return false // return false
} // }
} // }
const params = Object.assign({ shop_id: this.shopId }, this.ruleForm)
params.spec = JSON.stringify(params.goodStockList)
console.log(params)
// delete params.goodStockList
// delete params.skuKeyValueList
if (isPass) { if (isPass) {
this.isEdit ? this.onEdit() : this.onAdd() this.isEdit ? this.onEdit(params) : this.onAdd(params)
} else { } else {
this.$message({ message: '请完善表单信息', type: 'error' }) this.$message({ message: '请完善表单信息', type: 'error' })
} }
...@@ -326,23 +343,17 @@ export default { ...@@ -326,23 +343,17 @@ export default {
} }
}, },
// 确定添加商品 // 确定添加商品
onAdd() { onAdd(params) {
addGoods(this.ruleForm).then(response => { addGoods(params).then(response => {
this.$message({ this.$message({ message: '保存商品成功', type: 'success' })
message: '保存商品成功',
type: 'success'
})
// 成功回调 // 成功回调
this.onSuccess(response.data) this.onSuccess(response.data)
}) })
}, },
// 确定修改商品 // 确定修改商品
onEdit() { onEdit(params) {
updateGoods(this.ruleForm).then(response => { updateGoods(params).then(response => {
this.$message({ this.$message({ message: '保存商品成功', type: 'success' })
message: '保存商品成功',
type: 'success'
})
// 成功回调 // 成功回调
this.onSuccess(response.data) this.onSuccess(response.data)
}) })
......
<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>
<div>
<div class="order-list-header" id="searchBar">
<div class="inner" :class="{fixed: isFixed}">
<div class="item goods-cell">商品</div>
<div class="item price-cell">单价/数量</div>
<div class="item aftermarket-cell">售后</div>
<div class="item customer-cell">买家</div>
<div class="item time-cell">下单时间</div>
<div class="item state-cell">订单状态</div>
<div class="item check-cell">核销状态</div>
<div class="item pay-price-cell">实付金额</div>
</div>
</div>
<div v-for="(item,index) in dataList" :key="index" class="order-list-item">
<div class="order-list-item-header">
<div class="order-list-item-header-row">
<div class="order-no">订单号:{{item.id}}</div>
<div class="order-tools">
<el-button @click="ClickDetail(item)" type="text" size="small">查看详情</el-button>
<el-button v-if="item.tradeState===3" @click="Clickshipment(item)" type="text" size="small">发货</el-button>
<el-button v-if="item.payState===60&&item.goodAmount>0" @click="Clickrefund(item)" type="text" size="small">退款</el-button>
<el-button v-if="item.payState===1||item.payState===110" @click="Clickclose(item)" type="text" size="small">关闭订单</el-button>
</div>
</div>
</div>
<table class="order-list-item-table">
<tbody class="order-list-item-body">
<tr class="trlis">
<td class="goods-item-cell-td">
<div class="goods-item-cell">
<div class="pic"><img :src="item.tradeItemList[0].itemImageUrl" /></div>
<div class="content">
<h3>
<router-link :to="`/goods/edit/${item.tradeItemList[0].itemId}`" target="_blank">{{item.tradeItemList[0].itemName}}</router-link>
</h3>
</div>
<div class="tools">
<p>{{item.tradeItemList[0].itemPrice}}</p>
<p>({{item.tradeItemList[0].itemCount}}件)</p>
</div>
</div>
</td>
<td class="aftermarket-cell" :rowspan="item.tradeItemList.length">
<div class="order-td-cell">{{item.shouhou}}</div>
</td>
<td class="customer-cell" :rowspan="item.tradeItemList.length">
<div class="order-td-cell">{{item.buyer.id}}<br />{{item.buyer.nickName}}<br />{{item.buyer.phone}}</div>
</td>
<td class="time-cell" :rowspan="item.tradeItemList.length">
<div class="order-td-cell">{{item.createTime | formatDateTime}}</div>
</td>
<td class="state-cell" :rowspan="item.tradeItemList.length">
<div class="order-td-cell">{{updateTradeState(item.tradeState)}}</div>
</td>
<td class="check-cell" :rowspan="item.tradeItemList.length">
<div class="order-td-cell">{{(item.tradeTicket && item.tradeTicket.ticketState || '') | formatTicketState}}</div>
</td>
<td class="pay-price-cell" :rowspan="item.tradeItemList.length">
<div class="order-td-cell">{{item.goodAmount}}</div>
</td>
</tr>
<tr v-for="(goods, index) in item.tradeItemList" :key="goods.id" v-if="index !== 0">
<td class="goods-item-cell-td">
<div class="goods-item-cell">
<div class="pic"><img :src="goods.itemImageUrl" /></div>
<div class="content">
<h3>
<router-link :to="`/goods/edit/${goods.itemId}`" target="_blank">{{goods.itemName}}</router-link>
</h3>
</div>
<div class="tools">
<p>{{goods.itemPrice}}</p>
<p>({{goods.itemCount}}件)</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="main-page" v-if="pageTotal">
<el-pagination @size-change="handleSizeChange " @current-change="handleCurrentChange " :current-page="currentPage " :page-sizes="[10] " :page-size='pagesize' layout="total, sizes, prev, pager, next, jumper " :total='pageTotal'>
</el-pagination>
</div>
<!-- 发货 modal -->
<el-dialog title="发货" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="订单编号" :label-width="formLabelWidth">
<el-input v-model="form.id" auto-complete="off" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="快递公司" :label-width="formLabelWidth">
<el-select v-model="form.logisticsCompanyName">
<el-option v-for="(company, index) in expressList" :key="`express_${index}`" :label="company.name" :value="company.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="快递单号" :label-width="formLabelWidth">
<el-input v-model="form.logisticsNo" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="Btnshipment">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script type="text/ecmascript-6">
import { getOrderList, closeOrder, refundOrder, Shipment } from '@/api/order'
import * as utils from '@/utils/index'
import { Loading } from 'element-ui'
export default {
components: {},
data() {
return {
dataList: [],
dataList0: [],
currentPage: 1,
pagesize: 10,
pageTotal: 0,
param: {
id: null,
tradeState: null,
startTime: null,
endTime: null,
goodName: null,
logisticsNo: null,
tradeAddressName: null,
tradeAddressPhone: null,
logisticsCompanyName: null,
page: {
index: 1,
size: 10
}
},
dialogFormVisible: false,
form: {
id: null,
logisticsCompanyName: null,
logisticsNo: null
},
formLabelWidth: '120px',
expressList: [
{ name: '圆通快递' },
{ name: '中通快递' },
{ name: '顺丰快递' },
{ name: '韵达快递' },
{ name: '申通快递' },
{ name: '天天快递' },
{ name: '百世快递' },
{ name: '邮政' },
{ name: '德邦物流' }
],
isFixed: false,
loadingInstance: null
}
},
filters: {
// 日期
formatDateTime: utils.formatDateTime,
// 核销状态
formatTicketState(value) {
let options = { 0: '未使用', 1: '已使用' }
return options[value] || ''
}
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {},
// 更改一页显示个数
handleSizeChange(pagesize) {
this.pagesize = pagesize
this.freshPage()
},
// 跳转页面
handleCurrentChange(currentPage) {
this.currentPage = currentPage
this.dataList = []
this.param.page.index = currentPage
this.getListData()
},
// 获取列表数据
getListData() {
this.btnloading()
getOrderList(this.param).then(response => {
this.currentPage = this.param.page.index
this.dataList = response.data.list
this.pageTotal = parseInt(response.data.totalCount + '') || 0
this.closeloading()
})
},
// 转换订单状态
updateTradeState(val) {
switch (val) {
case 0:
return '待付款'
case 3:
return '待发货'
case 6:
return '待收货'
case 10:
return '取消'
case 20:
return '完成'
case 40:
return '已退款'
}
},
// 刷新页面
getfresh(remote) {
this.param = JSON.parse(
JSON.stringify(this.$lodash.defaults(remote, this.param))
)
if (remote.tradeState === '-1') {
this.param.tradeState = null
}
this.toRegion(remote.region, remote.ding)
this.getListData()
},
toRegion(val, val1) {
switch (val) {
case 'id':
return (this.param.id = val1)
case 'logisticsNo':
return (this.param.logisticsNo = val1)
case 'logisticsCompanyName':
return (this.param.logisticsCompanyName = val1)
case 'tradeAddressName':
return (this.param.tradeAddressName = val1)
case 'tradeAddressPhone':
return (this.param.tradeAddressPhone = val1)
}
},
// 跳转详情页
ClickDetail(val) {
this.$router.push('/order/detail/' + val.id)
},
// 关闭订单
Clickclose(data) {
this.$confirm('确定要关闭订单?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.closeOrder0(data.id)
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消关闭'
})
})
},
// 关闭
closeOrder0(ArticleId) {
closeOrder({ id: ArticleId }).then(response => {
this.$message({
message: response.message,
type: 'success'
})
// 刷新列表
this.dataList = []
this.getListData()
})
},
// 确定退款
Clickrefund(data) {
this.$confirm('确定要退款?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.Clickrefund0(data.id)
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消退款'
})
})
},
// 退款
Clickrefund0(ArticleId) {
refundOrder({ id: ArticleId }).then(response => {
this.$message({
message: response.message,
type: 'success'
})
// 刷新列表
this.dataList = []
this.getListData()
})
},
// 发货表单
Clickshipment(data) {
this.form = Object.assign({}, this.form, data)
this.dialogFormVisible = true
},
// 确定发货
Btnshipment() {
this.dialogFormVisible = false
Shipment(this.form).then(response => {
this.$message({
message: response.message,
type: 'success'
})
// 刷新列表
this.dataList = []
this.getListData()
})
},
handleScroll() {
// 改变元素#searchBar的top值
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop
let offsetTop = document.querySelector('#searchBar').offsetTop
if (scrollTop >= offsetTop) {
this.isFixed = true
} else {
this.isFixed = false
}
},
btnloading() {
this.loadingInstance = Loading.service({
class: 'order-list-item-table',
body: false
})
},
closeloading() {
this.$nextTick(() => {
// 以服务的方式调用的 Loading 需要异步关闭
this.loadingInstance.close()
})
}
},
created() {
this.dataList = []
this.getListData()
},
mounted() {
// 给window添加一个滚动滚动监听事件
window.addEventListener('scroll', this.handleScroll)
},
destroyed() {
// 离开该页面需要移除这个监听的事件
window.removeEventListener('scroll', this.handleScroll)
}
}
</script>
<style>
/* 表头 */
.order-list-header {
position: relative;
height: 40px;
margin-bottom: 10px;
}
.order-list-header .inner {
display: flex;
position: sticky;
top: 0;
background-color: #f8f8f8;
align-items: center;
height: 40px;
z-index: 1;
}
.order-list-header .inner.fixed {
position: fixed;
left: 200px;
right: 40px;
}
.order-list-header .item {
text-align: center;
padding: 10px;
}
.order-list-header .goods-cell {
flex: 1;
text-align: left;
}
.order-list-header .price-cell {
width: 10%;
text-align: right;
}
.order-list-header .aftermarket-cell {
width: 10%;
}
.order-list-header .customer-cell {
width: 10%;
word-break: break-all;
}
.order-list-header .time-cell {
width: 10%;
}
.order-list-header .state-cell {
width: 15%;
}
.order-list-header .check-cell {
width: 15%;
}
.order-list-header .pay-price-cell {
width: 10%;
}
/* table */
.order-list-item {
font-size: 12px;
margin: 10px 0;
}
.order-list-item-header {
background-color: #f8f8f8;
border: 1px solid #e5e5e5;
border-bottom: none;
padding: 10px;
}
.order-list-item-header .order-list-item-header-row {
display: flex;
justify-content: space-between;
}
.order-list-item-header .order-no {
line-height: 32px;
}
.order-list-item-table {
width: 100%;
}
.order-list-item-table td {
border: 1px solid #e5e5e5;
}
.order-td-cell {
padding: 10px;
text-align: center;
}
.goods-item-cell {
display: flex;
padding: 10px;
}
.goods-item-cell .pic {
width: 60px;
height: 60px;
}
.goods-item-cell .pic img {
width: 100%;
height: 100%;
}
.goods-item-cell .content {
flex: 1;
padding: 0 10px;
}
.goods-item-cell .content h3 {
font-weight: normal;
color: #0000ff;
}
.order-list-item-body .aftermarket-cell {
width: 10%;
}
.order-list-item-body .customer-cell {
width: 10%;
word-break: break-all;
}
.order-list-item-body .time-cell {
width: 10%;
}
.order-list-item-body .state-cell {
width: 15%;
}
.order-list-item-body .check-cell {
width: 15%;
}
.order-list-item-body .pay-price-cell {
width: 10%;
}
</style>
<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="module-item-hd">
<h2 class="module-item-hd__title">商品规格</h2>
</div>
<div class="module-item-bd">
<div class="sku-item" v-for="(item, index) in skuList" :key="index"> <div class="sku-item" v-for="(item, index) in skuList" :key="index">
<div class="sku-item-row"> <div class="sku-item-row">
<div class="sku-item-row-left"> <div class="sku-item-row-left">
<label class="label">规格{{ index + 1 }}</label> <label class="label">规格{{ index + 1 }}</label>
<el-input v-model="item.spec_name" placeholder="规格名" /> <el-input
v-model="item.spec_name"
placeholder="规格名"
:readonly="!!item.spec_id"
@blur="onNameBlur(item)"
@keyup.enter.native="onNameBlur(item)"
/>
</div> </div>
<div class="sku-item-row-right is-right"> <div class="sku-item-row-right is-right">
<el-button type="text" @click="removeSku(item, index)">删除规格</el-button> <el-button type="text" @click="removeSku(item, index)">删除规格</el-button>
</div> </div>
</div> </div>
<div class="sku-item-row"> <div class="sku-item-row" v-for="item in item.spec_values" :key="item.spec_value_id">
<div class="sku-item-row-left"> <div class="sku-item-row-left">
<el-input placeholder="规格值" /> <el-input
placeholder="规格值"
v-model="item.spec_value"
:readonly="!!item.spec_value_id"
@blur="onNameBlur(item)"
/>
</div> </div>
<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(item, index)"></i> <!-- <i class="el-icon-circle-plus-outline" @click="addSkuValue(item, index)"></i> -->
<i class="el-icon-delete" @click="removeSkuValue(item, index)"></i> <i class="el-icon-delete" @click="removeSkuValue(item, index)"></i>
</div> </div>
</div> </div>
</div> </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> </div>
<el-button type="text" @click="addSku"> <el-button type="text" @click="addSku">
<i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;创建新规格 <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;创建新规格
</el-button> </el-button>
</div> </app-card>
</div>
</page-container>
</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>
<el-button type="text" @click="handleUpdate">编辑</el-button>
</div>
<div class="module-item-bd shop-info">
<img :src="shop.shop_logo" class="shop-logo" /> <img :src="shop.shop_logo" class="shop-logo" />
<div class="shop-info-content"> <div class="shop-info-content">
<h3 class="title">{{ shop.shop_name }}</h3> <h3 class="title">{{ shop.shop_name }}</h3>
...@@ -20,7 +16,6 @@ ...@@ -20,7 +16,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<el-dialog title="店铺信息编辑" width="800px" :visible.sync="dialogVisible"> <el-dialog title="店铺信息编辑" width="800px" :visible.sync="dialogVisible">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
...@@ -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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论