init

components/ucellitem/UCellItemPlus.vue

@@ -0,0 +1,76 @@
+<template>
+  <view class="u-cell-item-plus" @click="$emit('click')">
+    <!-- 左侧图标区域 -->
+    <view class="u-cell-icon">
+      <!-- 如果传入的是插槽，优先渲染插槽 -->
+      <slot name="icon">
+        <!-- 否则判断是图片还是内置图标 -->
+        <template v-if="isImage(icon)">
+          <image :src="icon" class="icon-img" mode="aspectFit"></image>
+        </template>
+        <template v-else-if="icon">
+          <u-icon :name="icon" size="40"></u-icon>
+        </template>
+      </slot>
+    </view>
+
+    <!-- 标题文字 -->
+    <view class="u-cell-title">{{ title }}</view>
+
+    <!-- 右箭头 -->
+    <view class="u-cell-arrow" v-if="arrow">
+      <u-icon name="arrow-right"></u-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "UCellItemPlus",
+  props: {
+    title: String,
+    icon: String,
+    arrow: Boolean,
+  },
+  methods: {
+    isImage(src) {
+      return src && (src.startsWith("http") || src.endsWith(".png") || src.endsWith(".jpg") || src.endsWith(".jpeg") || src.endsWith(".svg"));
+    },
+  },
+};
+</script>
+
+<style scoped>
+.u-cell-item-plus {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 32rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+  background-color: #fff;
+}
+
+.u-cell-icon {
+  width: 60rpx;
+  height: 60rpx;
+  margin-right: 20rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon-img {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 8rpx;
+}
+
+.u-cell-title {
+  flex: 1;
+  font-size: 30rpx;
+  color: #333;
+}
+
+.u-cell-arrow {
+  color: #999;
+}
+</style>