roamfuding-xcx/page_user/techan/index.vue

491 lines
10 KiB
Vue
Raw Normal View History

2025-12-20 14:32:28 +08:00
<template>
<view class="page">
<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' height='46' id="navbar">
</u-navbar>
2026-01-15 14:44:11 +08:00
<!-- 头部背景区域 -->
<view class="header-section">
<image class="header-bg" src="https://api.ccttiot.com/smartmeter/img/static/uMh22gvApiiWjWXSqnNV" mode="aspectFill"></image>
<view class="header-overlay"></view>
<view class="header-content">
<view class="main-title">
<text class="title-text">精选好物</text>
<text class="title-subtitle">Discover Specialty Products</text>
2025-12-20 14:32:28 +08:00
</view>
</view>
2026-01-15 14:44:11 +08:00
</view>
<!-- Tab切换区域 -->
<view class="tab-container">
<scroll-view class="tab-wrapper" scroll-x="true" :show-scrollbar="false">
<view class="tab-list">
<view
:class="['tab-item', tabindex == 0 ? 'tab-active' : '']"
@click="btntab('')"
>
<text class="tab-text">推荐</text>
</view>
<view
:class="['tab-item', tabindex == 1 ? 'tab-active' : '']"
@click="btntab(1)"
>
<text class="tab-text">特色美食</text>
</view>
<view
:class="['tab-item', tabindex == 2 ? 'tab-active' : '']"
@click="btntab(2)"
>
<text class="tab-text">农副产品</text>
</view>
<view
:class="['tab-item', tabindex == 3 ? 'tab-active' : '']"
@click="btntab(3)"
>
<text class="tab-text">特色干货</text>
</view>
</view>
</scroll-view>
2025-12-20 14:32:28 +08:00
</view>
2026-01-15 14:44:11 +08:00
<!-- 特产商品滚动区域 -->
<view class="product-section">
<scroll-view class="product-scroll" scroll-x="true" :show-scrollbar="false">
<view class="product-list">
<view
v-for="(item,index) in techanlist"
:key="index"
:class="['product-card', imgindex == index ? 'product-active' : '']"
@click="btnsp(item,index)">
<view class="product-image-wrapper">
<image class="product-image" :src="item.picture" mode="aspectFill"></image>
<view v-if="imgindex == index" class="product-badge">
<text class="badge-text">选中</text>
</view>
</view>
<text class="product-name">{{item.name}}</text>
</view>
</view>
</scroll-view>
2025-12-20 14:32:28 +08:00
</view>
2026-01-15 14:44:11 +08:00
<!-- 推荐店铺区域 -->
<view class="store-section">
<view class="section-header">
<view class="section-title-wrapper">
<text class="section-title">推荐店铺</text>
<text class="section-subtitle">Recommended Stores</text>
2025-12-20 14:32:28 +08:00
</view>
2026-01-15 14:44:11 +08:00
</view>
<view class="store-list">
<view
class="store-card"
v-for="(item,index) in dplist"
:key="index">
<view class="store-image-wrapper">
<image class="store-image" :src="item.picture.split(',')[0]" mode="aspectFill"></image>
</view>
<view class="store-info">
<view class="store-name">{{item.name}}</view>
<view class="store-address">
<image class="address-icon" src="https://api.ccttiot.com/smartmeter/img/static/upMvbI8C1ghy8GLhLlqT" mode="aspectFit"></image>
<text class="address-text">{{item.address}}</text>
</view>
2025-12-20 14:32:28 +08:00
</view>
2026-01-15 14:44:11 +08:00
<view class="store-arrow">
<text class="arrow-icon"></text>
2025-12-20 14:32:28 +08:00
</view>
</view>
2026-01-15 14:44:11 +08:00
<view v-if="dplist.length === 0" class="empty-tip">
<text class="empty-text">当前没有更多推荐店铺...</text>
</view>
2025-12-20 14:32:28 +08:00
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
tabindex:'',
type:'',
techanlist:[],
id:'',
dplist:[],
imgindex:0
}
},
onLoad() {
this.getlist()
},
methods: {
// 请求攻略列表
getlist(){
this.$u.get(`/app/specialty/list?pageNum=1&pageSize=999&type=${this.type}`).then((res) => {
if(res.code == 200){
this.techanlist = res.rows
this.id = res.rows[0].id
this.getdianpu()
}
})
},
// 根据特产请求店铺列表
getdianpu(){
this.$u.get(`/app/store/list?pageNum=1&pageSize=999&dishIds=${this.id}`).then((res) => {
if(res.code == 200){
this.dplist = res.rows
}
})
},
// 点击推荐店铺跳转详情
btndp(item){
uni.navigateTo({
url:'/page_user/techan/techandp?id=' + item.id
})
},
// 点击特产商品跳转详情
btnsp(item,index){
// uni.navigateTo({
// url:'/page_user/techan/techansp'
// })
this.id = item.id
this.imgindex = index
this.getdianpu()
},
// 点击tab切换
btntab(num){
this.tabindex = num
this.type = num
this.imgindex = 0
this.getlist()
}
}
}
</script>
<style lang="less">
::v-deep .u-icon__icon,
::v-deep .u-title{
padding-bottom: 22rpx !important;
}
2026-01-15 14:44:11 +08:00
// 头部区域样式
.header-section {
position: relative;
width: 100%;
height: 420rpx;
overflow: hidden;
.header-bg {
width: 100%;
height: 100%;
display: block;
}
.header-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
z-index: 1;
}
.header-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40rpx 32rpx;
z-index: 2;
.main-title {
display: flex;
flex-direction: column;
.title-text {
font-size: 48rpx;
font-weight: 700;
color: #FFFFFF;
letter-spacing: 2rpx;
text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3);
margin-bottom: 12rpx;
2025-12-20 14:32:28 +08:00
}
2026-01-15 14:44:11 +08:00
.title-subtitle {
font-size: 24rpx;
color: rgba(255,255,255,0.9);
letter-spacing: 1rpx;
font-weight: 400;
2025-12-20 14:32:28 +08:00
}
2026-01-15 14:44:11 +08:00
}
}
}
// Tab切换区域样式
.tab-container {
background: #FFFFFF;
padding: 32rpx 0;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
.tab-wrapper {
white-space: nowrap;
width: 100%;
.tab-list {
display: inline-flex;
padding: 0 32rpx;
gap: 20rpx;
.tab-item {
display: inline-flex;
2025-12-20 14:32:28 +08:00
align-items: center;
2026-01-15 14:44:11 +08:00
justify-content: center;
padding: 12rpx 32rpx;
border-radius: 50rpx;
border: 2rpx solid #E5E5E5;
background: #FFFFFF;
transition: all 0.3s ease;
white-space: nowrap;
.tab-text {
font-size: 28rpx;
color: #666666;
font-weight: 500;
}
&.tab-active {
background: linear-gradient(135deg, #15B37E 0%, #57E8B8 100%);
border-color: transparent;
box-shadow: 0 4rpx 16rpx rgba(21,179,126,0.3);
.tab-text {
color: #FFFFFF;
font-weight: 600;
}
2025-12-20 14:32:28 +08:00
}
}
}
}
}
2026-01-15 14:44:11 +08:00
// 特产商品滚动区域样式
.product-section {
padding: 40rpx 0;
background: #FFFFFF;
.product-scroll {
white-space: nowrap;
width: 100%;
.product-list {
display: inline-flex;
padding: 0 32rpx;
gap: 24rpx;
.product-card {
display: inline-flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
transition: all 0.3s ease;
.product-image-wrapper {
position: relative;
.product-image {
width: 220rpx;
height: 220rpx;
border-radius: 24rpx;
border: 4rpx solid transparent;
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
.product-badge {
position: absolute;
top: -8rpx;
right: -8rpx;
background: linear-gradient(135deg, #15B37E 0%, #57E8B8 100%);
padding: 4rpx 16rpx;
border-radius: 20rpx;
box-shadow: 0 2rpx 8rpx rgba(21,179,126,0.4);
.badge-text {
font-size: 20rpx;
color: #FFFFFF;
font-weight: 600;
}
}
}
.product-name {
font-size: 28rpx;
color: #333333;
font-weight: 600;
margin-top: 20rpx;
text-align: center;
width: 220rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.product-active {
.product-image-wrapper {
.product-image {
border-color: #15B37E;
box-shadow: 0 8rpx 24rpx rgba(21,179,126,0.25);
transform: scale(1.05);
}
}
.product-name {
color: #15B37E;
}
}
}
}
}
2025-12-20 14:32:28 +08:00
}
2026-01-15 14:44:11 +08:00
// 推荐店铺区域样式
.store-section {
background: #F7F8FA;
padding: 40rpx 0;
min-height: 400rpx;
.section-header {
padding: 0 32rpx 32rpx;
.section-title-wrapper {
display: flex;
flex-direction: column;
gap: 8rpx;
.section-title {
font-size: 40rpx;
font-weight: 700;
color: #1A1A1A;
letter-spacing: 1rpx;
2025-12-20 14:32:28 +08:00
}
2026-01-15 14:44:11 +08:00
.section-subtitle {
font-size: 24rpx;
color: #999999;
font-weight: 400;
2025-12-20 14:32:28 +08:00
}
}
}
2026-01-15 14:44:11 +08:00
.store-list {
padding: 0 32rpx;
.store-card {
display: flex;
align-items: center;
background: #FFFFFF;
border-radius: 24rpx;
padding: 24rpx;
margin-bottom: 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.1);
}
.store-image-wrapper {
flex-shrink: 0;
margin-right: 24rpx;
.store-image {
width: 200rpx;
height: 160rpx;
border-radius: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}
}
.store-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.store-name {
font-size: 32rpx;
font-weight: 700;
color: #1A1A1A;
margin-bottom: 16rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.store-address {
display: flex;
align-items: center;
gap: 8rpx;
.address-icon {
width: 28rpx;
height: 28rpx;
flex-shrink: 0;
}
.address-text {
font-size: 26rpx;
color: #666666;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
.store-arrow {
flex-shrink: 0;
margin-left: 16rpx;
.arrow-icon {
font-size: 48rpx;
color: #CCCCCC;
font-weight: 300;
}
}
}
.empty-tip {
width: 100%;
text-align: center;
padding: 80rpx 0;
.empty-text {
font-size: 28rpx;
color: #CCCCCC;
}
}
2025-12-20 14:32:28 +08:00
}
}
2026-01-15 14:44:11 +08:00
2025-12-20 14:32:28 +08:00
page {
2026-01-15 14:44:11 +08:00
background: #F7F8FA;
}
.page {
background: #F7F8FA;
min-height: 100vh;
2025-12-20 14:32:28 +08:00
}
</style>