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

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

<script>
export default {
    data() {
        return {
            active: false,
            userInfo: {
                qrcode: ''
            }
        }
    },
    watch: {
        'userInfo.qrcode': {
            handler(val) {
                if (val) {
                    this.active = true
                }
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        handlerSave() {
            if (this.active) {
                this.$api.navigateTo('/pages/seller/remarks/mine-card')
            }
        }
    }
}
</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;
    }
    .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>