67 lines
3.1 KiB
Vue
67 lines
3.1 KiB
Vue
<!-- 未来社区 - 便民电话 -->
|
||
<template>
|
||
<view class="cp-page">
|
||
<view class="fc-nav" :style="{ paddingTop: statusBarTop + 'px' }">
|
||
<view class="fc-nav-bar">
|
||
<view class="fc-back" @tap="goBack"><u-icon name="arrow-left" color="#1a1a1a" size="38"></u-icon></view>
|
||
<text class="fc-nav-title">便民电话</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cp-body">
|
||
<view class="cp-tip"><u-icon name="info-circle" color="#f53d42" size="28"></u-icon><text>{{ phoneTip }}</text></view>
|
||
|
||
<view class="cp-card" v-for="item in phoneList" :key="item.id">
|
||
<view class="cp-icon" :style="{ background: item.iconBg }"><u-icon :name="item.icon" color="#fff" size="44"></u-icon></view>
|
||
<view class="cp-main">
|
||
<text class="cp-name">{{ item.name }}</text>
|
||
<text class="cp-phone">{{ item.phone }}</text>
|
||
<text class="cp-time">{{ item.time }}</text>
|
||
</view>
|
||
<view class="cp-dial" @tap="onDial(item)"><u-icon name="phone" color="#f53d42" size="40"></u-icon></view>
|
||
</view>
|
||
<view class="fc-spacer"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { phoneTip, phoneList } from '../data.js'
|
||
|
||
export default {
|
||
data() { return { statusBarTop: 20, phoneTip, phoneList } },
|
||
onLoad() {
|
||
const sys = uni.getSystemInfoSync()
|
||
this.statusBarTop = sys.statusBarHeight || 20
|
||
},
|
||
methods: {
|
||
goBack() { uni.navigateBack({ delta: 1 }) },
|
||
onDial(item) {
|
||
const tel = item.phone.replace(/\s/g, '')
|
||
uni.makePhoneCall({ phoneNumber: tel, fail: () => uni.showToast({ title: '拨打 ' + item.name + '：' + item.phone, icon: 'none' }) })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
page { background: #f5f6f7; }
|
||
.cp-page { min-height: 100vh; background: #f5f6f7; }
|
||
.fc-nav { position: sticky; top: 0; z-index: 100; background: #fff; padding: 0 24rpx 16rpx; }
|
||
.fc-nav-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 88rpx; }
|
||
.fc-back { position: absolute; left: 0; top: 0; height: 88rpx; display: flex; align-items: center; }
|
||
.fc-nav-title { font-size: 34rpx; font-weight: 700; color: #1a1a1a; }
|
||
|
||
.cp-body { padding: 20rpx; }
|
||
.cp-tip { display: flex; align-items: center; background: #fff2ee; border-radius: 25rpx; padding: 22rpx 28rpx; }
|
||
.cp-tip text { margin-left: 12rpx; font-size: 24rpx; color: #676c74; }
|
||
.cp-card { display: flex; align-items: center; background: #fff; border-radius: 20rpx; border: 1rpx solid #eeeef0; box-shadow: 0 5rpx 16rpx rgba(0,0,0,0.055); padding: 28rpx; margin-top: 20rpx; }
|
||
.cp-icon { flex-shrink: 0; width: 96rpx; height: 96rpx; border-radius: 22rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; }
|
||
.cp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||
.cp-name { font-size: 30rpx; font-weight: 700; color: #111; }
|
||
.cp-phone { font-size: 26rpx; color: #666b72; margin-top: 8rpx; }
|
||
.cp-time { font-size: 22rpx; color: #9098a0; margin-top: 8rpx; }
|
||
.cp-dial { flex-shrink: 0; width: 84rpx; height: 84rpx; border-radius: 999rpx; background: #fff0f0; display: flex; align-items: center; justify-content: center; }
|
||
.fc-spacer { height: 40rpx; }
|
||
</style>
|