hjt_erdao_WeChatApplet/pages/merchant/home/record.vue

<template>
	<view class="main main-bg">
		<view class="list" v-if="list.length> 0">
			<view class="items" v-for="(item, index) in list">
				<view class="data">
					<view class="name font-color3 font-thirty-two">{{ item.goodsName ? item.goodsName : '' }}</view>
					<view class="name font-color4 font-twenty-four">{{ item.orderTime }}</view>
				</view>
				<view class="user font-color3 font-twenty">使用者: {{ item.veteransName ? item.veteransName : '优待证' }}</view>
				<view class="data">
					<view class="yuan font-color3 font-thirty-two">原价: ￥{{ change(item.orderPriceOld) }}</view>
					<view class="name font-color5 font-thirty">惠军价: ￥{{ change(item.orderPriceVip) }}</view>
				</view>
				<view style="height: 30rpx;" class="item-bom-data font-twenty-four font-color6" v-if="!item.show"
					@click="handleShow(item.orderId, index, item.remark)">
					展开
					<u-icon style="transform:rotate(90deg);" name="arrow-right-double" color="#12C194" size="28">
					</u-icon>
				</view>
				<view class="item-bom-data font-twenty-four font-color6" v-if="item.show"
					@click="handleShow(item.orderId, index, item.remark)">
					收起
					<u-icon style="transform:rotate(-90deg);" name="arrow-right-double" color="#12C194" size="28">
					</u-icon>
				</view>
				<view v-if="item.show" style="margin-top: 60rpx;">
					<view v-if="item.list[0]">
						<view class="line between" v-for="(items, indexs) in item.list">
							<view class="font-twenty-four font-color3"> {{ items.shopsName }} </view>
							<view class="font-twenty-four font-color3"> {{ items.shopsNum }}个 </view>
							<view class="font-twenty-four font-color3"> {{ change(items.priceOld) }}元 </view>
							<view class="font-twenty-four font-color3"> {{ change(items.priceVip) }}元 </view>
						</view>
					</view>
					<view v-else>
						金额结算暂无明细
					</view>
					<view class="between">
						<view class="img-item" v-for="img in item.picUrlList">
							<image @tap="preAvatar(image(img))" class="img" :src="image(img)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list" v-else style="padding-top: 300rpx;">
			<u-empty mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import server from "@/api/index";
	import http from '@/common/http.js';
	export default {
		data() {
			return {
				list:[],
				userInfo:{}
			}
		},
		onLoad(e) {
			this.userInfo = uni.getStorageSync('userInfo');
			this.getIndexDetailsFn();
		},
		methods:{
			image(e) {
				return http.webUrl + e
			},
			handleShow(orderId, index, id) {
				this.list[index].show = !this.list[index].show
				if (this.list[index].show == true) {
					this.list[index].list = [];
					server.getDetailedList({orderId: orderId}).then(res => {
						this.list[index].list = res;
					})
				}
			},
			change(num){
				return parseFloat(num).toFixed(2)
			},
			// 预览图片
			preAvatar(url) {
				console.log(url)
				wx.previewImage({
					current: url, // 当前显示图片的 http 链接
					urls: [url] ,// 需要预览的图片 http 链接列表
				})
			},
			getIndexDetailsFn(){
				if(this.userInfo.type === '1'){
					server.getIndexDetails({shopsId: this.userInfo.nickName}).then(res =>{
						this.list = []
						let that = this;
						if(res){
							res.forEach(item => {
								that.list.push({
									...item,
									show: false,
									list: [
										{
											name: '商品',
											num: 5,
											hui: 399.00,
											yuan: 800.00
										},
										{
											name: '商品',
											num: 5,
											hui: 399.00,
											yuan: 800.00
										}
									]
								})
							})
						}
						
					})
				}else if(this.userInfo.type === '2' || this.userInfo.type === '3' ){
					server.getMyself({veteransId: this.userInfo.userId, remark: this.userInfo.type}).then(res =>{
						this.list = []
						if(res){
							this.list = res
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: auto;
		min-height: 100vh;
		padding: 30rpx;
		.list{
			width: 100%;
			height: auto;
			.items{
				width: 100%;
				height: auto;
				background: #FFFFFF;
				min-height: 277rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				position: relative;
				.data{
					display: flex;
					justify-content: space-between;
				}
				.user{
					height: 97rpx;
					line-height: 97rpx;
				}
				.name{
					font-weight: 600;
				}
				.item-bom-data{
					position: absolute;
					top: 217rpx;
					right: 30rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
				.line {
					// margin-left: 30rpx;
					// margin-right: 30rpx;
					border-top: 2rpx solid #C8CCDB;
					height: 93rpx;
					line-height: 93rpx;
					text-align: center;
				}
			}
		}
		.img-item{
			width: calc(33% - 15rpx);
			height: 170rpx;
			.img{
				width: 100%;
				height: 170rpx;
			}
		}
	}
</style>