frontend-app/components/shop/you-item.vue

<template>
	<view class="shop-view" @click="onClick">
		<view class="shop-left-view">
			<image :src="obj.url"></image>
		</view>
		<view class="shop-right-view">
			<view class="right-top-view text-overflow1">
				<text class="text-32 text-bold text-zu text-overflow1">{{obj.title}}</text>
			</view>
			<view class="right-bottom-view">
				<view class="flex-c-lr" style="height:70rpx">
					<text class="text-24 text-fu">原价</text>
					<text class="text-24 text-fu text-d text-bold">￥{{obj.adPrice}}</text>
				</view>
				<view class="right-bottom-panel" style="height:70rpx">
					<MyBtn  @ok.stop="onClick" mh="36rpx" :text="`专区立省${Number(obj.adPrice) - Number(obj.price)}元`" br="8rpx" fz="16rpx" bg="linear-gradient( 270deg, #AF39C4 0%, #7732FF 100%)" wd="260rpx"></MyBtn>
					<text class="text-28 text-zi text-bold">到手
						<text class="text-36">￥{{obj.price}}</text>
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MyBtn from '@/components/common/my-btn.vue'
	export default {
		components:{MyBtn},
		props:{
			obj:{
				type:Object,
				default:()=>{}
			},
		},
		mounted(){
		},
		methods: {
			onClick(){
				this.$emit('ok',this.obj.id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-view{
		width:100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 12rpx;
		box-sizing: border-box;
		background-color: #fff;			
		border-radius: 12rpx;
		.shop-left-view{
			min-width:216rpx;
			min-height:216rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width:216rpx;
				height:216rpx;
			}
		}
		.shop-right-view{
			width:100%;
			display: flex;
			min-height:216rpx;
			margin-left:24rpx;
			flex-direction: column;
			justify-content: space-between;
			.right-top-view{
				width:100%;
				display: flex;
				
			}
			.right-bottom-view{
				width:100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-end;
				.right-bottom-panel{
					width:284rpx;
					height:104rpx;
					min-height:104rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					padding: 12rpx;
					box-sizing: border-box;
					background-color: #F0E7FE;
					border-radius: 8rpx;
				}
			}
		}
	}
	
</style>