weapp-v1/pages/mygift/mygift.vue

<template>
	<view class="recordGift">
		<view class="nav">
			<view
				class="item"
				:class="!navIndex ? 'active' : ''"
				@click="navIndex = 0"
			>
				我的礼品（{{ total[0] }}）
			</view>
			<view
				class="item"
				:class="navIndex ? 'active' : ''"
				@click="navIndex = 1"
			>
				下级礼品（{{ total[1] }}）
			</view>
		</view>
		<template v-if="!navIndex">
			<scroll-view class="list" scroll-y="true">
				<template v-if="recordList.length">
					<view
						v-for="(item, i) in recordList"
						:key="i"
						class="item"
						:class="item.type ? 'voided' : ''"
					>
						<view class="header">
							<view class="time">{{ item.timestamp | dateFormatter('yyyy-MM-dd hh:mm:ss') }}</view>
							<view class="money">-{{ item.cost }}奖学金</view>
						</view>
						<view class="body">
							<view 
							class="avatar"
							:style="{ backgroundImage: `url(${item.gift_info.imgurl})` }">
							</view>
							<view class="info">
								<view class="name">{{ item.name }}</view>
								<view class="num">X{{ item.num }}</view>
							</view>
							<view class="voidBtn" v-if="!item.type && navIndex === 0" @click="publishDestoryGiftOrder(item)">取消兑换</view>
							<!-- <view class="delBtn" @click="delGiftOrder(item)">删除</view>
							<view class="voidBtn" @click="editGiftOrder(item)">修改</view> -->
							<!-- <view class="voidBtn" v-if="!item.type" @click="publishDestoryGiftOrder(item)">作废</view> -->
						</view>
					</view>
				</template>
				<template v-else>
					<view class="noTip">暂无兑换记录</view>
				</template>
			</scroll-view>
		</template>
		<template v-else>
			<scroll-view class="childList" scroll-y="true" @scrolltolower="toMoreChild">
				<template v-if="recordList.length > 0">
					<view
						v-for="item in recordList"
						:key="item.uid"
						class="childItem"
					>
						<view
							class="header"
							:class="openId === item.uid ? 'open' : ''"
							@click="toggleChildList(item.uid)"
						>
							<text>{{ item.get_user.nickname }}</text>
						</view>
						<view v-if="openId === item.uid" class="body">
							<view
								v-for="(btem, bi) in item.get_order"
								:key="bi"
								class="bodyItem"
							>
								<view class="name">{{ btem.name }}L</view>
								<view class="num">*{{ btem.num }}</view>
							</view>
						</view>
					</view>
					<view v-if="!recordIsMore" class="noTip">暂无更多</view>
				</template>
				<template v-else>
					<view class="noTip">暂无兑换记录</view>
				</template>
			</scroll-view>
		</template>
		<view class="showTotal" v-if="fillOut">
			<view class="show">
				<view class="show-top">
					<text>奖学金：</text>
					<text style="color: #EA4A41;">{{list.total}}</text>
				</view>
				<view class="show-middle">
					<text>数量：</text>
					<view style="width: 180rpx;"><custom-counter :count-num.sync="num"></custom-counter></view>
				</view>
				<view class="show-bottom">
					<view class="goon" @click="fillOut=false">
						取消
					</view>
					<view class="check"  @click="check">
						保存
					</view>
				</view>
			</view>
			<view class="over"></view>
		</view>
	</view>
</template>

<script>
	import { api_getExchangeRecord, api_getTeamRecord, notGiftOrder } from '../../api.js'
	import customCounter from '../detail/components/count2.vue'
	export default {
		components: {
			customCounter
		},
		data() {
			return {
				fillOut:false,
				navIndex: 0,
				recordList: [
					// {
					// 	id:1,
					// 	timestamp:'2020-12-13 22:45:23',	
					// 	cost:'200',
					// 	name:'秋衣秋裤女XXXL',
					// 	num:2,
					// 	total:1050
					// },
					// {
					// 	id:2,
					// 	timestamp:'2020-12-13 22:45:23',	
					// 	cost:'200',
					// 	name:'秋衣秋裤女XL',
					// 	num:4,
					// 	total:1500
					// },{
					// 	id:3,
					// 	timestamp:'2020-12-13 22:45:23',	
					// 	cost:'200',
					// 	name:'秋衣秋裤男L',
					// 	num:1,
					// 	total:1500
					// }
				],
				recordIsMore: true,
				openId: '',
				childPage: 1,
				total: [0, 0],
				num:'',
				list:{
					total:'',
					num:''
				},
				price:''
			}
		},
		watch: {
			navIndex(a) {
				this.openId = ''
				this.childPage = 1
				this.recordIsMore = true
				this.recordList = []
				a ? this.getChildRecord() : this.getMyRecord()
			},
			num(val){
				this.list.total=val * this.price
			}
		},
		onShow() {
			this.getTotal()
			this.getMyRecord()
		},
		
		methods: {
			//修改数量
			check(){},
			getTotal() {
				let myTotal = new Promise(resolve => this.$ajax.get(api_getExchangeRecord).then(([ , { data: res}]) => {
					if(res.code === 200) {
						resolve(res.data.total)
					}
				}))
				let childTotal = new Promise(resolve => this.$ajax.get(`${api_getTeamRecord}?page_index=1`).then(([ , { data: res}]) => {
					if(res.code === 200) {
						resolve(res.data.total)
					}
				}))
				Promise.all([myTotal, childTotal]).then(res => {
					this.total = res
				})
			},
			// 客户加载更多
			toMoreChild() {
				if(!this.recordIsMore) return false
				this.childPage += 1
				this.getChildRecord()
			},
			// 展开
			toggleChildList(uid) {
				this.openId = this.openId === uid ? '' : uid
			},
			//修改
			editGiftOrder(item){
				getApp().globalData.detail = item;
				uni.navigateTo({
					url:'../detail/detail?type=1'
				})
				// this.fillOut=true
				// this.num=item.num
				// this.price = item.total / item.num
				// this.list.total=this.price * this.num
			},
			publishDestoryGiftOrder(data) {
				const _this = this
				uni.showModal({
					content: "确认取消该兑换订单",
					success(res) {
						if(res.confirm) {
							uni.showLoading()
							_this.$ajax.get(`${notGiftOrder}?gift_id=${data.id}`).then(([ , { data: res}]) => {
								uni.hideLoading()
								if(res.code === 200) {
									uni.showModal({
										content: "兑换订单取消成功",
										showCancel: false,
										success(res) {
											if(res.confirm) {
												_this.getMyRecord()
												_this.$store.dispatch('onLaunch')
											}
										}
									})
								} else {
									uni.showModal({
										content: res.msg || '取消兑换订单失败',
										showCancel: false
									})
								}
							}).catch(() => {
								uni.hideLoading()
								uni.showModal({
									content:"取消兑换订单失败",
									showCancel: false
								})
							})
						}
					}
				})
			},
			//删除
			delGiftOrder(data) {
				const _this = this
				uni.showModal({
					content: "确认删除该兑换订单吗？",
					success(res) {
						if(res.confirm) {
							uni.showLoading()
							_this.$ajax.get(`${destoryGiftOrder}?id=${data.id}`).then(([ , { data: res}]) => {
								uni.hideLoading()
								if(res.code === 200) {
									uni.showModal({
										content: "兑换订单删除成功",
										showCancel: false,
										success(res) {
											if(res.confirm) {
												_this.getRecordList()
												_this.$store.dispatch('onLaunch')
												uni.navigateTo({
													url:'../exchange/exchange'
												})
											}
										}
									})
								} else {
									uni.showModal({
										content: res.msg || '删除兑换订单失败',
										showCancel: false
									})
								}
							}).catch(() => {
								uni.hideLoading() 
								uni.showModal({
									content:"删除兑换订单失败",
									showCancel: false
								})
							})
						}
					}
				})
			},
			// 我的兑换记录
			getMyRecord() {
				uni.showLoading()
				this.$ajax.get(api_getExchangeRecord).then(([, { data: res }]) => {
					uni.hideLoading()
					if(res.code === 200) {
						this.recordList = res.data.list
					} else {
						uni.showModal({
							content: res.msg || "获取兑换记录失败",
							showCancel: false
						})
					}		
				}).catch(() => {
					uni.hideLoading()
					uni.showModal({
						content:"获取兑换记录失败",
						showCancel: false
					})
				})
			},
			// 下级兑换记录
			getChildRecord() {
				uni.showLoading()
				this.$ajax.get(`${api_getTeamRecord}?page_index=${this.childPage}`).then(([, { data: res }]) => {
					uni.hideLoading()
					if(res.code === 200) {
						this.recordList = res.data.list
						this.recordIsMore = res.data.list.length < 20 ? false : true 
					} else {
						uni.showModal({
							content: res.msg || "获取下级客户记录失败",
							showCancel: false
						})
					}
				}).catch(() => {
					uni.hideLoading()
					uni.showModal({
						content:"获取下级客户记录失败",
						showCancel: false
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.showTotal{
		.show{
			width: 620rpx;
			height: 400rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 26rpx;
			position: fixed;
			left: 0;
			right: 0;
			top:280rpx;
			margin: auto;
			z-index: 10000;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			&-top{
				margin-top: 30rpx;
				font-size: 36rpx;
				color: #333;
				font-weight: bold;
			}
			&-middle{
				display: flex;
				font-size: 36rpx;
				color: #333;
				font-weight: bold;
			}
			&-bottom{
				display: flex;
				justify-content: center;
				margin-top: 72rpx;
				.goon{
					width: 200rpx;
					line-height: 66rpx;
					color: #FB231F;
					border-radius: 44rpx;
					border: 2rpx #FB231F solid;
					background-color: #FFF4F3;
					text-align: center;
				}
				.check{
					width: 200rpx;
					color: #fff;
					line-height: 66rpx;
					margin-left: 40rpx;
					border-radius: 44rpx;
					background: linear-gradient(93deg, #F97C55 0%, #F44545 100%);
					text-align: center;
				}
			}
			// &-image{
			// 	width: 620rpx;
			// 	position: relative;
			// }
			// &-button{
			// 	width: 400rpx;
			// 	line-height: 96rpx;
			// 	text-align: center;
			// 	color: #fff;
			// 	font-size: 32rpx;
			// 	border-radius: 56rpx;
			// 	background: linear-gradient(90deg, #F97C55 0%, #F44545 100%);
			// 	position: absolute;
			// 	bottom: -40rpx;
			// 	left: 110rpx;
			// }
		}
		.over{
			width: 100%;
			height: 100%;
			background-color: #000;
			opacity: 0.6;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
		}
		
		.button{
			width: 400rpx;
			height: 96rpx;
			background: linear-gradient(90deg, #F97C55 0%, #F44545 100%);
		}
	}
	page {
		height: 100%;
		width: 100%;
		.recordGift {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.nav {
				width: 100%;
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 60rpx;
				box-sizing: border-box;
				.item {
					color: #333333;
					font-size: 32rpx;
					line-height: 44rpx;
					position: relative;
					&.active {
						font-weight: bold !important;
						color: #EA4A41 !important;
						&::after {
							content: "";
							display: block;
							width: 30rpx;
							height: 4rpx;
							border-radius: 4rpx;
							background: linear-gradient(97deg, #F97C55 0%, #F44545 100%);
							position: absolute;
							left: 50%;
							bottom: -4rpx;
							transform: translateX(-50%);
						}
					}
				}
			}
			.list {
				width: 100%;
				padding: 30rpx;
				flex: 1;
				overflow: hidden;
				background-color: #F9F9FB;
				.item{
					width: 100%;
					padding: 30rpx;
					box-sizing: border-box;
					margin-bottom: 30rpx;
					border-radius: 24rpx;
					background-color: #FFFFFF;
					&.voided {
						position: relative;
						overflow: hidden;
						&::after {
							content: "";
							display: block;
							width: 168rpx;
							height: 168rpx;
							background-position: center;
							background-repeat: no-repeat;
							background-size: 100%;
							background-image: url('https://api.jiuweiyun.cn/public/uploads/weapp/icon/cancel.png');
							filter: grayscale(100%);
							position: absolute;
							right: 56rpx;
							bottom: -20rpx;
						}
					}
					.header {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 20rpx;
						.time {
							color: #999999;
							font-size: 28rpx;
							line-height: 40rpx;
						}
						.money {
							color: #EA4A41;
							font-size: 32rpx;
							line-height: 44rpx;
							font-weight: bold;
						}
					}
					.body {
						width: 100%;
						display: flex;
						align-items: stretch;
						justify-content: space-between;
						overflow: hidden;
						.avatar {
							width: 128rpx;
							height: 128rpx;
							border-radius: 8rpx;
							background-color: #FF7B39;
							background-position: center;
							background-repeat: no-repeat;
							background-size: 100%;
							margin-right: 20rpx;
						}
						.info {
							flex: 1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							.name {
								color: #333333;
								font-size: 32rpx;
								line-height: 44rpx;
								font-weight: bold;
							}
							.num {
								color: #999999;
								font-size: 28rpx;
								line-height: 40rpx;
							}
						}
						position: relative;
						.delBtn{
							width: 160rpx;
							height: 68rpx;
							border-radius: 68rpx;
							text-align: center;
							background-color: #f8f8f8;
							line-height: 68rpx;
							color: #999;
							font-size: 28rpx;
							position: absolute;
							bottom: 0;
							right: 180rpx;
						}
						.voidBtn{
							width: 160rpx;
							height: 68rpx;
							border-radius: 68rpx;
							text-align: center;
							background: linear-gradient(141deg, #F97C55 0%, #F44545 100%);
							line-height: 68rpx;
							color: #FFFFFF;
							font-size: 28rpx;
							position: absolute;
							bottom: 0;
							right: 0;
						}
					}
				}
			}
			.childList {
				width: 100%;
				padding: 30rpx;
				flex: 1;
				overflow: hidden;
				background-color: #F9F9FB;
				.childItem {
					width: 100%;
					border-radius: 20rpx;
					overflow: hidden;
					margin-bottom: 30rpx;
					.header {
						height: 104rpx;
						width: 100%;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #333333;
						font-size: 32rpx;
						background-color: #FFFFFF;
						&.open {
							&::after {
								transform: rotate(90deg) !important;
							}
						}
						&::after {
							content: "";
							display: block;
							width: 30rpx;
							height: 30rpx;
							background-position: center;
							background-size: 100%;
							background-repeat: no-repeat;
							background-image: url(../../static/icon/arrow.png);
						}
					}
					.body{
						width: 100%;
						padding: 30rpx;
						box-sizing: border-box;
						background-color: #FFFFFF;
						position: relative;
						&::before {
							content: "";
							display: block;
							width: calc(100% - 60rpx);
							height: 1px;
							background-color: #EEEEEE;
							position: absolute;
							top: 0;
							left: 50%;
							transform: translateX(-50%);
						}
						.bodyItem {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 30rpx;
							&:nth-last-of-type(1) {
								margin-bottom: 0;
							}
							.num {
								color: #EA4A41;
								font-size: 32rpx;
								line-height: 44rpx;
							}
							.name {
								flex: 1;
								margin-right: 20rpx;
								overflow: hidden;
								font-weight: bold;
								color: #333333;
								font-size: 32rpx;
								line-height: 44rpx;
								word-break: keep-all;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}
	}
	.noTip {
		width: 100%;
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #333333;
	}
</style>