cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改样式兼容微信小程序

Browse Source
This commit is contained in:
Gao xiaosong
2021-04-01 00:05:57 +08:00
parent 1c44d75899
commit 84e8f3e5d2
12 changed files with 717 additions and 1602 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/OrderGoods.vue
View File

@ -11,13 +11,9 @@
<view class="name line1">{{ cart.productInfo.storeName }}</view>
<view class="num">x {{ cart.cartNum }}</view>
</view>
<view
class="attr line1"
v-if="cart.productInfo.attrInfo"
>{{ cart.productInfo.attrInfo.sku }}</view>
<view class="money font-color-red" v-if="!isIntegral">￥{{ cart.truePrice }}</view>
<view class="money font-color-red" v-if="isIntegral">{{ cart.productInfo.attrInfo.integral }}积分</view>
<view class="evaluate" v-if="evaluate == 3 && cart.isReply==0" @click="routerGo(cart)">评价</view>
<view class="attr line1" v-if="cart.productInfo.attrInfo">{{ cart.productInfo.attrInfo.sku }}</view>
<view class="money font-color-red">￥{{ cart.truePrice }}</view>
<view class="evaluate" v-if="evaluate == 3 && cart.isReply == 0" @click="routerGo(cart)">评价</view>
</view>
</view>
</view>
@ -25,26 +21,25 @@
</template>
<script>
export default {
name: "OrderGoods",
name: 'OrderGoods',
props: {
isIntegral:Boolean,
evaluate: Number,
cartInfo: {
type: Array,
default: () => []
}
default: () => [],
},
},
data: function() {
return {};
return {}
},
mounted: function() {},
methods: {
routerGo(cart) {
this.$yrouter.push({
path: "/pages/shop/GoodsEvaluate/index",
query: { id: cart.unique }
});
}
}
};
path: '/pages/shop/GoodsEvaluate/index',
query: { id: cart.unique },
})
},
},
}
</script>

566
components/tui-button/tui-button.vue
View File

@ -1,517 +1,495 @@
<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>
<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;
}
}
};
name: 'tui-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;
background: #5677fc !important;
color: #fff;
}
.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 {
background: #eb0909 !important;
color: #fff;
background: #eb0909 !important;
color: #fff;
}
.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 {
background: #fc872d !important;
color: #fff;
background: #fc872d !important;
color: #fff;
}
.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 {
background: #07c160 !important;
color: #fff;
background: #07c160 !important;
color: #fff;
}
.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 {
background: #007aff !important;
color: #fff;
background: #007aff !important;
color: #fff;
}
.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 {
background: #fff !important;
color: #333 !important;
background: #fff !important;
color: #333 !important;
}
.tui-btn-gray {
background: #bfbfbf !important;
color: #fff !important;
background: #bfbfbf !important;
color: #fff !important;
}
.tui-btn-black {
background: #333 !important;
color: #fff !important;
background: #333 !important;
color: #fff !important;
}
.tui-btn-brown{
background: #ac9157 !important;
color: #fff !important;
.tui-btn-brown {
background: #ac9157 !important;
color: #fff !important;
}
.tui-btn-gray-black {
background: #f2f2f2 !important;
color: #333;
background: #f2f2f2 !important;
color: #333;
}
.tui-btn-gray-primary {
background: #f2f2f2 !important;
color: #5677fc !important;
background: #f2f2f2 !important;
color: #5677fc !important;
}
.tui-gray-primary-hover {
background: #d9d9d9 !important;
background: #d9d9d9 !important;
}
.tui-btn-gray-green {
background: #f2f2f2 !important;
color: #07c160 !important;
background: #f2f2f2 !important;
color: #07c160 !important;
}
.tui-gray-green-hover {
background: #d9d9d9 !important;
background: #d9d9d9 !important;
}
.tui-btn-gray-danger {
background: #f2f2f2 !important;
color: #eb0909 !important;
background: #f2f2f2 !important;
color: #eb0909 !important;
}
.tui-gray-danger-hover {
background: #d9d9d9 !important;
background: #d9d9d9 !important;
}
.tui-btn-gray-warning {
background: #f2f2f2 !important;
color: #fc872d !important;
background: #f2f2f2 !important;
color: #fc872d !important;
}
.tui-gray-warning-hover {
background: #d9d9d9 !important;
background: #d9d9d9 !important;
}
.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 {
background: #f7f7f9 !important;
background: #f7f7f9 !important;
}
.tui-black-hover {
background: #555 !important;
color: #e5e5e5 !important;
background: #555 !important;
color: #e5e5e5 !important;
}
.tui-brown-hover{
background: #A37F49 !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;
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;
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;
font-weight: bold;
}
.tui-btn-white::after {
border: 1px solid #bfbfbf;
border: 1px solid #bfbfbf;
}
.tui-white-hover {
background: #e5e5e5 !important;
color: #2e2e2e !important;
background: #e5e5e5 !important;
color: #2e2e2e !important;
}
.tui-dark-disabled {
opacity: 0.6 !important;
color: #fafbfc !important;
opacity: 0.6 !important;
color: #fafbfc !important;
}
.tui-dark-disabled-outline {
opacity: 0.5 !important;
opacity: 0.5 !important;
}
.tui-gray-disabled {
background: #f3f3f3 !important;
color: #919191 !important;
box-shadow: none;
background: #f3f3f3 !important;
color: #919191 !important;
box-shadow: none;
}
.tui-outline-hover {
opacity: 0.5;
opacity: 0.5;
}
.tui-primary-hover {
background: #4a67d6 !important;
color: #e5e5e5 !important;
background: #4a67d6 !important;
color: #e5e5e5 !important;
}
.tui-primary-outline::after {
border: 1px solid #5677fc !important;
border: 1px solid #5677fc !important;
}
.tui-primary-outline {
color: #5677fc !important;
background: transparent;
color: #5677fc !important;
background: transparent;
}
.tui-danger-hover {
background: #c80808 !important;
color: #e5e5e5 !important;
background: #c80808 !important;
color: #e5e5e5 !important;
}
.tui-danger-outline {
color: #eb0909 !important;
background: transparent;
color: #eb0909 !important;
background: transparent;
}
.tui-danger-outline::after {
border: 1px solid #eb0909 !important;
border: 1px solid #eb0909 !important;
}
.tui-warning-hover {
background: #d67326 !important;
color: #e5e5e5 !important;
background: #d67326 !important;
color: #e5e5e5 !important;
}
.tui-warning-outline {
color: #fc872d !important;
background: transparent;
color: #fc872d !important;
background: transparent;
}
.tui-warning-outline::after {
border: 1px solid #fc872d !important;
border: 1px solid #fc872d !important;
}
.tui-green-hover {
background: #06ad56 !important;
color: #e5e5e5 !important;
background: #06ad56 !important;
color: #e5e5e5 !important;
}
.tui-green-outline {
color: #07c160 !important;
background: transparent;
color: #07c160 !important;
background: transparent;
}
.tui-green-outline::after {
border: 1px solid #07c160 !important;
border: 1px solid #07c160 !important;
}
.tui-blue-hover {
background: #0062cc !important;
color: #e5e5e5 !important;
background: #0062cc !important;
color: #e5e5e5 !important;
}
.tui-blue-outline {
color: #007aff !important;
background: transparent;
color: #007aff !important;
background: transparent;
}
.tui-blue-outline::after {
border: 1px solid #007aff !important;
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;
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);
box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15);
}
/* #endif */
.tui-gray-hover {
background: #a3a3a3 !important;
color: #898989;
background: #a3a3a3 !important;
color: #898989;
}
/* #ifndef APP-NVUE */
.tui-gradual-hover {
background: linear-gradient(90deg, #d74620, #cd1225) !important;
color: #fff !important;
background: linear-gradient(90deg, #d74620, #cd1225) !important;
color: #fff !important;
}
/* #endif */
.tui-gray-outline {
color: #999 !important;
background: transparent !important;
color: #999 !important;
background: transparent !important;
}
.tui-white-outline {
color: #fff !important;
background: transparent !important;
color: #fff !important;
background: transparent !important;
}
.tui-black-outline {
background: transparent !important;
color: #333 !important;
background: transparent !important;
color: #333 !important;
}
.tui-gray-outline::after {
border: 1px solid #ccc !important;
border: 1px solid #ccc !important;
}
.tui-white-outline::after {
border: 1px solid #fff !important;
border: 1px solid #fff !important;
}
.tui-black-outline::after {
border: 1px solid #333 !important;
border: 1px solid #333 !important;
}
.tui-brown-outline {
color: #ac9157 !important;
background: transparent;
color: #ac9157 !important;
background: transparent;
}
.tui-brown-outline::after {
border: 1px solid #ac9157 !important;
border: 1px solid #ac9157 !important;
}
/*圆角 */
.tui-fillet {
border-radius: 50rpx;
border-radius: 50rpx;
}
.tui-btn-white.tui-fillet::after {
border-radius: 98rpx;
border-radius: 98rpx;
}
.tui-outline-fillet::after {
border-radius: 98rpx;
border-radius: 98rpx;
}
/*平角*/
.tui-rightAngle {
border-radius: 0;
border-radius: 0;
}
.tui-btn-white.tui-rightAngle::after {
border-radius: 0;
border-radius: 0;
}
.tui-outline-rightAngle::after {
border-radius: 0;
border-radius: 0;
}
.tui-btn__link::after {
border: 0 !important;
border: 0 !important;
}
</style>

816
components/tui-icon/tui-icon.vue
View File

File diff suppressed because one or more lines are too long