203 lines
4.8 KiB
Vue
203 lines
4.8 KiB
Vue
<template>
|
||
<view class="wechat-contact-page">
|
||
<!-- 顶部导航栏 -->
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
title="微信关联"
|
||
@clickLeft="goBack"
|
||
fixed
|
||
color="#8B2316"
|
||
height="140rpx"
|
||
:border="false"
|
||
backgroundColor="#eeeeee"
|
||
></uni-nav-bar>
|
||
|
||
<!-- 微信卡片 -->
|
||
<view class="card" v-if="isBoundWechat">
|
||
<view class="wx-left">
|
||
<up-image :src="wxIcon" width="120rpx" height="120rpx" mode="aspectFill"></up-image>
|
||
</view>
|
||
<view class="wx-center">
|
||
<view class="wx-title">微信</view>
|
||
<view class="wx-sub">{{ nickname }}</view>
|
||
</view>
|
||
<view class="wx-right">
|
||
<button class="bind-btn" @click="onUnBind">解绑</button>
|
||
</view>
|
||
</view>
|
||
<view class="card" v-else>
|
||
<view class="wx-left">
|
||
<up-image :src="wxIcon" width="120rpx" height="120rpx" mode="aspectFill"></up-image>
|
||
</view>
|
||
<view class="wx-center">
|
||
<view class="wx-title">微信</view>
|
||
<view class="wx-sub">未绑定微信</view>
|
||
</view>
|
||
<view class="wx-right">
|
||
<button class="bind-btn" @click="onBind">绑定</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作说明 -->
|
||
<view class="tips">
|
||
<view class="tips-title">操作说明:</view>
|
||
<view class="tips-line">1. 肝胆相照注册账号与微信绑定，肝胆相照相关直播、视频无忧随心看</view>
|
||
<view class="tips-line">2. 仅需操作一次，后续通过微信观看直播、视频无需额外操作，立即进入</view>
|
||
<view class="tips-line">
|
||
若您有任何疑问或需要我们协助，请与您的小助手联系或直接微信联系
|
||
<text class="highlight">igandan1000</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import {onShow} from "@dcloudio/uni-app";
|
||
import wxIcon from '@/static/wechat.png';
|
||
import my_api from '@/api/my_api.js'
|
||
const isBoundWechat = ref(false)
|
||
const unionid = ref('')
|
||
const openid = ref('')
|
||
const nickname = ref('')
|
||
const goBack = () => {
|
||
uni.navigateBack();
|
||
};
|
||
|
||
const onBind = () => {
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: function (loginRes) {
|
||
// 登录成功
|
||
uni.getUserInfo({
|
||
provider: 'weixin',
|
||
success: function(info) {
|
||
// 获取用户信息成功, info.authResult保存用户信息
|
||
console.log(info.userInfo)
|
||
my_api.bindWechat({openid:info.userInfo.openId,unionid:info.userInfo.unionId,nickname:info.userInfo.nickName}).then(res=>{
|
||
console.log("111: ",res)
|
||
if (res.code === 200 || res.code === '200') {
|
||
uni.showToast({
|
||
title: '绑定成功',
|
||
icon: 'success'
|
||
})
|
||
isBoundWechat.value = true
|
||
unionid.value = info.userInfo.unionId
|
||
openid.value = info.userInfo.openId
|
||
nickname.value = info.userInfo.nickName
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg || '绑定失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}).catch(err=>{
|
||
console.log(err)
|
||
uni.showToast({
|
||
title: '绑定失败',
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
fail: function (err) {
|
||
// 登录授权失败
|
||
// err.code是错误码
|
||
console.log(err)
|
||
}
|
||
});
|
||
}
|
||
|
||
const getIsBoundWechat = async () => {
|
||
const res = await my_api.isBoundWechat()
|
||
console.log(res)
|
||
if (res.code === 200 || res.code === '200') {
|
||
isBoundWechat.value = res.isBound == 1
|
||
unionid.value = res.unionid
|
||
openid.value = res.openid
|
||
nickname.value = res.nickname
|
||
}
|
||
}
|
||
|
||
const onUnBind = async () => {
|
||
|
||
uni.showModal({
|
||
title: '解绑微信',
|
||
content: '确定要解绑微信吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
my_api.unBindWechat({"unionid":unionid.value}).then(res=>{
|
||
console.log(res)
|
||
if (res.code === 200 || res.code === '200') {
|
||
uni.showToast({
|
||
title: '解绑成功',
|
||
icon: 'success'
|
||
})
|
||
isBoundWechat.value = false
|
||
}
|
||
else{
|
||
uni.showToast({
|
||
title: res.msg || '解绑失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
getIsBoundWechat()
|
||
})
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
onShow(() => {
|
||
getIsBoundWechat()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.wechat-contact-page {
|
||
min-height: 100vh;
|
||
background: #f7f7f7;
|
||
|
||
}
|
||
|
||
.card {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #ffffff;
|
||
|
||
padding: 30rpx;
|
||
border-bottom: 2rpx solid #f0f0f0;
|
||
.wx-left { margin-right: 24rpx; }
|
||
.wx-center {
|
||
flex: 1;
|
||
.wx-title { font-size: 34rpx; color: #222222; }
|
||
.wx-sub { margin-top: 10rpx; font-size: 26rpx; color: #9e9e9e; }
|
||
}
|
||
.wx-right {
|
||
.bind-btn {
|
||
min-width: 140rpx;
|
||
height: 64rpx;
|
||
background: #2ecc71;
|
||
color: #ffffff;
|
||
border: none;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
padding: 0 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
padding: 30rpx;
|
||
background: #f7f7f7;
|
||
.tips-title { font-size: 30rpx; color: #222222; margin-bottom: 16rpx; }
|
||
.tips-line { font-size: 28rpx; color: #666666; line-height: 1.8; margin-bottom: 10rpx; }
|
||
.highlight { color: #e53935; }
|
||
}
|
||
</style>
|