359 lines
9.3 KiB
Vue
359 lines
9.3 KiB
Vue
<template>
|
||
<view class="box fromClass">
|
||
<view class="pass" v-if="active==5">
|
||
驳回原因：{{content.statusremark}}
|
||
</view>
|
||
<view class="lanBox">
|
||
<view class="lan">
|
||
<view class="left">产品名称（标题）</view>
|
||
<view class="right">
|
||
<input name="name" type="text" v-model="content.title" placeholder="标题" :disabled="disabled" />
|
||
</view>
|
||
</view>
|
||
<!-- -->
|
||
<view class="lan" v-if="type!=9">
|
||
<view class="left">产品图片</view>
|
||
<view class="right pics mr-10" v-for="(img,ind) in urlList" v-if="urlList.length">
|
||
<image :src="img" mode="aspectFill" @click="handleimage(ind)" />
|
||
<uni-icons type="close" size="22" class="uni-icons" @click="handleDel(ind)" @click.stop
|
||
v-if="!disabled"></uni-icons>
|
||
</view>
|
||
<view v-if="!disabled&&urlList.length<3" @click="handleimage()" class="right pics size20">+</view>
|
||
<text class="size12 c999 desc">最多可上传3张，大小不超过2M</text>
|
||
</view>
|
||
<!-- -->
|
||
<view class="lan" v-if="type!=9">
|
||
<view class="left">所属行业</view>
|
||
<view class="right" v-if="!disabled">
|
||
<picker mode="selector" :range="industrylist" range-key="name" :value="content.industryname"
|
||
@change="changeIndustry">
|
||
<view class="uni-input">{{content.industryname?content.industryname:"请选择"}}</view>
|
||
<uni-icons type="forward" size="20" color="#999"></uni-icons>
|
||
</picker>
|
||
</view>
|
||
<view class="right" v-else>
|
||
{{content.industryname}}
|
||
</view>
|
||
</view>
|
||
<!-- -->
|
||
<view class="lan" v-if="type!=9">
|
||
<view class="left">配送范围</view>
|
||
<view class="right" v-if="!disabled">
|
||
<pickRegions @getRegion="handleGetRegion" class="regions" :isArea="true">
|
||
<view class="city" v-if="content.province">
|
||
{{content.province}}{{content.city}}{{content.area}}
|
||
</view>
|
||
<view v-else>请选择省/市/区</view>
|
||
<uni-icons type="forward" size="20" color="#999"></uni-icons>
|
||
</pickRegions>
|
||
</view>
|
||
<view class="right" v-else>
|
||
{{content.province}}{{content.city}}{{content.area}}
|
||
</view>
|
||
</view>
|
||
<view class="lan" v-if="type!=9">
|
||
<view class="left">详细地址</view>
|
||
<view class="right">
|
||
<input name="name" type="text" v-model="content.address" placeholder="单元楼栋" :disabled="disabled" />
|
||
</view>
|
||
</view>
|
||
<view class="lan" v-if="type!=9">
|
||
<view class="left">市场价</view>
|
||
<view class="right">
|
||
<input name="name" type="text" v-model="content.price" placeholder="市场价" :disabled="disabled" />
|
||
</view>
|
||
</view>
|
||
<view class="lan" v-if="type!=9">
|
||
<view class="left">会员价</view>
|
||
<view class="right">
|
||
<input name="name" type="text" v-model="content.vipprice" placeholder="会员价" :disabled="disabled" />
|
||
</view>
|
||
</view>
|
||
<view class="lan">
|
||
<view class="left">产品规格及介绍</view>
|
||
<view class="right textarea">
|
||
<textarea v-model="content.desc" name="content" :disabled="disabled" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn" @click="confirmInfo" v-if="!disabled">提交</view>
|
||
<!-- <view class="wrapper" v-if="showModal">
|
||
<view class="bg" @click="showModal=false">
|
||
<view class="all">
|
||
<icon class="iconfont icon-yuanxingxuanzhongfill"></icon>
|
||
<view class="bold size20">提交成功</view>
|
||
<view>在“个人中心”查看审核进度</view>
|
||
<view>如有疑问请联系秘书处</view>
|
||
</view>
|
||
<view class="greenBtn">
|
||
<view class="btn">确认</view>
|
||
<view class="btn">取消</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
import pickRegions from "@/uni_modules/pick-regions/pick-regions.vue"
|
||
export default {
|
||
data() {
|
||
return {
|
||
content: {
|
||
type: "",
|
||
title: "",
|
||
province: "",
|
||
city: "",
|
||
area: "",
|
||
address: "",
|
||
industryid: "",
|
||
industryname: "",
|
||
price: "",
|
||
vipprice: "",
|
||
desc: '',
|
||
pics: [],
|
||
},
|
||
urlList: [],
|
||
pathList: [],
|
||
showModal: false,
|
||
type: 3,
|
||
status: "",
|
||
disabled: false,
|
||
active: 0,
|
||
imageStyles: {
|
||
width: 100,
|
||
height: 100,
|
||
},
|
||
imgArr: []
|
||
|
||
};
|
||
},
|
||
components: {
|
||
pickRegions
|
||
},
|
||
computed: {
|
||
...mapState(["user", "HomeContent"]),
|
||
industrylist() {
|
||
return this.HomeContent.industrylist
|
||
},
|
||
},
|
||
onLoad(options) {
|
||
this.status = options.status
|
||
if (this.status == 'add') {
|
||
this.type = options.type
|
||
this.content.type = this.type
|
||
this.disabled = false
|
||
} else {
|
||
this.content = JSON.parse(options.item)
|
||
this.type = this.content.type
|
||
this.content.industryid = this.type != 9 ? this.industrylist[this.industrylist.findIndex(ite => ite
|
||
.name === this.content.industryname)].id : ''
|
||
this.active = this.content.active //审核中、已驳回、已发布的状态
|
||
this.disabled = this.active == 4 ? true : false
|
||
let url = []
|
||
let path = []
|
||
|
||
this.content.pics.forEach(item => {
|
||
url.push(item.url)
|
||
path.push(item.path)
|
||
})
|
||
this.urlList = url
|
||
this.pathList = path
|
||
console.log(this.urlList, this.pathList)
|
||
}
|
||
console.log("options", options)
|
||
uni.setNavigationBarTitle({
|
||
title: this.type == 3 ? "商品信息" : this.active == 8 ? '发布供货' : '我的需求'
|
||
});
|
||
},
|
||
methods: {
|
||
// 提交
|
||
confirmInfo() {
|
||
let that = this
|
||
if (this.type == 9) {
|
||
if (!this.content.title) {
|
||
this.$tools.msg("请填写产品名称")
|
||
return;
|
||
}
|
||
if (!this.content.desc) {
|
||
this.$tools.msg("请填写产品规格及介绍")
|
||
return;
|
||
}
|
||
} else {
|
||
if (!this.content.title) {
|
||
this.$tools.msg("请填写产品名称")
|
||
return;
|
||
}
|
||
if (!this.content.pics) {
|
||
this.$tools.msg("请上传产品图片")
|
||
return;
|
||
}
|
||
if (!this.content.industryid) {
|
||
this.$tools.msg("请选择所属行业")
|
||
return;
|
||
}
|
||
if (!this.content.province) {
|
||
this.$tools.msg("请选择配送范围")
|
||
return;
|
||
}
|
||
if (!this.content.address) {
|
||
this.$tools.msg("请填写详细地址")
|
||
return;
|
||
}
|
||
if (!this.pathList) {
|
||
this.$tools.msg("请输入市场价")
|
||
return;
|
||
}
|
||
if (!this.content.vipprice) {
|
||
this.$tools.msg("请输入会员价")
|
||
return;
|
||
}
|
||
if (!this.content.desc) {
|
||
this.$tools.msg("请填写产品规格及介绍")
|
||
return;
|
||
}
|
||
this.content.pics = this.pathList
|
||
}
|
||
if (that.status == 'add') {
|
||
that.subInfo(that.content);
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: that.active == 6 ? "本产品已发布成功，" : '' + "一经修改，将重新审核发布",
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
that.EditInfo(that.content)
|
||
} else if (res.cancel) {
|
||
that.$tools.msg('您已取消操作')
|
||
}
|
||
}
|
||
});
|
||
}
|
||
console.log("提交", this.content)
|
||
},
|
||
subInfo(data) {
|
||
let that = this
|
||
that.$model.getProductAdd(data).then(res => {
|
||
if (res.code == 0) {
|
||
that.$tools.msg("提交成功");
|
||
uni.showToast({
|
||
title: "提交成功",
|
||
duration: 2000
|
||
});
|
||
setTimeout(function() {
|
||
uni.switchTab({
|
||
url: "/pages/me/me"
|
||
})
|
||
}, 2000)
|
||
} else {
|
||
that.$tools.msg(res.message);
|
||
}
|
||
});
|
||
},
|
||
EditInfo(data) {
|
||
let that = this
|
||
that.$model.getProductEdit(data).then(res => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: "提交成功",
|
||
duration: 2000
|
||
});
|
||
setTimeout(function() {
|
||
uni.switchTab({
|
||
url: "/pages/me/me"
|
||
})
|
||
}, 2000)
|
||
} else {
|
||
that.$tools.msg(res.message);
|
||
}
|
||
});
|
||
},
|
||
handleimage(ind) {
|
||
let that = this
|
||
let imgArr = []
|
||
if (this.disabled) return
|
||
uni.chooseImage({
|
||
count: 3, //默认9
|
||
sourceType: ['album', 'camera'], //从相册选择
|
||
success: function(res) {
|
||
imgArr.push(res.tempFilePaths)
|
||
imgArr.forEach(ele => {
|
||
ele.forEach(item => {
|
||
that.$model.getUpLoadimg({
|
||
uploadpath: item
|
||
}).then(ress => {
|
||
if (ress.code == 0) {
|
||
that.urlList.push(ress.data.url)
|
||
that.pathList.push(ress.data.path)
|
||
} else {
|
||
that.$tools.msg("不支持该图像")
|
||
}
|
||
})
|
||
})
|
||
})
|
||
}
|
||
})
|
||
|
||
},
|
||
handleDel(ind) {
|
||
let that = this
|
||
that.urlList.splice(ind, 1)
|
||
that.pathList.splice(ind, 1)
|
||
console.log("ind", ind)
|
||
},
|
||
handleGetRegion(ite) {
|
||
console.log("省市区", ite)
|
||
this.content.province = ite[0].name
|
||
this.content.city = ite[1].name
|
||
this.content.area = ite[2].name
|
||
},
|
||
// 所属行业
|
||
changeIndustry(e) {
|
||
this.content.industryname = this.HomeContent.industrylist[e.target.value].name
|
||
this.content.industryid = this.HomeContent.industrylist[e.target.value].id
|
||
},
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style scoped="scoped" lang="scss">
|
||
.right {
|
||
|
||
/deep/picker,
|
||
.regions {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/deep/.is-add {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.pics {
|
||
width: 100px !important;
|
||
height: 100px !important;
|
||
justify-content: center;
|
||
padding: 0 !important;
|
||
float: left;
|
||
// border: none !important;
|
||
// background-color: inherit !important;
|
||
|
||
.uni-icons {
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
right: 0;
|
||
font-size: inherit !important;
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
}
|
||
}
|
||
</style> |