|
|
@@ -0,0 +1,186 @@
|
|
|
+<!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="https://unpkg.com/vconsole/dist/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;
|
|
|
+ background: #FAFAFA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page6 {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .tab_list {
|
|
|
+ width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ .client_followUp {
|
|
|
+ width: 100vw;
|
|
|
+ height: calc(100vh - 48px);
|
|
|
+ padding: 20px 10px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .stage {
|
|
|
+ width: 100%;
|
|
|
+ background: #F5F7FA;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #222222;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .stage img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .stage_data {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1677FF;
|
|
|
+ }
|
|
|
+ .followup_list {
|
|
|
+ width: 100%;
|
|
|
+ padding: 15px 10px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .follow_time {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .time_dot {
|
|
|
+ background: #E6F0FF;
|
|
|
+ padding: 3px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .dot {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ background: #1677FF;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="box" class="box">
|
|
|
+ <div class="page6">
|
|
|
+ <el-tabs class="tab_list" v-model="activeName" stretch @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="客户画像" name="first"></el-tab-pane>
|
|
|
+ <el-tab-pane label="客户跟进" name="second"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <div class="client_followUp">
|
|
|
+ <div class="stage">
|
|
|
+ <img src="./img/stage.png" />
|
|
|
+ <div>当前阶段：<span class="stage_data">A2兴趣</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="followup_list">
|
|
|
+ <div class="follow_time">
|
|
|
+ <div class="time_dot">
|
|
|
+ <div class="dot"></div>
|
|
|
+ </div>
|
|
|
+ <span>2024-10-23 星期四</span>
|
|
|
+ </div>
|
|
|
+ <div class="follow_item"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+<script>
|
|
|
+ new Vue({
|
|
|
+ el: '#box',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ httpUrl: '',
|
|
|
+ bId: null,
|
|
|
+ env: '',
|
|
|
+ activeName: 'first',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ // 授权
|
|
|
+ // this.getAuth()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getAuth() {
|
|
|
+ // 获取url上的code
|
|
|
+ let code = this.getQueryParam('code')
|
|
|
+ if (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) {
|
|
|
+ this.openId = data.openId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } 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)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 截取url中的数据
|
|
|
+ getQueryParam(paramName) {
|
|
|
+ // 获取当前URL的查询字符串部分
|
|
|
+ const queryString = window.location.search;
|
|
|
+ // 创建一个URLSearchParams对象
|
|
|
+ const urlParams = new URLSearchParams(queryString);
|
|
|
+ // 返回指定参数的值，如果不存在则返回null
|
|
|
+ return urlParams.get(paramName);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
