帧视界壹通告,付费看视频的微信小程序
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.

217 lines
6.9 KiB

11 months ago
  1. <template>
  2. <view
  3. class="uv-text"
  4. :class="[]"
  5. v-if="show"
  6. :style="{
  7. margin: margin,
  8. justifyContent: align === 'left' ? 'flex-start' : align === 'center' ? 'center' : 'flex-end'
  9. }"
  10. @tap="clickHandler"
  11. >
  12. <text
  13. :class="['uv-text__price', type && `uv-text__value--${type}`]"
  14. v-if="mode === 'price'"
  15. :style="[valueStyle]"
  16. ></text
  17. >
  18. <view class="uv-text__prefix-icon" v-if="prefixIcon">
  19. <uv-icon
  20. :name="prefixIcon"
  21. :customStyle="$uv.addStyle(iconStyle)"
  22. ></uv-icon>
  23. </view>
  24. <uv-link
  25. v-if="mode === 'link'"
  26. :text="value"
  27. :href="href"
  28. underLine
  29. ></uv-link>
  30. <template v-else-if="openType && isMp">
  31. <button
  32. class="uv-reset-button uv-text__value"
  33. :style="[valueStyle]"
  34. :openType="openType"
  35. @getuserinfo="onGetUserInfo"
  36. @contact="onContact"
  37. @getphonenumber="onGetPhoneNumber"
  38. @error="onError"
  39. @launchapp="onLaunchApp"
  40. @opensetting="onOpenSetting"
  41. :lang="lang"
  42. :session-from="sessionFrom"
  43. :send-message-title="sendMessageTitle"
  44. :send-message-path="sendMessagePath"
  45. :send-message-img="sendMessageImg"
  46. :show-message-card="showMessageCard"
  47. :app-parameter="appParameter"
  48. >
  49. {{ value }}
  50. </button>
  51. </template>
  52. <text
  53. v-else
  54. class="uv-text__value"
  55. :style="[valueStyle]"
  56. :class="[
  57. type && `uv-text__value--${type}`,
  58. lines && `uv-line-${lines}`
  59. ]"
  60. >{{ value }}</text
  61. >
  62. <view class="uv-text__suffix-icon" v-if="suffixIcon">
  63. <uv-icon
  64. :name="suffixIcon"
  65. :customStyle="$uv.addStyle(iconStyle)"
  66. ></uv-icon>
  67. </view>
  68. </view>
  69. </template>
  70. <script>
  71. import value from './value.js'
  72. import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
  73. import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
  74. import button from '@/uni_modules/uv-ui-tools/libs/mixin/button.js'
  75. import openType from '@/uni_modules/uv-ui-tools/libs/mixin/openType.js'
  76. import props from './props.js'
  77. /**
  78. * Text 文本
  79. * @description 此组件集成了文本类在项目中的常用功能包括状态拨打电话格式化日期*替换超链接...等功能 您大可不必在使用特殊文本时自己定义text组件几乎涵盖您能使用的大部分场景
  80. * @tutorial https://www.uvui.cn/components/loading.html
  81. * @property {String} type 主题颜色
  82. * @property {Boolean} show 是否显示默认 true
  83. * @property {String | Number} text 显示的值
  84. * @property {String} prefixIcon 前置图标
  85. * @property {String} suffixIcon 后置图标
  86. * @property {String} mode 文本处理的匹配模式 text-普通文本price-价格phone-手机号name-姓名date-日期link-超链接
  87. * @property {String} href mode=link下配置的链接
  88. * @property {String | Function} format 格式化规则
  89. * @property {Boolean} call mode=phone时点击文本是否拨打电话默认 false
  90. * @property {String} openType 小程序的打开方式
  91. * @property {Boolean} bold 是否粗体默认normal默认 false
  92. * @property {Boolean} block 是否块状默认 false
  93. * @property {String | Number} lines 文本显示的行数如果设置超出此行数将会显示省略号
  94. * @property {String} color 文本颜色默认 '#303133'
  95. * @property {String | Number} size 字体大小默认 15
  96. * @property {Object | String} iconStyle 图标的样式 默认 {fontSize: '15px'}
  97. * @property {String} decoration 文字装饰下划线中划线等可选值 none|underline|line-through默认 'none'
  98. * @property {Object | String | Number} margin 外边距对象字符串数值形式均可默认 0
  99. * @property {String | Number} lineHeight 文本行高
  100. * @property {String} align 文本对齐方式可选值left|center|right默认 'left'
  101. * @property {String} wordWrap 文字换行可选值break-word|normal|anywhere默认 'normal'
  102. * @event {Function} click 点击触发事件
  103. * @example <uv-text text="我用十年青春,赴你最后之约"></uv-text>
  104. */
  105. export default {
  106. name: 'uv-text',
  107. emits: ['click'],
  108. // #ifdef MP
  109. mixins: [mpMixin, mixin, value, button, openType, props],
  110. // #endif
  111. // #ifndef MP
  112. mixins: [mpMixin, mixin, value, props],
  113. // #endif
  114. computed: {
  115. valueStyle() {
  116. const style = {
  117. textDecoration: this.decoration,
  118. fontWeight: this.bold ? 'bold' : 'normal',
  119. wordWrap: this.wordWrap,
  120. fontSize: this.$uv.addUnit(this.size)
  121. };
  122. !this.type && (style.color = this.color);
  123. this.isNvue && this.lines && (style.lines = this.lines);
  124. if(this.isNvue && this.mode != 'price' && !this.prefixIcon && !this.suffixIcon) {
  125. style.flex = 1;
  126. style.textAlign = this.align === 'left' ? 'flex-start' : this.align === 'center' ? 'center' : 'right';
  127. }
  128. this.lineHeight && (style.lineHeight = this.$uv.addUnit(this.lineHeight));
  129. !this.isNvue && this.block && (style.display = 'block');
  130. return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle));
  131. },
  132. isNvue() {
  133. let nvue = false
  134. // #ifdef APP-NVUE
  135. nvue = true
  136. // #endif
  137. return nvue
  138. },
  139. isMp() {
  140. let mp = false
  141. // #ifdef MP
  142. mp = true
  143. // #endif
  144. return mp
  145. }
  146. },
  147. data() {
  148. return {}
  149. },
  150. methods: {
  151. clickHandler() {
  152. // 如果为手机号模式,拨打电话
  153. if (this.call && this.mode === 'phone') {
  154. uni.makePhoneCall({
  155. phoneNumber: this.text
  156. })
  157. }
  158. this.$emit('click')
  159. }
  160. }
  161. }
  162. </script>
  163. <style lang="scss" scoped>
  164. $show-lines: 1;
  165. $show-reset-button: 1;
  166. @import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
  167. @import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
  168. @import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
  169. .uv-text {
  170. @include flex(row);
  171. align-items: center;
  172. flex-wrap: nowrap;
  173. flex: 1;
  174. /* #ifndef APP-NVUE */
  175. width: 100%;
  176. /* #endif */
  177. &__price {
  178. font-size: 14px;
  179. color: $uv-content-color;
  180. }
  181. &__value {
  182. font-size: 14px;
  183. @include flex;
  184. color: $uv-content-color;
  185. flex-wrap: wrap;
  186. // flex: 1;
  187. text-overflow: ellipsis;
  188. align-items: center;
  189. &--primary {
  190. color: $uv-primary;
  191. }
  192. &--warning {
  193. color: $uv-warning;
  194. }
  195. &--success {
  196. color: $uv-success;
  197. }
  198. &--info {
  199. color: $uv-info;
  200. }
  201. &--error {
  202. color: $uv-error;
  203. }
  204. &--main {
  205. color: $uv-main-color;
  206. }
  207. &--content {
  208. color: $uv-content-color;
  209. }
  210. &--tips {
  211. color: $uv-tips-color;
  212. }
  213. &--light {
  214. color: $uv-light-color;
  215. }
  216. }
  217. }
  218. </style>