瑶都万能墙
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.
 
 
 

375 lines
7.3 KiB

<template>
<view class="publishPost">
<navbar
leftClick
@leftClick="$utils.navigateBack"
title="编辑商品"/>
<!-- <view class="title-input box">
<input type="text" placeholder="取个吸引人的标题吧" v-model="form.title"/>
</view> -->
<view class="category">
<view class="title">
商品图片
</view>
<uv-upload
:fileList="fileList"
:maxCount="imageMax"
multiple
width="150rpx"
height="150rpx"
name="fileList"
@delete="deleteImage"
@afterRead="afterRead"
:previewFullImage="true"></uv-upload>
</view>
<view class="category">
<view class="title">
选择分类
</view>
<view class="tagList">
<view
:class="{act : t.value == form.className}"
@click="clickCategory(t, i)"
v-for="(t, i) in productCategory"
:key="i">
{{ t.name }}
</view>
</view>
</view>
<view class="title-input box">
<view class="shop-box">
标题
</view>
<input type="text" placeholder="请输入标题" v-model="form.name"/>
</view>
<view class="title-input box">
<view class="shop-box">
副标题
</view>
<input type="text" placeholder="请输入商品副标题" v-model="form.nameSub"/>
</view>
<view class="title-input box">
<view class="shop-box">
价格
</view>
<input type="number" placeholder="请输入商品价格" v-model="form.price"/>
</view>
<view class="title-input box">
<view class="shop-box">
原价
</view>
<input type="number" placeholder="请输入商品原价" v-model="form.oldPrice"/>
</view>
<view class="title-input box">
<view class="shop-box">
积分
</view>
<input type="number" placeholder="请输入积分" v-model="form.points"/>
</view>
<view class="category">
<view class="title">
商品详情图片
</view>
<view class="images box">
<uv-upload
:fileList="imageDetailsList"
:maxCount="imageMax"
multiple
width="150rpx"
height="150rpx"
name="imageDetailsList"
@delete="deleteImage"
@afterRead="afterRead"
:previewFullImage="true"></uv-upload>
</view>
</view>
<!-- <view class="category">
<view class="title">
选择地区
</view>
<view class="tagList">
<view
:class="{act : t.name == form.address}"
@click="clickAddress(t, i)"
v-for="(t, i) in cityList"
:key="i">
{{ t.name }}
</view>
</view>
</view> -->
<!-- <view class="configBtn"
@click="$refs.configPopup.open()">
发布须知
</view> -->
<view class="uni-color-btn"
@click="submit">
发布
</view>
<configPopup
ref="configPopup"
:text="headInfo.save_no && headInfo.save_no.keyDetails"
/>
</view>
</template>
<script>
import { mapState } from 'vuex'
import productMixins from '@/mixins/product.js'
export default {
components : {
},
mixins : [productMixins],
data() {
return {
form : {
name : '',
nameSub : '',
price : '',
num : '',
oldPrice : '',
className : 0,
points : '',
isOpen : 'Y',
shopId : '',
},
id : 0,
fileList : [],
imageDetailsList : [],
codeFileList : [],
imageMax : 9,
};
},
computed : {
...mapState([]),
},
onLoad(args) {
this.id = args.id
this.form.shopId = args.shopId
// this.form.address = this.cityList[0].name
this.imageMax = args.imageMax || 9
this.getDateil()
},
onShow() {
},
methods : {
clickCategory(item, index){
this.form.className = item.value
},
getDateil(){
if(!this.id){
return
}
let self = this
this.$api('getShopPingDetail', {
id : this.id
}, res => {
if (res.code == 200) {
self.form.id = res.result.id
self.form.name = res.result.name
self.form.nameSub = res.result.nameSub
self.form.points = res.result.points
self.form.price = res.result.price
self.form.oldPrice = res.result.oldPrice
self.form.className = res.result.className || self.form.className
if(res.result.image){
res.result.image.split(',')
.forEach(url => {
self.fileList.push({
url
})
})
}
if(res.result.imageDetails){
res.result.imageDetails.split(',')
.forEach(url => {
self.imageDetailsList.push({
url
})
})
}
}
})
},
deleteImage(e){
this[e.name].splice(e.index, 1)
},
afterRead(e){
let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
self[e.name].push({
url
})
})
})
},
// 提交
submit(){
this.form.image = this.fileList.map((item) => item.url).join(",")
this.form.imageDetails = this.imageDetailsList.map((item) => item.url).join(",")
if (this.$utils.verificationAll(this.form, {
image : '请上传商品图片',
name: '请输入商品标题',
nameSub: '请输入商品副标题',
price: '请输入商品价格',
oldPrice: '请输入商品原价',
points: '请输入积分',
imageDetails : '请上传商品详情图片',
})) {
return
}
delete this.form.shop
this.$api('orderSaveOrUpdate', this.form, res => {
if(res.code == 200){
uni.showToast({
title: '保存成功!',
icon: 'none'
})
setTimeout(uni.navigateBack, 1000, -1)
}
})
},
}
}
</script>
<style lang="scss" scoped>
.publishPost{
background-color: #fff;
min-height: 100vh;
font-size: 28rpx;
padding-bottom: 150rpx;
/deep/ .uv-textarea{
background-color: transparent;
border: none;
}
/deep/ .uv-textarea__count{
background-color: transparent !important;
}
.box{
padding: 0 20rpx;
}
.images{
display: flex;
flex-wrap: wrap;
padding: 20rpx;
}
.title-input{
margin: 10rpx;
border-bottom: 1px solid #00000015;
padding-bottom: 25rpx;
margin-bottom: 15rpx;
display: flex;
align-items: center;
justify-content: space-between;
input{
width: 100%;
}
.shop-box{
font-size: 28rpx;
flex-shrink: 0;
font-weight: 900;
width: 140rpx;
}
}
.content-input{
min-height: 400rpx;
/deep/ .uv-textarea{
min-height: 400rpx;
}
}
.upTop{
.title{
padding-top: 20rpx;
padding-left: 20rpx;
border-top: 1px solid #00000015;
display: flex;
align-items: center;
}
.list{
padding-top: 30rpx;
width: 100%;
.item{
display: flex;
padding: 20rpx;
padding-left: 80rpx;
justify-content: space-between;
width: 600rpx;
border-bottom: 1px solid #00000015;
align-items: center;
}
}
}
.configBtn{
padding: 20rpx;
color: #777;
padding-top: 40rpx;
font-size: 28rpx;
}
.confirmationPopup{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 300rpx;
image{
margin-top: 40rpx;
}
.info{
margin-top: 40rpx;
font-size: 26rpx;
}
}
}
.category{
padding: 20rpx;
.title{
font-weight: 900;
// font-size: 30rpx;
padding-bottom: 20rpx;
}
.tagList{
display: flex;
flex-wrap: wrap;
padding: 10rpx 0;
view{
background: rgba($uni-color, 0.1);
padding: 10rpx 20rpx;
margin: 10rpx;
border-radius: 10rpx;
font-size: 26rpx;
}
.act{
color: #fff;
background: $uni-color;
}
}
}
</style>