优化ui
This commit is contained in:
anhaogxs
517
components/tui-button/tui-button.vue
Normal file
517
components/tui-button/tui-button.vue
Normal file
@ -0,0 +1,517 @@
|
|||||||
|
<template>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'tui-button',
|
||||||
|
behaviors: ['wx://form-field-button'],
|
||||||
|
props: {
|
||||||
|
//样式类型 primary, white, danger, warning, green,blue, gray，black,brown,gray-primary,gray-danger,gray-warning,gray-green
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'primary'
|
||||||
|
},
|
||||||
|
//是否加阴影
|
||||||
|
shadow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 宽度 rpx或 %
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
//高度 rpx
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '96rpx'
|
||||||
|
},
|
||||||
|
//字体大小 rpx
|
||||||
|
size: {
|
||||||
|
type: Number,
|
||||||
|
default: 32
|
||||||
|
},
|
||||||
|
bold: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
margin: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
|
},
|
||||||
|
//形状 circle(圆角), square(默认方形)，rightAngle(平角)
|
||||||
|
shape: {
|
||||||
|
type: String,
|
||||||
|
default: 'square'
|
||||||
|
},
|
||||||
|
plain: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
//link样式，去掉边框，结合plain一起使用
|
||||||
|
link: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
//禁用后背景是否为灰色 （非空心button生效）
|
||||||
|
disabledGray: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
formType: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
openType: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
index: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
//是否需要阻止重复点击【默认200ms】
|
||||||
|
preventClick: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
time: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick() {
|
||||||
|
if (this.disabled) return;
|
||||||
|
if (this.preventClick) {
|
||||||
|
if(new Date().getTime() - this.time <= 200) return;
|
||||||
|
this.time = new Date().getTime();
|
||||||
|
setTimeout(() => {
|
||||||
|
this.time = 0;
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
this.$emit('click', {
|
||||||
|
index: Number(this.index)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
bindgetuserinfo({ detail = {} } = {}) {
|
||||||
|
this.$emit('getuserinfo', detail);
|
||||||
|
},
|
||||||
|
bindcontact({ detail = {} } = {}) {
|
||||||
|
this.$emit('contact', detail);
|
||||||
|
},
|
||||||
|
bindgetphonenumber({ detail = {} } = {}) {
|
||||||
|
this.$emit('getphonenumber', detail);
|
||||||
|
},
|
||||||
|
binderror({ detail = {} } = {}) {
|
||||||
|
this.$emit('error', detail);
|
||||||
|
},
|
||||||
|
getShadowClass: function(type, shadow, plain) {
|
||||||
|
let className = '';
|
||||||
|
if (shadow && type != 'white' && !plain) {
|
||||||
|
className = 'tui-shadow-' + type;
|
||||||
|
}
|
||||||
|
return className;
|
||||||
|
},
|
||||||
|
getDisabledClass: function(disabled, type, plain) {
|
||||||
|
let className = '';
|
||||||
|
if (disabled && type != 'white' && type.indexOf('-') == -1) {
|
||||||
|
let classVal = this.disabledGray ? 'tui-gray-disabled' : 'tui-dark-disabled';
|
||||||
|
className = plain ? 'tui-dark-disabled-outline' : classVal;
|
||||||
|
}
|
||||||
|
return className;
|
||||||
|
},
|
||||||
|
getShapeClass: function(shape, plain) {
|
||||||
|
let className = '';
|
||||||
|
if (shape == 'circle') {
|
||||||
|
className = plain ? 'tui-outline-fillet' : 'tui-fillet';
|
||||||
|
} else if (shape == 'rightAngle') {
|
||||||
|
className = plain ? 'tui-outline-rightAngle' : 'tui-rightAngle';
|
||||||
|
}
|
||||||
|
return className;
|
||||||
|
},
|
||||||
|
getHoverClass: function(disabled, type, plain) {
|
||||||
|
let className = '';
|
||||||
|
if (!disabled) {
|
||||||
|
className = plain ? 'tui-outline-hover' : 'tui-' + (type || 'primary') + '-hover';
|
||||||
|
}
|
||||||
|
return className;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.tui-btn-primary {
|
||||||
|
background: #5677fc !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-shadow-primary {
|
||||||
|
box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-danger {
|
||||||
|
background: #eb0909 !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-shadow-danger {
|
||||||
|
box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-warning {
|
||||||
|
background: #fc872d !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-shadow-warning {
|
||||||
|
box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-green {
|
||||||
|
background: #07c160 !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-shadow-green {
|
||||||
|
box-shadow: 0 10rpx 14rpx 0 rgba(7, 193, 96, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-blue {
|
||||||
|
background: #007aff !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-shadow-blue {
|
||||||
|
box-shadow: 0 10rpx 14rpx 0 rgba(0, 122, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-white {
|
||||||
|
background: #fff !important;
|
||||||
|
color: #333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-gray {
|
||||||
|
background: #bfbfbf !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-black {
|
||||||
|
background: #333 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.tui-btn-brown{
|
||||||
|
background: #ac9157 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-gray-black {
|
||||||
|
background: #f2f2f2 !important;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-gray-primary {
|
||||||
|
background: #f2f2f2 !important;
|
||||||
|
color: #5677fc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-gray-primary-hover {
|
||||||
|
background: #d9d9d9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-gray-green {
|
||||||
|
background: #f2f2f2 !important;
|
||||||
|
color: #07c160 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-gray-green-hover {
|
||||||
|
background: #d9d9d9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-gray-danger {
|
||||||
|
background: #f2f2f2 !important;
|
||||||
|
color: #eb0909 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-gray-danger-hover {
|
||||||
|
background: #d9d9d9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-gray-warning {
|
||||||
|
background: #f2f2f2 !important;
|
||||||
|
color: #fc872d !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-gray-warning-hover {
|
||||||
|
background: #d9d9d9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-shadow-gray {
|
||||||
|
box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-hover-gray {
|
||||||
|
background: #f7f7f9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-black-hover {
|
||||||
|
background: #555 !important;
|
||||||
|
color: #e5e5e5 !important;
|
||||||
|
}
|
||||||
|
.tui-brown-hover{
|
||||||
|
background: #A37F49 !important;
|
||||||
|
color: #e5e5e5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* button start*/
|
||||||
|
|
||||||
|
.tui-btn {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
transform: scale(0.5, 0.5) translateZ(0);
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-text-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-white::after {
|
||||||
|
border: 1px solid #bfbfbf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-white-hover {
|
||||||
|
background: #e5e5e5 !important;
|
||||||
|
color: #2e2e2e !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-dark-disabled {
|
||||||
|
opacity: 0.6 !important;
|
||||||
|
color: #fafbfc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-dark-disabled-outline {
|
||||||
|
opacity: 0.5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-gray-disabled {
|
||||||
|
background: #f3f3f3 !important;
|
||||||
|
color: #919191 !important;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-outline-hover {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-primary-hover {
|
||||||
|
background: #4a67d6 !important;
|
||||||
|
color: #e5e5e5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-primary-outline::after {
|
||||||
|
border: 1px solid #5677fc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-primary-outline {
|
||||||
|
color: #5677fc !important;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-danger-hover {
|
||||||
|
background: #c80808 !important;
|
||||||
|
color: #e5e5e5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-danger-outline {
|
||||||
|
color: #eb0909 !important;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-danger-outline::after {
|
||||||
|
border: 1px solid #eb0909 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-warning-hover {
|
||||||
|
background: #d67326 !important;
|
||||||
|
color: #e5e5e5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-warning-outline {
|
||||||
|
color: #fc872d !important;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-warning-outline::after {
|
||||||
|
border: 1px solid #fc872d !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-green-hover {
|
||||||
|
background: #06ad56 !important;
|
||||||
|
color: #e5e5e5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-green-outline {
|
||||||
|
color: #07c160 !important;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-green-outline::after {
|
||||||
|
border: 1px solid #07c160 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-blue-hover {
|
||||||
|
background: #0062cc !important;
|
||||||
|
color: #e5e5e5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-blue-outline {
|
||||||
|
color: #007aff !important;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-blue-outline::after {
|
||||||
|
border: 1px solid #007aff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.tui-btn-gradual {
|
||||||
|
background: linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44)) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-shadow-gradual {
|
||||||
|
box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
.tui-gray-hover {
|
||||||
|
background: #a3a3a3 !important;
|
||||||
|
color: #898989;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.tui-gradual-hover {
|
||||||
|
background: linear-gradient(90deg, #d74620, #cd1225) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
.tui-gray-outline {
|
||||||
|
color: #999 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-white-outline {
|
||||||
|
color: #fff !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-black-outline {
|
||||||
|
background: transparent !important;
|
||||||
|
color: #333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-gray-outline::after {
|
||||||
|
border: 1px solid #ccc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-white-outline::after {
|
||||||
|
border: 1px solid #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-black-outline::after {
|
||||||
|
border: 1px solid #333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-brown-outline {
|
||||||
|
color: #ac9157 !important;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.tui-brown-outline::after {
|
||||||
|
border: 1px solid #ac9157 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*圆角 */
|
||||||
|
|
||||||
|
.tui-fillet {
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-white.tui-fillet::after {
|
||||||
|
border-radius: 98rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-outline-fillet::after {
|
||||||
|
border-radius: 98rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*平角*/
|
||||||
|
.tui-rightAngle {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-white.tui-rightAngle::after {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-outline-rightAngle::after {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.tui-btn__link::after {
|
||||||
|
border: 0 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
103
components/tui-divider/tui-divider.vue
Normal file
103
components/tui-divider/tui-divider.vue
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
<template>
|
||||||
|
<view class="tui-divider" :style="{ height: height + 'rpx' }">
|
||||||
|
<view class="tui-divider-line" :style="{ width: width, background: getBgColor(gradual, gradualColor, dividerColor) }"></view>
|
||||||
|
<view
|
||||||
|
class="tui-divider-text"
|
||||||
|
:style="{ color: color, fontSize: size + 'rpx', lineHeight: size + 'rpx', backgroundColor: backgroundColor, fontWeight: bold ? 'bold' : 'normal' }"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'tuiDivider',
|
||||||
|
props: {
|
||||||
|
//divider占据高度
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
default: 100
|
||||||
|
},
|
||||||
|
//divider宽度，可填写具体长度，如400rpx
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
//divider颜色，如果为渐变线条，此属性失效
|
||||||
|
dividerColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#e5e5e5'
|
||||||
|
},
|
||||||
|
//文字颜色
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#999'
|
||||||
|
},
|
||||||
|
//文字大小 rpx
|
||||||
|
size: {
|
||||||
|
type: Number,
|
||||||
|
default: 24
|
||||||
|
},
|
||||||
|
bold: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
//背景颜色，和当前页面背景色保持一致
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#fafafa'
|
||||||
|
},
|
||||||
|
//是否为渐变线条，为true，divideColor失效
|
||||||
|
gradual: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
//渐变色值，to right ，提供两个色值即可，由浅至深
|
||||||
|
gradualColor: {
|
||||||
|
type: Array,
|
||||||
|
default: function() {
|
||||||
|
return ['#eee', '#ccc'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getBgColor: function(gradual, gradualColor, dividerColor) {
|
||||||
|
let bgColor = dividerColor;
|
||||||
|
if (gradual) {
|
||||||
|
bgColor = 'linear-gradient(to right,' + gradualColor[0] + ',' + gradualColor[1] + ',' + gradualColor[1] + ',' + gradualColor[0] + ')';
|
||||||
|
}
|
||||||
|
return bgColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.tui-divider {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-divider-line {
|
||||||
|
position: absolute;
|
||||||
|
height: 1rpx;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: scaleY(0.5) translateX(-50%) translateZ(0);
|
||||||
|
transform: scaleY(0.5) translateX(-50%) translateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-divider-text {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 18rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
816
components/tui-icon/tui-icon.vue
Normal file
816
components/tui-icon/tui-icon.vue
Normal file
File diff suppressed because one or more lines are too long
354
components/tui-tag/tui-tag.vue
Normal file
354
components/tui-tag/tui-tag.vue
Normal file
@ -0,0 +1,354 @@
|
|||||||
|
<template>
|
||||||
|
<view class="tui-tag" :hover-class="hover ? 'tui-tag-opcity' : ''" :hover-stay-time="150" :class="[originLeft ? 'tui-origin-left' : '', originRight ? 'tui-origin-right' : '', getClassName(shape, plain), getTypeClass(type, plain)]"
|
||||||
|
:style="{ transform: `scale(${scaleMultiple})`, padding: padding, margin: margin, fontSize: size, lineHeight: size }"
|
||||||
|
@tap="handleClick">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'tuiTag',
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'primary'
|
||||||
|
},
|
||||||
|
//padding
|
||||||
|
padding: {
|
||||||
|
type: String,
|
||||||
|
default: '16rpx 26rpx'
|
||||||
|
},
|
||||||
|
margin: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
|
},
|
||||||
|
//文字大小 rpx
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: '28rpx'
|
||||||
|
},
|
||||||
|
// circle, square，circleLeft，circleRight
|
||||||
|
shape: {
|
||||||
|
type: String,
|
||||||
|
default: 'square'
|
||||||
|
},
|
||||||
|
//是否空心
|
||||||
|
plain: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
//点击效果
|
||||||
|
hover: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
//缩放倍数
|
||||||
|
scaleMultiple: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
originLeft: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
originRight: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
index: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick() {
|
||||||
|
this.$emit('click', {
|
||||||
|
index: this.index
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getTypeClass: function(type, plain) {
|
||||||
|
return plain ? 'tui-' + type + '-outline' : 'tui-' + type;
|
||||||
|
},
|
||||||
|
getClassName: function(shape, plain) {
|
||||||
|
//circle, square，circleLeft，circleRight
|
||||||
|
var className = plain ? 'tui-tag-outline ' : '';
|
||||||
|
if (shape != 'square') {
|
||||||
|
if (shape == 'circle') {
|
||||||
|
className = className + (plain ? 'tui-tag-outline-fillet' : 'tui-tag-fillet');
|
||||||
|
} else if (shape == 'circleLeft') {
|
||||||
|
className = className + 'tui-tag-fillet-left';
|
||||||
|
} else if (shape == 'circleRight') {
|
||||||
|
className = className + 'tui-tag-fillet-right';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return className;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* color start*/
|
||||||
|
|
||||||
|
.tui-primary {
|
||||||
|
background-color: #5677fc !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-light-primary {
|
||||||
|
background-color: #5c8dff !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-dark-primary {
|
||||||
|
background-color: #4a67d6 !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-dLight-primary {
|
||||||
|
background-color: #4e77d9 !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-danger {
|
||||||
|
background-color: #ed3f14 !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-red {
|
||||||
|
background-color: #ff201f !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-warning {
|
||||||
|
background-color: #ff7900 !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-green {
|
||||||
|
background-color: #19be6b !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-high-green {
|
||||||
|
background-color: #52dcae !important;
|
||||||
|
color: #52dcae;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-black {
|
||||||
|
background-color: #000 !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-white {
|
||||||
|
background-color: #fff !important;
|
||||||
|
color: #333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-translucent {
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-light-black {
|
||||||
|
background-color: #333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-gray {
|
||||||
|
background-color: #ededed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-phcolor-gray {
|
||||||
|
background-color: #ccc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-divider-gray {
|
||||||
|
background-color: #eaeef1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-gray {
|
||||||
|
background-color: #ededed !important;
|
||||||
|
color: #999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-hover-gray {
|
||||||
|
background-color: #f7f7f9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-bg-gray {
|
||||||
|
background-color: #fafafa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-light-blue {
|
||||||
|
background-color: #ecf6fd;
|
||||||
|
color: #4dabeb !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-light-brownish {
|
||||||
|
background-color: #fcebef;
|
||||||
|
color: #8a5966 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-light-orange {
|
||||||
|
background-color: #fef5eb;
|
||||||
|
color: #faa851 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-light-green {
|
||||||
|
background-color: #e8f6e8;
|
||||||
|
color: #44cf85 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-primary-outline::after {
|
||||||
|
border: 1px solid #5677fc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-primary-outline {
|
||||||
|
color: #5677fc !important;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-danger-outline {
|
||||||
|
color: #ed3f14 !important;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-danger-outline::after {
|
||||||
|
border: 1px solid #ed3f14 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-red-outline {
|
||||||
|
color: #ff201f !important;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-red-outline::after {
|
||||||
|
border: 1px solid #ff201f !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-warning-outline {
|
||||||
|
color: #ff7900 !important;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-warning-outline::after {
|
||||||
|
border: 1px solid #ff7900 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-green-outline {
|
||||||
|
color: #44cf85 !important;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-green-outline::after {
|
||||||
|
border: 1px solid #44cf85 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-high-green-outline {
|
||||||
|
color: #52dcae !important;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-high-green-outline::after {
|
||||||
|
border: 1px solid #52dcae !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-gray-outline {
|
||||||
|
color: #999 !important;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-gray-outline::after {
|
||||||
|
border: 1px solid #ccc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-black-outline {
|
||||||
|
color: #333 !important;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-black-outline::after {
|
||||||
|
border: 1px solid #333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-white-outline {
|
||||||
|
color: #fff !important;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-white-outline::after {
|
||||||
|
border: 1px solid #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* color end*/
|
||||||
|
|
||||||
|
/* tag start*/
|
||||||
|
|
||||||
|
.tui-tag {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-tag-outline {
|
||||||
|
position: relative;
|
||||||
|
background-color: none;
|
||||||
|
color: #5677fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-tag-outline::after {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
transform: scale(0.5) translateZ(0);
|
||||||
|
transform-origin: 0 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-tag-fillet {
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-white.tui-tag-fillet::after {
|
||||||
|
border-radius: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-tag-outline-fillet::after {
|
||||||
|
border-radius: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-tag-fillet-left {
|
||||||
|
border-radius: 50rpx 0 0 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-tag-fillet-right {
|
||||||
|
border-radius: 0 50rpx 50rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-tag-fillet-left.tui-tag-outline::after {
|
||||||
|
border-radius: 100rpx 0 0 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-tag-fillet-right.tui-tag-outline::after {
|
||||||
|
border-radius: 0 100rpx 100rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tag end*/
|
||||||
|
.tui-origin-left {
|
||||||
|
transform-origin: 0 center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-origin-right {
|
||||||
|
transform-origin: 100% center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-tag-opcity {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -424,6 +424,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"easycom": {
|
||||||
|
"autoscan": true,
|
||||||
|
"custom": {
|
||||||
|
"tui-(.*)": "@/components/tui-$1/tui-$1.vue"
|
||||||
|
}
|
||||||
|
},
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
"navigationBarTitleText": "Yshop",
|
"navigationBarTitleText": "Yshop",
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,98 +1,81 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="group-con">
|
<view class="group-con">
|
||||||
<view class="header acea-row row-between-wrapper" v-if="storeCombination">
|
<view class="tui-goods-item">
|
||||||
<view class="pictrue">
|
<image :src="storeCombination.image" class="tui-goods-img"></image>
|
||||||
<image :src="storeCombination.image" />
|
<view class="tui-goods-center">
|
||||||
|
<view class="tui-goods-name">{{ storeCombination.title }}</view>
|
||||||
|
<view class="tui-price__box">
|
||||||
|
<view class="tui-goods-price">
|
||||||
|
<view class="tui-size-24">￥</view>
|
||||||
|
<view class="tui-price-large">{{ storeCombination.price.split('.')[0] }}</view>
|
||||||
|
<view class="tui-size-24">.{{ storeCombination.price.split('.')[1] }}</view>
|
||||||
|
<!-- <text>已拼2020件</text> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="text">
|
<view class="tui-price-tag">{{ storeCombination.people }}人团</view>
|
||||||
<view class="line1" v-text="storeCombination.title"></view>
|
|
||||||
<view class="money">
|
|
||||||
<text>￥</text>
|
|
||||||
<text class="num" v-text="storeCombination.price"></text>
|
|
||||||
<text class="team cart-color" v-text="storeCombination.people + '人拼'"></text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="pinkBool === -1" class="iconfont icon-pintuanshibai"></view>
|
|
||||||
<view v-else-if="pinkBool === 1" class="iconfont icon-pintuanchenggong font-color-red"></view>
|
|
||||||
</view>
|
|
||||||
<view class="wrapper" v-if="pinkT">
|
|
||||||
<view class="title acea-row row-center-wrapper">
|
|
||||||
<view class="line"></view>
|
|
||||||
<view class="name acea-row row-center-wrapper">
|
|
||||||
<text>剩余</text>
|
|
||||||
<count-down :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '"
|
|
||||||
:secondText="' 秒'" :datatime="pinkT.stopTime/1000"></count-down>
|
|
||||||
<text>结束</text>
|
|
||||||
</view>
|
|
||||||
<view class="line"></view>
|
|
||||||
</view>
|
|
||||||
<view class="tips-warp">
|
|
||||||
<text class="tips font-color-red" v-if="pinkBool === 1">恭喜您拼团成功</text>
|
|
||||||
<text class="tips" v-else-if="pinkBool === -1">还差{{ count }}人，拼团失败</text>
|
|
||||||
<text class="tips font-color-red" v-else-if="pinkBool === 0">拼团中，还差{{ count }}人拼团成功</text>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="list acea-row row-middle"
|
<view class="tui-group__box tui-mtop__20">
|
||||||
:class="[pinkBool === 1 || pinkBool === -1 ? 'result' : '',iShidden ? 'on' : '']">
|
<tui-divider backgroundColor="#fff" width="70%" gradual >
|
||||||
<view class="pictrue" v-if="pinkT">
|
<view class="tui-divider__content">
|
||||||
<image :src="pinkT.avatar" />
|
<text v-if="pinkBool == 0">拼团失败</text>
|
||||||
|
<text v-if="pinkBool == 1">拼团成功</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="acea-row row-middle" v-if="pinkAll.length > 0">
|
</tui-divider>
|
||||||
<view class="pictrue" v-for="(item, pinkAllIndex) in pinkAll" :key="pinkAllIndex">
|
<view class="tui-group__title" v-if="pinkBool == 0">
|
||||||
<image :src="item.avatar" />
|
<text>还差</text>
|
||||||
|
<text class="tui-color__red">{{ count }}</text>
|
||||||
|
<text>人，赶快邀请好友来拼团吧</text>
|
||||||
|
</view>
|
||||||
|
<view class="tui-group-countdown" v-if="pinkBool == 0">
|
||||||
|
<view class="tui-countdown-right">剩余</view>
|
||||||
|
<count-down :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" :secondText="' 秒'" :datatime="pinkT.stopTime / 1000"></count-down>
|
||||||
|
<view class="tui-countdown-left">结束</view>
|
||||||
|
</view>
|
||||||
|
<view class="tui-user__box">
|
||||||
|
<view class="tui-user__item">
|
||||||
|
<view class="tui-avatar__box tui-size">
|
||||||
|
<image class="tui-size" :src="userInfo.avatar"></image>
|
||||||
|
<view class="tui-team__leader">团长</view>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="tui-nickname">不许人间见白头</view> -->
|
||||||
|
</view>
|
||||||
|
<view class="tui-user__item" v-if="pinkAll.length == 0">
|
||||||
|
<view class="tui-avatar__box tui-user__none"><image class="tui-size" src="@/static/images/vacancy.png"></image></view>
|
||||||
|
<!-- <view class="tui-nickname">暂无</view> -->
|
||||||
|
</view>
|
||||||
|
<view class="tui-user__item" v-for="(item, pinkAllIndex) in pinkAll" :key="pinkAllIndex">
|
||||||
|
<view class="tui-avatar__box tui-size"><image class="tui-size" :src="item.avatar"></image></view>
|
||||||
|
<!-- <view class="tui-nickname">小可爱本人</view> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="pictrue" v-for="countIndex in count" :key="countIndex">
|
<view class="tui-btn__box">
|
||||||
<image class="img-none" src="@/static/images/vacancy.png" />
|
<tui-button type="danger" height="88rpx" shadow shape="circle" v-if="userBool === 1 && isOk == 0 && pinkBool === 0" @click="goPoster">邀请好友参团</tui-button>
|
||||||
</view>
|
<tui-button type="warning" height="88rpx" shadow shape="circle" v-else-if="userBool === 0 && pinkBool === 0 && count > 0" @click="pay">我要参团</tui-button>
|
||||||
</view>
|
<tui-button type="danger" height="88rpx" shadow shape="circle" v-if="pinkBool === 1 || pinkBool === -1" @click="goDetail(storeCombination.id)">再次开团</tui-button>
|
||||||
<view v-if="(pinkBool === 1 || pinkBool === -1) && count > 9" class="lookAll acea-row row-center-wrapper"
|
<tui-button type="warning" height="88rpx" shadow shape="circle" @click="getCombinationRemove" v-if="pinkBool === 0 && userBool === 1">取消开团</tui-button>
|
||||||
@click="lookAll">
|
<tui-button type="danger" height="88rpx" shadow shape="circle" v-if="pinkBool === 1" @click="goOrder">查看订单信息</tui-button>
|
||||||
{{ iShidden ? "收起" : "查看全部" }}
|
|
||||||
<text class="iconfont" :class="iShidden ? 'icon-xiangshang' : 'icon-xiangxia'"></text>
|
|
||||||
</view>
|
|
||||||
<view class="teamBnt bg-color-red" v-if="userBool === 1 && isOk == 0 && pinkBool === 0" @click="goPoster">邀请好友参团
|
|
||||||
</view>
|
|
||||||
<view class="teamBnt bg-color-red" v-else-if="userBool === 0 && pinkBool === 0 && count > 0" @click="pay">我要参团
|
|
||||||
</view>
|
|
||||||
<view class="teamBnt bg-color-red" v-if="pinkBool === 1 || pinkBool === -1"
|
|
||||||
@click="goDetail(storeCombination.id)">再次开团</view>
|
|
||||||
<view class="cancel" @click="getCombinationRemove" v-if="pinkBool === 0 && userBool === 1">
|
|
||||||
<text class="iconfont icon-guanbi3"></text>
|
|
||||||
<text>取消开团</text>
|
|
||||||
</view>
|
|
||||||
<view class="lookOrder" v-if="pinkBool === 1" @click="goOrder">
|
|
||||||
<text>查看订单信息</text>
|
|
||||||
<text class="iconfont icon-xiangyou"></text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import CountDown from "@/components/CountDown";
|
import CountDown from '@/components/CountDown'
|
||||||
import {
|
import { getCombinationPink, getCombinationRemove } from '@/api/activity'
|
||||||
getCombinationPink,
|
import { postCartAdd } from '@/api/store'
|
||||||
getCombinationRemove
|
import { isWeixin, parseQuery, handleQrCode } from '@/utils/index'
|
||||||
} from "@/api/activity";
|
|
||||||
import {
|
|
||||||
postCartAdd
|
|
||||||
} from "@/api/store";
|
|
||||||
import {
|
|
||||||
isWeixin,
|
|
||||||
parseQuery,
|
|
||||||
handleQrCode
|
|
||||||
} from "@/utils/index";
|
|
||||||
|
|
||||||
const NAME = "GroupRule";
|
const NAME = 'GroupRule'
|
||||||
export default {
|
export default {
|
||||||
name: NAME,
|
name: NAME,
|
||||||
components: {
|
components: {
|
||||||
CountDown
|
CountDown,
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
currentPinkOrder: "", //当前拼团订单
|
currentPinkOrder: '', //当前拼团订单
|
||||||
isOk: 0, //判断拼团是否完成
|
isOk: 0, //判断拼团是否完成
|
||||||
pinkBool: 0, //判断拼团是否成功|0=失败,1=成功
|
pinkBool: 0, //判断拼团是否成功|0=失败,1=成功
|
||||||
userBool: 0, //判断当前用户是否在团内|0=未在,1=在
|
userBool: 0, //判断当前用户是否在团内|0=未在,1=在
|
||||||
@ -100,138 +83,596 @@
|
|||||||
pinkT: {}, //团长信息
|
pinkT: {}, //团长信息
|
||||||
storeCombination: {}, //拼团产品
|
storeCombination: {}, //拼团产品
|
||||||
pinkId: 0,
|
pinkId: 0,
|
||||||
uniqueId: "",
|
uniqueId: '',
|
||||||
count: 0, //拼团剩余人数
|
count: 0, //拼团剩余人数
|
||||||
iShidden: false
|
iShidden: false,
|
||||||
};
|
userInfo: {},
|
||||||
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$yroute(n) {
|
$yroute(n) {
|
||||||
var that = this;
|
var that = this
|
||||||
if (n.name === NAME) {
|
if (n.name === NAME) {
|
||||||
that.pinkId = that.$yroute.query.id;
|
that.pinkId = that.$yroute.query.id
|
||||||
that.getCombinationPink();
|
that.getCombinationPink()
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
},
|
||||||
mounted: function () {
|
mounted: function () {
|
||||||
var that = this;
|
var that = this
|
||||||
let url = handleQrCode();
|
let url = handleQrCode()
|
||||||
if (url) {
|
if (url) {
|
||||||
that.pinkId = url.pinkId;
|
that.pinkId = url.pinkId
|
||||||
} else {
|
} else {
|
||||||
that.pinkId = that.$yroute.query.id;
|
that.pinkId = that.$yroute.query.id
|
||||||
}
|
}
|
||||||
that.getCombinationPink();
|
that.getCombinationPink()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
pay: function () {
|
pay: function () {
|
||||||
var that = this;
|
var that = this
|
||||||
var data = {};
|
var data = {}
|
||||||
data.productId = that.storeCombination.productId;
|
data.productId = that.storeCombination.productId
|
||||||
data.cartNum = that.pinkT.totalNum;
|
data.cartNum = that.pinkT.totalNum
|
||||||
data.uniqueId = that.uniqueId;
|
data.uniqueId = that.uniqueId
|
||||||
data.combinationId = that.storeCombination.id;
|
data.combinationId = that.storeCombination.id
|
||||||
data.new = 1;
|
data.new = 1
|
||||||
postCartAdd(data)
|
postCartAdd(data)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
that.$yrouter.push({
|
that.$yrouter.push({
|
||||||
path: "/pages/order/OrderSubmission/index",
|
path: '/pages/order/OrderSubmission/index',
|
||||||
query: {
|
query: {
|
||||||
id: res.data.cartId,
|
id: res.data.cartId,
|
||||||
pinkid: that.pinkId
|
pinkid: that.pinkId,
|
||||||
}
|
},
|
||||||
});
|
})
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: err.msg || err.response.data.msg || err.response.data.message,
|
title: err.msg || err.response.data.msg || err.response.data.message,
|
||||||
icon: "none",
|
icon: 'none',
|
||||||
duration: 2000
|
duration: 2000,
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
goPoster: function () {
|
goPoster: function () {
|
||||||
var that = this;
|
var that = this
|
||||||
this.$yrouter.push({
|
this.$yrouter.push({
|
||||||
path: "/pages/activity/Poster/index",
|
path: '/pages/activity/Poster/index',
|
||||||
query: {
|
query: {
|
||||||
id: that.pinkId,
|
id: that.pinkId,
|
||||||
type: 1
|
type: 1,
|
||||||
}
|
},
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
goOrder: function () {
|
goOrder: function () {
|
||||||
var that = this;
|
var that = this
|
||||||
this.$yrouter.push({
|
this.$yrouter.push({
|
||||||
path: "/pages/order/OrderDetails/index",
|
path: '/pages/order/OrderDetails/index',
|
||||||
query: {
|
query: {
|
||||||
id: that.currentPinkOrder
|
id: that.currentPinkOrder,
|
||||||
}
|
},
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
//拼团列表
|
//拼团列表
|
||||||
goList: function () {
|
goList: function () {
|
||||||
this.$yrouter.push({
|
this.$yrouter.push({
|
||||||
path: "/pages/activity/GoodsGroup/index"
|
path: '/pages/activity/GoodsGroup/index',
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
//拼团详情
|
//拼团详情
|
||||||
goDetail: function (id) {
|
goDetail: function (id) {
|
||||||
this.$yrouter.push({
|
this.$yrouter.push({
|
||||||
path: "/pages/activity/GroupDetails/index",
|
path: '/pages/activity/GroupDetails/index',
|
||||||
query: {
|
query: {
|
||||||
id
|
id,
|
||||||
}
|
},
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
//拼团信息
|
//拼团信息
|
||||||
getCombinationPink: function () {
|
getCombinationPink: function () {
|
||||||
var that = this;
|
var that = this
|
||||||
getCombinationPink(that.pinkId).then(res => {
|
getCombinationPink(that.pinkId).then(res => {
|
||||||
that.$set(that, "storeCombination", res.data.storeCombination);
|
that.$set(that, 'storeCombination', res.data.storeCombination)
|
||||||
that.$set(that, "pinkT", res.data.pinkT);
|
that.$set(that, 'pinkT', res.data.pinkT)
|
||||||
that.$set(that, "pinkAll", res.data.pinkAll);
|
that.$set(that, 'pinkAll', res.data.pinkAll)
|
||||||
that.$set(that, "count", res.data.count);
|
that.$set(that, 'count', res.data.count)
|
||||||
that.$set(that, "userBool", res.data.userBool);
|
that.$set(that, 'userBool', res.data.userBool)
|
||||||
that.$set(that, "pinkBool", res.data.pinkBool);
|
that.$set(that, 'pinkBool', res.data.pinkBool)
|
||||||
that.$set(that, "isOk", res.data.isOk);
|
that.$set(that, 'isOk', res.data.isOk)
|
||||||
that.$set(that, "currentPinkOrder", res.data.currentPinkOrder);
|
that.$set(that, 'currentPinkOrder', res.data.currentPinkOrder)
|
||||||
that.$set(that, "uniqueId", res.data.uniqueId);
|
that.$set(that, 'uniqueId', res.data.uniqueId)
|
||||||
});
|
that.$set(that, 'userInfo', res.data.userInfo)
|
||||||
|
})
|
||||||
},
|
},
|
||||||
//拼团取消
|
//拼团取消
|
||||||
getCombinationRemove: function () {
|
getCombinationRemove: function () {
|
||||||
var that = this;
|
var that = this
|
||||||
getCombinationRemove({
|
getCombinationRemove({
|
||||||
id: that.pinkId,
|
id: that.pinkId,
|
||||||
cid: that.storeCombination.id
|
cid: that.storeCombination.id,
|
||||||
})
|
})
|
||||||
.then(res => {
|
.then(res => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: res.msg,
|
title: res.msg,
|
||||||
icon: "none",
|
icon: 'none',
|
||||||
duration: 2000
|
duration: 2000,
|
||||||
});
|
})
|
||||||
})
|
})
|
||||||
.catch(res => {
|
.catch(res => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: res.msg,
|
title: res.msg,
|
||||||
icon: "none",
|
icon: 'none',
|
||||||
duration: 2000
|
duration: 2000,
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
lookAll: function () {
|
lookAll: function () {
|
||||||
this.iShidden = !this.iShidden;
|
this.iShidden = !this.iShidden
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.tips-warp {
|
.tips-warp {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tui-goods-item {
|
||||||
|
width: 100%;
|
||||||
|
padding: 20rpx 25rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-goods-img {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
display: block;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-goods-center {
|
||||||
|
flex: 1;
|
||||||
|
padding: 12rpx 12rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-goods-name {
|
||||||
|
word-break: break-all;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-price__box {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-goods-price {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #eb0909;
|
||||||
|
}
|
||||||
|
.tui-goods-price text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-size-24 {
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-price-large {
|
||||||
|
font-size: 32rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-price-tag {
|
||||||
|
height: 38rpx;
|
||||||
|
border: 1rpx solid #eb0909;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 24rpx;
|
||||||
|
transform: scale(0.8);
|
||||||
|
transform-origin: 100% center;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
padding: 0 8rpx;
|
||||||
|
color: #eb0909;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.tui-mtop__20 {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
.tui-divider__content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.tui-divider__content image {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
.tui-divider__content text {
|
||||||
|
font-size: 34rpx;
|
||||||
|
line-height: 34rpx;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.tui-group__time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.tui-group__box {
|
||||||
|
width: 100%;
|
||||||
|
padding: 50rpx 25rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.tui-group__title {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 34rpx;
|
||||||
|
line-height: 34rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.tui-color__red {
|
||||||
|
color: #eb0909;
|
||||||
|
}
|
||||||
|
.tui-group-countdown {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-countdown-right {
|
||||||
|
padding-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-countdown-left {
|
||||||
|
padding-left: 6rpx;
|
||||||
|
}
|
||||||
|
.tui-user__box {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 60rpx;
|
||||||
|
}
|
||||||
|
.tui-user__item {
|
||||||
|
max-width: 128rpx;
|
||||||
|
margin: 0 40rpx;
|
||||||
|
}
|
||||||
|
.tui-size {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.tui-avatar__box {
|
||||||
|
position: relative;
|
||||||
|
border: 4rpx solid #eb0909;
|
||||||
|
}
|
||||||
|
.tui-user__none {
|
||||||
|
width: 108rpx;
|
||||||
|
height: 108rpx;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.tui-avatar__box image {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.tui-team__leader {
|
||||||
|
position: absolute;
|
||||||
|
width: 64rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
background-color: #eb0909;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 30px;
|
||||||
|
left: 50%;
|
||||||
|
top: -14rpx;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.tui-nickname {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 12rpx;
|
||||||
|
}
|
||||||
|
.tui-btn__box {
|
||||||
|
padding-top: 60rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tni-cell{
|
||||||
|
height: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-group__text {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-group-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
padding-left: 16rpx;
|
||||||
|
border-left: 2px solid #eb0909;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-sub__info {
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding-right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-group__start .tui-group-title {
|
||||||
|
border-left: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.tui-group__start .tui-sub__info {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
.tui-step__box {
|
||||||
|
width: 100%;
|
||||||
|
height: 210rpx;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 60rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-step-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-step-item image {
|
||||||
|
width: 64rpx;
|
||||||
|
height: 55rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-step-item image:first-child {
|
||||||
|
width: 60rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-step-arrow {
|
||||||
|
height: 90rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-step-arrow image {
|
||||||
|
width: 11rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-step-text {
|
||||||
|
line-height: 26rpx;
|
||||||
|
padding-top: 24rpx;
|
||||||
|
}
|
||||||
|
.tui-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.tui-btn__box .tui-btn{
|
||||||
|
margin-bottom:30rpx !important
|
||||||
|
|
||||||
|
}
|
||||||
|
/*拼团玩法介绍 modal*/
|
||||||
|
.tui-modal__title {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
.tui-modal__p {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #888;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
}
|
||||||
|
.tui-modal__btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 60rpx 0 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.tui-hot__title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*========商品 start======*/
|
||||||
|
|
||||||
|
.tui-product__box {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 25rpx 60rpx 25rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-product-list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-product-container {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-product-container:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-pro-item {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
background: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-flex-list {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 1rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-pro-img {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-proimg-list {
|
||||||
|
width: 280rpx;
|
||||||
|
height: 280rpx !important;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-pro-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-pro-tit {
|
||||||
|
color: #2e2e2e;
|
||||||
|
font-size: 26rpx;
|
||||||
|
word-break: break-all;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-price__box {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-price {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
color: #eb0909;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-price__small {
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-price__large {
|
||||||
|
font-size: 34rpx;
|
||||||
|
line-height: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-price__original {
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 24rpx;
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: #999;
|
||||||
|
padding-top: 10rpx;
|
||||||
|
padding-left: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-group-btn {
|
||||||
|
max-width: 312rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
background: #eb0909;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-flex-btn {
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-flex-btn:first-child {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-group-text {
|
||||||
|
font-size: 25rpx;
|
||||||
|
line-height: 25rpx;
|
||||||
|
transform: scale(0.8);
|
||||||
|
transform-origin: 0 center;
|
||||||
|
padding-top: 30rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-color-red {
|
||||||
|
color: #eb0909;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======商品======= end*/
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user