<!--
 * @Author: euzhi
 * @Description: 个人中心
-->
<template>
<view class="appCotent" v-if="show">
    <view class="content">
        <view class="personal">
            <div class="ps__bg">
                <div class="ps__title"></div>
                <div class="ps__info">
                    <div class="info__cover">
                        <image v-if="avatar" :src="avatar" />
                        <image v-else src="@/static/my/my2.jpg" />
                    </div>
                    <div>
                        <div class="info__name">{{userInfo.nickName || '默认昵称'}}</div>
                        <div class="view__info" @click="editInfo">
                            查看个人主页或编辑资料
                            <span>
                                <image src="@/static/my/my7.png">
                            </span>
                        </div>
                    </div>
                </div>
                <!-- <div class="ps__shop">
                    <div class="shop__tab">
                        <div class="tab__top">
                            <span>商品订单</span>
                            <div class="tab__all" @click="goOrder(0)">
                                <span>全部订单</span>
                                <span>
                                    <image src="@/static/my/my5.png">
                                </span>
                            </div>
                        </div>
                        <div class="tab__bottom">
                            <div class="tab__item" v-for="(vo,inx) in items" :key="inx" @click="goOrder(inx+1)">
                                <image :src="vo.icon" />
                                <div>{{vo.title}}</div>
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
            <div class="ps__list">
                <div class="list__item" v-for="(vo,inx) in menu" :key="inx" @click="goUrl(vo)">
                    <div class="list__left">
                        <image :src="vo.icon" alt="" srcset="">
                            {{vo.title}}
                    </div>
                    <div class="list__right">
                        <image src="@/static/my/my5.png" alt="" srcset="">
                    </div>
                </div>
            </div>
            <div class="ps__btn" v-if="logoutFlag" @click="loginOut">退出登录</div>
        </view>
        <u-gap bgColor="transparent" height="70"></u-gap>
    </view>
</view>
</template>

<script>
	let plugin = requirePlugin('loginPlugin');
export default {
    data() {
        return {
            show:false,
            logoutFlag : true,
            menu: [{
                    icon: require("@/static/my/my01.png"),
                    title: "我的订单",
                    url: "",
					type:"jd"
                },
				// {
    //                 icon: require("@/static/my/my12.png"),
    //                 title: "我的地址",
    //                 url: "/pagesD/pages/personal/myAddress"
    //             },
                {
                    icon: require("@/static/my/my8.png"),
                    title: "使用帮助",
                    url: "/pagesD/pages/personal/help"
                },
                {
                    icon: require("@/static/my/my1.png"),
                    title: "常见问题",
                    url: "/pagesD/pages/personal/asking"
                },
                {
                    icon: require("@/static/my/my11.png"),
                    title: "问题反馈",
                    url: "/pagesD/pages/personal/ask"
                },
                {
                    icon: require("@/static/my/my15.png"),
                    title: "微信通知设置",
                    url: ""
                },
            ],
            items: [{
                    title: '待发货',
                    icon: require('@/static/my/my2.jpg'),
                    page: 0
                },
                {
                    title: '待收货',
                    icon: require('@/static/my/my3.png'),
                    page: 2
                }, {
                    title: '已完成',
                    icon: require('@/static/my/my14.png'),
                    page: 3
                }, {
                    title: '退款/售后',
                    icon: require('@/static/my/my9.png'),
                    page: 4
                }
            ],
            //用户信息
            userInfo: null,
            //头像
            avatar: '',
        }
    },
    methods: {
        loginOut() {
            let opts = {
                url: '/logout',
                method: 'post'
            };
            this.http.httpTokenRequest(opts, {}).then(res => {
                if (res.data.code == 200) {
                    uni.removeStorageSync('userToken')
                    uni.removeStorageSync('xcxIndexPath')
                    // uni.removeStorageSync('openid')
					plugin.logout().then((res) => {
						console.jdLoginLog(res, 'logoutres');
						uni.reLaunch({
						    url: '/pages/main'
						});
					});
                }
            })

        },
        goOrder(current) {
            let token = uni.getStorageSync('userToken');
            if(!token){
                // uni.navigateTo({
                //     url: '/pages/binding/index?url=/pages/main&index=4'
                // })
				let returnPage= '/pages/main';
				let pageType = "reLaunch"
				uni.navigateTo({
					url:"/pages/login/index/index?returnPage="+returnPage+'&pageType='+pageType
				})
                return;
            }
            uni.navigateTo({
                url: '/pagesD/pages/personal/myOrder?current=' + current
            });
        },
        goUrl(vo) {
            let token = uni.getStorageSync('userToken');
            if(!token){
                // uni.navigateTo({
                //     url: '/pages/binding/index?url=/pages/main&index=4'
                // })
				let returnPage= '/pages/main';
				let pageType = "reLaunch"
				uni.navigateTo({
					url:"/pages/login/index/index?returnPage="+returnPage+'&pageType='+pageType
				})
                return;
            }
			if(vo.type == "jd"){
				uni.navigateToMiniProgram({
					appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
					path: '', // 目标小程序的页面路径
					extraData: { // 需要携带的参数
						
					},
					success(res) {
						// 打开成功
					}
				})
				return;
			}
            if (vo.title != '微信通知设置') {
                uni.navigateTo({
                    url: vo.url
                });
            } else {
                this.openMsg()
            }

        },
        editInfo() {
            let token = uni.getStorageSync('userToken');
            if(!token){
                // uni.navigateTo({
                //     url: '/pages/binding/index?url=/pages/main&index=4'
                // })
				uni.navigateTo({
				    url: '/pages/login/index/index'
				})
                return;
            }
            uni.navigateTo({
                url: '/pagesD/pages/personal/userInfo'
            });
        },
        async getUserInfo() {
            let token = uni.getStorageSync('userToken');
            if(!token){
                this.logoutFlag = false
                return
            }
            let opts = {
                url: '/app/user/info',
                method: 'get'
            };
           await this.http.httpTokenRequest(opts, {}).then(res => {
                if (res.data.code == 200) {
                    this.userInfo = res.data.data
                    if(this.userInfo.avatar){
                        this.avatar = this.userInfo.avatar
                    }
                    
                }
            })
        },
        openMsg() {
            var that = this;
            let nc_templateid = that.nc_templateid;
            // 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
            wx.getSetting({
                withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
                success(res) {
                    if (that.is_authorization) {
                        wx.openSetting({
                            withSubscriptions: true,
                        });
                    } else {
                        if (res.subscriptionsSetting[nc_templateid] == "reject") {
                            //用户点击了“总是保持以上，不再询问”
                            wx.showModal({
                                title: "温馨提示",
                                content: "检测到您没有开启订阅消息的权限，是否去设置？",
                                success: function (modal) {
                                    if (modal.confirm) {
                                        // 点击肯定
                                        wx.openSetting({
                                            withSubscriptions: true,
                                        });
                                        that.is_authorization = true;
                                        uni.setStorageSync("is_authorization", true);
                                    } else {
                                        uni.showToast({
                                            title: "您已拒绝订阅消息授权，无法接收通知",
                                            icon: "error",
                                        });
                                        that.is_authorization = false;
                                    }
                                },
                            });
                        } else {
                            // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
                            // var templateid = that.setting.templateid.map(item => item.tempid)；
                            let tmpid = [nc_templateid];
                            uni.requestSubscribeMessage({
                                tmplIds: tmpid,
                                success(res) {
                                    if (res[tmpid[0]] == "accept") {
                                        uni.showToast({
                                            title: "订阅成功",
                                            icon: "none",
                                        });
                                        that.is_authorization = true;
                                        uni.setStorageSync("is_authorization", true);
                                    } else {
                                        uni.showToast({
                                            title: "您拒绝订阅消息授权，无法接收通知",
                                            icon: "none",
                                        });
                                        that.is_authorization = false;
                                    }
                                },
                                fail: (res) => {
                                    wx.showModal({
                                        title: "温馨提示",
                                        content: "检测到您没有开启订阅消息的权限，是否去设置？",
                                        success: function (modal) {
                                            if (modal.confirm) {
                                                // 点击肯定
                                                wx.openSetting({
                                                    withSubscriptions: true,
                                                });
                                                that.is_authorization = true;
                                                uni.setStorageSync("is_authorization", true);
                                            } else {
                                                uni.showToast({
                                                    title: "您已拒绝订阅消息授权，无法接收通知",
                                                    icon: "error",
                                                });
                                                that.is_authorization = false;
                                            }
                                        },
                                    });
                                },
                            });
                        }
                    }
                },
            });
        },

    },
    mounted() {
        setTimeout(() => {
            this.show=true
        }, 100);
        this.getUserInfo()
    },
    onReady: function () {
        uni.setNavigationBarTitle({
            title: '个人中心'
        });
    },
};
</script>

<style lang="scss" scoped>
.personal {
    .ps__bg {
        background: url('http://euzhi.com/my15.png') no-repeat;
        background-size: cover;
        z-index: 999;
		padding-bottom:50rpx;

        .ps__title {
            font-size: 40rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;
            padding-top: 40rpx;
        }

        .ps__info {
            padding: 65rpx 40rpx 30rpx 40rpx;
            display: flex;
            align-items: center;
            position: relative;

            .info__cover {
                width: 130rpx;
                height: 130rpx;
                background: url('@/static/my/my10.png') no-repeat;
                background-size: contain;
                margin-right: 32rpx;

                image {
                    width: 130rpx;
                    height: 130rpx;
                    border-radius: 50%;
                }
            }

            .info__name {
                font-size: 38rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #FFFFFF;
                opacity: 0.96;
                margin-bottom: 28rpx;
            }

            .view__info {
                font-size: 30rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                opacity: 0.96;
                display: flex;
                align-items: center;

                span {
                    position: absolute;
                    right: 40rpx;

                    image {
                        width: 16rpx;
                        height: 26rpx;
                    }
                }
            }
        }

        .ps__shop {
            padding: 0 40rpx;

            .shop__tab {
                padding: 30rpx;
                background: #FFFFFF;
                box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
                border-radius: 20rpx;

                .tab__top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 20rpx;

                    >span {
                        font-size: 34rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #333333;
                    }

                    .tab__all {
                        font-size: 26rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #999999;

                        image {
                            width: 11rpx;
                            height: 18rpx;
                            padding-left: 20rpx;
                        }
                    }
                }

                .tab__bottom {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-top: 20rpx;

                    .tab__item {
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #666666;
                        width: 25%;
                        text-align: center;

                        image {
                            width: 60rpx;
                            height: 49rpx;
                            margin-bottom: 10rpx;
                        }
                    }
                }
            }
        }
    }

    .ps__list {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
        border-radius: 20rpx;
        // margin-top: 20rpx;
		position: relative;
		top: -20rpx;

        .list__item {
            position: relative;
            padding: 26rpx 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .list__left {
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                display: flex;
                align-items: center;

                image {
                    width: 27rpx;
                    height: 33rpx;
                    margin-right: 34rpx;
                }
            }

            .list__right {

                image {
                    width: 11rpx;
                    height: 18rpx;
                }
            }
        }

        .list__item::before {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 650rpx;
            height: 1rpx;
            background: rgba(0, 0, 0, .1);
        }

        .list__item:nth-of-type(2) {
            .list__left {
                image {
                    width: 29rpx;
                    height: 25rpx;
                    margin-right: 32rpx;
                }
            }
        }

        .list__item:nth-of-type(3) {
            .list__left {
                image {
                    width: 28rpx;
                    height: 28rpx;
                    margin-right: 33rpx;
                }
            }
        }

        .list__item:nth-of-type(4) {
            .list__left {
                image {
                    width: 28rpx;
                    height: 28rpx;
                    margin-right: 33rpx;
                }
            }
        }
		
		.list__item:last-child {
		    .list__left {
		        image {
		            width: 28rpx;
		            height: 28rpx;
		            margin-right: 33rpx;
		        }
		    }
		}

        .list__item:nth-last-of-type(1)::before {
            content: '';
            background: transparent
        }
    }

    .ps__btn {
        margin-top: 20rpx;
        width: 100%;
        height: 100rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
        border-radius: 20rpx;
        text-align: center;
        line-height: 100rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
    }
}
</style>
