Loki
/
fish-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化ui

master
anhaogxs 4 years ago
parent
63523bdbd3
commit
1c44d75899
8 changed files with 4218 additions and 873 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 517
      components/tui-button/tui-button.vue
  2. 103
      components/tui-divider/tui-divider.vue
  3. 816
      components/tui-icon/tui-icon.vue
  4. 354
      components/tui-tag/tui-tag.vue
  5. 6
      pages.json
  6. 1248
      pages/activity/GroupDetails/index.vue
  7. 717
      pages/activity/GroupRule/index.vue
  8. 872
      pages/activity/SeckillDetails/index.vue

517
components/tui-button/tui-button.vue
Unescape View 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
Unescape View 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
View File

File diff suppressed because one or more lines are too long

354
components/tui-tag/tui-tag.vue
Unescape View 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>

6
pages.json
Unescape View File

@ -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",

1248
pages/activity/GroupDetails/index.vue
View File

File diff suppressed because it is too large Load Diff

717
pages/activity/GroupRule/index.vue
Unescape View File

@ -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>
<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>
<view class="pictrue" v-for="countIndex in count" :key="countIndex"> <view class="tui-user__box">
<image class="img-none" src="@/static/images/vacancy.png" /> <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>
<!-- <view class="tui-nickname">不许人间见白头</view> -->
</view> </view>
<view v-if="(pinkBool === 1 || pinkBool === -1) && count > 9" class="lookAll acea-row row-center-wrapper" <view class="tui-user__item" v-if="pinkAll.length == 0">
@click="lookAll"> <view class="tui-avatar__box tui-user__none"><image class="tui-size" src="@/static/images/vacancy.png"></image></view>
{{ iShidden ? "收起" : "查看全部" }} <!-- <view class="tui-nickname">暂无</view> -->
<text class="iconfont" :class="iShidden ? 'icon-xiangshang' : 'icon-xiangxia'"></text>
</view> </view>
<view class="teamBnt bg-color-red" v-if="userBool === 1 && isOk == 0 && pinkBool === 0" @click="goPoster">邀请好友参团 <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 class="teamBnt bg-color-red" v-else-if="userBool === 0 && pinkBool === 0 && count > 0" @click="pay">我要参团
</view> </view>
<view class="teamBnt bg-color-red" v-if="pinkBool === 1 || pinkBool === -1" <view class="tui-btn__box">
@click="goDetail(storeCombination.id)">再次开团</view> <tui-button type="danger" height="88rpx" shadow shape="circle" v-if="userBool === 1 && isOk == 0 && pinkBool === 0" @click="goPoster">邀请好友参团</tui-button>
<view class="cancel" @click="getCombinationRemove" v-if="pinkBool === 0 && userBool === 1"> <tui-button type="warning" height="88rpx" shadow shape="circle" v-else-if="userBool === 0 && pinkBool === 0 && count > 0" @click="pay">我要参团</tui-button>
<text class="iconfont icon-guanbi3"></text> <tui-button type="danger" height="88rpx" shadow shape="circle" v-if="pinkBool === 1 || pinkBool === -1" @click="goDetail(storeCombination.id)">再次开团</tui-button>
<text>取消开团</text> <tui-button type="warning" height="88rpx" shadow shape="circle" @click="getCombinationRemove" v-if="pinkBool === 0 && userBool === 1">取消开团</tui-button>
</view> <tui-button type="danger" height="88rpx" shadow shape="circle" v-if="pinkBool === 1" @click="goOrder">查看订单信息</tui-button>
<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 { const NAME = 'GroupRule'
postCartAdd export default {
} from "@/api/store";
import {
isWeixin,
parseQuery,
handleQrCode
} from "@/utils/index";
const NAME = "GroupRule";
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>

872
pages/activity/SeckillDetails/index.vue
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save