AiSkinMeasurementMp/pages/skin-assessment/croppedImage.vue

<template>
    <view>
        <!-- ios背景图片不支持wx开头的临时路径，需要上传到服务器再裁剪 -->
        <view class="main">
           <!--  <view class="circle-img">
                <u--image v-if="imageUrl" :src="imageUrl" mode="widthFix" shape="circle" width="400px" border
            height="400px"></u--image>
            </view>
            <view class="small-circle">
                <u--image v-if="cropImgPath" :src="cropImgPath" mode="widthFix" shape="circle" width="100px"
            height="100px"></u--image>
            </view>
            <view class="action">

            </view> -->
        </view>
        <image-cropping v-if="isShow" :src="imageUrl" :isFixedSize="true" :ratioGroup="['4:3', '1:1']"
            @completed="cropCompleted" @cancel="cropCancel" cropShape="circular">
        </image-cropping>
        
    </view>
</template>

<script>
import imageCropping from '../../components/xiaogang-crop'
import avatar from "../../components/yq-avatar/yq-avatar.vue";
export default {
    data() {
        return {
            webUrl: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxab7b8b9509e1d137&redirect_uri=https://id.ssjlai.com/telpoaiopsweb?appid=wxab7b8b9509e1d137&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect',
            uurls: ["../../static/logo.png", "../../static/logo.png"],
            cropImgPath: '',
            isShow: false,
        }
    },
    computed: {
        imageUrl() {
            return this.$store.state.user.photoPath
        }  
    },
    onLoad() {
        this.isShow = true
    },
    methods: {
        onMessage(event) {
            console.log('收到消息', event.detail.data);
        },
        cropCompleted(e) {
            console.log("e", e.tempFilePath);
            this.cropImgPath = e.tempFilePath;
            /* this.isShow = false; */
        },
        cropCancel() {
            /* this.imageUrl = ''; */
           /*  this.isShow = false; */
        },
        myUpload(rsp) {
            this.$set(this.urls, rsp.index, rsp.path);
        },
        showCrop() {
            this.isShow = true;
        },
    },
    components: {
        avatar,
        imageCropping
    }
}
</script>

<style lang="scss" scoped>
    .main {
        .circle-img {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

</style>