You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
340 lines
8.6 KiB
340 lines
8.6 KiB
<template> |
|
<view class="page"> |
|
<view class="block"> |
|
<view class="form-list edit-form"> |
|
<view class="line"> |
|
<view class="name">商品名称</view> |
|
<input type="text" placeholder="请输入商品名称" v-model="form.prodName" /> |
|
</view> |
|
<view class="line"> |
|
<view class="name">产品分类</view> |
|
<view class="inline"> |
|
<uni-data-picker class="picker-input" :clear-icon="false" placeholder="请选择产品分类" popup-title="请选择产品分类" preload :localdata="classifications" :map="{text: 'categoryName', value: 'categoryId'}" v-model="form.categoryId"></uni-data-picker> |
|
</view> |
|
</view> |
|
<view class="py"> |
|
<uni-file-picker v-model="pic" limit="5" title="请上传封面图片,至少一张" :auto-upload="false" @delete="delPic" @select="uploadPic"></uni-file-picker> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
|
|
<view class="block"> |
|
<view class="form-list edit-form"> |
|
<view class="line textarea-line no-bd"> |
|
<textarea placeholder="描述一下宝贝的品牌型号、货品来源..." v-model="form.brief"></textarea> |
|
</view> |
|
<view class="py"> |
|
<uni-file-picker v-model="imgs" limit="10" title="添加优质图片" :auto-upload="false" @delete="delImgs" @select="uploadImgs"></uni-file-picker> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="title">产品规格</view> |
|
<view v-for="(item, i) in form.skuList" :key="i" class="block sku-item"> |
|
<view class="form-list edit-form"> |
|
<view class="line"> |
|
<view class="name">规格名称</view> |
|
<input type="text" placeholder="请输入规格名称" v-model="item.skuName" /> |
|
</view> |
|
<view class="line"> |
|
<view class="name">价格</view> |
|
<view class="prices" @click="showPrice(item)"> |
|
<view v-if="item.price">售价：{{ item.price }}元</view> |
|
<view v-if="item.oriPrice" class="oriPrice">市场价：{{ item.oriPrice }}元</view> |
|
<template v-if="!item.price && !item.oriPrice">面议</template> |
|
</view> |
|
</view> |
|
<view class="line"> |
|
<view class="name">库存</view> |
|
<uni-number-box v-model.number="item.stocks" :max="100" :min="1"></uni-number-box> |
|
</view> |
|
</view> |
|
<uni-icons class="del" type="closeempty" size="18" color="#b3b3b3" @click="delSku(i)"></uni-icons> |
|
</view> |
|
<view class="plus-sku"> |
|
<uni-icons class="icon" type="plus" size="30" color="#007eff" @click="addSku"></uni-icons> |
|
</view> |
|
|
|
<view class="btns"> |
|
<view class="btn" @click="submit(3)">存草稿</view> |
|
<view class="btn publish" @click="submit(1)">发布</view> |
|
</view> |
|
|
|
<uni-popup ref="popup" background-color="#fff" type="bottom" @change="popupChange"> |
|
<view class="block"> |
|
<view class="form-list edit-form"> |
|
<view class="line"> |
|
<view class="name">售价：</view> |
|
<input ref="price" :focus="showPopup" type="text" placeholder="请输入售价" v-model="curSku.price" /> |
|
</view> |
|
<view class="line"> |
|
<view class="name">市场价：</view> |
|
<input type="text" placeholder="请输入市场价" v-model="curSku.oriPrice" /> |
|
</view> |
|
</view> |
|
</view> |
|
</uni-popup> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { queryProvince, queryCity, queryTeamInfo, updateTeamInfo, enterpriseCertificationStatus } from '@/apis/modules/user.js' |
|
import { save, update, info, categoryInfo } from '@/apis/modules/goods.js' |
|
import OSS from '@/libs/Oss/upload' |
|
export default { |
|
data() { |
|
return { |
|
openId: uni.getStorageSync('openId'), |
|
prodId: '', |
|
form: { |
|
brief: '', |
|
categoryId: '', |
|
content: '', |
|
pic: '', |
|
imgs: '', |
|
price: '', |
|
prodName: '', |
|
skuList: [ |
|
{ |
|
prodName: '', |
|
status: 1, |
|
oriPrice: '', |
|
price: '', |
|
skuName: '默认', |
|
stocks: 9999, |
|
} |
|
], |
|
}, |
|
originSku: {}, |
|
curSku: {}, |
|
pic: [], |
|
imgs: [], |
|
submiting: false, |
|
uploading: false, |
|
classifications: [], |
|
showPopup: false, |
|
} |
|
}, |
|
onLoad() { |
|
const pages = getCurrentPages() |
|
const { options } = pages[pages.length - 1] |
|
this.prodId = options.prodId |
|
|
|
this.originSku = JSON.parse(JSON.stringify(this.form.skuList[0])) |
|
this.getCategory() |
|
this.prodId && this.getInfo() |
|
}, |
|
methods: { |
|
// 商品信息 |
|
async getInfo() { |
|
const { data } = await info({ |
|
prodId: this.prodId |
|
}) |
|
if (data) { |
|
if (data.pic) { |
|
const pic = data.pic.split(',') |
|
this.pic = pic.map(e => { |
|
return { |
|
url: e |
|
} |
|
}) |
|
} |
|
|
|
if (data.imgs) { |
|
const imgs = data.imgs.split(',') |
|
this.imgs = imgs.map(e => { |
|
return { |
|
url: e |
|
} |
|
}) |
|
} |
|
|
|
this.form = data |
|
} |
|
}, |
|
// 供应商分类 |
|
async getCategory() { |
|
const { data } = await categoryInfo({ |
|
parentId: 0 |
|
}) |
|
this.classifications = data |
|
}, |
|
// 上传主图 |
|
uploadPic(e){ |
|
e.tempFilePaths.forEach(n => { |
|
OSS(n, (res) => { |
|
this.pic.push({ |
|
name: res.name, |
|
extname: res.ext, |
|
url: res.url, |
|
}) |
|
}) |
|
}) |
|
}, |
|
// 删除主图 |
|
delPic(e) { |
|
const i = this.pic.findIndex(n => n.url === e.tempFilePath) |
|
if (i !== -1) this.pic.splice(i, 1) |
|
}, |
|
// 上传详情图 |
|
uploadImgs(e){ |
|
e.tempFilePaths.forEach(n => { |
|
OSS(n, (res) => { |
|
this.imgs.push({ |
|
name: res.name, |
|
extname: res.ext, |
|
url: res.url, |
|
}) |
|
}) |
|
}) |
|
}, |
|
// 删除详情图 |
|
delImgs(e) { |
|
const i = this.imgs.findIndex(n => n.url === e.tempFilePath) |
|
if (i !== -1) this.imgs.splice(i, 1) |
|
}, |
|
// 显示价格弹框 |
|
showPrice(item) { |
|
this.curSku = item |
|
this.$refs.popup.open() |
|
}, |
|
popupChange(e) { |
|
this.showPopup = e.show |
|
}, |
|
// 删除sku |
|
delSku(i) { |
|
this.form.skuList.splice(i, 1) |
|
}, |
|
// 新增sku |
|
addSku() { |
|
this.form.skuList.push(JSON.parse(JSON.stringify(this.originSku))) |
|
}, |
|
// 提交 |
|
async submit(status) { |
|
if (this.submiting) return false |
|
const form = JSON.parse(JSON.stringify((this.form))) |
|
if (!form.prodName) return this.$util.errMsg(`请输入商品名称！`) |
|
if (status === 1) { |
|
if (!this.pic.length) return this.$util.errMsg(`请上传封面图片！`) |
|
// if (!form.brief) return this.$util.errMsg(`请输入商品描述！`) |
|
form.skuList = form.skuList.filter(e => e.skuName) |
|
if (!form.skuList.length) return this.$util.errMsg(`请输入产品规格！`) |
|
let invalid = 0 |
|
for (const e of form.skuList) { |
|
if (!e.skuName) { |
|
this.$util.errMsg(`请输入规格名称！`) |
|
invalid = 1 |
|
} |
|
// if (!e.price) { |
|
// this.$util.errMsg(`请输入售价！`) |
|
// invalid = 1 |
|
// } |
|
// if (!e.oriPrice) { |
|
// this.$util.errMsg(`请输入市场价！`) |
|
// invalid = 1 |
|
// } |
|
if (!e.stocks) { |
|
this.$util.errMsg(`请输入库存！`) |
|
invalid = 1 |
|
} |
|
} |
|
if (invalid) return false |
|
} |
|
this.submiting = true |
|
form.pic = this.pic.map(e => e.url).join() |
|
form.imgs = this.imgs.map(e => e.url).join() |
|
form.oriPrice = form.skuList[0].oriPrice |
|
form.price = form.skuList[0].price |
|
let stocks = 0 |
|
form.skuList.map(e => { |
|
e.prodName = form.prodName + ' ' + e.skuName |
|
if (e.stocks) stocks += e.stocks |
|
}) |
|
form.totalStocks = stocks |
|
form.status = status |
|
try { |
|
if (this.prodId) { |
|
await update(form) |
|
} else { |
|
await save(form) |
|
} |
|
this.$util.sucMsg(status === 3 ? '保存成功！' : '发布成功！') |
|
|
|
setTimeout(() => { |
|
uni.navigateBack() |
|
}, 1500) |
|
} catch(e) { |
|
this.submiting = false |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.page { |
|
padding-bottom: 170rpx; |
|
-webkit-overflow-scrolling: touch; |
|
} |
|
/deep/.picker-input { |
|
.arrow-area { |
|
display: none; |
|
} |
|
.input-value, .selected-list { |
|
padding: 0; |
|
} |
|
} |
|
.prices { |
|
display: inline-flex; |
|
align-items: center; |
|
font-size: 28rpx; |
|
color: #333; |
|
.oriPrice { |
|
margin-left: 20rpx; |
|
} |
|
} |
|
.title { |
|
margin: 40rpx 24rpx 24rpx; |
|
font-size: 30rpx; |
|
font-weight: 600; |
|
color: #333; |
|
} |
|
.sku-item { |
|
position: relative; |
|
.del { |
|
z-index: 10; |
|
position: absolute; |
|
top: 15rpx; |
|
right: 15rpx; |
|
} |
|
} |
|
.plus-sku { |
|
text-align: center; |
|
} |
|
.btns { |
|
z-index: 10; |
|
position: fixed; |
|
bottom: env(safe-area-inset-bottom); |
|
bottom: 0; |
|
width: 100%; |
|
padding: 20rpx; |
|
display: flex; |
|
justify-content: center; |
|
box-sizing: border-box; |
|
background-color: #fff; |
|
box-shadow: 0px 0px 7rpx 0px rgba(203, 203, 203, 0.55); |
|
.btn { |
|
padding: 16rpx 60rpx; |
|
margin-left: 20rpx; |
|
font-size: 28rpx; |
|
color: #333; |
|
background-color: #d8d8d8; |
|
border-radius: 20px; |
|
} |
|
.publish { |
|
color: #fff; |
|
background-color: $uni-primary; |
|
} |
|
} |
|
</style>
|
|
|