1-19-1

pages.json

@@ -19,10 +19,46 @@
 					}
 				},
 				"navigationBarTitleText": "鼎立足行",
-				"navigationBarBackgroundColor":"#0fc8e4",
+				"navigationBarBackgroundColor":"#52c696",
 				"navigationBarTextStyle":"white",
 				"enablePullDownRefresh": true
 			}
+		},
+		{
+			"path": "pages/index/artList",
+			"style": {
+				"navigationBarTitleText": "列表",
+				"app-plus": {
+					"titleNView": {
+						"type": "transparent"
+					}
+				}
+			}
+			
+		},
+		{
+			"path": "pages/category/category",
+			"style": {
+				// #ifdef APP-PLUS
+				"navigationStyle": "custom",
+				// #endif
+				// #ifndef MP
+				"app-plus": {
+					"bounce": "none",
+					"titleNView": {
+						"searchInput": {
+							"backgroundColor": "rgba(231, 231, 231,.7)",
+							"borderRadius": "16px",
+							"placeholder": "商品搜索",
+							"disabled": true,
+							"placeholderColor": "#606266",
+							"align": "left"
+						}
+					}
+				},
+				// #endif
+				"navigationBarTitleText": "分类"
+			}
 		},
 		{
 			"path": "pages/public/register",
@@ -385,13 +421,19 @@
 				"iconPath": "static/tabBar/tab-home.png",
 				"selectedIconPath": "static/tabBar/tab-home-current.png",
 				"text": "首页"
+			},
+			{
+				"pagePath": "pages/category/category",
+				"iconPath": "static/tabBar/tab-cate.png",
+				"selectedIconPath": "static/tabBar/tab-cate-current.png",
+				"text": "分类"
 			},
-			{
-				"pagePath": "pages/category/category",
-				"iconPath": "static/tabBar/tab-cate.png",
-				"selectedIconPath": "static/tabBar/tab-cate-current.png",
-				"text": "品牌故事"
-			},
+			// {
+			// 	"pagePath": "pages/category/category",
+			// 	"iconPath": "static/tabBar/tab-cate.png",
+			// 	"selectedIconPath": "static/tabBar/tab-cate-current.png",
+			// 	"text": "品牌故事"
+			// },
 			{
 				"pagePath": "pages/cart/cart",
 				"iconPath": "static/tabBar/tab-cart.png",

pages/category/category.vue

@@ -1,46 +1,126 @@
 <template>
 	<view class="content">
-		<view class="main">
-			<view v-for="(item, index) in list">
-				<view class="first" v-if="index == 0" @click="navToList(item.id)">
-					<view class="title">{{item.title}}</view>
-					<view class="image"><image :src="item.image_input[0]" mode=""></image></view>
-					<view class="time">更新时间:{{item.add_time}}</view>
-				</view>
-				<view class="item flex" @click="navToList(item.id)" v-else>
-					<view class="item-left"><image :src="item.image_input[0]" mode=""></image></view>
-					<view class="item-right">
-						<view class="item-font clamp">{{item.title}}</view>
-						<view class="item-time">更新时间:{{item.add_time}}</view>
+		<scroll-view scroll-y class="left-aside">
+			<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item)">{{ item.cate_name }}</view>
+		</scroll-view>
+		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
+			<view v-for="item in flist" :key="item.id" class="s-list" :id="'main-' + item.id">
+				<text class="s-item">{{ item.cate_name }}</text>
+				<view class="t-list ">
+					<view @click="navToList(item.id, titem.id)" class="t-item" v-for="titem in item.children" :key="titem.id">
+						<image :src="titem.pic"></image>
+						<text>{{ titem.cate_name }}</text>
 					</view>
 				</view>
 			</view>
-		</view>
+		</scroll-view>
 	</view>
 </template>
 
 <script>
-import { article } from '@/api/user.js';
+import { getCategoryList } from '@/api/product.js';
 export default {
 	data() {
 		return {
-			list: []
+			sizeCalcState: false,
+			tabScrollTop: 0,
+			currentId: 9,
+			flist: [],
 		};
 	},
 	onLoad() {
 		this.loadData();
 	},
+	// 监听导航栏输入框点击事件
+	onNavigationBarSearchInputClicked(e) {
+		uni.navigateTo({
+			url: '/pages/product/search'
+		});
+	},
 	methods: {
 		// 载入数据
 		async loadData() {
 			let obj = this;
-			article({page:1,limit:1000},4).then(({data}) =>{
-				this.list = data
-			})
+			getCategoryList({})
+				.then(({ data }) => {
+					obj.flist = data.map(function(s) {
+						return s;
+					});
+				})
+				.catch(err => {
+					console.log(err);
+				});
+		},
+		//一级分类点击
+		tabtap(item) {
+			console.log(item);
+			// 判断有没有初始化页面高度对象数据
+			if (!this.sizeCalcState) {
+				this.calcSize();
+			}
+			// 获取当前点击的id
+			this.currentId = item.id;
+			console.log(item.top);
+			this.tabScrollTop = item.top;
+			console.log(this.tabScrollTop);
+		},
+		//右侧栏滚动
+		asideScroll(e) {
+			// 判断有没有初始化页面高度对象数据
+			if (!this.sizeCalcState) {
+				this.calcSize();
+			}
+			let scrollTop = e.detail.scrollTop;
+			let box = 0; //列表包裹框高度初始化
+			let bottom = 10; //距离页面底部多少像素左侧列表切换到最后一个一级分类
+			// 查询当前页面对象
+			let view = uni.createSelectorQuery().select('.content');
+			view.fields(
+				{
+					id: true,
+					dataset: true,
+					rect: true,
+					size: true,
+					scrollOffset: true
+				},
+				function(e) {
+					// 保存包裹框高度
+					box = e.height;
+				}
+			).exec();
+			// 获取所有距离顶部大于滚轮距离页面高度的所有分类
+			let tabs = this.flist.filter(item =>( item.top-10) <= scrollTop).reverse();
+			if (tabs.length > 0) {
+				// 判断是否已经到达滚轮底部
+				if (box + scrollTop + bottom >= e.detail.scrollHeight) {
+					this.currentId = this.flist[this.flist.length - 1].id;
+				} else {
+					this.currentId = tabs[0].id;
+				}
+			}
 		},
-		navToList(id) {
+		//计算右侧栏每个tab的高度等信息
+		calcSize() {
+			let h = 0;
+			this.flist.forEach(item => {
+				let view = uni.createSelectorQuery().select('#main-' + item.id);
+				view.fields(
+					{
+						size: true
+					},
+					data => {
+						item.top = h;
+						h += data.height;
+						item.bottom = h;
+					}
+				).exec();
+			});
+			this.sizeCalcState = true;
+		},
+		navToList(sid, tid) {
+			// 点击导航跳转到详细页面
 			uni.navigateTo({
-				url: '/pages/category/detail?id=' + id
+				url: '/pages/product/list?fid='+this.currentId+'&sid='+sid+'&tid='+tid
 			});
 		}
 	}
@@ -50,76 +130,87 @@ export default {
 <style lang="scss">
 page,
 .content {
-	height: auto;
-	min-height: 100%;
-	background: #f5f5f5;
+	height: 100%;
+	background-color: #f8f8f8;
 }
-.main {
-	margin-top: 20rpx;
-	background: #ffffff;
-	.first {
-		padding: 50rpx 0 18rpx;
-		margin: 0 22rpx;
-		border-bottom: 1px solid #e0e0e0;
-		.title {
-			font-size: 32rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #333333;
-		}
-		.image {
-			width: 710rpx;
-			height: 400rpx;
-			background: #4cd964;
-			margin-top: 20rpx;
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
-		.time {
-			margin-top: 20rpx;
-			font-size: 26rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #666666;
+
+.content {
+	display: flex;
+}
+.left-aside {
+	flex-shrink: 0;
+	width: 200rpx;
+	height: 100%;
+	background-color: #fff;
+}
+.f-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100rpx;
+	font-size: 28rpx;
+	color: $font-color-base;
+	position: relative;
+	&.active {
+		color: $base-color;
+		background: #f8f8f8;
+		&:before {
+			content: '';
+			position: absolute;
+			left: 0;
+			top: 50%;
+			transform: translateY(-50%);
+			height: 36rpx;
+			width: 8rpx;
+			background-color: $base-color;
+			border-radius: 0 4px 4px 0;
+			opacity: 0.8;
 		}
 	}
-	.item {
-		padding: 26rpx 0 18rpx;
-		margin: 0 22rpx;
-		justify-content: flex-start;
-		align-items: flex-start;
-		border-bottom: 1px solid #e0e0e0;
-		.item-left {
-			width: 224rpx;
-			height: 160rpx;
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
-		.item-right {
-			width: 458rpx;
-			height: 160rpx;
-			margin-left: 24rpx;
-			padding: 18rpx 0;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			.item-font {
-				font-size: 32rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #333333;
-			}
-			.item-time {
-				font-size: 28rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #666666;
-			}
-		}
+}
+
+.right-aside {
+	flex: 1;
+	overflow: hidden;
+	padding-left: 20rpx;
+	padding-right: 20rpx;
+}
+.s-item {
+	display: flex;
+	align-items: center;
+	height: 70rpx;
+	padding-top: 8rpx;
+	font-size: 28rpx;
+	color: $font-color-dark;
+}
+.t-list {
+	display: flex;
+	flex-wrap: wrap;
+	border-radius: 15rpx;
+	width: 100%;
+	background: #fff;
+	padding-top: 12rpx;
+	&:after {
+		content: '';
+		flex: 99;
+		height: 0;
+	}
+}
+.t-item {
+	flex-shrink: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	width: 171rpx;
+	font-size: 26rpx;
+	color: #666;
+	padding-bottom: 20rpx;
+
+	image {
+		width: 140rpx;
+		height: 140rpx;
 	}
 }
 </style>

pages/index/artList.vue

@@ -0,0 +1,118 @@
+<template>
+	<view class="jj-wrap">
+		<view class="jj" v-for="cp in list" @click="navto('/pages/index/artDetail?id=' + cp.id)">
+			<image :src="cp.image_input[0]" mode="" class="jj-img"></image>
+			<view class="jj-info">
+				<view class="jj-tit-tit clamp2">
+					{{cp.title}}
+				</view>
+				<view class="jj-val clamp">
+					更新时间{{cp.add_time}}
+				</view>
+			</view>
+		</view>
+		<uni-load-more :status="loadingType"></uni-load-more>
+	</view>
+</template>
+
+<script>
+	import { article,articleList } from '@/api/user.js';
+	import {
+		loadIndexs,
+		getArticleList
+	} from '@/api/index.js';
+	export default {
+		data() {
+			return {
+				list: [],
+				page: 1,
+				limit: 10,
+				loadingType: 'more',
+				cid: 0,
+			}
+		},
+		onLoad(opt) {
+			this.cid = opt.cid
+			this.tit = decodeURI(opt.tit)
+			uni.setNavigationBarTitle({
+				title: this.tit 
+			})
+			this.getArticleList()
+		},
+		methods: {
+			navto(url) {
+				uni.navigateTo({
+					url: url
+				})
+			},
+			getArticleList() {
+				let obj = this
+				if(obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
+					return
+				}
+				obj.loadingType = 'loading'
+				article({
+					page: obj.page,
+					limit: obj.limit
+				},obj.cid).then(({data}) => {
+					obj.list = obj.list.concat(data)
+					obj.page++
+					if(data.length == obj.limit) {
+						obj.loadingType = 'more'
+					}else {
+						obj.loadingType = 'noMore'
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background-color: #fff;
+		min-height: 100%;
+	}
+	.jj-wrap {
+		background-color: #fff;
+		// margin: 20rpx 0;
+		.jj {
+			margin: auto;
+			width: 689rpx;
+			height: 202rpx;
+			border-bottom: 1px solid #e5e5e5;
+			padding: 20rpx;
+			padding-left: 0;
+			display: flex;
+			&:last-of-type {
+				border-bottom: none;
+			}
+			.jj-img {
+				flex-shrink: 0;
+				width: 222rpx;
+				height: 158rpx;
+				background-color: #bfa;
+				border-radius: 10rpx;
+			}
+			.jj-info {
+				width: 450rpx;
+				// flex-shrink: 0;
+				padding: 10rpx;
+				padding-left: 15rpx;
+				font-size: 32rpx;
+				font-weight: bold;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				.jj-tit-tit {
+					
+				}
+				.jj-val {
+					padding-top: 20rpx;
+					font-size: 28rpx;
+					font-weight: 500;
+				}
+			}
+		}
+	}
+</style>

pages/index/index.vue

@@ -1,658 +1,868 @@
-<template>
-	<view class="center">
-		<!-- 小程序头部兼容 -->
-		<!-- #ifdef MP -->
-		<navigator url="/pages/product/search">
-			<view class="input-box flex">
-				<view class=" input-content flex">
-					<view class="iconfont iconsearch"></view>
-					<view class="input"><input disabled placeholder="请输入搜索内容" /></view>
-				</view>
-			</view>
-		</navigator>
-		<!-- #endif -->
-		<view class="top"></view>
-		<view class="carousel">
-			<swiper autoplay="true" duration="400" interval="5000" @change="swiperChange" class="bor">
-				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"><image :src="item.pic" /></swiper-item>
-			</swiper>
-		</view>
-		<view class="swiper-dot">
-			<template v-for="item in swiperLength">
-				<view class="swiper-dots-item" :key="item" :class="{ action: swiperCurrent + 1 === item }"></view>
-			</template>
-		</view>
-		<view class="cate-section">
-			<view class="cate-item" @click="nav('/pages/category/category')">
-				<image src="/static/icon/c3.png"></image>
-				<view class="cate-font">品牌故事</view>
-			</view>
-			<view class="cate-item" @click="nav('/pages/category/articleList')">
-				<image src="/static/icon/c5.png"></image>
-				<view class="cate-font">使用案例</view>
-			</view>
-			<view class="cate-item" @click="showPopup()">
-				<image src="/static/icon/c7.png"></image>
-				<view class="cate-font">康复天地</view>
-			</view>
-			<view class="cate-item">
-				<image src="/static/icon/c8.png" @click="nav('/pages/index/vip')"></image>
-				<view class="cate-font">成为会员</view>
-			</view>
-		</view>
-		<view class="xian"></view>
-		<view class="main">
-			<view class="main-top flex">
-				<view class="main-left">
-					<view class="shu"></view>
-					<view class="main-title">热销推荐</view>
-					<view class="main-tip">在售精品</view>
-				</view>
-			</view>
-			<view class="list-box-h">
-				<view v-for="(item, index) in dataList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-					<image :src="item.image"></image>
-					<view class="guess-box">
-						<view class="title clamp2">{{ item.store_name }}</view>
-						<view class="price-box flex">
-							<view class="yuanprice">{{ item.ot_price }}</view>
-							<image src="../../static/img/jiantou.png" mode=""></image>
-							<view class="jiang">直降{{ (item.ot_price - item.price).toFixed(2) }}元</view>
-						</view>
-						<view class="price">￥{{ item.price }}</view>
-						<view class="btn">立即购买</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<uni-popup ref="popup" type="center">
-			<view class="popup">
-				<view class="popup-dox">
-					<image class="popup-logo" src="../../static/img/img009.png"></image>
-					<view class="pop-title">已为您定制专属客服</view>
-					<view>{{ weixin }}</view>
-					<image class="popup-text" @longtap="bc_code" :src="erweima"></image>
-					<view class="btn" @click="copy(weixin)">复制微信号</view>
-					<view class="pop-tip flex">
-						<view class="weixin"><image src="../../static/img/weixin.png" mode=""></image></view>
-						<view>长按保存二维码</view>
-					</view>
-				</view>
-			</view>
-			<view class="close_icon" @click="close"><image src="../../static/img/Close.png"></image></view>
-		</uni-popup>
-	</view>
-</template>
-
-<script>
-import { loadIndexs } from '@/api/index.js';
-import { mapState } from 'vuex';
-import { saveUrl, interceptor } from '@/utils/loginUtils.js';
-import { service } from '@/api/user.js';
-// #ifdef H5
-import { weixindata, weixinlocation, shareLoad } from '@/utils/wxAuthorized';
-import weixinObj from '@/plugin/jweixin-module/index.js';
-// #endif
-export default {
-	data() {
-		return {
-			carouselList: [], //轮播图
-			swiperCurrent: 0,
-			dataList: [],
-			erweima: '',
-			weixin: '', //客服微信
-			swiperLength: 1 //图片数量
-		};
-	},
-	onLoad: function(option) {
-		// #ifndef MP
-		if (option.spread) {
-			// 存储其他邀请人
-			uni.setStorageSync('spread', option.spread);
-		}
-		// #endif
-		// #ifdef MP
-		if (option.scene) {
-			// 存储小程序邀请人
-			uni.setStorage({
-				key: 'spread_code',
-				data: option.scene
-			});
-		}
-		// #endif
-		// #ifdef H5
-		if (this.hasLogin) {
-			console.log('显示');
-			weixinObj.hideAllNonBaseMenuItem();
-			this.IndexShare();
-		} else {
-			console.log('隐藏');
-			weixinObj.hideAllNonBaseMenuItem();
-		}
-		//#endif
-	},
-	computed: {
-		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
-		...mapState(['baseURL'])
-	},
-	onShow: function() {
-		// 判断是否强制登录
-		if (!this.hasLogin) {
-			// 登录拦截
-			uni.showModal({
-				title: '登录',
-				content: '您未登录，是否马上登陆?',
-				success: e => {
-					if (e.confirm) {
-						interceptor();
-					}
-				},
-				fail: e => {
-					console.log(e);
-				}
-			});
-		}
-		this.loadData();
-	},
-	//下拉刷新
-	onPullDownRefresh() {
-		this.loadData();
-	},
-	// #ifndef MP
-	// 监听导航栏输入框点击事件
-	onNavigationBarSearchInputClicked(e) {
-		//跳转到搜索页面
-		this.clickSearch();
-	},
-	//点击导航栏 buttons 时触发
-	onNavigationBarButtonTap(e) {
-		uni.navigateTo({
-			url: '/pages/user/notice'
-		});
-	},
-	// #endif
-	methods: {
-		// #ifdef H5
-		IndexShare() {
-			let obj = this;
-			let pages = getCurrentPages();
-			// 获取当前页面
-			let page = pages[pages.length - 1];
-			let path = '/#/' + page.route + '?';
-			// 保存传值
-			for (let i in page.options) {
-				path += i + '=' + page.options[i] + '&';
-			}
-			console.log(obj.Path);
-			// 保存邀请人
-			path += 'spread=' + this.userInfo.uid;
-			let data = {
-				link: this.baseURL + '/index/' + path,
-				title: this.userInfo.nickname + '邀请您进入鼎立足行',
-				desc: '欢迎加入鼎立足行',
-				imgUrl: 'https://dlzx.liuniu946.com/index/static/img/logo.png'
-			};
-			shareLoad(data);
-		},
-		// #endif
-		// 监听切换事件
-		listChange(e) {
-			this.checkid = e.detail.current;
-		},
-		// 點擊搜索框
-		clickSearch() {
-			uni.navigateTo({
-				url: '/pages/product/search'
-			});
-		},
-		nav(url) {
-			uni.navigateTo({
-				url,
-				fail: () => {
-					console.log(1);
-					uni.switchTab({
-						url
-					});
-				}
-			});
-		},
-		showPopup() {
-			this.$refs.popup.open();
-		},
-		close() {
-			this.$refs.popup.close();
-		},
-		//轮播图切换修改背景色
-		swiperChange(e) {
-			const index = e.detail.current;
-			this.swiperCurrent = index;
-		},
-		copy(content) {
-			/**
-			 * 小程序端 和 app端的复制逻辑
-			 */
-			//#ifndef H5
-			uni.setClipboardData({
-				data: content,
-				success: function() {
-					console.log('success');
-					return true;
-				}
-			});
-			//#endif
-
-			/**
-			 * H5端的复制逻辑
-			 */
-			// #ifdef H5
-			if (!document.queryCommandSupported('copy')) {
-				//为了兼容有些浏览器 queryCommandSupported 的判断
-				// 不支持
-				return false;
-			}
-			let textarea = document.createElement('textarea');
-			textarea.value = content;
-			textarea.readOnly = 'readOnly';
-			document.body.appendChild(textarea);
-			textarea.select(); // 选择对象
-			textarea.setSelectionRange(0, content.length); //核心
-			let result = document.execCommand('copy'); // 执行浏览器复制命令
-			textarea.remove();
-			return result;
-			// #endif
-		},
-		comfirm(text) {
-			console.log(text);
-			const result = this.uniCopy(text);
-			if (result === false) {
-				uni.showToast({
-					title: '不支持'
-				});
-			} else {
-				uni.showToast({
-					title: '复制成功',
-					icon: 'none'
-				});
-			}
-			this.$refs.popup.close();
-		},
-		bc_code() {
-			let that = this;
-			console.log('保存二维码', this.erweima);
-			uni.downloadFile({
-				//获得二维码的临时地址
-				url: this.erweima,
-				success: res => {
-					//console.log('获取url',res)
-					if (res.statusCode == 200) {
-						uni.saveImageToPhotosAlbum({
-							filePath: res.tempFilePath, //传入临时地址
-							success() {
-								that.$api.msg('保存成功'); //封装的提示
-							},
-							fail() {
-								that.$api.msg('保存失败');
-							}
-						});
-					}
-				}
-			});
-		},
-		// 请求载入数据
-		async loadData() {
-			loadIndexs({})
-				.then(({ data }) => {
-					console.log(data);
-					this.carouselList = data.banner;
-					this.swiperLength = this.carouselList.length;
-					this.dataList = data.likeInfo; //最新商品
-					uni.stopPullDownRefresh();
-				})
-				.catch(e => {
-					uni.stopPullDownRefresh();
-				});
-			service({}).then(({ data }) => {
-				this.erweima = data.service_qr;
-				this.weixin = data.service_wechat;
-			});
-		},
-		//详情页
-		navToDetailPage(item) {
-			let id = item.id;
-			uni.navigateTo({
-				url: '/pages/product/product?id=' + id
-			});
-		}
-	}
-};
-</script>
-
-<style lang="scss">
-page,
-.center {
-	height: auto;
-	min-height: 100%;
-	background-color: #ffffff;
-}
-/* #ifdef MP || APP-PLUS*/
-.input-box {
-	padding: 25rpx;
-	/* #ifdef APP-PLUS */
-	margin-top: var(--status-bar-height);
-	/* #endif */
-	background-color: #0fc8e4;
-	height: 44px;
-
-	.iconsearch {
-		font-size: 50rpx;
-	}
-
-	.input-content {
-		border-radius: 99rpx;
-		flex-grow: 1;
-		padding: 5rpx 30rpx;
-		// background-color: rgba(231, 231, 231, 0.7);
-		background: #ffffff;
-
-		.input {
-			flex-grow: 1;
-
-			input {
-				font-size: $font-base;
-			}
-		}
-	}
-
-	.input-button {
-		padding-left: 20rpx;
-		font-size: $font-base;
-		height: 100%;
-	}
-}
-
-/* #endif */
-.top {
-	width: 1000rpx;
-	height: 240rpx;
-	background: linear-gradient(180deg, #08c4e6, #50ead2);
-	overflow: hidden;
-	text-align: center;
-	border-bottom-left-radius: 50%;
-	border-bottom-right-radius: 50%;
-	margin-left: -125rpx;
-}
-.carousel {
-	width: 700rpx;
-	height: 300rpx;
-	border-radius: 14rpx;
-	margin: 0 auto;
-	margin-top: calc(-260rpx + var(--status-bar-height));
-	.bor {
-		border-radius: 14rpx;
-		.carousel-item {
-			image {
-				width: 100%;
-				height: 100%;
-				border-radius: 14rpx;
-			}
-		}
-	}
-}
-.swiper-dot {
-	position: relative;
-	z-index: 10;
-	margin-top: -40rpx;
-	display: flex;
-	justify-content: center;
-
-	.swiper-dots-item {
-		width: 14rpx;
-		height: 14rpx;
-		background: #aaaaaa;
-		border-radius: 50%;
-		margin: 0 16rpx;
-		// z-index: 999;
-	}
-
-	.action {
-		background-color: #ffffff;
-	}
-}
-.cate-section {
-	display: flex;
-	justify-content: space-around;
-	align-items: center;
-	flex-wrap: wrap;
-	padding: 40rpx 22rpx;
-	.cate-item {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		font-size: $font-sm + 4rpx;
-		color: $font-color-dark;
-	}
-	.cate-font {
-		margin-top: -26rpx;
-	}
-	/* 原图标颜色太深,不想改图了,所以加了透明度 */
-	image {
-		width: 150rpx;
-		height: 150rpx;
-		margin-bottom: 14rpx;
-		border-radius: 50%;
-	}
-}
-.xian {
-	width: 750rpx;
-	height: 20rpx;
-	background: #f5f5f5;
-}
-.main {
-	margin-top: 40rpx;
-	padding: 0 40rpx;
-	.main-top {
-		align-items: center;
-		.main-left {
-			display: flex;
-			justify-content: flex-start;
-			align-items: center;
-			.shu {
-				width: 8rpx;
-				height: 38rpx;
-				background: #05ab81;
-				border-radius: 4rpx;
-			}
-			.main-title {
-				margin-left: 10rpx;
-				font-size: 36rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #202739;
-			}
-			.main-tip {
-				font-size: 22rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #95a0b1;
-				margin-left: 14rpx;
-			}
-		}
-	}
-}
-.guess-item {
-	display: flex;
-	width: 710rpx;
-	height: 290rpx;
-	background: #ffffff;
-	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
-	border-radius: 10rpx;
-	padding: 15rpx;
-	padding-bottom: 150rpx;
-	margin: 20rpx auto 0;
-	position: relative;
-	image {
-		width: 260rpx;
-		height: 260rpx;
-		border-radius: 10rpx;
-	}
-	.guess-box {
-		padding: 12rpx 0 0 24rpx;
-		width: 436rpx;
-		.title {
-			font-size: 30rpx;
-			padding-left: 4rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #333333;
-			width: 368rpx;
-			line-height: 36rpx;
-			.tuanF {
-				display: inline-block;
-				margin-right: 4rpx;
-				position: relative;
-				top: -6rpx;
-				.tuan {
-					display: flex;
-					align-items: center;
-					padding: 10rpx;
-					height: 36rpx;
-					background: #ffebe9;
-					border-radius: 18rpx;
-					.tuan-image {
-						width: 18rpx;
-						height: 18rpx;
-					}
-					.tuan-font {
-						display: inline;
-						font-size: 20rpx;
-						font-family: PingFang SC;
-						font-weight: 500;
-						color: #ff1135;
-						margin-left: 2rpx;
-					}
-				}
-			}
-		}
-		.ping-box {
-			margin-top: 15rpx;
-			justify-content: flex-start;
-			.ping {
-				margin-left: 10rpx;
-				height: 39rpx;
-				background: #fdf7eb;
-				border-radius: 5rpx;
-				font-size: 22rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #ff911f;
-				display: flex;
-				align-items: center;
-				padding: 0 10rpx;
-			}
-		}
-		.price-box {
-			margin-top: 80rpx;
-			justify-content: flex-start;
-			.yuanprice {
-				font-size: 26rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				text-decoration: line-through;
-				color: #999999;
-				padding-right: 6rpx;
-			}
-			image {
-				width: 14rpx;
-				height: 16rpx;
-			}
-			.jiang {
-				padding-left: 2rpx;
-				font-size: 24rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #b59467;
-			}
-		}
-		.price {
-			font-size: 36rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #ff1135;
-		}
-		.btn {
-			width: 137rpx;
-			height: 56rpx;
-			background: #16cc9f;
-			border-radius: 28rpx;
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #ffffff;
-			line-height: 56rpx;
-			text-align: center;
-			position: absolute;
-			bottom: 25rpx;
-			right: 25rpx;
-		}
-	}
-}
-.popup {
-	width: 640rpx;
-	background-color: #ffffff;
-	border-radius: 15rpx;
-	text-align: center;
-	.popup-dox {
-		position: relative;
-		top: -60rpx;
-		.popup-logo {
-			width: 460rpx;
-			height: 132rpx;
-		}
-		.pop-title {
-			font-size: 40rpx;
-			font-weight: bold;
-			color: #333333;
-			padding: 25rpx 0rpx;
-			margin-bottom: 50rpx;
-		}
-		.popup-text {
-			width: 400rpx;
-			height: 400rpx;
-			margin-bottom: 50rpx;
-		}
-		.btn {
-			width: 300rpx;
-			height: 50rpx;
-			line-height: 50rpx;
-			background: #96e4f2;
-			margin: 0 auto;
-			color: #ffffff;
-			border-radius: 25rpx;
-		}
-		.pop-tip {
-			font-size: 30rpx;
-			font-weight: 500;
-			color: #333333;
-			justify-content: center;
-			margin-top: 20rpx;
-			.weixin {
-				width: 48rpx;
-				height: 40rpx;
-				margin-right: 14rpx;
-				image {
-					width: 48rpx;
-					height: 40rpx;
-				}
-			}
-		}
-	}
-}
-.close_icon {
-	width: 60rpx;
-	height: 60rpx;
-	margin: 88rpx auto 0;
-	image {
-		width: 100%;
-		height: 100%;
-	}
-}</style>
+<template>
+	<view class="center">
+		<!-- 小程序头部兼容 -->
+		<!-- #ifdef MP -->
+		<navigator url="/pages/product/search">
+			<view class="input-box flex">
+				<view class=" input-content flex">
+					<view class="iconfont iconsearch"></view>
+					<view class="input"><input disabled placeholder="请输入搜索内容" /></view>
+				</view>
+			</view>
+		</navigator>
+		<!-- #endif -->
+		<view class="top"></view>
+		<view class="carousel">
+			<swiper autoplay="true" duration="400" interval="5000" @change="swiperChange" class="bor">
+				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
+					<image :src="item.pic" />
+				</swiper-item>
+			</swiper>
+		</view>
+		<view class="swiper-dot">
+			<template v-for="item in swiperLength">
+				<view class="swiper-dots-item" :key="item" :class="{ action: swiperCurrent + 1 === item }"></view>
+			</template>
+		</view>
+		<view class="cate-section">
+			<view class="cate-item" @click="nav('/pages/index/artList?cid=1&tit=' + encodeURI('众赢集团'))">
+				<image src="/static/icon/in1.png"></image>
+				<view class="cate-font">众赢集团</view>
+			</view>
+			<view class="cate-item" @click="nav('/pages/category/articleList')">
+				<image src="/static/icon/in2.png"></image>
+				<view class="cate-font">康养旅居</view>
+			</view>
+
+			<view class="cate-item">
+				<image src="/static/icon/in3.png" @click="nav('/pages/index/vip')"></image>
+				<view class="cate-font">调理养护</view>
+			</view>
+			<view class="cate-item">
+				<image src="/static/icon/in4.png" @click="nav('/pages/index/vip')"></image>
+				<view class="cate-font">专家专项</view>
+			</view>
+			<view class="cate-item">
+				<image src="/static/icon/in5.png" @click="nav('/pages/index/vip')"></image>
+				<view class="cate-font">商品分类</view>
+			</view>
+			<view class="cate-item">
+				<image src="/static/icon/in6.png" @click="nav('/pages/index/vip')"></image>
+				<view class="cate-font">热销推荐</view>
+			</view>
+			<view class="cate-item">
+				<image src="/static/icon/in7.png" @click="nav('/pages/index/vip')"></image>
+				<view class="cate-font">会员中心</view>
+			</view>
+			<view class="cate-item" @click="showPopup()">
+				<image src="/static/icon/in8.png"></image>
+				<view class="cate-font">分享有礼</view>
+			</view>
+
+		</view>
+		<view class="jj-tit">
+			<view class="left">
+				<image src="../../static/icon/gsjj.png" mode="" class="jj-log"></image>
+				<view class="jj-title">
+					公司简介
+				</view>
+			</view>
+			<view class="right" @click="nav('/pages/index/artList?cid=1')">
+				<view class="jj-more-tit">
+					更多
+				</view>
+				<image src="../../static/img/img39.png" mode="" class="jj-more"></image>
+			</view>
+		</view>
+		<view class="jj-wrap" >
+			<view class="jj" v-for="gs in 2" @click="nav('/pages/index/artDetail?id=' + gs.id)">
+				<image src="" mode="" class="jj-img"></image>
+				<view class="jj-info">
+					<view class="jj-tit-tit clamp">
+						标题
+					</view>
+					<view class="jj-val clamp2">
+						更新时间：11111111
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="xian"></view>
+		<view class="main">
+			<!-- <view class="main-top flex">
+				<view class="main-left">
+					<view class="shu"></view>
+					<view class="main-title">热销推荐</view>
+					<view class="main-tip">在售精品</view>
+				</view>
+			</view> -->
+			<view class="main-t-t">
+				<image src="../../static/img/jxhh.png" mode="" class="main-t-t-i"></image>
+			</view>
+			<view class="list-box-h">
+				<view v-for="(item, index) in dataList" :key="index" class="guess-item" @click="navToDetailPage(item)">
+					<image :src="item.image"></image>
+					<view class="guess-box">
+						<view class="title clamp2">{{ item.store_name }}</view>
+						<view class="price-box flex">
+							<view class="yuanprice">{{ item.ot_price }}</view>
+							<image src="../../static/img/jiantou.png" mode=""></image>
+							<view class="jiang">直降{{ (item.ot_price - item.price).toFixed(2) }}元</view>
+						</view>
+						<view class="price">￥{{ item.price }}</view>
+						<view class="btn">立即购买</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<uni-popup ref="popup" type="center">
+			<view class="popup">
+				<view class="popup-dox">
+					<image class="popup-logo" src="../../static/img/img009.png"></image>
+					<view class="pop-title">已为您定制专属客服</view>
+					<view>{{ weixin }}</view>
+					<image class="popup-text" @longtap="bc_code" :src="erweima"></image>
+					<view class="btn" @click="copy(weixin)">复制微信号</view>
+					<view class="pop-tip flex">
+						<view class="weixin">
+							<image src="../../static/img/weixin.png" mode=""></image>
+						</view>
+						<view>长按保存二维码</view>
+					</view>
+				</view>
+			</view>
+			<view class="close_icon" @click="close">
+				<image src="../../static/img/Close.png"></image>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import {
+		loadIndexs
+	} from '@/api/index.js';
+	import {
+		mapState
+	} from 'vuex';
+	import {
+		saveUrl,
+		interceptor
+	} from '@/utils/loginUtils.js';
+	import {
+		service
+	} from '@/api/user.js';
+	// #ifdef H5
+	import {
+		weixindata,
+		weixinlocation,
+		shareLoad
+	} from '@/utils/wxAuthorized';
+	import weixinObj from '@/plugin/jweixin-module/index.js';
+	// #endif
+	export default {
+		data() {
+			return {
+				carouselList: [], //轮播图
+				swiperCurrent: 0,
+				dataList: [],
+				erweima: '',
+				weixin: '', //客服微信
+				swiperLength: 1 //图片数量
+			};
+		},
+		onLoad: function(option) {
+			// #ifndef MP
+			if (option.spread) {
+				// 存储其他邀请人
+				uni.setStorageSync('spread', option.spread);
+			}
+			// #endif
+			// #ifdef MP
+			if (option.scene) {
+				// 存储小程序邀请人
+				uni.setStorage({
+					key: 'spread_code',
+					data: option.scene
+				});
+			}
+			// #endif
+			// #ifdef H5
+			if (this.hasLogin) {
+				console.log('显示');
+				weixinObj.hideAllNonBaseMenuItem();
+				this.IndexShare();
+			} else {
+				console.log('隐藏');
+				weixinObj.hideAllNonBaseMenuItem();
+			}
+			//#endif
+		},
+		computed: {
+			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
+			...mapState(['baseURL'])
+		},
+		onShow: function() {
+			// 判断是否强制登录
+			if (!this.hasLogin) {
+				// 登录拦截
+				uni.showModal({
+					title: '登录',
+					content: '您未登录，是否马上登陆?',
+					success: e => {
+						if (e.confirm) {
+							interceptor();
+						}
+					},
+					fail: e => {
+						console.log(e);
+					}
+				});
+			}
+			this.loadData();
+		},
+		//下拉刷新
+		onPullDownRefresh() {
+			this.loadData();
+		},
+		// #ifndef MP
+		// 监听导航栏输入框点击事件
+		onNavigationBarSearchInputClicked(e) {
+			//跳转到搜索页面
+			this.clickSearch();
+		},
+		//点击导航栏 buttons 时触发
+		onNavigationBarButtonTap(e) {
+			uni.navigateTo({
+				url: '/pages/user/notice'
+			});
+		},
+		// #endif
+		methods: {
+			// #ifdef H5
+			IndexShare() {
+				let obj = this;
+				let pages = getCurrentPages();
+				// 获取当前页面
+				let page = pages[pages.length - 1];
+				let path = '/#/' + page.route + '?';
+				// 保存传值
+				for (let i in page.options) {
+					path += i + '=' + page.options[i] + '&';
+				}
+				console.log(obj.Path);
+				// 保存邀请人
+				path += 'spread=' + this.userInfo.uid;
+				let data = {
+					link: this.baseURL + '/index/' + path,
+					title: this.userInfo.nickname + '邀请您进入鼎立足行',
+					desc: '欢迎加入鼎立足行',
+					imgUrl: 'https://dlzx.liuniu946.com/index/static/img/logo.png'
+				};
+				shareLoad(data);
+			},
+			// #endif
+			// 监听切换事件
+			listChange(e) {
+				this.checkid = e.detail.current;
+			},
+			// 點擊搜索框
+			clickSearch() {
+				uni.navigateTo({
+					url: '/pages/product/search'
+				});
+			},
+			nav(url) {
+				uni.navigateTo({
+					url,
+					fail: () => {
+						console.log(1);
+						uni.switchTab({
+							url
+						});
+					}
+				});
+			},
+			showPopup() {
+				this.$refs.popup.open();
+			},
+			close() {
+				this.$refs.popup.close();
+			},
+			//轮播图切换修改背景色
+			swiperChange(e) {
+				const index = e.detail.current;
+				this.swiperCurrent = index;
+			},
+			copy(content) {
+				/**
+				 * 小程序端 和 app端的复制逻辑
+				 */
+				//#ifndef H5
+				uni.setClipboardData({
+					data: content,
+					success: function() {
+						console.log('success');
+						return true;
+					}
+				});
+				//#endif
+
+				/**
+				 * H5端的复制逻辑
+				 */
+				// #ifdef H5
+				if (!document.queryCommandSupported('copy')) {
+					//为了兼容有些浏览器 queryCommandSupported 的判断
+					// 不支持
+					return false;
+				}
+				let textarea = document.createElement('textarea');
+				textarea.value = content;
+				textarea.readOnly = 'readOnly';
+				document.body.appendChild(textarea);
+				textarea.select(); // 选择对象
+				textarea.setSelectionRange(0, content.length); //核心
+				let result = document.execCommand('copy'); // 执行浏览器复制命令
+				textarea.remove();
+				return result;
+				// #endif
+			},
+			comfirm(text) {
+				console.log(text);
+				const result = this.uniCopy(text);
+				if (result === false) {
+					uni.showToast({
+						title: '不支持'
+					});
+				} else {
+					uni.showToast({
+						title: '复制成功',
+						icon: 'none'
+					});
+				}
+				this.$refs.popup.close();
+			},
+			bc_code() {
+				let that = this;
+				console.log('保存二维码', this.erweima);
+				uni.downloadFile({
+					//获得二维码的临时地址
+					url: this.erweima,
+					success: res => {
+						//console.log('获取url',res)
+						if (res.statusCode == 200) {
+							uni.saveImageToPhotosAlbum({
+								filePath: res.tempFilePath, //传入临时地址
+								success() {
+									that.$api.msg('保存成功'); //封装的提示
+								},
+								fail() {
+									that.$api.msg('保存失败');
+								}
+							});
+						}
+					}
+				});
+			},
+			// 请求载入数据
+			async loadData() {
+				loadIndexs({})
+					.then(({
+						data
+					}) => {
+						console.log(data);
+						this.carouselList = data.banner;
+						this.swiperLength = this.carouselList.length;
+						this.dataList = data.likeInfo; //最新商品
+						uni.stopPullDownRefresh();
+					})
+					.catch(e => {
+						uni.stopPullDownRefresh();
+					});
+				service({}).then(({
+					data
+				}) => {
+					this.erweima = data.service_qr;
+					this.weixin = data.service_wechat;
+				});
+			},
+			//详情页
+			navToDetailPage(item) {
+				let id = item.id;
+				uni.navigateTo({
+					url: '/pages/product/product?id=' + id
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	page,
+	.center {
+		height: auto;
+		min-height: 100%;
+		background-color: #ffffff;
+	}
+
+	/* #ifdef MP || APP-PLUS*/
+	.input-box {
+		padding: 25rpx;
+		/* #ifdef APP-PLUS */
+		margin-top: var(--status-bar-height);
+		/* #endif */
+		background-color: #0fc8e4;
+		height: 44px;
+
+		.iconsearch {
+			font-size: 50rpx;
+		}
+
+		.input-content {
+			border-radius: 99rpx;
+			flex-grow: 1;
+			padding: 5rpx 30rpx;
+			// background-color: rgba(231, 231, 231, 0.7);
+			background: #ffffff;
+
+			.input {
+				flex-grow: 1;
+
+				input {
+					font-size: $font-base;
+				}
+			}
+		}
+
+		.input-button {
+			padding-left: 20rpx;
+			font-size: $font-base;
+			height: 100%;
+		}
+	}
+
+	/* #endif */
+	.top {
+		width: 1000rpx;
+		height: 240rpx;
+		background: linear-gradient(180deg, #52c696, #52c696);
+		overflow: hidden;
+		text-align: center;
+		border-bottom-left-radius: 50%;
+		border-bottom-right-radius: 50%;
+		margin-left: -125rpx;
+	}
+
+	.carousel {
+		width: 700rpx;
+		height: 300rpx;
+		border-radius: 14rpx;
+		margin: 0 auto;
+		margin-top: calc(-240rpx + var(--status-bar-height));
+
+		.bor {
+			border-radius: 14rpx;
+
+			.carousel-item {
+				image {
+					width: 100%;
+					height: 100%;
+					border-radius: 14rpx;
+				}
+			}
+		}
+	}
+
+	.swiper-dot {
+		position: relative;
+		z-index: 10;
+		margin-top: -40rpx;
+		display: flex;
+		justify-content: center;
+
+		.swiper-dots-item {
+			width: 14rpx;
+			height: 14rpx;
+			background: #aaaaaa;
+			border-radius: 50%;
+			margin: 0 16rpx;
+			// z-index: 999;
+		}
+
+		.action {
+			background-color: #ffffff;
+		}
+	}
+
+	.cate-section {
+		display: flex;
+		// justify-content: space-around;
+		justify-content: flex-start;
+		align-items: center;
+		flex-wrap: wrap;
+		padding: 60rpx 0 20rpx;
+
+		.cate-item {
+			width: 25%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			font-size: $font-sm + 4rpx;
+			color: $font-color-dark;
+
+			image {
+				width: 118rpx;
+				height: 103rpx;
+			}
+
+		}
+
+		.cate-font {
+			// margin-top: -26rpx;
+			margin-bottom: 20rpx;
+		}
+
+		/* 原图标颜色太深,不想改图了,所以加了透明度 */
+		image {
+			width: 150rpx;
+			height: 150rpx;
+			// margin-bottom: 14rpx;
+			border-radius: 50%;
+		}
+	}
+
+	.xian {
+		width: 750rpx;
+		height: 20rpx;
+		background: #f5f5f5;
+	}
+
+	.main {
+		margin-top: 40rpx;
+		padding: 0 40rpx;
+		.main-t-t {
+			// width: 100;
+			display: flex;
+			justify-content: center;
+			.main-t-t-i {
+				width: 376rpx;
+				height: 34rpx;
+				margin: auto;
+			}
+		}
+		.main-top {
+			align-items: center;
+
+			.main-left {
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+
+				.shu {
+					width: 8rpx;
+					height: 38rpx;
+					background: #05ab81;
+					border-radius: 4rpx;
+				}
+
+				.main-title {
+					margin-left: 10rpx;
+					font-size: 36rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #202739;
+				}
+
+				.main-tip {
+					font-size: 22rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #95a0b1;
+					margin-left: 14rpx;
+				}
+			}
+		}
+	}
+
+	.guess-item {
+		display: flex;
+		width: 710rpx;
+		height: 290rpx;
+		background: #ffffff;
+		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+		border-radius: 10rpx;
+		padding: 15rpx;
+		padding-bottom: 150rpx;
+		margin: 20rpx auto 0;
+		position: relative;
+
+		image {
+			width: 260rpx;
+			height: 260rpx;
+			border-radius: 10rpx;
+		}
+
+		.guess-box {
+			padding: 12rpx 0 0 24rpx;
+			width: 436rpx;
+
+			.title {
+				font-size: 30rpx;
+				padding-left: 4rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #333333;
+				width: 368rpx;
+				line-height: 36rpx;
+
+				.tuanF {
+					display: inline-block;
+					margin-right: 4rpx;
+					position: relative;
+					top: -6rpx;
+
+					.tuan {
+						display: flex;
+						align-items: center;
+						padding: 10rpx;
+						height: 36rpx;
+						background: #ffebe9;
+						border-radius: 18rpx;
+
+						.tuan-image {
+							width: 18rpx;
+							height: 18rpx;
+						}
+
+						.tuan-font {
+							display: inline;
+							font-size: 20rpx;
+							font-family: PingFang SC;
+							font-weight: 500;
+							color: #ff1135;
+							margin-left: 2rpx;
+						}
+					}
+				}
+			}
+
+			.ping-box {
+				margin-top: 15rpx;
+				justify-content: flex-start;
+
+				.ping {
+					margin-left: 10rpx;
+					height: 39rpx;
+					background: #fdf7eb;
+					border-radius: 5rpx;
+					font-size: 22rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #ff911f;
+					display: flex;
+					align-items: center;
+					padding: 0 10rpx;
+				}
+			}
+
+			.price-box {
+				margin-top: 80rpx;
+				justify-content: flex-start;
+
+				.yuanprice {
+					font-size: 26rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					text-decoration: line-through;
+					color: #999999;
+					padding-right: 6rpx;
+				}
+
+				image {
+					width: 14rpx;
+					height: 16rpx;
+				}
+
+				.jiang {
+					padding-left: 2rpx;
+					font-size: 24rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #b59467;
+				}
+			}
+
+			.price {
+				font-size: 36rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #FF6F0F;
+			}
+
+			.btn {
+				width: 137rpx;
+				height: 56rpx;
+				background: #16cc9f;
+				border-radius: 28rpx;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #ffffff;
+				line-height: 56rpx;
+				text-align: center;
+				position: absolute;
+				bottom: 25rpx;
+				right: 25rpx;
+			}
+		}
+	}
+
+	.popup {
+		width: 640rpx;
+		background-color: #ffffff;
+		border-radius: 15rpx;
+		text-align: center;
+
+		.popup-dox {
+			position: relative;
+			top: -60rpx;
+
+			.popup-logo {
+				width: 460rpx;
+				height: 132rpx;
+			}
+
+			.pop-title {
+				font-size: 40rpx;
+				font-weight: bold;
+				color: #333333;
+				padding: 25rpx 0rpx;
+				margin-bottom: 50rpx;
+			}
+
+			.popup-text {
+				width: 400rpx;
+				height: 400rpx;
+				margin-bottom: 50rpx;
+			}
+
+			.btn {
+				width: 300rpx;
+				height: 50rpx;
+				line-height: 50rpx;
+				background: #96e4f2;
+				margin: 0 auto;
+				color: #ffffff;
+				border-radius: 25rpx;
+			}
+
+			.pop-tip {
+				font-size: 30rpx;
+				font-weight: 500;
+				color: #333333;
+				justify-content: center;
+				margin-top: 20rpx;
+
+				.weixin {
+					width: 48rpx;
+					height: 40rpx;
+					margin-right: 14rpx;
+
+					image {
+						width: 48rpx;
+						height: 40rpx;
+					}
+				}
+			}
+		}
+	}
+
+	.close_icon {
+		width: 60rpx;
+		height: 60rpx;
+		margin: 88rpx auto 0;
+
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.jj-tit {
+		display: flex;
+		// height: 50rpx;
+		justify-content: space-between;
+		background-color: #fff;
+		padding-top: 20rpx;
+		.left {
+			padding-left: 30rpx;
+			display: flex;
+			.jj-log {
+				width: 45rpx;
+				height: 45rpx;
+			}
+			.jj-title {
+				font-weight: bold;
+				font-size: 32rpx;
+				padding-left: 15rpx;
+			}
+		}
+		.right {
+			display: flex;
+			width: 200rpx;
+			font-size: 22rpx;
+			// justify-content: sp;
+			justify-content: flex-end;
+			align-items: center;
+			padding-right: 30rpx;
+			color: #999;
+			.jj-more {
+				margin-left: 10rpx;
+				width: 15rpx;
+				height: 22rpx;
+			}
+		}
+	}
+	.jj-wrap {
+		background-color: #fff;
+		// margin: 20rpx 0;
+		.jj {
+			margin: auto;
+			width: 689rpx;
+			height: 202rpx;
+			border-bottom: 1px solid #e5e5e5;
+			padding: 20rpx;
+			padding-left: 0;
+			display: flex;
+			&:last-of-type {
+				border-bottom: none;
+			}
+			.jj-img {
+				flex-shrink: 0;
+				width: 222rpx;
+				height: 158rpx;
+				background-color: #eee;
+				border-radius: 10rpx;
+			}
+			.jj-info {
+				width: 450rpx;
+				// flex-shrink: 0;
+				padding: 10rpx;
+				padding-left: 15rpx;
+				font-size: 32rpx;
+				font-weight: bold;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				.jj-tit-tit {
+					
+				}
+				.jj-val {
+					padding-top: 20rpx;
+					font-size: 28rpx;
+					font-weight: 500;
+				}
+			}
+		}
+	}
+</style>