ufutx_love_mp/src/components/chooseImageTips.wpy

<template>
<view class="chooseImageTips">
    <view :class="{'~show':chooseShow}" class="cu-modal ~cu-modal ~bottom-modal"  catchtap="hideModal">
        <view class="~cu-dialog cu-dialog ">
            <view class="g_ct">
                <view class="u_tt ~font_26 ~color999">
                    <view class="~font_26 ~color333">上传本人真实正面照，不规范的头像将无法通过审核哦</view>
                    <image class="u_tt_img" catchtap="hideModal" src="https://images.ufutx.com/202107/26/1a2f798de1a7f2d4f69ba4f9f4936f34.png" mode="aspectFit" lazy-load="false"></image>
                </view>
                <view class="~font_24" style="color: #FF6464;text-align: left;padding: 0 30rpx;">（请勿上传个人二维码、个人信息等联系方式的图片）</view>
                <view class="m_img ~f-fbc" v-if="unmarriVShow">
                    <view>
                        <image src="https://images.ufutx.com/202107/26/c0668beb4677d89f40f217db82b58409.png" lazy-load  mode="aspectFill" class="image" />
                        <view class="~font_24 ~color999">记录生活</view>
                    </view>
                    <view>
                        <image src="https://images.ufutx.com/202107/26/b93279c76ee33b3ae0a3acfd29ef380a.png" lazy-load  mode="aspectFill" class="image" />
                        <view class="~font_24 ~color999">旅行的意义</view>
                    </view>
                    <view>
                        <image src="https://images.ufutx.com/202107/26/33c7e305e813cd5374b33a25b1d3fbad.png" lazy-load  mode="aspectFill" class="image" />
                        <view class="~font_24 ~color999">热衷的事物</view>
                    </view>
                    <view>
                        <image src="https://images.ufutx.com/202107/26/40cc54109333fa37e3b2546d77e5d068.png" lazy-load  mode="aspectFill" class="image" />
                        <view class="~font_24 ~color999">萌宠与你</view>
                    </view>
                </view>
                <view class="m_img ~f-fbc" v-else>
                    <view>
                        <image src="https://images.ufutx.com/202107/26/38ff7d41297d444cf2e7f07788a809c7.png" lazy-load  mode="aspectFill" class="image" />
                        <view class="~font_24 ~color999">五官清晰</view>
                    </view>
                    <view>
                        <image src="https://images.ufutx.com/202107/26/f65d9c42de6c2e5eabd09e401a5aa3f7.png" lazy-load  mode="aspectFill" class="image" />
                        <view class="~font_24 ~color999">墨镜口罩</view>
                    </view>
                    <view>
                        <image src="https://images.ufutx.com/202107/26/0478fed7e888f63944f85726588d7144.png" lazy-load  mode="aspectFill" class="image" />
                        <view class="~font_24 ~color999">看不清人</view>
                    </view>
                    <view>
                        <image src="https://images.ufutx.com/202107/26/2afaf2cb480eae15f039079e0352f611.png" lazy-load  mode="aspectFill" class="image" />
                        <view class="~font_24 ~color999">侧脸</view>
                    </view>
                </view>
                <view class="~u_camera ~font_32 ~color333 padding30" catchtap="onCamera">拍摄</view>
                <view class="u_album ~font_32 ~color333 padding30" catchtap="onAlbum">从手机相册选择</view>
            </view>
        </view>
    </view>

</view>
</template>

<script>
    import wepy from '@wepy/core'
    import base from '../mixins/base'
    wepy.component({
        mixins: [base],
        props: {
            chooseShow: {
                type: Boolean,
                default: false
            },
            unmarriVShow: {
                type: Boolean,
                default: false
            },
            jumpString: {
                type: String,
                default: null
            }
        },
        data: {

        },

        methods: {
            onModal() {
                this.chooseShow = false
                this.$emit('hideCut', {
                    chooseShow: this.chooseShow
                })
            },
            onCamera() {
                let vm = this
                wx.chooseImage({
                    count: 1,
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: (res) => {
                        vm.onModal()
                        let imgSrc = res.tempFilePaths[0]
                        if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
                            vm.$showToast('上传图片只能是 jpg、png、jpeg 格式!')
                            return
                        }
                        if (this.jumpString) {
                            wx.navigateTo({
                                url: `/pages/users/ImageCropper?src=${imgSrc}&jumpString=${this.jumpString}&newPic=${1}`
                            })
                        }
                        vm.$emit('imgSrcCut', {
                            imgSrc: imgSrc
                        })
                    }
                })
            },
            onAlbum() {
                let vm = this
                wx.chooseImage({
                    count: 1,
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
                    success: (res) => {
                        vm.onModal()
                        let imgSrc = res.tempFilePaths[0]
                        if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
                            vm.$showToast('上传图片只能是 jpg、png、jpeg 格式!')
                            return
                        }
                        if (this.jumpString) {
                            wx.navigateTo({
                                url: `/pages/users/ImageCropper?src=${imgSrc}&jumpString=${this.jumpString}&newPic=${1}`
                            })
                        }
                        vm.$emit('imgSrcCut', {
                            imgSrc: imgSrc
                        })
                    }
                })
            },
            hideModal() {
                this.onModal()
            }
        }
    })
</script>

<style lang="less">
.chooseImageTips {
  .cu-modal {
    z-index: 9999999999;
  }
    .cu-dialog{
      height: 640rpx;
      border-radius: 32rpx 32rpx 0px 0px !important;
      .g_ct {
        padding: 30rpx 0;
        .u_tt {
          padding: 0 30rpx;
          text-align: left;
          position: relative;
          .u_tt_img {
            width: 28rpx;
            height: 28rpx;
            position: absolute;
            right: 30rpx;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .m_img {
          padding: 30rpx;
          border-bottom: 2px solid #F5F5F5;
          view {
            image {
              width: 160rpx;
              height: 160rpx;
            }
          }
        }
        .font_32 {
          padding: 30rpx;
        }
        .u_album {
          border-top: 2px solid #F5F5F5;
          // border-bottom: 8px solid #F5F5F5;
        }
      }
      .padding30{
        padding: 30rpx;
      }
    }
}
</style>