Vue.js＋Firebase+Stripeをさわさわしてみるーその７

その７までやってまいりました。
今回はmypageの作りこみです。ここには自分のアイコン画像とお気に入りリストをチェックできるような画面にしてみましょう。

views/Mypage.vue

<template>
  <div v-if="userid" class="mypage">
  <br>
    <p><img :src="imgurl" width="100">
    <br>{{userid}}
    
    <div class="form-group uploadForm">
        <input type="file" class="form-control" @change="selectFile">
        <button type="submit" class="btn btn-outline-success" v-on:click="upload">アイコン変更</button>
        <div id="errArea"> {{ infoMsg }}</div>
    </div>
    </p>


    <br>
    <h2>お気に入り</h2>
    <ul>
    <li v-for="like in likelist"><img :src="like.data().place_imageurl" width="80">
    <br>{{like.data().place_name}}
    <router-link :to="{ name: 'place', params: { place_id: like.data().place_id }}">View</router-link>
    | <a v-on:click="removelike(like.id)">削除</a>
    </li>
    </ul>

  </div>
</template>

<script>
import firebase from 'firebase'
import 'firebase/firestore'

export default {
  name: 'Mypage',
  data () {
    return {
      uid: '',
      commentlist: [],
      likelist: [],
      imgurl: '',
      paystatus: 0
    }
  },
  created: function(){
    const uid = firebase.auth().currentUser.uid
    firebase.firestore().collection('like').where('user_id','==',uid).get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        this.likelist.push(doc)
    })
  })
    firebase.firestore().collection('userimg').where('userid','==',uid).get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        const ref = firebase.storage().ref().child(doc.data().imgpath);
        ref.getDownloadURL().then((url) => {
        this.imgurl = url
        })
    })
  })
  },
  methods: {
    removelike: function (likeid) {
    firebase.firestore().collection("like").doc(likeid).delete().then(function() {
            console.log(likeid)
        }).catch(function(error) {
            console.error("Error removing document: ", error)
        })
    },
    selectFile: function (e) {
            e.preventDefault();
            let files = e.target.files;
            this.uploadFile = files[0];
    },
    upload: function () {
            if (!this.uploadFile) {
                this.infoMsg = '画像ファイルを選択してください'
                return;
            }
            const uid = firebase.auth().currentUser.uid
            const storepath = 'tmp/' + uid + '/' + this.uploadFile.name
            var storageRef = firebase.storage().ref().child(storepath);
            storageRef.put(this.uploadFile).then(function (snapshot) {
              firebase.firestore().collection('user').where('userid','==',uid).get().then(function(doc) {
                doc.forEach(function(d) {
                console.log(d.data())
                console.log(storepath)
                if (d) {
                  firebase.firestore().collection('user').doc(d.id).update({
                    imgpath: storepath
                  })
                  console.log("チェンジ img!:")
                } else {
                  firebase.firestore().collection('user').add({
                      imgpath: storepath,
                      userid: uid
                  })
                  console.log("新規画像登録！");
                }
                })
              })
            })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 0 10px;
}
a {
  color: #42b983;
}
input {
  margin: 10px 0;
  padding: 10px;
}
h2 {
    background:#1c4b7a;
    color:#fff;
}
</style>

createdで現在登録されている画像を見に行っています。また、お気に入りの登録があるかもみていますね。

firestoreのストレージに保存した画像URLから画像を表示するにはちょっと細工が必要です。

    const ref = firebase.storage().ref().child(doc.data().imgpath)
    ref.getDownloadURL().then((url) => {
    this.imgurl = url
    })

画像のアップロードのためのにmethodに二つ記載しています。

    selectFile: function (e) {
        e.preventDefault();
        let files = e.target.files;
        this.uploadFile = files[0];
    },
    upload: function () {
        if (!this.uploadFile) {
            this.infoMsg = '画像ファイルを選択してください'
            return;
        }
            const uid = firebase.auth().currentUser.uid
            const storepath = 'tmp/' + uid + '/' + this.uploadFile.name
            var storageRef = firebase.storage().ref().child(storepath);
            storageRef.put(this.uploadFile).then(function (snapshot) {
              firebase.firestore().collection('user').where('userid','==',uid).get().then(function(doc) {
                doc.forEach(function(d) {
                console.log(d.data())
                console.log(storepath)
                if (d) {
                  firebase.firestore().collection('user').doc(d.id).update({
                    imgpath: storepath
                  })
                  console.log("チェンジ img!:")
                } else {
                  firebase.firestore().collection('user').add({
                      imgpath: storepath,
                      userid: uid
                  })
                  console.log("新規画像登録！");
                }
                })
              })
            })
    }

upload: function()は汎用性のある記述ですので、いろんなところで使ってあげましょう。
今回はfirestorageにアップロードすると同時にuserのコレクションに画像のファイルパスを保存しています。もしすでにある場合は、今回アップロードしたファイルパスにupdateをかけています。

mypageの画面が表示されてから、画像が表示されるまで少しタイムラグがあるかもしれません。ローディングのアイコンを入れてあげてもいいかもしれません。あと、アップロードした画像に変える処理も入れてあげたほうが親切でしょうね。

あと、お気に入りの削除もできるようにしています。実装はとってもシンプルですね。参考までにいかに載せておきます。

<a v-on:click="removelike(like.id)">削除</a>

    removelike: function (likeid) {
    firebase.firestore().collection("like").doc(likeid).delete().then(function() {
            console.log(likeid)
        }).catch(function(error) {
            console.error("Error removing document: ", error)
        })
    },

ポイントはtemplate側に記載しているv-forでlike.idを削除リンクに渡しているところです。このlike.idがremovelikeの変数「likeid」として処理が走ります。

なお、今回は物理削除で対応していますが論理削除で実装してもかまいません。
※購買履歴のような後々までデータを残しておきたい場合は論理削除で対応させましょう。

今回はここまで。次回はいよいよstripeを導入していきます。