123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496 |
- <template>
- <mobile-frame>
- <view class="main">
- <view class="one" v-if="platform.uniPlatform=='app'">
- <uni-forms ref="form" :rules="rules" :model="form" label-width="auto">
- <uni-forms-item label="手机号" name="phone">
- <uni-easyinput type="text" v-model="form.phone" placeholder="请输入手机号" />
- </uni-forms-item>
- <uni-forms-item label="验证码" name="code">
- <view class="yzm">
- <view class="l">
- <uni-easyinput type="text" v-model="form.code" placeholder="请输入手机验证码" />
- </view>
- <view class="r">
- <button type="default" size="mini" @tap.stop="sendCount">{{time_count==0?'验证码':time_count}}</button>
- </view>
- </view>
- </uni-forms-item>
- <view class="btn">
- <button type="default" size="mini" @click="toSubmit('form')">提交登录</button>
- </view>
- </uni-forms>
- </view>
- <view class="two" v-else-if="platform.uniPlatform=='mp-weixin'">
- <view class="icon">
- <text class="iconfont icon-weixin"></text>
- </view>
- <view class="btn">
- <button type="default" size="mini" @tap="wxLogin()">微信信任登录</button>
- </view>
- </view>
- <view class="thr">
- <view class="thr_1">
- <checkbox-group @change="changeAgree">
- <label>
- <checkbox :checked="agree" />
- <text @tap="toAgree()">我已阅读并同意“用户协议”和“隐私政策”</text>
- </label>
- </checkbox-group>
- </view>
- </view>
- </view>
- <uni-popup ref="dialogShow" type="dialog">
- <uni-popup-dialog :title="dialog.title" mode="base" :before-close="true" @confirm="diaSubmit(dialog)" @close="diaReset(dialog)">
- <view class="dialog dialog_1" v-if="dialog.type=='1'">
- <uni-forms ref="phoneForm" :model="phoneForm" label-width="auto">
- <uni-forms-item label="方式">
- <uni-data-checkbox v-model="phoneForm.type" :localdata="typeList" />
- </uni-forms-item>
- <uni-forms-item label="微信" v-if="phoneForm.type==0">
- <button type="default" size="mini" open-type="getPhoneNumber" @getphonenumber="getUserPhone">获取微信绑定手机</button>
- </uni-forms-item>
- <uni-forms-item label="手机号" v-if="phoneForm.type==0">
- <uni-easyinput type="number" v-model="phoneForm.phone" disabled />
- </uni-forms-item>
- <uni-forms-item label="手机号" v-if="phoneForm.type==1">
- <view class="yzm">
- <view class="l">
- <uni-easyinput type="number" v-model="phoneForm.phone" placeholder="请输入手机号" />
- </view>
- <view class="r">
- <button type="default" size="mini" @tap="sendCount">{{time_count==0?'验证码':time_count}}</button>
- </view>
- </view>
- </uni-forms-item>
- <uni-forms-item label="验证码" v-if="phoneForm.type==1">
- <uni-easyinput type="number" v-model="phoneForm.code" placeholder="请输入验证码" />
- </uni-forms-item>
- </uni-forms>
- </view>
- </uni-popup-dialog>
- </uni-popup>
- </mobile-frame>
- </template>
- <script>
- export default {
- data() {
- return {
- // 平台信息
- platform: {},
- //openid
- openid: '',
- // 隐私协议
- agree: false,
- form: {},
- rules: {
- phone: {
- rules: [{
- required: true,
- errorMessage: '请输入手机号',
- },
- {
- minLength: 11,
- maxLength: 11,
- errorMessage: '账号长度在{maxLength}个字符',
- }
- ]
- },
- code: {
- rules: [{
- required: true,
- errorMessage: '请输入验证码',
- }, ]
- },
- },
- // 微信登陆
- // 无账号
- is_user: false,
- user: {},
- // 弹框
- dialog: {
- title: '绑定手机号',
- type: '1'
- },
- // 绑定手机号
- phoneForm: {
- type: 0,
- },
- typeList: [ //
- {
- text: '微信',
- value: 0
- },
- {
- text: '短信验证',
- value: 1
- }
- ],
- // 倒计时
- time_count: 0
- };
- },
- onShow: function() {
- const that = this;
- that.search();
- },
- methods: {
- search() {
- const that = this;
- uni.getStorage({
- key: 'system',
- success: function(res) {
- if (res.data) that.$set(that, `platform`, res.data);
- // 获取openid
- that.searchOpenid()
- }
- })
- },
- // 查询openid
- searchOpenid() {
- const that = this;
- if (that.platform.uniPlatform == 'mp-weixin') {
- uni.login({
- provider: 'weixin',
- success: async function(res) {
- const aee = await that.$api(`/wechat/api/login/app`, 'GET', {
- js_code: res.code,
- config: 'pointApp'
- })
- if (aee.errcode == '0') {
- that.$set(that, `openid`, aee.data.openid);
- // 微信登录
- that.openidLogin(aee.data.openid);
- }
- },
- fail: function(err) {
- console.log(err);
- }
- })
- } else if (that.platform.uniPlatform == 'app') {
- console.log('to do');
- }
- },
- // 有账号,微信登录,直接返回上一页
- async openidLogin(e) {
- const that = this;
- let res = await that.$api(`/user/wxLogin`, 'POST', {
- openid: e
- })
- if (res.errcode == '0') {
- uni.setStorage({
- data: res.data,
- key: 'token',
- success: function() {
- uni.navigateBack({
- delta: 1
- })
- }
- })
- } else {
- if (res.errcode == '-5') {
- console.log('无账号');
- that.$set(that, `is_user`, false)
- }
- }
- },
- // 微信信任登录
- async wxLogin() {
- const that = this;
- if (that.agree) {
- uni.getUserProfile({
- desc: '用于展示',
- success: async function(res) {
- let parmas = {
- openid: that.openid,
- icon: [{
- url: res.userInfo.avatarUrl
- }],
- name: res.userInfo.nickName,
- }
- const arr = await that.$api(`/user`, 'POST', parmas);
- if (arr.errcode == '0') {
- that.$set(that, `user`, arr.data);
- // 打开弹框
- that.diaShow();
- } else {
- uni.showToast({
- title: arr.errmsg,
- icon: 'none'
- });
- }
- },
- fail: function(err) {
- console.log(err);
- }
- })
- } else {
- uni.showToast({
- title: '请阅读并同意用户协议和隐私政策',
- icon: 'none'
- })
- }
- },
- // 微信信任登录-1
- async wxLogins() {
- const that = this;
- const agg = await that.$api(`/user/wxLogin`, 'POST', {
- openid: that.openid
- })
- if (agg.errcode == '0') {
- uni.setStorage({
- data: agg.data,
- key: 'token',
- success: function() {
- uni.navigateBack({
- delta: 1
- })
- }
- })
- } else {
- uni.showToast({
- title: agg.errmsg,
- icon: 'none'
- });
- }
- },
- // 打开弹框,绑定手机号
- diaShow() {
- const that = this;
- that.$refs.dialogShow.open();
- },
- // 获取手机号
- async getUserPhone(e) {
- const that = this;
- let user = that.user;
- let detail = e.detail;
- let res = await that.$api(`/wechat/api/login/getPhone`, 'GET', {
- config: 'pointApp',
- code: detail.code
- })
- if (res.errcode == '0') {
- let phone = res.data && res.data.phone_info && res.data.phone_info.purePhoneNumber || '';
- that.$set(that.phoneForm, `phone`, phone);
- } else {
- uni.showToast({
- title: res.errmsg,
- icon: 'none'
- })
- }
- },
- // 短信验证
- // 获取验证码
- sendCount() {
- const that = this;
- let form = that.form && that.form.phone ? that.form : that.phoneForm;
- if (form && form.phone) {
- let time_count = 60;
- uni.showToast({
- title: '发送成功',
- icon: 'none'
- });
- that.$set(that, `time_count`, time_count);
- that.timeDown();
- } else {
- uni.showToast({
- title: '输入错误,请重新输入!',
- icon: 'none'
- })
- }
- },
- // 倒计时
- timeDown() {
- const that = this;
- var times = setInterval(() => {
- that.time_count--;
- if (that.time_count <= 0) {
- clearInterval(times);
- }
- }, 1000);
- },
- // 弹框确认(关闭)
- async diaSubmit(e) {
- const that = this;
- let user = this.user;
- if (e.type == '1') {
- const that = this;
- let form = that.phoneForm;
- if (form.type == '0') {
- if (form && form.phone) that.updatePhone(form.phone);
- } else if (form.type == '1') {
- let code = '1234';
- if (form.code == code) {
- if (form && form.phone) that.updatePhone(form.phone);
- } else {
- uni.showToast({
- title: '短信验证失败,请重新输入!',
- icon: 'none'
- })
- }
- }
- }
- },
- async updatePhone(e) {
- const that = this;
- let user = that.user;
- let arr = await that.$api(`/user/${user._id}`, 'POST', {
- phone: e
- })
- if (arr.errcode == '0') {
- that.wxLogins();
- } else {
- uni.showToast({
- title: res.errmsg,
- icon: 'none'
- })
- }
- },
- // 弹框取消(关闭)
- diaReset(e) {
- const that = this;
- if (e.type == '1') {
- that.wxLogins();
- }
- },
- // 账号登录
- toSubmit(ref) {
- const that = this;
- let agree = that.agree;
- that.$refs[ref].validate().then(async params => {
- let code = '1234';
- if (params.code == code) {
- if (agree) {
- console.log(params);
- } else {
- uni.showToast({
- title: '请阅读并同意用户协议和隐私政策',
- icon: 'none'
- })
- }
- } else {
- uni.showToast({
- title: '验证码错误',
- icon: 'none'
- })
- }
- }).catch(err => {
- console.log(err);
- })
- },
- // 同意隐私协议
- changeAgree() {
- const that = this;
- if (that.agree) that.$set(that, `agree`, false)
- else that.$set(that, `agree`, true);
- },
- // 查看隐私协议
- toAgree() {
- uni.navigateTo({
- url: `/pages/other/agree`
- })
- },
- }
- }
- </script>
- <style lang="scss">
- .main {
- .one {
- padding: 2vw;
- .btn {
- text-align: center;
- margin: 0 0 2vw 0;
- width: 96vw;
- button {
- width: 40%;
- padding: 1vw 2vw;
- background-color: var(--f35BColor);
- color: var(--fffColor);
- font-size: var(--font20Size);
- }
- }
- }
- .two {
- text-align: center;
- margin: 20vw 0;
- .icon {
- margin: 0 0 5vw 0;
- text {
- font-size: 60px;
- }
- }
- .btn {
- button {
- background-color: var(--f35BColor);
- color: var(--fffColor);
- }
- }
- }
- .thr {
- .thr_1 {
- padding: 0 2vw;
- font-size: 14px;
- text-align: center;
- position: absolute;
- width: 96vw;
- bottom: 25vw;
- }
- }
- }
- .dialog {
- width: 100vw;
- }
- .dialog_1 {
- .uni-forms {
- display: flex;
- form {
- width: 100%;
- }
- }
- .uni-data-checklist {
- border: 1px solid #E5E5E5;
- padding: 1vw;
- border-radius: 5px;
- }
- .uni-forms-item {
- margin-bottom: 2vw !important;
- }
- }
- .yzm {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- .l {
- flex-grow: 1;
- }
- .r {
- width: 18vw;
- button {
- width: 100%;
- line-height: 2.8;
- padding: 0 1vw;
- }
- }
- }
- </style>
|