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.
444 lines
9.7 KiB
444 lines
9.7 KiB
<template>
|
|
<view class="all-container pd-main font16 backcor6" style="padding-bottom: 60px;">
|
|
<view class="form-gorup backcorfff">
|
|
<view class="dis-flex marb10 bor-botm1">
|
|
<view class=" marRight10 fontwig6 padleft15 paddtright10">名称:
|
|
</view>
|
|
<input type="text" name="name" v-model.trim="productData.name" placeholder-class="corf6"
|
|
class=" flex-1 " placeholder="请输入名称">
|
|
</view>
|
|
<view class="dis-flex marb10 bor-botm1">
|
|
<view class=" marRight10 fontwig6 padleft15 paddtright10">价格:
|
|
</view>
|
|
<input type="digit" name="name" v-model.trim="productData.price" placeholder-class="corf6"
|
|
class=" flex-1 " placeholder="请输入价格(保留两位小数)">
|
|
</view>
|
|
<view class="dis-flex marb10 bor-botm1">
|
|
<view class=" marRight10 fontwig6 padleft15 paddtright10">
|
|
规格:
|
|
</view>
|
|
<input type="text" name="name" v-model.trim="productData.spec" placeholder-class="corf6"
|
|
class=" flex-1 " placeholder="请输入规格">
|
|
</view>
|
|
<view class="dis-flex marb10 bor-botm1 paddbotm10">
|
|
<view class=" marRight10 fontwig6 padleft15 paddtright10">分类:
|
|
</view>
|
|
<view class="flex-1 dis-flex ">
|
|
<picker mode="selector" class="flex-1" :range="categoryList" range-key="name"
|
|
@change="bindImgType">
|
|
<view class=" text1 marRight10 font14" v-if="productData.productCategoryId">
|
|
{{productCategoryName}}
|
|
</view>
|
|
<view class=" text1 marRight10 fcor999 font14" v-else>
|
|
请选择分类
|
|
</view>
|
|
</picker>
|
|
<image src="/static/img/jtg.png" mode="widthFix" class="iconw"></image>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="imageUploadContainer">
|
|
<view class="imageUploadList">
|
|
<view class="imageItem" v-for="(item,index) in imgValue" :key="index">
|
|
<image :src="imgUrl+item" mode="aspectFill" @click="previewImage(imgUrl+item)" :data-index="index"></image>
|
|
<view v-if="isShowDel" class="imageDel" @click="deleteImage(item)" >x</view>
|
|
</view>
|
|
<view v-if="isShowAdd" class="imageUpload" @click="upload">+</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="footer-btn">
|
|
<button class="backcor89 fcorfff" @click="clickToSave">保存</button>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {insertStoreProduct,getStoreProductById,editStoreProduct,getALLCategory} from '@/Utils/groupBuying.js'
|
|
|
|
const app = getApp();
|
|
export default {
|
|
data(){
|
|
return{
|
|
reqUrl: app.globalData.url, //请求地址
|
|
imgUrl: app.globalData.imgUrl, //图片访问地址
|
|
status:'',//1.新增 2.编辑
|
|
productData:{
|
|
name:'',//名称
|
|
price:'',//价格
|
|
spec:'',//规格
|
|
storeId:'',//门店id
|
|
img:'',//图片
|
|
productCategoryId:'',//分类
|
|
},
|
|
imgValue:[],//图片
|
|
|
|
categoryList:[],//分类列表
|
|
productCategoryName:'',
|
|
|
|
|
|
}
|
|
},
|
|
|
|
computed:{
|
|
isShowDel(){
|
|
return true
|
|
},
|
|
isShowAdd(){
|
|
if(this.imgValue.length>=1){
|
|
return false
|
|
}else{
|
|
return true
|
|
}
|
|
},
|
|
|
|
},
|
|
onLoad(option) {
|
|
this.productData.storeId = option.storeId;
|
|
this.status=option.status;
|
|
if(this.status==1){
|
|
uni.setNavigationBarTitle({
|
|
title:"添加产品"
|
|
})
|
|
}else{
|
|
uni.setNavigationBarTitle({
|
|
title:"编辑产品"
|
|
})
|
|
}
|
|
if(option.id){
|
|
this.productData.id =option.id;
|
|
this.getStoreProductById()
|
|
}
|
|
this.getALLCategory();
|
|
},
|
|
methods:{
|
|
/* 获取所有分类列表 */
|
|
getALLCategory(){
|
|
let params = {
|
|
storeId: this.productData.storeId
|
|
}
|
|
getALLCategory(params).then(res => {
|
|
if (res.return_code == '000000') {
|
|
this.categoryList = res.return_data;
|
|
} else {
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
bindImgType(e) {
|
|
this.productData.productCategoryId = this.categoryList[e.target.value].id;
|
|
this.productCategoryName = this.categoryList[e.target.value].name;
|
|
},
|
|
clickToSave(){
|
|
|
|
if(!this.validate()) return;
|
|
|
|
this.productData.img = this.imgValue.join(",");
|
|
|
|
if(this.status==1){//1.新增 2.编辑
|
|
this.insertStoreProduct()
|
|
return
|
|
}
|
|
if(this.status==2){
|
|
this.editStoreProduct()
|
|
}
|
|
|
|
|
|
},
|
|
/* 根据id查询详情 */
|
|
getStoreProductById(){
|
|
uni.showLoading({
|
|
title:"加载中",
|
|
})
|
|
let that =this;
|
|
let params={
|
|
id:that.productData.id
|
|
}
|
|
getStoreProductById(params).then(res=>{
|
|
uni.hideLoading();
|
|
if (res.return_code == '000000') {
|
|
console.log(res.return_data) ;
|
|
this.productData.name = res.return_data.name;
|
|
this.productData.price = res.return_data.price;
|
|
this.productData.spec = res.return_data.spec;
|
|
this.productData.img = res.return_data.img;
|
|
|
|
this.productData.productCategoryId=res.return_data.productCategoryId;
|
|
this.productCategoryName=res.return_data.productCategoryName;
|
|
|
|
this.imgValue.push(res.return_data.img);
|
|
}else{
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
/* 增加 */
|
|
insertStoreProduct(){
|
|
insertStoreProduct(this.productData).then(res=>{
|
|
let title ;
|
|
if (res.return_code == '000000') {
|
|
title = res.return_data;
|
|
}else{
|
|
title = res.return_msg;
|
|
}
|
|
uni.showToast({
|
|
title: title,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack();
|
|
},1000)
|
|
})
|
|
},
|
|
/* 修改 */
|
|
editStoreProduct(){
|
|
editStoreProduct(this.productData).then(res=>{
|
|
let title ;
|
|
if (res.return_code == '000000') {
|
|
title = res.return_data;
|
|
}else{
|
|
title = res.return_msg;
|
|
}
|
|
uni.showToast({
|
|
title: title,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack();
|
|
},1000)
|
|
})
|
|
},
|
|
validate(){
|
|
var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/;
|
|
if(!reg.test(this.productData.price)||this.productData.price==0){
|
|
uni.showToast({
|
|
title:"请输入正确的金额格式",
|
|
icon:"none"
|
|
})
|
|
this.productData.price="";
|
|
return
|
|
}
|
|
|
|
|
|
if(!this.productData.name||!this.productData.price||!this.productData.spec){
|
|
uni.showToast({
|
|
title:"请填写完整哦!",
|
|
icon:"none"
|
|
})
|
|
return false
|
|
}
|
|
if(!this.productData.productCategoryId){
|
|
uni.showToast({
|
|
title:"请选择分类!",
|
|
icon:"none"
|
|
})
|
|
return false
|
|
}
|
|
|
|
|
|
if(this.imgValue.length==0){
|
|
uni.showToast({
|
|
title:"请选择图片上传",
|
|
icon:"none"
|
|
})
|
|
return false
|
|
}
|
|
|
|
|
|
|
|
|
|
return true
|
|
},
|
|
|
|
// 删除图片
|
|
deleteImage(data){
|
|
let arr = this.imgValue.filter((item)=>item!=data);
|
|
this.imgValue = arr;
|
|
},
|
|
// 预览
|
|
previewImage(img){
|
|
uni.previewImage({
|
|
current: 0,
|
|
indicator: "number",
|
|
loop: "true",
|
|
urls:[img]
|
|
})
|
|
},
|
|
//上传图片
|
|
upload() {
|
|
let that = this;
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['camera', 'album'],
|
|
success: function(res) {
|
|
const tempFilePaths = res.tempFilePaths;
|
|
that.uploadFile(tempFilePaths[0]);
|
|
},
|
|
error: function(e) {
|
|
console.log(e);
|
|
}
|
|
});
|
|
},
|
|
//上传
|
|
uploadFile(imgURL) {
|
|
const that = this;
|
|
uni.uploadFile({
|
|
url: that.reqUrl + '/fileUpload/uploadfile',
|
|
filePath: imgURL,
|
|
header: {
|
|
"Authorization": app.globalData.token
|
|
},
|
|
name: 'files',
|
|
success: function(uploadFileRes) {
|
|
that.getImgSignedUrl(JSON.parse(uploadFileRes.data)
|
|
.return_data);
|
|
}
|
|
});
|
|
},
|
|
//查看临时图片路径
|
|
getImgSignedUrl( item1) {
|
|
this.imgValue.push(item1);
|
|
console.log(this.imgValue,"this.imgValue")
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
|
|
/* 表单 */
|
|
.form-gorup {
|
|
padding: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
|
input {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.form-gorup-title {
|
|
padding: 20rpx 0;
|
|
margin-bottom: 5rpx;
|
|
font-weight: 500;
|
|
|
|
width: 74px;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
}
|
|
|
|
/* 图片 */
|
|
.imageUploadContainer{
|
|
padding: 10upx 5upx;
|
|
margin: 10upx 5upx;
|
|
}
|
|
.name{
|
|
text-align: center;
|
|
margin-top:-30upx;
|
|
}
|
|
.dragging{
|
|
transform: scale(1.2)
|
|
}
|
|
|
|
.imageUploadList{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.imageItem, .imageUpload{
|
|
width: 200upx;
|
|
height: 200upx;
|
|
margin: 30upx 15upx 30upx;
|
|
}
|
|
|
|
.imageDel{
|
|
position: relative;
|
|
left: 180upx;
|
|
bottom: 225upx;
|
|
background-color: rgba(0,0,0,0.5);
|
|
width: 36upx;
|
|
text-align: center;
|
|
line-height: 35upx;
|
|
border-radius: 17upx;
|
|
color: white;
|
|
font-size: 30upx;
|
|
padding-bottom: 2upx;
|
|
}
|
|
|
|
.imageItem image, .moveImage{
|
|
width: 200upx;
|
|
height: 200upx;
|
|
border-radius: 8upx;
|
|
}
|
|
|
|
.imageUpload{
|
|
line-height: 200upx;
|
|
text-align: center;
|
|
font-size: 150upx;
|
|
color: #D9D9D9;
|
|
border: 1px solid #D9D9D9;
|
|
border-radius: 8upx;
|
|
}
|
|
|
|
.moveImage{
|
|
position: absolute;
|
|
}
|
|
.uni-list {
|
|
width: 260px;
|
|
}
|
|
.popup_foot {
|
|
display: flex;
|
|
border-top: 1px #F9F9F9 solid;
|
|
line-height: 40px;
|
|
height: 40px;
|
|
margin-top: 30px;
|
|
}
|
|
.build_01{
|
|
line-height: 35px;
|
|
}
|
|
.build_01 input{
|
|
background: #ededed;
|
|
}
|
|
.popup_foot_l {
|
|
width: 50%;
|
|
text-align: center;
|
|
}
|
|
|
|
.popup_foot_r {
|
|
width: 50%;
|
|
text-align: center;
|
|
border-left: 1px #F9F9F9 solid;
|
|
color: #5095D3;
|
|
}
|
|
|
|
/* 底部按钮 */
|
|
.footer-btn{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
button{
|
|
height: 50px;
|
|
line-height: 50px;
|
|
}
|
|
}
|
|
</style> |