1

xuxueyang

2024-07-08 a72add8a584fc017da11b6f6e05a749ad7f2f4f7

 sub_pages/supplier/flower-manage/flower-add.vue

@@ -1,704 +1,712 @@
<template>
   <view class="container-page" style="padding: 0rpx;">
      <view>
         <view class="form-item">
            <view class="label required">商品分类</view>
            <!--             <view class="m-l-a m-r-0 flex " :class="[!dto.category?'desc-gray':'']" @click="()=>{
               // show_select_category=true
               $refs.picker_category.showPicker()
            }">
               <view>{{dto.categoryStr||dto.category || '请选择'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view> -->
            <view class="m-l-a m-r-0 flex " :class="[!dto['category']?'desc-gray':'']">
               <!--    <uni-data-picker ref="picker_category" @change="(e)=>{PickCategory(dto,e)}" placeholder=""
                  @search="updateSearch" :filter="true" :localdata="columns_categorys_picker">
                  {{dto.categoryStr||dto.category || '请选择'}}
               </uni-data-picker> -->
               <tree-filter ref="picker_category" @change="(e)=>{PickCategory(dto,e)}" placeholder=""
                  @search="updateSearch" :filter="true" :localdata="columns_categorys_picker"
                  selectConfirmTitle="">
                  <view class="flex">
                     <view>{{dto.categoryStr||dto.category || '请选择'}}</view>
                     <u-icon class="m-l-a" name="arrow-right"></u-icon>
                  </view>

               </tree-filter>
            </view>
         </view>
         <view class="form-item before-line">
            <view class="label required">商品名称</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.name" placeholder="请选择分类" disabled
                  style="margin-top: 16px;text-align: right;"></input>

            </view>
         </view>
         <view class="form-item before-line">
            <view class="label required">商品单位</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.unit" placeholder="请选择分类" disabled
                  style="margin-top: 16px;text-align: right;"></input>

            </view>
         </view>

         <view class="form-item before-line">
            <view class="label required">商品颜色</view>
            <!--    <view class="m-l-a m-r-0 flex " :class="[!dto.color?'desc-gray':'']" @click="()=>{
               show_select_color=true
            }">
               <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view> -->
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.color" placeholder="请选择分类" disabled
                  style="margin-top: 16px;text-align: right;"></input>
            </view>
         </view>
         <view class="line-gray-big"></view>

         <!-- :style="{'background-image':dto.cover&&`url('${dto.cover}')`||''}" -->
         <view class="form-item bottom-border-no">
            <view class="label required" style="width: 400rpx;">列表封面图（130*120px）</view>
            <view class="m-l-a m-r-0 flex">
               <view class="component-button-upload" @click="uploadIcon('cover')">

               </view>
            </view>
         </view>
         <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx" v-if="dto.cover">
            <view class="m-t-12 m-r-10 ">
               <image class="banner-img" :src="dto.cover" @click.stop="previewImg(dto.cover)">

               </image>
               <view class="t-red text-center" @click.stop="dto.cover=''">删除</view>
            </view>
         </view>

         <view class="form-item before-line bottom-border-no">
            <view class="label required" style="width: 400rpx;">商品轮播图（300*160px）</view>
            <view class="m-l-a m-r-0 flex">
               <!-- :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}" -->
               <view class="component-button-upload" @click="uploadIcon('bannerList')">

               </view>
            </view>
         </view>
         <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx"
            v-if="dto.bannerList&&dto.bannerList.length>0">
            <view class="m-t-12 m-r-10 " v-for="(tBanner,index) of dto.bannerList" :key="index">
               <image class="banner-img" :src="tBanner" @click.stop="previewImg(tBanner)">

               </image>
               <view class="t-red text-center" @click.stop="deleteBanner(index)">删除</view>
            </view>
         </view>
         <view class="line-gray-big"></view>


         <view class="form-item before-line">
            <view class="label required">售价(元)</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.price" placeholder="请输入数字" type="digit"
                  style="margin-top: 16px;text-align: right;"></input>
            </view>
         </view>
         <view class="form-item ">
            <view class="label required">库存</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.stock" placeholder="请输入数字" type="number"
                  style="margin-top: 16px;text-align: right;"></input>
            </view>
         </view>

         <view class="line-gray-big"></view>

         <view class="form-item ">
            <view class="label required">商品参数详情</view>
            <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{
               if(!dto.category){
                  $message.showToast('请先选择分类')
               }else{
                  if(dto.params&&dto.params.length==0){
                     $message.showToast('暂无参数可以设置')
                  }else{
                     $refs.popup_param.open()
                  }
						
               }
            }">
               <view>{{ paramstr || '去设置'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view>

         </view>
         <view class="line-gray-big"></view>
         <view class="form-item before-line">
            <view class="label required">商品等级</view>
            <view class="m-l-a m-r-0 flex " :class="[!dto.level?'desc-gray':'']" @click="()=>{
               show_select_level=true
            }">
               <view>{{dto.levelStr||dto.level || '请选择'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view>

         </view>


         <view class="form-item before-line">
            <view class="label required">商品视频</view>
            <view class="m-l-a m-r-0 flex">
               <!-- :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}" -->
               <view class="component-button-upload m-r-15" @click="uploadIcon('video')">

               </view>

            </view>
         </view>
         <view v-if="dto.video">
            <video :src="dto.video" style="display: block;margin: 0 auto;"></video>
         </view>

         <view style="min-height: 200rpx;">
            &nbsp;
         </view>
         <view class="button-green-1 m-t-20 button-fixed-bottom " @click="submit" v-if="!dto.id">
            提交审核
         </view>
         <view class="button-green-1 m-t-20 button-fixed-bottom before-line" @click="submit" v-if="dto.id">
            修改
         </view>
      </view>
      <!-- 

      <u-picker @confirm="select_category" keyName="name" @cancel="show_select_category=false"
         :show="show_select_category" :columns="columns_categorys"></u-picker> -->

      <u-picker @confirm="select_level" keyName="label" @cancel="show_select_level=false" :show="show_select_level"
         :columns="columns_levels"></u-picker>


      <uni-popup ref="popup_param" type="top">
         <view class="component-popup_input" v-if="dto.params">
            <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">商品参数设置</view>
            <!-- 输入框-->
            <view v-for="(item,i) in dto.params" :key="i" class="m-b-20">
               <view class="title topic-font" style="font-size: 36rpx;font-weight: 600;">{{item.name}}</view>
               <view class="m-t-12">
                  <u-radio-group v-model="item.value" placement="row">
                     <u-radio
                        :customStyle="{'margin-bottom': '16rpx','margin-right': '24rpx','font-size':'28rpx'}"
                        v-for="(each, j) in item.values" :key="j" :label="each" :name="each">
                     </u-radio>
                  </u-radio-group>
               </view>
            </view>

            <!-- 提交按钮 -->
            <view class="button-green" @click="closeParamPop">返回</view>
         </view>
      </uni-popup>
      <!--       <dying318picker :picker-list="columns_categorys" ref="picker_category" @confirm="confirmPickerCategory">
      </dying318picker> -->
   </view>
</template>

<script>
   import environments from '@/environments'
   import dying318picker from '@/components/dying318-picker/Picker.vue'
   import treeFilter from '@/components/tree-filter/tree-filter.vue'


   import {
      mapState
   } from 'vuex'

   export default {

      data() {
         return {
            id: '',
            dto: {
               id: '',
               category: '',
               name: '',
               unit: '',
               color: '',
               cover: '',
               bannerList: [], //str[]
               video: '',
               level: '', //FLOWER_LEVEL
               price: 0.00,
               stock: 0,
               params: [], //id,value
            },
            show_select_category: false,
            show_select_level: false,
            columns_categorys: [],
            columns_categorys_picker: [],
            columns_categorys_dict: {},
            columns_categorys_search: '',
            columns_levels: [],
            //    columns_params: [], //弹窗选择具体的值
            // cancel: {
            //    color: '#999',
            // },
            // confirm: {
            //    color: '#20613D',
            // },
            // column: [
            //     {flex: 1},
            //     {flex: 1},
            //     {flex: 3},
            // ]
         }
      },

      async onLoad(options) {
         //tree
         this.$http.request('get', '/api/flower/category/tree', {}).then(res => {
            var data = res.data
            this.columns_categorys = data || []
            // console.log('columns_categorys', this.columns_categorys)
            //递归mao
            this.mapCategoryTree(this.columns_categorys_picker, this.columns_categorys)
            // console.log('columns_categorys_picker', this.columns_categorys_picker)
            // this.columns_categorys = [data || []]
            // this.columns_categorys[0].unshift({
            //    label: '全部',
            //    value: '',
            //    children: []
            // })

         })

         this.$http.request('get', '/api/code/value', {
            params: {
               type: 'FLOWER_LEVEL'
            }
         }).then(res => {
            var data = res.data
            this.columns_levels = [data || []]
            this.columns_levels[0].unshift({
               label: '全部',
               value: ''
            })

         })
         if (options.id) {
            this.id = options.id
            uni.setNavigationBarTitle({
               title: '商品详情'
            })
            this.getDetail()
         } else {
            if (options.copyId) {
               this.id = options.copyId
               await this.getDetail()
               this.id = ''
               delete this.dto.id
               uni.setNavigationBarTitle({
                  title: '复制商品并新增'
               })
            } else {
               uni.setNavigationBarTitle({
                  title: '商品新增'
               })
            }


         }

      },

      methods: {
         async updateSearch(search) {
            this.columns_categorys_search = search || ''
            this.columns_categorys_picker = []
            this.mapCategoryTree(this.columns_categorys_picker, this.columns_categorys)
            console.log('change updateSearch', search, this.columns_categorys_picker)
            this.$refs.picker_category.selectedClear()
         },
         async PickCategory(item, e) {
            console.log('PickCategory', item, e)
            if (e.detail.value) {
               var currentnode = this.columns_categorys_dict['@' + e.detail.value[e.detail.value.length - 1]
                  .value]
               let tmpe = e
               if (this.dto.category && this.dto.category !== currentnode.id) {
                  this.$message.confirm('修改分类将清空商品参数，确定修改吗').then(async res => {
                     // console.log('currentnode',currentnode,this.columns_categorys_dict,'@'+e.detail.value[e.detail.value.length - 1].value)
                     this.dto.categoryStr = currentnode.name
                     this.dto.category = currentnode.id
                     this.dto.name = currentnode.name
                     this.dto.unit = currentnode.unit
                     this.dto.color = currentnode.color
                     //递归获取category的其他数据，用来做map？
                     this.$message.showLoading()
                     await this.refresh_category()
                     this.$message.hideLoading()
                  }).catch(e1 => {
                     console.log('this.$refs.picker_category', this.$refs.picker_category)
                     this.$refs.picker_category.onchange(tmpe.detail.value)
                  })
               } else {
                  this.dto.categoryStr = currentnode.name
                  this.dto.category = currentnode.id
                  this.dto.name = currentnode.name
                  this.dto.unit = currentnode.unit
                  this.dto.color = currentnode.color
                  //递归获取category的其他数据，用来做map？
                  this.$message.showLoading()
                  await this.refresh_category()
                  this.$message.hideLoading()
               }
            }
         },
         mapCategoryTree(node, arr) {
            var has = true
            if (arr) {
               var hasTrue = false
               if (!this.columns_categorys_search) {
                  hasTrue = true
               }
               for (var item of arr) {
                  has = true
                  if (this.columns_categorys_search) {
                     has = false
                  }
                  var tmp = {
                     ...item,
                     name: item.name,
                     text: item.name,
                     label: item.name,
                     value: item.id,
                     children: undefined
                  }
                  if (item.name == this.columns_categorys_search) {
                     has = true
                     hasTrue = true
                  }
                  this.columns_categorys_dict['@' + item.id] = item
                  if (item.children && item.children.length > 0) {
                     tmp.children = []
                     var childrenhas = this.mapCategoryTree(tmp.children, item.children)
                     if (childrenhas) {
                        has = true
                        hasTrue = true
                     }
                  } else {
                     tmp.children = undefined
                  }

                  if (has) {
                     console.log('has ', tmp, hasTrue, has)
                     node.push(tmp)
                  } else {

                  }
                  if (!has && hasTrue) {
                     //说明是这个节点有的，需要判断是否需要删除
                     if (!tmp.children || tmp.children.length == 0) {

                     } else {
                        console.log('has ', tmp, hasTrue, has)
                        node.push(tmp)
                     }
                  }
                  // if (hasTrue || has) {
                  //    node.push(tmp)

                  // } else {
                  //    console.log('not has ', tmp)
                  // }

               }
            }
            return hasTrue
         },
         async confirmPickerCategory(picker) {
            console.log('confirmPickerCategory', picker)
            var id = picker.value
            var name = picker.label
            if (id !== this.dto.category) {
               if (this.dto.category) {
                  await this.$message.confirm('修改分类将清空商品参数，确定修改吗')
               }
               this.dto.categoryStr = name
               this.dto.category = id
               // name: '',
               // unit: '',
               // color: '',
               //递归获取category的其他数据，用来做map？
               this.$message.showLoading()
               await this.refresh_category()
               this.$message.hideLoading()
            }
         },
         closeParamPop() {
            this.$refs.popup_param.close()
         },

         async refresh_category() {
            // this.columns_params = []
            this.dto.params = []
            //获取分类参数
            if (this.dto.category) {
               const res = await this.$http.request('get', '/api/supplier/flower/params', {
                  params: {
                     categoryId: this.dto.category
                  }
               })
               if (res.code == 0) {
                  // this.columns_params = res.data || []
                  this.dto.params = res.data || []
               }
            }

         },
         select_level(e) {
            this.show_select_level = false
            this.dto.levelStr = e.value[0].label
            this.dto.level = e.value[0].value
         },

         async getDetail() {
            this.$message.showLoading()
            const {
               code,
               data
            } = await this.$http.request('get', "/api/supplier/flower/list/view?id=" + this.id, {})
            if (code == 0) {
               this.dto = {
                  ...data,

               }
               // if (this.dto.applicationDate) {
               //    this.dto.applicationDate = this.$util.toDate(new Date(this.dto.applicationDate))
               // }
               // // console.log('this.dto', this.dto)
               if (!this.dto.bannerList) {
                  this.dto.bannerList = []
               }
               // if (this.dto.category) {
               //    await this.refresh_category()
               // }
            }

            this.$message.hideLoading()

         },
         async submit() {
            // if (!this.dto.applicationType) {
            //    this.$message.showToast('未选择类型')
            //    return
            // }
            // if (!this.dto.applicationTitle) {
            //    this.$message.showToast('未填写申请主题')
            //    return
            // }
            // if (!this.dto.auditPersonId) {
            //    this.$message.showToast('未选择审批人')
            //    return
            // }
            // await this.$message.confirm(`是否确定提交申请${this.auditPersonName?("，审批人为:"+this.auditPersonName):""}`)

            // this.$message.showToast('1')
            // return
            var dto = {
               ...this.dto,
               // applicationDate: this.$util.toDate(new Date()),
               // applicantId: this.currentInfo.id
            }
            this.$message.showLoading()
            const re = await this.$http.request('post', `/api/supplier/flower/list/${this.id?'edit':'new'}`, {
               data: dto
            })
            this.$message.hideLoading()
            if (re.code == 2000 || re.code == 0) {
               this.$message.showToast('操作成功')
               //需要标记加一下
               // this.$store.dispatch('sign_add', 'application');

               this.backpage()
            }
         },
         async deleteBanner(index) {
            await this.$message.confirm('是否确认删除此图片')
            // this.dto.bannerList  = 
            this.dto.bannerList.splice(index, 1)
         },
         uploadIcon(key) {
            console.log('that dto key', key)
            const that = this
            if (key == 'video') {
               uni.chooseVideo({
                  sourceType: ['camera', 'album'],
                  success: function(res) {
                     if (res.tempFilePath) {
                        console.log('res.tempFilePath', res.tempFilePath)
                        that.$message.showLoading()
                        that.$http.upload(res.tempFilePath).then(async res => {
                           console.log('res1', res)
                           var pic = res.data && res.data.length > 0 && res.data[
                                 0]
                              .url || ''
                           that.$message.hideLoading()
                           that.dto[key] = pic || ''

                           that.$forceUpdate()
                           console.log('that dto', that.dto)
                        }).catch(res => {
                           that.$message.hideLoading()
                           console.error(res)
                        })
                     }
                  }
               });
            } else {

               uni.chooseImage({
                  count: 1, // 最多可以选择的图片张数，默认9
                  sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
                  sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
                  success: function({
                     errMsg,
                     tempFiles
                  }) {
                     if (errMsg === 'chooseImage:ok') {
                        // console.log(tempFiles[0])
                        that.$message.showLoading()
                        that.$http.upload(tempFiles[0].path).then(async res => {
                           console.log('res1', res)
                           var pic = res.data && res.data.length > 0 && res.data[
                                 0]
                              .url || ''
                           that.$message.hideLoading()
                           if (key == 'bannerList') {
                              that.dto[key].push(pic)
                           } else {
                              that.dto[key] = pic || ''
                           }

                           that.$forceUpdate()
                        }).catch(res => {
                           that.$message.hideLoading()
                           console.error(res)
                        })
                     }
                  }
               })
            }
         },

      },
      computed: {
         ...mapState(['currentInfo']),
         paramstr() {
            if (this.dto && this.dto.params) {
               var strs = []
               for (var i of this.dto.params) {
                  if (i.value) {
                     strs.push(i.value)
                  }
               }
               return strs.join(',')
            }
            return ''
         }
      },
      components: {
         dying318picker,
         treeFilter
      }
   }
</script>

<style lang="scss" scoped>
   .banner-img {
      width: 96rpx;
      height: 96rpx;
      border-radius: 4rpx;
      border: 2rpx dashed #CECECE;
   }

   .form-item {
      // padding: 40rpx;
      border-bottom: 1px solid #F3F3F3;
      display: flex;
      padding: 20rpx;
      // height: 100px;

      .label {
         width: 300rpx;
         line-height: 60px;

      }

      .flex {
         line-height: 60px;

         .flex1 {
            flex: 1;
            text-align: center;
            color: var(--selfblue)
         }


      }

   }

   .form-item.bottom-border-no {
      border-bottom: none;
   }

   .container-page {
      padding: 40rpx;
      background-color: #FFFFFF;
      // min-height: calc(100vh - 80rpx);
      min-height: 100vh;
   }

   .style {
      width: fit-content;
      margin: 0 auto;
      line-height: 64rpx;
      border-radius: 8rpx;
      padding-left: 20rpx;
      padding-right: 20rpx;
      // padding-top: 5rpx;
      // padding-bottom: 5rpx;
      border: 2rpx solid var(--selfblue);
      background-color: var(--selfbluebg);
      min-width: 100rpx;
   }


   .style-1 {
      border: 1px solid rgb(122, 187, 255);
      border: 1px solid #409EFF;
      color: #409EFF;
      background-color: rgb(240, 247, 255);
   }

   .style-2 {
      border: 1px solid rgb(255, 184, 78);
      border: 1px solid #FE9044;
      color: #FE9044;
      background-color: rgb(255, 247, 235);
   }

   .style-3 {
      border: 1px solid #19be6b;
      color: #19be6b;
      background-color: rgb(231, 244, 238);
   }

   .style-4 {
      border: 1px solid #F56c6c;
      color: #F56c6c;
      background-color: rgb(254, 243, 243);
   }
<template>

   <view class="container-page" style="padding: 0rpx;">

      <view>

         <view class="form-item">

            <view class="label required">商品分类</view>

            <!--             <view class="m-l-a m-r-0 flex " :class="[!dto.category?'desc-gray':'']" @click="()=>{

               // show_select_category=true

               $refs.picker_category.showPicker()

            }">

               <view>{{dto.categoryStr||dto.category || '请选择'}}</view>

               <u-icon class="m-l-a" name="arrow-right"></u-icon>

            </view> -->

            <view class="m-l-a m-r-0 flex " :class="[!dto['category']?'desc-gray':'']">

               <!--    <uni-data-picker ref="picker_category" @change="(e)=>{PickCategory(dto,e)}" placeholder=""

                  @search="updateSearch" :filter="true" :localdata="columns_categorys_picker">

                  {{dto.categoryStr||dto.category || '请选择'}}

               </uni-data-picker> -->

               <tree-filter ref="picker_category" @change="(e)=>{PickCategory(dto,e)}" placeholder=""

                  @search="updateSearch" :filter="true" :localdata="columns_categorys_picker"

                  selectConfirmTitle="">

                  <view class="flex">

                     <view>{{dto.categoryStr||dto.category || '请选择'}}</view>

                     <u-icon class="m-l-a" name="arrow-right"></u-icon>

                  </view>



               </tree-filter>

            </view>

         </view>

         <view class="form-item before-line">

            <view class="label required">商品名称</view>

            <view class="m-l-a m-r-0 flex">

               <input v-model="dto.name" placeholder="请选择分类" disabled

                  style="margin-top: 16px;text-align: right;"></input>



            </view>

         </view>

         <view class="form-item before-line">

            <view class="label required">商品单位</view>

            <view class="m-l-a m-r-0 flex">

               <input v-model="dto.unit" placeholder="请选择分类" disabled

                  style="margin-top: 16px;text-align: right;"></input>



            </view>

         </view>



         <view class="form-item before-line">

            <view class="label required">商品颜色</view>

            <!--    <view class="m-l-a m-r-0 flex " :class="[!dto.color?'desc-gray':'']" @click="()=>{

               show_select_color=true

            }">

               <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>

               <u-icon class="m-l-a" name="arrow-right"></u-icon>

            </view> -->

            <view class="m-l-a m-r-0 flex">

               <input v-model="dto.color" placeholder="请选择分类" disabled

                  style="margin-top: 16px;text-align: right;"></input>

            </view>

         </view>

         <view class="line-gray-big"></view>



         <!-- :style="{'background-image':dto.cover&&`url('${dto.cover}')`||''}" -->

         <view class="form-item bottom-border-no">

            <view class="label required" style="width: 400rpx;">列表封面图（130*120px）</view>

            <view class="m-l-a m-r-0 flex">

               <view class="component-button-upload" @click="uploadIcon('cover')">



               </view>

            </view>

         </view>

         <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx" v-if="dto.cover">

            <view class="m-t-12 m-r-10 ">

               <image class="banner-img" :src="dto.cover" @click.stop="previewImg(dto.cover)">



               </image>

               <view class="t-red text-center" @click.stop="dto.cover=''">删除</view>

            </view>

         </view>



         <view class="form-item before-line bottom-border-no">

            <view class="label required" style="width: 400rpx;">商品轮播图（300*160px）</view>

            <view class="m-l-a m-r-0 flex">

               <!-- :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}" -->

               <view class="component-button-upload" @click="uploadIcon('bannerList')">



               </view>

            </view>

         </view>

         <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx"

            v-if="dto.bannerList&&dto.bannerList.length>0">

            <view class="m-t-12 m-r-10 " v-for="(tBanner,index) of dto.bannerList" :key="index">

               <image class="banner-img" :src="tBanner" @click.stop="previewImg(tBanner)">



               </image>

               <view class="t-red text-center" @click.stop="deleteBanner(index)">删除</view>

            </view>

         </view>

         <view class="line-gray-big"></view>





         <view class="form-item before-line">

            <view class="label required">售价(元)</view>

            <view class="m-l-a m-r-0 flex">

               <input v-model="dto.price" placeholder="请输入数字" type="digit"

                  style="margin-top: 16px;text-align: right;"></input>

            </view>

         </view>

         <view class="form-item ">

            <view class="label required">库存</view>

            <view class="m-l-a m-r-0 flex">

               <input v-model="dto.stock" placeholder="请输入数字" type="number"

                  style="margin-top: 16px;text-align: right;"></input>

            </view>

         </view>



         <view class="line-gray-big"></view>



         <view class="form-item ">

            <view class="label required">商品参数详情</view>

            <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{

               if(!dto.category){

                  $message.showToast('请先选择分类')

               }else{

                  if(dto.params&&dto.params.length==0){

                     $message.showToast('暂无参数可以设置')

                  }else{

                     $refs.popup_param.open()

                  }

						
               }

            }">

               <view>{{ paramstr || '去设置'}}</view>

               <u-icon class="m-l-a" name="arrow-right"></u-icon>

            </view>



         </view>

         <view class="line-gray-big"></view>

         <view class="form-item before-line">

            <view class="label required">商品等级</view>

            <view class="m-l-a m-r-0 flex " :class="[!dto.level?'desc-gray':'']" @click="()=>{

               show_select_level=true

            }">

               <view>{{dto.levelStr||dto.level || '请选择'}}</view>

               <u-icon class="m-l-a" name="arrow-right"></u-icon>

            </view>



         </view>





         <view class="form-item before-line">

            <view class="label required">商品视频</view>

            <view class="m-l-a m-r-0 flex">

               <!-- :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}" -->

               <view class="component-button-upload m-r-15" @click="uploadIcon('video')">



               </view>



            </view>

         </view>

         <view v-if="dto.video">

            <video :src="dto.video" style="display: block;margin: 0 auto;"></video>

         </view>



         <view style="min-height: 200rpx;">

            &nbsp;

         </view>

         <view class="button-green-1 m-t-20 button-fixed-bottom " @click="submit" v-if="!dto.id">

            提交审核

         </view>

         <view class="button-green-1 m-t-20 button-fixed-bottom before-line" @click="submit" v-if="dto.id">

            修改

         </view>

      </view>

      <!-- 


      <u-picker @confirm="select_category" keyName="name" @cancel="show_select_category=false"

         :show="show_select_category" :columns="columns_categorys"></u-picker> -->



      <u-picker @confirm="select_level" keyName="label" @cancel="show_select_level=false" :show="show_select_level"

         :columns="columns_levels"></u-picker>





      <uni-popup ref="popup_param" type="top">

         <view class="component-popup_input" v-if="dto.params">

            <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">商品参数设置</view>

            <!-- 输入框-->

            <view v-for="(item,i) in dto.params" :key="i" class="m-b-20">

               <view class="title topic-font" style="font-size: 36rpx;font-weight: 600;">{{item.name}}</view>

               <view class="m-t-12">

                  <u-radio-group v-model="item.value" placement="row">

                     <u-radio

                        :customStyle="{'margin-bottom': '16rpx','margin-right': '24rpx','font-size':'28rpx'}"

                        v-for="(each, j) in item.values" :key="j" :label="each" :name="each">

                     </u-radio>

                  </u-radio-group>

               </view>

            </view>



            <!-- 提交按钮 -->

            <view class="button-green" @click="closeParamPop">返回</view>

         </view>

      </uni-popup>

      <!--       <dying318picker :picker-list="columns_categorys" ref="picker_category" @confirm="confirmPickerCategory">

      </dying318picker> -->

   </view>

</template>



<script>

   import environments from '@/environments'

   import dying318picker from '@/components/dying318-picker/Picker.vue'

   import treeFilter from '@/components/tree-filter/tree-filter.vue'





   import {

      mapState

   } from 'vuex'



   export default {



      data() {

         return {

            id: '',

            dto: {

               id: '',

               category: '',

               name: '',

               unit: '',

               color: '',

               cover: '',

               bannerList: [], //str[]

               video: '',

               level: '', //FLOWER_LEVEL

               price: 0.00,

               stock: 0,

               params: [], //id,value

            },

            show_select_category: false,

            show_select_level: false,

            columns_categorys: [],

            columns_categorys_picker: [],

            columns_categorys_dict: {},

            columns_categorys_search: '',

            columns_levels: [],

            //    columns_params: [], //弹窗选择具体的值

            // cancel: {

            //    color: '#999',

            // },

            // confirm: {

            //    color: '#20613D',

            // },

            // column: [

            //     {flex: 1},

            //     {flex: 1},

            //     {flex: 3},

            // ]

         }

      },



      async onLoad(options) {

         //tree

         this.$http.request('get', '/api/flower/category/tree', {}).then(res => {

            var data = res.data

            this.columns_categorys = data || []

            // console.log('columns_categorys', this.columns_categorys)

            //递归mao

            this.mapCategoryTree(this.columns_categorys_picker, this.columns_categorys)

            // console.log('columns_categorys_picker', this.columns_categorys_picker)

            // this.columns_categorys = [data || []]

            // this.columns_categorys[0].unshift({

            //    label: '全部',

            //    value: '',

            //    children: []

            // })



         })



         this.$http.request('get', '/api/code/value', {

            params: {

               type: 'FLOWER_LEVEL'

            }

         }).then(res => {

            var data = res.data

            this.columns_levels = [data || []]

            this.columns_levels[0].unshift({

               label: '全部',

               value: ''

            })



         })

         if (options.id) {

            this.id = options.id

            uni.setNavigationBarTitle({

               title: '商品详情'

            })

            this.getDetail()

         } else {

            if (options.copyId) {

               this.id = options.copyId

               await this.getDetail()

               this.id = ''

               delete this.dto.id

               uni.setNavigationBarTitle({

                  title: '复制商品并新增'

               })

            } else {

               uni.setNavigationBarTitle({

                  title: '商品新增'

               })

            }





         }



      },



      methods: {

         async updateSearch(search) {

            this.columns_categorys_search = search || ''

            this.columns_categorys_picker = []

            this.mapCategoryTree(this.columns_categorys_picker, this.columns_categorys)

            console.log('change updateSearch', search, this.columns_categorys_picker)

            this.$refs.picker_category.selectedClear()

         },

         async PickCategory(item, e) {

            console.log('PickCategory', item, e)

            if (e.detail.value) {

               var currentnode = this.columns_categorys_dict['@' + e.detail.value[e.detail.value.length - 1]

                  .value]

               let tmpe = e

               if (this.dto.category && this.dto.category !== currentnode.id) {

                  this.$message.confirm('修改分类将清空商品参数，确定修改吗').then(async res => {

                     // console.log('currentnode',currentnode,this.columns_categorys_dict,'@'+e.detail.value[e.detail.value.length - 1].value)

                     this.dto.categoryStr = currentnode.name

                     this.dto.category = currentnode.id

                     this.dto.name = currentnode.name

                     this.dto.unit = currentnode.unit

                     this.dto.color = currentnode.color

                     //递归获取category的其他数据，用来做map？

                     this.$message.showLoading()

                     await this.refresh_category()

                     this.$message.hideLoading()

                  }).catch(e1 => {

                     console.log('this.$refs.picker_category', this.$refs.picker_category)

                     this.$refs.picker_category.onchange(tmpe.detail.value)

                  })

               } else {

                  this.dto.categoryStr = currentnode.name

                  this.dto.category = currentnode.id

                  this.dto.name = currentnode.name

                  this.dto.unit = currentnode.unit

                  this.dto.color = currentnode.color

                  //递归获取category的其他数据，用来做map？

                  this.$message.showLoading()

                  await this.refresh_category()

                  this.$message.hideLoading()

               }

            }

         },

         mapCategoryTree(node, arr) {

            var has = true

            if (arr) {

               var hasTrue = false

               if (!this.columns_categorys_search) {

                  hasTrue = true

               }

               for (var item of arr) {

                  has = true

                  if (this.columns_categorys_search) {

                     has = false

                  }

                  var tmp = {

                     ...item,

                     name: item.name,

                     text: item.name,

                     label: item.name,

                     value: item.id,

                     children: undefined

                  }

                  if (this.columns_categorys_search) {

                     if (this.columns_categorys_search.indexOf(item.name) >= 0 ||

                        item.name.indexOf(this.columns_categorys_search) >= 0

                     ) {

                        has = true

                        hasTrue = true

                     }

                  }

                  // if (item.name == this.columns_categorys_search) {

                  //    has = true

                  //    hasTrue = true

                  // }

                  this.columns_categorys_dict['@' + item.id] = item

                  if (item.children && item.children.length > 0) {

                     tmp.children = []

                     var childrenhas = this.mapCategoryTree(tmp.children, item.children)

                     if (childrenhas) {

                        has = true

                        hasTrue = true

                     }

                  } else {

                     tmp.children = undefined

                  }



                  if (has) {

                     console.log('has ', tmp, hasTrue, has)

                     node.push(tmp)

                  } else {



                  }

                  if (!has && hasTrue) {

                     //说明是这个节点有的，需要判断是否需要删除

                     if (!tmp.children || tmp.children.length == 0) {



                     } else {

                        console.log('has ', tmp, hasTrue, has)

                        node.push(tmp)

                     }

                  }

                  // if (hasTrue || has) {

                  //    node.push(tmp)



                  // } else {

                  //    console.log('not has ', tmp)

                  // }



               }

            }

            return hasTrue

         },

         async confirmPickerCategory(picker) {

            console.log('confirmPickerCategory', picker)

            var id = picker.value

            var name = picker.label

            if (id !== this.dto.category) {

               if (this.dto.category) {

                  await this.$message.confirm('修改分类将清空商品参数，确定修改吗')

               }

               this.dto.categoryStr = name

               this.dto.category = id

               // name: '',

               // unit: '',

               // color: '',

               //递归获取category的其他数据，用来做map？

               this.$message.showLoading()

               await this.refresh_category()

               this.$message.hideLoading()

            }

         },

         closeParamPop() {

            this.$refs.popup_param.close()

         },



         async refresh_category() {

            // this.columns_params = []

            this.dto.params = []

            //获取分类参数

            if (this.dto.category) {

               const res = await this.$http.request('get', '/api/supplier/flower/params', {

                  params: {

                     categoryId: this.dto.category

                  }

               })

               if (res.code == 0) {

                  // this.columns_params = res.data || []

                  this.dto.params = res.data || []

               }

            }



         },

         select_level(e) {

            this.show_select_level = false

            this.dto.levelStr = e.value[0].label

            this.dto.level = e.value[0].value

         },



         async getDetail() {

            this.$message.showLoading()

            const {

               code,

               data

            } = await this.$http.request('get', "/api/supplier/flower/list/view?id=" + this.id, {})

            if (code == 0) {

               this.dto = {

                  ...data,



               }

               // if (this.dto.applicationDate) {

               //    this.dto.applicationDate = this.$util.toDate(new Date(this.dto.applicationDate))

               // }

               // // console.log('this.dto', this.dto)

               if (!this.dto.bannerList) {

                  this.dto.bannerList = []

               }

               // if (this.dto.category) {

               //    await this.refresh_category()

               // }

            }



            this.$message.hideLoading()



         },

         async submit() {

            // if (!this.dto.applicationType) {

            //    this.$message.showToast('未选择类型')

            //    return

            // }

            // if (!this.dto.applicationTitle) {

            //    this.$message.showToast('未填写申请主题')

            //    return

            // }

            // if (!this.dto.auditPersonId) {

            //    this.$message.showToast('未选择审批人')

            //    return

            // }

            // await this.$message.confirm(`是否确定提交申请${this.auditPersonName?("，审批人为:"+this.auditPersonName):""}`)



            // this.$message.showToast('1')

            // return

            var dto = {

               ...this.dto,

               // applicationDate: this.$util.toDate(new Date()),

               // applicantId: this.currentInfo.id

            }

            this.$message.showLoading()

            const re = await this.$http.request('post', `/api/supplier/flower/list/${this.id?'edit':'new'}`, {

               data: dto

            })

            this.$message.hideLoading()

            if (re.code == 2000 || re.code == 0) {

               this.$message.showToast('操作成功')

               //需要标记加一下

               // this.$store.dispatch('sign_add', 'application');



               this.backpage()

            }

         },

         async deleteBanner(index) {

            await this.$message.confirm('是否确认删除此图片')

            // this.dto.bannerList  = 
            this.dto.bannerList.splice(index, 1)

         },

         uploadIcon(key) {

            console.log('that dto key', key)

            const that = this

            if (key == 'video') {

               uni.chooseVideo({

                  sourceType: ['camera', 'album'],

                  success: function(res) {

                     if (res.tempFilePath) {

                        console.log('res.tempFilePath', res.tempFilePath)

                        that.$message.showLoading()

                        that.$http.upload(res.tempFilePath).then(async res => {

                           console.log('res1', res)

                           var pic = res.data && res.data.length > 0 && res.data[

                                 0]

                              .url || ''

                           that.$message.hideLoading()

                           that.dto[key] = pic || ''



                           that.$forceUpdate()

                           console.log('that dto', that.dto)

                        }).catch(res => {

                           that.$message.hideLoading()

                           console.error(res)

                        })

                     }

                  }

               });

            } else {



               uni.chooseImage({

                  count: 1, // 最多可以选择的图片张数，默认9

                  sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有

                  sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项

                  success: function({

                     errMsg,

                     tempFiles

                  }) {

                     if (errMsg === 'chooseImage:ok') {

                        // console.log(tempFiles[0])

                        that.$message.showLoading()

                        that.$http.upload(tempFiles[0].path).then(async res => {

                           console.log('res1', res)

                           var pic = res.data && res.data.length > 0 && res.data[

                                 0]

                              .url || ''

                           that.$message.hideLoading()

                           if (key == 'bannerList') {

                              that.dto[key].push(pic)

                           } else {

                              that.dto[key] = pic || ''

                           }



                           that.$forceUpdate()

                        }).catch(res => {

                           that.$message.hideLoading()

                           console.error(res)

                        })

                     }

                  }

               })

            }

         },



      },

      computed: {

         ...mapState(['currentInfo']),

         paramstr() {

            if (this.dto && this.dto.params) {

               var strs = []

               for (var i of this.dto.params) {

                  if (i.value) {

                     strs.push(i.value)

                  }

               }

               return strs.join(',')

            }

            return ''

         }

      },

      components: {

         dying318picker,

         treeFilter

      }

   }

</script>



<style lang="scss" scoped>

   .banner-img {

      width: 96rpx;

      height: 96rpx;

      border-radius: 4rpx;

      border: 2rpx dashed #CECECE;

   }



   .form-item {

      // padding: 40rpx;

      border-bottom: 1px solid #F3F3F3;

      display: flex;

      padding: 20rpx;

      // height: 100px;



      .label {

         width: 300rpx;

         line-height: 60px;



      }



      .flex {

         line-height: 60px;



         .flex1 {

            flex: 1;

            text-align: center;

            color: var(--selfblue)

         }





      }



   }



   .form-item.bottom-border-no {

      border-bottom: none;

   }



   .container-page {

      padding: 40rpx;

      background-color: #FFFFFF;

      // min-height: calc(100vh - 80rpx);

      min-height: 100vh;

   }



   .style {

      width: fit-content;

      margin: 0 auto;

      line-height: 64rpx;

      border-radius: 8rpx;

      padding-left: 20rpx;

      padding-right: 20rpx;

      // padding-top: 5rpx;

      // padding-bottom: 5rpx;

      border: 2rpx solid var(--selfblue);

      background-color: var(--selfbluebg);

      min-width: 100rpx;

   }





   .style-1 {

      border: 1px solid rgb(122, 187, 255);

      border: 1px solid #409EFF;

      color: #409EFF;

      background-color: rgb(240, 247, 255);

   }



   .style-2 {

      border: 1px solid rgb(255, 184, 78);

      border: 1px solid #FE9044;

      color: #FE9044;

      background-color: rgb(255, 247, 235);

   }



   .style-3 {

      border: 1px solid #19be6b;

      color: #19be6b;

      background-color: rgb(231, 244, 238);

   }



   .style-4 {

      border: 1px solid #F56c6c;

      color: #F56c6c;

      background-color: rgb(254, 243, 243);

   }

</style>