CommunityApp/pagesM/pages/claim_goods.vue

<template>
	<view class="container">
		<view class="header-info" v-if="organizationInfo">
			<view style="display: flex;align-items: center;">
				<image :src="organizationInfo.organizeIcon" mode="aspectFit" style="background-color: #fff;border-radius: 50%;width: 80upx;height: 80upx;"></image>
				<view style="flex:1;margin-left: 30upx;">
					<view style="font-size: 30upx;color: #fff;">{{organizationInfo.organizeName}}</view>
					<view style="font-size: 20upx;color: #fff;margin-top: 10upx;">营业时间：{{organizationInfo.jobTime}}</view>
				</view>
				<view  @tap="makePhone" style="width: 152upx;height:56upx;border-radius: 25px;text-align: center;font-size: 24upx;color: #E42F2F;line-height: 56upx;background-color: #fff;">
					联系团长
				</view>
				
			</view>
			<view style="height: 2upx;background-color: #fff;margin: 20upx 0;"></view>
			<view style="color: #fff;font-size: 24upx;">
				{{organizationInfo.receiver.areaName}}{{organizationInfo.receiver.address}}
			</view>
		</view>
		<view style="display: flex;height: 110upx;align-items: center;">
			<view  @tap="requestData('SHIPPED')" :class="[{activity:param=='SHIPPED'},'nav']" >待取货</view>
			<view  @tap="requestData('COMPLETED')" :class="[{activity:param=='COMPLETED'},'nav']" >已取货</view>
		</view>
		<view v-if="emptyType==0" style="background-color: #fff;padding-top: 30upx;border-radius: 20upx;overflow: hidden;margin-bottom: 100upx;">
			<view style="margin:0 40upx;font-size: 28upx;font-weight: bold;height: 30upx;">取货码</view>
			<view v-for="(item,index) in dataList" :key="index" style="display: flex;padding: 30upx 0;margin:0 40upx;border-bottom: 2upx solid #F6F6F6;align-items: center;">
				<image :src="item.products[0].thumbnail" mode="aspectFit" style="width: 146upx;height: 114upx;margin-right: 20upx;"></image>
				<view>
					<view style="font-size: 48upx;font-weight: bold;">
						{{claimCode(item.sn)}}
					</view>
					<view style="font-size: 24upx;color: #999999;margin-top: 10upx;">{{item.products[0].name}}</view>
				</view>
			</view>
			
			<view 
			v-if="param==SHIPPED"
			@tap="onTapBtn"
			style="
			height: 88upx;
			background:linear-gradient(90deg,rgba(218,62,62,1) 0%,rgba(255,121,121,1) 100%);
			text-align: center;
			line-height: 88upx;
			font-size: 28upx;
			color: #fff;">
				一键取件
			</view>
		</view>
		<DtEmpty :type="emptyType" />
		<DtNoMore v-if="isNoMore" />
	</view>
</template>

<script>
	import DtEmpty from '../comps/dt_empty.vue'
	import DtNoMore from '../comps/dt_no_more.vue'
	export default {
		components: {
		  DtEmpty,
		  DtNoMore
		},
		data() {
			return {
				memberId:null,
				dataList:[],
				param:'SHIPPED',
				organizationInfo:null
			};
		},
		
		methods:{
			makePhone(){
				this.makePhoneCall(this.organizationInfo.phone);
			},
			onLoadPage(options) {
				wx.hideShareMenu();
			    this.memberId = this.$auth.getMemberId();
				this.getOrganizationInfo();
				this.requestData(this.param);
			},
			onTapBtn(){
				this.$dialog.confirm({
				  content: '确认收货吗？',
				  success: async (res) => {
				    if (res.confirm) {
				      this.receiveOrder()
				    }
				  }
				})
			},
			async receiveOrder() {
				let orderIds = [];
				this.dataList.map((item)=>{
					orderIds.push(item.sn)
				})
			  let resp = await this.$api.userAgentConfirmOrder({
			    orderIds: orderIds
			  });
			  if(resp){
				  this.$dialog.success('确认完成',()=>{
				  		requestData(this.param);
				  })
			  }
			  
			},
			claimCode(sn){
				return sn.substring(sn.length-6)
			},
			async getOrganizationInfo(){
				let resp = await this.$api.getOrganizationInfo({
				  memberId: this.memberId
				});
				this.organizationInfo = resp;
			},
			 async requestData(param){
				 this.isNoMore = false
				 this.pageIndex = 0
				 this.dataList.length = 0
				 this.param = param;
				 if(param=='SHIPPED'){
					 let resp = await this.$api.userAgentOrder({
					   _isShowLoading: true,
					   _isPull: this.isPull,
					   memberId: this.memberId,
					   pageNo: this.pageIndex,
					   pageSize: this.pageSize
					 });
					 let list = this.getDataList(resp)
					 this.dataList = this.dataList.concat(list)
				 }else{
					 let resp = await this.$api.userAgentAlreadyOrder({
					   _isShowLoading: true,
					   _isPull: this.isPull,
					   memberId: this.memberId,
					   pageNo: this.pageIndex,
					   pageSize: this.pageSize
					 });
					 let list = this.getDataList(resp)
					 this.dataList = this.dataList.concat(list)
				 }
				
			},
			
		},
		onReachBottom() {
		  this.onReachBottomPage()
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 20upx;
		background-color: $dt-bg-color-grey;
		min-height: 100vh;
		.header-info{
			background:linear-gradient(129deg,rgba(218,62,62,1) 0%,rgba(255,121,121,1) 100%);
			box-shadow:0px 0px 10upx rgba(0,0,0,0.02);
			border-radius:20upx;
			padding: 40upx 30upx;
			
		}
		.nav{
			margin-right: 50upx;
			font-size: 28upx;
			font-weight: bold;
			height: 50upx;
			line-height: 50upx;
			border-bottom: 4upx solid transparent;
		}
		.activity{
			border-bottom: 4upx solid #E42F2F;
		}
	}
	
</style>