<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 @change="bindCategoryChange" :value="c_index" :range="categoryArray" :range-key="'name'">
|
<view class="uni-input">{{ categoryArray[c_index].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="">
|
<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="___path">
|
<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="___path">
|
<radio-group name="radio">
|
<label>
|
<radio value="radio1" /><text>零售型</text>
|
</label>
|
<label>
|
<radio value="radio2" /><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 UForm from '@/uview-components/uview-ui/components/u-form/u-form.vue';
|
import UFormItem from '@/uview-components/uview-ui/components/u-form-item/u-form-item.vue';
|
import UInput from '@/uview-components/uview-ui/components/u-input/u-input.vue';
|
import UUpload from '@/uview-components/uview-ui/components/u-upload/u-upload.vue';
|
// import UCheckboxGroup from '@/uview-components/uview-ui/components/u-checkbox-group/u-checkbox-group.vue';
|
// import UCheckbox from '@/uview-components/uview-ui/components/u-checkbox/u-checkbox.vue';
|
import UIcon from '@/uview-components/uview-ui/components/u-icon/u-icon.vue';
|
|
|
import storage from "@/utils/storage.js";
|
import * as API_GOODS from "@/api/goods.js";
|
export default {
|
components: { UForm, UFormItem, UInput, UUpload, UIcon },
|
data() {
|
return {
|
c_index: 0,
|
b_index: 0,
|
u_index: 0,
|
storage,
|
form: {},
|
categoryArray: [],
|
brandsArray: [],
|
unitArray: []
|
}
|
},
|
methods: {
|
//图片上传
|
onUploaded(lists) {
|
let images = [];
|
|
lists.forEach((item) => {
|
images.push(item.response.result);
|
});
|
this.form.images = images;
|
},
|
bindCategoryChange(e) {
|
this.c_index = e.detail.value
|
console.log('this.c_index', this.c_index);
|
|
this.initBrands(this.categoryArray[this.c_index].id)
|
},
|
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;
|
this.categoryArray = params
|
if (params && params.length > 0) {
|
this.initBrands(params[0].id)
|
}
|
});
|
},
|
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
|
});
|
},
|
},
|
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>
|
