liaotian/pages/group/create.vue

<template>
    <view class="page">
        <ul class="profile">
            <li>名称：</li>
            <li><input type="text" class="input1" id="name" v-model="title" placeholder="请输入聊天室名称" /></li>
        </ul>

        <ul class="profile">
            <li>介绍：</li>
            <li><textarea id="content" placeholder="请输入聊天室介绍" v-model="content"></textarea></li>
        </ul>
        <ul class="profile">
            <li>Logo：</li>
            <li>
                <image :src="avatarsrc" class="avatar" :style="{ width: imgshow ? '60px' : '1px' }"></image>
                <view class="add_btn" @tap="uploadImage">
                    <uni-icons class="icons1" type="upload"></uni-icons>
                    浏览1
                </view>
            </li>
        </ul>
        <ul class="profile">
            <li>加群验证：</li>
            <li>
                <radio :checked="no_invite === 1" @click="no_invite = 1">需要验证</radio>
                <radio style="margin-left: 30px;" :checked="no_invite === 0" @click="no_invite = 0">无需验证</radio>
            </li>
        </ul>

        <ul class="profile">
            <li style="vertical-align: middle">标签：</li>
            <li style="vertical-align: middle;line-height: 30px;">
                <div class="tags_show" style="vertical-align: middle;margin-right: 5px;">{{ tags_select }}</div>
                <div style="vertical-align: middle" class="add_btn" @tap="tags_show = true">
                    <uni-icons class="icons1" type="plus"></uni-icons>
                    选择标签
                </div>
            </li>
        </ul>

        <view style="width: 80%;margin: 15px auto;display: block"><button class="button1"
                @tap="click_sub()">确认并提交</button></view>

        <view class="tags" v-if="tags_show">
            <view class="content">
                <div class="title">选择标签（最多{{ system['tags_sum'] }}个）</div>
                <block v-for="(item, index) in tags" :key="index">
                    <span @tap="click_tags(index)" :class="{ active: tags_select.indexOf(item) > -1 }">{{ item }}</span>
                </block>
            </view>
            <image class="close_tags" @tap="tags_show = false" src="/static/close1.png"></image>
        </view>
        <yk-authpup ref="authpupCAMERA" type="top" @changeAuth="changeAuths"
            permissionID="CAMERA"></yk-authpup>
    </view>
</template>

<script>
    import ykAuthpup from "@/components/yk-authpup/yk-authpup";
    import http from '../../library/http.js';
    import uniIcons from '../../components/uni-icons/uni-icons.vue';
    import helper from '../../library/helper.js';
    import config from '../../config.js';
    export default {
        components: {
            uniIcons,
            ykAuthpup
        },
        data() {
            return {
                no_invite: 1,
                avatarsrc: false,
                avatar: '',
                imgshow: false,
                isuploading: false,
                system: uni.getStorageSync('system'),
                tags: '',
                tags_sum: 3,
                tags_show: false,
                tags_select: '',
                title: '',
                content: '',
                userid: 0,
                userlist: ""
            };
        },
        computed: {},
        methods: {
            changeAuths() {
                console.log('success')
                this.navCroper(400,400,'avatarsrc')
            },
            uploadImage() {
                console.log('zhe')
                // #ifdef APP-PLUS
                if(plus.os.name =='Android') {
                     this.$refs.authpupCAMERA.open()
                }else {
                    this.navCroper(400,400,'avatarsrc')
                }
                // #endif
                 // #ifndef APP-PLUS
                 this.navCroper(400,400,'avatarsrc')
                 // #endif
               
                // this.navCroper(400,400,'avatarsrc')
            },
            click_tags(num) {
                var item = this.tags[num];
                if (this.tags_select.indexOf(item) > -1) {
                    var arr = this.tags_select.split(',');
                    var select = '';
                    for (var i = 0; i < arr.length; i++) {
                        if (arr[i] != item) {
                            if (select != '') select += ',';
                            select += arr[i];
                        }
                    }
                    this.tags_select = select;
                } else {
                    var arr = this.tags_select.split(',');
                    if (arr.length >= this.tags_sum) {
                        uni.showToast({
                            title: '最多可以选择' + this.tags_sum + '个标签',
                            icon: 'none'
                        });
                    } else {
                        if (this.tags_select != '') this.tags_select += ',';
                        this.tags_select += item;
                    }
                }
            },
            click_sub() {
                if (this.title == '') {
                    uni.showToast({
                        title: '请输入群组名称',
                        icon: 'none'
                    });
                    return false;
                }

                if (this.content == '') {
                    uni.showToast({
                        title: '请输入群组介绍',
                        icon: 'none'
                    });
                    return false;
                }
                // if(this.imgshow==false){
                //    uni.showToast({
                //        title:'请上传群头像',
                //        icon:'none'
                //    })
                //    return false;
                // }
                if (this.tags_select == '') {
                    uni.showToast({
                        title: '请设置群标签',
                        icon: 'none'
                    });
                    return false;
                }
                if (this.isuploading == true) {
                    uni.showToast({
                        title: '头像正在上传中，请稍后提交',
                        icon: 'none'
                    });
                    return false;
                }
                var postdata = {
                    id: uni.getStorageSync('access_token'),
                    name: this.title,
                    content: this.content,
                    avatar: this.avatar,
                    tags: this.tags_select,
                    no_invite: this.no_invite,
                    userlist: this.userlist
                };

                http.setWait(true).post('group.php?act=createGroup', postdata)
                    .then(res => {
                        if (res.code == 200) {
                            var data = res.data;
                            uni.setStorageSync(uni.getStorageSync('access_token') + '_groups', res.groups);
                            uni.showToast({
                                title: '创建成功',
                                icon: 'none'
                            });

                            uni.redirectTo({
                                url: 'chat?id=' + data.id + '&nickname=' + data.nickname
                            });
                        } else {
                            uni.showToast({
                                title: '网络错误，请稍后再试',
                                icon: 'none'
                            });
                        }
                    });
            },
            // 图片上传
            upLoad(path) {
                let that = this
                uni.showLoading({
                    title: '图片上传中',
                    mask: true
                });
                console.log('图片上传中')
                return new Promise((resolve, error) => {
                    // let arr = [];
                    // arr.push(path)
                    // const tempFilePaths = arr;
                                var tempFilePaths = path;
                    
                                that.avatarsrc = tempFilePaths;
                    
                                that.isuploading = true;
                                that.imgshow = true;
                                helper.uploadFiles([tempFilePaths], 'images', {
                                    type: 'avatar'
                                }).then(res => {
                                    // this.group.avatar=res;
                                    //  this.avatarsrc=res;
                                    that.avatar = res.replace(config.imgUri, '');
                                    that.isuploading = false;
                                });
                })
            },
            chooseImage: function(index) {
                const _this = this
                return new Promise((ok, error) => {
                    // 从相册/相机选择
                    // 如需直接开相机或直接选相册，请只使用一个选项
                    const sourceType = index === 0 ? ['camera'] : ['album']
                    uni.chooseImage({
                        count: 1, //默认9
                        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                        sourceType: sourceType,
                        success: function(res) {
                            ok(res.tempFilePaths[0])
                        },
                        fail(e) {
                            uni.showModal({
                                title: '文件打开错误',
                                content: '请设置授权文件存储权限',
                                showCancel: false,
                            });
                            error(e)
                        }
                    });
                })
            },
            onImg(type) {
                const _this = this
                return new Promise((ok, erro) => {
                    // 判断是否需要选择
                    if (type == 1) {
                        uni.showActionSheet({
                            itemList: ['拍照', '选择一张照片'],
                            success: function(res) {
                                console.log(res, '上传')
                                _this.chooseImage(res.tapIndex).then((url) => {
                                    console.log(url, 'url');
                                    ok(url)
                                }).catch((res) => {
                                    erro(res)
                                })
                            },
                            fail: function(res) {
                                erro(res)
                                console.log(res.errMsg);
                            }
                        });
                    }
                    // 判断是否只需要拍照
                    if (type == 2) {
                        _this.chooseImage(0).then((url) => {
                            ok(url)
                        }).catch((res) => {
                            erro(res)
                        })
                    }
                })
            
            },
            //图像裁剪
            navCroper(w, h, type) {
                let that = this;
                let tt = (type == 'upimg' ? 2 : 1)
                this.onImg(tt).then((url) => {
                    uni.navigateTo({
                        url: `/pages/index/cropper?width=${w}&height=${h}`,
                        events: {
                            uploadSuccess(res) {
                                console.log(res, '这里')
                                that.upLoad(res).then((urldata) => {
                                    console.log(urldata, '这里')
                                    // that[type] = urldata.url;
            
                                })
                            }
                        },
                        success: function(res) {
                            console.log(res, 'success');
                            // 通过eventChannel向被打开页面传送数据
                            res.eventChannel.emit('urlNext', {
                                url
                            })
                        }
                    })
                })
            },
        },
        onShow() {},
        onLoad(opts) {
            if (uni.getStorageSync('access_token') > 0) {
                this.tags = this.system.tags.split('|');
                this.tags_sum = parseInt(this.system.tags_sum);
                this.userid = uni.getStorageSync('access_token');
                if (opts.userlist) this.userlist = opts.userlist;
            } else {
                uni.setStorageSync('gourl', '/pages/group/create');
                this.$jump('login.index');
            }
        }
    };
</script>

<style lang="scss">
    @import '@/static/css/group.css';

    .profile {
        min-height: 50px;
        line-height: 50px;
        background-color: #ffffff;
        margin-bottom: 10px;
        width: 100%;
        padding: 5px 0px;
    }

    .detail>div:last-child .info>ul>li:last-child {
        padding-left: 0px;
    }

    .btn2 {
        height: 25px;
        line-height: 25px;
        vertical-align: middle;
        border-radius: 5px;
        text-align: center;
        border: 0px;
        background-color: #ddd;
        color: #666;
        padding: 0px 10px;
    }

    .profile li:first-child {
        color: #999;
    }

    .page {
        background-color: #fafafa;
        font-size: 14px;
    }
</style>