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.
76 lines
1.7 KiB
76 lines
1.7 KiB
2 weeks ago
|
<template>
|
||
|
|
<view class="shopPage">
|
||
|
|
<image class="indexBG" src="/static/shop/indexBG.png" mode="widthFix"></image>
|
||
|
|
<view class="head" :style="{'top': (indexStore.screen.total)+'px'}">
|
||
|
|
<uni-search-bar :radius="5" v-model="searchText" class="searchBar" placeholder="请输入您正在找的商品..." bgColor="#FFFFFF"
|
||
|
|
@confirm="search" cancelButton="none" style="flex: 1;"/>
|
||
|
|
<view class="carBox">
|
||
|
|
<image class="carIcon" src="/static/shop/carIcon.png" mode="aspectFill"></image>
|
||
|
|
<text>购物车</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<tabbar :tabIndex="1"></tabbar>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {
|
||
|
|
onMounted,
|
||
|
|
ref
|
||
|
|
} from 'vue';
|
||
|
|
import {
|
||
|
|
useIndexStore
|
||
|
|
} from '../../store';
|
||
|
|
const indexStore = useIndexStore()
|
||
|
|
|
||
|
|
const searchText = ref('')
|
||
|
|
const search = () => {
|
||
|
|
console.log("search")
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
uni.getSystemInfo({
|
||
|
|
success: (e) => {
|
||
|
|
let custom = uni.getMenuButtonBoundingClientRect();
|
||
|
|
const data = {
|
||
|
|
tops: e.statusBarHeight,
|
||
|
|
height: custom.height + (custom.top - e.statusBarHeight) * 2,
|
||
|
|
total: custom.height + (custom.top - e.statusBarHeight) * 2 + e.statusBarHeight
|
||
|
|
}
|
||
|
|
indexStore.setScreen(data)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.shopPage {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 100vh;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.indexBG {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.head {
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 2;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 16rpx 26rpx;
|
||
|
|
@include flexBox(between,center);
|
||
|
|
.carBox{
|
||
|
|
@include fontStyle(20rpx,#3A71FF,center,400,30rpx);
|
||
|
|
margin-left: 16rpx;
|
||
|
|
.carIcon{
|
||
|
|
width: 44rpx;
|
||
|
|
height: 44rpx;
|
||
|
|
display: block;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|