paper-shopkeeper-app/pages/store-settings/index.vue

<template>
  <view class="store-setting">
    <view>
      <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
        <view class="store-setting-title">店铺设置</view>
        <view slot="left"></view>
        <view slot="right"></view>
      </uni-nav-bar>
    </view>
    <view class="store-setting-main">
      <view class="store-setting-name"><text>店铺名称</text></view>
      <view>
        <qn-easyinput
          class="store-setting-textArea"
          :maxlength="100"
          :styles="{ disableColor: '#F7F8FA' }"
          v-model="storeName"
          :inputBorder="false"
          type="textarea"
          placeholder="请输入店铺名称"
        ></qn-easyinput>
      </view>
      <view class="store-log">
        <view class="tore-setting-name"><text>店铺logo</text></view>
        <view class="store-log store-image-flex">
          <uni-file-picker
            class="store-image-width"
            v-model="logoImage"
            file-mediatype="image"
            mode="grid"
            file-extname="png,jpg"
            :limit="1"
            :image-styles="imageStyles"
            @success="success"
            @fail="fail"
            @select="select"
            @delete="deleteLogo"
          >
            <image class="paper-upload-image" src="../../static/imgs/trade/uploadImage.png" mode=""></image>
          </uni-file-picker>
          <view class="store-image-text">建议尺寸：200*200像素，尺寸不匹配时，图片将被压缩或拉伸以铺满画面</view>
        </view>
      </view>
      <view class="store-log">
        <view class="tore-setting-name"><text>背景图片</text></view>
        <view class="store-log store-image-flex">
          <uni-file-picker
            @delete="deleteImage"
            class="store-image-width"
            v-model="backgroundImage"
            @select="backSelect"
            :limit="1"
            fileMediatype="image"
            :image-styles="imageStylest"
          >
            <image class="paper-upload-image" src="../../static/imgs/trade/uploadImage.png" mode=""></image>
          </uni-file-picker>
          <view class="store-image-text">建议尺寸：750*370像素，尺寸不匹配时，图片将被压缩或拉伸以铺满画面</view>
        </view>
      </view>
    </view>
    <view>
      <view class="upload-btn"><button type="primary" class="btn-class" @click="uploadSet">保存设置</button></view>
    </view>
  </view>
</template>

<script>
import { back, uploadFile } from '@/utils/hook.js'
import { updataStore } from '@/apis/add-paper.js'
export default {
  data() {
    return {
      storeName: '',
      logoImage: [],
      backgroundImage: [],
      background: '',
      logo: '',
      imageStyles: {
        width: 120,
        height: 100,
        border: false
      },
      imageStylest: {
        width: 183,
        height: 94,
        border: false
      },
      option: ''
    }
  },
  onLoad(option) {
    if (option) {
      this.logoImage = []
      this.backgroundImage = []
      this.option = option
      this.storeName = this.option.name
      this.background = this.option.backgroundImg
      this.logo = this.option.logo
      if (this.option.logo) {
        let logoImage = {
          name: 'text',
          type: 'image',
          url: this.option.logo
        }
        this.logoImage.push(logoImage)
      }
      if (this.option.backgroundImg) {
        let backgroundImage = {
          name: 'text',
          type: 'image',
          url: this.option.backgroundImg
        }
        this.backgroundImage.push(backgroundImage)
      }
    }
  },
  methods: {
    back,
    // 上传成功回调
    success(item) {
      console.log(item)
    },
    // 上传失败回调
    fail(item) {
      console.log(item)
    },
    // 图片选择事件
    select(item) {
      this.postuploadFile(item.tempFiles[0], 'logo')
    },
    // 删除logo
    deleteLogo(item) {
      console.log('deleteImage', item)
      this.logo = ''
    },
    // 删除背景图
    deleteImage(item) {
      console.log('deleteImage', item)
      this.background = ''
    },
    backSelect(item) {
      console.log('item', item)
      this.postuploadFile(item.tempFiles[0], 'background')
    },
    postuploadFile(path, type) {
      uploadFile(path.path).then((val) => {
        if (type === 'logo') {
          this.logo = val
        } else {
          this.background = val
        }
      })
    },
    // 保存设置
    uploadSet() {
      let params = {
        backgroundImg: this.background,
        id: this.$store.state.supplierInfo.id,
        logo: this.logo,
        name: this.storeName,
        mallSupplierId: this.$store.state.supplierInfo.supplierId
      }
      updataStore(params).then((res) => {
        if (res) {
          uni.showToast({
            title: '设置成功',
            icon: 'success'
          })
          setTimeout(() => {
            back()
          }, 1000)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.store-setting {
  background-color: #ffffff;
  .store-setting-title {
    width: 100%;
    font-size: 36rpx;
    color: #000000;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
  }
  .store-setting-main {
    padding: 20rpx 32rpx;
    background-color: #ffffff;
  }
  .store-setting-name {
    color: #000000;
    letter-spacing: 0;
    font-weight: 500;
  }
  .store-setting-textArea {
    background: #f7f8fa;
    border-radius: 20rpx;
    padding: 10rpx;
    margin-top: 20rpx;
  }
  .store-log {
    margin-top: 32rpx;
  }
  .store-image-flex {
    display: flex;
    flex-direction: row;
  }
  .store-image-text {
    font-size: 24rpx;
    color: #888888;
    letter-spacing: 0;
    font-weight: 400;
    line-height: 40rpx;
    margin-left: 10rpx;
    word-break: break-all;
    flex: 1;
  }
  .store-image-width {
    background-color: rgba(220, 222, 224, 1);
  }
  .upload-btn {
    position: absolute;
    width: 92%;
    bottom: 32rpx;
    left: 32rpx;
  }
  .paper-upload-image {
    width: 120rpx;
    height: 120rpx;
    background: rgba(220, 222, 224, 1);
    border-radius: 10rpx;
  }
}
</style>