youngee_c_web_v2/page_mycenter/bindaccounts/douyinbind.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>
		<view class="home">
			<view class="card" v-if="!loading">
				<view class="head">
					<image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/pingtai2.png" mode="aspectFill">
					</image>
					<span>抖音账号绑定</span>
				</view>

				<view class="body">

					<view>

						<!-- 放用户信息 -->
						<view>
							<p>用户抖音平台头像昵称等信息展示</p>
							<p>用户抖音平台头像昵称等信息展示</p>
							<p>用户抖音平台头像昵称等信息展示</p>
						</view>


						<!-- 分割线 -->
						<view class="heng-line"></view>

						<!-- 点击弹窗 toggle(触发)-->
						<button class="btn1" @click="getqrcode('center')">
							添加抖音账号</button>
					</view>
					
					
					
				</view>
			</view>
		</view>
		<!-- 普通弹窗  公众号-->
		<uni-popup ref="popup4" class="share" background-color="#fff" @change="change" :maskClick="true">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="sharepage">
					<view class="projecttext1">
						<span>抖音账号登录</span>
					</view>
					<view class="sharetxt">
						<text style="color:#9a9a9a ;">
							截屏或下载二维码，使用抖音APP\n
							打开[首页-搜索-扫一扫]后扫码进行
						</text>
					</view>
					<view class="sharemap">
						<!-- <image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/kefu.jpeg"
							style="width: 400rpx;height: 400rpx;" mode=""></image> -->
						<image :src="qrcodeURL" style="width: 300rpx;height: 300rpx;" mode=""></image>

					</view>
					<view style="margin: 30rpx 0;">
						<button class="butmin1" size="mini" @tap="freshqrcode">刷新二维码(300s后到期)</button>
					</view>
					<!-- 
					·同步账号基础信息及查看账号运营数据\n
					·获得免费领样权限\n
					·获得承接抖音悬赏任务权限\n
					·为达人橱窗快速选品\n
					·为直播带货快速选品\n
					·样叽专属高佣商品，同一商品，更高佣金\n
					·变现种草任务参与资质\n -->
					<view class="importentInfo1">
						<view class="sharetxt1" style="font-size: 22rpx;">
							<text style="white-space: pre-line; text-align: left;line-height: 1;">
								登录成功后： \n
								·同步账号基础信息及查看账号运营数据\n
								·获得免费领样权限\n
								·获得承接抖音悬赏任务权限\n
								·为达人橱窗快速选品\n
								·为直播带货快速选品\n
								·样叽专属高佣商品，同一商品，更高佣金\n
								·变现种草任务参与资质\n
							</text>
						</view>
					</view>

					<view style="margin: 30rpx 0;">
						<button class="butmin" size="mini" @tap="saveImage">下载二维码至手机</button>
					</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
	import getPolicyEncode from '@/components/obs/getPolicy.js';
	import getSignature from '@/components/obs/GetSignature.js';
	export default {
		components: {
			mvBar,
			htzImageUpload,
		},
		data() {
			return {

				qrcodeURL: '', // 用来保存二维码URL的变量

				navH: getApp().globalData.navHeight,
				hasClicked: false,
				loading: true,
				accountId: '',
				platform: {
					platform_id: '',
					platform_name: '',
					platform_icon: '',
				},
				isBind: true,
				imageData: [],
				formData: {
					platform_nickname: '',
					fans_count: '',
					home_page_url: '',
					home_page_capture_url: ''
				},
				// 二维码地址
				imageUrl: '',
				index: 0,
				fansLabel: "选择单位",
				fansCount: null,
				fansCountInfo: 1,
				fansRange: [{
						value: 1,
						label: '个'
					},
					{
						value: 10000,
						label: '万'
					},
					{
						value: 100000000,
						label: '亿'
					}
				],

				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "社媒账号绑定",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: '',
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				}, // 密码登录校验规则
				bindRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入昵称'
						}]
					},
					home_img: {
						rules: [{
							required: true,
							errorMessage: '请上传主页截图',
						}]
					}
				},
				urlRegList: [
					/(.*)http(s?)\:\/\/((www\.)?)(xiaohongshu\.com)(.*)/,
					/(.*)http(s?)\:\/\/((www\.)?)((v\.)?)(douyin\.com)(.*)/,
					/(.*)http(s?)\:\/\/((www\.)?)((m\.)?)(weibo\.(com|cn))(.*)/,
					/(.*)http(s?)\:\/\/((www\.)?)((v|kpfshanghai)\.m\.chenzhongtech\.com)(.*)/,
					/(.*)http(s?)\:\/\/((www\.)?)(b23\.tv)(.*)/,
					/(.*)http(s?)\:\/\/((www\.)?)((m\.)?)(dianping\.(com|cn))(.*)/,
					/(.*)http(s?)\:\/\/((www\.)?)(zhihu\.com)(.*)/,
				]
			}
		},
		onReady() {},
		async onShow() {},
		async onLoad(options) {
			this.platform.platform_id = parseInt(options.platform_id)
			if (options.account_id) {
				this.accountId = parseInt(options.account_id)
				this.isBind = false
			}
			this.loading = true;
			uni.showLoading({
				title: '加载中'
			});
			await this.getinfo();
			if (!this.isBind) {
				await this.getaccount()
			};
			this.loading = false;
			uni.hideLoading();
		},
		methods: {
			// 获得二维码
			getqrcode(type) {
				this.type4 = type;
				this.$refs.popup4.open(type);
				console.log('into func*************');
				uni.request({
					url: 'https://open.douyin.com/oauth/get_qrcode/?passport_jssdk_version=1.0.13&passport_jssdk_type=pro&aid=1128&language=zh&client_key=awi77xl5kpl16hmi&scope=user_info%2Ctrial.whitelist&next=https%3A%2F%2Fwww.younggee.com%2Fdouyinauth&jump_type=native&optional_scope_check=&optional_scope_uncheck=&customize_params=%7B%22comment_id%22%3A%22%22%2C%22source%22%3A%22pc_auth%22%2C%22not_skip_confirm%22%3A%22true%22%2C%22enter_from%22%3A%22%22%7D&account_sdk_source=web&account_sdk_source_info=7e276d64776172647760466a6b66707777606b667c273f3d292772606761776c736077273f63646976602927756970626c6b76273f5e27466d776a68602555414325556970626c6b272927466d776a68602555414325536c6072607727582927756077686c76766c6a6b76273f5e7e276b646860273f2762606a696a6664716c6a6b2729277671647160273f2775776a6875712778297e276b646860273f276b6a716c636c6664716c6a6b762729277671647160273f2775776a6875712778297e276b646860273f27736c61606a5a666475717077602729277671647160273f2775776a6875712778297e276b646860273f276470616c6a5a666475717077602729277671647160273f2775776a68757127785829276c6b6b60774d606c626d71273f31333729276c6b6b6077526c61716d273f343c373529276a707160774d606c626d71273f3435363529276a70716077526c61716d273f343c343d292767606d64736c6a77273f7e27716a70666d273f63646976602927686a707660273f7177706029276e607c476a647761273f717770607829277260676269273f7e27736077766c6a6b273f27526067424925342b35252d4a75606b424925405625372b3525466d776a686c70682c27292773606b616a77273f275260674e6c7127292777606b6160776077273f275260674e6c7125526067424927782927776074706076715a6d6a7671273f276a75606b2b616a707c6c6b2b666a68272927776074706076715a7564716d6b646860273f272a75696471636a77682a6a6470716d2a666a6b6b6066712a2778&passport_ztsdk=3.0.18&passport_verify=1.0.12&biz_trace_id=c8fab9c7&sign=522f8cd42965082a746c62fccfa426c5e2cc6ab2f4f13be00e433f68aa51eeb8&qs=6466666a706b715a76616e5a766a70776660296466666a706b715a76616e5a766a707766605a6c6b636a29646c6129676c7f5a71776466605a6c612966696c606b715a6e607c29667076716a686c7f605a756477646876296f7068755a717c75602969646b6270646260296b607d71296a75716c6a6b64695a76666a75605a666d60666e&msToken=DDc81_VkM-V4QJaHKg2C2Lvg5f-6Agu5VDxr9qnaheVbVQJpbU5KxsDtmpcgi20Vx1oWHiVypYFKXCiTyY-lofrSzcWtJNjZzzFek5r8scIhiFTzh1h3nOFayJFCqHo%3D&a_bogus=DjWwBR0XmDIPffWk51VLfY3q3UH3YDtV0afLMDg1VVvCj639HMTm9exL4HTvdWRjLT%2FAIegjy4hbO3xprQQ90Hwf7WhO%2F2CZmy00cMlM59TjUZ4nCfumE0DF-vUUSaBB5vlUrOXgqXlHFbYsAnAn4XKUbfqca1hMHjkrPVrUfptsH6W%3D',
					method: 'GET',
					success: (res) => {
						// 将响应结果存储在data中的变量中，以便在页面上显示或打印
						this.qrcodeURL = 'data:image/png;base64,' + res.data.data.qrcode;
						console.log("res    ", res); // 可以在控制台打印响应结果
						console.log("this.qrcodeURL   ", this.qrcodeURL); // 可以在控制台打印响应结果
					}
				})
			},
			// 刷新二维码 下面的url一周时间左右以后，持续请求报错非法请求
			freshqrcode() {
				uni.request({
					url: 'https://open.douyin.com/oauth/get_qrcode/?passport_jssdk_version=1.0.13&passport_jssdk_type=pro&aid=1128&language=zh&client_key=awi77xl5kpl16hmi&scope=user_info%2Ctrial.whitelist&next=https%3A%2F%2Fwww.younggee.com%2Fdouyinauth&jump_type=native&optional_scope_check=&optional_scope_uncheck=&customize_params=%7B%22comment_id%22%3A%22%22%2C%22source%22%3A%22pc_auth%22%2C%22not_skip_confirm%22%3A%22true%22%2C%22enter_from%22%3A%22%22%7D&account_sdk_source=web&account_sdk_source_info=7e276d64776172647760466a6b66707777606b667c273f3d292772606761776c736077273f63646976602927756970626c6b76273f5e27466d776a68602555414325556970626c6b272927466d776a68602555414325536c6072607727582927756077686c76766c6a6b76273f5e7e276b646860273f2762606a696a6664716c6a6b2729277671647160273f2775776a6875712778297e276b646860273f276b6a716c636c6664716c6a6b762729277671647160273f2775776a6875712778297e276b646860273f27736c61606a5a666475717077602729277671647160273f2775776a6875712778297e276b646860273f276470616c6a5a666475717077602729277671647160273f2775776a68757127785829276c6b6b60774d606c626d71273f31333729276c6b6b6077526c61716d273f343c373529276a707160774d606c626d71273f3435363529276a70716077526c61716d273f343c343d292767606d64736c6a77273f7e27716a70666d273f63646976602927686a707660273f7177706029276e607c476a647761273f717770607829277260676269273f7e27736077766c6a6b273f27526067424925342b35252d4a75606b424925405625372b3525466d776a686c70682c27292773606b616a77273f275260674e6c7127292777606b6160776077273f275260674e6c7125526067424927782927776074706076715a6d6a7671273f276a75606b2b616a707c6c6b2b666a68272927776074706076715a7564716d6b646860273f272a75696471636a77682a6a6470716d2a666a6b6b6066712a2778&passport_ztsdk=3.0.18&passport_verify=1.0.12&biz_trace_id=c8fab9c7&sign=522f8cd42965082a746c62fccfa426c5e2cc6ab2f4f13be00e433f68aa51eeb8&qs=6466666a706b715a76616e5a766a70776660296466666a706b715a76616e5a766a707766605a6c6b636a29646c6129676c7f5a71776466605a6c612966696c606b715a6e607c29667076716a686c7f605a756477646876296f7068755a717c75602969646b6270646260296b607d71296a75716c6a6b64695a76666a75605a666d60666e&msToken=DDc81_VkM-V4QJaHKg2C2Lvg5f-6Agu5VDxr9qnaheVbVQJpbU5KxsDtmpcgi20Vx1oWHiVypYFKXCiTyY-lofrSzcWtJNjZzzFek5r8scIhiFTzh1h3nOFayJFCqHo%3D&a_bogus=DjWwBR0XmDIPffWk51VLfY3q3UH3YDtV0afLMDg1VVvCj639HMTm9exL4HTvdWRjLT%2FAIegjy4hbO3xprQQ90Hwf7WhO%2F2CZmy00cMlM59TjUZ4nCfumE0DF-vUUSaBB5vlUrOXgqXlHFbYsAnAn4XKUbfqca1hMHjkrPVrUfptsH6W%3D',
					method: 'GET',
					success: (res) => {
						// 将响应结果存储在data中的变量中，以便在页面上显示或打印
						this.qrcodeURL = 'data:image/png;base64,' + res.data.data.qrcode;
						console.log("refresh    ", res); // 可以在控制台打印响应结果
						console.log("freshqrcodeURL   ", this.qrcodeURL); // 可以在控制台打印响应结果
					}
				})
			},
			//弹出层
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			// 保存图片
			async saveImage() {
				// showToast('保存成功')
				wx.downloadFile({
					url: 'https://horastar.obs.cn-east-3.myhuaweicloud.com/talent/pingtai2u',
					success: function(res) {
						wx.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(data) {
								wx.showToast({
									title: "保存成功",
									icon: "success",
									duration: 2000
								})
							},
							fail: function(err) {
								console.log(err);
							},
							complete(res) {
								console.log(res);
							}
						})
					}
				})
			},
			closepop() {
				this.$refs.popup4.close()
			},

			// 默认信息表，获取平台logo
			getinfo() {
				return this.$https.get('/youngee/c/g/get-info-tables')
					.then(res => {
						let list = res.data.data.ThirdPlatform
						for (var i = 0; i < list.length; ++i) {
							if (list[i].id == this.platform.platform_id) {
								this.platform.platform_icon = list[i].platform_icon
								this.platform.platform_name = list[i].platform_name
							}
						}
					})
			},
			getaccount() {
				return this.$https.get('/youngee/c/t/g/get-talent-account')
					.then(res => {
						console.log(res)
						if (res.data.code !== -3) {
							this.account = res.data.data
							this.imageData = []
							for (var i = 0; i < this.account.length; i++) {
								if (this.platform.platform_id == this.account[i].platform_id) {
									this.hasClicked = true
									this.formData.platform_nickname = this.account[i].platform_nickname
									this.formData.fans_count = this.account[i].fans_count
									this.formData.home_page_url = this.account[i].home_page_url
									this.imageData.push(this.account[i].home_page_capture_url);

									if (this.formData.fans_count >= 100000000) {
										this.index = 2
										this.fansCountInfo = this.fansRange[this.index].value;
										this.fansLabel = this.fansRange[this.index].label;
										this.fansCount = (this.formData.fans_count / 100000000).toFixed(1)
									} else if (this.formData.fans_count >= 10000) {
										this.index = 1
										this.fansCountInfo = this.fansRange[this.index].value;
										this.fansLabel = this.fansRange[this.index].label;
										this.fansCount = (this.formData.fans_count / 10000).toFixed(1)
									} else {
										this.index = 0
										this.fansCountInfo = this.fansRange[this.index].value;
										this.fansLabel = this.fansRange[this.index].label;
										this.fansCount = this.formData.fans_count
									}
								}
							}
						}
					})
			},

			exit() {
				uni.navigateBack()
			},
			// 粉丝量量级选择
			bindPickerChange: function(e) {
				if (this.index !== e.detail.value) {
					this.fansCount = null
				}
				this.index = e.detail.value;
				this.fansLabel = this.fansRange[this.index].label
				this.fansCountInfo = this.fansRange[this.index].value
			},
			ceshiChooseSuccess(tempFilePaths, e) { //选择图片返回
				console.log('ceshiChooseSuccess', tempFilePaths, e);
				if (e == 0) {
					this.store = 'talent_upload/' + this.guid() + '.png'
					// this.store = 'talent_upload/icon-whole-pipline.png'
					// this.store = 'youngee/talent_upload/icon-edit.2png'
				} else if (e == 1) {
					this.store = 'talent_upload/' + this.guid() + '.mp4'
				}
				/****************
				以下代码是自定义上传逻辑，仅供参考
				***************/
				this.imgUpload(tempFilePaths);
				/*******************************/
			},
			imgUpload(tempFilePaths) {
				let that = this
				let config = {
					AccessKeyId: 'IVW21DTGIIUBBAGXKK0Y', //AK
					SecretKey: 'Y01nEQNcLOATMw7uJwrk3yOdQZ2fqLhSnXcOKVDE', //SK
					EndPoint: 'https://horastar.obs.cn-east-3.myhuaweicloud.com', //上传文件的路径
				};
				let fileName = this.store; //指定上传到OBS桶中的对象名
				let OBSPolicy = { //设定policy内容
					"expiration": "2089-12-31T12:00:00.000Z",
					"conditions": [{
							"bucket": "horastar"
						}, //Bucket name
						// {"bucket": "goin"}, 
						{
							'key': fileName
						}
					]
				}

				let policyEncoded = getPolicyEncode(OBSPolicy); //计算policy编码值
				let signature = getSignature(policyEncoded, config.SecretKey); //计算signature 
				uni.uploadFile({
					//url: config.EndPoint,
					url: config.EndPoint,
					filePath: tempFilePaths[0],
					name: 'file',

					formData: {
						'AccessKeyID': config.AccessKeyId,
						'policy': policyEncoded,
						'signature': signature,
						'key': fileName,
					},

					success: function(res) {
						console.log("res", res); //打印响应状态码
						if (res.statusCode == 204) {
							// that.imageData.push(config.EndPoint + '/' + fileName);
							let obs_url = config.EndPoint + '/' + fileName; //用你自己的 bucket 名替换星号							
							that.imageData.push(obs_url)
							that.formData.home_page_capture_url = obs_url
							uni.showToast({
								title: '上传成功',
								icon: '成功'
							});
						} else {
							uni.showToast({
								title: '上传失败',
								icon: '失败'
							});
						}
					},
					fail: function(e) {
						console.log(e);
						uni.showToast({
							title: '上传失败',
							icon: '失败'
						});
					}
				})
			},
			guid() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = Math.random() * 16 | 0,
						v = c == 'x' ? r : (r & 0x3 | 0x8);

					return v.toString(16);
				});
			},
			onInput(e) {
				console.log(e)
				e = (e.match(/^\d*(\.?\d{0,1})/g)[0]) || null
				// //重新赋值给input
				if (e < 0 || e > 9999.9) {
					uni.showToast({
						title: '请输入[1,9999.9]区间内的数',
						icon: 'none'
					})
					console.log('请输入[1,9999.9]区间内的数')
				}
				this.$nextTick(() => {
					this.fansCount = (e > 0 && e <= 9999.9) ? e : null
				})
			},
			onInput1(e) {
				// 验证是否是纯数字
				const isNumber = /^\d*$/.test(e)
				// 过滤非数字
				e = e.replace(/\D/g, '')
				if (!isNumber || e < 0 || e > 9999) {
					uni.showToast({
						title: '请输入[0,9999]区间的整数',
						icon: 'none'
					})
					console.log('请输入[0,9999]区间的整数')
				}
				this.$nextTick(() => {
					this.fansCount = (e >= 0 && e <= 9999 && e.match(/^\d*/g)[0]) ? e : null
				})
			}
		},
	}
</script>

<style>
	/deep/ .share .uni-popup .uni-popup__wrapper {
		width: 70% !important;
		border-radius: 15rpx !important;
	}
</style>
<style lang="scss" scoped>
	.importentInfo1 {
		margin-left: 59rpx;
		background-color: #efefef;
		border-radius: 8px;
		height: 370rpx;
		width: 400rpx;
	}


	// 主体样式
	.card {
		padding: 24rpx;
		margin-top: 30rpx;
		border: 1rpx solid #F0D232;
		background-color: #ffffff;
		margin: 0 10rpx;
	}

	.head {
		padding-top: 5%;
		padding: 0 0 0 1%;
		height: 80rpx;
		margin-top: 2%;
	}

	.head span {
		color: #333333;
		font-size: 80%;
		font-weight: 550;
		text-indent: 2em;

	}

	.head image {
		vertical-align: middle;
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
		padding-right: 14rpx;
	}

	.home-link {
		/deep/.uni-easyinput__content-input {
			background-color: #EBEBEB;
			border-radius: 15rpx;
		}
	}


	.heng-line {
		margin-top: 60rpx;
		margin-bottom: 50rpx;
		border-bottom: 1rpx solid #DCDCDC;
	}

	.signupbtn p {
		font-size: 30rpx;
	}

	.exit-btn {
		width: 200rpx;
		text-align: center;
		padding: 10rpx 30rpx;
		background-color: #C0C0C0;
		border: 0;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 180%;
	}

	.btn1 {
		margin: 30rpx;
		font-size: 35rpx;
		color: #000;
		background-color: #F0D232;
		border: none;
		border-radius: 0;
	}


	//弹窗
	.share {
		text-align: center;
		line-height: 10rpx;
		margin-top: 10rpx;
	}

	.sharepage {
		// width: 90%;
		margin: 0 auto;
		// position: relative;
	}

	/deep/ .share.uni-popup .uni-popup__wrapper {
		width: 70%;

		border-radius: 15rpx;
	}

	.projecttext1 {
		// padding-top: 5%;
		padding: 0 0 0 1%;
		margin: 5% 0;
		text-align: center;
	}

	.projecttext1 image {
		vertical-align: middle;
		width: 80rpx;
		height: 80rpx;
		display: inline-block;
		padding-right: 14rpx;
	}

	.sharemap {
		margin: 0 auto;
		text-align: center;
		// margin-top: 15%;
		// margin-bottom: 15%;
	}

	.sharemap image {
		width: 400rpx;
		height: 400rpx;

	}

	.sharetxt {
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.sharetxt1 {
		padding: 10rpx;
		height: 345rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.sharetxt text {
		font-size: 24rpx;
		text-align: left;
		line-height: 20rpx
	}

	.butmin {
		// height: 48rpx;
		width: 380rpx;
		height: 65rpx;
		background-color: #FCCF41;
		line-height: 60rpx;
		font-weight: bold;
	}

	.butmin1 {
		// height: 48rpx;
		width: 400rpx;
		background-color: #ffffff;
		border: #000000 10rpx;
		line-height: 48rpx;
		color: #FCCF41;
		font-weight: bold;
		font-size: 20rpx;
	}
</style>