|
|
@@ -2,8 +2,14 @@
|
|
|
<view class="content">
|
|
|
<view class="bgc">
|
|
|
<view class="content1">
|
|
|
- <view class="left">
|
|
|
- <image :src="dataObj.circleHead" mode="aspectFill" class="img"></image>
|
|
|
+ <view class="left relative">
|
|
|
+ <image :src="dataObj.circleHead?dataObj.circleHead:'../../static/imgs/logo.png'" mode="aspectFill" class="img"></image>
|
|
|
+ <view class="share">
|
|
|
+ <button class="shareBtn" type="default" data-name="shareBtn" open-type="share">
|
|
|
+ <image style='width:30rpx;height:30rpx;position: absolute;top: 2px;right: 2px;' src="@/static/imgs/share1.png" mode="aspectFill">
|
|
|
+ </image>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<view class="top flex flex-between">
|
|
|
@@ -40,7 +46,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="relative" style='top:150px;'>
|
|
|
- <mescroll-uni height='1200' :up="upOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback" >
|
|
|
+ <mescroll-uni height='1200' :up="upOption" :down="downOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback" >
|
|
|
<view class="content3" v-for="(item,index) in changeCardList"
|
|
|
:style="item.currentBackground?'background:url('+item.currentBackground+');background-size:100% 100%':''"
|
|
|
:key="index">
|
|
|
@@ -91,26 +97,111 @@
|
|
|
<u-modal :show="isShowChangeCard" content='确定交换名片？' @confirm="$u.debounce(confirmChangeSubmit, 500)"
|
|
|
showCancelButton @cancel="isShowChangeCard=false" @close="isShowChangeCard=false"
|
|
|
closeOnClickOverlay></u-modal>
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <u-modal :show="showAuthorizePhone" :showConfirmButton="false">
|
|
|
+ <view class="slot-content">
|
|
|
+ <view class="auth-card">
|
|
|
+ <view class="">
|
|
|
+ <img class="avatar-img" src="@/static/imgs/logo.png" mode="widthFix">
|
|
|
+ </view>
|
|
|
+ <view class="content">手机登录后才能查看名片哦~</view>
|
|
|
+ </view>
|
|
|
+ <view class="auth-btncard">
|
|
|
+ <view class="btn-unok">
|
|
|
+ <u-button :customStyle="customStyleUnOk" @click="showAuthorizePhone=false" :plain="true">
|
|
|
+ 拒绝</u-button>
|
|
|
+ </view>
|
|
|
+ <view class="btn-ok">
|
|
|
+ <u-button :customStyle="customStyleOk" open-type="getPhoneNumber"
|
|
|
+ @getphonenumber="getPhoneNumber"> 立即登录</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-modal>
|
|
|
+ <u-modal :show="showAuthorizeUser" :showConfirmButton="false">
|
|
|
+ <view class="slot-content">
|
|
|
+ <view class="auth-card">
|
|
|
+ <view class="">
|
|
|
+ <img class="avatar-img" src="/static/imgs/logo.png" mode="widthFix">
|
|
|
+ </view>
|
|
|
+ <view class="content">邀请您补全个人信息<br></br>（昵称、头像）</view>
|
|
|
+ <view style="margin-left: 100rpx;margin-right: 100rpx">
|
|
|
+ <u-form :model="userInfo" ref="uForm">
|
|
|
+ <u-form-item label="头像">
|
|
|
+ <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
|
|
|
+ slot="right">
|
|
|
+ <image class="avatar"
|
|
|
+ :src="userInfo.head?userInfo.head:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'">
|
|
|
+ </image>
|
|
|
+ </button>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="昵称">
|
|
|
+ <u-input inputAlign='right' v-model="userInfo.nickname" class="weui-input"
|
|
|
+ @blur="userNameInput" placeholder="请输入昵称" border="false" />
|
|
|
+ <!-- <input type="nickname" :value="userInfo.nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称"/> -->
|
|
|
+ </u-form-item>
|
|
|
+ </u-form>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="auth-btncard">
|
|
|
+ <view class="btn-unok"><u-button :customStyle="customStyleUnOk" @click="authUser(0)">
|
|
|
+ 拒绝</u-button>
|
|
|
+ </view>
|
|
|
+ <view class="btn-ok">
|
|
|
+ <u-button :customStyle="customStyleOk" @click="authUser(1)"> 允许</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-modal>
|
|
|
+ <!-- #endif -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ var that;
|
|
|
+ import {
|
|
|
+ pathToBase64,
|
|
|
+ base64ToPath
|
|
|
+ } from 'image-tools'
|
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
|
export default {
|
|
|
mixins: [MescrollMixin], // 使用mixin
|
|
|
data() {
|
|
|
return {
|
|
|
+ showAuthorizeUser: false,
|
|
|
+ showAuthorizePhone: false,
|
|
|
+ customStyleUnOk: {
|
|
|
+ marginTop: '20rpx',
|
|
|
+ color: '#18254C',
|
|
|
+ border: '2px solid #18254C',
|
|
|
+ "border-radius": "10px",
|
|
|
+ fontSize: "32rpx"
|
|
|
+ },
|
|
|
+ customStyleOk: {
|
|
|
+ marginTop: '20rpx',
|
|
|
+ color: '#fff',
|
|
|
+ border: '2px solid #18254C',
|
|
|
+ "border-radius": "10px",
|
|
|
+ fontSize: "32rpx",
|
|
|
+ background: "#18254C"
|
|
|
+ },
|
|
|
+ userInfo: {
|
|
|
+ head: '',
|
|
|
+ nickname: '',
|
|
|
+ phone: '',
|
|
|
+ },
|
|
|
+ downOption: {
|
|
|
+ auto: false,
|
|
|
+ textColor: '#bbb'
|
|
|
+ },
|
|
|
upOption: {
|
|
|
page: {
|
|
|
size: 10 // 每页数据的数量,默认10
|
|
|
},
|
|
|
auto: false,
|
|
|
noMoreSize: 1,
|
|
|
- empty: {
|
|
|
- tip: '暂无相关数据'
|
|
|
- },
|
|
|
- textNoMore:'没有更多了~',
|
|
|
- textColor:'#bbb'
|
|
|
+ textNoMore: '没有更多了~',
|
|
|
+ textColor: '#bbb'
|
|
|
},
|
|
|
selectIndex: 0,
|
|
|
isShowChangeCard: false,
|
|
|
@@ -120,7 +211,6 @@
|
|
|
cardNum: '',
|
|
|
circleLabel: []
|
|
|
},
|
|
|
- userInfo: {},
|
|
|
canReset: false,
|
|
|
cardList: [],
|
|
|
isShowCard: false,
|
|
|
@@ -136,19 +226,64 @@
|
|
|
selectRowCard: {}
|
|
|
};
|
|
|
},
|
|
|
- onShow() {
|
|
|
- this.$nextTick(function() {
|
|
|
- this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页
|
|
|
- this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题
|
|
|
- this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
|
|
|
- });
|
|
|
+ onShow() {debugger
|
|
|
+ if (uni.getStorageSync("userInfo").phone) {
|
|
|
+ this.$nextTick(function() {
|
|
|
+ that.mescroll.resetUpScroll()
|
|
|
+ });
|
|
|
+ }else {
|
|
|
+ this.showAuthorizePhone = true
|
|
|
+ }
|
|
|
},
|
|
|
- onLoad(options) {
|
|
|
+ onLoad(options) {debugger
|
|
|
+ that = this
|
|
|
console.log(options)
|
|
|
+ this.id = options.val
|
|
|
this.userInfo = uni.getStorageSync("userInfo")
|
|
|
- this.id = options.val
|
|
|
+
|
|
|
+ },
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ if (res.from === 'button') {
|
|
|
+ let path = `/pages/circle/detail?val=${that.dataObj.id}`
|
|
|
+ return {
|
|
|
+ title:`${that.userInfo.nickname}邀请您加入${that.dataObj.circleName}圈子`,
|
|
|
+ path: path,
|
|
|
+ };
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
+ //获取昵称输入内容
|
|
|
+ userNameInput(e) {
|
|
|
+ this.userInfo.nickname = e.detail.value
|
|
|
+ },
|
|
|
+ async onChooseAvatar(e) {
|
|
|
+ this.$set(this.userInfo, "head", await this.toBase64(e.detail.avatarUrl))
|
|
|
+ },
|
|
|
+ toBase64(url) {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ pathToBase64(url).then(path => {
|
|
|
+ resolve(path);
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async authUser(type) {
|
|
|
+ //同步信息，没有头像和昵称自动生成
|
|
|
+ this.userInfo = await this.$request.syncInfo(this.userInfo)
|
|
|
+ if (this.userInfo.openId) {
|
|
|
+ uni.setStorageSync("userInfo", that.userInfo)
|
|
|
+ that.showAuthorizeUser = false
|
|
|
+ that.mescroll.resetUpScroll()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getPhoneNumber(e) {
|
|
|
+ that.userInfo = await this.$request.wxlogin()
|
|
|
+ that.userInfo.phone = await this.$request.getPhone(e, that.userInfo)
|
|
|
+ this.showAuthorizePhone = false
|
|
|
+ this.showAuthorizeUser = true
|
|
|
+
|
|
|
+ },
|
|
|
toHome(item){
|
|
|
uni.navigateTo({
|
|
|
url:'/pages/circle/lookHome?id='+item.personalHomeId
|
|
|
@@ -396,7 +531,7 @@
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
+<style lang="scss" scoped>
|
|
|
.bgc {
|
|
|
background-color: #112253;
|
|
|
padding-bottom: 100rpx;
|
|
|
@@ -565,5 +700,73 @@
|
|
|
.line {
|
|
|
text-align: center;
|
|
|
}
|
|
|
+ .shareBtn{
|
|
|
+ background-color: #9E9E9E !important;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 30rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ width: 40rpx;
|
|
|
+ border-radius: 0 10px 0 27rpx;
|
|
|
+ }
|
|
|
+ .slot-content {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-btncard {
|
|
|
+ display: flex !important;
|
|
|
+ justify-content: space-between !important;
|
|
|
+
|
|
|
+ .btn-unok {
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-ok {
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-card {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .avatar-img {
|
|
|
+ width: 250rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1A1A1A;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .avatar-wrapper {
|
|
|
+ color: #333 !important;
|
|
|
+ border: none !important;
|
|
|
+ border-radius: 0 !important;
|
|
|
+ background-color: transparent !important;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar-wrapper::after {
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-popup__content {
|
|
|
+ border-radius: 20rpx !important;
|
|
|
+ }
|
|
|
</style>
|
