ydd_front/mer_uniapp/pages/trade_fair/trade_fair_user/index.vue

<template>
	<view class="container" :data-theme="theme">
		<!-- :style="userInfo.avatar?{ backgroundImage: `url(${userInfo.avatar})` }: ''" -->
		<!-- #ifdef MP || APP -->
		<NavBar navTitle="个人主页" :isBackgroundColor="false" iconColor='#fff'></NavBar>
		<!-- #endif -->
		<view class="header">
			<view class="header-bg" :style="{'background-image': userInfo.avatar}">
				<img :src="userInfo.avatar" alt="">
				<view class="header-bg-mc"></view>
			</view>

			<view class="user_wrapper flex-between-center">
				<image v-if="userInfo.userLevelIcon" class="level_icon" :src="userInfo.userLevelIcon" alt="">
					<view class="flex-y-center row-middle">
						<image :src="userInfo.avatar || urlDomain+'crmebimage/presets/morenT.png'" class="picture">
						</image>
						<view class="user_text flex-1">
							<view class="name acea-row">
								<text>{{userInfo.isLogoff ? "用户已注销": (userInfo.nickname || '')}}</text>
							</view>
							<!-- <view v-if="userInfo.id" class="user_id">ID: {{userInfo.id || ''}}</view> -->
							<view class="flex-between-center mt-16" @click="onEdit('school')">
								<view class="user_id">学校: {{school || '暂无'}}</view>
								<text v-show="userInfo.id==uid" class="ml10 iconfont icon-fabuzhongcao"></text>
							</view>
						</view>
					</view>
					<view v-if="id && id!=uid" @click.stop="followAuthor">
						<button v-if="!userInfo.isConcerned" class="follow_btn focus">
							<text class="iconfont icon-jiahao2"></text>关注
						</button>
						<button v-else class="follow_btn focused">已关注</button>
					</view>
					<view v-if="userInfo.id==uid">
						<navigator hover-class="none" :url="`/pages/discover/discover_release/index?fair=${true}`" class="follow_btn focus bg-color">
							去发布
						</navigator>
					</view>
			</view>
			<view class="acea-row plant_info" @click="onEdit('signature')">
				<view v-if="!userInfo.signature && userInfo.id==uid">点击可编辑个性签名</view>
				<view class="" v-if="userInfo.signature" style="width: 92%;">
					<view class="acea-row" v-if="userInfo.isMore || userInfo.signature.length<=30">
						<text class="signature">{{userInfo.signature}}</text>
						<text v-if="userInfo.isMore" class="more" @click.stop="moreTap">收起</text>
					</view>
					<view v-else class="acea-row">
						<text class="info signature">{{userInfo.signature.slice(0,23)}}...</text>
						<text class="more" @click.stop="moreTap"> 展开</text>
					</view>
				</view>
				<text v-show="userInfo.id==uid" class="ml10 iconfont icon-fabuzhongcao"></text>
			</view>

			<view class="plant_info" style="padding-bottom: 30rpx;">
				<view class="count_wrapper acea-row">
					<navigator :url="!id ? '/pages/discover/discover_follow/index?type=follow' : ''" class="item" hover-class="none">
						<text class="mr10">{{userInfo.concernedNum}}</text> 关注
					</navigator>
					<navigator :url="!id ? '/pages/discover/discover_follow/index?type=fans' : ''" class="item" hover-class="none">
						<text class="mr10">{{userInfo.fansNum}}</text> 粉丝
					</navigator>
					<view class="item">
						<text class="mr10">{{userInfo.likeNum}}</text> 获赞
					</view>
				</view>
			</view>
			<view v-if="!id && isShow" class="tab_count relative">
				<text @click.stop="changeTab(0)" :class="tab==0 ? 'on' : ''">我发布的</text>
				<text @click.stop="changeTab(1)" :class="tab==1 ? 'on' : ''">我想要的</text>
				<text @click.stop="changeTab(2)" :class="tab==2 ? 'on' : ''">我收藏的</text>
				<text @click.stop="changeTab(3)" :class="tab==3 ? 'on' : ''">我购买的</text>
			</view>
		</view>
		<view class="main">
			<view class="tab-conts">
				<view v-if="list.length > 0 && tab!==3" class="goods-wrap flex-1">
					<view class="goods">
						<!-- <WaterfallsFlow v-if="list.length" :wfList="list" :fromType="1" fromTo="home">
						</WaterfallsFlow> -->
						<WaterfallsFlow :wfList='list' :type="1" :isDynamics="true" :userFair="true" :isManage="manage">
							<template slot-scope="{item}">
								<WaterfallsFlowItem :item="item" :type="1" :isStore="1" />
							</template>
						</WaterfallsFlow>
					</view>
				</view>
				<view class='my-order' v-else>
					<view class='list'>
						<view class='item' v-for="(item,index) in list" :key="index">
							<view class='title acea-row row-between-wrapper'>
								<view class="acea-row row-middle">
									<view v-if="item.merName">
										<navigator :url="`/pages/merchant/home/index?merId=${item.merId}`" hover-class="none">
											<text class='iconfont icon-shangjiadingdan mr10'></text>
											<text class="mr10">{{item.merName}}</text>
											<text class='iconfont icon-xiangyou'></text>
										</navigator>
									</view>
									<view v-else>
										<text class="mr10">{{item.orderNo}}</text>
									</view>
								</view>
								<view v-if="item.refundStatus == 3" class='font_color'>已退款</view>
								<template v-else>
									<view class='font_color'>{{item.status | orderStatusFilter}}</view>
								</template>
							</view>
							<view v-for="(items,indexs) in item.orderInfoList" :key="indexs">
								<view @click='goOrderDetails(item)' class='item-info acea-row row-between row-top'>
									<view class='pictrue'>
										<easy-loadimage mode="widthFix" :image-src="items.image"></easy-loadimage>
									</view>
									<view class='text acea-row row-between'>
										<view class="nameBox">
											<view class='name line2'>
												<span v-if="Number(item.type) > 0 && Number(item.type) < 3" class="activity bg_color">{{item.type | orderTypeFilter}}</span>
												<span v-if="Number(item.secondType) === 1" class="activity bg_color">积分</span>
												<span>{{items.productName}}</span>
											</view>
											<view class="sku line1">{{items.sku}}</view>
										</view>
										<view class='money'>
											<view>￥{{items.price}}</view>
											<view>x{{items.payNum}}</view>
										</view>
									</view>
								</view>
								<view v-if="items.applyRefundNum && item.refundStatus > -1" class="text-24rpx font-color oppoSans-R mr-20px px-30 mt-14">
									售后申请数量：{{ items.applyRefundNum }}
								</view>
							</view>
							<view class='totalPrice' :class="item.status===0?'no-border':''">{{item.totalNum}}
								件商品，总金额
								<text class='money semiBold'> ￥{{item.payPrice}}</text>
							</view>
							<!-- <view v-if="item.status===0" class="mx-20 flex">
								<view class="tips w-full px-20 f-s-26">
									付款提醒<text class="ml-20 text-999">请在{{item.expirationTime}}前完成支付！</text>
								</view>
							</view> -->
							<!-- 订单状态（0：待支付，1：待发货,2：部分发货， 3：待核销，4：待收货,5：已收货,6：已完成，9：已取消） -->
							<view class='bottom acea-row row-right row-middle'>
								<view class='bnt cancelBnt' v-if="item.status === 0" @click='cancelOrder(index,item.orderNo)'>
									取消订单
								</view>
								<view class='bnt bg_color' v-if="item.status === 0" @click='goPay(item)'>
									立即付款
								</view>
								<view class='bnt bg_color' v-if="((item.paid || item.status == 9)&&item.type!=2)||(item.type==2&&item.groupBuyRecordStatus!==0)"
								 @click='goOrderDetails(item)'>
									查看详情</view>
								<view class='bnt cancelBnt' v-if="item.status==6 || item.status==9" @click='delOrder(item.orderNo,index)'>
									删除订单
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="empty-boxs noContent" v-if="list.length == 0 && !loading">
					<emptyPage title="暂无更多内容~" mTop="13%" :imgSrc="urlDomain+'crmebimage/presets/noguanzhu.png'">
					</emptyPage>
				</view>
				<view class='loadingicon acea-row row-center-wrapper'>
					<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
					<view class="end" :hidden="loading || list.length == 0"><text :class="loaded ? 'loaded' : ''">{{loadTitle}}</text>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="inputDialog" type="dialog">
			<view v-if="isShowSignature" class="tui-modal-custom">
				<view class="fs-32 fw-500 lh-44rpx text-center">{{fieldStr == 'signature' ? '编辑简介' : '编辑学校'}}</view>
				<view class="mt-24 bg--w111-f5f5f5 rd-16rpx p-24">
					<textarea v-if="fieldStr == 'signature'" class="w-full fs-26 h-342" ref="myTextarea" v-model="signature" :focus="focus"
					 :always-embed="true" :adjust-position="true" cursor-spacing="85rpx" placeholder="请输入内容" :maxlength="100" name="desc" />
					<input v-if="fieldStr == 'school'" class="placeholder" type='text' v-model='school' :focus="focus"
					 placeholder='请输入学校' placeholder-class='placeholder'></input>
				</view>
				<view class="flex-between-center mt-40">
					<view class="w-244 h-72 rd-36rpx flex-center fs-26 font-color close-btn" @tap="handleInputClose">取消
					</view>
					<view class="w-244 h-72 rd-36rpx flex-center bg-color text--w111-fff fs-26"
						@tap="handleInputConfirm">保存
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
	import WaterfallsFlowItem from '@/components/discoverFlowItem/discoverFlowItem.vue'
	import emptyPage from '@/components/emptyPage.vue';
	import NavBar from '@/components/navBar.vue';
	import {
		userHomeApi,
		myHomeApi,
		authorNoteApi,
		mySecondHandListApi,
		myLikeListApi,
		secondHandListApi,
		secondHandFollowListApi,
		editSignatureApi,
		editSchoolApi
	} from '@/api/discover.js';
	import {
		getSecondHandDetail,
		secondHandTake,
		secondHandDel,
		secondHandCancel,
		secondHandStatusImgApi,
		secondHandSend,
		secondHandOrderList
	} from '@/api/secondHand.js';
	import {
		ProductTypeEnum,
	} from "@/enums/productEnums";
	import {
		Debounce
	} from '@/utils/validate.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		discoverFollowAuthor
	} from '@/libs/follow.js';
	import easyLoadimage from '@/components/base/easy-loadimage.vue';
	const app = getApp();
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		components: {
			WaterfallsFlow,
			WaterfallsFlowItem,
			emptyPage,
			NavBar,
			easyLoadimage
		},
		data() {
			return {
				sysHeight: sysHeight,
				urlDomain: this.$Cache.get("imgHost"),
				theme: app.globalData.theme,
				ProductTypeEnum: ProductTypeEnum,
				list: [], // 内容列表
				loadTitle: '加载更多',
				loading: false,
				loaded: false,
				isShowAuth: false, //是否隐藏授权
				isAuto: false, //没有授权的不会自动授权
				userInfo: {},
				where: {
					page: 1,
					limit: 10
				},
				tab: 0,
				id: '', //作者id
				isShow: false,
				focus: false,
				isShowSignature: false, // 是否显示简介编辑内容
				signature: '', //弹窗中的签名
				school: '',
				fieldStr: '',
				manage: 1
			}
		},
		created() {},
		computed: {
			...mapGetters(['isLogin', 'uid']),
		},
		watch: {},
		onLoad: function(options) {
			this.id = options.id ? options.id : '';
		},
		onShow() {
			// if (this.id) {
			// 	this.isShow = false
			// 	this.getUserHome(this.id);
			// 	this.authorNoteList();
			// } else {
				this.isShow = true
				this.getMyHome();
				this.myNoteList();
			// }
		},
		onReady() {},
		mounted: function() {},
		methods: {
			moreTap() {
				this.$set(this.userInfo, 'isMore', !this.userInfo.isMore)
			},
			//个性签名取消
			handleInputClose() {
				this.$refs.inputDialog.close()
				this.isShowSignature = false;
			},
			//个性签名保存
			handleInputConfirm() {
				const api = this.fieldStr == 'signature' ? editSignatureApi({signature: this.signature}) : editSchoolApi({school: this.school});
				api.then(res => {
					uni.showToast({
						title: res.data,
						icon: 'none'
					})
					this.getMyHome();
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
				});
				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialog.close()
				this.isShowSignature = false;
			},
			//编辑个性签名
			onEdit(str) {
				if (this.userInfo.id == this.uid) {
					this.fieldStr = str;
					this.isShowSignature = true;
					this.signature = this.userInfo.signature;
					this.$refs.inputDialog.open();
				}

			},
			//回退页面之后重新加载页面
			reFresh() {
				this.loading = false;
				this.loaded = false;
				this.where = {
					page: 1,
					limit: 10
				}
				this.list = []
				// if (this.id) {
				// 	this.getUserHome(this.id);
				// 	this.authorNoteList();
				// } else {
					this.getMyHome();
					this.myNoteList();
				// }
			},
			//获取我的用户信息
			getMyHome() {
				myHomeApi().then(res => {
					console.log(res.data)
					this.userInfo = res.data;
					this.signature = this.userInfo.signature
					this.school = this.userInfo.school
					this.isMore = false;
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
				});
			},
			/**
			 * 去订单详情
			 */
			goOrderDetails: function(item, status) {
				if (!item.orderNo) return this.$util.Tips({
					title: '缺少订单号无法查看订单详情'
				});
				//虚拟商品
				if (item.secondType === this.ProductTypeEnum.CloudDrive || item.secondType === this.ProductTypeEnum
					.CardPassword) {
					// #ifdef MP
					uni.navigateTo({
						url: '/pages/goods/virtual_order_details/index?orderNo=' + item.orderNo
					})
					// #endif
					// #ifndef MP
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/goods/virtual_order_details/index?orderNo=' + item.orderNo
					})
					// #endif
				} else {
					// #ifdef MP
					uni.navigateTo({
						url: '/pages/goods/order_details/index?orderNo=' + item.orderNo + '&orderType=secondHand'
					})
					// #endif
					// #ifndef MP
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/goods/order_details/index?orderNo=' + item.orderNo + "'&orderType=secondHand'
					})
					// #endif
				}
			
			},
			//逛逛用户主页
			getUserHome(id) {
				userHomeApi(id).then(res => {
					this.userInfo = res.data
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
				});
			},
			// 关注作者
			followAuthor: function() {
				if (this.isLogin) {
					if (this.userInfo.isLogoff) return;
					discoverFollowAuthor(this.id).then(() => {
						this.$set(this.userInfo, 'isConcerned', !this.userInfo.isConcerned);
					});
				} else {
					toLogin();
				}
			},
			changeTab(tab) {
				this.tab = tab
				this.where.page = 1
				this.loaded = this.loading = false
				this.list = []
				if (tab === 0) {
					this.manage = 1;
					this.myNoteList();
				} else if (tab === 1) {
					this.manage = 0;
					this.myLikeList();
				} else if (tab === 2) {
					this.manage = 0;
					this.myFollowList()
				} else {
					this.manage = 0;
					this.myOrderList()
				}
			},
			// 获取我购买的作品
			myOrderList: function() {
				let that = this;
				if (that.loaded || that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				that.where.status = -1;
				secondHandOrderList(that.where).then(res => {
					let list = res.data.list;
					let goods = that.$util.SplitArray(list, that.list);
					that.loaded = list.length < that.where.limit;
					that.loading = false;
					that.loadTitle = that.loaded ? '到底了' : '加载更多';
					that.$set(that, 'list', goods);
					that.$set(that.where, 'page', that.where.page + 1);
				}).catch(err => {
					that.loading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},
			// 获取我的收藏作品
			myFollowList: function() {
				let that = this;
				if (that.loaded || that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				secondHandFollowListApi(that.where).then(res => {
					let list = res.data.list;
					let goods = that.$util.SplitArray(list, that.list);
					that.loaded = list.length < that.where.limit;
					that.loading = false;
					that.loadTitle = that.loaded ? '到底了' : '加载更多';
					that.$set(that, 'list', goods);
					that.$set(that.where, 'page', that.where.page + 1);
				}).catch(err => {
					that.loading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},
			// 获取我的点赞作品
			myLikeList: function() {
				let that = this;
				if (that.loaded || that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				secondHandListApi(that.where).then(res => {
					let list = res.data.list;
					let goods = that.$util.SplitArray(list, that.list);
					that.loaded = list.length < that.where.limit;
					that.loading = false;
					that.loadTitle = that.loaded ? '到底了' : '加载更多';
					that.$set(that, 'list', goods);
					that.$set(that.where, 'page', that.where.page + 1);
				}).catch(err => {
					that.loading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},
			// 获取我的的作品 
			myNoteList: function() {
				let that = this;
				if (that.loaded || that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				mySecondHandListApi(that.where).then(res => {
					let list = res.data.list;
					let goods = that.$util.SplitArray(list, that.list);
					that.loaded = list.length < that.where.limit;
					that.loading = false;
					that.loadTitle = that.loaded ? '到底了' : '加载更多';
					that.$set(that, 'list', goods);
					that.$set(that.where, 'page', that.where.page + 1);
				}).catch(err => {
					that.loading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},
			// 作者的作品
			authorNoteList: function() {
				let that = this;
				if (that.loaded || that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				this.where.authorId = this.id
				authorNoteApi(this.where.authorId, that.where).then(res => {
					let list = res.data.list;
					let goods = that.$util.SplitArray(list, that.list);
					that.loaded = list.length < that.where.limit;
					that.loading = false;
					that.loadTitle = that.loaded ? '到底了' : '加载更多';
					that.$set(that, 'list', goods);
					that.$set(that.where, 'page', that.where.page + 1);
				}).catch(err => {
					that.loading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},
			/**
			 * 取消订单
			 *
			 */
			cancelOrder: function(index, orderNo) {
				let that = this;
				if (!orderNo) return that.$util.Tips({
					title: '缺少订单号无法取消订单'
				});
				uni.showModal({
					content: '确定取消该订单',
					cancelText: "取消",
					confirmText: "确定",
					showCancel: true,
					confirmColor: '#f55850',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '正在取消中'
							});
							secondHandCancel(orderNo).then(res => {
								uni.hideLoading();
								return that.$util.Tips({
									title: '取消成功',
									icon: 'success'
								}, function() {
									that.getAllOrder();
								});
							}).catch(err => {
								return that.$util.Tips({
									title: err
								});
							});
						} else {
			
						}
					},
				})
			},
			/**
			 * 打开支付组件
			 *
			 */
			goPay: Debounce(function(item) {
				uni.showLoading({
					title: '加载中...'
				});
				// 其他商品走正常流程，去支付收银台页面
				this.getToPayment('', item, 'secondHand')
			}),
		},
		onReachBottom() {
			// if (this.id) {
			// 	this.authorNoteList();
			// } else {
				if (this.tab === 0) {
					this.myNoteList();
				} else {
					this.myLikeList();
				}
			// }
		},
		onPullDownRefresh() {},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		}
	}
</script>

<style lang="scss" scoped>
	.close-btn {
		@include coupons_border_color(theme);
	}

	.tui-modal-custom {
		width: 600rpx;
		position: relative;
		box-sizing: border-box;
		padding: 40rpx;
		border-radius: 16px;
		background-color: #fff;
		z-index: 9999;

		.h-342 {
			min-height: 268rpx;
			max-height: 268rpx;
			;
			overflow-y: scroll;
		}
	}

	.signature {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		width: 88%;
	}

	.goods-wrap {
		padding-top: 24rpx;
	}

	.more {
		font-weight: 600;
		margin-left: 8rpx;
	}

	.container {
		background: #ffffff;
		min-height: 100vh;
	}

	.header-bg {
		position: absolute;
		width: 100%;
		height: 650rpx;
		top: 0;
		/* #ifdef MP || APP-PLUS */
		z-index: -1;
		/* #endif */
		/* #ifdef H5 */
		z-index: 0;
		/* #endif */
		z-index: 0;
		filter: blur(0);
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			filter: blur(16rpx);
			transform: scale(1.5);
		}

		.header-bg-mc {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 39%, rgba(0, 0, 0, 0.7) 100%);
		}
	}

	.header {
		width: 750rpx;
		padding: 20rpx 0 0;
		box-sizing: border-box;
		background: linear-gradient(360deg, #72798E 0%, #384857 99%);
		opacity: 1;

		.tab_count {
			text-align: center;
			background: #ffffff;
			padding: 30rpx 0 15rpx 0;
			border-radius: 12px 12px 0 0;

			text {
				font-size: 28rpx;
				color: #999999;
				margin: 0 30rpx;
				position: relative;
				padding-bottom: 14rpx;

				&.on {
					font-size: 32rpx;
					color: #282828;
					font-weight: bold;

					&::after {
						content: "";
						width: 80%;
						height: 5rpx;
						@include main_bg_color(theme);
						position: absolute;
						bottom: 0;
						left: 12rpx;
					}

					.underline {
						opacity: 1;
					}
				}
			}
		}

		.user_wrapper {
			align-items: center;
			justify-content: space-between;
			padding: 0 34rpx;
			position: relative;

			.level_icon {
				position: absolute;
				width: 38rpx;
				height: 38rpx;
				margin: 4rpx 0 0 6rpx;
				border: none;
				z-index: 11;
				bottom: 2rpx;
				left: 124rpx;
			}

			.image,
			uni-image,
			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 100%;
				border: 4rpx solid #ffffff;
			}

			.user_text {
				margin-left: 30rpx;
				color: #FFFFFF;

				.name {
					font-size: 34rpx;
					font-weight: bold;
					align-items: center;
				}

				.user_id {
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					max-width: 300rpx;
					font-size: 24rpx;
				}
			}
		}

		.plant_info {
			position: relative;
			padding: 0 34rpx;
			margin-top: 30rpx;
			justify-content: space-between;
			color: #ffffff;
			font-size: 24rpx;

			.count_wrapper {
				color: #FFFFFF;
				font-size: 24rpx;

				.item {
					text-align: center;
					margin-right: 60rpx;

					&:last-child {
						margin-right: 0;
					}

					text {
						font-size: 30rpx;
						margin-top: 10rpx;
					}
				}
			}
		}

		.iconfont {
			font-size: 24rpx;
			margin-right: 12rpx;
		}

		.follow_btn {
			color: #ffffff;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 146rpx;
			height: 62rpx;
			@include linear-gradient(theme);
			border-radius: 33rpx;

			.icon-fabu {
				font-size: 24rpx;
			}

			&.focused {
				background: transparent;
				color: #FFFFFF;
				border: 1px solid #FFFFFF;
			}
		}
	}

	.main {
		background: #ffffff;
		position: relative;
	}

	.goods {
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: space-between;
		// width: 750rpx;
		padding: 0 24rpx;
	}

	.empty {
		margin: 130rpx 0 150rpx;
		text-align: center;

		image,
		uni-image {
			display: inline-block;
			width: 414rpx;
			height: 305rpx;
		}

		text {
			display: block;
			color: #999999;
			font-size: 26rpx;
		}
	}

	.end {
		margin-top: 50rpx 0;
		text-align: center;

		text {
			color: #999999;
			font-size: 22rpx;
			position: relative;

			&.loaded {

				&::before,
				&::after {
					content: "";
					display: inline-block;
					width: 22rpx;
					height: 1rpx;
					background: #999999;
					position: absolute;
					top: 18rpx;
					opacity: .5;
				}

				&::before {
					left: -30rpx;
				}

				&::after {
					right: -30rpx;
				}
			}
		}
	}
	
	.my-order .list {
		width: 690rpx;
		margin: 0 auto;
	}
	
	.my-order .list .item {
		background-color: #fff;
		border-radius: 14rpx;
		margin-bottom: 14rpx;
	}
	
	.my-order .list .item .title {
		height: 84rpx;
		padding: 0 24rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
	}
	
	.my-order .list .item .title .sign {
		font-size: 24rpx;
		padding: 0 13rpx;
		height: 36rpx;
		margin-right: 15rpx;
		border-radius: 18rpx;
		@include coupons_border_color(theme);
		@include main_color(theme);
	}
	
	.my-order .list .item .item-info {
		padding: 0 30rpx;
		margin-top: 22rpx;
	}
	
	.my-order .list .item .item-info .pictrue {
		width: 120rpx;
		height: 120rpx;
	}
	
	.my-order .list .item .item-info .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 14rpx;
		overflow: hidden;
	}
	
	.my-order .list .item .item-info {
		.nameBox {
			position: relative;
			height: 120rpx;
		}
	
		.sku {
			font-size: 20rpx;
			position: absolute;
			bottom: 4rpx;
			width: 420rpx;
		}
	
		.text {
			width: 496rpx;
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.my-order .list .item .item-info .text .name {
		width: 326rpx;
		color: #282828;
	}
	
	.my-order .list .item .item-info .text .money {
		text-align: right;
	}
	
	.font_color {
		@include main_color(theme);
	}
	
	.my-order .list .item .totalPrice {
		font-size: 26rpx;
		color: #282828;
		text-align: right;
		margin: 27rpx 0 0 30rpx;
		padding: 0 30rpx 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}
	
	.my-order .list .item .totalPrice .money {
		font-size: 28rpx;
		font-weight: bold;
		@include price_color(theme);
	}
	
	.my-order .list .item .bottom {
		height: 107rpx;
		padding: 0 30rpx;
	}
	
	.my-order .list .item .bottom .bnt {
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		border-radius: 50rpx;
		font-size: 27rpx;
	}
	
	.my-order .list .item .bottom .bnt.cancelBnt {
		border: 1rpx solid #ddd;
		color: #aaa;
	}
	
	.my-order .list .item .bottom .bnt~.bnt {
		margin-left: 17rpx;
	}
	
	
	
	.my-order {
		.header {
			height: 250rpx;
			padding: 0 30rpx;
		}
	}
	
	.bg_color {
		@include main_bg_color(theme);
	}
	
	.my-order .header .picTxt {
		height: 190rpx;
	}
	
	.my-order .header .picTxt .text {
		color: rgba(255, 255, 255, 0.8);
		font-size: 26rpx;
		font-family: 'Guildford Pro';
	}
	
	.my-order .header .picTxt .text .name {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 20rpx;
	}
	
	.my-order .header .picTxt .pictrue {
		width: 120rpx;
		height: 120rpx;
	}
	
	.my-order .header .picTxt .pictrue image {
		width: 100%;
		height: 100%;
	}
</style>