shicai/pages/user/user.vue

<template>
	<view class="container">
		<scroll-view class="content-box" scroll-y="true">
			<view class="user-section">
				<view class="bg"></view>
				<view class="user-info-box ">
					<view class="detail flex" @click="navTo('/pages/userinfo/userinfo')">
						<view class="portrait-box"><image class="portrait" :src="userInfo.avatar || '/static/error/missing-face.png'"></image></view>
						<view class="info-box">
							<view class="username flex_item">
								<view class="clamp user-name">{{ userInfo.nickname || '游客' }}</view>
								<image v-if="userInfo.day_give > 0" class="image" src="https://shicai.liuniu946.com/img/img55.png"></image>
							<!-- 	<image src="../../static/img/img065.png" style="width: 103rpx;height: 32rpx;margin-left: 20rpx;margin-right: 7rpx;"></image>
								<image src="../../static/img/img066.png" style="width: 106rpx;height: 32rpx;"></image> -->
							</view>
							<view class="member" v-if="userInfo != '' && grade > 0">
								<image class="img" src="/static/img/img10.png"></image>
								<text class="grade">{{ userInfo.level_info.name }}</text>
							</view>
							<view class="phone" v-if="userInfo.phone !=null">手机号:{{ userInfo.phone }}</view>
						</view>
					</view>
					<view class="config iconfont"><text class="message iconmessage" @click="navTo('/pages/notice/notice')"></text></view>
				</view>
				<!-- 美卡卡功能 -->
				<!-- <view v-if="userInfo == ''">
					<view class="notice-box">
						<uni-notice-bar class="notice-bar" color="#84592F" showIcon="true" single="true" text="美卡权益大升级，加入美卡，即享4大权益"></uni-notice-bar>
					</view>
					<view class="vip-card-box">
						<view class="card-img"><image src="../../static/img/img11.png"></image></view>
						<view class="b-btn" @click="navTo('/pages/user/card')">
							立即开通
							<text class="iconfont iconenter"></text>
						</view>
						<view class="tit">
							优享美卡
							<text class="tpl">开通即享4大权益</text>
						</view>
					</view>
				</view>
				<view v-if="userInfo != ''">
					<view class="notice-box">
						<uni-notice-bar class="notice-bar" v-if="grade < 100" color="#84592F" showIcon="true" single="true" :text="text"></uni-notice-bar>
						<uni-notice-bar
							class="notice-bar"
							v-if="grade > 99"
							color="#84592F"
							showIcon="true"
							single="true"
							:text="'您已升级为正式美卡，还剩' + userInfo.level_valid_day + '天到期'"
						></uni-notice-bar>
					</view>
					<view class="vip-card-box">
						<view class="card-img"><image src="../../static/img/img11.png"></image></view>
						<view class="b-btn" @click="Tomember" v-if="grade < 100">
							立即开通
							<text class="iconfont iconenter"></text>
						</view>
						<view class="b-btn" @click="Tomember" v-if="grade > 99">
							立即续费
							<text class="iconfont iconenter"></text>
						</view>
						<view class="tit" v-if="grade < 100">
							优享美卡
							<text class="tpl">开通即享4大权益</text>
						</view>
						<view class="tit flex_item" v-if="grade > 99">
							<view class="img"><image src="/static/img/img10.png"></image></view>
							<view class="tpl">您已开通美卡</view>
						</view>
					</view>
				</view> -->
			</view>
			<view class="card-box-list flex">
				<view class="coupon-list" @click="navTo('/pages/coupon/coupon')">
					<view class="number">{{userInfo.discount_coupon_count}}<text class="text">张</text></view>
					<view class="name">优惠券</view>
				</view>
				
				<view class="fenge"></view>
				<view class="coupon-list" @click="navTo('/pages/commission/orderGroup')">
					<view class="number">{{userInfo.pink_prize || '0'}}<text class="text">元</text></view>
					<view class="name" style="text-align: right;">拼团收益</view>
				</view>
				
			</view>
			<view class="cover-container">
				<image class="arc" src="/static/img/arc.png"></image>
				<view class="item-box">
					<view class="box-title flex ">
						<view class="title"><text>我的订单</text></view>
						<view class="link" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover">
							<text>全部订单</text>
							<text class="iconfont iconenter"></text>
						</view>
					</view>
					<view class="order-section">
						<view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover" :hover-stay-time="50">
							<view class=" icon position-relative">
								<image class="icon-img" src="https://shicai.liuniu946.com/img/img24.png" mode="aspectFit"></image>
								<view class="corner" v-if="orderInfo.unpaid_count > 0">
									<text>{{ orderInfo.unpaid_count }}</text>
								</view>
							</view>
							<text class="order-text">待付款</text>
						</view>
						<view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
							<view class=" icon position-relative">
								<image class="icon-img" src="https://shicai.liuniu946.com/img/img25.png" mode="aspectFit"></image>
								<view class="corner" v-if="orderInfo.unshipped_count > 0">
									<text>{{ orderInfo.unshipped_count }}</text>
								</view>
							</view>
							<text class="order-text">备货中</text>
						</view>
						<view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon position-relative">
								<image class="icon-img" src="https://shicai.liuniu946.com/img/img26.png" mode="aspectFit"></image>
								<view class="corner" v-if="orderInfo.received_count > 0">
									<text>{{ orderInfo.received_count }}</text>
								</view>
							</view>
							<text class="order-text">待收货</text>
						</view>
						<view class="order-item" @click="navTo('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon position-relative">
								<image class="icon-img" src="https://shicai.liuniu946.com/img/img27.png" mode="aspectFit"></image>
								<view class="corner" v-if="orderInfo.complete_count > 0">
									<text>{{ orderInfo.complete_count }}</text>
								</view>
							</view>
							<text class="order-text">评价</text>
						</view>
					</view>
					<view class="group-order" v-if="pinkList.length !== 0">
						<view class="group-order-list flex">
							<view class="list-img-box flex_item">
								<image :src="pinkContent.cartInfo[0].productInfo.image"></image>
								<view class="info">
									<view class="info-name">查看拼单</view>
									<view class="info-tip">正在拼单的是{{pinkContent.cartInfo[0].productInfo.store_name}}</view>
								</view>
							</view>
							<view class="btn-detai" @click="GoPinkdetails">查看详情</view>
						</view>
					</view>
				</view>
				<view class="arc-image"><image :src="image" @click="navTo('/pages/groupBooking/index')" mode="widthFix"></image></view>
				<view class="item-box">
					<view class="box-title flex ">
						<view class="title"><text>经理权益</text></view>
					</view>
					<view class="order-section">
						<view class="order-item" @click="navTo('/pages/notice/poster?id=5')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img60.png" mode="aspectFit"></image></view>
							<text>申请代表</text>
						</view>
						<view class="order-item" @click="toDaibiao(1)" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img62.png" mode="aspectFit"></image></view>
							<text>代表提成</text>
						</view>
						<!-- <view class="order-item" hover-class="common-hover" :hover-stay-time="50">
						</view> -->
						<view class="order-item" @click="toDaibiao(2)" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img61.png" mode="aspectFit"></image></view>
							<text>我的团队</text>
						</view>
						<view class="order-item" @click="toDaibiao(5)" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img87.png" mode="aspectFit"></image></view>
							<text>预售接龙</text>
						</view>
					</view>			
				</view>
				<!-- <view class="item-box">
					<view class="box-title flex">
						<view class="title"><text>我的服务</text></view>
					</view>
					<view class="order-section">
						<view class="order-item" @click="navTo('/pages/commission/orderGroup')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img83.png" mode="aspectFit"></image></view>
							<text>拼团收益</text>
						</view>
						<view class="order-item" @click="navTo('/pages/commission/commission')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img59.png" mode="aspectFit"></image></view>
							<text>我的钱包</text>
						</view>
						<view class="order-item" @click="navTo('/pages/team/team')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img61.png" mode="aspectFit"></image></view>
							<text>我的团队</text>
						</view>
						<view class="order-item" @click="navTo('/pages/coupon/coupon')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img28.png" mode="aspectFit"></image></view>
							<text>我的卡包</text>
						</view>
					</view>
					<view class="order-section">
						<view class="order-item" @click="navTo('/pages/address/address')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img29.png" mode="aspectFit"></image></view>
							<text>收货地址</text>
						</view>
						<view class="order-item" @click="navTo('/pages/address/addressPink')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img86.png" mode="aspectFit"></image></view>
							<text>拼团地址</text>
						</view>
						<view class="order-item" @click="navTo('/pages/service/service')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img31.png" mode="aspectFit"></image></view>
							<text>客服与帮助</text>
						</view>
						<view class="order-item" @click="navTo('/pages/shareQrCode/index?spread='+userInfo.uid)" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img30.png" mode="aspectFit"></image></view>
							<text>邀请有礼</text>
						</view>
					</view>
					<view class="order-section lastSection">
						<view class="order-item" @click="navTo('/pages/set/set')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img32.png" mode="aspectFit"></image></view>
							<text>设置</text>
						</view>
					</view>
				</view> -->
				<view class="item-box">
					<view class="box-title flex">
						<view class="title"><text>拼团服务</text></view>
					</view>
					<view class="order-section">
						<view class="order-item" @click="navTo('/pages/commission/orderGroup')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img83.png" mode="aspectFit"></image></view>
							<text>拼团收益</text>
						</view>
						<view class="order-item" @click="navTo('/pages/address/addressPink')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img86.png" mode="aspectFit"></image></view>
							<text>拼团地址</text>
						</view>
						<view class="order-item" @click="navTo('/pages/shareQrCode/index?spread='+userInfo.uid)" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img30.png" mode="aspectFit"></image></view>
							<text>邀请有礼</text>
						</view>
						<view class="order-item" @click="navTo('/pages/coupon/coupon')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img28.png" mode="aspectFit"></image></view>
							<text>我的卡包</text>
						</view>
					</view>
				</view>
				
				<view class="item-box">
					<view class="box-title flex">
						<view class="title"><text>商城服务</text></view>
					</view>
					<view class="order-section">
						<view class="order-item" @click="navTo('/pages/commission/commission')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img59.png" mode="aspectFit"></image></view>
							<text>我的钱包</text>
						</view>
						<view class="order-item" @click="navTo('/pages/address/address')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img29.png" mode="aspectFit"></image></view>
							<text>商城地址</text>
						</view>
						<view class="order-item" @click="navTo('/pages/service/service')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img31.png" mode="aspectFit"></image></view>
							<text>客服与帮助</text>
						</view>
						<view class="order-item" @click="navTo('/pages/set/set')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon"><image class="icon-img" src="/static/img/img32.png" mode="aspectFit"></image></view>
							<text>设置</text>
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
		<view class="guess-name" v-if="userInfo != '' && Guesslist != ''">
			<view class="img"><image src="../../static/img/img13.png"></image></view>
			<view class="name">猜你喜欢</view>
		</view>
		<view id="list-box" class="list-box" :style="{ height: swiperHeight + 'px' }">
			<view class="guess-section">
				<view v-for="(item, index) in Guesslist" :key="index" class="guess-item" @click="ToDetail(item)">
					<view class="imagewrapper"><image :src="item.image"></image></view>
					<view class="guess-list">
						<text class="title clamp margin-c-20">{{ item.store_name }}</text>
						<view class="info clamp margin-c-20">{{ item.store_info }}</view>
						<view class="tipBox margin-c-20">
							<view class="tipsl" v-if="item.keyword != ''">
								<text v-for="lss in item.keyword">{{ lss }}</text>
							</view>
						</view>
					</view>
					<view class="price margin-c-20 flex">
						<view class="price_list">
							<view class="price-red">
								￥{{ item.price }}
								<text>/份</text>
							</view>
							<view class="price-green">
								￥{{ item.ot_price }}
								<text>市场价</text>
							</view>
						</view>
						<view class="img position-relative" @click.stop="Addcar(item)">
							<image src="/static/img/img21.png"></image>
							<view class="corner" v-if="item.cart_num > 0">
								<text>{{ item.cart_num }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bottom-show">
			<view class="show-left">
				关注公众号，及时接收订单消息提醒
			</view>
			<view class="show-right">
				点击关注
			</view>
		</view> -->
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import { article, details } from '@/api/notice.js';
import { orderData } from '@/api/user.js';
import { getUserInfo } from '@/api/login.js';
import { getProducts, cartAdd, pinkT_list } from '@/api/product.js';
import store from '@/store/index.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
let startY = 0,
	moveY = 0,
	pageAtTop = true;
export default {
	components: {
		uniList,
		uniListItem
	},
	data() {
		return {
			orderInfo: {
				complete_count: 0,
				received_count: 0,
				unshipped_count: 0,
				order_count: 0
			},
			text: '美卡权益大升级，加入美卡，即享4大权益',
			coverTransform: 'translateY(0px)',
			coverTransition: '0s',
			moving: false,
			grade: '',
			Guesslist: '',
			swiperHeight: '',
			userInfo:'',
			image: '', //海报图片
			cid: 4, //文章分类
			pinkList: [],	// 拼团列表
			pinkContent: {},	// 拼团信息
		};
	},
	onShow() {
		// 判断是否已经登录
		if (this.hasLogin) {
			this.loadBaseData();
			this.ArticleDate();
		}else{
			this.userInfo = ''
		}
		// 加载猜你喜欢
		this.Guess();
	},
	onLoad(option) {
		if (option.spread) {
			uni.setStorageSync('spread', option.spread);
		}
		saveUrl();
	},
	watch: {
		// 初次加载页面高度时修改页面高度
		Guesslist(newValue, oldValue) {
			let obj = this;
			let bHeight = Math.ceil(newValue.length / 2);
			obj.$nextTick(function() {
				uni.createSelectorQuery()
					.select('#list-box')
					.fields(
						{
							size: true
						},
						function(data) {
							obj.pageProportion = data.width / 750;
							obj.swiperHeight = Math.ceil(obj.pageProportion * 580 * bHeight);
						}
					)
					.exec();
			});
		}
	},
	computed: {
		...mapState('user',['hasLogin'])
	},
	methods: {
		...mapMutations('user',['setUserInfo', 'setOrderInfo']),
		// 加载初始数据
		loadBaseData() {
			let obj = this;
			getUserInfo({}).then(({ data }) => {
				obj.userInfo = data;
				obj.setUserInfo(data);
				if(data.level_info == null){
					obj.grade = 0
				}else{
					obj.grade = data.level_info.grade;
				}
				orderData({})
					.then(({ data }) => {
						obj.orderInfo = data;
					})
					.catch(e => {
						// if(e.message=='请选择配送地址'){
						// 	uni.showModal({
						// 		title: "您尚未定位是否马上定位?",
						// 		success: (e) => {
						// 			if (e.confirm) {
						// 				//修改地址为可查看
						// 				store.commit('upAddressPageShow');
						// 				uni.navigateTo({
						// 					url:'/pages/index/address'
						// 				})
						// 			}
						// 		}
						// 	})
						// }
						obj.orderinfo = {};
					});
			}).catch((e) => {
				console.log(e)
			});
			
			// 获取拼团列表 
			pinkT_list({
				page: 1,
				limit: 10,
				type: 1
			}).then(({data}) => {
				this.pinkList = data;
				this.pinkContent = data[0];
			})
		},
		// #ifdef MP
		onShareAppMessage: function(res) {
			let userInfo = uni.getStorageSync('userInfo');
			let GetInfo = uni.getStorageSync('GetInfo');
			// 来自页面内分享按钮
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/pages/user/user?';
			// 保存邀请人
			path += 'spread=' + userInfo.uid;
			let data = {
				path: path,
				imageUrl: GetInfo.img,
				title: GetInfo.title
			};
			console.log(data)
			return data;
		},
		// #endif
		toDaibiao(item){
			let id = item;
			console.log(this.userInfo,88)
			if(this.userInfo.is_promoter == 1){
				if(id == 1){
					// 推广订单
					uni.navigateTo({
						url: `/pages/commission/order`
					});
				}
				if(id == 2){
					// 我的团队
					uni.navigateTo({
						url: `/pages/team/team`
					});
				}
				if(id == 5){
					// 接龙
					uni.navigateTo({
						url: `/pages/groupBooking/klondike`
					});
				}
				// if(id == 3){
				// 	uni.navigateTo({
				// 		url: `/pages/commission/order`
				// 	});
				// }
			}else{
				uni.showToast({
					title: '点击申请代表查询如何成为代表，赚取佣金！',
					type: 'top',
					duration: 5000,
					icon: 'none'
				})
			}
		},
		//菜佬优惠日
		async ArticleDate() {
			let obj = this;
			article({}, obj.cid).then(function({ data }) {
				obj.image = data[0].image_input[0];
				console.log(obj.image)
			});
		},
		// 猜你喜欢
		Guess() {
			let obj = this;
			getProducts({
				page: 1,
				limit: 10,
				type: 1,
				sid: 98 //分类id
			})
				.then(({ data }) => {
					obj.Guesslist = data;
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 商品详情页
		ToDetail(item) {
			if (item.stock < 1) {
				this.$api.msg('该商品已售罄');
			} else {
				uni.navigateTo({
					url: `/pages/product/product?id=` + item.id
				});
			}
		},
		
		// 查看拼团详情
		GoPinkdetails() {
			
			uni.navigateTo({
				url: '/pages/order/order?state=1'
			});
			// uni.navigateTo({
			// 	url: '/pages/groupBooking/groupdetails?id=' + this.pinkContent.pink_id + '&order_id=' + this.pinkContent.order_id
			// });
		},
		
		Tomember() {
			uni.showToast({
				title: '暂未开通！',
				type: 'top',
				duration: 500,
				icon: 'none'
			})
		},
		//加入购物车
		Addcar(item) {
			let obj = this;
			cartAdd({
				cartNum: '1', //商品数量
				uniqueId: '', //商品标签
				new: 0, //商品是否新增加到购物车1为不加入0为加入
				mer_id: '',
				productId: item.id //商品编号
			})
				.then(function(e) {
					uni.showToast({
						title: '成功加入购物车',
						type: 'top',
						duration: 500,
						icon: 'none'
					});
					obj.Guess();
				})
				.catch(e => {});
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			if (!this.hasLogin) {
				// 保存地址
				saveUrl();
				// 登录拦截
				interceptor();
			} else {
				uni.navigateTo({
					url
				});
			}
		}
	}
};
</script>
<style lang="scss">
	.bottom-show{
		width:750rpx;
		height:67rpx;
		background:rgba(147,147,147,1);
		position: fixed;
		bottom: 50px;
		left: 0;
	  display: flex;
		z-index: 2000;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		.show-left{
			font-size:26rpx;
			font-weight:400;
			color:rgba(255,255,255,1);
		}
		.show-right{
			padding: 6rpx 23rpx ;
			font-size:24rpx;
			font-weight:400;
			color:rgba(255,255,255,1);
			background:linear-gradient(90deg,rgba(255,55,0,1) 0%,rgba(255,0,0,1) 100%);
			border-radius:22rpx;
		}
	}
page {
	height: 100%;
}
%flex-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
%section {
	display: flex;
	justify-content: space-around;
	align-content: center;
	background: #fff;
	border-radius: 10rpx;
}
.container {
	background-color: $page-color-base;
	padding-bottom: 160rpx;
}
.content-box {
	height: 100%;
}
.user-section {
	height: 350rpx;
	padding: 15rpx 30rpx 0;
	position: relative;
	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #33CA69;
	}
}
.user-info-box {
	height: 200rpx;
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 1;
	.detail {
		height: 130rpx;
		.portrait-box {
			height: 100%;
			.portrait {
				width: 130rpx;
				height: 100%;
				border: 5rpx solid #fff;
				border-radius: 50%;
			}
		}
		.info-box {
			margin-left: 20rpx;
			line-height: 1.5;
			.username {
				font-size: $font-lg + 6rpx;
				height: 100%;
				.user-name{
					max-width: 330rpx;
				}
				.image{
					margin-left: 15rpx;
					width: 106rpx;
					height: 32rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.member {
				padding: 5rpx 0rpx;
				position: relative;
				.img {
					position: absolute;
					top: 22rpx;
					left: 20rpx;
					width: 25rpx;
					height: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.grade {
					padding-left: 10rpx;
					background: #35383f;
					font-size: 24rpx;
					padding: 6rpx 15rpx;
					padding-left: 50rpx !important;
					padding-right: 25rpx !important;
					border: 2rpx solid #feeeb6;
					color: #F3D184;
					border-radius: 25rpx;
					max-width: 280rpx;
					min-width: 150rpx;
				}
			}
			.phone{
				padding-top: 10rpx;
				font-size: 26rpx;
			}
		}
	}
	.config {
		font-size: 58rpx;
		height: 130rpx;
		padding-top: 25rpx;
	}
}
.notice-box {
	.notice-bar {
		background: linear-gradient(left, rgba(249,230,191,1), rgba(252,187,140,1));
	}
	display: flex;
	flex-direction: column;
	color: #f7d680;
	border-radius: 25rpx 25rpx 0 0;
	overflow: hidden;
	position: relative;
	height: 65rpx;
	font-size: 22rpx;
	color: #84592f;
}
.card-box-list{
	color: #000000;
	padding: 20rpx 50rpx;
	border-radius: 15rpx;
	position: absolute;
	z-index: 200;
	top:220rpx;
	background-color: #FFFFFF;
	left: 35rpx;
	width:92%;
	.fenge{
		width:2rpx;
		height:79rpx;
		background:rgba(208,210,209,1);
	}
	.coupon-list{
		.number{
			font-size: 49rpx;
			font-weight: bolder;
			.text{
				padding-left: 15rpx;
				font-size: 26rpx !important;
				font-weight: normal;
			}
		}
		.name{
			font-size: 24rpx !important;
			padding-top: 10rpx;
		}
		
	}
}
.vip-card-box {
	display: flex;
	flex-direction: column;
	color: #f7d680;
	height: 240rpx;
	border-radius: 25rpx 25rpx 0 0;
	overflow: hidden;
	position: relative;
	z-index: 9;
	margin-top: -20rpx;
	// background-image: url(../../static/img/img11.png);
	// background-size: 100% 100%;
	.card-img{
		width: 100%;
		height: 300rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.card-bg {
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 380rpx;
		height: 260rpx;
	}
	.b-btn {
		position: absolute;
		right: 20rpx;
		top: 23rpx;
		text-align: center;
		font-size: 22rpx;
		color: #494347;
		padding: 6rpx 15rpx 6rpx 25rpx;
		border-radius: 20px;
		background: #f2d18a;
		z-index: 1;
		.iconfont{
			font-size: 22rpx;
		}
	}
	.tit {
		position: absolute;
		margin: 15rpx 25rpx;
		z-index: 999;
		font-size: 32rpx;
		padding-top: 10rpx;
		.img {
			width: 32rpx;
			height: 29rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.tpl {
			font-size: 24rpx;
			font-style: normal;
			padding-left: 15rpx;
			color: #f3d184;
		}
		.iconfont {
			color: #f6e5a3;
			margin-right: 16rpx;
			font-size: 28rpx !important;
		}
	}
	.e-b {
		font-size: $font-sm;
		color: #d8cba9;
		margin-top: 10rpx;
	}
}
.cover-container {
	background: $page-color-base;
	padding: 0 30rpx;
	position: relative;
	background: #f5f5f5;
	padding-bottom: 20rpx;
	z-index: 99;
	padding-top: 10rpx;
	.arc {
		position: absolute;
		left: 0;
		top: -34rpx;
		width: 100%;
		height: 36rpx;
	}
}
.arc-image{
	width: 100%;
	margin: 25rpx 0;
	text-align: center;
	height: auto;
	image{
		width: 100%;
		height: auto;
	}
}
.item-box {
	border-radius: 10rpx;
	background-color: white;
	// margin-top: 20rpx;
	margin: 20rpx 0;
	.box-title {
		line-height: 1;
		padding: 30rpx;
		.title {
			font-size: $font-lg;
			font-weight: bold;
		}
		.link {
			font-size: $font-base - 2rpx;
			color: $font-color-light;
		}
	}
	.lastSection {
		display: flex;
		align-items: 0;
		justify-content: flex-start;
		margin-left: 2%;
	}
	.order-section {
		@extend %section;
		padding: 28rpx 0;
		.order-item {
			@extend %flex-center;
			width: 150rpx;
			height: 120rpx;
			border-radius: 10rpx;
			font-size: $font-sm;
			color: #697079;
			.order-text{
				font-size:26rpx;
				font-weight:500;
				color:rgba(26,32,60,1);
			}
		}
		.iconfont {
			font-size: 48rpx;
			margin-bottom: 18rpx;
			color: #fa436a;
		}
		.icon-shouhoutuikuan {
			font-size: 44rpx;
		}
		.icon {
			height: 62rpx;
			width: 62rpx;
			margin-bottom: 18rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center;
			.icon-img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.group-order{
		width: 100%;
		height: 150rpx;
		padding: 0rpx 25rpx;
		padding-bottom: 25rpx !important;
		.group-order-list{
			width: 100%;
			height: 100%;
			background-color: #F7F9F8;
			border-radius: 10rpx;
			padding: 0rpx 25rpx;
			font-size: 26rpx;
			.list-img-box{
				width: 73%;
				image{
					width:100rpx;
					height: 100rpx;
				}
				.info{
					width: 75%;
					padding-left: 15rpx;
					.info-tip{
						color: #8F9190;
						font-size: 22rpx !important;
						padding-top: 10rpx;
					}
				}
			}
			.btn-detai{
				border: 2rpx solid #D0D2D1;
				padding: 8rpx 25rpx;
				border-radius: 25rpx;
				font-size: 24rpx !important;
			}
		}
	}
}

.history-section {
	// padding: 30rpx 0 0;
	margin-top: 20rpx;
	background: #fff;
	border-radius: 10rpx;
	.sec-header {
		display: flex;
		align-items: center;
		font-size: $font-base;
		color: $font-color-dark;
		line-height: 40rpx;
		margin-left: 30rpx;
		padding-top: 30rpx;
		.iconfont {
			font-size: 28rpx;
			color: $color-red;
			margin-right: 16rpx;
			line-height: 40rpx;
		}
	}
	.h-list {
		white-space: nowrap;
		padding: 30rpx 30rpx 0;
		.h-list-image {
			display: inline-block;
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}
	}
}
.guess-name {
	padding: 25rpx 25rpx;
	font-size: 32rpx;
	text-align: center;
	.img{
		width: 80%;
		margin: 0rpx auto;
		height: 4rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}
/* 猜你喜欢 */
.guess-section {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20rpx;
	.guess-item {
		// height: 558rpx;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		border: 2rpx solid #eeeeee;
		width: 343rpx;
		margin-bottom: 4%;
		border-radius: $border-radius-sm;
		background-color: white;
		padding-bottom: 30rpx;
		&:nth-child(2n + 1) {
			margin-right: 24rpx;
		}
	}
	.imagewrapper {
		width: 100%;
		height: 330rpx;
		border-radius: 3px;
		margin-bottom: 15rpx;
		image {
			width: 100%;
			height: 100%;
			// opacity: 1;
		}
	}
	.guess-list{
		height: 130rpx;
		.title {
			font-size: 28rpx;
			color: $font-color-dark;
		}
		.info {
			color: #999999;
			font-size: 24rpx;
		}
		.tipBox{
			// padding-bottom: 8rpx;
			.tipsl {
				text {
					border: 2rpx solid #ff1a27;
					color: #ff1a27;
					border-radius: 5rpx;
					font-size: 18rpx;
					padding: 2rpx 5rpx;
					margin-right: 15rpx;
				}
			}
		}
	}
	.price {
		font-size: 28rpx;
		width: 303rpx;
		// padding-top: 25rpx;
		position: relative;
		.price_list {
			.price-red {
				font-weight: bold;
				font-size: 32rpx !important;
				color:#FF1A27;
				text {
					color: #9699a0;
					font-size: 24rpx !important;
					font-weight: normal;
					padding: 0rpx 10rpx;
				}
			}
			.price-green {
				color: #2dbd59;
				font-size: 24rpx !important;
				text {
					background: #2dbd59;
					color: #ffffff;
					padding: 0rpx 8
					rpx;
					border-radius: 7rpx;
					font-size: 20rpx !important;
					margin-left: 8rpx;
				}
			}
		}
		.img {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 50rpx;
			height: 50rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.icon {
		@extend %icon;
	}

	.detail {
		line-height: 1;
	}
	.tip {
		color: white;
		background-color: $color-yellow;
		line-height: 1.5;
		font-size: $font-sm;
		padding-left: 20rpx;
	}
}
/*公用边框样式*/
%icon {
	margin-right: 10rpx;
	display: inline-block;
	padding: 2rpx 10rpx;
	border: 1rpx solid $color-yellow;
	color: $color-yellow;
	line-height: 1;
	font-size: $font-base;
	border-radius: 10rpx;
}
</style>