front-end/hdApp/src/components/app-bind-info.vue

<template>
    <view>
        <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required" style="width:120upx;">{{nameTetx}}</div>
            <view
                v-if="!$util.isEmpty(form.name)"
                style="width:400upx;padding-left: 90upx">{{form.name}}
            </view>
            <view
                v-else
                class="plart-tit"
                style="width:400upx; text-align:center;">
                请点击右边按钮
            </view>
            <button
              class="admin-button-com blue mini-btn"
              @click="getWxAvatar"
            >帮我填</button>
        </tui-list-cell>
        <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required" style="width:120upx;">手机号</div>
            <view
            v-if="!$util.isEmpty(form.mobile)"
            style="width:400upx;padding-left: 90upx">{{form.mobile}}</view>
            <view
                v-else
                class="plart-tit"
                style="width:400upx; text-align:center;">
                请点击右边按钮
            </view>
            <button
                class="admin-button-com blue mini-btn"
                open-type="getPhoneNumber"
                @getphonenumber="getWxMobile"
            >帮我填</button>
        </tui-list-cell>

    </view>
</template>

<script>
    import TuiListCell from "@/components/plugin/list-cell";
    import { getWxInfo, getWxPhone } from "@/api/mini";
    export default {
        name:'AppBindInfo',
        props:{
            nameTetx:{
                type:String,
                default:'昵称'
            }
        },
        components:{
            TuiListCell
        },
        data(){
            return {
                form: {
                    name: '',
                    mobile: ''
                }
            }
        },
        methods:{
             // 获取微信信息
            getWxAvatar() {
                // uni.getUserInfo({
                //     provider: "weixin",
                //     success: res => {
                    
                //     },
                //     fail: () => {
                //     // this.loading = false
                //     }
                // });
                uni.getUserProfile({
                  desc:'登录',
                  success:(res)=>{
                    getWxInfo({ iv: res.iv, encryptedData: res.encryptedData }).then(
                        subRes => {
                        this.form.name = subRes.data.name
                        this.$emit('bindInfo',this.form)
                        uni.showToast({
                            icon: "success"
                        });
                        }
                    );
                  },
                  fail:(res)=>{
                  }
                });

            },
            // 获取微信手机号
            getWxMobile(e) {
            if (e.detail.errMsg === "getPhoneNumber:ok") {
                getWxPhone({
                iv: e.detail.iv,
                encryptedData: e.detail.encryptedData
                }).then(res => {
                this.form.mobile = res.data.mobile;
                this.$emit('bindInfo',this.form)
                uni.showToast({
                    icon: "success"
                });
                });
            } else {
                this.$msg("获取信息失败！");
            }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .plart-tit {
        color: #CCCCCC;
        font-size: 28upx;
        font-weight: 400;
    }
    .tui-title {
        color: #666666;
        font-size: 28upx;
        font-weight: 400;
    }
</style>