幼教产品B2B生态平台小程序端
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.

343 lines
8.7 KiB

11 months ago
<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">
11 months ago
<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>
11 months ago
</view>
</view>
<view class="py">
10 months ago
<uni-file-picker v-model="pic" limit="5" title="请上传封面图片,至少一张" :auto-upload="false" @delete="delPic" @select="uploadPic"></uni-file-picker>
11 months ago
</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">
10 months ago
<uni-file-picker v-model="imgs" limit="10" title="添加优质图片" :auto-upload="false" @delete="delImgs" @select="uploadImgs"></uni-file-picker>
11 months ago
</view>
</view>
</view>
<view class="title">产品规格</view>
10 months ago
<view v-for="(item, i) in form.skuList" :key="i" class="block sku-item">
11 months ago
<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>
10 months ago
<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>
11 months ago
</view>
<view class="line">
<view class="name">库存</view>
11 months ago
<uni-number-box v-model.number="item.stocks" :max="100" :min="1"></uni-number-box>
11 months ago
</view>
</view>
10 months ago
<uni-icons class="del" type="closeempty" size="18" color="#b3b3b3" @click="delSku(i)"></uni-icons>
11 months ago
</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>
11 months ago
<view class="btn publish" @click="submit(1)">发布</view>
11 months ago
</view>
10 months ago
<uni-popup ref="popup" background-color="#fff" type="bottom" @change="popupChange">
11 months ago
<view class="block">
<view class="form-list edit-form">
<view class="line">
<view class="name">售价</view>
10 months ago
<input ref="price" :focus="showPopup" type="text" step="0.01" placeholder="请输入售价" v-model="curSku.price" />
11 months ago
</view>
<view class="line">
11 months ago
<view class="name">市场价</view>
10 months ago
<input type="text" step="0.01" placeholder="请输入市场价" v-model="curSku.oriPrice" />
11 months ago
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { queryProvince, queryCity, queryTeamInfo, updateTeamInfo, enterpriseCertificationStatus } from '@/apis/modules/user.js'
11 months ago
import { save, update, info, categoryInfo } from '@/apis/modules/goods.js'
11 months ago
import OSS from '@/libs/Oss/upload'
export default {
data() {
return {
10 months ago
team: uni.getStorageSync('team'),
11 months ago
openId: uni.getStorageSync('openId'),
11 months ago
prodId: '',
11 months ago
form: {
brief: '',
categoryId: '',
content: '',
pic: '',
11 months ago
imgs: '',
11 months ago
price: '',
prodName: '',
skuList: [
{
11 months ago
prodName: '',
11 months ago
status: 1,
11 months ago
oriPrice: '',
price: '',
10 months ago
skuName: '默认',
stocks: 9999,
11 months ago
}
],
},
originSku: {},
11 months ago
curSku: {},
11 months ago
pic: [],
11 months ago
imgs: [],
11 months ago
submiting: false,
uploading: false,
classifications: [],
10 months ago
showPopup: false,
11 months ago
}
},
10 months ago
onLoad() {
11 months ago
const pages = getCurrentPages()
const { options } = pages[pages.length - 1]
this.prodId = options.prodId
11 months ago
this.originSku = JSON.parse(JSON.stringify(this.form.skuList[0]))
this.getCategory()
11 months ago
this.prodId && this.getInfo()
11 months ago
},
methods: {
11 months ago
// 商品信息
async getInfo() {
const { data } = await info({
prodId: this.prodId
})
11 months ago
if (data) {
11 months ago
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
11 months ago
}
},
// 供应商分类
async getCategory() {
11 months ago
const { data } = await categoryInfo({
parentId: 0
})
11 months ago
this.classifications = data
},
11 months ago
// 上传主图
uploadPic(e){
10 months ago
e.tempFilePaths.forEach(n => {
OSS(n, (res) => {
this.pic.push({
name: res.name,
extname: res.ext,
url: res.url,
})
11 months ago
})
11 months ago
})
},
10 months ago
// 删除主图
delPic(e) {
const i = this.pic.findIndex(n => n.url === e.tempFilePath)
if (i !== -1) this.pic.splice(i, 1)
},
// 上传详情图
11 months ago
uploadImgs(e){
10 months ago
e.tempFilePaths.forEach(n => {
OSS(n, (res) => {
this.imgs.push({
name: res.name,
extname: res.ext,
url: res.url,
})
11 months ago
})
})
},
10 months ago
// 删除详情图
delImgs(e) {
const i = this.imgs.findIndex(n => n.url === e.tempFilePath)
if (i !== -1) this.imgs.splice(i, 1)
},
11 months ago
// 显示价格弹框
11 months ago
showPrice(item) {
this.curSku = item
11 months ago
this.$refs.popup.open()
},
10 months ago
popupChange(e) {
this.showPopup = e.show
},
// 删除sku
delSku(i) {
this.form.skuList.splice(i, 1)
},
11 months ago
// 新增sku
addSku() {
10 months ago
this.form.skuList.push(JSON.parse(JSON.stringify(this.originSku)))
11 months ago
},
// 提交
async submit(status) {
if (this.submiting) return false
11 months ago
const form = JSON.parse(JSON.stringify((this.form)))
11 months ago
if (!form.prodName) return this.$util.errMsg(`请输入商品名称!`)
10 months ago
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
}
11 months ago
}
10 months ago
if (invalid) return false
11 months ago
}
11 months ago
this.submiting = true
form.pic = this.pic.map(e => e.url).join()
11 months ago
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 => {
11 months ago
e.prodName = form.prodName + ' ' + e.skuName
11 months ago
if (e.stocks) stocks += e.stocks
})
form.totalStocks = stocks
11 months ago
form.status = status
10 months ago
form.shopId = this.team.isTeam ? this.team.teamId : this.team.parentId
11 months ago
try {
11 months ago
if (this.prodId) {
11 months ago
await update(form)
} else {
await save(form)
}
11 months ago
this.$util.sucMsg(status === 3 ? '保存成功!' : '发布成功!')
11 months ago
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;
}
}
10 months ago
.prices {
display: inline-flex;
align-items: center;
font-size: 28rpx;
11 months ago
color: #333;
10 months ago
.oriPrice {
margin-left: 20rpx;
}
11 months ago
}
.title {
margin: 40rpx 24rpx 24rpx;
font-size: 30rpx;
font-weight: 600;
color: #333;
}
10 months ago
.sku-item {
position: relative;
.del {
z-index: 10;
position: absolute;
top: 15rpx;
right: 15rpx;
}
}
11 months ago
.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>