fix(code): 修正代码错误及不严谨的地方
This commit is contained in:
@@ -603,7 +603,7 @@
|
|||||||
<text class="iconfont icon-close" @click="$refs.memberGoodsCardPopup.close()"></text>
|
<text class="iconfont icon-close" @click="$refs.memberGoodsCardPopup.close()"></text>
|
||||||
</view>
|
</view>
|
||||||
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
|
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
|
||||||
<view v-for="(item, index) in selectGoodsCard.cardList" :key="item.item_id || index" class="card-item" @click="selectGoodsCard.click(item.item_id)">
|
<view v-for="(item, index) in selectGoodsCard.cardList" :key="index" class="card-item" @click="selectGoodsCard.click(item.item_id)">
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view class="title">{{ item.goods_name }}</view>
|
<view class="title">{{ item.goods_name }}</view>
|
||||||
<view class="info">
|
<view class="info">
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
:interval="swiperConfig.interval || 3000"
|
:interval="swiperConfig.interval || 3000"
|
||||||
:duration="swiperConfig.duration || 500"
|
:duration="swiperConfig.duration || 500"
|
||||||
:display-multiple-items="swiperConfig.displayMultipleItems || 3">
|
:display-multiple-items="swiperConfig.displayMultipleItems || 3">
|
||||||
<swiper-item v-for="(item, index) in list" :key="item.article_id || index" @click="toDetail(item)">
|
<swiper-item v-for="(item, index) in list" :key="index" @click="toDetail(item)">
|
||||||
<view class="swiper-item-content">
|
<view class="swiper-item-content">
|
||||||
<view :class="['item', value.ornament.type]" :style="itemCss">
|
<view :class="['item', value.ornament.type]" :style="itemCss">
|
||||||
<view class="article-img">
|
<view class="article-img">
|
||||||
|
|||||||
@@ -206,7 +206,7 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
|
|
||||||
.fui-audio {
|
.fui-audio {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
|
|
||||||
<!-- 商品列表 -->
|
<!-- 商品列表 -->
|
||||||
<template v-if="value.template == 'row1-of1'">
|
<template v-if="value.template == 'row1-of1'">
|
||||||
<view class="item" v-for="(item, index) in list" :key="item.bargain_id || index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||||
</view>
|
</view>
|
||||||
@@ -67,7 +67,7 @@
|
|||||||
|
|
||||||
<template v-if="value.template == 'horizontal-slide'">
|
<template v-if="value.template == 'horizontal-slide'">
|
||||||
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
|
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
|
||||||
<view class="item" v-for="(item, index) in list" :key="item.bargain_id || index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)" :lazy-load="true"/>
|
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)" :lazy-load="true"/>
|
||||||
<image class="bg" v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'" :src="$util.img('public/uniapp/bargain/bg.png')" mode="widthFix"/>
|
<image class="bg" v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'" :src="$util.img('public/uniapp/bargain/bg.png')" mode="widthFix"/>
|
||||||
|
|||||||
@@ -68,7 +68,7 @@
|
|||||||
<block v-if="categoryTree.length">
|
<block v-if="categoryTree.length">
|
||||||
<scroll-view scroll-y="true" class="tree-wrap">
|
<scroll-view scroll-y="true" class="tree-wrap">
|
||||||
<view class="category-item-wrap">
|
<view class="category-item-wrap">
|
||||||
<view class="category-item" v-for="(item, index) in categoryTree" :key="item.category_id || index" :class="[
|
<view class="category-item" v-for="(item, index) in categoryTree" :key="index" :class="[
|
||||||
{ select: select == index },
|
{ select: select == index },
|
||||||
{ 'border-bottom': value.template == 4 && select + 1 === index },
|
{ 'border-bottom': value.template == 4 && select + 1 === index },
|
||||||
{ 'border-top': value.template == 4 && select - 1 === index }
|
{ 'border-top': value.template == 4 && select - 1 === index }
|
||||||
@@ -84,7 +84,7 @@
|
|||||||
@scroll="listenScroll" @touchstart="touchStart" :refresher-enabled="true"
|
@scroll="listenScroll" @touchstart="touchStart" :refresher-enabled="true"
|
||||||
refresher-default-style="none" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
|
refresher-default-style="none" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
|
||||||
@refresherrestore="onRestore">
|
@refresherrestore="onRestore">
|
||||||
<view class="child-category" v-for="(item, index) in categoryTree" :key="item.category_id || index" :id="'category-' + index">
|
<view class="child-category" v-for="(item, index) in categoryTree" :key="index" :id="'category-' + index">
|
||||||
<diy-category-item :category="item" :value="value" ref="categoryItem" :index="index"
|
<diy-category-item :category="item" :value="value" ref="categoryItem" :index="index"
|
||||||
:select="select" :oneCategorySelect="oneCategorySelect" :isList="isList" @tologin="toLogin"
|
:select="select" :oneCategorySelect="oneCategorySelect" :isList="isList" @tologin="toLogin"
|
||||||
@selectsku="selectSku($event, index)" @addCart="addCartPoint"
|
@selectsku="selectSku($event, index)" @addCart="addCartPoint"
|
||||||
@@ -95,7 +95,7 @@
|
|||||||
|
|
||||||
<view class="content-wrap"
|
<view class="content-wrap"
|
||||||
v-if="(value.template == 2 || value.template == 3 || value.template == 4) && loadType == 'part'">
|
v-if="(value.template == 2 || value.template == 3 || value.template == 4) && loadType == 'part'">
|
||||||
<view class="child-category-wrap" v-for="(item, index) in categoryTree" :key="item.category_id || index"
|
<view class="child-category-wrap" v-for="(item, index) in categoryTree" :key="index"
|
||||||
:id="'category-' + index" :style="{ display: select == index ? 'block' : 'none' }">
|
:id="'category-' + index" :style="{ display: select == index ? 'block' : 'none' }">
|
||||||
<diy-category-item :category="item" :value="value" ref="categoryItem" :index="index"
|
<diy-category-item :category="item" :value="value" ref="categoryItem" :index="index"
|
||||||
:last="index == categoryTree.length - 1 ? true : false" :select="select"
|
:last="index == categoryTree.length - 1 ? true : false" :select="select"
|
||||||
|
|||||||
@@ -20,4 +20,4 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss"></style>
|
<style></style>
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
<swiper class="coupon-style-one" circular>
|
<swiper class="coupon-style-one" circular>
|
||||||
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
|
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
|
||||||
|
|
||||||
<view v-for="(item, index) in computedCouponList" class="coupon-item" :key="item.coupon_id || index"
|
<view v-for="(item, index) in computedCouponList" class="coupon-item" :key="index"
|
||||||
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
|
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
|
||||||
color: value.moneyColor,
|
color: value.moneyColor,
|
||||||
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style1-bg.png') + ')',
|
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style1-bg.png') + ')',
|
||||||
@@ -43,7 +43,7 @@
|
|||||||
<template v-if="value.style == '2'">
|
<template v-if="value.style == '2'">
|
||||||
<swiper class="coupon-style-two" circular>
|
<swiper class="coupon-style-two" circular>
|
||||||
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
|
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
|
||||||
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="item.coupon_id || index"
|
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
|
||||||
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
|
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
|
||||||
color: value.moneyColor,
|
color: value.moneyColor,
|
||||||
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_bg1.png') + ')',
|
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_bg1.png') + ')',
|
||||||
@@ -76,7 +76,7 @@
|
|||||||
<template v-if="value.style == '3'">
|
<template v-if="value.style == '3'">
|
||||||
<swiper class="coupon-style-three" circular>
|
<swiper class="coupon-style-three" circular>
|
||||||
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
|
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
|
||||||
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="item.coupon_id || index"
|
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
|
||||||
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
|
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
|
||||||
color: value.moneyColor,
|
color: value.moneyColor,
|
||||||
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_shu.png') + ')',
|
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_shu.png') + ')',
|
||||||
@@ -110,7 +110,7 @@
|
|||||||
<template v-if="value.style == '4'">
|
<template v-if="value.style == '4'">
|
||||||
<swiper class="coupon-style-four" circular>
|
<swiper class="coupon-style-four" circular>
|
||||||
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
|
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
|
||||||
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="item.coupon_id || index"
|
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
|
||||||
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
|
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
|
||||||
color: value.moneyColor,
|
color: value.moneyColor,
|
||||||
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style4_bg.png') + ')',
|
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style4_bg.png') + ')',
|
||||||
@@ -143,7 +143,7 @@
|
|||||||
<view class="coupon-style-five">
|
<view class="coupon-style-five">
|
||||||
<view class="coupon-all">
|
<view class="coupon-all">
|
||||||
<view class="coupon-box">
|
<view class="coupon-box">
|
||||||
<view class="coupon-list" v-for="(item, index) in computedCouponList" :key="item.coupon_id || index" @click="couponAction(item, index)">
|
<view class="coupon-list" v-for="(item, index) in computedCouponList" :key="index" @click="couponAction(item, index)">
|
||||||
<image :src="$util.img('public/uniapp/coupon/style5_bg.png')"></image>
|
<image :src="$util.img('public/uniapp/coupon/style5_bg.png')"></image>
|
||||||
<view class="coupon">
|
<view class="coupon">
|
||||||
<view class="coupon-info">
|
<view class="coupon-info">
|
||||||
@@ -176,7 +176,7 @@
|
|||||||
<template v-if="value.style == '6'">
|
<template v-if="value.style == '6'">
|
||||||
<swiper class="coupon-style-six" circular>
|
<swiper class="coupon-style-six" circular>
|
||||||
<swiper-item class="style-six-wrap" v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex">
|
<swiper-item class="style-six-wrap" v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex">
|
||||||
<view class="coupon" v-for="(item, index) in computedCouponList" :key="item.coupon_id || index"
|
<view class="coupon" v-for="(item, index) in computedCouponList" :key="index"
|
||||||
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
|
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
|
||||||
color: value.moneyColor,
|
color: value.moneyColor,
|
||||||
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style6-bg-1.png') + ')',
|
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style6-bg-1.png') + ')',
|
||||||
@@ -230,7 +230,7 @@
|
|||||||
<template v-if="value.style == '7'">
|
<template v-if="value.style == '7'">
|
||||||
<scroll-view class="coupon-style-seven" scroll-x="true">
|
<scroll-view class="coupon-style-seven" scroll-x="true">
|
||||||
<view class="wrap">
|
<view class="wrap">
|
||||||
<view class="coupon-list" v-for="(item, index) in computedCouponList" :key="item.coupon_id || index" @click="couponAction(item, index)">
|
<view class="coupon-list" v-for="(item, index) in computedCouponList" :key="index" @click="couponAction(item, index)">
|
||||||
<image :src="$util.img('public/uniapp/coupon/style7_bg.png')"></image>
|
<image :src="$util.img('public/uniapp/coupon/style7_bg.png')"></image>
|
||||||
<view class="coupon">
|
<view class="coupon">
|
||||||
<view class="coupon-info">
|
<view class="coupon-info">
|
||||||
@@ -1067,7 +1067,7 @@
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
|
.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view data-component-name="diy-fenxiao-goods-list" class="diy-fenxiao" v-if="list.length" :class="['goods-list', value.template, value.style]" :style="goodsListWarpCss">
|
<view data-component-name="diy-fenxiao-goods-list" class="diy-fenxiao" v-if="list.length" :class="['goods-list', value.template, value.style]" :style="goodsListWarpCss">
|
||||||
<view class="goods-item" v-for="(item, index) in list" :key="item.goods_id || index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||||
<view class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
<view class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index)"/>
|
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index)"/>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -26,4 +26,4 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss"></style>
|
<style></style>
|
||||||
@@ -5,7 +5,7 @@
|
|||||||
<view class="title-wrap" v-show="value.title" :style="{ color: value.textColor, fontWeight: value.fontWeight ? 'bold' : '' }">{{ value.title }}
|
<view class="title-wrap" v-show="value.title" :style="{ color: value.textColor, fontWeight: value.fontWeight ? 'bold' : '' }">{{ value.title }}
|
||||||
</view>
|
</view>
|
||||||
<view class="ul-wrap">
|
<view class="ul-wrap">
|
||||||
<view class="li-item" v-for="(item, index) in list" :key="item.brand_id || index">
|
<view class="li-item" v-for="(item, index) in list" :key="index">
|
||||||
<image class="brand-pic" :src="$util.img(item.image_url)" mode="aspectFit" @click="handlerClick(item)" @tap="handlerClick(item)" @error="imgError(index)" :style="itemCss"/>
|
<image class="brand-pic" :src="$util.img(item.image_url)" mode="aspectFit" @click="handlerClick(item)" @tap="handlerClick(item)" @error="imgError(index)" :style="itemCss"/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -164,7 +164,7 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style>
|
||||||
/* 固定显示 */
|
/* 固定显示 */
|
||||||
.graphic-nav.fixed-layout>>>.uni-scroll-view-content {
|
.graphic-nav.fixed-layout>>>.uni-scroll-view-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -37,4 +37,4 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss"></style>
|
<style></style>
|
||||||
|
|||||||
@@ -22,4 +22,4 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss"></style>
|
<style></style>
|
||||||
|
|||||||
@@ -242,7 +242,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
|
.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1457,7 +1457,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.member-complete-info-popup /deep/ .uni-popup__wrapper.bottom,
|
.member-complete-info-popup /deep/ .uni-popup__wrapper.bottom,
|
||||||
.member-complete-info-popup /deep/ .uni-popup__wrapper.bottom .uni-popup__wrapper-box {
|
.member-complete-info-popup /deep/ .uni-popup__wrapper.bottom .uni-popup__wrapper-box {
|
||||||
border-top-left-radius: 30rpx !important;
|
border-top-left-radius: 30rpx !important;
|
||||||
|
|||||||
@@ -179,7 +179,7 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style>
|
||||||
/* 单行滑动 */
|
/* 单行滑动 */
|
||||||
.merch-nav.singleSlide>>>.uni-scroll-view-content {
|
.merch-nav.singleSlide>>>.uni-scroll-view-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<scroll-view class="diy-notes-box" scroll-x="true" show-scrollbar="true">
|
<scroll-view class="diy-notes-box" scroll-x="true" show-scrollbar="true">
|
||||||
<view class="notes-box-item" v-for="(item, i) in dataList" :key="item.note_id || i" @click="handlerClick(item)" @tap="handlerClick(item)"
|
<view class="notes-box-item" v-for="(item, i) in dataList" :key="i" @click="handlerClick(item)" @tap="handlerClick(item)"
|
||||||
:style="notesItemStyle">
|
:style="notesItemStyle">
|
||||||
<view class="notes-item" v-if="item.status == 1">
|
<view class="notes-item" v-if="item.status == 1">
|
||||||
<view class="notes-item-con">
|
<view class="notes-item-con">
|
||||||
|
|||||||
@@ -79,7 +79,7 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style>
|
||||||
.quick-nav >>> .uni-scroll-view-content {
|
.quick-nav >>> .uni-scroll-view-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,7 +27,7 @@
|
|||||||
|
|
||||||
<view class="content-wrap">
|
<view class="content-wrap">
|
||||||
<template v-if="value.template == 'row1-of1'">
|
<template v-if="value.template == 'row1-of1'">
|
||||||
<view class="item" v-for="(item, index) in dataList" :key="item.goods_id || index" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
<view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||||
</view>
|
</view>
|
||||||
@@ -82,7 +82,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="value.template == 'row1-of2'">
|
<template v-if="value.template == 'row1-of2'">
|
||||||
<view class="item" v-for="(item, index) in dataList" :key="item.goods_id || index" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
<view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||||
</view>
|
</view>
|
||||||
@@ -119,7 +119,7 @@
|
|||||||
|
|
||||||
<template v-if="value.template == 'horizontal-slide'">
|
<template v-if="value.template == 'horizontal-slide'">
|
||||||
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
|
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
|
||||||
<view class="item" v-for="(item, index) in dataList" :key="item.goods_id || index" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
<view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||||
</view>
|
</view>
|
||||||
@@ -147,7 +147,7 @@
|
|||||||
</scroll-view>
|
</scroll-view>
|
||||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
|
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
|
||||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex" :class="['swiper-item', dataList[pageIndex] && [dataList[pageIndex].length / 3].length >= 1 && 'flex-between']">
|
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex" :class="['swiper-item', dataList[pageIndex] && [dataList[pageIndex].length / 3].length >= 1 && 'flex-between']">
|
||||||
<view class="item" v-for="(item, dataIndex) in dataList[pageIndex]" :key="item.goods_id || dataIndex" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
<view class="item" v-for="(item, dataIndex) in dataList[pageIndex]" :key="dataIndex" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(dataIndex, pageIndex)"/>
|
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(dataIndex, pageIndex)"/>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<view class="diy-store-label">
|
<view class="diy-store-label">
|
||||||
<block v-if="businessConfig.store_business == 'store'">
|
<block v-if="businessConfig.store_business == 'store'">
|
||||||
<scroll-view scroll-x="true" :class="[value.contentStyle, { between: list.length == 3 }]" :style="storeLabelWrapCss" :enable-flex="true">
|
<scroll-view scroll-x="true" :class="[value.contentStyle, { between: list.length == 3 }]" :style="storeLabelWrapCss" :enable-flex="true">
|
||||||
<view v-for="(item, index) in storeLabel" :key="item.label_id || index" :class="['item']">
|
<view v-for="(item, index) in storeLabel" :key="index" :class="['item']">
|
||||||
<diy-icon v-if="value.icon" class="icon-box" :icon="value.icon" :value="value.style ? value.style : 'null'"></diy-icon>
|
<diy-icon v-if="value.icon" class="icon-box" :icon="value.icon" :value="value.style ? value.style : 'null'"></diy-icon>
|
||||||
<text class="label-name" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ item }}</text>
|
<text class="label-name" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ item }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -43,7 +43,7 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
video {
|
video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -452,4 +452,4 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '@/common/css/goods_detail.scss';
|
@import '@/common/css/goods_detail.scss';
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped></style>
|
<style scoped></style>
|
||||||
@@ -47,6 +47,6 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
@import './mescroll-down.css';
|
@import './mescroll-down.css';
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
/* 无任何数据的空布局 */
|
/* 无任何数据的空布局 */
|
||||||
.mescroll-empty {
|
.mescroll-empty {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
/* 回到顶部的按钮 */
|
/* 回到顶部的按钮 */
|
||||||
.mescroll-totop {
|
.mescroll-totop {
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
|||||||
@@ -34,6 +34,6 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
@import './mescroll-up.css';
|
@import './mescroll-up.css';
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -291,7 +291,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
@import './mescroll-body.css';
|
@import './mescroll-body.css';
|
||||||
@import './components/mescroll-down.css';
|
@import './components/mescroll-down.css';
|
||||||
@import './components/mescroll-up.css';
|
@import './components/mescroll-up.css';
|
||||||
|
|||||||
@@ -422,7 +422,7 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
@import './mescroll-uni.css';
|
@import './mescroll-uni.css';
|
||||||
@import './components/mescroll-down.css';
|
@import './components/mescroll-down.css';
|
||||||
@import './components/mescroll-up.css';
|
@import './components/mescroll-up.css';
|
||||||
|
|||||||
@@ -164,7 +164,7 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.register-box /deep/ .uni-scroll-view {
|
.register-box /deep/ .uni-scroll-view {
|
||||||
background: unset !important;
|
background: unset !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
.ns-goods-action {
|
.ns-goods-action {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|||||||
@@ -768,7 +768,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .reward-popup .uni-popup__wrapper-box {
|
/deep/ .reward-popup .uni-popup__wrapper-box {
|
||||||
background: none !important;
|
background: none !important;
|
||||||
max-width: unset !important;
|
max-width: unset !important;
|
||||||
|
|||||||
@@ -171,7 +171,7 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .newgift-content uni-image {
|
/deep/ .newgift-content uni-image {
|
||||||
width: 113rpx !important;
|
width: 113rpx !important;
|
||||||
height: 24rpx !important;
|
height: 24rpx !important;
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style>
|
||||||
.weui-switch {
|
.weui-switch {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -1,305 +1,305 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="pick-regions">
|
<view class="pick-regions">
|
||||||
<!-- #ifndef MP-ALIPAY -->
|
<!-- #ifndef MP-ALIPAY -->
|
||||||
<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="handleValueChange" @columnchange="handleColumnChange">
|
<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="handleValueChange" @columnchange="handleColumnChange">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</picker>
|
</picker>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
|
|
||||||
<!-- #ifdef MP-ALIPAY -->
|
<!-- #ifdef MP-ALIPAY -->
|
||||||
<view @click="$refs.regionsRef.open()">
|
<view @click="$refs.regionsRef.open()">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<uni-popup type="bottom" ref="regionsRef">
|
<uni-popup type="bottom" ref="regionsRef">
|
||||||
<view class="regions-picker-container">
|
<view class="regions-picker-container">
|
||||||
<view class="picker-header">
|
<view class="picker-header">
|
||||||
<view class="picker-action cancel" @click="$refs.regionsRef.close()">取消</view>
|
<view class="picker-action cancel" @click="$refs.regionsRef.close()">取消</view>
|
||||||
<view class="picker-action confirm" @click="confirmRegions">完成</view>
|
<view class="picker-action confirm" @click="confirmRegions">完成</view>
|
||||||
</view>
|
</view>
|
||||||
<picker-view :value="multiIndex" @change="pickerViewColumnChange" class="picker-view">
|
<picker-view :value="multiIndex" @change="pickerViewColumnChange" class="picker-view">
|
||||||
<picker-view-column v-if="multiArray[0]">
|
<picker-view-column v-if="multiArray[0]">
|
||||||
<view class="item" v-for="(item,index) in multiArray[0]" :key="index">{{item}}</view>
|
<view class="item" v-for="(item,index) in multiArray[0]" :key="index">{{item}}</view>
|
||||||
</picker-view-column>
|
</picker-view-column>
|
||||||
<picker-view-column v-if="multiArray[1]">
|
<picker-view-column v-if="multiArray[1]">
|
||||||
<view class="item" v-for="(item,index) in multiArray[1]" :key="index">{{item}}</view>
|
<view class="item" v-for="(item,index) in multiArray[1]" :key="index">{{item}}</view>
|
||||||
</picker-view-column>
|
</picker-view-column>
|
||||||
<picker-view-column v-if="multiArray[2]">
|
<picker-view-column v-if="multiArray[2]">
|
||||||
<view class="item" v-for="(item,index) in multiArray[2]" :key="index">{{item}}</view>
|
<view class="item" v-for="(item,index) in multiArray[2]" :key="index">{{item}}</view>
|
||||||
</picker-view-column>
|
</picker-view-column>
|
||||||
</picker-view>
|
</picker-view>
|
||||||
</view>
|
</view>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
defaultRegions: {
|
defaultRegions: {
|
||||||
type: Array
|
type: Array
|
||||||
},
|
},
|
||||||
selectArr: {
|
selectArr: {
|
||||||
type: String
|
type: String
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pickerValueArray: [],
|
pickerValueArray: [],
|
||||||
cityArr: [],
|
cityArr: [],
|
||||||
districtArr: [],
|
districtArr: [],
|
||||||
multiIndex: [0, 0, 0],
|
multiIndex: [0, 0, 0],
|
||||||
isInitMultiArray: false,
|
isInitMultiArray: false,
|
||||||
// 是否加载完默认地区
|
// 是否加载完默认地区
|
||||||
isLoadDefaultAreas: false
|
isLoadDefaultAreas: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
defaultRegions: {
|
defaultRegions: {
|
||||||
handler(arr, oldArr = []) {
|
handler(arr, oldArr = []) {
|
||||||
// 避免传的是字面量的时候重复触发
|
// 避免传的是字面量的时候重复触发
|
||||||
if (arr.length != this.selectArr || arr.join('') === oldArr.join('')) return;
|
if (arr.length != this.selectArr || arr.join('') === oldArr.join('')) return;
|
||||||
this.isInitMultiArray = false;
|
this.isInitMultiArray = false;
|
||||||
this.handleDefaultRegions();
|
this.handleDefaultRegions();
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
multiArray() {
|
multiArray() {
|
||||||
if (!this.isLoadDefaultAreas) return;
|
if (!this.isLoadDefaultAreas) return;
|
||||||
var arr = this.pickedArr.map(arr => arr.map(item => item.label));
|
var arr = this.pickedArr.map(arr => arr.map(item => item.label));
|
||||||
return arr;
|
return arr;
|
||||||
},
|
},
|
||||||
pickedArr() {
|
pickedArr() {
|
||||||
// 进行初始化
|
// 进行初始化
|
||||||
if (this.isInitMultiArray) {
|
if (this.isInitMultiArray) {
|
||||||
if (this.selectArr == '2') {
|
if (this.selectArr == '2') {
|
||||||
return [this.pickerValueArray[0], this.pickerValueArray[1]];
|
return [this.pickerValueArray[0], this.pickerValueArray[1]];
|
||||||
} else {
|
} else {
|
||||||
return [this.pickerValueArray[0], this.pickerValueArray[1], this.pickerValueArray[2]];
|
return [this.pickerValueArray[0], this.pickerValueArray[1], this.pickerValueArray[2]];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.selectArr == '2') {
|
if (this.selectArr == '2') {
|
||||||
return [this.pickerValueArray[0], this.cityArr];
|
return [this.pickerValueArray[0], this.cityArr];
|
||||||
} else {
|
} else {
|
||||||
return [this.pickerValueArray[0], this.cityArr, this.districtArr];
|
return [this.pickerValueArray[0], this.cityArr, this.districtArr];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getDefaultAreas(0, { level: 0 });
|
this.getDefaultAreas(0, { level: 0 });
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async pickerViewColumnChange(e) {
|
async pickerViewColumnChange(e) {
|
||||||
var value = e.detail.value;
|
var value = e.detail.value;
|
||||||
if (value[0] != this.multiIndex[0]) {
|
if (value[0] != this.multiIndex[0]) {
|
||||||
await this.handleColumnChange({ detail: { column: 0, value: value[0] } })
|
await this.handleColumnChange({ detail: { column: 0, value: value[0] } })
|
||||||
this.multiIndex[1] = e.detail.value[1] || 0;
|
this.multiIndex[1] = e.detail.value[1] || 0;
|
||||||
await this.handleColumnChange({ detail: { column: 1, value: value[1] } })
|
await this.handleColumnChange({ detail: { column: 1, value: value[1] } })
|
||||||
this.multiIndex[2] = e.detail.value[2] || 0;
|
this.multiIndex[2] = e.detail.value[2] || 0;
|
||||||
} else if (value[1] != this.multiIndex[1]) {
|
} else if (value[1] != this.multiIndex[1]) {
|
||||||
await this.handleColumnChange({ detail: { column: 1, value: value[1] } })
|
await this.handleColumnChange({ detail: { column: 1, value: value[1] } })
|
||||||
this.multiIndex[2] = e.detail.value[2] || 0;
|
this.multiIndex[2] = e.detail.value[2] || 0;
|
||||||
} else {
|
} else {
|
||||||
this.multiIndex = value
|
this.multiIndex = value
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
confirmRegions() {
|
confirmRegions() {
|
||||||
this.handleValueChange({ detail: { value: this.multiIndex } })
|
this.handleValueChange({ detail: { value: this.multiIndex } })
|
||||||
this.$refs.regionsRef.close()
|
this.$refs.regionsRef.close()
|
||||||
},
|
},
|
||||||
async handleColumnChange(e) {
|
async handleColumnChange(e) {
|
||||||
this.isInitMultiArray = false;
|
this.isInitMultiArray = false;
|
||||||
let col = e.detail.column;
|
let col = e.detail.column;
|
||||||
let row = e.detail.value;
|
let row = e.detail.value;
|
||||||
this.multiIndex[col] = row;
|
this.multiIndex[col] = row;
|
||||||
switch (col) {
|
switch (col) {
|
||||||
case 0:
|
case 0:
|
||||||
//选择省，加载市、区县
|
//选择省，加载市、区县
|
||||||
this.cityArr = await this.getAreasAsync(this.pickerValueArray[0][this.multiIndex[col]].value);
|
this.cityArr = await this.getAreasAsync(this.pickerValueArray[0][this.multiIndex[col]].value);
|
||||||
this.districtArr = await this.getAreasAsync(this.cityArr[0].value);
|
this.districtArr = await this.getAreasAsync(this.cityArr[0].value);
|
||||||
break;
|
break;
|
||||||
case 1:
|
case 1:
|
||||||
//选择市，加载区县
|
//选择市，加载区县
|
||||||
this.districtArr = await this.getAreasAsync(this.cityArr[this.multiIndex[col]].value);
|
this.districtArr = await this.getAreasAsync(this.cityArr[this.multiIndex[col]].value);
|
||||||
break;
|
break;
|
||||||
case 2:
|
case 2:
|
||||||
if (!this.cityArr.length) this.cityArr = await this.getAreasAsync(this.pickerValueArray[0][0].value)
|
if (!this.cityArr.length) this.cityArr = await this.getAreasAsync(this.pickerValueArray[0][0].value)
|
||||||
if (!this.districtArr.length) this.districtArr = await this.getAreasAsync(this.cityArr[0].value);
|
if (!this.districtArr.length) this.districtArr = await this.getAreasAsync(this.cityArr[0].value);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleValueChange(e) {
|
handleValueChange(e) {
|
||||||
// 结构赋值
|
// 结构赋值
|
||||||
let [index0, index1, index2] = e.detail.value;
|
let [index0, index1, index2] = e.detail.value;
|
||||||
let [arr0, arr1, arr2] = this.pickedArr;
|
let [arr0, arr1, arr2] = this.pickedArr;
|
||||||
let address = '';
|
let address = '';
|
||||||
if (this.selectArr == '2') {
|
if (this.selectArr == '2') {
|
||||||
address = [arr0[index0], arr1[index1]];
|
address = [arr0[index0], arr1[index1]];
|
||||||
} else {
|
} else {
|
||||||
address = [arr0[index0], arr1[index1], arr2[index2]];
|
address = [arr0[index0], arr1[index1], arr2[index2]];
|
||||||
}
|
}
|
||||||
this.$emit('getRegions', address);
|
this.$emit('getRegions', address);
|
||||||
},
|
},
|
||||||
handleDefaultRegions() {
|
handleDefaultRegions() {
|
||||||
var time = setInterval(() => {
|
var time = setInterval(() => {
|
||||||
// if (!this.isLoadDefaultAreas) return;
|
// if (!this.isLoadDefaultAreas) return;
|
||||||
// console.log('this.pickerValueArray',this.pickerValueArray)
|
// console.log('this.pickerValueArray',this.pickerValueArray)
|
||||||
for (let i = 0; i < this.defaultRegions.length; i++) {
|
for (let i = 0; i < this.defaultRegions.length; i++) {
|
||||||
if(this.pickerValueArray[i] == null) continue;
|
if(this.pickerValueArray[i] == null) continue;
|
||||||
for (let j = 0; j < this.pickerValueArray[i].length; j++) {
|
for (let j = 0; j < this.pickerValueArray[i].length; j++) {
|
||||||
// 匹配省
|
// 匹配省
|
||||||
if ((this.defaultRegions[i] == this.pickerValueArray[i][j].value || this.defaultRegions[i] == this.pickerValueArray[i][j].label) && this.pickerValueArray[i][j].level == 1) {
|
if ((this.defaultRegions[i] == this.pickerValueArray[i][j].value || this.defaultRegions[i] == this.pickerValueArray[i][j].label) && this.pickerValueArray[i][j].level == 1) {
|
||||||
// 设置选中省
|
// 设置选中省
|
||||||
this.$set(this.multiIndex, i, j);
|
this.$set(this.multiIndex, i, j);
|
||||||
|
|
||||||
// 查询市
|
// 查询市
|
||||||
this.getAreas(this.pickerValueArray[i][j].value, data => {
|
this.getAreas(this.pickerValueArray[i][j].value, data => {
|
||||||
this.cityArr = data;
|
this.cityArr = data;
|
||||||
this.$set(this.pickerValueArray, 1, data)
|
this.$set(this.pickerValueArray, 1, data)
|
||||||
for (let k = 0; k < this.cityArr.length; k++) {
|
for (let k = 0; k < this.cityArr.length; k++) {
|
||||||
if (this.defaultRegions[1] == this.cityArr[k].value || this.defaultRegions[1] == this.cityArr[k].label) {
|
if (this.defaultRegions[1] == this.cityArr[k].value || this.defaultRegions[1] == this.cityArr[k].label) {
|
||||||
// 设置选中市
|
// 设置选中市
|
||||||
this.$set(this.multiIndex, 1, k);
|
this.$set(this.multiIndex, 1, k);
|
||||||
|
|
||||||
// 查询区县
|
// 查询区县
|
||||||
this.getAreas(this.cityArr[k].value, data => {
|
this.getAreas(this.cityArr[k].value, data => {
|
||||||
this.districtArr = data;
|
this.districtArr = data;
|
||||||
this.$set(this.pickerValueArray, 2, data)
|
this.$set(this.pickerValueArray, 2, data)
|
||||||
|
|
||||||
// 设置选中区县
|
// 设置选中区县
|
||||||
for (let u = 0; u < this.districtArr
|
for (let u = 0; u < this.districtArr
|
||||||
.length; u++) {
|
.length; u++) {
|
||||||
if (this.defaultRegions[2] == this.districtArr[u].value || this.defaultRegions[2] == this.districtArr[u].label) {
|
if (this.defaultRegions[2] == this.districtArr[u].value || this.defaultRegions[2] == this.districtArr[u].label) {
|
||||||
this.$set(this.multiIndex, 2, u);
|
this.$set(this.multiIndex, 2, u);
|
||||||
this.handleValueChange({
|
this.handleValueChange({
|
||||||
detail: {
|
detail: {
|
||||||
value: [j, k, u]
|
value: [j, k, u]
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.isLoadDefaultAreas) clearInterval(time);
|
if (this.isLoadDefaultAreas) clearInterval(time);
|
||||||
}, 100);
|
}, 100);
|
||||||
},
|
},
|
||||||
getDefaultAreas(pid, obj) {
|
getDefaultAreas(pid, obj) {
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
url: '/api/address/lists',
|
url: '/api/address/lists',
|
||||||
data: { pid: pid },
|
data: { pid: pid },
|
||||||
success: res => {
|
success: res => {
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
var data = [];
|
var data = [];
|
||||||
var selected = undefined;
|
var selected = undefined;
|
||||||
res.data.forEach((item, index) => {
|
res.data.forEach((item, index) => {
|
||||||
if (obj != undefined) {
|
if (obj != undefined) {
|
||||||
if (obj.level == 0 && obj.province_id != undefined) {
|
if (obj.level == 0 && obj.province_id != undefined) {
|
||||||
selected = obj.province_id;
|
selected = obj.province_id;
|
||||||
} else if (obj.level == 1 && obj.city_id != undefined) {
|
} else if (obj.level == 1 && obj.city_id != undefined) {
|
||||||
selected = obj.city_id;
|
selected = obj.city_id;
|
||||||
} else if (obj.level == 2 && obj.district_id != undefined) {
|
} else if (obj.level == 2 && obj.district_id != undefined) {
|
||||||
selected = obj.district_id;
|
selected = obj.district_id;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (selected == undefined && index == 0) {
|
if (selected == undefined && index == 0) {
|
||||||
selected = item.id;
|
selected = item.id;
|
||||||
}
|
}
|
||||||
data.push({
|
data.push({
|
||||||
value: item.id,
|
value: item.id,
|
||||||
label: item.name,
|
label: item.name,
|
||||||
level: item.level
|
level: item.level
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
this.pickerValueArray[obj.level] = data;
|
this.pickerValueArray[obj.level] = data;
|
||||||
if (obj.level + 1 < 3) {
|
if (obj.level + 1 < 3) {
|
||||||
obj.level++;
|
obj.level++;
|
||||||
this.getDefaultAreas(selected, obj);
|
this.getDefaultAreas(selected, obj);
|
||||||
} else {
|
} else {
|
||||||
this.isInitMultiArray = true;
|
this.isInitMultiArray = true;
|
||||||
this.isLoadDefaultAreas = true;
|
this.isLoadDefaultAreas = true;
|
||||||
this.handleDefaultRegions()
|
this.handleDefaultRegions()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 同步获取地区
|
// 同步获取地区
|
||||||
async getAreasAsync(pid) {
|
async getAreasAsync(pid) {
|
||||||
let res = await this.$api.sendRequest({
|
let res = await this.$api.sendRequest({
|
||||||
url: '/api/address/lists',
|
url: '/api/address/lists',
|
||||||
data: { pid: pid },
|
data: { pid: pid },
|
||||||
async: false
|
async: false
|
||||||
});
|
});
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
var data = [];
|
var data = [];
|
||||||
res.data.forEach((item, index) => {
|
res.data.forEach((item, index) => {
|
||||||
data.push({
|
data.push({
|
||||||
value: item.id,
|
value: item.id,
|
||||||
label: item.name,
|
label: item.name,
|
||||||
level: item.level
|
level: item.level
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 异步获取地区
|
// 异步获取地区
|
||||||
getAreas(pid, callback) {
|
getAreas(pid, callback) {
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
url: '/api/address/lists',
|
url: '/api/address/lists',
|
||||||
data: { pid: pid },
|
data: { pid: pid },
|
||||||
success: res => {
|
success: res => {
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
var data = [];
|
var data = [];
|
||||||
res.data.forEach((item, index) => {
|
res.data.forEach((item, index) => {
|
||||||
data.push({
|
data.push({
|
||||||
value: item.id,
|
value: item.id,
|
||||||
label: item.name,
|
label: item.name,
|
||||||
level: item.level
|
level: item.level
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
if (callback) callback(data);
|
if (callback) callback(data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.regions-picker-container {
|
.regions-picker-container {
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
|
||||||
.picker-header {
|
.picker-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 2rpx solid #f5f5f5;
|
border-bottom: 2rpx solid #f5f5f5;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.picker-action {
|
.picker-action {
|
||||||
padding: 0 28rpx;
|
padding: 0 28rpx;
|
||||||
font-size: 34rpx;
|
font-size: 34rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirm {
|
.confirm {
|
||||||
color: #007aff;
|
color: #007aff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -150,7 +150,7 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.register-box /deep/ .uni-scroll-view {
|
.register-box /deep/ .uni-scroll-view {
|
||||||
background: unset !important;
|
background: unset !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
/* 回到顶部的按钮 */
|
/* 回到顶部的按钮 */
|
||||||
.mescroll-totop {
|
.mescroll-totop {
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
.uni-badge {
|
.uni-badge {
|
||||||
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|||||||
@@ -80,7 +80,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
|
|
||||||
.uni-drawer {
|
.uni-drawer {
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
@@ -123,7 +123,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
.uni-grid-item {
|
.uni-grid-item {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -84,7 +84,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
|
|
||||||
.uni-grid {
|
.uni-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -93,7 +93,7 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style>
|
||||||
|
|
||||||
.uni-popup {
|
.uni-popup {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
@@ -94,7 +94,7 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style>
|
||||||
|
|
||||||
.uni-popup {
|
.uni-popup {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
@@ -105,7 +105,7 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style>
|
||||||
.uni-popup {
|
.uni-popup {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
|
|
||||||
.uni-tag {
|
.uni-tag {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|||||||
@@ -210,7 +210,7 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.uv-count-num {
|
.uv-count-num {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -1,232 +1,232 @@
|
|||||||
<template>
|
<template>
|
||||||
<view v-if="showPop">
|
<view v-if="showPop">
|
||||||
<view class="privacy-mask">
|
<view class="privacy-mask">
|
||||||
<view class="privacy-wrap">
|
<view class="privacy-wrap">
|
||||||
<view class="privacy-title">用户隐私保护提示</view>
|
<view class="privacy-title">用户隐私保护提示</view>
|
||||||
<view class="privacy-desc">
|
<view class="privacy-desc">
|
||||||
感谢您使用本小程序，在使用前您应当阅读并同意
|
感谢您使用本小程序，在使用前您应当阅读并同意
|
||||||
<text class="privacy-link" @tap="openPrivacyContract">{{privacyContractName}}</text>，
|
<text class="privacy-link" @tap="openPrivacyContract">{{privacyContractName}}</text>，
|
||||||
当点击同意并继续时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用小程序相关功能。
|
当点击同意并继续时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用小程序相关功能。
|
||||||
</view>
|
</view>
|
||||||
<view class="privacy-button-flex">
|
<view class="privacy-button-flex">
|
||||||
<button class="privacy-button-btn bg-disagree" @tap="handleDisagree">不同意</button>
|
<button class="privacy-button-btn bg-disagree" @tap="handleDisagree">不同意</button>
|
||||||
<button id="agree-btn" class="privacy-button-btn bg-agree" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgree">同意并继续</button>
|
<button id="agree-btn" class="privacy-button-btn bg-agree" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgree">同意并继续</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
agree: false,
|
agree: false,
|
||||||
showPop: false,
|
showPop: false,
|
||||||
privacyAuthorization: null,
|
privacyAuthorization: null,
|
||||||
privacyResolves: new Set(),
|
privacyResolves: new Set(),
|
||||||
closeOtherPagePopUpHooks: new Set(),
|
closeOtherPagePopUpHooks: new Set(),
|
||||||
privacyContractName: '用户隐私保护指引'
|
privacyContractName: '用户隐私保护指引'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.init()
|
this.init()
|
||||||
this.curPageShow()
|
this.curPageShow()
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
let that = this
|
let that = this
|
||||||
//查询微信侧记录的用户是否有待同意的隐私政策信息
|
//查询微信侧记录的用户是否有待同意的隐私政策信息
|
||||||
try {
|
try {
|
||||||
wx.getPrivacySetting({
|
wx.getPrivacySetting({
|
||||||
success(res) {
|
success(res) {
|
||||||
// console.log('隐私政策信息', res);
|
// console.log('隐私政策信息', res);
|
||||||
// console.log(res.privacyContractName);
|
// console.log(res.privacyContractName);
|
||||||
that.privacyContractName = res.privacyContractName
|
that.privacyContractName = res.privacyContractName
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// console.log("=========低版本基础库==========")
|
// console.log("=========低版本基础库==========")
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 监听何时需要提示用户阅读隐私政策
|
// 监听何时需要提示用户阅读隐私政策
|
||||||
init() {
|
init() {
|
||||||
let that = this;
|
let that = this;
|
||||||
if (wx.onNeedPrivacyAuthorization) {
|
if (wx.onNeedPrivacyAuthorization) {
|
||||||
wx.onNeedPrivacyAuthorization((resolve) => {
|
wx.onNeedPrivacyAuthorization((resolve) => {
|
||||||
if (typeof that.privacyAuthorization === 'function') {
|
if (typeof that.privacyAuthorization === 'function') {
|
||||||
that.privacyAuthorization(resolve)
|
that.privacyAuthorization(resolve)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
proactive() {
|
proactive() {
|
||||||
let that = this
|
let that = this
|
||||||
if (wx.getPrivacySetting) {
|
if (wx.getPrivacySetting) {
|
||||||
wx.getPrivacySetting({
|
wx.getPrivacySetting({
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
// console.log(res)
|
// console.log(res)
|
||||||
if (res.needAuthorization) {
|
if (res.needAuthorization) {
|
||||||
that.popUp()
|
that.popUp()
|
||||||
// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
|
// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
|
||||||
this.closeOtherPagePopUp(this.disPopUp)
|
this.closeOtherPagePopUp(this.disPopUp)
|
||||||
} else {
|
} else {
|
||||||
this.$emit('agree')
|
this.$emit('agree')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.$emit('agree')
|
this.$emit('agree')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//初始化监听程序
|
//初始化监听程序
|
||||||
curPageShow() {
|
curPageShow() {
|
||||||
this.privacyAuthorization = resolve => {
|
this.privacyAuthorization = resolve => {
|
||||||
this.privacyResolves.add(resolve)
|
this.privacyResolves.add(resolve)
|
||||||
//打开弹窗
|
//打开弹窗
|
||||||
this.popUp()
|
this.popUp()
|
||||||
// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
|
// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
|
||||||
this.closeOtherPagePopUp(this.disPopUp)
|
this.closeOtherPagePopUp(this.disPopUp)
|
||||||
}
|
}
|
||||||
this.closeOtherPagePopUpHooks.add(this.disPopUp)
|
this.closeOtherPagePopUpHooks.add(this.disPopUp)
|
||||||
},
|
},
|
||||||
// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
|
// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
|
||||||
closeOtherPagePopUp(closePopUp) {
|
closeOtherPagePopUp(closePopUp) {
|
||||||
this.closeOtherPagePopUpHooks.forEach(hook => {
|
this.closeOtherPagePopUpHooks.forEach(hook => {
|
||||||
if (closePopUp !== hook) {
|
if (closePopUp !== hook) {
|
||||||
hook()
|
hook()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
//打开隐私协议
|
//打开隐私协议
|
||||||
openPrivacyContract() {
|
openPrivacyContract() {
|
||||||
wx.openPrivacyContract({
|
wx.openPrivacyContract({
|
||||||
success(res) {
|
success(res) {
|
||||||
// console.log('打开隐私协议', res);
|
// console.log('打开隐私协议', res);
|
||||||
},
|
},
|
||||||
fail(err) {
|
fail(err) {
|
||||||
// console.error('打开隐私协议失败', err)
|
// console.error('打开隐私协议失败', err)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 不同意
|
// 不同意
|
||||||
handleDisagree() {
|
handleDisagree() {
|
||||||
this.privacyResolves.forEach(resolve => {
|
this.privacyResolves.forEach(resolve => {
|
||||||
resolve({
|
resolve({
|
||||||
event: 'disagree',
|
event: 'disagree',
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
this.privacyResolves.clear()
|
this.privacyResolves.clear()
|
||||||
//关闭弹窗
|
//关闭弹窗
|
||||||
this.disPopUp()
|
this.disPopUp()
|
||||||
//退出小程序
|
//退出小程序
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
content: '未同意隐私协议，无法使用相关功能',
|
content: '未同意隐私协议，无法使用相关功能',
|
||||||
success: () => {
|
success: () => {
|
||||||
this.$emit('disagree')
|
this.$emit('disagree')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 同意并继续
|
// 同意并继续
|
||||||
handleAgree() {
|
handleAgree() {
|
||||||
this.privacyResolves.forEach(resolve => {
|
this.privacyResolves.forEach(resolve => {
|
||||||
resolve({
|
resolve({
|
||||||
event: 'agree',
|
event: 'agree',
|
||||||
buttonId: 'agree-btn'
|
buttonId: 'agree-btn'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
this.privacyResolves.clear()
|
this.privacyResolves.clear()
|
||||||
//关闭弹窗
|
//关闭弹窗
|
||||||
this.disPopUp()
|
this.disPopUp()
|
||||||
this.$emit('agree')
|
this.$emit('agree')
|
||||||
},
|
},
|
||||||
//打开弹窗
|
//打开弹窗
|
||||||
popUp() {
|
popUp() {
|
||||||
if (this.showPop === false) {
|
if (this.showPop === false) {
|
||||||
this.showPop = true
|
this.showPop = true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//关闭弹窗
|
//关闭弹窗
|
||||||
disPopUp() {
|
disPopUp() {
|
||||||
if (this.showPop === true) {
|
if (this.showPop === true) {
|
||||||
this.showPop = false
|
this.showPop = false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.privacy-mask {
|
.privacy-mask {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 5000;
|
z-index: 5000;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.privacy-wrap {
|
.privacy-wrap {
|
||||||
width: 632rpx;
|
width: 632rpx;
|
||||||
padding: 48rpx 30rpx;
|
padding: 48rpx 30rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.privacy-title {
|
.privacy-title {
|
||||||
padding: 0rpx 30rpx 40rpx 30rpx;
|
padding: 0rpx 30rpx 40rpx 30rpx;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.privacy-desc {
|
.privacy-desc {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #555;
|
color: #555;
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0 40rpx;
|
padding: 0 40rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.privacy-link {
|
.privacy-link {
|
||||||
color: #2f80ed;
|
color: #2f80ed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.privacy-button-flex {
|
.privacy-button-flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 20rpx 40rpx;
|
padding: 20rpx 40rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.privacy-button-btn {
|
.privacy-button-btn {
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 100rpx;
|
line-height: 100rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
border: none;
|
border: none;
|
||||||
background: #07c160;
|
background: #07c160;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-right: 30rpx;
|
margin-right: 30rpx;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.privacy-button-btn::after {
|
.privacy-button-btn::after {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-disagree {
|
.bg-disagree {
|
||||||
color: #07c160;
|
color: #07c160;
|
||||||
background: #f2f2f2;
|
background: #f2f2f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-agree {
|
.bg-agree {
|
||||||
margin-right: 0rpx;
|
margin-right: 0rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -35,7 +35,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
|
|
||||||
<view class="view_ul_100" v-for="(item, index) in dataList" :key="item.personnel_id || index" style="margin-bottom: 20rpx;">
|
<view class="view_ul_100" v-for="(item, index) in dataList" :key="index" style="margin-bottom: 20rpx;">
|
||||||
|
|
||||||
<view class="bl clearfix bor bg-white"
|
<view class="bl clearfix bor bg-white"
|
||||||
:style="{ backgroundImage: ' url(' + $util.img(personnel_bg) + ')', backgroundSize: '100% 100%' }">
|
:style="{ backgroundImage: ' url(' + $util.img(personnel_bg) + ')', backgroundSize: '100% 100%' }">
|
||||||
|
|||||||
@@ -562,7 +562,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .action-icon-wrap .iconfont.icon-shouye1 {
|
/deep/ .action-icon-wrap .iconfont.icon-shouye1 {
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -306,7 +306,7 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import './public/css/list.scss';
|
@import './public/css/list.scss';
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
>>>.uni-tag--primary.uni-tag--inverted {
|
>>>.uni-tag--primary.uni-tag--inverted {
|
||||||
background-color: #f5f5f5 !important;
|
background-color: #f5f5f5 !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -194,7 +194,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.swiper /deep/ .uni-swiper-dots-horizontal {
|
.swiper /deep/ .uni-swiper-dots-horizontal {
|
||||||
left: 40%;
|
left: 40%;
|
||||||
bottom:40px
|
bottom:40px
|
||||||
|
|||||||
@@ -93,7 +93,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||||
background: none !important;
|
background: none !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -814,7 +814,7 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import './public/css/detail.scss';
|
@import './public/css/detail.scss';
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.pickup-code-info .code img:nth-child(1) {
|
.pickup-code-info .code img:nth-child(1) {
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -297,7 +297,7 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import './public/css/detail.scss';
|
@import './public/css/detail.scss';
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -442,7 +442,7 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import './public/css/list.scss';
|
@import './public/css/list.scss';
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .uni-page {
|
/deep/ .uni-page {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -53,4 +53,4 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss"></style>
|
<style></style>
|
||||||
|
|||||||
@@ -1,414 +1,414 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<!-- <uni-popup ref="timePopup" type="bottom"> -->
|
<!-- <uni-popup ref="timePopup" type="bottom"> -->
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- <view class="head">
|
<!-- <view class="head">
|
||||||
<text class="title">选择时间</text>
|
<text class="title">选择时间</text>
|
||||||
<text class="iconfont iconclose" @click="close()"></text>
|
<text class="iconfont iconclose" @click="close()"></text>
|
||||||
</view> -->
|
</view> -->
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="date-list-wrap">
|
<view class="date-list-wrap">
|
||||||
<!-- 日期列表 -->
|
<!-- 日期列表 -->
|
||||||
<scroll-view scroll-x>
|
<scroll-view scroll-x>
|
||||||
<block v-for="(item, index) in dateArr" :key="index">
|
<block v-for="(item, index) in dateArr" :key="index">
|
||||||
<div class="flex-box" @click="selectDateEvent(index, item)">
|
<div class="flex-box" @click="selectDateEvent(index, item)">
|
||||||
<view class="date-box" :style="{ color: index == dateActive ? selectedTabColor : '#909399' }">
|
<view class="date-box" :style="{ color: index == dateActive ? selectedTabColor : '#909399' }">
|
||||||
<text>{{ item.week }} {{ item.date }}</text>
|
<text>{{ item.week }} {{ item.date }}</text>
|
||||||
</view>
|
</view>
|
||||||
</div>
|
</div>
|
||||||
</block>
|
</block>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<div class="appointed-day">
|
<div class="appointed-day">
|
||||||
<uni-datetime-picker type="date" :start="pickerStartDay" :end="pickerEndDay" @change="change">
|
<uni-datetime-picker type="date" :start="pickerStartDay" :end="pickerEndDay" @change="change">
|
||||||
<text class="day-box">指定日期</text>
|
<text class="day-box">指定日期</text>
|
||||||
<text class="iconfont iconyoujiantou"></text>
|
<text class="iconfont iconyoujiantou"></text>
|
||||||
</uni-datetime-picker>
|
</uni-datetime-picker>
|
||||||
</div>
|
</div>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 时间选项 -->
|
<!-- 时间选项 -->
|
||||||
<view class="time-box" v-if="!isSection">
|
<view class="time-box" v-if="!isSection">
|
||||||
<block v-for="(item, _index) in timeArr" :key="_index">
|
<block v-for="(item, _index) in timeArr" :key="_index">
|
||||||
<view class="item">
|
<view class="item">
|
||||||
<view class="item-box diy" :class="{ disable: item.disable, active: isMultiple ? item.isActive : _index == timeActive }" @click="selectTimeEvent(_index, item)">
|
<view class="item-box diy" :class="{ disable: item.disable, active: isMultiple ? item.isActive : _index == timeActive }" @click="selectTimeEvent(_index, item)">
|
||||||
<!-- :style="{ color: isMultiple ? (item.isActive ? selectedItemColor : '#333') : _index == timeActive ? selectedItemColor : '#333' }" -->
|
<!-- :style="{ color: isMultiple ? (item.isActive ? selectedItemColor : '#333') : _index == timeActive ? selectedItemColor : '#333' }" -->
|
||||||
<text>{{ item.time }}</text>
|
<text>{{ item.time }}</text>
|
||||||
<!-- <text class="all">{{ item.disable ? disableText : undisableText }}</text> -->
|
<!-- <text class="all">{{ item.disable ? disableText : undisableText }}</text> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 预约时间段 -->
|
<!-- 预约时间段 -->
|
||||||
<view class="time-box" v-else>
|
<view class="time-box" v-else>
|
||||||
<block v-for="(item, _index) in timeArr" :key="_index">
|
<block v-for="(item, _index) in timeArr" :key="_index">
|
||||||
<view class="item">
|
<view class="item">
|
||||||
<view class="item-box" :class="{ disable: item.disable || item.isInclude, active: item.time == timeQuanBegin || item.time == timeQuanEnd }" @click="handleSelectQuantum(_index, item)">
|
<view class="item-box" :class="{ disable: item.disable || item.isInclude, active: item.time == timeQuanBegin || item.time == timeQuanEnd }" @click="handleSelectQuantum(_index, item)">
|
||||||
<!-- :style="{ color: item.time == timeQuanBegin || item.time == timeQuanEnd ? selectedItemColor : '#333' }" -->
|
<!-- :style="{ color: item.time == timeQuanBegin || item.time == timeQuanEnd ? selectedItemColor : '#333' }" -->
|
||||||
<text>{{ item.time }}</text>
|
<text>{{ item.time }}</text>
|
||||||
<text class="all">{{ item.disable ? disableText : undisableText }}</text>
|
<text class="all">{{ item.disable ? disableText : undisableText }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="bottom">
|
<!-- <view class="bottom">
|
||||||
<view class="show-time" v-if="!isMultiple && !isSection">
|
<view class="show-time" v-if="!isMultiple && !isSection">
|
||||||
<text>预约时间：</text>
|
<text>预约时间：</text>
|
||||||
<text class="color-base-text">{{ orderDateTime }}</text>
|
<text class="color-base-text">{{ orderDateTime }}</text>
|
||||||
</view>
|
</view>
|
||||||
<button form-type="submit" type="primary" size="mini" class="submit-btn" @click="handleSubmit">确认预约</button>
|
<button form-type="submit" type="primary" size="mini" class="submit-btn" @click="handleSubmit">确认预约</button>
|
||||||
</view> -->
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="yuyue-date-desc">如不想线上预约，可致电商家电话预约</view> -->
|
<!-- <view class="yuyue-date-desc">如不想线上预约，可致电商家电话预约</view> -->
|
||||||
<!-- </uni-popup> -->
|
<!-- </uni-popup> -->
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 插件地址：https://ext.dcloud.net.cn/plugin?id=3593
|
// 插件地址：https://ext.dcloud.net.cn/plugin?id=3593
|
||||||
import {
|
import {
|
||||||
initData,
|
initData,
|
||||||
initTime,
|
initTime,
|
||||||
timeStamp,
|
timeStamp,
|
||||||
currentTime,
|
currentTime,
|
||||||
strFormat,
|
strFormat,
|
||||||
weekDate
|
weekDate
|
||||||
} from './yuyue-date.js';
|
} from './yuyue-date.js';
|
||||||
export default {
|
export default {
|
||||||
name: 'times',
|
name: 'times',
|
||||||
model: {
|
model: {
|
||||||
prop: 'showPop',
|
prop: 'showPop',
|
||||||
event: 'change'
|
event: 'change'
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
isMultiple: {
|
isMultiple: {
|
||||||
//是否多选
|
//是否多选
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
isSection: {
|
isSection: {
|
||||||
//预约时间段
|
//预约时间段
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
advanceTime: {
|
advanceTime: {
|
||||||
//提前预约时间
|
//提前预约时间
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
default: "0"
|
default: "0"
|
||||||
},
|
},
|
||||||
disableText: {
|
disableText: {
|
||||||
//禁用显示的文本
|
//禁用显示的文本
|
||||||
type: String,
|
type: String,
|
||||||
default: '已约满'
|
default: '已约满'
|
||||||
},
|
},
|
||||||
undisableText: {
|
undisableText: {
|
||||||
//未禁用显示的文本
|
//未禁用显示的文本
|
||||||
type: String,
|
type: String,
|
||||||
default: '可预约'
|
default: '可预约'
|
||||||
},
|
},
|
||||||
timeInterval: {
|
timeInterval: {
|
||||||
// 时间间隔，小时为单位
|
// 时间间隔，小时为单位
|
||||||
type: String,
|
type: String,
|
||||||
default: "1"
|
default: "1"
|
||||||
},
|
},
|
||||||
selectedTabColor: {
|
selectedTabColor: {
|
||||||
// 日期栏选中的颜色
|
// 日期栏选中的颜色
|
||||||
type: String,
|
type: String,
|
||||||
default: '#303133'
|
default: '#303133'
|
||||||
},
|
},
|
||||||
selectedItemColor: {
|
selectedItemColor: {
|
||||||
// 时间选中的颜色
|
// 时间选中的颜色
|
||||||
type: String,
|
type: String,
|
||||||
default: '#D50AEF'
|
default: '#D50AEF'
|
||||||
},
|
},
|
||||||
beginTime: {
|
beginTime: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '09:00'
|
default: '09:00'
|
||||||
},
|
},
|
||||||
endTime: {
|
endTime: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '19:00'
|
default: '19:00'
|
||||||
},
|
},
|
||||||
appointTime: {
|
appointTime: {
|
||||||
// 预约的时间
|
// 预约的时间
|
||||||
type: Array,
|
type: Array,
|
||||||
default () {
|
default () {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
disableTimeSlot: {
|
disableTimeSlot: {
|
||||||
// 预约开始和结束时间，来禁用时间段
|
// 预约开始和结束时间，来禁用时间段
|
||||||
type: Object,
|
type: Object,
|
||||||
default () {
|
default () {
|
||||||
return {};
|
return {};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
disableWeek: {
|
disableWeek: {
|
||||||
// 限制周几不可以预约
|
// 限制周几不可以预约
|
||||||
type: Array,
|
type: Array,
|
||||||
default () {
|
default () {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
appointTime: {
|
appointTime: {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
if (val && val.length) {
|
if (val && val.length) {
|
||||||
this.initOnload();
|
this.initOnload();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beginTime: function(nVal, oVal) {
|
beginTime: function(nVal, oVal) {
|
||||||
this.initOnload();
|
this.initOnload();
|
||||||
this.handleSubmit();
|
this.handleSubmit();
|
||||||
},
|
},
|
||||||
endTime: function(nVal, oVal) {
|
endTime: function(nVal, oVal) {
|
||||||
this.initOnload();
|
this.initOnload();
|
||||||
this.handleSubmit();
|
this.handleSubmit();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pickerStartDay: '', // 指定开始日期
|
pickerStartDay: '', // 指定开始日期
|
||||||
pickerEndDay: '', // 指定结束日期
|
pickerEndDay: '', // 指定结束日期
|
||||||
orderDateTime: '暂无选择', // 选中时间
|
orderDateTime: '暂无选择', // 选中时间
|
||||||
orderTimeArr: {}, //多选的时间
|
orderTimeArr: {}, //多选的时间
|
||||||
dateArr: [], //日期数据
|
dateArr: [], //日期数据
|
||||||
timeArr: [], //时间数据
|
timeArr: [], //时间数据
|
||||||
nowDate: '', // 当前日期
|
nowDate: '', // 当前日期
|
||||||
dateActive: 0, //选中的日期索引
|
dateActive: 0, //选中的日期索引
|
||||||
timeActive: 0, //选中的时间索引
|
timeActive: 0, //选中的时间索引
|
||||||
timeQuanBeginIndex: 0, //时间段开始的下标
|
timeQuanBeginIndex: 0, //时间段开始的下标
|
||||||
selectDate: '', //选择的日期
|
selectDate: '', //选择的日期
|
||||||
selectTime: '', //选择的时间
|
selectTime: '', //选择的时间
|
||||||
timeQuanBegin: '', //时间段开始时间
|
timeQuanBegin: '', //时间段开始时间
|
||||||
timeQuanEnd: '' //时间段结束时间
|
timeQuanEnd: '' //时间段结束时间
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created(props) {
|
created(props) {
|
||||||
this.selectDate = this.nowDate = currentTime().date;
|
this.selectDate = this.nowDate = currentTime().date;
|
||||||
this.pickerStartDay = currentTime().year + '-' + currentTime().date;
|
this.pickerStartDay = currentTime().year + '-' + currentTime().date;
|
||||||
const now = new Date(this.pickerStartDay).getTime(); //获取当前日期的时间戳
|
const now = new Date(this.pickerStartDay).getTime(); //获取当前日期的时间戳
|
||||||
let timeStr = 3600 * 24 * 1000; //一天的时间戳
|
let timeStr = 3600 * 24 * 1000; //一天的时间戳
|
||||||
let day = 90; // 未来3个月
|
let day = 90; // 未来3个月
|
||||||
this.pickerEndDay = timeStamp(now + timeStr * day).allDate;
|
this.pickerEndDay = timeStamp(now + timeStr * day).allDate;
|
||||||
this.initOnload();
|
this.initOnload();
|
||||||
this.dateArr = initData(); // 日期栏初始化
|
this.dateArr = initData(); // 日期栏初始化
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
open() {
|
open() {
|
||||||
this.$refs.timePopup.open();
|
this.$refs.timePopup.open();
|
||||||
},
|
},
|
||||||
close() {
|
close() {
|
||||||
this.$refs.timePopup.close();
|
this.$refs.timePopup.close();
|
||||||
},
|
},
|
||||||
// 指定时间
|
// 指定时间
|
||||||
change(e) {
|
change(e) {
|
||||||
let date = e.split("-");
|
let date = e.split("-");
|
||||||
date = date[1] + "-" + date[2];
|
date = date[1] + "-" + date[2];
|
||||||
if (this.disableWeek.length && date >= weekDate()[0] && date <= weekDate()[1]) {
|
if (this.disableWeek.length && date >= weekDate()[0] && date <= weekDate()[1]) {
|
||||||
let weekBox = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
let weekBox = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||||||
let index = new Date(e).getDay();
|
let index = new Date(e).getDay();
|
||||||
if (this.disableWeek.indexOf(weekBox[index]) != -1) {
|
if (this.disableWeek.indexOf(weekBox[index]) != -1) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: weekBox[index] + '不可以预约',
|
title: weekBox[index] + '不可以预约',
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
})
|
})
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.initOnload(e);
|
this.initOnload(e);
|
||||||
this.dateArr = initData(e); // 日期栏初始化
|
this.dateArr = initData(e); // 日期栏初始化
|
||||||
this.selectDateEvent(0, this.dateArr[0]);
|
this.selectDateEvent(0, this.dateArr[0]);
|
||||||
},
|
},
|
||||||
initOnload(appointedDay) {
|
initOnload(appointedDay) {
|
||||||
this.timeArr = initTime(this.beginTime, this.endTime, parseFloat(this.timeInterval)); //时间选项初始化
|
this.timeArr = initTime(this.beginTime, this.endTime, parseFloat(this.timeInterval)); //时间选项初始化
|
||||||
this.timeQuanBegin = this.timeQuanEnd = '';
|
this.timeQuanBegin = this.timeQuanEnd = '';
|
||||||
let isFullTime = true;
|
let isFullTime = true;
|
||||||
this.timeArr.forEach((item, index) => {
|
this.timeArr.forEach((item, index) => {
|
||||||
// 判断默认是不能选择的周，则都禁止选中
|
// 判断默认是不能选择的周，则都禁止选中
|
||||||
if (this.disableWeek.length && this.selectDate >= weekDate()[0] && this.selectDate <=
|
if (this.disableWeek.length && this.selectDate >= weekDate()[0] && this.selectDate <=
|
||||||
weekDate()[1]) {
|
weekDate()[1]) {
|
||||||
let weekBox = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
let weekBox = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||||||
let date = currentTime().year + '-' + this.selectDate;
|
let date = currentTime().year + '-' + this.selectDate;
|
||||||
let index = new Date(date).getDay();
|
let index = new Date(date).getDay();
|
||||||
if (this.disableWeek.indexOf(weekBox[index]) != -1) {
|
if (this.disableWeek.indexOf(weekBox[index]) != -1) {
|
||||||
item.disable = true;
|
item.disable = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//判断是当前这一天，选中时间小于当前时间则禁用
|
//判断是当前这一天，选中时间小于当前时间则禁用
|
||||||
if (this.selectDate == this.nowDate && currentTime().time > item.time) {
|
if (this.selectDate == this.nowDate && currentTime().time > item.time) {
|
||||||
item.disable = true;
|
item.disable = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 将提前预约的时间禁用 advanceTime
|
// 将提前预约的时间禁用 advanceTime
|
||||||
var advTime = new Date(new Date().setMinutes(new Date().getMinutes() + parseInt(this.advanceTime) * 60));
|
var advTime = new Date(new Date().setMinutes(new Date().getMinutes() + parseInt(this.advanceTime) * 60));
|
||||||
var advTimeStr = strFormat(advTime.getHours()) + ":" + strFormat(advTime.getMinutes()) + ":" + strFormat(advTime.getSeconds());
|
var advTimeStr = strFormat(advTime.getHours()) + ":" + strFormat(advTime.getMinutes()) + ":" + strFormat(advTime.getSeconds());
|
||||||
var advTimeStr1 = strFormat(advTime.getMonth() + 1) + "-" + strFormat(advTime.getDate());
|
var advTimeStr1 = strFormat(advTime.getMonth() + 1) + "-" + strFormat(advTime.getDate());
|
||||||
if (this.selectDate == advTimeStr1 && advTimeStr > item.time || advTimeStr1 > this.selectDate) {
|
if (this.selectDate == advTimeStr1 && advTimeStr > item.time || advTimeStr1 > this.selectDate) {
|
||||||
item.disable = true;
|
item.disable = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 将预约的时间禁用
|
// 将预约的时间禁用
|
||||||
this.appointTime.forEach(t => {
|
this.appointTime.forEach(t => {
|
||||||
let [date, time] = t.split(' ');
|
let [date, time] = t.split(' ');
|
||||||
time = time.slice(0, -3);
|
time = time.slice(0, -3);
|
||||||
|
|
||||||
if (date == currentTime().year + '-' + this.selectDate && item.time == time ||
|
if (date == currentTime().year + '-' + this.selectDate && item.time == time ||
|
||||||
date == currentTime().year + '-' + advTimeStr1 && item.time == time) {
|
date == currentTime().year + '-' + advTimeStr1 && item.time == time) {
|
||||||
item.disable = true;
|
item.disable = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 禁用时间段
|
// 禁用时间段
|
||||||
const cur_time = `${this.selectDate} ${item.time}`;
|
const cur_time = `${this.selectDate} ${item.time}`;
|
||||||
const {
|
const {
|
||||||
begin_time,
|
begin_time,
|
||||||
end_time
|
end_time
|
||||||
} = this.disableTimeSlot;
|
} = this.disableTimeSlot;
|
||||||
if (begin_time && end_time && (begin_time <= cur_time && cur_time <= end_time)) {
|
if (begin_time && end_time && (begin_time <= cur_time && cur_time <= end_time)) {
|
||||||
item.disable = true;
|
item.disable = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 判断是否当前日期时间都被预约
|
// 判断是否当前日期时间都被预约
|
||||||
if (!item.disable) {
|
if (!item.disable) {
|
||||||
isFullTime = false;
|
isFullTime = false;
|
||||||
}
|
}
|
||||||
this.isSection && (item.isInclude = false);
|
this.isSection && (item.isInclude = false);
|
||||||
});
|
});
|
||||||
|
|
||||||
this.orderDateTime = isFullTime ? '暂无选择' : this.selectDate;
|
this.orderDateTime = isFullTime ? '暂无选择' : this.selectDate;
|
||||||
this.timeActive = -1;
|
this.timeActive = -1;
|
||||||
for (let i = 0, len = this.timeArr.length; i < len; i++) {
|
for (let i = 0, len = this.timeArr.length; i < len; i++) {
|
||||||
if (!this.timeArr[i].disable) {
|
if (!this.timeArr[i].disable) {
|
||||||
this.orderDateTime = {
|
this.orderDateTime = {
|
||||||
data: `${this.selectDate}`,
|
data: `${this.selectDate}`,
|
||||||
time: `${this.timeArr[i].time}`
|
time: `${this.timeArr[i].time}`
|
||||||
};
|
};
|
||||||
this.timeActive = i;
|
this.timeActive = i;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 日期选择事件
|
// 日期选择事件
|
||||||
selectDateEvent(index, item) {
|
selectDateEvent(index, item) {
|
||||||
if (this.disableWeek.length && item.date >= weekDate()[0] && item.date <= weekDate()[1]) {
|
if (this.disableWeek.length && item.date >= weekDate()[0] && item.date <= weekDate()[1]) {
|
||||||
let weekBox = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
let weekBox = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||||||
let index = new Date(item.timeStamp).getDay();
|
let index = new Date(item.timeStamp).getDay();
|
||||||
if (this.disableWeek.indexOf(weekBox[index]) != -1) {
|
if (this.disableWeek.indexOf(weekBox[index]) != -1) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: weekBox[index] + '不可以预约',
|
title: weekBox[index] + '不可以预约',
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
})
|
})
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.dateActive = index;
|
this.dateActive = index;
|
||||||
this.selectDate = item.date;
|
this.selectDate = item.date;
|
||||||
this.initOnload();
|
this.initOnload();
|
||||||
this.handleSubmit();
|
this.handleSubmit();
|
||||||
},
|
},
|
||||||
|
|
||||||
// 时间选择事件
|
// 时间选择事件
|
||||||
selectTimeEvent(index, item) {
|
selectTimeEvent(index, item) {
|
||||||
if (item.disable) return;
|
if (item.disable) return;
|
||||||
if (this.isMultiple) {
|
if (this.isMultiple) {
|
||||||
item.isActive = !item.isActive;
|
item.isActive = !item.isActive;
|
||||||
this.timeArr = this.timeArr.slice();
|
this.timeArr = this.timeArr.slice();
|
||||||
this.orderTimeArr[this.selectDate] = this.timeArr.reduce((prev, cur) => {
|
this.orderTimeArr[this.selectDate] = this.timeArr.reduce((prev, cur) => {
|
||||||
cur.isActive && prev.push(cur.time);
|
cur.isActive && prev.push(cur.time);
|
||||||
return prev;
|
return prev;
|
||||||
}, []);
|
}, []);
|
||||||
} else {
|
} else {
|
||||||
this.timeActive = index;
|
this.timeActive = index;
|
||||||
this.selectTime = item.time;
|
this.selectTime = item.time;
|
||||||
this.orderDateTime = {
|
this.orderDateTime = {
|
||||||
data: `${this.selectDate}`,
|
data: `${this.selectDate}`,
|
||||||
time: `${item.time}`
|
time: `${item.time}`
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
this.handleSubmit();
|
this.handleSubmit();
|
||||||
},
|
},
|
||||||
|
|
||||||
// 选择时间段
|
// 选择时间段
|
||||||
handleSelectQuantum(index, item) {
|
handleSelectQuantum(index, item) {
|
||||||
if (item.disable) return;
|
if (item.disable) return;
|
||||||
|
|
||||||
function clearTime() {
|
function clearTime() {
|
||||||
this.timeQuanBeginIndex = index;
|
this.timeQuanBeginIndex = index;
|
||||||
this.timeQuanBegin = item.time;
|
this.timeQuanBegin = item.time;
|
||||||
this.timeQuanEnd = '';
|
this.timeQuanEnd = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this.timeQuanBegin) {
|
if (!this.timeQuanBegin) {
|
||||||
clearTime.call(this);
|
clearTime.call(this);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (!this.timeQuanEnd && this.timeQuanBegin) {
|
if (!this.timeQuanEnd && this.timeQuanBegin) {
|
||||||
let isDisble = false;
|
let isDisble = false;
|
||||||
let start = this.timeQuanBeginIndex;
|
let start = this.timeQuanBeginIndex;
|
||||||
let end = index;
|
let end = index;
|
||||||
start > end && ([start, end] = [end, start]);
|
start > end && ([start, end] = [end, start]);
|
||||||
for (let i = start + 1; i < end; i++) {
|
for (let i = start + 1; i < end; i++) {
|
||||||
if (this.timeArr[i].disable) {
|
if (this.timeArr[i].disable) {
|
||||||
isDisble = true;
|
isDisble = true;
|
||||||
clearTime.call(this);
|
clearTime.call(this);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!isDisble) {
|
if (!isDisble) {
|
||||||
for (let i = start + 1; i < end; i++) {
|
for (let i = start + 1; i < end; i++) {
|
||||||
this.timeArr[i].isInclude = true;
|
this.timeArr[i].isInclude = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.timeQuanEnd = item.time;
|
this.timeQuanEnd = item.time;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.timeQuanBegin && this.timeQuanEnd) {
|
if (this.timeQuanBegin && this.timeQuanEnd) {
|
||||||
this.timeArr.forEach(t => {
|
this.timeArr.forEach(t => {
|
||||||
t.isInclude = false;
|
t.isInclude = false;
|
||||||
});
|
});
|
||||||
clearTime.call(this);
|
clearTime.call(this);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleChange() {
|
handleChange() {
|
||||||
this.timeQuanBegin > this.timeQuanEnd && ([this.timeQuanBegin, this.timeQuanEnd] = [this.timeQuanEnd, this.timeQuanBegin]);
|
this.timeQuanBegin > this.timeQuanEnd && ([this.timeQuanBegin, this.timeQuanEnd] = [this.timeQuanEnd, this.timeQuanBegin]);
|
||||||
},
|
},
|
||||||
handleSubmit() {
|
handleSubmit() {
|
||||||
if (this.isSection) {
|
if (this.isSection) {
|
||||||
this.handleChange();
|
this.handleChange();
|
||||||
this.$emit('change', {
|
this.$emit('change', {
|
||||||
beginTime: `${this.selectDate} ${this.timeQuanBegin}`,
|
beginTime: `${this.selectDate} ${this.timeQuanBegin}`,
|
||||||
endTime: `${this.selectDate} ${this.timeQuanEnd}`
|
endTime: `${this.selectDate} ${this.timeQuanEnd}`
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.isMultiple) {
|
if (this.isMultiple) {
|
||||||
let time = [];
|
let time = [];
|
||||||
for (let date in this.orderTimeArr) {
|
for (let date in this.orderTimeArr) {
|
||||||
this.orderTimeArr[date].forEach(item => {
|
this.orderTimeArr[date].forEach(item => {
|
||||||
time.push(`${date} ${item}`);
|
time.push(`${date} ${item}`);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
this.$emit('change', time);
|
this.$emit('change', time);
|
||||||
} else {
|
} else {
|
||||||
// this.$emit('change', currentTime().year + '-' + this.orderDateTime);
|
// this.$emit('change', currentTime().year + '-' + this.orderDateTime);
|
||||||
this.$emit('change', {
|
this.$emit('change', {
|
||||||
date: currentTime().year + '-' + this.orderDateTime.data,
|
date: currentTime().year + '-' + this.orderDateTime.data,
|
||||||
time: this.orderDateTime.time
|
time: this.orderDateTime.time
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import './yuyue-date.scss';
|
@import './yuyue-date.scss';
|
||||||
</style>
|
</style>
|
||||||
@@ -806,7 +806,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
/deep/ .uni-popup__wrapper-box {
|
/deep/ .uni-popup__wrapper-box {
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -141,7 +141,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
.quick-nav >>> .uni-scroll-view-content {
|
.quick-nav >>> .uni-scroll-view-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -312,7 +312,7 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import './public/css/list.scss';
|
@import './public/css/list.scss';
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
>>>.uni-tag--primary.uni-tag--inverted {
|
>>>.uni-tag--primary.uni-tag--inverted {
|
||||||
background-color: #f5f5f5 !important;
|
background-color: #f5f5f5 !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
<block v-if="categoryTree.length">
|
<block v-if="categoryTree.length">
|
||||||
<scroll-view scroll-y="true" class="tree-wrap">
|
<scroll-view scroll-y="true" class="tree-wrap">
|
||||||
<view class="category-item-wrap">
|
<view class="category-item-wrap">
|
||||||
<view class="category-item" v-for="(item, index) in categoryTree" :key="item.category_id || index" :class="[
|
<view class="category-item" v-for="(item, index) in categoryTree" :key="index" :class="[
|
||||||
{ select: select == index },
|
{ select: select == index },
|
||||||
]" @click="switchOneCategory(index)">
|
]" @click="switchOneCategory(index)">
|
||||||
<view class="">{{ item.category_name }}</view>
|
<view class="">{{ item.category_name }}</view>
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
@scroll="listenScroll" @touchstart="touchStart" :refresher-enabled="true"
|
@scroll="listenScroll" @touchstart="touchStart" :refresher-enabled="true"
|
||||||
refresher-default-style="none" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
|
refresher-default-style="none" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
|
||||||
@refresherrestore="onRestore">
|
@refresherrestore="onRestore">
|
||||||
<view class="child-category" v-for="(item, index) in categoryTree" :key="item.category_id || index" :id="'category-' + index" v-if="item.child_list.length > 0">
|
<view class="child-category" v-for="(item, index) in categoryTree" :key="index" :id="'category-' + index" v-if="item.child_list.length > 0">
|
||||||
<!---->
|
<!---->
|
||||||
<view class="item-wrap category">
|
<view class="item-wrap category">
|
||||||
<view class="category-title">{{ item.category_name }}</view>
|
<view class="category-title">{{ item.category_name }}</view>
|
||||||
|
|||||||
@@ -499,7 +499,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -887,7 +887,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
>>>.uni-tag--primary.uni-tag--inverted {
|
>>>.uni-tag--primary.uni-tag--inverted {
|
||||||
background-color: #f5f5f5 !important;
|
background-color: #f5f5f5 !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -586,7 +586,7 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import './public/css/list.scss';
|
@import './public/css/list.scss';
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss">
|
<style>
|
||||||
.ns-adv>>>image {
|
.ns-adv>>>image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -292,7 +292,7 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "@/common/css/order_parment.scss";
|
@import "@/common/css/order_parment.scss";
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||||
background: none;
|
background: none;
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<view class="about w100">
|
<view class="about w100">
|
||||||
<view class="list_cotact padding-top">
|
<view class="list_cotact padding-top">
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<block v-for="(item, index) in dataList" :key="item.case_id || index">
|
<block v-for="(item, index) in dataList" :key="index">
|
||||||
<view class="view_ul_100" style="margin-bottom:30rpx;">
|
<view class="view_ul_100" style="margin-bottom:30rpx;">
|
||||||
<view class="bl clearfix bor bg-white">
|
<view class="bl clearfix bor bg-white">
|
||||||
<block v-if="item.$orig.case_type === 0">
|
<block v-if="item.$orig.case_type === 0">
|
||||||
@@ -312,7 +312,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.item {
|
.item {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 30rpx 0;
|
padding: 30rpx 0;
|
||||||
|
|||||||
@@ -1360,7 +1360,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
.my-canvas {
|
.my-canvas {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
|
|||||||
@@ -108,7 +108,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
@keyframes twinkling {
|
@keyframes twinkling {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
|
|||||||
@@ -187,7 +187,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
@import './sx-rate/iconfont.css';
|
@import './sx-rate/iconfont.css';
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -1,186 +1,186 @@
|
|||||||
<template>
|
<template>
|
||||||
<view
|
<view
|
||||||
class="uni-calendar-item__weeks-box"
|
class="uni-calendar-item__weeks-box"
|
||||||
:class="{
|
:class="{
|
||||||
'uni-calendar-item--disable': weeks.disable,
|
'uni-calendar-item--disable': weeks.disable,
|
||||||
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
|
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
'uni-calendar-item--before-checked': weeks.beforeMultiple,
|
'uni-calendar-item--before-checked': weeks.beforeMultiple,
|
||||||
'uni-calendar-item--multiple': weeks.multiple,
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
'uni-calendar-item--after-checked': weeks.afterMultiple
|
'uni-calendar-item--after-checked': weeks.afterMultiple
|
||||||
}"
|
}"
|
||||||
@click="choiceDate(weeks)"
|
@click="choiceDate(weeks)"
|
||||||
>
|
>
|
||||||
<view class="uni-calendar-item__weeks-box-item">
|
<view class="uni-calendar-item__weeks-box-item">
|
||||||
<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
|
<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
|
||||||
<text class="uni-calendar-item__weeks-box-text"
|
<text class="uni-calendar-item__weeks-box-text"
|
||||||
:class="{
|
:class="{
|
||||||
'uni-calendar-item--isDay-text': weeks.isDay,
|
'uni-calendar-item--isDay-text': weeks.isDay,
|
||||||
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
|
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
'uni-calendar-item--before-checked': weeks.beforeMultiple,
|
'uni-calendar-item--before-checked': weeks.beforeMultiple,
|
||||||
'uni-calendar-item--multiple': weeks.multiple,
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
'uni-calendar-item--after-checked': weeks.afterMultiple,
|
'uni-calendar-item--after-checked': weeks.afterMultiple,
|
||||||
'uni-calendar-item--disable': weeks.disable
|
'uni-calendar-item--disable': weeks.disable
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
{{ weeks.date }}
|
{{ weeks.date }}
|
||||||
</text>
|
</text>
|
||||||
<text v-if="!lunar && !weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text"
|
<text v-if="!lunar && !weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text"
|
||||||
:class="{
|
:class="{
|
||||||
'uni-calendar-item--isDay-text': weeks.isDay,
|
'uni-calendar-item--isDay-text': weeks.isDay,
|
||||||
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
|
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
'uni-calendar-item--before-checked': weeks.beforeMultiple,
|
'uni-calendar-item--before-checked': weeks.beforeMultiple,
|
||||||
'uni-calendar-item--multiple': weeks.multiple,
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
'uni-calendar-item--after-checked': weeks.afterMultiple
|
'uni-calendar-item--after-checked': weeks.afterMultiple
|
||||||
}"
|
}"
|
||||||
></text>
|
></text>
|
||||||
<text v-if="lunar && !weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text"
|
<text v-if="lunar && !weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text"
|
||||||
:class="{
|
:class="{
|
||||||
'uni-calendar-item--isDay-text': weeks.isDay,
|
'uni-calendar-item--isDay-text': weeks.isDay,
|
||||||
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
|
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
'uni-calendar-item--before-checked': weeks.beforeMultiple,
|
'uni-calendar-item--before-checked': weeks.beforeMultiple,
|
||||||
'uni-calendar-item--multiple': weeks.multiple,
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
'uni-calendar-item--after-checked': weeks.afterMultiple,
|
'uni-calendar-item--after-checked': weeks.afterMultiple,
|
||||||
'uni-calendar-item--disable': weeks.disable
|
'uni-calendar-item--disable': weeks.disable
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
{{ weeks.isDay ? '今天' : weeks.lunar.IDayCn === '初一' ? weeks.lunar.IMonthCn : weeks.lunar.IDayCn }}
|
{{ weeks.isDay ? '今天' : weeks.lunar.IDayCn === '初一' ? weeks.lunar.IMonthCn : weeks.lunar.IDayCn }}
|
||||||
</text>
|
</text>
|
||||||
<text v-if="weeks.extraInfo && weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text"
|
<text v-if="weeks.extraInfo && weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text"
|
||||||
:class="{
|
:class="{
|
||||||
'uni-calendar-item--extra': weeks.extraInfo.info,
|
'uni-calendar-item--extra': weeks.extraInfo.info,
|
||||||
'uni-calendar-item--isDay-text': weeks.isDay,
|
'uni-calendar-item--isDay-text': weeks.isDay,
|
||||||
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
|
'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
'uni-calendar-item--before-checked': weeks.beforeMultiple,
|
'uni-calendar-item--before-checked': weeks.beforeMultiple,
|
||||||
'uni-calendar-item--multiple': weeks.multiple,
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
'uni-calendar-item--after-checked': weeks.afterMultiple,
|
'uni-calendar-item--after-checked': weeks.afterMultiple,
|
||||||
'uni-calendar-item--disable': weeks.disable
|
'uni-calendar-item--disable': weeks.disable
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
{{ weeks.extraInfo.info }}
|
{{ weeks.extraInfo.info }}
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
weeks: {
|
weeks: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default() {
|
default() {
|
||||||
return {};
|
return {};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
calendar: {
|
calendar: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {
|
default: () => {
|
||||||
return {};
|
return {};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
selected: {
|
selected: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => {
|
default: () => {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
lunar: {
|
lunar: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
choiceDate(weeks) {
|
choiceDate(weeks) {
|
||||||
this.$emit('change', weeks);
|
this.$emit('change', weeks);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.uni-calendar-item__weeks-box {
|
.uni-calendar-item__weeks-box {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item__weeks-box-text {
|
.uni-calendar-item__weeks-box-text {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item__weeks-lunar-text {
|
.uni-calendar-item__weeks-lunar-text {
|
||||||
font-size: $uni-font-size-base;
|
font-size: $uni-font-size-base;
|
||||||
color: $uni-text-color;
|
color: $uni-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item__weeks-box-item {
|
.uni-calendar-item__weeks-box-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100rpx;
|
width: 100rpx;
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item__weeks-box-circle {
|
.uni-calendar-item__weeks-box-circle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10rpx;
|
top: 10rpx;
|
||||||
right: 10rpx;
|
right: 10rpx;
|
||||||
width: 16rpx;
|
width: 16rpx;
|
||||||
height: 16rpx;
|
height: 16rpx;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
background-color: $uni-color-error;
|
background-color: $uni-color-error;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item--disable {
|
.uni-calendar-item--disable {
|
||||||
color: #feaa93;
|
color: #feaa93;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item--isDay-text {
|
.uni-calendar-item--isDay-text {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item--isDay {
|
.uni-calendar-item--isDay {
|
||||||
color: #000;
|
color: #000;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item--extra {
|
.uni-calendar-item--extra {
|
||||||
// color: $uni-color-error;
|
// color: $uni-color-error;
|
||||||
// opacity: 0.8;
|
// opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item--checked {
|
.uni-calendar-item--checked {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item--multiple {
|
.uni-calendar-item--multiple {
|
||||||
background-color: $uni-color-primary;
|
background-color: $uni-color-primary;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
.uni-calendar-item--before-checked {
|
.uni-calendar-item--before-checked {
|
||||||
background-color: #ff5a5f;
|
background-color: #ff5a5f;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.uni-calendar-item--after-checked {
|
.uni-calendar-item--after-checked {
|
||||||
background-color: #ff5a5f;
|
background-color: #ff5a5f;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,476 +1,476 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="uni-calendar">
|
<view class="uni-calendar">
|
||||||
<view v-if="!insert && show" class="uni-calendar__mask" :class="{ 'uni-calendar--mask-show': aniMaskShow }" @click="clean"></view>
|
<view v-if="!insert && show" class="uni-calendar__mask" :class="{ 'uni-calendar--mask-show': aniMaskShow }" @click="clean"></view>
|
||||||
<view v-if="insert || show" class="uni-calendar__content" :class="{ 'uni-calendar--fixed': !insert, 'uni-calendar--ani-show': aniMaskShow }">
|
<view v-if="insert || show" class="uni-calendar__content" :class="{ 'uni-calendar--fixed': !insert, 'uni-calendar--ani-show': aniMaskShow }">
|
||||||
<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
|
<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
|
||||||
<view class="uni-calendar__header-btn-box" @click="close"><text class="uni-calendar__header-text uni-calendar--fixed-width">取消</text></view>
|
<view class="uni-calendar__header-btn-box" @click="close"><text class="uni-calendar__header-text uni-calendar--fixed-width">取消</text></view>
|
||||||
<view class="uni-calendar__header-btn-box" @click="confirm"><text class="uni-calendar__header-text uni-calendar--fixed-width">确定</text></view>
|
<view class="uni-calendar__header-btn-box" @click="confirm"><text class="uni-calendar__header-text uni-calendar--fixed-width">确定</text></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="uni-calendar__header">
|
<view class="uni-calendar__header">
|
||||||
<view class="uni-calendar__header-btn-box" @click.stop="pre">
|
<view class="uni-calendar__header-btn-box" @click.stop="pre">
|
||||||
<!-- <view class="uni-calendar__header-btn uni-calendar--left"></view> -->
|
<!-- <view class="uni-calendar__header-btn uni-calendar--left"></view> -->
|
||||||
<text class="iconfont icon-back_light"></text>
|
<text class="iconfont icon-back_light"></text>
|
||||||
</view>
|
</view>
|
||||||
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
|
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
|
||||||
<text class="uni-calendar__header-text">{{ (nowDate.year || '') + '年' + (nowDate.month || '') + '月' }}</text>
|
<text class="uni-calendar__header-text">{{ (nowDate.year || '') + '年' + (nowDate.month || '') + '月' }}</text>
|
||||||
</picker>
|
</picker>
|
||||||
<view class="uni-calendar__header-btn-box" @click.stop="next">
|
<view class="uni-calendar__header-btn-box" @click.stop="next">
|
||||||
<!-- <view class="uni-calendar__header-btn uni-calendar--right"></view> -->
|
<!-- <view class="uni-calendar__header-btn uni-calendar--right"></view> -->
|
||||||
<text class="iconfont icon-right"></text>
|
<text class="iconfont icon-right"></text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="uni-calendar__box">
|
<view class="uni-calendar__box">
|
||||||
<view v-if="showMonth" class="uni-calendar__box-bg">
|
<view v-if="showMonth" class="uni-calendar__box-bg">
|
||||||
<text class="uni-calendar__box-bg-text">{{ nowDate.month }}</text>
|
<text class="uni-calendar__box-bg-text">{{ nowDate.month }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="uni-calendar__weeks">
|
<view class="uni-calendar__weeks">
|
||||||
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">日</text></view>
|
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">日</text></view>
|
||||||
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">一</text></view>
|
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">一</text></view>
|
||||||
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">二</text></view>
|
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">二</text></view>
|
||||||
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">三</text></view>
|
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">三</text></view>
|
||||||
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">四</text></view>
|
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">四</text></view>
|
||||||
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">五</text></view>
|
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">五</text></view>
|
||||||
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">六</text></view>
|
<view class="uni-calendar__weeks-day"><text class="uni-calendar__weeks-day-text">六</text></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="uni-calendar__weeks" v-for="(item, weekIndex) in weeks" :key="weekIndex">
|
<view class="uni-calendar__weeks" v-for="(item, weekIndex) in weeks" :key="weekIndex">
|
||||||
<view class="uni-calendar__weeks-item" v-for="(weeks, weeksIndex) in item" :key="weeksIndex">
|
<view class="uni-calendar__weeks-item" v-for="(weeks, weeksIndex) in item" :key="weeksIndex">
|
||||||
<uni-calendar-item :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></uni-calendar-item>
|
<uni-calendar-item :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></uni-calendar-item>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Calendar from './util.js';
|
import Calendar from './util.js';
|
||||||
import uniCalendarItem from './uni-calendar-item.vue';
|
import uniCalendarItem from './uni-calendar-item.vue';
|
||||||
/**
|
/**
|
||||||
* Calendar 日历
|
* Calendar 日历
|
||||||
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
|
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
|
||||||
* @property {String} date 自定义当前时间，默认为今天
|
* @property {String} date 自定义当前时间，默认为今天
|
||||||
* @property {Boolean} lunar 显示农历
|
* @property {Boolean} lunar 显示农历
|
||||||
* @property {String} startDate 日期选择范围-开始日期
|
* @property {String} startDate 日期选择范围-开始日期
|
||||||
* @property {String} endDate 日期选择范围-结束日期
|
* @property {String} endDate 日期选择范围-结束日期
|
||||||
* @property {Boolean} range 范围选择
|
* @property {Boolean} range 范围选择
|
||||||
* @property {Boolean} insert = [true|false] 插入模式,默认为false
|
* @property {Boolean} insert = [true|false] 插入模式,默认为false
|
||||||
* @value true 弹窗模式
|
* @value true 弹窗模式
|
||||||
* @value false 插入模式
|
* @value false 插入模式
|
||||||
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
|
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
|
||||||
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
|
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
|
||||||
* @property {Boolean} showMonth 是否选择月份为背景
|
* @property {Boolean} showMonth 是否选择月份为背景
|
||||||
* @event {Function} change 日期改变，`insert :ture` 时生效
|
* @event {Function} change 日期改变，`insert :ture` 时生效
|
||||||
* @event {Function} confirm 确认选择`insert :false` 时生效
|
* @event {Function} confirm 确认选择`insert :false` 时生效
|
||||||
* @event {Function} monthSwitch 切换月份时触发
|
* @event {Function} monthSwitch 切换月份时触发
|
||||||
* @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
|
* @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
uniCalendarItem
|
uniCalendarItem
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
date: {
|
date: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
selected: {
|
selected: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default() {
|
default() {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
lunar: {
|
lunar: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
startDate: {
|
startDate: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
endDate: {
|
endDate: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
range: {
|
range: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
insert: {
|
insert: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
showMonth: {
|
showMonth: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
clearDate: {
|
clearDate: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
show: false,
|
show: false,
|
||||||
weeks: [],
|
weeks: [],
|
||||||
calendar: {},
|
calendar: {},
|
||||||
nowDate: '',
|
nowDate: '',
|
||||||
aniMaskShow: false
|
aniMaskShow: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
date(newVal) {
|
date(newVal) {
|
||||||
this.cale.setDate(newVal);
|
this.cale.setDate(newVal);
|
||||||
this.init(this.cale.selectDate.fullDate);
|
this.init(this.cale.selectDate.fullDate);
|
||||||
},
|
},
|
||||||
startDate(val) {
|
startDate(val) {
|
||||||
this.cale.resetSatrtDate(val);
|
this.cale.resetSatrtDate(val);
|
||||||
},
|
},
|
||||||
endDate(val) {
|
endDate(val) {
|
||||||
this.cale.resetEndDate(val);
|
this.cale.resetEndDate(val);
|
||||||
},
|
},
|
||||||
selected(newVal) {
|
selected(newVal) {
|
||||||
this.cale.setSelectInfo(this.nowDate.fullDate, newVal);
|
this.cale.setSelectInfo(this.nowDate.fullDate, newVal);
|
||||||
this.weeks = this.cale.weeks;
|
this.weeks = this.cale.weeks;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
// 获取日历方法实例
|
// 获取日历方法实例
|
||||||
this.cale = new Calendar({
|
this.cale = new Calendar({
|
||||||
// date: new Date(),
|
// date: new Date(),
|
||||||
selected: this.selected,
|
selected: this.selected,
|
||||||
startDate: this.startDate,
|
startDate: this.startDate,
|
||||||
endDate: this.endDate,
|
endDate: this.endDate,
|
||||||
range: this.range
|
range: this.range
|
||||||
});
|
});
|
||||||
// 选中某一天
|
// 选中某一天
|
||||||
this.cale.setDate(this.date);
|
this.cale.setDate(this.date);
|
||||||
this.init(this.cale.selectDate.fullDate);
|
this.init(this.cale.selectDate.fullDate);
|
||||||
// this.setDay
|
// this.setDay
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 取消穿透
|
// 取消穿透
|
||||||
clean() {},
|
clean() {},
|
||||||
bindDateChange(e) {
|
bindDateChange(e) {
|
||||||
const value = e.detail.value + '-1';
|
const value = e.detail.value + '-1';
|
||||||
this.cale.setDate(value);
|
this.cale.setDate(value);
|
||||||
this.init(value);
|
this.init(value);
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 初始化日期显示
|
* 初始化日期显示
|
||||||
* @param {Object} date
|
* @param {Object} date
|
||||||
*/
|
*/
|
||||||
init(date) {
|
init(date) {
|
||||||
this.weeks = this.cale.weeks;
|
this.weeks = this.cale.weeks;
|
||||||
this.nowDate = this.calendar = this.cale.getInfo(date);
|
this.nowDate = this.calendar = this.cale.getInfo(date);
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 打开日历弹窗
|
* 打开日历弹窗
|
||||||
*/
|
*/
|
||||||
open() {
|
open() {
|
||||||
// 弹窗模式并且清理数据
|
// 弹窗模式并且清理数据
|
||||||
if (this.clearDate && !this.insert) {
|
if (this.clearDate && !this.insert) {
|
||||||
this.cale.cleanMultipleStatus();
|
this.cale.cleanMultipleStatus();
|
||||||
this.cale.setDate(this.date);
|
this.cale.setDate(this.date);
|
||||||
this.init(this.cale.selectDate.fullDate);
|
this.init(this.cale.selectDate.fullDate);
|
||||||
}
|
}
|
||||||
this.show = true;
|
this.show = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.aniMaskShow = true;
|
this.aniMaskShow = true;
|
||||||
}, 50);
|
}, 50);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 关闭日历弹窗
|
* 关闭日历弹窗
|
||||||
*/
|
*/
|
||||||
close() {
|
close() {
|
||||||
this.aniMaskShow = false;
|
this.aniMaskShow = false;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.show = false;
|
this.show = false;
|
||||||
this.$emit('close');
|
this.$emit('close');
|
||||||
}, 300);
|
}, 300);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 确认按钮
|
* 确认按钮
|
||||||
*/
|
*/
|
||||||
confirm() {
|
confirm() {
|
||||||
this.setEmit('confirm');
|
this.setEmit('confirm');
|
||||||
this.close();
|
this.close();
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 变化触发
|
* 变化触发
|
||||||
*/
|
*/
|
||||||
change() {
|
change() {
|
||||||
if (!this.insert) return;
|
if (!this.insert) return;
|
||||||
this.setEmit('change');
|
this.setEmit('change');
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 选择月份触发
|
* 选择月份触发
|
||||||
*/
|
*/
|
||||||
monthSwitch() {
|
monthSwitch() {
|
||||||
let { year, month } = this.nowDate;
|
let { year, month } = this.nowDate;
|
||||||
this.$emit('monthSwitch', {
|
this.$emit('monthSwitch', {
|
||||||
year,
|
year,
|
||||||
month: Number(month)
|
month: Number(month)
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 派发事件
|
* 派发事件
|
||||||
* @param {Object} name
|
* @param {Object} name
|
||||||
*/
|
*/
|
||||||
setEmit(name) {
|
setEmit(name) {
|
||||||
let { year, month, date, fullDate, lunar, extraInfo } = this.calendar;
|
let { year, month, date, fullDate, lunar, extraInfo } = this.calendar;
|
||||||
this.$emit(name, {
|
this.$emit(name, {
|
||||||
range: this.cale.multipleStatus,
|
range: this.cale.multipleStatus,
|
||||||
year,
|
year,
|
||||||
month,
|
month,
|
||||||
date,
|
date,
|
||||||
fulldate: fullDate,
|
fulldate: fullDate,
|
||||||
lunar,
|
lunar,
|
||||||
extraInfo: extraInfo || {}
|
extraInfo: extraInfo || {}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 选择天触发
|
* 选择天触发
|
||||||
* @param {Object} weeks
|
* @param {Object} weeks
|
||||||
*/
|
*/
|
||||||
choiceDate(weeks) {
|
choiceDate(weeks) {
|
||||||
if (weeks.disable) return;
|
if (weeks.disable) return;
|
||||||
this.calendar = weeks;
|
this.calendar = weeks;
|
||||||
// 设置多选
|
// 设置多选
|
||||||
this.cale.setMultiple(this.calendar.fullDate);
|
this.cale.setMultiple(this.calendar.fullDate);
|
||||||
this.weeks = this.cale.weeks;
|
this.weeks = this.cale.weeks;
|
||||||
this.change();
|
this.change();
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 回到今天
|
* 回到今天
|
||||||
*/
|
*/
|
||||||
backtoday() {
|
backtoday() {
|
||||||
let date = this.cale.getDate(new Date()).fullDate;
|
let date = this.cale.getDate(new Date()).fullDate;
|
||||||
this.cale.setDate(date);
|
this.cale.setDate(date);
|
||||||
this.init(date);
|
this.init(date);
|
||||||
this.change();
|
this.change();
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 上个月
|
* 上个月
|
||||||
*/
|
*/
|
||||||
pre() {
|
pre() {
|
||||||
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate;
|
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate;
|
||||||
this.setDate(preDate);
|
this.setDate(preDate);
|
||||||
this.monthSwitch();
|
this.monthSwitch();
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 下个月
|
* 下个月
|
||||||
*/
|
*/
|
||||||
next() {
|
next() {
|
||||||
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate;
|
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate;
|
||||||
this.setDate(nextDate);
|
this.setDate(nextDate);
|
||||||
this.monthSwitch();
|
this.monthSwitch();
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 设置日期
|
* 设置日期
|
||||||
* @param {Object} date
|
* @param {Object} date
|
||||||
*/
|
*/
|
||||||
setDate(date) {
|
setDate(date) {
|
||||||
this.cale.setDate(date);
|
this.cale.setDate(date);
|
||||||
this.weeks = this.cale.weeks;
|
this.weeks = this.cale.weeks;
|
||||||
this.nowDate = this.cale.getInfo(date);
|
this.nowDate = this.cale.getInfo(date);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.uni-calendar {
|
.uni-calendar {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__mask {
|
.uni-calendar__mask {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: $uni-bg-color-mask;
|
background-color: $uni-bg-color-mask;
|
||||||
transition-property: opacity;
|
transition-property: opacity;
|
||||||
transition-duration: 0.3s;
|
transition-duration: 0.3s;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar--mask-show {
|
.uni-calendar--mask-show {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar--fixed {
|
.uni-calendar--fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
transition-property: transform;
|
transition-property: transform;
|
||||||
transition-duration: 0.3s;
|
transition-duration: 0.3s;
|
||||||
transform: translateY(460px);
|
transform: translateY(460px);
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar--ani-show {
|
.uni-calendar--ani-show {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__content {
|
.uni-calendar__content {
|
||||||
background: linear-gradient(180deg, rgba(247, 0, 66, 1), rgba(254, 147, 76, 1));
|
background: linear-gradient(180deg, rgba(247, 0, 66, 1), rgba(254, 147, 76, 1));
|
||||||
border-bottom-left-radius: 24rpx;
|
border-bottom-left-radius: 24rpx;
|
||||||
border-bottom-right-radius: 24rpx;
|
border-bottom-right-radius: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__header {
|
.uni-calendar__header {
|
||||||
position: relative;
|
position: relative;
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 56rpx;
|
height: 56rpx;
|
||||||
width: 657rpx;
|
width: 657rpx;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background-color: #fa556a;
|
background-color: #fa556a;
|
||||||
border-radius: 28px;
|
border-radius: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar--fixed-top {
|
.uni-calendar--fixed-top {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border-top-color: $uni-border-color;
|
border-top-color: $uni-border-color;
|
||||||
border-top-style: solid;
|
border-top-style: solid;
|
||||||
border-top-width: 1px;
|
border-top-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar--fixed-width {
|
.uni-calendar--fixed-width {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
// padding: 0 15px;
|
// padding: 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__backtoday {
|
.uni-calendar__backtoday {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 25rpx;
|
top: 25rpx;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border-top-left-radius: 25px;
|
border-top-left-radius: 25px;
|
||||||
border-bottom-left-radius: 25px;
|
border-bottom-left-radius: 25px;
|
||||||
color: $uni-text-color;
|
color: $uni-text-color;
|
||||||
background-color: $uni-bg-color-hover;
|
background-color: $uni-bg-color-hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__header-text {
|
.uni-calendar__header-text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__header-btn-box {
|
.uni-calendar__header-btn-box {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__header-btn {
|
.uni-calendar__header-btn {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
border-left-color: $uni-text-color-placeholder;
|
border-left-color: $uni-text-color-placeholder;
|
||||||
border-left-style: solid;
|
border-left-style: solid;
|
||||||
border-left-width: 2px;
|
border-left-width: 2px;
|
||||||
border-top-color: $uni-color-subtitle;
|
border-top-color: $uni-color-subtitle;
|
||||||
border-top-style: solid;
|
border-top-style: solid;
|
||||||
border-top-width: 2px;
|
border-top-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar--left {
|
.uni-calendar--left {
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar--right {
|
.uni-calendar--right {
|
||||||
transform: rotate(135deg);
|
transform: rotate(135deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__weeks {
|
.uni-calendar__weeks {
|
||||||
position: relative;
|
position: relative;
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__weeks-item {
|
.uni-calendar__weeks-item {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__weeks-day {
|
.uni-calendar__weeks-day {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__weeks-day-text {
|
.uni-calendar__weeks-day-text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__box {
|
.uni-calendar__box {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__box-bg {
|
.uni-calendar__box-bg {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar__box-bg-text {
|
.uni-calendar__box-bg-text {
|
||||||
font-size: 200px;
|
font-size: 200px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $uni-text-color-grey;
|
color: $uni-text-color-grey;
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,220 +1,220 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="uni-navbar">
|
<view class="uni-navbar">
|
||||||
<view
|
<view
|
||||||
:class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
|
:class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
|
||||||
:style="{ 'background-color': backgroundColor }"
|
:style="{ 'background-color': backgroundColor }"
|
||||||
class="uni-navbar__content">
|
class="uni-navbar__content">
|
||||||
<uni-status-bar v-if="statusBar" />
|
<uni-status-bar v-if="statusBar" />
|
||||||
<view :style="{ color: color, backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view">
|
<view :style="{ color: color, backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view">
|
||||||
<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view">
|
<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view">
|
||||||
<view class="uni-navbar__content_view" v-if="leftIcon.length"><uni-icons :color="color" :type="leftIcon" size="24" /></view>
|
<view class="uni-navbar__content_view" v-if="leftIcon.length"><uni-icons :color="color" :type="leftIcon" size="24" /></view>
|
||||||
<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }" class="uni-navbar-btn-text uni-navbar__content_view" v-if="leftText.length">
|
<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }" class="uni-navbar-btn-text uni-navbar__content_view" v-if="leftText.length">
|
||||||
<text :style="{ color: color, fontSize: '14px' }">{{ leftText }}</text>
|
<text :style="{ color: color, fontSize: '14px' }">{{ leftText }}</text>
|
||||||
</view>
|
</view>
|
||||||
<slot name="left" />
|
<slot name="left" />
|
||||||
</view>
|
</view>
|
||||||
<view class="uni-navbar__header-container uni-navbar__content_view">
|
<view class="uni-navbar__header-container uni-navbar__content_view">
|
||||||
<view class="uni-navbar__header-container-inner uni-navbar__content_view" v-if="title.length">
|
<view class="uni-navbar__header-container-inner uni-navbar__content_view" v-if="title.length">
|
||||||
<text class="uni-nav-bar-text" :style="{ color: color }">{{ title }}</text>
|
<text class="uni-nav-bar-text" :style="{ color: color }">{{ title }}</text>
|
||||||
</view>
|
</view>
|
||||||
<!-- 标题插槽 -->
|
<!-- 标题插槽 -->
|
||||||
<slot />
|
<slot />
|
||||||
</view>
|
</view>
|
||||||
<view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @tap="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view">
|
<view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @tap="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view">
|
||||||
<view class="uni-navbar__content_view" v-if="rightIcon.length"><uni-icons :color="color" :type="rightIcon" size="24" /></view>
|
<view class="uni-navbar__content_view" v-if="rightIcon.length"><uni-icons :color="color" :type="rightIcon" size="24" /></view>
|
||||||
<!-- 优先显示图标 -->
|
<!-- 优先显示图标 -->
|
||||||
<view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length">
|
<view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length">
|
||||||
<text class="uni-nav-bar-right-text">{{ rightText }}</text>
|
<text class="uni-nav-bar-right-text">{{ rightText }}</text>
|
||||||
</view>
|
</view>
|
||||||
<slot name="right" />
|
<slot name="right" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="uni-navbar__placeholder" v-if="fixed">
|
<view class="uni-navbar__placeholder" v-if="fixed">
|
||||||
<uni-status-bar v-if="statusBar" />
|
<uni-status-bar v-if="statusBar" />
|
||||||
<view class="uni-navbar__placeholder-view" />
|
<view class="uni-navbar__placeholder-view" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import uniStatusBar from '@/pages_tool/components/uni-status-bar/uni-status-bar.vue';
|
import uniStatusBar from '@/pages_tool/components/uni-status-bar/uni-status-bar.vue';
|
||||||
import uniIcons from '@/components/uni-icons/uni-icons.vue';
|
import uniIcons from '@/components/uni-icons/uni-icons.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'UniNavBar',
|
name: 'UniNavBar',
|
||||||
components: {
|
components: {
|
||||||
uniStatusBar,
|
uniStatusBar,
|
||||||
uniIcons
|
uniIcons
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
leftText: {
|
leftText: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
rightText: {
|
rightText: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
leftIcon: {
|
leftIcon: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
rightIcon: {
|
rightIcon: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
fixed: {
|
fixed: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
color: {
|
color: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '#000000'
|
default: '#000000'
|
||||||
},
|
},
|
||||||
backgroundColor: {
|
backgroundColor: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '#FFFFFF'
|
default: '#FFFFFF'
|
||||||
},
|
},
|
||||||
statusBar: {
|
statusBar: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
shadow: {
|
shadow: {
|
||||||
type: [String, Boolean],
|
type: [String, Boolean],
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
border: {
|
border: {
|
||||||
type: [String, Boolean],
|
type: [String, Boolean],
|
||||||
default: true
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (uni.report && this.title !== '') {
|
if (uni.report && this.title !== '') {
|
||||||
uni.report('title', this.title);
|
uni.report('title', this.title);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onClickLeft() {
|
onClickLeft() {
|
||||||
this.$emit('clickLeft');
|
this.$emit('clickLeft');
|
||||||
},
|
},
|
||||||
onClickRight() {
|
onClickRight() {
|
||||||
this.$emit('clickRight');
|
this.$emit('clickRight');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
$nav-height: 44px;
|
$nav-height: 44px;
|
||||||
.uni-nav-bar-text {
|
.uni-nav-bar-text {
|
||||||
/* #ifdef APP-PLUS */
|
/* #ifdef APP-PLUS */
|
||||||
font-size: 34rpx;
|
font-size: 34rpx;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
/* #ifndef APP-PLUS */
|
/* #ifndef APP-PLUS */
|
||||||
font-size: $uni-font-size-lg;
|
font-size: $uni-font-size-lg;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
}
|
}
|
||||||
.uni-nav-bar-right-text {
|
.uni-nav-bar-right-text {
|
||||||
font-size: $uni-font-size-base;
|
font-size: $uni-font-size-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar {
|
.uni-navbar {
|
||||||
width: 750rpx;
|
width: 750rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__content {
|
.uni-navbar__content {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 750rpx;
|
width: 750rpx;
|
||||||
background-color: $uni-bg-color;
|
background-color: $uni-bg-color;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__content_view {
|
.uni-navbar__content_view {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
// background-color: #FFFFFF;
|
// background-color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__header {
|
.uni-navbar__header {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
width: 750rpx;
|
width: 750rpx;
|
||||||
height: $nav-height;
|
height: $nav-height;
|
||||||
line-height: $nav-height;
|
line-height: $nav-height;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
// background-color: #ffffff;
|
// background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__header-btns {
|
.uni-navbar__header-btns {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
width: 120rpx;
|
width: 120rpx;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__header-btns-left {
|
.uni-navbar__header-btns-left {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
width: 150rpx;
|
width: 150rpx;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__header-btns-right {
|
.uni-navbar__header-btns-right {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
width: 150rpx;
|
width: 150rpx;
|
||||||
padding-right: 30rpx;
|
padding-right: 30rpx;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__header-container {
|
.uni-navbar__header-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__header-container-inner {
|
.uni-navbar__header-container-inner {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
flex: 1;
|
flex: 1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: $uni-font-size-base;
|
font-size: $uni-font-size-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar__placeholder-view {
|
.uni-navbar__placeholder-view {
|
||||||
height: $nav-height;
|
height: $nav-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar--fixed {
|
.uni-navbar--fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 998;
|
z-index: 998;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar--shadow {
|
.uni-navbar--shadow {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
box-shadow: 0 1px 6px #ccc;
|
box-shadow: 0 1px 6px #ccc;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-navbar--border {
|
.uni-navbar--border {
|
||||||
border-bottom-width: 1rpx;
|
border-bottom-width: 1rpx;
|
||||||
border-bottom-style: solid;
|
border-bottom-style: solid;
|
||||||
border-bottom-color: $uni-border-color;
|
border-bottom-color: $uni-border-color;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -183,7 +183,7 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.search-wrap {
|
.search-wrap {
|
||||||
flex: 0.5;
|
flex: 0.5;
|
||||||
padding: 30rpx 30rpx 0;
|
padding: 30rpx 30rpx 0;
|
||||||
|
|||||||
@@ -2,9 +2,9 @@
|
|||||||
<page-meta :page-style="themeColor"></page-meta>
|
<page-meta :page-style="themeColor"></page-meta>
|
||||||
<view class="help">
|
<view class="help">
|
||||||
<block v-if="dataList.length">
|
<block v-if="dataList.length">
|
||||||
<view class="help-item" v-for="(item, index) in dataList" :key="item.class_id || index">
|
<view class="help-item" v-for="(item, index) in dataList" :key="index">
|
||||||
<view :class="['item-title', item.child_list.length == 0 ? 'empty' : '']">{{ item.class_name }}</view>
|
<view :class="['item-title', item.child_list.length == 0 ? 'empty' : '']">{{ item.class_name }}</view>
|
||||||
<view class="item-content" v-for="(s_item, s_index) in item.child_list" :key="s_item.id || s_index" @click="helpDetail(s_item)">{{ s_item.title }}</view>
|
<view class="item-content" v-for="(s_item, s_index) in item.child_list" :key="s_index" @click="helpDetail(s_item)">{{ s_item.title }}</view>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
<block v-else><ns-empty text="暂无帮助信息" :isIndex="false"></ns-empty></block>
|
<block v-else><ns-empty text="暂无帮助信息" :isIndex="false"></ns-empty></block>
|
||||||
|
|||||||
@@ -65,7 +65,7 @@
|
|||||||
@import '@/common/css/diy.scss';
|
@import '@/common/css/diy.scss';
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||||
background: none !important;
|
background: none !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -470,7 +470,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .reward-popup .uni-popup__wrapper-box {
|
/deep/ .reward-popup .uni-popup__wrapper-box {
|
||||||
background: none !important;
|
background: none !important;
|
||||||
max-width: unset !important;
|
max-width: unset !important;
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<block v-if="dataList.length > 0">
|
<block v-if="dataList.length > 0">
|
||||||
<view class="list-item" v-for="(item, index) in dataList" :key="item.withdraw_type_id || index">
|
<view class="list-item" v-for="(item, index) in dataList" :key="index">
|
||||||
<view class="item-top">
|
<view class="item-top">
|
||||||
<view class="item-left">
|
<view class="item-left">
|
||||||
<view class="title-text">{{ item.withdraw_type_name }}</view>
|
<view class="title-text">{{ item.withdraw_type_name }}</view>
|
||||||
@@ -430,7 +430,7 @@
|
|||||||
padding-bottom: 150rpx;
|
padding-bottom: 150rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss">
|
<style>
|
||||||
.item-bottom>>>.uni-switch-wrapper .uni-switch-input {
|
.item-bottom>>>.uni-switch-wrapper .uni-switch-input {
|
||||||
height: 48rpx !important;
|
height: 48rpx !important;
|
||||||
width: 88rpx !important;
|
width: 88rpx !important;
|
||||||
|
|||||||
@@ -580,7 +580,7 @@
|
|||||||
height: calc(100vh - 260rpx);
|
height: calc(100vh - 260rpx);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss">
|
<style>
|
||||||
.address-item>>>.uni-switch-wrapper .uni-switch-input {
|
.address-item>>>.uni-switch-wrapper .uni-switch-input {
|
||||||
height: 48rpx !important;
|
height: 48rpx !important;
|
||||||
width: 88rpx !important;
|
width: 88rpx !important;
|
||||||
|
|||||||
@@ -27,7 +27,7 @@
|
|||||||
<!-- 明细列表 -->
|
<!-- 明细列表 -->
|
||||||
<block v-if="dataList.length > 0">
|
<block v-if="dataList.length > 0">
|
||||||
<view class="detailed-wrap">
|
<view class="detailed-wrap">
|
||||||
<view class="balances" v-for="(item, index) in dataList" :key="item.balance_id || index">
|
<view class="balances" v-for="(item, index) in dataList" :key="index">
|
||||||
<image :src="$util.img('public/uniapp/balance/recharge.png')" class="balances-img" v-if="item.account_data > 0"></image>
|
<image :src="$util.img('public/uniapp/balance/recharge.png')" class="balances-img" v-if="item.account_data > 0"></image>
|
||||||
<image v-else :src="$util.img('public/uniapp/balance/shopping.png')" mode="widthFix"></image>
|
<image v-else :src="$util.img('public/uniapp/balance/shopping.png')" mode="widthFix"></image>
|
||||||
<view class="balances-info" @click="toFromDetail(item)">
|
<view class="balances-info" @click="toFromDetail(item)">
|
||||||
|
|||||||
@@ -222,7 +222,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -79,7 +79,7 @@
|
|||||||
@import './public/css/collection.scss';
|
@import './public/css/collection.scss';
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
<block v-if="inviteList.length > 0">
|
<block v-if="inviteList.length > 0">
|
||||||
<view class="invitelist_block">
|
<view class="invitelist_block">
|
||||||
<view class="invitelist">
|
<view class="invitelist">
|
||||||
<view class="list-item" v-for="(item, index) in inviteList" :key="item.invite_id || index">
|
<view class="list-item" v-for="(item, index) in inviteList" :key="index">
|
||||||
<view class="img color-base-border">
|
<view class="img color-base-border">
|
||||||
<image mode="aspectFit" :src="item.headimg == '' ? $util.img($util.getDefaultImage().head) : $util.img(item.headimg)"/>
|
<image mode="aspectFit" :src="item.headimg == '' ? $util.img($util.getDefaultImage().head) : $util.img(item.headimg)"/>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
<block v-if="dataList.length">
|
<block v-if="dataList.length">
|
||||||
<view class="detailed-wrap">
|
<view class="detailed-wrap">
|
||||||
<view class="cont">
|
<view class="cont">
|
||||||
<view class="detailed-item" v-for="(item, index) in dataList" :key="item.point_id || index">
|
<view class="detailed-item" v-for="(item, index) in dataList" :key="index">
|
||||||
<view class="info" @click="toFromDetail(item)">
|
<view class="info" @click="toFromDetail(item)">
|
||||||
<view class="event">{{ item.type_name }}</view>
|
<view class="event">{{ item.type_name }}</view>
|
||||||
<view class="time-box">
|
<view class="time-box">
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<block v-if="dataList.length">
|
<block v-if="dataList.length">
|
||||||
<view class="detailed-wrap">
|
<view class="detailed-wrap">
|
||||||
<view class="cont">
|
<view class="cont">
|
||||||
<view class="detailed-item" v-for="(item, index) in dataList" :key="item.withdraw_type_id || index" @click="toDetail(item.id)">
|
<view class="detailed-item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)">
|
||||||
<view class="info">
|
<view class="info">
|
||||||
<view class="event">{{ item.transfer_type_name }}</view>
|
<view class="event">{{ item.transfer_type_name }}</view>
|
||||||
<view>
|
<view>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<mescroll-uni @getData="getData" ref="mescroll">
|
<mescroll-uni @getData="getData" ref="mescroll">
|
||||||
<block slot="list">
|
<block slot="list">
|
||||||
<view class="notice-list" v-if="dataList.length">
|
<view class="notice-list" v-if="dataList.length">
|
||||||
<view class="notice-item" @click="jumpDetail(item.id)" v-for="(item, index) in dataList" :key="item.notice_id || index">
|
<view class="notice-item" @click="jumpDetail(item.id)" v-for="(item, index) in dataList" :key="index">
|
||||||
<view class="title-info">
|
<view class="title-info">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
<text v-if="item.is_top == 1" class="color-base-bg tag">置顶</text>
|
<text v-if="item.is_top == 1" class="color-base-bg tag">置顶</text>
|
||||||
|
|||||||
@@ -291,7 +291,7 @@ export default {
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import './public/css/refund.scss';
|
@import './public/css/refund.scss';
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||||
background: none;
|
background: none;
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
|
|||||||
@@ -293,7 +293,7 @@ export default {
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import './public/css/refund.scss';
|
@import './public/css/refund.scss';
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||||
background: none;
|
background: none;
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
|
|||||||
@@ -99,7 +99,7 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import './public/css/refund.scss';
|
@import './public/css/refund.scss';
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||||
background: none;
|
background: none;
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
|
|||||||
@@ -1,379 +1,379 @@
|
|||||||
<template>
|
<template>
|
||||||
<page-meta :page-style="themeColor"></page-meta>
|
<page-meta :page-style="themeColor"></page-meta>
|
||||||
<view class="cashier">
|
<view class="cashier">
|
||||||
<block v-if="payInfo">
|
<block v-if="payInfo">
|
||||||
<block v-if="payInfo.pay_status == 0">
|
<block v-if="payInfo.pay_status == 0">
|
||||||
<text class="content">{{ payInfo.pay_body }}</text>
|
<text class="content">{{ payInfo.pay_body }}</text>
|
||||||
<view class="money-wrap">
|
<view class="money-wrap">
|
||||||
<text class="unit price-font">￥</text>
|
<text class="unit price-font">￥</text>
|
||||||
<text class="money price-font">{{ payInfo.pay_money | moneyFormat }}</text>
|
<text class="money price-font">{{ payInfo.pay_money | moneyFormat }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<block v-if="payTypeList.length > 0">
|
<block v-if="payTypeList.length > 0">
|
||||||
<view class="pay-type">
|
<view class="pay-type">
|
||||||
<view class="payment-item" v-for="(item, index) in payTypeList" :key="index" @click="payIndex = index">
|
<view class="payment-item" v-for="(item, index) in payTypeList" :key="index" @click="payIndex = index">
|
||||||
<view>
|
<view>
|
||||||
<text class="iconfont" :class="item.icon"></text>
|
<text class="iconfont" :class="item.icon"></text>
|
||||||
<text class="name">{{ item.name }}</text>
|
<text class="name">{{ item.name }}</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="iconfont" :class="payIndex == index ? 'icon-yuan_checked color-base-text' : 'icon-checkboxblank'"></text>
|
<text class="iconfont" :class="payIndex == index ? 'icon-yuan_checked color-base-text' : 'icon-checkboxblank'"></text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<button type="primary" @click="confirm">确认支付</button>
|
<button type="primary" @click="confirm">确认支付</button>
|
||||||
</block>
|
</block>
|
||||||
<view v-else class="empty">店铺尚未配置支付方式！</view>
|
<view v-else class="empty">店铺尚未配置支付方式！</view>
|
||||||
</block>
|
</block>
|
||||||
<ns-empty text="该支付单据已支付" :is-index="true" v-else></ns-empty>
|
<ns-empty text="该支付单据已支付" :is-index="true" v-else></ns-empty>
|
||||||
</block>
|
</block>
|
||||||
<ns-empty text="未获取到支付信息" :is-index="true" v-else></ns-empty>
|
<ns-empty text="未获取到支付信息" :is-index="true" v-else></ns-empty>
|
||||||
<ns-login ref="login"></ns-login>
|
<ns-login ref="login"></ns-login>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Weixin } from 'common/js/wx-jssdk.js';
|
import { Weixin } from 'common/js/wx-jssdk.js';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
payIndex: 0,
|
payIndex: 0,
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
payTypeList: [
|
payTypeList: [
|
||||||
{
|
{
|
||||||
name: '支付宝支付',
|
name: '支付宝支付',
|
||||||
icon: 'icon-zhifubaozhifu-',
|
icon: 'icon-zhifubaozhifu-',
|
||||||
type: 'alipay'
|
type: 'alipay'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '微信支付',
|
name: '微信支付',
|
||||||
icon: 'icon-weixin1',
|
icon: 'icon-weixin1',
|
||||||
type: 'wechatpay'
|
type: 'wechatpay'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
timer: null,
|
timer: null,
|
||||||
// #endif
|
// #endif
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
payTypeList: [{
|
payTypeList: [{
|
||||||
name: '微信支付',
|
name: '微信支付',
|
||||||
provider: 'wxpay',
|
provider: 'wxpay',
|
||||||
icon: 'icon-weixin1',
|
icon: 'icon-weixin1',
|
||||||
type: 'wechatpay'
|
type: 'wechatpay'
|
||||||
}],
|
}],
|
||||||
// #endif
|
// #endif
|
||||||
payInfo: null,
|
payInfo: null,
|
||||||
outTradeNo: ''
|
outTradeNo: ''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad(option) {
|
onLoad(option) {
|
||||||
this.getPayType();
|
this.getPayType();
|
||||||
this.outTradeNo = option.out_trade_no || '';
|
this.outTradeNo = option.out_trade_no || '';
|
||||||
this.getPayInfo();
|
this.getPayInfo();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getPayInfo() {
|
getPayInfo() {
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
url: '/api/pay/info',
|
url: '/api/pay/info',
|
||||||
data: {
|
data: {
|
||||||
out_trade_no: this.outTradeNo
|
out_trade_no: this.outTradeNo
|
||||||
},
|
},
|
||||||
success: res => {
|
success: res => {
|
||||||
if (res.code >= 0 && res.data) {
|
if (res.code >= 0 && res.data) {
|
||||||
this.payInfo = res.data;
|
this.payInfo = res.data;
|
||||||
if (this.payInfo.pay_status == 0) {
|
if (this.payInfo.pay_status == 0) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.autoPay();
|
this.autoPay();
|
||||||
}, 500)
|
}, 500)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getPayType() {
|
getPayType() {
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
url: '/api/pay/type',
|
url: '/api/pay/type',
|
||||||
success: res => {
|
success: res => {
|
||||||
if (res.data.pay_type == '') {
|
if (res.data.pay_type == '') {
|
||||||
this.payTypeList = [];
|
this.payTypeList = [];
|
||||||
} else {
|
} else {
|
||||||
this.payTypeList.forEach((val, key) => {
|
this.payTypeList.forEach((val, key) => {
|
||||||
if (res.data.pay_type.indexOf(val.type) == -1) {
|
if (res.data.pay_type.indexOf(val.type) == -1) {
|
||||||
this.payTypeList.splice(key, 1);
|
this.payTypeList.splice(key, 1);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
autoPay(){
|
autoPay(){
|
||||||
if (!this.payTypeList.length) return;
|
if (!this.payTypeList.length) return;
|
||||||
if (this.$util.isWeiXin()) {
|
if (this.$util.isWeiXin()) {
|
||||||
this.payTypeList.forEach((item, index) => {
|
this.payTypeList.forEach((item, index) => {
|
||||||
if (item.type == 'wechatpay') {
|
if (item.type == 'wechatpay') {
|
||||||
this.payIndex = index;
|
this.payIndex = index;
|
||||||
this.confirm();
|
this.confirm();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else if (/AlipayClient/.test(window.navigator.userAgent)) {
|
} else if (/AlipayClient/.test(window.navigator.userAgent)) {
|
||||||
this.payTypeList.forEach((item, index) => {
|
this.payTypeList.forEach((item, index) => {
|
||||||
if (item.type == 'alipay') {
|
if (item.type == 'alipay') {
|
||||||
this.payIndex = index;
|
this.payIndex = index;
|
||||||
this.confirm();
|
this.confirm();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
confirm() {
|
confirm() {
|
||||||
if (!this.storeToken) {
|
if (!this.storeToken) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.login.open('/pages_tool/pay/cashier?out_trade_no=' + this.outTradeNo);
|
this.$refs.login.open('/pages_tool/pay/cashier?out_trade_no=' + this.outTradeNo);
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (this.payTypeList.length == 0 && this.payInfo.pay_money > 0) {
|
if (this.payTypeList.length == 0 && this.payInfo.pay_money > 0) {
|
||||||
this.$util.showToast({
|
this.$util.showToast({
|
||||||
title: '请选择支付方式！'
|
title: '请选择支付方式！'
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '支付中...',
|
title: '支付中...',
|
||||||
mask: true
|
mask: true
|
||||||
});
|
});
|
||||||
this.pay();
|
this.pay();
|
||||||
},
|
},
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
pay() {
|
pay() {
|
||||||
var payType = this.payTypeList[this.payIndex];
|
var payType = this.payTypeList[this.payIndex];
|
||||||
if (!payType) return;
|
if (!payType) return;
|
||||||
|
|
||||||
let returnUrl = encodeURIComponent(this.$config.h5Domain + '/pages_tool/pay/result?code=' + this.payInfo.out_trade_no);
|
let returnUrl = encodeURIComponent(this.$config.h5Domain + '/pages_tool/pay/result?code=' + this.payInfo.out_trade_no);
|
||||||
|
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
url: '/api/pay/pay',
|
url: '/api/pay/pay',
|
||||||
data: {
|
data: {
|
||||||
out_trade_no: this.payInfo.out_trade_no,
|
out_trade_no: this.payInfo.out_trade_no,
|
||||||
pay_type: payType.type,
|
pay_type: payType.type,
|
||||||
return_url: returnUrl
|
return_url: returnUrl
|
||||||
},
|
},
|
||||||
success: res => {
|
success: res => {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
if (res.code >= 0) {
|
if (res.code >= 0) {
|
||||||
switch (payType.type) {
|
switch (payType.type) {
|
||||||
case 'alipay':
|
case 'alipay':
|
||||||
if (this.$util.isWeiXin()) {
|
if (this.$util.isWeiXin()) {
|
||||||
var wx_alipay = encodeURIComponent(res.data.data);
|
var wx_alipay = encodeURIComponent(res.data.data);
|
||||||
this.$util.redirectTo('/pages/pay/wx_pay/wx_pay', { wx_alipay: wx_alipay, out_trade_no: this.payInfo.out_trade_no }, 'redirectTo');
|
this.$util.redirectTo('/pages/pay/wx_pay/wx_pay', { wx_alipay: wx_alipay, out_trade_no: this.payInfo.out_trade_no }, 'redirectTo');
|
||||||
} else {
|
} else {
|
||||||
location.href = res.data.data;
|
location.href = res.data.data;
|
||||||
this.checkPayStatus();
|
this.checkPayStatus();
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'wechatpay':
|
case 'wechatpay':
|
||||||
if (this.$util.isWeiXin()) {
|
if (this.$util.isWeiXin()) {
|
||||||
if (uni.getSystemInfoSync().platform == 'ios') {
|
if (uni.getSystemInfoSync().platform == 'ios') {
|
||||||
var url = uni.getStorageSync('initUrl');
|
var url = uni.getStorageSync('initUrl');
|
||||||
} else {
|
} else {
|
||||||
var url = location.href;
|
var url = location.href;
|
||||||
}
|
}
|
||||||
// 获取jssdk配置
|
// 获取jssdk配置
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
url: '/wechat/api/wechat/jssdkconfig',
|
url: '/wechat/api/wechat/jssdkconfig',
|
||||||
data: { url: url },
|
data: { url: url },
|
||||||
success: jssdkRes => {
|
success: jssdkRes => {
|
||||||
var wxJS = new Weixin(),
|
var wxJS = new Weixin(),
|
||||||
payData = res.data.data;
|
payData = res.data.data;
|
||||||
wxJS.init(jssdkRes.data);
|
wxJS.init(jssdkRes.data);
|
||||||
wxJS.pay(
|
wxJS.pay(
|
||||||
{
|
{
|
||||||
timestamp: payData.timestamp,
|
timestamp: payData.timestamp,
|
||||||
nonceStr: payData.nonceStr,
|
nonceStr: payData.nonceStr,
|
||||||
package: payData.package,
|
package: payData.package,
|
||||||
signType: payData.signType,
|
signType: payData.signType,
|
||||||
paySign: payData.paySign
|
paySign: payData.paySign
|
||||||
},
|
},
|
||||||
res => {
|
res => {
|
||||||
if (res.errMsg == 'chooseWXPay:ok') {
|
if (res.errMsg == 'chooseWXPay:ok') {
|
||||||
if (!this.back) this.$util.redirectTo('/pages_tool/pay/result', { code: this.payInfo.out_trade_no }, 'redirectTo');
|
if (!this.back) this.$util.redirectTo('/pages_tool/pay/result', { code: this.payInfo.out_trade_no }, 'redirectTo');
|
||||||
else location.replace(this.back + '/pages_tool/pay/result?code=' + this.payInfo.out_trade_no);
|
else location.replace(this.back + '/pages_tool/pay/result?code=' + this.payInfo.out_trade_no);
|
||||||
} else {
|
} else {
|
||||||
this.$util.showToast({ title: res.errMsg });
|
this.$util.showToast({ title: res.errMsg });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
location.href = res.data.url;
|
location.href = res.data.url;
|
||||||
this.checkPayStatus();
|
this.checkPayStatus();
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.$util.showToast({ title: res.message });
|
this.$util.showToast({ title: res.message });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fail: res => {
|
fail: res => {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
this.$util.showToast({ title: 'request:fail' });
|
this.$util.showToast({ title: 'request:fail' });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
checkPayStatus() {
|
checkPayStatus() {
|
||||||
this.timer = setInterval(() => {
|
this.timer = setInterval(() => {
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
url: '/api/pay/status',
|
url: '/api/pay/status',
|
||||||
data: { out_trade_no: this.payInfo.out_trade_no },
|
data: { out_trade_no: this.payInfo.out_trade_no },
|
||||||
success: res => {
|
success: res => {
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
if (res.data.pay_status == 2) {
|
if (res.data.pay_status == 2) {
|
||||||
clearInterval(this.timer);
|
clearInterval(this.timer);
|
||||||
this.$util.redirectTo('/pages_tool/pay/result', { code: this.payInfo.out_trade_no }, 'redirectTo');
|
this.$util.redirectTo('/pages_tool/pay/result', { code: this.payInfo.out_trade_no }, 'redirectTo');
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
clearInterval(this.timer);
|
clearInterval(this.timer);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, 1000);
|
}, 1000);
|
||||||
},
|
},
|
||||||
// #endif
|
// #endif
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
pay() {
|
pay() {
|
||||||
var payType = this.payTypeList[this.payIndex];
|
var payType = this.payTypeList[this.payIndex];
|
||||||
if (!payType) return;
|
if (!payType) return;
|
||||||
|
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
url: '/api/pay/pay',
|
url: '/api/pay/pay',
|
||||||
data: {
|
data: {
|
||||||
out_trade_no: this.payInfo.out_trade_no,
|
out_trade_no: this.payInfo.out_trade_no,
|
||||||
pay_type: payType.type
|
pay_type: payType.type
|
||||||
},
|
},
|
||||||
success: res => {
|
success: res => {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
if (res.code >= 0) {
|
if (res.code >= 0) {
|
||||||
var payData = res.data.data;
|
var payData = res.data.data;
|
||||||
uni.requestPayment({
|
uni.requestPayment({
|
||||||
provider: payType.provider,
|
provider: payType.provider,
|
||||||
timeStamp: payData.timeStamp,
|
timeStamp: payData.timeStamp,
|
||||||
nonceStr: payData.nonceStr,
|
nonceStr: payData.nonceStr,
|
||||||
package: payData.package,
|
package: payData.package,
|
||||||
signType: payData.signType,
|
signType: payData.signType,
|
||||||
paySign: payData.paySign,
|
paySign: payData.paySign,
|
||||||
success: res => {
|
success: res => {
|
||||||
this.$util.redirectTo('/pages_tool/pay/result', { code: this.payInfo.out_trade_no }, 'redirectTo');
|
this.$util.redirectTo('/pages_tool/pay/result', { code: this.payInfo.out_trade_no }, 'redirectTo');
|
||||||
},
|
},
|
||||||
fail: res => {
|
fail: res => {
|
||||||
this.flag = false;
|
this.flag = false;
|
||||||
if (res.errMsg == 'requestPayment:fail cancel') {
|
if (res.errMsg == 'requestPayment:fail cancel') {
|
||||||
this.$util.showToast({ title: '您已取消支付' });
|
this.$util.showToast({ title: '您已取消支付' });
|
||||||
} else {
|
} else {
|
||||||
uni.showModal({ content: '支付失败,失败原因: ' + res.errMsg, showCancel: false });
|
uni.showModal({ content: '支付失败,失败原因: ' + res.errMsg, showCancel: false });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.$util.showToast({ title: res.message });
|
this.$util.showToast({ title: res.message });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fail: res => {
|
fail: res => {
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
this.$util.showToast({ title: 'request:fail' });
|
this.$util.showToast({ title: 'request:fail' });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
storeToken: function(nVal, oVal) {
|
storeToken: function(nVal, oVal) {
|
||||||
if (nVal) {
|
if (nVal) {
|
||||||
this.getPayInfo();
|
this.getPayInfo();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
filters: {
|
filters: {
|
||||||
/**
|
/**
|
||||||
* 金额格式化输出
|
* 金额格式化输出
|
||||||
* @param {Object} money
|
* @param {Object} money
|
||||||
*/
|
*/
|
||||||
moneyFormat(money) {
|
moneyFormat(money) {
|
||||||
return parseFloat(money).toFixed(2);
|
return parseFloat(money).toFixed(2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.cashier {
|
.cashier {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 80rpx 26rpx;
|
padding: 80rpx 26rpx;
|
||||||
.content {
|
.content {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 60rpx;
|
padding: 0 60rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.money-wrap {
|
.money-wrap {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: 40rpx 0;
|
margin: 40rpx 0;
|
||||||
.unit {
|
.unit {
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
margin-right: 6rpx;
|
margin-right: 6rpx;
|
||||||
}
|
}
|
||||||
.money {
|
.money {
|
||||||
font-size: 70rpx;
|
font-size: 70rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pay-type {
|
.pay-type {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
.payment-item {
|
.payment-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 90rpx;
|
height: 90rpx;
|
||||||
border-bottom: 2rpx solid $color-line;
|
border-bottom: 2rpx solid $color-line;
|
||||||
padding: 20rpx 30rpx;
|
padding: 20rpx 30rpx;
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
> view {
|
> view {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.name {
|
.name {
|
||||||
margin-left: 20rpx;
|
margin-left: 20rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.iconfont {
|
.iconfont {
|
||||||
font-size: 64rpx;
|
font-size: 64rpx;
|
||||||
}
|
}
|
||||||
.icon-weixin1 {
|
.icon-weixin1 {
|
||||||
color: #24af41;
|
color: #24af41;
|
||||||
}
|
}
|
||||||
.icon-zhifubaozhifu- {
|
.icon-zhifubaozhifu- {
|
||||||
color: #00a0e9;
|
color: #00a0e9;
|
||||||
}
|
}
|
||||||
.icon-yuan_checked {
|
.icon-yuan_checked {
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
color: $base-color;
|
color: $base-color;
|
||||||
}
|
}
|
||||||
.icon-checkboxblank {
|
.icon-checkboxblank {
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 80rpx !important;
|
margin-top: 80rpx !important;
|
||||||
background: $base-color;
|
background: $base-color;
|
||||||
height: 90rpx;
|
height: 90rpx;
|
||||||
line-height: 90rpx;
|
line-height: 90rpx;
|
||||||
border-radius: 90rpx;
|
border-radius: 90rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -337,7 +337,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -125,7 +125,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.content {
|
.content {
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -162,7 +162,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.content {
|
.content {
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
background-color: #f8f8f8;
|
background-color: #f8f8f8;
|
||||||
|
|||||||
@@ -76,7 +76,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
.picker-container {
|
.picker-container {
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -40,7 +40,7 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
.error-msg{
|
.error-msg{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 10vh;
|
padding-top: 10vh;
|
||||||
|
|||||||
@@ -1,498 +1,498 @@
|
|||||||
<template>
|
<template>
|
||||||
<view id="_root" :class="(selectable?'_select ':'')+'_root'" :style="containerStyle">
|
<view id="_root" :class="(selectable?'_select ':'')+'_root'" :style="containerStyle">
|
||||||
<slot v-if="!nodes[0]" />
|
<slot v-if="!nodes[0]" />
|
||||||
<!-- #ifndef APP-PLUS-NVUE -->
|
<!-- #ifndef APP-PLUS-NVUE -->
|
||||||
<node v-else :childs="nodes" :opts="[lazyLoad,loadingImg,errorImg,showImgMenu,selectable]" name="span" />
|
<node v-else :childs="nodes" :opts="[lazyLoad,loadingImg,errorImg,showImgMenu,selectable]" name="span" />
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<!-- #ifdef APP-PLUS-NVUE -->
|
<!-- #ifdef APP-PLUS-NVUE -->
|
||||||
<web-view ref="web" src="/uni_modules/mp-html/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
|
<web-view ref="web" src="/uni_modules/mp-html/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/**
|
/**
|
||||||
* mp-html v2.5.0
|
* mp-html v2.5.0
|
||||||
* @description 富文本组件
|
* @description 富文本组件
|
||||||
* @tutorial https://github.com/jin-yufeng/mp-html
|
* @tutorial https://github.com/jin-yufeng/mp-html
|
||||||
* @property {String} container-style 容器的样式
|
* @property {String} container-style 容器的样式
|
||||||
* @property {String} content 用于渲染的 html 字符串
|
* @property {String} content 用于渲染的 html 字符串
|
||||||
* @property {Boolean} copy-link 是否允许外部链接被点击时自动复制
|
* @property {Boolean} copy-link 是否允许外部链接被点击时自动复制
|
||||||
* @property {String} domain 主域名，用于拼接链接
|
* @property {String} domain 主域名，用于拼接链接
|
||||||
* @property {String} error-img 图片出错时的占位图链接
|
* @property {String} error-img 图片出错时的占位图链接
|
||||||
* @property {Boolean} lazy-load 是否开启图片懒加载
|
* @property {Boolean} lazy-load 是否开启图片懒加载
|
||||||
* @property {string} loading-img 图片加载过程中的占位图链接
|
* @property {string} loading-img 图片加载过程中的占位图链接
|
||||||
* @property {Boolean} pause-video 是否在播放一个视频时自动暂停其他视频
|
* @property {Boolean} pause-video 是否在播放一个视频时自动暂停其他视频
|
||||||
* @property {Boolean} preview-img 是否允许图片被点击时自动预览
|
* @property {Boolean} preview-img 是否允许图片被点击时自动预览
|
||||||
* @property {Boolean} scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动
|
* @property {Boolean} scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动
|
||||||
* @property {Boolean | String} selectable 是否开启长按复制
|
* @property {Boolean | String} selectable 是否开启长按复制
|
||||||
* @property {Boolean} set-title 是否将 title 标签的内容设置到页面标题
|
* @property {Boolean} set-title 是否将 title 标签的内容设置到页面标题
|
||||||
* @property {Boolean} show-img-menu 是否允许图片被长按时显示菜单
|
* @property {Boolean} show-img-menu 是否允许图片被长按时显示菜单
|
||||||
* @property {Object} tag-style 标签的默认样式
|
* @property {Object} tag-style 标签的默认样式
|
||||||
* @property {Boolean | Number} use-anchor 是否使用锚点链接
|
* @property {Boolean | Number} use-anchor 是否使用锚点链接
|
||||||
* @event {Function} load dom 结构加载完毕时触发
|
* @event {Function} load dom 结构加载完毕时触发
|
||||||
* @event {Function} ready 所有图片加载完毕时触发
|
* @event {Function} ready 所有图片加载完毕时触发
|
||||||
* @event {Function} imgtap 图片被点击时触发
|
* @event {Function} imgtap 图片被点击时触发
|
||||||
* @event {Function} linktap 链接被点击时触发
|
* @event {Function} linktap 链接被点击时触发
|
||||||
* @event {Function} play 音视频播放时触发
|
* @event {Function} play 音视频播放时触发
|
||||||
* @event {Function} error 媒体加载出错时触发
|
* @event {Function} error 媒体加载出错时触发
|
||||||
*/
|
*/
|
||||||
// #ifndef APP-PLUS-NVUE
|
// #ifndef APP-PLUS-NVUE
|
||||||
import node from './node/node'
|
import node from './node/node'
|
||||||
// #endif
|
// #endif
|
||||||
import Parser from './parser'
|
import Parser from './parser'
|
||||||
const plugins=[]
|
const plugins=[]
|
||||||
// #ifdef APP-PLUS-NVUE
|
// #ifdef APP-PLUS-NVUE
|
||||||
const dom = weex.requireModule('dom')
|
const dom = weex.requireModule('dom')
|
||||||
// #endif
|
// #endif
|
||||||
export default {
|
export default {
|
||||||
name: 'mp-html',
|
name: 'mp-html',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
nodes: [],
|
nodes: [],
|
||||||
// #ifdef APP-PLUS-NVUE
|
// #ifdef APP-PLUS-NVUE
|
||||||
height: 3
|
height: 3
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
containerStyle: {
|
containerStyle: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
content: {
|
content: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
copyLink: {
|
copyLink: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
domain: String,
|
domain: String,
|
||||||
errorImg: {
|
errorImg: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
lazyLoad: {
|
lazyLoad: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
loadingImg: {
|
loadingImg: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
pauseVideo: {
|
pauseVideo: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
previewImg: {
|
previewImg: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
scrollTable: [Boolean, String],
|
scrollTable: [Boolean, String],
|
||||||
selectable: [Boolean, String],
|
selectable: [Boolean, String],
|
||||||
setTitle: {
|
setTitle: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
showImgMenu: {
|
showImgMenu: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
tagStyle: Object,
|
tagStyle: Object,
|
||||||
useAnchor: [Boolean, Number]
|
useAnchor: [Boolean, Number]
|
||||||
},
|
},
|
||||||
// #ifdef VUE3
|
// #ifdef VUE3
|
||||||
emits: ['load', 'ready', 'imgtap', 'linktap', 'play', 'error'],
|
emits: ['load', 'ready', 'imgtap', 'linktap', 'play', 'error'],
|
||||||
// #endif
|
// #endif
|
||||||
// #ifndef APP-PLUS-NVUE
|
// #ifndef APP-PLUS-NVUE
|
||||||
components: {
|
components: {
|
||||||
node
|
node
|
||||||
},
|
},
|
||||||
// #endif
|
// #endif
|
||||||
watch: {
|
watch: {
|
||||||
content (content) {
|
content (content) {
|
||||||
this.setContent(content)
|
this.setContent(content)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
this.plugins = []
|
this.plugins = []
|
||||||
for (let i = plugins.length; i--;) {
|
for (let i = plugins.length; i--;) {
|
||||||
this.plugins.push(new plugins[i](this))
|
this.plugins.push(new plugins[i](this))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
if (this.content && !this.nodes.length) {
|
if (this.content && !this.nodes.length) {
|
||||||
this.setContent(this.content)
|
this.setContent(this.content)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this._hook('onDetached')
|
this._hook('onDetached')
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
* @description 将锚点跳转的范围限定在一个 scroll-view 内
|
* @description 将锚点跳转的范围限定在一个 scroll-view 内
|
||||||
* @param {Object} page scroll-view 所在页面的示例
|
* @param {Object} page scroll-view 所在页面的示例
|
||||||
* @param {String} selector scroll-view 的选择器
|
* @param {String} selector scroll-view 的选择器
|
||||||
* @param {String} scrollTop scroll-view scroll-top 属性绑定的变量名
|
* @param {String} scrollTop scroll-view scroll-top 属性绑定的变量名
|
||||||
*/
|
*/
|
||||||
in (page, selector, scrollTop) {
|
in (page, selector, scrollTop) {
|
||||||
// #ifndef APP-PLUS-NVUE
|
// #ifndef APP-PLUS-NVUE
|
||||||
if (page && selector && scrollTop) {
|
if (page && selector && scrollTop) {
|
||||||
this._in = {
|
this._in = {
|
||||||
page,
|
page,
|
||||||
selector,
|
selector,
|
||||||
scrollTop
|
scrollTop
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 锚点跳转
|
* @description 锚点跳转
|
||||||
* @param {String} id 要跳转的锚点 id
|
* @param {String} id 要跳转的锚点 id
|
||||||
* @param {Number} offset 跳转位置的偏移量
|
* @param {Number} offset 跳转位置的偏移量
|
||||||
* @returns {Promise}
|
* @returns {Promise}
|
||||||
*/
|
*/
|
||||||
navigateTo (id, offset) {
|
navigateTo (id, offset) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
if (!this.useAnchor) {
|
if (!this.useAnchor) {
|
||||||
reject(Error('Anchor is disabled'))
|
reject(Error('Anchor is disabled'))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
offset = offset || parseInt(this.useAnchor) || 0
|
offset = offset || parseInt(this.useAnchor) || 0
|
||||||
// #ifdef APP-PLUS-NVUE
|
// #ifdef APP-PLUS-NVUE
|
||||||
if (!id) {
|
if (!id) {
|
||||||
dom.scrollToElement(this.$refs.web, {
|
dom.scrollToElement(this.$refs.web, {
|
||||||
offset
|
offset
|
||||||
})
|
})
|
||||||
resolve()
|
resolve()
|
||||||
} else {
|
} else {
|
||||||
this._navigateTo = {
|
this._navigateTo = {
|
||||||
resolve,
|
resolve,
|
||||||
reject,
|
reject,
|
||||||
offset
|
offset
|
||||||
}
|
}
|
||||||
this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
|
this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
// #ifndef APP-PLUS-NVUE
|
// #ifndef APP-PLUS-NVUE
|
||||||
let deep = ' '
|
let deep = ' '
|
||||||
// #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
|
// #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
|
||||||
deep = '>>>'
|
deep = '>>>'
|
||||||
// #endif
|
// #endif
|
||||||
const selector = uni.createSelectorQuery()
|
const selector = uni.createSelectorQuery()
|
||||||
// #ifndef MP-ALIPAY
|
// #ifndef MP-ALIPAY
|
||||||
.in(this._in ? this._in.page : this)
|
.in(this._in ? this._in.page : this)
|
||||||
// #endif
|
// #endif
|
||||||
.select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
|
.select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
|
||||||
if (this._in) {
|
if (this._in) {
|
||||||
selector.select(this._in.selector).scrollOffset()
|
selector.select(this._in.selector).scrollOffset()
|
||||||
.select(this._in.selector).boundingClientRect()
|
.select(this._in.selector).boundingClientRect()
|
||||||
} else {
|
} else {
|
||||||
// 获取 scroll-view 的位置和滚动距离
|
// 获取 scroll-view 的位置和滚动距离
|
||||||
selector.selectViewport().scrollOffset() // 获取窗口的滚动距离
|
selector.selectViewport().scrollOffset() // 获取窗口的滚动距离
|
||||||
}
|
}
|
||||||
selector.exec(res => {
|
selector.exec(res => {
|
||||||
if (!res[0]) {
|
if (!res[0]) {
|
||||||
reject(Error('Label not found'))
|
reject(Error('Label not found'))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
|
const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
|
||||||
if (this._in) {
|
if (this._in) {
|
||||||
// scroll-view 跳转
|
// scroll-view 跳转
|
||||||
this._in.page[this._in.scrollTop] = scrollTop
|
this._in.page[this._in.scrollTop] = scrollTop
|
||||||
} else {
|
} else {
|
||||||
// 页面跳转
|
// 页面跳转
|
||||||
uni.pageScrollTo({
|
uni.pageScrollTo({
|
||||||
scrollTop,
|
scrollTop,
|
||||||
duration: 300
|
duration: 300
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
resolve()
|
resolve()
|
||||||
})
|
})
|
||||||
// #endif
|
// #endif
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 获取文本内容
|
* @description 获取文本内容
|
||||||
* @return {String}
|
* @return {String}
|
||||||
*/
|
*/
|
||||||
getText (nodes) {
|
getText (nodes) {
|
||||||
let text = '';
|
let text = '';
|
||||||
(function traversal (nodes) {
|
(function traversal (nodes) {
|
||||||
for (let i = 0; i < nodes.length; i++) {
|
for (let i = 0; i < nodes.length; i++) {
|
||||||
const node = nodes[i]
|
const node = nodes[i]
|
||||||
if (node.type === 'text') {
|
if (node.type === 'text') {
|
||||||
text += node.text.replace(/&/g, '&')
|
text += node.text.replace(/&/g, '&')
|
||||||
} else if (node.name === 'br') {
|
} else if (node.name === 'br') {
|
||||||
text += '\n'
|
text += '\n'
|
||||||
} else {
|
} else {
|
||||||
// 块级标签前后加换行
|
// 块级标签前后加换行
|
||||||
const isBlock = node.name === 'p' || node.name === 'div' || node.name === 'tr' || node.name === 'li' || (node.name[0] === 'h' && node.name[1] > '0' && node.name[1] < '7')
|
const isBlock = node.name === 'p' || node.name === 'div' || node.name === 'tr' || node.name === 'li' || (node.name[0] === 'h' && node.name[1] > '0' && node.name[1] < '7')
|
||||||
if (isBlock && text && text[text.length - 1] !== '\n') {
|
if (isBlock && text && text[text.length - 1] !== '\n') {
|
||||||
text += '\n'
|
text += '\n'
|
||||||
}
|
}
|
||||||
// 递归获取子节点的文本
|
// 递归获取子节点的文本
|
||||||
if (node.children) {
|
if (node.children) {
|
||||||
traversal(node.children)
|
traversal(node.children)
|
||||||
}
|
}
|
||||||
if (isBlock && text[text.length - 1] !== '\n') {
|
if (isBlock && text[text.length - 1] !== '\n') {
|
||||||
text += '\n'
|
text += '\n'
|
||||||
} else if (node.name === 'td' || node.name === 'th') {
|
} else if (node.name === 'td' || node.name === 'th') {
|
||||||
text += '\t'
|
text += '\t'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})(nodes || this.nodes)
|
})(nodes || this.nodes)
|
||||||
return text
|
return text
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 获取内容大小和位置
|
* @description 获取内容大小和位置
|
||||||
* @return {Promise}
|
* @return {Promise}
|
||||||
*/
|
*/
|
||||||
getRect () {
|
getRect () {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
uni.createSelectorQuery()
|
uni.createSelectorQuery()
|
||||||
// #ifndef MP-ALIPAY
|
// #ifndef MP-ALIPAY
|
||||||
.in(this)
|
.in(this)
|
||||||
// #endif
|
// #endif
|
||||||
.select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject(Error('Root label not found')))
|
.select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject(Error('Root label not found')))
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 暂停播放媒体
|
* @description 暂停播放媒体
|
||||||
*/
|
*/
|
||||||
pauseMedia () {
|
pauseMedia () {
|
||||||
for (let i = (this._videos || []).length; i--;) {
|
for (let i = (this._videos || []).length; i--;) {
|
||||||
this._videos[i].pause()
|
this._videos[i].pause()
|
||||||
}
|
}
|
||||||
// #ifdef APP-PLUS
|
// #ifdef APP-PLUS
|
||||||
const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].pause()'
|
const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].pause()'
|
||||||
// #ifndef APP-PLUS-NVUE
|
// #ifndef APP-PLUS-NVUE
|
||||||
let page = this.$parent
|
let page = this.$parent
|
||||||
while (!page.$scope) page = page.$parent
|
while (!page.$scope) page = page.$parent
|
||||||
page.$scope.$getAppWebview().evalJS(command)
|
page.$scope.$getAppWebview().evalJS(command)
|
||||||
// #endif
|
// #endif
|
||||||
// #ifdef APP-PLUS-NVUE
|
// #ifdef APP-PLUS-NVUE
|
||||||
this.$refs.web.evalJs(command)
|
this.$refs.web.evalJs(command)
|
||||||
// #endif
|
// #endif
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 设置媒体播放速率
|
* @description 设置媒体播放速率
|
||||||
* @param {Number} rate 播放速率
|
* @param {Number} rate 播放速率
|
||||||
*/
|
*/
|
||||||
setPlaybackRate (rate) {
|
setPlaybackRate (rate) {
|
||||||
this.playbackRate = rate
|
this.playbackRate = rate
|
||||||
for (let i = (this._videos || []).length; i--;) {
|
for (let i = (this._videos || []).length; i--;) {
|
||||||
this._videos[i].playbackRate(rate)
|
this._videos[i].playbackRate(rate)
|
||||||
}
|
}
|
||||||
// #ifdef APP-PLUS
|
// #ifdef APP-PLUS
|
||||||
const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].playbackRate=' + rate
|
const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].playbackRate=' + rate
|
||||||
// #ifndef APP-PLUS-NVUE
|
// #ifndef APP-PLUS-NVUE
|
||||||
let page = this.$parent
|
let page = this.$parent
|
||||||
while (!page.$scope) page = page.$parent
|
while (!page.$scope) page = page.$parent
|
||||||
page.$scope.$getAppWebview().evalJS(command)
|
page.$scope.$getAppWebview().evalJS(command)
|
||||||
// #endif
|
// #endif
|
||||||
// #ifdef APP-PLUS-NVUE
|
// #ifdef APP-PLUS-NVUE
|
||||||
this.$refs.web.evalJs(command)
|
this.$refs.web.evalJs(command)
|
||||||
// #endif
|
// #endif
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 设置内容
|
* @description 设置内容
|
||||||
* @param {String} content html 内容
|
* @param {String} content html 内容
|
||||||
* @param {Boolean} append 是否在尾部追加
|
* @param {Boolean} append 是否在尾部追加
|
||||||
*/
|
*/
|
||||||
setContent (content, append) {
|
setContent (content, append) {
|
||||||
if (!append || !this.imgList) {
|
if (!append || !this.imgList) {
|
||||||
this.imgList = []
|
this.imgList = []
|
||||||
}
|
}
|
||||||
const nodes = new Parser(this).parse(content)
|
const nodes = new Parser(this).parse(content)
|
||||||
// #ifdef APP-PLUS-NVUE
|
// #ifdef APP-PLUS-NVUE
|
||||||
if (this._ready) {
|
if (this._ready) {
|
||||||
this._set(nodes, append)
|
this._set(nodes, append)
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
|
this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
|
||||||
|
|
||||||
// #ifndef APP-PLUS-NVUE
|
// #ifndef APP-PLUS-NVUE
|
||||||
this._videos = []
|
this._videos = []
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this._hook('onLoad')
|
this._hook('onLoad')
|
||||||
this.$emit('load')
|
this.$emit('load')
|
||||||
})
|
})
|
||||||
|
|
||||||
if (this.lazyLoad || this.imgList._unloadimgs < this.imgList.length / 2) {
|
if (this.lazyLoad || this.imgList._unloadimgs < this.imgList.length / 2) {
|
||||||
// 设置懒加载，每 350ms 获取高度，不变则认为加载完毕
|
// 设置懒加载，每 350ms 获取高度，不变则认为加载完毕
|
||||||
let height = 0
|
let height = 0
|
||||||
const callback = rect => {
|
const callback = rect => {
|
||||||
if (!rect || !rect.height) rect = {}
|
if (!rect || !rect.height) rect = {}
|
||||||
// 350ms 总高度无变化就触发 ready 事件
|
// 350ms 总高度无变化就触发 ready 事件
|
||||||
if (rect.height === height) {
|
if (rect.height === height) {
|
||||||
this.$emit('ready', rect)
|
this.$emit('ready', rect)
|
||||||
} else {
|
} else {
|
||||||
height = rect.height
|
height = rect.height
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.getRect().then(callback).catch(callback)
|
this.getRect().then(callback).catch(callback)
|
||||||
}, 350)
|
}, 350)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.getRect().then(callback).catch(callback)
|
this.getRect().then(callback).catch(callback)
|
||||||
} else {
|
} else {
|
||||||
// 未设置懒加载，等待所有图片加载完毕
|
// 未设置懒加载，等待所有图片加载完毕
|
||||||
if (!this.imgList._unloadimgs) {
|
if (!this.imgList._unloadimgs) {
|
||||||
this.getRect().then(rect => {
|
this.getRect().then(rect => {
|
||||||
this.$emit('ready', rect)
|
this.$emit('ready', rect)
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
this.$emit('ready', {})
|
this.$emit('ready', {})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 调用插件钩子函数
|
* @description 调用插件钩子函数
|
||||||
*/
|
*/
|
||||||
_hook (name) {
|
_hook (name) {
|
||||||
for (let i = plugins.length; i--;) {
|
for (let i = plugins.length; i--;) {
|
||||||
if (this.plugins[i][name]) {
|
if (this.plugins[i][name]) {
|
||||||
this.plugins[i][name]()
|
this.plugins[i][name]()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// #ifdef APP-PLUS-NVUE
|
// #ifdef APP-PLUS-NVUE
|
||||||
/**
|
/**
|
||||||
* @description 设置内容
|
* @description 设置内容
|
||||||
*/
|
*/
|
||||||
_set (nodes, append) {
|
_set (nodes, append) {
|
||||||
this.$refs.web.evalJs('setContent(' + JSON.stringify(nodes).replace(/%22/g, '') + ',' + JSON.stringify([this.containerStyle.replace(/(?:margin|padding)[^;]+/g, ''), this.errorImg, this.loadingImg, this.pauseVideo, this.scrollTable, this.selectable]) + ',' + append + ')')
|
this.$refs.web.evalJs('setContent(' + JSON.stringify(nodes).replace(/%22/g, '') + ',' + JSON.stringify([this.containerStyle.replace(/(?:margin|padding)[^;]+/g, ''), this.errorImg, this.loadingImg, this.pauseVideo, this.scrollTable, this.selectable]) + ',' + append + ')')
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 接收到 web-view 消息
|
* @description 接收到 web-view 消息
|
||||||
*/
|
*/
|
||||||
_onMessage (e) {
|
_onMessage (e) {
|
||||||
const message = e.detail.data[0]
|
const message = e.detail.data[0]
|
||||||
switch (message.action) {
|
switch (message.action) {
|
||||||
// web-view 初始化完毕
|
// web-view 初始化完毕
|
||||||
case 'onJSBridgeReady':
|
case 'onJSBridgeReady':
|
||||||
this._ready = true
|
this._ready = true
|
||||||
if (this.nodes) {
|
if (this.nodes) {
|
||||||
this._set(this.nodes)
|
this._set(this.nodes)
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
// 内容 dom 加载完毕
|
// 内容 dom 加载完毕
|
||||||
case 'onLoad':
|
case 'onLoad':
|
||||||
this.height = message.height
|
this.height = message.height
|
||||||
this._hook('onLoad')
|
this._hook('onLoad')
|
||||||
this.$emit('load')
|
this.$emit('load')
|
||||||
break
|
break
|
||||||
// 所有图片加载完毕
|
// 所有图片加载完毕
|
||||||
case 'onReady':
|
case 'onReady':
|
||||||
this.getRect().then(res => {
|
this.getRect().then(res => {
|
||||||
this.$emit('ready', res)
|
this.$emit('ready', res)
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
this.$emit('ready', {})
|
this.$emit('ready', {})
|
||||||
})
|
})
|
||||||
break
|
break
|
||||||
// 总高度发生变化
|
// 总高度发生变化
|
||||||
case 'onHeightChange':
|
case 'onHeightChange':
|
||||||
this.height = message.height
|
this.height = message.height
|
||||||
break
|
break
|
||||||
// 图片点击
|
// 图片点击
|
||||||
case 'onImgTap':
|
case 'onImgTap':
|
||||||
this.$emit('imgtap', message.attrs)
|
this.$emit('imgtap', message.attrs)
|
||||||
if (this.previewImg) {
|
if (this.previewImg) {
|
||||||
uni.previewImage({
|
uni.previewImage({
|
||||||
current: parseInt(message.attrs.i),
|
current: parseInt(message.attrs.i),
|
||||||
urls: this.imgList
|
urls: this.imgList
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
// 链接点击
|
// 链接点击
|
||||||
case 'onLinkTap': {
|
case 'onLinkTap': {
|
||||||
const href = message.attrs.href
|
const href = message.attrs.href
|
||||||
this.$emit('linktap', message.attrs)
|
this.$emit('linktap', message.attrs)
|
||||||
if (href) {
|
if (href) {
|
||||||
// 锚点跳转
|
// 锚点跳转
|
||||||
if (href[0] === '#') {
|
if (href[0] === '#') {
|
||||||
if (this.useAnchor) {
|
if (this.useAnchor) {
|
||||||
dom.scrollToElement(this.$refs.web, {
|
dom.scrollToElement(this.$refs.web, {
|
||||||
offset: message.offset
|
offset: message.offset
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
} else if (href.includes('://')) {
|
} else if (href.includes('://')) {
|
||||||
// 打开外链
|
// 打开外链
|
||||||
if (this.copyLink) {
|
if (this.copyLink) {
|
||||||
plus.runtime.openWeb(href)
|
plus.runtime.openWeb(href)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: href,
|
url: href,
|
||||||
fail () {
|
fail () {
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url: href
|
url: href
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 'onPlay':
|
case 'onPlay':
|
||||||
this.$emit('play')
|
this.$emit('play')
|
||||||
break
|
break
|
||||||
// 获取到锚点的偏移量
|
// 获取到锚点的偏移量
|
||||||
case 'getOffset':
|
case 'getOffset':
|
||||||
if (typeof message.offset === 'number') {
|
if (typeof message.offset === 'number') {
|
||||||
dom.scrollToElement(this.$refs.web, {
|
dom.scrollToElement(this.$refs.web, {
|
||||||
offset: message.offset + this._navigateTo.offset
|
offset: message.offset + this._navigateTo.offset
|
||||||
})
|
})
|
||||||
this._navigateTo.resolve()
|
this._navigateTo.resolve()
|
||||||
} else {
|
} else {
|
||||||
this._navigateTo.reject(Error('Label not found'))
|
this._navigateTo.reject(Error('Label not found'))
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
// 点击
|
// 点击
|
||||||
case 'onClick':
|
case 'onClick':
|
||||||
this.$emit('tap')
|
this.$emit('tap')
|
||||||
this.$emit('click')
|
this.$emit('click')
|
||||||
break
|
break
|
||||||
// 出错
|
// 出错
|
||||||
case 'onError':
|
case 'onError':
|
||||||
this.$emit('error', {
|
this.$emit('error', {
|
||||||
source: message.source,
|
source: message.source,
|
||||||
attrs: message.attrs
|
attrs: message.attrs
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
/* #ifndef APP-PLUS-NVUE */
|
/* #ifndef APP-PLUS-NVUE */
|
||||||
/* 根节点样式 */
|
/* 根节点样式 */
|
||||||
._root {
|
._root {
|
||||||
padding: 1px 0;
|
padding: 1px 0;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 长按复制 */
|
/* 长按复制 */
|
||||||
._select {
|
._select {
|
||||||
user-select: text;
|
user-select: text;
|
||||||
}
|
}
|
||||||
/* #endif */
|
/* #endif */
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user