From a24f40f18de3391c444a9a74da42c0294df52532 Mon Sep 17 00:00:00 2001
From: jry <ijry@qq.com>
Date: Fri, 9 Aug 2024 00:13:42 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E5=A2=9E=E5=8A=A0card=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                                |   5 +
 src/pages/componentsB/card/card.vue           | 107 ++++++++++
 src/pages/example/components.config.js        |  10 +
 src/static/uview/demo/box.png                 | Bin 0 -> 813 bytes
 src/static/uview/demo/card.png                | Bin 0 -> 905 bytes
 .../uview-plus/components/u-card/props.js     | 128 ++++++++++++
 .../uview-plus/components/u-card/u-card.vue   | 185 ++++++++++++++++++
 7 files changed, 435 insertions(+)
 create mode 100644 src/pages/componentsB/card/card.vue
 create mode 100644 src/static/uview/demo/box.png
 create mode 100644 src/static/uview/demo/card.png
 create mode 100644 src/uni_modules/uview-plus/components/u-card/props.js
 create mode 100644 src/uni_modules/uview-plus/components/u-card/u-card.vue

diff --git a/src/pages.json b/src/pages.json
index 134b8453e..086b4d6c3 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -303,6 +303,11 @@
 			"style": {
 				"navigationBarTitleText": "瀑布流"
 			}
+		}, {
+			"path": "card/card",
+			"style": {
+				"navigationBarTitleText": "卡片"
+			}
 		}]
 	}, {
 		"root": "pages/componentsC",
diff --git a/src/pages/componentsB/card/card.vue b/src/pages/componentsB/card/card.vue
new file mode 100644
index 000000000..18b74f6cf
--- /dev/null
+++ b/src/pages/componentsB/card/card.vue
@@ -0,0 +1,107 @@
+<template>
+	<view>
+		<view class="u-card-wrap">
+			<up-card @click="click" @head-click="headClick" :title="title"
+				:sub-title="subTitle" :thumb="thumb" :padding="padding" :border="border">
+				<template #body>
+					<view class="" slot="body">
+						<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
+							<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
+							<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
+						</view>
+						<view class="u-body-item u-flex u-row-between u-p-b-0">
+							<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
+							<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
+						</view>
+					</view>
+				</template>
+				<template #foot>
+					<view>
+						<up-icon name="chat-fill" size="34" color="" label="30评论"></up-icon>
+					</view>
+				</template>
+			</up-card>
+		</view>
+		<view class="u-config-wrap u-demo">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">左上角图标</view>
+				<up-subsection :list="['显示', '隐藏']" @change="thumbChange"></up-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">内边距</view>
+				<up-subsection current="1" :list="['20', '30', '40']" @change="paddingChange"></up-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">底部</view>
+				<up-subsection :list="['显示', '隐藏']" @change="bottomChange"></up-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">外边框</view>
+				<up-subsection :list="['显示', '隐藏']" @change="borderChange"></up-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: '素胚勾勒出青花，笔锋浓转淡',
+				subTitle: '2020-05-15',
+				thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
+				padding: 20,
+				bottomSlot: true,
+				border: true
+			}
+		},
+		methods: {
+			thumbChange(index) {
+				this.thumb = index == 0 ? 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg' : '';
+			},
+			paddingChange(index) {
+				this.padding = [20, 30, 40][index];
+			},
+			bottomChange(index) {
+				this.bottomSlot = !index;
+			},
+			borderChange(index) {
+				this.border = !index;
+			},
+			click(index) {
+				console.log(index);
+			},
+			headClick(index) {
+				console.log(index);
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-demo {
+		padding-top: 0;
+	}
+	
+	.u-card-wrap { 
+		background-color: $u-bg-color;
+		padding: 1px;
+	}
+	
+	.u-body-item {
+		font-size: 32rpx;
+		color: #333;
+		padding: 20rpx 10rpx;
+	}
+		
+	.u-body-item image {
+		width: 120rpx;
+		flex: 0 0 120rpx;
+		height: 120rpx;
+		border-radius: 8rpx;
+		margin-left: 12rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/example/components.config.js b/src/pages/example/components.config.js
index 1020c1e95..23d31abec 100644
--- a/src/pages/example/components.config.js
+++ b/src/pages/example/components.config.js
@@ -258,6 +258,11 @@ export default [{
         icon: 'line',
         title: 'Line 线条',
         title_en: 'Line'
+    }, {
+		path: '/pages/componentsB/card/card',
+		icon: 'empty',
+		title: 'Card 卡片',
+		title_en: 'Card'
     }, {
         path: '/pages/componentsA/overlay/overlay',
         icon: 'mask',
@@ -304,6 +309,11 @@ export default [{
         icon: 'divider',
         title: 'Divider 分割线',
         title_en: 'Divider'
+    }, {
+		path: '/pages/componentsD/box/box',
+		icon: 'box',
+		title: 'Box 盒子',
+		title_en: 'Box'
     }
     ]
 },
diff --git a/src/static/uview/demo/box.png b/src/static/uview/demo/box.png
new file mode 100644
index 0000000000000000000000000000000000000000..d53c642945d91beca0980a8950a1b1894f547915
GIT binary patch
literal 813
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=jKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBugD~Uq{1qucL6_7B&op0O1}z|)gMqO<lYs@uVgzC-AZB1-
zUckt}45S%BVhfnyvJMNF5p0k`w?L;23=B*~o-U3d6>)E8@6Qen6ght0^86mLwaX%J
zpWNEaA!e2OLEpnMX3igB9gd?rQZjRw{o(dI*SlDOZzh+h%ZAm#o7FBVD8Af%yf~j<
zF|(IN({N9*z4N~B$CaPdysv#OSE0{gT=99TxBccdOnh1mJ5<H<3_j2DJOAXv#kJY@
zZ~pzzvUR6~z;BK_X~*)XJgA;7HtY4%a@o0aAKmI-Tl@TK;`O(l4}LSmTzR-Nl8bp=
z(~Zd<uaBmzZS23#S7PF@s_}Y!Me&uBQ4fB6h;NFIib$F`qb}x4^nN?LyH_qAxWOQA
zV^MyH=eE@p>nCFO<gDywnkY&<*lxSyO@!WzBK7GWJ<7+A|9Say)q6JPKeqFqPu<^j
zpL6e;{m*Yd+59*4kTKigy6s=rxIA2OI{46RanBwTnNW>6pWO=2butD$$+#~Qv>|8W
z`VU+3`Pl9(s62K1j?zZ|&?d1?wiUBfr50pO%V<~?xrlL98is&jK0}y&{GAugr|oTJ
zV$&Y!0u|3-7MsY-rXT<3zPQRir#-A8XN7nJOubDUuIgN52;J<$j77ky<Hq%EmI4d>
zc`jVr=eWW5K+Q7SYK8d|QyQ0*oo#gR-8EY!iQ!wx8J<bMt6EiZFRf<3F)=padZD$#
zwT~}W2=^T<nJd*%Af?8mu)2QMy?xg|yiIU;Ysc3xDR!pC_rEpG&ojApN33q$f1!_i
zVRO5X%|*X?<xTNFr;6S<*nF&F;c_j<e5Zv|rYyBtb?WI(&mOynih-tkgLVAb-p~AL
zblCS_ZQVtF_u5wV`MLGyelI?kUOoSVUb;Ht58l82XC81iZ7l(%LQhvemvv4FO#q)H
BR?+|f

literal 0
HcmV?d00001

diff --git a/src/static/uview/demo/card.png b/src/static/uview/demo/card.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb6ecfea3f014d46906ad62caf7de51d231fb27f
GIT binary patch
literal 905
zcmV;419tq0P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91K%fHv1ONa40RR91KmY&$07g+lumAu8^GQTORCodHo4;!mK@`W|o85?r
zzY0MF3j<<dkQn?A>_o8<tn3t(q!uxWaA1OeL4=5QR>BolcK!$93=#{m6hyEv{s7V4
z9p881j=h~dZjLj>zL_oVX5PFR_Vayjc3#3QQM{r8QGt*Z;5z*JJA3?BR@~)+uFBYH
zOZITxr%in({x0|Xk(gc`m@%6x=lDzY{)Yru?d3~FL63>-p{kRfHvce&9;_`S8-1pM
z04rPhhD3X@KcM+rvf|15g=7hg1|Q44{9Y*V-~}s~(dN}{J8QGzy%_hy5XvQ4@S9U}
zHWm2A(BKi|l3Cb|CAtzy)E!Qy%SN7pr<{RM43=gk1H#(-)!2f)JO!%8(ArUe&>~*v
zP3wk1pV_jdXC^hzlazKkbNq8K)`CW7#~#cxnk%y6re(TCRz4dpUf#;&Bpkk^Ncb#8
z!i}|geltAM&Yl!|7p2~LArHM1bprPpfXFL?2QUH&CK9%>0wC?RM7|1JiXd!N8`@3=
zV9(c`wDg<U90Bma(*j)QXkv2&s87<~cLc!Ep%uD`%@F|Srd9!(*c<^+G~nFSCPG;Y
zpdhMUjsU2bP&8-~p<f6!RfCO{U@20_rEo1vRCnDipc>bOivqZsgk^~t5LUch+L!^Z
zCSh4d|4(p)4$Sm=CP{90=K0eI7cX;X+n)TJ=TEJrOI{Q9$Z6s&@IT<e0s*ns9&vdu
zJFx)XE4RdPVgZo0NZ)Ds`deVyb*7y^`j4S$S8mDti8G)jT;8`C1@M+isbkClrGfRv
ziW%T7l~Tu;0ZIewjTJM%TPmfFk^#J{l+6Q+cMY-q;Nhv$Mc9!6U7d73RNOWD*lfzL
z!oK>rYw`gz*iC1FznR3AZ%=3f9LECYk{ynZ&ZjR$k^AE&X&DDAn87pj>&b_2v+G69
zcz5WS7T78W(jJlT!#e`N(COKue{69_-l@1ome0udk?JDtYs)cTo^;&Bo=4iZk0IW1
fR3Iv_R|@<CLDBcg7<-rh00000NkvXXu0mjf*wm4}

literal 0
HcmV?d00001

diff --git a/src/uni_modules/uview-plus/components/u-card/props.js b/src/uni_modules/uview-plus/components/u-card/props.js
new file mode 100644
index 000000000..23ae8e9e2
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/u-card/props.js
@@ -0,0 +1,128 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+
+export const propsCard = defineMixin({
+    props: {
+        // 与屏幕两侧是否留空隙
+		full: {
+			type: Boolean,
+			default: false
+		},
+		// 标题
+		title: {
+			type: String,
+			default: ''
+		},
+		// 标题颜色
+		titleColor: {
+			type: String,
+			default: '#303133'
+		},
+		// 标题字体大小，单位rpx
+		titleSize: {
+			type: [Number, String],
+			default: '30'
+		},
+		// 副标题
+		subTitle: {
+			type: String,
+			default: ''
+		},
+		// 副标题颜色
+		subTitleColor: {
+			type: String,
+			default: '#909399'
+		},
+		// 副标题字体大小，单位rpx
+		subTitleSize: {
+			type: [Number, String],
+			default: '26'
+		},
+		// 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
+		border: {
+			type: Boolean,
+			default: true
+		},
+		// 用于标识点击了第几个
+		index: {
+			type: [Number, String, Object],
+			default: ''
+		},
+		// 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx"
+		margin: {
+			type: String,
+			default: '30rpx'
+		},
+		// card卡片的圆角
+		borderRadius: {
+			type: [Number, String],
+			default: '16'
+		},
+		// 头部自定义样式，对象形式
+		headStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 主体自定义样式，对象形式
+		bodyStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 底部自定义样式，对象形式
+		footStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 头部是否下边框
+		headBorderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 底部是否有上边框
+		footBorderTop: {
+			type: Boolean,
+			default: true
+		},
+		// 标题左边的缩略图
+		thumb: {
+			type: String,
+			default: ''
+		},
+		// 缩略图宽高，单位rpx
+		thumbWidth: {
+			type: [String, Number],
+			default: '60'
+		},
+		// 缩略图是否为圆形
+		thumbCircle: {
+			type: Boolean,
+			default: false
+		},
+		// 给head，body，foot的内边距
+		padding: {
+			type: [String, Number],
+			default: '30'
+		},
+		// 是否显示头部
+		showHead: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示尾部
+		showFoot: {
+			type: Boolean,
+			default: true
+		},
+		// 卡片外围阴影，字符串形式
+		boxShadow: {
+			type: String,
+			default: 'none'
+		}
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/u-card/u-card.vue b/src/uni_modules/uview-plus/components/u-card/u-card.vue
new file mode 100644
index 000000000..c07c019e0
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/u-card/u-card.vue
@@ -0,0 +1,185 @@
+<template>
+	<view
+		class="u-card"
+		@tap.stop="click"
+		:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': getPx(borderRadius) > 0 }"
+		:style="{
+			borderRadius: addUnit(borderRadius),
+			margin: margin,
+			boxShadow: boxShadow
+		}"
+	>
+		<view
+			v-if="showHead"
+			class="u-card__head"
+			:style="[{padding: addUnit(padding)}, headStyle]"
+			:class="{
+				'u-border-bottom': headBorderBottom
+			}"
+			@tap="headClick"
+		>
+			<view v-if="!$slots.head" class="u-flex u-row-between">
+				<view class="u-card__head--left u-flex u-line-1" v-if="title">
+					<image
+						:src="thumb"
+						class="u-card__head--left__thumb"
+						mode="aspectFill"
+						v-if="thumb"
+						:style="{ 
+							height: addUnit(thumbWidth), 
+							width: addUnit(thumbWidth), 
+							borderRadius: thumbCircle ? '100rpx' : '6rpx' 
+						}"
+					></image>
+					<text
+						class="u-card__head--left__title u-line-1"
+						:style="{
+							fontSize: addUnit(titleSize),
+							color: titleColor
+						}"
+					>
+						{{ title }}
+					</text>
+				</view>
+				<view class="u-card__head--right u-line-1" v-if="subTitle">
+					<text
+						class="u-card__head__title__text"
+						:style="{
+							fontSize: addUnit(subTitleSize),
+							color: subTitleColor
+						}"
+					>
+						{{ subTitle }}
+					</text>
+				</view>
+			</view>
+			<slot name="head" v-else />
+		</view>
+		<view @tap="bodyClick" class="u-card__body" :style="[{padding: addUnit(padding)}, bodyStyle]"><slot name="body" /></view>
+		<view
+			v-if="showFoot"
+			class="u-card__foot"
+			 @tap="footClick"
+			:style="[{padding: $slots.foot ? addUnit(padding) : 0}, footStyle]"
+			:class="{
+				'u-border-top': footBorderTop
+			}"
+		>
+			<slot name="foot" />
+		</view>
+	</view>
+</template>
+
+<script>
+    import { propsCard } from './props';
+    import { mpMixin } from '../../libs/mixin/mpMixin';
+    import { mixin } from '../../libs/mixin/mixin';
+    import { addStyle, addUnit, getPx } from '../../libs/function/index';
+    /**
+     * card 卡片
+     * @description 卡片组件一般用于多个列表条目，且风格统一的场景
+     * @tutorial https://uview-plus.jiangruyi.com/components/card.html
+     * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
+     * @property {String} title 头部左边的标题
+     * @property {String} title-color 标题颜色（默认#303133）
+     * @property {String | Number} title-size 标题字体大小，单位rpx（默认30）
+     * @property {String} sub-title 头部右边的副标题
+     * @property {String} sub-title-color 副标题颜色（默认#909399）
+     * @property {String | Number} sub-title-size 副标题字体大小（默认26）
+     * @property {Boolean} border 是否显示边框（默认true）
+     * @property {String | Number} index 用于标识点击了第几个卡片
+     * @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
+     * @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
+     * @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16）
+     * @property {Object} head-style 头部自定义样式，对象形式
+     * @property {Object} body-style 中部自定义样式，对象形式
+     * @property {Object} foot-style 底部自定义样式，对象形式
+     * @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
+     * @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
+     * @property {Boolean} show-head 是否显示头部（默认true）
+     * @property {Boolean} show-head 是否显示尾部（默认true）
+     * @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
+     * @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60）
+     * @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
+     * @event {Function} click 整个卡片任意位置被点击时触发
+     * @event {Function} head-click 卡片头部被点击时触发
+     * @event {Function} body-click 卡片主体部分被点击时触发
+     * @event {Function} foot-click 卡片底部部分被点击时触发
+     * @example <u-card padding="30" title="card"></u-card>
+     */
+    export default {
+        name: 'up-card',
+        data() {
+            return {};
+        },
+        mixins: [mpMixin, mixin, propsCard],
+        emits: ['click', 'head-click', 'body-click', 'foot-click'],
+        methods: {
+			addStyle,
+			addUnit,
+			getPx,
+            click() {
+                this.$emit('click', this.index);
+            },
+            headClick() {
+                this.$emit('head-click', this.index);
+            },
+            bodyClick() {
+                this.$emit('body-click', this.index);
+            },
+            footClick() {
+                this.$emit('foot-click', this.index);
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+	
+.u-card {
+	position: relative;
+	overflow: hidden;
+	font-size: 28rpx;
+	background-color: #ffffff;
+	box-sizing: border-box;
+	
+	&-full {
+		// 如果是与屏幕之间不留空隙，应该设置左右边距为0
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		width: 100%;
+	}
+	
+	&--border:after {
+		border-radius: 16rpx;
+	}
+
+	&__head {
+		&--left {
+			color: $u-main-color;
+			
+			&__thumb {
+				margin-right: 16rpx;
+			}
+			
+			&__title {
+				max-width: 400rpx;
+			}
+		}
+
+		&--right {
+			color: $u-tips-color;
+			margin-left: 6rpx;
+		}
+	}
+
+	&__body {
+		color: $u-content-color;
+	}
+
+	&__foot {
+		color: $u-tips-color;
+	}
+}
+</style>