shishichen
/
qimall


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
							<!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.0">
    <title>群活码</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.3.10/dist/nutui.min.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.3.10/dist/nutui.min.js"></script>
</head>
<style>
    body {
        background-color: #f7f7f7;
        margin: 0;
    }

    .qr-code-body {
        margin-top: 30px;
        border-radius: 5px;
        background-color: #fff;
        padding: 40px 20px;
    }

    .qr-code-header {
        display: flex;
    }

    .qr-code-content {
        padding: 20px;
    }

    .qr-code-img {
        border-radius: 5px;
    }

    .qr-code-notice {
        text-align: center;
        font-size: 12px;
        color: #ccc;
    }
</style>

<body>
    <div id="app">
        <nut-navbar :left-show="false" :right-show="false">加入群聊</nut-navbar>
        <nut-row type="flex" justify="center">
            <nut-col :span="23">
                <div class="qr-code-body">
                    <div class="qr-code-header">
                        <div class="qr-code-avatar">
                            <nut-avatar size="large" shape="square" bg-icon :bg-image="data.avatar"></nut-avatar>
                        </div>
                        <div class="qr-code-title">
                            {{ data.name }}
                        </div>
                    </div>
                    <div class="qr-code-content">
                        <img class="qr-code-img" :src="data.code" width="100%">
                    </div>

                    <div class="qr-code-footer">
                        <div class="qr-code-notice">
                            长按二维码识别获取群信息加入群聊
                        </div>
                    </div>
                </div>
            </nut-col>
        </nut-row>

    </div>
</body>
<script>
/**
 * 获取get请求参数的值
 * @param {String} name
 * @returns {String||null}
 */
const getQuery = (name) => {
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    const r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return decodeURIComponent(r[2]);
    }
    return null;
}

const UrlDecode = (zipStr) => {
    var uzipStr = '';
    for (var i = 0; i < zipStr.length; i += 1) {
        var chr = zipStr.charAt(i);
        if (chr === '+') {
            uzipStr += ' ';
        } else if (chr === '%') {
            var asc = zipStr.substring(i + 1, i + 3);
            if (parseInt('0x' + asc) > 0x7f) {
                uzipStr += decodeURI('%' + asc.toString() + zipStr.substring(i + 3, i + 9).toString());
                i += 8;
            } else {
                uzipStr += AsciiToString(parseInt('0x' + asc));
                i += 2;
            }
        } else {
            uzipStr += chr;
        }
    }

    return uzipStr;
}

function StringToAscii(str) {
    return str.charCodeAt(0).toString(16);
}

function AsciiToString(asccode) {
    return String.fromCharCode(asccode);
}

// vue
var app = new Vue({
    el: '#app',
    data() {
        return {
            baseUrl: '',
            mallId: '',
            enc: '',
            api: '/workwx/v1/group-infinite/code',
            data: {},
        }
    },
    methods: {
        /**
         * 获取
         */
        getCode() {
            let url = this.baseUrl + this.api
            // 为给定 ID 的 user 创建请求
            axios({
                method: 'get',
                url: url,
                params: {
                    mall_id: this.mallId,
                    enc: this.enc
                }
            }).then((res) => {
                this.data = res.data.data
            })
        },
    },
    mounted() {
        this.baseUrl = getQuery('api_host') ? getQuery('api_host') : null
        this.enc = getQuery('enc') ? getQuery('enc') : null

        if (!(this.baseUrl && this.enc)) {
            this.$notify.danger('内容不合法')
        } else {
            this.baseUrl = UrlDecode(this.baseUrl)
        }

        this.getCode()
    },
})
</script>

</html>