NurseStationApp/pages/CommodityOrder/CommodityOrder.vue

<template>
	<view class="app">
		<view class="inputs">
			<i class="icon"></i>
			<input v-model="goodsName" type="text" name="" id="" class="input" placeholder="请输入商品名称">
		</view>
		<view class="Apayment" v-for='(item,index) in orderlist' :key="index">
			<view class="names">店铺名称
				<image class="picture" src="/static/pic.png" mode=""></image>
				<span v-if="item.orderStatus=='WAIT_PAY'">待付款</span>
				<span v-if="item.orderStatus=='WAIT_REFUND'">退款中</span>
				<span v-if="item.orderStatus=='CANCEL'">已取消</span>
				<span v-if="item.orderStatus=='WAIT_RECEIVED_GOODS'">待收货</span>
				<span v-if="item.orderStatus=='RECEIVED_GOODS'">已完成</span>
				<!-- <span v-if="item.orderStatus=='PAY'">待发货</span> -->
				<span v-if="item.orderStatus=='REFUNDED'">退款成功</span>
				<span v-if="item.orderStatus=='WAIT_RETURNED_GOODS'">待退货</span>
				<span v-if="item.orderStatus=='RETURNED_GOODS'">退款成功</span>
			</view>
			<view class="details" @tap='goorderdetails(item)'>
				<view class="detailslist">
					<image :src="baseurl+item.attributePitureUrl" mode=""></image>
					<view class="model">
						<view class="top">
							<span>{{item.goodsName}}</span>
							<span>￥{{item.goodsPrice}}</span>
						</view>
						<view class="bottom">
							<span class="box">型号：{{item.goodsAttributeName}}</span>
							<span class="box">×{{item.goodsCount}}</span>
						</view>
						<view class="refund">
							实付款：
							<text class="price">￥{{item.godTotalPrice}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="anniu">
				<view class="logistics" v-if="item.orderStatus=='WAIT_RECEIVED_GOODS'" @tap='gologistics(item)'>查看物流
				</view>
				<view class="logistics harvest" @tap='show=true' v-if="item.orderStatus=='WAIT_PAY'">
					去支付</view>
				<view class="logistics harvest" @tap='Receipt(item)' v-if="item.orderStatus=='WAIT_RECEIVED_GOODS'">
					确认收货</view>
			</view>
		</view>
		<!-- 弹框 -->
		<view class="frame">
			<u-popup v-model="show" mode="bottom" length="45%" border-radius="30">
				<view class="payment">
					<span>确认收到货了吗</span>
					<image src="../../static/gb.png" mode="" @tap="show = false"></image>
				</view>
				<view class="chat">
					<view class="image">
						<image :src="baseurl+img" mode=""></image>
						<view class="blackground">共1件</view>
					</view>
					<view class="word">为了保证你的售后权益，请收到商品确认无误后再确认收货</view>
				</view>
				<view class="submits">确定</view>
			</u-popup>
		</view>
	</view>

</template>

<script>
	import {
		ssgoodsOrder
	} from '@/api/CommodityOrder/index.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				title:'商品订单',//导航标题
				baseurl: '', //url
				orderlist: [], //商品订单list
				total: 0, //list长度
				show: false, //确认收获开关
				img: '', //确认收货页面图片
				patientId: '',
				orderStatus: '', //
				goodsOrderId: '', //
				pageSize: 10, //
				pageNum: 1, //
				goodsName: '',
			}
		},
		methods: {
			//物流页面
			gologistics(item) {
				uni.navigateTo({
					url: `/pages/logistics/logistics?item=${JSON.stringify(item)}`
				})
			},
			//订单详情页面
			goorderdetails(item) {
				uni.navigateTo({
					url: `/pages/orderDetails/orderDetails?goodsOrderId=${item.goodsOrderId}`
				})
			},
			//商品订单请求
			goodsOrderinfo() {
				ssgoodsOrder(this.patientId, this.orderStatus, this.goodsOrderId, this.pageSize, this.pageNum, this
					.goodsName).then(
					res => {
						this.orderlist = res.rows
						this.total = res.total
					})
			},
			//确认收货
			Receipt(item) {
				this.img = item.attributePitureUrl
				this.show = true
			},
		},
		watch: { //监听
			goodsName() {
				this.goodsOrderinfo()
			},
		},
		onReady() { //更改导航栏文字
			uni.setNavigationBarTitle({
				title: this.title,
			});
		},
		onLoad(options) { //开局调用
			console.log(options)
			if (options.orderStatus) {
				this.orderStatus = options.orderStatus
				if(options.orderStatus=='WAIT_PAY'){
					this.title='待付款'
				}else if(options.orderStatus=='WAIT_RECEIVED_GOODS'){
					this.title='待收货'
				}else if(options.orderStatus=='RECEIVED_GOODS'){
					this.title='已完成'
				}
			}
			let that = this
			uni.getStorage({
				key: 'patientId',
				success: function(res) {
					that.patientId = res.data
					that.goodsOrderinfo();
				}
			});
			this.baseurl = baseurl;
		},
		onReachBottom() { //下滑加载
			if (this.orderlist.length >= this.total) {} else {
				this.pageNum++;
				ssgoodsOrder(this.patientId, this.orderStatus, this.goodsOrderId, this.pageSize, this.pageNum, this
					.goodsName).then(
					res => {
						res.rows.forEach(e => {
							this.orderlist.push(e)
						})
						this.total = res.total
					})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.pageNum = 1;
			ssgoodsOrder(this.patientId, this.orderStatus, this.goodsOrderId, this.pageSize, this.pageNum, this.goodsName)
				.then(res => {
					this.orderlist = res.rows
					this.total = res.total
					console.log(this.orderlist)
				})
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	@import "./CommodityOrder.scss";
</style>