<template> <view class="wrap"> <!-- 弹窗 --> <uni-popup ref="popup" type="center" > <!-- 给一个左边弹窗的样式 --> <!-- 关闭弹窗按钮 --> <view class="closeBtn" @tap="this.$refs.popup.close()" >x</view> <view class="popUpWrap" v-if="whichTap==0" > <text>这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入驻。</text> <!-- 左 --> <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> <!-- 右 --> <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> </view> <view class="popUpWrap" v-if="whichTap==1" > <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> </view> <view class="popUpWrap" v-if="whichTap==2" > <button @tap="chatOur(1)">客服1</button> <button @tap="chatOur(2)">客服2</button> </view> </uni-popup> <!-- <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y style="height: 1000px;" > --> <view v-if="isAuth" class="content" > <view class="userInfo"> <view class="info"> <image :src="headerphoto" mode="aspectFill" ></image> <view class="infoText"> <text class="userName">{{nickName}}</text> </view> </view> <!-- <view class="service"> <image src="../../static/serviceLogo.png" mode="aspectFill"></image> </view> --> </view> <view class="myOpticsData" @tap="toOpticsData" > <view class="left"> <image src="../../static/img/user/dataWrite.png" mode="aspectFit" ></image> <text>验光数据</text> </view> <image src="../../static/right.png" mode="aspectFit" ></image> </view> <view class="myOrder"> <view class="orderHeader" @click="toMyOrder('100000')" > <text>我的订单</text> <view class="btn"> 全部 <image src="../../static/right.png" mode="aspectFit" ></image> </view> </view> <view class="orderBody"> <view class="item waitPay" @click="toMyOrder('100000')" > <image src="../../static/img/user/waitDeliver.png" mode="aspectFit" ></image> <text>待付款</text> </view> <view class="item waitDeliver" @click="toMyOrder('200000')" > <image src="../../static/img/user/waitPay.png" mode="aspectFit" ></image> <text>待收货</text> </view> <view class="item waitReceive" @click="toMyOrder('300000')" > <image src="../../static/img/user/waitReceive.png" mode="aspectFit" ></image> <text>已完成</text> </view> <!-- <view class="item service" @click="toMyOrder('3')"> <image src="../../static/img/user/refound.png" mode="aspectFit"></image> <text>已评价</text> </view> --> </view> </view> <view class="someItem"> <!-- <view class="item"> <view class="left"> <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> <text>推广记录与收益</text> </view> <image src="../../static/right.png" mode="aspectFit"></image> </view> --> <view @tap="toAddress" class="item" > <image src="../../static/address-icon.png" mode="aspectFit" ></image> <view class="left"> <text>地址管理</text> <image class="image2" src="../../static/right.png" mode="aspectFit" ></image> </view> </view> <view @tap="introduce" class="item" > <image src="../../static/img/user/introduce.png" mode="aspectFit" ></image> <view class="left"> <text>系统介绍</text> <image src="../../static/right.png" mode="aspectFit" ></image> </view> </view> <view @tap="joinUs" class="item" > <image src="../../static/img/user/joinUs.png" mode="aspectFit" ></image> <view class="left"> <text>加入我们</text> <image src="../../static/right.png" mode="aspectFit" ></image> </view> </view> <view class="item"> <image src="../../static/img/user/service.png" mode="aspectFit" ></image> <view class="left lastLeft"> <text>联系客服</text> <image src="../../static/right.png" mode="aspectFit" ></image> </view> </view> </view> <view class="recommend"> <view class="title"> <view class="line"></view> <view class="text">精选推荐</view> <view class="line"></view> </view> <!-- 商品列表 --> <view class="goods-list"> <!-- <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list" > --> <view class="product-list"> <view class="product" v-for="(item, index) in userRecommandList" :key="index" > <Card :goods="item" :scrollTop="scrollTop" :viewHeight="viewHeight" ></Card> </view> </view> <!-- </scroll-view> --> <view class="loading-text">{{loadingText}}</view> </view> </view> </view> <view v-else class="auth" > <view class="icon"></view> <view class="divider"></view> <view class="title">申请获取以下权限</view> <view class="text">获得您的公开信息(昵称、头像等)</view> <button type="primary" open-type="getUserInfo" @getuserinfo="onGotUserInfo" >授权登陆</button> </view> <!-- </scroll-view> --> </view> </template> <script> import Card from '@/components/CommodityCard/CommodityCard.vue' import store from '@/store' import UniPopup from '@/components/UniPopup/uni-popup.vue' export default { components: { Card, UniPopup, }, data() { return { isAuth: true, // 是否显示授权页面, pagesnum: 1, // 分页请求初始值 whichTap: 0, // 弹窗渲染选择条件 loadingText: '到底了', scrollTop: 0, viewHeight: uni.getSystemInfoSync().windowHeight, } }, onPageScroll({ scrollTop }) { // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 this.scrollTop = scrollTop }, onLoad() { const that = this // 判断是否授权 uni.getSetting({ success(res) { console.log('authSetting', res.authSetting) if (res.authSetting['scope.userInfo'] === true) { that.isAuth = true } else { that.isAuth = false } }, }) store.dispatch('userRecommand/getRecommandList', { uid: that.$store.state.user.userInfo.uid, openid: that.$store.state.user.userInfo.openid, page: that.pagesnum, }) }, onReachBottom() { // console.log('usr-my',this.$store.state.user.userInfo) this.pagesnum++ store.dispatch('userRecommand/getRecommandList', { uid: this.$store.state.user.userInfo.uid, openid: this.$store.state.user.userInfo.openid, page: this.pagesnum, }) }, computed: { nickName() { return this.$store.state.user.userInfo.nickName }, headerphoto() { return this.$store.state.user.userInfo.headerphoto }, userRecommandList() { console.log('userRecommandList=====>', this.$store.state.userRecommand.recommandList) return this.$store.state.userRecommand.recommandList }, }, methods: { // 弹窗 changeTap(item) { this.whichTap = item this.$refs.popup.open() }, chatOur(item) { if (item === 1) { uni.makePhoneCall({ phoneNumber: 13376189297, // 客服1 电话 }) } else { uni.makePhoneCall({ phoneNumber: 18014995101, // 客服2 电话 }) } }, // 授权 onGotUserInfo(e) { if (e.detail.errMsg === 'getUserInfo:ok') { const { fromInfo } = this.$store.state.user // 用户授权成功 store.dispatch('user/getUserInfo', fromInfo) this.isAuth = true } }, toAddress() { uni.navigateTo({ url: '../address/addressList', success: res => {}, fail: () => {}, complete: () => {}, }) }, introduce() { uni.showModal({ content: '这是一款眼镜及周边产品的销售平台,我们将帮您进行建立全球销售网络,欢迎入住。', showCancel: false, }) }, joinUs() { uni.showModal({ content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', showCancel: false, }) }, toMyOrder(status) { uni.navigateTo({ url: `../myOrder/myOrder?status=${status}`, success: res => {}, fail: () => {}, complete: () => {}, }) }, toOpticsData() { uni.navigateTo({ url: '../addOpticsData/addOpticsData', }) }, }, } </script> <style lang="scss"> .warp { font-size: 24rpx; background-color: #f2f2f2; height: 100vh; } .content { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f2f2f2; } .userInfo { background-image: linear-gradient(270deg, #f79067 0%, #ff5f3b 66%); width: 100%; height: 240rpx; color: #ffffff; padding: 60rpx 82rpx 80rpx 44rpx; box-sizing: border-box; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; .info { display: flex; flex-direction: row; justify-content: space-between; align-items: center; image { border-radius: 50rpx; height: 100rpx; width: 100rpx; margin-right: 40rpx; } .infoText { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-scetart; .userName { font-size: 18px; color: #ffffff; margin-bottom: 8rpx; } .nickName { font-size: 12px; color: #ffffff; } } } // .service { // margin-top: 20rpx; // image { // height: 36rpx; // width: 36rpx; // } // } } .myOpticsData { width: 670rpx; height: 120rpx; background-color: #ffffff; border-radius: 6px; box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); position: relative; bottom: 44rpx; padding: 40rpx; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; .left { font-size: 14px; color: #333333; display: flex; align-items: center; image { margin-right: 32rpx; width: 40rpx; height: 44rpx; } } image { height: 16px; width: 8px; } } .myOrder { width: 100%; height: 296rpx; // margin-top: 116rpx; margin-bottom: 20rpx; padding: 0 40rpx; box-sizing: border-box; background: #ffffff; box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); border-radius: 6px; border-radius: 6px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; .orderHeader { width: 100%; height: 100rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5; font-weight: bold; font-size: 18px; color: #333333; .btn { font-size: 12px; color: #999999; display: flex; align-items: center; image { margin-left: 20rpx; height: 32rpx; width: 16rpx; } } } .orderBody { width: 100%; display: flex; flex-direction: row; justify-content: space-around; align-items: center; .item { display: flex; flex-direction: column; align-items: center; image { width: 62rpx; height: 46rpx; } text { margin-top: 24rpx; font-size: 12px; color: #333333; } } } } .someItem { width: 100%; height: 336rpx; background: #ffffff; box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); border-radius: 6px; border-radius: 6px; margin-bottom: 18rpx; box-sizing: border-box; padding: 21rpx 48rpx 21rpx 42rpx; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; align-items: center; .item { display: grid; grid-template-columns: 10% 90%; align-items: center; height: 72rpx; width: 100%; .left { font-size: 14px; color: #333333; display: flex; align-items: center; justify-content: space-between; height: 72rpx; border-bottom: 1px solid #f2f2f2; image { margin-right: 0; height: 16px; width: 8px; } } image { margin-right: 32rpx; width: 40rpx; height: 44rpx; } .lastLeft { border-bottom: none; } } } .recommend { background: #ffffff; box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); border-radius: 6px; border-radius: 6px; width: 100%; .title { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 20rpx 40rpx; .line { width: 264rpx; height: 1rpx; border-bottom: 1px solid #eaeaea; } .text { font-family: PingFangSC-Medium; font-size: 14px; color: #333333; letter-spacing: -0.26px; text-align: justify; line-height: 24px; } } .goods-list { .loading-text { width: 100%; display: flex; justify-content: center; align-items: center; height: 30px; color: #979797; font-size: 12px; } .product-list { width: 92%; padding: 0 4% 3vw 4%; display: flex; justify-content: space-between; flex-wrap: wrap; .product { width: 48%; margin: 0 0 20rpx 0; background: #ffffff; border: 1px solid #f2f2f2; } } } } .auth { height: 100vh; display: flex; flex-direction: column; align-items: center; .icon { width: 140rpx; height: 140rpx; border-radius: 50%; margin-top: 100rpx; background-color: grey; } .divider { height: 1rpx; width: 600rpx; margin-top: 80rpx; background-color: #e6e3e3; } .title { width: 600rpx; margin-top: 50rpx; text-align: left; } .text { width: 600rpx; margin-top: 30rpx; text-align: left; color: #e6e3e3; } button { width: 450rpx; height: 80rpx; line-height: 80rpx; margin-top: 80rpx; border-radius: 30rpx; } } .closeBtn { height: 28rpx; width: 28rpx; // border: 1px solid red; position: absolute; top: 20rpx; right: 10rpx; } </style>