├── .gitignore
├── App.vue
├── components
    ├── coolc-coupon
    │   └── coolc-coupon.vue
    ├── mix-list-cell.vue
    ├── package-lock.json
    ├── package.json
    └── uni-ui
    │   ├── uni-badge
    │       └── uni-badge.vue
    │   ├── uni-calendar
    │       ├── calendar.js
    │       ├── uni-calendar-item.vue
    │       ├── uni-calendar.vue
    │       └── util.js
    │   ├── uni-card
    │       └── uni-card.vue
    │   ├── uni-collapse-item
    │       └── uni-collapse-item.vue
    │   ├── uni-collapse
    │       └── uni-collapse.vue
    │   ├── uni-combox
    │       └── uni-combox.vue
    │   ├── uni-countdown
    │       └── uni-countdown.vue
    │   ├── uni-drawer
    │       └── uni-drawer.vue
    │   ├── uni-fab
    │       └── uni-fab.vue
    │   ├── uni-fav
    │       └── uni-fav.vue
    │   ├── uni-goods-nav
    │       └── uni-goods-nav.vue
    │   ├── uni-grid-item
    │       ├── uni-grid-item copy.vue
    │       └── uni-grid-item.vue
    │   ├── uni-grid
    │       └── uni-grid.vue
    │   ├── uni-icons
    │       ├── icons.js
    │       ├── uni-icons.vue
    │       └── uni.ttf
    │   ├── uni-indexed-list
    │       ├── uni-indexed-list-item.vue
    │       └── uni-indexed-list.vue
    │   ├── uni-link
    │       └── uni-link.vue
    │   ├── uni-list-ad
    │       └── uni-list-ad.vue
    │   ├── uni-list-chat
    │       ├── uni-list-chat.scss
    │       └── uni-list-chat.vue
    │   ├── uni-list-item
    │       └── uni-list-item.vue
    │   ├── uni-list
    │       ├── uni-list.vue
    │       ├── uni-refresh.vue
    │       └── uni-refresh.wxs
    │   ├── uni-load-more
    │       └── uni-load-more.vue
    │   ├── uni-nav-bar
    │       └── uni-nav-bar.vue
    │   ├── uni-notice-bar
    │       └── uni-notice-bar.vue
    │   ├── uni-number-box
    │       └── uni-number-box.vue
    │   ├── uni-pagination
    │       └── uni-pagination.vue
    │   ├── uni-popup-dialog
    │       └── uni-popup-dialog.vue
    │   ├── uni-popup-message
    │       └── uni-popup-message.vue
    │   ├── uni-popup-share
    │       └── uni-popup-share.vue
    │   ├── uni-popup
    │       ├── message.js
    │       ├── popup.js
    │       ├── share.js
    │       └── uni-popup.vue
    │   ├── uni-rate
    │       └── uni-rate.vue
    │   ├── uni-search-bar
    │       └── uni-search-bar.vue
    │   ├── uni-section
    │       └── uni-section.vue
    │   ├── uni-segmented-control
    │       └── uni-segmented-control.vue
    │   ├── uni-status-bar
    │       └── uni-status-bar.vue
    │   ├── uni-steps
    │       └── uni-steps.vue
    │   ├── uni-swipe-action-item
    │       ├── bindingx.js
    │       ├── index.wxs
    │       ├── mpalipay.js
    │       ├── mpother.js
    │       ├── mpwxs.js
    │       └── uni-swipe-action-item.vue
    │   ├── uni-swipe-action
    │       └── uni-swipe-action.vue
    │   ├── uni-swiper-dot
    │       └── uni-swiper-dot.vue
    │   ├── uni-tag
    │       └── uni-tag.vue
    │   ├── uni-test
    │       └── uni-test.vue
    │   ├── uni-title
    │       └── uni-title.vue
    │   └── uni-transition
    │       └── uni-transition.vue
├── image
    ├── 1.png
    ├── 2.png
    ├── 图层1.png
    ├── 图层2.png
    ├── 图层3.png
    └── 图层4.png
├── main.js
├── manifest.json
├── pages.json
├── pages
    ├── cart
    │   └── cart.vue
    ├── find
    │   └── find.vue
    ├── index
    │   └── index.vue
    └── mine
    │   ├── center.vue
    │   ├── hands.vue
    │   ├── home.vue
    │   ├── join.vue
    │   ├── login.vue
    │   ├── mine.vue
    │   ├── notice.vue
    │   ├── qusetion.vue
    │   └── service.vue
├── static
    ├── arc.png
    ├── icons
    │   ├── 发现 (1).png
    │   ├── 发现.png
    │   ├── 我的 (1).png
    │   ├── 我的.png
    │   ├── 订单 (1).png
    │   ├── 订单.png
    │   ├── 首页 (2).png
    │   └── 首页.png
    ├── missing-face.png
    └── yticon.ttf
├── uni.scss
└── utils
    ├── html.js
    └── zgrequest.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .project
3 | unpackage/
4 | .DS_Store


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <style lang='scss'>
 2 | @font-face {font-family: "iconfont";
 3 |   src: url('//at.alicdn.com/t/font_2263203_2g20oagc2zt.eot?t=1607870753669'); /* IE9 */
 4 |   src: url('//at.alicdn.com/t/font_2263203_2g20oagc2zt.eot?t=1607870753669#iefix') format('embedded-opentype'), /* IE6-IE8 */
 5 |   url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAiEAAsAAAAAEDQAAAg1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCELgqRXI4jATYCJAMsCxgABCAFhG0HgSAbmw0RFaz1IfsigcPLxxMb71cw5sdjcnErNZI+08/zm/tzXzSwAtZprtPEP2pZv8wCbdDe2sAoZkUQVn383fDweXt/282mFmAUxlkYNEh8lmgCgSeByWYX+NuCwGukwbhtcardeR4cGxIazIOle/zS2klkRzlSZst95e4/tdbqa1Tw6SqhUD+23bt9WWNuUZXGfImEJG6dEvBI7sSCiW1yKRNPDfNM5cdOBwgAxx9iAU2FI5TAIDBBaLa1tdQBU0pA9FgQJo5q2bVEoVVAYtJS7LYAVsbvj34NQQwAhszAZ1I0FzRCtkP04cN1Th1U4nrQny4NAKZLAeAAYgGAmPK7VTEBKFq747i2hEkA4AEu9NvEtxzH4esIcUQ7khwljosfTE4nWMdK7J/nIx5aK5NoaxaBQ6GRcAws/ONVUFSAfkklBxwiGwoQcLgJYJfMFwIIsBDIUhYNARRYIgTQYEkQQIKVQAAOdhGhgAEfTB0AAwDA+11kADAUAHsF+ADm+TFlf2z0A6dhJNMkvLEiIL2oCLExIYLAxslcxDC7UUJEqTRGJqOI24b4urlVGMwI6fuNuwB0O9X6fp437tLt5DiDuSpC1THKIWwsIRqjojHVe4/RIEErzImo42ItXM8uYz/S9243bO2u43Q924w7+kpwfTS92bCz1aC2DTt60qerT34tTS+zqbWPxm7X5CKjysrApiotFrOycmvo5fojKqvm2LUIe59Q21Q8Z9lileAwY3Z59ewOnWl5r7R+obJ/0Ngc0wxWJ7AIGgrUnYadF2tb85AzKM4r23tuvbRLvmXgpWhFK+hi29MtsetA19GymX5gX8wjn3NI/0m7TtrU6LbctUPeIu/Sy5o7DR4I1aAHzmv3wDqEdXhUR6vgBuEUww25stmUpaNdsQaZLPlwzR6y2TZWMMjKO+UVXa/mJNKyDg9te72oolzQ1l21BW+xFw1rWH7ZErjJWiDdeqZtmdIyT2VdrrHPbzxtid37sKmpp+xsHrjHevyU45axxgd+G+/xEpKnxOtuG+76i2me+Cx+CkMnovVdch64KjF2QM8Z4zmfri5eQnOI7+gAqrdz4io113s2XObLS0BcfGTX+tgKN25TDac9o5/OpPqTJPQ0HrhZBAKr3seL+mWOzk5ZfXmvwVNb297u0S1VabvDOnijvKGuw73WDu9yTVffzG1nvODwfd2DBOg+HSreftYbHXukf5iI+s5FjBfad3qAbpdUKjL2y306zTK1YFjrujpudIpdxee3q6+fE/eqZOU8YPUqbkYOHJIwN3suq5OD5ByEm6PMHqIjn3p9eiVAGCS6cr0rr3gHsIg9Okik/T/c83OpidxmrxCcf/1r88Sn0nODS0O1qBZaImrCKwzLKsKrI1sAPteGVUYsX6I4Cm1QG1IerJm7pDRaHVPH1V/AA1TXc0gFo8Agr17FjAgvCRs71X+E/yhQgjbfNGeGKVfbABsLps8MGh38EZQhZcBI/5JhM6pD3dIgENc9JgMDyccaeOgceSvR2jtXCJom4LyilCtVA2ByAvDY5ru3o5ZE9kacjGwJH6ypq1pNFfGvA+NfWOEmxbDcvILUyCutwdlJaT9G8d87bq9k4YFffr3tfFyqAoZZp8mnxUZFD1gid61dnJmDio+Tk7lYvgQA1roBuQg/OMP/EOUkFL0THYwPnkft3o8twOYTSA8ZvIo6dxlfja85d2nvRJkSHzsBqZASAJeSVeEz56IqVD1zzgqFOCe/iCDyC3NFm0eMYjkbHU6HT6DDjmeFjaJXpePljQeGaugWa1i+f7TCx2f06AMHFIxbKdIwl9xchMBdUBsSN3+9vqPbmDvWd9vTrY3Dm9NGxcenjxo5clR6Xt6otMgyMj7+yUeNTMvLG5kOi9NDgjBcEur1b6Visru4SOw+WVH5j5yOWLGwgTEzCto8rjK8JLp+s7VPaXKeD93L1EeXhFeOM9OK+haNk1e4t4T5KPd7MWZ68HyJceHVHC2tef6bvIAX4gXGsr3MIKaX9fKZwjFmOLQwxK6guezzw78K/0pr6gvrG2Mt4X0KMX4x8CY1+nbDJpCNfo/6b1VSrMHLFG1yh0mIMn0Xpfz+9bOERKmwSGAbpav1FRd6TBak8fGvnk4thYSLX5/PFw6sai5tXnVAyD//Zn9JrVPrjro/fvXS+4P83MXuD7KXiAf7YSL8QXnwUlSF7RIKNLYW+EZ4x8HZOZfAcB0AAPZgrwVO+Yv0X1/uhZ1zYmUdgXC9819nF0HgbW1ZA/t69LYa7F2mba6RpP/G8P94xc/+HRYUQ3njueQZXA8wvkFrNDIT5Jke1X+OjZ3lUyA7yzm3IS2cTrkUJ/1LnKo+8HpBgsswAJzOAXBSjhu8PD2XitF4k0tzPwzNzw/HCFUT+lg/Ei/ej8LI8uPEQNHePHeYADhUWACIhoWBH+IC+/wwYucw3qa/gwnoX/iRZPCdk4IB4X4c/l88HfLRS5B5jegUe2hPQJ2wN8lqkuZfGPLsItnD9f4wJhKGuqh21Z/IGE+xRdqHRtWDj7LAR7AJzrPAGmXETosBVeu2LP18y6KTZWO8ipCjPmgPtE4xSUcw71qZ2tt/QUE2c2JPv+uYf1CU0MJBrVAJ1J+URf3eSttkL2gopXlgu0ZiAT4oDc26QoC1faUR6qjCcEDZaquk8byUFpfny/dN4esbkJ+Qj0SmUGl0BhPDCd2vyrvUOb4ZMvXu5oCf6sjmnGUkxyrZHJBacqJUPx+rwOZz0Lw83G7IrnXsc4t8M5JHvm4pLrtPg+RTpQZzAjxdvf/seLMBAAA=') format('woff2'),
 6 |   url('//at.alicdn.com/t/font_2263203_2g20oagc2zt.woff?t=1607870753669') format('woff'),
 7 |   url('//at.alicdn.com/t/font_2263203_2g20oagc2zt.ttf?t=1607870753669') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
 8 |   url('//at.alicdn.com/t/font_2263203_2g20oagc2zt.svg?t=1607870753669#iconfont') format('svg'); /* iOS 4.1- */
 9 | }
10 | 
11 | 
12 | 	.iconfont {
13 | 		font-family: "iconfont" !important;
14 | 		font-size: 24px;
15 | 		font-style: normal;
16 | 		-webkit-font-smoothing: antialiased;
17 | 		-moz-osx-font-smoothing: grayscale;
18 | 		color: #fff;
19 | 	}
20 | 
21 | 	.icon-btn_scan:before {
22 | 	  content: "\e60d";
23 | 	}
24 | 	
25 | 	.icon-huida:before {
26 | 	  content: "\e7a0";
27 | 	}
28 | 	
29 | 	.icon-wenti:before {
30 | 	  content: "\e649";
31 | 	}
32 | 	
33 | 	.icon-zuojiantou:before {
34 | 	  content: "\e61c";
35 | 	}
36 | 	
37 | 	.icon-weibiaoti1:before {
38 | 	  content: "\e637";
39 | 	}
40 | 	
41 | 	.icon-xianxingtubiao_huabanfuben:before {
42 | 	  content: "\e62a";
43 | 	}
44 | 	
45 | 	.icon-jifen:before {
46 | 	  content: "\e636";
47 | 	}
48 | 	
49 | 	.icon-biji:before {
50 | 	  content: "\e6c2";
51 | 	}
52 | 	
53 | 	.icon-shoucang:before {
54 | 	  content: "\e612";
55 | 	}
56 | 	
57 | 	.icon-youhuiquan:before {
58 | 	  content: "\e623";
59 | 	}
60 | 
61 | 
62 | </style>
63 | 


--------------------------------------------------------------------------------
/components/coolc-coupon/coolc-coupon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <view class="coupon-item">
 3 | 		<view class="coupon-money">
 4 | 			<view class="nick" v-if="!types">{{item.seller_name}}使用</view>
 5 | 			<view class="layof" :style="{color:theme}">￥{{item.money}}</view>
 6 | 			<view class="end_time">{{item.end_time}}前使用</view>
 7 | 			<view v-if="!types">
 8 | 				<view class="tit">券号：{{item.ticket}}</view>
 9 | 				<view class="demand">{{item.title}}</view>
10 | 			</view>
11 | 		</view>
12 | 		<view class="get-btn" v-if="types" :style="{color:color, borderColor:color, background:solid}">选择使用</view>
13 | 		<navigator class="get-btn" v-if="!types" :style="{color:color, borderColor:color, background:solid}" :url='item.url'>立即使用</navigator>
14 |     </view>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 | 	components:{
20 | 
21 | 	},
22 | 	data() {
23 | 		return {
24 | 
25 | 		}
26 | 	},
27 | 	props:{
28 | 		item:{
29 | 			type: Object
30 | 		},
31 | 		types:{
32 | 			type: String,
33 | 			default: ''
34 | 		},
35 | 		theme:{
36 | 			type: String,
37 | 			default: '#ff9000'
38 | 		},
39 | 		solid:{
40 | 			type: String,
41 | 			default: '#ffffff'
42 | 		},
43 | 		color:{
44 | 			type: String,
45 | 			default: '#ff9000'
46 | 		},
47 | 	},
48 | 	methods: {
49 | 
50 | 	}
51 | }
52 | </script>
53 | 
54 | <style lang='scss'>
55 | .coupon-item {
56 | 	width:87%; height:auto; display:table; border-radius:10upx; padding:0 20upx; margin-top:22upx; border:1px solid #eeeeee; position:relative;
57 | 	.coupon-money {
58 | 		width:465upx; height:auto; display:table; float:left; padding:26upx 0; border-style:none dotted none none; border-color:#eeeeee;
59 | 		
60 | 		.nick { width:100%; height:50upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
61 | 		.tit { width:100%; height:50upx; line-height:50upx; font-size:$font-sm; color:$font-color-999; }
62 | 		.demand { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
63 | 		
64 | 		.layof { width:100%; height:48upx; line-height:30upx; font-size:44upx; color:#ff9000; font-weight:bold; }
65 | 		.end_time { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
66 | 	}
67 | 	.get-btn { width:146upx; height:52upx; line-height:50upx; position:absolute; top:50%; right:26upx; margin-top:-26upx; text-align:center; border-radius:60upx; color:#ff9000; border:1px solid #ff9000; font-size:$font-sm; float:right; }
68 | }
69 | .coupon-item:after { width:40upx; height:20upx; position:absolute; left:460upx; top:-1px; border-radius:0 0 40upx 40upx; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-top:0px; }
70 | .coupon-item:before { width:40upx; height:20upx; position:absolute; left:460upx; bottom:-1px; border-radius:40upx 40upx 0 0; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-bottom:0px; }
71 | </style>


--------------------------------------------------------------------------------
/components/mix-list-cell.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="content">
  3 | 		
  4 | 		<view class="mix-list-cell" :class="border" @click="eventClick" hover-class="cell-hover"  :hover-stay-time="50">
  5 | 			<text
  6 | 				v-if="icon"
  7 | 				class="cell-icon yticon"
  8 | 				:style="[{
  9 | 					color: iconColor,
 10 | 				}]"
 11 | 				:class="icon"
 12 | 			></text>
 13 | 			<text class="cell-tit clamp">{{title}}</text>
 14 | 			<text v-if="tips" class="cell-tip">{{tips}}</text>
 15 | 			<text class="cell-more yticon"
 16 | 				:class="typeList[navigateType]"
 17 | 			></text>
 18 | 		</view>
 19 | 
 20 | 	</view>
 21 | </template>
 22 |  
 23 | <script>
 24 | 	/**
 25 | 	 *  简单封装了下， 应用范围比较狭窄，可以在此基础上进行扩展使用
 26 | 	 *  比如加入image， iconSize可控等
 27 | 	 */
 28 | 	export default {
 29 | 		data() {
 30 | 			return {
 31 | 				typeList: {
 32 | 					left: 'icon-zuo',
 33 | 					right: 'icon-you',
 34 | 					up: 'icon-shang',
 35 | 					down: 'icon-xia'
 36 | 				},
 37 | 			}
 38 | 		},
 39 | 		props: {
 40 | 			icon: {
 41 | 				type: String,
 42 | 				default: ''
 43 | 			},
 44 | 			title: {
 45 | 				type: String,
 46 | 				default: '标题'
 47 | 			},
 48 | 			tips: {
 49 | 				type: String,
 50 | 				default: ''
 51 | 			},
 52 | 			navigateType: {
 53 | 				type: String,
 54 | 				default: 'right'
 55 | 			},
 56 | 			border: {
 57 | 				type: String,
 58 | 				default: 'b-b'
 59 | 			},
 60 | 			hoverClass: {
 61 | 				type: String,
 62 | 				default: 'cell-hover'
 63 | 			},
 64 | 			iconColor: {
 65 | 				type: String,
 66 | 				default: '#333'
 67 | 			}
 68 | 		},
 69 | 		methods: {
 70 | 			eventClick= (e) =>{
 71 | 				this.$emit('eventClick');
 72 | 			}
 73 | 		},
 74 | 	}
 75 | </script>
 76 | 
 77 | <style lang='scss'>
 78 | 
 79 | 	.icon .mix-list-cell.b-b:after{
 80 | 		left: 90upx;
 81 | 	}
 82 | 	.mix-list-cell{
 83 | 		display:flex;
 84 | 		align-items:baseline;
 85 | 		padding: 20upx $page-row-spacing;
 86 | 		line-height:60upx;
 87 | 		position:relative;
 88 | 		
 89 | 		&.cell-hover{
 90 | 			background:#fafafa;
 91 | 		}
 92 | 		&.b-b:after{
 93 | 			left: 30upx;
 94 | 		}
 95 | 
 96 | 		.cell-icon{
 97 | 			align-self:center;
 98 | 			width:56upx;
 99 | 			max-height:60upx;
100 | 			font-size:38upx;
101 | 		}
102 | 		.cell-more{
103 | 			align-self: center;
104 | 			font-size:30upx;
105 | 			color:$font-color-base;
106 | 			margin-left:$uni-spacing-row-sm;
107 | 		}
108 | 		.cell-tit{
109 | 			flex: 1;
110 | 			font-size: $font-base;
111 | 			color: $font-color-dark;
112 | 			margin-right:10upx;
113 | 		}
114 | 		.cell-tip{
115 | 			font-size: $font-sm+2upx;
116 | 			color: $font-color-light;
117 | 		}
118 | 	}
119 | </style>
120 | 


--------------------------------------------------------------------------------
/components/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "components",
 3 |   "version": "1.0.0",
 4 |   "lockfileVersion": 1,
 5 |   "requires": true,
 6 |   "dependencies": {
 7 |     "@babel/runtime": {
 8 |       "version": "7.12.5",
 9 |       "resolved": "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.12.5.tgz?cache=0&sync_timestamp=1604443606981&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.12.5.tgz",
10 |       "integrity": "sha1-QQ5+SHRB4bNgwpvnFdhw2bmFiC4=",
11 |       "requires": {
12 |         "regenerator-runtime": "^0.13.4"
13 |       }
14 |     },
15 |     "@popperjs/core": {
16 |       "version": "2.5.4",
17 |       "resolved": "https://registry.npm.taobao.org/@popperjs/core/download/@popperjs/core-2.5.4.tgz?cache=0&sync_timestamp=1604076368519&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40popperjs%2Fcore%2Fdownload%2F%40popperjs%2Fcore-2.5.4.tgz",
18 |       "integrity": "sha1-3iW12p9yeYWjdX/Vm10Cirp1hBo="
19 |     },
20 |     "@vant/icons": {
21 |       "version": "1.4.0",
22 |       "resolved": "https://registry.npm.taobao.org/@vant/icons/download/@vant/icons-1.4.0.tgz?cache=0&sync_timestamp=1604235300752&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Ficons%2Fdownload%2F%40vant%2Ficons-1.4.0.tgz",
23 |       "integrity": "sha1-qR94lPLzQ1b3il1vi51PGkat0MU="
24 |     },
25 |     "@vant/popperjs": {
26 |       "version": "1.0.2",
27 |       "resolved": "https://registry.npm.taobao.org/@vant/popperjs/download/@vant/popperjs-1.0.2.tgz?cache=0&sync_timestamp=1607062513238&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Fpopperjs%2Fdownload%2F%40vant%2Fpopperjs-1.0.2.tgz",
28 |       "integrity": "sha1-Ui1xZWI1Elo64I6ccBo7rm/YjXs=",
29 |       "requires": {
30 |         "@popperjs/core": "^2.5.4"
31 |       }
32 |     },
33 |     "@vue/babel-helper-vue-jsx-merge-props": {
34 |       "version": "1.2.1",
35 |       "resolved": "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.2.1.tgz?cache=0&sync_timestamp=1602851174430&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fbabel-helper-vue-jsx-merge-props%2Fdownload%2F%40vue%2Fbabel-helper-vue-jsx-merge-props-1.2.1.tgz",
36 |       "integrity": "sha1-MWJKelBfsU2h1YAjclpMXycOaoE="
37 |     },
38 |     "regenerator-runtime": {
39 |       "version": "0.13.7",
40 |       "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz",
41 |       "integrity": "sha1-ysLazIoepnX+qrrriugziYrkb1U="
42 |     },
43 |     "vant": {
44 |       "version": "2.11.2",
45 |       "resolved": "https://registry.npm.taobao.org/vant/download/vant-2.11.2.tgz?cache=0&sync_timestamp=1607650039589&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvant%2Fdownload%2Fvant-2.11.2.tgz",
46 |       "integrity": "sha1-I5xcysneJ2S0Ba/61AjGnbCwnaA=",
47 |       "requires": {
48 |         "@babel/runtime": "7.x",
49 |         "@vant/icons": "1.4.0",
50 |         "@vant/popperjs": "^1.0.0",
51 |         "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
52 |         "vue-lazyload": "1.2.3"
53 |       }
54 |     },
55 |     "vue-lazyload": {
56 |       "version": "1.2.3",
57 |       "resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.2.3.tgz",
58 |       "integrity": "sha1-kB+ewVx+bKeHgaK65KNDaGve2yw="
59 |     }
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/components/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "components",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "vant": "^2.11.2"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-badge/uni-badge.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<text v-if="text" :class="inverted ? 'uni-badge--' + type + ' uni-badge--' + size + ' uni-badge--' + type + '-inverted' : 'uni-badge--' + type + ' uni-badge--' + size"
  3 | 	 :style="badgeStyle" class="uni-badge" @click="onClick()">{{ text }}</text>
  4 | </template>
  5 | 
  6 | <script>
  7 | 	/**
  8 | 	 * Badge 数字角标
  9 | 	 * @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
 10 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=21
 11 | 	 * @property {String} text 角标内容
 12 | 	 * @property {String} type = [default|primary|success|warning|error] 颜色类型
 13 | 	 * 	@value default 灰色
 14 | 	 * 	@value primary 蓝色
 15 | 	 * 	@value success 绿色
 16 | 	 * 	@value warning 黄色
 17 | 	 * 	@value error 红色
 18 | 	 * @property {String} size = [normal|small] Badge 大小
 19 | 	 * 	@value normal 一般尺寸
 20 | 	 * 	@value small 小尺寸
 21 | 	 * @property {String} inverted = [true|false] 是否无需背景颜色
 22 | 	 * @event {Function} click 点击 Badge 触发事件
 23 | 	 * @example <uni-badge text="1"></uni-badge>
 24 | 	 */
 25 | 	export default {
 26 | 		name: 'UniBadge',
 27 | 		props: {
 28 | 			type: {
 29 | 				type: String,
 30 | 				default: 'default'
 31 | 			},
 32 | 			inverted: {
 33 | 				type: Boolean,
 34 | 				default: false
 35 | 			},
 36 | 			text: {
 37 | 				type: [String, Number],
 38 | 				default: ''
 39 | 			},
 40 | 			size: {
 41 | 				type: String,
 42 | 				default: 'normal'
 43 | 			}
 44 | 		},
 45 | 		data() {
 46 | 			return {
 47 | 				badgeStyle: ''
 48 | 			};
 49 | 		},
 50 | 		watch: {
 51 | 			text() {
 52 | 				this.setStyle()
 53 | 			}
 54 | 		},
 55 | 		mounted() {
 56 | 			this.setStyle()
 57 | 		},
 58 | 		methods: {
 59 | 			setStyle() {
 60 | 				this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
 61 | 			},
 62 | 			onClick() {
 63 | 				this.$emit('click');
 64 | 			}
 65 | 		}
 66 | 	};
 67 | </script>
 68 | 
 69 | <style lang="scss" scoped>
 70 | 	$bage-size: 12px;
 71 | 	$bage-small: scale(0.8);
 72 | 	$bage-height: 20px;
 73 | 
 74 | 	.uni-badge {
 75 | 		/* #ifndef APP-PLUS */
 76 | 		display: flex;
 77 | 		box-sizing: border-box;
 78 | 		overflow: hidden;
 79 | 		/* #endif */
 80 | 		justify-content: center;
 81 | 		flex-direction: row;
 82 | 		height: $bage-height;
 83 | 		line-height: $bage-height;
 84 | 		color: $uni-text-color;
 85 | 		border-radius: 100px;
 86 | 		background-color: $uni-bg-color-hover;
 87 | 		background-color: transparent;
 88 | 		text-align: center;
 89 | 		font-family: 'Helvetica Neue', Helvetica, sans-serif;
 90 | 		font-size: $bage-size;
 91 | 		padding: 0px 6px;
 92 | 	}
 93 | 
 94 | 	.uni-badge--inverted {
 95 | 		padding: 0 5px 0 0;
 96 | 		color: $uni-bg-color-hover;
 97 | 	}
 98 | 
 99 | 	.uni-badge--default {
100 | 		color: $uni-text-color;
101 | 		background-color: $uni-bg-color-hover;
102 | 	}
103 | 
104 | 	.uni-badge--default-inverted {
105 | 		color: $uni-text-color-grey;
106 | 		background-color: transparent;
107 | 	}
108 | 
109 | 	.uni-badge--primary {
110 | 		color: $uni-text-color-inverse;
111 | 		background-color: $uni-color-primary;
112 | 	}
113 | 
114 | 	.uni-badge--primary-inverted {
115 | 		color: $uni-color-primary;
116 | 		background-color: transparent;
117 | 	}
118 | 
119 | 	.uni-badge--success {
120 | 		color: $uni-text-color-inverse;
121 | 		background-color: $uni-color-success;
122 | 	}
123 | 
124 | 	.uni-badge--success-inverted {
125 | 		color: $uni-color-success;
126 | 		background-color: transparent;
127 | 	}
128 | 
129 | 	.uni-badge--warning {
130 | 		color: $uni-text-color-inverse;
131 | 		background-color: $uni-color-warning;
132 | 	}
133 | 
134 | 	.uni-badge--warning-inverted {
135 | 		color: $uni-color-warning;
136 | 		background-color: transparent;
137 | 	}
138 | 
139 | 	.uni-badge--error {
140 | 		color: $uni-text-color-inverse;
141 | 		background-color: $uni-color-error;
142 | 	}
143 | 
144 | 	.uni-badge--error-inverted {
145 | 		color: $uni-color-error;
146 | 		background-color: transparent;
147 | 	}
148 | 
149 | 	.uni-badge--small {
150 | 		transform: $bage-small;
151 | 		transform-origin: center center;
152 | 	}
153 | </style>
154 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-calendar/uni-calendar-item.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-calendar-item__weeks-box" :class="{
  3 | 		'uni-calendar-item--disable':weeks.disable,
  4 | 		'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
  5 | 		'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
  6 | 		'uni-calendar-item--before-checked':weeks.beforeMultiple,
  7 | 		'uni-calendar-item--multiple': weeks.multiple,
  8 | 		'uni-calendar-item--after-checked':weeks.afterMultiple,
  9 | 		}"
 10 | 	 @click="choiceDate(weeks)">
 11 | 		<view class="uni-calendar-item__weeks-box-item">
 12 | 			<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
 13 | 			<text class="uni-calendar-item__weeks-box-text" :class="{
 14 | 				'uni-calendar-item--isDay-text': weeks.isDay,
 15 | 				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
 16 | 				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
 17 | 				'uni-calendar-item--before-checked':weeks.beforeMultiple,
 18 | 				'uni-calendar-item--multiple': weeks.multiple,
 19 | 				'uni-calendar-item--after-checked':weeks.afterMultiple,
 20 | 				'uni-calendar-item--disable':weeks.disable,
 21 | 				}">{{weeks.date}}</text>
 22 | 			<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
 23 | 				'uni-calendar-item--isDay-text':weeks.isDay,
 24 | 				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
 25 | 				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
 26 | 				'uni-calendar-item--before-checked':weeks.beforeMultiple,
 27 | 				'uni-calendar-item--multiple': weeks.multiple,
 28 | 				'uni-calendar-item--after-checked':weeks.afterMultiple,
 29 | 				}">今天</text>
 30 | 			<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
 31 | 				'uni-calendar-item--isDay-text':weeks.isDay,
 32 | 				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
 33 | 				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
 34 | 				'uni-calendar-item--before-checked':weeks.beforeMultiple,
 35 | 				'uni-calendar-item--multiple': weeks.multiple,
 36 | 				'uni-calendar-item--after-checked':weeks.afterMultiple,
 37 | 				'uni-calendar-item--disable':weeks.disable,
 38 | 				}">{{weeks.isDay?'今天': (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
 39 | 			<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
 40 | 				'uni-calendar-item--extra':weeks.extraInfo.info,
 41 | 				'uni-calendar-item--isDay-text':weeks.isDay,
 42 | 				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
 43 | 				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
 44 | 				'uni-calendar-item--before-checked':weeks.beforeMultiple,
 45 | 				'uni-calendar-item--multiple': weeks.multiple,
 46 | 				'uni-calendar-item--after-checked':weeks.afterMultiple,
 47 | 				'uni-calendar-item--disable':weeks.disable,
 48 | 				}">{{weeks.extraInfo.info}}</text>
 49 | 		</view>
 50 | 	</view>
 51 | </template>
 52 | 
 53 | <script>
 54 | 	export default {
 55 | 		props: {
 56 | 			weeks: {
 57 | 				type: Object,
 58 | 				default () {
 59 | 					return {}
 60 | 				}
 61 | 			},
 62 | 			calendar: {
 63 | 				type: Object,
 64 | 				default: () => {
 65 | 					return {}
 66 | 				}
 67 | 			},
 68 | 			selected: {
 69 | 				type: Array,
 70 | 				default: () => {
 71 | 					return []
 72 | 				}
 73 | 			},
 74 | 			lunar: {
 75 | 				type: Boolean,
 76 | 				default: false
 77 | 			}
 78 | 		},
 79 | 		methods: {
 80 | 			choiceDate(weeks) {
 81 | 				this.$emit('change', weeks)
 82 | 			}
 83 | 		}
 84 | 	}
 85 | </script>
 86 | 
 87 | <style lang="scss" scoped>
 88 | 	.uni-calendar-item__weeks-box {
 89 | 		flex: 1;
 90 | 		/* #ifndef APP-NVUE */
 91 | 		display: flex;
 92 | 		/* #endif */
 93 | 		flex-direction: column;
 94 | 		justify-content: center;
 95 | 		align-items: center;
 96 | 	}
 97 | 
 98 | 	.uni-calendar-item__weeks-box-text {
 99 | 		font-size: $uni-font-size-base;
100 | 		color: $uni-text-color;
101 | 	}
102 | 
103 | 	.uni-calendar-item__weeks-lunar-text {
104 | 		font-size: $uni-font-size-sm;
105 | 		color: $uni-text-color;
106 | 	}
107 | 
108 | 	.uni-calendar-item__weeks-box-item {
109 | 		position: relative;
110 | 		/* #ifndef APP-NVUE */
111 | 		display: flex;
112 | 		/* #endif */
113 | 		flex-direction: column;
114 | 		justify-content: center;
115 | 		align-items: center;
116 | 		width: 100rpx;
117 | 		height: 100rpx;
118 | 	}
119 | 
120 | 	.uni-calendar-item__weeks-box-circle {
121 | 		position: absolute;
122 | 		top: 5px;
123 | 		right: 5px;
124 | 		width: 8px;
125 | 		height: 8px;
126 | 		border-radius: 8px;
127 | 		background-color: $uni-color-error;
128 | 
129 | 	}
130 | 
131 | 	.uni-calendar-item--disable {
132 | 		background-color: rgba(249, 249, 249, $uni-opacity-disabled);
133 | 		color: $uni-text-color-disable;
134 | 	}
135 | 
136 | 	.uni-calendar-item--isDay-text {
137 | 		color: $uni-color-primary;
138 | 	}
139 | 
140 | 	.uni-calendar-item--isDay {
141 | 		background-color: $uni-color-primary;
142 | 		opacity: 0.8;
143 | 		color: #fff;
144 | 	}
145 | 
146 | 	.uni-calendar-item--extra {
147 | 		color: $uni-color-error;
148 | 		opacity: 0.8;
149 | 	}
150 | 
151 | 	.uni-calendar-item--checked {
152 | 		background-color: $uni-color-primary;
153 | 		color: #fff;
154 | 		opacity: 0.8;
155 | 	}
156 | 
157 | 	.uni-calendar-item--multiple {
158 | 		background-color: $uni-color-primary;
159 | 		color: #fff;
160 | 		opacity: 0.8;
161 | 	}
162 | 	.uni-calendar-item--before-checked {
163 | 		background-color: #ff5a5f;
164 | 		color: #fff;
165 | 	}
166 | 	.uni-calendar-item--after-checked {
167 | 		background-color: #ff5a5f;
168 | 		color: #fff;
169 | 	}
170 | </style>
171 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-collapse-item/uni-collapse-item.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
  3 | 	 class="uni-collapse-cell">
  4 | 		<view class="uni-collapse-cell__title" @click="onClick">
  5 | 			<image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
  6 | 			<text class="uni-collapse-cell__title-text">{{ title }}</text>
  7 | 			<!-- #ifdef MP-ALIPAY -->
  8 | 			<view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
  9 | 			 class="uni-collapse-cell__title-arrow">
 10 | 				<uni-icons color="#bbb" size="20" type="arrowdown" />
 11 | 			</view>
 12 | 			<!-- #endif -->
 13 | 			<!-- #ifndef MP-ALIPAY -->
 14 | 			<uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
 15 | 			 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
 16 | 			<!-- #endif -->
 17 | 		</view>
 18 | 		<view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
 19 | 			<view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-50%)'}">
 20 | 				<slot />
 21 | 			</view>
 22 | 		</view>
 23 | 	</view>
 24 | </template>
 25 | 
 26 | <script>
 27 | 	import uniIcons from '../uni-icons/uni-icons.vue'
 28 | 	/**
 29 | 	 * CollapseItem 折叠面板子组件
 30 | 	 * @description 折叠面板子组件
 31 | 	 * @property {String} title 标题文字
 32 | 	 * @property {String} thumb 标题左侧缩略图
 33 | 	 * @property {Boolean} disabled = [true|false] 是否展开面板
 34 | 	 * @property {Boolean} showAnimation = [true|false] 开启动画
 35 | 	 */
 36 | 	export default {
 37 | 		name: 'UniCollapseItem',
 38 | 		components: {
 39 | 			uniIcons
 40 | 		},
 41 | 		props: {
 42 | 			title: {
 43 | 				// 列表标题
 44 | 				type: String,
 45 | 				default: ''
 46 | 			},
 47 | 			name: {
 48 | 				// 唯一标识符
 49 | 				type: [Number, String],
 50 | 				default: 0
 51 | 			},
 52 | 			disabled: {
 53 | 				// 是否禁用
 54 | 				type: Boolean,
 55 | 				default: false
 56 | 			},
 57 | 			showAnimation: {
 58 | 				// 是否显示动画
 59 | 				type: Boolean,
 60 | 				default: false
 61 | 			},
 62 | 			open: {
 63 | 				// 是否展开
 64 | 				type: Boolean,
 65 | 				default: false
 66 | 			},
 67 | 			thumb: {
 68 | 				// 缩略图
 69 | 				type: String,
 70 | 				default: ''
 71 | 			}
 72 | 		},
 73 | 		data() {
 74 | 			return {
 75 | 				isOpen: false
 76 | 			}
 77 | 		},
 78 | 		watch: {
 79 | 			open(val) {
 80 | 				this.isOpen = val
 81 | 			}
 82 | 		},
 83 | 		inject: ['collapse'],
 84 | 		created() {
 85 | 			this.isOpen = this.open
 86 | 			this.nameSync = this.name ? this.name : this.collapse.childrens.length
 87 | 			this.collapse.childrens.push(this)
 88 | 			if (String(this.collapse.accordion) === 'true') {
 89 | 				if (this.isOpen) {
 90 | 					let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
 91 | 					if (lastEl) {
 92 | 						this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
 93 | 					}
 94 | 				}
 95 | 			}
 96 | 		},
 97 | 		methods: {
 98 | 			onClick() {
 99 | 				if (this.disabled) {
100 | 					return
101 | 				}
102 | 				if (String(this.collapse.accordion) === 'true') {
103 | 					this.collapse.childrens.forEach(vm => {
104 | 						if (vm === this) {
105 | 							return
106 | 						}
107 | 						vm.isOpen = false
108 | 					})
109 | 				}
110 | 				this.isOpen = !this.isOpen
111 | 				this.collapse.onChange && this.collapse.onChange()
112 | 				this.$forceUpdate()
113 | 			}
114 | 		}
115 | 	}
116 | </script>
117 | 
118 | <style lang="scss" scoped>
119 | 	.uni-collapse-cell {
120 | 		flex-direction: column;
121 | 		border-color: $uni-border-color;
122 | 		border-bottom-width: 1px;
123 | 		border-bottom-style: solid;
124 | 	}
125 | 
126 | 
127 | 	.uni-collapse-cell--hover {
128 | 		background-color: $uni-bg-color-hover;
129 | 	}
130 | 
131 | 	.uni-collapse-cell--open {
132 | 		background-color: $uni-bg-color-hover;
133 | 	}
134 | 
135 | 	.uni-collapse-cell--disabled {
136 | 		background-color: $uni-bg-color-hover;
137 | 		// opacity: 0.3;
138 | 	}
139 | 
140 | 
141 | 	.uni-collapse-cell--hide {
142 | 		height: 48px;
143 | 	}
144 | 
145 | 	.uni-collapse-cell--animation {
146 | 		// transition: transform 0.3s ease;
147 | 		transition-property: transform;
148 | 		transition-duration: 0.3s;
149 | 		transition-timing-function: ease;
150 | 	}
151 | 
152 | 	.uni-collapse-cell__title {
153 | 		padding: 12px 12px;
154 | 		position: relative;
155 | 		/* #ifndef APP-NVUE */
156 | 		display: flex;
157 | 		width: 100%;
158 | 		box-sizing: border-box;
159 | 		/* #endif */
160 | 		height: 48px;
161 | 		line-height: 24px;
162 | 		flex-direction: row;
163 | 		justify-content: space-between;
164 | 		align-items: center;
165 | 	}
166 | 
167 | 	.uni-collapse-cell__title:active {
168 | 		background-color: $uni-bg-color-hover;
169 | 	}
170 | 
171 | 	.uni-collapse-cell__title-img {
172 | 		height: $uni-img-size-base;
173 | 		width: $uni-img-size-base;
174 | 		margin-right: 10px;
175 | 	}
176 | 
177 | 	.uni-collapse-cell__title-arrow {
178 | 		width: 20px;
179 | 		height: 20px;
180 | 		transform: rotate(0deg);
181 | 		transform-origin: center center;
182 | 
183 | 	}
184 | 
185 | 	.uni-collapse-cell__title-arrow-active {
186 | 		transform: rotate(180deg);
187 | 	}
188 | 
189 | 	.uni-collapse-cell__title-text {
190 | 		flex: 1;
191 | 		font-size: $uni-font-size-base;
192 | 		/* #ifndef APP-NVUE */
193 | 		white-space: nowrap;
194 | 		color: inherit;
195 | 		/* #endif */
196 | 		/* #ifdef APP-NVUE */
197 | 		lines: 1;
198 | 		/* #endif */
199 | 		overflow: hidden;
200 | 		text-overflow: ellipsis;
201 | 	}
202 | 
203 | 	.uni-collapse-cell__content {
204 | 		overflow: hidden;
205 | 	}
206 | 
207 | 	.uni-collapse-cell__wrapper {
208 | 		/* #ifndef APP-NVUE */
209 | 		display: flex;
210 | 		/* #endif */
211 | 		flex-direction: column;
212 | 	}
213 | 
214 | 	.uni-collapse-cell__content--hide {
215 | 		height: 0px;
216 | 		line-height: 0px;
217 | 	}
218 | </style>
219 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-collapse/uni-collapse.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="uni-collapse">
 3 | 		<slot />
 4 | 	</view>
 5 | </template>
 6 | <script>
 7 | 	/**
 8 | 	 * Collapse 折叠面板
 9 | 	 * @description 展示可以折叠 / 展开的内容区域
10 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=23
11 | 	 * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
12 | 	 * @event {Function} change 切换面板时触发，activeNames（Array）：展开状态的uniCollapseItem的 name 值
13 | 	 */
14 | 	export default {
15 | 		name: 'UniCollapse',
16 | 		props: {
17 | 			accordion: {
18 | 				// 是否开启手风琴效果
19 | 				type: [Boolean, String],
20 | 				default: false
21 | 			}
22 | 		},
23 | 		data() {
24 | 			return {}
25 | 		},
26 | 		provide() {
27 | 			return {
28 | 				collapse: this
29 | 			}
30 | 		},
31 | 		created() {
32 | 			this.childrens = []
33 | 		},
34 | 		methods: {
35 | 			onChange() {
36 | 				let activeItem = []
37 | 				this.childrens.forEach((vm, index) => {
38 | 					if (vm.isOpen) {
39 | 						activeItem.push(vm.nameSync)
40 | 					}
41 | 				})
42 | 				this.$emit('change', activeItem)
43 | 			}
44 | 		}
45 | 	}
46 | </script>
47 | <style lang="scss" scoped>
48 | 	.uni-collapse {
49 | 		/* #ifndef APP-NVUE */
50 | 		width: 100%;
51 | 		display: flex;
52 | 		/* #endif */
53 | 		/* #ifdef APP-NVUE */
54 | 		flex: 1;
55 | 		/* #endif */
56 | 		flex-direction: column;
57 | 		background-color: $uni-bg-color;
58 | 	}
59 | </style>
60 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-combox/uni-combox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-combox">
  3 | 		<view v-if="label" class="uni-combox__label" :style="labelStyle">
  4 | 			<text>{{label}}</text>
  5 | 		</view>
  6 | 		<view class="uni-combox__input-box">
  7 | 			<input class="uni-combox__input" type="text" :placeholder="placeholder" v-model="inputVal" @input="onInput"
  8 | 			 @focus="onFocus" @blur="onBlur" />
  9 | 			<uni-icons class="uni-combox__input-arrow" type="arrowdown" size="14" @click="toggleSelector"></uni-icons>
 10 | 			<view class="uni-combox__selector" v-if="showSelector">
 11 | 				<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
 12 | 					<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
 13 | 						<text>{{emptyTips}}</text>
 14 | 					</view>
 15 | 					<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)">
 16 | 						<text>{{item}}</text>
 17 | 					</view>
 18 | 				</scroll-view>
 19 | 			</view>
 20 | 		</view>
 21 | 	</view>
 22 | </template>
 23 | 
 24 | <script>
 25 | 	import uniIcons from '../uni-icons/uni-icons.vue'
 26 | 	/**
 27 | 	 * Combox 组合输入框
 28 | 	 * @description 组合输入框一般用于既可以输入也可以选择的场景
 29 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=1261
 30 | 	 * @property {String} label 左侧文字
 31 | 	 * @property {String} labelWidth 左侧内容宽度
 32 | 	 * @property {String} placeholder 输入框占位符
 33 | 	 * @property {Array} candidates 候选项列表
 34 | 	 * @property {String} emptyTips 筛选结果为空时显示的文字
 35 | 	 * @property {String} value 组合框的值
 36 | 	 */
 37 | 	export default {
 38 | 		name: 'uniCombox',
 39 | 		components: {
 40 | 			uniIcons
 41 | 		},
 42 | 		props: {
 43 | 			label: {
 44 | 				type: String,
 45 | 				default: ''
 46 | 			},
 47 | 			labelWidth: {
 48 | 				type: String,
 49 | 				default: 'auto'
 50 | 			},
 51 | 			placeholder: {
 52 | 				type: String,
 53 | 				default: ''
 54 | 			},
 55 | 			candidates: {
 56 | 				type: Array,
 57 | 				default () {
 58 | 					return []
 59 | 				}
 60 | 			},
 61 | 			emptyTips: {
 62 | 				type: String,
 63 | 				default: '无匹配项'
 64 | 			},
 65 | 			value: {
 66 | 				type: String,
 67 | 				default: ''
 68 | 			}
 69 | 		},
 70 | 		data() {
 71 | 			return {
 72 | 				showSelector: false,
 73 | 				inputVal: ''
 74 | 			}
 75 | 		},
 76 | 		computed: {
 77 | 			labelStyle() {
 78 | 				if (this.labelWidth === 'auto') {
 79 | 					return {}
 80 | 				}
 81 | 				return {
 82 | 					width: this.labelWidth
 83 | 				}
 84 | 			},
 85 | 			filterCandidates() {
 86 | 				return this.candidates.filter((item) => {
 87 | 					return item.indexOf(this.inputVal) > -1
 88 | 				})
 89 | 			},
 90 | 			filterCandidatesLength() {
 91 | 				return this.filterCandidates.length
 92 | 			}
 93 | 		},
 94 | 		watch: {
 95 | 			value: {
 96 | 				handler(newVal) {
 97 | 					this.inputVal = newVal
 98 | 				},
 99 | 				immediate: true
100 | 			}
101 | 		},
102 | 		methods: {
103 | 			toggleSelector() {
104 | 				this.showSelector = !this.showSelector
105 | 			},
106 | 			onFocus() {
107 | 				this.showSelector = true
108 | 			},
109 | 			onBlur() {
110 | 				setTimeout(() => {
111 | 					this.showSelector = false
112 | 				},50)
113 | 			},
114 | 			onSelectorClick(index) {
115 | 				this.inputVal = this.filterCandidates[index]
116 | 				this.showSelector = false
117 | 				this.$emit('input', this.inputVal)
118 | 			},
119 | 			onInput() {
120 | 				setTimeout(() => {
121 | 					this.$emit('input', this.inputVal)
122 | 				})
123 | 			}
124 | 		}
125 | 	}
126 | </script>
127 | 
128 | <style lang="scss" scoped>
129 | 	.uni-combox {
130 | 		/* #ifndef APP-NVUE */
131 | 		display: flex;
132 | 		/* #endif */
133 | 		height: 40px;
134 | 		flex-direction: row;
135 | 		align-items: center;
136 | 		// border-bottom: solid 1px #DDDDDD;
137 | 	}
138 | 
139 | 	.uni-combox__label {
140 | 		font-size: 16px;
141 | 		line-height: 22px;
142 | 		padding-right: 10px;
143 | 		color: #999999;
144 | 	}
145 | 
146 | 	.uni-combox__input-box {
147 | 		position: relative;
148 | 		/* #ifndef APP-NVUE */
149 | 		display: flex;
150 | 		/* #endif */
151 | 		flex: 1;
152 | 		flex-direction: row;
153 | 		align-items: center;
154 | 	}
155 | 
156 | 	.uni-combox__input {
157 | 		flex: 1;
158 | 		font-size: 16px;
159 | 		height: 22px;
160 | 		line-height: 22px;
161 | 	}
162 | 
163 | 	.uni-combox__input-arrow {
164 | 		padding: 10px;
165 | 	}
166 | 
167 | 	.uni-combox__selector {
168 | 		box-sizing: border-box;
169 | 		position: absolute;
170 | 		top: 42px;
171 | 		left: 0;
172 | 		width: 100%;
173 | 		background-color: #FFFFFF;
174 | 		border-radius: 6px;
175 | 		box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
176 | 		z-index: 2;
177 | 	}
178 | 
179 | 	.uni-combox__selector-scroll {
180 | 		max-height: 200px;
181 | 		box-sizing: border-box;
182 | 	}
183 | 
184 | 	.uni-combox__selector::before {
185 | 		content: '';
186 | 		position: absolute;
187 | 		width: 0;
188 | 		height: 0;
189 | 		border-bottom: solid 6px #FFFFFF;
190 | 		border-right: solid 6px transparent;
191 | 		border-left: solid 6px transparent;
192 | 		left: 50%;
193 | 		top: -6px;
194 | 		margin-left: -6px;
195 | 	}
196 | 
197 | 	.uni-combox__selector-empty,
198 | 	.uni-combox__selector-item {
199 | 		/* #ifdef APP-NVUE */
200 | 		display: flex;
201 | 		/* #endif */
202 | 		line-height: 36px;
203 | 		font-size: 14px;
204 | 		text-align: center;
205 | 		border-bottom: solid 1px #DDDDDD;
206 | 		margin: 0px 10px;
207 | 	}
208 | 
209 | 	.uni-combox__selector-empty:last-child,
210 | 	.uni-combox__selector-item:last-child {
211 | 		border-bottom: none;
212 | 	}
213 | </style>
214 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-countdown/uni-countdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-countdown">
  3 | 		<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
  4 | 		<text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
  5 | 		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
  6 | 		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
  7 | 		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
  8 | 		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
  9 | 		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
 10 | 		<text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
 11 | 	</view>
 12 | </template>
 13 | <script>
 14 | 	/**
 15 | 	 * Countdown 倒计时
 16 | 	 * @description 倒计时组件
 17 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=25
 18 | 	 * @property {String} backgroundColor 背景色
 19 | 	 * @property {String} color 文字颜色
 20 | 	 * @property {Number} day 天数
 21 | 	 * @property {Number} hour 小时
 22 | 	 * @property {Number} minute 分钟
 23 | 	 * @property {Number} second 秒
 24 | 	 * @property {Number} timestamp 时间戳
 25 | 	 * @property {Boolean} showDay = [true|false] 是否显示天数
 26 | 	 * @property {Boolean} showColon = [true|false] 是否以冒号为分隔符
 27 | 	 * @property {String} splitorColor 分割符号颜色
 28 | 	 * @event {Function} timeup 倒计时时间到触发事件
 29 | 	 * @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
 30 | 	 */
 31 | 	export default {
 32 | 		name: 'UniCountdown',
 33 | 		props: {
 34 | 			showDay: {
 35 | 				type: Boolean,
 36 | 				default: true
 37 | 			},
 38 | 			showColon: {
 39 | 				type: Boolean,
 40 | 				default: true
 41 | 			},
 42 | 			backgroundColor: {
 43 | 				type: String,
 44 | 				default: '#FFFFFF'
 45 | 			},
 46 | 			borderColor: {
 47 | 				type: String,
 48 | 				default: '#000000'
 49 | 			},
 50 | 			color: {
 51 | 				type: String,
 52 | 				default: '#000000'
 53 | 			},
 54 | 			splitorColor: {
 55 | 				type: String,
 56 | 				default: '#000000'
 57 | 			},
 58 | 			day: {
 59 | 				type: Number,
 60 | 				default: 0
 61 | 			},
 62 | 			hour: {
 63 | 				type: Number,
 64 | 				default: 0
 65 | 			},
 66 | 			minute: {
 67 | 				type: Number,
 68 | 				default: 0
 69 | 			},
 70 | 			second: {
 71 | 				type: Number,
 72 | 				default: 0
 73 | 			},
 74 | 			timestamp: {
 75 | 				type: Number,
 76 | 				default: 0
 77 | 			}
 78 | 		},
 79 | 		data() {
 80 | 			return {
 81 | 				timer: null,
 82 | 				syncFlag: false,
 83 | 				d: '00',
 84 | 				h: '00',
 85 | 				i: '00',
 86 | 				s: '00',
 87 | 				leftTime: 0,
 88 | 				seconds: 0
 89 | 			}
 90 | 		},
 91 | 		watch: {
 92 | 			day(val) {
 93 | 				this.changeFlag()
 94 | 			},
 95 | 			hour(val) {
 96 | 				this.changeFlag()
 97 | 			},
 98 | 			minute(val) {
 99 | 				this.changeFlag()
100 | 			},
101 | 			second(val) {
102 | 				this.changeFlag()
103 | 			}
104 | 		},
105 | 		created: function(e) {
106 | 			this.startData();
107 | 		},
108 | 		beforeDestroy() {
109 | 			clearInterval(this.timer)
110 | 		},
111 | 		methods: {
112 | 			toSeconds(timestamp, day, hours, minutes, seconds) {
113 | 				if (timestamp) {
114 | 					return timestamp - parseInt(new Date().getTime() / 1000, 10)
115 | 				}
116 | 				return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
117 | 			},
118 | 			timeUp() {
119 | 				clearInterval(this.timer)
120 | 				this.$emit('timeup')
121 | 			},
122 | 			countDown() {
123 | 				let seconds = this.seconds
124 | 				let [day, hour, minute, second] = [0, 0, 0, 0]
125 | 				if (seconds > 0) {
126 | 					day = Math.floor(seconds / (60 * 60 * 24))
127 | 					hour = Math.floor(seconds / (60 * 60)) - (day * 24)
128 | 					minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
129 | 					second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
130 | 				} else {
131 | 					this.timeUp()
132 | 				}
133 | 				if (day < 10) {
134 | 					day = '0' + day
135 | 				}
136 | 				if (hour < 10) {
137 | 					hour = '0' + hour
138 | 				}
139 | 				if (minute < 10) {
140 | 					minute = '0' + minute
141 | 				}
142 | 				if (second < 10) {
143 | 					second = '0' + second
144 | 				}
145 | 				this.d = day
146 | 				this.h = hour
147 | 				this.i = minute
148 | 				this.s = second
149 | 			},
150 | 			startData() {
151 | 				this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
152 | 				if (this.seconds <= 0) {
153 | 					return
154 | 				}
155 | 				this.countDown()
156 | 				this.timer = setInterval(() => {
157 | 					this.seconds--
158 | 					if (this.seconds < 0) {
159 | 						this.timeUp()
160 | 						return
161 | 					}
162 | 					this.countDown()
163 | 				}, 1000)
164 | 			},
165 | 			changeFlag() {
166 | 				if (!this.syncFlag) {
167 | 					this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
168 | 					this.startData();
169 | 					this.syncFlag = true;
170 | 				}
171 | 			}
172 | 		}
173 | 	}
174 | </script>
175 | <style lang="scss" scoped>
176 | 	$countdown-height: 48rpx;
177 | 	$countdown-width: 52rpx;
178 | 
179 | 	.uni-countdown {
180 | 		/* #ifndef APP-NVUE */
181 | 		display: flex;
182 | 		/* #endif */
183 | 		flex-direction: row;
184 | 		justify-content: flex-start;
185 | 		padding: 2rpx 0;
186 | 	}
187 | 
188 | 	.uni-countdown__splitor {
189 | 		/* #ifndef APP-NVUE */
190 | 		display: flex;
191 | 		/* #endif */
192 | 		justify-content: center;
193 | 		line-height: $countdown-height;
194 | 		padding: 5rpx;
195 | 		font-size: $uni-font-size-sm;
196 | 	}
197 | 
198 | 	.uni-countdown__number {
199 | 		/* #ifndef APP-NVUE */
200 | 		display: flex;
201 | 		/* #endif */
202 | 		justify-content: center;
203 | 		align-items: center;
204 | 		width: $countdown-width;
205 | 		height: $countdown-height;
206 | 		line-height: $countdown-height;
207 | 		margin: 5rpx;
208 | 		text-align: center;
209 | 		font-size: $uni-font-size-sm;
210 | 	}
211 | </style>
212 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-drawer/uni-drawer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
  3 | 		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
  4 | 		<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
  5 | 			<slot />
  6 | 		</view>
  7 | 	</view>
  8 | </template>
  9 | 
 10 | <script>
 11 | 	/**
 12 | 	 * Drawer 抽屉
 13 | 	 * @description 抽屉侧滑菜单
 14 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=26
 15 | 	 * @property {Boolean} mask = [true | false] 是否显示遮罩
 16 | 	 * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
 17 | 	 * @property {Boolean} mode = [left | right] Drawer 滑出位置
 18 | 	 * 	@value left 从左侧滑出
 19 | 	 * 	@value right 从右侧侧滑出
 20 | 	 * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
 21 | 	 * @event {Function} close 组件关闭时触发事件
 22 | 	 */
 23 | 	export default {
 24 | 		name: 'UniDrawer',
 25 | 		props: {
 26 | 			/**
 27 | 			 * 显示模式（左、右），只在初始化生效
 28 | 			 */
 29 | 			mode: {
 30 | 				type: String,
 31 | 				default: ''
 32 | 			},
 33 | 			/**
 34 | 			 * 蒙层显示状态
 35 | 			 */
 36 | 			mask: {
 37 | 				type: Boolean,
 38 | 				default: true
 39 | 			},
 40 | 			/**
 41 | 			 * 遮罩是否可点击关闭
 42 | 			 */
 43 | 			maskClick:{
 44 | 				type: Boolean,
 45 | 				default: true
 46 | 			},
 47 | 			/**
 48 | 			 * 抽屉宽度
 49 | 			 */
 50 | 			width: {
 51 | 				type: Number,
 52 | 				default: 220
 53 | 			}
 54 | 		},
 55 | 		data() {
 56 | 			return {
 57 | 				visibleSync: false,
 58 | 				showDrawer: false,
 59 | 				rightMode: false,
 60 | 				watchTimer: null,
 61 | 				drawerWidth: 220
 62 | 			}
 63 | 		},
 64 | 		created() {
 65 | 			// #ifndef APP-NVUE
 66 | 			this.drawerWidth = this.width
 67 | 			// #endif
 68 | 			this.rightMode = this.mode === 'right'
 69 | 		},
 70 | 		methods: {
 71 | 			clear(){},
 72 | 			close(type) {
 73 | 				// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
 74 | 				if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
 75 | 				this._change('showDrawer', 'visibleSync', false)
 76 | 			},
 77 | 			open() {
 78 | 				// fixed by mehaotian 处理重复点击打开的事件
 79 | 				if(this.visibleSync) return
 80 | 				this._change('visibleSync', 'showDrawer', true)
 81 | 			},
 82 | 			_change(param1, param2, status) {
 83 | 				this[param1] = status
 84 | 				if (this.watchTimer) {
 85 | 					clearTimeout(this.watchTimer)
 86 | 				}
 87 | 				this.watchTimer = setTimeout(() => {
 88 | 					this[param2] = status
 89 | 					this.$emit('change',status)
 90 | 				}, status ? 50 : 300)
 91 | 			}
 92 | 		}
 93 | 	}
 94 | </script>
 95 | 
 96 | <style lang="scss" scoped>
 97 | 	// 抽屉宽度
 98 | 	$drawer-width: 220px;
 99 | 
100 | 	.uni-drawer {
101 | 		/* #ifndef APP-NVUE */
102 | 		display: block;
103 | 		/* #endif */
104 | 		position: fixed;
105 | 		top: 0;
106 | 		left: 0;
107 | 		right: 0;
108 | 		bottom: 0;
109 | 		overflow: hidden;
110 | 		z-index: 999;
111 | 	}
112 | 
113 | 	.uni-drawer__content {
114 | 		/* #ifndef APP-NVUE */
115 | 		display: block;
116 | 		/* #endif */
117 | 		position: absolute;
118 | 		top: 0;
119 | 		width: $drawer-width;
120 | 		bottom: 0;
121 | 		background-color: $uni-bg-color;
122 | 		transition: transform 0.3s ease;
123 | 	}
124 | 
125 | 	.uni-drawer--left {
126 | 		left: 0;
127 | 		/* #ifdef APP-NVUE */
128 | 		transform: translateX(-$drawer-width);
129 | 		/* #endif */
130 | 		/* #ifndef APP-NVUE */
131 | 		transform: translateX(-100%);
132 | 		/* #endif */
133 | 	}
134 | 
135 | 	.uni-drawer--right {
136 | 		right: 0;
137 | 		/* #ifdef APP-NVUE */
138 | 		transform: translateX($drawer-width);
139 | 		/* #endif */
140 | 		/* #ifndef APP-NVUE */
141 | 		transform: translateX(100%);
142 | 		/* #endif */
143 | 	}
144 | 
145 | 	.uni-drawer__content--visible {
146 | 		transform: translateX(0px);
147 | 	}
148 | 
149 | 
150 | 	.uni-drawer__mask {
151 | 		/* #ifndef APP-NVUE */
152 | 		display: block;
153 | 		/* #endif */
154 | 		opacity: 0;
155 | 		position: absolute;
156 | 		top: 0;
157 | 		left: 0;
158 | 		bottom: 0;
159 | 		right: 0;
160 | 		background-color: $uni-bg-color-mask;
161 | 		transition: opacity 0.3s;
162 | 	}
163 | 
164 | 	.uni-drawer__mask--visible {
165 | 		/* #ifndef APP-NVUE */
166 | 		display: block;
167 | 		/* #endif */
168 | 		opacity: 1;
169 | 	}
170 | </style>
171 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-fav/uni-fav.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view :class="[circle === true || circle === 'true' ? 'uni-fav--circle' : '']" :style="[{ backgroundColor: checked ? bgColorChecked : bgColor }]"
  3 | 	 @click="onClick" class="uni-fav">
  4 | 		<!-- #ifdef MP-ALIPAY -->
  5 | 		<view class="uni-fav-star" v-if="!checked && (star === true || star === 'true')">
  6 | 			<uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" size="14" type="star-filled" />
  7 | 		</view>
  8 | 		<!-- #endif -->
  9 | 		<!-- #ifndef MP-ALIPAY -->
 10 | 		<uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-star" size="14" type="star-filled"
 11 | 		 v-if="!checked && (star === true || star === 'true')" />
 12 | 		<!-- #endif -->
 13 | 		<text :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-text">{{ checked ? contentText.contentFav : contentText.contentDefault }}</text>
 14 | 	</view>
 15 | </template>
 16 | 
 17 | <script>
 18 | 	import uniIcons from "../uni-icons/uni-icons.vue";
 19 | 
 20 | 	/**
 21 | 	 * Fav 收藏按钮
 22 | 	 * @description 用于收藏功能，可点击切换选中、不选中的状态
 23 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=864
 24 | 	 * @property {Boolean} star = [true|false] 按钮是否带星星
 25 | 	 * @property {String} bgColor 未收藏时的背景色
 26 | 	 * @property {String} bgColorChecked 已收藏时的背景色
 27 | 	 * @property {String} fgColor 未收藏时的文字颜色
 28 | 	 * @property {String} fgColorChecked 已收藏时的文字颜色
 29 | 	 * @property {Boolean} circle = [true|false] 是否为圆角
 30 | 	 * @property {Boolean} checked = [true|false] 是否为已收藏
 31 | 	 * @property {Object} contentText = [true|false] 收藏按钮文字
 32 | 	 * @event {Function} click 点击 fav按钮触发事件
 33 | 	 * @example <uni-fav :checked="true"/>
 34 | 	 */
 35 | 	export default {
 36 | 		name: "UniFav",
 37 | 		components: {
 38 | 			uniIcons
 39 | 		},
 40 | 		props: {
 41 | 			star: {
 42 | 				type: [Boolean, String],
 43 | 				default: true
 44 | 			},
 45 | 			bgColor: {
 46 | 				type: String,
 47 | 				default: "#eeeeee"
 48 | 			},
 49 | 			fgColor: {
 50 | 				type: String,
 51 | 				default: "#666666"
 52 | 			},
 53 | 			bgColorChecked: {
 54 | 				type: String,
 55 | 				default: "#007aff"
 56 | 			},
 57 | 			fgColorChecked: {
 58 | 				type: String,
 59 | 				default: "#FFFFFF"
 60 | 			},
 61 | 			circle: {
 62 | 				type: [Boolean, String],
 63 | 				default: false
 64 | 			},
 65 | 			checked: {
 66 | 				type: Boolean,
 67 | 				default: false
 68 | 			},
 69 | 			contentText: {
 70 | 				type: Object,
 71 | 				default () {
 72 | 					return {
 73 | 						contentDefault: "收藏",
 74 | 						contentFav: "已收藏"
 75 | 					};
 76 | 				}
 77 | 			}
 78 | 		},
 79 | 		watch: {
 80 | 			checked() {
 81 | 				if (uni.report) {
 82 | 					if (this.checked) {
 83 | 						uni.report("收藏", "收藏");
 84 | 					} else {
 85 | 						uni.report("取消收藏", "取消收藏");
 86 | 					}
 87 | 				}
 88 | 			}
 89 | 		},
 90 | 		methods: {
 91 | 			onClick() {
 92 | 				this.$emit("click");
 93 | 			}
 94 | 		}
 95 | 	};
 96 | </script>
 97 | 
 98 | <style lang="scss" scoped>
 99 | 	$fav-height: 25px;
100 | 
101 | 	.uni-fav {
102 | 		/* #ifndef APP-NVUE */
103 | 		display: flex;
104 | 		/* #endif */
105 | 		flex-direction: row;
106 | 		align-items: center;
107 | 		justify-content: center;
108 | 		width: 60px;
109 | 		height: $fav-height;
110 | 		line-height: $fav-height;
111 | 		text-align: center;
112 | 		border-radius: 3px;
113 | 	}
114 | 
115 | 	.uni-fav--circle {
116 | 		border-radius: 30px;
117 | 	}
118 | 
119 | 	.uni-fav-star {
120 | 		/* #ifndef APP-NVUE */
121 | 		display: flex;
122 | 		/* #endif */
123 | 		height: $fav-height;
124 | 		line-height: 24px;
125 | 		margin-right: 3px;
126 | 		align-items: center;
127 | 		justify-content: center;
128 | 	}
129 | 
130 | 	.uni-fav-text {
131 | 		/* #ifndef APP-NVUE */
132 | 		display: flex;
133 | 		/* #endif */
134 | 		height: $fav-height;
135 | 		line-height: $fav-height;
136 | 		align-items: center;
137 | 		justify-content: center;
138 | 		font-size: $uni-font-size-base;
139 | 	}
140 | </style>
141 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-goods-nav/uni-goods-nav.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-goods-nav">
  3 | 		<!-- 底部占位 -->
  4 | 		<view class="uni-tab__seat" />
  5 | 		<view class="uni-tab__cart-box flex">
  6 | 			<view class="flex uni-tab__cart-sub-left">
  7 | 				<view v-for="(item,index) in options" :key="index" class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick(index,item)">
  8 | 					<view class="uni-tab__icon">
  9 | 						<uni-icons :type="item.icon" size="20" color="#646566"></uni-icons>
 10 | 						<!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
 11 | 					</view>
 12 | 					<text class="uni-tab__text">{{ item.text }}</text>
 13 | 					<view class="flex uni-tab__dot-box">
 14 | 						<text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot " :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000',
 15 | 						color:item.infoColor?item.infoColor:'#fff'
 16 | 						}">{{ item.info }}</text>
 17 | 					</view>
 18 | 				</view>
 19 | 			</view>
 20 | 			<view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-right ">
 21 | 				<view v-for="(item,index) in buttonGroup" :key="index" :style="{backgroundColor:item.backgroundColor,color:item.color}"
 22 | 				 class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)"><text :style="{color:item.color}" class="uni-tab__cart-button-right-text">{{ item.text }}</text></view>
 23 | 			</view>
 24 | 		</view>
 25 | 	</view>
 26 | </template>
 27 | 
 28 | <script>
 29 | 	import uniIcons from '../uni-icons/uni-icons.vue'
 30 | 	/**
 31 | 	 * GoodsNav 商品导航
 32 | 	 * @description 商品加入购物车、立即购买等
 33 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=865
 34 | 	 * @property {Array} options 组件参数
 35 | 	 * @property {Array} buttonGroup 组件按钮组参数
 36 | 	 * @property {Boolean} fill = [true | false] 组件按钮组参数
 37 | 	 * @event {Function} click 左侧点击事件
 38 | 	 * @event {Function} buttonClick 右侧按钮组点击事件
 39 | 	 * @example <uni-goods-nav :fill="true"  options="" buttonGroup="buttonGroup"  @click="" @buttonClick="" />
 40 | 	 */
 41 | 	export default {
 42 | 		name: 'UniGoodsNav',
 43 | 		components: {
 44 | 			uniIcons
 45 | 		},
 46 | 		props: {
 47 | 			options: {
 48 | 				type: Array,
 49 | 				default () {
 50 | 					return [{
 51 | 						icon: 'shop',
 52 | 						text: '店铺',
 53 | 					}, {
 54 | 						icon: 'cart',
 55 | 						text: '购物车'
 56 | 					}]
 57 | 				}
 58 | 			},
 59 | 			buttonGroup: {
 60 | 				type: Array,
 61 | 				default () {
 62 | 					return [{
 63 | 							text: '加入购物车',
 64 | 							backgroundColor: '#ffa200',
 65 | 							color: '#fff'
 66 | 						},
 67 | 						{
 68 | 							text: '立即购买',
 69 | 							backgroundColor: '#ff0000',
 70 | 							color: '#fff'
 71 | 						}
 72 | 					]
 73 | 				}
 74 | 			},
 75 | 			fill: {
 76 | 				type: Boolean,
 77 | 				default: false
 78 | 			}
 79 | 		},
 80 | 		methods: {
 81 | 			onClick(index, item) {
 82 | 				this.$emit('click', {
 83 | 					index,
 84 | 					content: item,
 85 | 
 86 | 				})
 87 | 			},
 88 | 			buttonClick(index, item) {
 89 | 				if (uni.report) {
 90 | 					uni.report(item.text, item.text)
 91 | 				}
 92 | 				this.$emit('buttonClick', {
 93 | 					index,
 94 | 					content: item
 95 | 				})
 96 | 			}
 97 | 		}
 98 | 	}
 99 | </script>
100 | 
101 | <style lang="scss" scoped>
102 | 	.flex {
103 | 		/* #ifndef APP-NVUE */
104 | 		display: flex;
105 | 		/* #endif */
106 | 		flex-direction: row;
107 | 	}
108 | 
109 | 	.uni-goods-nav {
110 | 		/* #ifndef APP-NVUE */
111 | 		display: flex;
112 | 		/* #endif */
113 | 		flex: 1;
114 | 		flex-direction: row;
115 | 	}
116 | 
117 | 	.uni-tab__cart-box {
118 | 		flex: 1;
119 | 		height: 50px;
120 | 		background-color: #fff;
121 | 		z-index: 900;
122 | 	}
123 | 
124 | 	.uni-tab__cart-sub-left {
125 | 		padding: 0 5px;
126 | 	}
127 | 
128 | 	.uni-tab__cart-sub-right {
129 | 		flex: 1;
130 | 	}
131 | 
132 | 	.uni-tab__right {
133 | 		margin: 5px 0;
134 | 		margin-right: 10px;
135 | 		border-radius: 100px;
136 | 		overflow: hidden;
137 | 	}
138 | 
139 | 	.uni-tab__cart-button-left {
140 | 		/* #ifndef APP-NVUE */
141 | 		display: flex;
142 | 		/* #endif */
143 | 		// flex: 1;
144 | 		position: relative;
145 | 		justify-content: center;
146 | 		align-items: center;
147 | 		flex-direction: column;
148 | 		margin: 0 10px;
149 | 	}
150 | 
151 | 	.uni-tab__icon {
152 | 		width: 18px;
153 | 		height: 18px;
154 | 	}
155 | 
156 | 	.image {
157 | 		width: 18px;
158 | 		height: 18px;
159 | 	}
160 | 
161 | 	.uni-tab__text {
162 | 		margin-top: 3px;
163 | 		font-size: $uni-font-size-sm;
164 | 		color: #646566;
165 | 	}
166 | 
167 | 	.uni-tab__cart-button-right {
168 | 		/* #ifndef APP-NVUE */
169 | 		display: flex;
170 | 		flex-direction: column;
171 | 		/* #endif */
172 | 		flex: 1;
173 | 		justify-content: center;
174 | 		align-items: center;
175 | 	}
176 | 
177 | 	.uni-tab__cart-button-right-text {
178 | 		font-size: $uni-font-size-base;
179 | 		color: #fff;
180 | 	}
181 | 
182 | 	.uni-tab__cart-button-right:active {
183 | 		opacity: 0.7;
184 | 	}
185 | 
186 | 	.uni-tab__dot-box {
187 | 		/* #ifndef APP-NVUE */
188 | 		display: flex;
189 | 		flex-direction: column;
190 | 		/* #endif */
191 | 		position: absolute;
192 | 		right: -2px;
193 | 		top: 2px;
194 | 		justify-content: center;
195 | 		align-items: center;
196 | 		// width: 0;
197 | 		// height: 0;
198 | 	}
199 | 
200 | 	.uni-tab__dot {
201 | 		// width: 30rpx;
202 | 		// height: 30rpx;
203 | 		padding: 0 4px;
204 | 		line-height: 15px;
205 | 		color: #ffffff;
206 | 		text-align: center;
207 | 		font-size: 12px;
208 | 		background-color: #ff0000;
209 | 		border-radius: 15px;
210 | 	}
211 | 
212 | 	.uni-tab__dots {
213 | 		padding: 0 4px;
214 | 		// width: auto;
215 | 		border-radius: 15px;
216 | 	}
217 | 
218 | 	.uni-tab__color-y {
219 | 		background-color: #ffa200;
220 | 	}
221 | 
222 | 	.uni-tab__color-r {
223 | 		background-color: #ff0000;
224 | 	}
225 | </style>
226 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-grid-item/uni-grid-item copy.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view v-if="width" :style="'width:'+width+';'+(square?'height:'+width:'')" class="uni-grid-item">
  3 | 		<view :class="{ 'uni-grid-item--border': showBorder,  'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
  4 | 		 :style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
  5 | 		 class="uni-grid-item__box" @click="_onClick">
  6 | 			<slot />
  7 | 		</view>
  8 | 	</view>
  9 | </template>
 10 | 
 11 | <script>
 12 | 	/**
 13 | 	 * GridItem 宫格
 14 | 	 * @description 宫格组件
 15 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=27
 16 | 	 * @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
 17 | 	 */
 18 | 	export default {
 19 | 		name: 'UniGridItem',
 20 | 		inject: ['grid'],
 21 | 		props: {
 22 | 			index: {
 23 | 				type: Number,
 24 | 				default: 0
 25 | 			}
 26 | 		},
 27 | 		data() {
 28 | 			return {
 29 | 				column: 0,
 30 | 				showBorder: true,
 31 | 				square: true,
 32 | 				highlight: true,
 33 | 				left: 0,
 34 | 				top: 0,
 35 | 				openNum: 2,
 36 | 				width: 0,
 37 | 				borderColor: '#e5e5e5'
 38 | 			}
 39 | 		},
 40 | 		created() {
 41 | 			this.column = this.grid.column
 42 | 			this.showBorder = this.grid.showBorder
 43 | 			this.square = this.grid.square
 44 | 			this.highlight = this.grid.highlight
 45 | 			this.top = this.hor === 0 ? this.grid.hor : this.hor
 46 | 			this.left = this.ver === 0 ? this.grid.ver : this.ver
 47 | 			this.borderColor = this.grid.borderColor
 48 | 			this.grid.children.push(this)
 49 | 			// this.grid.init()
 50 | 			this.width = this.grid.width
 51 | 		},
 52 | 		beforeDestroy() {
 53 | 			this.grid.children.forEach((item, index) => {
 54 | 				if (item === this) {
 55 | 					this.grid.children.splice(index, 1)
 56 | 				}
 57 | 			})
 58 | 		},
 59 | 		methods: {
 60 | 			_onClick() {
 61 | 				this.grid.change({
 62 | 					detail: {
 63 | 						index: this.index
 64 | 					}
 65 | 				})
 66 | 			}
 67 | 		}
 68 | 	}
 69 | </script>
 70 | 
 71 | <style lang="scss" scoped>
 72 | 	.uni-grid-item {
 73 | 		/* #ifndef APP-NVUE */
 74 | 		height: 100%;
 75 | 		display: flex;
 76 | 		/* #endif */
 77 | 	}
 78 | 
 79 | 	.uni-grid-item__box {
 80 | 		/* #ifndef APP-NVUE */
 81 | 		display: flex;
 82 | 		width: 100%;
 83 | 		/* #endif */
 84 | 		position: relative;
 85 | 		flex: 1;
 86 | 		flex-direction: column;
 87 | 		// justify-content: center;
 88 | 		// align-items: center;
 89 | 	}
 90 | 
 91 | 	.uni-grid-item--border {
 92 | 		position: relative;
 93 | 		/* #ifdef APP-NVUE */
 94 | 		border-bottom-color: $uni-border-color;
 95 | 		border-bottom-style: solid;
 96 | 		border-bottom-width: 0.5px;
 97 | 		border-right-color: $uni-border-color;
 98 | 		border-right-style: solid;
 99 | 		border-right-width: 0.5px;
100 | 		/* #endif */
101 | 		/* #ifndef APP-NVUE */
102 | 		z-index: 0;
103 | 		/* #endif */
104 | 	}
105 | 
106 | 	/* #ifndef APP-NVUE */
107 | 	.uni-grid-item--border:after {
108 | 		content: '';
109 | 		position: absolute;
110 | 		bottom: 0;
111 | 		left: 0;
112 | 		top: 0;
113 | 		right: 0;
114 | 		border-bottom-style: solid;
115 | 		border-bottom-width: 1px;
116 | 		border-bottom-color: inherit;
117 | 		border-right-style: solid;
118 | 		border-right-width: 1px;
119 | 		border-right-color: inherit;
120 | 		box-sizing: border-box;
121 | 		width: 200%;
122 | 		height: 200%;
123 | 		transform: scale(0.5);
124 | 		transform-origin: left top;
125 | 		z-index: -1;
126 | 	}
127 | 
128 | 	/* #endif */
129 | 
130 | 	.uni-grid-item--border-top {
131 | 		position: relative;
132 | 		/* #ifdef APP-NVUE */
133 | 		border-top-color: $uni-border-color;
134 | 		border-top-style: solid;
135 | 		border-top-width: 0.5px;
136 | 		/* #endif */
137 | 		/* #ifndef APP-NVUE */
138 | 		height: 100%;
139 | 		box-sizing: border-box;
140 | 		z-index: 0;
141 | 		/* #endif */
142 | 	}
143 | 
144 | 	/* #ifndef APP-NVUE */
145 | 	.uni-grid-item--border-top:after {
146 | 		content: '';
147 | 		position: absolute;
148 | 		bottom: 0;
149 | 		left: 0;
150 | 		top: 0;
151 | 		right: 0;
152 | 		border-top-style: solid;
153 | 		border-top-width: 1px;
154 | 		border-top-color: inherit;
155 | 		box-sizing: border-box;
156 | 		width: 200%;
157 | 		height: 200%;
158 | 		transform: scale(0.5);
159 | 		transform-origin: left top;
160 | 		z-index: -1;
161 | 	}
162 | 
163 | 	/* #endif */
164 | 	.uni-highlight:active {
165 | 		background-color: $uni-bg-color-hover;
166 | 	}
167 | </style>
168 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-grid-item/uni-grid-item.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view v-if="width" :style="'width:'+width+';'+(square?'height:'+width:'')" class="uni-grid-item">
  3 | 		<view :class="{ 'uni-grid-item--border': showBorder,  'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
  4 | 		 :style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
  5 | 		 class="uni-grid-item__box" @click="_onClick">
  6 | 			<slot />
  7 | 		</view>
  8 | 	</view>
  9 | </template>
 10 | 
 11 | <script>
 12 | 	/**
 13 | 	 * GridItem 宫格
 14 | 	 * @description 宫格组件
 15 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=27
 16 | 	 * @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
 17 | 	 */
 18 | 	export default {
 19 | 		name: 'UniGridItem',
 20 | 		inject: ['grid'],
 21 | 		props: {
 22 | 			index: {
 23 | 				type: Number,
 24 | 				default: 0
 25 | 			}
 26 | 		},
 27 | 		data() {
 28 | 			return {
 29 | 				column: 0,
 30 | 				showBorder: true,
 31 | 				square: true,
 32 | 				highlight: true,
 33 | 				left: 0,
 34 | 				top: 0,
 35 | 				openNum: 2,
 36 | 				width: 0,
 37 | 				borderColor: '#e5e5e5'
 38 | 			}
 39 | 		},
 40 | 		created() {
 41 | 			this.column = this.grid.column
 42 | 			this.showBorder = this.grid.showBorder
 43 | 			this.square = this.grid.square
 44 | 			this.highlight = this.grid.highlight
 45 | 			this.top = this.hor === 0 ? this.grid.hor : this.hor
 46 | 			this.left = this.ver === 0 ? this.grid.ver : this.ver
 47 | 			this.borderColor = this.grid.borderColor
 48 | 			this.grid.children.push(this)
 49 | 			// this.grid.init()
 50 | 			this.width = this.grid.width
 51 | 		},
 52 | 		beforeDestroy() {
 53 | 			this.grid.children.forEach((item, index) => {
 54 | 				if (item === this) {
 55 | 					this.grid.children.splice(index, 1)
 56 | 				}
 57 | 			})
 58 | 		},
 59 | 		methods: {
 60 | 			_onClick() {
 61 | 				this.grid.change({
 62 | 					detail: {
 63 | 						index: this.index
 64 | 					}
 65 | 				})
 66 | 			}
 67 | 		}
 68 | 	}
 69 | </script>
 70 | 
 71 | <style lang="scss" scoped>
 72 | 	.uni-grid-item {
 73 | 		/* #ifndef APP-NVUE */
 74 | 		height: 100%;
 75 | 		display: flex;
 76 | 		/* #endif */
 77 | 	}
 78 | 
 79 | 	.uni-grid-item__box {
 80 | 		/* #ifndef APP-NVUE */
 81 | 		display: flex;
 82 | 		width: 100%;
 83 | 		/* #endif */
 84 | 		position: relative;
 85 | 		flex: 1;
 86 | 		flex-direction: column;
 87 | 		// justify-content: center;
 88 | 		// align-items: center;
 89 | 	}
 90 | 
 91 | 	.uni-grid-item--border {
 92 | 		position: relative;
 93 | 		/* #ifdef APP-NVUE */
 94 | 		border-bottom-color: $uni-border-color;
 95 | 		border-bottom-style: solid;
 96 | 		border-bottom-width: 0.5px;
 97 | 		border-right-color: $uni-border-color;
 98 | 		border-right-style: solid;
 99 | 		border-right-width: 0.5px;
100 | 		/* #endif */
101 | 		/* #ifndef APP-NVUE */
102 | 		z-index: 0;
103 | 		border-bottom: 1px $uni-border-color solid;
104 | 		border-right: 1px $uni-border-color solid;
105 | 		/* #endif */
106 | 	}
107 | 	.uni-grid-item--border-top {
108 | 		position: relative;
109 | 		/* #ifdef APP-NVUE */
110 | 		border-top-color: $uni-border-color;
111 | 		border-top-style: solid;
112 | 		border-top-width: 0.5px;
113 | 		/* #endif */
114 | 		/* #ifndef APP-NVUE */
115 | 		border-top: 1px $uni-border-color solid;
116 | 		z-index: 0;
117 | 		/* #endif */
118 | 	}
119 | 
120 | 
121 | 	.uni-highlight:active {
122 | 		background-color: $uni-bg-color-hover;
123 | 	}
124 | </style>
125 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-grid/uni-grid.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-grid-wrap">
  3 | 		<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
  4 | 			<slot />
  5 | 		</view>
  6 | 	</view>
  7 | </template>
  8 | 
  9 | <script>
 10 | 	// #ifdef APP-NVUE
 11 | 	const dom = uni.requireNativePlugin('dom');
 12 | 	// #endif
 13 | 
 14 | 	/**
 15 | 	 * Grid 宫格
 16 | 	 * @description 宫格组件
 17 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=27
 18 | 	 * @property {Number} column 每列显示个数
 19 | 	 * @property {String} borderColor 边框颜色
 20 | 	 * @property {Boolean} showBorder 是否显示边框
 21 | 	 * @property {Boolean} square 是否方形显示
 22 | 	 * @property {Boolean} Boolean 点击背景是否高亮
 23 | 	 * @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
 24 | 	 */
 25 | 	export default {
 26 | 		name: 'UniGrid',
 27 | 		props: {
 28 | 			// 每列显示个数
 29 | 			column: {
 30 | 				type: Number,
 31 | 				default: 3
 32 | 			},
 33 | 			// 是否显示边框
 34 | 			showBorder: {
 35 | 				type: Boolean,
 36 | 				default: true
 37 | 			},
 38 | 			// 边框颜色
 39 | 			borderColor: {
 40 | 				type: String,
 41 | 				default: '#e5e5e5'
 42 | 			},
 43 | 			// 是否正方形显示,默认为 true
 44 | 			square: {
 45 | 				type: Boolean,
 46 | 				default: true
 47 | 			},
 48 | 			highlight: {
 49 | 				type: Boolean,
 50 | 				default: true
 51 | 			}
 52 | 		},
 53 | 		provide() {
 54 | 			return {
 55 | 				grid: this
 56 | 			}
 57 | 		},
 58 | 		data() {
 59 | 			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
 60 | 			return {
 61 | 				elId,
 62 | 				width: 0
 63 | 			}
 64 | 		},
 65 | 		created() {
 66 | 			this.children = []
 67 | 		},
 68 | 		mounted() {
 69 | 			this.$nextTick(()=>{
 70 | 				this.init()
 71 | 			})
 72 | 		},
 73 | 		methods: {
 74 | 			init() {
 75 | 				setTimeout(() => {
 76 | 					this._getSize((width) => {
 77 | 						this.children.forEach((item, index) => {
 78 | 							item.width = width
 79 | 						})
 80 | 					})
 81 | 				}, 50)
 82 | 			},
 83 | 			change(e) {
 84 | 				this.$emit('change', e)
 85 | 			},
 86 | 			_getSize(fn) {
 87 | 				// #ifndef APP-NVUE
 88 | 				uni.createSelectorQuery()
 89 | 					.in(this)
 90 | 					.select(`#${this.elId}`)
 91 | 					.boundingClientRect()
 92 | 					.exec(ret => {
 93 | 						this.width = parseInt((ret[0].width - 1) / this.column) + 'px'
 94 | 						fn(this.width)
 95 | 					})
 96 | 				// #endif
 97 | 				// #ifdef APP-NVUE
 98 | 				dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
 99 | 					this.width = parseInt((ret.size.width - 1) / this.column) + 'px'
100 | 					fn(this.width)
101 | 				})
102 | 				// #endif
103 | 			}
104 | 		}
105 | 	}
106 | </script>
107 | 
108 | <style lang="scss" scoped>
109 | 	.uni-grid-wrap {
110 | 		/* #ifndef APP-NVUE */
111 | 		display: flex;
112 | 		/* #endif */
113 | 		flex: 1;
114 | 		flex-direction: column;
115 | 		/* #ifdef H5 */
116 | 		width: 100%;
117 | 		/* #endif */
118 | 	}
119 | 
120 | 	.uni-grid {
121 | 		/* #ifndef APP-NVUE */
122 | 		display: flex;
123 | 		/* #endif */
124 | 		// flex: 1;
125 | 		flex-direction: row;
126 | 		flex-wrap: wrap;
127 | 	}
128 | 
129 | 	.uni-grid--border {
130 | 		position: relative;
131 | 		/* #ifdef APP-NVUE */
132 | 		border-left-color: $uni-border-color;
133 | 		border-left-style: solid;
134 | 		border-left-width: 0.5px;
135 | 		/* #endif */
136 | 		/* #ifndef APP-NVUE */
137 | 		z-index: 1;
138 | 		border-left: 1px $uni-border-color solid;
139 | 		/* #endif */
140 | 	}
141 | </style>
142 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-icons/icons.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 | 	"pulldown": "\ue588",
  3 | 	"refreshempty": "\ue461",
  4 | 	"back": "\ue471",
  5 | 	"forward": "\ue470",
  6 | 	"more": "\ue507",
  7 | 	"more-filled": "\ue537",
  8 | 	"scan": "\ue612",
  9 | 	"qq": "\ue264",
 10 | 	"weibo": "\ue260",
 11 | 	"weixin": "\ue261",
 12 | 	"pengyouquan": "\ue262",
 13 | 	"loop": "\ue565",
 14 | 	"refresh": "\ue407",
 15 | 	"refresh-filled": "\ue437",
 16 | 	"arrowthindown": "\ue585",
 17 | 	"arrowthinleft": "\ue586",
 18 | 	"arrowthinright": "\ue587",
 19 | 	"arrowthinup": "\ue584",
 20 | 	"undo-filled": "\ue7d6",
 21 | 	"undo": "\ue406",
 22 | 	"redo": "\ue405",
 23 | 	"redo-filled": "\ue7d9",
 24 | 	"bars": "\ue563",
 25 | 	"chatboxes": "\ue203",
 26 | 	"camera": "\ue301",
 27 | 	"chatboxes-filled": "\ue233",
 28 | 	"camera-filled": "\ue7ef",
 29 | 	"cart-filled": "\ue7f4",
 30 | 	"cart": "\ue7f5",
 31 | 	"checkbox-filled": "\ue442",
 32 | 	"checkbox": "\ue7fa",
 33 | 	"arrowleft": "\ue582",
 34 | 	"arrowdown": "\ue581",
 35 | 	"arrowright": "\ue583",
 36 | 	"smallcircle-filled": "\ue801",
 37 | 	"arrowup": "\ue580",
 38 | 	"circle": "\ue411",
 39 | 	"eye-filled": "\ue568",
 40 | 	"eye-slash-filled": "\ue822",
 41 | 	"eye-slash": "\ue823",
 42 | 	"eye": "\ue824",
 43 | 	"flag-filled": "\ue825",
 44 | 	"flag": "\ue508",
 45 | 	"gear-filled": "\ue532",
 46 | 	"reload": "\ue462",
 47 | 	"gear": "\ue502",
 48 | 	"hand-thumbsdown-filled": "\ue83b",
 49 | 	"hand-thumbsdown": "\ue83c",
 50 | 	"hand-thumbsup-filled": "\ue83d",
 51 | 	"heart-filled": "\ue83e",
 52 | 	"hand-thumbsup": "\ue83f",
 53 | 	"heart": "\ue840",
 54 | 	"home": "\ue500",
 55 | 	"info": "\ue504",
 56 | 	"home-filled": "\ue530",
 57 | 	"info-filled": "\ue534",
 58 | 	"circle-filled": "\ue441",
 59 | 	"chat-filled": "\ue847",
 60 | 	"chat": "\ue263",
 61 | 	"mail-open-filled": "\ue84d",
 62 | 	"email-filled": "\ue231",
 63 | 	"mail-open": "\ue84e",
 64 | 	"email": "\ue201",
 65 | 	"checkmarkempty": "\ue472",
 66 | 	"list": "\ue562",
 67 | 	"locked-filled": "\ue856",
 68 | 	"locked": "\ue506",
 69 | 	"map-filled": "\ue85c",
 70 | 	"map-pin": "\ue85e",
 71 | 	"map-pin-ellipse": "\ue864",
 72 | 	"map": "\ue364",
 73 | 	"minus-filled": "\ue440",
 74 | 	"mic-filled": "\ue332",
 75 | 	"minus": "\ue410",
 76 | 	"micoff": "\ue360",
 77 | 	"mic": "\ue302",
 78 | 	"clear": "\ue434",
 79 | 	"smallcircle": "\ue868",
 80 | 	"close": "\ue404",
 81 | 	"closeempty": "\ue460",
 82 | 	"paperclip": "\ue567",
 83 | 	"paperplane": "\ue503",
 84 | 	"paperplane-filled": "\ue86e",
 85 | 	"person-filled": "\ue131",
 86 | 	"contact-filled": "\ue130",
 87 | 	"person": "\ue101",
 88 | 	"contact": "\ue100",
 89 | 	"images-filled": "\ue87a",
 90 | 	"phone": "\ue200",
 91 | 	"images": "\ue87b",
 92 | 	"image": "\ue363",
 93 | 	"image-filled": "\ue877",
 94 | 	"location-filled": "\ue333",
 95 | 	"location": "\ue303",
 96 | 	"plus-filled": "\ue439",
 97 | 	"plus": "\ue409",
 98 | 	"plusempty": "\ue468",
 99 | 	"help-filled": "\ue535",
100 | 	"help": "\ue505",
101 | 	"navigate-filled": "\ue884",
102 | 	"navigate": "\ue501",
103 | 	"mic-slash-filled": "\ue892",
104 | 	"search": "\ue466",
105 | 	"settings": "\ue560",
106 | 	"sound": "\ue590",
107 | 	"sound-filled": "\ue8a1",
108 | 	"spinner-cycle": "\ue465",
109 | 	"download-filled": "\ue8a4",
110 | 	"personadd-filled": "\ue132",
111 | 	"videocam-filled": "\ue8af",
112 | 	"personadd": "\ue102",
113 | 	"upload": "\ue402",
114 | 	"upload-filled": "\ue8b1",
115 | 	"starhalf": "\ue463",
116 | 	"star-filled": "\ue438",
117 | 	"star": "\ue408",
118 | 	"trash": "\ue401",
119 | 	"phone-filled": "\ue230",
120 | 	"compose": "\ue400",
121 | 	"videocam": "\ue300",
122 | 	"trash-filled": "\ue8dc",
123 | 	"download": "\ue403",
124 | 	"chatbubble-filled": "\ue232",
125 | 	"chatbubble": "\ue202",
126 | 	"cloud-download": "\ue8e4",
127 | 	"cloud-upload-filled": "\ue8e5",
128 | 	"cloud-upload": "\ue8e6",
129 | 	"cloud-download-filled": "\ue8e9",
130 | 	"headphones":"\ue8bf",
131 | 	"shop":"\ue609"
132 | }
133 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-icons/uni.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/components/uni-ui/uni-icons/uni.ttf


--------------------------------------------------------------------------------
/components/uni-ui/uni-indexed-list/uni-indexed-list-item.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view>
  3 | 		<view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
  4 | 			<text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
  5 | 		</view>
  6 | 		<view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
  7 | 			<view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
  8 | 				<view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
  9 | 					<view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}">
 10 | 						<view v-if="showSelect" style="margin-right: 20rpx;">
 11 | 							<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#aaa'" size="24" />
 12 | 						</view>
 13 | 						<text class="uni-indexed-list__item-content">{{ item.name }}</text>
 14 | 					</view>
 15 | 				</view>
 16 | 			</view>
 17 | 		</view>
 18 | 	</view>
 19 | </template>
 20 | 
 21 | <script>
 22 | 	import uniIcons from '../uni-icons/uni-icons.vue'
 23 | 	export default {
 24 | 		name: 'UniIndexedList',
 25 | 		components: {
 26 | 			uniIcons
 27 | 		},
 28 | 		props: {
 29 | 			loaded: {
 30 | 				type: Boolean,
 31 | 				default: false
 32 | 			},
 33 | 			idx: {
 34 | 				type: Number,
 35 | 				default: 0
 36 | 			},
 37 | 			list: {
 38 | 				type: Object,
 39 | 				default () {
 40 | 					return {}
 41 | 				}
 42 | 			},
 43 | 			showSelect: {
 44 | 				type: Boolean,
 45 | 				default: false
 46 | 			}
 47 | 		},
 48 | 		methods: {
 49 | 			onClick(idx, index) {
 50 | 				this.$emit("itemClick", {
 51 | 					idx,
 52 | 					index
 53 | 				})
 54 | 			}
 55 | 		}
 56 | 	}
 57 | </script>
 58 | 
 59 | <style lang="scss" scoped>
 60 | 	.uni-indexed-list__list {
 61 | 		background-color: $uni-bg-color;
 62 | 		/* #ifndef APP-NVUE */
 63 | 		display: flex;
 64 | 		/* #endif */
 65 | 		flex-direction: column;
 66 | 		border-top-style: solid;
 67 | 		border-top-width: 1px;
 68 | 		border-top-color: $uni-border-color;
 69 | 	}
 70 | 
 71 | 	.uni-indexed-list__item {
 72 | 		font-size: $uni-font-size-lg;
 73 | 		/* #ifndef APP-NVUE */
 74 | 		display: flex;
 75 | 		/* #endif */
 76 | 		flex: 1;
 77 | 		flex-direction: row;
 78 | 		justify-content: space-between;
 79 | 		align-items: center;
 80 | 	}
 81 | 
 82 | 	.uni-indexed-list__item-container {
 83 | 		padding-left: $uni-spacing-row-lg;
 84 | 		flex: 1;
 85 | 		position: relative;
 86 | 		/* #ifndef APP-NVUE */
 87 | 		display: flex;
 88 | 		box-sizing: border-box;
 89 | 		/* #endif */
 90 | 		flex-direction: row;
 91 | 		justify-content: space-between;
 92 | 		align-items: center;
 93 | 	}
 94 | 
 95 | 	.uni-indexed-list__item-border {
 96 | 		flex: 1;
 97 | 		position: relative;
 98 | 		/* #ifndef APP-NVUE */
 99 | 		display: flex;
100 | 		box-sizing: border-box;
101 | 		/* #endif */
102 | 		flex-direction: row;
103 | 		justify-content: space-between;
104 | 		align-items: center;
105 | 		height: 50px;
106 | 		padding: $uni-spacing-row-lg;
107 | 		padding-left: 0;
108 | 		border-bottom-style: solid;
109 | 		border-bottom-width: 1px;
110 | 		border-bottom-color: $uni-border-color;
111 | 	}
112 | 
113 | 	.uni-indexed-list__item-border--last {
114 | 		border-bottom-width: 0px;
115 | 	}
116 | 
117 | 	.uni-indexed-list__item-content {
118 | 		flex: 1;
119 | 		font-size: 14px;
120 | 	}
121 | 
122 | 	.uni-indexed-list {
123 | 		/* #ifndef APP-NVUE */
124 | 		display: flex;
125 | 		/* #endif */
126 | 		flex-direction: row;
127 | 	}
128 | 
129 | 	.uni-indexed-list__title-wrapper {
130 | 		/* #ifndef APP-NVUE */
131 | 		display: flex;
132 | 		width: 100%;
133 | 		/* #endif */
134 | 		background-color: #f7f7f7;
135 | 	}
136 | 
137 | 	.uni-indexed-list__title {
138 | 		padding: 6px 12px;
139 | 		line-height: 24px;
140 | 		font-size: $uni-font-size-sm;
141 | 	}
142 | </style>
143 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-link/uni-link.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<text class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}" :style="{color,fontSize:fontSize+'px'}"
 3 | 	 @click="openURL">{{text}}</text>
 4 | </template>
 5 | 
 6 | <script>
 7 | 	/**
 8 | 	 * Link 外部网页超链接组件
 9 | 	 * @description uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页
10 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=1182
11 | 	 * @property {String} href 点击后打开的外部网页url
12 | 	 * @property {String} text 显示的文字
13 | 	 * @property {Boolean} showUnderLine 是否显示下划线
14 | 	 * @property {String} copyTips 在小程序端复制链接时显示的提示语
15 | 	 * @property {String} color 链接文字颜色
16 | 	 * @property {String} fontSize 链接文字大小
17 | 	 * @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link>
18 | 	 */
19 | 	export default {
20 | 		name: 'uniLink',
21 | 		props: {
22 | 			href: {
23 | 				type: String,
24 | 				default: ''
25 | 			},
26 | 			text: {
27 | 				type: String,
28 | 				default: ''
29 | 			},
30 | 			showUnderLine: {
31 | 				type: [Boolean, String],
32 | 				default: true
33 | 			},
34 | 			copyTips: {
35 | 				type: String,
36 | 				default: '已自动复制网址，请在手机浏览器里粘贴该网址'
37 | 			},
38 | 			color: {
39 | 				type: String,
40 | 				default: '#999999'
41 | 			},
42 | 			fontSize: {
43 | 				type: [Number, String],
44 | 				default: 14
45 | 			}
46 | 		},
47 | 		methods: {
48 | 			openURL() {
49 | 				// #ifdef APP-PLUS
50 | 				plus.runtime.openURL(this.href)
51 | 				// #endif
52 | 				// #ifdef H5
53 | 				window.open(this.href)
54 | 				// #endif
55 | 				// #ifdef MP
56 | 				uni.setClipboardData({
57 | 					data: this.href
58 | 				});
59 | 				uni.showModal({
60 | 					content: this.copyTips,
61 | 					showCancel: false
62 | 				});
63 | 				// #endif
64 | 			}
65 | 		}
66 | 	}
67 | </script>
68 | 
69 | <style>
70 | 	.uni-link--withline {
71 | 		text-decoration: underline;
72 | 	}
73 | </style>
74 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-list-ad/uni-list-ad.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<!-- #ifdef APP-NVUE -->
 3 | 	<cell>
 4 | 		<!-- #endif -->
 5 | 		<view class="uni-list-ad">
 6 | 			<view v-if="borderShow" :class="{'uni-list--border':border,'uni-list-item--first':isFirstChild}"></view>
 7 | 			<ad style="width: 200px;height: 300px;border-width: 1px;border-color: red;border-style: solid;" adpid="1111111111" unit-id="" appid="" apid="" type="feed" @error="aderror" @close="closeAd"></ad>
 8 | 		</view>
 9 | 		<!-- #ifdef APP-NVUE -->
10 | 	</cell>
11 | 	<!-- #endif -->
12 | 
13 | </template>
14 | 
15 | <script>
16 | 	// #ifdef APP-NVUE
17 | 	const dom = uni.requireNativePlugin('dom');
18 | 	// #endif
19 | 	export default {
20 | 		name: 'UniListAd',
21 | 		props: {
22 | 			title: {
23 | 				type: String,
24 | 				default: '',
25 | 
26 | 			}
27 | 		},
28 | 		inject: ['list'],
29 | 		data() {
30 | 			return {
31 | 				isFirstChild: false,
32 | 				border: false,
33 | 				borderShow: true,
34 | 			}
35 | 		},
36 | 
37 | 		mounted() {
38 | 			if (!this.list.firstChildAppend) {
39 | 				this.list.firstChildAppend = true
40 | 				this.isFirstChild = true
41 | 			}
42 | 			this.border = this.list.border
43 | 		},
44 | 		methods: {
45 | 			aderror(e) {
46 | 				console.log("aderror: " + JSON.stringify(e.detail));
47 | 			},
48 | 			closeAd(e) {
49 | 				this.borderShow = false
50 | 			}
51 | 		}
52 | 	}
53 | </script>
54 | 
55 | <style lang="scss" scoped>
56 | 	.uni-list-ad {
57 | 		position: relative;
58 | 		border: 1px red solid;
59 | 	}
60 | 
61 | 	.uni-list--border {
62 | 		position: relative;
63 | 		padding-bottom: 1px;
64 | 		/* #ifdef APP-PLUS */
65 | 		border-top-color: $uni-border-color;
66 | 		border-top-style: solid;
67 | 		border-top-width: 0.5px;
68 | 		/* #endif */
69 | 		margin-left: $uni-spacing-row-lg;
70 | 	}
71 | 
72 | 	/* #ifndef APP-NVUE */
73 | 	.uni-list--border:after {
74 | 		position: absolute;
75 | 		top: 0;
76 | 		right: 0;
77 | 		left: 0;
78 | 		height: 1px;
79 | 		content: '';
80 | 		-webkit-transform: scaleY(.5);
81 | 		transform: scaleY(.5);
82 | 		background-color: $uni-border-color;
83 | 	}
84 | 
85 | 	.uni-list-item--first:after {
86 | 		height: 0px;
87 | 	}
88 | 
89 | 	/* #endif */
90 | </style>
91 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-list-chat/uni-list-chat.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 这里是 uni-list 组件内置的常用样式变量
 3 |  * 如果需要覆盖样式，这里提供了基本的组件样式变量，您可以尝试修改这里的变量，去完成样式替换，而不用去修改源码
 4 |  *
 5 |  */
 6 | 
 7 | // 背景色
 8 | $background-color : #fff;
 9 | // 分割线颜色
10 | $divide-line-color : #e5e5e5;
11 | 
12 | // 默认头像大小，如需要修改此值，注意同步修改 js 中的值 const avatarWidth = xx ，目前只支持方形头像
13 | // nvue 页面不支持修改头像大小
14 | $avatar-width : 45px ;
15 | 
16 | // 头像边框
17 | $avatar-border-radius: 5px;
18 | $avatar-border-color: #eee;
19 | $avatar-border-width: 1px;
20 | 
21 | // 标题文字样式
22 | $title-size : 16px;
23 | $title-color : #3b4144;
24 | $title-weight : normal;
25 | 
26 | // 描述文字样式
27 | $note-size : 12px;
28 | $note-color : #999;
29 | $note-weight : normal;
30 | 
31 | // 右侧额外内容默认样式
32 | $right-text-size : 12px;
33 | $right-text-color : #999;
34 | $right-text-weight : normal;
35 | 
36 | // 角标样式
37 | // nvue 页面不支持修改圆点位置以及大小
38 | // 角标在左侧时，角标的位置，默认为 0 ，负数左/下移动，正数右/上移动
39 | $badge-left: 0px;
40 | $badge-top: 0px;
41 | 
42 | // 显示圆点时，圆点大小
43 | $dot-width: 10px;
44 | $dot-height: 10px;
45 | 
46 | // 显示角标时，角标大小和字体大小
47 | $badge-size : 18px;
48 | $badge-font : 12px;
49 | // 显示角标时，角标前景色
50 | $badge-color : #fff;
51 | // 显示角标时，角标背景色
52 | $badge-background-color : #ff5a5f;
53 | // 显示角标时，角标左右间距
54 | $badge-space : 6px;
55 | 
56 | // 状态样式
57 | // 选中颜色
58 | $hover : #f5f5f5;
59 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-list/uni-list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<!-- #ifndef APP-NVUE -->
  3 | 	<view class="uni-list uni-border-top-bottom">
  4 | 		<view v-if="border" class="uni-list--border-top"></view>
  5 | 		<slot />
  6 | 		<view v-if="border" class="uni-list--border-bottom"></view>
  7 | 	</view>
  8 | 	<!-- #endif -->
  9 | 	<!-- #ifdef APP-NVUE -->
 10 | 	<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
 11 | 	<!-- #endif -->
 12 | </template>
 13 | 
 14 | <script>
 15 | /**
 16 |  * List 列表
 17 |  * @description 列表组件
 18 |  * @tutorial https://ext.dcloud.net.cn/plugin?id=24
 19 |  * @property {String} 	border = [true|false] 		标题
 20 |  */
 21 | export default {
 22 | 	name: 'UniList',
 23 | 	'mp-weixin': {
 24 | 		options: {
 25 | 			multipleSlots: false
 26 | 		}
 27 | 	},
 28 | 	props: {
 29 | 		enableBackToTop: {
 30 | 			type: [Boolean, String],
 31 | 			default: false
 32 | 		},
 33 | 		scrollY: {
 34 | 			type: [Boolean, String],
 35 | 			default: false
 36 | 		},
 37 | 		border: {
 38 | 			type: Boolean,
 39 | 			default: true
 40 | 		}
 41 | 	},
 42 | 	provide() {
 43 | 		return {
 44 | 			list: this
 45 | 		};
 46 | 	},
 47 | 	created() {
 48 | 		this.firstChildAppend = false;
 49 | 	},
 50 | 	methods: {
 51 | 		loadMore(e) {
 52 | 			this.$emit('scrolltolower');
 53 | 		}
 54 | 	}
 55 | };
 56 | </script>
 57 | <style lang="scss">
 58 | .uni-list {
 59 | 	/* #ifndef APP-NVUE */
 60 | 	display: flex;
 61 | 	/* #endif */
 62 | 	background-color: $uni-bg-color;
 63 | 	position: relative;
 64 | 	flex-direction: column;
 65 | }
 66 | 
 67 | .uni-list--border {
 68 | 	position: relative;
 69 | 	/* #ifdef APP-NVUE */
 70 | 	border-top-color: $uni-border-color;
 71 | 	border-top-style: solid;
 72 | 	border-top-width: 0.5px;
 73 | 	border-bottom-color: $uni-border-color;
 74 | 	border-bottom-style: solid;
 75 | 	border-bottom-width: 0.5px;
 76 | 	/* #endif */
 77 | 	z-index: -1;
 78 | }
 79 | 
 80 | /* #ifndef APP-NVUE */
 81 | 
 82 | .uni-list--border-top {
 83 | 	position: absolute;
 84 | 	top: 0;
 85 | 	right: 0;
 86 | 	left: 0;
 87 | 	height: 1px;
 88 | 	-webkit-transform: scaleY(0.5);
 89 | 	transform: scaleY(0.5);
 90 | 	background-color: $uni-border-color;
 91 | 	z-index: 1;
 92 | }
 93 | 
 94 | .uni-list--border-bottom {
 95 | 	position: absolute;
 96 | 	bottom: 0;
 97 | 	right: 0;
 98 | 	left: 0;
 99 | 	height: 1px;
100 | 	-webkit-transform: scaleY(0.5);
101 | 	transform: scaleY(0.5);
102 | 	background-color: $uni-border-color;
103 | }
104 | 
105 | /* #endif */
106 | </style>
107 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-list/uni-refresh.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <!-- #ifdef APP-NVUE -->
 3 |     <refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
 4 |         <slot />
 5 |     </refresh>
 6 |     <!-- #endif -->
 7 |     <!-- #ifndef APP-NVUE -->
 8 |     <view ref="uni-refresh" class="uni-refresh" v-show="isShow">
 9 |         <slot />
10 |     </view>
11 |     <!-- #endif -->
12 | </template>
13 | 
14 | <script>
15 |     export default {
16 |         name: 'UniRefresh',
17 |         props: {
18 |             display: {
19 |                 type: [String],
20 |                 default: "hide"
21 |             }
22 |         },
23 |         data() {
24 |             return {
25 |                 pulling: false
26 |             }
27 |         },
28 |         computed: {
29 |             isShow() {
30 |                 if (this.display === "show" || this.pulling === true) {
31 |                     return true;
32 |                 }
33 |                 return false;
34 |             }
35 |         },
36 |         created() {},
37 |         methods: {
38 |             onchange(value) {
39 |                 this.pulling = value;
40 |             },
41 |             onrefresh(e) {
42 |                 this.$emit("refresh", e);
43 |             },
44 |             onpullingdown(e) {
45 |                 // #ifdef APP-NVUE
46 |                 this.$emit("pullingdown", e);
47 |                 // #endif
48 |                 // #ifndef APP-NVUE
49 |                 var detail = {
50 |                     viewHeight: 90,
51 |                     pullingDistance: e.height
52 |                 }
53 |                 this.$emit("pullingdown", detail);
54 |                 // #endif
55 |             }
56 |         }
57 |     }
58 | </script>
59 | 
60 | <style>
61 |     .uni-refresh {
62 |         height: 0;
63 |         overflow: hidden;
64 |     }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-list/uni-refresh.wxs:
--------------------------------------------------------------------------------
 1 | var pullDown = {
 2 |     threshold: 95,
 3 |     maxHeight: 200,
 4 |     callRefresh: 'onrefresh',
 5 |     callPullingDown: 'onpullingdown',
 6 |     refreshSelector: '.uni-refresh'
 7 | };
 8 | 
 9 | function ready(newValue, oldValue, ownerInstance, instance) {
10 |     var state = instance.getState()
11 |     state.canPullDown = newValue;
12 |     // console.log(newValue);
13 | }
14 | 
15 | function touchStart(e, instance) {
16 |     var state = instance.getState();
17 |     state.refreshInstance = instance.selectComponent(pullDown.refreshSelector);
18 |     state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined);
19 |     if (!state.canPullDown) {
20 |         return
21 |     }
22 | 
23 |     // console.log("touchStart");
24 | 
25 |     state.height = 0;
26 |     state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY;
27 |     state.refreshInstance.setStyle({
28 |         'height': 0
29 |     });
30 |     state.refreshInstance.callMethod("onchange", true);
31 | }
32 | 
33 | function touchMove(e, ownerInstance) {
34 |     var instance = e.instance;
35 |     var state = instance.getState();
36 |     if (!state.canPullDown) {
37 |         return
38 |     }
39 | 
40 |     var oldHeight = state.height;
41 |     var endY = e.touches[0].pageY || e.changedTouches[0].pageY;
42 |     var height = endY - state.touchStartY;
43 |     if (height > pullDown.maxHeight) {
44 |         return;
45 |     }
46 | 
47 |     var refreshInstance = state.refreshInstance;
48 |     refreshInstance.setStyle({
49 |         'height': height + 'px'
50 |     });
51 | 
52 |     height = height < pullDown.maxHeight ? height : pullDown.maxHeight;
53 |     state.height = height;
54 |     refreshInstance.callMethod(pullDown.callPullingDown, {
55 |         height: height
56 |     });
57 | }
58 | 
59 | function touchEnd(e, ownerInstance) {
60 |     var state = e.instance.getState();
61 |     if (!state.canPullDown) {
62 |         return
63 |     }
64 | 
65 |     state.refreshInstance.callMethod("onchange", false);
66 | 
67 |     var refreshInstance = state.refreshInstance;
68 |     if (state.height > pullDown.threshold) {
69 |         refreshInstance.callMethod(pullDown.callRefresh);
70 |         return;
71 |     }
72 | 
73 |     refreshInstance.setStyle({
74 |         'height': 0
75 |     });
76 | }
77 | 
78 | function propObserver(newValue, oldValue, instance) {
79 |     pullDown = newValue;
80 | }
81 | 
82 | module.exports = {
83 |     touchmove: touchMove,
84 |     touchstart: touchStart,
85 |     touchend: touchEnd,
86 |     propObserver: propObserver
87 | }
88 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-nav-bar/uni-nav-bar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-navbar">
  3 | 		<view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" :style="{ 'background-color': backgroundColor }"
  4 | 		 class="uni-navbar__content">
  5 | 			<uni-status-bar v-if="statusBar" />
  6 | 			<view :style="{ color: color,backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view">
  7 | 				<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view">
  8 | 					<view class="uni-navbar__content_view" v-if="leftIcon.length">
  9 | 						<uni-icons :color="color" :type="leftIcon" size="24" />
 10 | 					</view>
 11 | 					<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }" class="uni-navbar-btn-text uni-navbar__content_view"
 12 | 					 v-if="leftText.length">
 13 | 						<text :style="{ color: color, fontSize: '14px' }">{{ leftText }}</text>
 14 | 					</view>
 15 | 					<slot name="left" />
 16 | 				</view>
 17 | 				<view class="uni-navbar__header-container uni-navbar__content_view" @tap="onClickTitle">
 18 | 					<view class="uni-navbar__header-container-inner uni-navbar__content_view" v-if="title.length">
 19 | 						<text class="uni-nav-bar-text" :style="{color: color }">{{ title }}</text>
 20 | 					</view>
 21 | 					<!-- 标题插槽 -->
 22 | 					<slot />
 23 | 				</view>
 24 | 				<view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @tap="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view">
 25 | 					<view class="uni-navbar__content_view" v-if="rightIcon.length">
 26 | 						<uni-icons :color="color" :type="rightIcon" size="24" />
 27 | 					</view>
 28 | 					<!-- 优先显示图标 -->
 29 | 					<view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length">
 30 | 						<text class="uni-nav-bar-right-text">{{ rightText }}</text>
 31 | 					</view>
 32 | 					<slot name="right" />
 33 | 				</view>
 34 | 			</view>
 35 | 		</view>
 36 | 		<view class="uni-navbar__placeholder" v-if="fixed">
 37 | 			<uni-status-bar v-if="statusBar" />
 38 | 			<view class="uni-navbar__placeholder-view" />
 39 | 		</view>
 40 | 	</view>
 41 | </template>
 42 | 
 43 | <script>
 44 | 	import uniStatusBar from "../uni-status-bar/uni-status-bar.vue";
 45 | 	import uniIcons from "../uni-icons/uni-icons.vue";
 46 | 
 47 | 	/**
 48 | 	 * NavBar 自定义导航栏
 49 | 	 * @description 导航栏组件，主要用于头部导航
 50 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=52
 51 | 	 * @property {String} title 标题文字
 52 | 	 * @property {String} leftText 左侧按钮文本
 53 | 	 * @property {String} rightText 右侧按钮文本
 54 | 	 * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
 55 | 	 * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
 56 | 	 * @property {String} color 图标和文字颜色
 57 | 	 * @property {String} backgroundColor 导航栏背景颜色
 58 | 	 * @property {Boolean} fixed = [true|false] 是否固定顶部
 59 | 	 * @property {Boolean} statusBar = [true|false] 是否包含状态栏
 60 | 	 * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
 61 | 	 * @event {Function} clickLeft 左侧按钮点击时触发
 62 | 	 * @event {Function} clickRight 右侧按钮点击时触发
 63 | 	 * @event {Function} clickTitle 中间标题点击时触发
 64 | 	 */
 65 | 	export default {
 66 | 		name: "UniNavBar",
 67 | 		components: {
 68 | 			uniStatusBar,
 69 | 			uniIcons
 70 | 		},
 71 | 		props: {
 72 | 			title: {
 73 | 				type: String,
 74 | 				default: ""
 75 | 			},
 76 | 			leftText: {
 77 | 				type: String,
 78 | 				default: ""
 79 | 			},
 80 | 			rightText: {
 81 | 				type: String,
 82 | 				default: ""
 83 | 			},
 84 | 			leftIcon: {
 85 | 				type: String,
 86 | 				default: ""
 87 | 			},
 88 | 			rightIcon: {
 89 | 				type: String,
 90 | 				default: ""
 91 | 			},
 92 | 			fixed: {
 93 | 				type: [Boolean, String],
 94 | 				default: false
 95 | 			},
 96 | 			color: {
 97 | 				type: String,
 98 | 				default: "#000000"
 99 | 			},
100 | 			backgroundColor: {
101 | 				type: String,
102 | 				default: "#FFFFFF"
103 | 			},
104 | 			statusBar: {
105 | 				type: [Boolean, String],
106 | 				default: false
107 | 			},
108 | 			shadow: {
109 | 				type: [Boolean, String],
110 | 				default: false
111 | 			},
112 | 			border: {
113 | 				type: [Boolean, String],
114 | 				default: true
115 | 			}
116 | 		},
117 |         mounted() {
118 |           if(uni.report && this.title !== '') {
119 |               uni.report('title', this.title)
120 |           }
121 |         },
122 | 		methods: {
123 | 			onClickLeft() {
124 | 				this.$emit("clickLeft");
125 | 			},
126 | 			onClickRight() {
127 | 				this.$emit("clickRight");
128 | 			},
129 | 			onClickTitle() {
130 | 				this.$emit("clickTitle");
131 | 			}
132 | 		}
133 | 	};
134 | </script>
135 | 
136 | <style lang="scss" scoped>
137 | 	$nav-height: 44px;
138 | 
139 | 	.uni-nav-bar-text {
140 | 		/* #ifdef APP-PLUS */
141 | 		font-size: 34rpx;
142 | 		/* #endif */
143 | 		/* #ifndef APP-PLUS */
144 | 		font-size: $uni-font-size-lg;
145 | 		/* #endif */
146 | 	}
147 | 
148 | 	.uni-nav-bar-right-text {
149 | 		font-size: $uni-font-size-base;
150 | 	}
151 | 
152 | 	.uni-navbar__content {
153 | 		position: relative;
154 | 		background-color: $uni-bg-color;
155 | 		overflow: hidden;
156 | 		width: 750rpx;
157 | 	}
158 | 
159 | 	.uni-navbar__content_view {
160 | 		/* #ifndef APP-NVUE */
161 | 		display: flex;
162 | 		/* #endif */
163 | 		align-items: center;
164 | 		flex-direction: row;
165 | 		// background-color: #FFFFFF;
166 | 	}
167 | 
168 | 	.uni-navbar__header {
169 | 		/* #ifndef APP-NVUE */
170 | 		display: flex;
171 | 		/* #endif */
172 | 		flex-direction: row;
173 | 		height: $nav-height;
174 | 		line-height: $nav-height;
175 | 		font-size: 16px;
176 | 		// background-color: #ffffff;
177 | 	}
178 | 
179 | 	.uni-navbar__header-btns {
180 | 		/* #ifndef APP-NVUE */
181 | 		display: flex;
182 | 		/* #endif */
183 | 		flex-wrap: nowrap;
184 | 		width: 120rpx;
185 | 		padding: 0 6px;
186 | 		justify-content: center;
187 | 		align-items: center;
188 | 	}
189 | 
190 | 	.uni-navbar__header-btns-left {
191 | 		/* #ifndef APP-NVUE */
192 | 		display: flex;
193 | 		/* #endif */
194 | 		width: 150rpx;
195 | 		justify-content: flex-start;
196 | 	}
197 | 
198 | 	.uni-navbar__header-btns-right {
199 | 		/* #ifndef APP-NVUE */
200 | 		display: flex;
201 | 		/* #endif */
202 | 		width: 150rpx;
203 | 		padding-right: 30rpx;
204 | 		justify-content: flex-end;
205 | 	}
206 | 
207 | 	.uni-navbar__header-container {
208 | 		flex: 1;
209 | 	}
210 | 
211 | 	.uni-navbar__header-container-inner {
212 | 		/* #ifndef APP-NVUE */
213 | 		display: flex;
214 | 		/* #endif */
215 | 		flex: 1;
216 | 		align-items: center;
217 | 		justify-content: center;
218 | 		font-size: $uni-font-size-base;
219 | 	}
220 | 
221 | 
222 | 	.uni-navbar__placeholder-view {
223 | 		height: $nav-height;
224 | 	}
225 | 
226 | 	.uni-navbar--fixed {
227 | 		position: fixed;
228 | 		z-index: 998;
229 | 	}
230 | 
231 | 	.uni-navbar--shadow {
232 | 		/* #ifndef APP-NVUE */
233 | 		box-shadow: 0 1px 6px #ccc;
234 | 		/* #endif */
235 | 	}
236 | 
237 | 	.uni-navbar--border {
238 | 		border-bottom-width: 1rpx;
239 | 		border-bottom-style: solid;
240 | 		border-bottom-color: $uni-border-color;
241 | 	}
242 | </style>
243 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-number-box/uni-number-box.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-numbox">
  3 | 		<view @click="_calcValue('minus')" class="uni-numbox__minus">
  4 | 			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text>
  5 | 		</view>
  6 | 		<input :disabled="disabled" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" />
  7 | 		<view @click="_calcValue('plus')" class="uni-numbox__plus">
  8 | 			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text>
  9 | 		</view>
 10 | 	</view>
 11 | </template>
 12 | <script>
 13 | 
 14 | 	/**
 15 | 	 * NumberBox 数字输入框
 16 | 	 * @description 带加减按钮的数字输入框
 17 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=31
 18 | 	 * @property {Number} value 输入框当前值
 19 | 	 * @property {Number} min 最小值
 20 | 	 * @property {Number} max 最大值
 21 | 	 * @property {Number} step 每次点击改变的间隔大小
 22 | 	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
 23 | 	 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
 24 | 	 */
 25 | 
 26 | 	export default {
 27 | 		name: "UniNumberBox",
 28 | 		props: {
 29 | 			value: {
 30 | 				type: [Number, String],
 31 | 				default: 1
 32 | 			},
 33 | 			min: {
 34 | 				type: Number,
 35 | 				default: 0
 36 | 			},
 37 | 			max: {
 38 | 				type: Number,
 39 | 				default: 100
 40 | 			},
 41 | 			step: {
 42 | 				type: Number,
 43 | 				default: 1
 44 | 			},
 45 | 			disabled: {
 46 | 				type: Boolean,
 47 | 				default: false
 48 | 			}
 49 | 		},
 50 | 		data() {
 51 | 			return {
 52 | 				inputValue: 0
 53 | 			};
 54 | 		},
 55 | 		watch: {
 56 | 			value(val) {
 57 | 				this.inputValue = +val;
 58 | 			},
 59 | 			inputValue(newVal, oldVal) {
 60 | 				if (+newVal !== +oldVal) {
 61 | 					this.$emit("change", newVal);
 62 | 				}
 63 | 			}
 64 | 		},
 65 | 		created() {
 66 | 			this.inputValue = +this.value;
 67 | 		},
 68 | 		methods: {
 69 | 			_calcValue(type) {
 70 | 				if (this.disabled) {
 71 | 					return;
 72 | 				}
 73 | 				const scale = this._getDecimalScale();
 74 | 				let value = this.inputValue * scale;
 75 | 				let step = this.step * scale;
 76 | 				if (type === "minus") {
 77 | 					value -= step;
 78 | 					if (value < (this.min * scale)) {
 79 | 						return;
 80 | 					}
 81 | 					if (value > (this.max * scale)) {
 82 | 						value = this.max * scale
 83 | 					}
 84 | 				} else if (type === "plus") {
 85 | 					value += step;
 86 | 					if (value > (this.max * scale)) {
 87 | 						return;
 88 | 					}
 89 | 					if (value < (this.min * scale)) {
 90 | 						value = this.min * scale
 91 | 					}
 92 | 				}
 93 | 
 94 | 				this.inputValue = String(value / scale);
 95 | 			},
 96 | 			_getDecimalScale() {
 97 | 				let scale = 1;
 98 | 				// 浮点型
 99 | 				if (~~this.step !== this.step) {
100 | 					scale = Math.pow(10, (this.step + "").split(".")[1].length);
101 | 				}
102 | 				return scale;
103 | 			},
104 | 			_onBlur(event) {
105 | 				let value = event.detail.value;
106 | 				if (!value) {
107 | 					// this.inputValue = 0;
108 | 					return;
109 | 				}
110 | 				value = +value;
111 | 				if (value > this.max) {
112 | 					value = this.max;
113 | 				} else if (value < this.min) {
114 | 					value = this.min;
115 | 				}
116 | 				this.inputValue = value;
117 | 			}
118 | 		}
119 | 	};
120 | </script>
121 | <style lang="scss" scoped>
122 | 	$box-height: 35px;
123 | 	/* #ifdef APP-NVUE */
124 | 	$box-line-height: 35px;
125 | 	/* #endif */
126 | 	$box-line-height: 26px;
127 | 	$box-width: 35px;
128 | 
129 | 	.uni-numbox {
130 | 		/* #ifndef APP-NVUE */
131 | 		display: flex;
132 | 		/* #endif */
133 | 		flex-direction: row;
134 | 		height: $box-height;
135 | 		line-height: $box-height;
136 | 		width: 120px;
137 | 	}
138 | 
139 | 	.uni-numbox__value {
140 | 		background-color: $uni-bg-color;
141 | 		width: 40px;
142 | 		height: $box-height;
143 | 		text-align: center;
144 | 		font-size: $uni-font-size-lg;
145 | 		border-width: 1rpx;
146 | 		border-style: solid;
147 | 		border-color: $uni-border-color;
148 | 		border-left-width: 0;
149 | 		border-right-width: 0;
150 | 	}
151 | 
152 | 	.uni-numbox__minus {
153 | 		/* #ifndef APP-NVUE */
154 | 		display: flex;
155 | 		/* #endif */
156 | 		flex-direction: row;
157 | 		align-items: center;
158 | 		justify-content: center;
159 | 		width: $box-width;
160 | 		height: $box-height;
161 | 		// line-height: $box-line-height;
162 | 		// text-align: center;
163 | 		font-size: 20px;
164 | 		color: $uni-text-color;
165 | 		background-color: $uni-bg-color-grey;
166 | 		border-width: 1rpx;
167 | 		border-style: solid;
168 | 		border-color: $uni-border-color;
169 | 		border-top-left-radius: $uni-border-radius-base;
170 | 		border-bottom-left-radius: $uni-border-radius-base;
171 | 		border-right-width: 0;
172 | 	}
173 | 
174 | 	.uni-numbox__plus {
175 | 		/* #ifndef APP-NVUE */
176 | 		display: flex;
177 | 		/* #endif */
178 | 		flex-direction: row;
179 | 		align-items: center;
180 | 		justify-content: center;
181 | 		width: $box-width;
182 | 		height: $box-height;
183 | 		border-width: 1rpx;
184 | 		border-style: solid;
185 | 		border-color: $uni-border-color;
186 | 		border-top-right-radius: $uni-border-radius-base;
187 | 		border-bottom-right-radius: $uni-border-radius-base;
188 | 		background-color: $uni-bg-color-grey;
189 | 		border-left-width: 0;
190 | 	}
191 | 
192 | 	.uni-numbox--text {
193 | 		font-size: 40rpx;
194 | 		color: $uni-text-color;
195 | 	}
196 | 
197 | 	.uni-numbox--disabled {
198 | 		color: $uni-text-color-disable;
199 | 	}
200 | </style>
201 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-pagination/uni-pagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-pagination">
  3 | 		<view class="uni-pagination__btn" :class="currentIndex === 1 ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
  4 | 		 :hover-class="currentIndex === 1 ? '' : 'uni-pagination--hover'" :hover-start-time="20" :hover-stay-time="70"
  5 | 		 @click="clickLeft">
  6 | 			<template v-if="showIcon===true || showIcon === 'true'">
  7 | 				<uni-icons color="#000" size="20" type="arrowleft" />
  8 | 			</template>
  9 | 			<template v-else><text class="uni-pagination__child-btn">{{ prevText }}</text></template>
 10 | 		</view>
 11 | 		<view class="uni-pagination__num">
 12 | 			<view class="uni-pagination__num-current">
 13 | 				<text class="uni-pagination__num-current-text" style="color:#007aff">{{ currentIndex }}</text><text class="uni-pagination__num-current-text">/{{ maxPage || 0 }}</text>
 14 | 			</view>
 15 | 		</view>
 16 | 		<view class="uni-pagination__btn" :class="currentIndex === maxPage ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
 17 | 		 :hover-class="currentIndex === maxPage ? '' : 'uni-pagination--hover'" :hover-start-time="20" :hover-stay-time="70"
 18 | 		 @click="clickRight">
 19 | 			<template v-if="showIcon===true || showIcon === 'true'">
 20 | 				<uni-icons color="#000" size="20" type="arrowright" />
 21 | 			</template>
 22 | 			<template v-else><text class="uni-pagination__child-btn">{{ nextText }}</text></template>
 23 | 		</view>
 24 | 	</view>
 25 | </template>
 26 | 
 27 | <script>
 28 | 	import uniIcons from '../uni-icons/uni-icons.vue'
 29 | 
 30 | 	/**
 31 | 	 * Pagination 分页器
 32 | 	 * @description 分页器组件，用于展示页码、请求数据等
 33 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=32
 34 | 	 * @property {String} prevText 左侧按钮文字
 35 | 	 * @property {String} nextText 右侧按钮文字
 36 | 	 * @property {Number} current 当前页
 37 | 	 * @property {Number} total 数据总量
 38 | 	 * @property {Number} pageSize 每页数据量
 39 | 	 * @property {Number} showIcon = [true|false] 是否以 icon 形式展示按钮
 40 | 	 * @event {Function} change 点击页码按钮时触发 ,e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
 41 | 	 */
 42 | 
 43 | 	export default {
 44 | 		name: 'UniPagination',
 45 | 		components: {
 46 | 			uniIcons
 47 | 		},
 48 | 		props: {
 49 | 			prevText: {
 50 | 				type: String,
 51 | 				default: '上一页'
 52 | 			},
 53 | 			nextText: {
 54 | 				type: String,
 55 | 				default: '下一页'
 56 | 			},
 57 | 			current: {
 58 | 				type: [Number, String],
 59 | 				default: 1
 60 | 			},
 61 | 			total: { // 数据总量
 62 | 				type: [Number, String],
 63 | 				default: 0
 64 | 			},
 65 | 			pageSize: { // 每页数据量
 66 | 				type: [Number, String],
 67 | 				default: 10
 68 | 			},
 69 | 			showIcon: { // 是否以 icon 形式展示按钮
 70 | 				type: [Boolean, String],
 71 | 				default: false
 72 | 			}
 73 | 		},
 74 | 		data() {
 75 | 			return {
 76 | 				currentIndex: 1
 77 | 			}
 78 | 		},
 79 | 		computed: {
 80 | 			maxPage() {
 81 | 				let maxPage = 1
 82 | 				let total = Number(this.total)
 83 | 				let pageSize = Number(this.pageSize)
 84 | 				if (total && pageSize) {
 85 | 					maxPage = Math.ceil(total / pageSize)
 86 | 				}
 87 | 				return maxPage
 88 | 			}
 89 | 		},
 90 | 		watch: {
 91 | 			current(val) {
 92 | 				this.currentIndex = +val
 93 | 			}
 94 | 		},
 95 | 		created() {
 96 | 			this.currentIndex = +this.current
 97 | 		},
 98 | 		methods: {
 99 | 			clickLeft() {
100 | 				if (Number(this.currentIndex) === 1) {
101 | 					return
102 | 				}
103 | 				this.currentIndex -= 1
104 | 				this.change('prev')
105 | 			},
106 | 			clickRight() {
107 | 				if (Number(this.currentIndex) === this.maxPage) {
108 | 					return
109 | 				}
110 | 				this.currentIndex += 1
111 | 				this.change('next')
112 | 			},
113 | 			change(e) {
114 | 				this.$emit('change', {
115 | 					type: e,
116 | 					current: this.currentIndex
117 | 				})
118 | 			}
119 | 		}
120 | 	}
121 | </script>
122 | 
123 | <style lang="scss" scoped>
124 | 	.uni-pagination {
125 | 		/* #ifndef APP-NVUE */
126 | 		display: flex;
127 | 		/* #endif */
128 | 		position: relative;
129 | 		overflow: hidden;
130 | 		flex-direction: row;
131 | 		justify-content: center;
132 | 		align-items: center;
133 | 	}
134 | 
135 | 	.uni-pagination__btn {
136 | 		/* #ifndef APP-NVUE */
137 | 		display: flex;
138 | 		/* #endif */
139 | 		width: 60px;
140 | 		height: 30px;
141 | 		line-height: 30px;
142 | 		font-size: $uni-font-size-base;
143 | 		position: relative;
144 | 		background-color: $uni-bg-color-grey;
145 | 		flex-direction: row;
146 | 		justify-content: center;
147 | 		align-items: center;
148 | 		text-align: center;
149 | 		border-width: 1px;
150 | 		border-style: solid;
151 | 		border-color: $uni-border-color;
152 | 	}
153 | 
154 | 	.uni-pagination__child-btn {
155 | 		/* #ifndef APP-NVUE */
156 | 		display: flex;
157 | 		/* #endif */
158 | 		font-size: $uni-font-size-base;
159 | 		position: relative;
160 | 		flex-direction: row;
161 | 		justify-content: center;
162 | 		align-items: center;
163 | 		text-align: center;
164 | 	}
165 | 
166 | 	.uni-pagination__num {
167 | 		/* #ifndef APP-NVUE */
168 | 		display: flex;
169 | 		/* #endif */
170 | 		flex: 1;
171 | 		flex-direction: row;
172 | 		justify-content: center;
173 | 		align-items: center;
174 | 		height: 30px;
175 | 		line-height: 30px;
176 | 		font-size: $uni-font-size-base;
177 | 		color: $uni-text-color;
178 | 	}
179 | 
180 | 	.uni-pagination__num-current {
181 | 		/* #ifndef APP-NVUE */
182 | 		display: flex;
183 | 		/* #endif */
184 | 		flex-direction: row;
185 | 	}
186 | 
187 | 	.uni-pagination__num-current-text {
188 | 		font-size: 15px;
189 | 	}
190 | 
191 | 	.uni-pagination--enabled {
192 | 		color: #333333;
193 | 		opacity: 1;
194 | 	}
195 | 
196 | 	.uni-pagination--disabled {
197 | 		opacity: 0.3;
198 | 	}
199 | 
200 | 	.uni-pagination--hover {
201 | 		color: rgba(0, 0, 0, .6);
202 | 		background-color: $uni-bg-color-hover;
203 | 	}
204 | </style>
205 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-popup-dialog/uni-popup-dialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-popup-dialog">
  3 | 		<view class="uni-dialog-title">
  4 | 			<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
  5 | 		</view>
  6 | 		<view class="uni-dialog-content">
  7 | 			<text class="uni-dialog-content-text" v-if="mode === 'base'">{{content}}</text>
  8 | 			<input v-else class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus" >
  9 | 		</view>
 10 | 		<view class="uni-dialog-button-group">
 11 | 			<view class="uni-dialog-button" @click="close">
 12 | 				<text class="uni-dialog-button-text">取消</text>
 13 | 			</view>
 14 | 			<view class="uni-dialog-button uni-border-left" @click="onOk">
 15 | 				<text class="uni-dialog-button-text uni-button-color">确定</text>
 16 | 			</view>
 17 | 		</view>
 18 | 
 19 | 	</view>
 20 | </template>
 21 | 
 22 | <script>
 23 | 	/**
 24 | 	 * PopUp 弹出层-对话框样式
 25 | 	 * @description 弹出层-对话框样式
 26 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 27 | 	 * @property {String} value input 模式下的默认值
 28 | 	 * @property {String} placeholder input 模式下输入提示
 29 | 	 * @property {String} type = [success|warning|info|error] 主题样式
 30 | 	 *  @value success 成功
 31 | 	 * 	@value warning 提示
 32 | 	 * 	@value info 消息
 33 | 	 * 	@value error 错误
 34 | 	 * @property {String} mode = [base|input] 模式、
 35 | 	 * 	@value base 基础对话框
 36 | 	 * 	@value input 可输入对话框
 37 | 	 * @property {String} content 对话框内容
 38 | 	 * @property {Boolean} beforeClose 是否拦截取消事件
 39 | 	 * @event {Function} confirm 点击确认按钮触发
 40 | 	 * @event {Function} close 点击取消按钮触发
 41 | 	 */
 42 | 
 43 | 	export default {
 44 | 		name: "uniPopupDialog",
 45 | 		props: {
 46 | 			value: {
 47 | 				type: [String, Number],
 48 | 				default: ''
 49 | 			},
 50 | 			placeholder: {
 51 | 				type: [String, Number],
 52 | 				default: '请输入内容'
 53 | 			},
 54 | 			/**
 55 | 			 * 对话框主题 success/warning/info/error	  默认 success
 56 | 			 */
 57 | 			type: {
 58 | 				type: String,
 59 | 				default: 'error'
 60 | 			},
 61 | 			/**
 62 | 			 * 对话框模式 base/input
 63 | 			 */
 64 | 			mode: {
 65 | 				type: String,
 66 | 				default: 'base'
 67 | 			},
 68 | 			/**
 69 | 			 * 对话框标题
 70 | 			 */
 71 | 			title: {
 72 | 				type: String,
 73 | 				default: '提示'
 74 | 			},
 75 | 			/**
 76 | 			 * 对话框内容
 77 | 			 */
 78 | 			content: {
 79 | 				type: String,
 80 | 				default: ''
 81 | 			},
 82 | 			/**
 83 | 			 * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
 84 | 			 */
 85 | 			beforeClose: {
 86 | 				type: Boolean,
 87 | 				default: false
 88 | 			}
 89 | 		},
 90 | 		data() {
 91 | 			return {
 92 | 				dialogType: 'error',
 93 | 				focus: false,
 94 | 				val: ""
 95 | 			}
 96 | 		},
 97 | 		inject: ['popup'],
 98 | 		watch: {
 99 | 			type(val) {
100 | 				this.dialogType = val
101 | 			},
102 | 			mode(val) {
103 | 				if (val === 'input') {
104 | 					this.dialogType = 'info'
105 | 				}
106 | 			},
107 | 			value(val) {
108 | 				this.val = val
109 | 			}
110 | 		},
111 | 		created() {
112 | 			// 对话框遮罩不可点击
113 | 			this.popup.mkclick = false
114 | 			if (this.mode === 'input') {
115 | 				this.dialogType = 'info'
116 | 				this.val = this.value
117 | 			} else {
118 | 				this.dialogType = this.type
119 | 			}
120 | 		},
121 | 		mounted() {
122 | 			this.focus = true
123 | 		},
124 | 		methods: {
125 | 			/**
126 | 			 * 点击确认按钮
127 | 			 */
128 | 			onOk() {
129 | 				this.$emit('confirm', () => {
130 | 					this.popup.close()
131 | 					if (this.mode === 'input') this.val = this.value
132 | 				}, this.mode === 'input' ? this.val : '')
133 | 			},
134 | 			/**
135 | 			 * 点击取消按钮
136 | 			 */
137 | 			close() {
138 | 				if (this.beforeClose) {
139 | 					this.$emit('close', () => {
140 | 						this.popup.close()
141 | 					})
142 | 					return
143 | 				}
144 | 				this.popup.close()
145 | 			}
146 | 		}
147 | 	}
148 | </script>
149 | 
150 | <style lang="scss" scoped>
151 | 	.uni-popup-dialog {
152 | 		width: 300px;
153 | 		border-radius: 15px;
154 | 		background-color: #fff;
155 | 	}
156 | 
157 | 	.uni-dialog-title {
158 | 		/* #ifndef APP-NVUE */
159 | 		display: flex;
160 | 		/* #endif */
161 | 		flex-direction: row;
162 | 		justify-content: center;
163 | 		padding-top: 15px;
164 | 		padding-bottom: 5px;
165 | 	}
166 | 
167 | 	.uni-dialog-title-text {
168 | 		font-size: 16px;
169 | 		font-weight: 500;
170 | 	}
171 | 
172 | 	.uni-dialog-content {
173 | 		/* #ifndef APP-NVUE */
174 | 		display: flex;
175 | 		/* #endif */
176 | 		flex-direction: row;
177 | 		justify-content: center;
178 | 		align-items: center;
179 | 		padding: 5px 15px 15px 15px;
180 | 	}
181 | 
182 | 	.uni-dialog-content-text {
183 | 		font-size: 14px;
184 | 		color: #6e6e6e;
185 | 	}
186 | 
187 | 	.uni-dialog-button-group {
188 | 		/* #ifndef APP-NVUE */
189 | 		display: flex;
190 | 		/* #endif */
191 | 		flex-direction: row;
192 | 		border-top-color: #f5f5f5;
193 | 		border-top-style: solid;
194 | 		border-top-width: 1px;
195 | 	}
196 | 
197 | 	.uni-dialog-button {
198 | 		/* #ifndef APP-NVUE */
199 | 		display: flex;
200 | 		/* #endif */
201 | 
202 | 		flex: 1;
203 | 		flex-direction: row;
204 | 		justify-content: center;
205 | 		align-items: center;
206 | 		height: 45px;
207 | 	}
208 | 
209 | 	.uni-border-left {
210 | 		border-left-color: #f0f0f0;
211 | 		border-left-style: solid;
212 | 		border-left-width: 1px;
213 | 	}
214 | 
215 | 	.uni-dialog-button-text {
216 | 		font-size: 14px;
217 | 	}
218 | 
219 | 	.uni-button-color {
220 | 		color: $uni-color-primary;
221 | 	}
222 | 
223 | 	.uni-dialog-input {
224 | 		flex: 1;
225 | 		font-size: 14px;
226 | 	}
227 | 
228 | 	.uni-popup__success {
229 | 		color: $uni-color-success;
230 | 	}
231 | 
232 | 	.uni-popup__warn {
233 | 		color: $uni-color-warning;
234 | 	}
235 | 
236 | 	.uni-popup__error {
237 | 		color: $uni-color-error;
238 | 	}
239 | 
240 | 	.uni-popup__info {
241 | 		color: #909399;
242 | 	}
243 | </style>
244 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-popup-message/uni-popup-message.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-popup-message" :class="'uni-popup__'+[type]">
  3 | 		<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
  4 | 	</view>
  5 | </template>
  6 | 
  7 | <script>
  8 | 	
  9 | 	/**
 10 | 	 * PopUp 弹出层-消息提示
 11 | 	 * @description 弹出层-消息提示
 12 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 13 | 	 * @property {String} type = [success|warning|info|error] 主题样式
 14 | 	 *  @value success 成功
 15 | 	 * 	@value warning 提示
 16 | 	 * 	@value info 消息
 17 | 	 * 	@value error 错误
 18 | 	 * @property {String} message 消息提示文字
 19 | 	 * @property {String} duration 显示时间，设置为 0 则不会自动关闭
 20 | 	 */
 21 | 	
 22 | 	export default {
 23 | 		name: 'UniPopupMessage',
 24 | 		props: {
 25 | 			/**
 26 | 			 * 主题 success/warning/info/error	  默认 success
 27 | 			 */
 28 | 			type: {
 29 | 				type: String,
 30 | 				default: 'success'
 31 | 			},
 32 | 			/**
 33 | 			 * 消息文字
 34 | 			 */
 35 | 			message: {
 36 | 				type: String,
 37 | 				default: ''
 38 | 			},
 39 | 			/**
 40 | 			 * 显示时间，设置为 0 则不会自动关闭
 41 | 			 */
 42 | 			duration: {
 43 | 				type: Number,
 44 | 				default: 3000
 45 | 			}
 46 | 		},
 47 | 		inject: ['popup'],
 48 | 		data() {
 49 | 			return {}
 50 | 		},
 51 | 		created() {
 52 | 			this.popup.childrenMsg = this
 53 | 		},
 54 | 		methods: {
 55 | 			open() {
 56 | 				if (this.duration === 0) return
 57 | 				clearTimeout(this.popuptimer)
 58 | 				this.popuptimer = setTimeout(() => {
 59 | 					this.popup.close()
 60 | 				}, this.duration)
 61 | 			},
 62 | 			close() {
 63 | 				clearTimeout(this.popuptimer)
 64 | 			}
 65 | 		}
 66 | 	}
 67 | </script>
 68 | <style lang="scss" scoped>
 69 | 	.uni-popup-message {
 70 | 		/* #ifndef APP-NVUE */
 71 | 		display: flex;
 72 | 		/* #endif */
 73 | 		flex-direction: row;
 74 | 		background-color: #e1f3d8;
 75 | 		padding: 10px 15px;
 76 | 		border-color: #eee;
 77 | 		border-style: solid;
 78 | 		border-width: 1px;
 79 | 	}
 80 | 	.uni-popup-message-text {
 81 | 		font-size: 14px;
 82 | 		padding: 0;
 83 | 	}
 84 | 
 85 | 	.uni-popup__success {
 86 | 		background-color: #e1f3d8;
 87 | 	}
 88 | 
 89 | 	.uni-popup__success-text {
 90 | 		color: #67C23A;
 91 | 	}
 92 | 
 93 | 	.uni-popup__warn {
 94 | 		background-color: #faecd8;
 95 | 	}
 96 | 
 97 | 	.uni-popup__warn-text {
 98 | 		color: #E6A23C;
 99 | 	}
100 | 
101 | 	.uni-popup__error {
102 | 		background-color: #fde2e2;
103 | 	}
104 | 
105 | 	.uni-popup__error-text {
106 | 		color: #F56C6C;
107 | 	}
108 | 
109 | 	.uni-popup__info {
110 | 		background-color: #F2F6FC;
111 | 	}
112 | 
113 | 	.uni-popup__info-text {
114 | 		color: #909399;
115 | 	}
116 | </style>
117 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-popup-share/uni-popup-share.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-popup-share">
  3 | 		<view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
  4 | 		<view class="uni-share-content">
  5 | 			<view class="uni-share-content-box">
  6 | 				<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
  7 | 					<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
  8 | 					<text class="uni-share-text">{{item.text}}</text>
  9 | 				</view>
 10 | 
 11 | 			</view>
 12 | 		</view>
 13 | 		<view class="uni-share-button-box">
 14 | 			<button class="uni-share-button" @click="close">取消</button>
 15 | 		</view>
 16 | 	</view>
 17 | </template>
 18 | 
 19 | <script>
 20 | 	export default {
 21 | 		name: 'UniPopupShare',
 22 | 		props: {
 23 | 			title: {
 24 | 				type: String,
 25 | 				default: '分享到'
 26 | 			}
 27 | 		},
 28 | 		inject: ['popup'],
 29 | 		data() {
 30 | 			return {
 31 | 				bottomData: [{
 32 | 						text: '微信',
 33 | 						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
 34 | 						name: 'wx'
 35 | 					},
 36 | 					{
 37 | 						text: '支付宝',
 38 | 						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
 39 | 						name: 'wx'
 40 | 					},
 41 | 					{
 42 | 						text: 'QQ',
 43 | 						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
 44 | 						name: 'qq'
 45 | 					},
 46 | 					{
 47 | 						text: '新浪',
 48 | 						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
 49 | 						name: 'sina'
 50 | 					},
 51 | 					{
 52 | 						text: '百度',
 53 | 						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
 54 | 						name: 'copy'
 55 | 					},
 56 | 					{
 57 | 						text: '其他',
 58 | 						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
 59 | 						name: 'more'
 60 | 					}
 61 | 				]
 62 | 			}
 63 | 		},
 64 | 		created() {},
 65 | 		methods: {
 66 | 			/**
 67 | 			 * 选择内容
 68 | 			 */
 69 | 			select(item, index) {
 70 | 				this.$emit('select', {
 71 | 					item,
 72 | 					index
 73 | 				}, () => {
 74 | 					this.popup.close()
 75 | 				})
 76 | 			},
 77 | 			/**
 78 | 			 * 关闭窗口
 79 | 			 */
 80 | 			close() {
 81 | 				this.popup.close()
 82 | 			}
 83 | 		}
 84 | 	}
 85 | </script>
 86 | <style lang="scss" scoped>
 87 | 	.uni-popup-share {
 88 | 		background-color: #fff;
 89 | 	}
 90 | 	.uni-share-title {
 91 | 		/* #ifndef APP-NVUE */
 92 | 		display: flex;
 93 | 		/* #endif */
 94 | 		flex-direction: row;
 95 | 		align-items: center;
 96 | 		justify-content: center;
 97 | 		height: 40px;
 98 | 	}
 99 | 	.uni-share-title-text {
100 | 		font-size: 14px;
101 | 		color: #666;
102 | 	}
103 | 	.uni-share-content {
104 | 		/* #ifndef APP-NVUE */
105 | 		display: flex;
106 | 		/* #endif */
107 | 		flex-direction: row;
108 | 		justify-content: center;
109 | 		padding-top: 10px;
110 | 	}
111 | 	
112 | 	.uni-share-content-box {
113 | 		/* #ifndef APP-NVUE */
114 | 		display: flex;
115 | 		/* #endif */
116 | 		flex-direction: row;
117 | 		flex-wrap: wrap;
118 | 		width: 360px;
119 | 	}
120 | 	
121 | 	.uni-share-content-item {
122 | 		width: 90px;
123 | 		/* #ifndef APP-NVUE */
124 | 		display: flex;
125 | 		/* #endif */
126 | 		flex-direction: column;
127 | 		justify-content: center;
128 | 		padding: 10px 0;
129 | 		align-items: center;
130 | 	}
131 | 	
132 | 	.uni-share-content-item:active {
133 | 		background-color: #f5f5f5;
134 | 	}
135 | 	
136 | 	.uni-share-image {
137 | 		width: 30px;
138 | 		height: 30px;
139 | 	}
140 | 	
141 | 	.uni-share-text {
142 | 		margin-top: 10px;
143 | 		font-size: 14px;
144 | 		color: #3B4144;
145 | 	}
146 | 	
147 | 	.uni-share-button-box {
148 | 		/* #ifndef APP-NVUE */
149 | 		display: flex;
150 | 		/* #endif */
151 | 		flex-direction: row;
152 | 		padding: 10px 15px;
153 | 	}
154 | 	
155 | 	.uni-share-button {
156 | 		flex: 1;
157 | 		border-radius: 50px;
158 | 		color: #666;
159 | 		font-size: 16px;
160 | 	}
161 | 	
162 | 	.uni-share-button::after {
163 | 		border-radius: 50px;
164 | 	}
165 | </style>
166 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-popup/message.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 | 	created() {
 3 | 		if (this.type === 'message') {
 4 | 			// 不显示遮罩
 5 | 			this.maskShow = false 
 6 | 			// 获取子组件对象
 7 | 			this.childrenMsg = null
 8 | 		}
 9 | 	},
10 | 	methods: {
11 | 		customOpen() {
12 | 			if (this.childrenMsg) {
13 | 				this.childrenMsg.open()
14 | 			}
15 | 		},
16 | 		customClose() {
17 | 			if (this.childrenMsg) {
18 | 				this.childrenMsg.close()
19 | 			}
20 | 		}
21 | 	}
22 | }
23 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-popup/popup.js:
--------------------------------------------------------------------------------
 1 | import message from './message.js';
 2 | // 定义 type 类型:弹出类型：top/bottom/center
 3 | const config = {
 4 | 	// 顶部弹出
 5 | 	top:'top',
 6 | 	// 底部弹出
 7 | 	bottom:'bottom',
 8 | 	// 居中弹出
 9 | 	center:'center',
10 | 	// 消息提示
11 | 	message:'top',
12 | 	// 对话框
13 | 	dialog:'center',
14 | 	// 分享
15 | 	share:'bottom',
16 | }
17 | 
18 | export default {
19 | 	data(){
20 | 		return {
21 | 			config:config
22 | 		}
23 | 	},
24 | 	mixins: [message]
25 | }
26 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-popup/share.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 | 	created() {
 3 | 		if (this.type === 'share') {
 4 | 			// 关闭点击
 5 | 			this.mkclick = false
 6 | 		}
 7 | 	},
 8 | 	methods: {
 9 | 		customOpen() {
10 | 			console.log('share 打开了');
11 | 		},
12 | 		customClose() {
13 | 			console.log('share 关闭了');
14 | 		}
15 | 	}
16 | }
17 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-popup/uni-popup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
  3 | 		<uni-transition v-if="maskShow" class="uni-mask--hook" :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
  4 | 		 @click="onTap" />
  5 | 		<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
  6 | 			<view class="uni-popup__wrapper-box" @click.stop="clear">
  7 | 				<slot />
  8 | 			</view>
  9 | 		</uni-transition>
 10 | 	</view>
 11 | </template>
 12 | 
 13 | <script>
 14 | 	import uniTransition from '../uni-transition/uni-transition.vue'
 15 | 	import popup from './popup.js'
 16 | 	/**
 17 | 	 * PopUp 弹出层
 18 | 	 * @description 弹出层组件，为了解决遮罩弹层的问题
 19 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 20 | 	 * @property {String} type = [top|center|bottom] 弹出方式
 21 | 	 * 	@value top 顶部弹出
 22 | 	 * 	@value center 中间弹出
 23 | 	 * 	@value bottom 底部弹出
 24 | 	 * 	@value message 消息提示
 25 | 	 * 	@value dialog 对话框
 26 | 	 * 	@value share 底部分享示例
 27 | 	 * @property {Boolean} animation = [ture|false] 是否开启动画
 28 | 	 * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
 29 | 	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
 30 | 	 */
 31 | 
 32 | 	export default {
 33 | 		name: 'UniPopup',
 34 | 		components: {
 35 | 			uniTransition
 36 | 		},
 37 | 		props: {
 38 | 			// 开启动画
 39 | 			animation: {
 40 | 				type: Boolean,
 41 | 				default: true
 42 | 			},
 43 | 			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
 44 | 			// message: 消息提示 ; dialog : 对话框
 45 | 			type: {
 46 | 				type: String,
 47 | 				default: 'center'
 48 | 			},
 49 | 			// maskClick
 50 | 			maskClick: {
 51 | 				type: Boolean,
 52 | 				default: true
 53 | 			}
 54 | 		},
 55 | 		provide() {
 56 | 			return {
 57 | 				popup: this
 58 | 			}
 59 | 		},
 60 | 		mixins: [popup],
 61 | 		watch: {
 62 | 			/**
 63 | 			 * 监听type类型
 64 | 			 */
 65 | 			type: {
 66 | 				handler: function(newVal) {
 67 | 					this[this.config[newVal]]()
 68 | 				},
 69 | 				immediate: true
 70 | 			},
 71 | 			/**
 72 | 			 * 监听遮罩是否可点击
 73 | 			 * @param {Object} val
 74 | 			 */
 75 | 			maskClick: {
 76 | 				handler: function(val) {
 77 | 					this.mkclick = val
 78 | 				},
 79 | 				immediate: true
 80 | 			}
 81 | 		},
 82 | 		data() {
 83 | 			return {
 84 | 				duration: 300,
 85 | 				ani: [],
 86 | 				showPopup: false,
 87 | 				showTrans: false,
 88 | 				maskClass: {
 89 | 					'position': 'fixed',
 90 | 					'bottom': 0,
 91 | 					'top': 0,
 92 | 					'left': 0,
 93 | 					'right': 0,
 94 | 					'backgroundColor': 'rgba(0, 0, 0, 0.4)'
 95 | 				},
 96 | 				transClass: {
 97 | 					'position': 'fixed',
 98 | 					'left': 0,
 99 | 					'right': 0,
100 | 				},
101 | 				maskShow: true,
102 | 				mkclick: true,
103 | 				popupstyle: 'top'
104 | 			}
105 | 		},
106 | 		created() {
107 | 			this.mkclick = this.maskClick
108 | 			if (this.animation) {
109 | 				this.duration = 300
110 | 			} else {
111 | 				this.duration = 0
112 | 			}
113 | 		},
114 | 		methods: {
115 | 			clear(e) {
116 | 				// TODO nvue 取消冒泡
117 | 				e.stopPropagation()
118 | 			},
119 | 			open() {
120 | 				this.showPopup = true
121 | 				this.$nextTick(() => {
122 | 					new Promise(resolve => {
123 | 						clearTimeout(this.timer)
124 | 						this.timer = setTimeout(() => {
125 | 							this.showTrans = true
126 | 							// fixed by mehaotian 兼容 app 端
127 | 							this.$nextTick(() => {
128 | 								resolve();
129 | 							})
130 | 						}, 50);
131 | 					}).then(res => {
132 | 						// 自定义打开事件
133 | 						clearTimeout(this.msgtimer)
134 | 						this.msgtimer = setTimeout(() => {
135 | 							this.customOpen && this.customOpen()
136 | 						}, 100)
137 | 						this.$emit('change', {
138 | 							show: true,
139 | 							type: this.type
140 | 						})
141 | 					})
142 | 				})
143 | 			},
144 | 			close(type) {
145 | 				this.showTrans = false
146 | 				this.$nextTick(() => {
147 | 					this.$emit('change', {
148 | 						show: false,
149 | 						type: this.type
150 | 					})
151 | 					clearTimeout(this.timer)
152 | 					// 自定义关闭事件
153 | 					this.customOpen && this.customClose()
154 | 					this.timer = setTimeout(() => {
155 | 						this.showPopup = false
156 | 					}, 300)
157 | 				})
158 | 			},
159 | 			onTap() {
160 | 				if (!this.mkclick) return
161 | 				this.close()
162 | 			},
163 | 			/**
164 | 			 * 顶部弹出样式处理
165 | 			 */
166 | 			top() {
167 | 				this.popupstyle = 'top'
168 | 				this.ani = ['slide-top']
169 | 				this.transClass = {
170 | 					'position': 'fixed',
171 | 					'left': 0,
172 | 					'right': 0,
173 | 				}
174 | 			},
175 | 			/**
176 | 			 * 底部弹出样式处理
177 | 			 */
178 | 			bottom() {
179 | 				this.popupstyle = 'bottom'
180 | 				this.ani = ['slide-bottom']
181 | 				this.transClass = {
182 | 					'position': 'fixed',
183 | 					'left': 0,
184 | 					'right': 0,
185 | 					'bottom': 0
186 | 				}
187 | 			},
188 | 			/**
189 | 			 * 中间弹出样式处理
190 | 			 */
191 | 			center() {
192 | 				this.popupstyle = 'center'
193 | 				this.ani = ['zoom-out', 'fade']
194 | 				this.transClass = {
195 | 					'position': 'fixed',
196 | 					/* #ifndef APP-NVUE */
197 | 					'display': 'flex',
198 | 					'flexDirection': 'column',
199 | 					/* #endif */
200 | 					'bottom': 0,
201 | 					'left': 0,
202 | 					'right': 0,
203 | 					'top': 0,
204 | 					'justifyContent': 'center',
205 | 					'alignItems': 'center'
206 | 				}
207 | 			}
208 | 		}
209 | 	}
210 | </script>
211 | <style lang="scss" scoped>
212 | 	.uni-popup {
213 | 		position: fixed;
214 | 		/* #ifndef APP-NVUE */
215 | 		z-index: 99;
216 | 		/* #endif */
217 | 	}
218 | 
219 | 	.uni-popup__mask {
220 | 		position: absolute;
221 | 		top: 0;
222 | 		bottom: 0;
223 | 		left: 0;
224 | 		right: 0;
225 | 		background-color: $uni-bg-color-mask;
226 | 		opacity: 0;
227 | 	}
228 | 
229 | 	.mask-ani {
230 | 		transition-property: opacity;
231 | 		transition-duration: 0.2s;
232 | 	}
233 | 
234 | 	.uni-top-mask {
235 | 		opacity: 1;
236 | 	}
237 | 
238 | 	.uni-bottom-mask {
239 | 		opacity: 1;
240 | 	}
241 | 
242 | 	.uni-center-mask {
243 | 		opacity: 1;
244 | 	}
245 | 
246 | 	.uni-popup__wrapper {
247 | 		/* #ifndef APP-NVUE */
248 | 		display: block;
249 | 		/* #endif */
250 | 		position: absolute;
251 | 	}
252 | 
253 | 	.top {
254 | 		/* #ifdef H5 */
255 | 		top: var(--window-top);
256 | 		/* #endif */
257 | 		/* #ifndef H5 */
258 | 		top: 0;
259 | 		/* #endif */
260 | 	}
261 | 
262 | 	.bottom {
263 | 		bottom: 0;
264 | 	}
265 | 
266 | 	.uni-popup__wrapper-box {
267 | 		/* #ifndef APP-NVUE */
268 | 		display: block;
269 | 		/* #endif */
270 | 		position: relative;
271 | 		/* iphonex 等安全区设置，底部安全区适配 */
272 | 		/* #ifndef APP-NVUE */
273 | 		padding-bottom: constant(safe-area-inset-bottom);
274 | 		padding-bottom: env(safe-area-inset-bottom);
275 | 		/* #endif */
276 | 	}
277 | 
278 | 	.content-ani {
279 | 		// transition: transform 0.3s;
280 | 		transition-property: transform, opacity;
281 | 		transition-duration: 0.2s;
282 | 	}
283 | 
284 | 
285 | 	.uni-top-content {
286 | 		transform: translateY(0);
287 | 	}
288 | 
289 | 	.uni-bottom-content {
290 | 		transform: translateY(0);
291 | 	}
292 | 
293 | 	.uni-center-content {
294 | 		transform: scale(1);
295 | 		opacity: 1;
296 | 	}
297 | </style>
298 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-search-bar/uni-search-bar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-searchbar">
  3 | 		<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box" @click="searchClick">
  4 | 			<!-- #ifdef MP-ALIPAY -->
  5 | 			<view class="uni-searchbar__box-icon-search">
  6 | 				<uni-icons color="#999999" size="18" type="search" />
  7 | 			</view>
  8 | 			<!-- #endif -->
  9 | 			<!-- #ifndef MP-ALIPAY -->
 10 | 			<uni-icons color="#999999" class="uni-searchbar__box-icon-search" size="18" type="search" />
 11 | 			<!-- #endif -->
 12 | 			<input v-if="show" :focus="showSync" :placeholder="placeholder" :maxlength="maxlength" @confirm="confirm" class="uni-searchbar__box-search-input"
 13 | 			 confirm-type="search" type="text" v-model="searchVal" />
 14 | 			<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
 15 | 			<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='')" class="uni-searchbar__box-icon-clear" @click="clear">
 16 | 				<uni-icons color="#999999" class="" size="24" type="clear" />
 17 | 			</view>
 18 | 		</view>
 19 | 		<text @click="cancel" class="uni-searchbar__cancel" v-if="cancelButton ==='always' || show && cancelButton ==='auto'">{{cancelText}}</text>
 20 | 	</view>
 21 | </template>
 22 | 
 23 | <script>
 24 | 	import uniIcons from "../uni-icons/uni-icons.vue";
 25 | 
 26 | 	/**
 27 | 	 * SearchBar 搜索栏
 28 | 	 * @description 评分组件
 29 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=866
 30 | 	 * @property {Number} radius 搜索栏圆角
 31 | 	 * @property {Number} maxlength 输入最大长度
 32 | 	 * @property {String} placeholder 搜索栏Placeholder
 33 | 	 * @property {String} clearButton = [always|auto|none] 是否显示清除按钮
 34 | 	 * 	@value always 一直显示
 35 | 	 * 	@value auto 输入框不为空时显示
 36 | 	 * 	@value none 一直不显示
 37 | 	 * @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
 38 | 	 * 	@value always 一直显示
 39 | 	 * 	@value auto 输入框不为空时显示
 40 | 	 * 	@value none 一直不显示
 41 | 	 * @property {String} cancelText 取消按钮的文字
 42 | 	 * @property {String} bgColor 输入框背景颜色
 43 | 	 * @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
 44 | 	 * @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e={value:Number}
 45 | 	 * @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
 46 | 	 */
 47 | 
 48 | 	export default {
 49 | 		name: "UniSearchBar",
 50 | 		components: {
 51 | 			uniIcons
 52 | 		},
 53 | 		props: {
 54 | 			placeholder: {
 55 | 				type: String,
 56 | 				default: "请输入搜索内容"
 57 | 			},
 58 | 			radius: {
 59 | 				type: [Number, String],
 60 | 				default: 5
 61 | 			},
 62 | 			clearButton: {
 63 | 				type: String,
 64 | 				default: "auto"
 65 | 			},
 66 | 			cancelButton: {
 67 | 				type: String,
 68 | 				default: "auto"
 69 | 			},
 70 | 			cancelText: {
 71 | 				type: String,
 72 | 				default: '取消'
 73 | 			},
 74 | 			bgColor: {
 75 | 				type: String,
 76 | 				default: "#F8F8F8"
 77 | 			},
 78 | 			maxlength: {
 79 | 				type: [Number, String],
 80 | 				default: 100
 81 | 			}
 82 | 		},
 83 | 		data() {
 84 | 			return {
 85 | 				show: false,
 86 | 				showSync: false,
 87 | 				searchVal: ""
 88 | 			}
 89 | 		},
 90 | 		watch: {
 91 | 			searchVal() {
 92 | 				this.$emit("input", {
 93 | 					value: this.searchVal
 94 | 				})
 95 | 			}
 96 | 		},
 97 | 		methods: {
 98 | 			searchClick() {
 99 | 				if (this.show) {
100 | 					return
101 | 				}
102 | 				this.searchVal = ""
103 | 				this.show = true;
104 | 				this.$nextTick(() => {
105 | 					this.showSync = true;
106 | 				})
107 | 			},
108 | 			clear() {
109 | 				this.searchVal = ""
110 | 			},
111 | 			cancel() {
112 | 				this.$emit("cancel", {
113 | 					value: this.searchVal
114 | 				});
115 | 				this.searchVal = ""
116 | 				this.show = false
117 | 				this.showSync = false
118 | 				// #ifndef APP-PLUS
119 | 				uni.hideKeyboard()
120 | 				// #endif
121 | 				// #ifdef APP-PLUS
122 | 				plus.key.hideSoftKeybord()
123 | 				// #endif
124 | 			},
125 | 			confirm() {
126 | 				// #ifndef APP-PLUS
127 | 				uni.hideKeyboard();
128 | 				// #endif
129 | 				// #ifdef APP-PLUS
130 | 				plus.key.hideSoftKeybord()
131 | 				// #endif
132 | 				this.$emit("confirm", {
133 | 					value: this.searchVal
134 | 				})
135 | 			}
136 | 		}
137 | 	};
138 | </script>
139 | 
140 | <style lang="scss" scoped>
141 | 	$uni-searchbar-height: 36px;
142 | 
143 | 	.uni-searchbar {
144 | 		/* #ifndef APP-NVUE */
145 | 		display: flex;
146 | 		/* #endif */
147 | 		flex-direction: row;
148 | 		position: relative;
149 | 		padding: $uni-spacing-col-base;
150 | 		background-color: $uni-bg-color;
151 | 	}
152 | 
153 | 	.uni-searchbar__box {
154 | 		/* #ifndef APP-NVUE */
155 | 		display: flex;
156 | 		box-sizing: border-box;
157 | 		/* #endif */
158 | 		overflow: hidden;
159 | 		position: relative;
160 | 		flex: 1;
161 | 		justify-content: center;
162 | 		flex-direction: row;
163 | 		align-items: center;
164 | 		height: $uni-searchbar-height;
165 | 		padding: 5px 8px 5px 0px;
166 | 		border-width: 0.5px;
167 | 		border-style: solid;
168 | 		border-color: $uni-border-color;
169 | 	}
170 | 
171 | 	.uni-searchbar__box-icon-search {
172 | 		/* #ifndef APP-NVUE */
173 | 		display: flex;
174 | 		/* #endif */
175 | 		flex-direction: row;
176 | 		width: 32px;
177 | 		justify-content: center;
178 | 		align-items: center;
179 | 		color: $uni-text-color-placeholder;
180 | 	}
181 | 
182 | 	.uni-searchbar__box-search-input {
183 | 		flex: 1;
184 | 		font-size: $uni-font-size-base;
185 | 		color: $uni-text-color;
186 | 	}
187 | 
188 | 	.uni-searchbar__box-icon-clear {
189 | 		align-items: center;
190 | 		line-height: 24px;
191 | 		padding-left: 5px;
192 | 	}
193 | 
194 | 	.uni-searchbar__text-placeholder {
195 | 		font-size: $uni-font-size-base;
196 | 		color: $uni-text-color-placeholder;
197 | 		margin-left: 5px;
198 | 	}
199 | 
200 | 	.uni-searchbar__cancel {
201 | 		padding-left: 10px;
202 | 		line-height: $uni-searchbar-height;
203 | 		font-size: 14px;
204 | 		color: $uni-text-color;
205 | 	}
206 | </style>
207 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-section/uni-section.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-section" nvue>
  3 | 		<view v-if="type" class="uni-section__head">
  4 | 			<view :class="type" class="uni-section__head-tag" />
  5 | 		</view>
  6 | 		<view class="uni-section__content">
  7 | 			<text :class="{'distraction':!subTitle}" class="uni-section__content-title">{{ title }}</text>
  8 | 			<text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>
  9 | 		</view>
 10 | 		<slot />
 11 | 	</view>
 12 | </template>
 13 | 
 14 | <script>
 15 | 
 16 | 	/**
 17 | 	 * Section 标题栏
 18 | 	 * @description 标题栏
 19 | 	 * @property {String} type = [line|circle] 标题装饰类型
 20 | 	 * 	@value line 竖线
 21 | 	 * 	@value circle 圆形
 22 | 	 * @property {String} title 主标题
 23 | 	 * @property {String} subTitle 副标题
 24 | 	 */
 25 | 
 26 | 	export default {
 27 | 		name: 'UniSection',
 28 | 		props: {
 29 | 			type: {
 30 | 				type: String,
 31 | 				default: ''
 32 | 			},
 33 | 			title: {
 34 | 				type: String,
 35 | 				default: ''
 36 | 			},
 37 | 			subTitle: {
 38 | 				type: String,
 39 | 				default: ''
 40 | 			}
 41 | 		},
 42 | 		data() {
 43 | 			return {}
 44 | 		},
 45 | 		watch: {
 46 | 			title(newVal) {
 47 | 				if (uni.report && newVal !== '') {
 48 | 					uni.report('title', newVal)
 49 | 				}
 50 | 			}
 51 | 		},
 52 | 		methods: {
 53 | 			onClick() {
 54 | 				this.$emit('click')
 55 | 			}
 56 | 		}
 57 | 	}
 58 | </script>
 59 | <style lang="scss" scoped>
 60 | 	.uni-section {
 61 | 		position: relative;
 62 | 		/* #ifndef APP-NVUE */
 63 | 		display: flex;
 64 | 		/* #endif */
 65 | 		margin-top: 10px;
 66 | 		flex-direction: row;
 67 | 		align-items: center;
 68 | 		padding: 0 10px;
 69 | 		height: 50px;
 70 | 		background-color: $uni-bg-color-grey;
 71 | 		/* #ifdef APP-NVUE */
 72 | 		// border-bottom-color: $uni-border-color;
 73 | 		// border-bottom-style: solid;
 74 | 		// border-bottom-width: 0.5px;
 75 | 		/* #endif */
 76 | 		font-weight: normal;
 77 | 	}
 78 | 	/* #ifndef APP-NVUE */
 79 | 	// .uni-section:after {
 80 | 	// 	position: absolute;
 81 | 	// 	bottom: 0;
 82 | 	// 	right: 0;
 83 | 	// 	left: 0;
 84 | 	// 	height: 1px;
 85 | 	// 	content: '';
 86 | 	// 	-webkit-transform: scaleY(.5);
 87 | 	// 	transform: scaleY(.5);
 88 | 	// 	background-color: $uni-border-color;
 89 | 	// }
 90 | 	/* #endif */
 91 | 
 92 | 	.uni-section__head {
 93 | 		flex-direction: row;
 94 | 		justify-content: center;
 95 | 		align-items: center;
 96 | 		margin-right: 10px;
 97 | 	}
 98 | 
 99 | 	.line {
100 | 		height: 15px;
101 | 		background-color: $uni-text-color-disable;
102 | 		border-radius: 5px;
103 | 		width: 3px;
104 | 	}
105 | 
106 | 	.circle {
107 | 		width: 8px;
108 | 		height: 8px;
109 | 		border-top-right-radius: 50px;
110 | 		border-top-left-radius: 50px;
111 | 		border-bottom-left-radius: 50px;
112 | 		border-bottom-right-radius: 50px;
113 | 		background-color: $uni-text-color-disable;
114 | 	}
115 | 
116 | 	.uni-section__content {
117 | 		flex-direction: column;
118 | 		flex: 1;
119 | 		color: $uni-text-color;
120 | 	}
121 | 
122 | 	.uni-section__content-title {
123 | 		font-size: $uni-font-size-base;
124 | 		color: $uni-text-color;
125 | 	}
126 | 
127 | 	.distraction {
128 | 		flex-direction: row;
129 | 		align-items: center;
130 | 	}
131 | 
132 | 	.uni-section__content-sub {
133 | 		font-size: $uni-font-size-sm;
134 | 		color: $uni-text-color-grey;
135 | 	}
136 | </style>
137 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-segmented-control/uni-segmented-control.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]" :style="{ borderColor: styleType === 'text' ? '' : activeColor }"
  3 | 	 class="segmented-control">
  4 | 		<view v-for="(item, index) in values" :class="[ styleType === 'text'?'segmented-control__item--text': 'segmented-control__item--button' , index === currentIndex&&styleType === 'button'?'segmented-control__item--button--active': '' , index === 0&&styleType === 'button'?'segmented-control__item--button--first': '',index === values.length - 1&&styleType === 'button'?'segmented-control__item--button--last': '' ]"
  5 | 		 :key="index" :style="{
  6 |         backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent'
  7 |       }"
  8 | 		 class="segmented-control__item" @click="_onClick(index)">
  9 | 			<text :style="{color:
 10 |           index === currentIndex
 11 |             ? styleType === 'text'
 12 |               ? activeColor
 13 |               : '#fff'
 14 |             : styleType === 'text'
 15 |               ? '#000'
 16 |               : activeColor}"
 17 | 			 class="segmented-control__text">{{ item }}</text>
 18 | 		</view>
 19 | 	</view>
 20 | </template>
 21 | 
 22 | <script>
 23 | 	/**
 24 | 	 * SegmentedControl 分段器
 25 | 	 * @description 用作不同视图的显示
 26 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=54
 27 | 	 * @property {Number} current 当前选中的tab索引值，从0计数
 28 | 	 * @property {String} styleType = [button|text] 分段器样式类型
 29 | 	 * 	@value button 按钮类型
 30 | 	 * 	@value text 文字类型
 31 | 	 * @property {String} activeColor 选中的标签背景色与边框颜色
 32 | 	 * @property {Array} values 选项数组
 33 | 	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
 34 | 	 */
 35 | 
 36 | 	export default {
 37 | 		name: 'UniSegmentedControl',
 38 | 		props: {
 39 | 			current: {
 40 | 				type: Number,
 41 | 				default: 0
 42 | 			},
 43 | 			values: {
 44 | 				type: Array,
 45 | 				default () {
 46 | 					return []
 47 | 				}
 48 | 			},
 49 | 			activeColor: {
 50 | 				type: String,
 51 | 				default: '#007aff'
 52 | 			},
 53 | 			styleType: {
 54 | 				type: String,
 55 | 				default: 'button'
 56 | 			}
 57 | 		},
 58 | 		data() {
 59 | 			return {
 60 | 				currentIndex: 0
 61 | 			}
 62 | 		},
 63 | 		watch: {
 64 | 			current(val) {
 65 | 				if (val !== this.currentIndex) {
 66 | 					this.currentIndex = val
 67 | 				}
 68 | 			}
 69 | 		},
 70 | 		created() {
 71 | 			this.currentIndex = this.current
 72 | 		},
 73 | 		methods: {
 74 | 			_onClick(index) {
 75 | 				if (this.currentIndex !== index) {
 76 | 					this.currentIndex = index
 77 | 					this.$emit('clickItem', {
 78 | 						currentIndex: index
 79 | 					})
 80 | 				}
 81 | 			}
 82 | 		}
 83 | 	}
 84 | </script>
 85 | 
 86 | <style lang="scss" scoped>
 87 | 
 88 | 	.segmented-control {
 89 | 		/* #ifndef APP-NVUE */
 90 | 		display: flex;
 91 | 		box-sizing: border-box;
 92 | 		/* #endif */
 93 | 		flex-direction: row;
 94 | 		height: 36px;
 95 | 		overflow: hidden;
 96 | 	}
 97 | 
 98 | 	.segmented-control__item {
 99 | 		/* #ifndef APP-NVUE */
100 | 		display: inline-flex;
101 | 		box-sizing: border-box;
102 | 		/* #endif */
103 | 		position: relative;
104 | 		flex: 1;
105 | 		justify-content: center;
106 | 		align-items: center;
107 | 	}
108 | 
109 | 	.segmented-control__item--button {
110 | 		border-style: solid;
111 | 		border-top-width: 1px;
112 | 		border-bottom-width: 1px;
113 | 		border-right-width: 1px;
114 | 		border-left-width: 0;
115 | 	}
116 | 
117 | 	.segmented-control__item--button--first {
118 | 		border-left-width: 1px;
119 | 		border-top-left-radius: 5px;
120 | 		border-bottom-left-radius: 5px;
121 | 	}
122 | 
123 | 	.segmented-control__item--button--last {
124 | 		border-top-right-radius: 5px;
125 | 		border-bottom-right-radius: 5px;
126 | 	}
127 | 
128 | 	.segmented-control__item--text {
129 | 		border-bottom-style: solid;
130 | 		border-bottom-width: 3px;
131 | 	}
132 | 
133 | 	.segmented-control__text {
134 | 		font-size: 16px;
135 | 		line-height: 20px;
136 | 		text-align: center;
137 | 	}
138 | </style>
139 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-status-bar/uni-status-bar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view :style="{ height: statusBarHeight }" class="uni-status-bar">
 3 | 		<slot />
 4 | 	</view>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
 9 | 	export default {
10 | 		name: 'UniStatusBar',
11 | 		data() {
12 | 			return {
13 | 				statusBarHeight: statusBarHeight
14 | 			}
15 | 		}
16 | 	}
17 | </script>
18 | 
19 | <style lang="scss" scoped>
20 | 	.uni-status-bar {
21 | 		width: 750rpx;
22 | 		height: 20px;
23 | 		// height: var(--status-bar-height);
24 | 	}
25 | </style>
26 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-steps/uni-steps.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-steps">
  3 | 		<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
  4 | 			<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
  5 | 				<view v-for="(item,index) in options" :key="index" :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
  6 | 					<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
  7 | 					<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
  8 | 				</view>
  9 | 			</view>
 10 | 			<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
 11 | 				<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']" v-for="(item,index) in options"
 12 | 				 :key="index">
 13 | 					<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
 14 | 					 :style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view>
 15 | 					<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']" v-if="index === active">
 16 | 						<uni-icons :color="activeColor" type="checkbox-filled" size="14"></uni-icons>
 17 | 					</view>
 18 | 					<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" v-else :style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
 19 | 					<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
 20 | 					 :style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
 21 | 				</view>
 22 | 			</view>
 23 | 		</view>
 24 | 	</view>
 25 | </template>
 26 | 
 27 | <script>
 28 | 	import uniIcons from '../uni-icons/uni-icons.vue'
 29 | 
 30 | 	/**
 31 | 	 * Steps 步骤条
 32 | 	 * @description 评分组件
 33 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=34
 34 | 	 * @property {Number} active 当前步骤
 35 | 	 * @property {String} direction = [row|column] 当前步骤
 36 | 	 * 	@value row 横向
 37 | 	 * 	@value column 纵向
 38 | 	 * @property {String} activeColor 选中状态的颜色
 39 | 	 * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
 40 | 	 */
 41 | 
 42 | 	export default {
 43 | 		name: 'UniSteps',
 44 | 		components: {
 45 | 			uniIcons
 46 | 		},
 47 | 		props: {
 48 | 			direction: {
 49 | 				// 排列方向 row column
 50 | 				type: String,
 51 | 				default: 'row'
 52 | 			},
 53 | 			activeColor: {
 54 | 				// 激活状态颜色
 55 | 				type: String,
 56 | 				default: '#1aad19'
 57 | 			},
 58 | 			deactiveColor: {
 59 | 				// 未激活状态颜色
 60 | 				type: String,
 61 | 				default: '#999999'
 62 | 			},
 63 | 			active: {
 64 | 				// 当前步骤
 65 | 				type: Number,
 66 | 				default: 0
 67 | 			},
 68 | 			options: {
 69 | 				type: Array,
 70 | 				default () {
 71 | 					return []
 72 | 				}
 73 | 			} // 数据
 74 | 		},
 75 | 		data() {
 76 | 			return {}
 77 | 		}
 78 | 	}
 79 | </script>
 80 | 
 81 | <style lang="scss" scoped>
 82 | 	.uni-steps {
 83 | 		/* #ifndef APP-NVUE */
 84 | 		display: flex;
 85 | 		width: 100%;
 86 | 		/* #endif */
 87 | 		/* #ifdef APP-NVUE */
 88 | 		flex: 1;
 89 | 		/* #endif */
 90 | 		flex-direction: column;
 91 | 	}
 92 | 
 93 | 	.uni-steps__row {
 94 | 		/* #ifndef APP-NVUE */
 95 | 		display: flex;
 96 | 		/* #endif */
 97 | 		flex-direction: column;
 98 | 	}
 99 | 
100 | 	.uni-steps__column {
101 | 		/* #ifndef APP-NVUE */
102 | 		display: flex;
103 | 		/* #endif */
104 | 		flex-direction: row-reverse;
105 | 	}
106 | 
107 | 	.uni-steps__row-text-container {
108 | 		/* #ifndef APP-NVUE */
109 | 		display: flex;
110 | 		/* #endif */
111 | 		flex-direction: row;
112 | 	}
113 | 
114 | 	.uni-steps__column-text-container {
115 | 		/* #ifndef APP-NVUE */
116 | 		display: flex;
117 | 		/* #endif */
118 | 		flex-direction: column;
119 | 		flex: 1;
120 | 	}
121 | 
122 | 	.uni-steps__row-text {
123 | 		/* #ifndef APP-NVUE */
124 | 		display: inline-flex;
125 | 		/* #endif */
126 | 		flex: 1;
127 | 		flex-direction: column;
128 | 	}
129 | 
130 | 	.uni-steps__column-text {
131 | 		padding: 6px 0px;
132 | 		border-bottom-style: solid;
133 | 		border-bottom-width: 1px;
134 | 		border-bottom-color: $uni-border-color;
135 | 		/* #ifndef APP-NVUE */
136 | 		display: flex;
137 | 		/* #endif */
138 | 		flex-direction: column;
139 | 	}
140 | 
141 | 	.uni-steps__row-title {
142 | 		font-size: $uni-font-size-base;
143 | 		line-height: 16px;
144 | 		text-align: center;
145 | 	}
146 | 
147 | 	.uni-steps__column-title {
148 | 		font-size: $uni-font-size-base;
149 | 		text-align: left;
150 | 		line-height: 18px;
151 | 	}
152 | 
153 | 	.uni-steps__row-desc {
154 | 		font-size: 12px;
155 | 		line-height: 14px;
156 | 		text-align: center;
157 | 	}
158 | 
159 | 	.uni-steps__column-desc {
160 | 		font-size: $uni-font-size-sm;
161 | 		text-align: left;
162 | 		line-height: 18px;
163 | 	}
164 | 
165 | 	.uni-steps__row-container {
166 | 		/* #ifndef APP-NVUE */
167 | 		display: flex;
168 | 		/* #endif */
169 | 		flex-direction: row;
170 | 	}
171 | 
172 | 	.uni-steps__column-container {
173 | 		/* #ifndef APP-NVUE */
174 | 		display: inline-flex;
175 | 		/* #endif */
176 | 		width: 30px;
177 | 		flex-direction: column;
178 | 	}
179 | 
180 | 	.uni-steps__row-line-item {
181 | 		/* #ifndef APP-NVUE */
182 | 		display: inline-flex;
183 | 		/* #endif */
184 | 		flex-direction: row;
185 | 		flex: 1;
186 | 		height: 14px;
187 | 		line-height: 14px;
188 | 		align-items: center;
189 | 		justify-content: center;
190 | 	}
191 | 
192 | 	.uni-steps__column-line-item {
193 | 		/* #ifndef APP-NVUE */
194 | 		display: flex;
195 | 		/* #endif */
196 | 		flex-direction: column;
197 | 		flex: 1;
198 | 		align-items: center;
199 | 		justify-content: center;
200 | 	}
201 | 
202 | 	.uni-steps__row-line {
203 | 		flex: 1;
204 | 		height: 1px;
205 | 		background-color: $uni-text-color-grey;
206 | 	}
207 | 
208 | 	.uni-steps__column-line {
209 | 		width: 1px;
210 | 		background-color: $uni-text-color-grey;
211 | 	}
212 | 
213 | 	.uni-steps__row-line--after {
214 | 		transform: translateX(1px);
215 | 	}
216 | 
217 | 	.uni-steps__column-line--after {
218 | 		flex: 1;
219 | 		transform: translate(0px, 1px);
220 | 	}
221 | 
222 | 	.uni-steps__row-line--before {
223 | 		transform: translateX(-1px);
224 | 	}
225 | 
226 | 	.uni-steps__column-line--before {
227 | 		height: 6px;
228 | 		transform: translate(0px, -1px);
229 | 	}
230 | 
231 | 	.uni-steps__row-circle {
232 | 		width: 5px;
233 | 		height: 5px;
234 | 		border-radius: 100px;
235 | 		background-color: $uni-text-color-grey;
236 | 		margin: 0px 3px;
237 | 	}
238 | 
239 | 	.uni-steps__column-circle {
240 | 		width: 5px;
241 | 		height: 5px;
242 | 		border-radius: 100px;
243 | 		background-color: $uni-text-color-grey;
244 | 		margin: 4px 0px 5px 0px;
245 | 	}
246 | 
247 | 	.uni-steps__row-check {
248 | 		margin: 0px 6px;
249 | 	}
250 | 
251 | 	.uni-steps__column-check {
252 | 		height: 14px;
253 | 		line-height: 14px;
254 | 		margin: 2px 0px;
255 | 	}
256 | </style>
257 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-swipe-action-item/index.wxs:
--------------------------------------------------------------------------------
  1 | var MIN_DISTANCE = 10;
  2 | 
  3 | /**
  4 |  * 监听页面内值的变化,主要用于动态开关swipe-action
  5 |  * @param {Object} newValue
  6 |  * @param {Object} oldValue
  7 |  * @param {Object} ownerInstance
  8 |  * @param {Object} instance
  9 |  */
 10 | function sizeReady(newValue, oldValue, ownerInstance, instance) {
 11 | 	var state = instance.getState()
 12 | 	var buttonPositions = JSON.parse(newValue)
 13 | 	if (!buttonPositions || !buttonPositions.data || buttonPositions.data.length === 0) return
 14 | 	state.leftWidth = buttonPositions.data[0].width
 15 | 	state.rightWidth = buttonPositions.data[1].width
 16 | 	state.threshold = instance.getDataset().threshold
 17 | 
 18 | 	if (buttonPositions.show && buttonPositions.show !== 'none') {
 19 | 		openState(buttonPositions.show, instance, ownerInstance)
 20 | 		return
 21 | 	}
 22 | 
 23 | 	if (state.left) {
 24 | 		openState('none', instance, ownerInstance)
 25 | 	}
 26 | 	resetTouchStatus(instance)
 27 | }
 28 | 
 29 | /**
 30 |  * 开始触摸操作
 31 |  * @param {Object} e
 32 |  * @param {Object} ins
 33 |  */
 34 | function touchstart(e, ins) {
 35 | 	var instance = e.instance;
 36 | 	var disabled = instance.getDataset().disabled
 37 | 	var state = instance.getState();
 38 | 	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
 39 | 	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
 40 | 	if (disabled) return
 41 | 	// 开始触摸时移除动画类
 42 | 	instance.requestAnimationFrame(function(){
 43 | 		instance.removeClass('ani');
 44 | 		ins.callMethod('closeSwipe');
 45 | 	})
 46 | 
 47 | 	// 记录上次的位置
 48 | 	state.x = state.left || 0
 49 | 	// 计算滑动开始位置
 50 | 	stopTouchStart(e, ins)
 51 | }
 52 | 
 53 | /**
 54 |  * 开始滑动操作
 55 |  * @param {Object} e
 56 |  * @param {Object} ownerInstance
 57 |  */
 58 | function touchmove(e, ownerInstance) {
 59 | 
 60 | 	var instance = e.instance;
 61 | 	var disabled = instance.getDataset().disabled
 62 | 	var state = instance.getState()
 63 | 	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
 64 | 	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
 65 | 	if (disabled) return
 66 | 	// 是否可以滑动页面
 67 | 	stopTouchMove(e);
 68 | 	if (state.direction !== 'horizontal') {
 69 | 		return;
 70 | 	}
 71 | 
 72 | 	if (e.preventDefault) {
 73 | 		// 阻止页面滚动
 74 | 		e.preventDefault()
 75 | 	}
 76 | 
 77 | 	move(state.x + state.deltaX, instance, ownerInstance)
 78 | }
 79 | 
 80 | /**
 81 |  * 结束触摸操作
 82 |  * @param {Object} e
 83 |  * @param {Object} ownerInstance
 84 |  */
 85 | function touchend(e, ownerInstance) {
 86 | 	var instance = e.instance;
 87 | 	var disabled = instance.getDataset().disabled
 88 | 	var state = instance.getState()
 89 | 	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
 90 | 	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
 91 | 
 92 | 	if (disabled) return
 93 | 	// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
 94 | 	// fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
 95 | 	moveDirection(state.left, instance, ownerInstance)
 96 | 
 97 | }
 98 | 
 99 | /**
100 |  * 设置移动距离
101 |  * @param {Object} value
102 |  * @param {Object} instance
103 |  * @param {Object} ownerInstance
104 |  */
105 | function move(value, instance, ownerInstance) {
106 | 	value = value || 0
107 | 	var state = instance.getState()
108 | 	var leftWidth = state.leftWidth
109 | 	var rightWidth = state.rightWidth
110 | 	// 获取可滑动范围
111 | 	state.left = range(value, -rightWidth, leftWidth);
112 | 	instance.requestAnimationFrame(function(){
113 | 		instance.setStyle({
114 | 			transform: 'translateX(' + state.left + 'px)',
115 | 			'-webkit-transform': 'translateX(' + state.left + 'px)'
116 | 		})
117 | 	})
118 | 
119 | }
120 | 
121 | /**
122 |  * 获取范围
123 |  * @param {Object} num
124 |  * @param {Object} min
125 |  * @param {Object} max
126 |  */
127 | function range(num, min, max) {
128 | 	return Math.min(Math.max(num, min), max);
129 | }
130 | 
131 | 
132 | /**
133 |  * 移动方向判断
134 |  * @param {Object} left
135 |  * @param {Object} value
136 |  * @param {Object} ownerInstance
137 |  * @param {Object} ins
138 |  */
139 | function moveDirection(left, ins, ownerInstance) {
140 | 	var state = ins.getState()
141 | 	var threshold = state.threshold
142 | 	var position = state.position
143 | 	var isopen = state.isopen || 'none'
144 | 	var leftWidth = state.leftWidth
145 | 	var rightWidth = state.rightWidth
146 | 	if (state.deltaX === 0) {
147 | 		openState('none', ins, ownerInstance)
148 | 		return
149 | 	}
150 | 	if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 && rightWidth +
151 | 			left < threshold)) {
152 | 		// right
153 | 		openState('right', ins, ownerInstance)
154 | 	} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
155 | 			leftWidth - left < threshold)) {
156 | 		// left
157 | 		openState('left', ins, ownerInstance)
158 | 	} else {
159 | 		// default
160 | 		openState('none', ins, ownerInstance)
161 | 	}
162 | }
163 | 
164 | 
165 | /**
166 |  * 开启状态
167 |  * @param {Boolean} type
168 |  * @param {Object} ins
169 |  * @param {Object} ownerInstance
170 |  */
171 | function openState(type, ins, ownerInstance) {
172 | 	var state = ins.getState()
173 | 	var position = state.position
174 | 	var leftWidth = state.leftWidth
175 | 	var rightWidth = state.rightWidth
176 | 	var left = ''
177 | 	state.isopen = state.isopen ? state.isopen : 'none'
178 | 	switch (type) {
179 | 		case "left":
180 | 			left = leftWidth
181 | 			break
182 | 		case "right":
183 | 			left = -rightWidth
184 | 			break
185 | 		default:
186 | 			left = 0
187 | 	}
188 | 
189 | 	// && !state.throttle
190 | 
191 | 	if (state.isopen !== type ) {
192 | 		state.throttle = true
193 | 		ownerInstance.callMethod('change', {
194 | 			open: type
195 | 		})
196 | 
197 | 	}
198 | 
199 | 	state.isopen = type
200 | 	// 添加动画类
201 | 	ins.requestAnimationFrame(function(){
202 | 		ins.addClass('ani');
203 | 		move(left, ins, ownerInstance)
204 | 	})
205 | 	// 设置最终移动位置,理论上只要进入到这个函数，肯定是要打开的
206 | }
207 | 
208 | 
209 | function getDirection(x, y) {
210 | 	if (x > y && x > MIN_DISTANCE) {
211 | 		return 'horizontal';
212 | 	}
213 | 	if (y > x && y > MIN_DISTANCE) {
214 | 		return 'vertical';
215 | 	}
216 | 	return '';
217 | }
218 | 
219 | /**
220 |  * 重置滑动状态
221 |  * @param {Object} event
222 |  */
223 | function resetTouchStatus(instance) {
224 | 	var state = instance.getState();
225 | 	state.direction = '';
226 | 	state.deltaX = 0;
227 | 	state.deltaY = 0;
228 | 	state.offsetX = 0;
229 | 	state.offsetY = 0;
230 | }
231 | 
232 | /**
233 |  * 设置滑动开始位置
234 |  * @param {Object} event
235 |  */
236 | function stopTouchStart(event) {
237 | 	var instance = event.instance;
238 | 	var state = instance.getState();
239 | 	resetTouchStatus(instance);
240 | 	var touch = event.touches[0];
241 | 	state.startX = touch.clientX;
242 | 	state.startY = touch.clientY;
243 | }
244 | 
245 | /**
246 |  * 滑动中，是否禁止打开
247 |  * @param {Object} event
248 |  */
249 | function stopTouchMove(event) {
250 | 	var instance = event.instance;
251 | 	var state = instance.getState();
252 | 	var touch = event.touches[0];
253 | 	state.deltaX = touch.clientX - state.startX;
254 | 	state.deltaY = touch.clientY - state.startY;
255 | 	state.offsetX = Math.abs(state.deltaX);
256 | 	state.offsetY = Math.abs(state.deltaY);
257 | 	state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
258 | }
259 | 
260 | 
261 | module.exports = {
262 | 	sizeReady: sizeReady,
263 | 	touchstart: touchstart,
264 | 	touchmove: touchmove,
265 | 	touchend: touchend
266 | }
267 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-swipe-action-item/mpalipay.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 | 	data() {
  3 | 		return {
  4 | 			x: 0,
  5 | 			transition: false,
  6 | 			width: 0,
  7 | 			viewWidth: 0,
  8 | 			swipeShow: 0
  9 | 		}
 10 | 	},
 11 | 	watch: {
 12 | 		show(newVal) {
 13 | 			if (this.autoClose) return
 14 | 			if (newVal && newVal !== 'none' ) {
 15 | 				this.transition = true
 16 | 				this.open(newVal)
 17 | 			} else {
 18 | 				this.close()
 19 | 			}
 20 | 		}
 21 | 	},
 22 | 	created() {
 23 | 		if (this.swipeaction.children !== undefined) {
 24 | 			this.swipeaction.children.push(this)
 25 | 		}
 26 | 	},
 27 | 
 28 | 	beforeDestroy() {
 29 | 		this.swipeaction.children.forEach((item, index) => {
 30 | 			if (item === this) {
 31 | 				this.swipeaction.children.splice(index, 1)
 32 | 			}
 33 | 		})
 34 | 	},
 35 | 	mounted() {
 36 | 		this.isopen = false
 37 | 		setTimeout(() => {
 38 | 			this.getQuerySelect()
 39 | 		}, 50)
 40 | 	},
 41 | 	methods: {
 42 | 		appTouchStart(e) {
 43 | 			const {
 44 | 				clientX
 45 | 			} = e.changedTouches[0]
 46 | 			this.clientX = clientX
 47 | 			this.timestamp = new Date().getTime()
 48 | 		},
 49 | 		appTouchEnd(e, index, item, position) {
 50 | 			const {
 51 | 				clientX
 52 | 			} = e.changedTouches[0]
 53 | 			// fixed by xxxx 模拟点击事件，解决 ios 13 点击区域错位的问题
 54 | 			let diff = Math.abs(this.clientX - clientX)
 55 | 			let time = (new Date().getTime()) - this.timestamp
 56 | 			if (diff < 40 && time < 300) {
 57 | 				this.$emit('click', {
 58 | 					content: item,
 59 | 					index,
 60 | 					position
 61 | 				})
 62 | 			}
 63 | 		},
 64 | 		// onClick(index, item, position) {
 65 | 		// 	this.$emit('click', {
 66 | 		// 		content: item,
 67 | 		// 		index,
 68 | 		// 		position
 69 | 		// 	})
 70 | 		// },
 71 | 		/**
 72 | 		 * 移动触发
 73 | 		 * @param {Object} e
 74 | 		 */
 75 | 		onChange(e) {
 76 | 			this.moveX = e.detail.x
 77 | 			this.isclose = false
 78 | 		},
 79 | 		touchstart(e) {
 80 | 			this.transition = false
 81 | 			this.isclose = true
 82 | 			this.autoClose && this.swipeaction.closeOther(this)
 83 | 		},
 84 | 		touchmove(e) {},
 85 | 		touchend(e) {
 86 | 			// 0的位置什么都不执行
 87 | 			if (this.isclose && this.isopen === 'none') return
 88 | 			if (this.isclose && this.isopen !== 'none') {
 89 | 				this.transition = true
 90 | 				this.close()
 91 | 			} else {
 92 | 				this.move(this.moveX + this.leftWidth)
 93 | 			}
 94 | 		},
 95 | 
 96 | 		/**
 97 | 		 * 移动
 98 | 		 * @param {Object} moveX
 99 | 		 */
100 | 		move(moveX) {
101 | 			// 打开关闭的处理逻辑不太一样
102 | 			this.transition = true
103 | 			// 未打开状态
104 | 			if (!this.isopen || this.isopen === 'none') {
105 | 				if (moveX > this.threshold) {
106 | 					this.open('left')
107 | 				} else if (moveX < -this.threshold) {
108 | 					this.open('right')
109 | 				} else {
110 | 					this.close()
111 | 				}
112 | 			} else {
113 | 				if (moveX < 0 && moveX < this.rightWidth) {
114 | 					const rightX = this.rightWidth + moveX
115 | 					if (rightX < this.threshold) {
116 | 						this.open('right')
117 | 					} else {
118 | 						this.close()
119 | 					}
120 | 				} else if (moveX > 0 && moveX < this.leftWidth) {
121 | 					const leftX = this.leftWidth - moveX
122 | 					if (leftX < this.threshold) {
123 | 						this.open('left')
124 | 					} else {
125 | 						this.close()
126 | 					}
127 | 				}
128 | 
129 | 			}
130 | 
131 | 		},
132 | 
133 | 		/**
134 | 		 * 打开
135 | 		 */
136 | 		open(type) {
137 | 			this.x = this.moveX
138 | 			this.animation(type)
139 | 		},
140 | 
141 | 		/**
142 | 		 * 关闭
143 | 		 */
144 | 		close() {
145 | 			this.x = this.moveX
146 | 			// TODO 解决 x 值不更新的问题，所以会多触发一次 nextTick ，待优化
147 | 			this.$nextTick(() => {
148 | 				this.x = -this.leftWidth
149 | 				if(this.isopen!=='none'){
150 | 					this.$emit('change', 'none')
151 | 				}
152 | 				this.isopen = 'none'
153 | 			})
154 | 		},
155 | 
156 | 		/**
157 | 		 * 执行结束动画
158 | 		 * @param {Object} type
159 | 		 */
160 | 		animation(type) {
161 | 			this.$nextTick(() => {
162 | 				if (type === 'left') {
163 | 					this.x = 0
164 | 				} else {
165 | 					this.x = -this.rightWidth - this.leftWidth
166 | 				}
167 | 				
168 | 				if(this.isopen!==type){
169 | 					this.$emit('change', type)
170 | 				}
171 | 				this.isopen = type
172 | 			})
173 | 
174 | 		},
175 | 		getSlide(x) {},
176 | 		getQuerySelect() {
177 | 			const query = uni.createSelectorQuery().in(this);
178 | 			query.selectAll('.movable-view--hock').boundingClientRect(data => {
179 | 				this.leftWidth = data[1].width
180 | 				this.rightWidth = data[2].width
181 | 				this.width = data[0].width
182 | 				this.viewWidth = this.width + this.rightWidth + this.leftWidth
183 | 				if (this.leftWidth === 0) {
184 | 					// TODO 疑似bug ,初始化的时候如果x 是0，会导致移动位置错误，所以让元素超出一点
185 | 					this.x = -0.1
186 | 				} else {
187 | 					this.x = -this.leftWidth
188 | 				}
189 | 				this.moveX = this.x
190 | 				this.$nextTick(() => {
191 | 					this.swipeShow = 1
192 | 				})
193 | 
194 | 				if (!this.buttonWidth) {
195 | 					this.disabledView = true
196 | 				}
197 | 
198 | 				if (this.autoClose) return
199 | 				if (this.show !== 'none') {
200 | 					this.transition = true
201 | 					this.open(this.shows)
202 | 				}
203 | 			}).exec();
204 | 
205 | 		}
206 | 	}
207 | }
208 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-swipe-action-item/mpother.js:
--------------------------------------------------------------------------------
  1 | const MIN_DISTANCE = 10;
  2 | export default {
  3 | 	data() {
  4 | 		return {
  5 | 			uniShow: false,
  6 | 			left: 0,
  7 | 			buttonShow: 'none',
  8 | 			ani: false,
  9 | 			moveLeft:''
 10 | 		}
 11 | 	},
 12 | 	watch: {
 13 | 		show(newVal) {
 14 | 			if (this.autoClose) return
 15 | 			this.openState(newVal)
 16 | 		},
 17 | 		left(){
 18 | 			this.moveLeft = `translateX(${this.left}px)`
 19 | 		},
 20 | 		buttonShow(newVal){
 21 | 			if (this.autoClose) return
 22 | 			this.openState(newVal)
 23 | 		},
 24 | 		leftOptions() {
 25 | 			this.init()
 26 | 		},
 27 | 		rightOptions() {
 28 | 			this.init()
 29 | 		}
 30 | 	},
 31 | 	mounted() {
 32 | 		// this.position = {}
 33 | 		if (this.swipeaction.children !== undefined) {
 34 | 			this.swipeaction.children.push(this)
 35 | 		}
 36 | 		this.init()
 37 | 	},
 38 | 	beforeDestoy() {
 39 | 		this.swipeaction.children.forEach((item, index) => {
 40 | 			if (item === this) {
 41 | 				this.swipeaction.children.splice(index, 1)
 42 | 			}
 43 | 		})
 44 | 	},
 45 | 	methods: {
 46 | 		init(){
 47 | 			clearTimeout(this.timer)
 48 | 			this.timer = setTimeout(() => {
 49 | 				this.getSelectorQuery()
 50 | 			}, 100)
 51 | 			// 移动距离
 52 | 			this.left = 0
 53 | 			this.x = 0
 54 | 		},
 55 | 		closeSwipe(e) {
 56 | 			if (!this.autoClose) return
 57 | 			this.swipeaction.closeOther(this)
 58 | 		},
 59 | 		appTouchStart(e) {
 60 | 			const {
 61 | 				clientX
 62 | 			} = e.changedTouches[0]
 63 | 			this.clientX = clientX
 64 | 			this.timestamp = new Date().getTime()
 65 | 		},
 66 | 		appTouchEnd(e, index, item, position) {
 67 | 			const {
 68 | 				clientX
 69 | 			} = e.changedTouches[0]
 70 | 			// fixed by xxxx 模拟点击事件，解决 ios 13 点击区域错位的问题
 71 | 			let diff = Math.abs(this.clientX - clientX)
 72 | 			let time = (new Date().getTime()) - this.timestamp
 73 | 			if (diff < 40 && time < 300) {
 74 | 				this.$emit('click', {
 75 | 					content: item,
 76 | 					index,
 77 | 					position
 78 | 				})
 79 | 			}
 80 | 		},
 81 | 		touchstart(e) {
 82 | 			if (this.disabled) return
 83 | 			this.ani = false
 84 | 			this.x = this.left || 0
 85 | 			this.stopTouchStart(e)
 86 | 			this.autoClose && this.closeSwipe()
 87 | 		},
 88 | 		touchmove(e) {
 89 | 			if (this.disabled) return
 90 | 			// 是否可以滑动页面
 91 | 			this.stopTouchMove(e);
 92 | 			if (this.direction !== 'horizontal') {
 93 | 				return;
 94 | 			}
 95 | 
 96 | 			this.move(this.x + this.deltaX)
 97 | 		},
 98 | 		touchend() {
 99 | 			if (this.disabled) return
100 | 			this.moveDirection(this.left)
101 | 		},
102 | 		/**
103 | 		 * 设置移动距离
104 | 		 * @param {Object} value
105 | 		 */
106 | 		move(value) {
107 | 			value = value || 0
108 | 			const leftWidth = this.leftWidth
109 | 			const rightWidth = this.rightWidth
110 | 			// 获取可滑动范围
111 | 			this.left = this.range(value, -rightWidth, leftWidth);
112 | 		},
113 | 
114 | 		/**
115 | 		 * 获取范围
116 | 		 * @param {Object} num
117 | 		 * @param {Object} min
118 | 		 * @param {Object} max
119 | 		 */
120 | 		range(num, min, max) {
121 | 			return Math.min(Math.max(num, min), max);
122 | 		},
123 | 		/**
124 | 		 * 移动方向判断
125 | 		 * @param {Object} left
126 | 		 * @param {Object} value
127 | 		 */
128 | 		moveDirection(left) {
129 | 			const threshold = this.threshold
130 | 			const isopen = this.isopen || 'none'
131 | 			const leftWidth = this.leftWidth
132 | 			const rightWidth = this.rightWidth
133 | 			if (this.deltaX === 0) {
134 | 				this.openState('none')
135 | 				return
136 | 			}
137 | 			if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 && rightWidth +
138 | 					left < threshold)) {
139 | 				// right
140 | 				this.openState('right')
141 | 			} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
142 | 					leftWidth - left < threshold)) {
143 | 				// left
144 | 				this.openState('left')
145 | 			} else {
146 | 				// default
147 | 				this.openState('none')
148 | 			}
149 | 		},
150 | 
151 | 		/**
152 | 		 * 开启状态
153 | 		 * @param {Boolean} type
154 | 		 */
155 | 		openState(type) {
156 | 			const leftWidth = this.leftWidth
157 | 			const rightWidth = this.rightWidth
158 | 			let left = ''
159 | 			this.isopen = this.isopen ? this.isopen : 'none'
160 | 			switch (type) {
161 | 				case "left":
162 | 					left = leftWidth
163 | 					break
164 | 				case "right":
165 | 					left = -rightWidth
166 | 					break
167 | 				default:
168 | 					left = 0
169 | 			}
170 | 
171 | 
172 | 			if (this.isopen !== type) {
173 | 				this.throttle = true
174 | 				this.$emit('change', type)
175 | 			}
176 | 
177 | 			this.isopen = type
178 | 			// 添加动画类
179 | 			this.ani = true
180 | 			this.$nextTick(() => {
181 | 				this.move(left)
182 | 			})
183 | 			// 设置最终移动位置,理论上只要进入到这个函数，肯定是要打开的
184 | 		},
185 | 		close() {
186 | 			this.openState('none')
187 | 		},
188 | 		getDirection(x, y) {
189 | 			if (x > y && x > MIN_DISTANCE) {
190 | 				return 'horizontal';
191 | 			}
192 | 			if (y > x && y > MIN_DISTANCE) {
193 | 				return 'vertical';
194 | 			}
195 | 			return '';
196 | 		},
197 | 
198 | 		/**
199 | 		 * 重置滑动状态
200 | 		 * @param {Object} event
201 | 		 */
202 | 		resetTouchStatus() {
203 | 			this.direction = '';
204 | 			this.deltaX = 0;
205 | 			this.deltaY = 0;
206 | 			this.offsetX = 0;
207 | 			this.offsetY = 0;
208 | 		},
209 | 
210 | 		/**
211 | 		 * 设置滑动开始位置
212 | 		 * @param {Object} event
213 | 		 */
214 | 		stopTouchStart(event) {
215 | 			this.resetTouchStatus();
216 | 			const touch = event.touches[0];
217 | 			this.startX = touch.clientX;
218 | 			this.startY = touch.clientY;
219 | 		},
220 | 
221 | 		/**
222 | 		 * 滑动中，是否禁止打开
223 | 		 * @param {Object} event
224 | 		 */
225 | 		stopTouchMove(event) {
226 | 			const touch = event.touches[0];
227 | 			this.deltaX = touch.clientX - this.startX;
228 | 			this.deltaY = touch.clientY - this.startY;
229 | 			this.offsetX = Math.abs(this.deltaX);
230 | 			this.offsetY = Math.abs(this.deltaY);
231 | 			this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY);
232 | 		},
233 | 
234 | 		getSelectorQuery() {
235 | 			const views = uni.createSelectorQuery().in(this)
236 | 			views
237 | 				.selectAll('.uni-swipe_button-group')
238 | 				.boundingClientRect(data => {
239 | 					let show = 'none'
240 | 					if (this.autoClose) {
241 | 						show = 'none'
242 | 					} else {
243 | 						show = this.show
244 | 					}
245 | 					this.leftWidth = data[0].width || 0
246 | 					this.rightWidth = data[1].width || 0
247 | 					this.buttonShow = show
248 | 				})
249 | 				.exec()
250 | 		}
251 | 	}
252 | }
253 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-swipe-action-item/mpwxs.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 | 	data() {
  3 | 		return {
  4 | 			position: [],
  5 | 			button: {},
  6 | 			btn: "[]"
  7 | 		}
  8 | 	},
  9 | 	// computed: {
 10 | 	// 	pos() {
 11 | 	// 		return JSON.stringify(this.position)
 12 | 	// 	},
 13 | 	// 	btn() {
 14 | 	// 		return JSON.stringify(this.button)
 15 | 	// 	}
 16 | 	// },
 17 | 	watch: {
 18 | 		button: {
 19 | 			handler(newVal) {
 20 | 				this.btn = JSON.stringify(newVal)
 21 | 			},
 22 | 			deep: true
 23 | 		},
 24 | 		show(newVal) {
 25 | 			if (this.autoClose) return
 26 | 			if (!this.button) {
 27 | 				this.init()
 28 | 				return
 29 | 			}
 30 | 			this.button.show = newVal
 31 | 		},
 32 | 		leftOptions() {
 33 | 			this.init()
 34 | 		},
 35 | 		rightOptions() {
 36 | 			this.init()
 37 | 		}
 38 | 	},
 39 | 	created() {
 40 | 		if (this.swipeaction.children !== undefined) {
 41 | 			this.swipeaction.children.push(this)
 42 | 		}
 43 | 	},
 44 | 	mounted() {
 45 | 		this.init()
 46 | 	},
 47 | 	beforeDestroy() {
 48 | 		this.swipeaction.children.forEach((item, index) => {
 49 | 			if (item === this) {
 50 | 				this.swipeaction.children.splice(index, 1)
 51 | 			}
 52 | 		})
 53 | 	},
 54 | 	methods: {
 55 | 		init() {
 56 | 			clearTimeout(this.swipetimer)
 57 | 			this.swipetimer = setTimeout(() => {
 58 | 				this.getButtonSize()
 59 | 			}, 50)
 60 | 		},
 61 | 		closeSwipe(e) {
 62 | 			if (!this.autoClose) return
 63 | 			this.swipeaction.closeOther(this)
 64 | 		},
 65 | 
 66 | 		change(e) {
 67 | 			this.$emit('change', e.open)
 68 | 			let show = this.button.show
 69 | 			if (show !== e.open) {
 70 | 				this.button.show = e.open
 71 | 			}
 72 | 
 73 | 		},
 74 | 
 75 | 		appTouchStart(e) {
 76 | 			const {
 77 | 				clientX
 78 | 			} = e.changedTouches[0]
 79 | 			this.clientX = clientX
 80 | 			this.timestamp = new Date().getTime()
 81 | 		},
 82 | 		appTouchEnd(e, index, item, position) {
 83 | 			const {
 84 | 				clientX
 85 | 			} = e.changedTouches[0]
 86 | 			// fixed by xxxx 模拟点击事件，解决 ios 13 点击区域错位的问题
 87 | 			let diff = Math.abs(this.clientX - clientX)
 88 | 			let time = (new Date().getTime()) - this.timestamp
 89 | 			if (diff < 40 && time < 300) {
 90 | 				this.$emit('click', {
 91 | 					content: item,
 92 | 					index,
 93 | 					position
 94 | 				})
 95 | 			}
 96 | 		},
 97 | 		getButtonSize() {
 98 | 			const views = uni.createSelectorQuery().in(this)
 99 | 			views
100 | 				.selectAll('.uni-swipe_button-group')
101 | 				.boundingClientRect(data => {
102 | 					let show = 'none'
103 | 					if (this.autoClose) {
104 | 						show = 'none'
105 | 					} else {
106 | 						show = this.show
107 | 					}
108 | 					this.button = {
109 | 						data,
110 | 						show
111 | 					}
112 | 				})
113 | 				.exec()
114 | 		}
115 | 	}
116 | }
117 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-swipe-action/uni-swipe-action.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view>
 3 | 		<slot></slot>
 4 | 	</view>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	/**
 9 | 	 * SwipeAction 滑动操作
10 | 	 * @description 通过滑动触发选项的容器
11 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=181
12 | 	 */
13 | 	export default {
14 | 		data() {
15 | 			return {};
16 | 		},
17 | 		provide() {
18 | 			return {
19 | 				swipeaction: this
20 | 			};
21 | 		},
22 | 		created() {
23 | 			this.children = [];
24 | 		},
25 | 		methods: {
26 | 			closeOther(vm) {
27 | 				if (this.openItem && this.openItem !== vm) {
28 | 					// #ifdef APP-VUE || H5 || MP-WEIXIN
29 | 					this.openItem.button.show = 'none'
30 | 					// #endif
31 | 
32 | 					// #ifndef APP-VUE || H5 || MP-WEIXIN
33 | 					this.openItem.close()
34 | 					// #endif
35 | 				}
36 | 				this.openItem = vm
37 | 			}
38 | 		}
39 | 	};
40 | </script>
41 | 
42 | <style></style>
43 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-swiper-dot/uni-swiper-dot.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-swiper__warp">
  3 | 		<slot />
  4 | 		<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
  5 | 			<view v-for="(item,index) in info" :style="{
  6 |         'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/3 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
  7 | 			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
  8 | 		</view>
  9 | 		<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
 10 | 			<view v-for="(item,index) in info" :style="{
 11 |         'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
 12 | 			 :key="index" class="uni-swiper__dots-item" />
 13 | 		</view>
 14 | 		<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
 15 | 			<view v-for="(item,index) in info" :class="[index === current&&'uni-swiper__dots-long']" :style="{
 16 | 		    'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
 17 | 			 :key="index" class="uni-swiper__dots-item " />
 18 | 		</view>
 19 | 		<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
 20 | 			<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
 21 | 		</view>
 22 | 		<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
 23 | 			<view v-for="(item,index) in info" :style="{
 24 |         'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
 25 | 			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
 26 | 		</view>
 27 | 	</view>
 28 | </template>
 29 | 
 30 | <script>
 31 | 
 32 | 	/**
 33 | 	 * SwiperDod 轮播图指示点
 34 | 	 * @description 自定义轮播图指示点
 35 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=284
 36 | 	 * @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
 37 | 	 * @property {String} mode = [default|round|nav|indexes] 指示点的类型
 38 | 	 * 	@value defualt 默认指示点
 39 | 	 * 	@value round 圆形指示点
 40 | 	 * 	@value nav 条形指示点
 41 | 	 * 	@value indexes 索引指示点
 42 | 	 * @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
 43 | 	 * @property {String} info 轮播图的数据，通过数组长度决定指示点个数
 44 | 	 * @property {Object} dotsStyles 指示点样式
 45 | 	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
 46 | 	 */
 47 | 
 48 | 	export default {
 49 | 		name: 'UniSwiperDot',
 50 | 		props: {
 51 | 			info: {
 52 | 				type: Array,
 53 | 				default () {
 54 | 					return []
 55 | 				}
 56 | 			},
 57 | 			current: {
 58 | 				type: Number,
 59 | 				default: 0
 60 | 			},
 61 | 			dotsStyles: {
 62 | 				type: Object,
 63 | 				default () {
 64 | 					return {}
 65 | 				}
 66 | 			},
 67 | 			// 类型 ：default(默认) indexes long nav
 68 | 			mode: {
 69 | 				type: String,
 70 | 				default: 'default'
 71 | 			},
 72 | 			// 只在 nav 模式下生效，变量名称
 73 | 			field: {
 74 | 				type: String,
 75 | 				default: ''
 76 | 			}
 77 | 		},
 78 | 		data() {
 79 | 			return {
 80 | 				dots: {
 81 | 					width: 8,
 82 | 					height: 8,
 83 | 					bottom: 10,
 84 | 					color: '#fff',
 85 | 					backgroundColor: 'rgba(0, 0, 0, .3)',
 86 | 					border: '1px rgba(0, 0, 0, .3) solid',
 87 | 					selectedBackgroundColor: '#333',
 88 | 					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
 89 | 				}
 90 | 			}
 91 | 		},
 92 | 		watch: {
 93 | 			dotsStyles(newVal) {
 94 | 				this.dots = Object.assign(this.dots, this.dotsStyles)
 95 | 			},
 96 | 			mode(newVal) {
 97 | 				if (newVal === 'indexes') {
 98 | 					this.dots.width = 20
 99 | 					this.dots.height = 20
100 | 				} else {
101 | 					this.dots.width = 8
102 | 					this.dots.height = 8
103 | 				}
104 | 			}
105 | 
106 | 		},
107 | 		created() {
108 | 			if (this.mode === 'indexes') {
109 | 				this.dots.width = 20
110 | 				this.dots.height = 20
111 | 			}
112 | 			this.dots = Object.assign(this.dots, this.dotsStyles)
113 | 		}
114 | 	}
115 | </script>
116 | 
117 | <style lang="scss" scoped>
118 | 	.uni-swiper__warp {
119 | 		/* #ifndef APP-NVUE */
120 | 		display: flex;
121 | 		/* #endif */
122 | 		flex: 1;
123 | 		flex-direction: column;
124 | 		position: relative;
125 | 		overflow: hidden;
126 | 	}
127 | 
128 | 	.uni-swiper__dots-box {
129 | 		position: absolute;
130 | 		bottom: 10px;
131 | 		left: 0;
132 | 		right: 0;
133 | 		/* #ifndef APP-NVUE */
134 | 		display: flex;
135 | 		/* #endif */
136 | 		flex: 1;
137 | 		flex-direction: row;
138 | 		justify-content: center;
139 | 		align-items: center;
140 | 	}
141 | 
142 | 	.uni-swiper__dots-item {
143 | 		width: 8px;
144 | 		border-radius: 100px;
145 | 		margin-left: 6px;
146 | 		background-color: $uni-bg-color-mask;
147 | 		// transition: width 0.2s linear;  不要取消注释，不然会不能变色
148 | 	}
149 | 
150 | 	.uni-swiper__dots-item:first-child {
151 | 		margin: 0;
152 | 	}
153 | 
154 | 	.uni-swiper__dots-default {
155 | 		border-radius: 100px;
156 | 	}
157 | 
158 | 	.uni-swiper__dots-long {
159 | 		border-radius: 50px;
160 | 	}
161 | 
162 | 	.uni-swiper__dots-bar {
163 | 		border-radius: 50px;
164 | 	}
165 | 
166 | 	.uni-swiper__dots-nav {
167 | 		bottom: 0px;
168 | 		height: 40px;
169 | 		/* #ifndef APP-NVUE */
170 | 		display: flex;
171 | 		/* #endif */
172 | 		flex: 1;
173 | 		flex-direction: row;
174 | 		justify-content: flex-start;
175 | 		align-items: center;
176 | 		background-color: rgba(0, 0, 0, 0.2);
177 | 	}
178 | 
179 | 	.uni-swiper__dots-nav-item {
180 | 		/* overflow: hidden;
181 |     text-overflow: ellipsis;
182 |     white-space: nowrap; */
183 | 		font-size: $uni-font-size-base;
184 | 		color: #fff;
185 | 		margin: 0 15px;
186 | 	}
187 | 
188 | 	.uni-swiper__dots-indexes {
189 | 		/* #ifndef APP-NVUE */
190 | 		display: flex;
191 | 		/* #endif */
192 | 		// flex: 1;
193 | 		justify-content: center;
194 | 		align-items: center;
195 | 	}
196 | 
197 | 	.uni-swiper__dots-indexes-text {
198 | 		color: #fff;
199 | 		font-size: $uni-font-size-sm;
200 | 	}
201 | </style>
202 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-tag/uni-tag.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view :class="[
  3 |       'uni-tag--' + type,
  4 |       disabled === true || disabled === 'true' ? 'uni-tag--disabled' : '',
  5 |       inverted === true || inverted === 'true' ? type + '-uni-tag--inverted' : '',
  6 |       circle === true || circle === 'true' ? 'uni-tag--circle' : '',
  7 |       mark === true || mark === 'true' ? 'uni-tag--mark' : '',
  8 |       'uni-tag--' + size
  9 |     ]"
 10 | 	 @click="onClick()" class="uni-tag" v-if="text">
 11 | 		<text :class="[type === 'default' ? 'uni-tag--default':'uni-tag-text',inverted === true || inverted === 'true' ? 'uni-tag-text--'+type : '',size === 'small' ? 'uni-tag-text--small':'' ]">{{ text }}</text>
 12 | 	</view>
 13 | </template>
 14 | 
 15 | <script>
 16 | 	/**
 17 | 	 * Tag 标签
 18 | 	 * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
 19 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=35
 20 | 	 * @property {String} text 标签内容
 21 | 	 * @property {String} size = [normal|small] 大小尺寸
 22 | 	 * 	@value normal 正常
 23 | 	 * 	@value small 小尺寸
 24 | 	 * @property {String} type = [default|primary|success｜warning｜error｜royal]  颜色类型
 25 | 	 * 	@value default 灰色
 26 | 	 * 	@value primary 蓝色
 27 | 	 * 	@value success 绿色
 28 | 	 * 	@value warning 黄色
 29 | 	 * 	@value error 红色
 30 | 	 * 	@value royal 紫色
 31 | 	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
 32 | 	 * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
 33 | 	 * @property {Boolean} circle = [true|false] 是否为圆角
 34 | 	 * @event {Function} click 点击 Tag 触发事件
 35 | 	 */
 36 | 
 37 | 	export default {
 38 | 		name: "UniTag",
 39 | 		props: {
 40 | 			type: {
 41 | 				// 标签类型default、primary、success、warning、error、royal
 42 | 				type: String,
 43 | 				default: "default"
 44 | 			},
 45 | 			size: {
 46 | 				// 标签大小 normal, small
 47 | 				type: String,
 48 | 				default: "normal"
 49 | 			},
 50 | 			// 标签内容
 51 | 			text: {
 52 | 				type: String,
 53 | 				default: ""
 54 | 			},
 55 | 			disabled: {
 56 | 				// 是否为禁用状态
 57 | 				type: [Boolean, String],
 58 | 				default: false
 59 | 			},
 60 | 			inverted: {
 61 | 				// 是否为空心
 62 | 				type: [Boolean, String],
 63 | 				default: false
 64 | 			},
 65 | 			circle: {
 66 | 				// 是否为圆角样式
 67 | 				type: [Boolean, String],
 68 | 				default: false
 69 | 			},
 70 | 			mark: {
 71 | 				// 是否为标记样式
 72 | 				type: [Boolean, String],
 73 | 				default: false
 74 | 			}
 75 | 		},
 76 | 		methods: {
 77 | 			onClick() {
 78 | 				if (this.disabled === true || this.disabled === "true") {
 79 | 					return;
 80 | 				}
 81 | 				this.$emit("click");
 82 | 			}
 83 | 		}
 84 | 	};
 85 | </script>
 86 | 
 87 | <style lang="scss" scoped>
 88 | 	$tag-pd: 0px 16px;
 89 | 	$tag-small-pd: 0px 8px;
 90 | 
 91 | 	.uni-tag {
 92 | 		/* #ifndef APP-NVUE */
 93 | 		display: flex;
 94 | 		/* #endif */
 95 | 		padding: $tag-pd;
 96 | 		height: 30px;
 97 | 		line-height: 30px;
 98 | 		justify-content: center;
 99 | 		color: $uni-text-color;
100 | 		border-radius: $uni-border-radius-base;
101 | 		background-color: $uni-bg-color-grey;
102 | 		border-width: 1rpx;
103 | 		border-style: solid;
104 | 		border-color: $uni-bg-color-grey;
105 | 	}
106 | 
107 | 	.uni-tag--circle {
108 | 		border-radius: 15px;
109 | 	}
110 | 
111 | 	.uni-tag--mark {
112 | 		border-top-left-radius: 0;
113 | 		border-bottom-left-radius: 0;
114 | 		border-top-right-radius: 15px;
115 | 		border-bottom-right-radius: 15px;
116 | 	}
117 | 
118 | 	.uni-tag--disabled {
119 | 		opacity: 0.5;
120 | 	}
121 | 
122 | 	.uni-tag--small {
123 | 		height: 20px;
124 | 		padding: $tag-small-pd;
125 | 		line-height: 20px;
126 | 		font-size: $uni-font-size-sm;
127 | 	}
128 | 
129 | 	.uni-tag--default {
130 | 		color: $uni-text-color;
131 | 		font-size: $uni-font-size-base;
132 | 	}
133 | 
134 | 	.uni-tag-text--small {
135 | 		font-size: $uni-font-size-sm !important;
136 | 	}
137 | 
138 | 	.uni-tag-text {
139 | 		color: $uni-text-color-inverse;
140 | 		font-size: $uni-font-size-base;
141 | 	}
142 | 
143 | 	.uni-tag-text--primary {
144 | 		color: $uni-color-primary !important;
145 | 	}
146 | 
147 | 	.uni-tag-text--success {
148 | 		color: $uni-color-success !important;
149 | 	}
150 | 
151 | 	.uni-tag-text--warning {
152 | 		color: $uni-color-warning !important;
153 | 	}
154 | 
155 | 	.uni-tag-text--error {
156 | 		color: $uni-color-error !important;
157 | 	}
158 | 
159 | 	.uni-tag--primary {
160 | 		color: $uni-text-color-inverse;
161 | 		background-color: $uni-color-primary;
162 | 		border-width: 1rpx;
163 | 		border-style: solid;
164 | 		border-color: $uni-color-primary;
165 | 	}
166 | 
167 | 	.primary-uni-tag--inverted {
168 | 		color: $uni-color-primary;
169 | 		background-color: $uni-bg-color;
170 | 		border-width: 1rpx;
171 | 		border-style: solid;
172 | 		border-color: $uni-color-primary;
173 | 	}
174 | 
175 | 	.uni-tag--success {
176 | 		color: $uni-text-color-inverse;
177 | 		background-color: $uni-color-success;
178 | 		border-width: 1rpx;
179 | 		border-style: solid;
180 | 		border-color: $uni-color-success;
181 | 	}
182 | 
183 | 	.success-uni-tag--inverted {
184 | 		color: $uni-color-success;
185 | 		background-color: $uni-bg-color;
186 | 		border-width: 1rpx;
187 | 		border-style: solid;
188 | 		border-color: $uni-color-success;
189 | 	}
190 | 
191 | 	.uni-tag--warning {
192 | 		color: $uni-text-color-inverse;
193 | 		background-color: $uni-color-warning;
194 | 		border-width: 1rpx;
195 | 		border-style: solid;
196 | 		border-color: $uni-color-warning;
197 | 	}
198 | 
199 | 	.warning-uni-tag--inverted {
200 | 		color: $uni-color-warning;
201 | 		background-color: $uni-bg-color;
202 | 		border-width: 1rpx;
203 | 		border-style: solid;
204 | 		border-color: $uni-color-warning;
205 | 	}
206 | 
207 | 	.uni-tag--error {
208 | 		color: $uni-text-color-inverse;
209 | 		background-color: $uni-color-error;
210 | 		border-width: 1rpx;
211 | 		border-style: solid;
212 | 		border-color: $uni-color-error;
213 | 	}
214 | 
215 | 	.error-uni-tag--inverted {
216 | 		color: $uni-color-error;
217 | 		background-color: $uni-bg-color;
218 | 		border-width: 1rpx;
219 | 		border-style: solid;
220 | 		border-color: $uni-color-error;
221 | 	}
222 | 
223 | 	.uni-tag--inverted {
224 | 		color: $uni-text-color;
225 | 		background-color: $uni-bg-color;
226 | 		border-width: 1rpx;
227 | 		border-style: solid;
228 | 		border-color: $uni-bg-color-grey;
229 | 	}
230 | </style>
231 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-test/uni-test.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view>
 3 | 		测试插件
 4 | 	</view>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	export default {
 9 | 		data() {
10 | 			return {
11 | 				
12 | 			};
13 | 		}
14 | 	}
15 | </script>
16 | 
17 | <style>
18 | 
19 | </style>
20 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-title/uni-title.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="uni-title__box" :style="{'align-items':textAlign}">
  3 | 		<text class="uni-title__base" :class="['uni-'+type]" :style="{'color':color}">{{title}}</text>
  4 | 	</view>
  5 | </template>
  6 | 
  7 | <script>
  8 | 	/**
  9 | 	 * Title 章节标题
 10 | 	 * @description 章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题
 11 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=1066
 12 | 	 * @property {String} type = [h1|h2|h3|h4|h5] 标题类型
 13 | 	 * 	@value h1 一级标题
 14 | 	 * 	@value h2 二级标题
 15 | 	 * 	@value h3 三级标题
 16 | 	 * 	@value h4 四级标题
 17 | 	 * 	@value h5 五级标题
 18 | 	 * @property {String} title 章节标题内容
 19 | 	 * @property {String} align = [left|center|right] 对齐方式
 20 | 	 * 	@value left 做对齐
 21 | 	 * 	@value center 居中对齐
 22 | 	 * 	@value right 右对齐
 23 | 	 * @property {String} color 字体颜色
 24 | 	 * @property {Boolean} stat = [true|false] 是否开启统计功能呢，如不填写type值，默认为开启，填写 type 属性，默认为关闭
 25 | 	 */
 26 | 	export default {
 27 | 		props: {
 28 | 			type: {
 29 | 				type: String,
 30 | 				default: ''
 31 | 			},
 32 | 			title: {
 33 | 				type: String,
 34 | 				default: ''
 35 | 			},
 36 | 			align: {
 37 | 				type: String,
 38 | 				default: 'left'
 39 | 			},
 40 | 			color: {
 41 | 				type: String,
 42 | 				default: '#333333'
 43 | 			},
 44 | 			stat: {
 45 | 				type: [Boolean, String],
 46 | 				default: ''
 47 | 			}
 48 | 		},
 49 | 		data() {
 50 | 			return {
 51 | 
 52 | 			};
 53 | 		},
 54 | 		computed: {
 55 | 			textAlign() {
 56 | 				let align = 'center';
 57 | 				switch (this.align) {
 58 | 					case 'left':
 59 | 						align = 'flex-start'
 60 | 						break;
 61 | 					case 'center':
 62 | 						align = 'center'
 63 | 						break;
 64 | 					case 'right':
 65 | 						align = 'flex-end'
 66 | 						break;
 67 | 				}
 68 | 				return align
 69 | 			}
 70 | 		},
 71 | 		watch: {
 72 | 			title(newVal) {
 73 | 				if (this.isOpenStat()) {
 74 | 					// 上报数据
 75 | 					if (uni.report) {
 76 | 						uni.report('title', this.title)
 77 | 					}
 78 | 				}
 79 | 			}
 80 | 		},
 81 | 		mounted() {
 82 | 			if (this.isOpenStat()) {
 83 | 				// 上报数据
 84 | 				if (uni.report) {
 85 | 					uni.report('title', this.title)
 86 | 				}
 87 | 			}
 88 | 		},
 89 | 		methods: {
 90 | 			isOpenStat() {
 91 | 				if (this.stat === '') {
 92 | 					this.isStat = false
 93 | 				}
 94 | 				let stat_type = (typeof(this.stat) === 'boolean' && this.stat) || (typeof(this.stat) === 'string' && this.stat !==
 95 | 					'')
 96 | 				if (this.type === "") {
 97 | 					this.isStat = true
 98 | 					if (this.stat.toString() === 'false') {
 99 | 						this.isStat = false
100 | 					}
101 | 				}
102 | 
103 | 				if (this.type !== '') {
104 | 					this.isStat = true
105 | 					if (stat_type) {
106 | 						this.isStat = true
107 | 					} else {
108 | 						this.isStat = false
109 | 					}
110 | 				}
111 | 				return this.isStat
112 | 			}
113 | 		}
114 | 	}
115 | </script>
116 | 
117 | <style scoped>
118 | 	/* .uni-title {
119 | 
120 | 	} */
121 | 	.uni-title__box {
122 | 		/* #ifndef APP-NVUE */
123 | 		display: flex;
124 | 		/* #endif */
125 | 		flex-direction: column;
126 | 		align-items: flex-start;
127 | 		justify-content: center;
128 | 		padding: 8px 0;
129 | 		flex: 1;
130 | 	}
131 | 
132 | 	.uni-title__base {
133 | 		font-size: 15px;
134 | 		color: #333;
135 | 		font-weight: 500;
136 | 	}
137 | 
138 | 	.uni-h1 {
139 | 		font-size: 20px;
140 | 		color: #333;
141 | 		font-weight: bold;
142 | 	}
143 | 
144 | 	.uni-h2 {
145 | 		font-size: 18px;
146 | 		color: #333;
147 | 		font-weight: bold;
148 | 	}
149 | 
150 | 	.uni-h3 {
151 | 		font-size: 16px;
152 | 		color: #333;
153 | 		font-weight: bold;
154 | 		/* font-weight: 400; */
155 | 	}
156 | 
157 | 	.uni-h4 {
158 | 		font-size: 14px;
159 | 		color: #333;
160 | 		font-weight: bold;
161 | 		/* font-weight: 300; */
162 | 	}
163 | 
164 | 	.uni-h5 {
165 | 		font-size: 12px;
166 | 		color: #333;
167 | 		font-weight: bold;
168 | 		/* font-weight: 200; */
169 | 	}
170 | </style>
171 | 


--------------------------------------------------------------------------------
/components/uni-ui/uni-transition/uni-transition.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
  3 | 	 @click="change">
  4 | 		 <slot></slot>
  5 | 	</view>
  6 | </template>
  7 | 
  8 | <script>
  9 | 	// #ifdef APP-NVUE
 10 | 	const animation = uni.requireNativePlugin('animation');
 11 | 	// #endif
 12 | 	/**
 13 | 	 * Transition 过渡动画
 14 | 	 * @description 简单过渡动画组件
 15 | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=985
 16 | 	 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
 17 |      * @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
 18 |      *  @value fade 渐隐渐出过渡
 19 |      *  @value slide-top 由上至下过渡
 20 |      *  @value slide-right 由右至左过渡
 21 |      *  @value slide-bottom 由下至上过渡
 22 |      *  @value slide-left 由左至右过渡
 23 |      *  @value zoom-in 由小到大过渡
 24 |      *  @value zoom-out 由大到小过渡
 25 | 	 * @property {Number} duration 过渡动画持续时间
 26 | 	 * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
 27 | 	 */
 28 | 	export default {
 29 | 		name: 'uniTransition',
 30 | 		props: {
 31 | 			show: {
 32 | 				type: Boolean,
 33 | 				default: false
 34 | 			},
 35 | 			modeClass: {
 36 | 				type: Array,
 37 | 				default () {
 38 | 					return []
 39 | 				}
 40 | 			},
 41 | 			duration: {
 42 | 				type: Number,
 43 | 				default: 300
 44 | 			},
 45 | 			styles: {
 46 | 				type: Object,
 47 | 				default () {
 48 | 					return {}
 49 | 				}
 50 | 			}
 51 | 		},
 52 | 		data() {
 53 | 			return {
 54 | 				isShow: false,
 55 | 				transform: '',
 56 | 				ani: { in: '',
 57 | 					active: ''
 58 | 				}
 59 | 			};
 60 | 		},
 61 | 		watch: {
 62 | 			show: {
 63 | 				handler(newVal) {
 64 | 					if (newVal) {
 65 | 						this.open()
 66 | 					} else {
 67 | 						this.close()
 68 | 					}
 69 | 				},
 70 | 				immediate: true
 71 | 			}
 72 | 		},
 73 | 		computed: {
 74 | 			stylesObject() {
 75 | 				let styles = {
 76 | 					...this.styles,
 77 | 					'transition-duration': this.duration / 1000 + 's'
 78 | 				}
 79 | 				let transfrom = ''
 80 | 				for (let i in styles) {
 81 | 					let line = this.toLine(i)
 82 | 					transfrom += line + ':' + styles[i] + ';'
 83 | 				}
 84 | 				return transfrom
 85 | 			}
 86 | 		},
 87 | 		created() {
 88 | 			// this.timer = null
 89 | 			// this.nextTick = (time = 50) => new Promise(resolve => {
 90 | 			// 	clearTimeout(this.timer)
 91 | 			// 	this.timer = setTimeout(resolve, time)
 92 | 			// 	return this.timer
 93 | 			// });
 94 | 		},
 95 | 		methods: {
 96 | 			change() {
 97 | 				this.$emit('click', {
 98 | 					detail: this.isShow
 99 | 				})
100 | 			},
101 | 			open() {
102 | 				clearTimeout(this.timer)
103 | 				this.isShow = true
104 | 				this.transform = ''
105 | 				this.ani.in = ''
106 | 				for (let i in this.getTranfrom(false)) {
107 | 					if (i === 'opacity') {
108 | 						this.ani.in = 'fade-in'
109 | 					} else {
110 | 						this.transform += `${this.getTranfrom(false)[i]} `
111 | 					}
112 | 				}
113 | 				this.$nextTick(() => {
114 | 					setTimeout(() => {
115 | 						this._animation(true)
116 | 					}, 50)
117 | 				})
118 | 
119 | 			},
120 | 			close(type) {
121 | 				clearTimeout(this.timer)
122 | 				this._animation(false)
123 | 			},
124 | 			_animation(type) {
125 | 				let styles = this.getTranfrom(type)
126 | 				// #ifdef APP-NVUE
127 | 				if(!this.$refs['ani']) return
128 | 				animation.transition(this.$refs['ani'].ref, {
129 | 					styles,
130 | 					duration: this.duration, //ms
131 | 					timingFunction: 'ease',
132 | 					needLayout: false,
133 | 					delay: 0 //ms
134 | 				}, () => {
135 | 					if (!type) {
136 | 						this.isShow = false
137 | 					}
138 | 					this.$emit('change', {
139 | 						detail: this.isShow
140 | 					})
141 | 				})
142 | 				// #endif
143 | 				// #ifndef APP-NVUE
144 | 				this.transform = ''
145 | 				for (let i in styles) {
146 | 					if (i === 'opacity') {
147 | 						this.ani.in = `fade-${type?'out':'in'}`
148 | 					} else {
149 | 						this.transform += `${styles[i]} `
150 | 					}
151 | 				}
152 | 				this.timer = setTimeout(() => {
153 | 					if (!type) {
154 | 						this.isShow = false
155 | 					}
156 | 					this.$emit('change', {
157 | 						detail: this.isShow
158 | 					})
159 | 
160 | 				}, this.duration)
161 | 				// #endif
162 | 
163 | 			},
164 | 			getTranfrom(type) {
165 | 				let styles = {
166 | 					transform: ''
167 | 				}
168 | 				this.modeClass.forEach((mode) => {
169 | 					switch (mode) {
170 | 						case 'fade':
171 | 							styles.opacity = type ? 1 : 0
172 | 							break;
173 | 						case 'slide-top':
174 | 							styles.transform += `translateY(${type?'0':'-100%'}) `
175 | 							break;
176 | 						case 'slide-right':
177 | 							styles.transform += `translateX(${type?'0':'100%'}) `
178 | 							break;
179 | 						case 'slide-bottom':
180 | 							styles.transform += `translateY(${type?'0':'100%'}) `
181 | 							break;
182 | 						case 'slide-left':
183 | 							styles.transform += `translateX(${type?'0':'-100%'}) `
184 | 							break;
185 | 						case 'zoom-in':
186 | 							styles.transform += `scale(${type?1:0.8}) `
187 | 							break;
188 | 						case 'zoom-out':
189 | 							styles.transform += `scale(${type?1:1.2}) `
190 | 							break;
191 | 					}
192 | 				})
193 | 				return styles
194 | 			},
195 | 			_modeClassArr(type) {
196 | 				let mode = this.modeClass
197 | 				if (typeof(mode) !== "string") {
198 | 					let modestr = ''
199 | 					mode.forEach((item) => {
200 | 						modestr += (item + '-' + type + ',')
201 | 					})
202 | 					return modestr.substr(0, modestr.length - 1)
203 | 				} else {
204 | 					return mode + '-' + type
205 | 				}
206 | 			},
207 | 			// getEl(el) {
208 | 			// 	console.log(el || el.ref || null);
209 | 			// 	return el || el.ref || null
210 | 			// },
211 | 			toLine(name) {
212 | 				return name.replace(/([A-Z])/g, "-$1").toLowerCase();
213 | 			}
214 | 		}
215 | 	}
216 | </script>
217 | 
218 | <style>
219 | 	.uni-transition {
220 | 		transition-timing-function: ease;
221 | 		transition-duration: 0.3s;
222 | 		transition-property: transform, opacity;
223 | 	}
224 | 
225 | 	.fade-in {
226 | 		opacity: 0;
227 | 	}
228 | 
229 | 	.fade-active {
230 | 		opacity: 1;
231 | 	}
232 | 
233 | 	.slide-top-in {
234 | 		/* transition-property: transform, opacity; */
235 | 		transform: translateY(-100%);
236 | 	}
237 | 
238 | 	.slide-top-active {
239 | 		transform: translateY(0);
240 | 		/* opacity: 1; */
241 | 	}
242 | 
243 | 	.slide-right-in {
244 | 		transform: translateX(100%);
245 | 	}
246 | 
247 | 	.slide-right-active {
248 | 		transform: translateX(0);
249 | 	}
250 | 
251 | 	.slide-bottom-in {
252 | 		transform: translateY(100%);
253 | 	}
254 | 
255 | 	.slide-bottom-active {
256 | 		transform: translateY(0);
257 | 	}
258 | 
259 | 	.slide-left-in {
260 | 		transform: translateX(-100%);
261 | 	}
262 | 
263 | 	.slide-left-active {
264 | 		transform: translateX(0);
265 | 		opacity: 1;
266 | 	}
267 | 
268 | 	.zoom-in-in {
269 | 		transform: scale(0.8);
270 | 	}
271 | 
272 | 	.zoom-out-active {
273 | 		transform: scale(1);
274 | 	}
275 | 
276 | 	.zoom-out-in {
277 | 		transform: scale(1.2);
278 | 	}
279 | </style>
280 | 


--------------------------------------------------------------------------------
/image/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/image/1.png


--------------------------------------------------------------------------------
/image/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/image/2.png


--------------------------------------------------------------------------------
/image/图层1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/image/图层1.png


--------------------------------------------------------------------------------
/image/图层2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/image/图层2.png


--------------------------------------------------------------------------------
/image/图层3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/image/图层3.png


--------------------------------------------------------------------------------
/image/图层4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/image/图层4.png


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | 
 4 | Vue.config.productionTip = false
 5 | 
 6 | App.mpType = 'app'
 7 | 
 8 | const app = new Vue({
 9 |     ...App
10 | })
11 | app.$mount()
12 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name" : "项目框架",
 3 |     "appid" : "",
 4 |     "description" : "",
 5 |     "versionName" : "1.0.0",
 6 |     "versionCode" : "100",
 7 |     "transformPx" : false,
 8 |     /* 5+App特有相关 */
 9 |     "app-plus" : {
10 |         "usingComponents" : true,
11 |         "nvueCompiler" : "uni-app",
12 |         "compilerVersion" : 3,
13 |         "splashscreen" : {
14 |             "alwaysShowBeforeRender" : true,
15 |             "waiting" : true,
16 |             "autoclose" : true,
17 |             "delay" : 0
18 |         },
19 |         /* 模块配置 */
20 |         "modules" : {},
21 |         /* 应用发布信息 */
22 |         "distribute" : {
23 |             /* android打包配置 */
24 |             "android" : {
25 |                 "permissions" : [
26 |                     "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
27 |                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
28 |                     "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
29 |                     "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
30 |                     "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
31 |                     "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
32 |                     "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
33 |                     "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
34 |                     "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
35 |                     "<uses-permission android:name=\"android.permission.CAMERA\"/>",
36 |                     "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
37 |                     "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
38 |                     "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
39 |                     "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
40 |                     "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
41 |                     "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
42 |                     "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
43 |                     "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
44 |                     "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
45 |                     "<uses-feature android:name=\"android.hardware.camera\"/>",
46 |                     "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
47 |                     "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
48 |                 ]
49 |             },
50 |             /* ios打包配置 */
51 |             "ios" : {},
52 |             /* SDK配置 */
53 |             "sdkConfigs" : {}
54 |         }
55 |     },
56 |     /* 快应用特有相关 */
57 |     "quickapp" : {},
58 |     /* 小程序特有相关 */
59 |     "mp-weixin" : {
60 |         "appid" : "",
61 |         "setting" : {
62 |             "urlCheck" : false
63 |         },
64 |         "usingComponents" : true
65 |     },
66 |     "mp-alipay" : {
67 |         "usingComponents" : true
68 |     },
69 |     "mp-baidu" : {
70 |         "usingComponents" : true
71 |     },
72 |     "mp-toutiao" : {
73 |         "usingComponents" : true
74 |     },
75 |     "uniStatistics": {  
76 |         "enable": false
77 |     }
78 | }
79 | 


--------------------------------------------------------------------------------
/pages.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"pages": [{
  3 | 		"path": "pages/index/index",
  4 | 		"style": {
  5 | 			"navigationBarTitleText": "首页",
  6 | 			"enablePullDownRefresh": false
  7 | 		}
  8 | 	}, {
  9 | 		"path": "pages/find/find",
 10 | 		"style": {
 11 | 			"navigationBarTitleText": "发现",
 12 | 			"enablePullDownRefresh": true
 13 | 		}
 14 | 
 15 | 	}, {
 16 | 		"path": "pages/cart/cart",
 17 | 		"style": {
 18 | 			"navigationBarTitleText": "订单",
 19 | 			"enablePullDownRefresh": false
 20 | 		}
 21 | 
 22 | 	}, {
 23 | 		"path": "pages/mine/mine",
 24 | 		"style": {
 25 | 			"navigationBarTitleText": "我的",
 26 | 			"enablePullDownRefresh": false,
 27 | 			"navigationStyle":"custom"
 28 | 		}
 29 | 	}    ,{
 30 |             "path" : "pages/mine/login",
 31 |             "style" :                                                                                    
 32 |             {
 33 |                 "navigationBarTitleText": "会员登录",
 34 |                 "enablePullDownRefresh": false,
 35 | 				"navigationStyle":"custom"
 36 |             }
 37 |             
 38 |         }
 39 |         ,{
 40 |             "path" : "pages/mine/join",
 41 |             "style" :                                                                                    
 42 |             {
 43 |                 "navigationBarTitleText": "如程会员",
 44 |                 "enablePullDownRefresh": false,
 45 | 				"navigationBarBackgroundColor":"#FFFFFF",
 46 | 				"navigationBarTextStyle":"black"
 47 |             }
 48 |             
 49 |         },{
 50 | 			"path": "pages/mine/home",
 51 | 			"style": {
 52 | 				"navigationBarTitleText": "优惠券",
 53 | 				"navigationBarBackgroundColor":"#FFFFFF",
 54 | 				"navigationBarTextStyle":"black"
 55 | 			}
 56 | 		},
 57 | 		{
 58 | 			"path": "pages/mine/center",
 59 | 			"style": {
 60 | 				"navigationBarTitleText": "兑换中心",
 61 | 				"navigationBarBackgroundColor":"#FFFFFF",
 62 | 				"navigationBarTextStyle":"black"
 63 | 			}
 64 | 		}
 65 |         ,{
 66 |             "path" : "pages/mine/service",
 67 |             "style" :                                                                                    
 68 |             {
 69 |                 "navigationBarTitleText": "选择客服",
 70 |                 "enablePullDownRefresh": false,
 71 | 				"navigationBarBackgroundColor":"#FFFFFF",
 72 | 				"navigationBarTextStyle":"black"
 73 |             }
 74 |             
 75 |         }
 76 |         ,{
 77 |             "path" : "pages/mine/qusetion",
 78 |             "style" :                                                                                    
 79 |             {
 80 |                 "navigationBarTitleText": "常见问题",
 81 |                 "enablePullDownRefresh": false,
 82 | 				"navigationBarBackgroundColor":"#FFFFFF",
 83 | 				"navigationBarTextStyle":"black"
 84 |             }
 85 |             
 86 |         }
 87 |         ,{
 88 |             "path" : "pages/mine/hands",
 89 |             "style" :                                                                                    
 90 |             {
 91 |                 "navigationBarTitleText": "酒店合作",
 92 |                 "enablePullDownRefresh": false,
 93 | 				"navigationBarBackgroundColor":"#FFFFFF",
 94 | 				"navigationBarTextStyle":"black"
 95 |             }
 96 |             
 97 |         }
 98 |         ,{
 99 |             "path" : "pages/mine/notice",
100 |             "style" :                                                                                    
101 |             {
102 |                 "navigationBarTitleText": "程客须知",
103 |                 "enablePullDownRefresh": false,
104 | 				"navigationBarBackgroundColor":"#FFFFFF",
105 | 				"navigationBarTextStyle":"black"
106 |             }
107 |             
108 |         }
109 |     ],
110 | 	"globalStyle": {
111 | 		"navigationBarTextStyle": "white",
112 | 		"navigationBarTitleText": "首页",
113 | 		"navigationBarBackgroundColor": "#1989fa",
114 | 		"backgroundColor": "#F8F8F8" 
115 | 	},
116 | 	"tabBar": {
117 | 		"list": [{
118 | 				"pagePath": "pages/index/index",
119 | 				"text": "首页",
120 | 				"iconPath": "static/icons/首页.png",
121 | 				"selectedIconPath": "static/icons/首页 (2).png"
122 | 			},
123 | 			{
124 | 				"pagePath": "pages/find/find",
125 | 				"text": "发现",
126 | 				"iconPath": "static/icons/发现.png",
127 | 				"selectedIconPath": "static/icons/发现 (1).png"
128 | 			},
129 | 			{
130 | 				"pagePath": "pages/cart/cart",
131 | 				"text": "订单",
132 | 				"iconPath": "static/icons/订单.png",
133 | 				"selectedIconPath": "static/icons/订单 (1).png"
134 | 			},
135 | 			{
136 | 				"pagePath": "pages/mine/mine",
137 | 				"text": "我的",
138 | 				"iconPath": "static/icons/我的.png",
139 | 				"selectedIconPath": "static/icons/我的 (1).png"
140 | 			}
141 | 		]
142 | 	}
143 | }
144 | 


--------------------------------------------------------------------------------
/pages/cart/cart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view>
 3 | 		这是订单页面
 4 | 	</view>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	export default {
 9 | 		data() {
10 | 			return {
11 | 				
12 | 			}
13 | 		},
14 | 		methods: {
15 | 			
16 | 		}
17 | 	}
18 | </script>
19 | 
20 | <style>
21 | 
22 | </style>
23 | 


--------------------------------------------------------------------------------
/pages/find/find.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view>
 3 | 		这是发现页面
 4 | 	</view>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	export default {
 9 | 		data() {
10 | 			return {
11 | 				
12 | 			}
13 | 		},
14 | 		methods: {
15 | 			
16 | 		}
17 | 	}
18 | </script>
19 | 
20 | <style>
21 | 
22 | </style>
23 | 


--------------------------------------------------------------------------------
/pages/index/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view>
 3 | 		这是首页哈
 4 | 	</view>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	export default {
 9 | 		data() {
10 | 			return {
11 | 				
12 | 			}
13 | 		},
14 | 		onLoad() {
15 | 
16 | 		},
17 | 		methods: {
18 | 
19 | 		}
20 | 	}
21 | </script>
22 | 
23 | <style>
24 | 	
25 | </style>
26 | 


--------------------------------------------------------------------------------
/pages/mine/center.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="box">
 3 | 		<form @submit="formSubmit">
 4 | 			<view class="import">请输入兑换码</view>
 5 | 			<input class="conversion" name="input" focus />
 6 | 			<button type="default" class="btn" form-type="submit">立即兑换</button>
 7 | 			<view class="text">
 8 | 				<p>兑换说明</p>
 9 | 				<p>兑换中心仅对会员资格以及会员升级兑换，如需兑换优惠券请到个人中心内进行兑换</p>
10 | 				<p>会员资格兑换及会员升级兑换规则请仔细阅读<span style="color: #fda77b;">《如程会员协议》</span >及
11 | 				<span style="color: #fda77b;">《如程任享会员升级规则》</span>。一经兑换，则视为会员同意前述协议及规则，相应会员资格即生效</p>
12 | 			</view>
13 | 		</form>
14 | 	</view>
15 | </template>
16 | 
17 | <script>
18 | 	export default {
19 | 		data() {
20 | 			return {
21 | 				 
22 | 			}
23 | 		},
24 | 		methods: {
25 | 		formSubmit(e){
26 | 			console.log(e.detail.value.input)
27 | 			 var formdata = e.detail.value.input
28 | 			uni.showModal({
29 | 			    content: '您的兑换码是' + formdata,
30 | 				showCancel: false
31 | 			});
32 | 		}
33 | 		}
34 | 	}
35 | </script>
36 | 
37 | <style scoped lang="less">
38 | 	.box {
39 | 		width: 600rpx;
40 | 		height: 800rpx;
41 | 		margin: 180rpx 75rpx;
42 | 		// background-color: skyblue;
43 | 
44 | 		.import,.text {
45 | 			font-size: 30rpx;
46 | 			color: rgb(79, 79, 79);
47 | 		}
48 | 
49 | 		.conversion {
50 | 			box-sizing: border-box;
51 | 			width: 100%;
52 | 			border: 1px solid #aaa;
53 | 			margin-top: 30rpx;
54 | 			margin-bottom: 62rpx;
55 | 			height: 103rpx;
56 | 		}
57 | 
58 | 		.btn {
59 | 			background-color: #fc6315;
60 | 			color: #fff;
61 | 		}
62 | 		.text{
63 | 			margin-top: 56rpx;
64 | 			p{
65 | 				margin-top: 30rpx;
66 | 			}
67 | 		}
68 | 		
69 | 	}
70 | </style>
71 | 


--------------------------------------------------------------------------------
/pages/mine/hands.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view>
 3 | 		
 4 | 	</view>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 | </script>
10 | 
11 | <style>
12 | 
13 | </style>
14 | 


--------------------------------------------------------------------------------
/pages/mine/home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="coupon_box">
 3 | 		<view class="other_type">
 4 | 			<view class="text"><span>全面型优惠券</span></view>
 5 | 		</view>
 6 | 		<coupon v-for="(item, index) in coupon[0].list" :key="index" v-bind:item="item" theme="#ff0000"></coupon>
 7 | 		<view class="other_type">
 8 | 			<view class="text"><span>简洁型优惠券</span></view>
 9 | 		</view>
10 | 		<coupon v-for="(item, index) in coupon[0].list" :key="index" v-bind:item="item" types="carts" theme="#ff6c00" color="#ffffff" solid="#ff6c00"></coupon>
11 | 	</view>
12 | </template>
13 | 
14 | <script>
15 | 	import coupon from '@/components/coolc-coupon/coolc-coupon';
16 | 	export default {
17 | 		components: {
18 | 			coupon
19 | 		},
20 | 		data(){
21 | 			return {
22 | 				coupon:[{
23 | 					list: [{
24 | 						url: "/pages/brand/index/id/1",
25 | 						money: "150",
26 | 						title: "满2000减150元",
27 | 						ticket: "YMC_5c929fbf47235",
28 | 						seller_name: "艺栈特色度假酒店",
29 | 						end_time: "2020-12-23 00:00:20",
30 | 						state: "1"
31 | 					},
32 | 					{
33 | 						url: "/pages/brand/index/id/1",
34 | 						money: "50",
35 | 						title: "满1000减50元",
36 | 						ticket: "YMC_5c929fbf47235",
37 | 						seller_name: "金林逸舍度假酒店",
38 | 						end_time: "2020-12-20 00:00:00",
39 | 						state: "1"
40 | 					}]
41 | 				}]
42 | 			}
43 | 		},
44 | 		onLoad() {
45 | 
46 | 		},
47 | 		methods:{
48 | 
49 | 		}
50 | 	}
51 | </script>
52 | 
53 | <style lang='scss'>
54 | page { background:$bgcolor_white; }
55 | .coupon_box {
56 | 	width:100%; height:auto; display:table; padding:6upx 26upx 26upx 26upx;
57 | }
58 | 
59 | .other_type {
60 | 	width:100%; height:90upx; padding-top:50upx;
61 | 	
62 | 	.text { width:91%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; }
63 | 	.text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:$font-base; }
64 | }
65 | 
66 | </style>


--------------------------------------------------------------------------------
/pages/mine/join.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view>
 3 | 		<view>
 4 | 			<image src="https://image.ructrip.com/ructrip/1597395391331/1280元如程详情页更新-官方.jpg" mode="widthFix"></image>
 5 | 			<image src="https://image.ructrip.com/ructrip/1585670328318/1280元如程详情页更新-官方_03.jpg" mode="widthFix"></image>
 6 | 			<image src="https://image.ructrip.com/ructrip/1585670352795/1280元如程详情页更新-官方_04.jpg" mode="widthFix"></image>
 7 | 			<image src="https://image.ructrip.com/ructrip/1593312867801/如程详情页更新-官方_05.jpg" mode="widthFix"></image>
 8 | 			<image src="https://image.ructrip.com/ructrip/1585670361565/1280元如程详情页更新-官方_06.jpg" mode="widthFix"></image>
 9 | 			<image src="https://image.ructrip.com/ructrip/1585670364380/1280元如程详情页更新-官方_07.jpg" mode="widthFix"></image>
10 | 			<image src="https://image.ructrip.com/ructrip/1585670367646/1280元如程详情页更新-官方_08.jpg" mode="widthFix"></image>
11 | 			<image src="https://image.ructrip.com/ructrip/1585670370975/1280元如程详情页更新-官方_09.jpg" mode="widthFix"></image>
12 | 			<image src="https://image.ructrip.com/ructrip/1585670386417/1280%E5%85%83%E5%A6%82%E7%A8%8B%E8%AF%A6%E6%83%85%E9%A1%B5%E6%9B%B4%E6%96%B0-%E5%AE%98%E6%96%B9_10.jpg"
13 | 			 mode="widthFix"></image>
14 | 			<image src="https://image.ructrip.com/ructrip/1585670408037/1280元如程详情页更新-官方_15.jpg" mode="widthFix"></image>
15 | 			<image src="https://image.ructrip.com/ructrip/1585670432771/1280元如程详情页更新-官方_17.jpg" mode="widthFix"></image>
16 | 			<image src="https://image.ructrip.com/ructrip/1585670437598/1280元如程详情页更新-官方_20.jpg" mode="widthFix"></image>
17 | 			<view class="bottom">
18 | 				<button class="left" @click="tan">加入会员</button>
19 | 				<button class="right" @click="tan">为亲友开通</button>
20 | 			</view>
21 | 		</view>
22 | 	</view>
23 | </template>
24 | 
25 | <script>
26 | 	
27 | 
28 | 	export default {
29 | 		data() {
30 | 			return {
31 | 				}
32 | 		},
33 | 		
34 | 		methods: {
35 | 			tan(){
36 | 				uni.showToast({
37 | 				    title: '开通成功',
38 | 				    duration: 2000
39 | 				});
40 | 			}
41 | 		}
42 | 
43 | 	}
44 | </script>
45 | 
46 | <style scoped lang="less">
47 | 	image {
48 | 		width: 100%;
49 | 	}
50 | 	.bottom{
51 | 		display: flex;
52 | 		position: fixed;
53 | 		bottom: 0;
54 | 		width: 100%;
55 | 		background-color: #FFFFFF;
56 | 		box-shadow: 0 2px;
57 | 		padding: 16rpx 0;
58 | 		button{
59 | 			width: 325rpx;
60 | 			height: 90rpx;
61 | 			background-color: #fc6315;
62 | 			font-size: 36rpx;
63 | 			font-weight: 700;
64 | 			color: #FFFFFF;
65 | 			margin-left: auto;
66 | 			margin-right: auto;
67 | 		}
68 | 		}
69 | </style>
70 | 


--------------------------------------------------------------------------------
/pages/mine/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view>
 3 | 		<button type="primary" open-type="getUserInfo" @getuserinfo="handleGetUserInfo">登录</button>
 4 | 
 5 | 	</view>
 6 | 
 7 | </template>
 8 | 
 9 | <script>
10 | 	export default {
11 | 		data() {
12 | 			return {
13 | 
14 | 			}
15 | 		},
16 | 		methods: {
17 | 			handleGetUserInfo(e){
18 | 				uni.reLaunch({
19 | 					url:'/pages/mine/mine?userinfo='+event.detail.userinfo
20 | 				})
21 | 			}
22 | 		}
23 | 	}
24 | </script>
25 | 
26 | <style> 
27 | 
28 | </style>
29 | 


--------------------------------------------------------------------------------
/pages/mine/notice.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view>
 3 | 		<view @click="getNewsDetail">
 4 | 			<!-- #ifdef MP-WEIXIN -->
 5 | 			<rich-text :nodes="content"></rich-text>
 6 | 			<!-- #endif -->
 7 | 			<!-- #ifdef MP-ALIPAY -->
 8 | 			<rich-text :nodes="htmlNodes"></rich-text>
 9 | 			<!-- #endif -->
10 | 			<!-- #ifdef H5 -->
11 | 			<rich-text :nodes="content"></rich-text>
12 | 			<!-- #endif -->
13 | 		</view>
14 | 	</view>
15 | </template>
16 | 
17 | <script>
18 | 	import { myRequestPost } from "@/utils/zgrequest.js"; 
19 | 	import parse from '@/utils/html.js'
20 | 	export default {
21 | 		data() {
22 | 			return {
23 | 				content:"" ,
24 | 				htmlNodes:[]
25 | 			}
26 | 		},
27 | 		onLoad() {
28 | 			this.getNewsDetail( )
29 | 		},
30 | 		methods: {
31 | 			async getNewsDetail(){
32 | 				const res = await myRequestPost('/sojourn.equity.custom.web.content',
33 | 				{
34 | 				"contentNo":"10000001",
35 | 				"client":"applets",
36 | 				"mobileBrand":"microsoft",
37 | 				"mobileModel":"microsoft",
38 | 				"osVersion":"Windows 10 x64",
39 | 				"timestamp":1607925096000,
40 | 				"sign":"8A8410C2566691E44C4007496946B829",
41 | 				})
42 | 			this.content = res.respData.content
43 | 			//#ifdef MP-ALIPAY
44 | 			this.htmlNodes = parse(this.content)
45 | 			// #endif
46 | 			}
47 | 		} 
48 | 	}
49 | </script>
50 | 
51 | <style>
52 | 
53 | </style>
54 | 


--------------------------------------------------------------------------------
/pages/mine/qusetion.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view>
 3 | 		<collapse v-model="activeNames" accordion>
 4 | 			<collapse-item title="1.会员的有效期是多久？" name="1">
 5 | 				如程任享电子会员有效期自购当日起至1年后止；会员有效期期满后，会员有权益保留会员资格。续费金额以平台当时公示金额为准。
 6 | 			</collapse-item>
 7 | 			<collapse-item title="2.我可以同时预定好几个房间吗？" name="2">
 8 | 				会员使用免费入住权益时，每次最高可预订1个免费房间，连续2晚。当您完成本次订单退房后可进行下一次预定。
 9 | 			</collapse-item>
10 | 			<collapse-item title="3.会员有使用次数/房型限制吗？" name="3">
11 | 				会员有效期内，在如程所有合作酒店，会员享有不限次数、不限房型的免费入住权益。
12 | 			</collapse-item>
13 | 			<collapse-item title="4.会员可以和家人朋友一起使用吗？" name="4">
14 | 				在您本人入住的前提下，您可与家人朋友居住在一个房间。房间入住人数以酒店规则为准。
15 | 			</collapse-item>
16 | 			<collapse-item title="5.会员可以转让给朋友吗？" name="5">
17 | 				为了保证您的会员专属权益，您的如程任享仅供您本人使用。
18 | 			</collapse-item>
19 | 			<collapse-item title="6.入住后可以立刻下单预定其他行程吗？" name="6">
20 | 				不可以，会员在入住并办理完成退房手续后，可预订下次行程
21 | 			</collapse-item>
22 | 			<collapse-item title="7.保证金的收取标准是什么？" name="7">
23 | 				订房是需要付房费作为保证金，保证金金额按该房间市场价格（标价）计算，具体以实际支付金额为准。在入住完成并退房办理完成后，该笔保证金将予以退还。
24 | 			</collapse-item>
25 | 			<collapse-item title="8.可以开发票吗？" name="8">
26 | 				可以的。请您致电如程会员客服中心（400-872-9988），向客服申请开票，并提供相关开票信息：个人：邮箱、会员真实姓名；公司：邮箱、购买手机号、会员真实姓名、公司名称、公司税号、对公账号、开户银行、联系电话及地址
27 | 			</collapse-item>
28 | 			<collapse-item title="9.保证金可以退回到哪里？多久可以到账？" name="8">
29 | 				保证金将在退房完成后一个工作日内退还至会员付款的银行或其他收款账户中
30 | 			</collapse-item>
31 | 		</collapse>
32 | 		
33 | 	</view>
34 | 	
35 | </template>
36 | 
37 | <script>
38 | 	import collapse from '@/components/uni-ui/uni-collapse/uni-collapse';
39 | 	import collapseItem from '@/components/uni-ui/uni-collapse-item/uni-collapse-item';
40 | 
41 | 	export default {
42 | 		data() {
43 | 			return {
44 | 				activeNames: ['1'],
45 | 			}
46 | 		},
47 | 		components: {
48 | 			collapse,
49 | 			collapseItem
50 | 		},
51 | 		methods: {
52 | 
53 | 		}
54 | 	}
55 | </script>
56 | 
57 | <style lang="less">
58 | 	
59 | </style>
60 | 


--------------------------------------------------------------------------------
/pages/mine/service.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<view class="bg1">
 3 | 		<view class="bg">
 4 | 			<button type="default" class="qs" @click="goQs">
 5 | 				<text class="fl1 icon-wenti iconfont" style="color: #fd8d54;"></text>
 6 | 				<view class="fl">常见问题</view>
 7 | 				<text class="icon icon-zuojiantou iconfont" style="color: #bcbcbc;"></text>
 8 | 			</button>
 9 | 			<button type="default" @click="no">
10 | 				<text class="fl1 icon-huida iconfont" style="color: #fd8d54;"></text>
11 | 				<view class="fl">在线客服<span>（服务时间：10:00~24:00）</span></view>
12 | 				<text class="icon-zuojiantou iconfont icon" style="color: #bcbcbc;"></text>
13 | 			</button>
14 | 		</view>
15 | 	</view>
16 | 
17 | </template>
18 | 
19 | <script>
20 | 	export default {
21 | 		data() {
22 | 			return {
23 | 
24 | 			}
25 | 		},
26 | 		methods: {
27 | 			no() {
28 | 				uni.showToast({
29 | 					title: '此功能暂未开通',
30 | 					duration: 1000,
31 | 					icon:'none'
32 | 				});
33 | 			},
34 | 			goQs(){
35 | 				uni.navigateTo({
36 | 					url: `/pages/mine/qusetion`,
37 | 				})
38 | 			}
39 | 		}
40 | 	}
41 | </script>
42 | 
43 | <style  lang="less">
44 | 	page {
45 | 		height: 100%;
46 | 		background-color: #f8f8f8;
47 | 	}
48 | 
49 | 	.bg {
50 | 		background-color: #f8f8f8;
51 | 		margin: 80rpx 40rpx;
52 | 		
53 | 		
54 | 		button{
55 | 			display: flex;
56 | 			background-color:#FFFFFF;
57 | 			font-size:  30rpx;
58 | 			font-weight: 700;
59 | 			height:111rpx;
60 | 			line-height: 111rpx;
61 | 			.fl{
62 | 				text-align: left;
63 | 				padding-left: 41rpx;
64 | 				width: 520rpx;
65 | 			}
66 | 			.fl1{
67 | 				flex: 1;
68 | 			}
69 | 			span{
70 | 				font-size:25rpx;
71 | 				font-weight: 400;
72 | 				color: #ccc;
73 | 			}
74 | 			.icon{
75 | 				flex: 1;
76 | 				font-size: 39rpx;
77 | 				
78 | 			}
79 | 		}
80 | 		
81 | 		.qs {
82 | 			margin-bottom: 30rpx;
83 | 			
84 | 		}
85 | 		
86 | 	}
87 | </style>
88 | 


--------------------------------------------------------------------------------
/static/arc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/static/arc.png


--------------------------------------------------------------------------------
/static/icons/发现 (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/static/icons/发现 (1).png


--------------------------------------------------------------------------------
/static/icons/发现.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/static/icons/发现.png


--------------------------------------------------------------------------------
/static/icons/我的 (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/static/icons/我的 (1).png


--------------------------------------------------------------------------------
/static/icons/我的.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/static/icons/我的.png


--------------------------------------------------------------------------------
/static/icons/订单 (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/static/icons/订单 (1).png


--------------------------------------------------------------------------------
/static/icons/订单.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/static/icons/订单.png


--------------------------------------------------------------------------------
/static/icons/首页 (2).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/static/icons/首页 (2).png


--------------------------------------------------------------------------------
/static/icons/首页.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/static/icons/首页.png


--------------------------------------------------------------------------------
/static/missing-face.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/static/missing-face.png


--------------------------------------------------------------------------------
/static/yticon.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTTE/RCApplication/9ba4f852f9d5d51cde38fe099894a4cde697e9f6/static/yticon.ttf


--------------------------------------------------------------------------------
/uni.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 这里是uni-app内置的常用样式变量
  3 |  *
  4 |  * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
  5 |  * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
  6 |  *
  7 |  */
  8 | 
  9 | /**
 10 |  * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 11 |  *
 12 |  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 13 |  */
 14 | 
 15 | /* 颜色变量 */
 16 | 
 17 | /* 行为相关颜色 */
 18 | $uni-color-primary: #007aff;
 19 | $uni-color-success: #4cd964;
 20 | $uni-color-warning: #f0ad4e;
 21 | $uni-color-error: #dd524d;
 22 | 
 23 | /* 文字基本颜色 */
 24 | $uni-text-color:#333;//基本色
 25 | $uni-text-color-inverse:#fff;//反色
 26 | $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
 27 | $uni-text-color-placeholder: #808080;
 28 | $uni-text-color-disable:#c0c0c0;
 29 | 
 30 | /* 背景颜色 */
 31 | $uni-bg-color:#ffffff;
 32 | $uni-bg-color-grey:#f8f8f8;
 33 | $uni-bg-color-hover:#f1f1f1;//点击状态颜色
 34 | $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
 35 | 
 36 | /* 边框颜色 */
 37 | $uni-border-color:#c8c7cc;
 38 | 
 39 | /* 尺寸变量 */
 40 | 
 41 | /* 文字尺寸 */
 42 | $uni-font-size-sm:24rpx;
 43 | $uni-font-size-base:28rpx;
 44 | $uni-font-size-lg:32rpx;
 45 | 
 46 | /* 图片尺寸 */
 47 | $uni-img-size-sm:40rpx;
 48 | $uni-img-size-base:52rpx;
 49 | $uni-img-size-lg:80rpx;
 50 | 
 51 | /* Border Radius */
 52 | $uni-border-radius-sm: 4rpx;
 53 | $uni-border-radius-base: 6rpx;
 54 | $uni-border-radius-lg: 12rpx;
 55 | $uni-border-radius-circle: 50%;
 56 | 
 57 | /* 水平间距 */
 58 | $uni-spacing-row-sm: 10px;
 59 | $uni-spacing-row-base: 20rpx;
 60 | $uni-spacing-row-lg: 30rpx;
 61 | 
 62 | /* 垂直间距 */
 63 | $uni-spacing-col-sm: 8rpx;
 64 | $uni-spacing-col-base: 16rpx;
 65 | $uni-spacing-col-lg: 24rpx;
 66 | 
 67 | /* 透明度 */
 68 | $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
 69 | 
 70 | /* 文章场景相关 */
 71 | $uni-color-title: #2C405A; // 文章标题颜色
 72 | $uni-font-size-title:40rpx;
 73 | $uni-color-subtitle: #555555; // 二级标题颜色
 74 | $uni-font-size-subtitle:36rpx;
 75 | $uni-color-paragraph: #3F536E; // 文章段落颜色
 76 | $uni-font-size-paragraph:30rpx;
 77 | 
 78 | 
 79 | /* 页面左右间距 */
 80 | $page-row-spacing: 30rpx;
 81 | $page-color-base: #f8f8f8;
 82 | $page-color-light: #f8f6fc;
 83 | $base-color: #fa436a;
 84 | 
 85 | /* 文字尺寸 */
 86 | $font-sm: 22rpx;
 87 | $font-base: 28rpx;
 88 | $font-lg: 32rpx;
 89 | /*文字颜色*/
 90 | $font-color-dark: #303133;
 91 | $font-color-base: #606266;
 92 | $font-color-light: #909399;
 93 | $font-color-disabled: #C0C4CC;
 94 | $font-color-spec: #4399fc;
 95 | /* 边框颜色 */
 96 | $border-color-dark: #DCDFE6;
 97 | $border-color-base: #E4E7ED;
 98 | /* 页面左右间距 */
 99 | $page-row-spacing:30upx;
100 | $page-color-base:#f8f8f8;
101 | $page-color-light:#f8f6fc;
102 | $page-p-l-t-r-30:30upx 30upx 0 30upx;
103 | $page-p-20:30upx;
104 | 
105 | /* 文字尺寸 */
106 | $font-sm:24upx;
107 | $font-base:28upx;
108 | $font-lg:32upx;
109 | 
110 | /*文字颜色*/
111 | $font-color-dark:#303133;
112 | $font-color-base:#606266;
113 | $font-color-light:#909399;
114 | $font-color-disabled:#C0C4CC;
115 | $font-color-spec:#d6003c;
116 | $font-color-gray:#999999;
117 | $font-color-red:#dd0037;
118 | $font-color-ccc:#cccccc;
119 | $font-color-999:#999999;
120 | $font-color-666:#666666;
121 | $font-color-333:#333333;
122 | $font-color-000:#000000;
123 | 
124 | /* 边框颜色 */
125 | $border-color-dark:#DCDFE6;
126 | $border-color-base:#E4E7ED;
127 | $border-color-light:#EBEEF5;
128 | 
129 | /* 背景颜色 */
130 | $image-bg-color:#eeeeee;
131 | $bgcolor_white:#ffffff;
132 | $all_bgcolor:#f4f4f4;
133 | $vui_bgcolor:#8c0027;
134 | 
135 | /* 行为相关颜色 */
136 | $color-primary:#fa436a;
137 | $color-success:#4cd964;
138 | $color-warning:#f0ad4e;
139 | $color-error:#dd524d;
140 | $border-color-light: #EBEEF5;
141 | /* 图片加载中颜色 */
142 | $image-bg-color: #eee;
143 | /* 页面左右间距 */
144 | $page-row-spacing:30upx;
145 | $page-color-base:#f8f8f8;
146 | $page-color-light:#f8f6fc;
147 | $page-p-l-t-r-30:30upx 30upx 0 30upx;
148 | $page-p-20:30upx;
149 | 
150 | /* 文字尺寸 */
151 | $font-sm:24upx;
152 | $font-base:28upx;
153 | $font-lg:32upx;
154 | 
155 | /*文字颜色*/
156 | $font-color-dark:#303133;
157 | $font-color-base:#606266;
158 | $font-color-light:#909399;
159 | $font-color-disabled:#C0C4CC;
160 | $font-color-spec:#d6003c;
161 | $font-color-gray:#999999;
162 | $font-color-red:#dd0037;
163 | $font-color-ccc:#cccccc;
164 | $font-color-999:#999999;
165 | $font-color-666:#666666;
166 | $font-color-333:#333333;
167 | $font-color-000:#000000;
168 | 
169 | /* 边框颜色 */
170 | $border-color-dark:#DCDFE6;
171 | $border-color-base:#E4E7ED;
172 | $border-color-light:#EBEEF5;
173 | 
174 | /* 背景颜色 */
175 | $image-bg-color:#eeeeee;
176 | $bgcolor_white:#ffffff;
177 | $all_bgcolor:#f4f4f4;
178 | $vui_bgcolor:#8c0027;
179 | 
180 | /* 行为相关颜色 */
181 | $color-primary:#fa436a;
182 | $color-success:#4cd964;
183 | $color-warning:#f0ad4e;
184 | $color-error:#dd524d;
185 | /* 行为相关颜色 */
186 | $uni-color-primary:#fa436a;
187 | $uni-color-success: #4cd964;
188 | $uni-color-warning: #f0ad4e;
189 | $uni-color-error: #dd524d;
190 | 
191 | 


--------------------------------------------------------------------------------
/utils/zgrequest.js:
--------------------------------------------------------------------------------
 1 | const baseUrl = "https://capi.ructrip.com"
 2 | 
 3 | export function myRequestGet(url, data) {
 4 | 	return new Promise((resolve, reject) => {
 5 | 		uni.request({
 6 | 			url: baseUrl + url,
 7 | 			method: "GET",
 8 | 			data: data,
 9 | 			success: function(res) {
10 | 				console.log('GET成功', res),
11 | 				resolve(res.data)
12 | 			},
13 | 			fail: function(err) {
14 | 				console.log('GET失败'),
15 | 				reject(err)
16 | 			}
17 | 		})
18 | 	})
19 | }
20 | 
21 | 
22 | export function myRequestPost(url, data) {
23 | 	return new Promise((resolve, reject) => {
24 | 		uni.request({
25 | 			url: baseUrl + url,
26 | 			header: {
27 | 				'Content-Type': 'application/json'
28 | 			},
29 | 			method: "POST",
30 | 			data: data,
31 | 			success: function(res) {
32 | 				console.log('POST成功', res),
33 | 					resolve(res.data)
34 | 			},
35 | 			fail: function(err) {
36 | 				console.log('POST失败'),
37 | 					reject(err)
38 | 			}
39 | 		})
40 | 	})
41 | }
42 | 


--------------------------------------------------------------------------------