qd_81fang/pages/intergalShop/logs.vue

<template>
	<block>
		<scroll-view class="scrollView" :scroll-x="true" style="width: 100%">
			<view class="navs">
				<text :class="'nav ' + (nowIndex == index ? 'bold' : '')" @tap="navChange" :data-index="index"
					:data-id="item.id" v-for="(item, index) in navs" :key="index">
					{{ item.name }}
				</text>
				<text class="borderLine"
					:style="'width: ' + (width + 'rpx') + ';left: ' + (45 + nowIndex * 150 + 'rpx')"></text>
			</view>
		</scroll-view>
		<view class="content" v-if="list.length > 0">
			<view class="lists" @tap="toPage" :data-order_id="item.id"
				data-url="/pages/operate/order_detail/order_detail" :data-index="index" v-for="(item, index) in list"
				:key="index">
				<!-- <view class="iflexC">
			<text style="letter-spacing: 0px">订单编号：  {{item.order_no}}</text>
			<text class="lists-time">下单时间：  {{item.create_time}}</text>
			
		</view> -->

				<text class="lists-status" v-if="item.order_status == 0 && item.receive_type == 2">待发货</text>

				<text class="lists-status" v-if="item.order_status == 0 && item.receive_type == 1">待核销</text>

				<text class="lists-status" v-else-if="item.order_status == 1">审核通过</text>

				<text class="lists-status" v-else-if="item.order_status == 2">已退款</text>

				<text class="lists-status" v-else-if="item.order_status == 3">拒绝退款</text>

				<text class="lists-status" v-else-if="item.order_status == 4">已核销</text>

				<text class="lists-status" v-else-if="item.order_status == 5">已发货</text>

				<text class="lists-status" v-else-if="item.order_status == 6">已完成</text>

				<text class="lists-status" v-else-if="item.order_status == 7">退款待审</text>

				<view :class="'iflexC lists-content ' + (item.order_status == 6 ? 'borderNone' : '')">
					<image class="lists-img" :src="item.goods_pic" mode="aspectFill"></image>
					<text class="lists-title over_2">{{ item.goods_name }}</text>
					<!-- <view class="lists-num">
					<view class="lists-num1">数量： 1</view>

					<view class="goDetail"  catchtap="goMovie" wx:if="{{item.order_status== 6&&item.is_film==1}}">查看电影票</view>
					<view class="goDetail" wx:else>查看详情</view>
			</view> -->
					<text class="lists-money">
						价格：
						<text class="red" v-if="item.pay_money != '0.00'">￥{{ item.pay_money }}+</text>
						<text class="red">{{ item.integral }}</text>
						{{ unit }} {{ item.sku ? '(' + item.sku + ')' : '' }}
					</text>
					<text class="lists-time">下单时间：{{ item.create_time }}</text>
				</view>

				<!-- <view class="iflexC" style="border-bottom:1px solid #eee;" wx:if="{{item.deliver_no}}">
			<text class="lists-time1" style="padding-bottom:0">快递名称:{{item.send_comp}}</text>
			<text  class="lists-time1">物流单号:{{item.deliver_no}} </text>
		</view> -->

				<view class="iflex l-btns" style="flex-direction: row-reverse">
					<button class="lists-btn btn2" @tap.stop.prevent="hexiao" :data-index="index"
						v-if="(item.order_status == 3 && item.receive_type == 1 && !item.is_film == 1) || (item.order_status == 0 && item.receive_type == 1 && !item.is_film == 1)">
						核销码
					</button>

					<button class="lists-btn btn2" @tap.stop.prevent="getMovie" :data-id="id"
						v-if="item.order_status == 0 && item.is_film == 1">点击领取</button>

					<!-- <button class="lists-btn btn2" catchtap="confirm" data-order_id="{{item.id}}" wx:if="{{item.order_status==4}}">确认已核销</button> -->
					<button class="lists-btn btn2" @tap.stop.prevent="confirm" :data-order_id="item.id"
						v-if="item.order_status == 5">确认收货</button>

					<button class="lists-btn btn1" @tap.stop.prevent="refundConfirm" :data-id="item.id"
						:data-area_code="item.ssq_code" data-type="99" v-if="item.order_status == 0">
						申请退款
					</button>

					<button class="lists-btn btn2" v-if="item.receive_type == 2 && item.order_status == 5"
						:data-phone="item.receiver_mobile" :data-no="item.deliver_no" @tap.stop.prevent="lookOrder">
						查看物流
					</button>
				</view>
			</view>
		</view>
		
		
		
		<view  v-if="!list.length && loaded" style='color:#999;text-align:center;margin:150rpx 0;font-size:30rpx'>
					暂无数据
		</view>
		<!-- <msg status="2" v-if="list.length && loaded"></msg> -->

		<!-- 去掉跳转同城运营中心的tabbar -->
		<!-- <tabbar active='1'></tabbar> -->

		<!--        <view class="mask" v-if="flag">
            <view class="qrcode">
                <image mode="widthFix" :src="qr_img"></image>
                <view class="close" @tap="close">关闭</view>
                \
            </view>
        </view> -->
	</block>
</template>

<script>
	var app = getApp();

	export default {

		data() {
			return {
				list: [{
						create_time: "2022-03-26 15:45:59",
						deliver_no: "",
						goods_id: 1520,
						goods_name: "寒铁10件套美容工具IRON-0100 IRON-0100",
						goods_pic: "https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/2487/f04456f1d7360742a070f36b0901e0a7.png",
						id: 1182,
						integral: "0.00",
						is_deliver: 0,
						is_film: 0,
						order_no: "31038957705405027625933",
						order_status: 0,
						pay_money: "0.00",
						pay_time: "2022-03-26 15:45:59",
						receive_type: 2,
						receiver_mobile: "18779615160",
						send_comp: "",
						sku: "中号型",
						ssq_code: "360702",
					},
					{
						create_time: "2022-03-26 15:45:41",
						deliver_no: "",
						goods_id: 1520,
						goods_name: "寒铁10件套美容工具IRON-0100 IRON-0100",
						goods_pic: "https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/2487/f04456f1d7360742a070f36b0901e0a7.png",
						id: 1181,
						integral: "0.00",
						is_deliver: 0,
						is_film: 0,
						order_no: "31038957690909207348985",
						order_status: 0,
						pay_money: "0.00",
						pay_time: "2022-03-26 15:45:42",
						receive_type: 1,
						receiver_mobile: "18779615160",
						send_comp: "",
						sku: "中号型",
						ssq_code: "360702",
					}


				],
				page: 1,
				loaded: false,
				nowIndex: 0,
				width: 60,

				navs: [{
						id: 0,
						name: '全部'
					},
					{
						id: 2,
						name: '待发货'
					},
					{
						id: 3,
						name: '待收货'
					},
					{
						id: 5,
						name: '已完成'
					}
				],

				is_deliver: 4,
				unit: '积分',
				flag: false,
				qr_img: '',
				show: false,
				id: ''
			};
		},
		onLoad: function() {
			var that = this;
			that.getlist();
		},
		onPullDownRefresh: function() {
		
				this.list= [],
				this.page= 1,
				this.loaded= false
		
			this.getlist();
		},
		onReachBottom: function() {
			this.loaded || this.getlist();
		},
		methods: {
			lookOrder(e) {
				var phone = e.currentTarget.dataset.phone;
				var no = e.currentTarget.dataset.no;
				uni.navigateTo({
					url: `/pages/other/logistics/logistics?phone=${phone}&no=${no}`
				});
			},

	
			getMovie(e) {
				var id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: `/pages/movie/pages/receive/index?id=${id}&channel=integral`
				});
			},

			hexiao(e) {
				//点击核销弹出
				var index = e.currentTarget.dataset.index;
				var order_id = this.list[index].id;
				uni.navigateTo({
					url: '/pages/other/orderCode/orderCode?id=' + order_id + '&type=2'
				}); //   var that = this;
				//   wx.showLoading({
				//     title: '加载中',
				//   })
				//   a.get('regionintegral/qrcode',
				//   { uid: app.getCache('userinfo').uid, order_id: order_id},
				//   function (res) {
				//     if (res.code == 0) {
				//       that.setData({
				//         qr_img:res.info,
				//         flag:true
				//       })
				//       wx.hideLoading({
				//         complete: (res) => {},
				//       })
				//     }else{
				//       a.toast(res.msg)
				//     }
				//   }
				// )
			},

			close() {

					this.flag=false

			},

			confirm(e) {
				// 确认收货
				const that = this;
				const order_id = e.currentTarget.dataset.order_id;
				a.get(
					'regionintegral/confirm', {
						uid: app.globalData.getCache('userinfo').uid,
						order_id: order_id
					},
					function(res) {
						// const res1 = res ? JSON.parse(res.info) : ''
						console.log(res);

						if (res.code == 0) {
							a.toast(res.msg, 'none');
							setTimeout(function() {
								that.initData();
								that.getlist();
							}, 1000);
						} else {
							a.toast(res.msg, 'none');
						}
					}
				);
			},

			navChange(e) {
				if (this.nowIndex != e.currentTarget.dataset.index) {
		
						this.nowIndex=e.currentTarget.dataset.index,
			

					this.initData();
					this.getlist();
				}
			},

			initData() {
				this.page = 1
				this.loaded = false
				this.list = []
			},

			async getlist() {

				var that = this;
				var res = await this.$api.request('/order/getOrders', 'GET', {
					type: 1 ,
					page: this.page,
					pagesize: 10,
					state:this.navs[this.nowIndex].id
				});   

				console.log(res)
				if (res) {
					if (res.length > 0) {

						this.list = this.list.concat(res);

						this.page++;

					} else {
						this.loaded = true
						this.$api.msg('没有更多数据');
					}
				}
			},

			toPage(e) {
				let index = e.currentTarget.dataset.index;

				if (this.list[index].order_status == 6 && this.list[index].is_film == 1) {
					e.currentTarget.dataset.url = '/pages/movie/pages/myMovie/index';
				}

				app.globalData.toPage(e);
			}
		}
	};
</script>
<style>
	page {
		background: #f2f2f2;
		padding-bottom: 140rpx;
	}

	.scrollView {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}

	.navs {
		display: flex;
		width: 100%;
		position: relative;
		border-top: 1px solid #e4e4e4;
		background: white;
	}

	.lists-time1 {
		font-size: 24rpx;
		color: #666;
		padding: 10rpx 0 16rpx;
	}

	.navs .nav {
		flex: 1;
		flex-shrink: 0;
		text-align: center;
		padding: 26rpx 0;
		font-size: 28rpx;
		color: #333;
	}

	.borderNone {
		border-bottom: none !important;
	}

	.bold {
		font-weight: bold;
		color: #FB4C6F !important;
	}

	.borderLine {
		width: 60rpx;
		height: 4rpx;
		background: rgba(234, 63, 51, 1);
		opacity: 1;
		display: block;
		position: absolute;
		bottom: 0;
		transition: left 0.3s;
		opacity: 0;
	}

	.content {
		margin-top: 116rpx;
	}

	.lists {
		background: white;
		margin: 0 20rpx 20rpx;
		padding: 22rpx;
		border-radius: 15rpx;
		font-size: 28rpx;
		position: relative;
	}

	.lists-status {
		position: absolute;
		top: 22rpx;
		right: 22rpx;
		font-size: 26rpx;
		color: #8E8E8E;
	}

	.lists-content {
		padding: 0 0 0 156rpx;
		position: relative;
		min-height: 132rpx;
	}

	.lists-img {
		height: 132rpx;
		width: 132rpx;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 6rpx;
	}

	.lists-time {
		font-size: 22rpx;
		color: #666;
	}

	.lists-title {
		font-size: 32rpx;
		width: 410rpx;
		line-height: 1.2;
	}

	.lists-num {
		padding: 12rpx 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.lists-num1 {
		color: #666;
	}

	.goDetail {
		width: 150rpx;
		height: 65rpx;
		color: #f62e2e;
		border: 1px solid #f62e2e;
		border-radius: 40rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lists-money {
		font-size: 26rpx;
		padding: 6rpx 0 26rpx;
	}

	.lists-btn,
	.btn1 {
		position: relative;
		z-index: 1;
		width: 140rpx;
		height: 50rpx;
		line-height: 50rpx;
		opacity: 1;
		border-radius: 24rpx;
		margin: 12rpx 0 0 14rpx;
		border: none;
		font-size: 24rpx;
		font-weight: 400;
		padding: 0;
		background: #FB4C6F;
		color: white;
		/*  */
		overflow: inherit;
	}

	/* .lists-btn::before{
  position: absolute;
  content: '';
  height: 1rpx;
  width: 666rpx;
  background-color: RGBA(220, 220, 220, 0.6);
  display: block;
  top: -12rpx;
  z-index: 21;
  left: -360rpx;
} */
	.l-btns {
		border-top: 1rpx solid RGBA(220, 220, 220, 0.6);
		margin-top: 18rpx;
	}

	.btn1 {
		line-height: 46rpx;
		border: 1rpx solid #999999;
		color: #333;
		background: white;
	}

	/* .btn1::after{
  border: none
} */

	.integral {
		background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
		font-family: 微软雅黑;
		margin: 0 auto 0;
		font-size: 30rpx;
		color: #333;
		border-bottom: 1rpx solid #e5e5e5;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.integral-left {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.integral-left1 {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.integral-left image {
		width: 180rpx;
		height: 120rpx;
		margin-right: 30rpx;
	}

	.integral-left view:nth-child(1) {
		color: #333;
	}

	.integral-left view:nth-child(2) {
		margin-top: 5rpx;
		color: #999;
		font-size: 25rpx;
	}

	.integral-right {
		font-weight: bold;
		font-size: 40rpx;
	}

	.integral-right1 {
		font-weight: 100;
		font-size: 26rpx;
		margin-left: 5rpx;
	}

	.vice {
		color: #999;
		font-size: 25rpx;
	}

	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.qrcode {
		width: 80%;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.close {
		margin: 30rpx auto;
		width: 200rpx;
		height: 70rpx;
		background: #fff;
		border-radius: 20rpx;
		text-align: center;
		line-height: 70rpx;
	}

	.qrcode image {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
	}

	.over_2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

	}

	.iflex {
		display: flex;
	}

	.iflexC {
		display: flex;
		flex-direction: column
	}
</style>