You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.2 KiB
95 lines
2.2 KiB
<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>
|