Skip to content

S
shop-new
提交 31d17156 authored 作者: 王天霸's avatar 王天霸
浏览文件
操作

Merge branch 'dev_hxz' into test 

# Conflicts:
#	dist/static/img/dq.afccfc20.png
#	dist/static/img/fs.3060cc10.png
#	dist/static/img/my.8b7d6afc.png
#	dist/static/img/sp.eeab41d3.png
#	src/assets/image/website/clothesImgs.png
#	src/assets/image/website/electricalImgs.png
#	src/assets/image/website/foodImgs.png
#	src/assets/image/website/maternalImgs.png
#	src/assets/image/website/服饰.png
#	src/assets/image/website/母婴.png
#	src/assets/image/website/电器.png
#	src/assets/image/website/食品.png
#	src/views/entry/newyuncang.vue
#	src/views/system/asset/withdraw/index.vue
#	src/views/system/goods/add/components/goodsaftersale.vue
#	src/views/system/goods/add/components/goodsimg.vue
#	src/views/system/goods/add/components/goodsinfomation.vue
#	src/views/system/goods/add/components/goodsparameter.vue
#	src/views/system/goods/add/components/goodsspecifications.vue
#	src/views/system/goods/add/index.vue
上级 ca336fe7 9c2d36cb
隐藏空白字符变更
内嵌 并排
正在显示 包含 2526 行增加 和 127 行删除
src/api/module/goods.js
浏览文件 @ 31d17156
......@@ -17,10 +17,26 @@ export function GetCategory(query) {
params: query
})
}
// 经营类目
export function NewGetCategory(query) {
return request({
url: '/system/goodsNew/businessList',
method: 'get',
params: query
})
}
// 查询运费模板
// export function GetFreight(query) {
// return request({
// url: '/system/goods/getFreight',
// method: 'get',
// params: query
// })
// }
export function GetFreight(query) {
return request({
url: '/system/goods/getFreight',
url: '/system/freightNew/getFreight',
method: 'get',
params: query
})
......@@ -41,10 +57,19 @@ export function Onsale(data) {
})
}
// 新增goods
// 新增goods - old
// export function addGoods(data) {
// return request({
// url: '/system/goods/add',
// method: 'post',
// data: data
// })
// }
// 新增商品
export function addGoods(data) {
return request({
url: '/system/goods/add',
url: '/system/goodsNew/addGoods',
method: 'post',
data: data
})
......@@ -70,7 +95,7 @@ export function delGoods(ids) {
//上传图片
export function UploadImg(data) {
return request({
url: '/system/goods/uploadImg',
url: '/system/goodsNew/uploadImage',
method: 'post',
data: data
})
......
src/assets/image/website/setIn1.png
查看替换文件 @ ca336fe7 浏览文件 @ 31d17156
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/setIn2.png
查看替换文件 @ ca336fe7 浏览文件 @ 31d17156
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/step1.png
查看替换文件 @ ca336fe7 浏览文件 @ 31d17156
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/step2.png
查看替换文件 @ ca336fe7 浏览文件 @ 31d17156
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/step3.png
查看替换文件 @ ca336fe7 浏览文件 @ 31d17156
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/step4.png
查看替换文件 @ ca336fe7 浏览文件 @ 31d17156
This image diff could not be displayed because it is too large. You can view the blob instead.
src/permission.js
浏览文件 @ 31d17156
......@@ -7,24 +7,23 @@ import { getToken } from '@/utils/auth'
NProgress.configure({ showSpinner: false })
const whiteList = ['/login','/platformlogin', '/auth-redirect', '/bind', '/register']
const whiteList = ['/login','/platformlogin', '/auth-redirect', '/bind', '/register','/newyuncang']
router.beforeEach((to, from, next) => {
//debugger
NProgress.start()
// console.log("getToken()",getToken())
if (getToken()) {
//
/* has token*/
if (to.path === '/login') {
return false
next({ path: '/' })
NProgress.done()
} else {
// console.log(3333)
if (store.getters.roles.length === 0) {
// console.log(4444)
// 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(res => {
// console.log("res",res.data.Role)
// return false
// 拉取user_info
const roles = res.data.Role
......@@ -53,15 +52,15 @@ router.beforeEach((to, from, next) => {
}
}
} else {
//debugger
// 没有token
if (whiteList.indexOf(to.path) !== -1) {
console.log("在免登录白名单，直接进入")
console.log("在免登录白名单，直接进入")
// 在免登录白名单，直接进入
next()
} else {
// console.log(999999)
next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
//next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
next(`/newyuncang?redirect=${to.path}`) // 否则全部重定向到登录页
NProgress.done()
}
}
......
src/router/index.js
浏览文件 @ 31d17156
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
......@@ -40,11 +41,22 @@ export const constantRoutes = [
}
]
},
{
path: '/setpsd',
component: (resolve) => require(['@/views/system/settings/setpsd'], resolve),
hidden: true
},
// {
// path: '/redirect',
// component: Layout,
// hidden: true,
// children: [
// {
// path: '/redirect/:path(.*)',
// component: (resolve) => require(['@/views/redirect'], resolve)
// }
// ]
// },
// {
// path: '/setpsd',
// component: (resolve) => require(['@/views/system/settings/setpsd'], resolve),
// hidden: true
// },
{
path: '/platformlogin',
component: (resolve) => require(['@/views/platformlogin'], resolve),
......@@ -65,6 +77,11 @@ export const constantRoutes = [
component: (resolve) => require(['@/views/error/401'], resolve),
hidden: true
},
{
path: '/newyuncang',
component: (resolve) => require(['@/views/entry/newyuncang'], resolve),
hidden: true
},
// 总体流程
{
path: '/process',
......
src/store/modules/permission.js
浏览文件 @ 31d17156
......@@ -20,6 +20,9 @@ const permission = {
return new Promise(resolve => {
// 向后端请求路由数据
getRouters().then(res => {
if(!res.data) {
res.data = [];
}
const accessedRoutes = filterAsyncRouter(res.data)
accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
commit('SET_ROUTES', accessedRoutes)
......@@ -40,7 +43,7 @@ function filterAsyncRouter(asyncRouterMap) {
route.component = Layout
}else{
route.component=LayoutChildren
}
}
} else {
route.component = loadView(route.component)
}
......
src/views/entry/newyuncang.vue
浏览文件 @ 31d17156
......@@ -7,11 +7,13 @@
<li>
<img style="width:114px;height:35px;" src="../../../public/images/logo_white_sm.png" alt="">
</li>
<li v-for="(item,index) in ycList" :key="item.id">{{ item.name}}</li>
<li v-for="(item,index) in ycList" :key="item.id">
<a :href=" item.src " target="_blank">{{ item.name}}</a>
</li>
</ul>
<div class="register-login-btn">
<div class="register-btn">注 册</div>
<div class="login-btn">登 录</div>
<div class="register-btn" @click="toRegister">注 册</div>
<div class="login-btn" @click="toLogin">登 录</div>
</div>
</div>
</header>
......@@ -28,9 +30,9 @@
<div class="advantage" :class="{ 'mgB100': isAdHover }">
<p class="advantage-title">核心优势</p>
<div class="advantage-con" :class="{ 'mgT20' : isAdHover }">
<div class="pre-advantage" @mouseover="adHover(1)" @mouseleave="adLeave(1)" :class="{ 'noBorder': indexAddom === 1 }">
<div class="pre-advantage" @mouseover="adHover(1)" @mouseleave="adLeave(1)" :class="{ 'noBorder': indexAddom === 1 }" style="z-index: 4">
<dl class="dl-con" :class="{ 'noDlCon': indexAddom === 1 }">
<dt></dt>
<dt class="dl-con-ad1"></dt>
<dd>技术优势</dd>
</dl>
<div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 1 }">
......@@ -42,9 +44,9 @@
</p>
</div>
</div>
<div class="pre-advantage" @mouseover="adHover(2)" @mouseleave="adLeave(2)" :class="{ 'noBorder': indexAddom === 2 }">
<div class="pre-advantage" @mouseover="adHover(2)" @mouseleave="adLeave(2)" :class="{ 'noBorder': indexAddom === 2 }" style="z-index: 3">
<dl style="text-align: center" class="dl-con" :class="{ 'noDlCon': indexAddom === 2 }">
<dt></dt>
<dt class="dl-con-ad2"></dt>
<dd>成本优势</dd>
</dl>
<div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 2 }">
......@@ -56,9 +58,9 @@
</p>
</div>
</div>
<div class="pre-advantage" @mouseover="adHover(3)" @mouseleave="adLeave(3)" :class="{ 'noBorder': indexAddom === 3 }">
<div class="pre-advantage" @mouseover="adHover(3)" @mouseleave="adLeave(3)" :class="{ 'noBorder': indexAddom === 3 }" style="z-index: 2">
<dl style="text-align: center" class="dl-con" :class="{ 'noDlCon': indexAddom === 3 }">
<dt></dt>
<dt class="dl-con-ad3"></dt>
<dd>响应式</dd>
</dl>
<div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 3 }">
......@@ -77,9 +79,9 @@
</p>
</div>
</div>
<div class="pre-advantage" @mouseover="adHover(4)" @mouseleave="adLeave(4)" :class="{ 'noBorder': indexAddom === 4 }">
<div class="pre-advantage" @mouseover="adHover(4)" @mouseleave="adLeave(4)" :class="{ 'noBorder': indexAddom === 4 }" style="z-index: 1">
<dl style="text-align: center" class="dl-con" :class="{ 'noDlCon': indexAddom === 4 }">
<dt></dt>
<dt class="dl-con-ad4"></dt>
<dd>解决方案</dd>
</dl>
<div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 4 }">
......@@ -96,7 +98,7 @@
</section>
<!-- 入驻流程 -->
<section style="padding-bottom: 90px;background-color: #f9faff;">
<section style="padding-bottom: 90px;background-color: #f9f9fa;">
<p class="process-title">入驻流程和材料</p>
<div class="process-con">
<div class="process-steps">
......@@ -139,7 +141,7 @@
</div>
<div class="process-mater">
<div class="pro-ma">
<p class="set-in-ma">入驻必备材料</p>
<p class="set-in-ma m-bg">入驻必备材料</p>
<div class="optional">
<ul>
<li>营业执照电子版</li>
......@@ -149,7 +151,7 @@
</div>
<div class="pro-ma">
<p class="set-in-ma">入驻选填材料</p>
<p class="set-in-ma n-m-bg">入驻选填材料</p>
<div class="optional">
<ul >
<li>品牌LOGO</li>
......@@ -171,14 +173,15 @@
<p class="brands-tip">我们已与各行业领域的优秀品牌达成合作</p>
<div>
<p class="brand-type">
<span class="clothes" @click="brandTypeChange(0)">服饰</span>
<span class="electrical" @click="brandTypeChange(1)">电器</span>
<span class="food" @click="brandTypeChange(2)">食品</span>
<span class="maternal" @click="brandTypeChange(3)">母婴</span>
<span class="clothes" :class="{ 'light-word' : isLight === 0 }" @click="brandTypeChange(0)">服饰</span>
<span class="electrical" :class="{ 'light-word' : isLight === 1 }" @click="brandTypeChange(1)">电器</span>
<span class="food" :class="{ 'light-word' : isLight === 2 }" @click="brandTypeChange(2)">食品</span>
<span class="maternal" :class="{ 'light-word' : isLight === 3 }" @click="brandTypeChange(3)">母婴</span>
</p>
<div class="brand-carousel">
<el-carousel ref="cardShow" :autoplay="false" arrow="never" indicator-position="none" type="card" class="card-show" height="400px" style="margin: 20px auto;">
<el-carousel ref="cardShow" @change="brandCarChange()" :autoplay="false" arrow="never" indicator-position="none" type="card" class="card-show" height="400px" style="margin: 20px auto;">
<el-carousel-item name="1" class="pre-el-carousel-item">
<<<<<<< HEAD
<img src="../../assets/image/website/fs.png" alt="">
</el-carousel-item>
<el-carousel-item name="2" class="pre-el-carousel-item">
......@@ -189,6 +192,18 @@
</el-carousel-item>
<el-carousel-item name="4" class="pre-el-carousel-item">
<img src="../../assets/image/website/my.png" alt="">
=======
<img src="../../assets/image/website/clothesImgs.png" alt="">
</el-carousel-item>
<el-carousel-item name="2" class="pre-el-carousel-item">
<img src="../../assets/image/website/electricalImgs.png" alt="">
</el-carousel-item>
<el-carousel-item name="3" class="pre-el-carousel-item">
<img src="../../assets/image/website/foodImgs.png" alt="">
</el-carousel-item>
<el-carousel-item name="4" class="pre-el-carousel-item">
<img src="../../assets/image/website/maternalImgs.png" alt="">
>>>>>>> dev_hxz
</el-carousel-item>
</el-carousel>
</div>
......@@ -224,6 +239,7 @@
</template>
<script>
import store from '@/store';
export default {
name: "newyuncang",
data() {
......@@ -232,15 +248,14 @@
isAdHover: false,
isHasBorder: false,
indexAddom: false,
isLight: 0,
ycList: [
{ name: '首页',id:0 },
{ name: '开放平台',id:1 },
{ name: '云仓',id:2 },
{ name: '关于我们',id:3 },
{ name: '首页',id:0,src: '/' },
{ name: '开放平台',id:1,src: 'http://open.jxhh.com/doc/api.html' },
{ name: '云仓',id:2,src: 'http://scm.jxhh.com' },
{ name: '关于我们',id:3,src: 'http://www.stbz.net' },
],
clothesBrandImgs: [
// {url}
]
gwToken: ''
}
},
mounted() {
......@@ -251,6 +266,7 @@
},
methods: {
// 监听浏览器滚动
handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.isScroll = scrollTop > 100 ? true : false;
......@@ -258,8 +274,13 @@
// 品牌类型切换
brandTypeChange(index) {
this.$refs.cardShow.setActiveItem(index);
this.isLight = index;
},
// 点击轮播图，切换，高点 品牌类别
brandCarChange() {
this.isLight = this.$refs.cardShow.activeIndex;
},
// 划过效果
adHover(index) {
this.isAdHover = true;
this.indexAddom = index;
......@@ -267,6 +288,18 @@
adLeave(index) {
this.isAdHover = false;
this.indexAddom = -1;
},
// 去注册
toRegister() {
store.dispatch('LogOut').then(() => {
var ssa = window.location.host;
// window.location.href = 'http://sso.jxhh.com/logout?redirect=http://' + ssa
window.location.href = 'http://sso.jxhh.com/logout?redirect=http://' + window.location.host + '/platformlogin'
})
},
// 去登录
toLogin() {
//window.location.href = 'http://sso.jxhh.com/logout?redirect=http://' + window.location.host + '/platformlogin'
}
} // methods end
......@@ -382,10 +415,10 @@
width: 268px;
height: 190px;
border: 1px solid #DCDCDC;
margin-right: 40px;
margin: 0 20px;
position: relative;
background: #FFFFFF;
z-index: 29;
z-index: 0;
border-radius: 2px;
}
.dl-con {
......@@ -393,7 +426,7 @@
height: 100%;
text-align : center;
background: #FFFFFF;
z-index: 29; /* 这个值要保证和 当前容器dom 一致 */
z-index: 0; /* 这个值要保证和 当前容器dom 一致 */
border: none;
overflow : hidden;
}
......@@ -402,18 +435,32 @@
width: 85px;
height: 88px;
margin: 25px auto;
background : url("../../assets/image/website/ad1.png") no-repeat center center;
}
.dl-con > dd {
font-size: 18px;
color: #232323;
margin: 0 auto;
}
.dl-con > .dl-con-ad1 {
background : url("../../assets/image/website/ad1.png") no-repeat center center;
background-size : cover;
}
.dl-con > .dl-con-ad2 {
background : url("../../assets/image/website/ad2.png") no-repeat center center;
background-size : cover;
}
.dl-con > .dl-con-ad3 {
background : url("../../assets/image/website/ad3.png") no-repeat center center;
background-size : cover;
}
.dl-con > .dl-con-ad4 {
background : url("../../assets/image/website/ad4.png") no-repeat center center;
background-size : cover;
}
.pre-advantage-details {
width: 270px;
height: 420px;
height: 410px;
position: absolute;
top: -110px;
left: -1px;
......@@ -442,7 +489,10 @@
font-size: 16px;
font-weight: 400;
line-height: 28px;
text-align : center;
text-align : justify;
text-align-last : center;
-ms-text-align-last : center;
-moz-text-align-last : center;
}
/* hover 时候的效果 class */
......@@ -461,10 +511,11 @@
.up-ad-details {
display: block;
z-index: 199;
}
.mgB100 {
margin-bottom: 200px;
margin-bottom: 150px;
}
......@@ -480,19 +531,20 @@
width: 275px;
height: 315px;
background: #fff;
margin-right: 35px;
//border: 1px solid #e9e9e9;
//border-radius: 6px;
margin: 0 20px;
}
.pro-ma{
width: 585px;
width: 590px;
height: 190px;
background : #fff;
margin-right: 35px;
margin-top: 35px;
margin: 35px 20px 0;
background : #fff url("../../assets/image/website/mate-bg.png") no-repeat 100%;
}
.pro-ma:hover,.pro-step:hover{
box-shadow :0 2px 10px 0 rgba(0,0,0,0.05);
}
.step-one,.step-two,.step-three,.step-four {
width: 58px;
height: 58px;
......@@ -548,8 +600,13 @@
color: #000000;
line-height: 20px;
text-indent: 30px;
margin: 35px 0 15px 68px;
}
.m-bg {
background : url("../../assets/image/website/setIn1.png") no-repeat 0 center;
margin: 35px 0 15px 72px;
}
.n-m-bg {
background : url("../../assets/image/website/setIn2.png") no-repeat 0 center;
}
.optional{
......@@ -590,7 +647,7 @@
font-weight: 400;
color: #333333;
opacity: 0.82;
padding : 30px 0;
padding : 35px 0 20px;
}
.brand-type {
......@@ -599,7 +656,7 @@
justify-content : space-around;
align-items : center;
width: 40%;
margin: 80px auto 10px;
margin: 60px auto 12px;
}
.clothes, .electrical, .food, .maternal {
......@@ -610,8 +667,10 @@
font-weight: 400;
color: #000;
text-indent: 40px;
/*
color: #1966FF;*/
}
.light-word {
color: #1966FF;
}
.clothes {
......@@ -658,15 +717,15 @@ color: #1966FF;*/
border: 1px solid #e9e9e9;
background : #fff;
overflow : hidden;
//box-shadow : 4px 4px 4px 4px #99a9bf;
box-shadow: 0 25px 28px 10px rgba(152, 150, 150, 0.1);
}
.el-carousel__item:nth-child(2n) {
background-color: #fff;
transform : scaleY(1.8);
}
//.el-carousel__item:nth-child(2n) {
// //background-color: #99a9bf;
// //box-shadow : 4px 4px 4px 4px #99a9bf;
//}
//
.el-carousel__item:nth-child(2n+1) {
background: #fff;
}
/* footer 联系我们 */
......@@ -714,7 +773,7 @@ color: #1966FF;*/
flex-direction : column;
justify-content : center;
align-items : center;
border-right: 1px solid #959BA8;
border-right: 1px solid #50555f;
padding-right: 80px;
}
......@@ -732,7 +791,7 @@ color: #1966FF;*/
height: 30px;
padding: 0 40px;
line-height : 30px;
border-right: 1px solid #959BA8;
border-right: 1px solid #50555f;
cursor: pointer;
}
......
src/views/system/asset/bankcard/index.vue
浏览文件 @ 31d17156
......@@ -24,13 +24,9 @@
@selection-change="handleSelectionChange">
<el-table-column label="商户ID" align="center" prop="id"/>
<el-table-column label="开户名" align="center" prop="bank_account_name"/>
<!-- <el-table-column label="城市名" align="center" prop="ProvinceCity"/>-->
<el-table-column label="银行名称" align="center" prop="bank_name"/>
<el-table-column label="开户行" align="center" prop="bank_branch_name"/>
<el-table-column label="账号" align="center" prop="bank_account_sn"/>
<!-- <el-table-column label="支付宝账户名称" align="center" prop="ZfbAccountName" />-->
<!-- <el-table-column label="支付宝账户" align="center" prop="ZfbAccount" />-->
<!-- <el-table-column label="类型" :formatter="btypa" align="center" prop="State"/>-->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
......@@ -49,36 +45,12 @@
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改商户银行卡对话框 -->
<!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
<!-- <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!-- <el-form-item label="类型">-->
<!-- <el-select @change="selectChanged" v-model="form.txType" placeholder="类型">-->
<!-- <el-option v-for="item in state" :key="item.value" :label="item.label"-->
<!-- :value="item.value"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!-- <el-button @click="cancel">取 消</el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
<el-dialog :visible.sync="bank" :title="banktitle">
<el-form ref="form" :model="form" :rules="rules" label-width="90px" size="small">
<!-- <el-row>-->
<!-- <el-col :span="16" :offset="3">-->
<!-- <el-form-item label="开户城市" prop="ProvinceCity">-->
<!-- <el-input v-model="form.ProvinceCity" placeholder="请输入城市名和商户提交时一致"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-row>
<el-col :span="16" :offset="3">
<el-form-item label="银行名称">
<el-select v-model="form.bankName" placeholder="状态" style="width: 100%">
<el-form-item label="银行名称" prop="bankName">
<el-select v-model="form.bankName" placeholder="请选择银行名称" style="width: 100%">
<el-option v-for="item in bankList" :key="item.value" :label="item.value"
:value="item.value"></el-option>
</el-select>
......@@ -117,21 +89,6 @@
</div>
</el-dialog>
<!-- <el-dialog :visible.sync="zfb" :title="banktitle">-->
<!-- <el-form ref="form" :model="form" :rules="rules2" label-width="80px">-->
<!-- <el-form-item label="支付宝账户名称" prop="ZfbAccountName">-->
<!-- <el-input v-model="form.ZfbAccountName" placeholder="请输入支付宝账户名称"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="支付宝账户" prop="ZfbAccount">-->
<!-- <el-input v-model="form.ZfbAccount" placeholder="请输入支付宝账户"/>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!-- <el-button @click="cancel">取 消</el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
</el-card>
</div>
</template>
......@@ -183,18 +140,20 @@
},
// 表单校验
rules: {},
rules2: {
ZfbAccountName: [
{required: true, message: "支付宝账户名称不能为空", trigger: "blur"}
rules: {
bankName: [
{required: true, message: "银行名称不能为空", trigger: "change"}
],
ZfbAccount: [
{required: true, message: "支付宝账号不能为空", trigger: "blur"}
bank_branch_name: [
{required: true, message: "开户行不能为空", trigger: "blur"}
],
// zfb_account_name: [
// { required: true, message: "支付宝账户名称不能为空", trigger: "blur" }
// ],
}
bankAccountName: [
{required: true, message: "户名不能为空", trigger: "blur"}
],
BankAccountSn: [
{required: true, message: "账号不能为空", trigger: "blur"}
],
},
};
},
created() {
......
src/views/system/asset/withdraw/index.vue
浏览文件 @ 31d17156
......@@ -25,7 +25,11 @@
<el-select v-model="form.bank_id" placeholder="选择到账银行卡" style="width:260px;">
<el-option v-for="item in banklist" :key="item.Id"
:label="item.bank_name ? item.bank_name : item.bank_account_name"
<<<<<<< HEAD
:value="item.id"></el-option>
=======
:value="item.id ? item.id : item.Id"></el-option>
>>>>>>> dev_hxz
</el-select>
</el-form-item>
<el-form-item label="提现金额" prop="amount">
......
src/views/system/goods/add/components/goodsaftersale.vue 0 → 100644
浏览文件 @ 31d17156
<template>
<div class="goods-after-sale">
<el-form ref="goodsAfterSaleForm" :model="goodsAfterSaleForm" :rules="goodsAfterSaleRules" label-width="150px" size="small">
<el-form-item label="服务标签：" prop="stags">
<el-checkbox-group v-model="goodsAfterSaleForm.stags">
<el-checkbox v-for="item in tagOptions" :label="item.id" true-label :key="item.id" @change="serviceTagsChange(item.id)">{{item.tag}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="邮费模板：" prop="freight_id">
<el-select v-model="goodsAfterSaleForm.freight_id" placeholder="请选择邮费模板" style="width:400px;">
<el-option v-for="item in freightOptions" :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发货时效：" prop="delay_compensate">
<el-select v-model="goodsAfterSaleForm.delay_compensate" style="width:400px;" placeholder="请选择发货时效">
<el-option label="24小时" :value="24"></el-option>
<el-option label="48小时" :value="48"></el-option>
<el-option label="72小时" :value="72"></el-option>
</el-select>
</el-form-item>
<el-form-item label="售后时长：" prop="aftersale_time">
<el-select v-model="goodsAfterSaleForm.aftersale_time" style="width:400px;" placeholder="请选择售后时长">
<el-option label="7天" :value="7"></el-option>
<el-option label="15天" :value="15"></el-option>
<el-option label="30天" :value="30"></el-option>
</el-select>
</el-form-item>
<!-- <div style="width: 100%;height: 1000px;">我很高</div>-->
</el-form>
</div>
</template>
<script>
import { GetFreight } from '@/api/module/goods'
export default {
name: "goodsaftersale",
props: {
goodsaftersale: {
type: Object,
required: true
}
},
data() {
let checkStags = (rule, value, callback) => {
if (this.goodsAfterSaleForm.stags.length === 0) {
callback(new Error("请选择服务类型"));
} else {
callback();
}
};
return {
goodsAfterSaleForm: {
stags: [],
freight_id: 310,
delay_compensate: 24,
aftersale_time: 7
},
goodsAfterSaleRules: {
stags: [{required: true, validator: checkStags}],
freight_id: [{required: true, message: '请选择邮费模板', trigger: 'change'}],
delay_compensate: [{required: true, message: '请选择发货时效', trigger: 'change'}],
aftersale_time: [{required: true, message: '请选择售后时长', trigger: 'change'}]
},
tagOptions: [
{id: 2, tag: "假一赔十"},
{id: 3, tag: "7天退换"},
{id: 4, tag: "不可退还"},
{id: 5, tag: "厂家直供"},
{id: 6, tag: "售后无忧"}
],
freightOptions: []
} // return end
},
mounted() {
this.getFreightData();
},
methods: {
// 运费模板
getFreightData() {
// let query = { page: 1, limit: 50 };
GetFreight().then(res => {
if(res.data) {
this.freightOptions = res.data;
}else {
this.freightOptions = ''
}
});
},
// 服务标签，7天退换、不可退换互斥
serviceTagsChange(id) {
let index4 = this.goodsAfterSaleForm.stags.indexOf(4);
let index3 = this.goodsAfterSaleForm.stags.indexOf(3);
if(id == 3) {
if( index4 > -1) {
this.goodsAfterSaleForm.stags.splice(index4,1)
}
}
if(id == 4) {
if( index3 > -1) {
this.goodsAfterSaleForm.stags.splice(index3,1)
}
}
},
// 商品信息 子组件 form表单校验, 在父组件中被调用
validateGoodsAfterSaleForm () {
let flag = null
this.$refs['goodsAfterSaleForm'].validate(valid => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
},
} // methods end
}
</script>
<style lang="scss" type="text/stylus" scoped>
.goods-after-sale {
padding: 15px 0px;
margin-top: 18px;
}
</style>
src/views/system/goods/add/components/goodsimg.vue 0 → 100644
浏览文件 @ 31d17156
<template>
<div class="goods-img">
<el-form ref="goodsDeForm" :model="goodsDeForm" label-width="150px" size="small">
<el-form-item label="商品详情：" prop="description">
<span class="tip-span up-img-tip" style="display: block;line-height: 34px;">上传图片详情，用于商品详情页展示</span>
<el-upload
class="avatar-uploader2"
action="#"
name="file"
auto-upload
:show-file-list="false"
multiple
:file-list="goodsDetailsImgFileList"
><i class="el-icon-plus" />
</el-upload>
<input class="uploadImg" style="display: none;" type="file" ref="file" accept="image/*" @change="fileChange($event)" name="file" multiple id="file">
<quill-editor class="quill-editor-class" ref="myTextEditor" v-model="goodsDeForm.description" :options="editorOption" @change="onEditorChange" style="height:500px;margin-bottom:20px;"></quill-editor>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {UploadImg} from '@/api/module/goods'
// 工具栏配置
const toolbarOptions = [ ['image'] ];
export default {
name: "Goodsimg",
props: {
imgdata: {
type: Object,
required: true
}
},
data() {
// let checkImg = (rule, value, callback) => {
// if (this.goodsDetailsImgFileList.length < 1) {
// callback(new Error("请上传商品详情的图片"));
// } else {
// callback();
// }
// };
return {
loading: false,
goodsDeForm: {
description: '',
},
// goodsDeRules: {
// description:[{required: true, message: '请上传商品详情图片', validator: checkImg}]
// },
goodsDetailsImgFileList: [],
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('#file').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
},
index: 0,
indexall: 0,
};
},
components: {},
mounted() {
},
watch: {},
methods: {
// 通过原生 input上传 图片
fileChange() {
const list = this.$refs.file.files;
this.indexall = list.length
this.uploadImgs()
},
// 向后台 传输 base64的图片数据
uploadImgs() {
this.getBase64(this.$refs.file.files[this.index]).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img}
//debugger
// this.loading = true;
UploadImg(data).then(res => {
//debugger
if (res && res.code === 1) {
this.index++;
this.goodsDetailsImgFileList.push({'url': res.data.image_url});
this.$message({ message:'上传成功',type:'success'});
// 获取富文本组件实例
let quill = this.$refs.myTextEditor.quill;
let length = quill.getSelection().index;
// 插入图片 res.data.url为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.data.image_url)
// 调整光标到最后
quill.setSelection(length + 1)
if(this.index < this.indexall){
this.uploadImgs()
}else{
this.index = 0
}
}else {
this.$message({ message:'上传失败，请重新上传',type:'error'});
}
this.loading = false;
})
});
},
//
onEditorChange({editor, html, text}) {
this.goodsDeForm.description = html;
},
onEditorBlur(){//失去焦点事件
},
// 商品详情 子组件 form表单校验, 在父组件中被调用
// validateGoodsDeImgForm() {
// let flag = null
// this.$refs['goodsDeForm'].validate(valid => {
// if (valid) {
// flag = true
// } else {
// flag = false
// }
// })
// return flag
// },
// -------------------------通用
// 图片转换为 base64
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
},
};
</script>
<style lang="scss" type="text/stylus" scoped>
.goods-img {
padding: 15px 0px;
margin-top: 18px;
}
.avatar-uploader2 {
display : none;
}
.quill-editor-class {
position: relative;
}
.up-img-tip {
position: absolute;
top: 0;
left: 60px;
}
/deep/.ql-toolbar.ql-snow {
border: none;
border-bottom: 1px solid #ccc;
padding: 5px 8px;
}
/deep/.ql-toolbar.ql-snow .ql-formats {
vertical-align : baseline;
margin: 0;
padding: 0 8px;
border: 1px solid #ccc;
border-radius: 3px;
}
/deep/.ql-toolbar.ql-snow .ql-formats:hover {
background-color : #00afff;
border-color: #00afff;
}
/* 一般提示性文字 */
.tip-span {
color: #909399;
font-size: 12px;
}
</style>
src/views/system/goods/add/components/goodsinfomation.vue 0 → 100644
浏览文件 @ 31d17156
<template>
<div class="goods-info">
<el-form :model="goodsInfoForm" :rules="goodsInfoRules" ref="goodsInfoForm" label-width="150px" class="demo-goodsInfoForm" size="small">
<el-form-item label="商品分类：" prop="categoryStr">
<el-input style="width:420px;" v-model="goodsInfoForm.categoryStr" :disabled="true"></el-input>
<!-- <span class="type-text-span">{{ goodsInfoForm.categoryStr }}</span>-->
<el-link class="edit-type-span el-icon-edit" type="primary" :underline="false" @click="editType">修改所在类目</el-link>
<span class="tip-span">该商品所在类目须支持七天无理由退货</span>
</el-form-item>
<el-form-item label='商品标题：' prop="goods_name">
<el-input v-model="goodsInfoForm.goods_name" placeholder="请输入商品标题" style="width:420px;"></el-input>
<span class="tip-span ml20">商品名称限制在30字以内，不要填写与商品无关的词</span>
</el-form-item>
<el-form-item label='商品关键词：' prop="goods_des">
<el-input v-model="goodsInfoForm.goods_des" placeholder="请输入商品关键词" style="width:420px;"></el-input>
<span class="tip-span ml20">关键词之间 <strong>英文</strong> 用逗号分开，最多可以添加5个</span>
</el-form-item>
<el-form-item label="商品产地：" prop="producing_area">
<el-select v-model="goodsInfoForm.producing_area" placeholder="请选择商品产地" style="width: 420px;">
<el-option
v-for="item in areaOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="商品发货地：" prop="deliver_area">
<el-select v-model="goodsInfoForm.deliver_area" placeholder="请选择商品发货地" style="width: 420px;">
<el-option
v-for="item in areaOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label='商品单位：' prop="unit">
<el-input v-model="goodsInfoForm.unit" placeholder="请输入商品单位" style="width:420px;"></el-input>
<!-- <span class="tip-span ml20">关键词之间用逗号分开，最多可以添加5个</span>-->
</el-form-item>
<el-form-item label="所属品牌：" prop="goods_brand">
<el-select v-model="goodsInfoForm.goods_brand" placeholder="请选择商品品牌" style="width: 420px;">
<el-option
v-for="item in brandOptions"
:key="item.id"
:label="item.brand_cn"
:value="item.id"
></el-option>
</el-select>
<el-link class="edit-type-span el-icon-plus" type="primary" :underline="false" @click="toBrand">新增品牌</el-link>
</el-form-item>
<el-form-item label='市场参考价链接：' prop="web_url">
<el-input v-model="goodsInfoForm.web_url" placeholder="请输入京东或者淘宝的商品链接" style="width:420px;"></el-input>
</el-form-item>
<el-form-item label='商品编码：' prop="out_goods_id">
<el-input v-model="goodsInfoForm.out_goods_id" placeholder="请输入商品编码（非必须）" style="width:420px;"></el-input>
</el-form-item>
<el-form-item label="商品图片：" prop="imgs">
<span class="tip-span" style="display: block;line-height: 34px;">
<i style="margin: 10px;">{{ goodsImgFileList.length }} / 5</i>
商品图片最多上传5张，默认第一张为主图
<span style="margin-left: 20px;">单张图片需限制在2M以内，可上传png、jpg格式，尺寸要求为800 * 800</span>
</span>
<el-upload
class="upload-img"
list-type="picture-card"
action="#"
:limit="5"
:on-exceed="limitImg5"
:before-upload="beforeUpGoodsImg"
:http-request="uploadGoodsImg"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="goodsImgFileList"
><i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="goodsImgVisible">
<img width="100%" :src="goodsImgUrlDialog" alt="">
</el-dialog>
</el-form-item>
</el-form>
<!-- 修改 商品分类目录 -->
<el-dialog
v-loading="loadingSSQ"
class="add-workorder-dialog"
title="修改商品分类"
:visible.sync="editGoodsTypeDialog"
:destroy-on-close="true"
:before-close="cancelType"
width="60%"
center
>
<!-- <p>当前所选类目：<span></span></p>-->
<el-cascader-panel v-show="editGoodsTypeDialog" v-model="SSQGoodsList" :props='goodsprops' @change="SSQGoodsChange" ref="ssqGoodsCascader"></el-cascader-panel>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelType" size="mini">取 消</el-button>
<el-button type="primary" @click="saveType" size="mini">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { GetCategory, GetFreight, UploadImg } from '@/api/module/goods'
import { getAreaList } from '@/api/module/retreat/address';
import { getBrandsInf } from '@/api/module/brand/brand'
export default {
name: 'goods',
props: {
goodsinfodata: {
type: Object,
required: true
}
},
data() {
let categoryIdCheck = (rule, value, callback) => {
if (this.goodsImgFileList.length < 1) {
callback(new Error("请上传商品图片"));
} else {
callback();
}
};
return {
//loading: false,
// categoryStr: '',
goodsInfoDataClone: {},
areaOptions: [], // 地址 省
brandOptions: [], // 商品品牌
goodsInfoForm: {
categoryStr: '', // 商品分类 地址拼接
categoryList: [], // 商品分类 id集合的数组
goods_des: '', // 关键词
goods_name: '', // 商品标题
category_id: '',
producing_area: '', // 产地
deliver_area: '', // 发货地
unit: '', // 单位
goods_brand: '', // 品牌
web_url: '', // 外部链接
out_goods_id: '', // 商品编码
imgs: [] // 商品图片
},
goodsInfoRules: {
categoryStr: [{required: true, message: '商品分类不能为空', trigger: 'blur'}],
goods_name: [
{required: true, message: '请输入商品名称', trigger: 'blur'},
{min: 3, max: 30, message: '商品标题限制在3字符以上，30个字符以下', trigger: 'blur'}
],
goods_des: [{required: true, message: '商品关键词不能为空', trigger: 'blur'}],
producing_area:[{required: true, message: '请选择商品产地', trigger: 'change'}],
deliver_area: [{required: true, message: '请选择商品发货地', trigger: 'change'}],
unit: [{required: true, message: '商品单位不能为空', trigger: 'blur'}],
goods_brand: [{required: true, message: '请选择商品品牌', trigger: 'change'}],
imgs: [{required: true, message: '请上传商品图片', validator: categoryIdCheck}]
},
goodsImgFileList: [], // 商品图片地址 集合list
goodsImgVisible: false, // 图片能否预览
goodsImgUrlDialog: '',
/* 修改 商品分类 */
loadingSSQ: false,
editGoodsTypeDialog: false,
SSQGoodsList: [], // 省市区 子组件goods的
goodsprops: {
expandTrigger: 'click',
lazy: true,
lazyLoad: this.lazyLoad,
value: "id",
label: 'name',
leaf: 'leaf'
},
} // return end
},
components: {},
watch: {
// 'goodsImgFileList': {
// handler(val, oldVal) {
// if(val.length > 0) {
// this.goodsInfoForm.imgs = '';
// let imgArr = [];
// val.forEach(item => {
// imgArr.push(item.url);
// })
// this.goodsInfoForm.imgs = imgArr.toString();
// }else if(val.length === 0){
// this.goodsInfoForm.imgs = '';
// }
// //console.log(123,this.goodsInfoForm.imgs);
// },
// deep: true
// }
// serviceagsTags: {
// handler(val, oldVal) {
// this.$set(this.goodsInfoForm, 'serviceagsTags', val)
// },
// deep: true
// },
},
created() {
//深拷贝一份最开始的数据，为初始化准备
this.goodsInfoDataClone = this.deepClone(this.goodsinfodata);
this.goodsInfoForm.categoryStr = this.goodsinfodata.categoryStr;
this.goodsInfoForm.categoryList = this.goodsinfodata.categoryList;
// console.log("父组件传过来的",this.goodsinfodata)
// console.log("1111",this.goodsInfoForm)
// 获取 省
this.getArea();
// 获取 商品品牌
this.getBrands();
},
mounted() {
// this.getCategory();
// this.getFreight();
// this.getBrands();
},
methods: {
// 获取 省
getArea() {
let limboNode = {
pid: 0
};
getAreaList(limboNode).then( res=> {
if(res.data) {
this.areaOptions = res.data;
}else {
this.areaOptions = [];
}
});
},
// 获取 商品品牌
getBrands() {
getBrandsInf().then( res => {
if(res.data) {
this.brandOptions = res.data.data;
}else {
this.brandOptions = [];
}
});
},
/* 修改 商品分类 类目 */
editType() {
this.SSQGoodsList = [];
this.editGoodsTypeDialog = true;
this.SSQGoodsList = this.goodsInfoForm.categoryList
// console.log(222,this.SSQGoodsList);
},
lazyLoad(node, resolve) {
//debugger
this.getSSQArea(node, resolve);
},
getSSQArea(node, resolve) {
const level = node.level;
let limboNode = {};
if(level === 0) {
//debugger
limboNode = {pid: 0}
}
if(level === 1) {
//debugger
limboNode = { pid: node.value };
}
if(level === 2) {
limboNode = { pid: node.value };
}
//this.loadingSSQ = true;
getAreaList(limboNode).then(res => {
let result = {};
if (level === 0) {
result = res.data
result.forEach(item => {
item.value = item.id;
item.label = item.name;
item.children=[];
item.leaf = 0; // 可以控制 是否有下级 值为true都不行，必须等于0
})
}
if (level === 1) {
result = res.data
result.forEach(item => {
item.value = item.id;
item.label = item.name
item.children=[];
//这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上
item.leaf = 0
})
}
if (level === 2) {
result = res.data
result.forEach(item => {
item.value = item.id;
item.label = item.name
item.leaf = 1;
})
}
resolve(result)
//this.loadingSSQ = false;
});
},
SSQGoodsChange(value) {
//this.SSQGoodsList = value;
},
// 确认 修改 商品分类
saveType() {
},
// 取消 修改 商品分类
cancelType() {
this.editGoodsTypeDialog = false;
},
// 上传 商品图片，限制 9 张
limitImg5() {
this.$message({ message: '最多上传5张图片', type: 'warning' })
},
// 上传 商品图片 之前
beforeUpGoodsImg (file) {
let isImgSize = (file.size / 1024 / 1024 ) > 2;
if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
this.$message({
message: '上传图片格式只支持 jpg / png 格式',
type: "warning"
});
return false;
}
if(isImgSize) {
this.$message({
message: '上传图片大小不能超过2MB',
type: "warning"
});
return false;
}
// 图片宽高尺寸限制 800*800
return new Promise(function(resolve, reject){
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function(){
// 图片是否是正方形 宽高比为 1
file.width = img.width;
file.height = img.height;
let valid = (img.width === 800) && (img.height === 800);
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(()=>{
return file;
}, ()=>{
this.$message({
message:'商品图片尺寸必须为800 * 800，请重新选择!',
type: 'warning'
});
return Promise.reject();
});
},
// 上传 商品图片
uploadGoodsImg(param) {
//console.log(327,param);
this.getBase64(param.file).then( res => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data":this.Base64img};
UploadImg(data).then( res=> {
let urlObj = {'url': ''};
if(res.data) {
urlObj.url = res.data.image_url;
this.goodsImgFileList.push(urlObj);
this.goodsImgFileList.forEach(item=> {
this.goodsInfoForm.imgs.push(item.url)
})
this.$message({type:'success',message:'图片上传成功'});
// 只清除一次，不浪费哦
if(this.goodsImgFileList.length === 1) {
this.$refs.goodsInfoForm.clearValidate('imgs');
}
}
});
});
},
// 商品信息 子组件 form表单校验, 在父组件中被调用
validateGoodsInfoForm () {
let flag = null
this.$refs['goodsInfoForm'].validate(valid => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
},
// 商品图片 预览
handlePictureCardPreview(file) {
this.goodsImgUrlDialog = file.url;
this.goodsImgVisible = true;
},
// 删除 商品图片
handleRemove(file) {
for (let i = 0; i < this.goodsImgFileList.length; i++) {
if (file.uid === this.goodsImgFileList[i].uid) {
this.goodsImgFileList.splice(i, 1)
this.goodsImgFileList.imgs.splice(i, 1);
}
}
if(this.goodsImgFileList.length === 0) {
this.$refs.goodsInfoForm.validateField('imgs')
}else {
this.$refs.goodsInfoForm.clearValidate('imgs');
}
},
// 维护品牌
toBrand() {
this.$router.push({path: '/system/shop/brand'});
},
// 通用 方法
// 图片转换为 base64
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
} // methods end
}
</script>
<style scoped>
ul {
padding: 0;
}
.goods-info {
padding: 15px 0px;
margin-top: 18px;
}
.type-text-span {
display: inline-block;
width: 420px;
/*margin: 0 20px 0;*/
}
.edit-type-span {
display: inline-block;
cursor: pointer;
margin: 0 20px;
}
/* 一般提示性文字 */
.tip-span {
color: #909399;
font-size: 12px;
}
/deep/.el-form-item {
margin-bottom: 20px;
}
</style>
src/views/system/goods/add/components/goodsparameter.vue 0 → 100644
浏览文件 @ 31d17156
<template>
<div class="goods-parameter">
<p class="tip-p">
<el-link class="edit-type-span el-icon-search" type="primary" :underline="false">查看各类价格说明</el-link>
<span class="tip-span">所有商品价格均为含税价，必须开具发票</span>
</p>
<div v-show="(!orgGoodsPam.pamTableList || orgGoodsPam.pamTableList.length === 0)">
<el-table
border
size="small"
:data="singleSpecTable"
style="width: 80%;margin-right:10%;"
>
<el-table-column align="center" prop="js_price" label="协议价">
<template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.js_price" placeholder="请输入协议价"></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="sl_price" label="结算价">
<template slot-scope="scope">
<!-- <el-input size="mini" style="width:90%" v-model="scope.row.sl_price" :disabled="true" placeholder="根据结算价自动计算"></el-input>-->
<span>{{ scope.row.sl_price = scope.row.js_price ? scope.row.js_price : '' }}</span>
</template>
</el-table-column>
<el-table-column align="center" prop="price" label="指导价">
<template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.price" placeholder="请输入指导价"></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="sc_price" label="市场价">
<template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.sc_price" placeholder="请输入市场价"></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="stock" label="库存量">
<template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.stock" placeholder="请输入库存量"></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="weight" label="重量">
<template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.weight" placeholder="请输入重量"></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="imgs9" label="图片">
<template slot-scope="scope">
<!-------------->
<el-upload
action="/"
class="uploadData50"
list-type="picture-card"
:limit="5"
:on-exceed="limit5"
:file-list="singleSpecImgList"
:http-request="(file)=> { return upLoadSingleSpecImg(file,scope.row) }"
:on-remove=" (file) => { return removeSingleSpeImg(file,scope.row)}"
></el-upload>
<!-------------->
</template>
</el-table-column>
</el-table>
</div>
<div v-show="orgGoodsPam.pamTableList.length > 0" v-for="(item,index) in orgGoodsPam.pamTableList" :key="index" class="single-spe-con">
<p style="margin: 10px 0;color: #333;font-size: 14px;font-weight: 400;">
<span v-show="orgGoodsPam.pamNameList.length === 1">
{{ orgGoodsPam.pamNameList[0].spec_name }} <span>：</span>{{ orgGoodsPam.pamDataList[index]}}
</span>
<span v-show="orgGoodsPam.pamNameList.length > 1">
<span v-for="(itemv,indexv) in orgGoodsPam.pamNameList" style="margin-right:20px;">
{{ orgGoodsPam.pamNameList[indexv].spec_name }} <span>：</span>{{ orgGoodsPam.pamDataList[index][indexv]}}
</span>
</span>
</p>
<el-table
border
size="small"
:data="item"
style="width: 80%"
>
<el-table-column align="center" prop="js_price" label="协议价">
<template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.js_price" placeholder="请输入协议价"></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="sl_price" label="结算价">
<template slot-scope="scope">
<!-- <el-input size="mini" style="width:90%" v-model="scope.row.hh2" :disabled="true" placeholder="根据结算价自动计算"></el-input>-->
<span>{{ scope.row.sl_price = scope.row.js_price ? scope.row.js_price : '' }}</span>
</template>
</el-table-column>
<el-table-column align="center" prop="price" label="指导价">
<template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.price" placeholder="请输入指导价"></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="sc_price" label="市场价">
<template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.sc_price" placeholder="请输入市场价"></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="stock" label="库存量">
<template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.stock" placeholder="请输入库存量"></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="weight" label="重量">
<template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.weight" placeholder="请输入重量"></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="thumb" label="图片">
<template slot-scope="scope">
<span
v-show="!scope.row.thumb"
class="span-img"
@click="upPreSpeImg(index,scope.row)"
></span>
<span v-show="scope.row.thumb" class="span-img-con">
<img
class="spec-img"
:src="scope.row.thumb"
alt=""
@click="changeSpeImg(index,scope.row)"
/>
<span class="span-img-del el-icon-delete del-span-block" @click="hxz"></span>
</span>
<input type="file" style="display: none;" :ref=" 'hxz' + index " accept="image/*" @change="changeIMG(index,scope.row)">
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import { UploadImg } from '@/api/module/goods';
export default {
name: 'goodsparameter',
props: {
parameterdata: {
type: Object,
required: true
}
},
data() {
return {
orgGoodsPam: {},
preTableTitle: [],
isHoverSpeImg: false,
// goodsPam:[
// {
// speNameList:[ '颜色','尺码' ],
// goodsParametersList: [],
// goodsPamPreTable: [{
// hh1: '',
// hh2: '',
// hh3: '',
// hh4: '',
// hh5: '',
// hh6: '',
// hh7: '',
// }],
// },
// ],
// goodsPamPreTable: [],
// goodsPamPreObj:
/** 无规格 数据 */
singleSpecTable: [
{
js_price: '', // 协议价
sl_price: '', // 结算价
price: '', // 指导价
sc_price: '', // 市场价
stock: '', // 库存
weight: '', // 重量 g
imgs9: [], // 图片
}
],
singleSpecImgList: [],
} // return end
},
watch:{
'parameterdata': function(val) {
//debugger
this.orgGoodsPam = val;
// this.orgGoodsPam
//console.log(175,this.orgGoodsPam);
},
},
created() {
//this.orgGoodsPam = this.parameterdata;
},
mounted() {
//console.log("9999",this.goodsPamPreList);
},
methods: {
// ------ 无规格，上传图片相关 ------
limit5() {
this.$message({type: 'warning',message: '只能上传5张图片'});
},
// 上传 无规格组合 的图片
upLoadSingleSpecImg(param) {
// this.loading = true;
//debugger
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img}
UploadImg(data).then(res => {
// this.loading = false;
if (res && res.code == 1) {
this.singleSpecImgList.push({ url: res.data.image_url });
this.singleSpecTable[0].imgs9 = [];
this.singleSpecImgList.forEach(item=> {
this.singleSpecTable[0].imgs9.push(item.url)
})
this.$message({ message:'上传成功',type:'success'});
}else {
this.singleSpecImgList = [];
this.$message({ message:'上传失败，请重新上传',type:'error'});
}
})
});
},
// 删除 无规格组合 的图片
removeSingleSpeImg(file) {
if(file.status === "success") {
for(let i = 0; i < this.singleSpecImgList.length; i++) {
if(file.uid === this.singleSpecImgList[i].uid) {
this.singleSpecImgList.splice(i,1);
this.singleSpecTable[0].imgs9.splice(i,1);
}
}
this.$message({ type: 'success', message: '删除成功!' });
}
},
/** 规格组合 上传图片 */
// 上传图片
upPreSpeImg(index, row) {
let domRef = "hxz" + index;
//console.log(domRef,this.$refs[domRef][0]);
this.$refs[domRef][0].value = '';
this.$refs[domRef][0].click();
},
// 更换 某一个规格的图片
changeSpeImg(index, row) {
this.upPreSpeImg(index,row);
},
// 真正的上传图片方法，原生input
changeIMG(index, row) {
let curRow = row;
let inputDom = "hxz" + index;
let file = this.$refs[inputDom][0].files[0];
if( file.size > 1024 * 1024 * 3 ) {
this.$message({ type: 'error',message: '规格图片不能大于 3 M'});
return;
}
this.getBase64(file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img}
UploadImg(data).then(res => {
// this.loading = false;
if (res && res.code == 1) {
curRow.thumb = res.data.image_url;
// this.singleSpecImgList.push({'url': res.data.image_url})
this.$message({ message:'上传成功',type:'success'});
}else {
this.$message({ message:'上传失败，请重新上传',type:'error'});
}
})
});
//console.log(3333,file);
},
hxz() {
},
speImgHover(index,row) {
this.isHoverSpeImg = true;
},
speImgLeave(index, row) {
this.isHoverSpeImg = false;
},
// -- 通用 方法 --
// 图片转换为 base64
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
} // methods end
}
</script>
<style lang="scss" type="text/stylus" scoped>
.span-img {
margin: 0;
padding: 0;
display : inline-block;
width:50px;
height:50px;
position: relative;
top:4px;
cursor: pointer;
border-radius: 6px;
border: 1px dashed #c0ccda;
background-color : #fbfdff;
}
.span-img:hover {
border: 1px dashed #1890ff;
}
.spec-img {
width: 100%;
height: 100%;
border-radius: 6px;
cursor: pointer;
position: relative;
border: none;
}
.span-img-con {
margin: 0;
padding: 0;
display : inline-block;
width:50px;
height:50px;
position: relative;
top:4px;
cursor: pointer;
border-radius: 6px;
border: 1px solid #c0ccda;
}
.span-img-del {
position: absolute;
display : inline-block;
width: 18px;
height: 18px;
font-size: 18px;
color: #333;
line-height : 18px;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -9px;
}
.del-span-block {
display : none;
}
.span-img-del:hover {
color: #F56C6C;
}
.span-img-con:hover > .del-span-block {
display : block;
}
p {
margin: 0;
padding: 0;
}
.tip-p {
margin: 0 0 20px 0;
}
.goods-parameter {
padding: 15px 0;
margin-top: 18px;
}
.edit-type-span {
display: inline-block;
cursor: pointer;
margin: 0 20px;
}
.single-spe-con {
margin: 25px 0;
}
/* 一般提示性文字 */
.tip-span {
color: #909399;
font-size: 12px;
}
// 上传图片样式
.uploadData50 {
display: inline-block;
/deep/ .el-upload--picture-card {
width: 50px;
height: 50px;
}
/deep/ .el-upload {
width: 50px;
height: 50px;
line-height: 50px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
width: 50px;
height: 50px;
line-height: 50px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
width: 50px;
height: 50px;
line-height: 50px;
}
/deep/ .avatar {
width: 50px;
height: 50px;
}
}
</style>
src/views/system/goods/add/components/goodsspecifications.vue 0 → 100644
浏览文件 @ 31d17156
<template>
<div class="goods-specifications">
<div class="spe-con" v-for="(speItem,index) in speData" :key="index">
<div class="el-form-item-h" >
<label class="el-form-item-h__label">规格名称：</label>
<div class="el-form-item-h__content">
<div>
<el-select
:ref="'speNameDom' + index "
v-model="speItem.spec_name"
size="small"
style="width: 300px"
filterable
default-first-option
:clearable="true"
@change="speNameChange(speItem.spec_name,index)"
@visible-change='bv=> visibleChange(bv,"speNameDom",index)'
>
<el-option
v-for="(itemSN,indexSN) in speOptions"
:key="itemSN.id"
:label="itemSN.name"
:value="itemSN.name"
>
<span style="float: left" class="span-style">{{ itemSN.name }}</span>
<div class="flag">
<svg-icon icon="edit" iconClass="template_edit_style" @click="addSpeName(index)"/>
</div>
</el-option>
</el-select>
<!--<span>数据填写不完整</span>-->
</div>
<div class="spe-params-con">
<div style="display: inline-block" v-for="(itemSV,indexSV) in speItem.spec_value" :key="indexSV">
<el-input v-model="itemSV.value" size="small" placeholder="请输入规格参数" class="spe-params-input-item" @blur="paramNameInputBlur(index,indexSV)">
<i v-if="indexSV !== 0" slot="suffix" class="el-input__icon el-icon-delete el-icon-delete-h" @click="deleteSpeParam(index,indexSV)"></i>
</el-input>
</div>
<el-button type="primary" plain class="el-icon-plus" size="mini" @click="addSpeParam(index)">添加规格参数</el-button>
</div>
</div>
</div>
<div style="margin-right:auto;" v-if="(speData.length > 1) && speData.length !== 1">
<el-button type="danger" plain icon="el-icon-delete" size="mini" @click="deleteSpe(index)">删除该规格</el-button>
</div>
</div>
<el-button @click="addSpe" class="el-icon-plus" size="mini">添加规格</el-button>
<!-- 添加 规格名称 -->
<el-dialog
title="添加规格名称"
:visible.sync="addSpecNameDialog"
:destroy-on-close="true"
:before-close="cancelSpec"
width="500px"
center
>
<div>
<p class="add-spec-dialog-con">
<span style="margin-right:30px;">输入规格名称：</span>
<span>
<el-input v-model="specName_sm" placeholder="请输入规格名称" size="small" style="width: 280px;"></el-input>
</span>
</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelSpec" size="mini">取 消</el-button>
<el-button type="primary" @click="saveSpecName" size="mini">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import descartes from "@/utils/dikaerjs.js";
import { UploadImg } from '@/api/module/goods'
export default {
name: "GoodsSpecifications",
props: {
specificationsdata: {
type: Array,
required: true
}
},
data() {
return {
speData: [], // 商品规格总数据
specsGroup: {
spec_name: '', // 规格名称
spec_value: []
},
speParamName:{
value: ''
},
speOptions: [{
id: '1',
name: '颜色'
}, {
id: '2',
name: '尺码'
}],
localSpeOptions: [],
// 规格名称，value组成的数组
speNameList: [],
addSpecNameDialog: false,
specName_sm: '',
};
},
created() {
this.$set(this.specsGroup.spec_value,this.specsGroup.spec_value.length,this.speParamName);
this.speData = [];
this.$set(this.speData,this.speData.length,this.specsGroup);
//console.log(71,this.specsGroup.spec_value);
},
mounted() {
/** 先获取 本地存储的localStorage **/
this.getLocalSpecNameOption();
},
watch:{
// "speData.specsGroup": {
// handle: function(val) {
// console.log(22222,val);
// }
// }
},
methods: {
/** 添加规格*/
addSpe() {
let specsGroup = {
spec_name: '', // 规格名称
spec_value: [{value: ''}]
};
this.$set(this.speData,this.speData.length,specsGroup);
},
/** 删除 规格数据 */
deleteSpe(index) {
this.$confirm('是否删除当前规格的所有数据？', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
this.speData.splice(index,1);
this.specCalcResult();
}).catch(() => {})
},
//
/** 规格名称，值改变时, 此组件 lable 和 value 绑定同一个值 */
speNameChange(val,index) {
if( val ) {
// 当有多个值的时候，才校验，规格名称是否重复
if( this.speData.length > 1 ) {
let coypSpeData = [];
coypSpeData = this.speData.concat();
coypSpeData.splice(index,1);
for(let i = 0; i < coypSpeData.length; i++) {
if( val === coypSpeData[i].spec_name ) {
this.speData[index].spec_name = '';
this.$message({type: 'error',message: '此规格名称已经使用，请重新选取或新增其他规格名称'});
break;
}
}
}
}
// 重新 计算 规格组合数据
this.specCalcResult();
},
// 添加规格参数
addSpeParam(index) {
let valueObj = { value: ''}
this.$set(this.speData[index].spec_value,this.speData[index].spec_value.length,valueObj);
},
/** 删除 规格参数 */
deleteSpeParam(index,indexSV) {
// 先判断，删除前是否有值，如果是空，则没有必要再次计算
if( this.speData[index].spec_value[indexSV].value ) {
this.speData[index].spec_value.splice(indexSV,1);
this.specCalcResult();
}else {
this.speData[index].spec_value.splice(indexSV,1);
}
},
/**
* 规格名称 下拉框 出现/隐藏 触发
* 为element-ui的Select和Cascader添加弹层底部操作按钮
* @param visible
* @param refName 设定的ref名称
* @param index 保证操作是当前的下拉框
* @param addname 底部按钮名称, 可不用
*/
visibleChange(visible, refName, index) {
let _this = this;
let realRefName = refName + index;
//console.log(realRefName);
if(visible) {
// 动态绑定 ref的值的时候，下面的dom需要 加一个 [0],非常重要
const speNameDom = _this.$refs[realRefName][0];
let popper = speNameDom.$refs.popper;
if( popper.$el ) {
popper = popper.$el;
}
if(!Array.from(popper.children).some(v => v.className === 'el-template-menu__list')) {
const el = document.createElement('ul');
el.className = 'el-template-menu__list';
el.style = 'border-top\:1px solid rgb(219 225 241)\; padding\:0\;margin\:0\; color\:rgb(64 158 255)\;font-size\: 14px';
el.innerHTML = '<li class="el-cascader-node text-center" style="height:40px;line-height: 40px">'
+ '<span class="el-cascader-node__label"><i class="el-icon-plus"></i>添加规格名称</span>'
+ '</li>';
popper.appendChild(el)
el.onclick = () => {
// 底部按钮的点击事件
_this.addSpeName(index);
// localSttorage 存储 下拉数据
if(speNameDom.toggleDropDownVisible) {
speNameDom.toggleDropDownVisible(false);
} else {
speNameDom.visible = false;
}
}
}
}
},
getLocalSpecNameOption() {
//console.log("先获取：",window.localStorage.getItem('localSpeOptions'));
if(!window.localStorage.getItem('localSpeOptions')) {
this.speOptions = [];
}else {
let options = JSON.parse(window.localStorage.getItem('localSpeOptions'));
this.speOptions = options;
}
},
/* 增加 规格名称 */
addSpeName(index) {
this.addSpecNameDialog = true;
},
// 添加规格名称，对话框的退出
cancelSpec() {
this.specName_sm = '';
this.addSpecNameDialog = false;
},
// 规格名称，保存
saveSpecName() {
let localObj = {
id: 0,
name: ''
};
let localArr = [];
let localJSON = '';
if(this.speOptions.length === 0) {
let localObj = {
id: 0,
name: this.specName_sm
};
localArr.push(localObj);
localJSON = JSON.stringify(localArr);
}else {
let localObj = {
id: this.speOptions.length,
name: this.specName_sm
};
this.speOptions.push(localObj);
localJSON = JSON.stringify(this.speOptions)
}
window.localStorage.setItem('localSpeOptions',localJSON)
this.addSpecNameDialog = false;
this.$message({type:'success',message:'新增成功'});
this.getLocalSpecNameOption();
},
/** 规格参数 失焦时，进行笛卡尔积算法，并渲染 商品售价 */
paramNameInputBlur(index,indexSV) {
// // 如果失焦的input中有值，才再次计算
// if( this.speData[index].spec_value[indexSV].value ) {
this.specCalcResult();
// }
},
/** 规格参数 变化时，对数据进行处理后，再进行笛卡尔积算法，最终计算出商品售价的数据 */
specCalcResult() {
// 商品规格原始数据
let orgSpeData = this.deepClone(this.speData);
// 进行数据处理后的数据,
let proSpeData = this.processData(orgSpeData);
// 需要将 所有规格名称，提出一个数组集合,
this.speNameList = [];
orgSpeData.forEach((item,index)=> {
if( item.spec_name ) {
let obj = { spec_name: '' };
// 注意, item.spec_value是否一定为一个长度大于 1 的数组
if( item.spec_value.length > 0) {
for(let i = 0; i < item.spec_value.length; i++) {
if( item.spec_value[i].value ) {
obj.spec_name = item.spec_name;
this.speNameList.push(obj);
break;
}
}
}
}
})
// console.log("处理后的数据",proSpeData);
// console.log("处理后的nameList",this.speNameList);
// 当处理后的数据，是一个空数组，则不需要再进行 笛卡尔积 计算，可以直接给出计算结果
if (proSpeData.length === 0) {
let goodsPam = {
pamNameList: [],
pamDataList: [],
pamTableList: [],
};
this.$emit('calcSpeTable', goodsPam);
} else {
let goodsParametersList = this.cartesian(proSpeData);
let goodsPam = {
pamNameList: [],
pamDataList: [],
pamTableList: [],
};
goodsPam.pamNameList = this.speNameList;
goodsPam.pamDataList = goodsParametersList;
goodsParametersList.forEach((item)=> {
let prePamTable = [
{ js_price:'', sl_price:'', price:'', sc_price:'', stock:'', weight:'', thumb:'',spec_values: [] }
];
goodsPam.pamTableList.push(prePamTable)
});
this.$emit('calcSpeTable',goodsPam);
}
},
/** 数据处理为,二维数组，供笛卡尔积算法方法使用,对空数据进行过滤 */
processData(list) {
let result = [];
if (list && list.length > 0) {
for (let i = 0; i < list.length; i++) {
let childList = [];
if(list[i].spec_name) {
for(let j = 0; j < list[i].spec_value.length; j++) {
if(list[i].spec_value[j].value) {
childList.push(list[i].spec_value[j].value);
}
}
}
if(childList.length > 0) {
result.push(childList);
}
}
}
return result;
},
/** 笛卡尔积算法 */
cartesian(arr) {
if(arr.length < 2) {
return arr[0] || [];
}else {
return [].reduce.call(arr, function(col, set) {
let res = [];
col.forEach( c => {
set.forEach(s => {
let t = [].concat(Array.isArray(c) ? c : [c]);
t.push(s);
res.push(t);
});
});
return res
});
}
}
}, // methods end
};
</script>
<style scoped>
.goods-specifications {
padding: 15px 0;
margin-top: 18px;
}
.spe-con {
display: flex;
justify-content: flex-start;
}
/* 仿 element 的from-item 样式，注意，size为 samll */
.el-form-item-h {
width:80%;
margin: 0 20px 20px 0;
padding: 20px 0 0;
background: #F7F8FA;
border: 1px solid #E5E5E5;
border-radius: 2px;
}
.el-form-item-h__label {
width: 150px;
text-align: right;
vertical-align: middle;
float: left;
font-size:14px;
color: #606266;
line-height: 32px;
padding: 0 12px 0 0;
box-sizing: border-box;
}
/*.el-form-item-h__label:before {*/
/* content: '';*/
/* color: #ff4949;*/
/* margin-right: 4px;*/
/*}*/
.el-form-item-h__content {
margin-left: 150px;
position: relative;
font-size: 14px;
}
.spe-params-con {
margin: 20px 0;
}
/* 商品规格 - 规格名称 - 参数input */
.spe-params-input-item {
width: 150px;
margin: 0 10px 20px 0;
}
.el-icon-delete-h:hover {
font-size: 14px;
color: #ff4949;
cursor: pointer;
}
.add-spec-dialog-con {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
src/views/system/goods/add/index.vue 0 → 100644
浏览文件 @ 31d17156
<template>
<div class="app-container">
<!-- 选择商品类目 start -->
<el-card class="box-card" v-if="!isShowGoodsDetails">
<div slot="header" class="clearfix">
<p class="card-header-title"><span class="blue-block-goods"></span>确认商品所在目录</p>
</div>
<div>
<div>
<p class="goods-type-tip">为商品设置正确的类目，能让商品快速的被搜索到</p>
</div>
<div class="goods-type-options" v-loading="loading">
<el-cascader-panel v-model="SSQList" :props='props' @change="SSQChange" ref="ssqCascader"></el-cascader-panel>
</div>
<el-button type="primary" class="next-step" :disabled="isNextStep" @click="nextStep">下一步</el-button>
</div>
</el-card>
<!-- 选择商品类目 end -->
<!-- 添加商品 start -->
<el-card class="box-card good-details-body" v-if="isShowGoodsDetails">
<div class="floor-nav" id="floorNavList">
<ul class="nav-list">
<li class="nav-list-item" :class="{'floor-item-active': isFIActive === index}" v-for="(item, index) in floorNav" :key="item.id" @click="setFloorNavMountClick(index)">{{ item.name }}</li>
</ul>
</div>
<div class="floor-cont" ref="scrollview">
<!-- 商品信息 -->
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品信息</p>
<Goodsinfomation ref="goodsInfo" :goodsinfodata='goodsinfodata'/>
</div>
</div>
<!-- 商品规格 -->
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品规格</p>
<GoodsSpecifications ref="goodsspecifications" :specificationsdata="specificationsdata" @calcSpeTable="calcSpeTable"/>
</div>
</div>
<!-- 商品售价 -->
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品售价</p>
<GoodsParameter ref="goodsparameter" :parameterdata="parameterdata" />
</div>
</div>
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品详情</p>
<Goodsimg ref="goodsdetailsimg" :imgdata="imgdata"/>
</div>
</div>
<!-- 售后及服务 -->
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>售后及服务</p>
<Goodsaftersale ref="goodsaftersale" :goodsaftersale="goodsaftersale" />
<div class="submit-type-con">
<el-radio-group v-model="goodsAllData.submit" size="small">
<el-radio :label="0" border>放入仓库</el-radio>
<el-radio :label="1" border>立即上架</el-radio>
</el-radio-group>
</div>
</div>
</div>
</div>
<div class="submit-cont">
<el-button type="primary" style="padding: 10px 30px;" @click="save">提 交</el-button>
</div>
</el-card>
<!-- 添加商品 end -->
</div>
</template>
<script>
import { getAreaList } from '@/api/module/retreat/address';
import { NewGetCategory,addGoods } from '@/api/module/goods';
import Goodsinfomation from './components/goodsinfomation';
import GoodsSpecifications from './components/goodsspecifications';
import GoodsParameter from './components/goodsparameter';
import Goodsimg from './components/goodsimg';
import Goodsaftersale from './components/goodsaftersale';
export default {
name: 'Index',
components: {
Goodsinfomation,
GoodsSpecifications,
GoodsParameter,
Goodsimg,
Goodsaftersale,
},
data() {
return {
loading: false,
SSQList: [], // 省市区
SSQStr: '', // 省市区 拼接
props: {
expandTrigger: 'click',
lazy: true,
lazyLoad: this.lazyLoad,
value: "id",
label: 'label',
leaf: 'leaf'
},
isNextStep: true,
isShowGoodsDetails: false,
isFIActive: 0,
/**/
floorNav: [
{ id: 1, name: '商品信息' },
{ id: 2, name: '商品规格' },
{ id: 3, name: '商品售价' },
{ id: 4, name: '商品详情' },
{ id: 5, name: '售后及服务' }
],
/* 商品信息 */
goodsinfodata: {
orgGoodsInfoForm: {},
categoryList: [],
categoryStr: ''
},
/* 商品规格 */
specificationsdata: [],
/* 商品售价 */
parameterdata: {},
/* 商品详情 */
imgdata: {},
/* 售后及服务 */
goodsaftersale: {
},
goodsAllData: {
submit: 0,
}, // 商品所有数据
TIMER: null,
} // return end
},
created() {
},
mounted() {
},
methods: {
// 规格子组件，传给父组件的数据
calcSpeTable(data) {
if(data.pamTableList.length > 0) {
// debugger
data.pamTableList.forEach((item, index) => {
if( Array.isArray(data.pamDataList[index]) ) {
item[0].spec_values = data.pamDataList[index];
}else {
item[0].spec_values.push(data.pamDataList[index]);
}
})
}
this.parameterdata = data;
//console.log(153,this.parameterdata);
},
// 只有点击完最后一级，才会有值
SSQChange() {
if(this.SSQList && this.SSQList.length > 0) {
this.isNextStep = false
}else {
this.SSQList = []
this.isNextStep = true
}
},
lazyLoad(node, resolve) {
this.SSQList = [];
this.SSQStr = '';
//debugger
this.getArea(node, resolve);
if(this.SSQList && this.SSQList.length > 0) {
this.isNextStep = false
}else {
this.isNextStep = true
}
},
getArea(node, resolve) {
const level = node.level;
let limboNode = {};
if(level === 0) {
limboNode = {id: 0}
}
if(level === 1) {
limboNode = { id: node.value };
}
if(level === 2) {
limboNode = { id: node.value };
}
this.loading = true;
NewGetCategory(limboNode).then(res => {
let result = {};
//debugger
if (level === 0) {
result = res.data
result.forEach(item => {
item.value = item.id;
item.label = item.label;
item.children = [];
item.leaf = 0; // 可以控制 是否有下级 值为true都不行，必须等于0
})
}
if (level === 1) {
//result = res.data
// res.data.forEach((item,index)=> {
// result = (item.id === limboNode.id) ? item.children : [];
// });
for(let i = 0; i < res.data.length; i++) {
if( limboNode.id === res.data[i].id ) {
result = res.data[i].children;
break;
}
}
result.forEach(item => {
item.value = item.id;
item.label = item.label
item.children=[];
//这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上
item.leaf = 0
})
}
if (level === 2) {
for(let i = 0; i < res.data.length; i++) {
if( res.data[i].children.length > 0) {
for(let j = 0; j < res.data[i].children.length; j++) {
if( limboNode.id === res.data[i].children[j].id ) {
result = res.data[i].children[j].children;
break;
}
}
}
}
result.forEach(item => {
item.value = item.id;
item.label = item.label
item.leaf = 1;
})
}
// result = []
resolve(result)
this.loading = false;
});
},
// 添加商品后，下一步 操作
nextStep() {
// debugger
// 注意数据格式 [1,2,3] 数组，且里面是数字类型
let ssqLabelList = this.$refs['ssqCascader'].getCheckedNodes()[0].pathLabels;
this.goodsinfodata.categoryList = this.SSQList;
this.goodsinfodata.categoryStr = ssqLabelList[0] + '/' + ssqLabelList[1] + '/' + ssqLabelList[2];
this.isShowGoodsDetails = true;
// console.log(232,this.goodsinfodata.categoryStr,this.goodsinfodata.categoryList);
},
//
// getGoodsAfterSaleData(data) {
// console.log("售后子组件给的：",data);
// },
//
save() {
// 此处变量 有顺序 校验时，电梯至某处
// 商品信息 是否填写完整
let isGoodsInfoMsg = this.$refs['goodsInfo'].validateGoodsInfoForm();
// 商品规格 无需校验
// 商品售价，通过获取的数据，分别进行判断
let isGoodsPrice = true;
let spsjData1 = this.$refs.goodsparameter.singleSpecTable;
let spsjData2 = this.$refs.goodsparameter.orgGoodsPam;
//debugger
// 如果有，则说明有规格组合数据
if ( spsjData2.pamTableList && spsjData2.pamTableList.length > 0 ) {
//console.log(25522,spsjData2);
for(let i = 0; i < spsjData2.pamTableList.length; i++) {
//console.log("外",spsjData2.pamTableList[i]);
let itemObj = spsjData2.pamTableList[i][0];
for (let itemKey in itemObj) {
// 长度判断，可以校验规格是否上传了图片
// if ( !itemObj[itemKey] || itemObj[itemKey].length === 0) {
if ( !itemObj[itemKey] && itemKey !== 'thumb') {
isGoodsPrice = false;
break
} else {
isGoodsPrice = true;
}
}
if (!isGoodsPrice) {
break
}
}
}else {
// 无规格组合数据
let slingleSpeObj = spsjData1[0];
for (let key in slingleSpeObj) {
// 长度判断，可以校验规格是否上传了图片
// if ( !slingleSpeObj[key] || (slingleSpeObj[key].length === 0) ) {
if ( !slingleSpeObj[key] && ( key !== 'imgs') ) {
isGoodsPrice = false;
break
} else {
isGoodsPrice = true;
}
}
}
// 商品详情 是否填写完整
let isGoodsDetailsImgMsg = this.$refs.goodsdetailsimg.goodsDeForm.description ? true : false;
// 售后服务 是否填写完整
let isGoodsAfterSaleMsg = this.$refs['goodsaftersale'].validateGoodsAfterSaleForm();
// 商品售价，由商品规格决定，
// 如果 没有填写商品规格，那么商品售价应该获取
if(!isGoodsInfoMsg) {
this.$message({type:'error',message:'商品信息未填写完整'});
this.setFloorNavMountClick(0);
return
}
if(!isGoodsPrice) {
this.$message({type:'error',message:'商品售价未填写完整'});
this.setFloorNavMountClick(2);
return
}
if(!isGoodsDetailsImgMsg) {
this.$message({type:'error',message:'请先上传描述商品详情的图片'});
this.setFloorNavMountClick(3);
return
}
if(!isGoodsAfterSaleMsg) {
this.$message({type:'error',message:'售后及服务未填写完整'});
this.setFloorNavMountClick(4);
return
}
// 所有校验通过，整理数据
// 获取 商品信息数据
let spxxData = this.$refs.goodsInfo.goodsInfoForm;
// 商品规格
let spggData = this.$refs.goodsspecifications.speData;
// this.goodsAllData.specs = spggData;
// 商品售价，上面已经获取，
let spsjData = {}; // specs_group
if( spsjData2.pamTableList && spsjData2.pamTableList.length > 0 ) {
this.goodsAllData['specs_group'] = [];
this.goodsAllData['specs'] = spggData;
spsjData2.pamTableList.forEach((item,index)=> {
this.goodsAllData['specs_group'].push(item[0]);
});
}else {
spsjData = spsjData1[0];
}
// 商品详情 数据
let spxqData = this.$refs.goodsdetailsimg.goodsDeForm;
// 售后服务 数据
let ssffData = this.$refs.goodsaftersale.goodsAfterSaleForm;
console.log("商品信息：",spxxData);
console.log("商品规格：",spggData);
console.log("商品售价：",spsjData);
console.log("商品详情：",spxqData);
console.log("商品售后：",ssffData);
Object.assign( this.goodsAllData, spxxData, spsjData, spxqData, ssffData);
// spxxData.categoryList = []
// 经营类目，服务标签，需要单独处理数据格式
this.goodsAllData.category_id = spxxData.categoryList.slice(-1)[0] ? spxxData.categoryList.slice(-1)[0] : '';
if(this.goodsAllData.stags) {
this.goodsAllData.stags = this.goodsAllData.stags.toString();
}
console.log('最终数据：',this.goodsAllData);
addGoods( this.goodsAllData ).then( res=> {
console.log("返回结果",res);
});
},
/*-----------------------*/
/* 添加商品详细 */
/* 设置楼层导航事件驱动方法* @params Number index 楼层下标 */
setFloorNavMountClick(index) {
let _this = this
_this.isFIActive = index;
clearInterval(_this.TIMER);
// 可以通过 floor-cont的父元素，高度减去上下两个div的高度，来准确计算出来了，需要wtach监听,暂时用初步高来计算，一般问题不大
let floor_cont = document.getElementsByClassName('floor-cont')[0];
let floor_item = document.getElementsByClassName('floor-item'),
// 每次点击，对应dom需要滚动的高度
floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop,
window_scrollTop = _this.$refs.scrollview.scrollTop,
// 基本滚动动画配置
timer = { step: 45, times: 20, FLOOR_OFFSETTOP: 0 };
// floor_cont 可是窗口的 高
let hxz = 0;
let resList = [];
let list = [];
for(let i = 0; i < floor_item.length; i++) {
list.push(Number(floor_item[i].offsetHeight));
}
resList = list.slice(index)
for(let j = 0; j < resList.length; j++) {
hxz += resList[j]
}
if( hxz > floor_cont.offsetHeight) {
timer.FLOOR_OFFSETTOP = floor_offsetTop;
}else {
timer.FLOOR_OFFSETTOP = floor_cont.scrollHeight - floor_cont.offsetHeight
}
if (window_scrollTop > floor_offsetTop) {
_this.setFloorScrollArrowUp(timer)
} else if (window_scrollTop === floor_offsetTop) {
return false
} else {
_this.setFloorScrollArrowDown(timer)
}
},
/* 设置楼层向上滚动* @params Object timer 定时器配置 */
setFloorScrollArrowUp(timer) {
let _this = this
clearInterval(_this.TIMER)
_this.TIMER = setInterval(() => {
const window_scrollTop = _this.$refs.scrollview.scrollTop
if (window_scrollTop <= timer.FLOOR_OFFSETTOP) {
_this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP
clearInterval(_this.TIMER)
} else {
_this.$refs.scrollview.scrollTop = window_scrollTop - timer.step
}
}, timer.times)
},
/* 设置楼层向下滚动@params Object timer 定时器配置 */
setFloorScrollArrowDown(timer) {
let _this = this
clearInterval(_this.TIMER)
_this.TIMER = setInterval(() => {
const window_scrollTop = _this.$refs.scrollview.scrollTop
if (window_scrollTop >= timer.FLOOR_OFFSETTOP) {
_this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP
clearInterval(_this.TIMER)
} else {
_this.$refs.scrollview.scrollTop = window_scrollTop + timer.step
}
}, timer.times)
},
} // methods end
}
</script>
<style scoped lang="scss" type="text/css">
p {
margin: 0;
padding: 0;
}
/* el-card title hxz 样式统一 */
.card-header-title {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
font-size: 16px;
color: #333;
font-weight: 400;
height: 24px;
}
.blue-block-goods {
width: 5px;
height: 24px;
background: #3A84FF;
margin: 0 7px 0 0;
border-radius: 2px;
}
/* el-card title hxz 样式统一 end */
.goods-type-tip {
width: 100%;
background: #F1F7FD;
border: 1px solid #3A84FF;
font-size: 14px;
font-weight: 400;
color: #3A84FF;
line-height: 1em;
padding: 14px 15px;
}
.goods-type-options {
margin: 25px 0;
}
/*------------ 联级面板样式重置 start ------------*/
/deep/.el-cascader-panel.is-bordered {
border: none;
}
/deep/.el-cascader-menu {
min-width: 280px;
border: none;
box-shadow: 0px 4px 9px 1px rgba(51, 51, 51, 0.09);
border-radius: 2px;
overflow: hidden;
}
/deep/.el-cascader-menu__wrap {
width: 280px;
height: 500px;
overflow: auto;
margin: 5px 0!important;
}
/* 很重要,不要问我为什么 */
/deep/.el-scrollbar:hover>.el-scrollbar__bar, /deep/.el-scrollbar:active>.el-scrollbar__bar, /deep/.el-scrollbar:focus>.el-scrollbar__bar {
opacity: 0;
}
/*------------ 联级面板样式重置 end ---------------*/
.next-step {
padding: 10px 25px;
margin: 0 auto;
display: block;
}
/* 电梯效果 样式 */
.floor-nav {
width: 100%;
}
.floor-nav .nav-list {
padding: 0;
margin:0;
display: flex;
justify-content: start;
flex-direction: row;
border-bottom:1px solid #eee;
}
.floor-nav .nav-list .nav-list-item {
font-size: 16px;
font-weight: 400;
color: #333333;
padding: 0 25px 15px;
list-style: none;
vertical-align: middle;
align-self: center;
border-bottom: 2px solid #fff;
cursor: pointer;
}
.floor-nav .nav-list .floor-item-active,
.floor-nav .nav-list .nav-list-item:hover {
color: #3A84FF;
font-weight: bold;
border-bottom: 2px solid #3A84FF;
}
.floor-item-box-title {
background: #F1F1F6;
height: 45px;
}
.blue-block-goods-title {
margin: 0 20px 0 0;
}
/deep/.good-details-body .el-card__body {
height: 100%;
padding: 15px 20px 0px 20px;
overflow: hidden;
}
.floor-cont{
height: calc(100% - 98px);
overflow: auto;
}
.floor-item {
padding: 0 20px 0 0;
margin: 15px auto;
color: #333;
}
.submit-type-con {
width: 236px;
margin: 0 auto 20px;
}
.submit-cont {
width: calc(100% + 40px);
padding: 12px 0 8px;
margin-left: -20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/*align-content: center;*/
box-shadow: 0px -8px 9px 1px rgba(51, 51, 51, 0.06);
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论