activitys-uniapp/pages/mine/order/comps/card.vue

<template>
	<view>
		<navigator :url="'/pages/mine/order/detail?id='+item.id" hover-class="none" class="card" v-for="(item,index) in list" :key="index">
			<view class="top">
				<text>{{item.createTime}}</text>
				<text>{{item.goodsStatus}}</text>
			</view>

			<view class="content">
				<view class="">
					<image :src="item.goodsImgUrl" mode=""></image>
				</view>
				<view class="container">
					<view class="title">
						<text class="text-cut-1">{{item.goodsName}}</text>
					</view>

					<view class="data">
						<text>使用积分：{{item.usePoint}}</text>
						<text class="margin-left-30">现金支付：{{useCash(item)}}元</text>
					</view>
				</view>
			</view>
			<view class="bottom" style="justify-content: flex-end;">
				<view class=""  v-if="item.goodsStatus == '待收货' || item.goodsStatus == '已完成'">
					<u-button  @click="queryLogistic(item)" :custom-style="customStyle1" shape="circle" size="mini">查看物流
					</u-button>
				</view>
				<view class="">
					<u-button open-type="contact"   :custom-style="customStyle2" shape="circle" size="mini">咨询客服</u-button>
				</view>
				<view class=""  v-if="item.goodsStatus == '待收货'">
					<u-button @click="confirmReceipt(item)" :custom-style="customStyle3" shape="circle" size="mini">确认订单</u-button>
				</view>
				<view class="" v-else>
					<u-button @click="exchange"  :custom-style="customStyle3" shape="circle" size="mini">再次兑换</u-button>
				</view>
			</view>
		</navigator>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	export default {
		props: {
			list: Array
		},
		data() {
			return {
				customStyle1: {
					marginRight: '20rpx',
					color: '#353535',
					borderColor: '#999999'
				},
				customStyle2: {
					marginRight: '20rpx',
					color: '#353535',
					borderColor: '#999999'
				},
				customStyle3: {
					backgroundColor: "#E72226",
					color: '#fff'
				}
			}
		},
		computed:{
			useCash(){
				return data=>{
					if (data.cash==-1 || this.$isEmpty(data.cash)) {
						return 0
					}
					return data.cash
				}
			}
		},
		created() {
			this.customStyle3.backgroundColor = this.vuex_theme.bgColor
		},
		methods: {
			confirmReceipt(item){
				this.$emit("confirmReceipt",item.id)
			},
			exchange(){
				uni.switchTab({
					url:"/pages/shop/shop"
				})
			},
			queryLogistic(item) {
				uni.navigateTo({
					url: "/pages/mine/logistics/logistics?id=" + item.id,
					fail(err) {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.card {
		background-color: #FFFFFF;
		margin: 20rpx 0;
		padding: 20rpx 30rpx;

		.top {
			display: flex;
			justify-content: space-between;
			font-family: PingFang-SC-Medium;
			font-size: 24rpx;
			color: #999999;
		}

		.content {
			padding: 30rpx 0;
			display: flex;
			width: 100%;

			image {
				width: 130rpx;
				height: 130rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.container {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.title {
					font-weight: 800;
					color: #353535;
					font-family: PingFang-SC-Bold;
					font-size: 30rpx;
				}

				.data {
					color: #000000;
					font-weight: 300;
					font-size: 26rpx;
				}
			}
		}

		.bottom {
			padding-top: 20rpx;
			border-top: 1rpx solid #EEEEEE;
			width: 100%;
			display: flex;
			justify-content: flex-end;
		}
	}
</style>