caimei-applets-caimei/pages/seller/remarks/business-card.vue

<template>
    <view class="business-card">
        <view class="select-item" @click.native="showActionSheet = true">
            <view class="select-title">头像</view>
            <view class="select-content">
                <image
                    class="aov"
                    :src="info.image || 'https://static.caimei365.com/app/img/icon/default-head.png'"
                    mode=""
                ></image>
                <text class="cell-more iconfont icon-xiayibu"></text>
            </view>
        </view>
        <view class="select-item" @click.native="$api.navigateTo('/pages/seller/remarks/mine-qrcode')">
            <view class="select-title">二维码</view>
            <view class="select-content">
                <image class="aov" :src="info.qrCode" mode="" v-if="info.qrCode"></image>
                <text v-else>无</text>
                <text class="cell-more iconfont icon-xiayibu"></text>
            </view>
        </view>
        <tui-actionsheet
            :show="showActionSheet"
            :item-list="itemList"
            @click="itemClick"
            :isCancel="fasle"
            @cancel="closeActionSheet"
        ></tui-actionsheet>
    </view>
</template>

<script>
import { uploadFileImage } from '@/services/public.js'
export default {
    data() {
        return {
            userInfo: {},
            showActionSheet: false,
            itemList: [
                {
                    text: '手机相册'
                },
                {
                    text: '取消'
                }
            ],
            info: {}
        }
    },
    mounted() {
        this.userInfo = uni.getStorageSync('userInfo')
        this.getUserInfo()
    },
    onload() {
        uni.$on('updated', () => {
            this.getUserInfo()
        })
    },
    methods: {
        itemClick(e) {
            if (e.index === 1) {
                return (this.showActionSheet = false)
            } else {
                uploadFileImage().then(res => {
                    this.$util.msg('请稍后')
                    const img = JSON.parse(res.data).data
                    if (!img) return this.$util.msg('图片上传失败')
                    this.SellerService.updateSellerInfo({
                        userId: this.userInfo.userId,
                        image: img,
                        qrcode: this.userInfo.qrcode || ''
                    }).then(res => {
                        this.getUserInfo()
                        this.showActionSheet = false
                        this.$util.msg('上传成功')
                    })
                })
            }
        },
        closeActionSheet() {
            this.showActionSheet = false
        },
        async getUserInfo() {
            const { data } = await this.SellerService.GetSellerHome({ userId: this.userInfo.userId })
            this.info = data
        }
    }
}
</script>

<style lang="scss">
@import '@/uni.scss';
.business-card {
    padding: 0 32rpx;
    box-sizing: border-box;
    .select-item {
        display: flex;
        justify-content: space-between;
        height: 100rpx;
        border-bottom: 1rpx solid #e1e1e1;
        margin-top: 30rpx;
        position: relative;
        .select-title {
            color: #666666;
            font-size: 28rpx;
        }
        .select-content {
            display: flex;
            align-items: center;
            .aov {
                width: 90rpx;
                height: 90rpx;
                border-radius: 50%;
                object-fit: contain;
            }
        }
    }
}
.cell-more {
    width: 20rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: right;
    right: 0;
    top: 0;
    font-size: $font-size-28;
    color: #666666;
    .txt {
        color: #fb4343;
        padding-right: 10rpx;
    }
}
</style>