Skip to content

L
linshenxs-shop
Commit 35c0e0c4 by cpa
Options

商城的商家端前端代码

parent 3559071b
Showing with 3415 additions and 1 deletions
src/api/mall/mallgoods.js
import request from '@/router/axios' import request from '@/router/axios'
export function fetchList(query) { export function fetchList(query) {
return request({ return request({
url: '/admin/mallGoods/page', url: '/admin/mallGoods/page',
......
src/api/mall/merchantMallgoods.js 0 → 100644
import request from '@/router/axios'
export function isUpon(parameter) {
return request({
url: '/admin/merchantMallGoods/batchUpon',
method: 'put',
params:parameter
})
}
export function isNotUpon(parameter) {
return request({
url: '/admin/merchantMallGoods/batchDown',
method: 'put',
params:parameter
})
}
export function fetchList(query) {
return request({
url: '/admin/merchantMallGoods/page',
method: 'get',
params: query
})
}
export function getGoodsInfo(query) {
return request({
url: '/admin/merchantMallGoods/getMerchantGoodsDetail',
method: 'get',
params: query
})
}
//
// export function addObj(obj) {
// return request({
// url: '/general/mallGoods',
// method: 'post',
// params: obj
// })
// }
//
// export function getObj(id) {
// return request({
// url: '/general/mallGoods/' + id,
// method: 'get'
// })
// }
//
//
// export function putObj(obj) {
// return request({
// url: '/general/mallGoods',
// method: 'put',
// params: obj
// })
// }
// export function getGoodsInfo(params) {
// return request({
// url: '/general/mallGoods/getGoodsDetails',
// method: 'get',
// params:params
// })
// }
//
//
//
// export function isNotHot(parameter) {
// return request({
// url: '/general/mallGoods/batchSetIsNotHot',
// method: 'put',
// params:parameter
// })
// }
//
// export function isHot(parameter) {
// return request({
// url: '/general/mallGoods/batchSetIsHot',
// method: 'put',
// params:parameter
// })
// }
//
//
//
// export function delObj(parameter) {
// return request({
// url: '/general/merchant/mallGoods/',
// method: 'delete',
// params:parameter
// })
// }
//
// export function querySpecNameById(parameter) {
// return request({
// url: '/general/mallGoodsSpec/querySpecNameById',
// method: 'get',
// params:parameter
// })
// }
//
src/api/mall/merchantMallorder.js 0 → 100644
import request from '@/router/axios'
export function fetchList(query) {
return request({
url: '/admin/merchantMallOrder/page',
method: 'get',
params: query
})
}
export function putObj(obj) {
return request({
url: '/admin/merchantMallOrder',
method: 'put',
params: obj
})
}
export function shipsImmediately(query) {
return request({
url: '/admin/merchantMallOrder/shipsImmediately',
method: 'put',
params: query
})
}
export function getOrderInfo(params) {
return request({
url: '/admin/merchantMallOrder/queryOrderDetails',
method: 'get',
params:params
})
}
export function cancelOrderMethod(query) {
return request({
url: '/admin/merchantMallOrder/cancelOrder',
method: 'get',
params: query
})
}
//
// export function getShopDetails(params) {
// return request({
// url: '/general/mallOrder/getShopDetails',
// method: 'get',
// params
// })
// }
// export function isVirtualGoods(query) {
// return request({
// url: '/admin/merchantMallOrder/isVirtualGoods',
// method: 'get',
// params: query
// })
// }
// export function getObj(id) {
// return request({
// url: '/general/mallOrder/' + id,
// method: 'get'
// })
// }
//
// export function addObj(obj) {
// return request({
// url: '/general/mallOrder',
// method: 'post',
// data: obj
// })
// }
//
//
// export function delObj(ids) {
// return request({
// url: '/general/mallOrder/' + ids,
// method: 'delete'
// })
// }
//
// export function confirmPayObj(obj) {
// return request({
// url: '/general/mallOrder/confirmPayment',
// method: 'put',
// params: obj
// })
// }
//
//
//
// export function shopClass(params) {
// return request({
// url: '/general/mallOrder/getShopClassOptions',
// method: 'get',
// params
// })
// }
//
// export function searchShopClass(params) {
// return request({
// url: '/general/mallOrder/searchShopClassOptions',
// method: 'get',
// params
// })
// }
//
// export function authApply(data) {
// return request({
// url: '/general/mallOrder/verifyMerchantApply',
// method: 'post',
// data
// })
// }
//
// export function fetchShopList(data) {
// return request({
// url: '/general/mallOrder/searchList',
// method: 'post',
// data
// })
// }
//
//
// export function editShopInfo(data) {
// return request({
// url: '/general/mallOrder/editShopInfo',
// method: 'post',
// data
// })
// }
//
// export function editDeposit(params) {
// return request({
// url: '/general/mallOrder/editDeposit',
// method: 'get',
// params
// })
// }
//
// export function resetPassword(params) {
// return request({
// url: '/general/mallOrder/resetPassword',
// method: 'get',
// params
// })
// }
//
// export function block(params) {
// return request({
// url: '/general/mallOrder/blocked',
// method: 'get',
// params
// })
// }
//
// export function unBlock(params) {
// return request({
// url: '/general/mallOrder/unBlock',
// method: 'get',
// params
// })
// }
src/const/crud/mall/mallGoodsAddSpecs.js 0 → 100644
/* 商品管理-添加商品页面-添加规格 */
export const tableOption = {
"selection": false,
"border": true,
"stripe": true,
"menuAlign": "center",
"align": "center",
"delBtn":true,
"editBtn":false,
"addBtn":false,
"searchMenuSpan": 6,
"column": [
{
"type": "input",
"label": "ID",
"prop": "id",
"span": 12,
},
{
"type": "input",
"label": "版本",
"prop": "merchantId",
"span": 12,
},
{
"type": "input",
"label": "类型",
"prop": "classifyId",
"span": 12,
},
{
"type": "number",
"label": "售卖价格",
"prop": "classifyId",
"span": 12,
},
{
"listType": 'picture-img',
"type":"upload",
"label": "图片",
"prop": "goodsImage",
},
{
"type": "number",
"label": "商品库存",
"prop": "classifyId",
"span": 12,
},
]
}
src/const/crud/mall/merchantMallgoods.js 0 → 100644
export const tableOption = {
"selection": true,
"border": true,
"stripe": true,
"menuAlign": "center",
"align": "center",
"searchMenuSpan": 8,
"emptyBtn":false,
"addBtn": false,
"delBtn": false,
"editBtn": false,
searchBtnText:"查询",
searchSpan:4,
"column": [
{
"type": "date",
"label": "创建时间",
"prop": "createTime",
"span": 12,
"searchRange": true,
"valueFormat": 'yyyy-MM-dd',
"format": 'yyyy-MM-dd',
},
{
"type": "input",
"label": "商品ID",
"prop": "id",
span: 12,
"search": true,
},
{
"type": "input",
"label": "商品名称",
"prop": "goodsName",
"search": true,
},
{
"listType": 'picture-img',
"type":"upload",
"label": "商品列表图",
"prop": "goodsImage",
},
{
"type": "select",
"label": "商品分类",
"prop": "classifyId",
"span": 12,
showColumn: false,
"dicUrl": "/general/mallClassify/dropDownBox",
},
{
"type": "input",
"label": "商品分类",
"prop": "classifyName",
"span": 12,
"dicUrl": "/general/mallClassify/dropDownBox",
},
{
"type": "input",
"label": "累计剩余库存",
"prop": "stock",
},
{
"type": "input",
"label": "销量",
"prop": "sales",
},
{
"type": "select",
"label": "状态",
"prop": "state",
"search": true,
"showColumn":false,
dicUrl: "/general/mallGoods/getStateOptions",
},
{
"type": "input",
"label": "状态",
"prop": "stateName",
},
{
"type": "select",
"label": "审核状态",
"prop": "auditState",
"search": true,
"showColumn":false,
dicUrl: "/general/mallGoods/getAuditStateOptions",
},
{
"type": "input",
"label": "审核状态",
"prop": "auditStateName",
},
]
}
src/const/crud/mall/merchantMallorder.js 0 → 100644
export const tableOption = {
selection: false,
border: true,
index: false,
indexLabel: "序号",
stripe: true,
menuAlign: "center",
align: "center",
searchMenuSpan: 8,
emptyBtn: false,
addBtn: false, // 启用添加按钮-行外
delBtn: false, // 启用删除按钮-行內
editBtn: false, // 启用编辑按钮-行內
searchBtnText:"查询",
searchSpan:4,
column: [
{
"type": "date",
"label": "下单时间",
"prop": "createTime",
"searchRange": true,
"valueFormat": 'yyyy-MM-dd',
},
{
"type": "input",
"label": "订单编号",
"prop": "orderNo",
"search": true,
span: 5
},
{
"type": "select",
"label": "状态",
"prop": "state",
"search": true,
"dicUrl": "/general/mallOrder/getStateOptions",
},
{
"type": "date",
"label": "下单用户",
"prop": "takeName",
search: true,
},
{
"type": "input",
"label": "商品名称",
"prop": "goodsName",
search: true,
},
{
"listType": 'picture-img',
"type": "upload",
"label": "商品图片",
"prop": "goodsImage",
span: 5
},
{
"type": "input",
"label": "购买数量",
"prop": "number",
span: 5
},
{
"type": "input",
"label": "商品金额",
"prop": "goodsMoney",
span: 5
},
{
"type": "input",
"label": "收货信息",
"prop": "payMoney",
formatter:row => {
return row.takeName+"--"+row.phone+"--"+row.address
}
},
]
}
src/router/views/index.js
import Layout from '@/page/index/' import Layout from '@/page/index/'
export default [{ export default [{
path: '/info', path: '/info',
component: Layout, component: Layout,
...@@ -28,4 +29,33 @@ export default [{ ...@@ -28,4 +29,33 @@ export default [{
component: () => component: () =>
import(/* webpackChunkName: "views" */ '@/views/userMgt/components/UserDetails') import(/* webpackChunkName: "views" */ '@/views/userMgt/components/UserDetails')
}] }]
}] },
// 商家-商品
{
path: '/businessGoods',
component: Layout,
redirect: '/businessGoods/index',
children: [{
path: 'update',
component: () =>
import('@/views/businessGoods/update')
},{
path: 'details',
component: () =>
import('@/views/businessGoods/details')
},]
},
// 商家-订单
{
path: '/businessOrder',
component: Layout,
redirect: '/businessOrder/index',
children: [{
path: 'details',
component: () =>
import('@/views/businessOrder/details')
}]
},
]
src/views/businessGoods/details.vue 0 → 100644
<template>
<div class="execution">
<basic-container v-loading="loading">
<el-form :inline="true" class="demo-form-inline">
<!-- 商品详情 -->
<div class="zm_info_header">
<span>商品详情</span>
</div>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple">
<el-form-item label="创建时间">
<span>{{info.createTime || ''}}</span>
</el-form-item>
</div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light">
<el-form-item label="商品ID">
<span>{{info.id || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple">
<el-form-item label="商品名称">
<span>{{info.goodsName || ''}}</span>
</el-form-item>
</div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light">
<el-form-item label="商品分类">
<span>{{info.classifyName || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="商品规格">
<div style="margin-top: 50px;padding:0px;margin-left:70px;border: 1px solid silver ">
<el-row :gutter="15">
<el-col :span="24">
<el-table class="tableClass" :data="formData.result" >
<el-table-column
v-for="key in formData.listkey"
:key="key"
:prop="key"
:label="key"></el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="商品列表图" label-width="100px" style="float: left">
<el-image v-for="(item, index) in goodsImageList" class="image_item" :key="index" :src="item"
:preview-src-list="goodsImageList" fit="cover">
</el-image>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="商品详情图" label-width="100px">
<el-image v-for="(item, index) in goodsImageDetail" class="image_item" :key="index" :src="item"
:preview-src-list="goodsImageDetail" fit="cover">
</el-image>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="商品视频" label-width="100px">
<video :src="goodsVideo" width="320" height="240" prop="video" controls="controls">
</video>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="商品认证视频" label-width="100px">
<video :src="certificationVideoUrl" width="320" height="240" prop="video" controls="controls">
</video>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple">
<el-form-item label="累计剩余库存">
<span>{{info.stock || ''}}</span>
</el-form-item>
</div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light">
<el-form-item label="状态">
<span>{{info.stateName || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="审核状态" label-width="100px">
<span>{{info.auditStateName || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="商品详情" label-width="100px">
<editor :content="initContent" height="300px" style="margin-top: 30px"/>
</el-form-item>
</div></el-col>
</el-row>
<!-- 审核信息 -->
<div class="zm_info_header">
<span>审核信息</span>
</div>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="审核时间 ：" prop="content">
<span>{{info.auditTime || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="审核结果 ：" prop="content">
<span>{{info.auditStateName || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="审核备注 ：" prop="content">
<span>{{info.auditRemark || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark" style="width: 600px;margin:0px auto">
<el-button type="primary" size="medium"@click="$router.go(-1)">返回</el-button>
</div></el-col>
</el-row>
</el-form>
</basic-container>
</div>
</template>
<script>
import {getGoodsInfo} from '@/api/mall/merchantMallgoods'
import {ZmMixin} from '@/mixins/ZmMixin.js'
export default {
mixins: [ZmMixin],
components: {
'editor': () => import('@/components/ckeditor/index.vue')
},
data() {
return {
goodsVideo:'',
certificationVideoUrl:'',
isLogistics: '',isElectronicContract:'',isVerified: '', isAPay: '', isUploadVideo: '',
formData: {
result: [],
listkey:[],
},
editing: false,
saving: false,
loading: false,
info: {},
form: {
goodsDetails:''
},
rules: {
}
}
},
mounted() {
this.loadInfo()
},
computed: {
initContent() {
return this.form.goodsDetails? this.form.goodsDetails:'初始化'
},
id() {
return this.$route.query.id
},
goodsImageDetail() {
if (this.info) {
let urls = []
let shopImg = this.info.goodsImageDetail
if (shopImg) {
urls = shopImg.split(",")
}
return urls
}
return []
},
goodsImageList() {
if (this.info) {
let urls = []
let shopImg = this.info.goodsImageList
if (shopImg) {
urls = shopImg.split(",")
}
return urls
}
return []
},
},
methods: {
generateTable(r){
this.formData.listkey=[]
this.formData.result=[]
this.formData.result=r
//提取表头字段====
for (let i = 0, l = this.formData.result.length; i < l; i++) {
for (let key in this.formData.result[i]) {
if (this.formData.listkey.indexOf(key)==-1){
this.formData.listkey.push(key)
}else{
}
}
}
},
loadInfo() {
this.loading = true
getGoodsInfo({
id: this.id
}).then(r => {
this.loading = false
this.info = this.zmRes(r)
let table=[]
for (let i = 0; i <r.data.data.skus.length ; i++) {
table.push({商家价格:''})
table.push({售卖价格:''})
table.push({图片:''})
table.push({商品库存:''})
table[i].商家价格=r.data.data.skus[i].merchantPrice
table[i].售卖价格=r.data.data.skus[i].sellPrice
table[i].图片=r.data.data.skus[i].goodsImage
table[i].商品库存=r.data.data.skus[i].stock
}
this.generateTable(table)
}).catch(r => {
this.loading = false
this.error('加载信息失败')
})
},
}
}
</script>
<style scoped>
.zm_info_header {
padding: 10px 16px;
display: flex;
align-items: center;
font-size: 14px;
color: #606266;
font-weight: 700;
background: #dedede;
}
.zm_info_body .zm_info_row:not(:first-child) {
margin-top: 10px;
}
.image_item {
width: 100px;
height: 100px;
margin-right: 10px;
}
</style>
src/views/businessGoods/goodsEdit/goods_api.js 0 → 100644
import request from '@/router/axios'
export function getClassifyDropDown() {
return request({
url: '/admin/mallGoodsSpec/dropDownBox',
method: 'get'
})
}
export function searchSpecByName(query) {
return request({
url: '/general/mallGoodsSpec/getSpecByName',
method: 'get',
params: query
})
}
export function getSpecValue(query) {
return request({
url: '/admin/mallGoodsSpec/getSpecValueById',
method: 'get',
params: query
})
}
export function getGoodsDetails(query) {
return request({
url: '/admin/mallGoodsSpec/getDetails',
method: 'get',
params: query
})
}
export function addOrEditGoods(data) {
return request({
url: '/admin/mallGoodsSpec/addOrEditGoods',
method: 'post',
data
})
}
src/views/businessGoods/goodsEdit/goods_edit.vue 0 → 100644
<template>
<div class="execution">
<basic-container v-loading="loading">
<el-form :model="form" :rules="rules" ref="refForm" label-width="110px" label-position="left">
<div class="zm_info_body">
<div class="zm_info_row">
<el-form-item label="商品名称" prop="goodsName">
<el-input v-model="form.goodsName" placeholder="输入商品名称" style="width: 230px;"></el-input>
</el-form-item>
<el-form-item label="商品分类" prop="goodsClassId" style="margin-left: 32px;">
<el-select v-model="form.goodsClassId" placeholder="请选择商品分类" style="width: 240px;" @change="onClassChange">
<el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="zm_info_row">
<el-form-item label="商品规格" prop="skus">
<div class="layout_v">
<el-button type="primary" @click="showSpecList = true" :disabled="!canSelectType" style="width: 100px;">
添加规格</el-button>
<el-table :data="form.skus" size="mini">
<el-table-column v-for="(spec, index) in specs" :label="spec.specName" width="120">
<template slot-scope="scope">
<span>{{titleValue(spec, scope.row)}}</span>
</template>
</el-table-column>
<el-table-column label="商家价格" width="170">
<template slot-scope="scope">
<el-input-number v-model="scope.row.merchantPrice" :precision="2" :step="1" :min="0">
</el-input-number>
</template>
</el-table-column>
<el-table-column label="售卖价格" width="170">
<template slot-scope="scope">
<el-input-number v-model="scope.row.sellPrice" :precision="2" :step="1" :min="0">
</el-input-number>
</template>
</el-table-column>
<el-table-column label="图片" width="120">
<template slot-scope="scope">
<uploader :size="{width: '60px', height: '60px'}" :urls="scope.row.goodsImage" @change="(list) => { scope.row.goodsImage = list.join(',') }" />
</template>
</el-table-column>
<el-table-column label="商品库存" width="170">
<template slot-scope="scope">
<el-input-number v-model="scope.row.stock" :step="1" :min="0"></el-input-number>
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template slot-scope="scope">
<el-button type="text" @click="onDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
</div>
<div class="zm_info_row">
<el-form-item label="商品列表图" prop="listImage">
<div class="upload">
<uploader :lazyList="form.listImage" @change="(list) => { form.listImage = list.join(',') }" />
<span class="sug">上传图片，建议尺寸495*372</span>
</div>
</el-form-item>
<el-form-item label="商品视频">
<div class="upload">
<uploader :lazyList="form.videoUrl" :video="true" :image="false" @change="(list) => { form.videoUrl = list.join(',') }" />
<span class="sug">上传视频，建议视频长度1分钟，仅支持MP4格式</span>
</div>
</el-form-item>
<el-form-item label="商品认证视频" prop="authUrl" >
<div class="upload">
<uploader :lazyList="form.authUrl" :video="true" :image="false" @change="(list) => { form.authUrl = list.join(',') }" />
<span class="sug">上传视频，建议视频长度1分钟，仅支持MP4格式</span>
</div>
</el-form-item>
</div>
<div class="zm_info_row">
<el-form-item label="商品详情图" prop="detailImage">
<div class="upload">
<uploader :lazyList="form.detailImage" @change="(list) => { form.detailImage = list.join(',') }" />
<span class="sug">上传图片，建议尺寸1125*1125</span>
</div>
</el-form-item>
</div>
<div class="zm_info_row">
<el-form-item label="商品详情" prop="details" required>
<editor :content="form.details" height="400px" @changed="onEditorChanged" />
</el-form-item>
</div>
<div class="zm_info_row">
<el-form-item label="虚拟销售量" prop="fakeNumber">
<div class="layout_h_v_c">
<el-input-number v-model="form.fakeNumber" :step="1" :min="0"></el-input-number>
<div style="margin-left: 10px;">展示销量=虚拟销量+实际销量</div>
</div>
</el-form-item>
</div>
<div class="zm_info_row">
<el-form-item label="实名认证" prop="needReal">
<el-radio-group v-model="form.needReal">
<el-radio-button :label="true">是，实名认证通过才能购买此商品</el-radio-button>
<el-radio-button :label="false">否</el-radio-button>
</el-radio-group>
</el-form-item>
</div>
<div class="zm_info_row">
<el-form-item label="A币支付" prop="payWithA">
<el-radio-group v-model="form.payWithA">
<el-radio-button :label="true">是，可以用A币支付</el-radio-button>
<el-radio-button :label="false">否</el-radio-button>
</el-radio-group>
</el-form-item>
</div>
<div class="zm_info_row">
<el-form-item label="上传视频" prop="needVideo">
<el-radio-group v-model="form.needVideo">
<el-radio-button :label="true">是，上传购买视频才能购买此商品</el-radio-button>
<el-radio-button :label="false">否</el-radio-button>
</el-radio-group>
</el-form-item>
</div>
<div class="zm_info_row">
<el-form-item label="电子合同" prop="needContract">
<el-radio-group v-model="form.needContract">
<el-radio-button :label="true">是，需要签署电子合同</el-radio-button>
<el-radio-button :label="false">否</el-radio-button>
</el-radio-group>
</el-form-item>
</div>
<div class="zm_info_row">
<el-form-item label="是否发货" prop="needDelivery">
<el-radio-group v-model="form.needDelivery">
<el-radio-button :label="true">是</el-radio-button>
<el-radio-button :label="false">否</el-radio-button>
</el-radio-group>
</el-form-item>
</div>
<div class="zm_info_row">
<el-form-item label="推广员佣金" prop="hireRate">
<div class="layout_h_v_c">
<el-input-number v-model="form.hireRate" :step="1" :min="0"></el-input-number>
<div style="margin-left: 10px;">%</div>
</div>
</el-form-item>
</div>
</div>
</el-form>
</basic-container>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" :loading="loading" @click="onSubmit">确 认</el-button>
</span>
<!-- 规格显示控件 -->
<type-select v-if="this.form.goodsClassId != undefined" :show="showSpecList" :classifyId="this.form.goodsClassId"
@chosen="onChosen" @close="showSpecList = false" />
</div>
</template>
<script>
let DBG = true
import {
ZmMixin
} from '@/mixins/ZmMixin.js'
import {
mock
} from './mock_data.js'
import {
getClassifyDropDown,
getGoodsDetails,
addOrEditGoods
} from './goods_api.js'
export default {
mixins: [ZmMixin],
components: {
"type-select": () => import('./type_select.vue'),
"uploader": () => import('@/components/uploader.vue'),
'editor': () => import('@/components/ckeditor/index.vue')
},
data() {
return {
//如果是编辑则需要id
id: undefined,
//如果是编辑则需要加载数据
loading: false,
//是否显示商品规格选择
showSpecList: false,
//选择的规格
specs: [],
//表单数据
form: {
merchantId:'',
goodsName: "",
goodsClassId: "",
skus: [],
listImage: "",
detailImage: "",
videoUrl: "",
authUrl: "",
details: "",
fakeNumber: 0,
needReal: true,
payWithA: true,
needVideo: true,
needContract: true,
needDelivery: true,
hireRate: 0
},
//分类数据
classOptions: [],
//校验规则
rules: {
goodsName: [{
required: true,
trigger: "blur",
message: "请输入商品名称"
}],
goodsClassId: [{
required: true,
trigger: "blur",
message: "请选择商品分类"
}],
fakeNumber: [{
required: true,
trigger: "blur",
message: "虚拟销量不能为空"
}],
needReal: [{
required: true,
trigger: "blur",
message: "需选择是否实名认证"
}],
payWithA: [{
required: true,
trigger: "blur",
message: "需选择是否A币支付"
}],
needVideo: [{
required: true,
trigger: "blur",
message: "需选择是否上传视频"
}],
needContract: [{
required: true,
trigger: "blur",
message: "需选择是否需要签署电子合同"
}],
needDelivery: [{
required: true,
trigger: "blur",
message: "选择是否发货"
}],
hireRate: [{
required: true,
trigger: "blur",
message: "请填写推广员佣金比例"
}],
listImage: [{
required: true,
trigger: "blur",
validator: (rule, value, callback) => {
let img = this.form.listImage
if(img == undefined || img.length == 0) {
callback(new Error("列表图不能为空"))
} else {
callback()
}
}
}],
detailImage: [{
required: true,
trigger: "blur",
validator: (rule, value, callback) => {
let detailsList = this.form.detailImage
if(detailsList == undefined || detailsList.length == 0) {
callback(new Error("详情图不能为空"))
} else {
callback()
}
}
}],
authUrl: [{
required: true,
trigger: "blur",
validator: (rule, value, callback) => {
let authUrl = this.form.authUrl
if(authUrl == undefined || authUrl.length == 0) {
callback(new Error("请上传认证视频"))
} else {
callback()
}
}
}],
details: [{
required: true,
trigger: "blur",
validator: (rule, value, callback) => {
let content = this.form.details
if(content == undefined || content.length == 0) {
callback(new Error("请填写商品详情"))
} else {
callback()
}
}
}],
skus: [{
required: true,
trigger: 'blur',
validator: (rule, value, callback) => {
if(this.form.skus.length == 0) {
callback(new Error("请选择规格"))
return
}
for(let i = 0; i < this.form.skus.length; i++) {
let sku = this.form.skus[i]
let merchantPrice = parseFloat(sku.merchantPrice)
if(isNaN(merchantPrice)) {
callback(new Error("第" + (i + 1) + "个规格商品商家价格不正确"))
return
}
let sellPrice = parseFloat(sku.sellPrice)
if(isNaN(sellPrice)) {
callback(new Error("第" + (i + 1) + "个规格商品售卖价格不正确"))
return
}
let goodsImage = sku.goodsImage
if(goodsImage == undefined || goodsImage.length == 0) {
callback(new Error("第" + (i + 1) + "个规格商品图片未上传"))
return
}
let stock = parseInt(sku.stock)
if(isNaN(stock)) {
callback(new Error("第" + (i + 1) + "个规格商品库存不正确"))
return
}
}
callback()
}
}]
}
}
},
computed: {
//点前页面标题
editTitle() {
console.log('++++++++++++++++'+this.id)
return this.id ? "编辑商品基础信息" : "添加商品基础信息"
},
//能否选择规格
canSelectType() {
return this.form.goodsClassId != undefined && this.form.goodsClassId != ''
},
//对应表头的值
titleValue() {
return (spec, row) => {
for (let s of row.specs) {
if (s.specId == spec.specId) {
return s.name
}
}
return "未知"
}
}
},
methods: {
//重新加载
reload(id) {
this.loading = true
getClassifyDropDown()
.then(r => {
this.classOptions = this.zmRes(r)
if(DBG) {
this.refill(mock)
} else {
if(id != undefined) {
return getGoodsDetails({id: id})
}
}
return Promise.resolve()
})
.then(r => {
this.loading = false
if(r) {
let z = this.zmRes(r)
if(z) {
this.refill(z)
}
}
})
.catch(e => {
this.loading = false
console.log(e)
})
},
//回填数据
refill(data) {
let skus = data.skus
if(skus && skus.length > 0) {
let specs = skus[0].specs.map(r => {
return {
specId: r.specId,
specName: r.specName
}
})
this.specs = specs
}
this.form = {
...data
}
},
//是否规格组合相同
isSpecEqual(specA, specB) {
if (specA.length != specB.length) {
return false
}
if (specA.length == 0) {
return true
}
for (let spec of specA) {
let find = undefined
for (let innerSpec of specB) {
if (innerSpec.specId == spec.specId) {
find = innerSpec
break
}
}
if (find == undefined) {
return false
}
if (spec.id != find.id) {
return false
}
}
return true
},
//含有某个规格值的specs
specsThat(specId, value) {
let result = {
hasValue: [],
notValue: []
}
for(let sku of this.form.skus) {
let specs = sku.specs
let find = false
for(let spec of specs) {
if(spec.specId == specId && spec.id == value.id) {
find = true
break
}
}
if(find) {
result.hasValue.push(specs.filter(s => { return s.specId != specId }))
} else {
result.notValue.push(specs.filter(s => { return s.specId != specId }))
}
}
return result
},
//specs取差集
minusCollection(specsA, specsB) {
let out = []
for(let specA of specsA) {
let inB = false
for(let specB of specsB) {
if(this.isSpecEqual(specA, specB)) {
inB = true
break
}
}
if(!inB) {
out.push(specA)
}
}
return out
},
//删除规格
onDelete(index) {
//指定项
this.form.skus.splice(index, 1)
//判断是否某个spec已经没有sku对应了，需要删除spec
let newSpecs = []
for (let spec of this.specs) {
let find = false
for (let sku of this.form.skus) {
if (find) {
break
}
for (let innerSpec of sku.specs) {
if (innerSpec.specId == spec.specId) {
find = true
break
}
}
}
if (find) {
newSpecs.push(spec)
}
}
if (newSpecs.length != this.specs.length) {
this.specs = newSpecs
}
},
//当选择了规格回调
onChosen(param) {
this.showSpecList = false
//拿到之前的spec查看是否已经添加过
let oldSpecs = this.specs
//遍历specs查找是否已经添加过spec
let find = undefined
for (let spec of oldSpecs) {
if (param.specId == spec.specId) {
//找到了表示之前已经添加过该spec
find = spec
break
}
}
if (find != undefined) {
//遍历每一个新选择的specValue
let newSkus = []
for (let value of param.values) {
//获取含有value的specs 和不含 value的specs集合
let r = this.specsThat(param.specId, value)
//不含value的specs与含有value的specs取差集
let out = this.minusCollection(r.notValue, r.hasValue)
//组合创建新的specs并新增sku
for(let specs of out) {
let newSpec = []
for(let spec of specs) {
newSpec.push({...spec})
}
newSpec.push({
specName: param.specName,
specId: param.specId,
id: value.id,
name: value.name
})
newSkus.push({
specs: newSpec,
merchantPrice: 0,
sellPrice: 0,
goodsImage: "",
stock: 0
})
}
}
if(newSkus.length > 0) {
this.form.skus = this.form.skus.concat(newSkus)
}
} else {
//需要新增的skuValue
let newValue = []
this.specs.push({
specId: param.specId,
specName: param.specName
})
//如果没有选择则所有的value都是新增的
newValue = param.values.map(v => {
return {
specName: param.specName,
specId: param.specId,
id: v.id,
name: v.name
}
})
//如果有新增的value,那么需要新增sku
if (newValue.length > 0) {
let newSku = []
//新建不含选择spec的组合
//如果当前有sku则在原来的基础上新增
//新增的规格值组合
let newCombination = newValue.map(v => {
return [{
specId: param.specId,
id: v.id,
name: v.name
}]
})
//排除当前规格的规格值组合
let oldCombination = []
for (let sku of this.form.skus) {
let newSpecs = sku.specs.filter(spec => {
return spec.specId != param.specId
})
if (newSpecs.length > 0) {
oldCombination.push(newSpecs)
}
}
let combination = []
for (let cbn of newCombination) {
let array = cbn
if (oldCombination.length > 0) {
for (let old of oldCombination) {
combination.push(array.concat(old))
}
} else {
combination.push(array)
}
}
for (let cmb of combination) {
newSku.push({
specs: cmb,
merchantPrice: 0,
sellPrice: 0,
goodsImage: "",
stock: 0
})
}
this.form.skus = newSku
}
}
},
//分类发生了变化，则需要清空商品规格
onClassChange(clazz) {
this.specs = []
this.form.skus = []
},
//当编辑内容变化时
onEditorChanged(html) {
this.form.details = html
},
//点击退出
handleClose() {
this.$emit('close')
// this.$router.push('/index')
// this.$router.go(-1)
},
//点击确认
onSubmit() {
this.$refs['refForm'].validate((valid) => {
if(valid) {
console.log("valid"+valid)
this.doSubmit()
}
})
},
//确认提交
doSubmit: function () {
let id = this.id
if(JSON.stringify(id)==='{}'||id===undefined){
// 根据当前登陆用户id 获取商家id
let userId = JSON.parse(sessionStorage.getItem("linshenxs-userInfo")).content.userId
this.$axios.get("/admin/merchantMallGoods/getMerchantByUserId",{
params:{id:userId},
}).then(response => {
this.form.merchantId=response.data.data.id
const {data: res} = this.$http.post(
"/general/mallGoods/addOrEditGoods",
this.form).then(r => {
this.loading = false
this.$emit('success')
this.$message.success('添加成功')
// this.$router.go(-1)
}).catch(e => {
this.loading = false
})
}, error => {
console.log('错误', error.message)
})
}else{
addOrEditGoods(this.form).then(data => {
this.$message.success('修改成功')
done()
// this.$router.go(-1)
}).catch(() => {
});
}
}
}
}
</script>
<style scoped>
.zm_info_header {
padding: 10px 16px;
display: flex;
align-items: center;
font-size: 14px;
color: #606266;
font-weight: 700;
background: #dedede;
}
.zm_info_body {
display: flex;
flex-direction: column;
padding: 16px;
}
.zm_info_row {
display: flex;
flex-direction: row;
align-items: center;
}
.zm_label {
width: 120px;
}
.zm_info_body .zm_info_row:not(:first-child) {
margin-top: 10px;
}
.image_item {
width: 100px;
height: 100px;
margin-right: 10px;
}
.upload {
display: flex;
flex-direction: column;
}
</style>
src/views/businessGoods/goodsEdit/goods_edit_pop.vue 0 → 100644
<template>
<el-dialog
:title="topTitle"
:visible.sync="show"
width="70%"
:close-on-click-modal="false"
:before-close="handleClose" append-to-body>
<goods-edit ref="editContent" :id="id" />
</el-dialog>
</template>
<script>
export default {
props: {
show: Boolean,
id: [String, Number],
},
components: {
'goods-edit': () => import('./goods_edit.vue')
},
computed: {
topTitle() {
if(this.id>=0&&this.id!=undefined){
return "编辑商品"
}
return "新增商品"
}
},
watch: {
show(n, o) {
if(n) {
this.$nextTick(() => {
this.$refs['editContent'].reload(this.id)
})
}
}
},
methods: {
handleClose() {
this.$emit('close')
}
}
}
</script>
<style scoped>
</style>
src/views/businessGoods/goodsEdit/mock_data.js 0 → 100644
export const mock = {
"goodsName": "你行你上",
"goodsClassId": 1,
"skus": [
{
"specs": [
{
"specId": 2,
"id": 3,
"name": "100m³",
"specName": "体积"
},
{
"specId": 1,
"id": 1,
"name": "阿玛尼",
"specName": "品牌"
}
],
"merchantPrice": 10,
"sellPrice": 50,
"goodsImage": "https://s.cn.bing.net/th?id=OJ.yL3aH2PmKyuCjQ",
"stock": 10
},
{
"specs": [
{
"specId": 2,
"id": 3,
"name": "100m³",
"specName": "体积"
},
{
"specId": 1,
"id": 15,
"name": "圣罗兰",
"specName": "品牌"
}
],
"merchantPrice": 20,
"sellPrice": 60,
"goodsImage": "http://linshenxs.oss-cn-beijing.aliyuncs.com/images/640.webp",
"stock": 10
},
{
"specs": [
{
"specId": 2,
"id": 5,
"name": "300m³"
},
{
"specId": 1,
"id": 1,
"name": "阿玛尼"
}
],
"merchantPrice": 30,
"sellPrice": 70,
"goodsImage": "http://linshenxs.oss-cn-beijing.aliyuncs.com/images/26115112U08.jpg",
"stock": 10
},
{
"specs": [
{
"specId": 2,
"id": 5,
"name": "300m³"
},
{
"specId": 1,
"id": 15,
"name": "圣罗兰"
}
],
"merchantPrice": 40,
"sellPrice": 80,
"goodsImage": "http://linshenxs.oss-cn-beijing.aliyuncs.com/images/77917d1ceb8196b18fdcb512d5f3088b_hd.jpg",
"stock": 10
}
],
"listImage": "http://linshenxs.oss-cn-beijing.aliyuncs.com/images/38dbb6fd5266d016465f27a8952bd40734fa35ef.jpg",
"detailImage": "http://linshenxs.oss-cn-beijing.aliyuncs.com/images/07cf86548b94145bd68c4e4b9b035684_hd.jpg",
"videoUrl": "",
"authUrl": "http://linshenxs.oss-cn-beijing.aliyuncs.com/videos/1122.mp4",
"details": "<p>这是描述老牛牛批的一件商品</p>",
"fakeNumber": 9999,
"needReal": true,
"payWithA": true,
"needVideo": false,
"needContract": false,
"needDelivery": true,
"hireRate": 3
}
src/views/businessGoods/goodsEdit/type_select.vue 0 → 100644
<template>
<el-dialog
title="添加规格"
:visible.sync="show"
width="30%"
:close-on-click-modal="false"
:before-close="handleClose" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="选择规格" prop="class">
<el-select
v-model="form.class"
filterable
remote
reserve-keyword
placeholder="搜索规格名称"
@change="onSelect"
:remote-method="remoteMethod"
:disabled="valuing"
:loading="searching">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="选择规格值" prop="value">
<el-checkbox-group v-model="form.value">
<el-checkbox v-for="(item, index) in values" :key="index" :label="item.id">{{item.name}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 认</el-button>
</span>
</el-dialog>
</template>
<script>
import {
ZmMixin
} from '@/mixins/ZmMixin.js'
import {
searchSpecByName,
getSpecValue
} from './goods_api.js'
export default {
mixins: [ZmMixin],
props: {
show: Boolean,
classifyId: [String, Number]
},
data() {
return {
loading: false,
searching: false,
valuing: false,
options: [],
values: [],
form: {
class: "",
value: []
},
rules: {
class: [{
trigger: 'blur',
message: "请选择规格",
required: true
}],
value: [{
trigger: 'blur',
message: "请选择规格值",
required: true
}]
}
}
},
watch: {
show(n, o) {
if(n) {
this.options = []
this.values = []
this.form.class = ""
this.form.value = []
}
}
},
methods: {
handleClose() {
this.$emit('close')
},
remoteMethod(query) {
this.options = []
if(query !== '') {
this.searching = true
searchSpecByName({specName: query, classifyId: this.classifyId})
.then(z => {
this.searching = false
let r = this.zmRes(z)
if(r) {
this.options = r.map(r => {
return {
label: r.specName,
value: r.id
}})
}
})
.catch(e => {
this.searching = false
})
}
},
onSelect(select) {
if(select) {
this.valuing = true
getSpecValue({specId: select})
.then(r => {
this.valuing = false
let z = this.zmRes(r)
if(z) {
this.values = z.map(r => {
return {
id: r.id,
name: r.specValue
}
})
}
})
.catch(e => {
this.valuing = false
})
}
},
onSubmit() {
this.$refs['form'].validate((valid) => {
if(valid) {
let spec = this.options.filter(r => { return r.value == this.form.class })[0]
let out = {
specId: this.form.class,
specName: spec.label,
values: this.form.value.map(id => {
let find = undefined
for(let i = 0; i < this.values.length; i++) {
let value = this.values[i]
if(value.id == id) {
find = value
break
}
}
return find
})
}
this.$emit('chosen', out)
}
})
}
}
}
</script>
<style scoped>
</style>
src/views/businessGoods/index.vue 0 → 100644
<!-- 商城商品管理 -->
<template>
<div class="execution">
<basic-container>
<avue-crud ref="crud"
:page.sync="page"
:data="tableData"
:permission="permissionList"
:table-loading="tableLoading"
:option="tableOption"
@on-load="getList"
@selection-change="onSelectionChange"
@search-change="searchChange"
@refresh-change="refreshChange"
@size-change="sizeChange"
@current-change="currentChange"
@row-update="handleUpdate"
@row-save="handleSave"
@row-del="handleDel">
<!-- 1.行内按钮-->
<template slot-scope="scope" slot="menu">
<el-button type="button" size="small"
@click="lookDetail(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">详情</el-button>
<el-button type="button" size="small"
@click="handleUpdate(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">编辑</el-button>
<el-button type="button" size="small"
@click="handleDel(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">删除</el-button>
</template>
<!-- 2.表外按钮 -->
<template slot-scope="scope" slot="menuLeft">
<div class="layout_h">
<el-button
type="primary"
size="small"
@click="add">添加</el-button>
<el-button
type="primary"
size="small"
@click="batchIsUpon">上架</el-button>
<el-button
type="primary"
size="small"
@click="batchIsNotUpon">下架</el-button>
<el-button
type="primary"
size="small"
@click="handleDelBatch(scope.row)">删除</el-button>
</div>
</template>
</avue-crud>
</basic-container>
<goods_edits :show="goodsEditVue" :id="id" @close="goodsEditVue=false" @success="onChangeDone" />
</div>
</template>
<script>
import {fetchList,addObj,delObj,isUpon, isNotUpon} from '@/api/mall/merchantMallgoods'
import {tableOption} from '@/const/crud/mall/merchantMallgoods'
import {mapGetters} from 'vuex'
export default {
name: 'businessGoods',
data() {
return {
goodsEditVue:false,
id:undefined,
searchForm: {},
tableData: [],
page: {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 20 // 每页显示多少条
},
tableLoading: false,
tableOption: tableOption
}
},
computed: {
...mapGetters(['permissions']),
permissionList() {
return {
addBtn: this.vaildData(this.permissions.admin_mallgoods_add, false),
delBtn: this.vaildData(this.permissions.admin_mallgoods_del, false),
editBtn: this.vaildData(this.permissions.admin_mallgoods_edit, false)
};
}
},
components: {
'goods_edits': () => import('./goodsEdit/goods_edit_pop'),
},
methods: {
// 更新
handleUpdate: function (row, index, done,loading) {
console.log("执行编辑方法")
this.id=row.id
console.log("赋值id:"+row.id)
this.goodsEditVue=true
},
// 添加
add() {
this.goodsEditVue=true
},
// 查看详情
lookDetail(row) {
this.$router.push('/businessGoods/details?id=' + row.id)
},
onChangeDone() {
this.refreshChange()
},
// 列表查询
getList(page, params) {
this.tableLoading = true
fetchList(Object.assign({
current: page.currentPage,
size: page.pageSize
}, params, this.searchForm )).then(response => {
this.tableData = response.data.data.records
this.page.total = response.data.data.total
this.tableLoading = false
}).catch(() => {
this.tableLoading=false
})
},
// 删除
handleDel: function (row, index) {
this.$confirm('是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
return delObj(row.id)
}).then(data => {
this.$message.success('删除成功')
this.getList(this.page)
})
},
// 选择事件(多选事件)
onSelectionChange(r) {
this.selectedData = r
},
// 批量 上架
batchIsUpon() {
let d = this.selectedData
if(d == undefined || d.length == 0) {
this.$message.error('请选择项进行上架')
return
}
let ids = d.map(r => { return r.id }).join(',')
console.log(ids)
this.$confirm('请确认是否上架已勾选的商品', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
return isUpon({ids: ids})
}).then(data => {
this.$message.success('删除成功')
this.getList(this.page)
})
},
// 批量 下架
batchIsNotUpon() {
let d = this.selectedData
if(d == undefined || d.length == 0) {
this.$message.error('请选择项进行下架')
return
}
let ids = d.map(r => { return r.id }).join(',')
this.$confirm('请确认是否下架已勾选的商品', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
return isNotUpon({ids: ids})
}).then(data => {
this.$message.success('删除成功')
this.getList(this.page)
})
},
// 批量删除
handleDelBatch() {
let d = this.selectedData
if(d == undefined || d.length == 0) {
this.$message.error('请选择项进行删除')
return
}
let ids = d.map(r => { return r.id }).join(',')
this.$confirm('是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
return delObj({ids: ids})
}).then(data => {
this.$notify.success('删除成功')
this.$refs.crud.toggleSelection();
this.refreshChange();
})
},
// 保存
handleSave: function (row, done,loading) {
addObj(row).then(data => {
this.$message.success('添加成功')
done()
this.getList(this.page)
}).catch(() => {
loading();
});
},
// 每页条数改变事件
sizeChange(pageSize){
this.page.pageSize = pageSize
},
// 当前页发生改变事件
currentChange(current){
this.page.currentPage = current
},
// 查询事件
searchChange(form, done) {
this.searchForm = form
this.page.currentPage = 0
this.getList(this.page, form)
done()
},
// 刷新事件
refreshChange() {
this.getList(this.page)
},
}
}
</script>
src/views/businessGoods/update.vue 0 → 100644
<template>
<div class="execution">
<basic-container v-loading="loading">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<div ref="oneDiv">
<div class="zm_info_header">
<p>编辑商品信息</p>
</div>
<p></p>
<el-form-item required label="商品名称 :" prop="goodsName" label-width="100px" style="float: left">
<el-input v-model="form.goodsName" style="float: right;width: 50%;float: left"></el-input>
</el-form-item>
<el-form-item :initDropDownBox="initDropDownBox" required label="商品分类 :" prop="classifyId" label-width="100px" >
<!-- 下拉 -->
<el-select v-model="form.classifyId">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item required label="商品规格 :" prop="spec" label-width="100px">
<el-button type="primary" @click="addSpec">添加规格</el-button>
<el-dialog
title="添加规格" :visible.sync="dialogVisible" width="40%"
:before-close="handleClose">
<el-form ref="addSpecForm" :model="addSpecForm" :rules="rules" label-width="100px">
<el-form-item label="选择规格名称" prop="specName">
<avue-select v-model="specName" @change="getSpecValue" placeholder="选择规格名称" type="tree" :dic="dic" ></avue-select>
</el-form-item>
<el-form-item label="选择规格值" prop="specValue">
<el-checkbox-group v-model="specValue" size="medium">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
</el-form>
<!-- 底部 -->
<span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="loading" @click="addSpec_submit()" style="width: 200px; height: 40px;display:block;margin:0 auto;" >确认添加</el-button>
</span>
</el-dialog>
</el-form-item>
<div class="custom-table" v-show="tableShow">
<el-table :data="tableData3" border style="width: 100%;border: 1px solid #6b6b6b" ref="myTable">
<!-- 动态列 -->
<el-table-column
v-for="(item, index) in dynamicColumns"
:key="index"
:label="item.label"
:prop="item.prop">
<template slot-scope="scope">
<span>{{scope.row[item.label]}}</span>
</template>
</el-table-column>
<el-table-column prop="date" label="售卖价格" width="180"> </el-table-column>
<el-table-column prop="name" label="图片" width="180"> </el-table-column>
<el-table-column prop="address" label="商品库存"> </el-table-column>
<el-table-column prop="operate" label="操作">
<el-button type="primary" size="mini" style="background-color: white;border: 0px;color: blue" @click="deleteRow">删除</el-button>
</el-table-column>
</el-table>
</div>
<el-form-item required label="商品列表图 :" prop="goodsImage" label-width="100px" >
<div class="upload">
<uploader ref="uploader"/>
<span class="sug" style="color:#2bb673;float: left;line-height: 50px;font-size: small;margin-right: 5%;font-size: 15px;">
建议尺寸525*525
</span>
</div>
</el-form-item>
<el-form-item required label="商品详情图 :" prop="goodsImageDetail" label-width="100px" >
<div class="upload">
<uploader ref="uploader"/>
<span class="sug" style="color:#2bb673;float: left;line-height: 50px;font-size: small;margin-right: 5%;font-size: 15px;">
建议尺寸525*525
</span>
</div>
</el-form-item>
<el-form-item label="商品视频 :" prop="videoPath" label-width="100px">
<div class="upload" >
<uploader ref="uploader"/>
<span class="sug" style="color:#2bb673;float: left;line-height: 50px;font-size: small;margin-right: 5%;font-size: 15px;">
上传视频，仅支持MP4格式
</span>
</div>
</el-form-item>
<el-form-item required label="商品详情 ：" prop="imgArticle" label-width="100px">
<editor :imgArticle="initContent" height="300px" @changed="onEditorChanged" />
</el-form-item>
<el-button type="primary" :loading="loading" @click="nextStep" style="width: 200px; height: 40px;display:block;margin:0 auto;" >下一步</el-button>
</div>
<div ref="twoDiv" style="display: none">
<div class="zm_info_header">
<p>编辑售卖信息</p>
</div> <p></p>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item required label="虚拟销售量 :" prop="virtualSales" label-width="100px">
<el-input-number v-model="form.virtualSales" style="float: right;width: 50%;float: left"></el-input-number>
<span>展示销量=虚拟销量+实际销量</span>
</el-form-item>
<el-form-item required label="实名认证 :" prop="isVerified" label-width="100px">
<el-radio v-model="form.isVerified" label="1">是</el-radio>
<el-radio v-model="form.isVerified" label="2">否</el-radio>
<span>实名认证 通过才能购买此商品</span>
</el-form-item>
<el-form-item required label="A币支付 :" prop="isAPay" label-width="100px">
<el-radio v-model="form.isAPay" label="1">是</el-radio>
<el-radio v-model="form.isAPay" label="2">否</el-radio>
<span>可以使用A币支付</span>
</el-form-item>
<el-form-item required label="上传视频 :" prop="isUploadVideo" label-width="100px" >
<el-radio v-model="form.isUploadVideo" label="1">是</el-radio>
<el-radio v-model="form.isUploadVideo" label="2">否</el-radio>
<span>上传购买视频才能购买此商品</span>
</el-form-item>
<el-form-item required label="电子合同 :" prop="isElectronicContract" label-width="100px" >
<el-radio v-model="form.isElectronicContract" label="1">是</el-radio>
<el-radio v-model="form.isElectronicContract" label="2">否</el-radio>
<span>需要签署电子合同</span>
</el-form-item>
<el-form-item required label="是否发货 :" prop="isLogistics" label-width="100px">
<el-radio v-model="form.isLogistics" label="1">是</el-radio>
<el-radio v-model="form.isLogistics" label="2">否</el-radio>
</el-form-item>
<el-form-item required label="推广员佣金 ：" prop="commissionRate" label-width="100px">
<el-input-number v-model="form.commissionRate" style="float: right;width: 50%;float: left"></el-input-number>
<span>%</span>
</el-form-item>
</el-form>
<el-row>
<el-button size="medium" type="primary" :loading="loading" @click="previous" >上一步</el-button>
<el-button size="medium" type="primary" :loading="loading" @click="onSubmit" >提交</el-button>
</el-row>
</div>
</el-form>
</basic-container>
</div>
</template>
<script>
import {addObj, delObj, fetchList} from '@/api/mall/mallgoods'
import {ZmMixin} from '@/mixins/ZmMixin.js'
import {tableOption} from "@/const/crud/mall/mallGoodsAddSpecs";
export default {
mixins: [ZmMixin],
components: {
'uploader': () => import('@/components/uploader.vue'),
'editor': () => import('@/components/ckeditor/index.vue'),
},
data() {
return {
tableShow:false,// 规格表格隐藏
specName:'',
specValue:[],// 存放多选之动态标签的选中结果集
isEditHeader: false,
isEdit: true,
tableData3: [],
propArr:[], // 生成dynamicColumns时的记录
dynamicColumns: [], // 存放动态列
dic:[],// 规格名称
dialogVisible: false,//弹窗
isRow: '', //这里存储点击删除时，该按钮所处的行数
searchForm: {},
tableData: [],
tableLoading: false,
tableOption: tableOption,
options:[],
value: '请选择分类',
radio:'0',
classifyId: [],
cities: [],// 多选之动态标签-全部规格值
dynamicTags: [],// 多选之动态标签
editing: false,
saving: false,
loading: false,
info: {},
addSpecForm:{specName:'',specValue:''},
form: {
goodsId:0,//商品ID
goodsListId:0,//商品列表ID
goodsName:'商品名称',// 商品名称
classifyId:1,// 商品分类 直播商品
virtualSales:520,// 虚拟销售量
isVerified:0,// 实名认证
isAPay:0,// A币支付
isUploadVideo:0,// 上传视频
isElectronicContract:0,// 电子合同
isLogistics:0,// 是否发货
commissionRate:5,// 推广员佣金
// 规格
specValues:'全套声卡',//添加规格-规格值
sellingPrice:200.00,//售卖价格
image:'http://image',//图片
stock:1000,//库存
goodsImageList:'http://list-image',// 商品列表图
goodsImageDetails:'http://details-image', // 商品详情图
goodsVideo:'http://video',// 商品视频
goodsDetails:'<p>123</p>', // 商品详情
},
rules: {},
}
},
mounted() {},
computed: {
initDropDownBox(){
this.$axios.get("/general/mallClassify/dropDownBox").then(e =>{
this.options=Object.values(e.data)
})
}
},
created(){
this.tableData.forEach(item=>{
if(item.custom){
item.custom = JSON.parse(item.custom);
Object.keys(item.custom).forEach(key => {
if(this.propArr.indexOf(key) === -1){
this.propArr.push(key);
this.dynamicColumns.push({ prop: key, label: key});
}
})
}else{
item.custom = {};
}
})
},// 动态表格
methods: {
deleteRow(index) {
this.tableData3.splice(index, 1);
},
submit() {
let arr = [];
this.tableData.forEach(data => {
let temp = {};
temp.name = data.name;
let obj = {};
this.dynamicColumns.forEach(col => {
// 仅把有效的列提交
if (data.custom[col.prop]) {
obj[col.prop] = data.custom[col.prop];
}
});
if (JSON.stringify(obj) !== "{}") {
temp.custom = JSON.stringify(obj);
}
arr.push(temp);
});
console.log(JSON.stringify(arr))
},
// 添加规格-提交
addSpec_submit(){
// 1.规格表格显示
this.tableShow=true
let specId = this.specName
this.$axios.get("/general/mallGoodsSpec/querySpecNameById",{
params:{specId:specId}
}).then(response => {
// 2.获取规格名称和规格值
console.log("规格名称:"+response.data.data+", 规格值:"+this.specValue
+"规格值长度："+this.specValue.length)
// 3. 动态生成表格
this.dynamicColumns.push({
prop: response.data.data,
label: response.data.data
});
let temp = {
date: "2016-05-02",
name: "http://image",
address: "1518",
custom: '',
operate:'删除',
}
// response.data.data:this.specValue
temp[response.data.data] = this.specValue
this.tableData3= [temp]
}, error => {
console.log('错误', error.message)
})
// 3.关闭对话框
this.dialogVisible = false
},
handleCloseTag(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
// 下拉框值变更事件：获取规格值
getSpecValue(val){
if(val!==undefined && val!==''){
this.$axios.get("/general/mallGoodsSpecValue/multiSelectButton",{
params:{specId:val}
}).then(response => {
this.cities=Object.values(response.data)
return response.data
}, error => {
console.log('错误', error.message)
})
}
},
// 关闭对话框
handleClose(done) {done();},
//这个删除按钮主要控制点击删除按钮后的弹窗显示，然后存储你点击按钮的当前行
deleteData(row, $index) {
this.isShowDeleteDialog = !this.isShowDeleteDialog
this.isRow = row.num
},
/** 鼠标移入cell */
handleCellEnter (row, column, cell, event) {
row.isEdit = true
},
/** 鼠标移出cell */
handleCellLeave (row, column, cell, event) {
row.isEdit = false
},
// 添加规格-对话框
addSpec(){
// 1.打开对话框
this.dialogVisible = true
// 2.加载所有规格名称
this.$axios.get("/general/mallGoodsSpec/dropDownBox").then(e =>{
this.dic=Object.values(e.data)
})
},
// 上一步
previous(){
this.$refs.twoDiv.style.display='none'
this.$refs.oneDiv.style.display='block'
},
// 下一步
nextStep(){
this.$refs.oneDiv.style.display='none'
this.$refs.twoDiv.style.display='block'
},
// 提交
onSubmit() {
console.log(JSON.stringify(this.form))
addObj(this.form).then(r => {
this.loading = false
this.$emit('success')
this.$message.success('添加成功')
}).catch(e => {
this.loading = false
})
},
// Editor
onEditorChanged(html) {
this.form.imgArticle = html
},
//-----------------
getList(params) {
this.tableLoading = true
fetchList(Object.assign({
}, params, this.searchForm )).then(response => {
this.tableData = response.data.data.records
this.tableLoading = false
}).catch(() => {
this.tableLoading=false
})
},
// 刷新事件
refreshChange() {
this.getList()
},
// 删除
handleDel: function (row, index) {
this.$confirm('是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
return delObj(row.id)
}).then(data => {
this.$message.success('删除成功')
this.getList(this.page)
})
},
}
}
</script>
<style scoped>
.custom-table{
border: 1px solid #6b6b6b;
background-color: #6b6b6b;
}
.item{width: 200px;}
.el-input__inner{
height: 24px!important;
}
.txt{
line-height: 24px;
padding: 0 9px;
box-sizing: border-box;
}
.zm_info_header {
padding: 10px 16px;
display: flex;
align-items: center;
font-size: 14px;
color: #606266;
font-weight: 700;
background: #dedede;
}
.zm_info_body .zm_info_row:not(:first-child) {
margin-top: 10px;
}
span{
color: #f5094e;
}
thead{border: 1px solid #6b6b6b;}
td{
border: 1px solid #6b6b6b;
margin: 10px;
padding: 10px;
}
</style>
src/views/businessOrder/components/cancelOrder.vue 0 → 100644
<!-- 取消订单 -->
<template>
<el-dialog :title="topTitle"
:visible.sync="show"
:close-on-click-modal="false"
:before-close="handleClose" append-to-body >
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="退货地址" label-width="120px">
<p>收 件 人 - {{this.form.takeName}}</p>
<p>联系电话 - {{this.form.phone}}</p>
<p>退货地址 - {{this.form.address}}</p>
</el-form-item>
<el-form-item label="退还给用户金" prop="refundMoney" label-width="120px" required>
<el-input-number v-model="form.refundMoney" size="30px"></el-input-number>
<p style="color: red">支付金额：{{this.form.payMoney}}</p>
</el-form-item>
<el-form-item label="商家金额" prop="goodsMoney" label-width="120px" required v-if="this.form.isPlatformOrder==0">
<el-input-number v-model="form.goodsMoney" size="30px"></el-input-number>
</el-form-item>
<el-form-item label="备注" prop="mark" label-width="120px" required>
<el-input v-model="form.mark" ></el-input>
</el-form-item>
</el-form>
<!-- 底部 -->
<span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="loading" @click="onSubmit" style="width: 200px; height: 40px;display:block;margin:0 auto;" >确 认</el-button>
</span>
</el-dialog>
</template>
<script>
import {putObj,getStateOptions} from '@/api/mall/mallclassify'
import {ZmMixin} from '@/mixins/ZmMixin.js'
import request from "@/router/axios";
export default {
props: {
show: Boolean,
params: Object
},
mixins: [ZmMixin],
components: {},
computed: {
topTitle() {
console.log(JSON.stringify(this.params))
this.form.isPlatformOrder=0
return '取消订单'
},
},
watch: {
params(n, o) {
if(n) {
this.form.classifyName = n.classifyName
this.form.sort = n.sort
}
}
},
methods: {
handleClose() {
this.$emit('close')
},
onSubmit() {
this.params.classifyName=this.form.classifyName
this.params.sort=this.form.sort
putObj(this.params).then(r => {
this.loading = false
this.$emit('success')
this.$message.success('修改成功')
}).catch(e => {
this.loading = false
})
},
},
data() {
return {
loading: false,
form: {
takeName:'张三',
address:'成都市高新区',
phone:'12345687892',
refundMoney:'200.00',
goodsMoney:'350.00',
mark:'备注消息',
pay_money:'100A币',
}
}
}
}
</script>
src/views/businessOrder/details.vue 0 → 100644
<template>
<div class="execution">
<basic-container v-loading="loading">
<el-form :inline="true" class="demo-form-inline">
<!-- 基础信息 -->
<div class="zm_info_header">
<span>基本信息</span>
</div>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple">
<el-form-item label="下单时间">
<span>{{info.createTime || ''}}</span>
</el-form-item>
</div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light">
<el-form-item label="订单编号">
<span>{{info.orderNo || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple">
<el-form-item label="下单用户">
<span>{{info.orderUser || ''}}</span>
</el-form-item>
</div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light">
<el-form-item label="购买数量">
<span>{{info.goodsNumber || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple">
<el-form-item label="商品金额">
<span>{{info.price || ''}}</span>
</el-form-item>
</div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light">
<el-form-item label="状态">
<span>{{info.stateName || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<div class="zm_info_header">
<span>收货信息</span>
</div>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="收货人姓名">
<span>{{info.name || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="收货人电话">
<span>{{info.phone || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple">
<el-form-item label="收货人地址">
<span>{{info.address || ''}}</span>
</el-form-item>
</div></el-col>
</el-row>
<div class="zm_info_header">
<span>所购商品</span>
</div>
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple">
<el-row :gutter="15" style="width: 100%;margin:20px 0px">
<el-col :span="24">
<el-table class="tableClass" :data="formData.result" >
<el-table-column
v-for="key in formData.listkey"
:key="key"
:prop="key"
:label="key"></el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark" style="width: 600px;margin:0px auto">
<el-button v-if="this.stateName==='待发货'"
type="primary" size="medium" @click="shipsImmediately">立即发货</el-button>
<el-button v-if="contains()!=-1"
type="primary" size="medium" @click="cancelOrderClick">取消订单</el-button>
</div></el-col>
</el-row>
</el-form>
<!-- 立即发货对话框 -->
<el-dialog
title="订单发货" :visible.sync="dialogVisibleShipsImmediately" width="40%"
:before-close="handleClose">
<el-form ref="form" :model="form">
<el-form-item :initDropDownBox="initDropDownBox" label="请选择快递公司 :" prop="expressCompany" label-width="200px">
<!-- 下拉 -->
<el-select v-model="form.expressCompany" size="30px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="请填写快递单号 :" prop="waybillNo" label-width="200px">
<el-input v-model="form.waybillNo" size="30px"></el-input>
</el-form-item>
</el-form>
<!-- 底部 -->
<span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="loading" @click="confirmDelivery"
style="width: 200px; height: 40px;display:block;margin:0 auto;" >
确认发货</el-button>
</span>
</el-dialog>
<!-- 取消订单对话框 -->
<el-dialog
title="取消订单" :visible.sync="cancelOrderDialog" width="50%"
:before-close="handleClose">
<el-form ref="form" :model="form">
<el-form-item label="退货地址 :" prop="" label-width="200px">
<span>{{info.refundAddress||'暂未添加'}}</span>
</el-form-item>
<el-form-item label="退还金额 :" prop="" label-width="200px">
<span v-if="info.payTypeName==='现金支付'">{{info.refundMoney+'元'||''}}</span>
<span v-if="info.payTypeName==='A币支付'">{{info.refundMoney+'A币'||''}}</span>
</el-form-item>
<el-form-item label="支付金额 :" prop="" label-width="200px">
<span v-if="info.payTypeName==='现金支付'">{{info.payMoney+'元'||''}}</span>
<span v-if="info.payTypeName==='A币支付'">{{info.payMoney+'A币'||''}}</span>
</el-form-item>
<el-form-item label="商家金额 :" prop="" label-width="200px">
<span>{{info.goodsMoney+'元'||''}}</span>
</el-form-item>
<el-form-item label="备注 :" prop="refundRemark" label-width="200px">
<el-input type="textarea" v-model="refundRemark"></el-input>
</el-form-item>
</el-form>
<!-- 底部 -->
<span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="loading" @click="confirmCancelOrderSubmit"
style="width: 200px; height: 40px;display:block;margin:0 auto;" >
确认取消</el-button>
</span>
</el-dialog>
</basic-container>
</div>
</template>
<script>
import {getOrderInfo, shipsImmediately,cancelOrderMethod} from '@/api/mall/merchantMallorder'
import {ZmMixin} from '@/mixins/ZmMixin.js'
export default {
name:"businessOrder",
mixins: [ZmMixin],
components: {
},
data() {
return {
refundRemark:'1-300字',
stateName:'',
options:[],// 快递公司下拉
cancelOrderDialog:false,
dialogVisibleShipsImmediately:false,
formData: {
result: [],
listkey:[],
},
form:{
waybillNo:'',//快递单号
expressCompany:2,//快递公司
orderNo:''
},
reverse: true,
editing: false,
saving: false,
loading: false,
info: {},
}
},
mounted() {
this.loadInfo()
},
computed: {
id() {
return this.$route.query.id
},
userEvaluationImg() {
if (this.info) {
let urls = []
let shopImg = this.info.userEvaluationImg
if (shopImg) {
urls = shopImg.split(",")
}
return urls
}
return []
},
initDropDownBox() {
this.$axios.get("/general/mallExpressCompany/dropDownBox/courierCompany").then(e => {
this.options = Object.values(e.data)
})
}
},
methods: {
// 取消订单提交事件
confirmCancelOrderSubmit(){
console.log("+++"+this.form.orderNo)
cancelOrderMethod(
{orderNo:this.form.orderNo,
refundRemark:this.refundRemark,
}
).then(r=>{
console.log("取下订单提交事件-返回结果："+JSON.stringify(r))
this.$message.success('取消订单成功')
}).catch(e=>{
this.error('取消订单失败')
})
this.cancelOrderDialog=false
// 修改
},
contains(){
let text='待支付,已支付,待签约,待发货，待收货'
return text.search(this.info.stateName)
},
generateTable(r){
this.formData.listkey=[]
this.formData.result=[]
this.formData.result=r
//提取表头字段====
for (let i = 0, l = this.formData.result.length; i < l; i++) {
for (let key in this.formData.result[i]) {
if (this.formData.listkey.indexOf(key)==-1){
this.formData.listkey.push(key)
}else{
}
}
}
},
handleClose(done) {done();},
// 立即发货
shipsImmediately(){
this.form.orderNo=this.id
this.$axios.get("/admin/merchantMallOrder/isVirtualGoods",{
params:{orderNo:this.id},
}).then(response => {
if(response.data.data){
this.form.orderNo=this.id
this.dialogVisibleShipsImmediately = true
}else {
// 虚拟商品 二次确认直接发货
this.$confirm('是否确认发货？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(data => {
shipsImmediately(this.form).then(r => {
this.$message.success('发货成功')
}).catch(e =>{
console.log('错误', e.message)
})
})
}
}, error => {
console.log('错误', error.message)
})
},
// 确认发货-提交按钮
confirmDelivery(){
shipsImmediately(this.form).then(r => {
this.dialogVisibleShipsImmediately = false
this.$message.success('发货成功')
return r.data
}).catch(e =>{
console.log('错误', e.message)
})
},
// 取消订单
cancelOrderClick(){
this.$confirm('请确认是否取消该订单？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(data => {
this.cancelOrderDialog = true
})
},
loadInfo() {
this.loading = true
getOrderInfo({
orderNo: this.id
}).then(r => {
this.loading = false
this.info = this.zmRes(r)
console.log("[订单详情]"+JSON.stringify(r.data.data))
this.stateName=this.info.stateName
this.form.orderNo=this.info.orderNo
let table=[]
table.push({商品列表图:''})
table.push({商品名称:''})
table.push({商品规格:''})
table.push({商品单价:''})
table.push({购买数量:''})
table.push({商品总价:''})
table[0].商品列表图=r.data.data.mallPayInfo.goodsListImage
table[0].商品名称=r.data.data.mallPayInfo.goodsListName
table[0].商品规格=r.data.data.mallPayInfo.goodsListSpec
table[0].商品单价=r.data.data.mallPayInfo.goodsListPrice
table[0].购买数量=r.data.data.mallPayInfo.goodsListNumber
table[0].商品总价=r.data.data.mallPayInfo.goodsListTotalPrice
this.generateTable(table)
}).catch(r => {
this.loading = false
this.error('加载信息失败')
})
},
}
}
</script>
<style scoped>
.zm_info_header {
padding: 10px 16px;
display: flex;
align-items: center;
font-size: 14px;
color: #606266;
font-weight: 700;
background: #dedede;
}
.zm_info_body {
display: flex;
flex-direction: column;
padding: 16px;
}
el-form-item{
margin-right: 20px;
}
.zm_info_row {
display: flex;
flex-direction: row;
align-items: center;
}
.zm_label {
width: 120px;
}
.zm_info_body .zm_info_row:not(:first-child) {
margin-top: 10px;
}
.bg-purple {
}
.bg-purple-light {
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
src/views/businessOrder/index.vue 0 → 100644
<!-- 商家订单管理 -->
<template>
<div class="execution">
<basic-container>
<avue-crud ref="crud"
:page.sync="page"
:data="tableData"
:permission="permissionList"
:table-loading="tableLoading"
:option="tableOption"
@on-load="getList"
@search-change="searchChange"
@refresh-change="refreshChange"
@size-change="sizeChange"
@current-change="currentChange"
@row-update="handleUpdate"
@row-save="handleSave"
@row-del="handleDel">
<!-- 1.行内按钮-->
<template slot-scope="scope" slot="menu">
<el-button type="button" size="small"
@click="checkTheDetails(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">详情</el-button>
<el-button type="button" size="small"
v-if="scope.row.state == 8"
@click="viewLogistics(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">查看物流</el-button>
<el-button type="button" size="small"
v-if="scope.row.state == 1"
@click="shipsImmediately(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">立即发货</el-button>
<el-button type="button" size="small"
v-if="contains(scope.row)!=-1"
@click="handleDel(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">删除</el-button>
</template>
</avue-crud>
</basic-container>
<!-- 1.取消订单 -->
<el-dialog
title="取消订单" :visible.sync="dialogVisible" width="40%"
:before-close="handleClose">
<p>快递单号 :{{this.form.waybillNo}}</p><p></p>
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:timestamp="activity.timestamp">
{{activity.content}}
</el-timeline-item>
</el-timeline>
</div>
</el-dialog>
<!-- 2.查看物流对话框 -->
<el-dialog
title="订单物流" :visible.sync="dialogVisible" width="40%"
:before-close="handleClose">
<p>快递单号 :{{this.form.waybillNo}}</p><p></p>
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:timestamp="activity.timestamp">
{{activity.content}}
</el-timeline-item>
</el-timeline>
</div>
</el-dialog>
<!-- 3.立即发货对话框 -->
<el-dialog
title="订单发货" :visible.sync="dialogVisibleShipsImmediately" width="40%"
:before-close="handleClose">
<el-form ref="form" :model="form">
<el-form-item :initDropDownBox="initDropDownBox" label="请选择快递公司 :" prop="expressCompany" label-width="200px">
<!-- 下拉 -->
<el-select v-model="form.expressCompany" size="30px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="请填写快递单号 :" prop="waybillNo" label-width="200px">
<el-input v-model="form.waybillNo" size="30px"></el-input>
</el-form-item>
</el-form>
<!-- 底部 -->
<span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="loading" @click="confirmDelivery"
style="width: 200px; height: 40px;display:block;margin:0 auto;" >
确认发货</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {fetchList,shipsImmediately} from '@/api/mall/merchantMallorder'
import {tableOption} from '@/const/crud/mall/merchantMallorder'
import {mapGetters} from 'vuex'
export default {
name: 'businessorder',
data() {
return {
paymentVoucher: '',
activities: [],// 查看物流当前状态
options:[],// 快递公司下拉
loading:false,
form:{
orderNo:0,
expressCompany:2,//快递公司
waybillNo:'',//快递单号
},
dialogVisibleShipsImmediately:false,//立即发货对话框
dialogVisible: false,// 查看物流对话框
dialogVisibleConfirmPayment:false,// 确认支付对话框
cancelOrderVue:false,
nowRow:undefined,
searchForm: {},
tableData: [],
page: {
total: 0, // 总页数
currentPage: 0, // 当前页数
pageSize: 20 // 每页显示多少条
},
tableLoading: false,
tableOption: tableOption
}
},
// 自定义的组件
components: {
},
computed: {
initDropDownBox(){
this.$axios.get("/general/mallExpressCompany/dropDownBox/courierCompany").then(e =>{
this.options=Object.values(e.data)
})
},
...mapGetters(['permissions']),
permissionList() {
return {
addBtn: this.vaildData(this.permissions.admin_mallorder_add, false),
delBtn: this.vaildData(this.permissions.admin_mallorder_del, false),
editBtn: this.vaildData(this.permissions.admin_mallorder_edit, false)
};
}
},
methods: {
contains: function (row) {
let str=row.state
let text='1,6,3,5'
return text.search(str)
},
// 立即发货-对话框
shipsImmediately(row){
this.form.orderNo=row.orderNo
this.$axios.get("/admin/merchantMallOrder/isVirtualGoods",{
params:{orderNo:row.orderNo},
}).then(response => {
if(response.data.data){
this.form.orderNo=row.orderNo
this.dialogVisibleShipsImmediately = true
}else {
// 虚拟商品 二次确认直接发货
this.$confirm('是否确认发货？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(data => {
shipsImmediately(this.form).then(r => {
this.$message.success('发货成功')
this.getList(this.page)
}).catch(e =>{
console.log('错误', e.message)
})
})
}
}, error => {
console.log('错误', error.message)
})
},
// 确认发货-提交按钮
confirmDelivery(){
shipsImmediately(this.form).then(r => {
this.dialogVisibleShipsImmediately = false
this.$message.success('发货成功')
this.getList(this.page)
return r.data
}).catch(e =>{
console.log('错误', e.message)
})
},
// 关闭对话框-查看物流
handleClose(done) {done();},
// 更改完成
onChangeDone() {
this.cancelOrderVue =false
this.refreshChange()
},
// 查看物流-对话框
viewLogistics(row){
// 1.打开对话框
this.dialogVisible = true
this.form.waybillNo=row.waybillNo
this.activities=[{content: '快递送至【成都市】物流运转中心', timestamp: '2018-04-11'}
,{color: '#0bbd87',content: '快递送至【成都市】物流运转中心', timestamp: '2018-04-11'}
,{content: '快递送至【成都市】物流运转中心', timestamp: '2018-04-11'}]
},
// 取消订单
cancelOrder(row){
this.cancelOrderVue=true
this.nowRow=row
},
// 查看详情
checkTheDetails(row){
this.$router.push('/businessOrder/details?id=' + row.orderNo)
},
// 列表查询
getList(page, params) {
this.tableLoading = true
fetchList(Object.assign({
current: page.currentPage,
size: page.pageSize
}, params, this.searchForm )).then(response => {
this.tableData = response.data.data.records
this.page.total = response.data.data.total
this.tableLoading = false
}).catch(() => {
this.tableLoading=false
})
},
// 删除
handleDel: function (row, index) {
this.$confirm('是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
return delObj(row.orderNo)
}).then(data => {
this.$message.success('删除成功')
this.getList(this.page)
})
},
// 批量删除
handleDelBatch() {
if (this.$refs.crud.tableSelect.length === 0) {
this.$message.error('请选择项进行删除')
return false
}
let ids = []
for (const row of this.$refs.crud.tableSelect) {
ids.push(row.id)
}
this.$confirm('是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
return delObj(ids)
}).then(data => {
this.$notify.success('删除成功')
this.$refs.crud.toggleSelection();
this.refreshChange();
})
},
// 更新
handleUpdate: function (row, index, done,loading) {
putObj(row).then(data => {
this.$message.success('修改成功')
done()
this.getList(this.page)
}).catch(() => {
loading();
});
},
// 保存
handleSave: function (row, done,loading) {
addObj(row).then(data => {
this.$message.success('添加成功')
done()
this.getList(this.page)
}).catch(() => {
loading();
});
},
// 每页条数改变事件
sizeChange(pageSize){
this.page.pageSize = pageSize
},
// 当前页发生改变事件
currentChange(current){
this.page.currentPage = current
},
// 查询事件
searchChange(form, done) {
this.searchForm = form
// this.page.currentPage = 0
this.getList(this.page, form)
done()
},
// 刷新事件
refreshChange() {
this.getList(this.page)
},
}
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment