tf-business/user_module/changeLogo/index.vue

<template>
  <view class="changeLogo">
    <view class="changeLogo-center">
      <!-- <image class="" src="https://img1.baidu.com/it/u=1845374591,668063497&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500"/> -->
      <image class="" :src="shopInfo.shopLogo" />
    </view>
    <view class="changeLogo-btn">
      <view class="btn" @click="photograph('camera')">
        <image class="" src="@/static/image/user/logo_1.png" />
        <text>拍照</text>
      </view>
      <view class="btn" @click="photograph('album')">
        <image class="" src="@/static/image/user/logo_2.png" />
        <text>打开相册</text>
      </view>
    </view>
  </view>
</template>

<script>
import { updateShopInfo } from "@/config/index.js";
export default {
  created() {
    //  获取本地存储的数据
    this.shopInfo = uni.getStorageSync("shopInfo");
    console.log(this.shopInfo);
  },
  data() {
    return {
      shopInfo: {},
    };
  },
  methods: {
    photograph(str) {
      uni.chooseImage({
        count: 6, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: [str], //从相册选择
        success: (res) => {
			console.log(res);
          // this.getImage(res.tempFilePaths[0]);
        },
      });
    },
    //  图片上传接口
    async getImage(file) {
      //  加载状态
      this.$loading.show("上传中...");
      uni.uploadFile({
        url: `${process.env.UNI_BASE_URL}/file/upload`, //仅为示例，非真实的接口地址
        filePath: file,
        header: {
          "Content-Type": "application/json; charset=UTF-8",
          "Authorization-Business": uni.getStorageSync("storage_key"),
        },
        name: "file",
        formData: {
          user: "test",
        },
        success: (uploadFileRes) => {
          this.save(JSON.parse(uploadFileRes.data).data.url);
        },
      });
    },

    //  保存更新
    async save(logo) {
      let obj = { ...this.shopInfo };
      obj.shopLogo = logo;
      try {
        let res = await updateShopInfo(obj);
        if (res.code == "") {
          this.$showToast("店铺LOGO修改成功", "success");
          //    对本地存储的数据进行更换
          let uploadInfo = JSON.parse(res.json);
          this.shopInfo.shopLogo = uploadInfo.shopLogo;
          uni.setStorageSync("shopInfo", uploadInfo);
        }
      } finally {
        this.$loading.hide();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.changeLogo {
  width: 100vw;
  min-height: 100vh;
  background-color: #000;
  position: relative;
  .changeLogo-center {
    width: 100%;
    position: absolute;
    top: 262rpx;
    left: 0;
    image {
      width: 100%;
      height: 750rpx;
      display: block;
    }
  }
  .changeLogo-btn {
    width: 100%;
    position: absolute;
    bottom: 108rpx;
    left: 0;
    padding: 0 75rpx;
    box-sizing: border-box;
    @include flex(space-between);
    .btn {
      width: 276rpx;
      height: 108rpx;
      background-color: rgba(255, 255, 255, 0.4);
      @include flex(center, null, 27rpx);
      border-radius: 24rpx;
      image {
        width: 42rpx;
        height: 32rpx;
        display: block;
      }
      text {
        font-size: 32rpx;
        color: #e6e4e5;
      }
    }
  }
}
</style>