update 商品管理和花农的

xuxy

2024-06-25 d1bb68d9f9054bbf87cd84956d3240c71d8e370c

 pages/farmer/flower-manage/flower-add.vue

@@ -1,12 +1,10 @@
<template>
   <view class="container-page">
   <view class="container-page" style="padding: 0rpx;">
      <view>
         <view class="form-item">
            <view class="label required">商品分类</view>
            <view class="label required">商品分类todo</view>
            <view class="m-l-a m-r-0 flex " :class="[!dto.category?'desc-gray':'']" @click="()=>{
               if(!id){
                  show_select_category=true
               }
               show_select_category=true
            }">
               <view>{{dto.categoryStr||dto.category || '请选择'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
@@ -14,59 +12,75 @@

         </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="请输入商品名称" 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.applicationTitle" placeholder="请输入店铺名称"
                  style="margin-top: 16px;text-align: right;"></input>
               <input v-model="dto.unit" placeholder="请输入商品单位" 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.applicationType?'desc-gray':'']" @click="()=>{
               if(!id){
                  show_select_type=true
               }
            <!--    <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="请输入商品颜色"
                  style="margin-top: 16px;text-align: right;"></input>
            </view>

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

         <view class="form-item">
            <view class="label required">列表封面图（130*120px）</view>
            <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('icon')"
                  :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}">
               <view class="component-button-upload" @click="uploadIcon('cover')"
                  :style="{'background-image':dto.icon&&`url('${dto.cover}')`||''}">

               </view>
            </view>
         </view>
         <view class="form-item before-line">
            <view class="label required">商品轮播图（300*160px）</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">
               <view class="component-button-upload" @click="uploadIcon('icon')"
                  :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}">
               <!-- :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="label required">售价(元)</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.applicationTitle" placeholder="请输入数字" type="digit"
               <input v-model="dto.price" placeholder="请输入数字" type="digit"
                  style="margin-top: 16px;text-align: right;"></input>
            </view>
         </view>
         <view class="form-item before-line">
         <view class="form-item ">
            <view class="label required">库存</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.applicationTitle" placeholder="请输入数字" type="number"
               <input v-model="dto.stock" placeholder="请输入数字" type="number"
                  style="margin-top: 16px;text-align: right;"></input>
            </view>
         </view>
@@ -76,11 +90,18 @@
         <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(!id){
                  show_select_type=true
               if(!dto.category){
                  $message.showToast('请先选择分类')
               }else{
                  if(dto.params&&dto.params.length==0){
                     $message.showToast('暂无参数可以设置')
                  }else{
                     $refs.popup_param.open()
                  }
						
               }
            }">
               <view>{{dto.applicationTypeStr||dto.applicationType || '去设置'}}</view>
               <view>{{ '去设置'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view>

@@ -88,12 +109,10 @@
         <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.applicationType?'desc-gray':'']" @click="()=>{
               if(!id){
                  show_select_type=true
               }
            <view class="m-l-a m-r-0 flex " :class="[!dto.level?'desc-gray':'']" @click="()=>{
               show_select_level=true
            }">
               <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>
               <view>{{dto.levelStr||dto.level || '请选择'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view>

@@ -103,16 +122,21 @@
         <view class="form-item before-line">
            <view class="label required">商品视频</view>
            <view class="m-l-a m-r-0 flex">
               <view class="component-button-upload m-r-15" @click="uploadIcon('icon')"
                  :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}">
               <!-- :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 class="button-green-1 m-t-20 button-fixed-bottom before-line" @click="submit" v-if="!dto.id">
         <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">
@@ -121,12 +145,33 @@
      </view>


      <u-picker @confirm="select_category" keyName="label" @cancel="show_select_category=false" :show="show_select_category"
         :columns="columns_types"></u-picker>
      <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_user" keyName="label" @cancel="show_select_user=false" :show="show_select_user"
         :columns="userListCols"></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>

   </view>
</template>
@@ -158,15 +203,18 @@
               params: [], //id,value
            },
            show_select_category: false,
            show_select_user: false,
            show_select_level: false,
            columns_categorys: [],
            columns_levels:[],

            columns_levels: [],
            //    columns_params: [], //弹窗选择具体的值
         }
      },
      async onLoad(options) {
         if (options.id) {
            this.id = options.id
            uni.setNavigationBarTitle({
               title: '商品详情'
            })
            this.getDetail()
         } else {
            if (options.copyId) {
@@ -174,25 +222,28 @@
               await this.getDetail()
               this.id = ''
               delete this.dto.id
               uni.setNavigationBarTitle({
                  title: '复制商品并新增'
               })
            } else {
               uni.setNavigationBarTitle({
                  title: '商品新增'
               })
            }
				

            //tree
            this.$http.request('get', '/api/flower/category/tree', {
               params: {
                  typeCode: 'FLOWER_LEVEL'
               }
            }).then(res => {
            this.$http.request('get', '/api/flower/category/tree', {}).then(res => {
               var data = res.data
               this.columns_categorys = [data || []]
               this.columns_categorys[0].unshift({
                  label: '全部',
                  value: '',
                  children:[]
                  children: []
               })

            })
				
            this.$http.request('get', '/api/dict/value', {

            this.$http.request('get', '/api/code/value', {
               params: {
                  typeCode: 'FLOWER_LEVEL'
               }
@@ -210,17 +261,48 @@
      },

      methods: {


         select_category(e) {
            this.show_select_category = false
            this.dto.categoryStr = e.value[0].label
            this.dto.category = e.value[0].value
         closeParamPop() {
            this.$refs.popup_param.close()
         },
         select_user(e) {
            this.show_select_user = false
            this.dto.auditPersonStr = e.value[0].label
            this.dto.auditPersonId = e.value[0].value

         async select_category(e) {
            if (e.value[0].id !== this.dto.category) {
               if (this.dto.category) {
                  await this.$message.confirm('修改分类将清空商品参数，确定修改吗')
               }
               console.log('select_category', e)
               this.show_select_category = false
               this.dto.categoryStr = e.value[0].name
               this.dto.category = e.value[0].id
               this.$message.showLoading()
               await this.refresh_category()
               this.$message.hideLoading()
            } else {

            }

         },
         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() {
@@ -238,7 +320,12 @@
               //    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()
@@ -279,34 +366,72 @@
               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
            uni.chooseImage({
               count: 1, // 最多可以选择的图片张数，默认9
               sizeType: ['original', '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 => {
                        var pic = res.data && res.data.length > 0 && res.data[
                              0]
                           .url || ''
                        that.$message.hideLoading()
                        that.dto[key] = pic || ''
                        that.$forceUpdate()
                     }).catch(res => {
                        that.$message.hideLoading()
            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)
                        })
                     }
                  }
               })
            }
         },

      },
@@ -320,10 +445,18 @@
</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 {
@@ -343,6 +476,7 @@


      }

   }

   .form-item.bottom-border-no {