feat: 特价页面样式修改

components/common/shopHeader.vue

@@ -0,0 +1,150 @@
+<template>
+	<view class="header" :style="{backgroundColor:bgColor,height:height,borderBottomWidth:borderWidth}">
+		<view class="header-left">
+			<view  class="header-left" v-if="isBack" @click="goback">
+				<u-icon :size="fontSize" name="arrow-left" :color="color"></u-icon>
+			</view>
+			<slot name="left" v-else>
+			</slot>
+		</view>
+		<view class="header-mid">
+			<slot name="mid" v-if="isMid">
+				
+			</slot>
+			<text v-else :style="{fontSize:fontSize,fontWeight:fontWeight,color:color}">{{title}}</text>
+		</view>
+		<view class="header-right">
+			<slot name="right">
+				
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * 共用头部 
+	 * title:中间标题 默认空
+	 * bgColor:背景色 默认#fff
+	 * height:高度 默认88rpx
+	 * isBack:是否打开左方返回 默认打开
+	 * borderWidth:下划线 默认无
+	 * fontSize:返回箭头 中间字体大小 默认30rpx
+	 * fontWeight:中间字体字重 默认加粗
+	 * color:返回箭头 中间字体颜色 默认#333  
+	 * slot->left:左边插槽 开启后要将isBack传false
+	 * slot->right:右边插槽
+	 * isReturn 抛出返回方法
+	 */
+	export default {
+		props:{
+			black:{
+				type:Boolean,
+				default:false
+			},
+			isMid:{
+				type:Boolean,
+				default:false
+			},
+			title:{
+				type:String,
+				default:''
+			},
+			bgColor:{
+				type:String,
+				default:'#fff'
+			},
+			height:{
+				type:String,
+				default:'88rpx'
+			},
+			isBack:{
+				type:Boolean,
+				default:true
+			},
+			borderWidth:{
+				type:String,
+				default:'0'
+			},
+			fontSize:{
+				type:String,
+				default:'36rpx'
+			},
+			fontWeight:{
+				type:String,
+				default:'bold'
+			},
+			color:{
+				type:String,
+				default:'#333'
+			},
+			isReturn:{
+				type:Boolean,
+				default:false
+			}
+			
+		},
+		mounted(){
+		},
+		methods: {
+			goback(){
+				if(this.isReturn){
+					this.$emit('return');
+				}else{
+					console.log('2312313')
+					uni.navigateBack()
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.header{
+		width:100vw;
+		height:88rpx;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom-style: solid;
+		font-weight: bold;
+		padding: 0 30rpx;
+		font-size: 30rpx;
+		background-color: transparent;
+		box-sizing: border-box;
+		.header-left{
+			width:48rpx;
+			height: 48rpx;
+			display: flex;
+			background: rgba(0,0,0,0.2);
+			border-radius: 8rpx;
+			align-items: center;
+			justify-content: center;
+			position: relative;
+			.left-img{
+				width:18rpx;
+				height:30rpx;
+			}
+		}
+		.header-right{
+			min-width:240rpx;
+			height:56rpx;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			position: relative;
+		}
+		.header-mid{
+			color: #fff;
+			flex:1;
+			height:100%;
+			margin-left: 32rpx;
+			font-size: 36rpx;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+		}
+	}
+	
+</style>

components/shop/you-item.vue

@@ -4,24 +4,18 @@
 			<image :src="obj.url"></image>
 		</view>
 		<view class="shop-right-view">
+			<view class="shop-top-img">
+				<image src="/static/home/xyx.png"  style="width: 122rpx;height: 28rpx;margin-right: 12rpx;"></image>
+				<image src="/static/home/xs.png" v-if="obj.limitedTime "  style="width: 52rpx;height: 28rpx;margin-right: 12rpx;"></image>
+				<image src="/static/home/tg.png"  v-if="obj.tag" style="width: 80rpx;height: 28rpx;"></image>
+			</view>
 			<view class="right-top-view text-overflow1">
 				<text class="text-32 text-bold text-zu text-overflow1">{{obj.title}}</text> 
 			</view>
-			<view class="right-bottom-view">
+			<view class="shop-price" @ok.stop="onClick" >
-				<view class="flex-c-lr" >
+				<view class="price-left"><text style="font-size: 24rpx;">¥</text>{{obj.price}}</view>
-					<view class="text-24" style="color:#FF5A5A;width: 112rpx;height: 32rpx; margin-right: 3rpx;" v-if="obj.tag">
+				<view class="price-center">专区立省{{  Number(obj.adPrice) - Number(obj.price) }}元</view>
-						<image src="/static/shopping/tg.png"  style="width: 112rpx;height: 32rpx;"></image>
+				<image src="/static/home/qiang.png"  style="width: 80rpx;height: 80rpx;"></image>
-					</view>
-					<image v-if="obj.id === 33162" src="/static/shopping/tp.png" alt="" style="width: 60rpx;height: 32rpx; margin-top: 2rpx;"></image>
-					<text class="text-24 text-fu">原价</text>
-					<text class="text-24 text-fu text-d text-bold">￥{{obj.adPrice}}</text>
-				</view>
-				<view class="right-bottom-panel" style="height:70rpx">
-					<MyBtn  @ok.stop="onClick" mh="36rpx" :text="`专区立省${Number(obj.adPrice) - Number(obj.price)}元`" br="8rpx" fz="16rpx" bg="linear-gradient( 270deg, #AF39C4 0%, #7732FF 100%)" wd="260rpx"></MyBtn>
-					<text class="text-28 text-zi text-bold">到手
-						<text class="text-36">￥{{obj.price}}</text>
-					</text>
-				</view>
 			</view>
 		</view>
 	</view>
@@ -54,10 +48,10 @@
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
-		padding: 12rpx;
+		padding: 20rpx;
 		box-sizing: border-box;
 		background-color: #fff;			
-		border-radius: 12rpx;
+		border-radius: 16rpx;
 		.shop-left-view{
 			min-width:216rpx;
 			min-height:216rpx;
@@ -65,8 +59,9 @@
 			align-items: center;
 			justify-content: center;
 			image{
-				width:216rpx;
+				width:220rpx;
-				height:216rpx;
+				height:220rpx;
+				border-radius: 8rpx;
 			}
 		}
 		.shop-right-view{
@@ -75,30 +70,37 @@
 			min-height:216rpx;
 			margin-left:24rpx;
 			flex-direction: column;
-			justify-content: space-between;
+			justify-content: space-around;
+			.shop-top-img{
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+				image{
+					width: 100%;
+					height: 100%;
+				}
+			}
 			.right-top-view{
 				width:100%;
 				display: flex;
 				
 			}
-			.right-bottom-view{
+			.shop-price{
-				width:100%;
+				background: linear-gradient( 270deg, #F0E7FE 0%, rgba(240,231,254,0) 100%);
+				width: 100%;
+				height: 80rpx;
 				display: flex;
-				flex-direction: row;
-				justify-content: space-between;
-				align-items: flex-end;
-				.right-bottom-panel{
-					width:284rpx;
-					height:104rpx;
-					min-height:104rpx;
-					display: flex;
-					flex-direction: column;
 				justify-content: space-between;
 				align-items: center;
-					padding: 12rpx;
+					.price-left{
-					box-sizing: border-box;
+					font-weight: bold;
-					background-color: #F0E7FE;
+					font-size: 28rpx;
-					border-radius: 8rpx;
+					color: #7934F6;
+				}
+				.price-center{
+					font-size: 20rpx;
+					color: #7934F6;
 				}
 			}
 		}

pages/rwa_package/shop copy/fen-shop.vue

@@ -0,0 +1,170 @@
+<template>
+	<view class="content">
+		<TopSafe></TopSafe>
+		<Header title="兑换券专区" >
+			<!-- #ifndef MP-WEIXIN -->
+				<template v-slot:right>
+					<u-icon name="share-fill" @click="onShare" color="#333" size="24"></u-icon>
+				</template>
+			<!-- #endif -->
+		</Header>
+		<view class="swiper-view">
+			<up-swiper
+			:list="swiperList"
+			style="width:100%"
+			circular
+			></up-swiper>
+		</view>
+
+		<view class="mid-panel">
+			<up-image src="/static/common/jingxuan_left.png" width="24" height="8" bgColor="#f1f6ff00"></up-image>
+			<view style="margin:0 12rpx">信任桥兑换</view>
+			<up-image src="/static/common/jingxuan_right.png" width="24" height="8" bgColor="#f1f6ff00"></up-image>
+		</view>
+		<view class="setting-view">
+			<FenItem @ok="onJumpShop" style="margin-top:24rpx" :obj="item" v-for="(item,index) in dataList" :key="index"></FenItem>
+		</view>
+		<up-toast ref="uToastRef"></up-toast>
+	</view>
+</template>
+
+<script>
+import Header from '@/components/common/header.vue';
+import TopSafe from '@/components/common/top-safe.nvue'
+import MyBtn from '@/components/common/my-btn.vue'
+import FenItem from '@/components/shop/fen-item.vue'
+import { searchList } from '@/api/product.js';
+import { getCarouselImage } from '@/api/common.js';
+
+export default {
+	components: { Header, TopSafe,MyBtn,FenItem },
+	data() {
+		return {
+			dataList:[],
+			swiperList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png'],
+		};
+	},
+	onShow() {
+	},
+	onLoad() {
+		this.init();
+	},
+	methods: {
+		init() {
+			this.getSearchList();
+			this.getCarouselImage();
+		},
+		async getCarouselImage(){
+			const params={
+				pageUi:6,
+			}
+			const resp = await getCarouselImage(params);
+			if(resp && resp.bizcode === 100){
+				const data = resp.data || [];
+				this.swiperList = data.length !== 0 ? data.map(obj=>obj.carouselImage) : [];
+			}
+		},
+		async getSearchList(){
+			const params = {
+				type:3,
+				page:1,
+				pageSize:99,
+			}
+			const resp = await searchList(params);
+			if(resp && resp.bizcode === 100){
+				this.dataList = resp.data || [];
+			}
+		},
+		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>
+.bottom-btn{
+	width: 100%;
+	margin-bottom:92rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 0 32rpx;
+	box-sizing: border-box;
+	position: relative;
+	
+}
+.mid-panel{
+	width:100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	height:120rpx;
+	min-height:120rpx;
+}
+.swiper-view{
+	width:100%;
+	height:268rpx;
+	min-height:268rpx;
+	display: flex;
+}
+.setting-view {
+	width: 100%;
+	height: calc(100% - 88rpx - 268rpx - 156rpx - var(--status-bar-height));
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	overflow-y: auto;
+	padding: 0 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;
+			
+		}
+	}
+	
+}
+</style>

pages/rwa_package/shop copy/sort-shop.vue

@@ -0,0 +1,116 @@
+<template>
+	<view class="content">
+		<TopSafe></TopSafe>
+		<Header :title="name" >
+			<!-- #ifndef MP-WEIXIN -->
+				<template v-slot:right>
+					<u-icon name="share-fill" @click="onShare" color="#333" size="24"></u-icon>
+				</template>
+			<!-- #endif -->
+		</Header>
+		<view class="setting-view">
+			<view class="name-box">
+				<PingItem @ok="onJumpShop" style="margin-top:24rpx" :obj="item" v-for="(item,index) in dataList" :key="index"></PingItem>
+			</view>
+		</view>
+		<up-toast ref="uToastRef"></up-toast>
+	</view>
+</template>
+
+<script>
+import Header from '@/components/common/header.vue';
+import TopSafe from '@/components/common/top-safe.nvue'
+import MyBtn from '@/components/common/my-btn.vue'
+import { searchList } from '@/api/product.js';
+import { getCascadeCategory } from '@/api/common.js';
+
+import PingItem from "@/components/shop/ping-item.vue";
+import func from '@/utils/func.js';
+
+export default {
+	components: { Header, TopSafe,MyBtn,PingItem },
+	data() {
+		return {
+			dataList:[
+			],
+			name:null,
+			id:0
+		};
+	},
+	onShow() {
+	},
+	onLoad(option) {
+		if(option && option.id){
+			this.id = Number(option.id);
+			this.name = option.name;
+			this.init();
+		}
+		
+	},
+	methods: {
+		init() {
+			this.getSearchList();
+		},
+		async getSearchList(){
+			const params = {
+				page: 1,
+				pageSize: 99,
+				categoryId:this.id
+			}
+			const resp = await searchList(params);
+			if(resp && resp.bizcode === 100){
+				this.dataList = resp.data || [];
+			}
+		},
+		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>
+.bottom-btn{
+	width: 100%;
+	margin-bottom:92rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 0 32rpx;
+	box-sizing: border-box;
+	position: relative;
+	
+}
+.setting-view {
+	width: 100%;
+	height: calc(100% - 88rpx - var(--status-bar-height));
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	overflow-y: auto;
+	padding: 0 32rpx;
+	box-sizing: border-box;
+	position: relative;
+	.name-box {
+	  width: 100%;
+	  border-radius: 16rpx;
+	  height: 100%;
+	  overflow-y: auto;
+	  display: flex;
+	  flex-wrap: wrap;
+	  justify-content: space-between;
+	  align-content: flex-start;
+	
+	  box-sizing: border-box;
+	}
+	
+	
+}
+</style>

pages/rwa_package/shop copy/you-shop.vue

@@ -0,0 +1,173 @@
+<template>
+	<view class="content">
+		<TopSafe></TopSafe>
+		<Header title="信任桥优选专区" >
+			<!-- #ifndef MP-WEIXIN -->
+				<template v-slot:right>
+					<u-icon name="share-fill" @click="onShare" color="#333" size="24"></u-icon>
+				</template>
+			<!-- #endif -->
+		</Header>
+
+		<view class="swiper-view">
+			<up-swiper
+			:list="swiperList"
+			style="width:100%"
+			circular
+			></up-swiper>
+		</view>
+
+		<view class="mid-panel">
+			<up-image src="/static/common/jingxuan_left.png" width="24" height="8" bgColor="#f1f6ff00"></up-image>
+			<view style="margin:0 12rpx">信任桥优选</view>
+			<up-image src="/static/common/jingxuan_right.png" width="24" height="8" bgColor="#f1f6ff00"></up-image>
+		</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 Header from '@/components/common/header.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: { Header, TopSafe,MyBtn,YouItem },
+	data() {
+		return {
+			dataList:[
+			],
+			swiperList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png'],
+		};
+	},
+	onShow() {
+	},
+	onLoad() {
+		this.init();
+		this.getCarouselImage();
+	},
+	methods: {
+		init() {
+			this.getSearchList();
+		},
+		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.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>
+.bottom-btn{
+	width: 100%;
+	margin-bottom:92rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 0 32rpx;
+	box-sizing: border-box;
+	position: relative;
+	
+}
+.mid-panel{
+	width:100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	height:120rpx;
+	min-height:120rpx;
+}
+.swiper-view{
+	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: 0 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;
+			
+		}
+	}
+	
+}
+</style>

pages/rwa_package/shop/you-shop.vue

@@ -1,54 +1,108 @@
 <template>
     <view class="content">
         <TopSafe></TopSafe>
-		<Header title="信任桥优选专区" >
+        <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>
-					<u-icon name="share-fill" @click="onShare" color="#333" size="24"></u-icon>
+                    <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 -->
-		</Header>
+            </shopHeader>
-
+            <view class="swiper-box">
-		<view class="swiper-view">
+                <view class="swiper-card">
                     <up-swiper
                         :list="swiperList"
-			style="width:100%"
+                        style="width: 100%; border-radius: 20rpx; height: 160rpx"
                         circular
                     ></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
+                        src="/static/home/shop-go.png"
+                        style="width: 92rpx; height: 30rpx"
+                    ></image>
+                </view>
+            </view>
 
-		<view class="mid-panel">
+            <!-- 爆款专区 -->
-			<up-image src="/static/common/jingxuan_left.png" width="24" height="8" bgColor="#f1f6ff00"></up-image>
+            <view class="shop-view">
-			<view style="margin:0 12rpx">信任桥优选</view>
+                <view
-			<up-image src="/static/common/jingxuan_right.png" width="24" height="8" bgColor="#f1f6ff00"></up-image>
+                    class="shop-item"
+                    v-for="(item, index) in faddishProduct"
+                    :style="{ background: 'url(' + item.url + ')' }"
+                    style="text-align: center; background-size: 202rpx 228rpx"
+                    :key="index"
+                >
+                    <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>
+            <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 Header from '@/components/common/header.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 { getCarouselImage } from '@/api/common.js';
 
 export default {
-	components: { Header, TopSafe,MyBtn,YouItem },
+    components: { shopHeader, TopSafe, MyBtn, YouItem },
     data() {
         return {
-			dataList:[
+            dataList: [],
-			],
+            faddishProduct: [], // 爆款专区
             swiperList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png'],
         };
     },
-	onShow() {
+    onShow() {},
-	},
     onLoad() {
         this.init();
         this.getCarouselImage();
@@ -56,67 +110,168 @@ export default {
     methods: {
         init() {
             this.getSearchList();
+            this.querySearchList();
         },
-		async getSearchList(){
+        async querySearchList() {
             const params = {
-				type:1,
+                type: 1,
-				page:1,
+                page: 1,
-				pageSize:99,
+                isRecomm: true,
-			}
+                pageSize: 3,
+            };
             const resp = await searchList(params);
-			if(resp && resp.bizcode === 100){
+            if (resp && resp.bizcode === 100) {
+                this.faddishProduct = resp.data;
+            }
+        },
+        jumpSearch() {},
+        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(){
+        async getCarouselImage() {
-			const params={
+            const params = {
-				pageUi:4,
+                pageUi: 4,
-			}
+            };
             const resp = await getCarouselImage(params);
-			if(resp && resp.bizcode === 100){
+            if (resp && resp.bizcode === 100) {
                 const data = resp.data || [];
-				this.swiperList = data.length !== 0 ? data.map(obj=>obj.carouselImage) : [];
+                this.swiperList = data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
             }
         },
-		onJumpShop(id){
+        onJumpShop(id) {
             uni.navigateTo({
-			    url: '/pages/other_package/productInfo/productInfo?id='+id,
+                url: '/pages/other_package/productInfo/productInfo?id=' + id,
-			})
+            });
         },
-		onShare(){
+        onShare() {
             uni.navigateTo({
                 url: '/pages/other_package/invite_friends/invite_friends',
-			})
+            });
-		}
+        },
-	}
+    },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-.bottom-btn{
+.top-box { 
     width: 100%;
-	margin-bottom:92rpx;
+    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 {
+    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 {
-.mid-panel{
+    width: 100%;
-	width:100%;
+    height: 268rpx;
-	display: flex;
+    min-height: 268rpx;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	height:120rpx;
-	min-height:120rpx;
-}
-.swiper-view{
-	width:100%;
-	height:268rpx;
-	min-height:268rpx;
     display: flex;
 }
 .setting-view {
@@ -126,48 +281,46 @@ export default {
     flex-direction: column;
     align-items: center;
     overflow-y: auto;
-	padding: 0 32rpx;
+    padding: 24rpx;
     box-sizing: border-box;
     position: relative;
-	.name-box{
+    .name-box {
-		width:100%;
+        width: 100%;
         border-radius: 16rpx;
         display: flex;
         flex-direction: column;
         background-color: #fff;
         padding: 64rpx 32rpx;
         box-sizing: border-box;
-		margin-top:24rpx;
+        margin-top: 24rpx;
-		.mid-view{
+        .mid-view {
-			width:100%;
+            width: 100%;
             padding: 40rpx 32rpx;
             box-sizing: border-box;
             display: flex;
             flex-direction: column;
-			border:2rpx solid #eaeaea;
+            border: 2rpx solid #eaeaea;
             border-radius: 16rpx;
-			margin-top:48rpx;
+            margin-top: 48rpx;
         }
-		.top-view{
+        .top-view {
-			width:100%;
+            width: 100%;
             display: flex;
             flex-direction: column;
             align-items: center;
         }
-		.input-view{
+        .input-view {
             border-radius: 20rpx;
-			margin-top:52rpx;
+            margin-top: 52rpx;
-			width:100%;
+            width: 100%;
             padding: 0 32rpx;
-			min-height:104rpx;
+            min-height: 104rpx;
             display: flex;
             flex-direction: row;
             align-items: center;
             background-color: #f5f5f5;
             box-sizing: border-box;
-			
         }
     }
-	
 }
 </style>