hlm_pl_mall_store/pages/seller/setting/Info.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <seller-base :show="false">
    <view class="div seller-o2o-index">
        <view class="div common-header-wrap">
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="店铺设置" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>
      <view class="div main-content">
          <view class="div user-avatar">
        <uni-file-picker class="common-avatar" v-model="imageValue" fileMediatype="image" mode="grid" :limit="1"
        :auto-upload="false" @select="uploadAvatar"></uni-file-picker>
      </view>
          <flex-line class="field-line" :show-border="true"><text class="span field-name">主营商品</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="settings.store_mainbusiness" /></view></flex-line>
          <flex-line class="field-line" :show-border="true"><text class="span field-name">QQ</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="settings.store_qq" /></view></flex-line>
          <flex-line class="field-line" :show-border="true"><text class="span field-name">阿里旺旺</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="settings.store_ww" /></view></flex-line>
          <flex-line class="field-line" :show-border="true"><text class="span field-name">SEO关键</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="settings.store_keywords" /></view></flex-line>
          <flex-line class="field-line" :show-border="true"><text class="span field-name">SEO店铺</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="settings.store_description" /></view></flex-line>
          <flex-line class="field-line" :show-border="true"><text class="span field-name">店铺电话</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="settings.store_phone" /></view></flex-line>
          <view class="div pt-10 pb-10">
              <view class="div common-btn ds-button-large" @click="submit">保存</view>
          </view>
      </view>
        <tui-picture-cropper v-if="cropperOption.imgUrl" :width="cropperOption.autoCropWidth"
      :height="cropperOption.autoCropHeight" :imageUrl="cropperOption.img" @ready="cropReady" @cropper="useCrop" @back="cropBack">
    </tui-picture-cropper>
    </view>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import SellerBase from '../SellerBase'
import tuiPictureCropper from "@/components/thorui/tui-picture-cropper/tui-picture-cropper"
import { uploadStoreImage, getStoreInfo, editStoreInfo } from '../../../api/sellerSetting'

import flexLine from '../../flexLine'
export default {
  name: 'SellerSettingInfo',
  data(){
    return {
    navHeight: 0,
    imageValue:[],
      screenWidth:0,
      cropperOption: {
        img: '',
        canMove: false,
        autoCrop: true,
        autoCropWidth: 100,
        autoCropHeight: 100,
        maxImgSize: 500,
        outputType: 'png'
      },
      store_avatar: '',
      store_avatar_url: '',
      settings: {}
    }
  },
  created: function () {
    getStoreInfo().then(res => {
      this.settings = res.result.store_info
      this.store_avatar = this.settings.store_avatar
      this.store_avatar_url = this.settings.store_avatar_url
        if (this.store_avatar) {
          this.imageValue = [{
            name: 'store_avatar',
            extname: 'jpg',
            url: this.store_avatar_url
          }]
        }
    }).catch(function (error) {
      uni.showToast({icon:'none',title: error.message})
    })
  },
  components:{
      TitleHeader,
      SellerBase,
      flexLine,
    tuiPictureCropper
  },
  computed:{

  fontSize(){

    return getFontSize()

  },

  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().height
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
  },
  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    submit () {
      editStoreInfo(this.settings.store_qq, this.settings.store_ww, this.settings.store_phone, this.settings.store_mainbusiness, this.settings.store_keywords, this.settings.store_description, this.store_avatar).then(res => {
        uni.showToast({icon:'none',title: res.message})
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    uploadAvatar (event) {
      var file = event.tempFiles[0]
        var that = this
          that.cropperOption.imgUrl = file.path
          that.cropperOption.autoCropWidth = uni.getSystemInfoSync().windowWidth
          that.cropperOption.autoCropHeight = uni.getSystemInfoSync().windowWidth
          that.cropperOption.maxImgSize = uni.getSystemInfoSync().windowHeight - 40
          that.$forceUpdate()
    },
    useCrop (res) {
        var formdata = {
          filePath: res.url,
          name: 'store_avatar',
          id:'store_avatar'
        }
        uni.showLoading({ title: '加载中' })
        uploadStoreImage(formdata).then(res => {
          this.store_avatar = res.result.file_name
          this.store_avatar_url = res.result.file_path
          this.imageValue = [{
            name: 'store_avatar',
            extname: 'jpg',
            url: this.store_avatar_url
          }]
          this.cropperOption.imgUrl = ''
          this.$forceUpdate()
            uni.hideLoading()
        }).catch((error) => {
          uni.showToast({icon:'none',title: error.message})
            uni.hideLoading()
          this.cropperOption.imgUrl = ''
          this.$forceUpdate()
        })
    },
      cropReady() {
        this.cropperOption.img = this.cropperOption.imgUrl
      },
	  cropBack(){
	    this.cropperOption.imgUrl=''
	    this.$forceUpdate()
	  },
  }
}
</script>
<style lang="scss" scoped>
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
    .seller-o2o-index{background: #fff;}
    .main-content{background: #fff;padding:0 $pageSpace}
.user-avatar {
      position: relative;
      margin: 2rem auto;
      text-align: center;
    }
</style>