upgrade addPhoto, can upload image now

sourcecode/h5app/vue/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "qiniu-js": "^2.5.3",
     "vant": "^1.4.8",
     "vue": "^2.5.17",
     "vue-clipboard2": "^0.2.1",

sourcecode/h5app/vue/src/App.vue

@@ -35,7 +35,7 @@ body {
 
 .add_photo {
   height: 100px;
-  width: 180px;
+  width: 70%;
   display: flex;
   justify-content: center;
   align-items: center;

sourcecode/h5app/vue/src/components/addPhoto.vue

@@ -1,75 +1,47 @@
 <template>
-    <div>
-        <div class='add_photo'>
-            <van-uploader :after-read="onRead">
-                <van-icon v-if='!uploaded' name="photograph" size="50px"/>
-                <img :src="photo.content" v-if='uploaded' style="max-height: 90px"/>
-            </van-uploader>
-        </div>
+    <div class='add_photo'>
+        <img :src="photoURL" class="photo"/>
+        <input
+                type="file"
+                name="file"
+                accept="image/*"
+                class="photo"
+                @change="onRead"/>
     </div>
 </template>
 
 <script>
-    import {
-        Uploader, Icon,
-    } from 'vant'
     export default {
-        name: "addPhoto",
-        components: {
-            [Uploader.name]: Uploader, [Icon.name]: Icon,
-        },
-        props: {
-            uploaded: {
-                type: Boolean,
-                default:false
-            },
-            photo: {
-                type: Object,
-                default: null
-            },
+        name: "choosePhoto",
+        data() {
+            return {
+                photoURL: require('../assets/camera.png')
+            }
         },
         methods: {
-            onRead(file) {
-                this.photo= file;
-                this.uploaded = true;
-                console.log('----------photo obj----------');
-                console.log(this.photo);
-                this.$emit('uploadPhoto', this.photo);
-                let blob = convertImgDataToBlob(this.photo.content, this.photo.file.type);
-                console.log(blob);
-                blobToDataURL(blob, res => {
-                    console.log(res);
-                });
-            },
-        }
-    }
-
-    function convertImgDataToBlob(base64, type) {
-        console.log('----------converting base64 to blob----------');
-        let base64Str = base64.substring(base64.indexOf(',') + 1);
-        let bString = atob(base64Str);
-        let n = bString.length;
-        let u8arr = new Uint8Array(n);
-        while (n--) {
-            u8arr[n] = bString.charCodeAt(n);
+            onRead: function (e) {
+                let f = e.target.files[0];
+                console.log(f);
+                let reads = new FileReader();
+                reads.readAsDataURL(f);
+                let that = this;
+                reads.onload = function (e) {
+                    console.log(this.result);
+                    that.photoURL = this.result;
+                };
+            }
         }
-        let blob;
-        blob = new Blob([u8arr], {
-            type: type
-        });
-        return blob;
-    }
-
-    function blobToDataURL(blob, callback) {
-        console.log('----------converting blob to base64----------');
-        let a = new FileReader();
-        a.onload = function (e) {
-            callback(e.target.result);
-        };
-        a.readAsDataURL(blob);
     }
 </script>
 
 <style scoped>
+    .photo {
+        width: 20%;
+        height: 70px;
+        position: absolute;
+    }
 
+    [name='file'] {
+        opacity: 0;
+    }
 </style>

sourcecode/h5app/vue/src/connector/simple-demo.js

@@ -155,20 +155,20 @@ BasicFunction.get_data("数据接口名称/list?条件1=数据1&条件2=数据2&
 用户数据：
 smartUsers/list
 [{
-"uid":3,
-"usn":"cell_13520583918",
+"uid":3, // 用户id
+"usn":"13520583918", // 登录用户名
 "pss":"64e604787cbf194841e7b68d7cd28786f6c9a0a3ab9f8b0a0e87cb4387ab0107",
-"name":"HelloWorld",
+"name":"HelloWorld", // 昵称
 "title":"",
 "priv":"view,order,deliver,pay",
-"state":0,
+"state":0, // 状态
 "sess":"iOgxGPkFIV3JxBlBfCv",
-"phone":"13520583918",
-"schoolDistrict":null,
+"phone":"13520583918", // 电话号码
+"schoolDistrict":null, // 宿舍区 0: 斋区, 1: 西南, 2: 南区, 3: 西丽
 "userExpPts":null,
 "userGroup":null,
 "userVcoin":null,
-"registerTime":null,
+"registerTime":null, // 注册时间
 "lastLoginTime":null,
 "wxUnionid":null,
 "wxEngineid":null,
@@ -184,8 +184,8 @@ smartGoods/saveBatch
 "goodsNo":"A2",
 "modelId":"1",
 "ownerId":"18", // 货品所有者id
-"goodFirstKind":"1000", // 前14位是tag，第15位是性别，男: 0，女: 1，int，需要转为二进制字符串
-"goodSecondKind":"2000",
+"goodFirstKind":"1000", // 目标性别 男: 0，女: 1
+"goodSecondKind":"2000", // 标签 0~13
 "sellPrice":"0.0",
 "marketPrice":"0.0",
 "costPrice":"0.0",
@@ -194,7 +194,7 @@ smartGoods/saveBatch
 "createTime":"2018-12-10 01:01:01", // 货品注册时间
 "storeNums":"1",
 "img":"attachment/simple/acsac089e1nnsaxx72190dm.jpg", // 图片名
-"isDel":"0",
+"isDel":"0", // 是否被删除，0: 未被删 1: 被删，首页不显示
 "content":"none",
 "keywords":"none",
 "description":"绒毛玩具或填充玩具，中国大陆较常用“毛绒玩具”、香港为“毛公仔”，是...", // 货品描述
@@ -225,12 +225,12 @@ smartGoodPool/saveBatch
 smartOrderFeedback/saveBatch
 [{
 "feedbackId":"",
-"orderId":"13",
+"orderId":"13", // 收到的礼物的id
 "goodId":"3",
 "ratingStatus":"1000",
-"ratingMajor":"5000",
+"ratingMajor":"5", // 评分
 "ratingMinor":"4500",
-"content":"还不错，5颗星",
+"content":"还不错，5颗星", // 评论内容
 "ratingTime":"2018-12-10 01:01:01"
 }]
 
@@ -240,7 +240,7 @@ smartIdentity/saveBatch
 [{
 "reviewId":"",
 "userId":18, // 用户id
-"dormDistrict":10, // 宿舍区 0: 斋区, 1: 西南, 2: 南区, 3: 西丽
+"dormDistrict":1, // 宿舍区 0: 斋区, 1: 西南, 2: 南区, 3: 西丽
 "userSex":1, // 用户性别
 "userSchoolCard":20123333222,
 "userReviewStatus":1000,

sourcecode/h5app/vue/src/views/PresentRegister.vue

@@ -4,7 +4,7 @@
         <div class='card'>
             <h3><strong>礼物匹配</strong></h3>
             <p>希望对方的性别是</p>
-            <van-radio-group v-model="radio">
+            <van-radio-group v-model="gender">
                 <van-radio name="0" checked-color="#fd6740" style="float: left; margin-right: 20px">男</van-radio>
                 <van-radio name="1" checked-color="#fd6740">女</van-radio>
             </van-radio-group>
@@ -34,22 +34,32 @@
 
             <p>礼物标签</p>
             <div style="margin-bottom: 20px">
-                <van-checkbox-group v-model="result">
-                    <van-checkbox
+                <van-radio-group v-model="tag">
+                    <van-radio
                             v-for="(item, index) in tags"
                             :key="index"
                             :name="index"
-                            :style="(index+1) % 4 === 0 ? br : nobr"
-                    >{{ item }}</van-checkbox>
-                </van-checkbox-group>
+                            checked-color="#fd6740"
+                            :style="(index+1) % 4 === 0 ? br : nobr">{{item}}
+                    </van-radio>
+                </van-radio-group>
             </div>
 
         </div>
-        <div class="card">
+        <div class="card" style="margin-bottom: 70px">
             <p>上传礼物照片</p>
-            <add-photo @uploadPhoto="onReadPhoto"/>
+
+            <div style="margin-bottom: 10px">
+                <form method="POST" enctype="multipart/form-data"
+                      action="http://gift-server.niimei.com:8866/fileserver/upload?sign=abcdefg">
+                    <add-photo/>
+                    <button type="submit" value="Upload"
+                            class="van-button van-button--primary van-button--large submit_button"
+                            @click="publishPresent">下一步
+                    </button>
+                </form>
+            </div>
         </div>
-        <van-button size="large" type="primary" @click="publishPresent">下一步</van-button>
 
     </div>
 </template>
@@ -70,8 +80,8 @@
     export default {
         name: "PresentRegister",
         components: {
-            NavBar,
             AddPhoto,
+            NavBar,
             [Uploader.name]: Uploader, [Icon.name]: Icon,
             [CellGroup.name]: CellGroup, [Field.name]: Field,
             [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
@@ -81,7 +91,7 @@
         },
         data() {
             return {
-                radio: '0',
+                gender: '0',
                 presentId: '',
                 presentName: '',
                 pnError: false,
@@ -92,7 +102,7 @@
                     "同年", "吃货", "佛系",  "土味", "活力",
                     "洋气", "精致",  "轻奢",  "其它",
                 ],
-                result: [],
+                tag: 0,
                 photo: null,
                 nobr: "float: left; margin-right: 5px",
                 br: ""
@@ -112,27 +122,11 @@
                     Toast.fail('请上传礼物照片');
                     return;
                 }
-                // post_present()
+                // 上传礼物信息
                 let userId = localStorage.getItem("frontend-userid");
-                // tags
-                let gender_tags = '';
-                this.result = this.result.sort(function (a, b) {
-                    if (a > b) return 1;
-                    else if (a < b) return -1;
-                    else return 0;
-                });
-                console.log(this.result);
-                let i = 0;
-                this.result.forEach(res => {
-                    for (i; i < res; i++) gender_tags += '0';
-                    gender_tags += '1';
-                    i++;
-                });
-                for (i; i < 14; i++) gender_tags += '0';
-                gender_tags += this.radio;
-                console.log(gender_tags);
-                gender_tags = parseInt(gender_tags, 2);
-                console.log(gender_tags);
+                // tag
+                let tag = this.tag;
+                let gender = this.gender;
                 console.log(this.photo);
 
                 let present = [{
@@ -140,8 +134,9 @@
                     name: this.presentName,
                     goodsNo: "0", modelId: "0",
                     ownerId: userId.toString(),
-                    goodFirstKind: gender_tags.toString(),
-                    goodSecondKind: "2000", sellPrice: "0.0", marketPrice: "0.0", costPrice: "0.0",
+                    goodFirstKind: gender,
+                    goodSecondKind: tag.toString(),
+                    sellPrice: "0.0", marketPrice: "0.0", costPrice: "0.0",
                     upTime: getNowFormatDate(), downTime: getNowFormatDate(), createTime: getNowFormatDate(),
                     storeNums: "0",
                     img: this.photo.file.name,
@@ -165,9 +160,6 @@
                     }
                 }, present);
             },
-            onReadPhoto(file) {
-                this.photo = file;
-            }
         },
         created: function () {
             if (!localStorage.getItem('frontend-userid')) {
@@ -236,10 +228,17 @@
         padding: 15px;
         text-align: left;
     }
-    .van-button {
+
+    .submit_button {
+        margin-bottom: 10px;
+        margin-left: auto;
+        margin-right: auto;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
         background-color: #fd6740;
         border-color: #fd6740;
-        margin: 10px 0 10px;
         width: 85%;
     }
 </style>

sourcecode/h5app/vue/src/views/SecurityVerify.vue

@@ -84,12 +84,20 @@
 
         </div>
 
-        <div class="card">
+        <div class="card" style="margin-bottom: 70px">
             <p>上传校卡照片</p>
-            <add-photo @uploadPhoto="onReadPhoto"/>
+            <div style="margin-bottom: 10px">
+                <form method="POST" enctype="multipart/form-data"
+                      action="http://gift-server.niimei.com:8866/fileserver/upload?sign=abcdefg">
+                    <add-photo/>
+                    <button type="submit" value="Upload"
+                            class="van-button van-button--primary van-button--large submit_button"
+                            @click="next">下一步
+                    </button>
+                </form>
+            </div>
             <p>活动仅允许深大学生参与，请上传正面校卡照片审核~</p>
         </div>
-        <van-button size="large" type="primary" @click="next" class="next">下一步</van-button>
     </div>
 </template>
 
@@ -207,9 +215,6 @@
                     }
                 }, useridentity);
             },
-            onReadPhoto(file) {
-                this.photo = file;
-            },
             onSelect(item) {
                 // 点击选项时默认不会关闭菜单，可以手动关闭
                 this.show = false;
@@ -235,14 +240,17 @@
         padding: 15px;
         text-align: left;
     }
-    .next {
+
+    .submit_button {
+        margin-bottom: 10px;
+        margin-left: auto;
+        margin-right: auto;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
         background-color: #fd6740;
         border-color: #fd6740;
-        margin: 10px 0 10px;
         width: 85%;
     }
-
-    /*.van-field {*/
-    /*border-top: 0;*/
-    /*}*/
 </style>