type statusBarItem = {
name : string
type : string
}
type categoryItem = {
name ?: string
id ?: number
}
const { system } = storeToRefs(useConfigStore())
const topPx = system.value.safeAreaInsets.top - uni.upx2px(30)
const title = ref(config.Name + ":团好价,住好家")
const status = ref("now")
const statusBar = ref<statusBarItem[]>([
{ name: "正在开团", type: "now" },
{ name: "即将开团", type: "upcoming" },
{ name: "长期开团", type: "long" },
])
const categoryShow = ref(1)
const category = ref<categoryItem[]>([
{ name: "全部", id: 1 },
{ name: "大家电", id: 2 },
{ name: "小家电", id: 3 },
{ name: "成品家具", id: 4 },
])
const selectBar = (item : statusBarItem) => {
status.value = item.type
}
const selectCategory = (item : categoryItem) => {
categoryShow.value = item.id
}
// console.log('useConfigStore :>> ', system);
</script>
<template>
<view class="content">
<view class="title" :style="'padding-top:' + topPx + 'px;'">{{ title }}</view>
<view class="navBar v_row v_around v_center">
<view class="navBarItem v_column v_center">
<image class="logo" src="/static/icon/order.png" mode="widthFix" />
<view class="name">订单查询</view>
</view>
<view class="navBarItem v_column v_center">
<image class="logo" src="/static/icon/money.png" mode="widthFix" />
<view class="name">返现登记</view>
</view>
</view>
<view class="statusBar v_row v_between">
<view class="statusItem v_column v_center" :class="{show :item.type == status }" v-for="(item) in statusBar"
:key="item.type" @click="selectBar(item)">
<view class="statusTitle">{{item.name}}</view>
<view class="line"></view>
</view>
</view>
<view class="category">
<scroll-view class="scrollView v_row" scroll-with-animation scroll-x="true" :scroll-into-view="'scroll' + categoryShow">
<view class="categoryName" v-for="(item,index) in category" :id="'scroll' + item.id" :key="index" :class="{show:index+1 == categoryShow}" @click="selectCategory(item)">
{{item.name}}
</view>
</scroll-view>
</view>
<view class="product">
<productList api="v1/common/getActivityList">
<!-- <template #item="itemProps">
<activityItem :item="itemProps.item" />
</template> -->
</productList>
</view>
</view>
</template>
<!-- page 页面 scoped style添加 scoped page样式无效 -->
<style lang="scss">
page {
&:after {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom, #F7CEAC 0%, #F8D4B6 16.5%, #FAE5CC 36.78%, #FBE8D3 54.44%, #FBEBD7 85.65%, #FCECDA 100%);
z-index: -1;
}
// padding: 40rpx;
.content {
padding: 40rpx;
.title {
font-weight: bold;
font-size: 40rpx;
// padding-top: 26rpx;
color: #332E2E;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.navBar {
height: 208rpx;
background: #CEBE58;
border-radius: 40rpx;
font-size: 30rpx;
color: #7A6E6E;
margin-top: 30rpx;
.logo {
width: 96rpx;
height: 96rpx;
}
.name {
padding-top: 10rpx;
}
}
.statusBar {
.statusItem {
font-size: 34rpx;
color: #7F7575;
padding: 40rpx 0;
&.show {
color: #0C0B0B;
font-weight: bold;
.line {
background: #0C0B0B;
}
}
.line {
/* 矩形 */
background: transparent;
border-radius: 4rpx;
overflow: hidden;
width: 52rpx;
height: 6rpx;
margin-top: 16rpx;
}
}
}
.category {
.scrollView {
white-space: nowrap;
width: 100%;
}
.categoryName {
display: inline-block;
// width: 200rpx;
border-radius: 18px;
border: 2rpx solid #AAA2A2;
color: #7F7575;
font-size: 30rpx;
padding: 4rpx 30rpx;
margin-right: 20rpx;
&.show {
background: #D1D7AE;
border-color: transparent;
color: #0C0B0B;
}
}
}
.product{
margin-top: 60rpx;
}
}
}
</style> ```
- 发布:2024-09-26 10:51
- 更新:2024-09-26 10:57
- 阅读:102
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 4.28
第三方开发者工具版本号: 1.062409131
基础库版本号: 3.5.8
项目创建方式: HBuilderX
示例代码:
操作步骤:
使用 unplugin-auto-import 直接打包文件
使用 unplugin-auto-import 直接打包文件
预期结果:
页面正常展示
页面正常展示
实际结果:
缺少文件
缺少文件
bug描述:
编译微信小程序,目前只有一个index页面,编译出来直接index.js 跟index.wxss直接缺少,使用了unplugin-vue-components跟unplugin-auto-import组件自动引入js