fanxing-wap/components/goods/goods.vue

<template>
	<!-- 商品信息 -->
	<view class="goods-news flex" @click="toGoodDetail">
		<image :src="imgSrc" class="goods-img br16" width="200" height="200" mode="aspectFill"></image>
		<view class="news-dec flex fdc jcsb">
      <view>
				<text class="dec-text ellipsis-1">{{goodsName}}</text>
				<view class="dec-describe flex jcsb">
					<text class="goods-dec ellipsis-2">{{ goodsDec }}</text>
					<text v-if="status === 0 && ashStatus !== 1" :class="[ashStatus === 2? 'list-refund':'ash-refund']">{{ashStatus === 2?'退款中':ashStatus === 3?'退款失败':ashStatus===4?'退款成功':''}}</text>
					<text v-if="status === 1 && ashStatus !== 1" :class="[ashStatus === 2? 'detail-refund':'ash-derefund']" @click="toAudit">{{ashStatus === 2?'退款中':ashStatus === 3?'退款失败':ashStatus===4?'退款成功':''}}</text>
				</view>
			</view>
			<view class="dec-number flex jcsb aic">
				<text class="dec-money">￥{{ numFix(goodsMoney || 0) }}</text>
				<view v-if="goodsQuantity" class="dec-num flex fdc fs32 aife">
					<text>x{{ goodsQuantity }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { numFixtwo } from '@/utils/utils.js'
	export default {
		props: {
			id:[String,Number],
			imgSrc: {
				type: String,
				default: ''
			},
			goodsName: {
				type: String,
				default: ''
			},
			goodsDec:{
				type: String,
				default: ''
			},
			goodsMoney: {
				type: [String,Number],
				default: ''
			},
			goodsQuantity:{
				type:[String,Number],
				default: ''
			},
			status:{
				type: [String,Number],
				default: -1
			},
			ashStatus:{
				type: [String,Number],
				default: 1
			},
			statusText:{
				type:String,
				default:''
			},
			jump:{
				type: Boolean,
				default:false
			},
			refundId:{
				type: [String,Number],
				default: ''
			}
		},
		methods:{
			// 保留两位或保留整数
			numFix(num){
				return numFixtwo(num)
			},
			// 跳转到商品详情
			toGoodDetail(){
				if(!this.jump) return
				uni.navigateTo({
					url:'/pages/shop/detail?id='+this.id
				})
			},
			//跳转到退款详情
			toAudit(){
				uni.navigateTo({
					url: '/pages/afterSales/audit?id='+this.refundId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.goods-news{
	.goods-img{
	width: 200rpx;
	height: 200rpx;
	border-radius: 16rpx;
	// margin-right: 20rpx;
	background: #f5f5f5;
}
	.news-dec {
		width: calc(100% - 200rpx);
		margin-left: 20rpx;

		.dec-text {
      font-size: 32rpx;
			margin-bottom: 14rpx;
		}
    .dec-describe{
      color: #707476;
      font-size: 24rpx;
			// align-items: flex-end;
			// height: 72rpx;
			.goods-dec{
				height:100%;
				margin-right: 32rpx;
				flex-flow: 1;
			}
			.list-refund{
				margin-top: 36rpx;
				flex-shrink: 0;
				color: $color-orange;
			}
			.ash-refund{
				margin-top: 36rpx;
				color:$color-text-g;
				flex-shrink: 0;
			}
			.detail-refund{
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFE0D7;
				border-radius: 4rpx;
				border: 2rpx solid $color-orange;
				padding: 4rpx 10rpx;
				color: $color-orange;
				flex-shrink: 0;
				margin-top: 36rpx;
			}
			.ash-derefund{
				height:40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #fff;
				border-radius: 4rpx;
				border: 2rpx solid $color-text-g;
				padding: 4rpx 10rpx;
				color: $color-text-g;
				flex-shrink: 0;
				margin-top: 36rpx;
			}
    }

		.dec-number {
			.dec-money {
				font-size: 40rpx;
				color: $color-orange;
			}

			.dec-num {
				margin-left: 8rpx;
				color: $color-text-g;
			}
		}
	}
}

</style>