cosmetics_shop_wxapp/pages/order/index.vue

<template>
	<view class="order">
		<!-- header -->
		<cu-custom isBack custom bgColor="bg-gradual-blue"><view slot="content">我的订单</view></cu-custom>
		<!-- section -->
		<view class="section"><cu-tab :value="defaultKey" @change="change" :list="list" /></view>
		<cu-scrollView @refresherpulling="refresherpulling" @scroll="scroll" :height="height">
			<view @click="flexible(index)" v-for="(item, index) in ListValue" :key="index" class="item padding bg-white margin-bottom-lg">
				<view class="flex justify-between padding-tb-sm">
					<view class="">订单号：{{ item.no }}</view>
					<view class="">{{ item.status_text }}</view>
				</view>
				<!-- 伸拉外壳 -->
				<view class="flexible" :class="{'flexible-open':item.flexible}">
					<!-- 商品列表 -->
					<view v-for="(it, ind) in item.details" :key="ind" class="padding-tb">
						<view  class="flex">
							<image @click.stop="detailFunc(it.commodity_id)" style="width: 160rpx;height: 160rpx;min-width: 160rpx;" mode="aspectFit" :src="it.show_image | lazyImage"></image>
							<view class="margin-left " style="flex: auto;">
								<view class="text-black cut">{{ it.name}}</view>
								<view class="flex align-center margin-top-sm justify-between">
									<view class="">x{{ it.count }}</view>
									<view>
										<view v-if="it.type == 1" class="price text-red"><cu-price :value="it.amount" /></view>
										<view v-else class="text-yellow">{{ it.point_amount }}积分</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="item.details.length>1" class="text-center">
				 {{item.flexible ? '收起' : '查看更多（'+item.details.length+'）'}}
				</view>
				<!-- 物流信息 -->
				<view class="padding margin-top-sm" style="border:1rpx dotted #aaa">
					<view class="text-black">{{item.name}} {{item.tel}}</view>
					<view class="text-grey">{{item.user_address}}</view>
				</view>
				<!-- 待支付定制 -->
				<view v-if="defaultKey == 1" class="flex justify-between margin-top">
					<view class="flex justify-end align-center">
						<view>
							合计：
							<text class="text-price"></text>
							<cu-price :value="item.total_amount" />
						</view>
						<view class="margin-left">
							<cu-price :value="item.total_point" />
							积分
						</view>
					</view>
					<button @click.stop="handler(item.id)" class="cu-btn bg-green">
						<text v-if="payloadding" class="cuIcon-loadding2 iconfont-spin"></text>
						支付
					</button>
				</view>
				<view v-else class="flex justify-end margin-top">
					<view>
						合计：
						<text class="text-price"></text>
						<cu-price :value="item.total_amount" />
					</view>
					<view class="margin-left">
						<cu-price :value="item.total_point" />
						积分
					</view>
				</view>
			</view>
			<!-- 状态管理 -->
			<view class="cu-load" :class="{ loading: currentPage <= totalPage, over: currentPage > totalPage }"></view>
		</cu-scrollView>
		<!-- 工具 -->
		<cu-modalB :show.sync="show" title="提示" content="确认支付订单？" cancelText="取消支付" confirmText="确认支付" @confirm="payItem" />
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import { CustomBarHeight, requestPayment } from '@/common/device/index.js';
import api from './api.js';
export default {
	computed: {
		...mapState(['openid', 'appId']),
		...mapState('requestList', ['ListValue', 'currentPage', 'totalPage']),
		height() {
			return `calc(100vh - 60rpx - ${CustomBarHeight}px)`;
		}
	},
	data() {
		return {
			defaultKey: 0,
			list: [
				{ id: '', label: '全部' },
				{ id: 0, label: '待支付' },
				{ id: 1, label: '待发货' },
				{ id: 2, label: '已发货' }
				// {id:5,label:"已完成"},
				// {id:6,label:"待评价"}
			],
			payloadding: false,
			id: '',
			show: false
		};
	},
	onLoad(options) {
		if(options.key || options.key==0) this.defaultKey =options.key;
	},
	async onShow() {
		await this.reset();
		await this.requestFunc({ url: '/customer/order/list/', data: { status: this.list[this.defaultKey]['id'] } });
	},
	methods: {
		...mapMutations('requestList', ['changeValue']),
		...mapActions('requestList', ['reset', 'requestFunc']),
		flexible(key){
			let ListValue=JSON.parse(JSON.stringify(this.ListValue));
			ListValue=ListValue.map((item,index)=>{
				item['flexible']=(index==key && !item['flexible']);
				return item;
			})
			this.changeValue(ListValue);
		},
		handler(id) {
			this.id = id;
			this.show = true;
		},
		detailFunc(id) {
			uni.navigateTo({
				url: `/pages/detail/index?id=${id}`
			});
		},
		async payItem() {
			try {
				if (this.payloadding) return false;
				this.payloadding = true;
				var result = await api.pay({ id: this.id, appid: this.appId, openid: this.openid });
				if (result.code != 0) return false;
				if (result.data === '') {
					this.refresherpulling();
					return false;
				}
				result = await requestPayment(result.data);
				if (result) {
					uni.showToast({
						title: '支付成功',
						icon: 'success',
						success: () => this.refresherpulling()
					});
				} else {
					uni.showToast({
						title: '取消支付',
						icon: 'error'
					});
				}
			} catch (err) {
				uni.showToast({
					title: '支付失败',
					icon: 'error'
				});
			} finally {
				this.payloadding = false;
			}
		},
		async change(index, item) {
			this.defaultKey = index;
			await this.reset();
			await this.requestFunc({ url: '/customer/order/list/', data: { status: this.list[this.defaultKey]['id'] } });
		},
		async refresherpulling() {
			await this.reset();
			await this.requestFunc({ url: '/customer/order/list/', data: { status: this.list[this.defaultKey]['id'] } });
		},
		// 上拉加载
		async scroll() {
			await this.requestFunc({ url: '/customer/order/list/', data: { status: this.list[this.defaultKey]['id'] } });
		}
	}
};
</script>

<style lang="scss" scoped>
.order {
	.item {
		> view:first-child {
			position: relative;
			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				border-bottom: 1rpx solid #f37b1d;
				transform: scale(1, 0.5);
				width: 100%;
			}
		}
		.cut{
			display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
			overflow: hidden;
		}
		.flexible{
			height: 220rpx;
			overflow: hidden;
			position: relative;
			transition: height .3s linear;
		}
		.flexible-open{
			height: auto;
		}
	}
}
</style>