jq_miniApp/subPackWork/scenicSpot/attractionsEditor.vue

<template>
  <view class="v-page">
    <view class="v-card contain" style="padding-bottom: 120rpx;">
      <evan-form ref="form"  class="v-form" :hide-required-asterisk="hideRequiredAsterisk" :model="info">
        <view class="v-card-item">
          <view class="v-card-box">
            <common-title :title="'基本信息'"></common-title>
            <evan-form-item label="资源名称：">
              <input v-model="info.resourceName" class="form-input" placeholder="请输入资源名称"
                     placeholder-class="form-input-placeholder" />
            </evan-form-item>
            <evan-form-item label="是否推荐：">
              <uni-data-checkbox v-model="info.ifRecommend" :localdata="range"></uni-data-checkbox>
            </evan-form-item>
            <evan-form-item label="景点排序：">
              <uni-number-box class="v-m-t10" v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />
            </evan-form-item>
           <!-- <evan-form-item label="开放时间：">
							<picker class="time-picker" mode="time" :value="startTime" start="00:00" end="23:59"
                      @change="bindTimeChange">
                <view class="uni-input">{{ startTime }}</view>
              </picker>
              -
              <picker class="time-picker" mode="time" :value="endTime" start="00:00" end="23:59"
                      @change="bindTimeChange1">
                <view class="uni-input">{{ endTime }}</view>
              </picker>
            </evan-form-item> -->
          </view>
        </view>
				<view class="v-card-item">
				  <view class="v-card-box">
				    <common-title :title="'开放时间'"></common-title>
				    <textarea class="area-text" v-model="info.openTime"  auto-height />
				  </view>
				</view>
        <view class="v-card-item">
          <view class="v-card-box">
            <common-title :title="'资源简介'"></common-title>
            <textarea class="area-text" v-model="info.introduction"  auto-height />
          </view>
        </view>
        <view class="v-card-item">
          <view class="v-card-box">
            <common-title :title="'资源描述'"></common-title>
            <textarea class="area-text" v-model="info.resourceDescribe"
                      auto-height />
          </view>
        </view>
        <view class="v-card-item">
          <view class="v-card-box">
            <common-title :title="'图片'"></common-title>
            <w-upload ref="wUpload" :token="token" :imgShow="imgShow" :requestUrl="requestUrl"
                      :imgType="imgType" @updateImgList="updateImgList" :imgList="imgList"
                      @imgSuccess="imgSuccess"></w-upload>
          </view>
        </view>
        <view class="v-card-item">
          <view class="v-card-box">
            <common-title :title="'语音讲解'"></common-title>
            <audio-upload :url="info.mp3Url" @fileSuccess="fileSuccess"></audio-upload>
          </view>
        </view>
      </evan-form>
      <view class="v-page-button contain">
        <button class="v-btn-large" @click="save">保存</button>
      </view>


    </view>
  </view>
</template>

<script>
import {
  scenicSpotById,
  updateScenicSpotSortList
} from '@/api/word/attractionsEditor.js'
import audioUpload from '@/components/audio-unpload/audioUpload.vue';
import wUpload from '@/components/file-img-upload/w-upload.vue';
import {
  getToken
} from '@/utils/auth.js';
import config from '@/config.js';
const baseUrl = config.baseUrl;

export default {
  components: {
    audioUpload,
    wUpload
  },
  data() {
    return {
      star: null,
      range: [{
        value: 0,
        text: '是'
      },
        {
          value: 1,
          text: '否'
        }
      ],
      startTime: '00:00',
      endTime: '00:00',
      token: '',
      imgShow: true,
      requestUrl: baseUrl + '/common/upload',
      imgType: 'jpg,png,gif',
      imgList: [],
      hideRequiredAsterisk: false,
      vModelValue: 1,
      id: 0,
      info: {
        id: 24,
        ifRecommend: 0,
        resourceCode: 751783303501053953,
        resourceName: '达摩院',
        openTime: '',
        scenicArea: '少林景区',
        introduction: '简介',
        resourceDescribe: '描述',
        imageUrl: '',
        mp3Url: '',
        videoUrl: '',
        sort: ''
      }
    };
  },


  onShow() {
    this.token = getToken();

    console.log(this.token);
  },
  onLoad(option) {
    console.log(option)
    this.id = option.id
    this.scenicSpotById(this.id);
  },
  mounted() {
    this.$refs.form.setRules(this.rules);
    // 数据转换
    var arr = [];
    if (this.classDataTree && this.classDataTree.length > 0) {
      this.classDataTree.forEach((item) => {
        console.log(item);
        var obj = {
          text: item.classificationName,
          value: item.classificationCode,
          children: []
        };
        if (item.list && item.list.length > 0) {
          item.list.forEach((sonItem) => {
            var sonObj = {
              text: sonItem.classificationName,
              value: sonItem.classificationCode
            };

            obj.children.push(sonObj);
          });
        }
        arr.push(obj);
      });
    }

    this.classDataTree = arr;
  },
  methods: {
    // 返回被删除的图片和索引号
    updateImgList(val) {
      console.log(val);
      this.imgList.forEach((i, j) => {
        if (j == val[0]) {
          this.imgList.splice(j, 1);
          this.$forceUpdate(); //强制更新视图
        }
      });
    },
    // 返回上传成功的图片信息
    imgSuccess(val) {
      console.log(val);
      this.imgList.push(val);
      this.$forceUpdate(); //强制更新视图
    },

    bindTimeChange(e) {
      let this_ = this
      console.log(this_.info)
      this_.startTime = e.detail.value;
      this_.info.openTime = this_.startTime + "-" + this_.endTime
      console.log(this_.info.openTime)
    },
    bindTimeChange1(e) {
      let this_ = this
      console.log(this_.info)
      this_.endTime = e.detail.value;
      this_.info.openTime = this_.startTime + "-" + this_.endTime
      console.log(this_.info.openTime)
    },
    changeLog(e) {
      console.log('change事件:', e);
    },
    onnodeclick(e) {
      console.log('nodeclick', e);
    },
    onpopupopened(e) {
      console.log('onpopupopened');
    },
    onpopupclosed(e) {
      console.log('onpopupclosed');
    },
    onchange(e) {
      console.log('onchange', e.detail.value);
    },
    inputclick(e) {
      console.log('inputclick');
    },
    getLocation() {
      uni.navigateTo({
        url: 'map'
      });
    },
    onnodeclick(e) {
      console.log('nodeclick', e);
    },
    onpopupopened(e) {
      console.log('onpopupopened');
    },
    onpopupclosed(e) {
      console.log('onpopupclosed');
    },
    onchange(e) {
      console.log('onchange', e.detail.value);
    },
    inputclick(e) {
      console.log('inputclick');
    },
    getLocation() {
      uni.navigateTo({
        url: 'map'
      });
    },

    changeValue(value) {
      console.log('返回数值：', value);
    },
    blur(e) {
      console.log('blur:', e);
    },
    focus(e) {
      console.log('focus:', e);
    },

    save() {
      let this_ = this;
      // this_.info.openTime = this_.startTime + "-" + this_.endTime
      this_.info.imageUrl = this_.imgList.join(",");
      this_.info.sort = this_.vModelValue;
      this.$refs.form.validate((res) => {
        if (res) {
          updateScenicSpotSortList(this.info).then(res => {
            if (res.code == 200) {
              uni.showToast({
                title: '编辑成功'
              });
            }
            setTimeout(() => {
             uni.navigateBack();
            }, 500)
          })
        }
      });
    },
    scenicSpotById(val) {
      scenicSpotById(val).then(res => {
        console.log(res)
        this.info = res.data
        // this.startTime = res.data.openTime.split('-')[0]
        // this.endTime = res.data.openTime.split('-')[1]
        this.info.ifRecommend = Number(res.data.ifRecommend)
        this.vModelValue = res.data.sort
        this.imgList = this.info.imageUrl.split(",");
      })
    },
    fileSuccess(val) {
			let this_ = this
      if (val) {
      	this_.info.mp3Url = val
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.uni-input-placeholder {
  font-size: 24rpx;
}

.set-position {
  position: absolute;
  right: 20rpx;
}

.form-input {
  width: 95%;
}

.tree-pick {
  width: 95%;
}

::v-deep .evan-form-item-container__label {
  padding-left: 20rpx;
  text-align-last: unset;
  width: 22%;
}

.title-pic {
  padding: 10px 15px;
  color: #4d4d4d;
}

.area-text {
  height: auto;
  width: 90%;
  min-height: 50rpx;
  margin: 0 5%;
  padding: 10rpx;
  border-radius: 10rpx;
  background-color: #f3f3f3;
}
</style>