Gao xiaosong
4 years ago
12 changed files with 716 additions and 1601 deletions
@ -0,0 +1,11 @@ |
|||||||
|
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/ |
||||||
|
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数 |
||||||
|
"version": "0.0", |
||||||
|
"configurations": [{ |
||||||
|
"type": "uniCloud", |
||||||
|
"default": { |
||||||
|
"launchtype": "remote" |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -1,517 +1,495 @@ |
|||||||
<template> |
<template> |
||||||
<button |
<button class="tui-btn" :class="[plain ? 'tui-' + type + '-outline' : 'tui-btn-' + (type || 'primary'), getDisabledClass(disabled, type, plain), getShapeClass(shape, plain), getShadowClass(type, shadow, plain), bold ? 'tui-text-bold' : '', link ? 'tui-btn__link' : '']" :hover-class="getHoverClass(disabled, type, plain)" :style="{ width: width, height: height, lineHeight: height, fontSize: size + 'rpx', margin: margin }" :loading="loading" :form-type="formType" :open-type="openType" @getuserinfo="bindgetuserinfo" @getphonenumber="bindgetphonenumber" @contact="bindcontact" @error="binderror" :disabled="disabled" @tap="handleClick"> |
||||||
class="tui-btn" |
<slot></slot> |
||||||
:class="[ |
</button> |
||||||
plain ? 'tui-' + type + '-outline' : 'tui-btn-' + (type || 'primary'), |
|
||||||
getDisabledClass(disabled, type, plain), |
|
||||||
getShapeClass(shape, plain), |
|
||||||
getShadowClass(type, shadow, plain), |
|
||||||
bold ? 'tui-text-bold' : '', |
|
||||||
link ? 'tui-btn__link' : '' |
|
||||||
]" |
|
||||||
:hover-class="getHoverClass(disabled, type, plain)" |
|
||||||
:style="{ width: width, height: height, lineHeight: height, fontSize: size + 'rpx', margin: margin }" |
|
||||||
:loading="loading" |
|
||||||
:form-type="formType" |
|
||||||
:open-type="openType" |
|
||||||
@getuserinfo="bindgetuserinfo" |
|
||||||
@getphonenumber="bindgetphonenumber" |
|
||||||
@contact="bindcontact" |
|
||||||
@error="binderror" |
|
||||||
:disabled="disabled" |
|
||||||
@tap="handleClick" |
|
||||||
> |
|
||||||
<slot></slot> |
|
||||||
</button> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
export default { |
export default { |
||||||
name: 'tui-button', |
name: 'tui-button', |
||||||
behaviors: ['wx://form-field-button'], |
props: { |
||||||
props: { |
//样式类型 primary, white, danger, warning, green,blue, gray，black,brown,gray-primary,gray-danger,gray-warning,gray-green |
||||||
//样式类型 primary, white, danger, warning, green,blue, gray，black,brown,gray-primary,gray-danger,gray-warning,gray-green |
type: { |
||||||
type: { |
type: String, |
||||||
type: String, |
default: 'primary', |
||||||
default: 'primary' |
}, |
||||||
}, |
//是否加阴影 |
||||||
//是否加阴影 |
shadow: { |
||||||
shadow: { |
type: Boolean, |
||||||
type: Boolean, |
default: false, |
||||||
default: false |
}, |
||||||
}, |
// 宽度 rpx或 % |
||||||
// 宽度 rpx或 % |
width: { |
||||||
width: { |
type: String, |
||||||
type: String, |
default: '100%', |
||||||
default: '100%' |
}, |
||||||
}, |
//高度 rpx |
||||||
//高度 rpx |
height: { |
||||||
height: { |
type: String, |
||||||
type: String, |
default: '96rpx', |
||||||
default: '96rpx' |
}, |
||||||
}, |
//字体大小 rpx |
||||||
//字体大小 rpx |
size: { |
||||||
size: { |
type: Number, |
||||||
type: Number, |
default: 32, |
||||||
default: 32 |
}, |
||||||
}, |
bold: { |
||||||
bold: { |
type: Boolean, |
||||||
type: Boolean, |
default: false, |
||||||
default: false |
}, |
||||||
}, |
margin: { |
||||||
margin: { |
type: String, |
||||||
type: String, |
default: '0', |
||||||
default: '0' |
}, |
||||||
}, |
//形状 circle(圆角), square(默认方形)，rightAngle(平角) |
||||||
//形状 circle(圆角), square(默认方形)，rightAngle(平角) |
shape: { |
||||||
shape: { |
type: String, |
||||||
type: String, |
default: 'square', |
||||||
default: 'square' |
}, |
||||||
}, |
plain: { |
||||||
plain: { |
type: Boolean, |
||||||
type: Boolean, |
default: false, |
||||||
default: false |
}, |
||||||
}, |
//link样式，去掉边框，结合plain一起使用 |
||||||
//link样式，去掉边框，结合plain一起使用 |
link: { |
||||||
link: { |
type: Boolean, |
||||||
type: Boolean, |
default: false, |
||||||
default: false |
}, |
||||||
}, |
disabled: { |
||||||
disabled: { |
type: Boolean, |
||||||
type: Boolean, |
default: false, |
||||||
default: false |
}, |
||||||
}, |
//禁用后背景是否为灰色 （非空心button生效） |
||||||
//禁用后背景是否为灰色 （非空心button生效） |
disabledGray: { |
||||||
disabledGray: { |
type: Boolean, |
||||||
type: Boolean, |
default: false, |
||||||
default: false |
}, |
||||||
}, |
loading: { |
||||||
loading: { |
type: Boolean, |
||||||
type: Boolean, |
default: false, |
||||||
default: false |
}, |
||||||
}, |
formType: { |
||||||
formType: { |
type: String, |
||||||
type: String, |
default: '', |
||||||
default: '' |
}, |
||||||
}, |
openType: { |
||||||
openType: { |
type: String, |
||||||
type: String, |
default: '', |
||||||
default: '' |
}, |
||||||
}, |
index: { |
||||||
index: { |
type: [Number, String], |
||||||
type: [Number, String], |
default: 0, |
||||||
default: 0 |
}, |
||||||
}, |
//是否需要阻止重复点击【默认200ms】 |
||||||
//是否需要阻止重复点击【默认200ms】 |
preventClick: { |
||||||
preventClick: { |
type: Boolean, |
||||||
type: Boolean, |
default: false, |
||||||
default: false |
}, |
||||||
} |
}, |
||||||
}, |
data() { |
||||||
data() { |
return { |
||||||
return { |
time: 0, |
||||||
time: 0 |
} |
||||||
}; |
}, |
||||||
}, |
methods: { |
||||||
methods: { |
handleClick() { |
||||||
handleClick() { |
if (this.disabled) return |
||||||
if (this.disabled) return; |
if (this.preventClick) { |
||||||
if (this.preventClick) { |
if (new Date().getTime() - this.time <= 200) return |
||||||
if(new Date().getTime() - this.time <= 200) return; |
this.time = new Date().getTime() |
||||||
this.time = new Date().getTime(); |
setTimeout(() => { |
||||||
setTimeout(() => { |
this.time = 0 |
||||||
this.time = 0; |
}, 200) |
||||||
}, 200); |
} |
||||||
} |
this.$emit('click', { |
||||||
this.$emit('click', { |
index: Number(this.index), |
||||||
index: Number(this.index) |
}) |
||||||
}); |
}, |
||||||
}, |
bindgetuserinfo({ detail = {} } = {}) { |
||||||
bindgetuserinfo({ detail = {} } = {}) { |
this.$emit('getuserinfo', detail) |
||||||
this.$emit('getuserinfo', detail); |
}, |
||||||
}, |
bindcontact({ detail = {} } = {}) { |
||||||
bindcontact({ detail = {} } = {}) { |
this.$emit('contact', detail) |
||||||
this.$emit('contact', detail); |
}, |
||||||
}, |
bindgetphonenumber({ detail = {} } = {}) { |
||||||
bindgetphonenumber({ detail = {} } = {}) { |
this.$emit('getphonenumber', detail) |
||||||
this.$emit('getphonenumber', detail); |
}, |
||||||
}, |
binderror({ detail = {} } = {}) { |
||||||
binderror({ detail = {} } = {}) { |
this.$emit('error', detail) |
||||||
this.$emit('error', detail); |
}, |
||||||
}, |
getShadowClass: function(type, shadow, plain) { |
||||||
getShadowClass: function(type, shadow, plain) { |
let className = '' |
||||||
let className = ''; |
if (shadow && type != 'white' && !plain) { |
||||||
if (shadow && type != 'white' && !plain) { |
className = 'tui-shadow-' + type |
||||||
className = 'tui-shadow-' + type; |
} |
||||||
} |
return className |
||||||
return className; |
}, |
||||||
}, |
getDisabledClass: function(disabled, type, plain) { |
||||||
getDisabledClass: function(disabled, type, plain) { |
let className = '' |
||||||
let className = ''; |
if (disabled && type != 'white' && type.indexOf('-') == -1) { |
||||||
if (disabled && type != 'white' && type.indexOf('-') == -1) { |
let classVal = this.disabledGray ? 'tui-gray-disabled' : 'tui-dark-disabled' |
||||||
let classVal = this.disabledGray ? 'tui-gray-disabled' : 'tui-dark-disabled'; |
className = plain ? 'tui-dark-disabled-outline' : classVal |
||||||
className = plain ? 'tui-dark-disabled-outline' : classVal; |
} |
||||||
} |
return className |
||||||
return className; |
}, |
||||||
}, |
getShapeClass: function(shape, plain) { |
||||||
getShapeClass: function(shape, plain) { |
let className = '' |
||||||
let className = ''; |
if (shape == 'circle') { |
||||||
if (shape == 'circle') { |
className = plain ? 'tui-outline-fillet' : 'tui-fillet' |
||||||
className = plain ? 'tui-outline-fillet' : 'tui-fillet'; |
} else if (shape == 'rightAngle') { |
||||||
} else if (shape == 'rightAngle') { |
className = plain ? 'tui-outline-rightAngle' : 'tui-rightAngle' |
||||||
className = plain ? 'tui-outline-rightAngle' : 'tui-rightAngle'; |
} |
||||||
} |
return className |
||||||
return className; |
}, |
||||||
}, |
getHoverClass: function(disabled, type, plain) { |
||||||
getHoverClass: function(disabled, type, plain) { |
let className = '' |
||||||
let className = ''; |
if (!disabled) { |
||||||
if (!disabled) { |
className = plain ? 'tui-outline-hover' : 'tui-' + (type || 'primary') + '-hover' |
||||||
className = plain ? 'tui-outline-hover' : 'tui-' + (type || 'primary') + '-hover'; |
} |
||||||
} |
return className |
||||||
return className; |
}, |
||||||
} |
}, |
||||||
} |
} |
||||||
}; |
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped> |
<style scoped> |
||||||
.tui-btn-primary { |
.tui-btn-primary { |
||||||
background: #5677fc !important; |
background: #5677fc !important; |
||||||
color: #fff; |
color: #fff; |
||||||
} |
} |
||||||
|
|
||||||
.tui-shadow-primary { |
.tui-shadow-primary { |
||||||
box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2); |
box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2); |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-danger { |
.tui-btn-danger { |
||||||
background: #eb0909 !important; |
background: #eb0909 !important; |
||||||
color: #fff; |
color: #fff; |
||||||
} |
} |
||||||
|
|
||||||
.tui-shadow-danger { |
.tui-shadow-danger { |
||||||
box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2); |
box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2); |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-warning { |
.tui-btn-warning { |
||||||
background: #fc872d !important; |
background: #fc872d !important; |
||||||
color: #fff; |
color: #fff; |
||||||
} |
} |
||||||
|
|
||||||
.tui-shadow-warning { |
.tui-shadow-warning { |
||||||
box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2); |
box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2); |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-green { |
.tui-btn-green { |
||||||
background: #07c160 !important; |
background: #07c160 !important; |
||||||
color: #fff; |
color: #fff; |
||||||
} |
} |
||||||
|
|
||||||
.tui-shadow-green { |
.tui-shadow-green { |
||||||
box-shadow: 0 10rpx 14rpx 0 rgba(7, 193, 96, 0.2); |
box-shadow: 0 10rpx 14rpx 0 rgba(7, 193, 96, 0.2); |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-blue { |
.tui-btn-blue { |
||||||
background: #007aff !important; |
background: #007aff !important; |
||||||
color: #fff; |
color: #fff; |
||||||
} |
} |
||||||
|
|
||||||
.tui-shadow-blue { |
.tui-shadow-blue { |
||||||
box-shadow: 0 10rpx 14rpx 0 rgba(0, 122, 255, 0.2); |
box-shadow: 0 10rpx 14rpx 0 rgba(0, 122, 255, 0.2); |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-white { |
.tui-btn-white { |
||||||
background: #fff !important; |
background: #fff !important; |
||||||
color: #333 !important; |
color: #333 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-gray { |
.tui-btn-gray { |
||||||
background: #bfbfbf !important; |
background: #bfbfbf !important; |
||||||
color: #fff !important; |
color: #fff !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-black { |
.tui-btn-black { |
||||||
background: #333 !important; |
background: #333 !important; |
||||||
color: #fff !important; |
color: #fff !important; |
||||||
} |
} |
||||||
.tui-btn-brown{ |
.tui-btn-brown { |
||||||
background: #ac9157 !important; |
background: #ac9157 !important; |
||||||
color: #fff !important; |
color: #fff !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-gray-black { |
.tui-btn-gray-black { |
||||||
background: #f2f2f2 !important; |
background: #f2f2f2 !important; |
||||||
color: #333; |
color: #333; |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-gray-primary { |
.tui-btn-gray-primary { |
||||||
background: #f2f2f2 !important; |
background: #f2f2f2 !important; |
||||||
color: #5677fc !important; |
color: #5677fc !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-gray-primary-hover { |
.tui-gray-primary-hover { |
||||||
background: #d9d9d9 !important; |
background: #d9d9d9 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-gray-green { |
.tui-btn-gray-green { |
||||||
background: #f2f2f2 !important; |
background: #f2f2f2 !important; |
||||||
color: #07c160 !important; |
color: #07c160 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-gray-green-hover { |
.tui-gray-green-hover { |
||||||
background: #d9d9d9 !important; |
background: #d9d9d9 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-gray-danger { |
.tui-btn-gray-danger { |
||||||
background: #f2f2f2 !important; |
background: #f2f2f2 !important; |
||||||
color: #eb0909 !important; |
color: #eb0909 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-gray-danger-hover { |
.tui-gray-danger-hover { |
||||||
background: #d9d9d9 !important; |
background: #d9d9d9 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-gray-warning { |
.tui-btn-gray-warning { |
||||||
background: #f2f2f2 !important; |
background: #f2f2f2 !important; |
||||||
color: #fc872d !important; |
color: #fc872d !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-gray-warning-hover { |
.tui-gray-warning-hover { |
||||||
background: #d9d9d9 !important; |
background: #d9d9d9 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-shadow-gray { |
.tui-shadow-gray { |
||||||
box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2); |
box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2); |
||||||
} |
} |
||||||
|
|
||||||
.tui-hover-gray { |
.tui-hover-gray { |
||||||
background: #f7f7f9 !important; |
background: #f7f7f9 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-black-hover { |
.tui-black-hover { |
||||||
background: #555 !important; |
background: #555 !important; |
||||||
color: #e5e5e5 !important; |
color: #e5e5e5 !important; |
||||||
} |
} |
||||||
.tui-brown-hover{ |
.tui-brown-hover { |
||||||
background: #A37F49 !important; |
background: #a37f49 !important; |
||||||
color: #e5e5e5 !important; |
color: #e5e5e5 !important; |
||||||
} |
} |
||||||
|
|
||||||
/* button start*/ |
/* button start*/ |
||||||
|
|
||||||
.tui-btn { |
.tui-btn { |
||||||
width: 100%; |
width: 100%; |
||||||
position: relative; |
position: relative; |
||||||
border: 0 !important; |
border: 0 !important; |
||||||
border-radius: 6rpx; |
border-radius: 6rpx; |
||||||
padding-left: 0; |
padding-left: 0; |
||||||
padding-right: 0; |
padding-right: 0; |
||||||
overflow: visible; |
overflow: visible; |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn::after { |
.tui-btn::after { |
||||||
content: ''; |
content: ''; |
||||||
position: absolute; |
position: absolute; |
||||||
width: 200%; |
width: 200%; |
||||||
height: 200%; |
height: 200%; |
||||||
transform-origin: 0 0; |
transform-origin: 0 0; |
||||||
transform: scale(0.5, 0.5) translateZ(0); |
transform: scale(0.5, 0.5) translateZ(0); |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
left: 0; |
left: 0; |
||||||
top: 0; |
top: 0; |
||||||
border-radius: 12rpx; |
border-radius: 12rpx; |
||||||
border: 0; |
border: 0; |
||||||
} |
} |
||||||
|
|
||||||
.tui-text-bold { |
.tui-text-bold { |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-white::after { |
.tui-btn-white::after { |
||||||
border: 1px solid #bfbfbf; |
border: 1px solid #bfbfbf; |
||||||
} |
} |
||||||
|
|
||||||
.tui-white-hover { |
.tui-white-hover { |
||||||
background: #e5e5e5 !important; |
background: #e5e5e5 !important; |
||||||
color: #2e2e2e !important; |
color: #2e2e2e !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-dark-disabled { |
.tui-dark-disabled { |
||||||
opacity: 0.6 !important; |
opacity: 0.6 !important; |
||||||
color: #fafbfc !important; |
color: #fafbfc !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-dark-disabled-outline { |
.tui-dark-disabled-outline { |
||||||
opacity: 0.5 !important; |
opacity: 0.5 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-gray-disabled { |
.tui-gray-disabled { |
||||||
background: #f3f3f3 !important; |
background: #f3f3f3 !important; |
||||||
color: #919191 !important; |
color: #919191 !important; |
||||||
box-shadow: none; |
box-shadow: none; |
||||||
} |
} |
||||||
|
|
||||||
.tui-outline-hover { |
.tui-outline-hover { |
||||||
opacity: 0.5; |
opacity: 0.5; |
||||||
} |
} |
||||||
|
|
||||||
.tui-primary-hover { |
.tui-primary-hover { |
||||||
background: #4a67d6 !important; |
background: #4a67d6 !important; |
||||||
color: #e5e5e5 !important; |
color: #e5e5e5 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-primary-outline::after { |
.tui-primary-outline::after { |
||||||
border: 1px solid #5677fc !important; |
border: 1px solid #5677fc !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-primary-outline { |
.tui-primary-outline { |
||||||
color: #5677fc !important; |
color: #5677fc !important; |
||||||
background: transparent; |
background: transparent; |
||||||
} |
} |
||||||
|
|
||||||
.tui-danger-hover { |
.tui-danger-hover { |
||||||
background: #c80808 !important; |
background: #c80808 !important; |
||||||
color: #e5e5e5 !important; |
color: #e5e5e5 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-danger-outline { |
.tui-danger-outline { |
||||||
color: #eb0909 !important; |
color: #eb0909 !important; |
||||||
background: transparent; |
background: transparent; |
||||||
} |
} |
||||||
|
|
||||||
.tui-danger-outline::after { |
.tui-danger-outline::after { |
||||||
border: 1px solid #eb0909 !important; |
border: 1px solid #eb0909 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-warning-hover { |
.tui-warning-hover { |
||||||
background: #d67326 !important; |
background: #d67326 !important; |
||||||
color: #e5e5e5 !important; |
color: #e5e5e5 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-warning-outline { |
.tui-warning-outline { |
||||||
color: #fc872d !important; |
color: #fc872d !important; |
||||||
background: transparent; |
background: transparent; |
||||||
} |
} |
||||||
|
|
||||||
.tui-warning-outline::after { |
.tui-warning-outline::after { |
||||||
border: 1px solid #fc872d !important; |
border: 1px solid #fc872d !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-green-hover { |
.tui-green-hover { |
||||||
background: #06ad56 !important; |
background: #06ad56 !important; |
||||||
color: #e5e5e5 !important; |
color: #e5e5e5 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-green-outline { |
.tui-green-outline { |
||||||
color: #07c160 !important; |
color: #07c160 !important; |
||||||
background: transparent; |
background: transparent; |
||||||
} |
} |
||||||
|
|
||||||
.tui-green-outline::after { |
.tui-green-outline::after { |
||||||
border: 1px solid #07c160 !important; |
border: 1px solid #07c160 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-blue-hover { |
.tui-blue-hover { |
||||||
background: #0062cc !important; |
background: #0062cc !important; |
||||||
color: #e5e5e5 !important; |
color: #e5e5e5 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-blue-outline { |
.tui-blue-outline { |
||||||
color: #007aff !important; |
color: #007aff !important; |
||||||
background: transparent; |
background: transparent; |
||||||
} |
} |
||||||
|
|
||||||
.tui-blue-outline::after { |
.tui-blue-outline::after { |
||||||
border: 1px solid #007aff !important; |
border: 1px solid #007aff !important; |
||||||
} |
} |
||||||
|
|
||||||
/* #ifndef APP-NVUE */ |
/* #ifndef APP-NVUE */ |
||||||
.tui-btn-gradual { |
.tui-btn-gradual { |
||||||
background: linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44)) !important; |
background: linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44)) !important; |
||||||
color: #fff !important; |
color: #fff !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-shadow-gradual { |
.tui-shadow-gradual { |
||||||
box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15); |
box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15); |
||||||
} |
} |
||||||
|
|
||||||
/* #endif */ |
/* #endif */ |
||||||
|
|
||||||
.tui-gray-hover { |
.tui-gray-hover { |
||||||
background: #a3a3a3 !important; |
background: #a3a3a3 !important; |
||||||
color: #898989; |
color: #898989; |
||||||
} |
} |
||||||
|
|
||||||
/* #ifndef APP-NVUE */ |
/* #ifndef APP-NVUE */ |
||||||
.tui-gradual-hover { |
.tui-gradual-hover { |
||||||
background: linear-gradient(90deg, #d74620, #cd1225) !important; |
background: linear-gradient(90deg, #d74620, #cd1225) !important; |
||||||
color: #fff !important; |
color: #fff !important; |
||||||
} |
} |
||||||
|
|
||||||
/* #endif */ |
/* #endif */ |
||||||
|
|
||||||
.tui-gray-outline { |
.tui-gray-outline { |
||||||
color: #999 !important; |
color: #999 !important; |
||||||
background: transparent !important; |
background: transparent !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-white-outline { |
.tui-white-outline { |
||||||
color: #fff !important; |
color: #fff !important; |
||||||
background: transparent !important; |
background: transparent !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-black-outline { |
.tui-black-outline { |
||||||
background: transparent !important; |
background: transparent !important; |
||||||
color: #333 !important; |
color: #333 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-gray-outline::after { |
.tui-gray-outline::after { |
||||||
border: 1px solid #ccc !important; |
border: 1px solid #ccc !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-white-outline::after { |
.tui-white-outline::after { |
||||||
border: 1px solid #fff !important; |
border: 1px solid #fff !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-black-outline::after { |
.tui-black-outline::after { |
||||||
border: 1px solid #333 !important; |
border: 1px solid #333 !important; |
||||||
} |
} |
||||||
|
|
||||||
.tui-brown-outline { |
.tui-brown-outline { |
||||||
color: #ac9157 !important; |
color: #ac9157 !important; |
||||||
background: transparent; |
background: transparent; |
||||||
} |
} |
||||||
.tui-brown-outline::after { |
.tui-brown-outline::after { |
||||||
border: 1px solid #ac9157 !important; |
border: 1px solid #ac9157 !important; |
||||||
} |
} |
||||||
|
|
||||||
/*圆角 */ |
/*圆角 */ |
||||||
|
|
||||||
.tui-fillet { |
.tui-fillet { |
||||||
border-radius: 50rpx; |
border-radius: 50rpx; |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-white.tui-fillet::after { |
.tui-btn-white.tui-fillet::after { |
||||||
border-radius: 98rpx; |
border-radius: 98rpx; |
||||||
} |
} |
||||||
|
|
||||||
.tui-outline-fillet::after { |
.tui-outline-fillet::after { |
||||||
border-radius: 98rpx; |
border-radius: 98rpx; |
||||||
} |
} |
||||||
|
|
||||||
/*平角*/ |
/*平角*/ |
||||||
.tui-rightAngle { |
.tui-rightAngle { |
||||||
border-radius: 0; |
border-radius: 0; |
||||||
} |
} |
||||||
|
|
||||||
.tui-btn-white.tui-rightAngle::after { |
.tui-btn-white.tui-rightAngle::after { |
||||||
border-radius: 0; |
border-radius: 0; |
||||||
} |
} |
||||||
|
|
||||||
.tui-outline-rightAngle::after { |
.tui-outline-rightAngle::after { |
||||||
border-radius: 0; |
border-radius: 0; |
||||||
} |
} |
||||||
.tui-btn__link::after { |
.tui-btn__link::after { |
||||||
border: 0 !important; |
border: 0 !important; |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1,166 +1,150 @@ |
|||||||
import Vue from "vue"; |
import Vue from 'vue' |
||||||
import Vuex from "vuex"; |
import Vuex from 'vuex' |
||||||
|
|
||||||
Vue.use(Vuex); |
Vue.use(Vuex) |
||||||
const debug = process.env.NODE_ENV !== "production"; |
const debug = process.env.NODE_ENV !== 'production' |
||||||
|
|
||||||
import cookie from "@/utils/store/cookie"; |
import cookie from '@/utils/store/cookie' |
||||||
import { |
import { getUserInfo, getUser } from '@/api/user' |
||||||
getUserInfo, |
import dialog from '@/utils/dialog' |
||||||
getUser |
|
||||||
} from "@/api/user"; |
|
||||||
import dialog from "@/utils/dialog"; |
|
||||||
|
|
||||||
const loginKey = "login_status"; |
const loginKey = 'login_status' |
||||||
|
|
||||||
const vuexStore = new Vuex.Store({ |
const vuexStore = new Vuex.Store({ |
||||||
state: { |
state: { |
||||||
// 是否已经在授权页面
|
// 是否已经在授权页面
|
||||||
isAuthorizationPage: false, |
isAuthorizationPage: false, |
||||||
// 是否授权
|
// 是否授权
|
||||||
isAuthorization: false, |
isAuthorization: false, |
||||||
// 不建议从这里取 token，但是删除掉会影响其他的页面
|
// 不建议从这里取 token，但是删除掉会影响其他的页面
|
||||||
token: cookie.get(loginKey) || null, |
token: cookie.get(loginKey) || null, |
||||||
userInfo: cookie.get('userInfo'), |
userInfo: cookie.get('userInfo'), |
||||||
$deviceType: null, |
$deviceType: null, |
||||||
location: { |
location: { |
||||||
latitude: '', |
latitude: '', |
||||||
longitude: '' |
longitude: '', |
||||||
}, |
}, |
||||||
storeItems: cookie.get("storeItems") || null, |
storeItems: cookie.get('storeItems') || null, |
||||||
goName: cookie.get("goName") || "" |
goName: cookie.get('goName') || '', |
||||||
}, |
}, |
||||||
mutations: { |
mutations: { |
||||||
login(state, token, expires_time) { |
login(state, token, expires_time) { |
||||||
state.token = token; |
state.token = token |
||||||
cookie.set(loginKey, token, expires_time); |
cookie.set(loginKey, token, expires_time) |
||||||
}, |
}, |
||||||
logout(state) { |
logout(state) { |
||||||
console.log('清除数据') |
console.log('清除数据') |
||||||
state.token = null; |
state.token = null |
||||||
state.userInfo = null |
state.userInfo = null |
||||||
cookie.clearAll() |
cookie.clearAll() |
||||||
}, |
}, |
||||||
backgroundColor(state, color) { |
backgroundColor(state, color) { |
||||||
state.color = color; |
state.color = color |
||||||
// document.body.style.backgroundColor = color;
|
// document.body.style.backgroundColor = color;
|
||||||
}, |
}, |
||||||
updateUserInfo(state, userInfo) { |
updateUserInfo(state, userInfo) { |
||||||
state.userInfo = userInfo; |
state.userInfo = userInfo |
||||||
if (userInfo) { |
if (userInfo) { |
||||||
cookie.set('userInfo', userInfo) |
cookie.set('userInfo', userInfo) |
||||||
} else { |
} else { |
||||||
cookie.set('userInfo', null) |
cookie.set('userInfo', null) |
||||||
} |
} |
||||||
}, |
}, |
||||||
updateAuthorizationPage(state, isAuthorizationPage) { |
updateAuthorizationPage(state, isAuthorizationPage) { |
||||||
state.isAuthorizationPage = isAuthorizationPage; |
state.isAuthorizationPage = isAuthorizationPage |
||||||
}, |
}, |
||||||
updateAuthorization(state, isAuthorization) { |
updateAuthorization(state, isAuthorization) { |
||||||
state.isAuthorization = isAuthorization; |
state.isAuthorization = isAuthorization |
||||||
}, |
}, |
||||||
updateDevicetype(state, $deviceType) { |
updateDevicetype(state, $deviceType) { |
||||||
state.$deviceType = $deviceType; |
state.$deviceType = $deviceType |
||||||
}, |
}, |
||||||
setLocation(state, location) { |
setLocation(state, location) { |
||||||
state.location = location |
state.location = location |
||||||
}, |
}, |
||||||
get_store(state, storeItems) { |
get_store(state, storeItems) { |
||||||
state.storeItems = storeItems; |
state.storeItems = storeItems |
||||||
cookie.set("storeItems", storeItems); |
cookie.set('storeItems', storeItems) |
||||||
}, |
}, |
||||||
get_to(state, goName) { |
get_to(state, goName) { |
||||||
state.goName = goName; |
state.goName = goName |
||||||
cookie.set("goName", goName); |
cookie.set('goName', goName) |
||||||
} |
}, |
||||||
}, |
}, |
||||||
actions: { |
actions: { |
||||||
getLocation({ state, commit }, force) { |
getLocation({ state, commit }, force) { |
||||||
uni.getLocation({ |
uni.getLocation({ |
||||||
type: 'gcj02', |
type: 'gcj02', |
||||||
success: function (res) { |
success: function(res) { |
||||||
console.log(res) |
console.log(res) |
||||||
commit("setLocation", { |
commit('setLocation', { |
||||||
longitude: res.longitude, |
longitude: res.longitude, |
||||||
latitude: res.latitude, |
latitude: res.latitude, |
||||||
}); |
}) |
||||||
} |
}, |
||||||
}); |
}) |
||||||
}, |
}, |
||||||
userInfo({ state, commit }, force) { |
userInfo({ state, commit }, force) { |
||||||
if (state.userInfo !== null && !force) { |
if (state.userInfo !== null && !force) { |
||||||
return Promise.resolve(state.userInfo); |
return Promise.resolve(state.userInfo) |
||||||
} |
} |
||||||
return new Promise(reslove => { |
return new Promise(reslove => { |
||||||
getUserInfo().then(res => { |
getUserInfo().then(res => { |
||||||
commit("updateUserInfo", res.data); |
commit('updateUserInfo', res.data) |
||||||
reslove(res.data); |
reslove(res.data) |
||||||
}); |
}) |
||||||
}).catch(() => { |
}).catch(() => { |
||||||
uni.showToast({ |
uni.showToast({ |
||||||
title: "获取信息失败!", |
title: '获取信息失败!', |
||||||
icon: "none", |
icon: 'none', |
||||||
duration: 2000, |
duration: 2000, |
||||||
}); |
}) |
||||||
}); |
}) |
||||||
}, |
}, |
||||||
getUser({ state, commit }) { |
getUser({ state, commit }) { |
||||||
if (!state.token) { |
if (!state.token) { |
||||||
return Promise.reject('未获取到token'); |
return Promise.reject('未获取到token') |
||||||
} |
} |
||||||
return new Promise(reslove => { |
return new Promise(reslove => { |
||||||
getUserInfo().then(res => { |
getUserInfo().then(res => { |
||||||
console.log(res) |
console.log(res) |
||||||
commit("updateUserInfo", res.data); |
commit('updateUserInfo', res.data) |
||||||
reslove(res.data); |
reslove(res.data) |
||||||
}); |
}) |
||||||
}).catch((error) => { |
}).catch(error => { |
||||||
console.log(error) |
console.log(error) |
||||||
uni.showToast({ |
uni.showToast({ |
||||||
title: "获取信息失败!", |
title: '获取信息失败!', |
||||||
icon: "none", |
icon: 'none', |
||||||
duration: 2000, |
duration: 2000, |
||||||
}); |
}) |
||||||
}); |
}) |
||||||
}, |
}, |
||||||
changeLogin({ |
changeLogin({ state, commit }, data, date) { |
||||||
state, |
commit('login', data, date) |
||||||
commit |
}, |
||||||
}, data, date) { |
setUserInfo({ state, commit }, user) { |
||||||
commit("login", data, date); |
commit('updateUserInfo', user) |
||||||
}, |
}, |
||||||
setUserInfo({ |
changeAuthorizationPage({ state, commit }, index) { |
||||||
state, |
commit('updateAuthorizationPage', index) |
||||||
commit |
}, |
||||||
}, user) { |
changeAuthorization({ state, commit }, index) { |
||||||
|
commit('updateAuthorization', index) |
||||||
commit("updateUserInfo", user); |
}, |
||||||
}, |
}, |
||||||
changeAuthorizationPage({ |
getters: { |
||||||
state, |
isAuthorizationPage: state => state.isAuthorizationPage, |
||||||
commit |
isAuthorization: state => state.isAuthorization, |
||||||
}, index) { |
token: state => state.token, |
||||||
commit("updateAuthorizationPage", index); |
isLogin: state => !!state.token, |
||||||
}, |
userInfo: state => state.userInfo || {}, |
||||||
changeAuthorization({ |
location: state => state.location, |
||||||
state, |
storeItems: state => state.storeItems, |
||||||
commit |
goName: state => state.goName, |
||||||
}, index) { |
$deviceType: state => state.$deviceType, |
||||||
commit("updateAuthorization", index); |
}, |
||||||
}, |
strict: debug, |
||||||
}, |
}) |
||||||
getters: { |
|
||||||
isAuthorizationPage: state => state.isAuthorizationPage, |
|
||||||
isAuthorization: state => state.isAuthorization, |
|
||||||
token: state => state.token, |
|
||||||
isLogin: state => !!state.token, |
|
||||||
userInfo: state => state.userInfo || {}, |
|
||||||
location: state => state.location, |
|
||||||
storeItems: state => state.storeItems, |
|
||||||
goName: state => state.goName, |
|
||||||
$deviceType: state => state.$deviceType, |
|
||||||
}, |
|
||||||
strict: debug |
|
||||||
}); |
|
||||||
|
|
||||||
export default vuexStore |
export default vuexStore |
||||||
|
|||||||
Loading…
Reference in new issue