Merge branch 'dev' into 'test'

页面样式调整

See merge request quanshu/mp-ui-user!61

src/pages/core/index.vue

@@ -1,939 +1,967 @@
-<template>
-	<view class="core">
-		<!-- nav -->
-		<u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
-			<view class="u-nav-slot" slot="left">
-				<view class="u-nav-slot__input flex">
-					<u-input v-model="goodsTitle" @confirm="toGoodsList()" confirmType="search" placeholder="搜索商品"
-						border="none" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" />
-					<!-- <view class="u-nav-slot__input__btn" @click="toGoodsList()">搜索</view> -->
-				</view>
-			</view>
-		</u-navbar>
-		<!-- 固定顶部搜索、分类 -->
-		<view class="fixed-top">
-			<view class="fixed-top-classify">
-				<u-tabs @change="changeClassify" :scrollable="true" :list="classifyList" lineWidth="20" lineHeight="2"
-					lineColor="#FF8D0B" :activeStyle="{
-										color: '#333',
-										transform: 'scale(1.1)'
-									}" :inactiveStyle="{
-										color: '#999',
-										transform: 'scale(1.1)'
-									}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px; text-align: center;">
-				</u-tabs>
-			</view>
-			<!-- 盲豆筛选 -->
-			<view class="fixed-top-screen" v-if="scrollTop > 50">
-				<view class="fixed-top-screen-content flex">
-					<view class="fixed-top-screen-content__item flex">
-						<view class="title">我的盲豆：</view>
-						<view class="num">{{ initData.coinNum ? `${ initData.coinNum }` : '--' }}</view>
-					</view>
-					<view class="fixed-top-screen-content__item flex" @click="changeScreen(1)">
-						<view class="title">盲豆价格</view>
-						<view class="select flex" v-if="screenIndex == 1">
-							<image src="../../static/core/core_up.png" mode="scaleToFill" v-if="priceShow" />
-							<image src="../../static/core/core_down.png" mode="scaleToFill" v-else />
-						</view>
-						<view class="select flex" v-else>
-							<image src="../../static/core/core_null.png" mode="scaleToFill" />
-						</view>
-					</view>
-					<view class="fixed-top-screen-content__item flex" @click="changeScreen(2)">
-						<view class="title" v-if="!coinActionInfo.min && !coinActionInfo.max">盲豆区间</view>
-						<view class="title flex" v-else>
-							<view v-if="coinActionInfo.min">{{ coinActionInfo.min }}</view>
-							<view v-if="coinActionInfo.max">-{{ coinActionInfo.max }}</view>
-							<view>{{ coinActionInfo.desc }}</view>
-						</view>
-						<u-icon name="arrow-up" size="13" color="#fff" v-if="screenShow"></u-icon>
-						<u-icon name="arrow-down" size="13" color="#fff" v-else></u-icon>
-					</view>
-					<view class="fixed-top-screen-content__coin" v-if="screenShow">
-						<view class="fixed-top-screen-content__coin__list">
-							<view class="item flex" :class="{ 'action': coinActionIndex == index }"
-								v-for="(item, index) in coinList" :key="index" @click="selectCoin(item, index)">
-								<text v-if="item.min">{{ item.min }}</text>
-								<text v-if="item.max">-{{ item.max }}</text>
-								<text>{{ item.desc }}</text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="core-none"></view>
-
-		<!-- 轮播 -->
-		<view class="core-swiper" v-if="swiperList.length">
-			<swiper class="core-swiper-centent" circular :indicator-dots="true" :autoplay="true" :interval="3000"
-				indicator-active-color="#fff">
-				<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
-					<image :src="item.picUrl" mode="scaleToFill" @click="toPage(item)"></image>
-				</swiper-item>
-			</swiper>
-		</view>
-
-		<!-- 二级分类 -->
-		<view class="core-category">
-			<swiper class="core-category-swiper" :autoplay="false">
-				<swiper-item class="swiper-item"
-					v-for="(item, index) in classifyIndex == 0 ? classifyListFilter : classifyList[classifyIndex].list"
-					:key="index">
-					<view class="swiper-item-wrap">
-						<view class="swiper-item-wrap__content" v-for="(items, indexs) in item" :key="indexs">
-							<image :src="items.picUrl" mode="aspectFit" @click="toCategoryGoods(index, indexs)"></image>
-							<view class="name">{{ items.name }}</view>
-						</view>
-					</view>
-
-				</swiper-item>
-			</swiper>
-		</view>
-
-		<!-- 标签商品 -->
-		<view class="tag-goods" v-for="(item, index) in exclusiveSingle" :key="index">
-			<image class="tag-goods-imgBg" src="../../static/core/core_bg.png" mode="scaleToFill"></image>
-			<view class="tag-goods-content">
-				<view class="tag-goods-content-nav flex">
-					<view class="tag-goods-content-nav__left flex">
-						<image src="../../static/core/core_tag.png" mode="scaleToFill"></image>
-						<view class="title">{{ item.name }}</view>
-						<image src="../../static/core/core_tag.png" mode="scaleToFill"></image>
-					</view>
-					<view class="tag-goods-content-nav__right flex" @click="toTagGoods(item)">
-						<view class="title">更多</view>
-						<image src="../../static/core/core_right.png" mode="scaleToFill"></image>
-					</view>
-				</view>
-
-				<view class="tag-goods-content-list">
-					<view class="tag-goods-content-list-item flex" v-for="(items, indexs) in item.data" :key="indexs"
-						@click="toGoodsDetail(items)">
-						<view class="image flex">
-							<image :src="items.picUrl" mode="aspectFit"></image>
-						</view>
-						<view class="title">{{ items.exchangePrice }}盲豆</view>
-					</view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 商品列表 -->
-		<view class="core-goods">
-			<view class="core-goods-list flex">
-				<view class="core-goods-list-item flex" v-for="(item, index) in list" :key="index"
-					@click="toGoodsDetail(item)">
-					<view class="image-wrap flex">
-						<image :src="item.picUrl" mode="aspectFit"></image>
-					</view>
-					<view class="content">
-						<!-- #ifdef MP-ALIPAY -->
-						<view class="content-titletwo">{{ item.title }}</view>
-						<!-- #endif -->
-						<!-- #ifndef MP-ALIPAY -->
-						<view class="content-title ells-one">{{ item.title }}</view>
-						<!-- #endif -->
-						<view class="content-coin flex">
-							<view class="content-coin__left flex">
-								<image src="../../static/public/goods_coin.png" mode="scaleToFill"></image>
-								<view class="num"><text>×</text>{{ item.exchangePrice }}</view>
-							</view>
-							<view class="content-coin__right" v-if="item.originPrice">{{ item.originPrice }}</view>
-						</view>
-						<view class="content-price">￥{{ $numberFormat(item.value) }}</view>
-					</view>
-				</view>
-				<!-- <view class="core-goods-list-item"></view> -->
-				<view class=""></view>
-			</view>
-			<view class="flex empty" v-if="!list.length">
-				<view class="center">
-					<image class="center-img"
-						src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_3.png"
-						mode="scaleToFill"></image>
-					<view class="center-font">还没有商品</view>
-				</view>
-			</view>
-			<u-loadmore :line="true" v-if="list.length" :status="status" :loading-text="'努力加载中'"
-				:nomore-text="'已经到底了'" />
-		</view>
-
-		<custom-tab-bar :activeValue="'core'" />
-	</view>
-</template>
-
-<script>
-	import env from '../../config/env.js'
-	import $http from '@/utils/request.js'
-	import appId from '@/config/appId.js'
-	import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
-	export default {
-		components: {
-			CustomTabBar,
-		},
-		data() {
-			return {
-				status: 'nomore', //上拉刷新状态
-				pageNum: 1,
-				total: 0,
-				list: [],
-				exclusiveSingle: [],
-				categoryId: '',
-				classifyList: [], // 分类列表
-				classifyIndex: 0, // 分类选中下标
-				classifyListFilter: [],
-				swiperList: [], // 轮播图
-				goodsTitle: '',
-				scrollTop: 0,
-				screenIndex: 0,
-				priceShow: false,
-				priceSort: null,
-				priceStep: 0,
-				screenShow: false,
-				initData: {},
-				coinNum: {
-					startPrice: null,
-					endPrice: null
-				},
-				coinActionIndex: 0,
-				coinActionInfo: {},
-				coinList: [{
-						min: null,
-						max: null,
-						desc: '全部'
-					},
-					{
-						min: 1,
-						max: 100,
-						desc: ''
-					},
-					{
-						min: 101,
-						max: 200,
-						desc: ''
-					},
-					{
-						min: 201,
-						max: 500,
-						desc: ''
-					},
-					{
-						min: 501,
-						max: 1000,
-						desc: ''
-					},
-					{
-						min: 1001,
-						max: 5000,
-						desc: ''
-					},
-					{
-						min: 5000,
-						max: null,
-						desc: '以上'
-					},
-				],
-				userInfo: '',
-				loginState: '',
-			};
-		},
-		onLoad(opthios) {
-			if (opthios.userId) {
-				uni.setStorageSync('shareUid', opthios.userId != 'undefined' ? opthios.userId : null)
-				if (opthios.userId === undefined || opthios.userId === 'undefined') {
-					uni.getSystemInfo({
-						success(res) {
-							log.error(
-								`基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system },页面：/pages/core/index.vue.`
-							)
-						}
-					})
-				}
-
-			}
-			if (opthios.type) {
-				uni.setStorageSync('shareType', opthios.type)
-			}
-			this.pageList()
-			this.getExclusive()
-			this.getClassify()
-			this.getSwiper()
-		},
-		onShow() {
-			this.loginState = uni.getStorageSync('token') ? true : false
-			if (this.loginState) {
-				this.getBean()
-				this.getBaseInfo()
-			}
-		},
-		onPageScroll: function(e) {
-			this.scrollTop = e.scrollTop
-		},
-		methods: {
-			pageList() {
-				this.pageNum = 1
-				this.total = 0
-				this.list = []
-				this.getList()
-			},
-
-			// 获取分类
-			getClassify() {
-				$http.post('/api/v1/mp/user/exchange/category/listTree', {}).then(res => {
-					if (res.code == 0) {
-						let interval = 10
-						this.classifyList = res && res.rows
-						this.classifyList.forEach(item => {
-							item.picUrl = env.filePublic + item.picUrl.split(',')[0] +
-								'?imageView2/2/w/340'
-							item.goodsCategoryList.forEach(ele => {
-								ele.picUrl = env.filePublic + ele.picUrl.split(',')[0] +
-									'?imageView2/2/w/340'
-							})
-							item.list = []
-							if (item.goodsCategoryList.length > interval) {
-								let num = Math.ceil(item.goodsCategoryList.length / interval)
-								let arr = []
-
-								let a = 0
-								let stop = interval
-								for (let i = 1; i <= num; i++) {
-									arr = item.goodsCategoryList.slice(a, stop)
-									a = i * interval
-									stop = stop + interval
-
-								}
-							} else {
-								item.list.push(item.goodsCategoryList)
-							}
-						})
-						if (this.classifyList.length > interval) {
-							let num = Math.ceil(this.classifyList.length / interval)
-							let arr = []
-
-							let a = 0
-							let stop = interval
-							for (let i = 1; i <= num; i++) {
-								arr = this.classifyList.slice(a, stop)
-								a = i * interval
-								stop = stop + interval
-								this.classifyListFilter.push(arr)
-							}
-						} else {
-							this.classifyListFilter = [
-								[...this.classifyList]
-							]
-						}
-						this.classifyList.unshift({ name: '全部', categoryId: '' })
-					}
-				})
-			},
-
-			//轮播图
-			getSwiper() {
-				$http.post(`/api/v1/mp/user/exchange/banner/list`, {
-					noToken: true,
-					location: "top"
-				}).then(res => {
-					res.data.forEach(item => item.picUrl = env.filePublic + item.picUrl.split(',')[0])
-					this.swiperList = res.data
-				})
-			},
-
-			// 标签商品
-			async getExclusive() {
-				let resData = await $http.post(`/api/v1/mp/user/exchange/activity/list`, {
-					noToken: true
-				})
-				let goodsList = []
-				for (let item of resData.data) {
-					let resDatas = await $http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=1&pageSize=10`, {
-						noToken: true,
-						tagIds: item.tagId
-					})
-					goodsList.push({
-						data: resDatas.rows,
-						name: item.name,
-						tagId: item.tagId
-					})
-				}
-				goodsList.forEach(item => {
-					item.data.forEach(items => {
-						items.picUrl = env.filePublic + items.picUrl.split(',')[0] +
-							'?imageView2/2/w/340'
-					})
-				})
-				this.exclusiveSingle = goodsList
-			},
-
-			// 商品列表
-			getList() {
-				let data = {
-					categoryId: this.categoryId,
-					priceSort: this.priceSort,
-					...this.coinNum,
-					noToken: true
-				}
-				$http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=${this.pageNum}&pageSize=20`, data).then(
-					res => {
-						if (res.code == 0) {
-							res.rows.forEach(item => {
-								let picUrlArr = item.picUrl.split(',')
-								item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/340'
-							})
-
-							this.total = res.total
-							this.list = this.list.concat(res.rows)
-						}
-					}).catch(() => {
-				})
-			},
-
-			getBean() {
-				uni.showLoading({
-					title: '加载中'
-				});
-				$http.post('/api/v1/mp/user/mine/init', {}).then(res => {
-					uni.hideLoading();
-					if (res.code == 0) {
-						this.initData = res.data
-					}
-				}).catch(() => {
-					uni.hideLoading();
-				})
-			},
-
-			// 切换分类
-			changeClassify(e) {
-				this.categoryId = e.categoryId
-				this.classifyIndex = e.index
-				this.screenIndex = 0
-				this.priceStep = 0
-				this.priceShow = false
-				this.priceSort = null
-				this.coinActionIndex = 0
-				this.screenShow = false
-				this.coinNum.endPrice = null
-				this.coinNum.startPrice = null
-				this.coinActionInfo = {}
-				this.pageList()
-			},
-
-			// 盲豆筛选切换
-			changeScreen(num) {
-				this.screenIndex = num
-				if (num == 1) {
-					if (this.priceStep == 0) {
-						this.priceStep++
-						this.priceShow = true
-						this.priceSort = 1
-					} else if (this.priceStep == 1) {
-						this.priceStep++
-						this.priceShow = false
-						this.priceSort = 2
-					} else if (this.priceStep == 2) {
-						this.priceStep = 0
-						this.priceShow = false
-						this.priceSort = null
-						this.screenIndex = 0
-					}
-					this.pageList()
-				} else if (num == 2) {
-					this.priceStep = 0
-					this.screenShow = !this.screenShow
-					this.priceShow = false
-					this.priceSort = null
-				}
-			},
-
-			selectCoin(item, index) {
-				this.coinActionIndex = index
-				this.coinActionInfo = item
-				this.screenShow = !this.screenShow
-				this.coinNum.endPrice = item.max
-				this.coinNum.startPrice = item.min
-				this.pageList()
-			},
-
-			// 跳转点击事件
-			toPage(item) {
-				if (item.type == "link") {
-					uni.navigateTo({
-						url: `/packageOperate/webview/index?linkUrl=${ item.linkUrl }`,
-					})
-				} else if (item.type == "tag") {
-					uni.navigateTo({
-						url: `/packageGoods/goods/list?name=${ item.name }&tagIds=${ item.goodsTags ? item.goodsTags : '' }`
-					})
-				}
-			},
-
-			// 商品详情
-			toGoodsDetail(item) {
-				uni.navigateTo({
-					url: `/packageGoods/goods/detail?id=${ item.goodsId }`
-				})
-			},
-
-			// 商品列表
-			toGoodsList() {
-				uni.navigateTo({
-					url: `/packageGoods/goods/list?title=${ this.goodsTitle }`
-				})
-			},
-
-			// 商品标签
-			toTagGoods(item) {
-				uni.navigateTo({
-					url: `/packageGoods/goods/list?name=${ item.name }&tagIds=${ item.tagId ? item.tagId : '' }`
-				})
-			},
-
-			// 商品分类
-			toCategoryGoods(index, indexs) {
-				let list = this.classifyIndex == 0 ? this.classifyListFilter : this.classifyList[this.classifyIndex].list
-				let item = list[index][indexs]
-				uni.navigateTo({
-					url: `/packageGoods/goods/list?name=${ item.name }&categoryId=${ item.categoryId ? item.categoryId : '' }`
-				})
-			},
-			getBaseInfo() {
-				$http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
-					uni.hideLoading();
-					if (res.code == 0) {
-						this.userInfo = res.data
-					}
-				})
-			},
-		},
-		onReachBottom() {
-			// 判断是否有数据
-			if (this.total < this.pageNum * 20) return;
-			this.status = 'loading';
-			++this.pageNum
-			if (this.total < this.pageNum * 20) this.status = 'nomore';
-			else this.status = 'loading';
-			this.getList()
-		},
-		//分享好友
-		onShareAppMessage(res) {
-			return {
-				title: '盲票，玩的就是有趣',
-				path: '/pages/index/index',
-			}
-		},
-		//分享朋友圈
-		onShareTimeline() {
-			return {
-				title: '盲票，玩的就是有趣',
-				query: `userId=${ this.userInfo.userId?this.userInfo.userId:null }&type=1`
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.core {
-		background-color: #fff;
-
-		&-none {
-			height: 120rpx;
-		}
-	}
-
-	// 搜索
-	.u-nav-slot {
-		text {
-			font-size: 32rpx;
-		}
-
-		&__input {
-			position: relative;
-			height: 70rpx;
-			width: 518rpx;
-			padding-left: 30rpx;
-			background: #F4F5F6;
-			border-radius: 35rpx;
-			padding-right: 30rpx;
-
-			&__btn {
-				z-index: 200;
-				width: 140rpx;
-				height: 70rpx;
-				line-height: 70rpx;
-				font-size: 30rpx;
-				text-align: center;
-				font-weight: bold;
-				color: #fff;
-				background-color: #FF8D0B;
-				border-radius: 35rpx;
-			}
-		}
-	}
-
-	// 固定搜索、分类
-	.fixed-top {
-		position: fixed;
-		z-index: 100;
-		width: 100%;
-		background-color: #fff;
-
-		// 搜索
-		&-search {
-			justify-content: space-between;
-			padding: 14rpx 30rpx 34rpx;
-
-			&__input {
-				position: relative;
-				flex: 1;
-				height: 84rpx;
-				padding-left: 46rpx;
-				background: #F4F5F6;
-				border-radius: 20rpx;
-
-				&__btn {
-					position: absolute;
-					right: 0;
-					width: 110rpx;
-					height: 76rpx;
-					line-height: 76rpx;
-					font-size: 34rpx;
-					text-align: center;
-					font-weight: bold;
-					color: #FFC062;
-					background-color: #333333;
-					border-radius: 18rpx;
-				}
-			}
-
-			image {
-				width: 52rpx;
-				height: 52rpx;
-				margin-left: 50rpx;
-			}
-		}
-
-		// 分类
-		&-classify {
-			padding-bottom: 20rpx;
-		}
-
-		// 盲豆筛选
-		&-screen {
-			height: 64rpx;
-
-			&-content {
-				position: relative;
-				justify-content: space-between;
-				padding: 0 34rpx;
-				color: #fff;
-				height: 100%;
-				background: #F9822C;
-
-				&__item {
-					.title {
-						margin-right: 14rpx;
-					}
-
-					.select {
-						flex-direction: column;
-
-						image {
-							width: 18rpx;
-							height: 26rpx;
-						}
-					}
-				}
-
-				&__coin {
-					position: absolute;
-					right: 0;
-					bottom: -390rpx;
-					width: 200rpx;
-					height: 390rpx;
-					background: #FFFFFF;
-					box-shadow: 0px 0px 2px 0px rgba(100, 100, 100, 0.1);
-
-					&__list {
-						padding-top: 20rpx;
-						color: #666;
-
-						.item {
-							margin-bottom: 30rpx;
-							font-size: 26rpx;
-							line-height: 26rpx;
-						}
-
-						.action {
-							color: #F9822C;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	// 轮播
-	.core-swiper {
-		margin: 0 34rpx 20rpx;
-		border-radius: 16rpx;
-
-		&-centent {
-			height: 300rpx;
-
-			.swiper-item {
-				width: 100%;
-				height: 100%;
-
-				image {
-					width: 100%;
-					height: 100%;
-					border-radius: 16rpx;
-				}
-			}
-		}
-	}
-
-	// 二级分类
-	.core-category {
-		width: 100%;
-		height: 360rpx;
-		margin-bottom: 34rpx;
-		padding: 0 34rpx;
-
-		&-swiper {
-
-			width: 100%;
-			height: 360rpx;
-
-			.swiper-item {
-				width: 100%;
-				height: 360rpx;
-
-				&-wrap {
-					width: 100%;
-					height: 100%;
-					display: flex;
-					flex-wrap: wrap;
-
-					&__content {
-						display: flex;
-						align-items: center;
-						flex-direction: column;
-						justify-content: space-between;
-						width: 20%;
-						height: 50%;
-
-						image {
-							width: 90%;
-							height: 70%;
-						}
-					}
-				}
-
-			}
-		}
-	}
-
-	// 标签商品
-	.tag-goods {
-		display: flex;
-		align-items: center;
-		position: relative;
-		margin: 0 34rpx 34rpx;
-		height: 350rpx;
-
-		&-imgBg {
-			position: absolute;
-			top: 0;
-			width: 100%;
-			height: 350rpx;
-		}
-
-		&-content {
-			width: 100%;
-			position: absolute;
-			top: 0;
-			z-index: 5;
-			padding: 26rpx 22rpx;
-
-			&-nav {
-				justify-content: space-between;
-				height: 40rpx;
-				margin-bottom: 10rpx;
-
-				&__left {
-					image {
-						width: 40rpx;
-						height: 30rpx;
-					}
-
-					.title {
-						font-family: YouSheBiaoTiHei;
-						font-weight: 400;
-						font-size: 40rpx;
-						color: #FFFFFF;
-						padding: 0 36rpx;
-					}
-				}
-
-				&__right {
-					.title {
-						font-family: YouSheBiaoTiHei;
-						font-weight: 400;
-						color: #FFFFFF;
-						margin-right: 12rpx;
-					}
-
-					image {
-						width: 22rpx;
-						height: 20rpx;
-					}
-				}
-			}
-
-			&-list {
-				display: flex;
-				height: 260rpx;
-				overflow-x: auto;
-
-				&-item {
-					flex-direction: column;
-					margin-right: 14rpx;
-
-					.image {
-						width: 180rpx;
-						height: 180rpx;
-						background: #FFFFFF;
-						box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.13);
-						border-radius: 4rpx;
-						margin-bottom: 24rpx;
-
-						image {
-							width: 100%;
-							height: 100%;
-						}
-					}
-
-					.title {
-						text-align: center;
-						line-height: 28rpx;
-						color: #FFFFFF;
-					}
-				}
-			}
-		}
-	}
-
-	// 商品列表
-	.core-goods {
-		padding: 0 34rpx;
-
-		&-list {
-			width: 100%;
-			justify-content: space-between;
-			flex-wrap: wrap;
-
-			&-item {
-				flex-direction: column;
-				justify-content: flex-start;
-				width: 48%;
-				padding-bottom: 32rpx;
-				background: #FFFFFF;
-				box-shadow: 0px 0px 3px 0px rgba(100, 100, 100, 0.1);
-				border-radius: 16rpx;
-				margin-bottom: 30rpx;
-
-				.image-wrap {
-					width: 100%;
-					height: 320rpx;
-					margin-bottom: 16rpx;
-
-					image {
-						width: 100%;
-						height: 100%;
-						border-radius: 16rpx 16rpx 0 0;
-					}
-				}
-
-				.content {
-					width: 100%;
-					padding: 0 22rpx;
-
-					&-title {
-						height: 28rpx;
-						font-size: 28rpx;
-						line-height: 28rpx;
-						font-weight: bold;
-						overflow: hidden;
-					}
-
-					&-titletwo {
-						height: 34rpx;
-						font-size: 28rpx;
-						line-height: 34rpx;
-						font-weight: bold;
-						white-space: nowrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
-					}
-
-					&-coin {
-						height: 34rpx;
-						font-size: 24rpx;
-						justify-content: space-between;
-						margin-top: 30rpx;
-						margin-bottom: 24rpx;
-
-						&__left {
-							margin-right: 24rpx;
-							font-size: 28rpx;
-							font-weight: bold;
-
-							text {
-								font-weight: normal;
-							}
-
-							image {
-								width: 34rpx;
-								height: 34rpx;
-							}
-						}
-
-						&__right {
-							color: #666666;
-							text-decoration: line-through;
-						}
-					}
-
-					&-price {
-						font-size: 24rpx;
-						line-height: 24rpx;
-						color: #666666;
-					}
-				}
-
-			}
-		}
-
-		.empty {
-			.center {
-				text-align: center;
-
-				&-img {
-					width: 228rpx;
-					height: 320rpx;
-				}
-
-				&-font {
-					font-size: 30rpx;
-					font-weight: 400;
-					color: #999999;
-					margin-bottom: 200rpx;
-				}
-			}
-		}
-	}
-</style>
+<template>
+	<view class="core">
+		<!-- nav -->
+		<u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
+			<view class="u-nav-slot" slot="left">
+				<view class="u-nav-slot__input flex">
+					<u-input v-model="goodsTitle" @confirm="toGoodsList()" confirmType="search" placeholder="搜索商品"
+						border="none" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" />
+					<!-- <view class="u-nav-slot__input__btn" @click="toGoodsList()">搜索</view> -->
+				</view>
+			</view>
+		</u-navbar>
+		<!-- 固定顶部搜索、分类 -->
+		<view class="fixed-top">
+			<view class="fixed-top-classify">
+				<u-tabs @change="changeClassify" :scrollable="true" :list="classifyList" lineWidth="20" lineHeight="2"
+					lineColor="#FF8D0B" :activeStyle="{
+										color: '#333',
+										transform: 'scale(1.1)'
+									}" :inactiveStyle="{
+										color: '#999',
+										transform: 'scale(1.1)'
+									}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px; text-align: center;">
+				</u-tabs>
+			</view>
+			<!-- 盲豆筛选 -->
+			<view class="fixed-top-screen" v-if="scrollTop > 50">
+				<view class="fixed-top-screen-content flex">
+					<view class="fixed-top-screen-content__item flex">
+						<view class="title">我的盲豆：</view>
+						<view class="num">{{ initData.coinNum ? `${ initData.coinNum }` : '--' }}</view>
+					</view>
+					<view class="fixed-top-screen-content__item flex" @click="changeScreen(1)">
+						<view class="title">盲豆价格</view>
+						<view class="select flex" v-if="screenIndex == 1">
+							<image src="../../static/core/core_up.png" mode="scaleToFill" v-if="priceShow" />
+							<image src="../../static/core/core_down.png" mode="scaleToFill" v-else />
+						</view>
+						<view class="select flex" v-else>
+							<image src="../../static/core/core_null.png" mode="scaleToFill" />
+						</view>
+					</view>
+					<view class="fixed-top-screen-content__item flex" @click="changeScreen(2)">
+						<view class="title" v-if="!coinActionInfo.min && !coinActionInfo.max">盲豆区间</view>
+						<view class="title flex" v-else>
+							<view v-if="coinActionInfo.min">{{ coinActionInfo.min }}</view>
+							<view v-if="coinActionInfo.max">-{{ coinActionInfo.max }}</view>
+							<view>{{ coinActionInfo.desc }}</view>
+						</view>
+						<u-icon name="arrow-up" size="13" color="#fff" v-if="screenShow"></u-icon>
+						<u-icon name="arrow-down" size="13" color="#fff" v-else></u-icon>
+					</view>
+					<view class="fixed-top-screen-content__coin" v-if="screenShow">
+						<view class="fixed-top-screen-content__coin__list">
+							<view class="item flex" :class="{ 'action': coinActionIndex == index }"
+								v-for="(item, index) in coinList" :key="index" @click="selectCoin(item, index)">
+								<text v-if="item.min">{{ item.min }}</text>
+								<text v-if="item.max">-{{ item.max }}</text>
+								<text>{{ item.desc }}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="core-none"></view>
+
+		<!-- 轮播 -->
+		<view class="core-swiper" v-if="swiperList.length">
+			<swiper class="core-swiper-centent" circular :indicator-dots="true" :autoplay="true" :interval="3000"
+				indicator-active-color="#fff">
+				<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
+					<image :src="item.picUrl" mode="scaleToFill" @click="toPage(item)"></image>
+				</swiper-item>
+			</swiper>
+		</view>
+
+		<!-- 二级分类 -->
+		<view class="core-category">
+			<swiper class="core-category-swiper" :autoplay="false">
+				<swiper-item class="swiper-item"
+					v-for="(item, index) in classifyIndex == 0 ? classifyListFilter : classifyList[classifyIndex].list"
+					:key="index">
+					<view class="swiper-item-wrap">
+						<view class="swiper-item-wrap__content" v-for="(items, indexs) in item" :key="indexs">
+							<image :src="items.picUrl" mode="aspectFit" @click="toCategoryGoods(index, indexs)"></image>
+							<view class="name">{{ items.name }}</view>
+						</view>
+					</view>
+
+				</swiper-item>
+			</swiper>
+		</view>
+
+		<!-- 标签商品 -->
+		<view class="tag-goods" v-for="(item, index) in exclusiveSingle" :key="index">
+			<image class="tag-goods-imgBg" src="../../static/core/core_bg.png" mode="scaleToFill"></image>
+			<view class="tag-goods-content">
+				<view class="tag-goods-content-nav flex">
+					<view class="tag-goods-content-nav__left flex">
+						<image src="../../static/core/core_tag.png" mode="scaleToFill"></image>
+						<view class="title">{{ item.name }}</view>
+						<image src="../../static/core/core_tag.png" mode="scaleToFill"></image>
+					</view>
+					<view class="tag-goods-content-nav__right flex" @click="toTagGoods(item)">
+						<view class="title">更多</view>
+						<image src="../../static/core/core_right.png" mode="scaleToFill"></image>
+					</view>
+				</view>
+
+				<view class="tag-goods-content-list">
+					<view class="tag-goods-content-list-item flex" v-for="(items, indexs) in item.data" :key="indexs"
+						@click="toGoodsDetail(items)">
+						<view class="image flex">
+							<image :src="items.picUrl" mode="aspectFit"></image>
+						</view>
+						<view class="title">{{ items.exchangePrice }}盲豆</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 商品列表 -->
+		<view class="core-goods">
+			<view class="core-goods-list flex">
+				<view class="core-goods-list-item flex" v-for="(item, index) in list" :key="index"
+					@click="toGoodsDetail(item)">
+					<view class="image-wrap flex">
+						<image :src="item.picUrl" mode="aspectFit"></image>
+					</view>
+					<view class="content">
+						<!-- #ifdef MP-ALIPAY -->
+						<view class="content-titletwo">{{ item.title }}</view>
+						<!-- #endif -->
+						<!-- #ifndef MP-ALIPAY -->
+						<view class="content-title ells-one">{{ item.title }}</view>
+						<!-- #endif -->
+						<view class="content-coin flex">
+							<view class="content-coin__left flex">
+								<image src="../../static/public/goods_coin.png" mode="scaleToFill"></image>
+								<view class="num"><text>×</text>{{ item.exchangePrice }}</view>
+							</view>
+							<view class="content-coin__right" v-if="item.originPrice">{{ item.originPrice }}</view>
+						</view>
+						<view class="content-price">￥{{ $numberFormat(item.value) }}</view>
+					</view>
+				</view>
+				<!-- <view class="core-goods-list-item"></view> -->
+				<view class=""></view>
+			</view>
+			<view class="flex empty" v-if="!list.length">
+				<view class="center">
+					<image class="center-img"
+						src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_3.png"
+						mode="scaleToFill"></image>
+					<view class="center-font">还没有商品</view>
+				</view>
+			</view>
+			<u-loadmore :line="true" v-if="list.length" :status="status" :loading-text="'努力加载中'"
+				:nomore-text="'已经到底了'" />
+		</view>
+
+		<custom-tab-bar :activeValue="'core'" />
+	</view>
+</template>
+
+<script>
+	import env from '../../config/env.js'
+	import $http from '@/utils/request.js'
+	import appId from '@/config/appId.js'
+	import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
+	export default {
+		components: {
+			CustomTabBar,
+		},
+		data() {
+			return {
+				status: 'nomore', //上拉刷新状态
+				pageNum: 1,
+				total: 0,
+				list: [],
+				exclusiveSingle: [],
+				categoryId: '',
+				classifyList: [], // 分类列表
+				classifyIndex: 0, // 分类选中下标
+				classifyListFilter: [],
+				swiperList: [], // 轮播图
+				goodsTitle: '',
+				scrollTop: 0,
+				screenIndex: 0,
+				priceShow: false,
+				priceSort: null,
+				priceStep: 0,
+				screenShow: false,
+				initData: {},
+				coinNum: {
+					startPrice: null,
+					endPrice: null
+				},
+				coinActionIndex: 0,
+				coinActionInfo: {},
+				coinList: [{
+						min: null,
+						max: null,
+						desc: '全部'
+					},
+					{
+						min: 1,
+						max: 100,
+						desc: ''
+					},
+					{
+						min: 101,
+						max: 200,
+						desc: ''
+					},
+					{
+						min: 201,
+						max: 500,
+						desc: ''
+					},
+					{
+						min: 501,
+						max: 1000,
+						desc: ''
+					},
+					{
+						min: 1001,
+						max: 5000,
+						desc: ''
+					},
+					{
+						min: 5000,
+						max: null,
+						desc: '以上'
+					},
+				],
+				userInfo: '',
+				loginState: '',
+			};
+		},
+		onLoad(opthios) {
+			if (opthios.userId) {
+				uni.setStorageSync('shareUid', opthios.userId != 'undefined' ? opthios.userId : null)
+				if (opthios.userId === undefined || opthios.userId === 'undefined') {
+					uni.getSystemInfo({
+						success(res) {
+							log.error(
+								`基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system },页面：/pages/core/index.vue.`
+							)
+						}
+					})
+				}
+
+			}
+			if (opthios.type) {
+				uni.setStorageSync('shareType', opthios.type)
+			}
+			this.pageList()
+			this.getExclusive()
+			this.getClassify()
+			this.getSwiper()
+		},
+		onShow() {
+			this.loginState = uni.getStorageSync('token') ? true : false
+			if (this.loginState) {
+				this.getBean()
+				this.getBaseInfo()
+			}
+		},
+		onPageScroll: function(e) {
+			this.scrollTop = e.scrollTop
+		},
+		methods: {
+			pageList() {
+				this.pageNum = 1
+				this.total = 0
+				this.list = []
+				this.getList()
+			},
+
+			// 获取分类
+			getClassify() {
+				$http.post('/api/v1/mp/user/exchange/category/listTree', {}).then(res => {
+					if (res.code == 0) {
+						let interval = 10
+						this.classifyList = res && res.rows
+						this.classifyList.forEach(item => {
+							item.picUrl = env.filePublic + item.picUrl.split(',')[0] +
+								'?imageView2/2/w/340'
+							item.goodsCategoryList.forEach(ele => {
+								ele.picUrl = env.filePublic + ele.picUrl.split(',')[0] +
+									'?imageView2/2/w/340'
+							})
+							item.list = []
+							if (item.goodsCategoryList.length > interval) {
+								let num = Math.ceil(item.goodsCategoryList.length / interval)
+								let arr = []
+
+								let a = 0
+								let stop = interval
+								for (let i = 1; i <= num; i++) {
+									arr = item.goodsCategoryList.slice(a, stop)
+									a = i * interval
+									stop = stop + interval
+
+								}
+							} else {
+								item.list.push(item.goodsCategoryList)
+							}
+						})
+						if (this.classifyList.length > interval) {
+							let num = Math.ceil(this.classifyList.length / interval)
+							let arr = []
+
+							let a = 0
+							let stop = interval
+							for (let i = 1; i <= num; i++) {
+								arr = this.classifyList.slice(a, stop)
+								a = i * interval
+								stop = stop + interval
+								this.classifyListFilter.push(arr)
+							}
+						} else {
+							this.classifyListFilter = [
+								[...this.classifyList]
+							]
+						}
+						this.classifyList.unshift({ name: '全部', categoryId: '' })
+					}
+				})
+			},
+
+			//轮播图
+			getSwiper() {
+				$http.post(`/api/v1/mp/user/exchange/banner/list`, {
+					noToken: true,
+					location: "top"
+				}).then(res => {
+					res.data.forEach(item => item.picUrl = env.filePublic + item.picUrl.split(',')[0])
+					this.swiperList = res.data
+				})
+			},
+
+			// 标签商品
+			async getExclusive() {
+				let resData = await $http.post(`/api/v1/mp/user/exchange/activity/list`, {
+					noToken: true
+				})
+				let goodsList = []
+				for (let item of resData.data) {
+					let resDatas = await $http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=1&pageSize=10`, {
+						noToken: true,
+						tagIds: item.tagId
+					})
+					goodsList.push({
+						data: resDatas.rows,
+						name: item.name,
+						tagId: item.tagId
+					})
+				}
+				goodsList.forEach(item => {
+					item.data.forEach(items => {
+						items.picUrl = env.filePublic + items.picUrl.split(',')[0] +
+							'?imageView2/2/w/340'
+					})
+				})
+				this.exclusiveSingle = goodsList
+			},
+
+			// 商品列表
+			getList() {
+				let data = {
+					categoryId: this.categoryId,
+					priceSort: this.priceSort,
+					...this.coinNum,
+					noToken: true
+				}
+				$http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=${this.pageNum}&pageSize=20`, data).then(
+					res => {
+						if (res.code == 0) {
+							res.rows.forEach(item => {
+								let picUrlArr = item.picUrl.split(',')
+								item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/340'
+							})
+
+							this.total = res.total
+							this.list = this.list.concat(res.rows)
+						}
+					}).catch(() => {
+				})
+			},
+
+			getBean() {
+				uni.showLoading({
+					title: '加载中'
+				});
+				$http.post('/api/v1/mp/user/mine/init', {}).then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
+						this.initData = res.data
+					}
+				}).catch(() => {
+					uni.hideLoading();
+				})
+			},
+
+			// 切换分类
+			changeClassify(e) {
+				this.categoryId = e.categoryId
+				this.classifyIndex = e.index
+				this.screenIndex = 0
+				this.priceStep = 0
+				this.priceShow = false
+				this.priceSort = null
+				this.coinActionIndex = 0
+				this.screenShow = false
+				this.coinNum.endPrice = null
+				this.coinNum.startPrice = null
+				this.coinActionInfo = {}
+				this.pageList()
+			},
+
+			// 盲豆筛选切换
+			changeScreen(num) {
+				this.screenIndex = num
+				if (num == 1) {
+					if (this.priceStep == 0) {
+						this.priceStep++
+						this.priceShow = true
+						this.priceSort = 1
+					} else if (this.priceStep == 1) {
+						this.priceStep++
+						this.priceShow = false
+						this.priceSort = 2
+					} else if (this.priceStep == 2) {
+						this.priceStep = 0
+						this.priceShow = false
+						this.priceSort = null
+						this.screenIndex = 0
+					}
+					this.pageList()
+				} else if (num == 2) {
+					this.priceStep = 0
+					this.screenShow = !this.screenShow
+					this.priceShow = false
+					this.priceSort = null
+				}
+			},
+
+			selectCoin(item, index) {
+				this.coinActionIndex = index
+				this.coinActionInfo = item
+				this.screenShow = !this.screenShow
+				this.coinNum.endPrice = item.max
+				this.coinNum.startPrice = item.min
+				this.pageList()
+			},
+
+			// 跳转点击事件
+			toPage(item) {
+				if (item.type == "link") {
+					uni.navigateTo({
+						url: `/packageOperate/webview/index?linkUrl=${ item.linkUrl }`,
+					})
+				} else if (item.type == "tag") {
+					uni.navigateTo({
+						url: `/packageGoods/goods/list?name=${ item.name }&tagIds=${ item.goodsTags ? item.goodsTags : '' }`
+					})
+				}
+			},
+
+			// 商品详情
+			toGoodsDetail(item) {
+				uni.navigateTo({
+					url: `/packageGoods/goods/detail?id=${ item.goodsId }`
+				})
+			},
+
+			// 商品列表
+			toGoodsList() {
+				uni.navigateTo({
+					url: `/packageGoods/goods/list?title=${ this.goodsTitle }`
+				})
+			},
+
+			// 商品标签
+			toTagGoods(item) {
+				uni.navigateTo({
+					url: `/packageGoods/goods/list?name=${ item.name }&tagIds=${ item.tagId ? item.tagId : '' }`
+				})
+			},
+
+			// 商品分类
+			toCategoryGoods(index, indexs) {
+				let list = this.classifyIndex == 0 ? this.classifyListFilter : this.classifyList[this.classifyIndex].list
+				let item = list[index][indexs]
+				uni.navigateTo({
+					url: `/packageGoods/goods/list?name=${ item.name }&categoryId=${ item.categoryId ? item.categoryId : '' }`
+				})
+			},
+			getBaseInfo() {
+				$http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
+						this.userInfo = res.data
+					}
+				})
+			},
+		},
+		onReachBottom() {
+			// 判断是否有数据
+			if (this.total < this.pageNum * 20) return;
+			this.status = 'loading';
+			++this.pageNum
+			if (this.total < this.pageNum * 20) this.status = 'nomore';
+			else this.status = 'loading';
+			this.getList()
+		},
+		//分享好友
+		onShareAppMessage(res) {
+			return {
+				title: '盲票，玩的就是有趣',
+				path: '/pages/index/index',
+			}
+		},
+		//分享朋友圈
+		onShareTimeline() {
+			return {
+				title: '盲票，玩的就是有趣',
+				query: `userId=${ this.userInfo.userId?this.userInfo.userId:null }&type=1`
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.core {
+		background-color: #fff;
+
+		&-none {
+			height: 120rpx;
+		}
+	}
+
+	// 搜索
+	.u-nav-slot {
+		text {
+			font-size: 32rpx;
+		}
+
+		/* #ifdef H5 */
+		&__input {
+			position: relative;
+			height: 70rpx;
+			width: 700rpx;
+			padding: 0 30rpx;
+			background: #F4F5F6;
+			border-radius: 35rpx;
+
+			&__btn {
+				z-index: 200;
+				width: 300rpx;
+				height: 70rpx;
+				line-height: 70rpx;
+				font-size: 30rpx;
+				text-align: center;
+				font-weight: bold;
+				color: #fff;
+				background-color: #FF8D0B;
+				border-radius: 35rpx;
+			}
+		}
+
+		/* #endif */
+		/* #ifndef H5 */
+		&__input {
+			position: relative;
+			height: 70rpx;
+			width: 518rpx;
+			padding-left: 30rpx;
+			background: #F4F5F6;
+			border-radius: 35rpx;
+			padding-right: 30rpx;
+
+			&__btn {
+				z-index: 200;
+				width: 140rpx;
+				height: 70rpx;
+				line-height: 70rpx;
+				font-size: 30rpx;
+				text-align: center;
+				font-weight: bold;
+				color: #fff;
+				background-color: #FF8D0B;
+				border-radius: 35rpx;
+			}
+		}
+
+		/* #endif */
+
+	}
+
+	// 固定搜索、分类
+	.fixed-top {
+		position: fixed;
+		z-index: 100;
+		width: 100%;
+		background-color: #fff;
+
+		// 搜索
+		&-search {
+			justify-content: space-between;
+			padding: 14rpx 30rpx 34rpx;
+
+			&__input {
+				position: relative;
+				flex: 1;
+				height: 84rpx;
+				padding-left: 46rpx;
+				background: #F4F5F6;
+				border-radius: 20rpx;
+
+				&__btn {
+					position: absolute;
+					right: 0;
+					width: 110rpx;
+					height: 76rpx;
+					line-height: 76rpx;
+					font-size: 34rpx;
+					text-align: center;
+					font-weight: bold;
+					color: #FFC062;
+					background-color: #333333;
+					border-radius: 18rpx;
+				}
+			}
+
+			image {
+				width: 52rpx;
+				height: 52rpx;
+				margin-left: 50rpx;
+			}
+		}
+
+		// 分类
+		&-classify {
+			padding-bottom: 20rpx;
+		}
+
+		// 盲豆筛选
+		&-screen {
+			height: 64rpx;
+
+			&-content {
+				position: relative;
+				justify-content: space-between;
+				padding: 0 34rpx;
+				color: #fff;
+				height: 100%;
+				background: #F9822C;
+
+				&__item {
+					.title {
+						margin-right: 14rpx;
+					}
+
+					.select {
+						flex-direction: column;
+
+						image {
+							width: 18rpx;
+							height: 26rpx;
+						}
+					}
+				}
+
+				&__coin {
+					position: absolute;
+					right: 0;
+					bottom: -390rpx;
+					width: 200rpx;
+					height: 390rpx;
+					background: #FFFFFF;
+					box-shadow: 0px 0px 2px 0px rgba(100, 100, 100, 0.1);
+
+					&__list {
+						padding-top: 20rpx;
+						color: #666;
+
+						.item {
+							margin-bottom: 30rpx;
+							font-size: 26rpx;
+							line-height: 26rpx;
+						}
+
+						.action {
+							color: #F9822C;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	// 轮播
+	.core-swiper {
+		margin: 0 34rpx 20rpx;
+		border-radius: 16rpx;
+
+		&-centent {
+			height: 300rpx;
+
+			.swiper-item {
+				width: 100%;
+				height: 100%;
+
+				image {
+					width: 100%;
+					height: 100%;
+					border-radius: 16rpx;
+				}
+			}
+		}
+	}
+
+	// 二级分类
+	.core-category {
+		width: 100%;
+		height: 360rpx;
+		margin-bottom: 34rpx;
+		padding: 0 34rpx;
+
+		&-swiper {
+
+			width: 100%;
+			height: 360rpx;
+
+			.swiper-item {
+				width: 100%;
+				height: 360rpx;
+
+				&-wrap {
+					width: 100%;
+					height: 100%;
+					display: flex;
+					flex-wrap: wrap;
+
+					&__content {
+						display: flex;
+						align-items: center;
+						flex-direction: column;
+						justify-content: space-between;
+						width: 20%;
+						height: 50%;
+
+						image {
+							width: 90%;
+							height: 70%;
+						}
+					}
+				}
+
+			}
+		}
+	}
+
+	// 标签商品
+	.tag-goods {
+		display: flex;
+		align-items: center;
+		position: relative;
+		margin: 0 34rpx 34rpx;
+		height: 350rpx;
+
+		&-imgBg {
+			position: absolute;
+			top: 0;
+			width: 100%;
+			height: 350rpx;
+		}
+
+		&-content {
+			width: 100%;
+			position: absolute;
+			top: 0;
+			z-index: 5;
+			padding: 26rpx 22rpx;
+
+			&-nav {
+				justify-content: space-between;
+				height: 40rpx;
+				margin-bottom: 10rpx;
+
+				&__left {
+					image {
+						width: 40rpx;
+						height: 30rpx;
+					}
+
+					.title {
+						font-family: YouSheBiaoTiHei;
+						font-weight: 400;
+						font-size: 40rpx;
+						color: #FFFFFF;
+						padding: 0 36rpx;
+					}
+				}
+
+				&__right {
+					.title {
+						font-family: YouSheBiaoTiHei;
+						font-weight: 400;
+						color: #FFFFFF;
+						margin-right: 12rpx;
+					}
+
+					image {
+						width: 22rpx;
+						height: 20rpx;
+					}
+				}
+			}
+
+			&-list {
+				display: flex;
+				height: 260rpx;
+				overflow-x: auto;
+
+				&-item {
+					flex-direction: column;
+					margin-right: 14rpx;
+
+					.image {
+						width: 180rpx;
+						height: 180rpx;
+						background: #FFFFFF;
+						box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.13);
+						border-radius: 4rpx;
+						margin-bottom: 24rpx;
+
+						image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+
+					.title {
+						text-align: center;
+						line-height: 28rpx;
+						color: #FFFFFF;
+					}
+				}
+			}
+		}
+	}
+
+	// 商品列表
+	.core-goods {
+		padding: 0 34rpx;
+
+		&-list {
+			width: 100%;
+			justify-content: space-between;
+			flex-wrap: wrap;
+
+			&-item {
+				flex-direction: column;
+				justify-content: flex-start;
+				width: 48%;
+				padding-bottom: 32rpx;
+				background: #FFFFFF;
+				box-shadow: 0px 0px 3px 0px rgba(100, 100, 100, 0.1);
+				border-radius: 16rpx;
+				margin-bottom: 30rpx;
+
+				.image-wrap {
+					width: 100%;
+					height: 320rpx;
+					margin-bottom: 16rpx;
+
+					image {
+						width: 100%;
+						height: 100%;
+						border-radius: 16rpx 16rpx 0 0;
+					}
+				}
+
+				.content {
+					width: 100%;
+					padding: 0 22rpx;
+
+					&-title {
+						height: 28rpx;
+						font-size: 28rpx;
+						line-height: 28rpx;
+						font-weight: bold;
+						overflow: hidden;
+					}
+
+					&-titletwo {
+						height: 34rpx;
+						font-size: 28rpx;
+						line-height: 34rpx;
+						font-weight: bold;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+					}
+
+					&-coin {
+						height: 34rpx;
+						font-size: 24rpx;
+						justify-content: space-between;
+						margin-top: 30rpx;
+						margin-bottom: 24rpx;
+
+						&__left {
+							margin-right: 24rpx;
+							font-size: 28rpx;
+							font-weight: bold;
+
+							text {
+								font-weight: normal;
+							}
+
+							image {
+								width: 34rpx;
+								height: 34rpx;
+							}
+						}
+
+						&__right {
+							color: #666666;
+							text-decoration: line-through;
+						}
+					}
+
+					&-price {
+						font-size: 24rpx;
+						line-height: 24rpx;
+						color: #666666;
+					}
+				}
+
+			}
+		}
+
+		.empty {
+			.center {
+				text-align: center;
+
+				&-img {
+					width: 228rpx;
+					height: 320rpx;
+				}
+
+				&-font {
+					font-size: 30rpx;
+					font-weight: 400;
+					color: #999999;
+					margin-bottom: 200rpx;
+				}
+			}
+		}
+	}
+</style>