添加 分享圈子

unimall-admin/config/dev.env.js

@@ -1,6 +1,8 @@
 module.exports = {
     NODE_ENV: '"development"',
     ENV_CONFIG: '"dev"',
-    HOST: '"http://192.168.110.138:8182"',
-    BASE_API: '"http://192.168.110.138:8182/m.api"'
-}
+    // HOST: '"http://192.168.110.138:8182"',
+    // BASE_API: '"http://192.168.110.138:8182/m.api"'
+    HOST: '"https://cardapi.eliangeyun.com"',
+    BASE_API: '"https://cardapi.eliangeyun.com/m.api"'
+}

xiaochengxu/pages/circle/detail.vue

@@ -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>