<template>
|
<view class="margin-sm">
|
<view class="dflex-b">
|
<image src="/static/image/favicon.png" class="border-radius-lg headimg" style="width: 66rpx; height: 66rpx;"
|
mode="" @click="user"></image>
|
<view class="flex1 margin-left-sm">
|
<view class="bg-main border-radius-lg dflex" style="height: 76rpx; line-height: 76rpx;">
|
<input type="text" placeholder="输入关键词" class="w-full padding-lr"/>
|
<view class="iconfont iconsousuo-01 bg-base border-radius-lg h-full padding-lr-xl" @click="search">
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="margin-top">
|
<scroll-view scroll-x class="ws-np">
|
<view class="dflex padding-bottom-sm">
|
<block v-for="(item,index) in ['全部','关注','推荐','服饰','箱包','鞋子','手机','家电','饰品']" :key="index">
|
<view class="pos-r padding-tb-sm margin-right-xs padding-lr diblock line-height-1 tac"
|
:class="{active: title_id === index}" @click="pitch(index)">
|
{{item}}
|
<view class="badge" v-if="item == '关注'">2</view>
|
</view>
|
</block>
|
</view>
|
</scroll-view>
|
</view>
|
<view class="goodsContent border-radius">
|
<view class="goodsLeftList">
|
<block v-for="(item, index) in [1,1,1,1,1,1]" :key="index">
|
<view class="bg-main margin-bottom-sm border-radius" @click="dongt(item.id)">
|
<block v-for="(img, img_idx) in [1]" :key="img_idx">
|
<image src="https://cdn.uviewui.com/uview/goods/2.jpg"
|
style="max-height: 340rpx;" class="flex1" mode="heightFix"></image>
|
</block>
|
<view class="padding-lr-sm margin-top-sm clamp-2">阿吉豆耳钉女日韩可爱甜美气质猫咪耳环人造猫眼石文艺钩坠耳饰品</view>
|
<view class="dflex-b padding-lr-sm margin-tb-sm">
|
<view class="dflex" style="width: 60%;">
|
<image src="/static/image/favicon.png" class="border-radius-c headimg"
|
style="width: 50rpx; height: 50rpx;"></image>
|
<view class="ft-dark margin-left-xs fs-xxs">Usecloud</view>
|
</view>
|
<view class="dflex">
|
<view class="iconfont iconaixin"></view>
|
<view class="clamp ft-dark margin-left-xs fs-xxs">355</view>
|
</view>
|
</view>
|
</view>
|
</block>
|
</view>
|
<view class="goodsRightList">
|
<block v-for="(item, index) in [1,1,1,1,1,1]" :key="index">
|
<view class="bg-main margin-bottom-sm border-radius" @click="dongt(item.id)">
|
<block v-for="(img, img_idx) in [1]" :key="img_idx">
|
<image src="https://cdn.uviewui.com/uview/goods/1.jpg"
|
style="max-height: 340rpx;" class="flex1" mode="heightFix">
|
</image>
|
</block>
|
<view class="padding-lr-sm margin-top-sm clamp-2">小包包女新款潮2020法国小众质感高级感洋气小ck小香风链条斜挎包</view>
|
<view class="dflex-b padding-lr-sm margin-tb-sm">
|
<view class="dflex" style="width: 60%;">
|
<image src="/static/image/favicon.png" class="border-radius-c headimg"
|
style="width: 50rpx; height: 50rpx;"></image>
|
<view class="ft-dark margin-left-xs fs-xxs">Usecloud</view>
|
</view>
|
<view class="dflex">
|
<view class="iconfont iconaixin"></view>
|
<view class="clamp ft-dark margin-left-xs fs-xxs">356</view>
|
</view>
|
</view>
|
</view>
|
</block>
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
|
<script>
|
import {ref, reactive, toRefs, onMounted, getCurrentInstance} from "vue";
|
import {useBasicInfoStore} from "../../store/basicInfo"
|
|
export default {
|
setup() {
|
const userStore = useBasicInfoStore()
|
const {proxy} = getCurrentInstance();
|
const state = reactive({
|
title_id: 0,
|
|
scrollTop: 0,
|
})
|
|
onMounted(() => {
|
Init();
|
});
|
|
const Init = () => {
|
|
}
|
const user = () => {
|
uni.navigateTo({
|
url: `/sub-shopping/pages/user`
|
});
|
}
|
// 搜索
|
const search = () => {
|
proxy.$refs.uToast.success(`搜索`);
|
}
|
const pitch = (index) => {
|
state.title_id = index
|
}
|
// 跳转详情页
|
const dongt = (options) => {
|
uni.navigateTo({
|
url: `/sub-shopping/pages/detail?id=${options}`
|
});
|
}
|
|
return {...toRefs(state), userStore, user, search, pitch, dongt}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
page {
|
background-color: #F5F5F5;
|
}
|
|
.active {
|
color: #ff6a6c;
|
font-weight: bold;
|
font-size: 34 rpx;
|
}
|
|
.goodsContent {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
|
.ft-dark {
|
color: #585858;
|
}
|
}
|
|
.goodsLeftList,
|
.goodsRightList {
|
padding: 0.1rem;
|
width: 50%;
|
overflow: hidden;
|
}
|
|
.goodsLeftList {
|
margin-right: 2 rpx;
|
}
|
|
.goodsRightList {
|
margin-left: 2 rpx;
|
}
|
</style>
|
