164 lines
3.1 KiB
Vue
164 lines
3.1 KiB
Vue
<template>
|
|
<view>
|
|
<NavBar :title="data.navBar.title" :bgColor="data.navBar.bgColor" />
|
|
<view class="list-container">
|
|
<view class="item" v-for="item in source" :key="item.id"
|
|
:style="{ background: `linear-gradient( -270deg, ${item.color.bgColor} 0%, #FFFFFF 70%), #FFFFFF` }">
|
|
<view class="content flex flex-align-center">
|
|
<image class="logo" :src="`/static/image/common/phone/${item.icon}.png`" mode=""></image>
|
|
<view class="name flex-1">{{ item.name }}机型</view>
|
|
<view class="right-button" :style="{ background: item.color.buttonColor }"
|
|
@click="goPage(data.type == 'message' ? item.messageUrl : item.callUrl)">立即进入</view>
|
|
</view>
|
|
<view class="line" :style="{ background: item.color.lineColor }"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import NavBar from '@/components/nav-bar/nav-bar.vue'
|
|
import {
|
|
ref,
|
|
reactive
|
|
} from 'vue'
|
|
import {
|
|
onLoad
|
|
} from "@dcloudio/uni-app";
|
|
import {
|
|
util
|
|
} from '@/utils/common.js';
|
|
|
|
// 列表
|
|
const source = ref([{
|
|
name: '苹果',
|
|
color: {
|
|
bgColor: '#F3EAFF',
|
|
lineColor: '#B78EF5',
|
|
buttonColor: '#BA8DFF',
|
|
},
|
|
icon: 'iphone',
|
|
messageUrl: "/pages/message/list-index?phone=iphone",
|
|
callUrl: "/pages/call-log/call?type=ios"
|
|
},
|
|
{
|
|
name: '华为',
|
|
color: {
|
|
bgColor: '#FFE9E9',
|
|
lineColor: '#FF6969',
|
|
buttonColor: '#FB6767',
|
|
},
|
|
icon: 'huawei',
|
|
messageUrl: "/pages/message/list-index?phone=huawei",
|
|
callUrl: "/pages/call-log/call?type=huawei"
|
|
},
|
|
{
|
|
name: '小米',
|
|
color: {
|
|
bgColor: '#FFF0DD',
|
|
lineColor: '#FFA143',
|
|
buttonColor: '#FFA64D',
|
|
},
|
|
icon: 'mi',
|
|
messageUrl: "/pages/message/list-index?phone=mi",
|
|
callUrl: "/pages/call-log/call?type=xiaomi"
|
|
},
|
|
{
|
|
name: 'oppo',
|
|
color: {
|
|
bgColor: '#E0FFD9',
|
|
lineColor: '#56B745',
|
|
buttonColor: '#5DCD49',
|
|
},
|
|
icon: 'oppo',
|
|
messageUrl: "/pages/message/list-index?phone=oppo",
|
|
callUrl: "/pages/call-log/call?type=oppo"
|
|
}, {
|
|
name: 'vivo',
|
|
color: {
|
|
bgColor: '#D4F4FF',
|
|
lineColor: '#52C2FF',
|
|
buttonColor: '#50C1FE',
|
|
},
|
|
icon: 'vivo',
|
|
messageUrl: "/pages/message/list-index?phone=vivo",
|
|
callUrl: "/pages/call-log/call?type=vivo"
|
|
},
|
|
])
|
|
|
|
const data = reactive({
|
|
navBar: {
|
|
title: '选择机型',
|
|
bgColor: '#F0F4F9',
|
|
},
|
|
type: "message"
|
|
})
|
|
|
|
onLoad((options) => {
|
|
if (options.type) {
|
|
data.type = options.type
|
|
}
|
|
})
|
|
|
|
function goPage(url) {
|
|
if (url) {
|
|
util.goPage(url)
|
|
} else {
|
|
uni.showToast({
|
|
title: '开发中',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import '@/common/main.css';
|
|
</style>
|
|
<style lang="less">
|
|
.list-container {
|
|
background-color: #F0F4F9;
|
|
padding: 24rpx 32rpx;
|
|
}
|
|
|
|
.item {
|
|
width: 100%;
|
|
height: 188rpx;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
padding: 40rpx 36rpx 24rpx 28rpx;
|
|
|
|
.content {
|
|
.logo {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.name {
|
|
margin-left: 32rpx;
|
|
color: #1A1A1A;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.right-button {
|
|
width: 140rpx;
|
|
height: 64rpx;
|
|
border-radius: 16rpx;
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
line-height: 64rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 100rpx;
|
|
height: 8rpx;
|
|
filter: blur(5px);
|
|
opacity: 0.5;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
</style> |