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> <template>
<view class="content"> <view class="content">
<TopSafe></TopSafe> <TopSafe></TopSafe>
<view class="top-box"> <view class="top-box">
<shopHeader color="#fff" bgColor="transparent" isMid> <shopHeader color="#fff" bgColor="transparent" isMid>
<!-- #ifndef MP-WEIXIN --> <!-- #ifndef MP-WEIXIN -->
<template v-slot:mid> <template v-slot:mid>
<view <view
class="header-left" class="header-left"
style="height: 80rpx; display: flex; align-items: center" style="height: 80rpx; display: flex; align-items: center"
> >
<image <image
src="/static/home/shop-title.png" src="/static/home/shop-title.png"
style="width: 240rpx; height: 38rpx" style="width: 240rpx; height: 38rpx"
></image> ></image>
</view> </view>
</template> </template>
<template v-slot:right> <template v-slot:right>
<view <view
class="language_warp" class="language_warp"
style="width: 240rpx; height: 56rpx; justify-content: flex-start" style="width: 240rpx; height: 56rpx; justify-content: flex-start"
@click="jumpSearch" @click="jumpSearch"
> >
<view style="margin-top: 10rpx"> <view style="margin-top: 10rpx">
<up-image <up-image
src="/static/home/shop-search.png" src="/static/home/shop-search.png"
width="20" width="20"
height="20" height="20"
bgColor="#f1f6ff00" bgColor="#f1f6ff00"
></up-image> ></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> </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>
<view class="swiper-title">
<view class="setting-view"> <image
<YouItem src="/static/home/shop-intro.png"
@ok="onJumpShop" style="width: 308rpx; height: 30rpx"
style="margin-bottom: 24rpx" ></image>
:obj="item" <view class="swiper-center">信任桥-畅享全球好物</view>
v-for="(item, index) in dataList" <image
:key="index" @click="goShare"
></YouItem> src="/static/home/shop-go.png"
style="width: 92rpx; height: 30rpx"
></image>
</view> </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>
<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> </template>
<script> <script>
import shopHeader from '@/components/common/shopHeader.vue'; import shopHeader from "@/components/common/shopHeader.vue";
import TopSafe from '@/components/common/top-safe.nvue'; import TopSafe from "@/components/common/top-safe.nvue";
import MyBtn from '@/components/common/my-btn.vue'; import MyBtn from "@/components/common/my-btn.vue";
import YouItem from '@/components/shop/you-item.vue'; import YouItem from "@/components/shop/you-item.vue";
import { searchList } from '@/api/product.js'; import { searchList } from "@/api/product.js";
import { getCarouselImage } from '@/api/common.js'; import { getCarouselImage } from "@/api/common.js";
export default { export default {
components: { shopHeader, TopSafe, MyBtn, YouItem }, components: { shopHeader, TopSafe, MyBtn, YouItem },
data() { data() {
return { return {
dataList: [], dataList: [],
faddishProduct: [], // 爆款专区 faddishProduct: [], // 爆款专区
swiperList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png'], swiperList: ["https://cdn.uviewui.com/uview/swiper/swiper1.png"],
swiperListData:[], swiperListData: [],
}; };
},
onShow() {},
onLoad() {
this.init();
this.getCarouselImage();
},
methods: {
init() {
this.getSearchList();
this.querySearchList();
}, },
onShow() {}, async querySearchList() {
onLoad() { const params = {
this.init(); type: 1,
this.getCarouselImage(); 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(){ goShare() {
console.log('go 的地址') console.log("go 的地址");
}, if (swiperList[0]?.goodsUrl) {
onSwiperClick(index){ uni.navigateTo({
console.log('banner 图',this.swiperListData,index); url:
// swiperList[index].goodsUrl "/pages/other_package/productInfo/productInfo?id=" +
}, swiperList[0].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',
});
},
}, },
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.top-box { .top-box {
width: 100%; width: 100%;
padding-bottom: 24rpx; padding-bottom: 24rpx;
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%); background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
.swiper-box { .swiper-box {
position: relative; position: relative;
margin-bottom: 50rpx; margin-bottom: 50rpx;
.swiper-card { .swiper-card {
padding: 12rpx 32rpx 20rpx; 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;
}
} }
.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 { .shop-view {
background-color: #fff; background-color: #fff;
border-radius: 24rpx; border-radius: 24rpx;
margin: 0 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 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; padding: 24rpx;
width: 100rpx; .shop-item {
height: 56rpx; width: 202rpx;
padding: 0 24rpx; border-radius: 24rpx;
background: #ffffff; display: flex;
border-radius: 12rpx; 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 { .search_msg_warp {
margin-left: 12rpx; margin-left: 12rpx;
font-weight: 400; font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
} }
.bottom-btn { .bottom-btn {
width: 100%; width: 100%;
margin-bottom: 92rpx; margin-bottom: 92rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0 32rpx; padding: 0 32rpx;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
} }
.swiper-view { .swiper-view {
width: 100%; width: 100%;
height: 268rpx; height: 268rpx;
min-height: 268rpx; min-height: 268rpx;
display: flex; display: flex;
} }
.setting-view { .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%; width: 100%;
height: calc(100% - 88rpx - var(--status-bar-height)); border-radius: 16rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; background-color: #fff;
overflow-y: auto; padding: 64rpx 32rpx;
padding: 24rpx;
box-sizing: border-box; box-sizing: border-box;
position: relative; margin-top: 24rpx;
.name-box { .mid-view {
width: 100%; width: 100%;
border-radius: 16rpx; padding: 40rpx 32rpx;
display: flex; box-sizing: border-box;
flex-direction: column; display: flex;
background-color: #fff; flex-direction: column;
padding: 64rpx 32rpx; border: 2rpx solid #eaeaea;
box-sizing: border-box; border-radius: 16rpx;
margin-top: 24rpx; margin-top: 48rpx;
.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;
}
} }
.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> </style>