|
|
@@ -0,0 +1,261 @@
|
|
|
+<template>
|
|
|
+ <view class="app-content">
|
|
|
+ <form @submit="formSubmit">
|
|
|
+ <view class="module-com input-line-wrap">
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">名称</view>
|
|
|
+ <input v-model="form.name" placeholder-class="phcolor" class="tui-input" name="name" placeholder="请填写名称" maxlength="50" type="text" />
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :arrow="true">
|
|
|
+ <view class="tui-title">分类</view>
|
|
|
+ <picker mode="selector" :value="form.catId" :range="plantClassData" range-key="categoryName" @change="changePlantClassFn" class="tui-input" >
|
|
|
+ <input v-model="form.catId" name="catId" type="text" hidden />
|
|
|
+ <view v-if="form.catId" style="height:45upx;" >{{ categorySelectedData.categoryName }}</view>
|
|
|
+ <view class="tui-placeholder" style="height:45upx;" v-else>请选择</view>
|
|
|
+ </picker>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">数量</view>
|
|
|
+ <input v-model="form.num" placeholder-class="phcolor" class="tui-input" name="num" @focus="form.num=''" placeholder="请填写数量" maxlength="50" type="number" />
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">进货单价</view>
|
|
|
+ <input v-model="form.cgPrice" placeholder-class="phcolor" class="tui-input" name="cgPrice" @focus="form.cgPrice=''" placeholder="请填写进货单价" maxlength="50" type="digit" />
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">运费</view>
|
|
|
+ <input v-model="form.sendCost" placeholder-class="phcolor" class="tui-input" name="sendCost" @focus="form.sendCost=''" placeholder="请填写运费,没有留空" maxlength="50" type="digit" />
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">销售单价</view>
|
|
|
+ <input v-model="form.salePrice" placeholder-class="phcolor" class="tui-input" name="salePrice" @focus="form.salePrice=''" placeholder="请填写销售单价" maxlength="50" type="digit" />
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">上架状态</view>
|
|
|
+ <view class="switch_bx">
|
|
|
+ <switch :checked="form.status == 2 ? false : true" @change="statusChange" style="transform: scale(0.8,0.8)" />
|
|
|
+ <text v-if="form.status == 1">上架</text>
|
|
|
+ <text v-else>下架</text>
|
|
|
+ </view>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">使用状态</view>
|
|
|
+ <view class="switch_bx">
|
|
|
+ <switch :checked="form.delStatus == 0 ? true : false" @change="delStatusChange" style="transform: scale(0.8,0.8)" />
|
|
|
+ <text v-if="form.delStatus == 0">启用</text>
|
|
|
+ <text v-else>停用</text>
|
|
|
+ </view>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="module-com input-line-wrap goods-wrap">
|
|
|
+ <view class="module-tit">
|
|
|
+ <span>图片</span>
|
|
|
+ <span class="app-color-3">(建议比例 1:1)</span>
|
|
|
+ </view>
|
|
|
+ <view class="module-det">
|
|
|
+ <htz-image-upload :max="1" :compress="true" v-model="currentImgData" :headers="headers"
|
|
|
+ @uploadSuccess="imgUploadSuccess" @imgDelete="imgDeleteFn" :action="getLoginInfo.imgUploadApi">
|
|
|
+ </htz-image-upload>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="app-footer">
|
|
|
+ <button class="admin-button-com big default" @click="goBack()">取消</button>
|
|
|
+ <button class="admin-button-com big blue" formType="submit">提交</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </form>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import TuiListCell from "@/components/plugin/list-cell";
|
|
|
+const form = require("@/utils/formValidation.js");
|
|
|
+import { getClass } from "@/api/category";
|
|
|
+import { cgPlant } from "@/api/goods/index";
|
|
|
+import { mapGetters } from "vuex"
|
|
|
+//图片上传插件来源:https://ext.dcloud.net.cn/plugin?id=2922 已改造,不能再升级 shish 20211228
|
|
|
+import htzImageUpload from './components/htz-image-upload/htz-image-upload.vue'
|
|
|
+export default {
|
|
|
+ name: "cgNewPlant",
|
|
|
+ components: {
|
|
|
+ TuiListCell,
|
|
|
+ htzImageUpload
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentImgData: [],
|
|
|
+ form: {
|
|
|
+ name:"",
|
|
|
+ catId:'',
|
|
|
+ cgPrice:'',
|
|
|
+ shopImg:[],
|
|
|
+ status:1,
|
|
|
+ delStatus:0,
|
|
|
+ salePrice:'',
|
|
|
+ sendCost:'',
|
|
|
+ num:''
|
|
|
+ },
|
|
|
+ categorySelectedData:{},
|
|
|
+ plantClassData:[],
|
|
|
+ headers:{token:''}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ ...mapGetters(["getLoginInfo","getDictionariesInfo"]),
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ const token = uni.getStorageSync('token')
|
|
|
+ this.headers.token = token
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ statusChange(e){
|
|
|
+ this.form.status = e.detail.value ? 1 : 2;
|
|
|
+ },
|
|
|
+ delStatusChange(e){
|
|
|
+ this.form.delStatus = e.detail.value ? 0 : 1;
|
|
|
+ },
|
|
|
+ goBack(){
|
|
|
+ uni.navigateBack({delta:1})
|
|
|
+ },
|
|
|
+ changePlantClassFn(e) {
|
|
|
+ this.categorySelectedData = this.plantClassData[e.detail.value];
|
|
|
+ this.form.catId = this.categorySelectedData.id;
|
|
|
+ },
|
|
|
+ imgUploadSuccess(res) {
|
|
|
+ var imgReturn = JSON.parse(res.data)
|
|
|
+ if(imgReturn.code == 1){
|
|
|
+ this.currentImgData.push(imgReturn.data.smallUrl)
|
|
|
+ this.form.shopImg.push(imgReturn.data.shortUrl)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ imgDeleteFn(res){
|
|
|
+ const index = res.index
|
|
|
+ this.form.shopImg.splice(index,1)
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.getPlantCategory()
|
|
|
+ },
|
|
|
+ async getPlantCategory() {
|
|
|
+ await getClass().then(res => {
|
|
|
+ if (this.$util.isEmpty(res.data)){
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.plantClassData = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ confirmFn() {
|
|
|
+ if (this.$util.isEmpty(this.form.shopImg)) {
|
|
|
+ this.$msg("请上传图片")
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(this.form.cgPrice) == false){
|
|
|
+ uni.showToast({title:"请填写进货单价哦",icon:"none"})
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(this.form.salePrice) == false){
|
|
|
+ uni.showToast({title:"请填写销售单价哦",icon:"none"})
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let form = JSON.parse(JSON.stringify(this.form))
|
|
|
+ cgPlant({...form}).then(res => {
|
|
|
+ if(res.code == 1){
|
|
|
+ this.pageTo({url: '/admin/goodsManage/cgNewPlantResult',type:2})
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ formSubmit(e) {
|
|
|
+ let rules = [
|
|
|
+ {
|
|
|
+ name: "name",
|
|
|
+ rule: ["required"],
|
|
|
+ msg: ["请填写名称"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "catId",
|
|
|
+ rule: ["required"],
|
|
|
+ msg: ["请选择分类"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "num",
|
|
|
+ rule: ["required"],
|
|
|
+ msg: ["请选择数量"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "cgPrice",
|
|
|
+ rule: ["required"],
|
|
|
+ msg: ["请填写进货单价"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "salePrice",
|
|
|
+ rule: ["required"],
|
|
|
+ msg: ["请填写销售单价"]
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ let formData = e.detail.value;
|
|
|
+ let checkRes = form.validation(formData, rules);
|
|
|
+ if (!checkRes) {
|
|
|
+ this.confirmFn()
|
|
|
+ } else {
|
|
|
+ this.$msg(checkRes);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-content {
|
|
|
+ min-height: calc(100vh - 100upx);
|
|
|
+ padding-bottom: 150upx;
|
|
|
+}
|
|
|
+.module-com {
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ background-color: #fff;
|
|
|
+ color: $fontColor2;
|
|
|
+ .module-tit {
|
|
|
+ padding: 20upx 30upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ .module-det {
|
|
|
+ padding: 0 30upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.category-wrap {
|
|
|
+ align-items: flex-start;
|
|
|
+ padding-bottom: 0 !important;
|
|
|
+ .tui-input {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .admin-button-com {
|
|
|
+ margin-right: 20upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.summary-wrap {
|
|
|
+ .goods-summary {
|
|
|
+ height: 400upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.app-footer {
|
|
|
+ justify-content: space-evenly;
|
|
|
+ z-index: 9999;
|
|
|
+ .admin-button-com {
|
|
|
+ width: 46%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|