商品详情页打不开-分包组件问题

xiangpei

6 天以前 6057475ee0c3e9db5732ebba069b5e6adea2741c

商品详情页打不开-分包组件问题

 components/popups/popups.vue

@@ -11,7 +11,7 @@
</template>

<script>
import UIcon from '@/uview-components/uview-ui/components/u-icon/u-icon.vue';
import UIcon from '@/components/u-icon/u-icon.vue';

export default {
  components: {UIcon},

 components/u-icon/icons.js

New file
@@ -0,0 +1,214 @@
export default {
    'uicon-level': '\ue693',
    'uicon-column-line': '\ue68e',
    'uicon-checkbox-mark': '\ue807',
    'uicon-folder': '\ue7f5',
    'uicon-movie': '\ue7f6',
    'uicon-star-fill': '\ue669',
    'uicon-star': '\ue65f',
    'uicon-phone-fill': '\ue64f',
    'uicon-phone': '\ue622',
    'uicon-apple-fill': '\ue881',
    'uicon-chrome-circle-fill': '\ue885',
    'uicon-backspace': '\ue67b',
    'uicon-attach': '\ue632',
    'uicon-cut': '\ue948',
    'uicon-empty-car': '\ue602',
    'uicon-empty-coupon': '\ue682',
    'uicon-empty-address': '\ue646',
    'uicon-empty-favor': '\ue67c',
    'uicon-empty-permission': '\ue686',
    'uicon-empty-news': '\ue687',
    'uicon-empty-search': '\ue664',
    'uicon-github-circle-fill': '\ue887',
    'uicon-rmb': '\ue608',
    'uicon-person-delete-fill': '\ue66a',
    'uicon-reload': '\ue788',
    'uicon-order': '\ue68f',
    'uicon-server-man': '\ue6bc',
    'uicon-search': '\ue62a',
    'uicon-fingerprint': '\ue955',
    'uicon-more-dot-fill': '\ue630',
    'uicon-scan': '\ue662',
    'uicon-share-square': '\ue60b',
    'uicon-map': '\ue61d',
    'uicon-map-fill': '\ue64e',
    'uicon-tags': '\ue629',
    'uicon-tags-fill': '\ue651',
    'uicon-bookmark-fill': '\ue63b',
    'uicon-bookmark': '\ue60a',
    'uicon-eye': '\ue613',
    'uicon-eye-fill': '\ue641',
    'uicon-mic': '\ue64a',
    'uicon-mic-off': '\ue649',
    'uicon-calendar': '\ue66e',
    'uicon-calendar-fill': '\ue634',
    'uicon-trash': '\ue623',
    'uicon-trash-fill': '\ue658',
    'uicon-play-left': '\ue66d',
    'uicon-play-right': '\ue610',
    'uicon-minus': '\ue618',
    'uicon-plus': '\ue62d',
    'uicon-info': '\ue653',
    'uicon-info-circle': '\ue7d2',
    'uicon-info-circle-fill': '\ue64b',
    'uicon-question': '\ue715',
    'uicon-error': '\ue6d3',
    'uicon-close': '\ue685',
    'uicon-checkmark': '\ue6a8',
    'uicon-android-circle-fill': '\ue67e',
    'uicon-android-fill': '\ue67d',
    'uicon-ie': '\ue87b',
    'uicon-IE-circle-fill': '\ue889',
    'uicon-google': '\ue87a',
    'uicon-google-circle-fill': '\ue88a',
    'uicon-setting-fill': '\ue872',
    'uicon-setting': '\ue61f',
    'uicon-minus-square-fill': '\ue855',
    'uicon-plus-square-fill': '\ue856',
    'uicon-heart': '\ue7df',
    'uicon-heart-fill': '\ue851',
    'uicon-camera': '\ue7d7',
    'uicon-camera-fill': '\ue870',
    'uicon-more-circle': '\ue63e',
    'uicon-more-circle-fill': '\ue645',
    'uicon-chat': '\ue620',
    'uicon-chat-fill': '\ue61e',
    'uicon-bag-fill': '\ue617',
    'uicon-bag': '\ue619',
    'uicon-error-circle-fill': '\ue62c',
    'uicon-error-circle': '\ue624',
    'uicon-close-circle': '\ue63f',
    'uicon-close-circle-fill': '\ue637',
    'uicon-checkmark-circle': '\ue63d',
    'uicon-checkmark-circle-fill': '\ue635',
    'uicon-question-circle-fill': '\ue666',
    'uicon-question-circle': '\ue625',
    'uicon-share': '\ue631',
    'uicon-share-fill': '\ue65e',
    'uicon-shopping-cart': '\ue621',
    'uicon-shopping-cart-fill': '\ue65d',
    'uicon-bell': '\ue609',
    'uicon-bell-fill': '\ue640',
    'uicon-list': '\ue650',
    'uicon-list-dot': '\ue616',
    'uicon-zhihu': '\ue6ba',
    'uicon-zhihu-circle-fill': '\ue709',
    'uicon-zhifubao': '\ue6b9',
    'uicon-zhifubao-circle-fill': '\ue6b8',
    'uicon-weixin-circle-fill': '\ue6b1',
    'uicon-weixin-fill': '\ue6b2',
    'uicon-twitter-circle-fill': '\ue6ab',
    'uicon-twitter': '\ue6aa',
    'uicon-taobao-circle-fill': '\ue6a7',
    'uicon-taobao': '\ue6a6',
    'uicon-weibo-circle-fill': '\ue6a5',
    'uicon-weibo': '\ue6a4',
    'uicon-qq-fill': '\ue6a1',
    'uicon-qq-circle-fill': '\ue6a0',
    'uicon-moments-circel-fill': '\ue69a',
    'uicon-moments': '\ue69b',
    'uicon-qzone': '\ue695',
    'uicon-qzone-circle-fill': '\ue696',
    'uicon-baidu-circle-fill': '\ue680',
    'uicon-baidu': '\ue681',
    'uicon-facebook-circle-fill': '\ue68a',
    'uicon-facebook': '\ue689',
    'uicon-car': '\ue60c',
    'uicon-car-fill': '\ue636',
    'uicon-warning-fill': '\ue64d',
    'uicon-warning': '\ue694',
    'uicon-clock-fill': '\ue638',
    'uicon-clock': '\ue60f',
    'uicon-edit-pen': '\ue612',
    'uicon-edit-pen-fill': '\ue66b',
    'uicon-email': '\ue611',
    'uicon-email-fill': '\ue642',
    'uicon-minus-circle': '\ue61b',
    'uicon-minus-circle-fill': '\ue652',
    'uicon-plus-circle': '\ue62e',
    'uicon-plus-circle-fill': '\ue661',
    'uicon-file-text': '\ue663',
    'uicon-file-text-fill': '\ue665',
    'uicon-pushpin': '\ue7e3',
    'uicon-pushpin-fill': '\ue86e',
    'uicon-grid': '\ue673',
    'uicon-grid-fill': '\ue678',
    'uicon-play-circle': '\ue647',
    'uicon-play-circle-fill': '\ue655',
    'uicon-pause-circle-fill': '\ue654',
    'uicon-pause': '\ue8fa',
    'uicon-pause-circle': '\ue643',
    'uicon-eye-off': '\ue648',
    'uicon-eye-off-outline': '\ue62b',
    'uicon-gift-fill': '\ue65c',
    'uicon-gift': '\ue65b',
    'uicon-rmb-circle-fill': '\ue657',
    'uicon-rmb-circle': '\ue677',
    'uicon-kefu-ermai': '\ue656',
    'uicon-server-fill': '\ue751',
    'uicon-coupon-fill': '\ue8c4',
    'uicon-coupon': '\ue8ae',
    'uicon-integral': '\ue704',
    'uicon-integral-fill': '\ue703',
    'uicon-home-fill': '\ue964',
    'uicon-home': '\ue965',
    'uicon-hourglass-half-fill': '\ue966',
    'uicon-hourglass': '\ue967',
    'uicon-account': '\ue628',
    'uicon-plus-people-fill': '\ue626',
    'uicon-minus-people-fill': '\ue615',
    'uicon-account-fill': '\ue614',
    'uicon-thumb-down-fill': '\ue726',
    'uicon-thumb-down': '\ue727',
    'uicon-thumb-up': '\ue733',
    'uicon-thumb-up-fill': '\ue72f',
    'uicon-lock-fill': '\ue979',
    'uicon-lock-open': '\ue973',
    'uicon-lock-opened-fill': '\ue974',
    'uicon-lock': '\ue97a',
    'uicon-red-packet-fill': '\ue690',
    'uicon-photo-fill': '\ue98b',
    'uicon-photo': '\ue98d',
    'uicon-volume-off-fill': '\ue659',
    'uicon-volume-off': '\ue644',
    'uicon-volume-fill': '\ue670',
    'uicon-volume': '\ue633',
    'uicon-red-packet': '\ue691',
    'uicon-download': '\ue63c',
    'uicon-arrow-up-fill': '\ue6b0',
    'uicon-arrow-down-fill': '\ue600',
    'uicon-play-left-fill': '\ue675',
    'uicon-play-right-fill': '\ue676',
    'uicon-rewind-left-fill': '\ue679',
    'uicon-rewind-right-fill': '\ue67a',
    'uicon-arrow-downward': '\ue604',
    'uicon-arrow-leftward': '\ue601',
    'uicon-arrow-rightward': '\ue603',
    'uicon-arrow-upward': '\ue607',
    'uicon-arrow-down': '\ue60d',
    'uicon-arrow-right': '\ue605',
    'uicon-arrow-left': '\ue60e',
    'uicon-arrow-up': '\ue606',
    'uicon-skip-back-left': '\ue674',
    'uicon-skip-forward-right': '\ue672',
    'uicon-rewind-right': '\ue66f',
    'uicon-rewind-left': '\ue671',
    'uicon-arrow-right-double': '\ue68d',
    'uicon-arrow-left-double': '\ue68c',
    'uicon-wifi-off': '\ue668',
    'uicon-wifi': '\ue667',
    'uicon-empty-data': '\ue62f',
    'uicon-empty-history': '\ue684',
    'uicon-empty-list': '\ue68b',
    'uicon-empty-page': '\ue627',
    'uicon-empty-order': '\ue639',
    'uicon-man': '\ue697',
    'uicon-woman': '\ue69c',
    'uicon-man-add': '\ue61c',
    'uicon-man-add-fill': '\ue64c',
    'uicon-man-delete': '\ue61a',
    'uicon-man-delete-fill': '\ue66a',
    'uicon-zh': '\ue70a',
    'uicon-en': '\ue692'
}

 components/u-icon/props.js

New file
@@ -0,0 +1,89 @@
export default {
    props: {
        // 图标类名
        name: {
            type: String,
            default: uni.$u.props.icon.name
        },
        // 图标颜色，可接受主题色
        color: {
            type: String,
            default: uni.$u.props.icon.color
        },
        // 字体大小，单位px
        size: {
            type: [String, Number],
            default: uni.$u.props.icon.size
        },
        // 是否显示粗体
        bold: {
            type: Boolean,
            default: uni.$u.props.icon.bold
        },
        // 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
        index: {
            type: [String, Number],
            default: uni.$u.props.icon.index
        },
        // 触摸图标时的类名
        hoverClass: {
            type: String,
            default: uni.$u.props.icon.hoverClass
        },
        // 自定义扩展前缀，方便用户扩展自己的图标库
        customPrefix: {
            type: String,
            default: uni.$u.props.icon.customPrefix
        },
        // 图标右边或者下面的文字
        label: {
            type: [String, Number],
            default: uni.$u.props.icon.label
        },
        // label的位置，只能右边或者下边
        labelPos: {
            type: String,
            default: uni.$u.props.icon.labelPos
        },
        // label的大小
        labelSize: {
            type: [String, Number],
            default: uni.$u.props.icon.labelSize
        },
        // label的颜色
        labelColor: {
            type: String,
            default: uni.$u.props.icon.labelColor
        },
        // label与图标的距离
        space: {
            type: [String, Number],
            default: uni.$u.props.icon.space
        },
        // 图片的mode
        imgMode: {
            type: String,
            default: uni.$u.props.icon.imgMode
        },
        // 用于显示图片小图标时，图片的宽度
        width: {
            type: [String, Number],
            default: uni.$u.props.icon.width
        },
        // 用于显示图片小图标时，图片的高度
        height: {
            type: [String, Number],
            default: uni.$u.props.icon.height
        },
        // 用于解决某些情况下，让图标垂直居中的用途
        top: {
            type: [String, Number],
            default: uni.$u.props.icon.top
        },
        // 是否阻止事件传播
        stop: {
            type: Boolean,
            default: uni.$u.props.icon.stop
        }
    }
}

 components/u-icon/u-icon.vue

New file
@@ -0,0 +1,261 @@
<template>
    <view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
        <image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
        <text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass" @touchstart="touchstart"></text>
        <text v-if="label" class="u-icon__label" :style="{
            color: labelColor,
            fontSize: $u.addUnit(labelSize),
            marginLeft: labelPos == 'right' ? $u.addUnit(marginLeft) : 0,
            marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
            marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
            marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0,
        }">{{label}}</text>
    </view>
</template>

<script>
/**
 * icon 图标
 * @description 基于字体的图标集，包含了大多数常见场景的图标。
 * @tutorial https://www.uviewui.com/components/icon.html
 * @property {String} name 图标名称，见示例图标集
 * @property {String} color 图标颜色（默认inherit）
 * @property {String | Number} size 图标字体大小，单位rpx（默认32）
 * @property {String | Number} label-size label字体大小，单位rpx（默认28）
 * @property {String} label 图标右侧的label文字（默认28）
 * @property {String} label-pos label文字相对于图标的位置，只能right或bottom（默认right）
 * @property {String} label-color label字体颜色（默认#606266）
 * @property {Object} custom-style icon的样式，对象形式
 * @property {String} custom-prefix 自定义字体图标库时，需要写上此值
 * @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
 * @property {String | Number} margin-top label在下方时与图标的距离，单位rpx（默认6）
 * @property {String | Number} margin-bottom label在上方时与图标的距离，单位rpx（默认6）
 * @property {String | Number} margin-right label在左侧时与图标的距离，单位rpx（默认6）
 * @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right）
 * @property {String} index 一个用于区分多个图标的值，点击图标时通过click事件传出
 * @property {String} hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详情见官网
 * @property {String} width 显示图片小图标时的宽度
 * @property {String} height 显示图片小图标时的高度
 * @property {String} top 图标在垂直方向上的定位
 * @event {Function} click 点击图标时触发
 * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
 */
export default {
    name: 'u-icon',
    props: {
        // 图标类名
        name: {
            type: String,
            default: ''
        },
        // 图标颜色，可接受主题色
        color: {
            type: String,
            default: ''
        },
        // 字体大小，单位rpx
        size: {
            type: [Number, String],
            default: 'inherit'
        },
        // 是否显示粗体
        bold: {
            type: Boolean,
            default: false
        },
        // 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
        index: {
            type: [Number, String],
            default: ''
        },
        // 触摸图标时的类名
        hoverClass: {
            type: String,
            default: ''
        },
        // 自定义扩展前缀，方便用户扩展自己的图标库
        customPrefix: {
            type: String,
            default: 'uicon'
        },
        // 图标右边或者下面的文字
        label: {
            type: String,
            default: ''
        },
        // label的位置，只能右边或者下边
        labelPos: {
            type: String,
            default: 'right'
        },
        // label的大小
        labelSize: {
            type: [String, Number],
            default: '28'
        },
        // label的颜色
        labelColor: {
            type: String,
            default: '#606266'
        },
        // label与图标的距离(横向排列)
        marginLeft: {
            type: [String, Number],
            default: '6'
        },
        // label与图标的距离(竖向排列)
        marginTop: {
            type: [String, Number],
            default: '6'
        },
        // label与图标的距离(竖向排列)
        marginRight: {
            type: [String, Number],
            default: '6'
        },
        // label与图标的距离(竖向排列)
        marginBottom: {
            type: [String, Number],
            default: '6'
        },
        // 图片的mode
        imgMode: {
            type: String,
            default: 'widthFix'
        },
        // 自定义样式
        customStyle: {
            type: Object,
            default() {
                return {}
            }
        },
        // 用于显示图片小图标时，图片的宽度
        width: {
            type: [String, Number],
            default: ''
        },
        // 用于显示图片小图标时，图片的高度
        height: {
            type: [String, Number],
            default: ''
        },
        // 用于解决某些情况下，让图标垂直居中的用途
        top: {
            type: [String, Number],
            default: 0
        }
    },
    computed: {
        customClass() {
            let classes = [];
            classes.push(this.customPrefix + '-' + this.name);
            // uView的自定义图标类名为u-iconfont
            if (this.customPrefix == 'uicon') classes.push('u-iconfont');
            else classes.push(this.customPrefix);
            // 主题色，通过类配置
            if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color);
            // 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
            // 故需将其拆成一个字符串的形式，通过空格隔开各个类名
            //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
            classes = classes.join(' ');
            //#endif
            return classes;
        },
        iconStyle() {
            let style = {};
            style = {
                fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
                fontWeight: this.bold ? 'bold' : 'normal',
                // 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
                top: this.$u.addUnit(this.top)
            };
            // 非主题色值时，才当作颜色值
            if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color;
            return style;
        },
        // 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
        isImg() {
            return this.name.indexOf('/') !== -1;
        },
        imgStyle() {
            let style = {};
            // 如果设置width和height属性，则优先使用，否则使用size属性
            style.width = this.width ? this.$u.addUnit(this.width) : this.$u.addUnit(this.size);
            style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size);
            return style;
        }
    },
    methods: {
        click() {
            this.$emit('click', this.index);
        },
        touchstart() {
            this.$emit('touchstart', this.index);
        }
    }
};
</script>

<style scoped lang="scss">
@import "@/uview-components/uview-ui/libs/css/style.components.scss";
@import '@/uview-components/uview-ui/iconfont.css';

.u-icon {
    display: inline-flex;
    align-items: center;

    &--left {
        flex-direction: row-reverse;
        align-items: center;
    }

    &--right {
        flex-direction: row;
        align-items: center;
    }

    &--top {
        flex-direction: column-reverse;
        justify-content: center;
    }

    &--bottom {
        flex-direction: column;
        justify-content: center;
    }

    &__icon {
        position: relative;
		
        &--primary {
            color: $u-type-primary;
        }

        &--success {
            color: $u-type-success;
        }

        &--error {
            color: $u-type-error;
        }

        &--warning {
            color: $u-type-warning;
        }

        &--info {
            color: $u-type-info;
        }
    }

    &__img {
        height: auto;
        will-change: transform;
    }

    &__label {
        line-height: 1;
    }
}
</style>