xiao/six_uniapp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

six_uniapp_0001

Browse Source
This commit is contained in:
doudou201703
2026-08-08 19:12:40 +08:00
commit 2b2d99c43e
84 changed files with 15748 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pageTabBar/Home/home-com-chao-hua-shuai.vue
+269
View File
@@ -0,0 +1,269 @@
<style scoped lang="scss">
.home-com-chao-hua-shuai {
width: 690rpx;
height: 394rpx;
//background: rgba(255, 255, 255, 0.1);
border-radius: 12rpx;
margin: 0 auto;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
.hua-shuai-title {
height: 92rpx;
.hua-shuai-1 {
height: 32rpx;
}
.hua-shuai-3 {
height: 16rpx;
}
.flex-container {
display: flex;
align-items: center;
height: 44rpx;
box-sizing: border-box;
padding: 0 24rpx;
.flex-container-item {
display: flex;
height: 44rpx;
justify-content: center;
align-items: center;
.text-item-1 {
//width: 96rpx;
height: 44rpx;
font-weight: 500;
font-size: 32rpx;
line-height: 44rpx;
text-align: left;
font-style: normal;
}
.text-item-2 {
width: 120rpx;
height: 34rpx;
font-weight: 400;
font-size: 20rpx;
line-height: 34rpx;
color: #efab6c;
}
.text-item-3 {
width: 112rpx;
height: 34rpx;
font-weight: 400;
font-size: 24rpx;
line-height: 34rpx;
color: #40AE36;
text-align: center;
font-style: normal;
}
}
}
}
.hua-shuai-goods {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
.hua-shuai-goods-items {
box-sizing: border-box;
padding-left: 24rpx;
.goods-items-img {
width: 176rpx;
height: 176rpx;
&.theme-white {
border: #b9b9b9 dashed 1px; // 主题是亮色的时候
}
&.theme-dark {
border: #6e6d6d dashed 1px; // 主题是亮色的时候
}
:deep(.custom-class-img-title) {
width: 175rpx;
height: 175rpx;
display: flex;
box-sizing: border-box;
justify-content: center;
align-items: center;
.custom-image-title {
width: 175rpx;
height: 175rpx;
}
}
}
.goods-items-name {
width: 184rpx;
height: 36rpx;
font-weight: 400;
font-size: 26rpx;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
.goods-items-price {
height: 44rpx;
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-right: 26rpx;
.name-text-1 {
.text-1 {
width: 90rpx;
height: 44rpx;
font-weight: 500;
font-size: 22rpx;
color: #F55726;
line-height: 32rpx;
text-align: left;
font-style: normal;
}
.text-2 {
width: 90rpx;
height: 44rpx;
font-weight: 500;
font-size: 32rpx;
color: #F55726;
line-height: 32rpx;
text-align: left;
font-style: normal;
}
}
.name-text-card {
width: 44rpx;
height: 44rpx;
&.theme-white {
border: #b9b9b9 dashed 1px; // 主题是亮色的时候
}
&.theme-dark {
border: #6e6d6d dashed 1px; // 主题是亮色的时候
}
:deep(.custom-class-img) {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.custom-image {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
</style>
<template>
<view class=home-com-chao-hua-shuai @click="进入商城页面">
<view class="hua-shuai-title">
<view class="hua-shuai-1"></view>
<view class="flex-container">
<view class="flex-container-item">
<text class="text-item-1" style="color: #46a44a">超划算</text>
</view>
<view class="line-widht-number" style="width: 8rpx"></view>
<view class="flex-container-item">
<text class="text-item-2">最新优惠</text>
</view>
<view class="line-widht-number" style="flex: 1"></view>
<view class="flex-container-item">
<text class="text-item-3">查看全部</text>
</view>
</view>
<view class="hua-shuai-3"></view>
</view>
<!-- 超划算图片区域-->
<view class="hua-shuai-goods">
<view class="hua-shuai-goods-items" v-for="(value,index) in goods_list" v-bind:key="index">
<view class="goods-items-img" :class="{'theme-white':theme==='light','theme-dark':theme==='dark'}">
<wd-img custom-class="custom-class-img-title" custom-image="custom-image-title"
:src="value.img_url">
<template #error>
<view class="error-wrap">加载失败</view>
</template>
<template #loading>
<view class="loading-wrap">
<wd-loading/>
</view>
</template>
</wd-img>
</view>
<view class="line-widht-number" style="height: 10rpx"></view>
<view class="goods-items-name">六果泡泡</view>
<view class="line-widht-number" style="height: 6rpx"></view>
<view class="goods-items-price">
<view class="name-text-1">
<text class="text-1">￥</text>
<text class="text-2">39.9</text>
</view>
<view class="name-text-card" :class="{'theme-white':theme==='light','theme-dark':theme==='dark'}">
<wd-img custom-class="custom-class-img" custom-image="custom-image"
src="/static/购物车.svg">
<template #error>
<view class="error-wrap">加载失败</view>
</template>
<template #loading>
<view class="loading-wrap">
<wd-loading/>
</view>
</template>
</wd-img>
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
// 页面功能注释区域
import {ref} from "vue";
const goods_list = ref([
{img_url: "https://hudie.sixgou.com/%E5%85%AD%E6%9E%9C%E4%BA%A7%E5%93%81%E5%9B%BE/sixcp.png"},
{img_url: "https://hudie.sixgou.com/%E5%85%AD%E6%9E%9C%E4%BA%A7%E5%93%81%E5%9B%BE/sixcp2.png"},
{img_url: "https://hudie.sixgou.com/%E5%85%AD%E6%9E%9C%E4%BA%A7%E5%93%81%E5%9B%BE/139bd00dec9c4e39d6c3cb17fc9a098a.jpg"},
]);
let theme = ref(uni.getAppBaseInfo().theme); // 返回值为 dark or linght
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
const 进入商城页面 = async (): Promise<void> => {
await wx.vibrateShort({type: "heavy"});
uni.navigateTo({url: "/subPackages/homeSubPages/商城页面目录/PageShangCheng"}).then().catch(() => {
wx.reLaunch({url: "/pageTabBar/Home/Home"});
});
};
//在这个组件, 可以获取当前用户的配送地址,
</script>