miao33: 从 main 同步 single_uniapp22miao，dart-sass 兼容修复，DEPLOY.md 更新
- 从 main 获取 single_uniapp22miao 子项目 - dart-sass: /deep/ -> ::v-deep，calc 运算符加空格 - DEPLOY.md 采用 shccd159 版本（4 子项目架构说明） Made-with: Cursor
This commit is contained in:
apple
418
single_uniapp22miao/pages/index/index copy.vue
Normal file
418
single_uniapp22miao/pages/index/index copy.vue
Normal file
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<view class="index-page">
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="custom-navbar">
|
||||
<view class="navbar-content">
|
||||
<view class="navbar-left">
|
||||
<text class="logo">商城</text>
|
||||
</view>
|
||||
<view class="navbar-center" @click="goToSearch">
|
||||
<view class="search-bar">
|
||||
<text class="search-icon">🔍</text>
|
||||
<text class="search-placeholder">千万商品,等你采购</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="navbar-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="scroll-view"
|
||||
@scrolltolower="loadMoreGoods"
|
||||
>
|
||||
<!-- 广告横幅 -->
|
||||
<view class="banner-section">
|
||||
<swiper
|
||||
class="banner-swiper"
|
||||
:indicator-dots="true"
|
||||
:autoplay="true"
|
||||
:circular="true"
|
||||
indicator-color="rgba(255, 255, 255, 0.5)"
|
||||
indicator-active-color="#fff"
|
||||
>
|
||||
<swiper-item>
|
||||
<image
|
||||
src="https://img.freepik.com/free-photo/blackberry-fruit-arrangement_23-2148617342.jpg"
|
||||
class="banner-image"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<!-- 服务标签 -->
|
||||
<view class="service-tags">
|
||||
<view class="tag-item">
|
||||
<text class="tag-check">✓</text>
|
||||
<text class="tag-text">放心购</text>
|
||||
</view>
|
||||
<view class="tag-item">
|
||||
<text class="tag-check">✓</text>
|
||||
<text class="tag-text">顶级精品</text>
|
||||
</view>
|
||||
<view class="tag-item">
|
||||
<text class="tag-check">✓</text>
|
||||
<text class="tag-text">优质服务</text>
|
||||
</view>
|
||||
<view class="tag-item">
|
||||
<text class="tag-check">✓</text>
|
||||
<text class="tag-text">实名认证</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 新品上市 -->
|
||||
<view class="new-products-section">
|
||||
<view class="section-title">
|
||||
<text class="title">新品上市</text>
|
||||
<text class="underline"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view class="goods-section">
|
||||
<view class="goods-list">
|
||||
<view
|
||||
v-for="(goods, index) in goodsList"
|
||||
:key="goods.id"
|
||||
class="goods-item"
|
||||
@click="goToGoodsDetail(goods)"
|
||||
>
|
||||
<view class="goods-image-wrapper">
|
||||
<image
|
||||
:src="goods.image || 'https://img.freepik.com/free-photo/blackberry-fruit-arrangement_23-2148617342.jpg'"
|
||||
class="goods-image"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">鲜锋活力宝</view>
|
||||
<view class="goods-bottom">
|
||||
<view class="goods-price">
|
||||
<text class="price-symbol">¥</text>
|
||||
<text class="price-value">1689.00</text>
|
||||
</view>
|
||||
<view class="goods-sales">
|
||||
<text class="sales-text">1412人付款</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<view class="load-more" v-if="goodsList.length > 0">
|
||||
<text v-if="loadingGoods">加载中...</text>
|
||||
<text v-else-if="noMoreGoods">没有更多了</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-if="goodsList.length === 0 && !loadingGoods">
|
||||
<text class="icon">📦</text>
|
||||
<text class="text">暂无商品</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsList: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
loadingGoods: false,
|
||||
noMoreGoods: false,
|
||||
userId: ''
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
//this.goodsList = Array(4).fill(0).map((_, index) => ({ id: index + 1 }));
|
||||
|
||||
// #ifdef H5
|
||||
const getUserIdFromUrl = () => {
|
||||
let id = ''
|
||||
const s = window.location.search || ''
|
||||
if (s) {
|
||||
const p = new URLSearchParams(s)
|
||||
id = p.get('user_id') || p.get('userId') || ''
|
||||
}
|
||||
if (!id && window.location.hash) {
|
||||
const hash = window.location.hash
|
||||
const qIndex = hash.indexOf('?')
|
||||
if (qIndex !== -1) {
|
||||
const q = hash.substring(qIndex + 1)
|
||||
const hp = new URLSearchParams(q)
|
||||
id = hp.get('user_id') || hp.get('userId') || ''
|
||||
}
|
||||
}
|
||||
if (!id) {
|
||||
const href = window.location.href || ''
|
||||
const m = href.match(/[?&]user_id=([^&#]+)/)
|
||||
if (m) id = decodeURIComponent(m[1])
|
||||
}
|
||||
return id
|
||||
}
|
||||
this.userId = (options && options.user_id) ? options.user_id : getUserIdFromUrl()
|
||||
if (this.userId) {
|
||||
try { localStorage.setItem('user_id', this.userId) } catch(e) {}
|
||||
if (typeof uni !== 'undefined' && uni.setStorageSync) uni.setStorageSync('user_id', this.userId)
|
||||
}
|
||||
setTimeout(() => {
|
||||
window.location.href = 'https://shop.szxingming.com/?#/pages/rushing/index' + (this.userId ? ('?user_id=' + this.userId) : '')
|
||||
}, 1000)
|
||||
// #endif
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 页面显示时的逻辑
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 去搜索页
|
||||
goToSearch() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/sub-pages/search/index'
|
||||
});
|
||||
},
|
||||
|
||||
// 去商品详情
|
||||
goToGoodsDetail(goods) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/sub-pages/good/good-detail?id=${goods.id}`
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index-page {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.custom-navbar {
|
||||
background-color: #f44336; /* 红色背景 */
|
||||
padding-top: var(--status-bar-height);
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.navbar-left {
|
||||
width: 120rpx;
|
||||
|
||||
.logo {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
flex: 1;
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60rpx;
|
||||
padding: 0 30rpx;
|
||||
background-color: #fff; /* 白色搜索框 */
|
||||
border-radius: 30rpx;
|
||||
|
||||
.search-icon {
|
||||
font-size: 28rpx;
|
||||
margin-right: 10rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
width: 120rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.banner-section {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.banner-swiper {
|
||||
height: 400rpx; /* 调整轮播图高度 */
|
||||
|
||||
.banner-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 服务标签 */
|
||||
.service-tags {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.tag-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.tag-check {
|
||||
color: #f44336;
|
||||
font-size: 28rpx;
|
||||
margin-right: 8rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 新品上市标题 */
|
||||
.new-products-section {
|
||||
background-color: #fff;
|
||||
padding: 30rpx 0;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
padding-bottom: 15rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.underline {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 120rpx;
|
||||
height: 4rpx;
|
||||
background-color: #f44336;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品列表 */
|
||||
.goods-section {
|
||||
padding: 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
width: 345rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.goods-image-wrapper {
|
||||
width: 100%;
|
||||
height: 345rpx;
|
||||
|
||||
.goods-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
padding: 20rpx;
|
||||
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.goods-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-price {
|
||||
color: #f44336;
|
||||
|
||||
.price-symbol {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-sales {
|
||||
|
||||
.sales-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 200rpx 0;
|
||||
|
||||
.icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user