本脚本自带 VUE 和 element-ui 属性，可以更方便的添加各种功能, 增加了避免弹窗。已经添加登录和注册功能！修改订阅对话框内容。添加登录功能。
// ==UserScript== // @name 孤独狂饮Test_VUE // @namespace [url=mailto:[email protected]][email protected][/url] // @version 0.16 // @description 本脚本自带 VUE 和 element-ui 属性，可以更方便的添加各种功能, 增加了避免弹窗。已经添加登录和注册功能！修改订阅对话框内容。添加登录功能。 // @author gdky005 // @match *://www.80s.tw/* // @require https://unpkg.com/vue/dist/vue.js // @require https://unpkg.com/element-ui/lib/index.js // @grant GM_addStyle // @grant GM_getValue // @grant GM_xmlhttpRequest // @grant GM_setValue // @grant GM_getValue // @connect zkteam.cc // ==/UserScript== (function() { 'use strict'; // Your code here... var header_link = '<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">'; //将以上拼接的html代码插入到网页里的ul标签中 var header_link_tag = $("head"); if (header_link_tag) { header_link_tag.append(header_link); } var vue_code = '<div id="app" style="text-align:center">' vue_code+='<el-popover placement="top-start" title="" width="100" trigger="hover" content="登录以后将获得邮件和微信 更新 提醒哦！">' vue_code+=' <el-button type="primary" size="medium" slot="reference" @click="subscribeBtn">订阅按钮</el-button>' vue_code+='</el-popover>' vue_code+='' vue_code+='<el-dialog title="订阅" width="40%" :visible.sync="subDialogState" center>' vue_code+=' <div style="text-align: left">' vue_code+=' <span style="font-weight: bold"> hi, </span>' vue_code+=' <p> <span style="color: red;font-weight: bold"> {{ userInfo.user_name }} </span>, 你要订阅的信息如下：</p>' vue_code+=' <div style="background: rgba(191,157,42,0.29); padding: 10px; margin: 10px">' vue_code+=' <el-input :placeholder="pid" type="text" :disabled="false" size="small">' vue_code+=' <template slot="prepend"><span>ＩＤ：</span></template>' vue_code+=' </el-input>' vue_code+='' vue_code+=' <el-input :placeholder="name" type="text" :disabled="false" size="small">' vue_code+=' <template slot="prepend">影片：</template>' vue_code+=' </el-input>' vue_code+='' vue_code+=' <el-input :placeholder="url" type="text" :disabled="false" size="small">' vue_code+=' <template slot="prepend">网址：</template>' vue_code+=' </el-input>' vue_code+=' <el-input :placeholder="last_fj_number" type="text" :disabled="false" size="small">' vue_code+=' <template slot="prepend">最新：</template>' vue_code+=' </el-input>' vue_code+=' </div>' vue_code+=' <p style="text-align: center; margin-top: 15px"><el-button type="text" @click="quitAccount">退出当前帐号</el-button></p>' vue_code+=' </div>' vue_code+=' <span slot="footer" class="dialog-footer">' vue_code+=' <el-button @click="cancelSub">取 消</el-button>' vue_code+=' <el-button type="primary" @click="subContent" :loading="subContentBtnState">确 定</el-button>' vue_code+=' </span>' vue_code+='</el-dialog>' vue_code+='' vue_code+='' vue_code+='<el-dialog' vue_code+=' title="登录提醒"' vue_code+=' :visible.sync="loginDialogState"' vue_code+=' width="40%" center>' vue_code+='' vue_code+=' <el-dialog' vue_code+=' width="40%"' vue_code+=' title="请先注册一个账号吧"' vue_code+=' :visible.sync="innerVisible"' vue_code+=' append-to-body>' vue_code+='' vue_code+=' <el-form :model="registerUserInfo" :rules="registerUserInfoRules" ref="registerUserInfo">' vue_code+='' vue_code+=' <el-form-item prop="r_name">' vue_code+=' <el-input placeholder="您的用户名或者邮箱" type="text" v-model="registerUserInfo.r_name" clearable>' vue_code+=' <template slot="prepend">用 户 名：</template>' vue_code+=' </el-input>' vue_code+=' </el-form-item>' vue_code+='' vue_code+=' <el-form-item prop="r_password">' vue_code+=' <el-input placeholder="密码" type="password" v-model="registerUserInfo.r_password" clearable>-->' vue_code+=' <template slot="prepend">密 码：</template>' vue_code+=' </el-input>' vue_code+=' </el-form-item>' vue_code+='' vue_code+=' <el-form-item prop="r_confirm_password">' vue_code+=' <el-input placeholder="确认密码" type="password" v-model="registerUserInfo.r_confirm_password" clearable>' vue_code+=' <template slot="prepend">确认密码：</template>' vue_code+=' </el-input>' vue_code+=' </el-form-item>' vue_code+='' vue_code+=' <el-form-item prop="r_email">' vue_code+=' <el-input placeholder="邮箱地址" type="email" v-model="registerUserInfo.r_email" clearable>' vue_code+=' <template slot="prepend">邮箱地址：</template>' vue_code+=' </el-input>' vue_code+=' </el-form-item>' vue_code+='' vue_code+=' </el-form>' vue_code+='' vue_code+=' <span slot="footer" class="dialog-footer">' vue_code+=' <el-button @click="register(true)">取消</el-button>' vue_code+=' <el-button style="text-align: center;" type="primary" @click="register(false)"' vue_code+=' :disabled="registerBtnState">确定</el-button>' vue_code+=' </span>' vue_code+=' </el-dialog>' vue_code+='' vue_code+=' <el-form :model="userInfo" :rules="registerUserInfoRules" ref="userInfo">' vue_code+=' <el-form-item prop="user_name">' vue_code+=' <el-input placeholder="您的用户名或者邮箱" type="text" v-model="userInfo.user_name" clearable>' vue_code+=' <template slot="prepend">用 户 名：</template>' vue_code+=' </el-input>' vue_code+=' </el-form-item>' vue_code+='' vue_code+=' <el-form-item prop="user_password">' vue_code+=' <el-input placeholder="密码" type="password" v-model="userInfo.user_password" clearable>' vue_code+=' <template slot="prepend">密 码：</template>' vue_code+=' </el-input>' vue_code+=' </el-form-item>' vue_code+=' </el-form>' vue_code+='' vue_code+=' <div style="text-align: center">' vue_code+=' <el-button type="text" size="mini">如有任何疑问请添加微信：gdky005</el-button>' vue_code+=' </div>' vue_code+='' vue_code+=' <span slot="footer" class="dialog-footer">' vue_code+=' <el-button @click="innerVisible = true">注册</el-button>' vue_code+=' <el-button style="text-align: center;" type="primary" @click="login">登录</el-button>' vue_code+='</span>' vue_code+='' vue_code+='</el-dialog>' vue_code+='</div>' var ul_tag = $("div.img"); if (ul_tag) { ul_tag.append(vue_code); }; new Vue({ el: '#app', data() { var validateUserName = (rule, value, callback) => { if (value === '') { callback(new Error('请输入6位以上的用户名')); } else { // if (this.registerUserInfo.r_name !== '') { // this.$refs.registerUserInfo.validateField('r_name'); // } callback(); } }; var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { // if (this.registerUserInfo.r_password !== '') { // this.$refs.registerUserInfo.validateField('r_password'); // } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.registerUserInfo.r_password) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { // 订阅按钮的状态 subDialogState: false, // 订阅对话框中的确定按钮的 loading 的状态 subContentBtnState: false, // 用户登录的状态 userIsLogin: false, // 用户注册信息 registerUserInfo: { r_name: '', r_password: '', r_confirm_password: '', r_email: '', }, // 密码校验规则 registerUserInfoRules: { user_name: [ {validator: validateUserName, trigger: 'blur'} ], user_password: [ {validator: validatePass, trigger: 'blur'} ], r_name: [ {validator: validateUserName, trigger: 'blur'} ], r_password: [ {validator: validatePass, trigger: 'blur'} ], r_confirm_password: [ {validator: validatePass2, trigger: 'blur'} ], r_email: [ {required: true, message: '请输入邮箱地址', trigger: 'blur'}, {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']} ] }, //登录信息 userInfo: { user_name: '', user_password: '', user_email: '', user_is_active: '', }, //登录框状态 loginDialogState: false, innerVisible: false, //状态 registerBtnState: true, // 订阅信息 message: "", dialogText: "是否真的要订阅？", dialogVisible: false, // 影片订阅信息 name: '', pid: '', url: '', last_fj_number: '', }; }, methods: { login() { var name = this.userInfo.user_name; var password = this.userInfo.user_password; this.$refs.userInfo.validate((valid) => { if (valid) { this.loginDialogState = false; this.innerVisible = false; var that = this; var formData = new FormData(); formData.append("account", name); formData.append("password", password); GM_xmlhttpRequest({ method: 'POST', url: "http://zkteam.cc/Subscribe/login/", data: formData, onload: function (result) { that.subContentBtnState = false; var responseContent = result.responseText; console.log(responseContent); // {"code": 0, "message": "ok", "result": {"username": "a", "email": "[email protected]", "is_active": true}} var objs = JSON.parse(responseContent); var code = objs['code']; var message = objs['message']; var resultJson = objs['result']; var l_name = resultJson['username']; var l_email = resultJson['email']; var l_is_active = resultJson['is_active']; console.log(code + "," + message + "," + l_name); if (code === 0) { that.$notify({ title: '登录成功', message: "当前登录用户是：" + name, type: 'success' }); that.userIsLogin = true; GM_setValue("name", l_name); GM_setValue("email", l_email); GM_setValue("is_active", l_is_active); } else { that.$notify({ title: '登录失败！', message: "。。。", type: 'error' }); that.userIsLogin = false; } that.subDialogState = false; } }); } else { this.$message.error('请先根据页面提示修复错误'); return true; } }); }, register(isCancel) { if (isCancel) { this.$notify({ title: '取消注册', message: '你已经取消注册了', type: 'warning' }); this.innerVisible = false; return; } var name = this.registerUserInfo.r_name; var password = this.registerUserInfo.r_password; var confirm_password = this.registerUserInfo.r_confirm_password; var email = this.registerUserInfo.r_email; var log = name + ", "; log += password + ", "; log += confirm_password + ", "; log += email + ", "; this.$refs.registerUserInfo.validate((valid) => { if (valid) { this.innerVisible = false; this.userIsLogin = false; var that = this; var formData = new FormData(); formData.append("account", name); formData.append("password", password); formData.append("password2", confirm_password); formData.append("email", email); GM_xmlhttpRequest({ method: 'POST', url: "http://zkteam.cc/Subscribe/register/", data: formData, onload: function (result) { that.subContentBtnState = false; var responseContent = result.responseText; console.log(responseContent); var objs = JSON.parse(responseContent); var code = objs['code']; var message = objs['message']; console.log(code + "," + message); if (code === 0) { that.$notify({ title: '注册成功', message: "您的账户名是：" + name, type: 'success' }); } else { that.$notify({ title: '注册失败！', message: "。。。", type: 'error' }); } that.subDialogState = false; } }); } else { this.$message.error('请先根据页面提示修复错误'); return true; } }); }, handleClose(done) { this.$confirm('确认关闭？') .then(_ => { done(); }).catch(_ => { }); }, cancelSub() { this.subDialogState = false; this.$message({ message: '取消订阅', type: 'warning' }); }, subscribeBtn() { var nameStr = GM_getValue("name", ""); var emailStr = GM_getValue("email", ""); var isActiveStr = GM_getValue("is_active", ""); console.log("存储的值是：" + nameStr + ", " + emailStr + ", " + isActiveStr); if (nameStr && emailStr) { this.subDialogState = true; this.userIsLogin = true; this.userInfo.user_name = nameStr; this.userInfo.user_email = emailStr; this.userInfo.user_is_active = isActiveStr; } if (this.userIsLogin) { this.$message("你已经登录啦！"); this.subDialogState = true; } else { this.$message("你还没登录呢！请先登录"); this.loginDialogState = true; } // return; var fj_list = $("form#myform").find("li").find("span.dlname.nm").find("a"); var count = fj_list.length var lastName = fj_list[0].innerText var last_fj_number = lastName.substring(lastName.lastIndexOf("第") + 1, lastName.lastIndexOf("集")) var url = document.URL; var name = $("h1.font14w")[0].innerText; var pid = url.substring(url.lastIndexOf("/") + 1, url.length); var msg = "url 是：" + url + ",\n名字：" + name + ",\nid：" + pid + ",\new_number:" + last_fj_number; console.log(msg); this.dialogText = msg; this.pid = pid; this.name = name; this.url = url; this.last_fj_number = last_fj_number; }, subContent() { // 订阅成功后 可以请求数据, 然后 确定按钮 转圈，成功和失败后都给予提示。 // this.subDialogState = false; this.subContentBtnState = true; var params = 'pid=' + this.pid; params += '&name=' + this.name; params += '&url=' + this.url; params += '&number=' + this.last_fj_number; var that = this; GM_xmlhttpRequest({ method: 'GET', url: "http://zkteam.cc/Subscribe/add?" + params, onload: function (result) { that.subContentBtnState = false; var responseContent = result.responseText; console.log(responseContent); var objs = JSON.parse(responseContent); var code = objs['code']; var message = objs['message']; console.log(code + "," + message); if (code === 0) { that.$message({ message: '订阅成功！', type: 'success' }); } else { that.$message({ showClose: true, message: '订阅失败!', type: 'error' }); } that.subDialogState = false; } }); }, requestData() { this.subDialogState = false; var params = 'pid=' + this.pid; params += '&name=' + this.name; params += '&url=' + this.url; var that = this; GM_xmlhttpRequest({ method: 'GET', url: "http://zkteam.cc/Subscribe/add?" + params, onload: function (result) { //eval(result.responseText); console.log(result.responseText); that.$message({ message: '订阅成功！', type: 'success' }); } }); }, quitAccount() { var that = this; GM_xmlhttpRequest({ method: 'GET', url: "http://zkteam.cc/Subscribe/logout", onload: function (result) { that.subContentBtnState = false; var responseContent = result.responseText; console.log(responseContent); var objs = JSON.parse(responseContent); var code = objs['code']; var message = objs['message']; console.log(code + "," + message); if (code === 0) { that.userIsLogin = false; GM_setValue("name", ""); GM_setValue("email", ""); GM_setValue("is_active", ""); that.$message({ message: '退出登录成功！', type: 'success' }); } else { that.$message({ showClose: true, message: '退出登录失败!', type: 'error' }); } that.subDialogState = false; } }); }, }, watch: { registerUserInfo: { // 这监听对象值的改变 和上面的不一样。 handler: function (curVal, oldVal) { var registerUserInfo = this.registerUserInfo; if (!!registerUserInfo.r_name && !!registerUserInfo.r_password && !!registerUserInfo.r_confirm_password && !!registerUserInfo.r_email) { this.registerBtnState = false; } else { this.registerBtnState = true; } }, deep: true, // immediate: true }, }, }) //var down_btn_html = '<button>订阅</button>'; //将以上拼接的html代码插入到网页里的ul标签中 //var ul_tag = $("div.info>h1"); //if (ul_tag) { // ul_tag.append(down_btn_html); //}; })();
