medicine-xcx/components/receiving-item/receiving-item.vue

<template>
	<view class="receiving-item flex align-start m-b-20" :class="{ 'receiving-item--active': location.id === list.id }" @click="handleClick(list)">
		<view class="m-r-20"><image class="receiving-item-image" :src="list.shopPic" mode="aspectFill"></image></view>
		<view class="flex-1 overflow-hidden">
			<view class="m-b-30 font-28 text-black font-weight-bold text-ellipsis">{{list.shopName}}取货点</view>
			<view class="m-b-20 font-24 text-grey u-line-2">地址：{{list.address}}</view>
			<view class="flex align-start justify-between">
				<view class="flex align-center">
					<view class="m-r-10" @click="makePhone(list.phone)">
						<u-icon name="phone-fill" color="#01aeea" size="28"></u-icon>
						<text class="text-grey font-24">找店热线</text>
					</view>
					<view>
						<u-icon name="map" color="##707070" size="28" />
						<text class="text-grey font-24">距您{{list.distance>1?list.distance+'km':list.distance*100+'m'}}</text>
					</view>
				</view>
				<!-- <com-view class="receiving-item-btn flex align-center justify-center text-white font-24" >进店</com-view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import { IMG_URL } from '@/env.js'
export default {
	props: {
		active: {
			type: Boolean,
			default: false
		},
		list: {
			type: Object,
			default: () => {}
		},
		type: {
			type: String,
			default: ''
		},
	},
	data() {
		return {
			IMG_URL
		};
	},
	computed: {
		location () {
			return this.$store.state?.location || {}
		}
	},
	methods: {
		makePhone(phoneNumber) {
			uni.makePhoneCall({ phoneNumber })
		},
		handleClick (item) {
			let params = {
				name: item.shopName,
				id: item.id,
				shippingAddress: item.address,
				addressDetail: '',
				phone: item.phone,
				type: 'shop'
			}
			this.$store.commit('set_location', params)
			uni.navigateBack({
				delta: 1
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.receiving-item {
	padding: 16rpx 16rpx;
	background: #f5f5f5;
	border-radius: 16rpx;
	box-shadow: 0 6rpx 12rpx 0 rgba(0,0,0,0.16); 
	&--active {
		background: #e0ffff;
	}
	&-image {
		width: 230rpx;
		height: 230rpx;
		border-radius: 16rpx;
	}
	&-btn {
		width: 120rpx;
		height: 66rpx;
		background-color: $u-type-primary;
		border-radius: 12rpx;
	}
}

</style>