main

<style lang="stylus" scoped>  @import "../css/base/variables.styl"  .is-empty    padding-top 50px    text-align center  .header-wrap    position fixed    top 0    width 100%    text-align center    .selected-counter      span        color $primary        padding 0 2px  .content    padding-top 50px    width 100%  //    我加的樣式  .select-button    position fixed    right 10px    top 0    color #656d78    outline none    z-index 10    background-color #f1f1f1    border none    color #cd0010    padding-left 10px    padding-right 10px    height 50px    line-height 50px  .cancel-button    position fixed    left 10px    top 0    color #656d78    outline none    z-index 10    background-color #f1f1f1    border none    color #cd0010    padding-left 10px    padding-right 10px    height 50px    line-height 50px</style><template>  <div>    <spinner :loading="loading" />    <big-photo v-if="bigPhotoVisible" :url="photoUrl" @on-click="bigPhotoVisible = false" />    <v-header class="header-wrap" :params="params" :visible="!selectMode">      <button slot="button" class="cancel-button" @click="cancelHandler" v-show="selectMode">取消</button>      <span slot="selected-counter" v-show="selectMode"            class="selected-counter">選中<span>{{selectList.length}}</span>項</span>      <button v-if="selectMode" slot="button" class="select-button" @click="send">發送</button>      <button v-else slot="button" class="select-button" @click="selectMode = true">選擇</button>    </v-header>    <div class="content">      <div class="px2 mt1 clearfix" v-if="list && list.length > 0">        <template v-for="record in list">          <gallery-row :model="record"                       @show-big-photo="showBigPhoto"                       :select-mode="selectMode"                       v-model="selectList"          />        </template>      </div>      <div class="is-empty" v-if="list && list.length === 0">        沒有照片      </div>    </div>  </div></template><script>  import { getPhotoDetailList } from '../api'  import { parse } from '../utils/report-json-parser'  import VHeader from './v-header.vue'  import GalleryRow from './gallery-row.vue'  import BigPhoto from './big-photo.vue'  import Spinner from './spinner.vue'  import { openChat } from '../utils/native-interface'  export default{    name: 'gallery',    data() {      return {        bigPhotoVisible: false,        photoUrl: '',        list: null,        params: [],        loading: false,        // 須要與負責人id 作比較，若是登陸人 = 門店負責人，則不能發起聊天        empId: window.__context.params.empId,//        我加的屬性        selectList: [],        selectMode: true,      }    },    components: {      VHeader, GalleryRow, BigPhoto, Spinner    },    watch: {      ['$route']() {        if (this.$route.name === 'gallery') {          this.fetchData()        }      }    },    created() {      this.fetchData()    },    mounted() {    },    methods: {      reset() {        this.list = null      },      fetchData() {        this.reset()        this.loading = true        const params = this.$route.query        getPhotoDetailList(params, { transformResponse: parse }).then((result) => {          this.list = result.data          this.params = result.params        }, (err) => {          console.log(err)        }).then(() => this.loading = false)      },      showBigPhoto(url) {        this.photoUrl = url        this.bigPhotoVisible = true      },      cancelHandler(){        this.selectMode = false        this.selectList = []      },      send() {        const requestData = {          "empId": this.params[6].name,//          "icon": ,          "userChatAccount": this.params[6].name,          "empName": this.params[2].value,          "storeId": this.params[7].name,          "storeName": this.params[3].value,          "data": this.selectList        }        console.log(requestData)        openChat(requestData).then(() => {          this.selectMode = false        }, (err) => {          console.log(err)        })        this.selectList = []      }        //        {//          "empId": "負責人id",//          "icon": "負責人頭像地址",        // 與 empId 同樣...//          "userChatAccount": "負責人聊天帳號",//          "empName": "負責人姓名",//          "storeId": "門店id",//          "storeName": "門店名稱",//          "data": [        //          "圖片地址1",        //          "圖片地址2"        //        ]//        }    }  }</script>