Skip to content

Commit

Permalink
all compeleted
Browse files Browse the repository at this point in the history
  • Loading branch information
Joker committed Oct 11, 2017
1 parent b02f984 commit 65e9d37
Show file tree
Hide file tree
Showing 4 changed files with 167 additions and 32 deletions.
2 changes: 1 addition & 1 deletion src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
</div>
</div>
<!-- 导航栏 -->
<router-view :sellers="sellers"></router-view>
<router-view></router-view>
</div>
</template>
<script>
Expand Down
2 changes: 1 addition & 1 deletion src/components/goods/goods.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ export default {
z-index 2
display flex
top 176px
bottom 64px
bottom 48px
width 100%
overflow hidden
.menu-wrapper
Expand Down
77 changes: 77 additions & 0 deletions src/components/seller/dd.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
<p>{{ message }}</p>
</div>

<script type="text/javascript">

var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
118 changes: 88 additions & 30 deletions src/components/seller/seller.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,36 @@
<!-- 公告和活动 -->
<div class="bulletin">
<h2 class="title">公告与活动</h2>
<div class="text">
{{sellers.bulletin}}
</div>
<div class="text">{{sellers.bulletin}}</div>
<div class="supports">
<ul>
<li class="support" v-for="(support,index) in sellers.supports" :key="support.type">
<i class="icon" :class="classMap[support.type]"></i>
<i class="icon" :class="classMap[support.type]"></i>
<span class="text">{{sellers.supports[index].description}}</span>
</li>
</ul>
</div>
</div>
<!-- 公告和活动 -->
<split></split>
<!-- 商家实景 -->
<div class="picture"></div>
<div class="pics">
<h2>商家实景</h2>
<div class="img-wrapper" ref="bsHook">
<div class="content" ref="contentHook">
<img v-for="pic in sellers.pics" width="120" height="90 " :key="pic" :src="pic" alt="">
</div>
</div>
</div>
<!-- 商家实景 -->
<split></split>
<!-- 商家信息 -->
<div class="info"></div>
<div class="infos">
<h2>商家信息</h2>
<ul>
<li class="info" v-for="info in sellers.infos" :key="info">{{info}}</li>
</ul>
</div>
<!-- 商家信息 -->
</div>
</div>
Expand All @@ -44,18 +56,12 @@
import star from 'components/star/star';
import split from 'components/split/split';
import BScroll from 'better-scroll';
const ERR_OK = 0;
export default {
props: {
sellers: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
classMap: ['decrease', 'discount', 'guarantee', 'invoice', 'special']
classMap: ['decrease', 'discount', 'guarantee', 'invoice', 'special'],
sellers: { }
};
},
methods: {
Expand All @@ -67,23 +73,46 @@ export default {
} else {
this.scroll.refresh();
}
},
_initBSX() {
if (!this.scrollX) {
this.scrollX = new BScroll(this.$refs.bsHook, {
click: true,
scrollX: true
});
} else {
this.scrollX.refresh();
}
}
},
watch: {
sellers() {
console.log(this.sellers);
this.$nextTick(() => {
this._initBS();
});
}
},
mounted() {
this.$nextTick(() => {
this._initBS();
});
},
components: {
created() {
this.axios.get('api/sellers')
.then((res) => {
console.log(res.data);
if (res.data.errno === ERR_OK) {
this.sellers = res.data.data;
this.$nextTick(() => {
this._initBS();
this._initBSX();
if (this.sellers.pics) {
let picWidth = 120;
let margin = 6;
let width = (picWidth + margin) * this.sellers.pics.length;
this.$refs.contentHook.style.width = width + 'px';
console.log(this.$refs.contentHook.style.width);
console.log(width);
this.$nextTick(() => {
this.scrollX.refresh();
});
}
});
}
})
.catch((error) => {
console.log(error);
});
},
components: {
star,
split
}
Expand All @@ -95,6 +124,7 @@ export default {
position absolute
left 0
top 176px
bottom 0
width 100%
overflow hidden
.sellers-content
Expand Down Expand Up @@ -174,5 +204,33 @@ export default {
line-height 16px
font-weight 200
color rgb(7,17,27)
.pics
padding 18px 0 18px 18px
h2
font-size 14px
line-height 14px
color rgb(7,17,27)
padding-bottom 12px
.img-wrapper
width 100%
overflow hidden
.content
img
margin-right 6px
.infos
padding 18px
h2
font-size 14px
line-height 14px
color rgb(7,17,27)
padding-bottom 12px
ul
li
border-top 1px solid rgba(147,153,159,0.3)
padding 16px 12px
font-size 12px
line-height 16px
font-weight 200
color rgb(7,17,27)
</style>

0 comments on commit 65e9d37

Please sign in to comment.