import BScroll from ‘better-scroll‘;
import star from ‘../star/star.vue‘;
import split from ‘../split/split.vue‘;
import icon from ‘../icon/icon.vue‘;
import {formatDate} from "../../common/js/date.js";
//{formatDate} 表示写的方法 前面加入了 export， 即 export function formatDate(){}
export default {
props:{ //接口数据，父组件的数据,子组件通过props接收后,子组件才能使用
seller:{
type:Object, //数据类型
default:{}
}
},
data(){
return{ // 必须return
favorite: false
}
},
watch:{ //主要监测数据变化
// watch 监听seller数据，一旦seller数据发生变化，就立即调用seller内部定义的方法
‘seller‘(){
this.$nextTick(()=>{
this._initScroll();
this._initPics();
})
}
},
ready(){ //数据准备好就执行此方法
this._initScroll();
this._initPics();
},
created(){
this.$http.get("/api/goods").then(function(response){
let data = response.body;
if(data.errno === ERROK){
this.goods = data.data;
this.$nextTick(() => {
console.log(‘created‘);
this._initScroll();
this._calculable();
});
}
});
},
/*
created: 在模板渲染成html前调用，通常是初始化某些属性值，然后再渲染成视图
mounted: 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些必要的操作
通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作
*/
mounted(){
this.$nextTick(()=>{
this._initScroll();
this._initPics();
})
},
computed:{ //计算属性
favoriteText(){
return this.favorite ? ‘已收藏‘: ‘收藏‘
}
},
methods:{ // 所有的方法都写在这里面
getHeart(event){
if(!event._constructed){ //阻止浏览器的网页点击事件，只执行手机点击事件
return;
}
this.favorite = !this.favorite
},
_initScroll(){ // 组件的私有方法，一般前面加_, 能被外部调用的方法不加_
if(!this.scroll){
this.scroll = new BScroll(this.$refs.sellerWrappper, {
click:true
})
}else{
this.scroll.refresh();
}
}
},
components:{ //引入的组件，都需要在这里注册才能使用
star,
split,
icon
}
}