<template>
|
<view class="add-goods">
|
<div class="uForm">
|
<u-form :border-bottom="false" :model="form" ref="uForm" :error-type="['toast']" :rule="rules">
|
|
<u-form-item label="商品分类" label-width="130" prop="">
|
<picker mode="multiSelector" @change="bindMultiPickerChange"
|
@columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="categoryListArray"
|
range-key="name">
|
<view class="picker">
|
{{ categoryListArray[0][multiIndex[0]].name ? categoryListArray[0][multiIndex[0]].name +
|
'，' : '' }}
|
{{ categoryListArray[1][multiIndex[1]].name ? categoryListArray[1][multiIndex[1]].name +
|
'，' : '' }}
|
{{ categoryListArray[2][multiIndex[2]].name ? categoryListArray[2][multiIndex[2]].name :
|
'' }}
|
</view>
|
</picker>
|
</u-form-item>
|
|
<u-form-item class="border" label="商品名称" label-width="130" prop="goodsName">
|
<u-input v-model="form.goodsName" clearable placeholder="请输入商品名称" />
|
</u-form-item>
|
|
<u-form-item label="商品价格" label-width="130" prop="price">
|
<u-input v-model="form.price" type="number" placeholder="请输入商品价格" />
|
</u-form-item>
|
|
<u-form-item label="商品卖点" label-width="130">
|
<u-input type="textarea" v-model="form.sellingPoint" placeholder="请输入商品卖点" />
|
</u-form-item>
|
|
<u-form-item label="商品品牌" label-width="130" prop="brandId">
|
<picker @change="bindBrandsChange" :value="b_index" :range="brandsArray" :range-key="'name'">
|
<view class="uni-input">{{ brandsArray[b_index].name }}</view>
|
</picker>
|
</u-form-item>
|
|
<u-form-item label="计量单位" label-width="130" prop="goodsUnit">
|
<picker @change="bindUnitChange" :value="u_index" :range="unitArray" :range-key="'name'">
|
<view class="uni-input">{{ unitArray[u_index].name }}</view>
|
</picker>
|
</u-form-item>
|
<u-form-item label="销售模式" label-width="130" prop="salesModel">
|
<radio-group name="radio" @change="radioChange" v-model="form.salesModel">
|
<label>
|
<radio value="RETAIL" :checked="form.salesModel == 'RETAIL'" /><text>零售型</text>
|
</label>
|
<label>
|
<radio value="WHOLESALE" :checked="form.salesModel == 'WHOLESALE'" /><text>批发型</text>
|
</label>
|
</radio-group>
|
</u-form-item>
|
|
|
|
<view class="opt-view">
|
<view class="img-title">上传图片（最多5张）</view>
|
<view class="images-view">
|
<u-upload :header="{ accessToken: storage.getAccessToken() }" :action="action" width="150"
|
@on-uploaded="onUploaded" :max-count="5" :show-progress="false"></u-upload>
|
</view>
|
</view>
|
|
<div class="saveBtn" @click="save">保存</div>
|
</u-form>
|
|
<m-city :provinceData="list" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue"
|
pickerSize="4">
|
</m-city>
|
|
<uniMap v-if="mapFlag" @close="closeMap" @callback="callBackgoods" />
|
</div>
|
</view>
|
</template>
|
|
<script>
|
import '@/components/uview-components/uview-ui';
|
|
|
import storage from "@/utils/storage.js";
|
import * as API_GOODS from "@/api/goods.js";
|
export default {
|
data() {
|
return {
|
c_index: 0,
|
b_index: 0,
|
u_index: 0,
|
categoryListArray: [],
|
multiIndex: [0, 0, 0],
|
storage,
|
form: {},
|
brandsArray: [],
|
unitArray: []
|
}
|
},
|
methods: {
|
|
//图片上传
|
onUploaded(lists) {
|
let images = [];
|
|
lists.forEach((item) => {
|
images.push(item.response.result);
|
});
|
this.form.images = images;
|
},
|
bindBrandsChange(e) {
|
this.b_index = e.detail.value
|
this.form.brandId = this.brandsArray[this.b_index].id
|
},
|
bindUnitChange(e) {
|
this.u_index = e.detail.value
|
this.form.goodsUnit = this.unitArray[this.u_index].name
|
},
|
initCategory() {
|
API_GOODS.getStoreGoodsCategory().then((res) => {
|
const params = res.data.result;
|
if (params && params.length > 0) {
|
this.initBrands(params[0].id)
|
}
|
this.categoryListData = params;
|
this.manageCategoryListThreeLevel()
|
});
|
},
|
initBrands(categoryId) {
|
this.brandsArray = []
|
API_GOODS.getStoreGoodsBrands(categoryId).then((res) => {
|
const params = res.data;
|
this.brandsArray = params
|
});
|
},
|
initGoods() {
|
API_GOODS.getgoodsUnit().then((res) => {
|
const params = res.data.result.records;
|
|
this.unitArray = params
|
});
|
},
|
manageCategoryListThreeLevel() {
|
let categoryLen = this.categoryListData.length
|
for (var i = categoryLen - 1; i >= 0; i--) {
|
let categoryChildrenLen = this.categoryListData[i].children.length
|
for (var j = categoryChildrenLen - 1; j >= 0; j--) {
|
if (!this.categoryListData[i].children[j].children.length) {
|
this.categoryListData[i].children.splice(j, 1)
|
}
|
}
|
}
|
this.manageCategoryListTwoLevel()
|
},
|
|
manageCategoryListTwoLevel() {
|
let categoryLen = this.categoryListData.length
|
for (var i = categoryLen - 1; i >= 0; i--) {
|
if (!this.categoryListData[i].children.length) {
|
this.categoryListData.splice(i, 1)
|
}
|
}
|
this.categoryListArray = [
|
this.categoryListData,
|
this.categoryListData[0].children,
|
this.categoryListData[0].children[0].children,
|
]
|
},
|
|
// value 改变时触发 change 事件
|
bindMultiPickerChange: function (e) {
|
this.multiIndex = e.detail.value
|
|
this.initBrands(this.categoryListData[this.multiIndex[0]].id)
|
},
|
// 某一列的值改变时触发 columnchange 事件
|
bindMultiPickerColumnChange: function (e) {
|
if (!this.multiIndex || !this.multiIndex.length) {
|
this.multiIndex = [0, 0, 0]
|
}
|
|
let column = e.detail.column;
|
let value = e.detail.value;
|
|
let multiIndex = this.multiIndex;
|
multiIndex[column] = value;
|
if (column == 0) {
|
multiIndex[1] = 0;
|
multiIndex[2] = 0;
|
}
|
if (column == 1) {
|
multiIndex[2] = 0;
|
}
|
this.multiIndex = multiIndex;
|
|
let categoryListArray = [];
|
categoryListArray[0] = this.categoryListData;
|
categoryListArray[1] = this.categoryListData[multiIndex[0]].children;
|
if (this.categoryListData[multiIndex[0]].children[multiIndex[1]].children) {
|
categoryListArray[2] = this.categoryListData[multiIndex[0]].children[multiIndex[1]].children;
|
} else {
|
categoryListArray[2] = [];
|
}
|
this.categoryListArray = categoryListArray;
|
|
},
|
radioChange: function (e) {
|
this.form.salesModel = e.detail.value
|
},
|
},
|
onShow() {
|
this.initGoods()
|
this.initCategory()
|
|
},
|
onLoad(option) {
|
uni.showLoading({
|
title: "加载中",
|
});
|
this.routerVal = option;
|
|
if (option.id) {
|
API_GOODS.getStoreGoodsInfo(option.id).then((res) => {
|
const params = res.data.result;
|
params.___path = params.consigneegoodsPath;
|
this.$set(this, "form", params);
|
|
if (this.$store.state.isShowToast) { uni.hideLoading() };
|
});
|
}
|
uni.hideLoading();
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.detailgoods {
|
/deep/ .u-form-item--left {
|
display: flex;
|
align-items: flex-start;
|
}
|
}
|
|
.saveBtn,
|
.selectgoods {
|
height: 70rpx;
|
|
line-height: 70rpx;
|
text-align: center;
|
font-size: 30rpx;
|
background: $aider-light-color;
|
color: #fff;
|
width: 70%;
|
margin: 40rpx auto 0 auto;
|
border-radius: 20rpx;
|
}
|
|
.selectgoods {
|
margin-top: 40rpx;
|
background: #fff;
|
|
color: $aider-light-color;
|
border: 2rpx solid $aider-light-color;
|
}
|
|
.uForm {
|
width: 94%;
|
overflow: hidden;
|
left: 3%;
|
position: relative;
|
top: 2%;
|
background: #fff;
|
border-radius: 20rpx;
|
padding: 0 0 40rpx 0;
|
}
|
|
.add-goods {
|
width: 100%;
|
padding-top: 3%;
|
|
/deep/ .u-form-item {
|
background-color: #fff;
|
padding: 24rpx 30rpx;
|
}
|
|
.u-btn {
|
margin: 30rpx 30rpx 0 30rpx;
|
background-color: $main-color;
|
}
|
|
/deep/.u-checkbox {
|
margin: 30rpx 30rpx 0 30rpx;
|
|
.u-label-class.u-checkbox__label {
|
color: $font-color-light;
|
font-size: $font-sm;
|
}
|
}
|
}
|
|
/deep/ .u-checkbox__label {
|
font-size: 28rpx;
|
}
|
</style>
|
