szugift-fe/sourcecode/h5app/vue/src/views/PresentRegister.vue

<template>
    <div>
        <nav-bar path="index" title="上传礼物"/>
        <div class='card'>
            <h3><strong>礼物匹配</strong></h3>
            <p>希望对方的性别是</p>
            <van-radio-group v-model="gender">
                <van-radio name="1" checked-color="#fd6740" style="float: left; margin-right: 20px">男</van-radio>
                <van-radio name="2" checked-color="#fd6740">女</van-radio>
            </van-radio-group>
            <p>礼物名称</p>
            <van-field
                    placeholder="给你的礼物起个名字吧"
                    v-model="presentName"
                    :error="pnError"
                    @click="pnError=false"
                    required
                    maxlength="30"
            />
            <p>我的礼物丨走心介绍</p>
            <van-cell-group>
                <van-field
                        type="textarea"
                        placeholder="请在此输入你的礼物介绍和礼物故事"
                        rows="5"
                        autosize
                        v-model="desc"
                        :error="descError"
                        @click="descError=false"
                        required
                        maxlength="300"
                />
            </van-cell-group>

            <p>礼物标签</p>
            <van-radio-group v-model="tag">
                <div
                        v-for="i in [0, 1 , 2, 3]"
                        :key="i"
                        style="height: 40px"
                >
                    <div
                            v-for="j in [0, 1, 2, 3]"
                            :key="j"
                            style="float: left; width: 25%"
                    >
                        <van-radio
                                v-if="i * 4 + j < tags.length"
                                :name="i * 4 + j"
                                checked-color="#fd6740"
                        >{{tags[i * 4 + j]}}
                        </van-radio>
                    </div>
                </div>
            </van-radio-group>

        </div>
        <div class="card" style="margin-bottom: 10px">
            <p>上传礼物照片</p>
            <div style="margin-bottom: 10px">
                <add-photo :photoURL="imgUrl" @onRead="onRead"/>
            </div>
        </div>

        <van-button
                type="primary"
                class="submit_button"
                @click="publishPresent"
                :loading="loading"
        >下一步
        </van-button>
    </div>
</template>

<script>
    import {
        Uploader, Icon,
        CellGroup, Field,
        RadioGroup, Radio,
        CheckboxGroup, Checkbox,
        Picker,
        Button,
        Toast
    } from 'vant';
    import {BasicFunction} from "../connector/basic-service";
    import AddPhoto from "../components/addPhoto";
    import NavBar from "../components/navBar";
    export default {
        name: "PresentRegister",
        components: {
            AddPhoto,
            NavBar,
            [Uploader.name]: Uploader, [Icon.name]: Icon,
            [CellGroup.name]: CellGroup, [Field.name]: Field,
            [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
            [CheckboxGroup.name]: CheckboxGroup, [Checkbox.name]: Checkbox,
            [Picker.name]: Picker,
            [Button.name]: Button
        },
        data() {
            return {
                gender: '1',
                presentId: '',
                presentName: '',
                pnError: false,
                desc: '',
                descError: false,
                tags: [
                    "情怀","复古", "有趣", "学霸",  "实用",
                    "童年", "吃货", "佛系", "土味", "活力",
                    "洋气", "精致",  "轻奢",  "其它",
                ],
                tag: 0,
                photo: null,
                loading: false
            }
        },
        methods: {
            publishPresent() {
                Toast.loading({
                    mask: true,
                    message: '图片上传较慢，请耐心等待...',
                    duration: 3000
                });
                this.loading = true;
                // 检验输入
                if (isEmojiCharacter(this.presentName)) {
                    Toast.fail('不支持表情哦');
                    this.pnError = true;
                    this.loading = false;
                    return;
                }
                else if (this.presentName.length === 0) {
                    Toast.fail('请填写手机号');
                    this.pnError = true;
                    this.loading = false;
                    return;
                }
                else if (isEmojiCharacter(this.desc)) {
                    Toast.fail('不支持表情哦');
                    this.descError = true;
                    this.loading = false;
                    return;
                } else if (this.desc.length <= 15) {
                    this.descError = true;
                    Toast.fail('请输入至少15个字的礼物介绍');
                    this.loading = false;
                    return;
                } else if (this.photo === null) {
                    Toast.fail('请上传礼物照片');
                    this.loading = false;
                    return;
                }
                // 上传礼物信息
                let userId = localStorage.getItem("frontend-userid");
                let tag = this.tag;
                let gender = this.gender;

                // console.log('------- photo -------');
                // console.log(this.photo);
                if(userId == null || userId === undefined){
                    this.$router.push('login');
                    return;
                }

                let that = this;
                // 如果没有改变图片，直接上传
                if (this.imgUrl && this.imgUrl === this.photo) {
                    let imgURL = this.imgUrl;
                    imgURL = '/' + imgURL.split('/')[3] + '/' + imgURL.split('/')[4] + '/' + imgURL.split('/')[5];
                    let present = [{
                        goodid: this.presentId,
                        name: this.presentName,
                        goodsNo: "0", modelId: "0",
                        ownerId: userId.toString(),
                        goodFirstKind: gender,
                        goodSecondKind: tag.toString(),
                        sellPrice: "0.0", marketPrice: "0.0", costPrice: "0.0",
                        upTime: getNowFormatDate(), downTime: getNowFormatDate(), createTime: getNowFormatDate(),
                        storeNums: "0",
                        img: imgURL,
                        isDel: "0", content: "none", keywords: "none",
                        description: that.desc,
                        searchWords: "", weight: "0.0", point: "0", unit: "0", brandId: "0",
                        visit: "0", favorite: "0", sort: "0", listImg: "xx.jpg",
                        smallImg: "xx.jpg", specArray: "{}", exp: "0"
                    }];
                    // console.log(present);
                    let url = "updateBatch";
                    if (that.presentId === '') url = "saveBatch";
                    BasicFunction.get_data("smartGoods/" + url, function (response) {
                        // console.log("------ Data Rcvd in PresentReg --------");
                        // console.log(response);
                        if (response.ret === "10000") {
                            that.$router.push('share');
                        } else {
                            Toast.fail("上传失败，请检查网络");
                            that.loading = false;
                        }
                    }, present);
                }
                else {
                    let formData = new FormData();
                    // formData.append('file', this.photo);
                    let fileObj = this.photo;

                    if (fileObj.size / 1024 > 1025) { //大于1M，进行压缩上传
                        photoCompress(fileObj, {
                            quality: 0.2
                        }, function (base64Codes) {
                            //console.log("压缩后：" + base.length / 1024 + " " + base);
                            var bl = convertBase64UrlToBlob(base64Codes);
                            // formData.append('file', fileObj);
                            console.log(fileObj);
                            formData.append("file", bl); // 文件对象
                            console.log(bl);
                            console.log("file_" + Date.parse(new Date()) + ".jpg");
                        });
                    } else { //小于等于1M 原图上传
                        formData.append('file', this.photo);
                    }

                    // 先上传图片
                    BasicFunction.get_data("fileserver/upload?sign=abcdefg", function (res) {
                        // console.log('----- upload photo result -----');
                        // console.log(res);
                        // if (res.model === undefined || res.model.length === 0) {
                        //     Toast.fail('上传失败，请重试');
                        //     return;
                        // }
                        try {
                            let imgURL = res.model;
                            if (res.ret === '10000') {
                                // console.log('img:' + imgURL);
                                let present = [{
                                    goodid: that.presentId,
                                    name: that.presentName,
                                    goodsNo: "0",
                                    modelId: "0",
                                    ownerId: userId.toString(),
                                    goodFirstKind: gender,
                                    goodSecondKind: tag.toString(),
                                    sellPrice: "0.0",
                                    marketPrice: "0.0",
                                    costPrice: "0.0",
                                    upTime: getNowFormatDate(),
                                    downTime: getNowFormatDate(),
                                    createTime: getNowFormatDate(),
                                    storeNums: "0",
                                    img: imgURL,
                                    isDel: "0",
                                    content: "none",
                                    keywords: "none",
                                    description: that.desc,
                                    searchWords: "",
                                    weight: "0.0",
                                    point: "0",
                                    unit: "0",
                                    brandId: "0",
                                    visit: "0",
                                    favorite: "0",
                                    sort: "0",
                                    listImg: "xx.jpg",
                                    smallImg: "xx.jpg",
                                    specArray: "{}",
                                    exp: "0"
                                }];
                                // console.log(present);
                                let url = "updateBatch";
                                if (that.presentId === '') url = "saveBatch";
                                BasicFunction.get_data("smartGoods/" + url, function (response) {
                                    // console.log("------ Data Rcvd in PresentReg --------");
                                    // console.log(response);
                                    if (response.ret === "10000") {
                                        that.$router.push('share');
                                    } else {
                                        Toast.fail("上传失败，请检查网络");
                                        that.loading = false;
                                    }
                                }, present);
                            } else {
                                Toast.fail('上传图片失败，请检查网络');
                                that.loading = false;
                            }
                        } catch (e) {
                            console.warn(e);
                            Toast.fail('上传图片失败，请检查网络');
                            that.loading = false;
                        }
                    }, formData);
                }
            },
            onRead: function (e) {
                this.photo = e;
            }
        },
        created: function () {
            if (!localStorage.getItem('frontend-userid')) {
                this.$router.push('login');
                return;
            }
            if(this.$route.query.present) {
                let present = this.$route.query.present;
                // console.log('----- Present Info -----');
                // console.log(present);
                this.presentId = present.id;
                this.gender = present.gender.toString();
                this.presentName = present.name;
                this.desc = present.desc_long;
                this.tag = present.tags;
                this.imgUrl = present.imgUrl;
                this.photo = present.imgUrl;
            }
        }
    }

    function getNowFormatDate() {
        let date = new Date();
        let seperator = "-";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        let hour = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        if (hour >= 0 && hour <= 9) {
            hour = "0" + hour;
        }
        if (minutes >= 0 && minutes <= 9) {
            minutes = "0" + minutes;
        }
        if (seconds >= 0 && seconds <= 9) {
            seconds = "0" + seconds;
        }
        let currentdate = year + seperator + month + seperator + strDate;
        currentdate = currentdate + ' ' + hour + ':' + minutes + ':' + seconds;
        return currentdate;
    }

    // 判断是否有emoji
    function isEmojiCharacter(substring) {
        for (var i = 0; i < substring.length; i++) {
            var hs = substring.charCodeAt(i);
            if (0xd800 <= hs && hs <= 0xdbff) {
                if (substring.length > 1) {
                    var ls = substring.charCodeAt(i + 1);
                    var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000;
                    if (0x1d000 <= uc && uc <= 0x1f77f) {
                        return true;
                    }
                }
            } else if (substring.length > 1) {
                var ls = substring.charCodeAt(i + 1);
                if (ls == 0x20e3) {
                    return true;
                }
            } else {
                if (0x2100 <= hs && hs <= 0x27ff) {
                    return true;
                } else if (0x2B05 <= hs && hs <= 0x2b07) {
                    return true;
                } else if (0x2934 <= hs && hs <= 0x2935) {
                    return true;
                } else if (0x3297 <= hs && hs <= 0x3299) {
                    return true;
                } else if (hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030
                    || hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b
                    || hs == 0x2b50) {
                    return true;
                }
            }
        }
    }

    /*
        三个参数
        file：一个是文件(类型是图片格式)，
        w：一个是文件压缩的后宽度，宽度越小，字节越小
        objDiv：一个是容器或者回调函数
        photoCompress()
         */
    function photoCompress(file, w, objDiv) {
        var ready = new FileReader();
        /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
        ready.readAsDataURL(file);
        ready.onload = function () {
            var re = this.result;
            canvasDataURL(re, w, objDiv)
        }
    }

    function canvasDataURL(path, obj, callback) {
        var img = new Image();
        img.src = path;
        img.onload = function () {
            var that = this;
            // 默认按比例压缩
            var w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            var quality = 0.7;  // 默认图片质量为0.7
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);
            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                quality = obj.quality;
            }
            // quality值越小，所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            callback(base64);
        }
    }

    /**
     * 将以base64的图片url数据转换为Blob
     * @param urlData
     *            用url方式表示的base64图片数据
     */
    function convertBase64UrlToBlob(urlData) {
        var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type: mime});
    }
</script>

<style scoped>
    p, h3 {
        color: #fd6740;
    }
    h3 {
        padding: 5px;
        border-bottom: solid 1px #e4e4e4;
    }
    .card {
        background-color: white;
        margin: 20px 20px;
        border: solid 1px #e4e4e4;
        padding: 15px;
        text-align: left;
    }
    .submit_button {
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fd6740;
        border-color: #fd6740;
        width: 85%;
    }
</style>