386 lines
10 KiB
Vue
386 lines
10 KiB
Vue
<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="https://static.tbmall.xin/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="https://static.tbmall.xin/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">
|
|
<u-swiper
|
|
:list="swiperList"
|
|
style="width: 100%; border-radius: 20rpx; height: 218rpx"
|
|
circular
|
|
@click="onSwiperClick"
|
|
@change="(e) => (currentNum = e.current)"
|
|
imgMode="scaleToFill"
|
|
></u-swiper>
|
|
</view>
|
|
<view class="swiper-title">
|
|
<image
|
|
src="https://static.tbmall.xin/static/home/shop-intro.png"
|
|
style="width: 308rpx; height: 30rpx"
|
|
></image>
|
|
<view class="swiper-center text-zi">信任桥-畅享全球好物</view>
|
|
<image
|
|
@click="goShare"
|
|
src="https://static.tbmall.xin/static/home/shop-go.png"
|
|
style="width: 75rpx; 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>
|
|
|
|
<view class="setting-view">
|
|
<PreferredProductItem
|
|
@ok="onJumpShop"
|
|
style="margin-bottom: 24rpx"
|
|
:obj="item"
|
|
v-for="(item, index) in dataList"
|
|
:key="index"
|
|
></PreferredProductItem>
|
|
</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 PreferredProductItem from "@/components/shop/preferred-product-item.vue";
|
|
import { searchList } from "@/api/product.js";
|
|
import { getCarouselImage } from "@/api/common.js";
|
|
|
|
export default {
|
|
components: { shopHeader, TopSafe, MyBtn, PreferredProductItem },
|
|
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();
|
|
},
|
|
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/insights/search",
|
|
});
|
|
},
|
|
// 跳转到商品详情
|
|
jumpInfo(item) {
|
|
uni.navigateTo({
|
|
url: "/pages/other_package/productInfo/productInfo?id=" + item.id,
|
|
});
|
|
},
|
|
|
|
goShare() {
|
|
console.log("go 的地址");
|
|
if (this.swiperListData[0]?.goodsUrl) {
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/other_package/productInfo/productInfo?id=" +
|
|
this.swiperListData[0].goodsUrl,
|
|
});
|
|
}
|
|
},
|
|
onSwiperClick(index) {
|
|
console.log("banner1111", this.swiperList, index);
|
|
this.swiperListData[index].goodsUrl;
|
|
if (this.swiperListData[index]?.goodsUrl) {
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/other_package/productInfo/productInfo?id=" +
|
|
this.swiperListData[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>
|
|
.content {
|
|
height: auto;
|
|
overflow: auto;
|
|
}
|
|
::v-deep(.u-swiper__wrapper) {
|
|
.u-swiper__wrapper__item__wrapper {
|
|
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%)!important;
|
|
}
|
|
}
|
|
.top-box {
|
|
width: 100%;
|
|
padding-bottom: 24rpx;
|
|
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
|
|
.swiper-box {
|
|
position: relative;
|
|
margin-bottom: 20rpx;
|
|
.swiper-card {
|
|
padding: 12rpx 32rpx 0;
|
|
height:200rpx;
|
|
}
|
|
.swiper-title {
|
|
padding: 3rpx 16rpx;
|
|
box-sizing: border-box;
|
|
|
|
position: relative;
|
|
z-index: 10;
|
|
// left: -14rpx;
|
|
// top: 164rpx;
|
|
height: 56rpx;
|
|
width: 702rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 0 auto;
|
|
background-color: #fee7ef;
|
|
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 {
|
|
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;
|
|
}
|
|
.bottom-btn {
|
|
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;
|
|
}
|
|
.setting-view {
|
|
width: 700rpx;
|
|
// height: calc(100% - var(--status-bar-height));
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
overflow-y: auto;
|
|
padding: 24rpx 0;
|
|
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;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|