recycle-front/pages/index/index.vue

<template>
  <view class="login-container">
    <!-- 应用标题和副标题 -->
    <view class="app-header">
      <image  src="/static/home/登录.png" mode="aspectFit"></image>
      <view class="app-title">{{  '瀚海回收' }}</view>
      <!-- <view class="app-subtitle">旧物很有用·回收很简单</view> -->
    </view>
    
    <!-- 登录操作区域 -->
    <view class="login-actions">
      <button class="login-btn" @click="handleLogin">登录</button>
      <button class="cancel-btn" @click="handleCancel">取消登录</button>
      
      <view class="agreement">
        <checkbox-group @change="handleAgreementChange" class="radio-group">
          <label class="radio-label">
            <checkbox :checked="agreed" color="#fdbd3e" class="custom-radio"/>
            <text class="agreement-text">我已阅读并同意</text>
            <text class="protocol-link" @click.stop="openProtocol('service')">《服务协议》</text>
            <text class="agreement-text">和</text>
            <text class="protocol-link" @click.stop="openProtocol('privacy')">《隐私政策》</text>
          </label>
        </checkbox-group>
      </view>
	  
    </view>
    
	

		
	<!-- <uv-divider  :dashed = "true"></uv-divider> -->
	
    <!-- <view class="admin-login" @click="goToAdminLogin">管理员登录→</view> -->
	

    <PrivacyPopup 
      ref="privacyPopup"
      :needPhone="needPhone"
      @agree="handleAgreePrivacy"
      @reject="handleRejectPrivacy"
      @open-protocol="openProtocol"
    />
    <ProtocolDialog
      ref="protocolDialog"
      :show="showProtocolDialog"
      :title="protocolDialogTitle"
      :content="protocolDialogContent"
      @close="showProtocolDialog = false"
      @agree="handleProtocolAgree"
      @reject="handleProtocolReject"
    />

  </view>
</template>

<script>
import PrivacyPopup from '@/wxcomponents/privacy-popup/privacy-popup.vue'	
import ProtocolDialog from '@/wxcomponents/protocol-dialog/protocol-dialog.vue'
// import {banner} from  '@/api.uts'
export default {
	 components: {
	    PrivacyPopup,
	    ProtocolDialog
	  },
  data() {
    return {
      agreed: false,
      showProtocolDialog: false,
      protocolDialogTitle: '',
      protocolDialogContent: '',
      configData: [], // 存储 getConfig 返回的 result
      needPhone: false // 控制是否需要手机号授权
    }
  },
  onLoad() {
    this.getConfigData()
  },
  methods: {
    getConfigData() {
      this.$api('getConfig', {}, res => {
        // console.log('Config data response:', JSON.parse(JSON.stringify(res)) )
        if (res && res.success && Array.isArray(res.result)) {
          this.configData = res.result
          console.log('Config data set:',  JSON.parse(JSON.stringify(this.configData)) )
        }
      })
    },
    getConfigByKey(key) {
      const item = this.configData.find(i => i.keyName === key)
      return item ? item.keyContent : ''
    },
    handleLogin() {
      if (!this.agreed) {
        uni.showToast({
          title: '请阅读并勾选服务协议和隐私声明',
          icon: 'none'
        });
        return;
      }
	  
	   this.$refs.privacyPopup.open()
      // uni.showLoading({
      //   title: '登录中...'
      // });
      // setTimeout(() => {
      //   uni.hideLoading();
      //   uni.showToast({
      //     title: '登录成功'
      //   });
      //   uni.reLaunch({
      //     url: '/pages/index/index'
      //   });
      // }, 1500);
    },
    handleCancel() {
      uni.navigateBack();
    },
	
    handleAgreementChange(e) {
		// console.log(this.agreed);
      // this.agreed = e.detail.value.length > 0;
	  if(this.agreed){
		  this.agreed = false;
	  }else{
		  this.agreed = true;
	  }
    },
	
    openProtocol(type) {
      console.log('Opening protocol:', type)
      console.log('Current configData:', this.configData)
      let protocol = null
      if (type === 'privacy') {
        protocol = this.configData.find(i => i.keyName === 'user_ys')
      } else if (type === 'service') {
        protocol = this.configData.find(i => i.keyName === 'user_xy')
      }
      console.log('Found protocol:', protocol)
      this.protocolDialogTitle = protocol ? protocol.keyValue : (type === 'privacy' ? '隐私政策' : '服务协议')
      this.protocolDialogContent = protocol && protocol.keyContent ? protocol.keyContent : 
        (type === 'privacy' ? 
          '<div style="padding: 20rpx;">暂无隐私政策内容</div>' : 
          '<div style="padding: 20rpx;">暂无服务协议内容</div>')
      this.showProtocolDialog = true
      console.log('Dialog state:', {
        title: this.protocolDialogTitle,
        content: this.protocolDialogContent,
        show: this.showProtocolDialog
      })
    },
		
    goToAdminLogin() {
      uni.navigateTo({
        url: '/pages/component/admin_login'
      });
    },
	
	    // 同意隐私政策
	  handleAgreePrivacy() {
	          uni.showLoading({
	            title: '登录中...'
	          })
	    //       执行登录逻辑...
		
			 let self = this
			 
			 wx.login({
			   success (res) {
			 			// console.log(res.code,'code')
			     if (res.code) {
			       self.$api('wxLogin', {code : res.code}, res => {
			 			console.log(res,'login')
			       	if (res.code == 200) {
						uni.hideLoading();
			 					// console.log(res)
			 					uni.setStorageSync('token',res.result.token);
			 					uni.setStorageSync('openid',res.result.userInfo && res.result.userInfo.appletOpenid);
								getApp().globalData.login_status = true;
								if (res.result.userInfo) {
									// 已有userInfo，直接跳主页
									uni.reLaunch({
										url: '/pages/component/home'
									});
								} else {
									// 没有userInfo，弹出手机号授权
									self.needPhone = true;
									self.$refs.privacyPopup.open();
								}
			       	}
			       })
			     } else {
					uni.hideLoading();
			       console.log('登录失败！' + res.errMsg)
			     }
			   }
			 })
	        },
	        
	        // 拒绝隐私政策
	        handleRejectPrivacy() {
	          uni.showToast({
	            title: '需要同意隐私政策才能使用服务',
	            icon: 'none'
	          })
	        },
	        
	        // 打开协议页面
	        openProtocolPage(type) {
	          this.openProtocol(type)
	        },
    handleProtocolAgree() {
      this.showProtocolDialog = false
      this.agreed = true
      // 你可以在这里添加同意后的其他逻辑
    },
    handleProtocolReject() {
      this.showProtocolDialog = false
      if (this.agreed) {
        this.agreed = false
      }
      // 你可以在这里添加拒绝后的其他逻辑
    }
  }
}
</script>

<style scoped scss>
view {
  padding-bottom: 0 !important;
}

.login-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f9ece5;
  padding: 0 40rpx;
  padding-bottom: env(safe-area-inset-bottom);
}

.app-header {
  margin-top: 220rpx;
  margin-bottom: 180rpx;
  text-align: center;
  height: 30%;
}
image{
width: 50%;
height: 50%;
}
  
.app-title {
display: flex;
justify-content: center;
align-items: center;
font-family: Alimama ShuHeiTi;
font-weight: 700;
font-size: 28px;
line-height: 140%;
letter-spacing: 0%;
/* background-color: rgba(254, 208, 116, 0.8); */
border-radius: 3em;
letter-spacing: 0.2em;
/* text-shadow: 1px 2px #f7b737; */
}

.app-subtitle {
  font-size: 28rpx;
  color: #fef6e3;
  margin-top: 1rem;
  letter-spacing: 0.11em;
}

.login-actions {
  /* height: 30%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f9ece5;
  border-radius: 30rpx;
}

.login-btn, .cancel-btn {
  width: 82%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  font-size: 32rpx;
  margin-bottom: 20rpx;
  border: none;
}

.login-btn {
  background-color: #f79400;
  color: white;
}

.cancel-btn {
  background-color: rgba(255, 253, 249);
  color: #f7990c;
  border: 1px solid rgba(249, 178, 71);
}

.agreement {
  /* margin-top: 40rpx; */
  font-size: 24rpx;
  color: #333;
  display: flex;
  justify-content: center;
  
}

.radio-group {
  display: flex;
  align-items: center;
}

/* 自定义圆形checkbox样式 */
.custom-radio {
  /* border-radius: 50%; */
  width: 32rpx;
  height: 32rpx;
  transform: scale(0.7);
  margin-right: 8rpx;
}

/* 覆盖uniapp默认checkbox样式 */
.custom-radio .wx-checkbox-input,
.custom-radio .uni-checkbox-input {
  border-radius: 50% !important;
  width: 32rpx !important;
  height: 32rpx !important;
}

.custom-radio .wx-checkbox-input.wx-checkbox-input-checked,
.custom-radio .uni-checkbox-input.uni-checkbox-input-checked {
  background-color: #07C160 !important;
  border-color: #07C160 !important;
  color: #ffffff !important;
}

/* .radio-label {
  display: flex;
  align-items: center;
} */



.agreement-text {
  margin: 0 4rpx;
}

.protocol-link {
  color: #fabe65;
}

.admin-login {
  text-align: center;
  color: #fffffe;
  font-size: 28rpx;
  letter-spacing: 0.15em;
}

</style>