fix(code): 修正代码错误及不严谨的地方
This commit is contained in:
@@ -603,7 +603,7 @@
|
||||
<text class="iconfont icon-close" @click="$refs.memberGoodsCardPopup.close()"></text>
|
||||
</view>
|
||||
<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="title">{{ item.goods_name }}</view>
|
||||
<view class="info">
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
:interval="swiperConfig.interval || 3000"
|
||||
:duration="swiperConfig.duration || 500"
|
||||
: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="['item', value.ornament.type]" :style="itemCss">
|
||||
<view class="article-img">
|
||||
|
||||
@@ -206,7 +206,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
|
||||
.fui-audio {
|
||||
width: 100%;
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<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' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
</view>
|
||||
@@ -67,7 +67,7 @@
|
||||
|
||||
<template v-if="value.template == 'horizontal-slide'">
|
||||
<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' }">
|
||||
<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"/>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
<block v-if="categoryTree.length">
|
||||
<scroll-view scroll-y="true" class="tree-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 },
|
||||
{ 'border-bottom': 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"
|
||||
refresher-default-style="none" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
|
||||
@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"
|
||||
:select="select" :oneCategorySelect="oneCategorySelect" :isList="isList" @tologin="toLogin"
|
||||
@selectsku="selectSku($event, index)" @addCart="addCartPoint"
|
||||
@@ -95,7 +95,7 @@
|
||||
|
||||
<view class="content-wrap"
|
||||
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' }">
|
||||
<diy-category-item :category="item" :value="value" ref="categoryItem" :index="index"
|
||||
:last="index == categoryTree.length - 1 ? true : false" :select="select"
|
||||
|
||||
@@ -20,4 +20,4 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
<style></style>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<swiper class="coupon-style-one" circular>
|
||||
<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="{
|
||||
color: value.moneyColor,
|
||||
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style1-bg.png') + ')',
|
||||
@@ -43,7 +43,7 @@
|
||||
<template v-if="value.style == '2'">
|
||||
<swiper class="coupon-style-two" circular>
|
||||
<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="{
|
||||
color: value.moneyColor,
|
||||
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_bg1.png') + ')',
|
||||
@@ -76,7 +76,7 @@
|
||||
<template v-if="value.style == '3'">
|
||||
<swiper class="coupon-style-three" circular>
|
||||
<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="{
|
||||
color: value.moneyColor,
|
||||
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_shu.png') + ')',
|
||||
@@ -110,7 +110,7 @@
|
||||
<template v-if="value.style == '4'">
|
||||
<swiper class="coupon-style-four" circular>
|
||||
<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="{
|
||||
color: value.moneyColor,
|
||||
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style4_bg.png') + ')',
|
||||
@@ -143,7 +143,7 @@
|
||||
<view class="coupon-style-five">
|
||||
<view class="coupon-all">
|
||||
<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>
|
||||
<view class="coupon">
|
||||
<view class="coupon-info">
|
||||
@@ -176,7 +176,7 @@
|
||||
<template v-if="value.style == '6'">
|
||||
<swiper class="coupon-style-six" circular>
|
||||
<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="{
|
||||
color: value.moneyColor,
|
||||
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style6-bg-1.png') + ')',
|
||||
@@ -230,7 +230,7 @@
|
||||
<template v-if="value.style == '7'">
|
||||
<scroll-view class="coupon-style-seven" scroll-x="true">
|
||||
<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>
|
||||
<view class="coupon">
|
||||
<view class="coupon-info">
|
||||
@@ -1067,7 +1067,7 @@
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<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 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' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index)"/>
|
||||
</view>
|
||||
|
||||
@@ -26,4 +26,4 @@
|
||||
};
|
||||
</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>
|
||||
<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"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -164,7 +164,7 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style>
|
||||
/* 固定显示 */
|
||||
.graphic-nav.fixed-layout>>>.uni-scroll-view-content {
|
||||
display: flex;
|
||||
|
||||
@@ -37,4 +37,4 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
<style></style>
|
||||
|
||||
@@ -22,4 +22,4 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
<style></style>
|
||||
|
||||
@@ -242,7 +242,7 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1457,7 +1457,7 @@
|
||||
}
|
||||
}
|
||||
</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 .uni-popup__wrapper-box {
|
||||
border-top-left-radius: 30rpx !important;
|
||||
|
||||
@@ -179,7 +179,7 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style>
|
||||
/* 单行滑动 */
|
||||
.merch-nav.singleSlide>>>.uni-scroll-view-content {
|
||||
display: flex;
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</view>
|
||||
|
||||
<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">
|
||||
<view class="notes-item" v-if="item.status == 1">
|
||||
<view class="notes-item-con">
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style>
|
||||
.quick-nav >>> .uni-scroll-view-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
|
||||
<view class="content-wrap">
|
||||
<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' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
</view>
|
||||
@@ -82,7 +82,7 @@
|
||||
</template>
|
||||
|
||||
<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' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
</view>
|
||||
@@ -119,7 +119,7 @@
|
||||
|
||||
<template v-if="value.template == 'horizontal-slide'">
|
||||
<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' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
</view>
|
||||
@@ -147,7 +147,7 @@
|
||||
</scroll-view>
|
||||
<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']">
|
||||
<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' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(dataIndex, pageIndex)"/>
|
||||
</view>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<view class="diy-store-label">
|
||||
<block v-if="businessConfig.store_business == 'store'">
|
||||
<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>
|
||||
<text class="label-name" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ item }}</text>
|
||||
</view>
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -452,4 +452,4 @@
|
||||
<style lang="scss">
|
||||
@import '@/common/css/goods_detail.scss';
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
<style scoped></style>
|
||||
@@ -47,6 +47,6 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
@import './mescroll-down.css';
|
||||
</style>
|
||||
|
||||
@@ -46,7 +46,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
/* 无任何数据的空布局 */
|
||||
.mescroll-empty {
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -47,7 +47,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
/* 回到顶部的按钮 */
|
||||
.mescroll-totop {
|
||||
z-index: 99;
|
||||
|
||||
@@ -34,6 +34,6 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
@import './mescroll-up.css';
|
||||
</style>
|
||||
|
||||
@@ -291,7 +291,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
@import './mescroll-body.css';
|
||||
@import './components/mescroll-down.css';
|
||||
@import './components/mescroll-up.css';
|
||||
|
||||
@@ -422,7 +422,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
@import './mescroll-uni.css';
|
||||
@import './components/mescroll-down.css';
|
||||
@import './components/mescroll-up.css';
|
||||
|
||||
@@ -164,7 +164,7 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
.register-box /deep/ .uni-scroll-view {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
.ns-goods-action {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
|
||||
@@ -768,7 +768,7 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
/deep/ .reward-popup .uni-popup__wrapper-box {
|
||||
background: none !important;
|
||||
max-width: unset !important;
|
||||
|
||||
@@ -171,7 +171,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
/deep/ .newgift-content uni-image {
|
||||
width: 113rpx !important;
|
||||
height: 24rpx !important;
|
||||
|
||||
@@ -22,7 +22,7 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style>
|
||||
.weui-switch {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
@@ -1,305 +1,305 @@
|
||||
<template>
|
||||
<view class="pick-regions">
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="handleValueChange" @columnchange="handleColumnChange">
|
||||
<slot></slot>
|
||||
</picker>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view @click="$refs.regionsRef.open()">
|
||||
<slot></slot>
|
||||
</view>
|
||||
|
||||
<uni-popup type="bottom" ref="regionsRef">
|
||||
<view class="regions-picker-container">
|
||||
<view class="picker-header">
|
||||
<view class="picker-action cancel" @click="$refs.regionsRef.close()">取消</view>
|
||||
<view class="picker-action confirm" @click="confirmRegions">完成</view>
|
||||
</view>
|
||||
<picker-view :value="multiIndex" @change="pickerViewColumnChange" class="picker-view">
|
||||
<picker-view-column v-if="multiArray[0]">
|
||||
<view class="item" v-for="(item,index) in multiArray[0]" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="multiArray[1]">
|
||||
<view class="item" v-for="(item,index) in multiArray[1]" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="multiArray[2]">
|
||||
<view class="item" v-for="(item,index) in multiArray[2]" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
defaultRegions: {
|
||||
type: Array
|
||||
},
|
||||
selectArr: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pickerValueArray: [],
|
||||
cityArr: [],
|
||||
districtArr: [],
|
||||
multiIndex: [0, 0, 0],
|
||||
isInitMultiArray: false,
|
||||
// 是否加载完默认地区
|
||||
isLoadDefaultAreas: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
defaultRegions: {
|
||||
handler(arr, oldArr = []) {
|
||||
// 避免传的是字面量的时候重复触发
|
||||
if (arr.length != this.selectArr || arr.join('') === oldArr.join('')) return;
|
||||
this.isInitMultiArray = false;
|
||||
this.handleDefaultRegions();
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
multiArray() {
|
||||
if (!this.isLoadDefaultAreas) return;
|
||||
var arr = this.pickedArr.map(arr => arr.map(item => item.label));
|
||||
return arr;
|
||||
},
|
||||
pickedArr() {
|
||||
// 进行初始化
|
||||
if (this.isInitMultiArray) {
|
||||
if (this.selectArr == '2') {
|
||||
return [this.pickerValueArray[0], this.pickerValueArray[1]];
|
||||
} else {
|
||||
return [this.pickerValueArray[0], this.pickerValueArray[1], this.pickerValueArray[2]];
|
||||
}
|
||||
}
|
||||
|
||||
if (this.selectArr == '2') {
|
||||
return [this.pickerValueArray[0], this.cityArr];
|
||||
} else {
|
||||
return [this.pickerValueArray[0], this.cityArr, this.districtArr];
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDefaultAreas(0, { level: 0 });
|
||||
},
|
||||
methods: {
|
||||
async pickerViewColumnChange(e) {
|
||||
var value = e.detail.value;
|
||||
if (value[0] != this.multiIndex[0]) {
|
||||
await this.handleColumnChange({ detail: { column: 0, value: value[0] } })
|
||||
this.multiIndex[1] = e.detail.value[1] || 0;
|
||||
await this.handleColumnChange({ detail: { column: 1, value: value[1] } })
|
||||
this.multiIndex[2] = e.detail.value[2] || 0;
|
||||
} else if (value[1] != this.multiIndex[1]) {
|
||||
await this.handleColumnChange({ detail: { column: 1, value: value[1] } })
|
||||
this.multiIndex[2] = e.detail.value[2] || 0;
|
||||
} else {
|
||||
this.multiIndex = value
|
||||
}
|
||||
},
|
||||
confirmRegions() {
|
||||
this.handleValueChange({ detail: { value: this.multiIndex } })
|
||||
this.$refs.regionsRef.close()
|
||||
},
|
||||
async handleColumnChange(e) {
|
||||
this.isInitMultiArray = false;
|
||||
let col = e.detail.column;
|
||||
let row = e.detail.value;
|
||||
this.multiIndex[col] = row;
|
||||
switch (col) {
|
||||
case 0:
|
||||
//选择省,加载市、区县
|
||||
this.cityArr = await this.getAreasAsync(this.pickerValueArray[0][this.multiIndex[col]].value);
|
||||
this.districtArr = await this.getAreasAsync(this.cityArr[0].value);
|
||||
break;
|
||||
case 1:
|
||||
//选择市,加载区县
|
||||
this.districtArr = await this.getAreasAsync(this.cityArr[this.multiIndex[col]].value);
|
||||
break;
|
||||
case 2:
|
||||
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);
|
||||
break;
|
||||
}
|
||||
},
|
||||
handleValueChange(e) {
|
||||
// 结构赋值
|
||||
let [index0, index1, index2] = e.detail.value;
|
||||
let [arr0, arr1, arr2] = this.pickedArr;
|
||||
let address = '';
|
||||
if (this.selectArr == '2') {
|
||||
address = [arr0[index0], arr1[index1]];
|
||||
} else {
|
||||
address = [arr0[index0], arr1[index1], arr2[index2]];
|
||||
}
|
||||
this.$emit('getRegions', address);
|
||||
},
|
||||
handleDefaultRegions() {
|
||||
var time = setInterval(() => {
|
||||
// if (!this.isLoadDefaultAreas) return;
|
||||
// console.log('this.pickerValueArray',this.pickerValueArray)
|
||||
for (let i = 0; i < this.defaultRegions.length; i++) {
|
||||
if(this.pickerValueArray[i] == null) continue;
|
||||
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) {
|
||||
// 设置选中省
|
||||
this.$set(this.multiIndex, i, j);
|
||||
|
||||
// 查询市
|
||||
this.getAreas(this.pickerValueArray[i][j].value, data => {
|
||||
this.cityArr = data;
|
||||
this.$set(this.pickerValueArray, 1, data)
|
||||
for (let k = 0; k < this.cityArr.length; k++) {
|
||||
if (this.defaultRegions[1] == this.cityArr[k].value || this.defaultRegions[1] == this.cityArr[k].label) {
|
||||
// 设置选中市
|
||||
this.$set(this.multiIndex, 1, k);
|
||||
|
||||
// 查询区县
|
||||
this.getAreas(this.cityArr[k].value, data => {
|
||||
this.districtArr = data;
|
||||
this.$set(this.pickerValueArray, 2, data)
|
||||
|
||||
// 设置选中区县
|
||||
for (let u = 0; u < this.districtArr
|
||||
.length; u++) {
|
||||
if (this.defaultRegions[2] == this.districtArr[u].value || this.defaultRegions[2] == this.districtArr[u].label) {
|
||||
this.$set(this.multiIndex, 2, u);
|
||||
this.handleValueChange({
|
||||
detail: {
|
||||
value: [j, k, u]
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.isLoadDefaultAreas) clearInterval(time);
|
||||
}, 100);
|
||||
},
|
||||
getDefaultAreas(pid, obj) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/address/lists',
|
||||
data: { pid: pid },
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
var data = [];
|
||||
var selected = undefined;
|
||||
res.data.forEach((item, index) => {
|
||||
if (obj != undefined) {
|
||||
if (obj.level == 0 && obj.province_id != undefined) {
|
||||
selected = obj.province_id;
|
||||
} else if (obj.level == 1 && obj.city_id != undefined) {
|
||||
selected = obj.city_id;
|
||||
} else if (obj.level == 2 && obj.district_id != undefined) {
|
||||
selected = obj.district_id;
|
||||
}
|
||||
}
|
||||
|
||||
if (selected == undefined && index == 0) {
|
||||
selected = item.id;
|
||||
}
|
||||
data.push({
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
level: item.level
|
||||
});
|
||||
});
|
||||
|
||||
this.pickerValueArray[obj.level] = data;
|
||||
if (obj.level + 1 < 3) {
|
||||
obj.level++;
|
||||
this.getDefaultAreas(selected, obj);
|
||||
} else {
|
||||
this.isInitMultiArray = true;
|
||||
this.isLoadDefaultAreas = true;
|
||||
this.handleDefaultRegions()
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 同步获取地区
|
||||
async getAreasAsync(pid) {
|
||||
let res = await this.$api.sendRequest({
|
||||
url: '/api/address/lists',
|
||||
data: { pid: pid },
|
||||
async: false
|
||||
});
|
||||
if (res.code == 0) {
|
||||
var data = [];
|
||||
res.data.forEach((item, index) => {
|
||||
data.push({
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
level: item.level
|
||||
});
|
||||
});
|
||||
return data;
|
||||
}
|
||||
},
|
||||
// 异步获取地区
|
||||
getAreas(pid, callback) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/address/lists',
|
||||
data: { pid: pid },
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
var data = [];
|
||||
res.data.forEach((item, index) => {
|
||||
data.push({
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
level: item.level
|
||||
});
|
||||
});
|
||||
if (callback) callback(data);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.regions-picker-container {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.picker-header {
|
||||
display: flex;
|
||||
height: 45px;
|
||||
align-items: center;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
justify-content: space-between;
|
||||
|
||||
.picker-action {
|
||||
padding: 0 28rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
color: #007aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view class="pick-regions">
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="handleValueChange" @columnchange="handleColumnChange">
|
||||
<slot></slot>
|
||||
</picker>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view @click="$refs.regionsRef.open()">
|
||||
<slot></slot>
|
||||
</view>
|
||||
|
||||
<uni-popup type="bottom" ref="regionsRef">
|
||||
<view class="regions-picker-container">
|
||||
<view class="picker-header">
|
||||
<view class="picker-action cancel" @click="$refs.regionsRef.close()">取消</view>
|
||||
<view class="picker-action confirm" @click="confirmRegions">完成</view>
|
||||
</view>
|
||||
<picker-view :value="multiIndex" @change="pickerViewColumnChange" class="picker-view">
|
||||
<picker-view-column v-if="multiArray[0]">
|
||||
<view class="item" v-for="(item,index) in multiArray[0]" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="multiArray[1]">
|
||||
<view class="item" v-for="(item,index) in multiArray[1]" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="multiArray[2]">
|
||||
<view class="item" v-for="(item,index) in multiArray[2]" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
defaultRegions: {
|
||||
type: Array
|
||||
},
|
||||
selectArr: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pickerValueArray: [],
|
||||
cityArr: [],
|
||||
districtArr: [],
|
||||
multiIndex: [0, 0, 0],
|
||||
isInitMultiArray: false,
|
||||
// 是否加载完默认地区
|
||||
isLoadDefaultAreas: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
defaultRegions: {
|
||||
handler(arr, oldArr = []) {
|
||||
// 避免传的是字面量的时候重复触发
|
||||
if (arr.length != this.selectArr || arr.join('') === oldArr.join('')) return;
|
||||
this.isInitMultiArray = false;
|
||||
this.handleDefaultRegions();
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
multiArray() {
|
||||
if (!this.isLoadDefaultAreas) return;
|
||||
var arr = this.pickedArr.map(arr => arr.map(item => item.label));
|
||||
return arr;
|
||||
},
|
||||
pickedArr() {
|
||||
// 进行初始化
|
||||
if (this.isInitMultiArray) {
|
||||
if (this.selectArr == '2') {
|
||||
return [this.pickerValueArray[0], this.pickerValueArray[1]];
|
||||
} else {
|
||||
return [this.pickerValueArray[0], this.pickerValueArray[1], this.pickerValueArray[2]];
|
||||
}
|
||||
}
|
||||
|
||||
if (this.selectArr == '2') {
|
||||
return [this.pickerValueArray[0], this.cityArr];
|
||||
} else {
|
||||
return [this.pickerValueArray[0], this.cityArr, this.districtArr];
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDefaultAreas(0, { level: 0 });
|
||||
},
|
||||
methods: {
|
||||
async pickerViewColumnChange(e) {
|
||||
var value = e.detail.value;
|
||||
if (value[0] != this.multiIndex[0]) {
|
||||
await this.handleColumnChange({ detail: { column: 0, value: value[0] } })
|
||||
this.multiIndex[1] = e.detail.value[1] || 0;
|
||||
await this.handleColumnChange({ detail: { column: 1, value: value[1] } })
|
||||
this.multiIndex[2] = e.detail.value[2] || 0;
|
||||
} else if (value[1] != this.multiIndex[1]) {
|
||||
await this.handleColumnChange({ detail: { column: 1, value: value[1] } })
|
||||
this.multiIndex[2] = e.detail.value[2] || 0;
|
||||
} else {
|
||||
this.multiIndex = value
|
||||
}
|
||||
},
|
||||
confirmRegions() {
|
||||
this.handleValueChange({ detail: { value: this.multiIndex } })
|
||||
this.$refs.regionsRef.close()
|
||||
},
|
||||
async handleColumnChange(e) {
|
||||
this.isInitMultiArray = false;
|
||||
let col = e.detail.column;
|
||||
let row = e.detail.value;
|
||||
this.multiIndex[col] = row;
|
||||
switch (col) {
|
||||
case 0:
|
||||
//选择省,加载市、区县
|
||||
this.cityArr = await this.getAreasAsync(this.pickerValueArray[0][this.multiIndex[col]].value);
|
||||
this.districtArr = await this.getAreasAsync(this.cityArr[0].value);
|
||||
break;
|
||||
case 1:
|
||||
//选择市,加载区县
|
||||
this.districtArr = await this.getAreasAsync(this.cityArr[this.multiIndex[col]].value);
|
||||
break;
|
||||
case 2:
|
||||
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);
|
||||
break;
|
||||
}
|
||||
},
|
||||
handleValueChange(e) {
|
||||
// 结构赋值
|
||||
let [index0, index1, index2] = e.detail.value;
|
||||
let [arr0, arr1, arr2] = this.pickedArr;
|
||||
let address = '';
|
||||
if (this.selectArr == '2') {
|
||||
address = [arr0[index0], arr1[index1]];
|
||||
} else {
|
||||
address = [arr0[index0], arr1[index1], arr2[index2]];
|
||||
}
|
||||
this.$emit('getRegions', address);
|
||||
},
|
||||
handleDefaultRegions() {
|
||||
var time = setInterval(() => {
|
||||
// if (!this.isLoadDefaultAreas) return;
|
||||
// console.log('this.pickerValueArray',this.pickerValueArray)
|
||||
for (let i = 0; i < this.defaultRegions.length; i++) {
|
||||
if(this.pickerValueArray[i] == null) continue;
|
||||
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) {
|
||||
// 设置选中省
|
||||
this.$set(this.multiIndex, i, j);
|
||||
|
||||
// 查询市
|
||||
this.getAreas(this.pickerValueArray[i][j].value, data => {
|
||||
this.cityArr = data;
|
||||
this.$set(this.pickerValueArray, 1, data)
|
||||
for (let k = 0; k < this.cityArr.length; k++) {
|
||||
if (this.defaultRegions[1] == this.cityArr[k].value || this.defaultRegions[1] == this.cityArr[k].label) {
|
||||
// 设置选中市
|
||||
this.$set(this.multiIndex, 1, k);
|
||||
|
||||
// 查询区县
|
||||
this.getAreas(this.cityArr[k].value, data => {
|
||||
this.districtArr = data;
|
||||
this.$set(this.pickerValueArray, 2, data)
|
||||
|
||||
// 设置选中区县
|
||||
for (let u = 0; u < this.districtArr
|
||||
.length; u++) {
|
||||
if (this.defaultRegions[2] == this.districtArr[u].value || this.defaultRegions[2] == this.districtArr[u].label) {
|
||||
this.$set(this.multiIndex, 2, u);
|
||||
this.handleValueChange({
|
||||
detail: {
|
||||
value: [j, k, u]
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.isLoadDefaultAreas) clearInterval(time);
|
||||
}, 100);
|
||||
},
|
||||
getDefaultAreas(pid, obj) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/address/lists',
|
||||
data: { pid: pid },
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
var data = [];
|
||||
var selected = undefined;
|
||||
res.data.forEach((item, index) => {
|
||||
if (obj != undefined) {
|
||||
if (obj.level == 0 && obj.province_id != undefined) {
|
||||
selected = obj.province_id;
|
||||
} else if (obj.level == 1 && obj.city_id != undefined) {
|
||||
selected = obj.city_id;
|
||||
} else if (obj.level == 2 && obj.district_id != undefined) {
|
||||
selected = obj.district_id;
|
||||
}
|
||||
}
|
||||
|
||||
if (selected == undefined && index == 0) {
|
||||
selected = item.id;
|
||||
}
|
||||
data.push({
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
level: item.level
|
||||
});
|
||||
});
|
||||
|
||||
this.pickerValueArray[obj.level] = data;
|
||||
if (obj.level + 1 < 3) {
|
||||
obj.level++;
|
||||
this.getDefaultAreas(selected, obj);
|
||||
} else {
|
||||
this.isInitMultiArray = true;
|
||||
this.isLoadDefaultAreas = true;
|
||||
this.handleDefaultRegions()
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 同步获取地区
|
||||
async getAreasAsync(pid) {
|
||||
let res = await this.$api.sendRequest({
|
||||
url: '/api/address/lists',
|
||||
data: { pid: pid },
|
||||
async: false
|
||||
});
|
||||
if (res.code == 0) {
|
||||
var data = [];
|
||||
res.data.forEach((item, index) => {
|
||||
data.push({
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
level: item.level
|
||||
});
|
||||
});
|
||||
return data;
|
||||
}
|
||||
},
|
||||
// 异步获取地区
|
||||
getAreas(pid, callback) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/address/lists',
|
||||
data: { pid: pid },
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
var data = [];
|
||||
res.data.forEach((item, index) => {
|
||||
data.push({
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
level: item.level
|
||||
});
|
||||
});
|
||||
if (callback) callback(data);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.regions-picker-container {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.picker-header {
|
||||
display: flex;
|
||||
height: 45px;
|
||||
align-items: center;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
justify-content: space-between;
|
||||
|
||||
.picker-action {
|
||||
padding: 0 28rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
color: #007aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -150,7 +150,7 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
.register-box /deep/ .uni-scroll-view {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
/* 回到顶部的按钮 */
|
||||
.mescroll-totop {
|
||||
z-index: 99;
|
||||
|
||||
@@ -39,7 +39,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
.uni-badge {
|
||||
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
|
||||
.uni-drawer {
|
||||
display: block;
|
||||
|
||||
@@ -123,7 +123,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
.uni-grid-item {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -84,7 +84,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
|
||||
.uni-grid {
|
||||
display: flex;
|
||||
|
||||
@@ -93,7 +93,7 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style>
|
||||
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
|
||||
@@ -94,7 +94,7 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style>
|
||||
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style>
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
@@ -67,7 +67,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
|
||||
.uni-tag {
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -210,7 +210,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
.uv-count-num {
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
|
||||
@@ -1,232 +1,232 @@
|
||||
<template>
|
||||
<view v-if="showPop">
|
||||
<view class="privacy-mask">
|
||||
<view class="privacy-wrap">
|
||||
<view class="privacy-title">用户隐私保护提示</view>
|
||||
<view class="privacy-desc">
|
||||
感谢您使用本小程序,在使用前您应当阅读并同意
|
||||
<text class="privacy-link" @tap="openPrivacyContract">{{privacyContractName}}</text>,
|
||||
当点击同意并继续时,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力;如您不同意,将无法继续使用小程序相关功能。
|
||||
</view>
|
||||
<view class="privacy-button-flex">
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
agree: false,
|
||||
showPop: false,
|
||||
privacyAuthorization: null,
|
||||
privacyResolves: new Set(),
|
||||
closeOtherPagePopUpHooks: new Set(),
|
||||
privacyContractName: '用户隐私保护指引'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.curPageShow()
|
||||
},
|
||||
created() {
|
||||
let that = this
|
||||
//查询微信侧记录的用户是否有待同意的隐私政策信息
|
||||
try {
|
||||
wx.getPrivacySetting({
|
||||
success(res) {
|
||||
// console.log('隐私政策信息', res);
|
||||
// console.log(res.privacyContractName);
|
||||
that.privacyContractName = res.privacyContractName
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
// console.log("=========低版本基础库==========")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 监听何时需要提示用户阅读隐私政策
|
||||
init() {
|
||||
let that = this;
|
||||
if (wx.onNeedPrivacyAuthorization) {
|
||||
wx.onNeedPrivacyAuthorization((resolve) => {
|
||||
if (typeof that.privacyAuthorization === 'function') {
|
||||
that.privacyAuthorization(resolve)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
proactive() {
|
||||
let that = this
|
||||
if (wx.getPrivacySetting) {
|
||||
wx.getPrivacySetting({
|
||||
success: (res) => {
|
||||
// console.log(res)
|
||||
if (res.needAuthorization) {
|
||||
that.popUp()
|
||||
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
|
||||
this.closeOtherPagePopUp(this.disPopUp)
|
||||
} else {
|
||||
this.$emit('agree')
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.$emit('agree')
|
||||
}
|
||||
},
|
||||
//初始化监听程序
|
||||
curPageShow() {
|
||||
this.privacyAuthorization = resolve => {
|
||||
this.privacyResolves.add(resolve)
|
||||
//打开弹窗
|
||||
this.popUp()
|
||||
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
|
||||
this.closeOtherPagePopUp(this.disPopUp)
|
||||
}
|
||||
this.closeOtherPagePopUpHooks.add(this.disPopUp)
|
||||
},
|
||||
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
|
||||
closeOtherPagePopUp(closePopUp) {
|
||||
this.closeOtherPagePopUpHooks.forEach(hook => {
|
||||
if (closePopUp !== hook) {
|
||||
hook()
|
||||
}
|
||||
})
|
||||
},
|
||||
//打开隐私协议
|
||||
openPrivacyContract() {
|
||||
wx.openPrivacyContract({
|
||||
success(res) {
|
||||
// console.log('打开隐私协议', res);
|
||||
},
|
||||
fail(err) {
|
||||
// console.error('打开隐私协议失败', err)
|
||||
}
|
||||
});
|
||||
},
|
||||
// 不同意
|
||||
handleDisagree() {
|
||||
this.privacyResolves.forEach(resolve => {
|
||||
resolve({
|
||||
event: 'disagree',
|
||||
})
|
||||
})
|
||||
this.privacyResolves.clear()
|
||||
//关闭弹窗
|
||||
this.disPopUp()
|
||||
//退出小程序
|
||||
uni.showModal({
|
||||
content: '未同意隐私协议,无法使用相关功能',
|
||||
success: () => {
|
||||
this.$emit('disagree')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 同意并继续
|
||||
handleAgree() {
|
||||
this.privacyResolves.forEach(resolve => {
|
||||
resolve({
|
||||
event: 'agree',
|
||||
buttonId: 'agree-btn'
|
||||
})
|
||||
})
|
||||
this.privacyResolves.clear()
|
||||
//关闭弹窗
|
||||
this.disPopUp()
|
||||
this.$emit('agree')
|
||||
},
|
||||
//打开弹窗
|
||||
popUp() {
|
||||
if (this.showPop === false) {
|
||||
this.showPop = true
|
||||
}
|
||||
},
|
||||
//关闭弹窗
|
||||
disPopUp() {
|
||||
if (this.showPop === true) {
|
||||
this.showPop = false
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.privacy-mask {
|
||||
position: fixed;
|
||||
z-index: 5000;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.privacy-wrap {
|
||||
width: 632rpx;
|
||||
padding: 48rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.privacy-title {
|
||||
padding: 0rpx 30rpx 40rpx 30rpx;
|
||||
font-weight: 700;
|
||||
font-size: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.privacy-desc {
|
||||
font-size: 30rpx;
|
||||
color: #555;
|
||||
line-height: 2;
|
||||
text-align: left;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.privacy-link {
|
||||
color: #2f80ed;
|
||||
}
|
||||
|
||||
.privacy-button-flex {
|
||||
display: flex;
|
||||
padding: 20rpx 40rpx;
|
||||
}
|
||||
|
||||
.privacy-button-btn {
|
||||
color: #FFF;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
height: 100rpx;
|
||||
border-radius: 20rpx;
|
||||
border: none;
|
||||
background: #07c160;
|
||||
flex: 1;
|
||||
margin-right: 30rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.privacy-button-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.bg-disagree {
|
||||
color: #07c160;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.bg-agree {
|
||||
margin-right: 0rpx;
|
||||
}
|
||||
<template>
|
||||
<view v-if="showPop">
|
||||
<view class="privacy-mask">
|
||||
<view class="privacy-wrap">
|
||||
<view class="privacy-title">用户隐私保护提示</view>
|
||||
<view class="privacy-desc">
|
||||
感谢您使用本小程序,在使用前您应当阅读并同意
|
||||
<text class="privacy-link" @tap="openPrivacyContract">{{privacyContractName}}</text>,
|
||||
当点击同意并继续时,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力;如您不同意,将无法继续使用小程序相关功能。
|
||||
</view>
|
||||
<view class="privacy-button-flex">
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
agree: false,
|
||||
showPop: false,
|
||||
privacyAuthorization: null,
|
||||
privacyResolves: new Set(),
|
||||
closeOtherPagePopUpHooks: new Set(),
|
||||
privacyContractName: '用户隐私保护指引'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.curPageShow()
|
||||
},
|
||||
created() {
|
||||
let that = this
|
||||
//查询微信侧记录的用户是否有待同意的隐私政策信息
|
||||
try {
|
||||
wx.getPrivacySetting({
|
||||
success(res) {
|
||||
// console.log('隐私政策信息', res);
|
||||
// console.log(res.privacyContractName);
|
||||
that.privacyContractName = res.privacyContractName
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
// console.log("=========低版本基础库==========")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 监听何时需要提示用户阅读隐私政策
|
||||
init() {
|
||||
let that = this;
|
||||
if (wx.onNeedPrivacyAuthorization) {
|
||||
wx.onNeedPrivacyAuthorization((resolve) => {
|
||||
if (typeof that.privacyAuthorization === 'function') {
|
||||
that.privacyAuthorization(resolve)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
proactive() {
|
||||
let that = this
|
||||
if (wx.getPrivacySetting) {
|
||||
wx.getPrivacySetting({
|
||||
success: (res) => {
|
||||
// console.log(res)
|
||||
if (res.needAuthorization) {
|
||||
that.popUp()
|
||||
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
|
||||
this.closeOtherPagePopUp(this.disPopUp)
|
||||
} else {
|
||||
this.$emit('agree')
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.$emit('agree')
|
||||
}
|
||||
},
|
||||
//初始化监听程序
|
||||
curPageShow() {
|
||||
this.privacyAuthorization = resolve => {
|
||||
this.privacyResolves.add(resolve)
|
||||
//打开弹窗
|
||||
this.popUp()
|
||||
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
|
||||
this.closeOtherPagePopUp(this.disPopUp)
|
||||
}
|
||||
this.closeOtherPagePopUpHooks.add(this.disPopUp)
|
||||
},
|
||||
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
|
||||
closeOtherPagePopUp(closePopUp) {
|
||||
this.closeOtherPagePopUpHooks.forEach(hook => {
|
||||
if (closePopUp !== hook) {
|
||||
hook()
|
||||
}
|
||||
})
|
||||
},
|
||||
//打开隐私协议
|
||||
openPrivacyContract() {
|
||||
wx.openPrivacyContract({
|
||||
success(res) {
|
||||
// console.log('打开隐私协议', res);
|
||||
},
|
||||
fail(err) {
|
||||
// console.error('打开隐私协议失败', err)
|
||||
}
|
||||
});
|
||||
},
|
||||
// 不同意
|
||||
handleDisagree() {
|
||||
this.privacyResolves.forEach(resolve => {
|
||||
resolve({
|
||||
event: 'disagree',
|
||||
})
|
||||
})
|
||||
this.privacyResolves.clear()
|
||||
//关闭弹窗
|
||||
this.disPopUp()
|
||||
//退出小程序
|
||||
uni.showModal({
|
||||
content: '未同意隐私协议,无法使用相关功能',
|
||||
success: () => {
|
||||
this.$emit('disagree')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 同意并继续
|
||||
handleAgree() {
|
||||
this.privacyResolves.forEach(resolve => {
|
||||
resolve({
|
||||
event: 'agree',
|
||||
buttonId: 'agree-btn'
|
||||
})
|
||||
})
|
||||
this.privacyResolves.clear()
|
||||
//关闭弹窗
|
||||
this.disPopUp()
|
||||
this.$emit('agree')
|
||||
},
|
||||
//打开弹窗
|
||||
popUp() {
|
||||
if (this.showPop === false) {
|
||||
this.showPop = true
|
||||
}
|
||||
},
|
||||
//关闭弹窗
|
||||
disPopUp() {
|
||||
if (this.showPop === true) {
|
||||
this.showPop = false
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.privacy-mask {
|
||||
position: fixed;
|
||||
z-index: 5000;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.privacy-wrap {
|
||||
width: 632rpx;
|
||||
padding: 48rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.privacy-title {
|
||||
padding: 0rpx 30rpx 40rpx 30rpx;
|
||||
font-weight: 700;
|
||||
font-size: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.privacy-desc {
|
||||
font-size: 30rpx;
|
||||
color: #555;
|
||||
line-height: 2;
|
||||
text-align: left;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.privacy-link {
|
||||
color: #2f80ed;
|
||||
}
|
||||
|
||||
.privacy-button-flex {
|
||||
display: flex;
|
||||
padding: 20rpx 40rpx;
|
||||
}
|
||||
|
||||
.privacy-button-btn {
|
||||
color: #FFF;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
height: 100rpx;
|
||||
border-radius: 20rpx;
|
||||
border: none;
|
||||
background: #07c160;
|
||||
flex: 1;
|
||||
margin-right: 30rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.privacy-button-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.bg-disagree {
|
||||
color: #07c160;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.bg-agree {
|
||||
margin-right: 0rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user