|
|
@@ -0,0 +1,375 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport"
|
|
|
+ content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
|
|
|
+ <title>专属活码</title>
|
|
|
+ <!--引入 element-ui 的样式，-->
|
|
|
+ <link rel="stylesheet"
|
|
|
+ href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742018383195/element-ui.css">
|
|
|
+ <!-- 必须先引入vue， 后使用element-ui -->
|
|
|
+ <script
|
|
|
+ src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
|
|
|
+ <!-- 引入element 的组件库-->
|
|
|
+ <script
|
|
|
+ src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017747738/element-ui.js"></script>
|
|
|
+ <script src="js/vconsole.min.js"></script>
|
|
|
+ <script>
|
|
|
+ var vConsole = new window.VConsole();
|
|
|
+ </script>
|
|
|
+</head>
|
|
|
+<style>
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page1 {
|
|
|
+ background: #FAFAFA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page2 {
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ready_code_box {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ready_code {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .code_tip {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 7px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #222222;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form_title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #222222;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 60px 0 7px;
|
|
|
+ background: #FAFAFA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main_tip {
|
|
|
+ color: #2885FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page_tip {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page_tip_page2 {
|
|
|
+ padding-bottom: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form_list {
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ padding-right: 0;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ border: none;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ border-bottom: 1px solid #F9F9F9;
|
|
|
+ padding: 10px 0;
|
|
|
+ padding-left: 35px;
|
|
|
+ }
|
|
|
+ .post_box {
|
|
|
+ padding: 20px 35px;
|
|
|
+ height: calc(100vh - 92px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .post_img {
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ }
|
|
|
+ .foot_btn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 40px;
|
|
|
+ padding: 0 35px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .create_btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 52px;
|
|
|
+ background: #222222;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .save_btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 52px;
|
|
|
+ line-height: 52px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid #222222;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="box" class="box" :class="step === 2 ? 'page2' : 'page1'">
|
|
|
+ <!-- 引导页面 -->
|
|
|
+ <div v-if="step === 1">
|
|
|
+ <div class="ready_code_box">
|
|
|
+ <image class="ready_code" src="./img/ready_code.png"></image>
|
|
|
+ <div class="code_tip">
|
|
|
+ <span>生成我的</span>
|
|
|
+ <span class="main_tip">专属活码</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page_tip">引导门店客户添加，领取引流激励！</div>
|
|
|
+ <div class="foot_btn">
|
|
|
+ <div class="create_btn" style="line-height: 52px;" @click="createQrcode">创建活码</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 创建活码 -->
|
|
|
+ <div v-if="step === 2">
|
|
|
+ <div class="form_title">
|
|
|
+ <span>生成我的</span>
|
|
|
+ <span class="main_tip">专属活码</span>
|
|
|
+ </div>
|
|
|
+ <div class="page_tip page1 page_tip_page2">引导好友添加，领取引流激励！</div>
|
|
|
+ <div class="form_list">
|
|
|
+ <el-form ref="form" :model="form" label-position="left" label-width="84px">
|
|
|
+ <el-form-item label="顾问姓名：">
|
|
|
+ <el-input v-model="form.salesMan" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="合伙人姓名：">
|
|
|
+ <el-input v-model="form.partner" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="foot_btn">
|
|
|
+ <el-button class="create_btn" :loading="loading" @click="handleQrcode">创建活码</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 我的活码 -->
|
|
|
+ <div v-if="step === 3">
|
|
|
+ <div class="post_box">
|
|
|
+ <image class="post_img" :src="postCode"></image>
|
|
|
+ </div>
|
|
|
+ <div class="foot_btn">
|
|
|
+ <div class="save_btn" @click="saveImage">长按二维码保存</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+<script>
|
|
|
+ new Vue({
|
|
|
+ el: '#box',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ httpUrl: '',
|
|
|
+ bId: null,
|
|
|
+ env: '',
|
|
|
+ step: null,
|
|
|
+ postCode: '',
|
|
|
+ form: {
|
|
|
+ salesMan: '',
|
|
|
+ partner: '',
|
|
|
+ ownerDealerCode: '',
|
|
|
+ phone: ''
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.bId = this.getQueryParam('bId')
|
|
|
+ this.env = this.getQueryParam('env')
|
|
|
+
|
|
|
+ if (!this.env || this.env === 'prod') {
|
|
|
+ this.httpUrl = 'https://wlapi.wefanbot.com'
|
|
|
+ } else {
|
|
|
+ this.httpUrl = 'http://test.wefanbot.com:18993'
|
|
|
+ }
|
|
|
+ localStorage.removeItem('openId')
|
|
|
+ this.ifH5Type()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ifH5Type() {
|
|
|
+ if (this.getQueryParam('openId') || localStorage.getItem('openId')) {
|
|
|
+ this.findQrCode()
|
|
|
+ } else {
|
|
|
+ // 走授权操作
|
|
|
+ this.getAuth();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getAuth() {
|
|
|
+ // 获取url上的code
|
|
|
+ let code = this.getQueryParam('code')
|
|
|
+ if (code) {
|
|
|
+ // 判断业务id是否生产环境业务id
|
|
|
+ fetch(this.httpUrl + `/p/insuite/p/isProdId?id=${this.bId}`)
|
|
|
+ .then(res => {
|
|
|
+ return res.json()
|
|
|
+ }).then(result => {
|
|
|
+ let { data, msg } = result
|
|
|
+ if (typeof data === 'boolean' && data) {
|
|
|
+ this.httpUrl = 'https://wlapi.wefanbot.com'
|
|
|
+ } else {
|
|
|
+ this.httpUrl = 'http://test.wefanbot.com:18993'
|
|
|
+ }
|
|
|
+ this.getInfoByh5Code(this.getQueryParam('code'))
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ let redirect_uri = window.location.href
|
|
|
+ // code 不存在，走微信网页授权逻辑
|
|
|
+ let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appId=wx99ec0d0828a4d2d3&redirect_uri=${redirect_uri}&scope=snsapi_userinfo&state=STATE#wechat_redirect`
|
|
|
+ window.location.replace(url)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getInfoByh5Code(code) {
|
|
|
+ fetch(this.httpUrl + `/scrm/v1/mp-client/p/getInfoByh5Code?code=${code}&bId=${this.bId}`)
|
|
|
+ .then(res => {
|
|
|
+ return res.json()
|
|
|
+ }).then(result => {
|
|
|
+ let { data, code, msg } = result
|
|
|
+ if (code === 1) {
|
|
|
+ localStorage.setItem('openId', data.openId)
|
|
|
+ this.ifH5Type()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ findQrCode() {
|
|
|
+ fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-opoc/p/findQrCodeByH5', {
|
|
|
+ method: 'post',
|
|
|
+ body: JSON.stringify({
|
|
|
+ bid: this.bId,
|
|
|
+ openId: this.getQueryParam('openId') || localStorage.getItem('openId'),
|
|
|
+ }),
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ return res.json()
|
|
|
+ }).then(result => {
|
|
|
+ let { data, code, msg } = result
|
|
|
+ if (code === 1) {
|
|
|
+ if (data && data.postCode) {
|
|
|
+ this.step = 3
|
|
|
+ this.postCode = data.postCode
|
|
|
+ } else {
|
|
|
+ this.step = 1
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg)
|
|
|
+ this.step = 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ createQrcode() {
|
|
|
+ this.step = 2
|
|
|
+ },
|
|
|
+ // 创建活码
|
|
|
+ handleQrcode() {
|
|
|
+ if (!this.form.salesMan) {
|
|
|
+ this.$message.error('请输入顾问姓名')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.form.partner) {
|
|
|
+ this.$message.error('请输入合伙人姓名')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.loading = true
|
|
|
+ fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-opoc/p/addByH5', {
|
|
|
+ method: 'post',
|
|
|
+ body: JSON.stringify({
|
|
|
+ bid: this.bId,
|
|
|
+ openId: this.getQueryParam('openId') || localStorage.getItem('openId'),
|
|
|
+ ...this.form
|
|
|
+ }),
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ return res.json()
|
|
|
+ }).then(result => {
|
|
|
+ let { data, code, msg } = result
|
|
|
+ if (code === 1) {
|
|
|
+ if (data && data.postCode) {
|
|
|
+ this.step = 3
|
|
|
+ this.postCode = data.postCode
|
|
|
+ } else {
|
|
|
+ this.step = 1
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg)
|
|
|
+ this.step = 1
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 保存二维码
|
|
|
+ saveImage() {
|
|
|
+ this.$message({
|
|
|
+ message: '长按二维码保存',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 截取url中的数据
|
|
|
+ getQueryParam(paramName) {
|
|
|
+ // 获取当前URL的查询字符串部分
|
|
|
+ const queryString = window.location.search;
|
|
|
+ // 创建一个URLSearchParams对象
|
|
|
+ const urlParams = new URLSearchParams(queryString);
|
|
|
+ // 返回指定参数的值，如果不存在则返回null
|
|
|
+ return urlParams.get(paramName);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
