caimei-applets-caimei/pages/seller/remarks/mine-qrcode.vue

<template>
    <view class="mine-qrcode">
        <view class="handlerUpload" @click="handlerUploadQrcode">
            <image class="qrcode" :src="qrcode" mode="" v-if="qrcode"></image>
            <text v-else>
                请点击上传二维码
            </text>
        </view>
        <button class="upload" @click="handlerUploadQrcode">上传二维码</button>
        <button class="save-qrcode" :class="active && 'active'" @click="handlerSave">保存</button>
    </view>
</template>

<script>
import { uploadFileImage } from '@/services/public.js'
export default {
    data() {
        return {
            active: false,
            userInfo: {},
            info: {},
            qrcode: ''
        }
    },
    watch: {
        qrcode(val) {
            if (val) {
                this.active = true
            }
        }
    },
    mounted() {
        this.userInfo = uni.getStorageSync('userInfo')
        this.getUserInfo()
    },
    methods: {
        handlerSave() {
            if (this.active) {
                this.upload()
                setTimeout(() => {
                    this.$api.navigateTo('/pages/seller/remarks/mine-card')
                }, 1000)
            }
        },
        handlerUploadQrcode() {
            uploadFileImage().then(res => {
                this.$util.msg('请稍后')
                this.qrcode = JSON.parse(res.data).data
            })
        },
        async getUserInfo() {
            const { data } = await this.SellerService.GetSellerHome({ userId: this.userInfo.userId })
            this.userInfo = data
            this.qrcode = data.qrCode
        },
        upload() {
            if (this.qrcode) {
                this.SellerService.updateSellerInfo({
                    userId: this.userInfo.userId,
                    image: this.userInfo.image,
                    qrCode: this.qrcode
                }).then(res => {
                    this.getUserInfo()
                    this.showActionSheet = false
                    uni
                })
            } else {
                this.$util.msg('请上传二维码图片')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.mine-qrcode {
    width: 100vw;
    height: 100vh;
    .handlerUpload {
        width: 420rpx;
        height: 420rpx;
        border: 1px dotted #B2B2B2;
        margin: 120rpx auto 0 auto;
        text-align: center;
        line-height: 420rpx;
        color: #B2B2B2;
        font-size: 24rpx;
        border-radius: 16rpx;
        .qrcode {
            width: 420rpx;
            height: 420rpx;
            object-fit: contain;
        }
    }
    .upload {
        margin: 101rpx auto 0 auto;
        width: 600rpx;
        height: 90rpx;
        border-radius: 45rpx;
        opacity: 1;
        border: 1rpx solid #FF5B00;
        color: #FF5B00;
        line-height: 90rpx;
        text-align: center;
    }
    .save-qrcode {
        margin: 24rpx auto 0 auto;
        width: 600rpx;
        height: 90rpx;
        border-radius: 45rpx;
        opacity: 1;
        color: #FFFFFF;
        line-height: 90rpx;
        text-align: center;
        background-color: #E1E1E1;
    }
    .active {
        background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);
    }
}
</style>