You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
hezhiying/pages/classify/classify.vue

117 lines
2.8 KiB

<template>
<view class="page" ref="page">
<!-- 搜索 -->
<view class="search-index">
<!-- #ifndef H5 -->
<view class="icon" @click="onCode">
<text class="iconfont icon-saoyisao"></text>
</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="icon" @click="onPayCode">
<text class="iconfont icon-fukuanma"></text>
</view>
<!-- #endif -->
<view class="search">
<view class="iconfont icon-fadajing"></view>
<input type="text" placeholder="输入搜索内容" />
</view>
<view class="icon">
<text class="iconfont icon-xiaoxi"></text>
</view>
</view>
<!-- 分类数据 -->
<view class="classify-data" :style="'height:'+height+'px'">
<view class="classify-one">
<scroll-view scroll-y class="classify-list">
<view class="list action">
<text>推荐分类</text>
</view>
<view class="list" v-for="(item,index) in 10" :key="index">
<text>分类{{index}}</text>
</view>
</scroll-view>
</view>
<view class="classify-two-three">
<scroll-view scroll-y class="scroll">
<view class="classify-two" v-for="(item,index) in 6" :key="index">
<view class="two-name">
<view class="name">常用分类</view>
</view>
<view class="classify-three">
<view class="list">
<image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'"></image>
<text>女衣服</text>
</view>
<view class="list">
<image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'"></image>
<text>男衣服</text>
</view>
<view class="list">
<image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'"></image>
<text>衣服啊</text>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- tabbar -->
<TabBar :tabBarShow="1"></TabBar>
</view>
</template>
<script>
import TabBar from '../../components/TabBar/TabBar.vue';
export default {
components:{
TabBar,
},
data() {
return {
height: 0,
};
},
onReady() {
setTimeout(()=>{
uni.hideTabBar()
},100)
let info = uni.createSelectorQuery().select(".page");
    info.boundingClientRect((data) => { //data - 各种参数
console.log(data.height);
this.height = data.height - 100;
// #ifdef APP-PLUS
this.height = data.height - 130;
// #endif
   }).exec()
},
methods:{
/**
* 扫一扫点击
*/
onCode(){
// 只允许通过相机扫码
uni.scanCode({
onlyFromCamera: true,
success: function (res) {
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
}
});
},
/**
* 付款码点击
*/
onPayCode(){
uni.navigateTo({
url: '/pages/PaymentCode/PaymentCode'
})
}
}
}
</script>
<style scoped lang="scss">
@import 'classify.scss'
</style>