index.vue

<template>
    <view class="wrapper">
        <!-- 获取用户信息 -->
        <view v-if="showUserInfo" class="ttt">
            <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <image class="avatar" :src="avatarUrl"></image>
            </button> 
            <view class="tipUserHeader">设置头像</view>
            <input class="weui-input" v-model="userName" placeholder="请输入昵称"/>
            <button type="primary" :disabled="disabledSubmit" @click="handleSubmit" class="submit">提交</button>
        </view>
        <button @click="handleUserDestory"> 用户注销  </button>
        <view class="shadow"></view>

        <view class="section" >
            <view class="shadowBoard" :style="{backgroundImage:'url('+ photo[i] +')'}"></view>
            <view class="swiper">
                <image
                    @click="preImage"
                    class="scaleToFill"
                    src="../../static/photo/left.png"
                    mode="scaleToFill"
                />
                <image
                    @click="nextImage"
                    class="scaleToFill2"
                    src="../../static/photo/left.png"
                    mode="scaleToFill"
                />
                <z-swiper ref="zSwiper" v-model="list" @slideChange="onSlideChange" :options="options" class="swiper">
                    <z-swiper-item :custom-style="slideCustomStyle" v-for="(item,index) in list" :key="index">
                        <button class="btn" @click="NavTo(item)">
                            <image class="image" :src="'https://admin.mindepoch.com:8089/worlds/' + item.name + '.png'" mode="aspectFill"></image>
                            <view class="CardContent">
                                <view class="card">
                                    <view class="header1">{{item.name}}</view>
                                    <view class="header2">
                                        <view class="sdsd">{{item.worldHeader}}</view>
                                        <view class="distence"></view>
                                        <view class="detail">{{item.description}}</view>
                                    </view>
                                </view>
                            </view>
                        </button>
                    </z-swiper-item>
                </z-swiper>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            err:null,
            disabledSubmit:false,
            id:274,
            showUserInfo:false,
            userName:'卿羽',
            code:'',
            clickNoArgee:false,
            clickArgee:false,
            isBindPhone:false,
            needDialog:true,
            nickName:'',
            // avatarUrl:'/static/photo/default.jpg',
            avatarUrl:'https://admin.mindepoch.com:8089/worlds/default.jpg',
            OpenId:'',
            i:0,
            photo:[
                'https://admin.mindepoch.com:8089/worlds/情圣日记.png',
                'https://admin.mindepoch.com:8089/worlds/荒村公寓.png',
                'https://admin.mindepoch.com:8089/worlds/舌战群儒.png'
            ],
            list: [
                // {image:'https://admin.mindepoch.com:8089/worlds/情圣日记.png',title:'情圣日记',content1:'-Love&Entropy',content2:'你还...记得我吗？'},
                // {image:'https://admin.mindepoch.com:8089/worlds/荒村公寓.png',title:'荒村公寓',content1:'-规则怪谈',content2:'一觉醒来，身处陌生的公寓,奇怪的规则，神秘的怪谈,我该如何逃生'},
                // {image:'https://admin.mindepoch.com:8089/worlds/舌战群儒.png',title:'荒村公寓',content1:'-规则怪谈',content2:'一觉醒来，身处陌生的公寓,奇怪的规则，神秘的怪谈,我该如何逃生'},
            ],
            options:{
                effect: 'cards',
                loop : true,
            },
            slideCustomStyle: {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: '36rpx'
            }
        }
    },
    mounted() {
        //用户验证用户是否登陆过
        // console.log(this)
        var that = this
        wx.login({
            success(res) {
                if (res.code) {
                    // uni.setStorageSync('code', res.code)
                    that.code = res.code
                    console.log('code：',that.code)
                    // uni.showModal({
                    //     title: 'wx.login：登录ing！',
                    //     content: 'that.code：'+that.code + ''
                    // });
                    // 将 res.code 发送至后台服务器进行处理
                    uni.request({
                        url: 'https://admin.mindepoch.com:8089/wechat/CheckWxUserIsRegisterAndBindPhone',
                        method: 'POST',
                        header: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        data: { code: res.code },
                        success: function(res) {
                            console.log('res：',res)
                            // uni.showModal({
                            //     title: 'wx.login：登录成功！'+JSON.stringify(res),
                            //     content: res.data.toString()
                            // });
                            that.isBindPhone = res.data.isBindPhone
                            that.wxUid = res.data.wxUid
                            
                            if(res.data.message==="微信用户已注册，模拟登录成功!"){
                                uni.setStorageSync('wxUid', res.data.wxUid); //保存用户id
                                uni.setStorageSync('userName', res.data.userName)
                                uni.setStorageSync('session_token', res.cookies[0].split(';')[0]) //保存cookie值
                                that.init()
                            }else{
                                if(res.data.code===1){
                                    //用户已注册
                                    that.init()
                                }else{
                                    that.showUserInfo = true
                                }
                            }
                        },
                        fail: function(err) {
                            console.log('err：',err)
                            // uni.showModal({
                            //     title: 'wx.login：登录失败！',
                            //     content: JSON.stringify(err)
                            // });
                        }
                    })
                } else {
                    console.error('登录失败！' + res.errMsg);
                }
            }
        })
        
    },
    onload() {},
    methods: {
        init(){
            uni.request({
                url: 'https://admin.mindepoch.com:8089/QueryWorldsByLikeName',
                header: {
                    'Cookie': `${uni.getStorageSync('session_token')}`,
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                data:{
                    worldName: ''
                }
            }).then(result => {
                console.log('init：',result[1].data)
                // uni.showModal({
                //     title: 'init：',
                //     content: result[1].data.worldInfoAndAsset.toString()
                // });
                if(result[1].data.code===1){
                    if(result[1].data.worldInfoAndAsset.length>0){
                        this.list = result[1].data.worldInfoAndAsset
                        // this.list = [result[1].data.worldInfoAndAsset[1]]
                    }
                }
            }).catch(err=> {
                console.log(222,err)
                // uni.showModal({
                //     title: 'init_error：',
                //     content: 'error'
                // });
            });
        },
        preImage(){
            // console.log('pre')
            this.$refs.zSwiper.swiper.slidePrev();
        },
        nextImage(){
            // console.log('next')
            this.$refs.zSwiper.swiper.slideNext();
        },
        //获取到用户昵称  以及用户头像
        handleSubmit(){
            var that = this
            //1.昵称输入不可为空
            if(this.userName.trim()==""){
                uni.showToast({
                    title: '昵称不可为空',
                    icon: 'none'
                })
                return
            }
            //2.不上传头像需要下载 上传头像不需要下载
            if(this.avatarUrl=="https://admin.mindepoch.com:8089/worlds/default.jpg"){
                uni.downloadFile({
                    url: that.avatarUrl,
                    success: downloadRes => {
                        if (downloadRes.statusCode === 200) {
                            // 图片下载成功后获取临时文件路径
                            const tempFilePath = downloadRes.tempFilePath;
                            wx.login({
                                success(res) {
                                    if(!res.code) {
                                        return
                                    }
                                    uni.uploadFile({
                                        url: 'https://admin.mindepoch.com:8089/wechat/AppletWeChatRegisterOrLogin',
                                        method: 'POST',
                                        filePath:tempFilePath,
                                        name: 'avatar',
                                        formData: {
                                            code: res.code,
                                            username: that.userName
                                        },
                                        success: uploadRes => {
                                            console.log('上传成功uploadRes', uploadRes);
                                            // console.log(JSON.parse(uploadRes.data))
                                            const data = JSON.parse(uploadRes.data)
                                            if(data.code===1){
                                                uni.showToast({
                                                    title: '头像上传成功！',
                                                    icon: 'none'
                                                });
                                                uni.setStorageSync('userName', that.userName);
                                                uni.setStorageSync('session_token', uploadRes.cookies[0].split(';')[0]); //保存cookie值
                                                uni.setStorageSync('wxUid', data.wxUid); //保存用户id
                                                uni.setStorageSync('openId', data.openId); //保存用户id
                                                that.showUserInfo = false //隐藏用户填写的表单
                                                that.init()
                                            }else{
                                                //失败
                                                uni.showModal({
                                                    title: '温馨提示', // 弹窗的标题
                                                    content: '好像出了点问题呢，再试试呢！', // 弹窗的文本内容
                                                    showCancel: true, // 是否显示取消按钮，默认为 true
                                                    cancelText: '取消', // 取消按钮的文字，默认为"取消"
                                                    cancelColor: '#000000', // 取消按钮的文字颜色
                                                    confirmText: '确定', // 确定按钮的文字，默认为"确定"
                                                    confirmColor: '#576B95', // 确定按钮的文字颜色
                                                    success: function (res) {
                                                        if (res.confirm) {
                                                            console.log('用户点击确定');
                                                        } else if (res.cancel) {
                                                            console.log('用户点击取消');
                                                        }
                                                    },
                                                    fail: function (err) {
                                                        console.log('API 调用失败: ', err);
                                                    }
                                                });
                                                that.disabledSubmit = false
                                            }
                                        },
                                        fail: uploadErr => {
                                            console.error('上传失败', uploadErr);
                                            uni.showModal({
                                                title: '失败', // 弹窗的标题
                                                content: '创建失败！', // 弹窗的文本内容 JSON.parse(uploadErr.errMsg)
                                                showCancel: true, // 是否显示取消按钮，默认为 true
                                                cancelText: '取消', // 取消按钮的文字，默认为"取消"
                                                cancelColor: '#000000', // 取消按钮的文字颜色
                                                confirmText: '确定', // 确定按钮的文字，默认为"确定"
                                                confirmColor: '#576B95', // 确定按钮的文字颜色
                                                success: function (res) {
                                                    if (res.confirm) {
                                                        console.log('用户点击确定');
                                                    } else if (res.cancel) {
                                                        console.log('用户点击取消');
                                                    }
                                                },
                                                fail: function (err) {
                                                    console.log('API 调用失败: ', err);
                                                }
                                            });
                                            
                                        }
                                    })                                    
                                },
                                fail(err){
                                    console.log(err)
                                    uni.showToast({
                                        title: err.toString(),
                                        icon: 'none'
                                    })
                                }
                            })
                        }
                    },
                    fail: downloadErr => {
                        console.error('下载图片失败', downloadErr)
                        // uni.showModal({
                        //     title: '弹窗标题', // 弹窗的标题
                        //     content: JSON.stringify(downloadErr), // 弹窗的文本内容
                        //     showCancel: true, // 是否显示取消按钮，默认为 true
                        //     cancelText: '取消', // 取消按钮的文字，默认为"取消"
                        //     cancelColor: '#000000', // 取消按钮的文字颜色
                        //     confirmText: '确定', // 确定按钮的文字，默认为"确定"
                        //     confirmColor: '#576B95', // 确定按钮的文字颜色
                        //     success: function (res) {
                        //         if (res.confirm) {
                        //             console.log('用户点击确定');
                        //         } else if (res.cancel) {
                        //             console.log('用户点击取消');
                        //         }
                        //     },
                        //     fail: function (err) {
                        //         console.log('API 调用失败: ', err);
                        //     }
                        // });
                    }
                });
            }else{
                this.disabledSubmit = true
                wx.login({
                    success(res) {
                        if(!res.code) {
                            return
                        }
                        uni.uploadFile({
                            url: 'https://admin.mindepoch.com:8089/wechat/AppletWeChatRegisterOrLogin',
                            method: 'POST',
                            filePath:that.avatarUrl,
                            name: 'avatar',
                            formData: {
                                code: res.code,
                                username: that.userName
                            },
                            success: uploadRes => {
                                uni.showToast({
                                    title: 'AppletWeChatRegisterOrLogin',
                                    icon: 'none'
                                })
                                console.log('上传成功uploadRes', uploadRes);
                                console.log(JSON.parse(uploadRes.data))
                                const data = JSON.parse(uploadRes.data)
                                if(data.code===1){
                                    uni.showToast({
                                        title: '成功！',
                                        icon: 'none'
                                    });
                                    uni.setStorageSync('userName', that.userName);
                                    uni.setStorageSync('session_token', uploadRes.cookies[0].split(';')[0]); //保存cookie值
                                    uni.setStorageSync('wxUid', data.wxUid); //保存用户id
                                    uni.setStorageSync('openId', data.openId); //保存用户id
                                    that.showUserInfo = false //隐藏用户填写的表单
                                    that.init()
                                }else{
                                    //失败
                                    uni.showModal({
                                        title: '温馨提示', // 弹窗的标题
                                        content: '好像出了点问题呢，再试试呢！', // 弹窗的文本内容
                                        showCancel: true, // 是否显示取消按钮，默认为 true
                                        cancelText: '取消', // 取消按钮的文字，默认为"取消"
                                        cancelColor: '#000000', // 取消按钮的文字颜色
                                        confirmText: '确定', // 确定按钮的文字，默认为"确定"
                                        confirmColor: '#576B95', // 确定按钮的文字颜色
                                        success: function (res) {
                                            if (res.confirm) {
                                                console.log('用户点击确定');
                                            } else if (res.cancel) {
                                                console.log('用户点击取消');
                                            }
                                        },
                                        fail: function (err) {
                                            console.log('API 调用失败: ', err);
                                        }
                                    });
                                    that.disabledSubmit = false
                                }
                            },
                            fail: uploadErr => {
                                console.error('上传失败', uploadErr);
                                uni.showModal({
                                    title: '失败', // 弹窗的标题
                                    content: '创建失败！', // 弹窗的文本内容 JSON.parse(uploadErr.errMsg)
                                    showCancel: true, // 是否显示取消按钮，默认为 true
                                    cancelText: '取消', // 取消按钮的文字，默认为"取消"
                                    cancelColor: '#000000', // 取消按钮的文字颜色
                                    confirmText: '确定', // 确定按钮的文字，默认为"确定"
                                    confirmColor: '#576B95', // 确定按钮的文字颜色
                                    success: function (res) {
                                        if (res.confirm) {
                                            console.log('用户点击确定');
                                        } else if (res.cancel) {
                                            console.log('用户点击取消');
                                        }
                                    },
                                    fail: function (err) {
                                        console.log('API 调用失败: ', err);
                                    }
                                });
                                
                            }
                        })
                    },
                    fail(err){
                        console.log(err)
                        uni.showToast({
                            title: err.toString(),
                            icon: 'none'
                        })
                    }
                })
            }
        },
        onChooseAvatar(e) {
            console.log('e',e)
            const { avatarUrl } = e.detail 
            this.avatarUrl = avatarUrl
            console.log('this.avatarUrl',this.avatarUrl)
        },

        NavTo(data) {
            uni.navigateTo({
                url: `/pages/index/index?params=${JSON.stringify(data)}`
            });

            // console.log(title)
            // if(title==='情圣日记'){
            // }else{
            //     uni.showToast({
            //         title: '敬请期待',
            //         icon: 'none'
            //     });
            // }
        },
        onSlideChange(swiper,index) {
            console.log(swiper,index)
            // const len = this.photo.length + 1
            if(this.photo.length+1==index){
                this.i = 0
            }else if(index==0){
                this.i = this.photo.length-1
            }else{
                this.i = index-1
            }
            // 你可以在这里获取当前的swiper索引
            // const currentIndex = swiper.activeIndex;
            // 执行你想要的操作，比如更新页面标题
            // uni.setNavigationBarTitle('当前页: ' + (currentIndex + 1));
        },

        getAuth() {
            wx.getUserProfile({
                withCredentials: true,
                lang: 'zh_CN',
                desc:'提升用户体验，减少用户操作',
                success: function (userRes) {
                    console.log('userRes',userRes)
                    // var userInfo = userRes.userInfo;
                    // console.log("用户昵称为：" + userInfo.nickName);
                    // console.log("用户头像地址为：" + userInfo.avatarUrl);
                    // this.nickName = userInfo.nickName
                    // this.avatarUrl = userInfo.avatarUrl
                    // this.$globalData.userPhoto = userInfo.avatarUrl
                },
                fail: function () {
                    console.error('获取用户信息失败');
                }
            });
        },

        handleUserDestory() {
            uni.request({
                url: 'https://admin.mindepoch.com:8089/UnregisterUser',
                method: 'POST',
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Cookie': `${uni.getStorageSync('session_token')}`,
                },
                data: { id: uni.getStorageSync('wxUid') },
                success:function(res) {
                    console.log(res)
                    uni.showToast({
                        title: '注销成功！',
                        icon: 'none'
                    });
                },
                fail:function(err) {
                    console.log(err)
                }
            })
        }
    }
}
</script>

<style scoped>
.wrapper{
    height: 100vh;
    width: 100vw;
}
.image {
	height:100%;
	width: 100%;
}
.section{
    
}
.shadowBoard{
    /* 其他样式，如背景大小、位置等 */
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(5px);
    z-index: -99;
    position: fixed;
    
}
.swiper{
    padding-top: 320rpx;
    position:relative;
}
.CardContent{
    position: absolute;
    top:0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 85%;
    color: #fff;
}
.card{
    position: relative;
    width: 100%;
    height: 100%;
}
.header1{
    font-size: 40rpx;
    margin-top: 20rpx;
    text-align: left;
}
.header2{
    position: absolute;
    bottom:40rpx;
    left: 0;
    font-size: 38rpx;
}
.sdsd{
    text-align: left;
}
.distence{
    margin-top: 20rpx;
}
.detail{
    font-size: 24rpx;
    max-height: 100rpx;
    line-height: 38rpx;
    background-color: #00000039;
    padding: 6rpx;
    border-radius: 10rpx;
    text-align: left;
    overflow-y: scroll;
}
.shadow{
    position: fixed;
    width: 100vw;
    height: 100vh;
    
}
.shadow>image{
    width: auto;
    height: 100%;
}
.btn{
    padding: 0 !important;
    margin: 0 !important;
    display: block;
    z-index: 99;
    border-radius: 24rpx;
    height: 700rpx;
    width:450rpx;
    border: 1px solid #0000009a;
    box-shadow: 0 0 20rpx #fff;
}
.userInfoPression{
    background-color: #ffffff;
    height: 350rpx;
    border-radius: 20rpx 20rpx 0 0;
}
.mainInfo{

}
.infoHead{
    text-align: center;
    padding: 42rpx;
    font-weight: 700;
}
.infoFoot{
    display:flex;
    width: 100vw;
    position: absolute;
    bottom: 50rpx;
    left: 0;
}
.infoFoot>Button{
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #fff;
    
}
.infoFoot>Button:nth-child(1){
    background-color: gray;
}
.infoFoot>Button:nth-child(2){
    background-color: #1AAD19;
}
.ttt{
    position: absolute;
    top:0;
    left: 0;
    z-index: 9;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
}
.pisition{
    padding-top: 300rpx;
}
.avatar-wrapper{
    border: 1px solid rgb(192, 176, 176);
    width: 200rpx;
    height: 200rpx;
    margin-top: 25rpx;
}
.avatar{
    width: 150rpx;
    height: 150rpx;
    margin-top: 25rpx;
}
.weui-input{
    border: 1px solid rgb(123, 108, 108);
    margin-top: 300rpx;
    width: 50vw;
    height: 70rpx;
    border-radius: 12rpx;
    margin: 200rpx auto;
}
.tipUserHeader{
    text-align: center;
    margin-top: 20rpx;
    color: rgb(123, 108, 108);
}
.submit{
    width: 250rpx;
}
.scaleToFill{
    position:absolute;
    top:62%;
    left:-10rpx;
    width:100rpx;
    height:100rpx;
    z-index:99;
}
.scaleToFill2{
    transform:rotate(180deg);
    position:absolute;
    top:62%;
    right:-10rpx;
    width:100rpx;
    height:100rpx;
    z-index:99;
}
</style>