@10yun/cv-mobile-ui 0.5.10 → 0.5.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@10yun/cv-mobile-ui",
3
- "version": "0.5.10",
3
+ "version": "0.5.12",
4
4
  "description": "十云cvjs移动端ui,适用uniapp",
5
- "author": "",
5
+ "author": "10yun",
6
6
  "license": "Apache-2.0",
7
7
  "homepage": "https://cvjs.cn/cv-mobile-ui/",
8
8
  "publishConfig": {
@@ -0,0 +1,278 @@
1
+ <template>
2
+ <view class="cv-base-audio__warp">
3
+ <view class="cv-base-audio__cover" :class="{ 'cv-base-audio--cover-bg': !poster }">
4
+ <image :src="poster" v-if="poster" class="cv-base-audio__cover-img"></image>
5
+ <view class="cv-base-audio__play-btn" :class="{ 'cv-base-audio--btn-pause': videoIsPlay }" @click="handleBtnClick"></view>
6
+ </view>
7
+ <view class="cv-base-audio__audio-con">
8
+ <view class="cv-base-audio__audio-info">
9
+ <text class="cv-base-audio__audio-title cv-base-audio--text-eill">{{ name }}</text>
10
+ <text class="cv-base-audio__audio-author cv-base-audio--text-eill">{{ author }}</text>
11
+ </view>
12
+ <view class="cv-base-audio__audio-time">{{ audioTimeUpdate }}</view>
13
+ </view>
14
+ </view>
15
+ </template>
16
+
17
+ <script>
18
+ /**
19
+ * cv-base-audio
20
+ * @module cv-base-audio
21
+ * @Author lu-ch
22
+ * @Date 2022-07-14
23
+ * @Email webwork.s@qq.com
24
+ * @description 音频播放组件,使用了createInnerAudioContext
25
+ */
26
+ /**
27
+ * Props itemsProps
28
+ * @prop {Boolean} play - 是否播放,双向绑定,绑定时需使用.sync 如果为true 则播放,为false 则暂停
29
+ * ... 其他api同文档 (https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext)
30
+ */
31
+ /**
32
+ * 将秒转换为 分:秒
33
+ * @param {Number} s - 秒数
34
+ */
35
+ function sToHs(s) {
36
+ //计算分钟
37
+ //算法:将秒数除以60,然后下舍入,既得到分钟数
38
+ let h;
39
+ h = Math.floor(s / 60);
40
+ //计算秒
41
+ //算法:取得秒%60的余数,既得到秒数
42
+ s = s % 60;
43
+ //将变量转换为字符串
44
+ h += '';
45
+ s += '';
46
+ //如果只有一位数,前面增加一个0
47
+ h = h.length === 1 ? '0' + h : h;
48
+ s = s.length === 1 ? '0' + s : s;
49
+ return h + ':' + s;
50
+ }
51
+ export default {
52
+ name: 'ComAudio',
53
+ props: {
54
+ // 是否播放或暂停
55
+ play: {
56
+ type: Boolean,
57
+ default: false
58
+ },
59
+ // 播放src
60
+ src: {
61
+ type: String
62
+ },
63
+ poster: {
64
+ type: String,
65
+ default: ''
66
+ },
67
+ name: {
68
+ type: String,
69
+ default: '未知音频'
70
+ },
71
+ author: {
72
+ type: String,
73
+ default: '未知作者'
74
+ },
75
+ autoplay: {
76
+ type: Boolean
77
+ // default: false
78
+ },
79
+ loop: {
80
+ type: Boolean
81
+ // default: false
82
+ },
83
+ obeyMuteSwitch: {
84
+ type: Boolean
85
+ // default: true
86
+ },
87
+ // 初始化回调
88
+ initAudio: {
89
+ type: Function
90
+ },
91
+ // 自定义组件标识
92
+ index: {
93
+ type: [String, Number]
94
+ }
95
+ },
96
+ data() {
97
+ return {
98
+ audioTimeUpdate: '00:00',
99
+ videoIsPlay: false
100
+ // innerAudioContext: ''
101
+ };
102
+ },
103
+ watch: {
104
+ play(n) {
105
+ // this.videoIsPlay = play
106
+ if (n) {
107
+ !this.videoIsPlay && this.audioPlay();
108
+ } else {
109
+ this.videoIsPlay && this.audioPause();
110
+ }
111
+ },
112
+ src() {
113
+ this.audioDestroy();
114
+ this.contextInit();
115
+ }
116
+ },
117
+ created() {
118
+ this.contextInit();
119
+ },
120
+ beforeDestroy() {
121
+ this.audioDestroy();
122
+ },
123
+ methods: {
124
+ audioPlay() {
125
+ this.innerAudioContext && this.innerAudioContext.play();
126
+ },
127
+ audioPause() {
128
+ this.innerAudioContext && this.innerAudioContext.pause();
129
+ },
130
+ audioOnPlay() {
131
+ this.videoIsPlay = true;
132
+ this.$emit('update:play', true);
133
+ },
134
+ audioOnPause() {
135
+ this.videoIsPlay = false;
136
+ this.$emit('update:play', false);
137
+ },
138
+ audioDestroy() {
139
+ this.innerAudioContext && this.innerAudioContext.destroy && this.innerAudioContext.destroy();
140
+ this.audioPropInit();
141
+ },
142
+ audioControls() {
143
+ if (this.videoIsPlay) {
144
+ this.audioPause();
145
+ } else {
146
+ this.audioPlay();
147
+ }
148
+ },
149
+ handleBtnClick() {
150
+ // this.videoIsPlay = !this.videoIsPlay
151
+ this.audioControls();
152
+ this.$emit('update:play', this.videoIsPlay);
153
+ },
154
+ contextInit() {
155
+ console.log('创建');
156
+ let that = this;
157
+ that.$emit('update:play', false);
158
+ if (!that.src) {
159
+ if (process.env.NODE_ENV !== 'production') {
160
+ console.warn(`[cv-base-audio warn]: 'src' 为空`);
161
+ }
162
+ return;
163
+ }
164
+ console.log(this.$props);
165
+ let innerAudioContext = uni.createInnerAudioContext();
166
+ innerAudioContext.autoplay = that.autoplay;
167
+ innerAudioContext.loop = that.loop;
168
+ innerAudioContext.obeyMuteSwitch = that.obeyMuteSwitch;
169
+ innerAudioContext.onPlay((...arg) => {
170
+ that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
171
+ that.audioOnPlay();
172
+ that.$emit('onPlay', ...arg);
173
+ });
174
+ innerAudioContext.onPause((...arg) => {
175
+ that.audioOnPause();
176
+ that.$emit('onPause', ...arg);
177
+ });
178
+ innerAudioContext.onEnded((...arg) => {
179
+ that.audioOnPause();
180
+ that.$emit('onEnded', ...arg);
181
+ });
182
+ innerAudioContext.onTimeUpdate((...arg) => {
183
+ that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
184
+ that.$emit('onPause', ...arg);
185
+ });
186
+ innerAudioContext.onError((...arg) => {
187
+ console.log(...arg);
188
+ that.$emit('onError', ...arg);
189
+ });
190
+ innerAudioContext.src = that.src;
191
+ if (that.initAudio) {
192
+ that.initAudio(innerAudioContext, { src: that.src, index: that.index });
193
+ }
194
+ this.innerAudioContext = innerAudioContext;
195
+ },
196
+ audioPropInit() {
197
+ this.audioTimeUpdate = '00:00';
198
+ this.videoIsPlay = false;
199
+ }
200
+ }
201
+ };
202
+ </script>
203
+ <style>
204
+ .cv-base-audio--text-eill {
205
+ /*超出省略号*/
206
+ overflow: hidden;
207
+ text-overflow: ellipsis;
208
+ white-space: nowrap;
209
+ }
210
+
211
+ .cv-base-audio__warp {
212
+ display: flex;
213
+ overflow: hidden;
214
+ height: 67px;
215
+ border-radius: 3px;
216
+ border: 1px solid #e0e0e0;
217
+ }
218
+
219
+ .cv-base-audio__cover {
220
+ position: relative;
221
+ flex-shrink: 0;
222
+ width: 65px;
223
+ height: 100%;
224
+ }
225
+ .cv-base-audio__cover.cv-base-audio--cover-bg {
226
+ background-color: #e6e6e6;
227
+ }
228
+ .cv-base-audio__cover .cv-base-audio__cover-img {
229
+ width: 100%;
230
+ height: 100%;
231
+ }
232
+ .cv-base-audio__cover .cv-base-audio__play-btn {
233
+ position: absolute;
234
+ left: 50%;
235
+ top: 50%;
236
+ width: 24px;
237
+ height: 24px;
238
+ transform: translateX(-50%) translateY(-50%);
239
+ border-radius: 50%;
240
+ background-size: 100% 100%;
241
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGymlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA2LTA0VDE3OjU1OjA3KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA2LTA1VDA5OjUwOjUwKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wNi0wNVQwOTo1MDo1MCswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4OWI0YTlkMi02ZWIzLTUyNDQtYjM4OS03MzdmYTA1OTM1ZWEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDoyODIyOGJlOC0zZDgxLTlhNDMtOGJjMy02NDA2NTQzYWIwMzQiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0YjA1NDBlYy1mMjE1LWU4NDEtYjkwYy0xZjBiNGQ3OGJkODkiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjRiMDU0MGVjLWYyMTUtZTg0MS1iOTBjLTFmMGI0ZDc4YmQ4OSIgc3RFdnQ6d2hlbj0iMjAxOS0wNi0wNFQxNzo1NTowNyswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiNzc4YjE2NC1mODFhLWU5NDktOThmMC00OGQ0MDZlNmU3ZjYiIHN0RXZ0OndoZW49IjIwMTktMDYtMDRUMTc6NTU6MDcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ODliNGE5ZDItNmViMy01MjQ0LWIzODktNzM3ZmEwNTkzNWVhIiBzdEV2dDp3aGVuPSIyMDE5LTA2LTA1VDA5OjUwOjUwKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+fT8iBAAACuxJREFUeJzdnXtMW9cdxz8Y24AJ70F4DBNCJuJAEggPtelIgpIs/7Rd1kndqkn9Y6umTdo0aWonTdrabe20fzZp0h6atGl/bWu1ac26p7Rm3bqs7RpCKBAgYDKwsI0TYoLBCdhc8P44gRj7nuvX9YN8/jLnnHvO9df3nsfv/M6PvFAoRI5gAjqADwEGIB8w3s9TgA1gE7gNDAPBzN9iNMbYRdJGPfA40AmUA/uB3jivHQBuAEvAEPAXwKX7HcZBXgafwFLgKPAFhFBlQLVOdS8APuAq8BPgA2BZp7o1yYSArcBTwDPA4XQ3dp9R4FXgdWAynQ2lU0Ab8BJwFqhMVyMxWATeBL4NTKSjgXQI2AE8D3waMRAkjaIoABiNKXfVm8BrwPcRfaZu6ClgCfAi8BXEiBoXiqLg8Xjw+XwEAgE2NjZYX19nfX2dYFAMtGazGZPJhMlkwmAwUFhYSFlZGbW1tYmKqwA/BF5Gpz5SLwEfB34MNMUquLm5ydLSEl6vl7m5Oe7du0cgEEiq0YKCAoqKirBarVRVVVFeXo7BYIjnUgfwJeDPSTUchh4CfhP4TqxCPp8Pl8vFzZs3WVxcTLVNVSorK9m7dy8NDQ2UlZXFc8m3EP1j0qQiYA3wc+BJrULLy8tMTEzg8Xi2+7R0YzQaqa2txWazUVpaGqv4n4DngFvJtJWsgPuBN4B2WYFAIMDY2BgzMzPJ1K8bzc3NtLW1UVBQoFXsGvBx4H+J1p+MgI8Bf0AsuVRxOBxMTExw9+7dROtOCxaLhUOHDtHUpNlF3wbOA+8kUneiAh4D/oUYcaNQFIWRkZGsP3UympubOXz4MCaTdJLgB04Bg/HWmYiABxG/juqk2Ov1MjQ0hM/ni7e+rFBaWsqxY8eoqqqSFVlEvGXX46kvXgE/DPwHyTTF5XJx+fJlNjc346kr6xgMBnp7e2loaJAVcQAfBZyx6opHwHzg38BxtczZ2VkGB+N+4nOKrq4u9u3bJ8t+BziBWMVIiWfW+QoS8RwOx64VD2BwcBCHwyHLfgz4bqw6Yj2B54ELahlut5v33nsvVv27guPHj1NXVyfL/iTCqqOKloDFwDRQG5nh9Xp5++23ySFrdkrk5eVx8uRJ2cByC2hBjNBRaL3Cr6AinqIoDAwMPDTiAYRCIQYGBmQrpRo0XmWZgB8BPq+WceXKlZyZIOvJ3bt3uXLliiz7OYQmUcgE/AFgiUy8ceMGLldWth4ygsvlYnp6Wi3LgrAlRqEmYA/wRGTi+vo6ExNpMermFJOTk6yvr6tlPQl0RyaqCfiy2tXDw8NJ2+12E2trawwPD8uyX4lMiBTwUcQexg78fr/WfOmhw+Fw4PerDrrniJgTRwr4lEpaWl7dPXv20NbWRltbGxZLVHebdTS+8/nwP8I3FCqApyNL+/1+3G63bjcGUFJSwqlTpzCbzYCwkjidTsbHx7f3QbKN2+1mZWWFkpIow9PTwPeAO7DzaesArJGlXS6X7pZkq9W6LR6IvY2WlhbOnDnD/v37dW0rWRRFkT04TQitgJ0Cfk6tkrm5Od1vTuVXBaCoqIjOzk76+/upqanRvd1EmZubQ1EUNWPCZ7c+hAt4IrKUz+dLi31vY2NDM7+yspK+vj56enrYs2eP7u3Hy/3vrzZTObn1YSvzIBC1EMz2pNlqtXL69Gna29vJz09pjz5pnE5Vk2AVwvNiW8BnUFl53LqV1EaVrhiNRlpbWzl79ixNTU3k5eVltP2FhQW1ZAvwKXggYHNkCUVRWF1dTd+dJUhxcTHd3d309fVRXa2XU1dsVldXZYPofnggYFRH4/F4cmZKEU51dTUnTpygp6eHwsLCtLcXDAbxeDxqWSUgBCwCDkTm5vrmkNVq5dy5c7S2tmrtsunC0tKSWvIBwGJAdIa2yNzdsO41Go20t7fT399PY2Nj2tqRaHEQsBmAOlRcfWNNNXKJkpISent76evri9cnJiEkWhiBWqlFWmLSyWlqamo4c+YM7e1Sj5Ok0FqJGZAYVXejgFu0trbS1dWl25RHQwuDARVnyC0nx93Mvn37dJvuBINB2WtsVn36QqHQQ7FppOekW6aHAYh61IxGY9qnBulmcXFRN0dOk8kkcyUOGpG4LoSbm3YbHo+HwcFB3bohDS02pR7au/EJ9Pv9XLt2TXcjiIYje54RcCNe4x2KxemsnRNsbGwwPT3N9evX0+JGLLEEbQJeI8IPbgI4Ep4bwyU2Z3A4HExNTbG8nL6TXRItpoFxI7CK8A3eIWA2DZnxcOfOHUZHR2XmJl0pLy9XS7YDvq2XeyUyt66uDpPJlHPzwbW1NcbGxpidnc1Ie2azmdraKBchECdFt9fANyJzCwoKKCwszBkBFUVhZmaGycnJjBo6ioqKZIPIPDwQ8FXgBYRL2zaVlZWsrEQ9nBlnfn6e8fFxmVkprUhWMwHgt/BAwCmEc/UOARsbG7PqkeDz+RgdHeXmzZtZuweJH/Ui4tD3DjPWP4Fnw0tVVFRQVFSku2k/1hRpdXUVu93O9PR0VpeUpaWlsgHk6taH8G/yy8hSZrMZqzVqrz1l1tbWpHl2u5233noLu92e9fV4Y2OjrP/72daHcAGHgagTMvX19brvhDmdzihxPB4PFy9eZGRkRFPgTJGfny97fZe5//rCzld4Cfgd8LXw0lsnICUbK0nh9Xq5dOkS9fX1hEIhbt++rbv/Tao0NDTIPCh+BWx3ypHP5+uI0+Y7OqlDhw7pKiCI/dZMTIKTxWaL2ibaYscZ48je/H3gb5FXVFRUyCaTDyVNTU2yldgAEfqoDYcvql3Z0dGRNfeKTFJQUMDRo0dl2VEHy9UEvAr8MTKxuLiYAweito8fOmw2m8yU919UQgTIJmTPA/ciE9va2qioqEjpBnOZhoYGWlpaZNkvqCXKBLQDv4hMzMvLo7u7O+MOPplgy/dGwu8Rp1Wj0DrqVYKweUV5Os7Pz/Puu+8mcZu5SYyjXpsIz11VM7fWmmoFEecqirq6Ojo6OhK8zdzlkUce0TqA/WU0ApvFsttfQDhUR9HS0qI1V9o1dHd3U19fL8t+Dfip1vXxHLg2IA5cP6aWOTo6ytTUVKw6cpIYB64dQBfg1apDlyP/drudkZGReOrJCeI48r+GOHT0Qay6dAs64XQ6GRwczFhwnWQpKyujs7NTq88LAP1AXKfJEw170oWwG6qusv1+P0NDQznhW61Gc3MzR44ciRWw7DPAb+KtM5nAO48iVirSwDtjY2NMTU3lTBQPi8WCzWbT6u9ATFeeBX6dSN1pC/2UyW1HLeIM/eRFhH5KKGoRpBZ8rBqxWpEGHwuFQrjdbqamptIWsU0Nk8nE3r174w0+dgNx/u1qrIJq6BH+7iVEGDlNnE4nCwsLzM7Opu3VTiL83QXEcf6kf129AjA+AfyIOAIwrqys4Pf7mZmZYWlpiUAgkLSgKQRgvIf44VWP8SeC3iFAvwF8lQTiU3u9XtxuN8FgEEVRWF5e3g4FqijKdshPi8WCxWJJNQQowF+BrwO6TFzTEYS2kwdBaBN28VIUZdulNlxAHZydJhDCvZFqReFkIgzyxxCHubPF+4ju5QIqNs5UyUQg7oPAJ8hsIG4Qe7dvohG2SQ8yHQq+A/giInyInqHgQZicVhCh4P+OcFdJO5kUMJIGxOh9lMT/GQHAZR78Q4J/ABcR8fQzSjYFjCT832GYEWdyK+9/9iMW+WsIh1A3YhTNuu/d/wHKYeG4hpow8AAAAABJRU5ErkJggg==');
242
+ }
243
+ .cv-base-audio__cover .cv-base-audio__play-btn.cv-base-audio--btn-pause {
244
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGymlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA2LTA0VDE3OjU0OjM1KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA2LTA1VDA5OjUwOjI0KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wNi0wNVQwOTo1MDoyNCswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyZGU0NjY1NS05N2I2LTBjNGMtYTQ4NS0wN2E1ZjY5ZjU1YjciIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiYTUxOWZkZi0xYWQwLTYwNDUtOGIyNS1hNTZlOGM0YzhkZmQiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiZjRlOTFiYS1iYTBjLWVkNDMtOTc1Yi01YTcwODhmNzdiMWUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmJmNGU5MWJhLWJhMGMtZWQ0My05NzViLTVhNzA4OGY3N2IxZSIgc3RFdnQ6d2hlbj0iMjAxOS0wNi0wNFQxNzo1NDozNSswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoxY2U4ZTUwMi1iYzUwLThkNDktYTU0ZC04OWVjOGUzMDI5ZTIiIHN0RXZ0OndoZW49IjIwMTktMDYtMDRUMTc6NTQ6MzUrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MmRlNDY2NTUtOTdiNi0wYzRjLWE0ODUtMDdhNWY2OWY1NWI3IiBzdEV2dDp3aGVuPSIyMDE5LTA2LTA1VDA5OjUwOjI0KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+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');
245
+ }
246
+
247
+ .cv-base-audio__audio-con {
248
+ position: relative;
249
+ flex: 1;
250
+ display: flex;
251
+ width: 0;
252
+ padding: 0 15px;
253
+ align-items: center;
254
+ background-color: #fcfcfc;
255
+ }
256
+ .cv-base-audio__audio-con .cv-base-audio__audio-info {
257
+ width: 100%;
258
+ }
259
+ .cv-base-audio__audio-con .cv-base-audio__audio-title {
260
+ display: block;
261
+ padding-bottom: 7px;
262
+ padding-right: 25px;
263
+ font-size: 14px;
264
+ color: #353535;
265
+ }
266
+ .cv-base-audio__audio-con .cv-base-audio__audio-author {
267
+ display: block;
268
+ font-size: 12px;
269
+ color: #888888;
270
+ }
271
+ .cv-base-audio__audio-con .cv-base-audio__audio-time {
272
+ position: absolute;
273
+ right: 15px;
274
+ top: 6px;
275
+ font-size: 13px;
276
+ color: #9d9d9d;
277
+ }
278
+ </style>
@@ -0,0 +1,223 @@
1
+ <template>
2
+ <view class="cv-cell-box">
3
+ <view class="cv-cell-main-box" :class="isBottom && 'cv-cell-main-big'" @tap="bingClick">
4
+ <view class="cv-cell-left-box">
5
+ <view class="cv-cell-left-icon" v-if="leftIcon || $slots.leftIcon">
6
+ <slot name="leftIcon">
7
+ <image class="cv-cell-left-image" :src="leftIcon" mode="aspectFit" />
8
+ </slot>
9
+ </view>
10
+ <view class="cv-cell-left-content">
11
+ <view class="cv-cell-left-content-top" v-if="leftTop || $slots.leftTop">
12
+ <slot name="leftBottom">{{ leftTop }}</slot>
13
+ </view>
14
+ <view class="cv-cell-left-content-bottom" v-if="leftBottom || $slots.leftBottom">
15
+ <slot name="leftBottom">{{ leftBottom }}</slot>
16
+ </view>
17
+ </view>
18
+ </view>
19
+ <view class="cv-cell-right-box">
20
+ <view class="cv-cell-right-content">
21
+ <view class="cv-cell-right-content-top" v-if="rightTop || $slots.rightTop">
22
+ <slot name="rightBottom">{{ rightTop }}</slot>
23
+ </view>
24
+ <view class="cv-cell-right-content-bottom" v-if="rightBottom || $slots.rightBottom">
25
+ <slot name="rightBottom">{{ rightBottom }}</slot>
26
+ </view>
27
+ </view>
28
+ <view class="cv-cell-right-icon" v-if="rightIcon || $slots.rightIcon">
29
+ <slot name="rightIcon">
30
+ <view class="cv-cell-right-icon-top"></view>
31
+ <view class="cv-cell-right-icon-bottom"></view>
32
+ </slot>
33
+ </view>
34
+ </view>
35
+ </view>
36
+ </view>
37
+ </template>
38
+
39
+ <script>
40
+ export default {
41
+ emits: ['click'],
42
+ name: 'cvCell',
43
+ options: {
44
+ addGlobalClass: true
45
+ },
46
+ props: {
47
+ leftIcon: {
48
+ type: String,
49
+ default: ''
50
+ },
51
+ leftTop: {
52
+ type: String,
53
+ default: ''
54
+ },
55
+ leftBottom: {
56
+ type: String,
57
+ default: ''
58
+ },
59
+ rightTop: {
60
+ type: String,
61
+ default: ''
62
+ },
63
+ rightBottom: {
64
+ type: String,
65
+ default: ''
66
+ },
67
+ rightIcon: {
68
+ type: Boolean,
69
+ default: false
70
+ }
71
+ },
72
+ computed: {
73
+ isBottom() {
74
+ return this.leftBottom || this.rightBottom || this.$slots.leftBottom || this.$slots.rightBottom;
75
+ }
76
+ },
77
+ data() {
78
+ return {};
79
+ },
80
+ created() {
81
+ // console.log(this.$slots);
82
+ },
83
+ methods: {
84
+ bingClick() {
85
+ this.$emit('click');
86
+ }
87
+ }
88
+ };
89
+ </script>
90
+ <style>
91
+ .cv-cell-box {
92
+ height: auto;
93
+ background-color: #ffffff;
94
+ padding-left: 10px;
95
+ }
96
+ .cv-cell-main-box {
97
+ padding: 5px 10px 5px 0;
98
+ border-bottom: solid 1px #f1f1f1;
99
+ display: flex;
100
+ flex-direction: row;
101
+ justify-content: space-between;
102
+ }
103
+ /* #ifndef MP-WEIXIN */
104
+ .cv-cell-box:last-child .cv-cell-main-box {
105
+ border-bottom: none;
106
+ }
107
+ /* #endif */
108
+ /* #ifdef MP-WEIXIN */
109
+ .cv-cell-box:last-child .cv-cell-main-box {
110
+ border-bottom: none;
111
+ }
112
+ /* #endif */
113
+ .cv-cell-main-big {
114
+ padding: 9px 10px 9px 0;
115
+ }
116
+ .cv-cell-left-box {
117
+ width: 50%;
118
+ display: flex;
119
+ flex-direction: row;
120
+ align-items: center;
121
+ }
122
+ .cv-cell-left-icon {
123
+ width: 20px;
124
+ height: 40px;
125
+ line-height: 40px;
126
+ padding-right: 10px;
127
+ }
128
+ .cv-cell-left-image {
129
+ width: 20px;
130
+ height: 40px;
131
+ }
132
+ .cv-cell-left-content {
133
+ padding-left: 0px;
134
+ width: 100%;
135
+ display: flex;
136
+ flex-direction: column;
137
+ justify-content: center;
138
+ align-items: flex-start;
139
+ }
140
+ .cv-cell-left-content-top {
141
+ font-size: 15px;
142
+ height: 40px;
143
+ line-height: 40px;
144
+ overflow: hidden;
145
+ font-size: 15px;
146
+ line-height: 22px;
147
+ height: 22px;
148
+ overflow: hidden;
149
+ }
150
+ .cv-cell-left-content-bottom {
151
+ font-size: 12px;
152
+ color: #999999;
153
+ line-height: 18px;
154
+ height: 18px;
155
+ overflow: hidden;
156
+ }
157
+ /**右边 */
158
+ .cv-cell-right-box {
159
+ width: 50%;
160
+ display: table;
161
+ height: 40px;
162
+ padding-left: 10px;
163
+ display: flex;
164
+ flex-direction: row;
165
+ align-items: center;
166
+ }
167
+ .cv-cell-right-content {
168
+ width: calc(100% - 20px);
169
+ display: flex;
170
+ flex-direction: column;
171
+ justify-content: center;
172
+ align-items: flex-end;
173
+ }
174
+ .cv-cell-right-content-top {
175
+ font-size: 14px;
176
+ color: #666666;
177
+ line-height: 20px;
178
+ height: 20px;
179
+ overflow: hidden;
180
+ text-align: right;
181
+ }
182
+ .cv-cell-right-content-bottom {
183
+ font-size: 14px;
184
+ color: #999999;
185
+ line-height: 20px;
186
+ height: 20px;
187
+ overflow: hidden;
188
+ text-align: right;
189
+ }
190
+
191
+ .cv-cell-main-right-intact {
192
+ font-size: 14px;
193
+ color: #999999;
194
+ display: table-cell;
195
+ vertical-align: middle;
196
+ line-height: 20px;
197
+ height: 40px;
198
+ overflow: hidden;
199
+ max-height: 40px;
200
+ text-align: right;
201
+ }
202
+
203
+ .cv-cell-right-icon {
204
+ height: 40px;
205
+ width: 20px;
206
+ }
207
+ .cv-cell-right-icon-top,
208
+ .cv-cell-right-icon-bottom {
209
+ width: 10px;
210
+ height: 2px;
211
+ background-color: #c1c1c1;
212
+ position: relative;
213
+ left: 10px;
214
+ }
215
+ .cv-cell-right-icon-top {
216
+ transform: rotate(45deg);
217
+ top: 16px;
218
+ }
219
+ .cv-cell-right-icon-bottom {
220
+ transform: rotate(-45deg);
221
+ top: 20px;
222
+ }
223
+ </style>
@@ -1,7 +1,5 @@
1
1
  <template>
2
- <!-- '<audio/>' 组件不再维护,建议使用能力更强的 'uni.createInnerAudioContext' 接口 有时间再改-->
3
- <!--增加audio标签支持-->
4
- <audio
2
+ <cv-base-audio
5
3
  :id="node.attr.id"
6
4
  :class="node.classStr"
7
5
  :style="node.styleStr"
@@ -11,7 +9,7 @@
11
9
  :name="node.attr.name"
12
10
  :author="node.attr.author"
13
11
  controls
14
- ></audio>
12
+ />
15
13
  </template>
16
14
 
17
15
  <script>
@@ -7,7 +7,7 @@
7
7
  <view class="cv-form-item__inner" :class="['is-direction-' + labelPos]">
8
8
  <view class="cv-form-item__label" :style="{ width: labelWid, justifyContent: justifyContent }">
9
9
  <slot name="left">
10
- <uni-icons v-if="leftIcon" class="label-icon" size="16" :type="leftIcon" :color="iconColor" />
10
+ <cv-icons v-if="leftIcon" class="label-icon" size="16" :type="leftIcon" :color="iconColor" />
11
11
  <text v-if="required" class="is-required">*</text>
12
12
  <text class="label-text">{{ label }}</text>
13
13
  <view v-if="label" class="label-seat"></view>
@@ -17,14 +17,14 @@
17
17
  <!-- 清空 -->
18
18
  <view class="cv-input__clear" @click="onEmpty" v-if="clearable == true && localVal != ''">X</view>
19
19
  <!-- 眼睛-->
20
- <uni-icons
20
+ <cv-icons
21
21
  class="cv-input__eyes"
22
22
  v-if="localVal != '' && passwordIcon"
23
- :type="showPassword ? 'eye-slash-filled' : 'eye-filled'"
23
+ :type="showPassword ? 'base-eyeslash-fill' : 'base-eye-fill'"
24
24
  :size="18"
25
25
  color="rgba(0, 0, 0, 0.4)"
26
26
  @click="onEyes"
27
- ></uni-icons>
27
+ ></cv-icons>
28
28
  </view>
29
29
  </view>
30
30
  </template>
@@ -1,256 +0,0 @@
1
- <template>
2
- <view class="cv-cell">
3
- <view class="cv-cell-box">
4
- <view class="cv-cell-main" :class="sublabel && 'cv-cell-main-big'" @tap="jump">
5
- <view class="cv-cell-main-left">
6
- <view class="cv-cell-main-left-icon" v-if="image || $slots.before">
7
- <image class="cv-cell-main-left-icon-image" :src="image" mode="aspectFit" v-if="image" />
8
- <slot name="before" v-else />
9
- </view>
10
- <view class="cv-cell-main-left-text" :class="!image && !$slots.before ? 'cv-cell-main-left-text-noimage' : ''">
11
- <view class="cv-cell-main-left-text-intact" v-if="!sublabel">
12
- {{ label }}
13
- </view>
14
- <view class="cv-cell-main-left-text-double" v-else>
15
- <view class="cv-cell-main-left-text-label">
16
- {{ label }}
17
- </view>
18
- <view class="cv-cell-main-left-text-sublabel">
19
- {{ sublabel }}
20
- </view>
21
- </view>
22
- </view>
23
- </view>
24
- <view class="cv-cell-main-center" :class="url == '' && !$attrs.click ? 'cv-cell-main-center-nourl' : ''">
25
- <view class="cv-cell-main-center-intact" v-if="!subexplain">
26
- {{ explain }}
27
- </view>
28
- <view class="cv-cell-main-center-double" v-else>
29
- <view class="cv-cell-main-center-explain">
30
- {{ explain }}
31
- </view>
32
- <view class="cv-cell-main-center-subexplain">
33
- {{ subexplain }}
34
- </view>
35
- </view>
36
- </view>
37
- <view class="cv-cell-main-more" v-if="url || $attrs.click">
38
- <view class="cv-cell-main-more-top"></view>
39
- <view class="cv-cell-main-more-bottom"></view>
40
- </view>
41
- </view>
42
- <view class="cv-cell-message" v-if="message">
43
- {{ message }}
44
- </view>
45
- </view>
46
- </view>
47
- </template>
48
-
49
- <script>
50
- export default {
51
- emits: ['click'],
52
- name: 'cvCell',
53
- options: {
54
- addGlobalClass: true
55
- },
56
- props: {
57
- url: {
58
- type: String,
59
- default: ''
60
- },
61
- urlType: {
62
- type: String,
63
- default() {
64
- return 'navigateTo';
65
- }
66
- },
67
- label: {
68
- type: String,
69
- default: ''
70
- },
71
- sublabel: {
72
- type: String,
73
- default: ''
74
- },
75
- explain: {
76
- type: String,
77
- default: ''
78
- },
79
- subexplain: {
80
- type: String,
81
- default: ''
82
- },
83
- image: {
84
- type: String,
85
- default: ''
86
- },
87
- message: {
88
- type: String,
89
- default: ''
90
- }
91
- },
92
- watch: {
93
- dataLists(newVal) {
94
- this._dealDataLists();
95
- }
96
- },
97
- data() {
98
- return {};
99
- },
100
- created() {
101
- // console.log(this.$slots);
102
- },
103
- methods: {
104
- jump() {
105
- if (typeof this.url == 'string' && this.url) {
106
- const url = this.url;
107
- switch (this.urlType) {
108
- case 'redirectTo': //关闭当前页面,跳转到应用内的某个页面。
109
- uni.redirectTo({
110
- url: this.url
111
- });
112
- break;
113
- case 'reLaunch': //关闭所有页面,打开到应用内的某个页面。
114
- uni.reLaunch({
115
- url: this.url
116
- });
117
- break;
118
- case 'switchTab': //跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
119
- uni.switchTab({
120
- url: this.url
121
- });
122
- break;
123
- default: //默认【navigateTo】 保留当前页面,跳转到应用内的某个页面
124
- uni.navigateTo({
125
- url: this.url
126
- });
127
- }
128
- } else {
129
- this.$emit('click');
130
- }
131
- }
132
- }
133
- };
134
- </script>
135
- <style>
136
- /* #ifndef MP-WEIXIN */
137
- .cv-cell:last-child .cv-cell-main {
138
- border-bottom: none;
139
- }
140
- /* #endif */
141
- /* #ifdef MP-WEIXIN */
142
- cv-cell:last-child .cv-cell-main {
143
- border-bottom: none;
144
- }
145
- /* #endif */
146
- .cv-cell-box {
147
- height: auto;
148
- background-color: #ffffff;
149
- padding-left: 15px;
150
- }
151
- .cv-cell-main {
152
- padding: 5px 15px 5px 0;
153
- border-bottom: solid 1px #f1f1f1;
154
- display: flex;
155
- }
156
- .cv-cell-main-big {
157
- padding: 9px 15px 9px 0;
158
- }
159
- .cv-cell-main-left {
160
- width: 200px;
161
- display: flex;
162
- }
163
- .cv-cell-main-left-icon {
164
- width: 20px;
165
- height: 40px;
166
- line-height: 40px;
167
- }
168
- .cv-cell-main-left-icon-image {
169
- width: 20px;
170
- height: 40px;
171
- }
172
- .cv-cell-main-left-text {
173
- width: calc(100% - 20px);
174
- padding-left: 10px;
175
- }
176
- .cv-cell-main-left-text-noimage {
177
- width: 100%;
178
- padding-left: 0px;
179
- }
180
- .cv-cell-main-left-text-intact {
181
- font-size: 15px;
182
- height: 40px;
183
- line-height: 40px;
184
- overflow: hidden;
185
- }
186
- .cv-cell-main-left-text-label {
187
- font-size: 15px;
188
- line-height: 22px;
189
- height: 22px;
190
- overflow: hidden;
191
- }
192
- .cv-cell-main-left-text-sublabel {
193
- font-size: 12px;
194
- color: #999999;
195
- line-height: 18px;
196
- height: 18px;
197
- overflow: hidden;
198
- }
199
- .cv-cell-main-center {
200
- width: calc(100% - 200px - 20px);
201
- display: table;
202
- height: 40px;
203
- padding-left: 10px;
204
- }
205
- .cv-cell-main-center-explain,
206
- .cv-cell-main-center-subexplain {
207
- font-size: 14px;
208
- color: #999999;
209
- line-height: 20px;
210
- height: 20px;
211
- overflow: hidden;
212
- text-align: right;
213
- }
214
-
215
- .cv-cell-main-center-nourl {
216
- width: calc(100% - 200px);
217
- }
218
- .cv-cell-main-center-intact {
219
- font-size: 14px;
220
- color: #999999;
221
- display: table-cell;
222
- vertical-align: middle;
223
- line-height: 20px;
224
- height: 40px;
225
- overflow: hidden;
226
- max-height: 40px;
227
- text-align: right;
228
- }
229
-
230
- .cv-cell-main-more {
231
- height: 40px;
232
- width: 20px;
233
- }
234
- .cv-cell-main-more-top,
235
- .cv-cell-main-more-bottom {
236
- width: 10px;
237
- height: 2px;
238
- background-color: #c1c1c1;
239
- position: relative;
240
- left: 10px;
241
- }
242
- .cv-cell-main-more-top {
243
- transform: rotate(45deg);
244
- top: 16px;
245
- }
246
- .cv-cell-main-more-bottom {
247
- transform: rotate(-45deg);
248
- top: 20px;
249
- }
250
- .cv-cell-message {
251
- font-size: 13px;
252
- color: #999999;
253
- line-height: 1.5em;
254
- padding: 5px 15px 5px 0;
255
- }
256
- </style>
@@ -1,256 +0,0 @@
1
- <template>
2
- <view class="cv-row">
3
- <view class="cv-row-box">
4
- <view class="cv-row-main" :class="sublabel && 'cv-row-main-big'" @tap="jump">
5
- <view class="cv-row-main-left">
6
- <view class="cv-row-main-left-icon" v-if="image || $slots.before">
7
- <image class="cv-row-main-left-icon-image" :src="image" mode="aspectFit" v-if="image" />
8
- <slot name="before" v-else />
9
- </view>
10
- <view class="cv-row-main-left-text" :class="!image && !$slots.before ? 'cv-row-main-left-text-noimage' : ''">
11
- <view class="cv-row-main-left-text-intact" v-if="!sublabel">
12
- {{ label }}
13
- </view>
14
- <view class="cv-row-main-left-text-double" v-else>
15
- <view class="cv-row-main-left-text-label">
16
- {{ label }}
17
- </view>
18
- <view class="cv-row-main-left-text-sublabel">
19
- {{ sublabel }}
20
- </view>
21
- </view>
22
- </view>
23
- </view>
24
- <view class="cv-row-main-center" :class="url == '' && !$attrs.click ? 'cv-row-main-center-nourl' : ''">
25
- <view class="cv-row-main-center-intact" v-if="!subexplain">
26
- {{ explain }}
27
- </view>
28
- <view class="cv-row-main-center-double" v-else>
29
- <view class="cv-row-main-center-explain">
30
- {{ explain }}
31
- </view>
32
- <view class="cv-row-main-center-subexplain">
33
- {{ subexplain }}
34
- </view>
35
- </view>
36
- </view>
37
- <view class="cv-row-main-more" v-if="url || $attrs.click">
38
- <view class="cv-row-main-more-top"></view>
39
- <view class="cv-row-main-more-bottom"></view>
40
- </view>
41
- </view>
42
- <view class="cv-row-message" v-if="message">
43
- {{ message }}
44
- </view>
45
- </view>
46
- </view>
47
- </template>
48
-
49
- <script>
50
- export default {
51
- emits: ['click'],
52
- name: 'cvNavRow',
53
- options: {
54
- addGlobalClass: true
55
- },
56
- props: {
57
- url: {
58
- type: String,
59
- default: ''
60
- },
61
- urlType: {
62
- type: String,
63
- default() {
64
- return 'navigateTo';
65
- }
66
- },
67
- label: {
68
- type: String,
69
- default: ''
70
- },
71
- sublabel: {
72
- type: String,
73
- default: ''
74
- },
75
- explain: {
76
- type: String,
77
- default: ''
78
- },
79
- subexplain: {
80
- type: String,
81
- default: ''
82
- },
83
- image: {
84
- type: String,
85
- default: ''
86
- },
87
- message: {
88
- type: String,
89
- default: ''
90
- }
91
- },
92
- watch: {
93
- dataLists(newVal) {
94
- this._dealDataLists();
95
- }
96
- },
97
- data() {
98
- return {};
99
- },
100
- created() {
101
- // console.log(this.$slots);
102
- },
103
- methods: {
104
- jump() {
105
- if (typeof this.url == 'string' && this.url) {
106
- const url = this.url;
107
- switch (this.urlType) {
108
- case 'redirectTo': //关闭当前页面,跳转到应用内的某个页面。
109
- uni.redirectTo({
110
- url: this.url
111
- });
112
- break;
113
- case 'reLaunch': //关闭所有页面,打开到应用内的某个页面。
114
- uni.reLaunch({
115
- url: this.url
116
- });
117
- break;
118
- case 'switchTab': //跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
119
- uni.switchTab({
120
- url: this.url
121
- });
122
- break;
123
- default: //默认【navigateTo】 保留当前页面,跳转到应用内的某个页面
124
- uni.navigateTo({
125
- url: this.url
126
- });
127
- }
128
- } else {
129
- this.$emit('click');
130
- }
131
- }
132
- }
133
- };
134
- </script>
135
- <style>
136
- /* #ifndef MP-WEIXIN */
137
- .cv-row:last-child .cv-row-main {
138
- border-bottom: none;
139
- }
140
- /* #endif */
141
- /* #ifdef MP-WEIXIN */
142
- cv-row:last-child .cv-row-main {
143
- border-bottom: none;
144
- }
145
- /* #endif */
146
- .cv-row-box {
147
- height: auto;
148
- background-color: #ffffff;
149
- padding-left: 15px;
150
- }
151
- .cv-row-main {
152
- padding: 5px 15px 5px 0;
153
- border-bottom: solid 1px #f1f1f1;
154
- display: flex;
155
- }
156
- .cv-row-main-big {
157
- padding: 9px 15px 9px 0;
158
- }
159
- .cv-row-main-left {
160
- width: 200px;
161
- display: flex;
162
- }
163
- .cv-row-main-left-icon {
164
- width: 20px;
165
- height: 40px;
166
- line-height: 40px;
167
- }
168
- .cv-row-main-left-icon-image {
169
- width: 20px;
170
- height: 40px;
171
- }
172
- .cv-row-main-left-text {
173
- width: calc(100% - 20px);
174
- padding-left: 10px;
175
- }
176
- .cv-row-main-left-text-noimage {
177
- width: 100%;
178
- padding-left: 0px;
179
- }
180
- .cv-row-main-left-text-intact {
181
- font-size: 15px;
182
- height: 40px;
183
- line-height: 40px;
184
- overflow: hidden;
185
- }
186
- .cv-row-main-left-text-label {
187
- font-size: 15px;
188
- line-height: 22px;
189
- height: 22px;
190
- overflow: hidden;
191
- }
192
- .cv-row-main-left-text-sublabel {
193
- font-size: 12px;
194
- color: #999999;
195
- line-height: 18px;
196
- height: 18px;
197
- overflow: hidden;
198
- }
199
- .cv-row-main-center {
200
- width: calc(100% - 200px - 20px);
201
- display: table;
202
- height: 40px;
203
- padding-left: 10px;
204
- }
205
- .cv-row-main-center-explain,
206
- .cv-row-main-center-subexplain {
207
- font-size: 14px;
208
- color: #999999;
209
- line-height: 20px;
210
- height: 20px;
211
- overflow: hidden;
212
- text-align: right;
213
- }
214
-
215
- .cv-row-main-center-nourl {
216
- width: calc(100% - 200px);
217
- }
218
- .cv-row-main-center-intact {
219
- font-size: 14px;
220
- color: #999999;
221
- display: table-row;
222
- vertical-align: middle;
223
- line-height: 20px;
224
- height: 40px;
225
- overflow: hidden;
226
- max-height: 40px;
227
- text-align: right;
228
- }
229
-
230
- .cv-row-main-more {
231
- height: 40px;
232
- width: 20px;
233
- }
234
- .cv-row-main-more-top,
235
- .cv-row-main-more-bottom {
236
- width: 10px;
237
- height: 2px;
238
- background-color: #c1c1c1;
239
- position: relative;
240
- left: 10px;
241
- }
242
- .cv-row-main-more-top {
243
- transform: rotate(45deg);
244
- top: 16px;
245
- }
246
- .cv-row-main-more-bottom {
247
- transform: rotate(-45deg);
248
- top: 20px;
249
- }
250
- .cv-row-message {
251
- font-size: 13px;
252
- color: #999999;
253
- line-height: 1.5em;
254
- padding: 5px 15px 5px 0;
255
- }
256
- </style>