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.
225 lines
5.1 KiB
225 lines
5.1 KiB
<template>
|
|
<view style="background-color: #fff;">
|
|
<view class="font fixed">
|
|
<uni-section type="line"
|
|
style="margin-bottom: 3px;">
|
|
<view class="box-bg">
|
|
<uni-nav-bar title="Pets" border="false">
|
|
<block slot="left" >
|
|
<!-- <view ><uni-icons type="back" size="30"></uni-icons></view> -->
|
|
<view class="icon-all" @click="goback()"><image class="imgsize"src='../../static/icon/left.png'/></view>
|
|
<view style="margin-left: 50rpx;" class="icon-all"><image class="imgsize"src='../../static/icon/search.png'/></view>
|
|
</block>
|
|
<block slot="right">
|
|
<uni-badge class="uni-badge-left-margin" type="info"absolute="rightTop" :offset="[-22, -10]" :text="num" size="small"/>
|
|
<view class="icon-b"><image class="imgsize"src='../../static/icon/cart.png'></view>
|
|
</block>
|
|
</uni-nav-bar>
|
|
</view>
|
|
</uni-section>
|
|
|
|
<!-- 分类 -->
|
|
<view class="classifity">
|
|
<scroll-view scroll-x class="scroll_view">
|
|
<view class="tab">
|
|
<view class="tab_item" v-for ="(item,index) in list" :key ="index" @click="tabActive(index)">
|
|
<view style="width: 100rpx;" :class="[index==tabNow?'select':'']">{{item.text}}</view>
|
|
<!-- <view><uni-icons :type="item.icon" :size="item.size"></uni-icons></view> -->
|
|
<view class="icon-a" :class="[index===3?'icon-b':'']"><image class="imgsize ":src="item.src"v-if="item.src!=''"/></view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="fg"></view>
|
|
<view class="tar" v-for="(item,index) in pets" :key="index">
|
|
<!-- 图片 -->
|
|
<view class="img"><image :src="item.goods_img" class="imgsize"/></view>
|
|
<!-- 文字 -->
|
|
<view class="flex">
|
|
<view class="tar_text">
|
|
{{ item.short_name }}
|
|
</view>
|
|
<view class="tar-text2">{{ item.goods_sn}}</view>
|
|
<view class="icon flex">
|
|
<view style="margin: 10rpx;font-weight: bold; width: 120rpx;">US${{ item.shop_price }}</view>
|
|
|
|
<!-- <view style="margin-left: 150rpx;"><uni-icons :type="heart" size="30" ></uni-icons></view>
|
|
<view style="margin-left: 20rpx;"><uni-icons type="cart" size="30"></uni-icons></view> -->
|
|
|
|
<view style="margin-left: 160rpx;"class="icon-b"><image class="imgsize" src="../../static/icon/heart.png"/></view>
|
|
<view style="margin-left: 30rpx;"><uni-icons type="cart" size="30"></uni-icons></view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {defaultRequest} from '../../api/index.js'
|
|
export default {
|
|
data(){
|
|
return{
|
|
list:[
|
|
{icon:'',text:'Synthesis',src:''},
|
|
{icon:'bottom',size:15,text:'Sales',src:'../../static/icon/back.png'},
|
|
{icon:'top',size:15,text:'Prise',src:'../../static/icon/back.png'},
|
|
{icon:'settings-filled',size:30,text:' | ',src:'../../static/icon/all.png'}
|
|
|
|
],
|
|
tabNow:0,
|
|
heart:'heart-filled',
|
|
num:13,
|
|
query:{
|
|
_action:'getgoods',
|
|
order_type:0,
|
|
page_index:1,
|
|
pagesize:10,
|
|
cat:'',
|
|
},
|
|
pets:[]
|
|
}
|
|
|
|
},
|
|
onLoad(e) {
|
|
console.log(e,'数据')
|
|
this.query.cat = e.cat_id
|
|
console.log(this.query.cat,'jjjjj')
|
|
this.getpets()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getpets()
|
|
setTimeout(function () {
|
|
uni.stopPullDownRefresh();
|
|
}, 1000);
|
|
},
|
|
methods:{
|
|
tabActive(i){
|
|
console.log(i)
|
|
this.tabNow = i
|
|
},
|
|
goback(){
|
|
console.log('ppppp')
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
},
|
|
getpets(){
|
|
defaultRequest(this.query).then( res =>{
|
|
// console.log(res,'res')
|
|
this.pets = res.data
|
|
console.log(res.data,'res')
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.flex{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.bg-white{
|
|
background-color: #fff;
|
|
}
|
|
.font{
|
|
height: 200rpx;
|
|
background-color: #fff;
|
|
padding: 60rpx 5rpx 0 5rpx ;
|
|
}
|
|
.fixed{
|
|
position: fixed;
|
|
z-index: 99;
|
|
}
|
|
.icon-a{
|
|
height: 18rpx;
|
|
width: 18rpx;
|
|
}
|
|
.icon-b{
|
|
height: 40rpx;
|
|
width: 40rpx;
|
|
margin: 10rpx;
|
|
}
|
|
.icon-all{
|
|
height: 30rpx;
|
|
width:30rpx ;
|
|
}
|
|
.imgsize{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.scroll_view {
|
|
background-color: #fff;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tab {
|
|
display: flex;
|
|
text-align: center;
|
|
}
|
|
|
|
.tab .tab_item {
|
|
height: 90rpx;
|
|
display: flex;
|
|
line-height: 90rpx;
|
|
margin:0 10rpx;
|
|
padding: 0 20rpx;
|
|
flex: 1;
|
|
}
|
|
.tab_item view:nth-child(1){
|
|
/* margin-left: 10rpx; */
|
|
text-align: center;
|
|
}
|
|
.fg{
|
|
height: 200rpx;
|
|
background-color: #fff;
|
|
|
|
}
|
|
.tar{
|
|
height: 240rpx;
|
|
background-color: #fff;
|
|
padding: 18rpx 15rpx 5rpx 15rpx;
|
|
display: flex;
|
|
margin: 20rpx 0;
|
|
}
|
|
.img{
|
|
height:200rpx ;
|
|
width:200rpx ;
|
|
margin: 20rpx 10rpx;
|
|
background-color: #ccc;
|
|
}
|
|
.tar_text{
|
|
width: 60vw;
|
|
height: 70rpx;
|
|
padding: 6rpx;
|
|
margin: 10rpx 20rpx;
|
|
font-size: 28rpx;
|
|
overflow: hidden;
|
|
white-space: wrap;
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
|
|
}
|
|
.tar-text2{
|
|
color:#B22234;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
width: 200rpx;
|
|
background:#fcf0f1;
|
|
border-radius: 10rpx;
|
|
font-size: 20rpx;
|
|
margin: 5rpx 2rpx;
|
|
}
|
|
.icon{
|
|
flex-direction: row;
|
|
/* justify-content: center; */
|
|
align-items: center;
|
|
margin: 10rpx 10rpx;
|
|
}
|
|
.select{
|
|
font-weight: 900;
|
|
}
|
|
</style>
|