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.
 
 
 

68 lines
2.0 KiB

<template>
<view class="min-height bg-gray-light">
<image src="https://img.ggsxiangan.com/pay_banner.png" style="width: 100%" mode="widthFix"></image>
<view class="p-20">
<view class="card mb-20 flex justify-between items-center" style="border-radius: 10rpx"
@click="toMiniApp(item.appId)"
v-for="(item, index) in list" :key="index">
<view class="flex justify-start items-center">
<u-icon :name="item.icon" size="80rpx"/>
<view class="ml-20 flex flex-col justify-start items-start">
<text class="text-26">{{ item.label }}</text>
<text class="tips mt-20">点击查看详情</text>
</view>
</view>
<u-button color="#E7624B" custom-style="width: 200rpx; margin: 0" size="small">查看详情</u-button>
</view>
</view>
</view>
</template>
<script>
export default {
name: "pay",
data() {
return {
list: [
{
label: '生活缴费',
icon: 'https://img.ggsxiangan.com/water.png',
appId: 'wxd2ade0f25a874ee2'
},
{
label: '中国联通营业厅',
icon: 'https://img.ggsxiangan.com/unicom.png',
appId: 'wx56af9763578b9a93'
},
{
label: '中国移动营业厅',
icon: 'https://img.ggsxiangan.com/微信图片_20250824230618_254.png',
appId: 'wx43aab19a93a3a6f2'
},
{
label: '中国电信营业厅',
icon: 'https://img.ggsxiangan.com/cdma.png',
appId: 'wxd4daf5a66b681275'
},
{
label: '联通宽带服务',
icon: 'https://img.ggsxiangan.com/微信图片_20250824230618_252.png',
appId: 'wx1129fc27588b7898'
},
{
label: '移动宽带服务',
icon: 'https://img.ggsxiangan.com/微信图片_20250824230618_251.png',
appId: 'wx43aab19a93a3a6f2'
}
]
}
},
methods: {
toMiniApp(appId) {
uni.navigateToMiniProgram({
appId
})
}
}
}
</script>