ycwh/miniapp/pages/components/btcell.vue

<template>
<view class="c-g-white border-round-10 p-l-r-30">
	<view v-for="(item,i) in cells" :key="i" class="flex-dir-row flex-x-between flex-y-center p-b-t-30" 
		@click="nav(item)" :class="i > 0 ? 'k-cell' : ''">
		<button v-if="item.openType" :open-type="item.openType" class="btcell-btn">
			<view class="flex-dir-row flex-y-center">
				<u--image v-if="item.img" :src="'/static/images/icon/' + item.img" width="20px" height="20px"/>
				<u-icon v-if="item.icon" :name="item.icon" size="20"/>
				<view class="f-28 lh-28 m-l-20">{{item.text}}</view>
			</view>
			<u-icon name="arrow-right" size="20" :color="$u.color['info']"/>
		</button>
		<block v-else>
			<view class="flex-dir-row flex-y-center">
				<u--image v-if="item.img" :src="'/static/images/icon/' + item.img" width="20px" height="20px"/>
				<u-icon v-if="item.icon" :name="item.icon" size="20"/>
				<view class="f-28 lh-28 m-l-20">{{item.text}}</view>
			</view>
			<u-icon name="arrow-right" size="20" :color="$u.color['info']"/>
		</block>
	</view>
</view>
</template>

<script>
export default {
	props: {
		cells: Array,
	},
	data() {
		return {
		}
	},
	methods: {
		nav(item) {
			uni.navigateTo({
				url: item.url,
			})
		},
	},
}
</script>

<style scoped lang="scss">
.k-cell {
	border-top: 1px solid #f4f4f5;
}
.btcell-btn {
    display: flex;
    width: 100%;
    padding: 0;
    background-color: inherit;
    justify-content: space-between;
    align-items: center;
	color: inherit;
}
</style>