charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 跳转

Browse Source
This commit is contained in:
charles
2025-11-11 14:49:16 +08:00
parent 39a9252576
commit 4e7507f87c
1 changed files with 331 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/rwa_package/shop/you-shop.vue
+330 -310
View File
@@ -1,350 +1,370 @@
<template>
<view class="content">
<TopSafe></TopSafe>
<view class="top-box">
<shopHeader color="#fff" bgColor="transparent" isMid>
<!-- #ifndef MP-WEIXIN -->
<template v-slot:mid>
<view
class="header-left"
style="height: 80rpx; display: flex; align-items: center"
>
<image
src="/static/home/shop-title.png"
style="width: 240rpx; height: 38rpx"
></image>
</view>
</template>
<template v-slot:right>
<view
class="language_warp"
style="width: 240rpx; height: 56rpx; justify-content: flex-start"
@click="jumpSearch"
>
<view style="margin-top: 10rpx">
<up-image
src="/static/home/shop-search.png"
width="20"
height="20"
bgColor="#f1f6ff00"
></up-image>
</view>
<text class="search_msg_warp">搜索</text>
</view>
</template>
<!-- #endif -->
</shopHeader>
<view class="swiper-box">
<view class="swiper-card">
<up-swiper
:list="swiperList"
style="width: 100%; border-radius: 20rpx; height: 160rpx"
circular
@click="onSwiperClick"
@change="(e) => (currentNum = e.current)"
></up-swiper>
</view>
<view class="swiper-title">
<image
src="/static/home/shop-intro.png"
style="width: 308rpx; height: 30rpx"
></image>
<view class="swiper-center">信任桥-畅享全球好物</view>
<image
@click="goShare"
src="/static/home/shop-go.png"
style="width: 92rpx; height: 30rpx"
></image>
</view>
</view>
<!-- 爆款专区 -->
<view class="shop-view">
<view
class="shop-item"
v-for="(item, index) in faddishProduct"
:style="{ background: 'url(' + item.url + ')' }"
style="text-align: center; background-size: 202rpx 228rpx"
:key="index"
@click="jumpInfo(item)"
>
<view class="shop-content">
<view class="shop-name">{{ item.title }}</view>
<view class="shop-price">优选价{{ item.price }}元</view>
</view>
</view>
<view class="content">
<TopSafe></TopSafe>
<view class="top-box">
<shopHeader color="#fff" bgColor="transparent" isMid>
<!-- #ifndef MP-WEIXIN -->
<template v-slot:mid>
<view
class="header-left"
style="height: 80rpx; display: flex; align-items: center"
>
<image
src="/static/home/shop-title.png"
style="width: 240rpx; height: 38rpx"
></image>
</view>
</template>
<template v-slot:right>
<view
class="language_warp"
style="width: 240rpx; height: 56rpx; justify-content: flex-start"
@click="jumpSearch"
>
<view style="margin-top: 10rpx">
<up-image
src="/static/home/shop-search.png"
width="20"
height="20"
bgColor="#f1f6ff00"
></up-image>
</view>
<text class="search_msg_warp">搜索</text>
</view>
</template>
<!-- #endif -->
</shopHeader>
<view class="swiper-box">
<view class="swiper-card">
<up-swiper
:list="swiperList"
style="width: 100%; border-radius: 20rpx; height: 160rpx"
circular
@click="onSwiperClick"
@change="(e) => (currentNum = e.current)"
></up-swiper>
</view>
<view class="setting-view">
<YouItem
@ok="onJumpShop"
style="margin-bottom: 24rpx"
:obj="item"
v-for="(item, index) in dataList"
:key="index"
></YouItem>
<view class="swiper-title">
<image
src="/static/home/shop-intro.png"
style="width: 308rpx; height: 30rpx"
></image>
<view class="swiper-center">信任桥-畅享全球好物</view>
<image
@click="goShare"
src="/static/home/shop-go.png"
style="width: 92rpx; height: 30rpx"
></image>
</view>
<up-toast ref="uToastRef"></up-toast>
</view>
<!-- 爆款专区 -->
<view class="shop-view">
<view
class="shop-item"
v-for="(item, index) in faddishProduct"
:style="{ background: 'url(' + item.url + ')' }"
style="text-align: center; background-size: 202rpx 228rpx"
:key="index"
@click="jumpInfo(item)"
>
<view class="shop-content">
<view class="shop-name">{{ item.title }}</view>
<view class="shop-price">优选价{{ item.price }}元</view>
</view>
</view>
</view>
</view>
<view class="setting-view">
<YouItem
@ok="onJumpShop"
style="margin-bottom: 24rpx"
:obj="item"
v-for="(item, index) in dataList"
:key="index"
></YouItem>
</view>
<up-toast ref="uToastRef"></up-toast>
</view>
</template>
<script>
import shopHeader from '@/components/common/shopHeader.vue';
import TopSafe from '@/components/common/top-safe.nvue';
import MyBtn from '@/components/common/my-btn.vue';
import YouItem from '@/components/shop/you-item.vue';
import { searchList } from '@/api/product.js';
import { getCarouselImage } from '@/api/common.js';
import shopHeader from "@/components/common/shopHeader.vue";
import TopSafe from "@/components/common/top-safe.nvue";
import MyBtn from "@/components/common/my-btn.vue";
import YouItem from "@/components/shop/you-item.vue";
import { searchList } from "@/api/product.js";
import { getCarouselImage } from "@/api/common.js";
export default {
components: { shopHeader, TopSafe, MyBtn, YouItem },
data() {
return {
dataList: [],
faddishProduct: [], // 爆款专区
swiperList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png'],
swiperListData:[],
};
components: { shopHeader, TopSafe, MyBtn, YouItem },
data() {
return {
dataList: [],
faddishProduct: [], // 爆款专区
swiperList: ["https://cdn.uviewui.com/uview/swiper/swiper1.png"],
swiperListData: [],
};
},
onShow() {},
onLoad() {
this.init();
this.getCarouselImage();
},
methods: {
init() {
this.getSearchList();
this.querySearchList();
},
onShow() {},
onLoad() {
this.init();
this.getCarouselImage();
async querySearchList() {
const params = {
type: 1,
page: 1,
isRecomm: true,
pageSize: 3,
};
const resp = await searchList(params);
if (resp && resp.bizcode === 100) {
this.faddishProduct = resp.data;
}
},
jumpSearch() {
uni.navigateTo({
url: "/pages/rwa_package/dongjian/search",
});
},
// 跳转到商品详情
jumpInfo(item) {
uni.navigateTo({
url: "/pages/other_package/productInfo/productInfo?id=" + item.id,
});
},
methods: {
init() {
this.getSearchList();
this.querySearchList();
},
async querySearchList() {
const params = {
type: 1,
page: 1,
isRecomm: true,
pageSize: 3,
};
const resp = await searchList(params);
if (resp && resp.bizcode === 100) {
this.faddishProduct = resp.data;
}
},
jumpSearch() {
uni.navigateTo({
url: '/pages/rwa_package/dongjian/search',
})
},
// 跳转到商品详情
jumpInfo(item) {
uni.navigateTo({
url: '/pages/other_package/productInfo/productInfo?id=' + item.id,
})
},
goShare(){
console.log('go 的地址')
},
onSwiperClick(index){
console.log('banner 图',this.swiperListData,index);
// swiperList[index].goodsUrl
},
async getSearchList() {
const params = {
type: 1,
page: 1,
pageSize: 99,
};
const resp = await searchList(params);
if (resp && resp.bizcode === 100) {
this.dataList = resp.data || [];
}
},
async getCarouselImage() {
const params = {
pageUi: 4,
};
const resp = await getCarouselImage(params);
if (resp && resp.bizcode === 100) {
const data = resp.data || [];
this.swiperListData = data;
this.swiperList = data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
}
},
onJumpShop(id) {
uni.navigateTo({
url: '/pages/other_package/productInfo/productInfo?id=' + id,
});
},
onShare() {
uni.navigateTo({
url: '/pages/other_package/invite_friends/invite_friends',
});
},
goShare() {
console.log("go 的地址");
if (swiperList[0]?.goodsUrl) {
uni.navigateTo({
url:
"/pages/other_package/productInfo/productInfo?id=" +
swiperList[0].goodsUrl,
});
}
},
onSwiperClick(index) {
console.log("banner 图", this.swiperListData, index);
swiperList[index].goodsUrl;
if (swiperList[index]?.goodsUrl) {
uni.navigateTo({
url:
"/pages/other_package/productInfo/productInfo?id=" +
swiperList[index].goodsUrl,
});
}
},
async getSearchList() {
const params = {
type: 1,
page: 1,
pageSize: 99,
};
const resp = await searchList(params);
if (resp && resp.bizcode === 100) {
this.dataList = resp.data || [];
}
},
async getCarouselImage() {
const params = {
pageUi: 4,
};
const resp = await getCarouselImage(params);
if (resp && resp.bizcode === 100) {
const data = resp.data || [];
this.swiperListData = data;
this.swiperList =
data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
}
},
onJumpShop(id) {
uni.navigateTo({
url: "/pages/other_package/productInfo/productInfo?id=" + id,
});
},
onShare() {
uni.navigateTo({
url: "/pages/other_package/invite_friends/invite_friends",
});
},
},
};
</script>
<style lang="scss" scoped>
.top-box {
width: 100%;
padding-bottom: 24rpx;
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
.swiper-box {
position: relative;
margin-bottom: 50rpx;
.swiper-card {
padding: 12rpx 32rpx 20rpx;
}
.swiper-title {
padding: 3rpx 10rpx;
position: absolute;
left: -14rpx;
top: 164rpx;
height: 56rpx;
width: 702rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 28rpx;
background-color: #f0e7fe;
border-radius: 8rpx;
}
.swiper-center {
background: #ffffff;
border-radius: 6rpx;
font-size: 20rpx;
padding: 0 20rpx;
border: 2rpx solid;
border-image: linear-gradient(270deg, rgba(174, 57, 196, 1), rgba(119, 50, 255, 1)) 1 1;
}
width: 100%;
padding-bottom: 24rpx;
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
.swiper-box {
position: relative;
margin-bottom: 50rpx;
.swiper-card {
padding: 12rpx 32rpx 20rpx;
}
.swiper-title {
padding: 3rpx 10rpx;
position: absolute;
left: -14rpx;
top: 164rpx;
height: 56rpx;
width: 702rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 28rpx;
background-color: #f0e7fe;
border-radius: 8rpx;
}
.swiper-center {
background: #ffffff;
border-radius: 6rpx;
font-size: 20rpx;
padding: 0 20rpx;
border: 2rpx solid;
border-image: linear-gradient(
270deg,
rgba(174, 57, 196, 1),
rgba(119, 50, 255, 1)
)
1 1;
}
}
.shop-view {
background-color: #fff;
border-radius: 24rpx;
margin: 0 24rpx;
display: flex;
justify-content: space-between;
padding: 24rpx;
.shop-item {
width: 202rpx;
border-radius: 24rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.shop-content {
width: 100%;
margin-top: 130rpx;
background: #f0e7fe;
border-radius: 0 0 23rpx 24rpx;
.shop-name {
font-size: 24rpx;
color: #000000;
font-weight: bold;
box-sizing: border-box;
width: 202rpx;
text-align: center;
padding: 12rpx 10rpx;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 显示省略号 */
}
.shop-price {
width: 160rpx;
font-size: 16rpx;
padding: 3rpx 6rpx;
box-sizing: border-box;
color: #fff;
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
border-radius: 4px;
margin: 0 auto 12rpx;
}
}
}
}
}
.language_warp {
.shop-view {
background-color: #fff;
border-radius: 24rpx;
margin: 0 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
width: 100rpx;
height: 56rpx;
padding: 0 24rpx;
background: #ffffff;
border-radius: 12rpx;
padding: 24rpx;
.shop-item {
width: 202rpx;
border-radius: 24rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.shop-content {
width: 100%;
margin-top: 130rpx;
background: #f0e7fe;
border-radius: 0 0 23rpx 24rpx;
.shop-name {
font-size: 24rpx;
color: #000000;
font-weight: bold;
box-sizing: border-box;
width: 202rpx;
text-align: center;
padding: 12rpx 10rpx;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 显示省略号 */
}
.shop-price {
width: 160rpx;
font-size: 16rpx;
padding: 3rpx 6rpx;
box-sizing: border-box;
color: #fff;
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
border-radius: 4px;
margin: 0 auto 12rpx;
}
}
}
}
}
.language_warp {
display: flex;
justify-content: space-between;
align-items: center;
width: 100rpx;
height: 56rpx;
padding: 0 24rpx;
background: #ffffff;
border-radius: 12rpx;
}
.search_msg_warp {
margin-left: 12rpx;
font-weight: 400;
font-size: 28rpx;
color: #333;
margin-left: 12rpx;
font-weight: 400;
font-size: 28rpx;
color: #333;
}
.bottom-btn {
width: 100%;
margin-bottom: 92rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
position: relative;
width: 100%;
margin-bottom: 92rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
position: relative;
}
.swiper-view {
width: 100%;
height: 268rpx;
min-height: 268rpx;
display: flex;
width: 100%;
height: 268rpx;
min-height: 268rpx;
display: flex;
}
.setting-view {
width: 100%;
height: calc(100% - 88rpx - var(--status-bar-height));
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
padding: 24rpx;
box-sizing: border-box;
position: relative;
.name-box {
width: 100%;
height: calc(100% - 88rpx - var(--status-bar-height));
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
padding: 24rpx;
background-color: #fff;
padding: 64rpx 32rpx;
box-sizing: border-box;
position: relative;
.name-box {
width: 100%;
border-radius: 16rpx;
display: flex;
flex-direction: column;
background-color: #fff;
padding: 64rpx 32rpx;
box-sizing: border-box;
margin-top: 24rpx;
.mid-view {
width: 100%;
padding: 40rpx 32rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
border: 2rpx solid #eaeaea;
border-radius: 16rpx;
margin-top: 48rpx;
}
.top-view {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.input-view {
border-radius: 20rpx;
margin-top: 52rpx;
width: 100%;
padding: 0 32rpx;
min-height: 104rpx;
display: flex;
flex-direction: row;
align-items: center;
background-color: #f5f5f5;
box-sizing: border-box;
}
margin-top: 24rpx;
.mid-view {
width: 100%;
padding: 40rpx 32rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
border: 2rpx solid #eaeaea;
border-radius: 16rpx;
margin-top: 48rpx;
}
.top-view {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.input-view {
border-radius: 20rpx;
margin-top: 52rpx;
width: 100%;
padding: 0 32rpx;
min-height: 104rpx;
display: flex;
flex-direction: row;
align-items: center;
background-color: #f5f5f5;
box-sizing: border-box;
}
}
}
</style>