From 5588165f2c027970c2d1641596bd82ae93be65f7 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Tue, 23 Dec 2025 16:59:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(code):=20=E4=BF=AE=E6=AD=A3=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E9=94=99=E8=AF=AF=E5=8F=8A=E4=B8=8D=E4=B8=A5=E8=B0=A8?=
 =?UTF-8?q?=E7=9A=84=E5=9C=B0=E6=96=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common-payment/common-payment - 副本.vue  |  638 ------
 components/common-payment/common-payment.vue  |    2 +-
 components/diy-components/diy-article.vue     |    2 +-
 components/diy-components/diy-audio.vue       |    2 +-
 components/diy-components/diy-bargain.vue     |    4 +-
 components/diy-components/diy-category.vue    |    6 +-
 components/diy-components/diy-comp-extend.vue |    2 +-
 components/diy-components/diy-coupon.vue      |   16 +-
 .../diy-components/diy-fenxiao-goods-list.vue |    2 +-
 .../diy-follow-official-account.vue           |    2 +-
 components/diy-components/diy-goods-brand.vue |    2 +-
 components/diy-components/diy-graphic-nav.vue |   23 +-
 components/diy-components/diy-horz-blank.vue  |    2 +-
 components/diy-components/diy-horz-line.vue   |    2 +-
 components/diy-components/diy-live.vue        |    2 +-
 components/diy-components/diy-member-info.vue |    2 +-
 components/diy-components/diy-merch-list.vue  |    2 +-
 components/diy-components/diy-notes.vue       |    2 +-
 components/diy-components/diy-quick-nav.vue   |    2 +-
 components/diy-components/diy-seckill.vue     |    8 +-
 components/diy-components/diy-store-label.vue |    2 +-
 components/diy-components/diy-video.vue       |    2 +-
 .../goods-detail-view/goods-detail-view.vue   |    2 +-
 .../mescroll/components/mescroll-down.vue     |  104 +-
 .../mescroll/components/mescroll-empty.vue    |  180 +-
 .../mescroll/components/mescroll-top.vue      |  162 +-
 .../mescroll/components/mescroll-up.vue       |   78 +-
 components/mescroll/mescroll-body.vue         |  596 ++---
 components/mescroll/mescroll-uni.vue          |  856 +++----
 .../ns-birthday-gift/ns-birthday-gift.vue     |    2 +-
 .../ns-goods-action/ns-goods-action.vue       |   66 +-
 components/ns-login/ns-login.vue              |    2 +-
 components/ns-new-gift/ns-new-gift.vue        |    2 +-
 components/ns-switch/ns-switch.vue            |  138 +-
 .../register-reward/register-reward.vue       |    2 +-
 components/toTop/toTop.vue                    |  116 +-
 components/uni-badge/uni-badge.vue            |  210 +-
 components/uni-drawer/uni-drawer.vue          |  292 +--
 components/uni-grid-item/uni-grid-item.vue    |  446 ++--
 components/uni-grid/uni-grid.vue              |    2 +-
 components/uni-popup/uni-popup-sku-new.vue    |  442 ++--
 components/uni-popup/uni-popup-sku.vue        |  444 ++--
 components/uni-popup/uni-popup.vue            |    2 +-
 components/uni-tag/uni-tag.vue                |    2 +-
 components/uv-count-to/uv-count-to.vue        |    2 +-
 pages/contact/contact.vue                     |    2 +-
 pages/goods/detail.vue                        |    2 +-
 pages/goods/list.vue                          |    2 +-
 pages/index/index.vue                         |    2 +-
 pages/member/index.vue                        |    2 +-
 pages/order/detail.vue                        |    2 +-
 pages/order/detail_point.vue                  |    2 +-
 pages/order/list.vue                          |    2 +-
 pages_promotion/components/l-time/l-time.vue  |  112 +-
 pages_promotion/fenxiao/apply.vue             | 1624 +++++++-------
 pages_promotion/fenxiao/goods_list.vue        |    3 +-
 pages_promotion/merch/detail.vue              |  644 +++---
 pages_promotion/merch/merchcategory.vue       |    4 +-
 pages_promotion/point/detail.vue              | 1012 ++++-----
 pages_promotion/point/goods_list.vue          | 1788 +++++++--------
 pages_promotion/point/list.vue                |    2 +-
 pages_promotion/point/payment.vue             |  616 +++---
 pages_tool/cases/index.vue                    |    4 +-
 .../components/img-cropping/cropping.vue      |    2 +-
 pages_tool/components/myp-one/myp-one.vue     |    2 +-
 pages_tool/components/sx-rate/index.vue       |  436 ++--
 pages_tool/files/list.vue                     |    2 +-
 pages_tool/help/list.vue                      |    4 +-
 pages_tool/index/diy.vue                      |  188 +-
 pages_tool/login/login.vue                    |    2 +-
 pages_tool/member/account.vue                 |    6 +-
 pages_tool/member/address.vue                 |    2 +-
 pages_tool/member/balance_detail.vue          |    2 +-
 pages_tool/member/card.vue                    |    2 +-
 pages_tool/member/collection.vue              |    2 +-
 pages_tool/member/invite_friends.vue          |    4 +-
 pages_tool/member/point_detail.vue            |    2 +-
 pages_tool/member/withdrawal.vue              |    2 +-
 pages_tool/notice/list.vue                    |    2 +-
 pages_tool/order/refund.vue                   |    2 +-
 pages_tool/order/refund_batch.vue             |    2 +-
 pages_tool/order/refund_type_select.vue       |    2 +-
 pages_tool/pay/result.vue                     |    2 +-
 pages_tool/seal/medium/detail.vue             |    2 +-
 pages_tool/seal/medium/search.vue             |    2 +-
 pages_tool/seal/structure.vue                 |    2 +-
 pages_tool/weapp/order_shipping.vue           |    2 +-
 .../mp-html/components/mp-html/mp-html.vue    |  996 ++++-----
 .../mp-html/components/mp-html/node/node.vue  | 1172 +++++-----
 .../uni-datetime-picker/time-picker.vue       | 1854 ++++++++--------
 .../uni-datetime-picker.vue                   | 1962 ++++++++---------
 91 files changed, 8364 insertions(+), 8996 deletions(-)
 delete mode 100644 components/common-payment/common-payment - 副本.vue

diff --git a/components/common-payment/common-payment - 副本.vue b/components/common-payment/common-payment - 副本.vue
deleted file mode 100644
index 4db3da0..0000000
--- a/components/common-payment/common-payment - 副本.vue	
+++ /dev/null
@@ -1,638 +0,0 @@
-<template>
-	<view class="order-container" :class="{ 'safe-area': isIphoneX }">
-		<!-- #ifdef MP-WEIXIN -->
-		<view class="payment-navbar" :style="{ 'padding-top': menuButtonBounding.top + 'px', height: menuButtonBounding.height + 'px' }">
-			<view class="nav-wrap">
-				<text class="iconfont icon-back_light" @click="back"></text>
-				<view class="navbar-title">确认订单</view>
-			</view>
-		</view>
-		<view class="payment-navbar-block" :style="{ height: menuButtonBounding.bottom + 'px' }"></view>
-		<!-- #endif -->
-
-		<scroll-view scroll-y="true" class="order-scroll-container">
-			<view class="payment-navbar-block"></view>
-			<template v-if="paymentData">
-				<template v-if="paymentData.is_virtual">
-					<!-- 虚拟商品联系方式 -->
-					<view class="mobile-wrap">
-						<view class="tips color-base-text">
-							<text class="iconfont icongantanhao"></text>
-							购买虚拟类商品需填写手机号，方便商家与您联系
-						</view>
-						<view class="form-group">
-							<text class="icon">
-								<image :src="$util.img('public/uniapp/order/icon-mobile.png')" mode="widthFix"></image>
-							</text>
-							<text class="text">手机号码</text>
-							<input type="number" maxlength="11" placeholder="请输入您的手机号码" placeholder-class="color-tip placeholder" class="input" v-model="orderCreateData.member_address.mobile" />
-						</view>
-					</view>
-				</template>
-				<template v-else>
-					<!-- 配送方式 -->
-					<view class="delivery-mode" v-if="goodsData.delivery.express_type.length > 1">
-						<view class="action">
-							<view :class="{ active: item.name == orderCreateData.delivery.delivery_type }" v-for="(item, index) in goodsData.delivery.express_type" :key="index" @click="selectDeliveryType(item)">
-								{{ item.title }}
-								<!-- 外圆角 -->
-								<view class="out-radio"></view>
-							</view>
-						</view>
-					</view>
-
-					<view class="address-box" :class="{ 'not-delivery-type': goodsData.delivery.express_type.length <= 1 }" v-if="orderCreateData.delivery.delivery_type == 'express'">
-						<view class="info-wrap" v-if="memberAddress" @click="selectAddress">
-							<view class="content">
-								<text class="name">{{ memberAddress.name ? memberAddress.name : '' }}</text>
-								<text class="mobile">{{ memberAddress.mobile ? memberAddress.mobile : '' }}</text>
-								<view class="desc-wrap">
-									{{ memberAddress.full_address ? memberAddress.full_address : '' }}
-									{{ memberAddress.address ? memberAddress.address : '' }}
-								</view>
-							</view>
-							<text class="cell-more iconfont icon-right"></text>
-						</view>
-						<view class="empty-wrap" v-else @click="selectAddress">
-							<view class="info">请设置收货地址</view>
-							<view class="cell-more">
-								<view class="iconfont icon-right"></view>
-							</view>
-						</view>
-						<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
-					</view>
-
-					<view class="address-box" :class="{ 'not-delivery-type': goodsData.delivery.express_type.length <= 1 }" v-if="orderCreateData.delivery.delivery_type == 'local'">
-						<view v-if="localMemberAddress">
-							<block v-if="storeList && Object.keys(storeList).length > 1">
-								<view class="local-delivery-store" v-if="storeInfo" @click="openPopup('deliveryPopup')">
-									<view class="info">
-										由
-										<text class="store-name">{{ storeInfo.store_name }}</text>
-										提供配送
-									</view>
-									<view class="cell-more">
-										<text>点击切换</text>
-										<text class="iconfont icon-right"></text>
-									</view>
-								</view>
-								<view v-else class="local-delivery-store">
-									<view class="info">
-										<text class="store-name">您的附近没有可配送的门店，请选择其他配送方式</text>
-									</view>
-								</view>
-							</block>
-							<view class="info-wrap local" @click="selectAddress">
-								<view class="content">
-									<text class="name">{{ localMemberAddress.name ? localMemberAddress.name : '' }}
-									</text>
-									<text class="mobile">{{ localMemberAddress.mobile ? localMemberAddress.mobile : '' }}
-									</text>
-									<view class="desc-wrap">
-										{{ localMemberAddress.full_address ? localMemberAddress.full_address : '' }}
-										{{ localMemberAddress.address ? localMemberAddress.address : '' }}
-									</view>
-								</view>
-								<text class="cell-more iconfont icon-right"></text>
-							</view>
-							<view class="local-box" v-if="calculateGoodsData.config.local && calculateGoodsData.delivery.local.info.time_is_open == 1">
-								<view class="pick-block" @click="localtime('')">
-									<view class="title font-size-base">送达时间</view>
-									<view class="time-picker">
-										<text :class="{ 'color-tip': !deliveryTime }">{{ deliveryTime ? deliveryTime : '请选择送达时间' }}</text>
-										<text class="iconfont icon-right cell-more"></text>
-									</view>
-								</view>
-							</view>
-						</view>
-						<view class="empty-wrap" v-else @click="selectAddress">
-							<view class="info">请设置收货地址</view>
-							<view class="cell-more">
-								<view class="iconfont icon-right"></view>
-							</view>
-						</view>
-
-						<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
-					</view>
-
-					<!-- 门店信息 -->
-					<view class="store-box" :class="{ 'not-delivery-type': goodsData.delivery.express_type.length <= 1 }" v-if="orderCreateData.delivery.delivery_type == 'store'">
-						<block v-if="storeInfo">
-							<view @click="openPopup('deliveryPopup')" class="store-info">
-								<view class="store-address-info">
-									<view class="info-wrap">
-										<view class="title">
-											<text>{{ storeInfo.store_name }}</text>
-										</view>
-										<view class="store-detail">
-											<view v-if="storeInfo.open_date">营业时间：{{ storeInfo.open_date }}</view>
-											<view class="address">{{ storeInfo.full_address }} {{ storeInfo.address }}
-											</view>
-										</view>
-									</view>
-									<view class="cell-more iconfont icon-right" v-if="storeList && Object.keys(storeList).length > 1"></view>
-								</view>
-							</view>
-							<view class="mobile-wrap store-mobile" v-if="orderCreateData.member_address">
-								<view class="form-group">
-									<text class="text">姓名</text>
-									<input type="text" placeholder-class="color-tip placeholder" class="input" disabled v-model="orderCreateData.member_address.name" />
-								</view>
-							</view>
-							<view class="mobile-wrap store-mobile" v-if="orderCreateData.member_address">
-								<view class="form-group">
-									<text class="text">预留手机</text>
-									<input type="number" maxlength="11" placeholder="请输入您的手机号码" placeholder-class="color-tip placeholder" class="input" v-model="orderCreateData.member_address.mobile" />
-								</view>
-							</view>
-							<view class="store-time" @click="storetime('')">
-								<view class="left">提货时间</view>
-								<view class="right">
-									{{ deliveryTime }}
-									<text class="iconfont icon-right"></text>
-								</view>
-							</view>
-						</block>
-						<view v-else class="empty">当前无自提门店，请选择其它配送方式</view>
-						<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
-					</view>
-				</template>
-
-				<!-- 店铺 -->
-				<view class="site-wrap order-goods" v-if="calculateGoodsData">
-					<view class="site-header">
-						<view class="iconfont icon-dianpu"></view>
-						<text class="site-name">门店</text>
-					</view>
-					<view class="site-body">
-						<!-- 商品 -->
-						<view class="goods-item" v-for="(goodsItem, goodsIndex) in calculateGoodsData.goods_list" :key="goodsIndex">
-							<view class="goods-wrap">
-								<view class="goods-img" @click="$util.redirectTo('/pages/goods/detail', { goods_id: goodsItem.goods_id })">
-									<image :src="$util.img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(goodsIndex)" mode="aspectFill"/>
-								</view>
-								<view class="goods-info">
-									<view class="top-wrap">
-										<view @click="$util.redirectTo('/pages/goods/detail', { goods_id: goodsItem.goods_id })" class="goods-name">{{ goodsItem.sku_name }}</view>
-										<view class="sku" v-if="goodsItem.sku_spec_format">
-											<view class="goods-spec">
-												<block v-for="(x, i) in goodsItem.sku_spec_format" :key="i">
-													<view>{{ x.spec_value_name }}</view>
-												</block>
-											</view>
-										</view>
-										<block v-if="goodsItem.is_virtual == 0">
-											<view class="error-tips" v-if="orderCreateData.delivery &&
-													orderCreateData.delivery.delivery_type &&
-													goodsItem.support_trade_type &&
-													goodsItem.support_trade_type.indexOf(orderCreateData.delivery.delivery_type) == -1
-												">
-												<text class="iconfont icon-gantanhao"></text>
-												<text>该商品不支持{{ orderCreateData.delivery.delivery_type_name }}</text>
-											</view>
-										</block>
-										<view class="error-tips" v-if="goodsItem.error && goodsItem.error.message">
-											<text class="iconfont icon-gantanhao"></text>
-											<text>{{ goodsItem.error.message }}</text>
-										</view>
-									</view>
-									<view class="goods-sub-section">
-										<view class="color-base-text">
-											<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
-											<text class="goods-price price-style large">{{ parseFloat(goodsItem.price).toFixed(2).split('.')[0] }}</text>
-											<text class="unit price-style small">.{{ parseFloat(goodsItem.price).toFixed(2).split('.')[1] }}</text>
-										</view>
-										<view>
-											<text class="font-size-tag">x</text>
-											<text class="font-size-base">{{ goodsItem.num }}</text>
-										</view>
-									</view>
-								</view>
-							</view>
-							<view class="member-goods-card order-cell" v-if="calculateGoodsData.goods_list[goodsIndex].member_card_list" @click="selectMemberGoodsCard(goodsIndex)">
-								<text class="tit">次卡抵扣</text>
-								<view class="box text-overflow">
-									<block v-if="calculateGoodsData.goods_list[goodsIndex].card_promotion_money">
-										<text class="text">次卡抵扣{{ calculateGoodsData.goods_list[goodsIndex].card_use_num }}张/{{ calculateGoodsData.goods_list[goodsIndex].card_use_num }}次</text>
-										<text class="price-font">-￥{{ calculateGoodsData.goods_list[goodsIndex].card_promotion_money | moneyFormat }}</text>
-									</block>
-									<text class="color-tip" v-else>请选择次卡</text>
-								</view>
-								<text class="iconfont icon-right"></text>
-							</view>
-							<view class="goods-form" v-if="goodsData.goods_list[goodsIndex].goods_form" @click="editForm(goodsIndex)">
-								<ns-form :data="goodsData.goods_list[goodsIndex].goods_form.json_data" ref="goodsForm" :custom-attr="{ sku_id: goodsItem.sku_id, form_id: goodsData.goods_list[goodsIndex].goods_form.id }"/>
-								<text class="cell-more iconfont icon-right"></text>
-								<view class="shade"></view>
-							</view>
-						</view>
-					</view>
-				</view>
-
-				<view class="site-wrap buyer-message">
-					<view class="order-cell">
-						<text class="tit">买家留言</text>
-						<view class="box text-overflow " @click="openPopup('buyerMessagePopup')">
-							<text v-if="orderCreateData.buyer_message">{{ orderCreateData.buyer_message }}</text>
-							<text class="color-sub" v-else>无留言</text>
-						</view>
-						<text class="iconfont icon-right"></text>
-					</view>
-				</view>
-
-				<view v-if="paymentData.system_form" class="system-form-wrap">
-					<view class="order-cell">
-						<text class="tit">{{ paymentData.system_form.form_name }}</text>
-					</view>
-					<ns-form :data="paymentData.system_form.json_data" ref="form"/>
-				</view>
-
-				<view class="site-wrap" v-if="calculateGoodsData  || promotionInfo || (calculateGoodsData && calculateGoodsData.max_usable_point > 0) || goodsData.invoice">
-					<view class="site-footer">
-						<view class="order-cell coupon" v-if="modules.indexOf('coupon') != -1">
-							<text class="tit">优惠券</text>
-							<view class="box text-overflow" @click="openPopup('couponPopup')">
-								<template v-if="orderCreateData.coupon && orderCreateData.coupon.coupon_id">
-									<text>已使用优惠券，优惠</text>
-									<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
-									<text class="money price-font">{{ (calculateData && calculateData.coupon_money ? calculateData.coupon_money : 0) | moneyFormat }}</text>
-								</template>
-								<text v-else>不使用优惠券</text>
-							</view>
-							<text class="iconfont icon-right"></text>
-						</view>
-						<view class="order-cell" v-if="promotionInfo">
-							<text class="tit">活动优惠</text>
-							<view class="box text-overflow" @click="openPopup('promotionPopup')">
-								<text>{{ promotionInfo.title }}</text>
-							</view>
-							<text class="iconfont icon-right"></text>
-						</view>
-						<view class="order-cell point" v-if="calculateGoodsData && calculateGoodsData.max_usable_point > 0">
-							<text class="tit">
-								<text>使用{{ parseInt(calculateGoodsData.max_usable_point) }}积分可抵扣</text>
-								<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
-								<text class="money price-font">{{ calculateData.point_money | moneyFormat }}</text>
-							</text>
-							<view class="box"></view>
-							<ns-switch class="balance-switch" @change="usePoint" :checked="orderCreateData.is_point == 1"/>
-						</view>
-						<view class="order-cell order-invoice-cell" v-if="goodsData.invoice.invoice_status == 1">
-							<text class="tit">发票</text>
-							<view class="box text-overflow" @click="openPopup('invoicePopup')">
-								<text v-if="orderCreateData.is_invoice == 1">{{ orderCreateData.invoice_type == 1 ? '纸质' : '电子' }}发票({{ orderCreateData.invoice_content }})</text>
-								<text v-else>无需发票</text>
-							</view>
-							<text class="iconfont icon-right"></text>
-						</view>
-					</view>
-				</view>
- 
-				<view class="site-wrap box member-card-wrap" v-if="paymentData.recommend_member_card && Object.keys(paymentData.recommend_member_card).length > 0">
-					<view class="head" @click="selectMemberCard">
-						<text class="iconfont icon-huiyuan"></text>
-						<view class="info">
-							开通{{ paymentData.recommend_member_card.level_name }}
-							<text>本单预计可省</text>
-							<text class="price-color">{{ paymentData.recommend_member_card.discount_money | moneyFormat }}</text>
-							<text>元</text>
-						</view>
-						<text class="iconfont" :class="orderCreateData.is_open_card == 1 ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></text>
-					</view>
-					<view class="body" v-if="orderCreateData.is_open_card">
-						<view class="item" :class="{ 'active color-base-border': item.key == orderCreateData.member_card_unit }" v-for="(item, index) in cardChargeType" :key="index" @click="selectMembercardUnit(item.key)">
-							<view class="title">{{ item.title }}</view>
-							<view class="price price-font">{{ $lang('common.currencySymbol') }}{{ parseFloat(item.value) }}/{{ item.unit }}</view>
-							<text class="iconfont icon-icon color-base-text price-font identify" v-if="item.key == orderCreateData.member_card_unit"></text>
-						</view>
-					</view>
-				</view>
-
-				<!-- 订单金额 -->
-				<template v-if="calculateData">
-					<view class="order-money">
-						<view class="order-cell">
-							<text class="tit">商品金额</text>
-							<view class="box">
-								<text class="unit color-title price-font">{{ $lang('common.currencySymbol') }}</text>
-								<text class="money color-title price-font">{{ calculateData.goods_money | moneyFormat }}</text>
-							</view>
-						</view>
-						<view class="order-cell" v-if="calculateData.is_virtual == 0 && calculateData.delivery_money > 0">
-							<text class="tit">运费</text>
-							<view class="box color-base-text">
-								<text class="operator">+</text>
-								<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
-								<text class="money price-font">{{ calculateData.delivery_money | moneyFormat }}</text>
-							</view>
-						</view>
-						<view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_money > 0">
-							<text class="tit">
-								<text>税费</text>
-								<text class="color-base-text font-bold price-font">({{ goodsData.invoice.invoice_rate }}%)</text>
-							</text>
-							<view class="box color-base-text">
-								<text class="operator">+</text>
-								<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
-								<text class="money price-font">{{ calculateData.invoice_money | moneyFormat }}</text>
-							</view>
-						</view>
-						<view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_delivery_money > 0">
-							<text class="tit">发票邮寄费</text>
-							<view class="box color-base-text">
-								<text class="operator">+</text>
-								<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
-								<text class="money price-font">{{ calculateData.invoice_delivery_money | moneyFormat }}</text>
-							</view>
-						</view>
-						<view class="order-cell" v-if="calculateData.promotion_money > 0">
-							<text class="tit">优惠</text>
-							<view class="box color-base-text">
-								<text class="operator">-</text>
-								<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
-								<text class="money price-font">{{ calculateData.promotion_money | moneyFormat }}</text>
-							</view>
-						</view>
-						<view class="order-cell" v-if="calculateData.coupon_money">
-							<text class="tit">优惠券</text>
-							<view class="box color-base-text">
-								<text class="operator">-</text>
-								<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
-								<text class="money price-font">{{ calculateData.coupon_money | moneyFormat }}</text>
-							</view>
-						</view>
-						<view class="order-cell" v-if="calculateData.point_money > 0">
-							<text class="tit">积分抵扣</text>
-							<view class="box color-base-text">
-								<text class="operator">-</text>
-								<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
-								<text class="money price-font">{{ calculateData.point_money | moneyFormat }}</text>
-							</view>
-						</view>
-						<view class="order-cell" v-if="calculateData.member_card_money > 0">
-							<text class="tit">会员卡</text>
-							<view class="box color-base-text">
-								<text class="operator">+</text>
-								<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
-								<text class="money price-font">{{ calculateData.member_card_money | moneyFormat }}
-								</text>
-							</view>
-						</view>
-					</view>
-
-					<view v-if="transactionAgreement.title && transactionAgreement.content" class="agreement">购买前请先阅读<text @click="$refs.agreementPopup.open()">《{{ transactionAgreement.title }}》</text>，下单即代表同意该协议</view>
-
-					<view class="order-submit bottom-safe-area">
-						<view class="order-settlement-info">
-							<text class="font-size-base color-tip margin-right">共{{ calculateData.goods_num }}件</text>
-							<text class="font-size-base">合计：</text>
-							<text class=" unit price-font">{{ $lang('common.currencySymbol') }}</text>
-							<text class=" money price-font">{{ parseFloat(calculateData.pay_money).toFixed(2).split('.')[0] }}</text>
-							<text class=" unit price-font">.{{ parseFloat(calculateData.pay_money).toFixed(2).split('.')[1] }}</text>
-						</view>
-						<view class="submit-btn">
-							<button type="primary" class="mini" size="mini" @click="create()" v-if="!surplusStartMoney()">提交订单</button>
-							<button v-else class="no-submit mini" size="mini">差{{ surplusStartMoney() | moneyFormat }}起送</button>
-						</view>
-					</view>
-					<view class="order-submit-block"></view>
-
-					<payment ref="choosePaymentPopup" @close="payClose" v-if="calculateData"></payment>
-				</template>
-
-
-				<!-- 活动优惠弹窗 -->
-				<uni-popup ref="promotionPopup" type="bottom" v-if="promotionInfo">
-					<view class="promotion-popup popup">
-						<view class="popup-header">
-							<text class="tit">活动优惠</text>
-							<text class="iconfont icon-close" @click="closePopup('promotionPopup')"></text>
-						</view>
-						<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
-							<view class="order-cell" style="align-items: baseline;">
-								<view class="tit">
-									<text class="promotion-mark ns-gradient-promotionpages-payment">{{ promotionInfo.title }}
-									</text>
-								</view>
-								<view class="promotion-content">
-									<view class="tit tit-content" style="white-space: pre-line;" v-html="promotionInfo.content"></view>
-								</view>
-							</view>
-						</scroll-view>
-						<view class="popup-footer" :class="{ 'bottom-safe-area': isIphoneX }">
-							<view class="confirm-btn color-base-bg" @click="closePopup('promotionPopup')">确定</view>
-						</view>
-					</view>
-				</uni-popup>
-
-				<!-- 门店列表弹窗 -->
-				<uni-popup ref="deliveryPopup" type="bottom">
-					<view class="delivery-popup popup">
-						<view class="popup-header">
-							<text class="tit">已为您甄选出附近所有相关门店</text>
-							<text class="iconfont icon-close" @click="closePopup('deliveryPopup')"></text>
-						</view>
-						<view class="popup-body store-popup" :class="{ 'safe-area': isIphoneX }">
-
-							<mescroll-uni @getData="getStore" ref="mescroll" top="50px">
-								<block slot="list">
-									<view class="delivery-content">
-										<block v-if="storeData">
-											<view class="item-wrap" v-for="(item, index) in storeData" :key="index" @click="selectPickupPoint(item)">
-												<view class="detail">
-													<view class="name" :class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''">
-														<text>{{ item.store_name }}</text>
-														<text v-if="item.distance">({{ item.distance }}km)</text>
-													</view>
-													<view class="info">
-														<view :class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">营业时间：{{ item.open_date }}</view>
-														<view :class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">地址：{{ item.full_address }}{{ item.address }}</view>
-													</view>
-												</view>
-												<view class="icon" v-if="item.store_id == orderCreateData.delivery.store_id">
-													<text class="iconfont icon-yuan_checked color-base-text"></text>
-												</view>
-											</view>
-										</block>
-										<view v-else class="empty-wrap">
-											<ns-empty text="所选择收货地址附近没有可以自提的门店" :isIndex="false"></ns-empty>
-										</view>
-									</view>
-
-								</block>
-							</mescroll-uni>
-
-						</view>
-					</view>
-				</uni-popup>
-
-				<!-- 留言弹窗 -->
-				<uni-popup ref="buyerMessagePopup" type="bottom">
-					<view style="height: auto;" class="buyermessag-popup popup" @touchmove.prevent.stop>
-						<view class="popup-header">
-							<text class="tit">买家留言</text>
-							<text class="iconfont icon-close" @click="closePopup('buyerMessagePopup')"></text>
-						</view>
-						<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
-							<view>
-								<view class="buyermessag-cell">
-									<view class="buyermessag-form-group">
-										<textarea type="text" maxlength="100" placeholder="留言前建议先与商家协调一致" placeholder-class="color-tip" v-model="orderCreateData.buyer_message"/>
-									</view>
-								</view>
-							</view>
-						</scroll-view>
-						<view class="popup-footer" @click="saveBuyerMessage" :class="{ 'bottom-safe-area': isIphoneX }">
-							<view class="confirm-btn color-base-bg">确定</view>
-						</view>
-					</view>
-				</uni-popup>
-
-				<!-- 优惠券弹窗 -->
-				<uni-popup ref="couponPopup" type="bottom" v-if="calculateGoodsData" :mask-click="false">
-					<view class="coupon-popup popup" @touchmove.prevent.stop>
-						<view class="popup-header">
-							<text class="tit">优惠券</text>
-							<text class="iconfont icon-close" @click="closePopup('couponPopup')"></text>
-						</view>
-
-						<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
-							<view v-if="coupon_list.length > 0">
-								<view class="coupon-item" v-for="(couponItem, couponIndex) in coupon_list" :key="couponIndex" @click="selectCoupon(couponItem)">
-									<view class="coupon-info" :style="{ backgroundColor: 'var(--main-color-shallow)' }">
-										<view class="info-wrap">
-											<image class="coupon-line" mode="heightFix" :src="$util.img('public/uniapp/coupon/coupon_line.png')"/>
-											<view class="coupon-money">
-												<template v-if="couponItem.type == 'divideticket'">
-													<text class="unit">{{ $lang('common.currencySymbol') }}</text>
-													<text class="money">{{ parseFloat(couponItem.money) }}</text>
-												</template>
-												<template v-else-if="couponItem.type == 'reward'">
-													<text class="unit">{{ $lang('common.currencySymbol') }}</text>
-													<text class="money">{{ parseFloat(couponItem.money) }}</text>
-												</template>
-												<template v-else-if="couponItem.type == 'discount'">
-													<text class="money">{{ parseFloat(couponItem.discount) }}</text>
-													<text class="unit">折</text>
-												</template>
-												<view class="at-least">
-													<template v-if="couponItem.at_least > 0">
-														满{{ couponItem.at_least }}可用
-													</template>
-													<template v-else>
-														无门槛
-													</template>
-												</view>
-											</view>
-										</view>
-										<view class="desc-wrap">
-											<view class="coupon-name">{{ couponItem.coupon_name }}</view>
-											<view v-if="couponItem.type == 'discount' && couponItem.discount_limit > 0" class="limit">最多可抵￥{{ couponItem.discount_limit }}</view>
-											<view class="time font-size-goods-tag">有效期：{{ couponItem.end_time ? $util.timeStampTurnTime(couponItem.end_time) : '长期有效' }}</view>
-										</view>
-										<view class="iconfont" :class="orderCreateData.coupon.coupon_id == couponItem.coupon_id ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></view>
-									</view>
-								</view>
-							</view>
-							<view v-else class="coupon-empty">暂无可用的优惠券</view>
-						</scroll-view>
-
-						<view class="popup-footer" :class="{ 'bottom-safe-area': isIphoneX }">
-							<view class="confirm-btn color-base-bg" @click="useCpopon">确定</view>
-						</view>
-					</view>
-				</uni-popup>
-
-				<!-- 交易协议 -->
-				<view @touchmove.prevent>
-					<uni-popup ref="agreementPopup" type="center" :maskClick="false">
-						<view class="agreement-conten-box">
-							<view class="close">
-								<text class="iconfont icon-close" @click="$refs.agreementPopup.close()"></text>
-							</view>
-							<view class="title">{{ transactionAgreement.title }}</view>
-							<view class="con">
-								<scroll-view scroll-y="true" class="con">
-									<rich-text :nodes="transactionAgreement.content"></rich-text>
-								</scroll-view>
-							</view>
-						</view>
-					</uni-popup>
-				</view>
-
-				<!-- 表单修改弹窗 -->
-				<uni-popup ref="editFormPopup" type="bottom">
-					<view style="height: auto;" class="form-popup popup" @touchmove.prevent.stop>
-						<view class="popup-header">
-							<text class="tit">买家信息</text>
-							<text class="iconfont icon-close" @click="$refs.editFormPopup.close()"></text>
-						</view>
-						<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
-							<ns-form v-if="tempFormData" :data="tempFormData.json_data" ref="tempForm"></ns-form>
-						</scroll-view>
-						<view class="popup-footer" @click="saveForm" :class="{ 'bottom-safe-area': isIphoneX }">
-							<view class="confirm-btn color-base-bg">确定</view>
-						</view>
-					</view>
-				</uni-popup>
-
-				<uni-popup ref="memberGoodsCardPopup" type="bottom">
-					<view class="member-card-popup popup" @touchmove.prevent.stop>
-						<view class="popup-header">
-							<text class="tit">选择次卡</text>
-							<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" class="card-item" @click="selectGoodsCard.click(item.item_id)">
-								<view class="content">
-									<view class="title">{{ item.goods_name }}</view>
-									<view class="info">
-										<text v-if="item.card_type == 'timecard'">不限次数</text>
-										<text v-if="item.card_type == 'oncecard'">剩余{{ item.num - item.use_num }}次</text>
-										<text v-if="item.card_type == 'commoncard'">剩余{{ item.total_num - item.total_use_num }}次</text>
-										<text>|</text>
-										<text>{{ item.end_time ? $util.timeStampTurnTime(item.end_time) : '长期有效' }}</text>
-									</view>
-								</view>
-								<view class="iconfont" :class="selectGoodsCard.itemId == item.item_id ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></view>
-							</view>
-						</scroll-view>
-						<view class="popup-footer" @click="saveMemberGoodsCard" :class="{ 'bottom-safe-area': isIphoneX }">
-							<view class="confirm-btn color-base-bg">确定</view>
-						</view>
-					</view>
-				</uni-popup>
-			</template>
-		</scroll-view>
-
-		<!-- 门店自提时间 -->
-		<ns-select-time @selectTime="selectPickupTime" ref="timePopup"></ns-select-time>
-
-		<ns-login ref="login"></ns-login>
-		<loading-cover ref="loadingCover"></loading-cover>
-	</view>
-</template>
-
-<script>
-	import payment from './payment.js';
-
-	export default {
-		name: 'common-payment',
-		data() {
-			return {};
-		},
-		props: {
-			api: Object,
-			createDataKey: String
-		},
-		mixins: [payment]
-	};
-</script>
-
-<style lang="scss">
-	@import '@/common/css/order_parment.scss';
-
-	.order-cell .promotion-content {
-		flex: 1;
-	}
-</style>
\ No newline at end of file
diff --git a/components/common-payment/common-payment.vue b/components/common-payment/common-payment.vue
index ff86c64..6ef5854 100644
--- a/components/common-payment/common-payment.vue
+++ b/components/common-payment/common-payment.vue
@@ -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" class="card-item" @click="selectGoodsCard.click(item.item_id)">
+							<view v-for="(item, index) in selectGoodsCard.cardList" :key="item.item_id || index" class="card-item" @click="selectGoodsCard.click(item.item_id)">
 								<view class="content">
 									<view class="title">{{ item.goods_name }}</view>
 									<view class="info">
diff --git a/components/diy-components/diy-article.vue b/components/diy-components/diy-article.vue
index 2f8bee2..609f2ba 100644
--- a/components/diy-components/diy-article.vue
+++ b/components/diy-components/diy-article.vue
@@ -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="index" @click="toDetail(item)">
+					<swiper-item v-for="(item, index) in list" :key="item.article_id || index" @click="toDetail(item)">
 						<view class="swiper-item-content">
 							<view :class="['item', value.ornament.type]" :style="itemCss">
 								<view class="article-img">
diff --git a/components/diy-components/diy-audio.vue b/components/diy-components/diy-audio.vue
index 28b11c6..9801c9e 100644
--- a/components/diy-components/diy-audio.vue
+++ b/components/diy-components/diy-audio.vue
@@ -206,7 +206,7 @@
 	};
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 	
 	.fui-audio {
 	    width: 100%;
diff --git a/components/diy-components/diy-bargain.vue b/components/diy-components/diy-bargain.vue
index f43ab9f..55e5873 100644
--- a/components/diy-components/diy-bargain.vue
+++ b/components/diy-components/diy-bargain.vue
@@ -17,7 +17,7 @@
 
 			<!-- 商品列表 -->
 			<template v-if="value.template == 'row1-of1'">
-				<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
+				<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="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="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
+					<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="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"/>
diff --git a/components/diy-components/diy-category.vue b/components/diy-components/diy-category.vue
index 9d1aae0..55a7ae8 100644
--- a/components/diy-components/diy-category.vue
+++ b/components/diy-components/diy-category.vue
@@ -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="index" :class="[
+						<view class="category-item" v-for="(item, index) in categoryTree" :key="item.category_id || 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="index" :id="'category-' + index">
+						<view class="child-category" v-for="(item, index) in categoryTree" :key="item.category_id || 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="index"
+						<view class="child-category-wrap" v-for="(item, index) in categoryTree" :key="item.category_id || 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"
diff --git a/components/diy-components/diy-comp-extend.vue b/components/diy-components/diy-comp-extend.vue
index 50e0ac3..11707cc 100644
--- a/components/diy-components/diy-comp-extend.vue
+++ b/components/diy-components/diy-comp-extend.vue
@@ -20,4 +20,4 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss"></style>
diff --git a/components/diy-components/diy-coupon.vue b/components/diy-components/diy-coupon.vue
index 7958962..46bc4ff 100644
--- a/components/diy-components/diy-coupon.vue
+++ b/components/diy-components/diy-coupon.vue
@@ -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"
+						<view v-for="(item, index) in computedCouponList" class="coupon-item" :key="item.coupon_id || 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="index"
+						<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="item.coupon_id || 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="index"
+						<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="item.coupon_id || 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="index"
+						<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="item.coupon_id || 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="index" @click="couponAction(item, index)">
+							<view class="coupon-list" v-for="(item, index) in computedCouponList" :key="item.coupon_id || 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="index"
+						<view class="coupon" v-for="(item, index) in computedCouponList" :key="item.coupon_id || 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="index" @click="couponAction(item, index)">
+						<view class="coupon-list" v-for="(item, index) in computedCouponList" :key="item.coupon_id || 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 scoped>
+<style lang="scss" scoped>
 	.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
 		display: none;
 	}
diff --git a/components/diy-components/diy-fenxiao-goods-list.vue b/components/diy-components/diy-fenxiao-goods-list.vue
index 1bfcb67..9fec461 100644
--- a/components/diy-components/diy-fenxiao-goods-list.vue
+++ b/components/diy-components/diy-fenxiao-goods-list.vue
@@ -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="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
+		<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-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>
diff --git a/components/diy-components/diy-follow-official-account.vue b/components/diy-components/diy-follow-official-account.vue
index 6aa4514..84fb7ff 100644
--- a/components/diy-components/diy-follow-official-account.vue
+++ b/components/diy-components/diy-follow-official-account.vue
@@ -26,4 +26,4 @@
 	};
 </script>
 
-<style></style>
\ No newline at end of file
+<style lang="scss"></style>
\ No newline at end of file
diff --git a/components/diy-components/diy-goods-brand.vue b/components/diy-components/diy-goods-brand.vue
index ba55960..2ee3e7e 100644
--- a/components/diy-components/diy-goods-brand.vue
+++ b/components/diy-components/diy-goods-brand.vue
@@ -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="index">
+					<view class="li-item" v-for="(item, index) in list" :key="item.brand_id || 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>
diff --git a/components/diy-components/diy-graphic-nav.vue b/components/diy-components/diy-graphic-nav.vue
index b0aa5b2..08a47eb 100644
--- a/components/diy-components/diy-graphic-nav.vue
+++ b/components/diy-components/diy-graphic-nav.vue
@@ -9,13 +9,13 @@
                         :key="index"
                         v-if="index >= [(numItem) * (value.pageCount * value.rowCount)] && index < [(numItem+1) * (value.pageCount * value.rowCount)]"
                         :style="{ width: 100 / value.rowCount + '%' }" @click="redirectTo(item.link)">
-                        <!-- #endif -->
-                        <!-- #ifdef H5 -->
-                        <view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list"
-                            :key="index"
-                            v-if="index >= [(numItem - 1) * (value.pageCount * value.rowCount)] && index < [numItem * (value.pageCount * value.rowCount)]"
-                            :style="{ width: 100 / value.rowCount + '%' }" @click="redirectTo(item.link)">
-                            <!-- #endif -->
+                    <!-- #endif -->
+                    <!-- #ifdef H5 -->
+                    <view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list"
+                        :key="index"
+                        v-if="index >= [(numItem - 1) * (value.pageCount * value.rowCount)] && index < [numItem * (value.pageCount * value.rowCount)]"
+                        :style="{ width: 100 / value.rowCount + '%' }" @click="redirectTo(item.link)">
+                    <!-- #endif -->
                             <view class="graphic-img" v-if="value.mode != 'text'"
                                 :style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
                                 <image v-if="item.iconType == 'img'"
@@ -37,7 +37,12 @@
                                 :style="{ fontSize: value.font.size * 2 + 'rpx', fontWeight: value.font.weight, color: value.font.color }">
                                 {{ item.title }}
                             </text>
-                        </view>
+                    <!-- #ifdef H5 -->
+                    </view>
+                    <!-- #endif -->
+                    <!-- #ifdef MP -->
+                    </view>
+                    <!-- #endif -->                     
                 </swiper-item>
             </swiper>
 
@@ -159,7 +164,7 @@
         }
     };
 </script>
-<style>
+<style lang="scss">
     /* 固定显示 */
     .graphic-nav.fixed-layout>>>.uni-scroll-view-content {
         display: flex;
diff --git a/components/diy-components/diy-horz-blank.vue b/components/diy-components/diy-horz-blank.vue
index b91d44a..ae9ce37 100644
--- a/components/diy-components/diy-horz-blank.vue
+++ b/components/diy-components/diy-horz-blank.vue
@@ -37,4 +37,4 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss"></style>
diff --git a/components/diy-components/diy-horz-line.vue b/components/diy-components/diy-horz-line.vue
index ce588be..54ad38b 100644
--- a/components/diy-components/diy-horz-line.vue
+++ b/components/diy-components/diy-horz-line.vue
@@ -22,4 +22,4 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss"></style>
diff --git a/components/diy-components/diy-live.vue b/components/diy-components/diy-live.vue
index 97387d0..d6247b3 100644
--- a/components/diy-components/diy-live.vue
+++ b/components/diy-components/diy-live.vue
@@ -242,7 +242,7 @@
 		}
 	}
 </style>
-<style scoped>
+<style lang="scss" scoped>
 	.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
 		display: none;
 	}
diff --git a/components/diy-components/diy-member-info.vue b/components/diy-components/diy-member-info.vue
index e044310..3482734 100644
--- a/components/diy-components/diy-member-info.vue
+++ b/components/diy-components/diy-member-info.vue
@@ -1457,7 +1457,7 @@
 		}
 	}
 </style>
-<style scoped>
+<style lang="scss" 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;
diff --git a/components/diy-components/diy-merch-list.vue b/components/diy-components/diy-merch-list.vue
index b25192d..497ad93 100644
--- a/components/diy-components/diy-merch-list.vue
+++ b/components/diy-components/diy-merch-list.vue
@@ -179,7 +179,7 @@
 		}
 	};
 </script>
-<style>
+<style lang="scss">
 	/* 单行滑动 */
 	.merch-nav.singleSlide>>>.uni-scroll-view-content {
 	    display: flex;
diff --git a/components/diy-components/diy-notes.vue b/components/diy-components/diy-notes.vue
index a371b44..8942521 100644
--- a/components/diy-components/diy-notes.vue
+++ b/components/diy-components/diy-notes.vue
@@ -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="i" @click="handlerClick(item)" @tap="handlerClick(item)"
+				<view class="notes-box-item" v-for="(item, i) in dataList" :key="item.note_id || i" @click="handlerClick(item)" @tap="handlerClick(item)"
 					:style="notesItemStyle">
 					<view class="notes-item" v-if="item.status == 1">
 						<view class="notes-item-con">
diff --git a/components/diy-components/diy-quick-nav.vue b/components/diy-components/diy-quick-nav.vue
index 7d6b458..c34e5ec 100644
--- a/components/diy-components/diy-quick-nav.vue
+++ b/components/diy-components/diy-quick-nav.vue
@@ -79,7 +79,7 @@
 		}
 	};
 </script>
-<style>
+<style lang="scss">
 .quick-nav >>> .uni-scroll-view-content {
 	display: flex;
 }
diff --git a/components/diy-components/diy-seckill.vue b/components/diy-components/diy-seckill.vue
index 22da80c..258bbb3 100644
--- a/components/diy-components/diy-seckill.vue
+++ b/components/diy-components/diy-seckill.vue
@@ -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="index" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
+					<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="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="index" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
+					<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="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="index" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
+						<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="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="dataIndex" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
+							<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="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>
diff --git a/components/diy-components/diy-store-label.vue b/components/diy-components/diy-store-label.vue
index cf02824..567e0f2 100644
--- a/components/diy-components/diy-store-label.vue
+++ b/components/diy-components/diy-store-label.vue
@@ -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" :class="['item']">
+					<view v-for="(item, index) in storeLabel" :key="item.label_id || 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>
diff --git a/components/diy-components/diy-video.vue b/components/diy-components/diy-video.vue
index 634044c..985d1df 100644
--- a/components/diy-components/diy-video.vue
+++ b/components/diy-components/diy-video.vue
@@ -43,7 +43,7 @@
 	};
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 	video {
 		width: 100%;
 	}
diff --git a/components/goods-detail-view/goods-detail-view.vue b/components/goods-detail-view/goods-detail-view.vue
index 7590573..75b61b6 100644
--- a/components/goods-detail-view/goods-detail-view.vue
+++ b/components/goods-detail-view/goods-detail-view.vue
@@ -452,4 +452,4 @@
 <style lang="scss">
     @import '@/common/css/goods_detail.scss';
 </style>
-<style scoped></style>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/components/mescroll/components/mescroll-down.vue b/components/mescroll/components/mescroll-down.vue
index b37b696..28e02be 100644
--- a/components/mescroll/components/mescroll-down.vue
+++ b/components/mescroll/components/mescroll-down.vue
@@ -1,52 +1,52 @@
-<!-- 下拉刷新区域 -->
-<template>
-	<view v-if="mOption.use" class="mescroll-downwarp">
-		<view class="downwarp-content">
-			<view class="downwarp-progress" :class="{ 'mescroll-rotate': isDownLoading }" :style="{ transform: downRotate }"></view>
-			<view class="downwarp-tip">{{ downText }}</view>
-		</view>
-	</view>
-</template>
-
-<script>
-export default {
-	props: {
-		option: Object, // down的配置项
-		type: Number, // 下拉状态（inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
-		rate: Number // 下拉比率 (inOffset: rate<1; outOffset: rate>=1)
-	},
-	computed: {
-		// 支付宝小程序需写成计算属性,prop定义default仍报错
-		mOption() {
-			return this.option || {};
-		},
-		// 是否在加载中
-		isDownLoading() {
-			return this.type === 3;
-		},
-		// 旋转的角度
-		downRotate() {
-			return 'rotate(' + 360 * this.rate + 'deg)';
-		},
-		// 文本提示
-		downText() {
-			switch (this.type) {
-				case 1:
-					return this.mOption.textInOffset;
-				case 2:
-					return this.mOption.textOutOffset;
-				case 3:
-					return this.mOption.textLoading;
-				case 4:
-					return this.mOption.textLoading;
-				default:
-					return this.mOption.textInOffset;
-			}
-		}
-	}
-};
-</script>
-
-<style>
-@import './mescroll-down.css';
-</style>
+<!-- 下拉刷新区域 -->
+<template>
+	<view v-if="mOption.use" class="mescroll-downwarp">
+		<view class="downwarp-content">
+			<view class="downwarp-progress" :class="{ 'mescroll-rotate': isDownLoading }" :style="{ transform: downRotate }"></view>
+			<view class="downwarp-tip">{{ downText }}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		option: Object, // down的配置项
+		type: Number, // 下拉状态（inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
+		rate: Number // 下拉比率 (inOffset: rate<1; outOffset: rate>=1)
+	},
+	computed: {
+		// 支付宝小程序需写成计算属性,prop定义default仍报错
+		mOption() {
+			return this.option || {};
+		},
+		// 是否在加载中
+		isDownLoading() {
+			return this.type === 3;
+		},
+		// 旋转的角度
+		downRotate() {
+			return 'rotate(' + 360 * this.rate + 'deg)';
+		},
+		// 文本提示
+		downText() {
+			switch (this.type) {
+				case 1:
+					return this.mOption.textInOffset;
+				case 2:
+					return this.mOption.textOutOffset;
+				case 3:
+					return this.mOption.textLoading;
+				case 4:
+					return this.mOption.textLoading;
+				default:
+					return this.mOption.textInOffset;
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+@import './mescroll-down.css';
+</style>
diff --git a/components/mescroll/components/mescroll-empty.vue b/components/mescroll/components/mescroll-empty.vue
index f34da7c..55d187d 100644
--- a/components/mescroll/components/mescroll-empty.vue
+++ b/components/mescroll/components/mescroll-empty.vue
@@ -1,90 +1,90 @@
-<!--空布局
-
-可作为独立的组件, 不使用mescroll的页面也能单独引入, 以便APP全局统一管理:
-import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.vue';
-<mescroll-empty v-if="isShowEmpty" :option="optEmpty" @emptyclick="emptyClick"></mescroll-empty>
-
--->
-<template>
-	<view class="mescroll-empty" :class="{ 'empty-fixed': option.fixed }" :style="{ 'z-index': option.zIndex, top: option.top }">
-		<image v-if="icon" class="empty-icon" :src="icon" mode="widthFix" />
-		<view v-if="tip" class="empty-tip">{{ tip }}</view>
-		<view v-if="option.btnText" class="empty-btn" @click="emptyClick">{{ option.btnText }}</view>
-	</view>
-</template>
-
-<script>
-// 引入全局配置
-import GlobalOption from './../mescroll-uni-option.js';
-export default {
-	props: {
-		// empty的配置项: 默认为GlobalOption.up.empty
-		option: {
-			type: Object,
-			default() {
-				return {};
-			}
-		}
-	},
-	// 使用computed获取配置,用于支持option的动态配置
-	computed: {
-		// 图标
-		icon() {
-			return this.option.icon == null ? GlobalOption.up.empty.icon : this.option.icon; // 此处不使用短路求值, 用于支持传空串不显示图标
-		},
-		// 文本提示
-		tip() {
-			return this.option.tip == null ? GlobalOption.up.empty.tip : this.option.tip; // 此处不使用短路求值, 用于支持传空串不显示文本提示
-		}
-	},
-	methods: {
-		// 点击按钮
-		emptyClick() {
-			this.$emit('emptyclick');
-		}
-	}
-};
-</script>
-
-<style>
-/* 无任何数据的空布局 */
-.mescroll-empty {
-	box-sizing: border-box;
-	width: 100%;
-	padding: 100rpx 50rpx;
-	text-align: center;
-}
-
-.mescroll-empty.empty-fixed {
-	z-index: 99;
-	position: absolute; /*transform会使fixed失效,最终会降级为absolute */
-	top: 100rpx;
-	left: 0;
-}
-
-.mescroll-empty .empty-icon {
-	width: 280rpx;
-	height: 280rpx;
-}
-
-.mescroll-empty .empty-tip {
-	margin-top: 20rpx;
-	font-size: $font-size-tag;
-	color: gray;
-}
-
-.mescroll-empty .empty-btn {
-	display: inline-block;
-	margin-top: 40rpx;
-	min-width: 200rpx;
-	padding: 18rpx;
-	font-size: $font-size-base;
-	border: 1rpx solid #e04b28;
-	border-radius: 60rpx;
-	color: #e04b28;
-}
-
-.mescroll-empty .empty-btn:active {
-	opacity: 0.75;
-}
-</style>
+<!--空布局
+
+可作为独立的组件, 不使用mescroll的页面也能单独引入, 以便APP全局统一管理:
+import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.vue';
+<mescroll-empty v-if="isShowEmpty" :option="optEmpty" @emptyclick="emptyClick"></mescroll-empty>
+
+-->
+<template>
+	<view class="mescroll-empty" :class="{ 'empty-fixed': option.fixed }" :style="{ 'z-index': option.zIndex, top: option.top }">
+		<image v-if="icon" class="empty-icon" :src="icon" mode="widthFix" />
+		<view v-if="tip" class="empty-tip">{{ tip }}</view>
+		<view v-if="option.btnText" class="empty-btn" @click="emptyClick">{{ option.btnText }}</view>
+	</view>
+</template>
+
+<script>
+// 引入全局配置
+import GlobalOption from './../mescroll-uni-option.js';
+export default {
+	props: {
+		// empty的配置项: 默认为GlobalOption.up.empty
+		option: {
+			type: Object,
+			default() {
+				return {};
+			}
+		}
+	},
+	// 使用computed获取配置,用于支持option的动态配置
+	computed: {
+		// 图标
+		icon() {
+			return this.option.icon == null ? GlobalOption.up.empty.icon : this.option.icon; // 此处不使用短路求值, 用于支持传空串不显示图标
+		},
+		// 文本提示
+		tip() {
+			return this.option.tip == null ? GlobalOption.up.empty.tip : this.option.tip; // 此处不使用短路求值, 用于支持传空串不显示文本提示
+		}
+	},
+	methods: {
+		// 点击按钮
+		emptyClick() {
+			this.$emit('emptyclick');
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+/* 无任何数据的空布局 */
+.mescroll-empty {
+	box-sizing: border-box;
+	width: 100%;
+	padding: 100rpx 50rpx;
+	text-align: center;
+}
+
+.mescroll-empty.empty-fixed {
+	z-index: 99;
+	position: absolute; /*transform会使fixed失效,最终会降级为absolute */
+	top: 100rpx;
+	left: 0;
+}
+
+.mescroll-empty .empty-icon {
+	width: 280rpx;
+	height: 280rpx;
+}
+
+.mescroll-empty .empty-tip {
+	margin-top: 20rpx;
+	font-size: $font-size-tag;
+	color: gray;
+}
+
+.mescroll-empty .empty-btn {
+	display: inline-block;
+	margin-top: 40rpx;
+	min-width: 200rpx;
+	padding: 18rpx;
+	font-size: $font-size-base;
+	border: 1rpx solid #e04b28;
+	border-radius: 60rpx;
+	color: #e04b28;
+}
+
+.mescroll-empty .empty-btn:active {
+	opacity: 0.75;
+}
+</style>
diff --git a/components/mescroll/components/mescroll-top.vue b/components/mescroll/components/mescroll-top.vue
index 3bc0641..681d543 100644
--- a/components/mescroll/components/mescroll-top.vue
+++ b/components/mescroll/components/mescroll-top.vue
@@ -1,81 +1,81 @@
-<!-- 回到顶部的按钮 -->
-<template>
-	<image
-		v-if="mOption.src"
-		class="mescroll-totop"
-		:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out', { 'mescroll-safe-bottom': mOption.safearea }]"
-		:style="{ 'z-index': mOption.zIndex, left: left, right: right, bottom: addUnit(mOption.bottom), width: addUnit(mOption.width), 'border-radius': addUnit(mOption.radius) }"
-		:src="mOption.src"
-		mode="widthFix"
-		@click="toTopClick"
-	/>
-</template>
-
-<script>
-export default {
-	props: {
-		// up.toTop的配置项
-		option: Object,
-		// 是否显示
-		value: false
-	},
-	computed: {
-		// 支付宝小程序需写成计算属性,prop定义default仍报错
-		mOption() {
-			return this.option || {};
-		},
-		// 优先显示左边
-		left() {
-			return this.mOption.left ? this.addUnit(this.mOption.left) : 'auto';
-		},
-		// 右边距离 (优先显示左边)
-		right() {
-			return this.mOption.left ? 'auto' : this.addUnit(this.mOption.right);
-		}
-	},
-	methods: {
-		addUnit(num) {
-			if (!num) return 0;
-			if (typeof num === 'number') return num + 'rpx';
-			return num;
-		},
-		toTopClick() {
-			this.$emit('input', false); // 使v-model生效
-			this.$emit('click'); // 派发点击事件
-		}
-	}
-};
-</script>
-
-<style>
-/* 回到顶部的按钮 */
-.mescroll-totop {
-	z-index: 99;
-	position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
-	right: 46rpx !important;
-	bottom: 272rpx !important;
-	width: 72rpx;
-	height: auto;
-	border-radius: 50%;
-	opacity: 0;
-	transition: opacity 0.5s; /* 过渡 */
-	margin-bottom: var(--window-bottom); /* css变量 */
-}
-
-/* 适配 iPhoneX */
-.mescroll-safe-bottom {
-	margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
-	margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
-}
-
-/* 显示 -- 淡入 */
-.mescroll-totop-in {
-	opacity: 1;
-}
-
-/* 隐藏 -- 淡出且不接收事件*/
-.mescroll-totop-out {
-	opacity: 0;
-	pointer-events: none;
-}
-</style>
+<!-- 回到顶部的按钮 -->
+<template>
+	<image
+		v-if="mOption.src"
+		class="mescroll-totop"
+		:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out', { 'mescroll-safe-bottom': mOption.safearea }]"
+		:style="{ 'z-index': mOption.zIndex, left: left, right: right, bottom: addUnit(mOption.bottom), width: addUnit(mOption.width), 'border-radius': addUnit(mOption.radius) }"
+		:src="mOption.src"
+		mode="widthFix"
+		@click="toTopClick"
+	/>
+</template>
+
+<script>
+export default {
+	props: {
+		// up.toTop的配置项
+		option: Object,
+		// 是否显示
+		value: false
+	},
+	computed: {
+		// 支付宝小程序需写成计算属性,prop定义default仍报错
+		mOption() {
+			return this.option || {};
+		},
+		// 优先显示左边
+		left() {
+			return this.mOption.left ? this.addUnit(this.mOption.left) : 'auto';
+		},
+		// 右边距离 (优先显示左边)
+		right() {
+			return this.mOption.left ? 'auto' : this.addUnit(this.mOption.right);
+		}
+	},
+	methods: {
+		addUnit(num) {
+			if (!num) return 0;
+			if (typeof num === 'number') return num + 'rpx';
+			return num;
+		},
+		toTopClick() {
+			this.$emit('input', false); // 使v-model生效
+			this.$emit('click'); // 派发点击事件
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+/* 回到顶部的按钮 */
+.mescroll-totop {
+	z-index: 99;
+	position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
+	right: 46rpx !important;
+	bottom: 272rpx !important;
+	width: 72rpx;
+	height: auto;
+	border-radius: 50%;
+	opacity: 0;
+	transition: opacity 0.5s; /* 过渡 */
+	margin-bottom: var(--window-bottom); /* css变量 */
+}
+
+/* 适配 iPhoneX */
+.mescroll-safe-bottom {
+	margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
+	margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
+}
+
+/* 显示 -- 淡入 */
+.mescroll-totop-in {
+	opacity: 1;
+}
+
+/* 隐藏 -- 淡出且不接收事件*/
+.mescroll-totop-out {
+	opacity: 0;
+	pointer-events: none;
+}
+</style>
diff --git a/components/mescroll/components/mescroll-up.vue b/components/mescroll/components/mescroll-up.vue
index beab032..ff95fa1 100644
--- a/components/mescroll/components/mescroll-up.vue
+++ b/components/mescroll/components/mescroll-up.vue
@@ -1,39 +1,39 @@
-<!-- 上拉加载区域 -->
-<template>
-	<view class="mescroll-upwarp">
-		<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
-		<view v-show="isUpLoading">
-			<view class="upwarp-progress mescroll-rotate"></view>
-			<view class="upwarp-tip">{{ mOption.textLoading }}</view>
-		</view>
-		<!-- 无数据 -->
-		<view v-if="isUpNoMore" class="upwarp-nodata">{{ mOption.textNoMore }}</view>
-	</view>
-</template>
-
-<script>
-export default {
-	props: {
-		option: Object, // up的配置项
-		type: Number // 上拉加载的状态：0（loading前），1（loading中），2（没有更多了）
-	},
-	computed: {
-		// 支付宝小程序需写成计算属性,prop定义default仍报错
-		mOption() {
-			return this.option || {};
-		},
-		// 加载中
-		isUpLoading() {
-			return this.type === 1;
-		},
-		// 没有更多了
-		isUpNoMore() {
-			return this.type === 2;
-		}
-	}
-};
-</script>
-
-<style>
-@import './mescroll-up.css';
-</style>
+<!-- 上拉加载区域 -->
+<template>
+	<view class="mescroll-upwarp">
+		<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
+		<view v-show="isUpLoading">
+			<view class="upwarp-progress mescroll-rotate"></view>
+			<view class="upwarp-tip">{{ mOption.textLoading }}</view>
+		</view>
+		<!-- 无数据 -->
+		<view v-if="isUpNoMore" class="upwarp-nodata">{{ mOption.textNoMore }}</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		option: Object, // up的配置项
+		type: Number // 上拉加载的状态：0（loading前），1（loading中），2（没有更多了）
+	},
+	computed: {
+		// 支付宝小程序需写成计算属性,prop定义default仍报错
+		mOption() {
+			return this.option || {};
+		},
+		// 加载中
+		isUpLoading() {
+			return this.type === 1;
+		},
+		// 没有更多了
+		isUpNoMore() {
+			return this.type === 2;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+@import './mescroll-up.css';
+</style>
diff --git a/components/mescroll/mescroll-body.vue b/components/mescroll/mescroll-body.vue
index f3199c0..4f981ce 100644
--- a/components/mescroll/mescroll-body.vue
+++ b/components/mescroll/mescroll-body.vue
@@ -1,298 +1,298 @@
-<template>
-	<view
-		class="mescroll-body"
-		:style="{ minHeight: minHeight, 'padding-top': padTop, 'padding-bottom': padBottom, 'padding-bottom': padBottomConstant, 'padding-bottom': padBottomEnv }"
-		@touchstart="touchstartEvent"
-		@touchmove="touchmoveEvent"
-		@touchend="touchendEvent"
-		@touchcancel="touchendEvent"
-	>
-		<view class="mescroll-body-content mescroll-touch" :style="{ transform: translateY, transition: transition }">
-			<!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
-			<!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
-			<view v-if="mescroll.optDown.use" class="mescroll-downwarp">
-				<view class="downwarp-content">
-					<view class="downwarp-progress" :class="{ 'mescroll-rotate': isDownLoading }" :style="{ transform: downRotate }"></view>
-					<view class="downwarp-tip">{{ downText }}</view>
-				</view>
-			</view>
-
-			<!-- 列表内容 -->
-			<slot></slot>
-
-			<!-- 空布局 -->
-			<!-- 	<mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty> -->
-
-			<!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
-			<!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
-			<view v-if="mescroll.optUp.use && !isDownLoading" class="mescroll-upwarp">
-				<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
-				<view v-show="upLoadType === 1">
-					<view class="upwarp-progress mescroll-rotate"></view>
-					<view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view>
-				</view>
-				<!-- 无数据 -->
-				<view v-if="upLoadType === 2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
-			</view>
-		</view>
-
-		<!-- 回到顶部按钮 (fixed元素需写在transform外面,防止降级为absolute)-->
-		<mescroll-top v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick" v-if="showTop"></mescroll-top>
-	</view>
-</template>
-
-<script>
-// 引入mescroll-uni.js,处理核心逻辑
-import MeScroll from './mescroll-uni.js';
-// 引入全局配置
-import GlobalOption from './mescroll-uni-option.js';
-// 引入空布局组件
-import MescrollEmpty from './components/mescroll-empty.vue';
-// 引入回到顶部组件
-import MescrollTop from './components/mescroll-top.vue';
-
-export default {
-	components: {
-		MescrollEmpty,
-		MescrollTop
-	},
-	data() {
-		return {
-			mescroll: { optDown: {}, optUp: {} }, // mescroll实例
-			downHight: 0, //下拉刷新: 容器高度
-			downRate: 0, // 下拉比率(inOffset: rate<1; outOffset: rate>=1)
-			downLoadType: 4, // 下拉刷新状态 （inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
-			upLoadType: 0, // 上拉加载状态：0（loading前），1（loading中），2（没有更多了）
-			isShowEmpty: false, // 是否显示空布局
-			isShowToTop: false, // 是否显示回到顶部按钮
-			windowHeight: 0, // 可使用窗口的高度
-			statusBarHeight: 0 // 状态栏高度
-		};
-	},
-	props: {
-		down: Object, // 下拉刷新的参数配置
-		up: Object, // 上拉加载的参数配置
-		top: [String, Number], // 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
-		topbar: Boolean, // top的偏移量是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可自动加上状态栏高度的偏移量)
-		bottom: [String, Number], // 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
-		safearea: Boolean, // bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
-		height: [String, Number], // 指定mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
-		showTop: {
-			type: Boolean,
-			default: true
-		}
-	},
-	computed: {
-		// mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
-		minHeight() {
-			return this.toPx(this.height || '100%') + 'px';
-		},
-		// 下拉布局往下偏移的距离 (px)
-		numTop() {
-			return this.toPx(this.top) + (this.topbar ? this.statusBarHeight : 0);
-		},
-		padTop() {
-			return this.numTop + 'px';
-		},
-		// 上拉布局往上偏移 (px)
-		numBottom() {
-			return this.toPx(this.bottom);
-		},
-		padBottom() {
-			return this.numBottom + 'px';
-		},
-		padBottomConstant() {
-			return this.safearea ? 'calc(' + this.padBottom + ' + constant(safe-area-inset-bottom))' : this.padBottom;
-		},
-		padBottomEnv() {
-			return this.safearea ? 'calc(' + this.padBottom + ' + env(safe-area-inset-bottom))' : this.padBottom;
-		},
-		// 是否为重置下拉的状态
-		isDownReset() {
-			return this.downLoadType === 3 || this.downLoadType === 4;
-		},
-		// 过渡
-		transition() {
-			return this.isDownReset ? 'transform 300ms' : '';
-		},
-		translateY() {
-			return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : ''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
-		},
-		// 是否在加载中
-		isDownLoading() {
-			return this.downLoadType === 3;
-		},
-		// 旋转的角度
-		downRotate() {
-			return 'rotate(' + 360 * this.downRate + 'deg)';
-		},
-		// 文本提示
-		downText() {
-			switch (this.downLoadType) {
-				case 1:
-					return this.mescroll.optDown.textInOffset;
-				case 2:
-					return this.mescroll.optDown.textOutOffset;
-				case 3:
-					return this.mescroll.optDown.textLoading;
-				case 4:
-					return this.mescroll.optDown.textLoading;
-				default:
-					return this.mescroll.optDown.textInOffset;
-			}
-		}
-	},
-	methods: {
-		//number,rpx,upx,px,% --> px的数值
-		toPx(num) {
-			if (typeof num === 'string') {
-				if (num.indexOf('px') !== -1) {
-					if (num.indexOf('rpx') !== -1) {
-						// "10rpx"
-						num = num.replace('rpx', '');
-					} else if (num.indexOf('upx') !== -1) {
-						// "10upx"
-						num = num.replace('upx', '');
-					} else {
-						// "10px"
-						return Number(num.replace('px', ''));
-					}
-				} else if (num.indexOf('%') !== -1) {
-					// 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
-					let rate = Number(num.replace('%', '')) / 100;
-					return this.windowHeight * rate;
-				}
-			}
-			return num ? uni.upx2px(Number(num)) : 0;
-		},
-		//注册列表touchstart事件,用于下拉刷新
-		touchstartEvent(e) {
-			this.mescroll.touchstartEvent(e);
-		},
-		//注册列表touchmove事件,用于下拉刷新
-		touchmoveEvent(e) {
-			this.mescroll.touchmoveEvent(e);
-		},
-		//注册列表touchend事件,用于下拉刷新
-		touchendEvent(e) {
-			this.mescroll.touchendEvent(e);
-		},
-		// 点击空布局的按钮回调
-		emptyClick() {
-			this.$emit('emptyclick', this.mescroll);
-		},
-		// 点击回到顶部的按钮回调
-		toTopClick() {
-			this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
-			this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
-		}
-	},
-	// 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
-	created() {
-		let vm = this;
-
-		let diyOption = {
-			// 下拉刷新的配置
-			down: {
-				inOffset(mescroll) {
-					vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
-				},
-				outOffset(mescroll) {
-					vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
-				},
-				onMoving(mescroll, rate, downHight) {
-					// 下拉过程中的回调,滑动过程一直在执行;
-					vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
-					vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
-				},
-				showLoading(mescroll, downHight) {
-					vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
-					vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
-				},
-				endDownScroll(mescroll) {
-					vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
-					vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
-				},
-				// 派发下拉刷新的回调
-				callback: function(mescroll) {
-					vm.$emit('down', mescroll);
-				}
-			},
-			// 上拉加载的配置
-			up: {
-				// 显示加载中的回调
-				showLoading() {
-					vm.upLoadType = 1;
-				},
-				// 显示无更多数据的回调
-				showNoMore() {
-					vm.upLoadType = 2;
-				},
-				// 隐藏上拉加载的回调
-				hideUpScroll() {
-					vm.upLoadType = 0;
-				},
-				// 空布局
-				empty: {
-					onShow(isShow) {
-						// 显示隐藏的回调
-						vm.isShowEmpty = isShow;
-					}
-				},
-				// 回到顶部
-				toTop: {
-					onShow(isShow) {
-						// 显示隐藏的回调
-						vm.isShowToTop = isShow;
-					}
-				},
-				// 派发上拉加载的回调
-				callback: function(mescroll) {
-					vm.$emit('up', mescroll);
-				}
-			}
-		};
-
-		MeScroll.extend(diyOption, GlobalOption); // 混入全局的配置
-		let myOption = JSON.parse(
-			JSON.stringify({
-				down: vm.down,
-				up: vm.up
-			})
-		); // 深拷贝,避免对props的影响
-		MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
-
-		// 初始化MeScroll对象
-		vm.mescroll = new MeScroll(myOption, true); // 传入true,标记body为滚动区域
-		// init回调mescroll对象
-		vm.$emit('init', vm.mescroll);
-
-		// 设置高度
-		const sys = uni.getSystemInfoSync();
-		if (sys.windowHeight) vm.windowHeight = sys.windowHeight;
-		if (sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
-		// 使down的bottomOffset生效
-		vm.mescroll.setBodyHeight(sys.windowHeight);
-
-		// 因为使用的是page的scroll,这里需自定义scrollTo
-		vm.mescroll.resetScrollTo((y, t) => {
-			uni.pageScrollTo({
-				scrollTop: y,
-				duration: t
-			});
-		});
-
-		// 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
-		if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {
-		} else {
-			vm.mescroll.optUp.toTop.safearea = vm.safearea;
-		}
-	}
-};
-</script>
-
-<style>
-@import './mescroll-body.css';
-@import './components/mescroll-down.css';
-@import './components/mescroll-up.css';
-</style>
+<template>
+	<view
+		class="mescroll-body"
+		:style="{ minHeight: minHeight, 'padding-top': padTop, 'padding-bottom': padBottom, 'padding-bottom': padBottomConstant, 'padding-bottom': padBottomEnv }"
+		@touchstart="touchstartEvent"
+		@touchmove="touchmoveEvent"
+		@touchend="touchendEvent"
+		@touchcancel="touchendEvent"
+	>
+		<view class="mescroll-body-content mescroll-touch" :style="{ transform: translateY, transition: transition }">
+			<!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
+			<!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
+			<view v-if="mescroll.optDown.use" class="mescroll-downwarp">
+				<view class="downwarp-content">
+					<view class="downwarp-progress" :class="{ 'mescroll-rotate': isDownLoading }" :style="{ transform: downRotate }"></view>
+					<view class="downwarp-tip">{{ downText }}</view>
+				</view>
+			</view>
+
+			<!-- 列表内容 -->
+			<slot></slot>
+
+			<!-- 空布局 -->
+			<!-- 	<mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty> -->
+
+			<!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
+			<!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
+			<view v-if="mescroll.optUp.use && !isDownLoading" class="mescroll-upwarp">
+				<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
+				<view v-show="upLoadType === 1">
+					<view class="upwarp-progress mescroll-rotate"></view>
+					<view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view>
+				</view>
+				<!-- 无数据 -->
+				<view v-if="upLoadType === 2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
+			</view>
+		</view>
+
+		<!-- 回到顶部按钮 (fixed元素需写在transform外面,防止降级为absolute)-->
+		<mescroll-top v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick" v-if="showTop"></mescroll-top>
+	</view>
+</template>
+
+<script>
+// 引入mescroll-uni.js,处理核心逻辑
+import MeScroll from './mescroll-uni.js';
+// 引入全局配置
+import GlobalOption from './mescroll-uni-option.js';
+// 引入空布局组件
+import MescrollEmpty from './components/mescroll-empty.vue';
+// 引入回到顶部组件
+import MescrollTop from './components/mescroll-top.vue';
+
+export default {
+	components: {
+		MescrollEmpty,
+		MescrollTop
+	},
+	data() {
+		return {
+			mescroll: { optDown: {}, optUp: {} }, // mescroll实例
+			downHight: 0, //下拉刷新: 容器高度
+			downRate: 0, // 下拉比率(inOffset: rate<1; outOffset: rate>=1)
+			downLoadType: 4, // 下拉刷新状态 （inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
+			upLoadType: 0, // 上拉加载状态：0（loading前），1（loading中），2（没有更多了）
+			isShowEmpty: false, // 是否显示空布局
+			isShowToTop: false, // 是否显示回到顶部按钮
+			windowHeight: 0, // 可使用窗口的高度
+			statusBarHeight: 0 // 状态栏高度
+		};
+	},
+	props: {
+		down: Object, // 下拉刷新的参数配置
+		up: Object, // 上拉加载的参数配置
+		top: [String, Number], // 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
+		topbar: Boolean, // top的偏移量是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可自动加上状态栏高度的偏移量)
+		bottom: [String, Number], // 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
+		safearea: Boolean, // bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
+		height: [String, Number], // 指定mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
+		showTop: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		// mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
+		minHeight() {
+			return this.toPx(this.height || '100%') + 'px';
+		},
+		// 下拉布局往下偏移的距离 (px)
+		numTop() {
+			return this.toPx(this.top) + (this.topbar ? this.statusBarHeight : 0);
+		},
+		padTop() {
+			return this.numTop + 'px';
+		},
+		// 上拉布局往上偏移 (px)
+		numBottom() {
+			return this.toPx(this.bottom);
+		},
+		padBottom() {
+			return this.numBottom + 'px';
+		},
+		padBottomConstant() {
+			return this.safearea ? 'calc(' + this.padBottom + ' + constant(safe-area-inset-bottom))' : this.padBottom;
+		},
+		padBottomEnv() {
+			return this.safearea ? 'calc(' + this.padBottom + ' + env(safe-area-inset-bottom))' : this.padBottom;
+		},
+		// 是否为重置下拉的状态
+		isDownReset() {
+			return this.downLoadType === 3 || this.downLoadType === 4;
+		},
+		// 过渡
+		transition() {
+			return this.isDownReset ? 'transform 300ms' : '';
+		},
+		translateY() {
+			return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : ''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
+		},
+		// 是否在加载中
+		isDownLoading() {
+			return this.downLoadType === 3;
+		},
+		// 旋转的角度
+		downRotate() {
+			return 'rotate(' + 360 * this.downRate + 'deg)';
+		},
+		// 文本提示
+		downText() {
+			switch (this.downLoadType) {
+				case 1:
+					return this.mescroll.optDown.textInOffset;
+				case 2:
+					return this.mescroll.optDown.textOutOffset;
+				case 3:
+					return this.mescroll.optDown.textLoading;
+				case 4:
+					return this.mescroll.optDown.textLoading;
+				default:
+					return this.mescroll.optDown.textInOffset;
+			}
+		}
+	},
+	methods: {
+		//number,rpx,upx,px,% --> px的数值
+		toPx(num) {
+			if (typeof num === 'string') {
+				if (num.indexOf('px') !== -1) {
+					if (num.indexOf('rpx') !== -1) {
+						// "10rpx"
+						num = num.replace('rpx', '');
+					} else if (num.indexOf('upx') !== -1) {
+						// "10upx"
+						num = num.replace('upx', '');
+					} else {
+						// "10px"
+						return Number(num.replace('px', ''));
+					}
+				} else if (num.indexOf('%') !== -1) {
+					// 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
+					let rate = Number(num.replace('%', '')) / 100;
+					return this.windowHeight * rate;
+				}
+			}
+			return num ? uni.upx2px(Number(num)) : 0;
+		},
+		//注册列表touchstart事件,用于下拉刷新
+		touchstartEvent(e) {
+			this.mescroll.touchstartEvent(e);
+		},
+		//注册列表touchmove事件,用于下拉刷新
+		touchmoveEvent(e) {
+			this.mescroll.touchmoveEvent(e);
+		},
+		//注册列表touchend事件,用于下拉刷新
+		touchendEvent(e) {
+			this.mescroll.touchendEvent(e);
+		},
+		// 点击空布局的按钮回调
+		emptyClick() {
+			this.$emit('emptyclick', this.mescroll);
+		},
+		// 点击回到顶部的按钮回调
+		toTopClick() {
+			this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
+			this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
+		}
+	},
+	// 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
+	created() {
+		let vm = this;
+
+		let diyOption = {
+			// 下拉刷新的配置
+			down: {
+				inOffset(mescroll) {
+					vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
+				},
+				outOffset(mescroll) {
+					vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
+				},
+				onMoving(mescroll, rate, downHight) {
+					// 下拉过程中的回调,滑动过程一直在执行;
+					vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
+					vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
+				},
+				showLoading(mescroll, downHight) {
+					vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
+					vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
+				},
+				endDownScroll(mescroll) {
+					vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
+					vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
+				},
+				// 派发下拉刷新的回调
+				callback: function(mescroll) {
+					vm.$emit('down', mescroll);
+				}
+			},
+			// 上拉加载的配置
+			up: {
+				// 显示加载中的回调
+				showLoading() {
+					vm.upLoadType = 1;
+				},
+				// 显示无更多数据的回调
+				showNoMore() {
+					vm.upLoadType = 2;
+				},
+				// 隐藏上拉加载的回调
+				hideUpScroll() {
+					vm.upLoadType = 0;
+				},
+				// 空布局
+				empty: {
+					onShow(isShow) {
+						// 显示隐藏的回调
+						vm.isShowEmpty = isShow;
+					}
+				},
+				// 回到顶部
+				toTop: {
+					onShow(isShow) {
+						// 显示隐藏的回调
+						vm.isShowToTop = isShow;
+					}
+				},
+				// 派发上拉加载的回调
+				callback: function(mescroll) {
+					vm.$emit('up', mescroll);
+				}
+			}
+		};
+
+		MeScroll.extend(diyOption, GlobalOption); // 混入全局的配置
+		let myOption = JSON.parse(
+			JSON.stringify({
+				down: vm.down,
+				up: vm.up
+			})
+		); // 深拷贝,避免对props的影响
+		MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
+
+		// 初始化MeScroll对象
+		vm.mescroll = new MeScroll(myOption, true); // 传入true,标记body为滚动区域
+		// init回调mescroll对象
+		vm.$emit('init', vm.mescroll);
+
+		// 设置高度
+		const sys = uni.getSystemInfoSync();
+		if (sys.windowHeight) vm.windowHeight = sys.windowHeight;
+		if (sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
+		// 使down的bottomOffset生效
+		vm.mescroll.setBodyHeight(sys.windowHeight);
+
+		// 因为使用的是page的scroll,这里需自定义scrollTo
+		vm.mescroll.resetScrollTo((y, t) => {
+			uni.pageScrollTo({
+				scrollTop: y,
+				duration: t
+			});
+		});
+
+		// 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
+		if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {
+		} else {
+			vm.mescroll.optUp.toTop.safearea = vm.safearea;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+@import './mescroll-body.css';
+@import './components/mescroll-down.css';
+@import './components/mescroll-up.css';
+</style>
diff --git a/components/mescroll/mescroll-uni.vue b/components/mescroll/mescroll-uni.vue
index 7a40618..22a40b2 100644
--- a/components/mescroll/mescroll-uni.vue
+++ b/components/mescroll/mescroll-uni.vue
@@ -1,429 +1,429 @@
-<template>
-	<view class="mescroll-uni-warp">
-		<scroll-view :id="viewId" class="mescroll-uni" :class="{ 'mescroll-uni-fixed': isFixed }" :style="{
-				height: scrollHeight,
-				'padding-top': padTop,
-				'padding-bottom': padBottom,
-				'padding-bottom': padBottomConstant,
-				'padding-bottom': padBottomEnv,
-				top: fixedTop,
-				bottom: fixedBottom,
-				bottom: fixedBottomConstant,
-				bottom: fixedBottomEnv,
-				background: background,
-				'padding-left': paddingBoth,
-				'padding-right': paddingBoth
-			}" :scroll-top="scrollTop" :scroll-with-animation="scrollAnim" @scroll="scroll" @touchstart="touchstartEvent"
-			@touchmove="touchmoveEvent" @touchend="touchendEvent" @touchcancel="touchendEvent" :scroll-y="isDownReset"
-			:enable-back-to-top="true">
-			<view class="mescroll-uni-content" :style="{ transform: translateY, transition: transition }">
-				<!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
-				<!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
-				<view v-if="mescroll.optDown.use" class="mescroll-downwarp">
-					<view class="downwarp-content">
-						<!-- <view class="downwarp-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'transform': downRotate}"></view> -->
-						<view class="downwarp-tip">{{ downText }}</view>
-					</view>
-				</view>
-
-				<!-- 列表内容 -->
-				<slot></slot>
-
-				<!-- 空布局 -->
-				<!-- <mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty> -->
-
-				<!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
-				<!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
-				<view v-if="mescroll.optUp.use && !isDownLoading" class="mescroll-upwarp">
-					<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
-					<view v-show="upLoadType === 1">
-						<!-- <view class="upwarp-progress mescroll-rotate"></view>
-						<view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view> -->
-						<ns-loading></ns-loading>
-					</view>
-					<!-- 无数据 -->
-					<view v-if="upLoadType === 2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
-				</view>
-			</view>
-		</scroll-view>
-
-		<!-- 回到顶部按钮 (fixed元素,需写在scroll-view外面,防止滚动的时候抖动)-->
-		<mescroll-top v-if="showTop" v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>
-	</view>
-</template>
-
-<script>
-	// 引入mescroll-uni.js,处理核心逻辑
-	import MeScroll from './mescroll-uni.js';
-	// 引入全局配置
-	import GlobalOption from './mescroll-uni-option.js';
-	// 引入空布局组件
-	import MescrollEmpty from './components/mescroll-empty.vue';
-	// 引入回到顶部组件
-	import MescrollTop from './components/mescroll-top.vue';
-
-	import nsLoading from '@/components/ns-loading/ns-loading.vue';
-
-	export default {
-		name: 'mescroll-uni',
-		components: {
-			MescrollEmpty,
-			MescrollTop
-		},
-		props: {
-			down: Object, // 下拉刷新的参数配置
-			up: Object, // 上拉加载的参数配置
-			top: [String, Number], // 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
-			topbar: Boolean, // top的偏移量是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可自动加上状态栏高度的偏移量)
-			bottom: [String, Number], // 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
-			safearea: Boolean, // bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
-			fixed: {
-				// 是否通过fixed固定mescroll的高度, 默认true
-				type: Boolean,
-				default () {
-					return true;
-				}
-			},
-			height: [String,
-				Number
-			], // 指定mescroll的高度, 此项有值,则不使用fixed. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
-			showTop: {
-				//是否需要展示返回顶部按钮
-				type: Boolean,
-				default () {
-					return true;
-				}
-			},
-			background: String,
-			paddingBoth: {
-				type: [String, Number],
-				default () {
-					return 0;
-				}
-			}
-		},
-		data() {
-			return {
-				mescroll: {
-					optDown: {},
-					optUp: {}
-				}, // mescroll实例
-				viewId: 'id_' +
-					Math.random()
-					.toString(36)
-					.substr(2), // 随机生成mescroll的id(不能数字开头,否则找不到元素)
-				downHight: 0, //下拉刷新: 容器高度
-				downRate: 0, // 下拉比率(inOffset: rate<1; outOffset: rate>=1)
-				downLoadType: 4, // 下拉刷新状态 （inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
-				upLoadType: 0, // 上拉加载状态：0（loading前），1（loading中），2（没有更多了）
-				isShowEmpty: false, // 是否显示空布局
-				isShowToTop: false, // 是否显示回到顶部按钮
-				scrollTop: 0, // 滚动条的位置
-				scrollAnim: false, // 是否开启滚动动画
-				windowTop: 0, // 可使用窗口的顶部位置
-				windowBottom: 0, // 可使用窗口的底部位置
-				windowHeight: 0, // 可使用窗口的高度
-				statusBarHeight: 0 // 状态栏高度
-			};
-		},
-		computed: {
-			// 是否使用fixed定位 (当height有值,则不使用)
-			isFixed() {
-				return !this.height && this.fixed;
-			},
-			// mescroll的高度
-			scrollHeight() {
-				if (this.isFixed) {
-					return 'auto';
-				} else if (this.height) {
-					return this.toPx(this.height) + 'px';
-				} else {
-					return '100%';
-				}
-			},
-			// 下拉布局往下偏移的距离 (px)
-			numTop() {
-				// #ifdef H5
-				return this.toPx(this.top) + (this.topbar ? this.statusBarHeight : 0);
-				// #endif
-
-				// #ifdef MP
-				return this.toPx(this.top) + (this.topbar ? 44 + this.statusBarHeight : 0);
-				// #endif
-			},
-			fixedTop() {
-				return this.isFixed ? this.numTop + this.windowTop + 'px' : 0;
-			},
-			padTop() {
-				return !this.isFixed ? this.numTop + 'px' : 0;
-			},
-			// 上拉布局往上偏移 (px)
-			numBottom() {
-				return this.toPx(this.bottom);
-			},
-			fixedBottom() {
-				return this.isFixed ? this.numBottom + this.windowBottom + 'px' : 0;
-			},
-			fixedBottomConstant() {
-				return this.safearea ? 'calc(' + this.fixedBottom + ' + constant(safe-area-inset-bottom))' : this
-					.fixedBottom;
-			},
-			fixedBottomEnv() {
-				return this.safearea ? 'calc(' + this.fixedBottom + ' + env(safe-area-inset-bottom))' : this.fixedBottom;
-			},
-			padBottom() {
-				return !this.isFixed ? this.numBottom + 'px' : 0;
-			},
-			padBottomConstant() {
-				return this.safearea ? 'calc(' + this.padBottom + ' + constant(safe-area-inset-bottom))' : this.padBottom;
-			},
-			padBottomEnv() {
-				return this.safearea ? 'calc(' + this.padBottom + ' + env(safe-area-inset-bottom))' : this.padBottom;
-			},
-			// 是否为重置下拉的状态
-			isDownReset() {
-				return this.downLoadType === 3 || this.downLoadType === 4;
-			},
-			// 过渡
-			transition() {
-				return this.isDownReset ? 'transform 300ms' : '';
-			},
-			translateY() {
-				return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' :
-					''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
-			},
-			// 是否在加载中
-			isDownLoading() {
-				return this.downLoadType === 3;
-			},
-			// 旋转的角度
-			downRotate() {
-				return 'rotate(' + 360 * this.downRate + 'deg)';
-			},
-			// 文本提示
-			downText() {
-				switch (this.downLoadType) {
-					case 1:
-						return this.mescroll.optDown.textInOffset;
-					case 2:
-						return this.mescroll.optDown.textOutOffset;
-					case 3:
-						return this.mescroll.optDown.textLoading;
-					case 4:
-						return this.mescroll.optDown.textLoading;
-					default:
-						return this.mescroll.optDown.textInOffset;
-				}
-			}
-		},
-		methods: {
-			//number,rpx,upx,px,% --> px的数值
-			toPx(num) {
-				if (typeof num === 'string') {
-					if (num.indexOf('px') !== -1) {
-						if (num.indexOf('rpx') !== -1) {
-							// "10rpx"
-							num = num.replace('rpx', '');
-						} else if (num.indexOf('upx') !== -1) {
-							// "10upx"
-							num = num.replace('upx', '');
-						} else {
-							// "10px"
-							return Number(num.replace('px', ''));
-						}
-					} else if (num.indexOf('%') !== -1) {
-						// 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
-						let rate = Number(num.replace('%', '')) / 100;
-						return this.windowHeight * rate;
-					}
-				}
-				return num ? uni.upx2px(Number(num)) : 0;
-			},
-			//注册列表滚动事件,用于下拉刷新和上拉加载
-			scroll(e) {
-				this.mescroll.scroll(e.detail, () => {
-					this.$emit('scroll', this
-						.mescroll); // 此时可直接通过 this.mescroll.scrollTop获取滚动条位置; this.mescroll.isScrollUp获取是否向上滑动
-				});
-			},
-			//注册列表touchstart事件,用于下拉刷新
-			touchstartEvent(e) {
-				this.mescroll.touchstartEvent(e);
-			},
-			//注册列表touchmove事件,用于下拉刷新
-			touchmoveEvent(e) {
-				this.mescroll.touchmoveEvent(e);
-			},
-			//注册列表touchend事件,用于下拉刷新
-			touchendEvent(e) {
-				this.mescroll.touchendEvent(e);
-			},
-			// 点击空布局的按钮回调
-			emptyClick() {
-				this.$emit('emptyclick', this.mescroll);
-			},
-			// 点击回到顶部的按钮回调
-			toTopClick() {
-				this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
-				this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
-			},
-			// 更新滚动区域的高度 (使内容不满屏和到底,都可继续翻页)
-			setClientHeight() {
-				if (this.mescroll.getClientHeight(true) === 0 && !this.isExec) {
-					this.isExec = true; // 避免多次获取
-					this.$nextTick(() => {
-						// 确保dom已渲染
-						try {
-							let view = uni
-								.createSelectorQuery()
-								.in(this)
-								.select('#' + this.viewId);
-							view.boundingClientRect(data => {
-								this.isExec = false;
-								if (data) {
-									this.mescroll.setClientHeight(data.height);
-								} else if (this.clientNum != 3) {
-									// 极少部分情况,可能dom还未渲染完毕,递归获取,最多重试3次
-									this.clientNum = this.clientNum == null ? 1 : this.clientNum + 1;
-									setTimeout(() => {
-										this.setClientHeight();
-									}, this.clientNum * 100);
-								}
-							}).exec();
-						} catch (e) {}
-					});
-				}
-			}
-		},
-		// 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
-		created() {
-			let vm = this;
-
-			let diyOption = {
-				// 下拉刷新的配置
-				down: {
-					inOffset(mescroll) {
-						vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
-					},
-					outOffset(mescroll) {
-						vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
-					},
-					onMoving(mescroll, rate, downHight) {
-						// 下拉过程中的回调,滑动过程一直在执行;
-						vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
-						vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
-					},
-					showLoading(mescroll, downHight) {
-						vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
-						vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
-					},
-					endDownScroll(mescroll) {
-						vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
-						vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
-					},
-					// 派发下拉刷新的回调
-					callback: function(mescroll) {
-						vm.$emit('down', mescroll);
-					}
-				},
-				// 上拉加载的配置
-				up: {
-					// 显示加载中的回调
-					showLoading() {
-						vm.upLoadType = 1;
-					},
-					// 显示无更多数据的回调
-					showNoMore() {
-						vm.upLoadType = 2;
-					},
-					// 隐藏上拉加载的回调
-					hideUpScroll() {
-						vm.upLoadType = 0;
-					},
-					// 空布局
-					empty: {
-						onShow(isShow) {
-							// 显示隐藏的回调
-							vm.isShowEmpty = isShow;
-						}
-					},
-					// 回到顶部
-					toTop: {
-						onShow(isShow) {
-							// 显示隐藏的回调
-							vm.isShowToTop = isShow;
-						}
-					},
-					// 派发上拉加载的回调
-					callback: function(mescroll) {
-						vm.$emit('up', mescroll);
-						// 更新容器的高度 (多mescroll的情况)
-						vm.setClientHeight();
-					}
-				}
-			};
-
-			MeScroll.extend(diyOption, GlobalOption); // 混入全局的配置
-			let myOption = JSON.parse(
-				JSON.stringify({
-					down: vm.down,
-					up: vm.up
-				})
-			); // 深拷贝,避免对props的影响
-			MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
-
-			// 初始化MeScroll对象
-			vm.mescroll = new MeScroll(myOption);
-			vm.mescroll.viewId = vm.viewId; // 附带id
-			// init回调mescroll对象
-			vm.$emit('init', vm.mescroll);
-
-			// 设置高度
-			const sys = uni.getSystemInfoSync();
-			if (sys.windowTop) vm.windowTop = sys.windowTop;
-			if (sys.windowBottom) vm.windowBottom = sys.windowBottom;
-			if (sys.windowHeight) vm.windowHeight = sys.windowHeight;
-			if (sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
-			// 使down的bottomOffset生效
-			vm.mescroll.setBodyHeight(sys.windowHeight);
-
-			// 因为使用的是scrollview,这里需自定义scrollTo
-			vm.mescroll.resetScrollTo((y, t) => {
-				let curY = vm.mescroll.getScrollTop();
-				vm.scrollAnim = t !== 0; // t为0,则不使用动画过渡
-				if (t === 0 || t === 300) {
-					// 当t使用默认配置的300时,则使用系统自带的动画过渡
-					vm.scrollTop = curY;
-					vm.$nextTick(function() {
-						vm.scrollTop = y;
-					});
-				} else {
-					vm.mescroll.getStep(
-						curY,
-						y,
-						step => {
-							// 此写法可支持配置t
-							vm.scrollTop = step;
-						},
-						t
-					);
-				}
-			});
-
-			// 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
-			if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {} else {
-				vm.mescroll.optUp.toTop.safearea = vm.safearea;
-			}
-		},
-		mounted() {
-			// 设置容器的高度
-			this.setClientHeight();
-		}
-	};
-</script>
-
-<style>
-	@import './mescroll-uni.css';
-	@import './components/mescroll-down.css';
-	@import './components/mescroll-up.css';
+<template>
+	<view class="mescroll-uni-warp">
+		<scroll-view :id="viewId" class="mescroll-uni" :class="{ 'mescroll-uni-fixed': isFixed }" :style="{
+				height: scrollHeight,
+				'padding-top': padTop,
+				'padding-bottom': padBottom,
+				'padding-bottom': padBottomConstant,
+				'padding-bottom': padBottomEnv,
+				top: fixedTop,
+				bottom: fixedBottom,
+				bottom: fixedBottomConstant,
+				bottom: fixedBottomEnv,
+				background: background,
+				'padding-left': paddingBoth,
+				'padding-right': paddingBoth
+			}" :scroll-top="scrollTop" :scroll-with-animation="scrollAnim" @scroll="scroll" @touchstart="touchstartEvent"
+			@touchmove="touchmoveEvent" @touchend="touchendEvent" @touchcancel="touchendEvent" :scroll-y="isDownReset"
+			:enable-back-to-top="true">
+			<view class="mescroll-uni-content" :style="{ transform: translateY, transition: transition }">
+				<!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
+				<!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
+				<view v-if="mescroll.optDown.use" class="mescroll-downwarp">
+					<view class="downwarp-content">
+						<!-- <view class="downwarp-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'transform': downRotate}"></view> -->
+						<view class="downwarp-tip">{{ downText }}</view>
+					</view>
+				</view>
+
+				<!-- 列表内容 -->
+				<slot></slot>
+
+				<!-- 空布局 -->
+				<!-- <mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty> -->
+
+				<!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
+				<!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
+				<view v-if="mescroll.optUp.use && !isDownLoading" class="mescroll-upwarp">
+					<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
+					<view v-show="upLoadType === 1">
+						<!-- <view class="upwarp-progress mescroll-rotate"></view>
+						<view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view> -->
+						<ns-loading></ns-loading>
+					</view>
+					<!-- 无数据 -->
+					<view v-if="upLoadType === 2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
+				</view>
+			</view>
+		</scroll-view>
+
+		<!-- 回到顶部按钮 (fixed元素,需写在scroll-view外面,防止滚动的时候抖动)-->
+		<mescroll-top v-if="showTop" v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>
+	</view>
+</template>
+
+<script>
+	// 引入mescroll-uni.js,处理核心逻辑
+	import MeScroll from './mescroll-uni.js';
+	// 引入全局配置
+	import GlobalOption from './mescroll-uni-option.js';
+	// 引入空布局组件
+	import MescrollEmpty from './components/mescroll-empty.vue';
+	// 引入回到顶部组件
+	import MescrollTop from './components/mescroll-top.vue';
+
+	import nsLoading from '@/components/ns-loading/ns-loading.vue';
+
+	export default {
+		name: 'mescroll-uni',
+		components: {
+			MescrollEmpty,
+			MescrollTop
+		},
+		props: {
+			down: Object, // 下拉刷新的参数配置
+			up: Object, // 上拉加载的参数配置
+			top: [String, Number], // 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
+			topbar: Boolean, // top的偏移量是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可自动加上状态栏高度的偏移量)
+			bottom: [String, Number], // 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
+			safearea: Boolean, // bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
+			fixed: {
+				// 是否通过fixed固定mescroll的高度, 默认true
+				type: Boolean,
+				default () {
+					return true;
+				}
+			},
+			height: [String,
+				Number
+			], // 指定mescroll的高度, 此项有值,则不使用fixed. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
+			showTop: {
+				//是否需要展示返回顶部按钮
+				type: Boolean,
+				default () {
+					return true;
+				}
+			},
+			background: String,
+			paddingBoth: {
+				type: [String, Number],
+				default () {
+					return 0;
+				}
+			}
+		},
+		data() {
+			return {
+				mescroll: {
+					optDown: {},
+					optUp: {}
+				}, // mescroll实例
+				viewId: 'id_' +
+					Math.random()
+					.toString(36)
+					.substr(2), // 随机生成mescroll的id(不能数字开头,否则找不到元素)
+				downHight: 0, //下拉刷新: 容器高度
+				downRate: 0, // 下拉比率(inOffset: rate<1; outOffset: rate>=1)
+				downLoadType: 4, // 下拉刷新状态 （inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
+				upLoadType: 0, // 上拉加载状态：0（loading前），1（loading中），2（没有更多了）
+				isShowEmpty: false, // 是否显示空布局
+				isShowToTop: false, // 是否显示回到顶部按钮
+				scrollTop: 0, // 滚动条的位置
+				scrollAnim: false, // 是否开启滚动动画
+				windowTop: 0, // 可使用窗口的顶部位置
+				windowBottom: 0, // 可使用窗口的底部位置
+				windowHeight: 0, // 可使用窗口的高度
+				statusBarHeight: 0 // 状态栏高度
+			};
+		},
+		computed: {
+			// 是否使用fixed定位 (当height有值,则不使用)
+			isFixed() {
+				return !this.height && this.fixed;
+			},
+			// mescroll的高度
+			scrollHeight() {
+				if (this.isFixed) {
+					return 'auto';
+				} else if (this.height) {
+					return this.toPx(this.height) + 'px';
+				} else {
+					return '100%';
+				}
+			},
+			// 下拉布局往下偏移的距离 (px)
+			numTop() {
+				// #ifdef H5
+				return this.toPx(this.top) + (this.topbar ? this.statusBarHeight : 0);
+				// #endif
+
+				// #ifdef MP
+				return this.toPx(this.top) + (this.topbar ? 44 + this.statusBarHeight : 0);
+				// #endif
+			},
+			fixedTop() {
+				return this.isFixed ? this.numTop + this.windowTop + 'px' : 0;
+			},
+			padTop() {
+				return !this.isFixed ? this.numTop + 'px' : 0;
+			},
+			// 上拉布局往上偏移 (px)
+			numBottom() {
+				return this.toPx(this.bottom);
+			},
+			fixedBottom() {
+				return this.isFixed ? this.numBottom + this.windowBottom + 'px' : 0;
+			},
+			fixedBottomConstant() {
+				return this.safearea ? 'calc(' + this.fixedBottom + ' + constant(safe-area-inset-bottom))' : this
+					.fixedBottom;
+			},
+			fixedBottomEnv() {
+				return this.safearea ? 'calc(' + this.fixedBottom + ' + env(safe-area-inset-bottom))' : this.fixedBottom;
+			},
+			padBottom() {
+				return !this.isFixed ? this.numBottom + 'px' : 0;
+			},
+			padBottomConstant() {
+				return this.safearea ? 'calc(' + this.padBottom + ' + constant(safe-area-inset-bottom))' : this.padBottom;
+			},
+			padBottomEnv() {
+				return this.safearea ? 'calc(' + this.padBottom + ' + env(safe-area-inset-bottom))' : this.padBottom;
+			},
+			// 是否为重置下拉的状态
+			isDownReset() {
+				return this.downLoadType === 3 || this.downLoadType === 4;
+			},
+			// 过渡
+			transition() {
+				return this.isDownReset ? 'transform 300ms' : '';
+			},
+			translateY() {
+				return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' :
+					''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
+			},
+			// 是否在加载中
+			isDownLoading() {
+				return this.downLoadType === 3;
+			},
+			// 旋转的角度
+			downRotate() {
+				return 'rotate(' + 360 * this.downRate + 'deg)';
+			},
+			// 文本提示
+			downText() {
+				switch (this.downLoadType) {
+					case 1:
+						return this.mescroll.optDown.textInOffset;
+					case 2:
+						return this.mescroll.optDown.textOutOffset;
+					case 3:
+						return this.mescroll.optDown.textLoading;
+					case 4:
+						return this.mescroll.optDown.textLoading;
+					default:
+						return this.mescroll.optDown.textInOffset;
+				}
+			}
+		},
+		methods: {
+			//number,rpx,upx,px,% --> px的数值
+			toPx(num) {
+				if (typeof num === 'string') {
+					if (num.indexOf('px') !== -1) {
+						if (num.indexOf('rpx') !== -1) {
+							// "10rpx"
+							num = num.replace('rpx', '');
+						} else if (num.indexOf('upx') !== -1) {
+							// "10upx"
+							num = num.replace('upx', '');
+						} else {
+							// "10px"
+							return Number(num.replace('px', ''));
+						}
+					} else if (num.indexOf('%') !== -1) {
+						// 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
+						let rate = Number(num.replace('%', '')) / 100;
+						return this.windowHeight * rate;
+					}
+				}
+				return num ? uni.upx2px(Number(num)) : 0;
+			},
+			//注册列表滚动事件,用于下拉刷新和上拉加载
+			scroll(e) {
+				this.mescroll.scroll(e.detail, () => {
+					this.$emit('scroll', this
+						.mescroll); // 此时可直接通过 this.mescroll.scrollTop获取滚动条位置; this.mescroll.isScrollUp获取是否向上滑动
+				});
+			},
+			//注册列表touchstart事件,用于下拉刷新
+			touchstartEvent(e) {
+				this.mescroll.touchstartEvent(e);
+			},
+			//注册列表touchmove事件,用于下拉刷新
+			touchmoveEvent(e) {
+				this.mescroll.touchmoveEvent(e);
+			},
+			//注册列表touchend事件,用于下拉刷新
+			touchendEvent(e) {
+				this.mescroll.touchendEvent(e);
+			},
+			// 点击空布局的按钮回调
+			emptyClick() {
+				this.$emit('emptyclick', this.mescroll);
+			},
+			// 点击回到顶部的按钮回调
+			toTopClick() {
+				this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
+				this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
+			},
+			// 更新滚动区域的高度 (使内容不满屏和到底,都可继续翻页)
+			setClientHeight() {
+				if (this.mescroll.getClientHeight(true) === 0 && !this.isExec) {
+					this.isExec = true; // 避免多次获取
+					this.$nextTick(() => {
+						// 确保dom已渲染
+						try {
+							let view = uni
+								.createSelectorQuery()
+								.in(this)
+								.select('#' + this.viewId);
+							view.boundingClientRect(data => {
+								this.isExec = false;
+								if (data) {
+									this.mescroll.setClientHeight(data.height);
+								} else if (this.clientNum != 3) {
+									// 极少部分情况,可能dom还未渲染完毕,递归获取,最多重试3次
+									this.clientNum = this.clientNum == null ? 1 : this.clientNum + 1;
+									setTimeout(() => {
+										this.setClientHeight();
+									}, this.clientNum * 100);
+								}
+							}).exec();
+						} catch (e) {}
+					});
+				}
+			}
+		},
+		// 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
+		created() {
+			let vm = this;
+
+			let diyOption = {
+				// 下拉刷新的配置
+				down: {
+					inOffset(mescroll) {
+						vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
+					},
+					outOffset(mescroll) {
+						vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
+					},
+					onMoving(mescroll, rate, downHight) {
+						// 下拉过程中的回调,滑动过程一直在执行;
+						vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
+						vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
+					},
+					showLoading(mescroll, downHight) {
+						vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
+						vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
+					},
+					endDownScroll(mescroll) {
+						vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
+						vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
+					},
+					// 派发下拉刷新的回调
+					callback: function(mescroll) {
+						vm.$emit('down', mescroll);
+					}
+				},
+				// 上拉加载的配置
+				up: {
+					// 显示加载中的回调
+					showLoading() {
+						vm.upLoadType = 1;
+					},
+					// 显示无更多数据的回调
+					showNoMore() {
+						vm.upLoadType = 2;
+					},
+					// 隐藏上拉加载的回调
+					hideUpScroll() {
+						vm.upLoadType = 0;
+					},
+					// 空布局
+					empty: {
+						onShow(isShow) {
+							// 显示隐藏的回调
+							vm.isShowEmpty = isShow;
+						}
+					},
+					// 回到顶部
+					toTop: {
+						onShow(isShow) {
+							// 显示隐藏的回调
+							vm.isShowToTop = isShow;
+						}
+					},
+					// 派发上拉加载的回调
+					callback: function(mescroll) {
+						vm.$emit('up', mescroll);
+						// 更新容器的高度 (多mescroll的情况)
+						vm.setClientHeight();
+					}
+				}
+			};
+
+			MeScroll.extend(diyOption, GlobalOption); // 混入全局的配置
+			let myOption = JSON.parse(
+				JSON.stringify({
+					down: vm.down,
+					up: vm.up
+				})
+			); // 深拷贝,避免对props的影响
+			MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
+
+			// 初始化MeScroll对象
+			vm.mescroll = new MeScroll(myOption);
+			vm.mescroll.viewId = vm.viewId; // 附带id
+			// init回调mescroll对象
+			vm.$emit('init', vm.mescroll);
+
+			// 设置高度
+			const sys = uni.getSystemInfoSync();
+			if (sys.windowTop) vm.windowTop = sys.windowTop;
+			if (sys.windowBottom) vm.windowBottom = sys.windowBottom;
+			if (sys.windowHeight) vm.windowHeight = sys.windowHeight;
+			if (sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
+			// 使down的bottomOffset生效
+			vm.mescroll.setBodyHeight(sys.windowHeight);
+
+			// 因为使用的是scrollview,这里需自定义scrollTo
+			vm.mescroll.resetScrollTo((y, t) => {
+				let curY = vm.mescroll.getScrollTop();
+				vm.scrollAnim = t !== 0; // t为0,则不使用动画过渡
+				if (t === 0 || t === 300) {
+					// 当t使用默认配置的300时,则使用系统自带的动画过渡
+					vm.scrollTop = curY;
+					vm.$nextTick(function() {
+						vm.scrollTop = y;
+					});
+				} else {
+					vm.mescroll.getStep(
+						curY,
+						y,
+						step => {
+							// 此写法可支持配置t
+							vm.scrollTop = step;
+						},
+						t
+					);
+				}
+			});
+
+			// 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
+			if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {} else {
+				vm.mescroll.optUp.toTop.safearea = vm.safearea;
+			}
+		},
+		mounted() {
+			// 设置容器的高度
+			this.setClientHeight();
+		}
+	};
+</script>
+
+<style lang="scss">
+	@import './mescroll-uni.css';
+	@import './components/mescroll-down.css';
+	@import './components/mescroll-up.css';
 </style>
\ No newline at end of file
diff --git a/components/ns-birthday-gift/ns-birthday-gift.vue b/components/ns-birthday-gift/ns-birthday-gift.vue
index e34abb7..3b595cf 100644
--- a/components/ns-birthday-gift/ns-birthday-gift.vue
+++ b/components/ns-birthday-gift/ns-birthday-gift.vue
@@ -164,7 +164,7 @@
 		}
 	};
 </script>
-<style scoped>
+<style lang="scss" scoped>
 	.register-box /deep/ .uni-scroll-view {
 		background: unset !important;
 	}
diff --git a/components/ns-goods-action/ns-goods-action.vue b/components/ns-goods-action/ns-goods-action.vue
index e6379c7..51e3191 100644
--- a/components/ns-goods-action/ns-goods-action.vue
+++ b/components/ns-goods-action/ns-goods-action.vue
@@ -1,33 +1,33 @@
-<template>
-	<view class="ns-goods-action bottom-safe-area" :class="{ 'bottom-safe-area': safeArea }"><slot></slot></view>
-</template>
-
-<script>
-export default {
-	name: 'ns-goods-action',
-	props: {
-		safeArea: {
-			type: Boolean,
-			default: false
-		}
-	}
-};
-</script>
-
-<style>
-.ns-goods-action {
-	position: fixed;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	display: flex;
-	align-items: center;
-	background-color: #fff;
-	z-index: 9;
-}
-.ns-goods-action.bottom-safe-area {
-	padding-bottom: 0;
-	padding-bottom: constant(safe-area-inset-bottom);
-	padding-bottom: env(safe-area-inset-bottom);
-}
-</style>
+<template>
+	<view class="ns-goods-action bottom-safe-area" :class="{ 'bottom-safe-area': safeArea }"><slot></slot></view>
+</template>
+
+<script>
+export default {
+	name: 'ns-goods-action',
+	props: {
+		safeArea: {
+			type: Boolean,
+			default: false
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.ns-goods-action {
+	position: fixed;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	display: flex;
+	align-items: center;
+	background-color: #fff;
+	z-index: 9;
+}
+.ns-goods-action.bottom-safe-area {
+	padding-bottom: 0;
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+}
+</style>
diff --git a/components/ns-login/ns-login.vue b/components/ns-login/ns-login.vue
index 3d431b6..7fa49b2 100644
--- a/components/ns-login/ns-login.vue
+++ b/components/ns-login/ns-login.vue
@@ -768,7 +768,7 @@
 		}
 	}
 </style>
-<style scoped>
+<style lang="scss" scoped>
 	/deep/ .reward-popup .uni-popup__wrapper-box {
 		background: none !important;
 		max-width: unset !important;
diff --git a/components/ns-new-gift/ns-new-gift.vue b/components/ns-new-gift/ns-new-gift.vue
index a6553c9..fd740e9 100644
--- a/components/ns-new-gift/ns-new-gift.vue
+++ b/components/ns-new-gift/ns-new-gift.vue
@@ -171,7 +171,7 @@
 	};
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 	/deep/ .newgift-content uni-image {
 		width: 113rpx !important;
 		height: 24rpx !important;
diff --git a/components/ns-switch/ns-switch.vue b/components/ns-switch/ns-switch.vue
index 8ce894b..ca330f4 100644
--- a/components/ns-switch/ns-switch.vue
+++ b/components/ns-switch/ns-switch.vue
@@ -1,69 +1,69 @@
-<template>
-	<view>
-		<view class="weui-switch" :class="{ 'weui-switch-on': checked, 'color-base-border': checked }" @click="change()">
-			<view class="bgview" :class="{ 'color-base-bg': checked }"></view>
-			<view class="spotview"></view>
-		</view>
-	</view>
-</template>
-<script>
-export default {
-	name: 'nsSwitch',
-	props: {
-		checked: {
-			type: Boolean,
-			default: false
-		}
-	},
-	methods: {
-		change() {
-			this.$emit('change');
-		}
-	}
-};
-</script>
-<style>
-.weui-switch {
-	display: block;
-	position: relative;
-	width: 94rpx;
-	height: 45rpx;
-	outline: 0;
-	border-radius: 30rpx;
-	border: 2rpx solid;
-	border-color: #dfdfdf;
-	transition: background-color 0.1s, border 0.1s;
-}
-
-.weui-switch .bgview {
-	content: ' ';
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 94rpx;
-	height: 45rpx;
-	border-radius: 30rpx;
-	transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
-}
-.weui-switch .spotview {
-	content: ' ';
-	position: absolute;
-	top: 2rpx;
-	left: 4rpx;
-	width: 40rpx;
-	height: 40rpx;
-	border-radius: 50%;
-	background-color: #ffffff;
-	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.4);
-	transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
-}
-.weui-switch-on {
-	border-color: #6f6f6f;
-}
-.weui-switch-on .bgview {
-	border-color: #1aad19;
-}
-.weui-switch-on .spotview {
-	transform: translateX(48rpx);
-}
-</style>
+<template>
+	<view>
+		<view class="weui-switch" :class="{ 'weui-switch-on': checked, 'color-base-border': checked }" @click="change()">
+			<view class="bgview" :class="{ 'color-base-bg': checked }"></view>
+			<view class="spotview"></view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	name: 'nsSwitch',
+	props: {
+		checked: {
+			type: Boolean,
+			default: false
+		}
+	},
+	methods: {
+		change() {
+			this.$emit('change');
+		}
+	}
+};
+</script>
+<style lang="scss">
+.weui-switch {
+	display: block;
+	position: relative;
+	width: 94rpx;
+	height: 45rpx;
+	outline: 0;
+	border-radius: 30rpx;
+	border: 2rpx solid;
+	border-color: #dfdfdf;
+	transition: background-color 0.1s, border 0.1s;
+}
+
+.weui-switch .bgview {
+	content: ' ';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 94rpx;
+	height: 45rpx;
+	border-radius: 30rpx;
+	transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+}
+.weui-switch .spotview {
+	content: ' ';
+	position: absolute;
+	top: 2rpx;
+	left: 4rpx;
+	width: 40rpx;
+	height: 40rpx;
+	border-radius: 50%;
+	background-color: #ffffff;
+	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.4);
+	transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+}
+.weui-switch-on {
+	border-color: #6f6f6f;
+}
+.weui-switch-on .bgview {
+	border-color: #1aad19;
+}
+.weui-switch-on .spotview {
+	transform: translateX(48rpx);
+}
+</style>
diff --git a/components/register-reward/register-reward.vue b/components/register-reward/register-reward.vue
index b567b1f..41fe8ea 100644
--- a/components/register-reward/register-reward.vue
+++ b/components/register-reward/register-reward.vue
@@ -150,7 +150,7 @@
 		}
 	};
 </script>
-<style scoped>
+<style lang="scss" scoped>
 	.register-box /deep/ .uni-scroll-view {
 		background: unset !important;
 	}
diff --git a/components/toTop/toTop.vue b/components/toTop/toTop.vue
index 0eabd20..58a9293 100644
--- a/components/toTop/toTop.vue
+++ b/components/toTop/toTop.vue
@@ -1,58 +1,58 @@
-<!-- 回到顶部的按钮 -->
-<template>
-	<image
-		class="mescroll-totop"
-		:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out']"
-		:src="$util.img('public/uniapp/common/mescroll-totop.png')"
-		mode="widthFix"
-		@click="toTopClick"
-	/>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			value: true
-		};
-	},
-	methods: {
-		toTopClick() {
-			this.$emit('toTop'); // 派发点击事件
-		}
-	}
-};
-</script>
-
-<style>
-/* 回到顶部的按钮 */
-.mescroll-totop {
-	z-index: 99;
-	position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
-	right: 46rpx !important;
-	bottom: 272rpx !important;
-	width: 72rpx;
-	height: 72rpx;
-	border-radius: 50%;
-	opacity: 0;
-	transition: opacity 0.5s; /* 过渡 */
-	margin-bottom: var(--window-bottom); /* css变量 */
-}
-
-/* 适配 iPhoneX */
-.mescroll-safe-bottom {
-	margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
-	margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
-}
-
-/* 显示 -- 淡入 */
-.mescroll-totop-in {
-	opacity: 1;
-}
-
-/* 隐藏 -- 淡出且不接收事件*/
-.mescroll-totop-out {
-	opacity: 0;
-	pointer-events: none;
-}
-</style>
+<!-- 回到顶部的按钮 -->
+<template>
+	<image
+		class="mescroll-totop"
+		:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out']"
+		:src="$util.img('public/uniapp/common/mescroll-totop.png')"
+		mode="widthFix"
+		@click="toTopClick"
+	/>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			value: true
+		};
+	},
+	methods: {
+		toTopClick() {
+			this.$emit('toTop'); // 派发点击事件
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+/* 回到顶部的按钮 */
+.mescroll-totop {
+	z-index: 99;
+	position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
+	right: 46rpx !important;
+	bottom: 272rpx !important;
+	width: 72rpx;
+	height: 72rpx;
+	border-radius: 50%;
+	opacity: 0;
+	transition: opacity 0.5s; /* 过渡 */
+	margin-bottom: var(--window-bottom); /* css变量 */
+}
+
+/* 适配 iPhoneX */
+.mescroll-safe-bottom {
+	margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
+	margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
+}
+
+/* 显示 -- 淡入 */
+.mescroll-totop-in {
+	opacity: 1;
+}
+
+/* 隐藏 -- 淡出且不接收事件*/
+.mescroll-totop-out {
+	opacity: 0;
+	pointer-events: none;
+}
+</style>
diff --git a/components/uni-badge/uni-badge.vue b/components/uni-badge/uni-badge.vue
index a59580e..26958d4 100644
--- a/components/uni-badge/uni-badge.vue
+++ b/components/uni-badge/uni-badge.vue
@@ -1,105 +1,105 @@
-<template>
-	<text
-		v-if="text"
-		:class="inverted ? 'uni-badge-' + type + ' uni-badge--' + size + ' uni-badge-inverted' : 'uni-badge-' + type + ' uni-badge--' + size"
-		class="uni-badge"
-		@click="onClick()"
-	>
-		{{ text }}
-	</text>
-</template>
-
-<script>
-export default {
-	name: 'UniBadge',
-	props: {
-		type: {
-			type: String,
-			default: 'default'
-		},
-		inverted: {
-			type: Boolean,
-			default: false
-		},
-		text: {
-			type: String,
-			default: ''
-		},
-		size: {
-			// small.normal
-			type: String,
-			default: 'normal'
-		}
-	},
-	methods: {
-		onClick() {
-			this.$emit('click');
-		}
-	}
-};
-</script>
-
-<style>
-.uni-badge {
-	font-family: 'Helvetica Neue', Helvetica, sans-serif;
-	box-sizing: border-box;
-	font-size: 24rpx;
-	line-height: 1;
-	display: inline-block;
-	padding: 6rpx 12rpx;
-	color: #333;
-	border-radius: 200rpx;
-	background-color: #e5e5e5;
-}
-
-.uni-badge.uni-badge-inverted {
-	padding: 0 10rpx 0 0;
-	color: #999;
-	background-color: transparent;
-}
-
-.uni-badge-primary {
-	color: #fff;
-	background-color: #007aff;
-}
-
-.uni-badge-primary.uni-badge-inverted {
-	color: #007aff;
-	background-color: transparent;
-}
-
-.uni-badge-success {
-	color: #fff;
-	background-color: #4cd964;
-}
-
-.uni-badge-success.uni-badge-inverted {
-	color: #4cd964;
-	background-color: transparent;
-}
-
-.uni-badge-warning {
-	color: #fff;
-	background-color: #f0ad4e;
-}
-
-.uni-badge-warning.uni-badge-inverted {
-	color: #f0ad4e;
-	background-color: transparent;
-}
-
-.uni-badge-error {
-	color: #fff;
-	background-color: #dd524d;
-}
-
-.uni-badge-error.uni-badge-inverted {
-	color: #dd524d;
-	background-color: transparent;
-}
-
-.uni-badge--small {
-	transform: scale(0.8);
-	transform-origin: center center;
-}
-</style>
+<template>
+	<text
+		v-if="text"
+		:class="inverted ? 'uni-badge-' + type + ' uni-badge--' + size + ' uni-badge-inverted' : 'uni-badge-' + type + ' uni-badge--' + size"
+		class="uni-badge"
+		@click="onClick()"
+	>
+		{{ text }}
+	</text>
+</template>
+
+<script>
+export default {
+	name: 'UniBadge',
+	props: {
+		type: {
+			type: String,
+			default: 'default'
+		},
+		inverted: {
+			type: Boolean,
+			default: false
+		},
+		text: {
+			type: String,
+			default: ''
+		},
+		size: {
+			// small.normal
+			type: String,
+			default: 'normal'
+		}
+	},
+	methods: {
+		onClick() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.uni-badge {
+	font-family: 'Helvetica Neue', Helvetica, sans-serif;
+	box-sizing: border-box;
+	font-size: 24rpx;
+	line-height: 1;
+	display: inline-block;
+	padding: 6rpx 12rpx;
+	color: #333;
+	border-radius: 200rpx;
+	background-color: #e5e5e5;
+}
+
+.uni-badge.uni-badge-inverted {
+	padding: 0 10rpx 0 0;
+	color: #999;
+	background-color: transparent;
+}
+
+.uni-badge-primary {
+	color: #fff;
+	background-color: #007aff;
+}
+
+.uni-badge-primary.uni-badge-inverted {
+	color: #007aff;
+	background-color: transparent;
+}
+
+.uni-badge-success {
+	color: #fff;
+	background-color: #4cd964;
+}
+
+.uni-badge-success.uni-badge-inverted {
+	color: #4cd964;
+	background-color: transparent;
+}
+
+.uni-badge-warning {
+	color: #fff;
+	background-color: #f0ad4e;
+}
+
+.uni-badge-warning.uni-badge-inverted {
+	color: #f0ad4e;
+	background-color: transparent;
+}
+
+.uni-badge-error {
+	color: #fff;
+	background-color: #dd524d;
+}
+
+.uni-badge-error.uni-badge-inverted {
+	color: #dd524d;
+	background-color: transparent;
+}
+
+.uni-badge--small {
+	transform: scale(0.8);
+	transform-origin: center center;
+}
+</style>
diff --git a/components/uni-drawer/uni-drawer.vue b/components/uni-drawer/uni-drawer.vue
index 65c3e62..42b586a 100644
--- a/components/uni-drawer/uni-drawer.vue
+++ b/components/uni-drawer/uni-drawer.vue
@@ -1,146 +1,146 @@
-<template>
-	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer, 'uni-drawer--right': rightMode }" class="uni-drawer" @touchmove.stop.prevent="moveHandle">
-		<view class="uni-drawer__mask" @tap="close" ></view>
-		<view class="uni-drawer__content" :class="{ 'safe-area': isIphoneX }"><slot /></view>
-	</view>
-</template>
-
-<script>
-export default {
-	name: 'UniDrawer',
-	props: {
-		/**
-		 * 显示状态
-		 */
-		visible: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * 显示模式（左、右），只在初始化生效
-		 */
-		mode: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * 蒙层显示状态
-		 */
-		mask: {
-			type: Boolean,
-			default: true
-		}
-	},
-	data() {
-		return {
-			visibleSync: false,
-			showDrawer: false,
-			rightMode: false,
-			closeTimer: null,
-			watchTimer: null,
-			isIphoneX: false
-		};
-	},
-	watch: {
-		visible(val) {
-			clearTimeout(this.watchTimer);
-			setTimeout(() => {
-				this.showDrawer = val;
-			}, 100);
-			if (this.visibleSync) {
-				clearTimeout(this.closeTimer);
-			}
-			if (val) {
-				this.visibleSync = val;
-			} else {
-				this.watchTimer = setTimeout(() => {
-					this.visibleSync = val;
-				}, 300);
-			}
-		}
-	},
-	created() {
-		this.isIphoneX = this.$util.uniappIsIPhoneX();
-		this.visibleSync = this.visible;
-		setTimeout(() => {
-			this.showDrawer = this.visible;
-		}, 100);
-		this.rightMode = this.mode === 'right';
-	},
-	methods: {
-		close() {
-			this.showDrawer = false;
-			this.closeTimer = setTimeout(() => {
-				this.visibleSync = false;
-				this.$emit('close');
-			}, 200);
-		},
-		moveHandle() {}
-	}
-};
-</script>
-
-<style>
-
-.uni-drawer {
-	display: block;
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	overflow: hidden;
-	visibility: hidden;
-	z-index: 999;
-	height: 100%;
-}
-
-.uni-drawer.uni-drawer--right .uni-drawer__content {
-	left: auto;
-	right: 0;
-	transform: translatex(100%);
-}
-
-.uni-drawer.uni-drawer--visible {
-	visibility: visible;
-}
-
-.uni-drawer.uni-drawer--visible .uni-drawer__content {
-	transform: translatex(0);
-}
-
-.uni-drawer.uni-drawer--visible .uni-drawer__mask {
-	display: block;
-	opacity: 1;
-}
-
-.uni-drawer__mask {
-	display: block;
-	opacity: 0;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: rgba(0, 0, 0, 0.4);
-	transition: opacity 0.3s;
-}
-
-.uni-drawer__content {
-	display: block;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 61.8%;
-	height: 100%;
-	background: #fff;
-	transition: all 0.3s ease-out;
-	transform: translatex(-100%);
-}
-
-.safe-area {
-	padding-bottom: 68rpx;
-	padding-top: 44rpx;
-	box-sizing: border-box;
-}
-</style>
+<template>
+	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer, 'uni-drawer--right': rightMode }" class="uni-drawer" @touchmove.stop.prevent="moveHandle">
+		<view class="uni-drawer__mask" @tap="close" ></view>
+		<view class="uni-drawer__content" :class="{ 'safe-area': isIphoneX }"><slot /></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'UniDrawer',
+	props: {
+		/**
+		 * 显示状态
+		 */
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * 显示模式（左、右），只在初始化生效
+		 */
+		mode: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * 蒙层显示状态
+		 */
+		mask: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			visibleSync: false,
+			showDrawer: false,
+			rightMode: false,
+			closeTimer: null,
+			watchTimer: null,
+			isIphoneX: false
+		};
+	},
+	watch: {
+		visible(val) {
+			clearTimeout(this.watchTimer);
+			setTimeout(() => {
+				this.showDrawer = val;
+			}, 100);
+			if (this.visibleSync) {
+				clearTimeout(this.closeTimer);
+			}
+			if (val) {
+				this.visibleSync = val;
+			} else {
+				this.watchTimer = setTimeout(() => {
+					this.visibleSync = val;
+				}, 300);
+			}
+		}
+	},
+	created() {
+		this.isIphoneX = this.$util.uniappIsIPhoneX();
+		this.visibleSync = this.visible;
+		setTimeout(() => {
+			this.showDrawer = this.visible;
+		}, 100);
+		this.rightMode = this.mode === 'right';
+	},
+	methods: {
+		close() {
+			this.showDrawer = false;
+			this.closeTimer = setTimeout(() => {
+				this.visibleSync = false;
+				this.$emit('close');
+			}, 200);
+		},
+		moveHandle() {}
+	}
+};
+</script>
+
+<style lang="scss">
+
+.uni-drawer {
+	display: block;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+	visibility: hidden;
+	z-index: 999;
+	height: 100%;
+}
+
+.uni-drawer.uni-drawer--right .uni-drawer__content {
+	left: auto;
+	right: 0;
+	transform: translatex(100%);
+}
+
+.uni-drawer.uni-drawer--visible {
+	visibility: visible;
+}
+
+.uni-drawer.uni-drawer--visible .uni-drawer__content {
+	transform: translatex(0);
+}
+
+.uni-drawer.uni-drawer--visible .uni-drawer__mask {
+	display: block;
+	opacity: 1;
+}
+
+.uni-drawer__mask {
+	display: block;
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.4);
+	transition: opacity 0.3s;
+}
+
+.uni-drawer__content {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 61.8%;
+	height: 100%;
+	background: #fff;
+	transition: all 0.3s ease-out;
+	transform: translatex(-100%);
+}
+
+.safe-area {
+	padding-bottom: 68rpx;
+	padding-top: 44rpx;
+	box-sizing: border-box;
+}
+</style>
diff --git a/components/uni-grid-item/uni-grid-item.vue b/components/uni-grid-item/uni-grid-item.vue
index 44c79dc..57a5371 100644
--- a/components/uni-grid-item/uni-grid-item.vue
+++ b/components/uni-grid-item/uni-grid-item.vue
@@ -1,223 +1,223 @@
-<template>
-	<view v-if="width" :style="{ width: width }" class="uni-grid-item">
-		<view
-			:class="{ border: showBorder, 'uni-grid-item__box-square': square, 'border-top': showBorder && index < column, 'uni-highlight': highlight }"
-			:style="{ 'border-color': borderColor }"
-			class="uni-grid-item__box"
-			@click="_onClick"
-		>
-			<view v-if="marker === 'dot'" :style="{ left: top * 2 + 'rpx', top: left * 2 + 'rpx' }" class="uni-grid-item__box-dot" />
-			<view v-if="marker === 'badge'" :style="{ left: top * 2 + 'rpx', top: left * 2 + 'rpx' }" class="uni-grid-item__box-badge">
-				<uni-badge :text="text" :type="type" :size="size" :inverted="inverted" />
-			</view>
-			<view v-if="marker === 'image'" :style="{ left: top * 2 + 'rpx', top: left * 2 + 'rpx' }" class="uni-grid-item__box-image">
-				<image :style="{ width: imgWidth * 2 + 'rpx' }" :src="src" class="box-image" mode="widthFix" />
-			</view>
-			<view class="uni-grid-item__box-item"><slot /></view>
-		</view>
-	</view>
-</template>
-
-<script>
-import uniBadge from '@/components/uni-badge/uni-badge.vue';
-export default {
-	name: 'UniGridItem',
-	components: {
-		uniBadge
-	},
-	props: {
-		// 类型：可选值，dot：圆点；badge：角标；image：图片
-		marker: {
-			type: String,
-			default: ''
-		},
-		// 水平方向
-		hor: {
-			type: Number,
-			default: 0
-		},
-		// 垂直方向
-		ver: {
-			type: Number,
-			default: 0
-		},
-		// badge 下颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)
-		type: {
-			type: String,
-			default: ''
-		},
-		// badge 下显示内容，汉字最多为1个
-		text: {
-			type: String,
-			default: ''
-		},
-		// badge 下 Badge 大小
-		size: {
-			type: String,
-			default: 'normal'
-		},
-		// badge 下 是否无需背景颜色
-		inverted: {
-			type: Boolean,
-			default: false
-		},
-		// image 下图片路径
-		src: {
-			type: String,
-			default: ''
-		},
-		// image 下图片宽度 ，最大 为 100 。 默认为 30
-		imgWidth: {
-			type: Number,
-			default: 30
-		}
-	},
-	inject: ['grid'],
-	data() {
-		return {
-			column: 0,
-			showBorder: true,
-			square: true,
-			highlight: true,
-			left: 0,
-			top: 0,
-			index: 0,
-			openNum: 2,
-			width: 0,
-			borderColor: '#e5e5e5'
-		};
-	},
-	created() {
-		this.column = this.grid.column;
-		this.showBorder = this.grid.showBorder;
-		this.square = this.grid.square;
-		this.highlight = this.grid.highlight;
-		this.top = this.hor === 0 ? this.grid.hor : this.hor;
-		this.left = this.ver === 0 ? this.grid.ver : this.ver;
-		this.borderColor = this.grid.borderColor;
-		this.index = this.grid.index++;
-	},
-	// #ifdef H5
-	mounted() {
-		this.grid._getSize(width => {
-			this.width = width;
-		});
-	},
-	// #endif
-	// #ifndef H5
-	onReady() {
-		this.grid._getSize(width => {
-			this.width = width;
-		});
-	},
-	// #endif
-	methods: {
-		_onClick() {
-			this.grid.change({
-				detail: {
-					index: this.index
-				}
-			});
-		}
-	}
-};
-</script>
-
-<style>
-.uni-grid-item {
-	box-sizing: border-box;
-}
-
-.uni-grid-item__box {
-	position: relative;
-	width: 100%;
-}
-
-.uni-grid-item__box-item {
-	display: flex;
-	justify-content: center;
-	flex-direction: column;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-	font-size: 32rpx;
-	color: #666;
-	padding: 20rpx 0;
-	box-sizing: border-box;
-}
-
-.uni-grid-item__box-item .image {
-	width: 50rpx;
-	height: 50rpx;
-}
-
-.uni-grid-item__box-item .text {
-	font-size: 26rpx;
-	margin-top: 10rpx;
-}
-
-.uni-grid-item__box.uni-grid-item__box-square {
-	height: 0;
-	padding-top: 100%;
-}
-
-.uni-grid-item__box.uni-grid-item__box-square .uni-grid-item__box-item {
-	position: absolute;
-	top: 0;
-}
-
-.uni-grid-item__box.border {
-	position: relative;
-	box-sizing: border-box;
-	border-bottom: 2rpx #e5e5e5 solid;
-	border-right: 2rpx #e5e5e5 solid;
-}
-
-.uni-grid-item__box.border-top {
-	border-top: 2rpx #e5e5e5 solid;
-}
-
-.uni-grid-item__box.uni-highlight:active {
-	background-color: #eee;
-}
-
-.uni-grid-item__box-badge,
-.uni-grid-item__box-dot,
-.uni-grid-item__box-image {
-	position: absolute;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	margin: auto;
-	z-index: 10;
-}
-
-.uni-grid-item__box-dot {
-	width: 20rpx;
-	height: 20rpx;
-	background: #ff5a5f;
-	border-radius: 50%;
-}
-
-.uni-grid-item__box-badge {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 0;
-	height: 0;
-}
-
-.uni-grid-item__box-image {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100rpx;
-	height: 100rpx;
-	overflow: hidden;
-}
-
-.uni-grid-item__box-image .box-image {
-	width: 90rpx;
-}
-</style>
+<template>
+	<view v-if="width" :style="{ width: width }" class="uni-grid-item">
+		<view
+			:class="{ border: showBorder, 'uni-grid-item__box-square': square, 'border-top': showBorder && index < column, 'uni-highlight': highlight }"
+			:style="{ 'border-color': borderColor }"
+			class="uni-grid-item__box"
+			@click="_onClick"
+		>
+			<view v-if="marker === 'dot'" :style="{ left: top * 2 + 'rpx', top: left * 2 + 'rpx' }" class="uni-grid-item__box-dot" />
+			<view v-if="marker === 'badge'" :style="{ left: top * 2 + 'rpx', top: left * 2 + 'rpx' }" class="uni-grid-item__box-badge">
+				<uni-badge :text="text" :type="type" :size="size" :inverted="inverted" />
+			</view>
+			<view v-if="marker === 'image'" :style="{ left: top * 2 + 'rpx', top: left * 2 + 'rpx' }" class="uni-grid-item__box-image">
+				<image :style="{ width: imgWidth * 2 + 'rpx' }" :src="src" class="box-image" mode="widthFix" />
+			</view>
+			<view class="uni-grid-item__box-item"><slot /></view>
+		</view>
+	</view>
+</template>
+
+<script>
+import uniBadge from '@/components/uni-badge/uni-badge.vue';
+export default {
+	name: 'UniGridItem',
+	components: {
+		uniBadge
+	},
+	props: {
+		// 类型：可选值，dot：圆点；badge：角标；image：图片
+		marker: {
+			type: String,
+			default: ''
+		},
+		// 水平方向
+		hor: {
+			type: Number,
+			default: 0
+		},
+		// 垂直方向
+		ver: {
+			type: Number,
+			default: 0
+		},
+		// badge 下颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)
+		type: {
+			type: String,
+			default: ''
+		},
+		// badge 下显示内容，汉字最多为1个
+		text: {
+			type: String,
+			default: ''
+		},
+		// badge 下 Badge 大小
+		size: {
+			type: String,
+			default: 'normal'
+		},
+		// badge 下 是否无需背景颜色
+		inverted: {
+			type: Boolean,
+			default: false
+		},
+		// image 下图片路径
+		src: {
+			type: String,
+			default: ''
+		},
+		// image 下图片宽度 ，最大 为 100 。 默认为 30
+		imgWidth: {
+			type: Number,
+			default: 30
+		}
+	},
+	inject: ['grid'],
+	data() {
+		return {
+			column: 0,
+			showBorder: true,
+			square: true,
+			highlight: true,
+			left: 0,
+			top: 0,
+			index: 0,
+			openNum: 2,
+			width: 0,
+			borderColor: '#e5e5e5'
+		};
+	},
+	created() {
+		this.column = this.grid.column;
+		this.showBorder = this.grid.showBorder;
+		this.square = this.grid.square;
+		this.highlight = this.grid.highlight;
+		this.top = this.hor === 0 ? this.grid.hor : this.hor;
+		this.left = this.ver === 0 ? this.grid.ver : this.ver;
+		this.borderColor = this.grid.borderColor;
+		this.index = this.grid.index++;
+	},
+	// #ifdef H5
+	mounted() {
+		this.grid._getSize(width => {
+			this.width = width;
+		});
+	},
+	// #endif
+	// #ifndef H5
+	onReady() {
+		this.grid._getSize(width => {
+			this.width = width;
+		});
+	},
+	// #endif
+	methods: {
+		_onClick() {
+			this.grid.change({
+				detail: {
+					index: this.index
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.uni-grid-item {
+	box-sizing: border-box;
+}
+
+.uni-grid-item__box {
+	position: relative;
+	width: 100%;
+}
+
+.uni-grid-item__box-item {
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	font-size: 32rpx;
+	color: #666;
+	padding: 20rpx 0;
+	box-sizing: border-box;
+}
+
+.uni-grid-item__box-item .image {
+	width: 50rpx;
+	height: 50rpx;
+}
+
+.uni-grid-item__box-item .text {
+	font-size: 26rpx;
+	margin-top: 10rpx;
+}
+
+.uni-grid-item__box.uni-grid-item__box-square {
+	height: 0;
+	padding-top: 100%;
+}
+
+.uni-grid-item__box.uni-grid-item__box-square .uni-grid-item__box-item {
+	position: absolute;
+	top: 0;
+}
+
+.uni-grid-item__box.border {
+	position: relative;
+	box-sizing: border-box;
+	border-bottom: 2rpx #e5e5e5 solid;
+	border-right: 2rpx #e5e5e5 solid;
+}
+
+.uni-grid-item__box.border-top {
+	border-top: 2rpx #e5e5e5 solid;
+}
+
+.uni-grid-item__box.uni-highlight:active {
+	background-color: #eee;
+}
+
+.uni-grid-item__box-badge,
+.uni-grid-item__box-dot,
+.uni-grid-item__box-image {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	margin: auto;
+	z-index: 10;
+}
+
+.uni-grid-item__box-dot {
+	width: 20rpx;
+	height: 20rpx;
+	background: #ff5a5f;
+	border-radius: 50%;
+}
+
+.uni-grid-item__box-badge {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 0;
+	height: 0;
+}
+
+.uni-grid-item__box-image {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100rpx;
+	height: 100rpx;
+	overflow: hidden;
+}
+
+.uni-grid-item__box-image .box-image {
+	width: 90rpx;
+}
+</style>
diff --git a/components/uni-grid/uni-grid.vue b/components/uni-grid/uni-grid.vue
index 979e814..e8b8297 100644
--- a/components/uni-grid/uni-grid.vue
+++ b/components/uni-grid/uni-grid.vue
@@ -84,7 +84,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 
 .uni-grid {
 	display: flex;
diff --git a/components/uni-popup/uni-popup-sku-new.vue b/components/uni-popup/uni-popup-sku-new.vue
index eeb4e29..b1ddecb 100644
--- a/components/uni-popup/uni-popup-sku-new.vue
+++ b/components/uni-popup/uni-popup-sku-new.vue
@@ -1,221 +1,221 @@
-<template>
-	<view v-if="showPopup" class="uni-popup">
-		<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" ></view>
-		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper goodslist-uni-popup safe-area" @click="close(true)" v-if="isIphoneX">
-			<view class="uni-popup__wrapper-box goodslist-uni-popup-box" @click.stop="clear"><slot /></view>
-		</view>
-		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper goodslist-uni-popup" @click="close(true)" v-else>
-			<view class="uni-popup__wrapper-box goodslist-uni-popup-box" @click.stop="clear"><slot /></view>
-		</view>
-	</view>
-</template>
-
-<script>
-export default {
-	name: 'UniPopup',
-	props: {
-		// 开启动画
-		animation: {
-			type: Boolean,
-			default: true
-		},
-		// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
-		type: {
-			type: String,
-			default: 'center'
-		},
-		// 是否开启自定义
-		custom: {
-			type: Boolean,
-			default: false
-		},
-		// maskClick
-		maskClick: {
-			type: Boolean,
-			default: true
-		},
-		show: {
-			type: Boolean,
-			default: true
-		}
-	},
-	data() {
-		return {
-			ani: '',
-			showPopup: false,
-			callback: null,
-			isIphoneX: false
-		};
-	},
-	watch: {
-		show(newValue) {
-			if (newValue) {
-				this.open();
-			} else {
-				this.close();
-			}
-		}
-	},
-	created() {
-		this.isIphoneX = this.$util.uniappIsIPhoneX();
-	},
-	methods: {
-		clear() {},
-		open(callback) {
-			if (callback) this.callback = callback;
-
-			this.$emit('change', {
-				show: true
-			});
-			this.showPopup = true;
-			this.$nextTick(() => {
-				setTimeout(() => {
-					this.ani = 'uni-' + this.type;
-				}, 30);
-			});
-		},
-		close(type, callback) {
-			if (!this.maskClick && type) return;
-			this.$emit('change', {
-				show: false
-			});
-			this.ani = '';
-			this.$nextTick(() => {
-				setTimeout(() => {
-					this.showPopup = false;
-				}, 300);
-			});
-
-			if (callback) callback();
-
-			if (this.callback) this.callback.call(this);
-		}
-	}
-};
-</script>
-<style>
-
-.uni-popup {
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 999;
-	overflow: hidden;
-}
-
-.uni-popup__mask {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 998;
-	background: rgba(0, 0, 0, 0.4);
-	opacity: 0;
-}
-
-.uni-popup__mask.ani {
-	transition: all 0.3s;
-}
-
-.uni-popup__mask.uni-bottom,
-.uni-popup__mask.uni-center,
-.uni-popup__mask.uni-right,
-.uni-popup__mask.uni-left,
-.uni-popup__mask.uni-top {
-	opacity: 1;
-}
-
-.uni-popup__wrapper {
-	position: absolute;
-	z-index: 999;
-	box-sizing: border-box;
-	//background: #ffffff;
-}
-
-.uni-popup__wrapper.ani {
-	transition: all 0.3s;
-}
-
-.uni-popup__wrapper.top {
-	top: 0;
-	left: 0;
-	width: 100%;
-	transform: translateY(-100%);
-}
-
-.uni-popup__wrapper.bottom {
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	transform: translateY(100%);
-}
-
-.uni-popup__wrapper.right {
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	transform: translateX(100%);
-}
-
-.uni-popup__wrapper.left {
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	transform: translateX(-100%);
-}
-
-.uni-popup__wrapper.center {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	transform: scale(1.2);
-	opacity: 0;
-}
-
-.uni-popup__wrapper-box {
-	position: relative;
-	box-sizing: border-box;
-}
-
-.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
-	//background: #fff;
-}
-.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
-	position: relative;
-	max-width: 80%;
-	max-height: 80%;
-	overflow-y: scroll;
-}
-
-.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
-.uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
-	width: 100%;
-	max-height: 500px;
-	overflow-y: scroll;
-}
-
-.uni-popup__wrapper.uni-bottom,
-.uni-popup__wrapper.uni-top {
-	transform: translateY(0);
-}
-.uni-popup__wrapper.uni-left,
-.uni-popup__wrapper.uni-right {
-	transform: translateX(0);
-}
-
-.uni-popup__wrapper.uni-center {
-	transform: scale(1);
-	opacity: 1;
-}
-
-/* isIphoneX系列手机底部安全距离 */
-.bottom.safe-area {
-	padding-bottom: constant(safe-area-inset-bottom);
-	padding-bottom: env(safe-area-inset-bottom);
-}
-</style>
+<template>
+	<view v-if="showPopup" class="uni-popup">
+		<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" ></view>
+		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper goodslist-uni-popup safe-area" @click="close(true)" v-if="isIphoneX">
+			<view class="uni-popup__wrapper-box goodslist-uni-popup-box" @click.stop="clear"><slot /></view>
+		</view>
+		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper goodslist-uni-popup" @click="close(true)" v-else>
+			<view class="uni-popup__wrapper-box goodslist-uni-popup-box" @click.stop="clear"><slot /></view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'UniPopup',
+	props: {
+		// 开启动画
+		animation: {
+			type: Boolean,
+			default: true
+		},
+		// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
+		type: {
+			type: String,
+			default: 'center'
+		},
+		// 是否开启自定义
+		custom: {
+			type: Boolean,
+			default: false
+		},
+		// maskClick
+		maskClick: {
+			type: Boolean,
+			default: true
+		},
+		show: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			ani: '',
+			showPopup: false,
+			callback: null,
+			isIphoneX: false
+		};
+	},
+	watch: {
+		show(newValue) {
+			if (newValue) {
+				this.open();
+			} else {
+				this.close();
+			}
+		}
+	},
+	created() {
+		this.isIphoneX = this.$util.uniappIsIPhoneX();
+	},
+	methods: {
+		clear() {},
+		open(callback) {
+			if (callback) this.callback = callback;
+
+			this.$emit('change', {
+				show: true
+			});
+			this.showPopup = true;
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.ani = 'uni-' + this.type;
+				}, 30);
+			});
+		},
+		close(type, callback) {
+			if (!this.maskClick && type) return;
+			this.$emit('change', {
+				show: false
+			});
+			this.ani = '';
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.showPopup = false;
+				}, 300);
+			});
+
+			if (callback) callback();
+
+			if (this.callback) this.callback.call(this);
+		}
+	}
+};
+</script>
+<style lang="scss">
+
+.uni-popup {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 999;
+	overflow: hidden;
+}
+
+.uni-popup__mask {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 998;
+	background: rgba(0, 0, 0, 0.4);
+	opacity: 0;
+}
+
+.uni-popup__mask.ani {
+	transition: all 0.3s;
+}
+
+.uni-popup__mask.uni-bottom,
+.uni-popup__mask.uni-center,
+.uni-popup__mask.uni-right,
+.uni-popup__mask.uni-left,
+.uni-popup__mask.uni-top {
+	opacity: 1;
+}
+
+.uni-popup__wrapper {
+	position: absolute;
+	z-index: 999;
+	box-sizing: border-box;
+	//background: #ffffff;
+}
+
+.uni-popup__wrapper.ani {
+	transition: all 0.3s;
+}
+
+.uni-popup__wrapper.top {
+	top: 0;
+	left: 0;
+	width: 100%;
+	transform: translateY(-100%);
+}
+
+.uni-popup__wrapper.bottom {
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	transform: translateY(100%);
+}
+
+.uni-popup__wrapper.right {
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	transform: translateX(100%);
+}
+
+.uni-popup__wrapper.left {
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	transform: translateX(-100%);
+}
+
+.uni-popup__wrapper.center {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	transform: scale(1.2);
+	opacity: 0;
+}
+
+.uni-popup__wrapper-box {
+	position: relative;
+	box-sizing: border-box;
+}
+
+.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
+	//background: #fff;
+}
+.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
+	position: relative;
+	max-width: 80%;
+	max-height: 80%;
+	overflow-y: scroll;
+}
+
+.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
+.uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
+	width: 100%;
+	max-height: 500px;
+	overflow-y: scroll;
+}
+
+.uni-popup__wrapper.uni-bottom,
+.uni-popup__wrapper.uni-top {
+	transform: translateY(0);
+}
+.uni-popup__wrapper.uni-left,
+.uni-popup__wrapper.uni-right {
+	transform: translateX(0);
+}
+
+.uni-popup__wrapper.uni-center {
+	transform: scale(1);
+	opacity: 1;
+}
+
+/* isIphoneX系列手机底部安全距离 */
+.bottom.safe-area {
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+}
+</style>
diff --git a/components/uni-popup/uni-popup-sku.vue b/components/uni-popup/uni-popup-sku.vue
index 409f66e..41f028e 100644
--- a/components/uni-popup/uni-popup-sku.vue
+++ b/components/uni-popup/uni-popup-sku.vue
@@ -1,222 +1,222 @@
-<template>
-	<view v-if="showPopup" class="uni-popup">
-		<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" ></view>
-		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper safe-area" @click="close(true)" v-if="isIphoneX">
-			<view class="uni-popup__wrapper-box" @click.stop="clear"><slot /></view>
-		</view>
-		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)" v-else>
-			<view class="uni-popup__wrapper-box" @click.stop="clear"><slot /></view>
-		</view>
-	</view>
-</template>
-
-<script>
-export default {
-	name: 'UniPopup',
-	props: {
-		// 开启动画
-		animation: {
-			type: Boolean,
-			default: true
-		},
-		// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
-		type: {
-			type: String,
-			default: 'center'
-		},
-		// 是否开启自定义
-		custom: {
-			type: Boolean,
-			default: false
-		},
-		// maskClick
-		maskClick: {
-			type: Boolean,
-			default: true
-		},
-		show: {
-			type: Boolean,
-			default: true
-		}
-	},
-	data() {
-		return {
-			ani: '',
-			showPopup: false,
-			callback: null,
-			isIphoneX: false
-		};
-	},
-	watch: {
-		show(newValue) {
-			if (newValue) {
-				this.open();
-			} else {
-				this.close();
-			}
-		}
-	},
-	created() {
-		this.isIphoneX = this.$util.uniappIsIPhoneX();
-	},
-	methods: {
-		clear() {},
-		open(callback) {
-			if (callback) this.callback = callback;
-
-			this.$emit('change', {
-				show: true
-			});
-			this.showPopup = true;
-			this.$nextTick(() => {
-				setTimeout(() => {
-					this.ani = 'uni-' + this.type;
-				}, 30);
-			});
-		},
-		close(type, callback) {
-			
-			if (!this.maskClick && type) return;
-			this.$emit('change', {
-				show: false
-			});
-			this.ani = '';
-			this.$nextTick(() => {
-				setTimeout(() => {
-					this.showPopup = false;
-				}, 300);
-			});
-
-			if (callback) callback();
-
-			if (this.callback) this.callback.call(this);
-		}
-	}
-};
-</script>
-<style>
-
-.uni-popup {
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 999;
-	overflow: hidden;
-}
-
-.uni-popup__mask {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 998;
-	background: rgba(0, 0, 0, 0.4);
-	opacity: 0;
-}
-
-.uni-popup__mask.ani {
-	transition: all 0.3s;
-}
-
-.uni-popup__mask.uni-bottom,
-.uni-popup__mask.uni-center,
-.uni-popup__mask.uni-right,
-.uni-popup__mask.uni-left,
-.uni-popup__mask.uni-top {
-	opacity: 1;
-}
-
-.uni-popup__wrapper {
-	position: absolute;
-	z-index: 999;
-	box-sizing: border-box;
-	background: #ffffff;
-}
-
-.uni-popup__wrapper.ani {
-	transition: all 0.3s;
-}
-
-.uni-popup__wrapper.top {
-	top: 0;
-	left: 0;
-	width: 100%;
-	transform: translateY(-100%);
-}
-
-.uni-popup__wrapper.bottom {
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	transform: translateY(100%);
-}
-
-.uni-popup__wrapper.right {
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	transform: translateX(100%);
-}
-
-.uni-popup__wrapper.left {
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	transform: translateX(-100%);
-}
-
-.uni-popup__wrapper.center {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	transform: scale(1.2);
-	opacity: 0;
-}
-
-.uni-popup__wrapper-box {
-	position: relative;
-	box-sizing: border-box;
-}
-
-.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
-	background: #fff;
-}
-.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
-	position: relative;
-	max-width: 80%;
-	max-height: 80%;
-	overflow-y: scroll;
-}
-
-.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
-.uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
-	width: 100%;
-	max-height: 500px;
-	overflow-y: scroll;
-}
-
-.uni-popup__wrapper.uni-bottom,
-.uni-popup__wrapper.uni-top {
-	transform: translateY(0);
-}
-.uni-popup__wrapper.uni-left,
-.uni-popup__wrapper.uni-right {
-	transform: translateX(0);
-}
-
-.uni-popup__wrapper.uni-center {
-	transform: scale(1);
-	opacity: 1;
-}
-
-/* isIphoneX系列手机底部安全距离 */
-.bottom.safe-area {
-	padding-bottom: constant(safe-area-inset-bottom);
-	padding-bottom: env(safe-area-inset-bottom);
-}
-</style>
+<template>
+	<view v-if="showPopup" class="uni-popup">
+		<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" ></view>
+		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper safe-area" @click="close(true)" v-if="isIphoneX">
+			<view class="uni-popup__wrapper-box" @click.stop="clear"><slot /></view>
+		</view>
+		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)" v-else>
+			<view class="uni-popup__wrapper-box" @click.stop="clear"><slot /></view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'UniPopup',
+	props: {
+		// 开启动画
+		animation: {
+			type: Boolean,
+			default: true
+		},
+		// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
+		type: {
+			type: String,
+			default: 'center'
+		},
+		// 是否开启自定义
+		custom: {
+			type: Boolean,
+			default: false
+		},
+		// maskClick
+		maskClick: {
+			type: Boolean,
+			default: true
+		},
+		show: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			ani: '',
+			showPopup: false,
+			callback: null,
+			isIphoneX: false
+		};
+	},
+	watch: {
+		show(newValue) {
+			if (newValue) {
+				this.open();
+			} else {
+				this.close();
+			}
+		}
+	},
+	created() {
+		this.isIphoneX = this.$util.uniappIsIPhoneX();
+	},
+	methods: {
+		clear() {},
+		open(callback) {
+			if (callback) this.callback = callback;
+
+			this.$emit('change', {
+				show: true
+			});
+			this.showPopup = true;
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.ani = 'uni-' + this.type;
+				}, 30);
+			});
+		},
+		close(type, callback) {
+			
+			if (!this.maskClick && type) return;
+			this.$emit('change', {
+				show: false
+			});
+			this.ani = '';
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.showPopup = false;
+				}, 300);
+			});
+
+			if (callback) callback();
+
+			if (this.callback) this.callback.call(this);
+		}
+	}
+};
+</script>
+<style lang="scss">
+
+.uni-popup {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 999;
+	overflow: hidden;
+}
+
+.uni-popup__mask {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 998;
+	background: rgba(0, 0, 0, 0.4);
+	opacity: 0;
+}
+
+.uni-popup__mask.ani {
+	transition: all 0.3s;
+}
+
+.uni-popup__mask.uni-bottom,
+.uni-popup__mask.uni-center,
+.uni-popup__mask.uni-right,
+.uni-popup__mask.uni-left,
+.uni-popup__mask.uni-top {
+	opacity: 1;
+}
+
+.uni-popup__wrapper {
+	position: absolute;
+	z-index: 999;
+	box-sizing: border-box;
+	background: #ffffff;
+}
+
+.uni-popup__wrapper.ani {
+	transition: all 0.3s;
+}
+
+.uni-popup__wrapper.top {
+	top: 0;
+	left: 0;
+	width: 100%;
+	transform: translateY(-100%);
+}
+
+.uni-popup__wrapper.bottom {
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	transform: translateY(100%);
+}
+
+.uni-popup__wrapper.right {
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	transform: translateX(100%);
+}
+
+.uni-popup__wrapper.left {
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	transform: translateX(-100%);
+}
+
+.uni-popup__wrapper.center {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	transform: scale(1.2);
+	opacity: 0;
+}
+
+.uni-popup__wrapper-box {
+	position: relative;
+	box-sizing: border-box;
+}
+
+.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
+	background: #fff;
+}
+.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
+	position: relative;
+	max-width: 80%;
+	max-height: 80%;
+	overflow-y: scroll;
+}
+
+.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
+.uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
+	width: 100%;
+	max-height: 500px;
+	overflow-y: scroll;
+}
+
+.uni-popup__wrapper.uni-bottom,
+.uni-popup__wrapper.uni-top {
+	transform: translateY(0);
+}
+.uni-popup__wrapper.uni-left,
+.uni-popup__wrapper.uni-right {
+	transform: translateX(0);
+}
+
+.uni-popup__wrapper.uni-center {
+	transform: scale(1);
+	opacity: 1;
+}
+
+/* isIphoneX系列手机底部安全距离 */
+.bottom.safe-area {
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+}
+</style>
diff --git a/components/uni-popup/uni-popup.vue b/components/uni-popup/uni-popup.vue
index f4fa592..55bd159 100644
--- a/components/uni-popup/uni-popup.vue
+++ b/components/uni-popup/uni-popup.vue
@@ -105,7 +105,7 @@
         }
     };
 </script>
-<style>
+<style lang="scss">
     .uni-popup {
         position: fixed;
         top: 0;
diff --git a/components/uni-tag/uni-tag.vue b/components/uni-tag/uni-tag.vue
index 8702b41..ea30d2c 100644
--- a/components/uni-tag/uni-tag.vue
+++ b/components/uni-tag/uni-tag.vue
@@ -67,7 +67,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 
 .uni-tag {
 	box-sizing: border-box;
diff --git a/components/uv-count-to/uv-count-to.vue b/components/uv-count-to/uv-count-to.vue
index c069ecf..dca437f 100644
--- a/components/uv-count-to/uv-count-to.vue
+++ b/components/uv-count-to/uv-count-to.vue
@@ -210,7 +210,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .uv-count-num {
   display: inline-flex;
   text-align: center;
diff --git a/pages/contact/contact.vue b/pages/contact/contact.vue
index 0e76620..8686191 100644
--- a/pages/contact/contact.vue
+++ b/pages/contact/contact.vue
@@ -35,7 +35,7 @@
 					</view>
 					<!-- #endif -->
 
-					<view class="view_ul_100" v-for="(item, index) in dataList" style="margin-bottom: 20rpx;">
+					<view class="view_ul_100" v-for="(item, index) in dataList" :key="item.personnel_id || index" style="margin-bottom: 20rpx;">
 
 						<view class="bl clearfix bor bg-white"
 							:style="{ backgroundImage: ' url(' + $util.img(personnel_bg) + ')', backgroundSize: '100% 100%' }">
diff --git a/pages/goods/detail.vue b/pages/goods/detail.vue
index f970686..3161e6c 100644
--- a/pages/goods/detail.vue
+++ b/pages/goods/detail.vue
@@ -562,7 +562,7 @@ export default {
 }
 
 </style>
-<style scoped>
+<style lang="scss" scoped>
 /deep/ .action-icon-wrap .iconfont.icon-shouye1 {
 	font-size: 40rpx;
 }
diff --git a/pages/goods/list.vue b/pages/goods/list.vue
index 4ab611b..8e48c64 100644
--- a/pages/goods/list.vue
+++ b/pages/goods/list.vue
@@ -306,7 +306,7 @@
 <style lang="scss">
 	@import './public/css/list.scss';
 </style>
-<style scoped>
+<style lang="scss" scoped>
 	>>>.uni-tag--primary.uni-tag--inverted {
 		background-color: #f5f5f5 !important;
 	}
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 77df958..e992b2c 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -194,7 +194,7 @@
 	}
 
 </style>
-<style scoped>
+<style lang="scss" scoped>
 	.swiper /deep/ .uni-swiper-dots-horizontal {
 		left: 40%;
 		bottom:40px
diff --git a/pages/member/index.vue b/pages/member/index.vue
index 9a1531c..1e4fc28 100644
--- a/pages/member/index.vue
+++ b/pages/member/index.vue
@@ -93,7 +93,7 @@
 	}
 </style>
 
-<style scoped>
+<style lang="scss" scoped>
 	.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
 		background: none !important;
 	}
diff --git a/pages/order/detail.vue b/pages/order/detail.vue
index ec9f273..a81d41e 100644
--- a/pages/order/detail.vue
+++ b/pages/order/detail.vue
@@ -814,7 +814,7 @@
 <style lang="scss">
 	@import './public/css/detail.scss';
 </style>
-<style scoped>
+<style lang="scss" scoped>
 	.pickup-code-info .code img:nth-child(1) {
 		margin-bottom: 30rpx;
 	}
diff --git a/pages/order/detail_point.vue b/pages/order/detail_point.vue
index 75b21f1..0091a6c 100644
--- a/pages/order/detail_point.vue
+++ b/pages/order/detail_point.vue
@@ -297,7 +297,7 @@
 <style lang="scss">
 	@import './public/css/detail.scss';
 </style>
-<style scoped>
+<style lang="scss" scoped>
 	/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
 		max-height: unset !important;
 	}
diff --git a/pages/order/list.vue b/pages/order/list.vue
index db0ca2f..d63f6a2 100644
--- a/pages/order/list.vue
+++ b/pages/order/list.vue
@@ -442,7 +442,7 @@
 <style lang="scss">
 	@import './public/css/list.scss';
 </style>
-<style scoped>
+<style lang="scss" scoped>
 	/deep/ .uni-page {
 		overflow: hidden;
 	}
diff --git a/pages_promotion/components/l-time/l-time.vue b/pages_promotion/components/l-time/l-time.vue
index 4ba8dee..cff8d8a 100644
--- a/pages_promotion/components/l-time/l-time.vue
+++ b/pages_promotion/components/l-time/l-time.vue
@@ -1,56 +1,56 @@
-<template>
-	<text>{{ temp }}</text>
-</template>
-
-<script>
-import _time_ from './time.js';
-export default {
-	name: 'l-time',
-	props: {
-		//日期字符串
-		text: {
-			type: [String, Number, Date],
-			default: ''
-		},
-		//是否显示大于当前时间日期，默认false：大于显示刚刚
-		maxDate: {
-			type: Boolean,
-			default: false
-		}
-	},
-	data() {
-		return {
-			textVal: this.text
-		};
-	},
-	watch: {
-		text() {
-			this.textVal = this.text;
-		}
-	},
-	computed: {
-		temp() {
-			return this.getText();
-		}
-	},
-	methods: {
-		getText() {
-			let self = this;
-			let timeVal = _time_.getFormatTime(self.textVal, self.maxDate);
-			if (timeVal && (timeVal.endsWith('刚刚') || timeVal.endsWith('分钟前'))) {
-				setTimeout(() => {
-					let temp = self.textVal;
-					self.textVal = '';
-					self.textVal = temp;
-				}, 60000);
-			}
-			return this.textVal ? timeVal : '';
-		},
-		onClick() {
-			this.$emit('on-tap', this.textVal);
-		}
-	}
-};
-</script>
-
-<style></style>
+<template>
+	<text>{{ temp }}</text>
+</template>
+
+<script>
+import _time_ from './time.js';
+export default {
+	name: 'l-time',
+	props: {
+		//日期字符串
+		text: {
+			type: [String, Number, Date],
+			default: ''
+		},
+		//是否显示大于当前时间日期，默认false：大于显示刚刚
+		maxDate: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			textVal: this.text
+		};
+	},
+	watch: {
+		text() {
+			this.textVal = this.text;
+		}
+	},
+	computed: {
+		temp() {
+			return this.getText();
+		}
+	},
+	methods: {
+		getText() {
+			let self = this;
+			let timeVal = _time_.getFormatTime(self.textVal, self.maxDate);
+			if (timeVal && (timeVal.endsWith('刚刚') || timeVal.endsWith('分钟前'))) {
+				setTimeout(() => {
+					let temp = self.textVal;
+					self.textVal = '';
+					self.textVal = temp;
+				}, 60000);
+			}
+			return this.textVal ? timeVal : '';
+		},
+		onClick() {
+			this.$emit('on-tap', this.textVal);
+		}
+	}
+};
+</script>
+
+<style lang="scss"></style>
diff --git a/pages_promotion/fenxiao/apply.vue b/pages_promotion/fenxiao/apply.vue
index b7cc509..dbde07b 100644
--- a/pages_promotion/fenxiao/apply.vue
+++ b/pages_promotion/fenxiao/apply.vue
@@ -1,813 +1,813 @@
-<template>
-	<page-meta :page-style="themeColor"></page-meta>
-	<view class="apply">
-		<!-- 导航栏 -->
-		<!-- #ifdef H5 -->
-		<view class="head-nav color-base-bg"></view>
-		<!-- #endif -->
-		<!-- #ifndef H5 -->
-		<!-- <view class="head-nav color-base-bg" :class="{ active: isIphoneX }"></view> -->
-		<!-- #endif -->
-
-		<view v-if="status === ''">
-			<block v-if="basicsConfig.is_apply == 1">
-				<view class="image" :class="fenXiaoAgreement.agreement.img ? '' : 'color-base-bg'">
-					<image v-if="fenXiaoAgreement.agreement.img" class="apply-adv" :src="$util.img(fenXiaoAgreement.agreement.img)" mode="widthFix" style="width: 100%;"/>
-					<view class="bg ns-gradient-otherpages-fenxiao-apply-apply-bg" v-else>
-						<view class="bg-title"><text>请填写申请信息</text></view>
-						<view class="bg-img">
-							<image :src="$util.img('public/uniapp/fenxiao/apply/edit.png')" mode="scaleToFill"></image>
-						</view>
-					</view>
-				</view>
-
-				<view class="apply-wrap">
-					<view class="app-info">
-						<view class="info">
-							<view class="apply-item">
-								<view class="title">邀请人</view>
-								<text class="shuru">{{ sourceMemberInfo.fenxiao_name }}</text>
-							</view>
-							<view class="apply-item">
-								<view class="title">{{ fenxiaoWords.fenxiao_name }}名称</view>
-								<input class="input" type="text" maxlength="30" :placeholder="'请输入' + fenxiaoWords.fenxiao_name + '名称'" v-model="formData.fenXiaoName" placeholder-class="pla-cla" />
-							</view>
-							<view class="apply-item">
-								<view class="title">手机号</view>
-								<input class="input" type="number" placeholder="请输入手机号" maxlength="11" v-model="formData.mobile" placeholder-class="pla-cla" />
-							</view>
-							<view class="apply-xy" v-if="isAgreement" @click="ckeckedRuler()">
-								<view class="iconfont" :class="isChecked ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'">
-								</view>
-								我已阅读并了解
-								<text class="color-base-text" @click.stop="openPopup">【{{ fenxiaoWords.fenxiao_name }}申请协议】</text>
-							</view>
-							<view class="apply-btn">
-								<button @click="applyFenXiao" class="color-base-bg">申请成为{{ fenxiaoWords.fenxiao_name }}</button>
-							</view>
-						</view>
-					</view>
-
-					<view class="apply-message-wrap" v-if="fenxiaoConfig.fenxiao_condition == 2 || fenxiaoConfig.fenxiao_condition == 3">
-						<view class="apply-message">
-							<view class="apply-message-title color-base-bg-before">分销商申请条件</view>
-							<text class="apply-message-info font-size-goods-tag" v-if="fenxiaoConfig.fenxiao_condition == 2">
-								申请成为{{ fenxiaoWords.fenxiao_name }},需要您的消费次数需要达到{{ fenxiaoConfig.consume_count }}次
-							</text>
-							<text class="apply-message-info font-size-goods-tag" v-if="fenxiaoConfig.fenxiao_condition == 3">
-								申请成为{{ fenxiaoWords.fenxiao_name }},需要您的消费金额需要达到{{ fenxiaoConfig.consume_money }}元
-							</text>
-						</view>
-					</view>
-					<view class="app-info-list" v-if="fenxiaoConfig.fenxiao_condition == 4">
-						<view class="apply-message">
-							<view class="apply-message-title color-base-bg-before">分销商申请条件</view>
-							<text class="apply-message-info font-size-goods-tag">申请成为{{ fenxiaoWords.fenxiao_name }},需要购买以下指定商品(任选其一)</text>
-						</view>
-						<view class="goods-list" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
-							<view class="goods-img">
-								<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"/>
-								<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
-							</view>
-							<view class="goods-content">
-								<view class="content-name">{{ item.goods_name }}</view>
-								<view class="delete-price font-size-activity-tag color-tip content-price">
-									<block>
-										<text class="unit">{{ $lang('common.currencySymbol') }}</text>
-										{{ item.market_price > 0 ? item.market_price : item.price }}
-									</block>
-								</view>
-							</view>
-						</view>
-						<view class="content-lists" v-if="isShow" @click="onOpen()">
-							{{ isOpen ? '展开更多' : '收起' }}
-							<text class="iconfont icon-unfold" style="font-weight: bold;" v-if="isOpen"></text>
-							<text class="iconfont icon-fold" v-else></text>
-						</view>
-					</view>
-				</view>
-			</block>
-			<view class="empty" v-else-if="basicsConfig.is_apply == 0" style="margin-top:40rpx;">
-				<block v-if="fenxiaoConfig.fenxiao_condition == 2 || fenxiaoConfig.fenxiao_condition == 3">
-					<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
-					<text v-if="fenxiaoConfig.fenxiao_condition == 2">申请成为{{ fenxiaoWords.fenxiao_name }},需要您的消费次数需要达到{{ fenxiaoConfig.consume_count }}次</text>
-					<text v-if="fenxiaoConfig.fenxiao_condition == 3">
-						申请成为{{ fenxiaoWords.fenxiao_name }},需要您的消费金额需要达到{{ fenxiaoConfig.consume_money | moneyFormat }}元
-					</text>
-				</block>
-				<view class="apply-wrap" v-if="fenxiaoConfig.fenxiao_condition == 4">
-					<view class="app-info-list">
-						<view class="apply-message">
-							<view class="apply-message-title color-base-bg-before">成为分销商的条件</view>
-							<text class="apply-message-info font-size-goods-tag">成为{{ fenxiaoWords.fenxiao_name }},需要购买以下指定商品(任选其一)</text>
-						</view>
-						<view class="goods-list" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
-							<view class="goods-img">
-								<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"/>
-								<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
-							</view>
-							<view class="goods-content">
-								<view class="content-name">{{ item.goods_name }}</view>
-								<view class="delete-price font-size-activity-tag color-tip content-price">
-									<text class="unit">{{ $lang('common.currencySymbol') }}</text>
-									<text>{{ item.market_price > 0 ? item.market_price : item.price }}</text>
-								</view>
-							</view>
-						</view>
-						<view class="content-lists" v-if="isShow" @click="onOpen()">
-							{{ isOpen ? '展开更多' : '收起' }}
-							<text class="iconfont icon-unfold" style="font-weight: bold;" v-if="isOpen"></text>
-							<text class="iconfont icon-fold" v-else></text>
-						</view>
-					</view>
-				</view>
-			</view>
-			<view class="empty" v-else>
-				<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
-				<text>您还不是分销商</text>
-			</view>
-		</view>
-		<view class="empty" v-else>
-			<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
-			<text v-if="status == 1">您已提交{{ fenxiaoWords.fenxiao_name }}申请，等待平台审核</text>
-			<block v-else-if="status == -1">
-				<text>您提交的{{ fenxiaoWords.fenxiao_name }}申请，已被拒绝，请再接再厉</text>
-				<view class="again-btn color-base-bg" @click="againApply">重新申请</view>
-			</block>
-		</view>
-		<view @touchmove.prevent v-if="fenXiaoAgreement.document">
-			<uni-popup ref="applyPopup" type="center" class="wap-floating">
-				<view class="conten-box">
-					<text class="iconfont icon-close" @click="toClose"></text>
-					<view class="title">{{ fenXiaoAgreement.document.title }}</view>
-					<view class="content-con">
-						<scroll-view scroll-y="true" class="con" show-scrollbar="true">
-							<rich-text :nodes="fenXiaoAgreement.document.content"></rich-text>
-						</scroll-view>
-					</view>
-				</view>
-			</uni-popup>
-		</view>
-		<loading-cover ref="loadingCover"></loading-cover>
-	</view>
-</template>
-
-<script>
-	import validate from 'common/js/validate.js';
-	import uniPopup from '@/components/uni-popup/uni-popup.vue';
-	import fenxiaoWords from 'common/js/fenxiao-words.js';
-	import htmlParser from '@/common/js/html-parser';
-	export default {
-		data() {
-			return {
-				isChecked: false,
-				isShow: true,
-				isIphoneX: false,
-				// 推荐人信息
-				sourceMemberInfo: {
-					fenxiao_name: '无'
-				},
-				formData: {
-					fenXiaoName: '',
-					mobile: ''
-				},
-				fenXiaoAgreement: {
-					agreement: {},
-					document: {}
-				},
-				isAgreement: false,
-				back: '',
-				isAbled: false,
-				status: '',
-				isSub: false,
-				fenxiaoConfig: {
-					fenxiao_condition: 0
-				},
-				basicsConfig: {},
-				goodsList: [],
-				isOpen: false
-			};
-		},
-		components: {
-			uniPopup
-		},
-		mixins: [fenxiaoWords],
-		onLoad(option) {
-			setTimeout( () => {
-				if (!this.addonIsExist.fenxiao) {
-					this.$util.showToast({
-						title: '商家未开启分销',
-						mask: true,
-						duration: 2000
-					});
-					setTimeout(() => {
-						this.$util.redirectTo('/pages/index/index');
-					}, 2000);
-				}
-			},1000);
-			this.onOpen();
-			this.getAgreement();
-			if (option.back) this.back = option.back;
-		},
-		async onShow() {
-			this.isIphoneX = this.$util.uniappIsIPhoneX();
-
-			if (this.fenxiaoWords && this.fenxiaoWords.fenxiao_name) this.$langConfig.title(this.fenxiaoWords.fenxiao_name + '申请');
-
-			if (this.storeToken) {
-				this.applyStatus();
-				this.getSourceMemberInfo();
-			} else {
-				this.$util.redirectTo('/pages_tool/login/login', {
-					back: '/pages_promotion/fenxiao/apply'
-				}, 'redirectTo');
-			}
-
-			this.getFenxiaoConfig();
-			this.getFenxiaoBasicsConfig();
-		},
-		methods: {
-			toClose() {
-				this.$refs.applyPopup.close();
-			},
-			ckeckedRuler() {
-				this.isChecked = !this.isChecked;
-			},
-			goodsImg(imgStr) {
-				let imgs = imgStr.split(',');
-				return imgs[0] ?
-					this.$util.img(imgs[0], {
-						size: 'mid'
-					}) :
-					this.$util.getDefaultImage().goods;
-			},
-			imgError(index) {
-				this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
-			},
-			onOpen() {
-				this.isOpen = this.isOpen ? false : true;
-				this.getFenxiaoConfig();
-			},
-			goodsTag(data) {
-				return data.label_name || '';
-			},
-			//商品详情
-			toDetail(item) {
-				this.$util.redirectTo('/pages/goods/detail', {
-					goods_id: item.goods_id
-				});
-			},
-			applyStatus() {
-				this.$api.sendRequest({
-					url: '/fenxiao/api/apply/status',
-					data: {},
-					success: res => {
-						if (res.code >= 0 && res.data) {
-							this.status = res.data.status;
-							this.isSub = false;
-							if (this.status == 2) {
-								this.$util.redirectTo('/pages/member/index');
-							}
-						}
-						this.$refs.loadingCover.hide();
-					}
-				});
-			},
-			navigateBack() {
-				this.$util.goBack();
-			},
-			applyFenXiao() {
-				if (!this.fenXiaoValidata()) return;
-				if (this.isAgreement && !this.isChecked) {
-					this.$util.showToast({
-						title: '请仔细阅读协议，并勾选'
-					});
-					return;
-				}
-
-				if (this.isSub) return;
-				this.isSub = true;
-				this.$api.sendRequest({
-					url: '/fenxiao/api/apply/applyfenxiao',
-					data: {
-						fenxiao_name: this.formData.fenXiaoName,
-						mobile: this.formData.mobile
-					},
-					success: res => {
-						if (res.code >= 0 && res.data) {
-							if (this.basicsConfig.is_examine == 1) {
-								this.applyStatus();
-							} else {
-								this.$util.redirectTo('/pages_promotion/fenxiao/index');
-							}
-						} else {
-							this.isSub = false;
-							this.$util.showToast({
-								title: res.message
-							});
-						}
-					}
-				});
-			},
-			// 申请协议
-			getAgreement() {
-				this.$api.sendRequest({
-					url: '/fenxiao/api/config/agreement',
-					success: res => {
-						if (res.code === 0) {
-							this.fenXiaoAgreement = res.data;
-							if (this.fenXiaoAgreement.agreement.is_agreement === '1') {
-								if (this.fenXiaoAgreement.document.content) this.fenXiaoAgreement.document
-									.content = htmlParser(this.fenXiaoAgreement.document.content);
-								this.isAgreement = true;
-							}
-						}
-					}
-				});
-			},
-			openPopup() {
-				if (this.isAgreement) this.$refs.applyPopup.open();
-			},
-			closePopup() {
-				this.$refs.applyPopup.close();
-			},
-			fenXiaoValidata() {
-				let rule = [{
-						name: 'fenXiaoName',
-						checkType: 'required',
-						errorMsg: '请输入' + this.fenxiaoWords.fenxiao_name + '名称'
-					},
-					{
-						name: 'mobile',
-						checkType: 'required',
-						errorMsg: '请输入手机号'
-					},
-					{
-						name: 'mobile',
-						checkType: 'phoneno',
-						errorMsg: '请输入正确的手机号'
-					}
-				];
-				var checkRes = validate.check(this.formData, rule);
-				if (checkRes) {
-					return true;
-				} else {
-					this.$util.showToast({
-						title: validate.error
-					});
-					return false;
-				}
-			},
-			// 获取推广人信息
-			getSourceMemberInfo() {
-				this.$api.sendRequest({
-					url: '/fenxiao/api/fenxiao/sourceinfo',
-					success: res => {
-						if (res.code == 0 && res.data) {
-							this.sourceMemberInfo = res.data;
-						}
-					}
-				});
-			},
-			/**
-			 * 重新申请
-			 */
-			againApply() {
-				this.status = '';
-			},
-			/**
-			 * 获取申请条件
-			 */
-			getFenxiaoConfig() {
-				this.$api.sendRequest({
-					url: '/fenxiao/api/config/fenxiao',
-					data: {},
-					success: res => {
-						if (res.code >= 0 && res.data) {
-							this.fenxiaoConfig = res.data;
-							this.goodsList = res.data.goods_list;
-							if (this.goodsList.length <= 3) {
-								this.isShow = false;
-							} else if (this.goodsList.length > 3 && this.isOpen == true) {
-								this.isShow = true;
-								this.goodsList = res.data.goods_list.slice(0, 3);
-							}
-						}
-					}
-				});
-			},
-			/**
-			 * 获取分销基本配置
-			 */
-			getFenxiaoBasicsConfig() {
-				this.$api.sendRequest({
-					url: '/fenxiao/api/config/basics',
-					data: {},
-					success: res => {
-						if (res.code >= 0 && res.data) {
-							this.basicsConfig = res.data;
-						}
-					}
-				});
-			}
-		},
-		onBackPress(options) {
-			if (options.from === 'navigateBack') {
-				return false;
-			}
-			this.$util.redirectTo('/pages/member/index');
-			return true;
-		}
-	};
-</script>
-
-<style lang="scss">
-	.image {
-		width: 100%;
-	}
-
-	/deep/.uni-scroll-view {
-		background-color: #fff;
-	}
-
-	/deep/.uni-scroll-view::-webkit-scrollbar {
-		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
-		display: none;
-	}
-
-	.head-nav {
-		width: 100%;
-		height: var(--status-bar-height);
-	}
-
-	.head-nav.active {
-		padding-top: 40rpx;
-	}
-
-	.head-return {
-		height: 90rpx;
-		line-height: 90rpx;
-		color: #fff;
-		font-weight: 600;
-		font-size: $font-size-base;
-		position: relative;
-		text-align: center;
-
-		text {
-			position: absolute;
-			top: 50%;
-			transform: translateY(-50%);
-			left: 20rpx;
-			display: inline-block;
-			margin-right: 10rpx;
-			font-size: 32rpx;
-		}
-	}
-
-	input::placeholder {
-		text-align: right;
-	}
-
-	.apply {
-		.bg {
-			height: 160rpx;
-			display: flex;
-			justify-content: space-between;
-			padding: 30rpx 80rpx 44rpx 80rpx;
-			align-items: center;
-
-			.bg-title {
-				color: #ffffff;
-				font-size: 36rpx;
-			}
-
-			.bg-img {
-				width: 150rpx;
-				height: 150rpx;
-
-				image {
-					width: 100%;
-					height: 100%;
-				}
-			}
-		}
-
-		.apply-adv {
-			width: 100%;
-		}
-
-		.apply-wrap {
-			padding-bottom: 100rpx;
-
-			.app-info {
-				position: relative;
-				top: -28rpx;
-				width: 692rpx;
-				margin: 0 auto;
-				border-radius: 10rpx;
-				background-color: #ffffff;
-
-				.info {
-					display: flex;
-					flex-direction: column;
-					justify-content: center;
-					align-items: center;
-
-					.apply-item {
-						display: flex;
-						align-items: center;
-						justify-content: space-between;
-						width: calc(100% - 100rpx);
-						padding: 20rpx 10rpx;
-						margin: 4rpx 10rpx;
-						background-color: #ffffff;
-						border-bottom: 1rpx solid #f1f1f1;
-
-						.title {
-							color: #000;
-							font-size: 28rpx;
-						}
-
-						.input {
-							width: 70%;
-							text-align: right;
-							height: 40rpx;
-							padding-left: 30rpx;
-							font-size: $font-size-tag;
-							color: #a7a7a7;
-						}
-
-						.pla-cla {
-							color: #babbc1;
-						}
-
-						.shuru {
-							padding-left: 30rpx;
-						}
-					}
-
-					.apply-xy {
-						display: flex;
-						margin-top: 30rpx;
-						color: #838383;
-						align-items: center;
-						font-size: 26rpx;
-
-						text {
-							color: #a7a7a7;
-						}
-
-						.icon-yuan_checkbox {
-							font-size: 36rpx;
-							color: #838383;
-							margin-right: 14rpx;
-							line-height: 1;
-						}
-
-						.icon-yuan_checked {
-							font-size: 36rpx;
-							margin-right: 14rpx;
-							line-height: 1;
-						}
-					}
-				}
-			}
-
-			.app-info-list {
-				margin: 0 30rpx 20rpx;
-				padding: 30rpx;
-				border-radius: 10rpx;
-				background-color: #ffffff;
-
-				.apply-message-title {
-					line-height: 1;
-					font-size: 28rpx;
-					font-weight: bold;
-					position: relative;
-					padding-left: $padding;
-					box-sizing: border-box;
-				}
-
-				.apply-message-title::before {
-					content: '';
-					display: block;
-					position: absolute;
-					width: 6rpx;
-					height: 100%;
-					left: 0;
-					top: 0;
-					border-radius: 6rpx;
-				}
-
-				.apply-message-info {
-					display: inline-block;
-					line-height: 1.2;
-					color: #333;
-					background: #f9f9f9;
-					position: relative;
-					top: 20rpx;
-					width: 586rpx;
-					padding: 20rpx 20rpx;
-					border-radius: 10rpx;
-					margin-bottom: 40rpx;
-				}
-
-				.goods-list {
-					padding: 30rpx 0;
-					// margin-top: 50rpx;
-					display: flex;
-					border-bottom: 2rpx solid #f6f5f5;
-
-					.goods-img {
-						width: 130rpx;
-						height: 130rpx;
-						margin-right: 20rpx;
-						border-radius: 10rpx;
-
-						image {
-							width: 100%;
-							height: 100%;
-						}
-					}
-
-					.goods-content {
-						display: flex;
-						flex-direction: column;
-						justify-content: space-between;
-
-						.content-name {
-							font-size: 28rpx;
-							color: #303133;
-							width: 460rpx;
-							display: -webkit-box;
-							line-clamp: 2;
-							-webkit-line-clamp: 2;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							-webkit-box-orient: vertical;
-						}
-
-						.content-price {
-							font-size: 28rpx !important;
-							font-weight: 600;
-							color: #ff4a01 !important;
-						}
-					}
-				}
-
-				.content-lists {
-					margin: 20rpx auto 0;
-					text-align: center;
-					color: #a1a3a8;
-
-					text {
-						padding-left: 10rpx;
-					}
-				}
-			}
-
-			.apply-btn {
-				margin: 50rpx auto 70rpx auto;
-				border-radius: $border-radius;
-				width: 90%;
-
-				button {
-					color: #ffffff;
-					width: 100%;
-					margin: 0;
-				}
-			}
-
-			.apply-message-wrap {
-				margin-bottom: 100rpx;
-				width: 100%;
-				padding: 10rpx;
-				display: flex;
-				justify-content: center;
-
-				.apply-message {
-					width: 85%;
-					display: flex;
-					flex-direction: column;
-
-					.apply-message-title {
-						line-height: 1;
-						font-size: $font-size-tag;
-						position: relative;
-						padding-left: $padding;
-						box-sizing: border-box;
-					}
-
-					.apply-message-title::before {
-						content: '';
-						display: block;
-						position: absolute;
-						width: 6rpx;
-						height: 100%;
-						left: 0;
-						top: 0;
-						border-radius: 6rpx;
-					}
-
-					.apply-message-info {
-						padding-top: $padding;
-						line-height: 1.2;
-						color: $color-tip;
-					}
-				}
-			}
-		}
-
-		.again-btn {
-			display: flex;
-			justify-content: center;
-			width: auto;
-			border-radius: $border-radius;
-			margin-top: 20rpx;
-			color: #ffffff;
-			align-items: center;
-			padding: 10rpx 60rpx;
-			box-sizing: border-box;
-		}
-
-		.conten-box {
-			padding: 0 30rpx;
-			box-sizing: border-box;
-			height: 812rpx;
-			width: 580rpx;
-			border-radius: 10rpx;
-
-			text {
-				margin-top: 25rpx;
-				float: right;
-				line-height: 1;
-			}
-
-			.title {
-				width: 100%;
-				font-size: 36rpx;
-				font-weight: bold;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				border-bottom: 2rpx solid #e0e0e0;
-				line-height: 1;
-				padding-bottom: 28rpx;
-			}
-
-			.content-con {
-				width: 100%;
-				height: 680rpx;
-				box-sizing: border-box;
-			}
-
-			.con {
-				width: 100%;
-				height: 100%;
-			}
-
-			.sure {
-				width: 100%;
-				height: 100rpx;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-
-				.sure-btn {
-					width: 100%;
-					height: 60rpx;
-					border-radius: $border-radius;
-					color: #ffffff;
-					text-align: center;
-					line-height: 60rpx;
-				}
-			}
-		}
-
-		.empty {
-			width: 100%;
-			margin-top: 200rpx;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-
-			image {
-				width: 300rpx;
-				height: 176rpx;
-				margin-bottom: 50rpx;
-			}
-
-			text {
-				font-size: $font-size-goods-tag;
-				font-weight: 600;
-			}
-		}
-	}
-</style>
-
-<style>
-	/deep/ .uni-popup__wrapper-box {
-		border-radius: 20rpx;
-	}
+<template>
+	<page-meta :page-style="themeColor"></page-meta>
+	<view class="apply">
+		<!-- 导航栏 -->
+		<!-- #ifdef H5 -->
+		<view class="head-nav color-base-bg"></view>
+		<!-- #endif -->
+		<!-- #ifndef H5 -->
+		<!-- <view class="head-nav color-base-bg" :class="{ active: isIphoneX }"></view> -->
+		<!-- #endif -->
+
+		<view v-if="status === ''">
+			<block v-if="basicsConfig.is_apply == 1">
+				<view class="image" :class="fenXiaoAgreement.agreement.img ? '' : 'color-base-bg'">
+					<image v-if="fenXiaoAgreement.agreement.img" class="apply-adv" :src="$util.img(fenXiaoAgreement.agreement.img)" mode="widthFix" style="width: 100%;"/>
+					<view class="bg ns-gradient-otherpages-fenxiao-apply-apply-bg" v-else>
+						<view class="bg-title"><text>请填写申请信息</text></view>
+						<view class="bg-img">
+							<image :src="$util.img('public/uniapp/fenxiao/apply/edit.png')" mode="scaleToFill"></image>
+						</view>
+					</view>
+				</view>
+
+				<view class="apply-wrap">
+					<view class="app-info">
+						<view class="info">
+							<view class="apply-item">
+								<view class="title">邀请人</view>
+								<text class="shuru">{{ sourceMemberInfo.fenxiao_name }}</text>
+							</view>
+							<view class="apply-item">
+								<view class="title">{{ fenxiaoWords.fenxiao_name }}名称</view>
+								<input class="input" type="text" maxlength="30" :placeholder="'请输入' + fenxiaoWords.fenxiao_name + '名称'" v-model="formData.fenXiaoName" placeholder-class="pla-cla" />
+							</view>
+							<view class="apply-item">
+								<view class="title">手机号</view>
+								<input class="input" type="number" placeholder="请输入手机号" maxlength="11" v-model="formData.mobile" placeholder-class="pla-cla" />
+							</view>
+							<view class="apply-xy" v-if="isAgreement" @click="ckeckedRuler()">
+								<view class="iconfont" :class="isChecked ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'">
+								</view>
+								我已阅读并了解
+								<text class="color-base-text" @click.stop="openPopup">【{{ fenxiaoWords.fenxiao_name }}申请协议】</text>
+							</view>
+							<view class="apply-btn">
+								<button @click="applyFenXiao" class="color-base-bg">申请成为{{ fenxiaoWords.fenxiao_name }}</button>
+							</view>
+						</view>
+					</view>
+
+					<view class="apply-message-wrap" v-if="fenxiaoConfig.fenxiao_condition == 2 || fenxiaoConfig.fenxiao_condition == 3">
+						<view class="apply-message">
+							<view class="apply-message-title color-base-bg-before">分销商申请条件</view>
+							<text class="apply-message-info font-size-goods-tag" v-if="fenxiaoConfig.fenxiao_condition == 2">
+								申请成为{{ fenxiaoWords.fenxiao_name }},需要您的消费次数需要达到{{ fenxiaoConfig.consume_count }}次
+							</text>
+							<text class="apply-message-info font-size-goods-tag" v-if="fenxiaoConfig.fenxiao_condition == 3">
+								申请成为{{ fenxiaoWords.fenxiao_name }},需要您的消费金额需要达到{{ fenxiaoConfig.consume_money }}元
+							</text>
+						</view>
+					</view>
+					<view class="app-info-list" v-if="fenxiaoConfig.fenxiao_condition == 4">
+						<view class="apply-message">
+							<view class="apply-message-title color-base-bg-before">分销商申请条件</view>
+							<text class="apply-message-info font-size-goods-tag">申请成为{{ fenxiaoWords.fenxiao_name }},需要购买以下指定商品(任选其一)</text>
+						</view>
+						<view class="goods-list" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
+							<view class="goods-img">
+								<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"/>
+								<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
+							</view>
+							<view class="goods-content">
+								<view class="content-name">{{ item.goods_name }}</view>
+								<view class="delete-price font-size-activity-tag color-tip content-price">
+									<block>
+										<text class="unit">{{ $lang('common.currencySymbol') }}</text>
+										{{ item.market_price > 0 ? item.market_price : item.price }}
+									</block>
+								</view>
+							</view>
+						</view>
+						<view class="content-lists" v-if="isShow" @click="onOpen()">
+							{{ isOpen ? '展开更多' : '收起' }}
+							<text class="iconfont icon-unfold" style="font-weight: bold;" v-if="isOpen"></text>
+							<text class="iconfont icon-fold" v-else></text>
+						</view>
+					</view>
+				</view>
+			</block>
+			<view class="empty" v-else-if="basicsConfig.is_apply == 0" style="margin-top:40rpx;">
+				<block v-if="fenxiaoConfig.fenxiao_condition == 2 || fenxiaoConfig.fenxiao_condition == 3">
+					<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
+					<text v-if="fenxiaoConfig.fenxiao_condition == 2">申请成为{{ fenxiaoWords.fenxiao_name }},需要您的消费次数需要达到{{ fenxiaoConfig.consume_count }}次</text>
+					<text v-if="fenxiaoConfig.fenxiao_condition == 3">
+						申请成为{{ fenxiaoWords.fenxiao_name }},需要您的消费金额需要达到{{ fenxiaoConfig.consume_money | moneyFormat }}元
+					</text>
+				</block>
+				<view class="apply-wrap" v-if="fenxiaoConfig.fenxiao_condition == 4">
+					<view class="app-info-list">
+						<view class="apply-message">
+							<view class="apply-message-title color-base-bg-before">成为分销商的条件</view>
+							<text class="apply-message-info font-size-goods-tag">成为{{ fenxiaoWords.fenxiao_name }},需要购买以下指定商品(任选其一)</text>
+						</view>
+						<view class="goods-list" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
+							<view class="goods-img">
+								<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"/>
+								<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
+							</view>
+							<view class="goods-content">
+								<view class="content-name">{{ item.goods_name }}</view>
+								<view class="delete-price font-size-activity-tag color-tip content-price">
+									<text class="unit">{{ $lang('common.currencySymbol') }}</text>
+									<text>{{ item.market_price > 0 ? item.market_price : item.price }}</text>
+								</view>
+							</view>
+						</view>
+						<view class="content-lists" v-if="isShow" @click="onOpen()">
+							{{ isOpen ? '展开更多' : '收起' }}
+							<text class="iconfont icon-unfold" style="font-weight: bold;" v-if="isOpen"></text>
+							<text class="iconfont icon-fold" v-else></text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="empty" v-else>
+				<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
+				<text>您还不是分销商</text>
+			</view>
+		</view>
+		<view class="empty" v-else>
+			<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
+			<text v-if="status == 1">您已提交{{ fenxiaoWords.fenxiao_name }}申请，等待平台审核</text>
+			<block v-else-if="status == -1">
+				<text>您提交的{{ fenxiaoWords.fenxiao_name }}申请，已被拒绝，请再接再厉</text>
+				<view class="again-btn color-base-bg" @click="againApply">重新申请</view>
+			</block>
+		</view>
+		<view @touchmove.prevent v-if="fenXiaoAgreement.document">
+			<uni-popup ref="applyPopup" type="center" class="wap-floating">
+				<view class="conten-box">
+					<text class="iconfont icon-close" @click="toClose"></text>
+					<view class="title">{{ fenXiaoAgreement.document.title }}</view>
+					<view class="content-con">
+						<scroll-view scroll-y="true" class="con" show-scrollbar="true">
+							<rich-text :nodes="fenXiaoAgreement.document.content"></rich-text>
+						</scroll-view>
+					</view>
+				</view>
+			</uni-popup>
+		</view>
+		<loading-cover ref="loadingCover"></loading-cover>
+	</view>
+</template>
+
+<script>
+	import validate from 'common/js/validate.js';
+	import uniPopup from '@/components/uni-popup/uni-popup.vue';
+	import fenxiaoWords from 'common/js/fenxiao-words.js';
+	import htmlParser from '@/common/js/html-parser';
+	export default {
+		data() {
+			return {
+				isChecked: false,
+				isShow: true,
+				isIphoneX: false,
+				// 推荐人信息
+				sourceMemberInfo: {
+					fenxiao_name: '无'
+				},
+				formData: {
+					fenXiaoName: '',
+					mobile: ''
+				},
+				fenXiaoAgreement: {
+					agreement: {},
+					document: {}
+				},
+				isAgreement: false,
+				back: '',
+				isAbled: false,
+				status: '',
+				isSub: false,
+				fenxiaoConfig: {
+					fenxiao_condition: 0
+				},
+				basicsConfig: {},
+				goodsList: [],
+				isOpen: false
+			};
+		},
+		components: {
+			uniPopup
+		},
+		mixins: [fenxiaoWords],
+		onLoad(option) {
+			setTimeout( () => {
+				if (!this.addonIsExist.fenxiao) {
+					this.$util.showToast({
+						title: '商家未开启分销',
+						mask: true,
+						duration: 2000
+					});
+					setTimeout(() => {
+						this.$util.redirectTo('/pages/index/index');
+					}, 2000);
+				}
+			},1000);
+			this.onOpen();
+			this.getAgreement();
+			if (option.back) this.back = option.back;
+		},
+		async onShow() {
+			this.isIphoneX = this.$util.uniappIsIPhoneX();
+
+			if (this.fenxiaoWords && this.fenxiaoWords.fenxiao_name) this.$langConfig.title(this.fenxiaoWords.fenxiao_name + '申请');
+
+			if (this.storeToken) {
+				this.applyStatus();
+				this.getSourceMemberInfo();
+			} else {
+				this.$util.redirectTo('/pages_tool/login/login', {
+					back: '/pages_promotion/fenxiao/apply'
+				}, 'redirectTo');
+			}
+
+			this.getFenxiaoConfig();
+			this.getFenxiaoBasicsConfig();
+		},
+		methods: {
+			toClose() {
+				this.$refs.applyPopup.close();
+			},
+			ckeckedRuler() {
+				this.isChecked = !this.isChecked;
+			},
+			goodsImg(imgStr) {
+				let imgs = imgStr.split(',');
+				return imgs[0] ?
+					this.$util.img(imgs[0], {
+						size: 'mid'
+					}) :
+					this.$util.getDefaultImage().goods;
+			},
+			imgError(index) {
+				this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
+			},
+			onOpen() {
+				this.isOpen = this.isOpen ? false : true;
+				this.getFenxiaoConfig();
+			},
+			goodsTag(data) {
+				return data.label_name || '';
+			},
+			//商品详情
+			toDetail(item) {
+				this.$util.redirectTo('/pages/goods/detail', {
+					goods_id: item.goods_id
+				});
+			},
+			applyStatus() {
+				this.$api.sendRequest({
+					url: '/fenxiao/api/apply/status',
+					data: {},
+					success: res => {
+						if (res.code >= 0 && res.data) {
+							this.status = res.data.status;
+							this.isSub = false;
+							if (this.status == 2) {
+								this.$util.redirectTo('/pages/member/index');
+							}
+						}
+						this.$refs.loadingCover.hide();
+					}
+				});
+			},
+			navigateBack() {
+				this.$util.goBack();
+			},
+			applyFenXiao() {
+				if (!this.fenXiaoValidata()) return;
+				if (this.isAgreement && !this.isChecked) {
+					this.$util.showToast({
+						title: '请仔细阅读协议，并勾选'
+					});
+					return;
+				}
+
+				if (this.isSub) return;
+				this.isSub = true;
+				this.$api.sendRequest({
+					url: '/fenxiao/api/apply/applyfenxiao',
+					data: {
+						fenxiao_name: this.formData.fenXiaoName,
+						mobile: this.formData.mobile
+					},
+					success: res => {
+						if (res.code >= 0 && res.data) {
+							if (this.basicsConfig.is_examine == 1) {
+								this.applyStatus();
+							} else {
+								this.$util.redirectTo('/pages_promotion/fenxiao/index');
+							}
+						} else {
+							this.isSub = false;
+							this.$util.showToast({
+								title: res.message
+							});
+						}
+					}
+				});
+			},
+			// 申请协议
+			getAgreement() {
+				this.$api.sendRequest({
+					url: '/fenxiao/api/config/agreement',
+					success: res => {
+						if (res.code === 0) {
+							this.fenXiaoAgreement = res.data;
+							if (this.fenXiaoAgreement.agreement.is_agreement === '1') {
+								if (this.fenXiaoAgreement.document.content) this.fenXiaoAgreement.document
+									.content = htmlParser(this.fenXiaoAgreement.document.content);
+								this.isAgreement = true;
+							}
+						}
+					}
+				});
+			},
+			openPopup() {
+				if (this.isAgreement) this.$refs.applyPopup.open();
+			},
+			closePopup() {
+				this.$refs.applyPopup.close();
+			},
+			fenXiaoValidata() {
+				let rule = [{
+						name: 'fenXiaoName',
+						checkType: 'required',
+						errorMsg: '请输入' + this.fenxiaoWords.fenxiao_name + '名称'
+					},
+					{
+						name: 'mobile',
+						checkType: 'required',
+						errorMsg: '请输入手机号'
+					},
+					{
+						name: 'mobile',
+						checkType: 'phoneno',
+						errorMsg: '请输入正确的手机号'
+					}
+				];
+				var checkRes = validate.check(this.formData, rule);
+				if (checkRes) {
+					return true;
+				} else {
+					this.$util.showToast({
+						title: validate.error
+					});
+					return false;
+				}
+			},
+			// 获取推广人信息
+			getSourceMemberInfo() {
+				this.$api.sendRequest({
+					url: '/fenxiao/api/fenxiao/sourceinfo',
+					success: res => {
+						if (res.code == 0 && res.data) {
+							this.sourceMemberInfo = res.data;
+						}
+					}
+				});
+			},
+			/**
+			 * 重新申请
+			 */
+			againApply() {
+				this.status = '';
+			},
+			/**
+			 * 获取申请条件
+			 */
+			getFenxiaoConfig() {
+				this.$api.sendRequest({
+					url: '/fenxiao/api/config/fenxiao',
+					data: {},
+					success: res => {
+						if (res.code >= 0 && res.data) {
+							this.fenxiaoConfig = res.data;
+							this.goodsList = res.data.goods_list;
+							if (this.goodsList.length <= 3) {
+								this.isShow = false;
+							} else if (this.goodsList.length > 3 && this.isOpen == true) {
+								this.isShow = true;
+								this.goodsList = res.data.goods_list.slice(0, 3);
+							}
+						}
+					}
+				});
+			},
+			/**
+			 * 获取分销基本配置
+			 */
+			getFenxiaoBasicsConfig() {
+				this.$api.sendRequest({
+					url: '/fenxiao/api/config/basics',
+					data: {},
+					success: res => {
+						if (res.code >= 0 && res.data) {
+							this.basicsConfig = res.data;
+						}
+					}
+				});
+			}
+		},
+		onBackPress(options) {
+			if (options.from === 'navigateBack') {
+				return false;
+			}
+			this.$util.redirectTo('/pages/member/index');
+			return true;
+		}
+	};
+</script>
+
+<style lang="scss">
+	.image {
+		width: 100%;
+	}
+
+	/deep/.uni-scroll-view {
+		background-color: #fff;
+	}
+
+	/deep/.uni-scroll-view::-webkit-scrollbar {
+		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
+		display: none;
+	}
+
+	.head-nav {
+		width: 100%;
+		height: var(--status-bar-height);
+	}
+
+	.head-nav.active {
+		padding-top: 40rpx;
+	}
+
+	.head-return {
+		height: 90rpx;
+		line-height: 90rpx;
+		color: #fff;
+		font-weight: 600;
+		font-size: $font-size-base;
+		position: relative;
+		text-align: center;
+
+		text {
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			left: 20rpx;
+			display: inline-block;
+			margin-right: 10rpx;
+			font-size: 32rpx;
+		}
+	}
+
+	input::placeholder {
+		text-align: right;
+	}
+
+	.apply {
+		.bg {
+			height: 160rpx;
+			display: flex;
+			justify-content: space-between;
+			padding: 30rpx 80rpx 44rpx 80rpx;
+			align-items: center;
+
+			.bg-title {
+				color: #ffffff;
+				font-size: 36rpx;
+			}
+
+			.bg-img {
+				width: 150rpx;
+				height: 150rpx;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+
+		.apply-adv {
+			width: 100%;
+		}
+
+		.apply-wrap {
+			padding-bottom: 100rpx;
+
+			.app-info {
+				position: relative;
+				top: -28rpx;
+				width: 692rpx;
+				margin: 0 auto;
+				border-radius: 10rpx;
+				background-color: #ffffff;
+
+				.info {
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+
+					.apply-item {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						width: calc(100% - 100rpx);
+						padding: 20rpx 10rpx;
+						margin: 4rpx 10rpx;
+						background-color: #ffffff;
+						border-bottom: 1rpx solid #f1f1f1;
+
+						.title {
+							color: #000;
+							font-size: 28rpx;
+						}
+
+						.input {
+							width: 70%;
+							text-align: right;
+							height: 40rpx;
+							padding-left: 30rpx;
+							font-size: $font-size-tag;
+							color: #a7a7a7;
+						}
+
+						.pla-cla {
+							color: #babbc1;
+						}
+
+						.shuru {
+							padding-left: 30rpx;
+						}
+					}
+
+					.apply-xy {
+						display: flex;
+						margin-top: 30rpx;
+						color: #838383;
+						align-items: center;
+						font-size: 26rpx;
+
+						text {
+							color: #a7a7a7;
+						}
+
+						.icon-yuan_checkbox {
+							font-size: 36rpx;
+							color: #838383;
+							margin-right: 14rpx;
+							line-height: 1;
+						}
+
+						.icon-yuan_checked {
+							font-size: 36rpx;
+							margin-right: 14rpx;
+							line-height: 1;
+						}
+					}
+				}
+			}
+
+			.app-info-list {
+				margin: 0 30rpx 20rpx;
+				padding: 30rpx;
+				border-radius: 10rpx;
+				background-color: #ffffff;
+
+				.apply-message-title {
+					line-height: 1;
+					font-size: 28rpx;
+					font-weight: bold;
+					position: relative;
+					padding-left: $padding;
+					box-sizing: border-box;
+				}
+
+				.apply-message-title::before {
+					content: '';
+					display: block;
+					position: absolute;
+					width: 6rpx;
+					height: 100%;
+					left: 0;
+					top: 0;
+					border-radius: 6rpx;
+				}
+
+				.apply-message-info {
+					display: inline-block;
+					line-height: 1.2;
+					color: #333;
+					background: #f9f9f9;
+					position: relative;
+					top: 20rpx;
+					width: 586rpx;
+					padding: 20rpx 20rpx;
+					border-radius: 10rpx;
+					margin-bottom: 40rpx;
+				}
+
+				.goods-list {
+					padding: 30rpx 0;
+					// margin-top: 50rpx;
+					display: flex;
+					border-bottom: 2rpx solid #f6f5f5;
+
+					.goods-img {
+						width: 130rpx;
+						height: 130rpx;
+						margin-right: 20rpx;
+						border-radius: 10rpx;
+
+						image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+
+					.goods-content {
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+
+						.content-name {
+							font-size: 28rpx;
+							color: #303133;
+							width: 460rpx;
+							display: -webkit-box;
+							line-clamp: 2;
+							-webkit-line-clamp: 2;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							-webkit-box-orient: vertical;
+						}
+
+						.content-price {
+							font-size: 28rpx !important;
+							font-weight: 600;
+							color: #ff4a01 !important;
+						}
+					}
+				}
+
+				.content-lists {
+					margin: 20rpx auto 0;
+					text-align: center;
+					color: #a1a3a8;
+
+					text {
+						padding-left: 10rpx;
+					}
+				}
+			}
+
+			.apply-btn {
+				margin: 50rpx auto 70rpx auto;
+				border-radius: $border-radius;
+				width: 90%;
+
+				button {
+					color: #ffffff;
+					width: 100%;
+					margin: 0;
+				}
+			}
+
+			.apply-message-wrap {
+				margin-bottom: 100rpx;
+				width: 100%;
+				padding: 10rpx;
+				display: flex;
+				justify-content: center;
+
+				.apply-message {
+					width: 85%;
+					display: flex;
+					flex-direction: column;
+
+					.apply-message-title {
+						line-height: 1;
+						font-size: $font-size-tag;
+						position: relative;
+						padding-left: $padding;
+						box-sizing: border-box;
+					}
+
+					.apply-message-title::before {
+						content: '';
+						display: block;
+						position: absolute;
+						width: 6rpx;
+						height: 100%;
+						left: 0;
+						top: 0;
+						border-radius: 6rpx;
+					}
+
+					.apply-message-info {
+						padding-top: $padding;
+						line-height: 1.2;
+						color: $color-tip;
+					}
+				}
+			}
+		}
+
+		.again-btn {
+			display: flex;
+			justify-content: center;
+			width: auto;
+			border-radius: $border-radius;
+			margin-top: 20rpx;
+			color: #ffffff;
+			align-items: center;
+			padding: 10rpx 60rpx;
+			box-sizing: border-box;
+		}
+
+		.conten-box {
+			padding: 0 30rpx;
+			box-sizing: border-box;
+			height: 812rpx;
+			width: 580rpx;
+			border-radius: 10rpx;
+
+			text {
+				margin-top: 25rpx;
+				float: right;
+				line-height: 1;
+			}
+
+			.title {
+				width: 100%;
+				font-size: 36rpx;
+				font-weight: bold;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-bottom: 2rpx solid #e0e0e0;
+				line-height: 1;
+				padding-bottom: 28rpx;
+			}
+
+			.content-con {
+				width: 100%;
+				height: 680rpx;
+				box-sizing: border-box;
+			}
+
+			.con {
+				width: 100%;
+				height: 100%;
+			}
+
+			.sure {
+				width: 100%;
+				height: 100rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.sure-btn {
+					width: 100%;
+					height: 60rpx;
+					border-radius: $border-radius;
+					color: #ffffff;
+					text-align: center;
+					line-height: 60rpx;
+				}
+			}
+		}
+
+		.empty {
+			width: 100%;
+			margin-top: 200rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+
+			image {
+				width: 300rpx;
+				height: 176rpx;
+				margin-bottom: 50rpx;
+			}
+
+			text {
+				font-size: $font-size-goods-tag;
+				font-weight: 600;
+			}
+		}
+	}
+</style>
+
+<style lang="scss">
+	/deep/ .uni-popup__wrapper-box {
+		border-radius: 20rpx;
+	}
 </style>
\ No newline at end of file
diff --git a/pages_promotion/fenxiao/goods_list.vue b/pages_promotion/fenxiao/goods_list.vue
index a3eac56..3543336 100644
--- a/pages_promotion/fenxiao/goods_list.vue
+++ b/pages_promotion/fenxiao/goods_list.vue
@@ -12,6 +12,7 @@
 							<view
 								class="quick-nav-item"
 								v-for="item in categoryList"
+								:key="item.category_id"
 								:class="{ selected: categoryId == item.category_id }"
 								@click="changeCategory(item.category_id)"
 							>
@@ -140,7 +141,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 .quick-nav >>> .uni-scroll-view-content {
 	display: flex;
 }
diff --git a/pages_promotion/merch/detail.vue b/pages_promotion/merch/detail.vue
index aad7c68..f3d89ea 100644
--- a/pages_promotion/merch/detail.vue
+++ b/pages_promotion/merch/detail.vue
@@ -1,323 +1,323 @@
-<template>
-	<page-meta :page-style="themeColor"></page-meta>
-	<view class="content">
-		<view class="head-wrap">
-			<!-- 搜索区域 -->
-			<view class="search-wrap uni-flex uni-row" style="margin-bottom: 20rpx;">
-				
-				
-			<!-- 	<view class="flex-item input-wrap">
-					<input class="uni-input" maxlength="50" v-model="keyword" @confirm="search()" placeholder="请输入您要搜索的商品" />
-					<text class="iconfont icon-sousuo3" @click.stop="search()"></text>
-				</view>
-				<view class="iconfont" :class="{ 'icon-apps': isList, 'icon-list': !isList }" @click="changeListStyle()"></view> -->
-				
-				<view style="width: 100rpx;height: 100rpx;">
-					<image :src="$util.img(merch.merch_image)" mode="widthFix" style="width: 100rpx;height: 100rpx;" />
-				</view>
-				<view style="margin-left: 20rpx;padding-top: 22rpx;">
-					<view style="line-height: 1;font-size: 32rpx;font-weight: 600;">{{merch.merch_name}}</view>
-					<view style="color:rgb(255 202 40)">
-						<text class="icox icox-xing"></text>
-						<text class="icox icox-xing"></text>
-						<text class="icox icox-xing"></text>
-						<text class="icox icox-xing"></text>
-						<text class="icox icox-xing"></text>
-					</view>
-				</view>
-				
-			</view>
-
-			<!-- 排序 -->
-			<view class="sort-wrap">
-				<view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }" @click="sortTabClick('')">
-					<text :class="{ 'color-base-text': orderType === '' }">综合</text>
-				</view>
-
-				<view :class="{ 'color-base-text': orderType === 'sale_num' }" @click="sortTabClick('sale_num')">销量
-				</view>
-
-				<view class="price-wrap" @click="sortTabClick('discount_price')">
-					<text :class="{ 'color-base-text': orderType === 'discount_price' }">价格</text>
-					<view class="iconfont-wrap">
-						<view class="iconfont icon-iconangledown-copy asc" :class="{ 'color-base-text': priceOrder === 'asc' && orderType === 'discount_price' }"></view>
-						<view class="iconfont icon-iconangledown desc" :class="{ 'color-base-text': priceOrder === 'desc' && orderType === 'discount_price' }"></view>
-					</view>
-				</view>
-
-			<!-- 	<view :class="{ 'color-base-text': orderType === 'screen' }" class="screen-wrap">
-					<text @click="sortTabClick('screen')">筛选</text>
-					<view @click="sortTabClick('screen')" class="iconfont-wrap">
-						<view class="iconfont icon-shaixuan color-tip"></view>
-					</view>
-				</view> -->
-			</view>
-		</view>
-
-		<mescroll-uni top="240" ref="mescroll" @getData="getGoodsList">
-			<block slot="list">
-				<view class="goods-list single-column" :class="{ show: isList }">
-					<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
-						<view class="goods-img">
-							<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"></image>
-							<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
-							<view class="sell-out" v-if="item.stock <= 0">
-								<text class="iconfont icon-shuqing"></text>
-							</view>
-						</view>
-						<view class="info-wrap">
-							<view class="name-wrap">
-								<view class="goods-name" :class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
-									{{ item.goods_name }}
-								</view>
-							</view>
-
-							<view class="lineheight-clear">
-								<view class="discount-price" v-if="item.isinformation == 0">
-									<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
-									<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
-									<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
-								</view>
-								<view class="discount-price" v-else>
-									<text class="price price-style large">咨询</text>
-								</view>
-								
-								
-								<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
-									<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"></image>
-								</view>
-								<view class="member-price-tag" v-else-if="item.promotion_type == 1">
-									<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"></image>
-								</view>
-							</view>
-							<view class="pro-info" v-if="item.isinformation == 0">
-								<view class="delete-price color-tip price-font" v-if="showMarketPrice(item)">
-									<text class="unit">{{ $lang('common.currencySymbol') }}</text>
-									<text>{{ showMarketPrice(item) }}</text>
-								</view>
-								<view class="block-wrap">
-									<view class="sale color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
-								</view>
-								<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
-									<!-- 购物车图标 -->
-									<view v-if="config.style == 'icon-cart'" :style="{
-											color: config.theme == 'diy' ? config.textColor : '',
-											borderColor: config.theme == 'diy' ? config.textColor : ''
-										}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
-										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
-										<view class="click-event"></view>
-									</view>
-
-									<!--加号图标 -->
-									<view v-else-if="config.style == 'icon-add'" :style="{
-											color: config.theme == 'diy' ? config.textColor : '',
-											borderColor: config.theme == 'diy' ? config.textColor : ''
-										}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
-										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
-										<view class="click-event"></view>
-									</view>
-
-									<!-- 按钮 -->
-									<view v-else-if="config.style == 'button'" :style="{
-											backgroundColor: config.theme == 'diy' ? config.bgColor : '',
-											color: config.theme == 'diy' ? config.textColor : '',
-											fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
-											padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
-										}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
-										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
-										{{ config.text }}
-										<view class="click-event"></view>
-									</view>
-
-									<!--自定义图标 -->
-									<view v-else-if="config.style == 'icon-diy'" :style="{
-											color: config.theme == 'diy' ? config.textColor : ''
-										}" class="icon-diy click-wrap" :id="'goods-' + item.id"
-										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
-										<view class="click-event"></view>
-										<diy-icon :icon="config.iconDiy.icon" :value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
-									</view>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-				<view class="goods-list double-column" :class="{ show: !isList }">
-					<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index"
-						@click="toDetail(item)" :style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }">
-						<view class="goods-img">
-							<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"></image>
-							<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
-							<view class="sell-out" v-if="item.stock <= 0">
-								<text class="iconfont icon-shuqing"></text>
-							</view>
-						</view>
-						<view class="info-wrap">
-							<view class="goods-name" :class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
-								{{ item.goods_name }}
-							</view>
-						
-							<view class="lineheight-clear">
-								<view class="discount-price" v-if="item.isinformation == 0">
-									<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
-									<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
-									<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
-								</view>
-								<view class="discount-price" v-else>
-									<text class="price price-style large">咨询</text>
-								</view>
-								<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
-									<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"></image>
-								</view>
-								<view class="member-price-tag" v-else-if="item.promotion_type == 1">
-									<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"></image>
-								</view>
-								<view class="delete-price color-tip price-font" v-if="showMarketPrice(item)">
-									<text class="unit">{{ $lang('common.currencySymbol') }}</text>
-									<text>{{ showMarketPrice(item) }}</text>
-								</view>
-							</view>
-							<view class="pro-info"  v-if="item.isinformation == 0">
-								<view class="block-wrap" >
-									<view class="sale color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
-								</view>
-								<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
-									<!-- 购物车图标 -->
-									<view v-if="config.style == 'icon-cart'" :style="{
-											color: config.theme == 'diy' ? config.textColor : '',
-											borderColor: config.theme == 'diy' ? config.textColor : ''
-										}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
-										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
-										<view class="click-event"></view>
-									</view>
-						
-									<!--加号图标 -->
-									<view v-else-if="config.style == 'icon-add'" :style="{
-											color: config.theme == 'diy' ? config.textColor : '',
-											borderColor: config.theme == 'diy' ? config.textColor : ''
-										}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
-										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
-										<view class="click-event"></view>
-									</view>
-						
-									<!-- 按钮 -->
-									<view v-else-if="config.style == 'button'" :style="{
-											backgroundColor: config.theme == 'diy' ? config.bgColor : '',
-											color: config.theme == 'diy' ? config.textColor : '',
-											fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
-											padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
-										}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
-										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
-										{{ config.text }}
-										<view class="click-event"></view>
-									</view>
-						
-									<!--自定义图标 -->
-									<view v-else-if="config.style == 'icon-diy'" :style="{
-											color: config.theme == 'diy' ? config.textColor : ''
-										}" class="icon-diy click-wrap" :id="'goods-' + item.id"
-										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
-										<view class="click-event"></view>
-										<diy-icon :icon="config.iconDiy.icon" :value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
-									</view>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-				<view v-if="goodsList.length == 0 && emptyShow"><ns-empty text="暂无商品"></ns-empty></view>
-			</block>
-		</mescroll-uni>
-
-		<ns-goods-sku-index ref="goodsSkuIndex" @addCart="addCart"></ns-goods-sku-index>
-
-		<!-- 筛选弹出框 -->
-		<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
-			<view class="title color-tip">筛选</view>
-			<scroll-view scroll-y>
-				<!-- 包邮 -->
-			<!-- 	<view class="item-wrap">
-					<view class="label"><text>是否包邮</text></view>
-					<view class="list">
-						<uni-tag :inverted="true" text="包邮" :type="isFreeShipping ? 'primary' : 'default'" @click="isFreeShipping = !isFreeShipping" />
-					</view>
-				</view> -->
-
-				<!-- 价格筛选项 -->
-			<!-- 	<view class="item-wrap">
-					<view class="label"><text>价格区间(元)</text></view>
-					<view class="price-wrap">
-						<input class="uni-input" type="digit" v-model="minPrice" placeholder="最低价" />
-						<view class="h-line"></view>
-						<input class="uni-input" type="digit" v-model="maxPrice" placeholder="最高价" />
-					</view>
-				</view> -->
-
-				<!-- 品牌筛选项 -->
-		<!-- 		<view class="item-wrap" v-if="brandList.length > 0">
-					<view class="label"><text>品牌</text></view>
-					<view class="list">
-						<view v-for="(item, index) in brandList" :key="index">
-							<uni-tag :inverted="true" :text="item.brand_name" :type="item.brand_id == brandId ? 'primary' : 'default'" @click="brandId == item.brand_id ? (brandId = 0) : (brandId = item.brand_id)" />
-						</view>
-					</view>
-				</view> -->
-
-				<!-- 分类筛选项 -->
-				<view class="category-list-wrap">
-					<text class="first">全部分类</text>
-					<view class="class-box">
-						<view @click="selectedCategory('')" class="list-wrap">
-							<text :class="{ selected: !categoryId, 'color-base-text': !categoryId }">全部</text>
-						</view>
-						<view @click="selectedCategory(item.category_id)" v-for="(item, index) in categoryList" :key="index" class="list-wrap">
-							<text :class="{ selected: item.category_id == categoryId, 'color-base-text': item.category_id == categoryId }">{{ item.category_name }}</text>
-						</view>
-					</view>
-				</view>
-			</scroll-view>
-			<view class="footer" :class="{ 'safe-area': isIphoneX }">
-				<button type="default" class="footer-box" @click="resetData">重置</button>
-				<button type="primary" class="footer-box1" @click="screenData">确定</button>
-			</view>
-		</uni-drawer>
-		<loading-cover ref="loadingCover"></loading-cover>
-
-		<!-- #ifdef MP-WEIXIN -->
-		<!-- 小程序隐私协议 -->
-		<privacy-popup ref="privacyPopup"></privacy-popup>
-		<!-- #endif -->
-	</view>
-</template>
-
-<script>
-	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
-	import uniTag from '@/components/uni-tag/uni-tag.vue';
-	import nsGoodsSkuIndex from '@/components/ns-goods-sku/ns-goods-sku-index.vue';
-	import list from './public/js/list.js';
-
-	export default {
-		components: {
-			uniDrawer,
-			uniTag,
-			nsGoodsSkuIndex
-		},
-		data() {
-			return {};
-		},
-		mixins: [list]
-	};
-</script>
-
-<style lang="scss">
-	@import './public/css/list.scss';
-</style>
-<style scoped>
-	>>>.uni-tag--primary.uni-tag--inverted {
-		background-color: #f5f5f5 !important;
-	}
-
-	/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
-		max-height: unset !important;
-	}
+<template>
+	<page-meta :page-style="themeColor"></page-meta>
+	<view class="content">
+		<view class="head-wrap">
+			<!-- 搜索区域 -->
+			<view class="search-wrap uni-flex uni-row" style="margin-bottom: 20rpx;">
+				
+				
+			<!-- 	<view class="flex-item input-wrap">
+					<input class="uni-input" maxlength="50" v-model="keyword" @confirm="search()" placeholder="请输入您要搜索的商品" />
+					<text class="iconfont icon-sousuo3" @click.stop="search()"></text>
+				</view>
+				<view class="iconfont" :class="{ 'icon-apps': isList, 'icon-list': !isList }" @click="changeListStyle()"></view> -->
+				
+				<view style="width: 100rpx;height: 100rpx;">
+					<image :src="$util.img(merch.merch_image)" mode="widthFix" style="width: 100rpx;height: 100rpx;" />
+				</view>
+				<view style="margin-left: 20rpx;padding-top: 22rpx;">
+					<view style="line-height: 1;font-size: 32rpx;font-weight: 600;">{{merch.merch_name}}</view>
+					<view style="color:rgb(255 202 40)">
+						<text class="icox icox-xing"></text>
+						<text class="icox icox-xing"></text>
+						<text class="icox icox-xing"></text>
+						<text class="icox icox-xing"></text>
+						<text class="icox icox-xing"></text>
+					</view>
+				</view>
+				
+			</view>
+
+			<!-- 排序 -->
+			<view class="sort-wrap">
+				<view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }" @click="sortTabClick('')">
+					<text :class="{ 'color-base-text': orderType === '' }">综合</text>
+				</view>
+
+				<view :class="{ 'color-base-text': orderType === 'sale_num' }" @click="sortTabClick('sale_num')">销量
+				</view>
+
+				<view class="price-wrap" @click="sortTabClick('discount_price')">
+					<text :class="{ 'color-base-text': orderType === 'discount_price' }">价格</text>
+					<view class="iconfont-wrap">
+						<view class="iconfont icon-iconangledown-copy asc" :class="{ 'color-base-text': priceOrder === 'asc' && orderType === 'discount_price' }"></view>
+						<view class="iconfont icon-iconangledown desc" :class="{ 'color-base-text': priceOrder === 'desc' && orderType === 'discount_price' }"></view>
+					</view>
+				</view>
+
+			<!-- 	<view :class="{ 'color-base-text': orderType === 'screen' }" class="screen-wrap">
+					<text @click="sortTabClick('screen')">筛选</text>
+					<view @click="sortTabClick('screen')" class="iconfont-wrap">
+						<view class="iconfont icon-shaixuan color-tip"></view>
+					</view>
+				</view> -->
+			</view>
+		</view>
+
+		<mescroll-uni top="240" ref="mescroll" @getData="getGoodsList">
+			<block slot="list">
+				<view class="goods-list single-column" :class="{ show: isList }">
+					<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
+						<view class="goods-img">
+							<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"></image>
+							<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
+							<view class="sell-out" v-if="item.stock <= 0">
+								<text class="iconfont icon-shuqing"></text>
+							</view>
+						</view>
+						<view class="info-wrap">
+							<view class="name-wrap">
+								<view class="goods-name" :class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
+									{{ item.goods_name }}
+								</view>
+							</view>
+
+							<view class="lineheight-clear">
+								<view class="discount-price" v-if="item.isinformation == 0">
+									<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
+									<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
+									<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
+								</view>
+								<view class="discount-price" v-else>
+									<text class="price price-style large">咨询</text>
+								</view>
+								
+								
+								<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
+									<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"></image>
+								</view>
+								<view class="member-price-tag" v-else-if="item.promotion_type == 1">
+									<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"></image>
+								</view>
+							</view>
+							<view class="pro-info" v-if="item.isinformation == 0">
+								<view class="delete-price color-tip price-font" v-if="showMarketPrice(item)">
+									<text class="unit">{{ $lang('common.currencySymbol') }}</text>
+									<text>{{ showMarketPrice(item) }}</text>
+								</view>
+								<view class="block-wrap">
+									<view class="sale color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
+								</view>
+								<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
+									<!-- 购物车图标 -->
+									<view v-if="config.style == 'icon-cart'" :style="{
+											color: config.theme == 'diy' ? config.textColor : '',
+											borderColor: config.theme == 'diy' ? config.textColor : ''
+										}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
+										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
+										<view class="click-event"></view>
+									</view>
+
+									<!--加号图标 -->
+									<view v-else-if="config.style == 'icon-add'" :style="{
+											color: config.theme == 'diy' ? config.textColor : '',
+											borderColor: config.theme == 'diy' ? config.textColor : ''
+										}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
+										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
+										<view class="click-event"></view>
+									</view>
+
+									<!-- 按钮 -->
+									<view v-else-if="config.style == 'button'" :style="{
+											backgroundColor: config.theme == 'diy' ? config.bgColor : '',
+											color: config.theme == 'diy' ? config.textColor : '',
+											fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
+											padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
+										}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
+										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
+										{{ config.text }}
+										<view class="click-event"></view>
+									</view>
+
+									<!--自定义图标 -->
+									<view v-else-if="config.style == 'icon-diy'" :style="{
+											color: config.theme == 'diy' ? config.textColor : ''
+										}" class="icon-diy click-wrap" :id="'goods-' + item.id"
+										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
+										<view class="click-event"></view>
+										<diy-icon :icon="config.iconDiy.icon" :value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="goods-list double-column" :class="{ show: !isList }">
+					<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index"
+						@click="toDetail(item)" :style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }">
+						<view class="goods-img">
+							<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"></image>
+							<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
+							<view class="sell-out" v-if="item.stock <= 0">
+								<text class="iconfont icon-shuqing"></text>
+							</view>
+						</view>
+						<view class="info-wrap">
+							<view class="goods-name" :class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
+								{{ item.goods_name }}
+							</view>
+						
+							<view class="lineheight-clear">
+								<view class="discount-price" v-if="item.isinformation == 0">
+									<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
+									<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
+									<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
+								</view>
+								<view class="discount-price" v-else>
+									<text class="price price-style large">咨询</text>
+								</view>
+								<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
+									<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"></image>
+								</view>
+								<view class="member-price-tag" v-else-if="item.promotion_type == 1">
+									<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"></image>
+								</view>
+								<view class="delete-price color-tip price-font" v-if="showMarketPrice(item)">
+									<text class="unit">{{ $lang('common.currencySymbol') }}</text>
+									<text>{{ showMarketPrice(item) }}</text>
+								</view>
+							</view>
+							<view class="pro-info"  v-if="item.isinformation == 0">
+								<view class="block-wrap" >
+									<view class="sale color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
+								</view>
+								<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
+									<!-- 购物车图标 -->
+									<view v-if="config.style == 'icon-cart'" :style="{
+											color: config.theme == 'diy' ? config.textColor : '',
+											borderColor: config.theme == 'diy' ? config.textColor : ''
+										}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
+										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
+										<view class="click-event"></view>
+									</view>
+						
+									<!--加号图标 -->
+									<view v-else-if="config.style == 'icon-add'" :style="{
+											color: config.theme == 'diy' ? config.textColor : '',
+											borderColor: config.theme == 'diy' ? config.textColor : ''
+										}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
+										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
+										<view class="click-event"></view>
+									</view>
+						
+									<!-- 按钮 -->
+									<view v-else-if="config.style == 'button'" :style="{
+											backgroundColor: config.theme == 'diy' ? config.bgColor : '',
+											color: config.theme == 'diy' ? config.textColor : '',
+											fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
+											padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
+										}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
+										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
+										{{ config.text }}
+										<view class="click-event"></view>
+									</view>
+						
+									<!--自定义图标 -->
+									<view v-else-if="config.style == 'icon-diy'" :style="{
+											color: config.theme == 'diy' ? config.textColor : ''
+										}" class="icon-diy click-wrap" :id="'goods-' + item.id"
+										@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
+										<view class="click-event"></view>
+										<diy-icon :icon="config.iconDiy.icon" :value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view v-if="goodsList.length == 0 && emptyShow"><ns-empty text="暂无商品"></ns-empty></view>
+			</block>
+		</mescroll-uni>
+
+		<ns-goods-sku-index ref="goodsSkuIndex" @addCart="addCart"></ns-goods-sku-index>
+
+		<!-- 筛选弹出框 -->
+		<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
+			<view class="title color-tip">筛选</view>
+			<scroll-view scroll-y>
+				<!-- 包邮 -->
+			<!-- 	<view class="item-wrap">
+					<view class="label"><text>是否包邮</text></view>
+					<view class="list">
+						<uni-tag :inverted="true" text="包邮" :type="isFreeShipping ? 'primary' : 'default'" @click="isFreeShipping = !isFreeShipping" />
+					</view>
+				</view> -->
+
+				<!-- 价格筛选项 -->
+			<!-- 	<view class="item-wrap">
+					<view class="label"><text>价格区间(元)</text></view>
+					<view class="price-wrap">
+						<input class="uni-input" type="digit" v-model="minPrice" placeholder="最低价" />
+						<view class="h-line"></view>
+						<input class="uni-input" type="digit" v-model="maxPrice" placeholder="最高价" />
+					</view>
+				</view> -->
+
+				<!-- 品牌筛选项 -->
+		<!-- 		<view class="item-wrap" v-if="brandList.length > 0">
+					<view class="label"><text>品牌</text></view>
+					<view class="list">
+						<view v-for="(item, index) in brandList" :key="index">
+							<uni-tag :inverted="true" :text="item.brand_name" :type="item.brand_id == brandId ? 'primary' : 'default'" @click="brandId == item.brand_id ? (brandId = 0) : (brandId = item.brand_id)" />
+						</view>
+					</view>
+				</view> -->
+
+				<!-- 分类筛选项 -->
+				<view class="category-list-wrap">
+					<text class="first">全部分类</text>
+					<view class="class-box">
+						<view @click="selectedCategory('')" class="list-wrap">
+							<text :class="{ selected: !categoryId, 'color-base-text': !categoryId }">全部</text>
+						</view>
+						<view @click="selectedCategory(item.category_id)" v-for="(item, index) in categoryList" :key="index" class="list-wrap">
+							<text :class="{ selected: item.category_id == categoryId, 'color-base-text': item.category_id == categoryId }">{{ item.category_name }}</text>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+			<view class="footer" :class="{ 'safe-area': isIphoneX }">
+				<button type="default" class="footer-box" @click="resetData">重置</button>
+				<button type="primary" class="footer-box1" @click="screenData">确定</button>
+			</view>
+		</uni-drawer>
+		<loading-cover ref="loadingCover"></loading-cover>
+
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<privacy-popup ref="privacyPopup"></privacy-popup>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
+	import uniTag from '@/components/uni-tag/uni-tag.vue';
+	import nsGoodsSkuIndex from '@/components/ns-goods-sku/ns-goods-sku-index.vue';
+	import list from './public/js/list.js';
+
+	export default {
+		components: {
+			uniDrawer,
+			uniTag,
+			nsGoodsSkuIndex
+		},
+		data() {
+			return {};
+		},
+		mixins: [list]
+	};
+</script>
+
+<style lang="scss">
+	@import './public/css/list.scss';
+</style>
+<style lang="scss" scoped>
+	>>>.uni-tag--primary.uni-tag--inverted {
+		background-color: #f5f5f5 !important;
+	}
+
+	/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
+		max-height: unset !important;
+	}
 </style>
\ No newline at end of file
diff --git a/pages_promotion/merch/merchcategory.vue b/pages_promotion/merch/merchcategory.vue
index 13fa130..5954e3b 100644
--- a/pages_promotion/merch/merchcategory.vue
+++ b/pages_promotion/merch/merchcategory.vue
@@ -13,7 +13,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="index" :class="[
+							<view class="category-item" v-for="(item, index) in categoryTree" :key="item.category_id || index" :class="[
 									{ select: select == index },
 								]" @click="switchOneCategory(index)">
 								<view class="">{{ item.category_name }}</view>
@@ -26,7 +26,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" :id="'category-' + index" v-if="item.child_list.length > 0">
+							<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="item-wrap category">
 									<view class="category-title">{{ item.category_name }}</view>
diff --git a/pages_promotion/point/detail.vue b/pages_promotion/point/detail.vue
index 48065c5..a7621da 100644
--- a/pages_promotion/point/detail.vue
+++ b/pages_promotion/point/detail.vue
@@ -1,506 +1,506 @@
-<template>
-	<page-meta :page-style="themeColor"></page-meta>
-	<view>
-		<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
-			<view class="goods-container">
-				<view class="goods-media">
-					<!-- #ifdef H5 -->
-					<cover-view class="share">
-						<view class="share_left"><text class="iconfont icon-back_light" @click="$util.goBack()"></text></view>
-					</cover-view>
-					<!-- #endif -->
-
-					<view class="goods-img show">
-						<swiper class="swiper">
-							<swiper-item :item-id="'goods_id_' + pointInfo.type">
-								<view class="item" v-if="pointInfo.type == 2">
-									<image class="adv-pic" :src="pointInfo.image ? $util.img(pointInfo.image) : $util.img('public/uniapp/point/coupon.png')" @error="imageError($util.img('public/uniapp/point/coupon.png'))" mode="aspectFit"/>
-								</view>
-								<view class="item" v-else-if="pointInfo.type == 3">
-									<image class="adv-pic" :src="pointInfo.image ? $util.img(pointInfo.image) : $util.img('public/uniapp/point/hongbao.png')" @error="imageError($util.img('public/uniapp/point/hongbao.png'))" mode="aspectFit"/>
-								</view>
-								<view class="item" v-else><image class="adv-pic" :src="$util.img(pointInfo.image)" @error="imageError()" mode="aspectFit"></image></view>
-							</swiper-item>
-						</swiper>
-					</view>
-				</view>
-				<view class="group-wrap padding-top">
-					<view class="goods-module-wrap">
-						<text class="price-symbol ">{{ pointInfo.point }}积分</text>
-						<template v-if="pointInfo.exchange_price != '0.00' && pointInfo.pay_type > 0">
-							<text class="price-symbol ">+{{ $lang('common.currencySymbol') }}{{ pointInfo.exchange_price }}</text>
-						</template>
-
-						<view class="market-price-wrap" v-if="pointInfo.price">
-							<text class="unit">{{ $lang('common.currencySymbol') }}</text>
-							<text class="money">{{ pointInfo.price }}</text>
-						</view>
-
-						<view class="follow-and-share" v-if="pointInfo.stock_show == 1 || pointInfo.stock_show == undefined">
-							<text class="color-tip" v-if="pointInfo.pointCoupon != 1">库存:{{ pointInfo.stock }}{{ pointInfo.stock >= 0 ? pointInfo.unit : '' }}</text>
-							<text class="color-tip" v-else>库存:无限{{ pointInfo.stock >= 0 ? pointInfo.unit : '' }}</text>
-						</view>
-					</view>
-					<view class="goods-module-wrap info">
-						<text class="sku-name-wrap" v-if="pointInfo.type == 1">{{ pointInfo.goods_name }}</text>
-						<text class="sku-name-wrap" v-else>{{ pointInfo.name }}</text>
-					</view>
-					<view class="coupon-desc">
-						<view v-if="pointInfo.balance && pointInfo.balance > 0" class="color-tip">内含{{ pointInfo.balance }}元</view>
-						<view v-if="pointInfo.coupon_type == 'random'" class="color-tip">无门槛优惠券</view>
-						<view v-if="pointInfo.coupon_type == 'reward'" class="color-tip">{{ '满' + pointInfo.at_least + '减' + pointInfo.money }}</view>
-						<view v-if="pointInfo.coupon_type == 'discount'" class="color-tip">
-							满{{ pointInfo.at_least }}元
-							<text>{{ pointInfo.discount }}折</text>
-						</view>
-						<view v-if="pointInfo.coupon_type == 'discount'" class="color-tip">最多优惠{{ pointInfo.discount_limit }}元</view>
-						<view class="time color-tip" v-if="pointInfo.coupon_type">
-							{{ pointInfo.validity_type == 1 ? '领取之日起' + pointInfo.fixed_term + '天内有效' : $util.timeStampTurnTime(pointInfo.end_time) + '到期' }}
-						</view>
-					</view>
-				</view>
-				<!-- 添加二维码 start -->
-				<view class="detail-community" v-if="pointInfo.qr_data && pointInfo.qr_data.qr_state == 1">
-					<view class="community-box">
-						<image :src="$util.img('public/uniapp/goods/detail_erweiImage.png')" mode="aspectFill"></image>
-						<view class="community-content">
-							<view class="community-title">{{ pointInfo.qr_data.qr_name }}</view>
-							<view class="community-txt">{{ pointInfo.qr_data.community_describe }}</view>
-						</view>
-					</view>
-					<view class="community-btn" @click="onCommunity()">添加</view>
-				</view>
-
-				<!-- 促销 -->
-				<view class="community-model" @touchmove.prevent.stop @click.stop="onCloseCommunity()" v-show="isCommunity">
-					<view class="community-model-content" @click.stop>
-						<view class="community-model-content-radius"><view>添加社群</view></view>
-						<view class="community-model-content-draw" v-if="pointInfo.qr_data && pointInfo.qr_data.qr_img">
-							<image
-								:src="
-									pointInfo.qr_data.qr_img != '' && pointInfo.qr_data.qr_state == 1
-										? $util.img(pointInfo.qr_data.qr_img)
-										: $util.img('public/uniapp/goods/detail_erweiImage.png')
-								"
-								mode="aspectFill"
-								show-menu-by-longpress="true"/>
-						</view>
-						<view class="community-model-content-text">长按识别二维码，添加社群</view>
-					</view>
-					<view class="community-model-close" @click.stop="onCloseCommunity()"><text class="iconfont icon-close"></text></view>
-				</view>
-				<!-- 添加二维码 end -->
-				<block v-if="pointInfo.type == 1">
-					<view class="newdetail margin-bottom">
-						<!-- 已选规格 -->
-						<view class="item selected-sku-spec" v-if="pointInfo.sku_spec_format" @click="exchange">
-							<view class="label">选择</view>
-							<view class="box">
-								<text v-for="(item, index) in pointInfo.sku_spec_format" :key="index">{{ item.spec_name }}/{{ item.spec_value_name }}</text>
-							</view>
-							<text class="iconfont icon-right"></text>
-						</view>
-
-						<view class="item goods-attribute" @click="openAttributePopup()" v-if="pointInfo.goods_attr_format && pointInfo.goods_attr_format.length > 0">
-							<view class="label">属性</view>
-							<view class="box">
-								<text v-for="(item, index) in pointInfo.goods_attr_format" :key="index" v-if="index < 2">{{ item.attr_name }}: {{ item.attr_value_name }}</text>
-							</view>
-							<text class="iconfont icon-right"></text>
-						</view>
-					</view>
-
-					<!-- 商品属性 -->
-					<view @touchmove.prevent.stop>
-						<uni-popup ref="attributePopup" type="bottom">
-							<view class="goods-attribute-popup-layer popup-layer">
-								<view class="head-wrap" @click="closeAttributePopup()">
-									<text>商品属性</text>
-									<text class="iconfont icon-close"></text>
-								</view>
-								<scroll-view scroll-y class="goods-attribute-body">
-									<view class="item" v-for="(item, index) in pointInfo.goods_attr_format" :key="index">
-										<text class="attr-name">{{ item.attr_name }}</text>
-										<text class="value-name">{{ item.attr_value_name }}</text>
-									</view>
-								</scroll-view>
-								<view class="button-box"><button type="primary" @click="closeAttributePopup()">确定</button></view>
-							</view>
-						</uni-popup>
-					</view>
-					<!-- 商品服务 -->
-					<view @touchmove.prevent.stop>
-						<uni-popup ref="merchantsServicePopup" type="bottom">
-							<view class="goods-merchants-service-popup-layer popup-layer">
-								<view class="head-wrap" @click="closeMerchantsServicePopup()">
-									<text>商品服务</text>
-									<text class="iconfont icon-close"></text>
-								</view>
-								<scroll-view scroll-y>
-									<view class="item" :class="{ 'empty-desc': !item.desc }" v-for="(item, index) in pointInfo.goods_service" :key="index">
-										<view class="iconfont icon-dui "></view>
-										<view class="info-wrap">
-											<text class="title">{{ item.service_name }}</text>
-											<text class="describe" v-if="item.desc">{{ item.desc }}</text>
-										</view>
-									</view>
-								</scroll-view>
-								<view class="button-box"><button type="primary" @click="closeMerchantsServicePopup()">确定</button></view>
-							</view>
-						</uni-popup>
-					</view>
-				</block>
-
-				<!-- 详情 -->
-				<view class="goods-detail-tab">
-					<view class="detail-tab"><view class="tab-item">兑换详情</view></view>
-
-					<view class="detail-content">
-						<view class="detail-content-item">
-							<view class="goods-details" v-if="pointInfo.content"><rich-text :nodes="pointInfo.content"></rich-text></view>
-							<view class="goods-details active" v-else>暂无兑换详情！</view>
-						</view>
-					</view>
-				</view>
-
-				<!-- SKU选择 -->
-				<ns-goods-sku
-					v-if="pointInfo.id"
-					ref="goodsSku"
-					@refresh="refreshGoodsSkuDetail"
-					:goods-detail="pointInfo"
-					:goods-id="pointInfo.goods_id"
-					:max-buy="pointInfo.max_buy"
-					:min-buy="pointInfo.min_buy"
-					source="point"
-				></ns-goods-sku>
-			</view>
-		</view>
-
-		<view class="detail-swap" @click="exchange()" :class="{ 'position-bottom': isIphoneX }" v-if="!isLogin"><button type="primary" >登录之后方可兑换</button></view>
-		<block v-else>
-			<view class="detail-swap" :class="{ 'position-bottom': isIphoneX }" v-if="pointInfo.stock == 0"><button disabled>库存不足</button></view>
-			<view class="detail-swap" :class="{ 'position-bottom': isIphoneX }" v-else-if="enough"><button disabled>积分不足</button></view>
-			<view class="detail-swap" @click="exchange()" :class="{ 'position-bottom': isIphoneX }" v-else><button type="primary" hover-class="none">兑换</button></view>
-		</block>
-
-		<loading-cover ref="loadingCover"></loading-cover>
-		<ns-login ref="login"></ns-login>
-		<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
-		
-
-		<!-- #ifdef MP-WEIXIN -->
-		<!-- 小程序隐私协议 -->
-		<privacy-popup ref="privacyPopup"></privacy-popup>
-		<!-- #endif -->
-	</view>
-</template>
-<script>
-import uniPopup from '@/components/uni-popup/uni-popup.vue';
-import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
-import htmlParser from '@/common/js/html-parser';
-import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
-import toTop from '@/components/toTop/toTop.vue';
-import scroll from '@/common/js/scroll-view.js';
-export default {
-	components: {
-		uniPopup,
-		uniNumberBox,
-		nsGoodsSku,
-		toTop
-	},
-	data() {
-		return {
-			id: 0,
-			pointInfo: {
-				image: '',
-				pointCoupon: 0
-			},
-			isIphoneX: false, //判断手机是否是iphoneX以上
-			isLogin: false,
-			memberPoint: 0,
-			isCommunity: false, //社群弹窗
-			//分享时详情所用图片
-			shareImg: ''
-		};
-	},
-	mixins: [scroll],
-	onLoad(options) {
-		//小程序分享接收source_member
-		if (options.source_member) {
-			uni.setStorageSync('source_member', options.source_member);
-		}
-		// 小程序扫码进入，接收source_member
-		if (options.scene) {
-			var sceneParams = decodeURIComponent(options.scene);
-			sceneParams = sceneParams.split('&');
-			if (sceneParams.length) {
-				sceneParams.forEach(item => {
-					if (item.indexOf('sku_id') != -1) this.skuId = item.split('-')[1];
-					if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
-					if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
-				});
-			}
-		}
-		this.isIphoneX = this.$util.uniappIsIPhoneX();
-		if (options.id) {
-			this.id = options.id;
-			this.getPointInfo();
-		} else {
-			this.$util.redirectTo('/pages_promotion/point/list', {}, 'redirectTo');
-		}
-	},
-	onShow() {
-		//记录分享关系
-		if (this.storeToken && uni.getStorageSync('source_member')) {
-			this.$util.onSourceMember(uni.getStorageSync('source_member'));
-		}
-	},
-	/**
-	 * 转发分享
-	 */
-	onShareAppMessage(res) {
-		var title = '';
-		var imageUrl = '';
-		switch (this.pointInfo.type) {
-			case 1: //商品
-				title = this.pointInfo.sku_name;
-				imageUrl = this.pointInfo.sku_image;
-				break;
-			case 2: //优惠券
-			case 3: //红包
-				title = this.pointInfo.name;
-				imageUrl = this.pointInfo.image;
-				break;
-		}
-		title = '仅需' + this.pointInfo.point + '积分即可兑换' + title;
-		imageUrl = this.$util.img(imageUrl);
-		var route = this.$util.getCurrentShareRoute(this.memberInfo ? this.memberInfo.member_id : 0);
-		var path = route.path;
-		return {
-			title: title,
-			path: path,
-			imageUrl: imageUrl,
-			success: res => {},
-			fail: res => {}
-		};
-	},
-
-	// 分享到微信朋友圈
-	// #ifdef MP-WEIXIN
-	onShareTimeline() {
-		var title = '';
-		var imageUrl = '';
-		switch (this.pointInfo.type) {
-			case 1: //商品
-				title = this.pointInfo.sku_name;
-				imageUrl = this.pointInfo.sku_image;
-				break;
-			case 2: //优惠券
-			case 3: //红包
-				title = this.pointInfo.name;
-				imageUrl = this.pointInfo.image;
-				break;
-		}
-		title = '仅需' + this.pointInfo.point + '积分即可兑换' + title;
-		imageUrl = this.$util.img(imageUrl);
-		var route = this.$util.getCurrentShareRoute(this.memberInfo ? this.memberInfo.member_id : 0);
-		var query = route.query;
-		return {
-			title: title,
-			query: query,
-			imageUrl: imageUrl
-		};
-	},
-	// #endif
-	computed: {
-		enough() {
-			return parseInt(this.pointInfo.point) > parseInt(this.memberPoint);
-		}
-	},
-	watch: {
-		storeToken: function(nVal, oVal) {
-			if (nVal) {
-				this.isLogin = true;
-				this.getPointInfo();
-			}
-		}
-	},
-	methods: {
-		//获取个人积分信息
-		getAccountInfo(e, f) {
-			if (this.storeToken) {
-				this.$api.sendRequest({
-					url: '/api/memberaccount/info',
-					data: {
-						account_type: 'point'
-					},
-					success: res => {
-						if (res.code == 0 && res.data) {
-							this.isLogin = true;
-							this.memberPoint = res.data.point;
-							let point_num = Math.floor(parseInt(res.data.point) / f);
-							this.Max = e >= point_num ? point_num : e;
-						} else {
-							this.$util.showToast({
-								title: res.message
-							});
-						}
-						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
-					}
-				});
-			} else {
-				this.isLogin = false;
-				if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
-			}
-		},
-
-		//获取详情
-		getPointInfo() {
-			this.$api.sendRequest({
-				url: '/pointexchange/api/goods/detail',
-				data: {
-					id: this.id
-				},
-				success: res => {
-					if (res.code >= 0 && res.data.length !== 0) {
-						this.pointInfo = res.data;
-
-						//获取分享图片
-						if (this.pointInfo.image) {
-							this.shareImg = this.$util.img(this.pointInfo.image);
-						} else {
-							this.shareImg = this.$util.img('public/uniapp/blindbox/default.png');
-						}
-
-						this.$langConfig.title(this.pointInfo.name);
-						let save = this.pointInfo.type == 2 ? this.pointInfo.count : this.pointInfo.stock;
-
-						if (this.pointInfo.type == 2 && this.pointInfo.stock == -1) {
-							this.pointInfo.pointCoupon = 1;
-						}
-
-						if (this.pointInfo.type == 1) {
-							this.pointInfo.image = this.pointInfo['sku_image'];
-
-							// 当前商品SKU规格
-							if (this.pointInfo.sku_spec_format) this.pointInfo.sku_spec_format = JSON.parse(this.pointInfo.sku_spec_format);
-
-							// 商品属性
-							if (this.pointInfo.goods_attr_format) {
-								let goods_attr_format = JSON.parse(this.pointInfo.goods_attr_format);
-								this.pointInfo.goods_attr_format = this.$util.unique(goods_attr_format, 'attr_id');
-								for (var i = 0; i < this.pointInfo.goods_attr_format.length; i++) {
-									for (var j = 0; j < goods_attr_format.length; j++) {
-										if (
-											this.pointInfo.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id &&
-											this.pointInfo.goods_attr_format[i].attr_value_id != goods_attr_format[j].attr_value_id
-										) {
-											this.pointInfo.goods_attr_format[i].attr_value_name += '、' + goods_attr_format[j].attr_value_name;
-										}
-									}
-								}
-							}
-							if (this.pointInfo.goods_spec_format) this.pointInfo.goods_spec_format = JSON.parse(this.pointInfo.goods_spec_format);
-						}
-
-						this.pointInfo.unit = this.pointInfo.unit || '件';
-
-						// 商品详情
-						if (this.pointInfo.content) this.pointInfo.content = htmlParser(this.pointInfo.content);
-
-						this.getAccountInfo(save, this.pointInfo.point);
-
-					} else {
-						this.$util.showToast({
-							title: res.message
-						});
-						setTimeout(() => {
-							this.$util.redirectTo('/pages_promotion/point/list', {}, 'redirectTo');
-						}, 1000);
-					}
-				}
-			});
-		},
-
-		// 立即购买
-		exchange() {
-			if (!this.storeToken) {
-				this.$refs.login.open('/pages_promotion/point/detail?id=' + this.id);
-				return;
-			}
-			this.$refs.goodsSku.show('point');
-		},
-
-		/**
-		 * 刷新商品详情数据
-		 * @param {Object} pointInfo
-		 */
-		refreshGoodsSkuDetail(pointInfo) {
-			Object.assign(this.pointInfo, pointInfo);
-			this.pointInfo.unit = this.pointInfo.unit || '件';
-		},
-		//服务
-		openMerchantsServicePopup() {
-			this.$refs.merchantsServicePopup.open();
-		},
-		closeMerchantsServicePopup() {
-			this.$refs.merchantsServicePopup.close();
-		},
-		//属性
-		openAttributePopup() {
-			this.$refs.attributePopup.open();
-		},
-		closeAttributePopup() {
-			this.$refs.attributePopup.close();
-		},
-		imageError() {
-			this.pointInfo.image = this.$util.getDefaultImage().goods;
-			this.$forceUpdate();
-		},
-		//添加福利群
-		onCommunity() {
-			this.isCommunity = true;
-		},
-		onCloseCommunity() {
-			this.isCommunity = false;
-		}
-	}
-};
-</script>
-
-<style lang="scss">
-@import '@/common/css/goods_detail.scss';
-.group-wrap .goods-module-wrap.info {
-	padding-bottom: 10rpx;
-}
-.group-wrap {
-	padding-bottom: 20rpx;
-}
-
-.detail-swap {
-	box-sizing: border-box;
-	background: #ffffff;
-	position: fixed;
-	left: 0;
-	bottom: 0rpx;
-	width: 100%;
-	padding: 20rpx 0;
-	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)) !important;
-	padding-bottom: calc(20rpx + env(safe-area-inset-bottom)) !important;
-
-	button {
-		height: 80rpx;
-		line-height: 80rpx;
-		border-radius: 10rpx;
-		&[type='primary'] {
-			background-color: var(--goods-btn-color);
-		}
-	}
-}
-</style>
-<style scoped>
-/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
-	max-height: unset !important;
-}
-</style>
+<template>
+	<page-meta :page-style="themeColor"></page-meta>
+	<view>
+		<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
+			<view class="goods-container">
+				<view class="goods-media">
+					<!-- #ifdef H5 -->
+					<cover-view class="share">
+						<view class="share_left"><text class="iconfont icon-back_light" @click="$util.goBack()"></text></view>
+					</cover-view>
+					<!-- #endif -->
+
+					<view class="goods-img show">
+						<swiper class="swiper">
+							<swiper-item :item-id="'goods_id_' + pointInfo.type">
+								<view class="item" v-if="pointInfo.type == 2">
+									<image class="adv-pic" :src="pointInfo.image ? $util.img(pointInfo.image) : $util.img('public/uniapp/point/coupon.png')" @error="imageError($util.img('public/uniapp/point/coupon.png'))" mode="aspectFit"/>
+								</view>
+								<view class="item" v-else-if="pointInfo.type == 3">
+									<image class="adv-pic" :src="pointInfo.image ? $util.img(pointInfo.image) : $util.img('public/uniapp/point/hongbao.png')" @error="imageError($util.img('public/uniapp/point/hongbao.png'))" mode="aspectFit"/>
+								</view>
+								<view class="item" v-else><image class="adv-pic" :src="$util.img(pointInfo.image)" @error="imageError()" mode="aspectFit"></image></view>
+							</swiper-item>
+						</swiper>
+					</view>
+				</view>
+				<view class="group-wrap padding-top">
+					<view class="goods-module-wrap">
+						<text class="price-symbol ">{{ pointInfo.point }}积分</text>
+						<template v-if="pointInfo.exchange_price != '0.00' && pointInfo.pay_type > 0">
+							<text class="price-symbol ">+{{ $lang('common.currencySymbol') }}{{ pointInfo.exchange_price }}</text>
+						</template>
+
+						<view class="market-price-wrap" v-if="pointInfo.price">
+							<text class="unit">{{ $lang('common.currencySymbol') }}</text>
+							<text class="money">{{ pointInfo.price }}</text>
+						</view>
+
+						<view class="follow-and-share" v-if="pointInfo.stock_show == 1 || pointInfo.stock_show == undefined">
+							<text class="color-tip" v-if="pointInfo.pointCoupon != 1">库存:{{ pointInfo.stock }}{{ pointInfo.stock >= 0 ? pointInfo.unit : '' }}</text>
+							<text class="color-tip" v-else>库存:无限{{ pointInfo.stock >= 0 ? pointInfo.unit : '' }}</text>
+						</view>
+					</view>
+					<view class="goods-module-wrap info">
+						<text class="sku-name-wrap" v-if="pointInfo.type == 1">{{ pointInfo.goods_name }}</text>
+						<text class="sku-name-wrap" v-else>{{ pointInfo.name }}</text>
+					</view>
+					<view class="coupon-desc">
+						<view v-if="pointInfo.balance && pointInfo.balance > 0" class="color-tip">内含{{ pointInfo.balance }}元</view>
+						<view v-if="pointInfo.coupon_type == 'random'" class="color-tip">无门槛优惠券</view>
+						<view v-if="pointInfo.coupon_type == 'reward'" class="color-tip">{{ '满' + pointInfo.at_least + '减' + pointInfo.money }}</view>
+						<view v-if="pointInfo.coupon_type == 'discount'" class="color-tip">
+							满{{ pointInfo.at_least }}元
+							<text>{{ pointInfo.discount }}折</text>
+						</view>
+						<view v-if="pointInfo.coupon_type == 'discount'" class="color-tip">最多优惠{{ pointInfo.discount_limit }}元</view>
+						<view class="time color-tip" v-if="pointInfo.coupon_type">
+							{{ pointInfo.validity_type == 1 ? '领取之日起' + pointInfo.fixed_term + '天内有效' : $util.timeStampTurnTime(pointInfo.end_time) + '到期' }}
+						</view>
+					</view>
+				</view>
+				<!-- 添加二维码 start -->
+				<view class="detail-community" v-if="pointInfo.qr_data && pointInfo.qr_data.qr_state == 1">
+					<view class="community-box">
+						<image :src="$util.img('public/uniapp/goods/detail_erweiImage.png')" mode="aspectFill"></image>
+						<view class="community-content">
+							<view class="community-title">{{ pointInfo.qr_data.qr_name }}</view>
+							<view class="community-txt">{{ pointInfo.qr_data.community_describe }}</view>
+						</view>
+					</view>
+					<view class="community-btn" @click="onCommunity()">添加</view>
+				</view>
+
+				<!-- 促销 -->
+				<view class="community-model" @touchmove.prevent.stop @click.stop="onCloseCommunity()" v-show="isCommunity">
+					<view class="community-model-content" @click.stop>
+						<view class="community-model-content-radius"><view>添加社群</view></view>
+						<view class="community-model-content-draw" v-if="pointInfo.qr_data && pointInfo.qr_data.qr_img">
+							<image
+								:src="
+									pointInfo.qr_data.qr_img != '' && pointInfo.qr_data.qr_state == 1
+										? $util.img(pointInfo.qr_data.qr_img)
+										: $util.img('public/uniapp/goods/detail_erweiImage.png')
+								"
+								mode="aspectFill"
+								show-menu-by-longpress="true"/>
+						</view>
+						<view class="community-model-content-text">长按识别二维码，添加社群</view>
+					</view>
+					<view class="community-model-close" @click.stop="onCloseCommunity()"><text class="iconfont icon-close"></text></view>
+				</view>
+				<!-- 添加二维码 end -->
+				<block v-if="pointInfo.type == 1">
+					<view class="newdetail margin-bottom">
+						<!-- 已选规格 -->
+						<view class="item selected-sku-spec" v-if="pointInfo.sku_spec_format" @click="exchange">
+							<view class="label">选择</view>
+							<view class="box">
+								<text v-for="(item, index) in pointInfo.sku_spec_format" :key="index">{{ item.spec_name }}/{{ item.spec_value_name }}</text>
+							</view>
+							<text class="iconfont icon-right"></text>
+						</view>
+
+						<view class="item goods-attribute" @click="openAttributePopup()" v-if="pointInfo.goods_attr_format && pointInfo.goods_attr_format.length > 0">
+							<view class="label">属性</view>
+							<view class="box">
+								<text v-for="(item, index) in pointInfo.goods_attr_format" :key="index" v-if="index < 2">{{ item.attr_name }}: {{ item.attr_value_name }}</text>
+							</view>
+							<text class="iconfont icon-right"></text>
+						</view>
+					</view>
+
+					<!-- 商品属性 -->
+					<view @touchmove.prevent.stop>
+						<uni-popup ref="attributePopup" type="bottom">
+							<view class="goods-attribute-popup-layer popup-layer">
+								<view class="head-wrap" @click="closeAttributePopup()">
+									<text>商品属性</text>
+									<text class="iconfont icon-close"></text>
+								</view>
+								<scroll-view scroll-y class="goods-attribute-body">
+									<view class="item" v-for="(item, index) in pointInfo.goods_attr_format" :key="index">
+										<text class="attr-name">{{ item.attr_name }}</text>
+										<text class="value-name">{{ item.attr_value_name }}</text>
+									</view>
+								</scroll-view>
+								<view class="button-box"><button type="primary" @click="closeAttributePopup()">确定</button></view>
+							</view>
+						</uni-popup>
+					</view>
+					<!-- 商品服务 -->
+					<view @touchmove.prevent.stop>
+						<uni-popup ref="merchantsServicePopup" type="bottom">
+							<view class="goods-merchants-service-popup-layer popup-layer">
+								<view class="head-wrap" @click="closeMerchantsServicePopup()">
+									<text>商品服务</text>
+									<text class="iconfont icon-close"></text>
+								</view>
+								<scroll-view scroll-y>
+									<view class="item" :class="{ 'empty-desc': !item.desc }" v-for="(item, index) in pointInfo.goods_service" :key="index">
+										<view class="iconfont icon-dui "></view>
+										<view class="info-wrap">
+											<text class="title">{{ item.service_name }}</text>
+											<text class="describe" v-if="item.desc">{{ item.desc }}</text>
+										</view>
+									</view>
+								</scroll-view>
+								<view class="button-box"><button type="primary" @click="closeMerchantsServicePopup()">确定</button></view>
+							</view>
+						</uni-popup>
+					</view>
+				</block>
+
+				<!-- 详情 -->
+				<view class="goods-detail-tab">
+					<view class="detail-tab"><view class="tab-item">兑换详情</view></view>
+
+					<view class="detail-content">
+						<view class="detail-content-item">
+							<view class="goods-details" v-if="pointInfo.content"><rich-text :nodes="pointInfo.content"></rich-text></view>
+							<view class="goods-details active" v-else>暂无兑换详情！</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- SKU选择 -->
+				<ns-goods-sku
+					v-if="pointInfo.id"
+					ref="goodsSku"
+					@refresh="refreshGoodsSkuDetail"
+					:goods-detail="pointInfo"
+					:goods-id="pointInfo.goods_id"
+					:max-buy="pointInfo.max_buy"
+					:min-buy="pointInfo.min_buy"
+					source="point"
+				></ns-goods-sku>
+			</view>
+		</view>
+
+		<view class="detail-swap" @click="exchange()" :class="{ 'position-bottom': isIphoneX }" v-if="!isLogin"><button type="primary" >登录之后方可兑换</button></view>
+		<block v-else>
+			<view class="detail-swap" :class="{ 'position-bottom': isIphoneX }" v-if="pointInfo.stock == 0"><button disabled>库存不足</button></view>
+			<view class="detail-swap" :class="{ 'position-bottom': isIphoneX }" v-else-if="enough"><button disabled>积分不足</button></view>
+			<view class="detail-swap" @click="exchange()" :class="{ 'position-bottom': isIphoneX }" v-else><button type="primary" hover-class="none">兑换</button></view>
+		</block>
+
+		<loading-cover ref="loadingCover"></loading-cover>
+		<ns-login ref="login"></ns-login>
+		<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
+		
+
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<privacy-popup ref="privacyPopup"></privacy-popup>
+		<!-- #endif -->
+	</view>
+</template>
+<script>
+import uniPopup from '@/components/uni-popup/uni-popup.vue';
+import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
+import htmlParser from '@/common/js/html-parser';
+import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
+import toTop from '@/components/toTop/toTop.vue';
+import scroll from '@/common/js/scroll-view.js';
+export default {
+	components: {
+		uniPopup,
+		uniNumberBox,
+		nsGoodsSku,
+		toTop
+	},
+	data() {
+		return {
+			id: 0,
+			pointInfo: {
+				image: '',
+				pointCoupon: 0
+			},
+			isIphoneX: false, //判断手机是否是iphoneX以上
+			isLogin: false,
+			memberPoint: 0,
+			isCommunity: false, //社群弹窗
+			//分享时详情所用图片
+			shareImg: ''
+		};
+	},
+	mixins: [scroll],
+	onLoad(options) {
+		//小程序分享接收source_member
+		if (options.source_member) {
+			uni.setStorageSync('source_member', options.source_member);
+		}
+		// 小程序扫码进入，接收source_member
+		if (options.scene) {
+			var sceneParams = decodeURIComponent(options.scene);
+			sceneParams = sceneParams.split('&');
+			if (sceneParams.length) {
+				sceneParams.forEach(item => {
+					if (item.indexOf('sku_id') != -1) this.skuId = item.split('-')[1];
+					if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
+					if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
+				});
+			}
+		}
+		this.isIphoneX = this.$util.uniappIsIPhoneX();
+		if (options.id) {
+			this.id = options.id;
+			this.getPointInfo();
+		} else {
+			this.$util.redirectTo('/pages_promotion/point/list', {}, 'redirectTo');
+		}
+	},
+	onShow() {
+		//记录分享关系
+		if (this.storeToken && uni.getStorageSync('source_member')) {
+			this.$util.onSourceMember(uni.getStorageSync('source_member'));
+		}
+	},
+	/**
+	 * 转发分享
+	 */
+	onShareAppMessage(res) {
+		var title = '';
+		var imageUrl = '';
+		switch (this.pointInfo.type) {
+			case 1: //商品
+				title = this.pointInfo.sku_name;
+				imageUrl = this.pointInfo.sku_image;
+				break;
+			case 2: //优惠券
+			case 3: //红包
+				title = this.pointInfo.name;
+				imageUrl = this.pointInfo.image;
+				break;
+		}
+		title = '仅需' + this.pointInfo.point + '积分即可兑换' + title;
+		imageUrl = this.$util.img(imageUrl);
+		var route = this.$util.getCurrentShareRoute(this.memberInfo ? this.memberInfo.member_id : 0);
+		var path = route.path;
+		return {
+			title: title,
+			path: path,
+			imageUrl: imageUrl,
+			success: res => {},
+			fail: res => {}
+		};
+	},
+
+	// 分享到微信朋友圈
+	// #ifdef MP-WEIXIN
+	onShareTimeline() {
+		var title = '';
+		var imageUrl = '';
+		switch (this.pointInfo.type) {
+			case 1: //商品
+				title = this.pointInfo.sku_name;
+				imageUrl = this.pointInfo.sku_image;
+				break;
+			case 2: //优惠券
+			case 3: //红包
+				title = this.pointInfo.name;
+				imageUrl = this.pointInfo.image;
+				break;
+		}
+		title = '仅需' + this.pointInfo.point + '积分即可兑换' + title;
+		imageUrl = this.$util.img(imageUrl);
+		var route = this.$util.getCurrentShareRoute(this.memberInfo ? this.memberInfo.member_id : 0);
+		var query = route.query;
+		return {
+			title: title,
+			query: query,
+			imageUrl: imageUrl
+		};
+	},
+	// #endif
+	computed: {
+		enough() {
+			return parseInt(this.pointInfo.point) > parseInt(this.memberPoint);
+		}
+	},
+	watch: {
+		storeToken: function(nVal, oVal) {
+			if (nVal) {
+				this.isLogin = true;
+				this.getPointInfo();
+			}
+		}
+	},
+	methods: {
+		//获取个人积分信息
+		getAccountInfo(e, f) {
+			if (this.storeToken) {
+				this.$api.sendRequest({
+					url: '/api/memberaccount/info',
+					data: {
+						account_type: 'point'
+					},
+					success: res => {
+						if (res.code == 0 && res.data) {
+							this.isLogin = true;
+							this.memberPoint = res.data.point;
+							let point_num = Math.floor(parseInt(res.data.point) / f);
+							this.Max = e >= point_num ? point_num : e;
+						} else {
+							this.$util.showToast({
+								title: res.message
+							});
+						}
+						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+					}
+				});
+			} else {
+				this.isLogin = false;
+				if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+			}
+		},
+
+		//获取详情
+		getPointInfo() {
+			this.$api.sendRequest({
+				url: '/pointexchange/api/goods/detail',
+				data: {
+					id: this.id
+				},
+				success: res => {
+					if (res.code >= 0 && res.data.length !== 0) {
+						this.pointInfo = res.data;
+
+						//获取分享图片
+						if (this.pointInfo.image) {
+							this.shareImg = this.$util.img(this.pointInfo.image);
+						} else {
+							this.shareImg = this.$util.img('public/uniapp/blindbox/default.png');
+						}
+
+						this.$langConfig.title(this.pointInfo.name);
+						let save = this.pointInfo.type == 2 ? this.pointInfo.count : this.pointInfo.stock;
+
+						if (this.pointInfo.type == 2 && this.pointInfo.stock == -1) {
+							this.pointInfo.pointCoupon = 1;
+						}
+
+						if (this.pointInfo.type == 1) {
+							this.pointInfo.image = this.pointInfo['sku_image'];
+
+							// 当前商品SKU规格
+							if (this.pointInfo.sku_spec_format) this.pointInfo.sku_spec_format = JSON.parse(this.pointInfo.sku_spec_format);
+
+							// 商品属性
+							if (this.pointInfo.goods_attr_format) {
+								let goods_attr_format = JSON.parse(this.pointInfo.goods_attr_format);
+								this.pointInfo.goods_attr_format = this.$util.unique(goods_attr_format, 'attr_id');
+								for (var i = 0; i < this.pointInfo.goods_attr_format.length; i++) {
+									for (var j = 0; j < goods_attr_format.length; j++) {
+										if (
+											this.pointInfo.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id &&
+											this.pointInfo.goods_attr_format[i].attr_value_id != goods_attr_format[j].attr_value_id
+										) {
+											this.pointInfo.goods_attr_format[i].attr_value_name += '、' + goods_attr_format[j].attr_value_name;
+										}
+									}
+								}
+							}
+							if (this.pointInfo.goods_spec_format) this.pointInfo.goods_spec_format = JSON.parse(this.pointInfo.goods_spec_format);
+						}
+
+						this.pointInfo.unit = this.pointInfo.unit || '件';
+
+						// 商品详情
+						if (this.pointInfo.content) this.pointInfo.content = htmlParser(this.pointInfo.content);
+
+						this.getAccountInfo(save, this.pointInfo.point);
+
+					} else {
+						this.$util.showToast({
+							title: res.message
+						});
+						setTimeout(() => {
+							this.$util.redirectTo('/pages_promotion/point/list', {}, 'redirectTo');
+						}, 1000);
+					}
+				}
+			});
+		},
+
+		// 立即购买
+		exchange() {
+			if (!this.storeToken) {
+				this.$refs.login.open('/pages_promotion/point/detail?id=' + this.id);
+				return;
+			}
+			this.$refs.goodsSku.show('point');
+		},
+
+		/**
+		 * 刷新商品详情数据
+		 * @param {Object} pointInfo
+		 */
+		refreshGoodsSkuDetail(pointInfo) {
+			Object.assign(this.pointInfo, pointInfo);
+			this.pointInfo.unit = this.pointInfo.unit || '件';
+		},
+		//服务
+		openMerchantsServicePopup() {
+			this.$refs.merchantsServicePopup.open();
+		},
+		closeMerchantsServicePopup() {
+			this.$refs.merchantsServicePopup.close();
+		},
+		//属性
+		openAttributePopup() {
+			this.$refs.attributePopup.open();
+		},
+		closeAttributePopup() {
+			this.$refs.attributePopup.close();
+		},
+		imageError() {
+			this.pointInfo.image = this.$util.getDefaultImage().goods;
+			this.$forceUpdate();
+		},
+		//添加福利群
+		onCommunity() {
+			this.isCommunity = true;
+		},
+		onCloseCommunity() {
+			this.isCommunity = false;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+@import '@/common/css/goods_detail.scss';
+.group-wrap .goods-module-wrap.info {
+	padding-bottom: 10rpx;
+}
+.group-wrap {
+	padding-bottom: 20rpx;
+}
+
+.detail-swap {
+	box-sizing: border-box;
+	background: #ffffff;
+	position: fixed;
+	left: 0;
+	bottom: 0rpx;
+	width: 100%;
+	padding: 20rpx 0;
+	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)) !important;
+	padding-bottom: calc(20rpx + env(safe-area-inset-bottom)) !important;
+
+	button {
+		height: 80rpx;
+		line-height: 80rpx;
+		border-radius: 10rpx;
+		&[type='primary'] {
+			background-color: var(--goods-btn-color);
+		}
+	}
+}
+</style>
+<style lang="scss" scoped>
+/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
+	max-height: unset !important;
+}
+</style>
diff --git a/pages_promotion/point/goods_list.vue b/pages_promotion/point/goods_list.vue
index 6faea6c..9f82399 100644
--- a/pages_promotion/point/goods_list.vue
+++ b/pages_promotion/point/goods_list.vue
@@ -1,894 +1,894 @@
-<template>
-	<page-meta :page-style="themeColor"></page-meta>
-	<view class="content">
-		<view class="head-wrap">
-			<!-- 搜索区域 -->
-			<view class="search-wrap uni-flex uni-row">
-				<view class="flex-item input-wrap">
-					<input class="uni-input" maxlength="50" v-model="keyword" confirm-type="search" @confirm="search()" placeholder="请输入商品关键词" />
-					<text class="iconfont icon-sousuo3" @click.stop="search()"></text>
-				</view>
-			</view>
-
-			<!-- 排序 -->
-			<view class="sort-wrap">
-				<view class="comprehensive-wrap" :class="{ 'color-base-text': order === '' }" @click="sortTabClick('')">
-					<text :class="{ 'color-base-text': order === '' }">综合</text>
-				</view>
-				<view class="price-wrap" @click="sortTabClick('point')">
-					<text :class="{ 'color-base-text': order === 'point' }">积分</text>
-					<view class="iconfont-wrap">
-						<view class="iconfont icon-shangsanjiao-copy" :class="{ 'color-base-text': priceOrder === 'asc' && order === 'point' }"></view>
-						<view class="iconfont icon-sanjiao" :class="{ 'color-base-text': priceOrder === 'desc' && order === 'point' }"></view>
-					</view>
-				</view>
-				<view class="price-wrap" @click="sortTabClick('create_time')">
-					<text :class="{ 'color-base-text': order === 'create_time' }">上新时间</text>
-					<view class="iconfont-wrap">
-						<view class="iconfont icon-shangsanjiao-copy" :class="{ 'color-base-text': priceOrder === 'asc' && order === 'create_time' }"></view>
-						<view class="iconfont icon-sanjiao" :class="{ 'color-base-text': priceOrder === 'desc' && order === 'create_time' }"></view>
-					</view>
-				</view>
-				<view :class="{ 'color-base-text': order === 'screen' }" class="screen-wrap">
-					<text @click="sortTabClick('screen')">筛选</text>
-					<view @click="sortTabClick('screen')" class="iconfont-wrap">
-						<view class="iconfont icon-shaixuan color-tip"></view>
-					</view>
-				</view>
-			</view>
-		</view>
-
-		<mescroll-uni top="180" @getData="getData" ref="mescroll" :size="10">
-			<block slot="list">
-				<view class="list-wrap">
-					<view class="goods-list double-column" v-if="goodsList.length">
-						<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index">
-							<view class="goods-img" @click="toDetail(item)">
-								<image :src="goodsImg(item.image)" mode="widthFix" @error="imgError(index)"></image>
-							</view>
-							<view class="info-wrap">
-								<view class="name-wrap">
-									<view class="goods-name" @click="toDetail(item)">{{ item.name }}</view>
-								</view>
-								<view class="lineheight-clear">
-									<view class="discount-price">
-										<text class="unit ">{{ item.point }}</text>
-										<text class="unit  font-size-tag">积分</text>
-										<block v-if="item.price > 0 && item.pay_type > 0">
-											<text class="unit  font-size-tag">+</text>
-											<text class="unit  font-size-tag">{{ $lang('common.currencySymbol') }}</text>
-											<text class="price  font-size-toolbar" >{{ parseFloat(item.price).toFixed(2).split(".")[0] }}</text>
-											<text class="unit  font-size-tag">.{{ parseFloat(item.price).toFixed(2).split(".")[1] }}</text>
-										</block>
-									</view>
-								</view>
-								<view class="pro-info"  v-if="item.stock_show">
-									<view class="font-size-activity-tag color-tip">库存{{ item.stock }}</view>
-									<view class="sale font-size-activity-tag color-tip" @click="toDetail(item)">
-										<!-- <button type="primary" size="mini">立即兑换</button> -->
-									</view>
-								</view>
-							</view>
-						</view>
-					</view>
-					<view class="empty" v-if="goodsList.length == 0">
-						<ns-empty :isIndex="false" text="暂无积分商品"></ns-empty>
-					</view>
-				</view>
-			</block>
-		</mescroll-uni>
-
-		<!-- 筛选弹出框 -->
-		<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
-			<view class="title color-tip">筛选</view>
-			<scroll-view scroll-y>
-				<!-- 价格筛选项 -->
-				<view class="item-wrap">
-					<view class="label"><text>积分区间</text></view>
-					<view class="price-wrap">
-						<input class="uni-input" type="digit" v-model="minPoint" placeholder="最低" />
-						<view class="h-line"></view>
-						<input class="uni-input" type="digit" v-model="maxPoint" placeholder="最高" />
-					</view>
-				</view>
-				<!-- 分类筛选项 -->
-				<view class="category-list-wrap">
-					<text class="first">全部分类</text>
-					<view class="class-box">
-						<view @click="selectedCategory('')" class="list-wrap"><text :class="{ selected: !categoryId, 'color-base-text': !categoryId }">全部</text></view>
-						<view @click="selectedCategory(item.category_id)" v-for="(item, index) in categoryList" :key="index" class="list-wrap">
-							<text :class="{ selected: item.category_id == categoryId, 'color-base-text': item.category_id == categoryId }">{{ item.category_name }}</text>
-						</view>
-					</view>
-				</view>
-			</scroll-view>
-			<view class="footer" :class="{ 'safe-area': isIphoneX }">
-				<button type="default" class="footer-box" @click="resetData">重置</button>
-				<button type="primary" class="footer-box1" @click="screenData">确定</button>
-			</view>
-		</uni-drawer>
-
-		<!-- #ifdef MP-WEIXIN -->
-		<!-- 小程序隐私协议 -->
-		<privacy-popup ref="privacyPopup"></privacy-popup>
-		<!-- #endif -->
-	</view>
-</template>
-
-<script>
-	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
-
-	export default {
-		components: {
-			uniDrawer,
-		},
-		data() {
-			return {
-				listStyle: '',
-				priceOrder: 'desc',
-				categoryList: [], //排序类型
-				goodsList: [],
-				order: '',
-				sort: 'desc',
-				showScreen: false,
-				keyword: '',
-				categoryId: 0,
-				minPoint: '',
-				maxPoint: '',
-				isFreeShipping: false, //是否免邮
-				isIphoneX: false,
-				coupon: 0,
-				emptyShow: false,
-				isList: true, //列表样式
-				mescroll: null,
-				isLogin: false,
-				couponList: [],
-				hongbaoList: [],
-				point: 0,
-			};
-		},
-		onLoad(options) {
-			this.categoryId = options.category_id || 0;
-			this.keyword = options.keyword || '';
-			this.isIphoneX = this.$util.uniappIsIPhoneX();
-			this.coupon = options.coupon || 0;
-			this.loadCategoryList(this.categoryId);
-		},
-		methods: {
-			//获取积分商品详情
-			getData(mescroll) {
-				this.$api.sendRequest({
-					url: '/pointexchange/api/goods/page',
-					data: {
-						page_size: mescroll.size,
-						page: mescroll.num,
-						type: 1,
-						keyword: this.keyword,
-						category_id: this.categoryId,
-						min_point: this.minPoint,
-						max_point: this.maxPoint,
-						is_free_shipping: (this.isFreeShipping ? 1 : 0),
-						order: this.order,
-						sort: this.sort,
-						coupon: this.coupon
-					},
-					success: res => {
-						let newArr = [];
-						let msg = res.message;
-						if (res.code == 0 && res.data) {
-							newArr = res.data.list;
-						} else {
-							this.$util.showToast({
-								title: msg
-							});
-						}
-						mescroll.endSuccess(newArr.length);
-						//设置列表数据
-						if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
-						this.goodsList = this.goodsList.concat(newArr); //追加新数据
-						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
-					},
-					fail() {
-						//联网失败的回调
-						mescroll.endErr();
-						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
-					}
-				});
-			},
-			//加载分类
-			loadCategoryList(fid, sid) {
-				this.$api.sendRequest({
-					url: '/api/goodscategory/tree',
-					data: {},
-					success: res => {
-						if (res.data != null) this.categoryList = res.data;
-					}
-				});
-			},
-			goodsImg(imgStr) {
-				let imgs = imgStr.split(',');
-				return imgs[0] ? this.$util.img(imgs[0], {
-					size: 'mid'
-				}) : this.$util.getDefaultImage().goods;
-			},
-			imgError(index) {
-				this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
-			},
-			//跳转至详情页面
-			toDetail(item) {
-				this.$util.redirectTo('/pages_promotion/point/detail', {
-					id: item.id
-				});
-			},
-			search() {
-				this.emptyShow = false;
-				this.goodsList = [];
-				this.$refs.mescroll.refresh();
-			},
-			//筛选点击
-			sortTabClick(tag) {
-				if (tag == 'point') {
-					this.order = 'point';
-					this.sort = 'desc';
-				} else if (tag == 'create_time') {
-					this.order = 'create_time';
-					this.sort = 'desc';
-				} else if (tag == 'screen') {
-					//筛选
-					this.showScreen = true;
-					return;
-				} else {
-					this.order = '';
-					this.sort = '';
-				}
-
-				this.order = tag;
-				if (tag === 'create_time') {
-					this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
-					this.sort = this.priceOrder;
-				} else if (tag === 'point') {
-					this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
-					this.sort = this.priceOrder;
-				}
-
-				this.emptyShow = false;
-				this.goodsList = [];
-				this.$refs.mescroll.refresh();
-			},
-			selectedCategory(categoryId) {
-				this.categoryId = categoryId;
-			},
-			screenData() {
-				if (this.minPoint != '' || this.maxPoint != '') {
-					// if (!Number(this.minPoint) && this.minPoint) {
-					// 	this.$util.showToast({
-					// 		title: '请输入最低价'
-					// 	});
-					// 	return;
-					// }
-					if (!Number(this.maxPoint) && this.maxPoint) {
-						this.$util.showToast({
-							title: '请输入最高价'
-						});
-						return;
-					}
-					if (Number(this.minPoint) < 0 || Number(this.maxPoint) < 0) {
-						this.$util.showToast({
-							title: '筛选价格不能小于0'
-						});
-						return;
-					}
-					if (this.minPoint != '' && Number(this.minPoint) > Number(this.maxPoint) && this.maxPoint) {
-
-						this.$util.showToast({
-							title: '最低价不能大于最高价'
-						});
-						return;
-					}
-					if (this.maxPoint != '' && Number(this.maxPoint) < Number(this.minPoint)) {
-						this.$util.showToast({
-							title: '最高价不能小于最低价'
-						});
-						return;
-					}
-				}
-				this.emptyShow = false;
-				this.goodsList = [];
-				this.$refs.mescroll.refresh();
-				this.showScreen = false;
-			},
-			//重置数据
-			resetData() {
-				this.showScreen = false;
-				this.categoryId = 0
-				this.minPoint = ''
-				this.maxPoint = ''
-			},
-		},
-	};
-</script>
-
-<style lang="scss">
-	.head-wrap {
-		background: #fff;
-		position: fixed;
-		width: 100%;
-		left: 0;
-		z-index: 1;
-
-		.search-wrap {
-			flex: 0.5;
-			padding: 30rpx 30rpx 0;
-			font-size: $font-size-tag;
-			display: flex;
-			align-items: center;
-
-			.input-wrap {
-				flex: 1;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				background: $color-bg;
-				height: 70rpx;
-				padding-left: 10rpx;
-				border-radius: 70rpx;
-
-				input {
-					width: 90%;
-					background: $color-bg;
-					font-size: $font-size-tag;
-					height: 50rpx;
-					padding: 10rpx 25rpx 10rpx 40rpx;
-					line-height: 50rpx;
-					border-radius: 40rpx;
-				}
-
-				text {
-					font-size: $font-size-toolbar;
-					color: $color-tip;
-					width: 80rpx;
-					text-align: center;
-					margin-right: 20rpx;
-				}
-			}
-
-			.category-wrap,
-			.list-style {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-
-				.iconfont {
-					font-size: 50rpx;
-					color: $color-tip;
-				}
-
-				text {
-					display: block;
-					margin-top: 60rpx;
-				}
-			}
-		}
-
-		.sort-wrap {
-			display: flex;
-			padding: 10rpx 20rpx 10rpx 0;
-
-			>view {
-				flex: 1;
-				text-align: center;
-				font-size: $font-size-base;
-				height: 60rpx;
-				line-height: 60rpx;
-			}
-
-			.comprehensive-wrap {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-
-				.iconfont-wrap {
-					display: inline-block;
-					margin-left: 10rpx;
-					width: 40rpx;
-
-					.iconfont {
-						font-size: $font-size-toolbar;
-						line-height: 1;
-						margin-bottom: 5rpx;
-					}
-				}
-			}
-
-			.price-wrap {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-
-				.iconfont-wrap {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					flex-direction: column;
-					width: 40rpx;
-
-					.iconfont {
-						float: left;
-						font-size: 24rpx;
-						line-height: 1;
-						height: 20rpx;
-						color: #909399;
-					}
-				}
-			}
-
-			.screen-wrap {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-
-				.iconfont-wrap {
-					display: inline-block;
-					margin-left: 10rpx;
-					width: 40rpx;
-
-					.iconfont {
-						font-size: $font-size-toolbar;
-						line-height: 1;
-					}
-				}
-			}
-		}
-	}
-
-	.category-list-wrap {
-		height: 100%;
-
-		.class-box {
-			display: flex;
-			flex-wrap: wrap;
-			padding: 0 $padding;
-
-			view {
-				width: calc((100% - 60rpx) / 3);
-				font-size: $font-size-goods-tag;
-				margin-right: 20rpx;
-				height: 60rpx;
-				line-height: 60rpx;
-				text-align: center;
-				margin-bottom: 12rpx;
-				flex-shrink: 0;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				background: rgba(245, 245, 245, 1);
-				border-radius: 5rpx;
-
-				&:nth-of-type(3n) {
-					margin-right: 0;
-				}
-			}
-		}
-
-		.first {
-			font-size: $font-size-tag;
-			display: block;
-			// background: $page-color-base;
-			padding: 20rpx;
-		}
-
-		.second {
-			border-bottom: 2rpx solid $color-line;
-			padding: 20rpx;
-			display: block;
-			font-size: $font-size-tag;
-		}
-
-		.third {
-			padding: 0 20rpx 20rpx;
-			overflow: hidden;
-			font-size: $font-size-tag;
-
-			>view {
-				display: inline-block;
-				margin-right: 20rpx;
-				margin-top: 20rpx;
-			}
-
-			.uni-tag {
-				padding: 0 20rpx;
-			}
-		}
-	}
-
-	.screen-wrap {
-		.title {
-			font-size: $font-size-tag;
-			padding: $padding;
-			background: #f6f4f5;
-		}
-
-		scroll-view {
-			height: 85%;
-
-			.item-wrap {
-				border-bottom: 1px solid #f0f0f0;
-
-				.label {
-					font-size: $font-size-tag;
-					padding: $padding;
-
-					view {
-						display: inline-block;
-						font-size: 60rpx;
-						height: 40rpx;
-						vertical-align: middle;
-						line-height: 40rpx;
-					}
-				}
-
-				.list {
-					margin: $margin-updown $margin-both;
-					overflow: hidden;
-
-					>view {
-						display: inline-block;
-						margin-right: 25rpx;
-						margin-bottom: 25rpx;
-					}
-
-					.uni-tag {
-						padding: 0 $padding;
-						font-size: $font-size-goods-tag;
-						background: #f5f5f5;
-						height: 52rpx;
-						line-height: 52rpx;
-						border: 0;
-					}
-				}
-
-				.price-wrap {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					padding: $padding;
-
-					input {
-						flex: 1;
-						background: #f5f5f5;
-						height: 52rpx;
-						width: 182rpx;
-						line-height: 50rpx;
-						font-size: $font-size-goods-tag;
-						border-radius: 50rpx;
-						text-align: center;
-
-						&:first-child {
-							margin-right: 10rpx;
-						}
-
-						&:last-child {
-							margin-left: 10rpx;
-						}
-					}
-				}
-			}
-		}
-
-		.footer {
-			height: 90rpx;
-			display: flex;
-			justify-content: center;
-			align-items: flex-start;
-			//position: absolute;
-			bottom: 0;
-			width: 100%;
-
-			.footer-box {
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
-				margin: 0;
-				width: 40%;
-			}
-
-			.footer-box1 {
-				border-top-left-radius: 0;
-				border-bottom-left-radius: 0;
-				margin: 0;
-				width: 40%;
-			}
-		}
-	}
-
-	.safe-area {
-		bottom: 68rpx !important;
-	}
-
-	.empty {
-		margin-top: 100rpx;
-	}
-
-	.buy-num {
-		font-size: $font-size-activity-tag;
-	}
-
-	.icon {
-		width: 34rpx;
-		height: 30rpx;
-	}
-
-	.list-style-new {
-		display: flex;
-		align-items: center;
-
-		.line {
-			width: 4rpx;
-			height: 28rpx;
-			background-color: rgba(227, 227, 227, 1);
-			margin-right: 60rpx;
-		}
-	}
-
-	.h-line {
-		width: 37rpx;
-		height: 2rpx;
-		background-color: $color-tip;
-	}
-
-	.lineheight-clear {
-		line-height: 1 !important;
-	}
-
-	// 商品列表单列样式
-	.goods-list.single-column {
-		.goods-item {
-			padding: 26rpx;
-			background: #fff;
-			margin: $margin-updown $margin-both;
-			border-radius: $border-radius;
-			display: flex;
-			position: relative;
-
-			.goods-img {
-				width: 200rpx;
-				height: 200rpx;
-				overflow: hidden;
-				border-radius: $border-radius;
-				margin-right: 20rpx;
-
-				image {
-					width: 100%;
-					height: 100%;
-				}
-			}
-
-			.goods-tag {
-				color: #fff;
-				line-height: 1;
-				padding: 8rpx 12rpx;
-				position: absolute;
-				border-top-left-radius: $border-radius;
-				border-bottom-right-radius: $border-radius;
-				top: 26rpx;
-				left: 26rpx;
-				font-size: $font-size-goods-tag;
-			}
-
-			.goods-tag-img {
-				position: absolute;
-				border-top-left-radius: $border-radius;
-				width: 80rpx;
-				height: 80rpx;
-				top: 26rpx;
-				left: 26rpx;
-				z-index: 5;
-				overflow: hidden;
-
-				image {
-					width: 100%;
-					height: 100%;
-				}
-			}
-
-			.info-wrap {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-			}
-
-			.name-wrap {
-				flex: 1;
-			}
-
-			.goods-name {
-				font-size: $font-size-base;
-				line-height: 1.3;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				display: -webkit-box;
-				-webkit-line-clamp: 2;
-				-webkit-box-orient: vertical;
-				height: 68rpx;
-			}
-
-			.introduction {
-				line-height: 1;
-				margin-top: 10rpx;
-			}
-
-			.discount-price {
-				display: inline-block;
-				font-weight: bold;
-				line-height: 1;
-				margin-top: 16rpx;
-				color: var(--price-color);
-				.unit {
-					margin-right: 6rpx;
-				}
-			}
-
-			.pro-info {
-				display: flex;
-				margin-top: 16rpx;
-
-				.delete-price {
-					text-decoration: line-through;
-					flex: 1;
-
-					.unit {
-						margin-right: 6rpx;
-					}
-				}
-
-				&>view {
-					line-height: 1;
-
-					&:nth-child(2) {
-						text-align: right;
-					}
-				}
-			}
-
-			.member-price-tag {
-				display: inline-block;
-				width: 60rpx;
-				line-height: 1;
-				margin-left: 6rpx;
-
-				image {
-					width: 100%;
-				}
-			}
-		}
-	}
-
-	// 商品列表双列样式
-	.goods-list.double-column {
-		display: flex;
-		flex-wrap: wrap;
-		margin: 0 $margin-both;
-		padding-top: $margin-updown;
-
-		.goods-item {
-			flex: 1;
-			position: relative;
-			background-color: #fff;
-			flex-basis: 48%;
-			max-width: calc((100% - 30rpx) / 2);
-			margin: 0 $margin-both $margin-updown 0;
-			border-radius: $border-radius;
-
-			&:nth-child(2n) {
-				margin-right: 0;
-			}
-
-			.goods-img {
-				position: relative;
-				overflow: hidden;
-				padding-top: 100%;
-				border-top-left-radius: $border-radius;
-				border-top-right-radius: $border-radius;
-
-				image {
-					width: 100%;
-					position: absolute;
-					top: 50%;
-					left: 0;
-					transform: translateY(-50%);
-				}
-			}
-
-			.goods-tag {
-				color: #fff;
-				line-height: 1;
-				padding: 8rpx 16rpx;
-				position: absolute;
-				border-bottom-right-radius: $border-radius;
-				top: 0;
-				left: 0;
-				font-size: $font-size-goods-tag;
-			}
-
-			.goods-tag-img {
-				position: absolute;
-				border-top-left-radius: $border-radius;
-				width: 80rpx;
-				height: 80rpx;
-				top: 0;
-				left: 0;
-				z-index: 5;
-				overflow: hidden;
-
-				image {
-					width: 100%;
-					height: 100%;
-				}
-			}
-
-			.info-wrap {
-				padding: 0 26rpx 26rpx 26rpx;
-			}
-
-			.goods-name {
-				font-size: $font-size-base;
-				line-height: 1.3;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				display: -webkit-box;
-				-webkit-line-clamp: 2;
-				-webkit-box-orient: vertical;
-				margin-top: 20rpx;
-				height: 68rpx;
-			}
-
-			.discount-price {
-				display: inline-block;
-				font-weight: bold;
-				line-height: 1;
-				margin-top: 16rpx;
-				color: var(--price-color);
-				.unit {
-					margin-right: 6rpx;
-				}
-			}
-
-			.pro-info {
-				display: flex;
-				margin-top: 16rpx;
-
-				.delete-price {
-					text-decoration: line-through;
-					flex: 1;
-
-					.unit {
-						margin-right: 6rpx;
-					}
-				}
-
-				&>view {
-					line-height: 1;
-
-					&:nth-child(2) {
-						text-align: right;
-					}
-				}
-			}
-
-			.member-price-tag {
-				display: inline-block;
-				width: 60rpx;
-				line-height: 1;
-				margin-left: 6rpx;
-
-				image {
-					width: 100%;
-				}
-			}
-		}
-	}
-</style>
-<style scoped>
-	>>>.uni-tag--primary.uni-tag--inverted {
-		background-color: #f5f5f5 !important;
-	}
-</style>
+<template>
+	<page-meta :page-style="themeColor"></page-meta>
+	<view class="content">
+		<view class="head-wrap">
+			<!-- 搜索区域 -->
+			<view class="search-wrap uni-flex uni-row">
+				<view class="flex-item input-wrap">
+					<input class="uni-input" maxlength="50" v-model="keyword" confirm-type="search" @confirm="search()" placeholder="请输入商品关键词" />
+					<text class="iconfont icon-sousuo3" @click.stop="search()"></text>
+				</view>
+			</view>
+
+			<!-- 排序 -->
+			<view class="sort-wrap">
+				<view class="comprehensive-wrap" :class="{ 'color-base-text': order === '' }" @click="sortTabClick('')">
+					<text :class="{ 'color-base-text': order === '' }">综合</text>
+				</view>
+				<view class="price-wrap" @click="sortTabClick('point')">
+					<text :class="{ 'color-base-text': order === 'point' }">积分</text>
+					<view class="iconfont-wrap">
+						<view class="iconfont icon-shangsanjiao-copy" :class="{ 'color-base-text': priceOrder === 'asc' && order === 'point' }"></view>
+						<view class="iconfont icon-sanjiao" :class="{ 'color-base-text': priceOrder === 'desc' && order === 'point' }"></view>
+					</view>
+				</view>
+				<view class="price-wrap" @click="sortTabClick('create_time')">
+					<text :class="{ 'color-base-text': order === 'create_time' }">上新时间</text>
+					<view class="iconfont-wrap">
+						<view class="iconfont icon-shangsanjiao-copy" :class="{ 'color-base-text': priceOrder === 'asc' && order === 'create_time' }"></view>
+						<view class="iconfont icon-sanjiao" :class="{ 'color-base-text': priceOrder === 'desc' && order === 'create_time' }"></view>
+					</view>
+				</view>
+				<view :class="{ 'color-base-text': order === 'screen' }" class="screen-wrap">
+					<text @click="sortTabClick('screen')">筛选</text>
+					<view @click="sortTabClick('screen')" class="iconfont-wrap">
+						<view class="iconfont icon-shaixuan color-tip"></view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<mescroll-uni top="180" @getData="getData" ref="mescroll" :size="10">
+			<block slot="list">
+				<view class="list-wrap">
+					<view class="goods-list double-column" v-if="goodsList.length">
+						<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index">
+							<view class="goods-img" @click="toDetail(item)">
+								<image :src="goodsImg(item.image)" mode="widthFix" @error="imgError(index)"></image>
+							</view>
+							<view class="info-wrap">
+								<view class="name-wrap">
+									<view class="goods-name" @click="toDetail(item)">{{ item.name }}</view>
+								</view>
+								<view class="lineheight-clear">
+									<view class="discount-price">
+										<text class="unit ">{{ item.point }}</text>
+										<text class="unit  font-size-tag">积分</text>
+										<block v-if="item.price > 0 && item.pay_type > 0">
+											<text class="unit  font-size-tag">+</text>
+											<text class="unit  font-size-tag">{{ $lang('common.currencySymbol') }}</text>
+											<text class="price  font-size-toolbar" >{{ parseFloat(item.price).toFixed(2).split(".")[0] }}</text>
+											<text class="unit  font-size-tag">.{{ parseFloat(item.price).toFixed(2).split(".")[1] }}</text>
+										</block>
+									</view>
+								</view>
+								<view class="pro-info"  v-if="item.stock_show">
+									<view class="font-size-activity-tag color-tip">库存{{ item.stock }}</view>
+									<view class="sale font-size-activity-tag color-tip" @click="toDetail(item)">
+										<!-- <button type="primary" size="mini">立即兑换</button> -->
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="empty" v-if="goodsList.length == 0">
+						<ns-empty :isIndex="false" text="暂无积分商品"></ns-empty>
+					</view>
+				</view>
+			</block>
+		</mescroll-uni>
+
+		<!-- 筛选弹出框 -->
+		<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
+			<view class="title color-tip">筛选</view>
+			<scroll-view scroll-y>
+				<!-- 价格筛选项 -->
+				<view class="item-wrap">
+					<view class="label"><text>积分区间</text></view>
+					<view class="price-wrap">
+						<input class="uni-input" type="digit" v-model="minPoint" placeholder="最低" />
+						<view class="h-line"></view>
+						<input class="uni-input" type="digit" v-model="maxPoint" placeholder="最高" />
+					</view>
+				</view>
+				<!-- 分类筛选项 -->
+				<view class="category-list-wrap">
+					<text class="first">全部分类</text>
+					<view class="class-box">
+						<view @click="selectedCategory('')" class="list-wrap"><text :class="{ selected: !categoryId, 'color-base-text': !categoryId }">全部</text></view>
+						<view @click="selectedCategory(item.category_id)" v-for="(item, index) in categoryList" :key="index" class="list-wrap">
+							<text :class="{ selected: item.category_id == categoryId, 'color-base-text': item.category_id == categoryId }">{{ item.category_name }}</text>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+			<view class="footer" :class="{ 'safe-area': isIphoneX }">
+				<button type="default" class="footer-box" @click="resetData">重置</button>
+				<button type="primary" class="footer-box1" @click="screenData">确定</button>
+			</view>
+		</uni-drawer>
+
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<privacy-popup ref="privacyPopup"></privacy-popup>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
+
+	export default {
+		components: {
+			uniDrawer,
+		},
+		data() {
+			return {
+				listStyle: '',
+				priceOrder: 'desc',
+				categoryList: [], //排序类型
+				goodsList: [],
+				order: '',
+				sort: 'desc',
+				showScreen: false,
+				keyword: '',
+				categoryId: 0,
+				minPoint: '',
+				maxPoint: '',
+				isFreeShipping: false, //是否免邮
+				isIphoneX: false,
+				coupon: 0,
+				emptyShow: false,
+				isList: true, //列表样式
+				mescroll: null,
+				isLogin: false,
+				couponList: [],
+				hongbaoList: [],
+				point: 0,
+			};
+		},
+		onLoad(options) {
+			this.categoryId = options.category_id || 0;
+			this.keyword = options.keyword || '';
+			this.isIphoneX = this.$util.uniappIsIPhoneX();
+			this.coupon = options.coupon || 0;
+			this.loadCategoryList(this.categoryId);
+		},
+		methods: {
+			//获取积分商品详情
+			getData(mescroll) {
+				this.$api.sendRequest({
+					url: '/pointexchange/api/goods/page',
+					data: {
+						page_size: mescroll.size,
+						page: mescroll.num,
+						type: 1,
+						keyword: this.keyword,
+						category_id: this.categoryId,
+						min_point: this.minPoint,
+						max_point: this.maxPoint,
+						is_free_shipping: (this.isFreeShipping ? 1 : 0),
+						order: this.order,
+						sort: this.sort,
+						coupon: this.coupon
+					},
+					success: res => {
+						let newArr = [];
+						let msg = res.message;
+						if (res.code == 0 && res.data) {
+							newArr = res.data.list;
+						} else {
+							this.$util.showToast({
+								title: msg
+							});
+						}
+						mescroll.endSuccess(newArr.length);
+						//设置列表数据
+						if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
+						this.goodsList = this.goodsList.concat(newArr); //追加新数据
+						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+					},
+					fail() {
+						//联网失败的回调
+						mescroll.endErr();
+						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+					}
+				});
+			},
+			//加载分类
+			loadCategoryList(fid, sid) {
+				this.$api.sendRequest({
+					url: '/api/goodscategory/tree',
+					data: {},
+					success: res => {
+						if (res.data != null) this.categoryList = res.data;
+					}
+				});
+			},
+			goodsImg(imgStr) {
+				let imgs = imgStr.split(',');
+				return imgs[0] ? this.$util.img(imgs[0], {
+					size: 'mid'
+				}) : this.$util.getDefaultImage().goods;
+			},
+			imgError(index) {
+				this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
+			},
+			//跳转至详情页面
+			toDetail(item) {
+				this.$util.redirectTo('/pages_promotion/point/detail', {
+					id: item.id
+				});
+			},
+			search() {
+				this.emptyShow = false;
+				this.goodsList = [];
+				this.$refs.mescroll.refresh();
+			},
+			//筛选点击
+			sortTabClick(tag) {
+				if (tag == 'point') {
+					this.order = 'point';
+					this.sort = 'desc';
+				} else if (tag == 'create_time') {
+					this.order = 'create_time';
+					this.sort = 'desc';
+				} else if (tag == 'screen') {
+					//筛选
+					this.showScreen = true;
+					return;
+				} else {
+					this.order = '';
+					this.sort = '';
+				}
+
+				this.order = tag;
+				if (tag === 'create_time') {
+					this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
+					this.sort = this.priceOrder;
+				} else if (tag === 'point') {
+					this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
+					this.sort = this.priceOrder;
+				}
+
+				this.emptyShow = false;
+				this.goodsList = [];
+				this.$refs.mescroll.refresh();
+			},
+			selectedCategory(categoryId) {
+				this.categoryId = categoryId;
+			},
+			screenData() {
+				if (this.minPoint != '' || this.maxPoint != '') {
+					// if (!Number(this.minPoint) && this.minPoint) {
+					// 	this.$util.showToast({
+					// 		title: '请输入最低价'
+					// 	});
+					// 	return;
+					// }
+					if (!Number(this.maxPoint) && this.maxPoint) {
+						this.$util.showToast({
+							title: '请输入最高价'
+						});
+						return;
+					}
+					if (Number(this.minPoint) < 0 || Number(this.maxPoint) < 0) {
+						this.$util.showToast({
+							title: '筛选价格不能小于0'
+						});
+						return;
+					}
+					if (this.minPoint != '' && Number(this.minPoint) > Number(this.maxPoint) && this.maxPoint) {
+
+						this.$util.showToast({
+							title: '最低价不能大于最高价'
+						});
+						return;
+					}
+					if (this.maxPoint != '' && Number(this.maxPoint) < Number(this.minPoint)) {
+						this.$util.showToast({
+							title: '最高价不能小于最低价'
+						});
+						return;
+					}
+				}
+				this.emptyShow = false;
+				this.goodsList = [];
+				this.$refs.mescroll.refresh();
+				this.showScreen = false;
+			},
+			//重置数据
+			resetData() {
+				this.showScreen = false;
+				this.categoryId = 0
+				this.minPoint = ''
+				this.maxPoint = ''
+			},
+		},
+	};
+</script>
+
+<style lang="scss">
+	.head-wrap {
+		background: #fff;
+		position: fixed;
+		width: 100%;
+		left: 0;
+		z-index: 1;
+
+		.search-wrap {
+			flex: 0.5;
+			padding: 30rpx 30rpx 0;
+			font-size: $font-size-tag;
+			display: flex;
+			align-items: center;
+
+			.input-wrap {
+				flex: 1;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				background: $color-bg;
+				height: 70rpx;
+				padding-left: 10rpx;
+				border-radius: 70rpx;
+
+				input {
+					width: 90%;
+					background: $color-bg;
+					font-size: $font-size-tag;
+					height: 50rpx;
+					padding: 10rpx 25rpx 10rpx 40rpx;
+					line-height: 50rpx;
+					border-radius: 40rpx;
+				}
+
+				text {
+					font-size: $font-size-toolbar;
+					color: $color-tip;
+					width: 80rpx;
+					text-align: center;
+					margin-right: 20rpx;
+				}
+			}
+
+			.category-wrap,
+			.list-style {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.iconfont {
+					font-size: 50rpx;
+					color: $color-tip;
+				}
+
+				text {
+					display: block;
+					margin-top: 60rpx;
+				}
+			}
+		}
+
+		.sort-wrap {
+			display: flex;
+			padding: 10rpx 20rpx 10rpx 0;
+
+			>view {
+				flex: 1;
+				text-align: center;
+				font-size: $font-size-base;
+				height: 60rpx;
+				line-height: 60rpx;
+			}
+
+			.comprehensive-wrap {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.iconfont-wrap {
+					display: inline-block;
+					margin-left: 10rpx;
+					width: 40rpx;
+
+					.iconfont {
+						font-size: $font-size-toolbar;
+						line-height: 1;
+						margin-bottom: 5rpx;
+					}
+				}
+			}
+
+			.price-wrap {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.iconfont-wrap {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					flex-direction: column;
+					width: 40rpx;
+
+					.iconfont {
+						float: left;
+						font-size: 24rpx;
+						line-height: 1;
+						height: 20rpx;
+						color: #909399;
+					}
+				}
+			}
+
+			.screen-wrap {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.iconfont-wrap {
+					display: inline-block;
+					margin-left: 10rpx;
+					width: 40rpx;
+
+					.iconfont {
+						font-size: $font-size-toolbar;
+						line-height: 1;
+					}
+				}
+			}
+		}
+	}
+
+	.category-list-wrap {
+		height: 100%;
+
+		.class-box {
+			display: flex;
+			flex-wrap: wrap;
+			padding: 0 $padding;
+
+			view {
+				width: calc((100% - 60rpx) / 3);
+				font-size: $font-size-goods-tag;
+				margin-right: 20rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				margin-bottom: 12rpx;
+				flex-shrink: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				background: rgba(245, 245, 245, 1);
+				border-radius: 5rpx;
+
+				&:nth-of-type(3n) {
+					margin-right: 0;
+				}
+			}
+		}
+
+		.first {
+			font-size: $font-size-tag;
+			display: block;
+			// background: $page-color-base;
+			padding: 20rpx;
+		}
+
+		.second {
+			border-bottom: 2rpx solid $color-line;
+			padding: 20rpx;
+			display: block;
+			font-size: $font-size-tag;
+		}
+
+		.third {
+			padding: 0 20rpx 20rpx;
+			overflow: hidden;
+			font-size: $font-size-tag;
+
+			>view {
+				display: inline-block;
+				margin-right: 20rpx;
+				margin-top: 20rpx;
+			}
+
+			.uni-tag {
+				padding: 0 20rpx;
+			}
+		}
+	}
+
+	.screen-wrap {
+		.title {
+			font-size: $font-size-tag;
+			padding: $padding;
+			background: #f6f4f5;
+		}
+
+		scroll-view {
+			height: 85%;
+
+			.item-wrap {
+				border-bottom: 1px solid #f0f0f0;
+
+				.label {
+					font-size: $font-size-tag;
+					padding: $padding;
+
+					view {
+						display: inline-block;
+						font-size: 60rpx;
+						height: 40rpx;
+						vertical-align: middle;
+						line-height: 40rpx;
+					}
+				}
+
+				.list {
+					margin: $margin-updown $margin-both;
+					overflow: hidden;
+
+					>view {
+						display: inline-block;
+						margin-right: 25rpx;
+						margin-bottom: 25rpx;
+					}
+
+					.uni-tag {
+						padding: 0 $padding;
+						font-size: $font-size-goods-tag;
+						background: #f5f5f5;
+						height: 52rpx;
+						line-height: 52rpx;
+						border: 0;
+					}
+				}
+
+				.price-wrap {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					padding: $padding;
+
+					input {
+						flex: 1;
+						background: #f5f5f5;
+						height: 52rpx;
+						width: 182rpx;
+						line-height: 50rpx;
+						font-size: $font-size-goods-tag;
+						border-radius: 50rpx;
+						text-align: center;
+
+						&:first-child {
+							margin-right: 10rpx;
+						}
+
+						&:last-child {
+							margin-left: 10rpx;
+						}
+					}
+				}
+			}
+		}
+
+		.footer {
+			height: 90rpx;
+			display: flex;
+			justify-content: center;
+			align-items: flex-start;
+			//position: absolute;
+			bottom: 0;
+			width: 100%;
+
+			.footer-box {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+				margin: 0;
+				width: 40%;
+			}
+
+			.footer-box1 {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+				margin: 0;
+				width: 40%;
+			}
+		}
+	}
+
+	.safe-area {
+		bottom: 68rpx !important;
+	}
+
+	.empty {
+		margin-top: 100rpx;
+	}
+
+	.buy-num {
+		font-size: $font-size-activity-tag;
+	}
+
+	.icon {
+		width: 34rpx;
+		height: 30rpx;
+	}
+
+	.list-style-new {
+		display: flex;
+		align-items: center;
+
+		.line {
+			width: 4rpx;
+			height: 28rpx;
+			background-color: rgba(227, 227, 227, 1);
+			margin-right: 60rpx;
+		}
+	}
+
+	.h-line {
+		width: 37rpx;
+		height: 2rpx;
+		background-color: $color-tip;
+	}
+
+	.lineheight-clear {
+		line-height: 1 !important;
+	}
+
+	// 商品列表单列样式
+	.goods-list.single-column {
+		.goods-item {
+			padding: 26rpx;
+			background: #fff;
+			margin: $margin-updown $margin-both;
+			border-radius: $border-radius;
+			display: flex;
+			position: relative;
+
+			.goods-img {
+				width: 200rpx;
+				height: 200rpx;
+				overflow: hidden;
+				border-radius: $border-radius;
+				margin-right: 20rpx;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.goods-tag {
+				color: #fff;
+				line-height: 1;
+				padding: 8rpx 12rpx;
+				position: absolute;
+				border-top-left-radius: $border-radius;
+				border-bottom-right-radius: $border-radius;
+				top: 26rpx;
+				left: 26rpx;
+				font-size: $font-size-goods-tag;
+			}
+
+			.goods-tag-img {
+				position: absolute;
+				border-top-left-radius: $border-radius;
+				width: 80rpx;
+				height: 80rpx;
+				top: 26rpx;
+				left: 26rpx;
+				z-index: 5;
+				overflow: hidden;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.info-wrap {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+
+			.name-wrap {
+				flex: 1;
+			}
+
+			.goods-name {
+				font-size: $font-size-base;
+				line-height: 1.3;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+				height: 68rpx;
+			}
+
+			.introduction {
+				line-height: 1;
+				margin-top: 10rpx;
+			}
+
+			.discount-price {
+				display: inline-block;
+				font-weight: bold;
+				line-height: 1;
+				margin-top: 16rpx;
+				color: var(--price-color);
+				.unit {
+					margin-right: 6rpx;
+				}
+			}
+
+			.pro-info {
+				display: flex;
+				margin-top: 16rpx;
+
+				.delete-price {
+					text-decoration: line-through;
+					flex: 1;
+
+					.unit {
+						margin-right: 6rpx;
+					}
+				}
+
+				&>view {
+					line-height: 1;
+
+					&:nth-child(2) {
+						text-align: right;
+					}
+				}
+			}
+
+			.member-price-tag {
+				display: inline-block;
+				width: 60rpx;
+				line-height: 1;
+				margin-left: 6rpx;
+
+				image {
+					width: 100%;
+				}
+			}
+		}
+	}
+
+	// 商品列表双列样式
+	.goods-list.double-column {
+		display: flex;
+		flex-wrap: wrap;
+		margin: 0 $margin-both;
+		padding-top: $margin-updown;
+
+		.goods-item {
+			flex: 1;
+			position: relative;
+			background-color: #fff;
+			flex-basis: 48%;
+			max-width: calc((100% - 30rpx) / 2);
+			margin: 0 $margin-both $margin-updown 0;
+			border-radius: $border-radius;
+
+			&:nth-child(2n) {
+				margin-right: 0;
+			}
+
+			.goods-img {
+				position: relative;
+				overflow: hidden;
+				padding-top: 100%;
+				border-top-left-radius: $border-radius;
+				border-top-right-radius: $border-radius;
+
+				image {
+					width: 100%;
+					position: absolute;
+					top: 50%;
+					left: 0;
+					transform: translateY(-50%);
+				}
+			}
+
+			.goods-tag {
+				color: #fff;
+				line-height: 1;
+				padding: 8rpx 16rpx;
+				position: absolute;
+				border-bottom-right-radius: $border-radius;
+				top: 0;
+				left: 0;
+				font-size: $font-size-goods-tag;
+			}
+
+			.goods-tag-img {
+				position: absolute;
+				border-top-left-radius: $border-radius;
+				width: 80rpx;
+				height: 80rpx;
+				top: 0;
+				left: 0;
+				z-index: 5;
+				overflow: hidden;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.info-wrap {
+				padding: 0 26rpx 26rpx 26rpx;
+			}
+
+			.goods-name {
+				font-size: $font-size-base;
+				line-height: 1.3;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+				margin-top: 20rpx;
+				height: 68rpx;
+			}
+
+			.discount-price {
+				display: inline-block;
+				font-weight: bold;
+				line-height: 1;
+				margin-top: 16rpx;
+				color: var(--price-color);
+				.unit {
+					margin-right: 6rpx;
+				}
+			}
+
+			.pro-info {
+				display: flex;
+				margin-top: 16rpx;
+
+				.delete-price {
+					text-decoration: line-through;
+					flex: 1;
+
+					.unit {
+						margin-right: 6rpx;
+					}
+				}
+
+				&>view {
+					line-height: 1;
+
+					&:nth-child(2) {
+						text-align: right;
+					}
+				}
+			}
+
+			.member-price-tag {
+				display: inline-block;
+				width: 60rpx;
+				line-height: 1;
+				margin-left: 6rpx;
+
+				image {
+					width: 100%;
+				}
+			}
+		}
+	}
+</style>
+<style lang="scss" scoped>
+	>>>.uni-tag--primary.uni-tag--inverted {
+		background-color: #f5f5f5 !important;
+	}
+</style>
diff --git a/pages_promotion/point/list.vue b/pages_promotion/point/list.vue
index 9c033d2..27055da 100644
--- a/pages_promotion/point/list.vue
+++ b/pages_promotion/point/list.vue
@@ -586,7 +586,7 @@
 <style lang="scss">
 	@import './public/css/list.scss';
 </style>
-<style>
+<style lang="scss">
 	.ns-adv>>>image {
 		width: 100%;
 		border-radius: 0;
diff --git a/pages_promotion/point/payment.vue b/pages_promotion/point/payment.vue
index 780f7e3..d0f7b5a 100644
--- a/pages_promotion/point/payment.vue
+++ b/pages_promotion/point/payment.vue
@@ -1,309 +1,309 @@
-<template>
-	<page-meta :page-style="themeColor"></page-meta>
-	<view class="order-container" :class="{ 'safe-area': isIphoneX }">
-		<!-- #ifdef MP-WEIXIN -->
-		<view class="payment-navbar" :style="{
-				'padding-top': menuButtonBounding.top + 'px',
-				height: menuButtonBounding.height + 'px'
-			}">
-			<view class="nav-wrap">
-				<text class="iconfont icon-back_light" @click="back"></text>
-				<view class="navbar-title">确认订单</view>
-			</view>
-		</view>
-		<view class="payment-navbar-block" :style="{ height: menuButtonBounding.bottom + 'px' }"></view>
-		<!-- #endif -->
-
-		<scroll-view scroll-y="true" class="order-scroll-container">
-			<view class="payment-navbar-block"></view>
-			<!-- 选择地址 -->
-			<template v-if="orderPaymentData.exchange_info.type == 1 && orderPaymentData.is_virtual == 0">
-				<!-- 配送方式 -->
-				<view class="delivery-mode" v-if="orderCreateData.delivery &&orderPaymentData.delivery.express_type.length > 1">
-					<view class="action">
-						<view v-for="(deliveryItem, deliveryIndex) in orderPaymentData.delivery.express_type"
-							:key="deliveryIndex"
-							:class="{active: deliveryItem.name == orderCreateData.delivery.delivery_type}"
-							@click="selectDeliveryType(deliveryItem)">
-							{{ deliveryItem.title }}
-							<!-- 外圆角 -->
-							<view class="out-radio"></view>
-						</view>
-					</view>
-				</view>
-
-				<view class="address-box" :class="{'not-delivery-type': orderPaymentData.delivery.express_type.length <= 1}"
-					v-if="orderPaymentData.delivery.delivery_type != 'store'">
-					<block v-if="storeInfo.storeList.length > 1 && orderPaymentData.delivery.delivery_type == 'local'">
-						<view class="local-delivery-store" v-if="Object.keys(storeInfo.currStore).length" @click="$refs.deliveryPopup.open()">
-							<view class="info">
-								由 <text class="store-name">{{ storeInfo.currStore.store_name }}</text> 提供配送
-							</view>
-							<view class="cell-more">
-								<text>点击切换</text>
-								<text class="iconfont icon-right"></text>
-							</view>
-						</view>
-						<view v-else class="local-delivery-store">
-							<view class="info">
-								<text class="store-name">您的附近没有可配送的门店，请选择其他配送方式</text>
-							</view>
-						</view>
-					</block>
-					<view class="info-wrap" :class="{'local': orderPaymentData.delivery.delivery_type == 'local'}" v-if="orderCreateData.member_address" @click="selectAddress">
-						<view class="content">
-							<text class="name font-size-base">{{ orderCreateData.member_address.name ? orderCreateData.member_address.name : '' }}</text>
-							<text class="font-size-base mobile">{{ orderCreateData.member_address.mobile ? orderCreateData.member_address.mobile : '' }}</text>
-							<text class="cell-more iconfont icon-right"></text>
-							<view class="desc-wrap">
-								{{ orderCreateData.member_address.full_address ? orderCreateData.member_address.full_address : '' }}
-								{{ orderCreateData.member_address.address ? orderCreateData.member_address.address : '' }}
-							</view>
-						</view>
-					</view>
-					<view class="empty-wrap" v-else @click="selectAddress">
-						<view class="info">请设置收货地址</view>
-						<view class="cell-more">
-							<view class="iconfont icon-right"></view>
-						</view>
-					</view>
-
-					<!-- 外卖配送 -->
-					<block v-if="orderPaymentData.delivery.delivery_type == 'local'">
-						<view class="local-box" v-if="orderPaymentData.config.local.is_use && orderPaymentData.delivery.local.info && orderPaymentData.delivery.local.info.time_is_open == 1">
-							<view class="pick-block" @click="localtime">
-								<view class="font-size-base">送达时间</view>
-								<view class="time-picker">
-									<text :class="{'color-tip': !orderCreateData.buyer_ask_delivery_title}">{{ orderCreateData.buyer_ask_delivery_title ? orderCreateData.buyer_ask_delivery_title : '请选择送达时间' }}</text>
-									<text class="iconfont icon-right cell-more"></text>
-								</view>
-							</view>
-						</view>
-					</block>
-					<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
-				</view>
-
-				<view class="store-box" :class="{'not-delivery-type': orderPaymentData.delivery.express_type.length <= 1}" v-if="orderPaymentData.delivery.delivery_type == 'store' && storeInfo.currStore">
-					<block v-if="storeInfo.currStore">
-						<view @click="openSiteDelivery" class="store-info">
-							<view class="store-address-info">
-								<view class="info-wrap">
-									<view class="title">
-										<text>{{ storeInfo.currStore.store_name }}</text>
-										<view class="cell-more iconfont icon-right"></view>
-									</view>
-									<view class="store-detail">
-										<view v-if="storeInfo.currStore.open_date">
-											营业时间：{{ storeInfo.currStore.open_date }}</view>
-										<view>地址：{{ storeInfo.currStore.full_address }}
-											{{ storeInfo.currStore.address }}
-										</view>
-									</view>
-								</view>
-							</view>
-						</view>
-						<view class="mobile-wrap store-mobile">
-							<view class="form-group">
-								<text class="text">姓名</text>
-								<input type="text" placeholder-class="color-tip placeholder" class="input" v-model="member_address.name" disabled />
-							</view>
-						</view>
-						<view class="mobile-wrap store-mobile">
-							<view class="form-group">
-								<text class="text">预留手机</text>
-								<input type="number" maxlength="11" placeholder="请输入您的手机号码"
-									placeholder-class="color-tip placeholder" class="input" v-model="member_address.mobile" />
-							</view>
-						</view>
-						<view class="store-time">
-							<view class="left">自提时间</view>
-							<view class="right" @click="storetime">
-								{{orderCreateData.buyer_ask_delivery_title}}
-								<text class="iconfont icon-right"></text>
-							</view>
-						</view>
-					</block>
-					<view v-else class="empty">当前无自提门店，请选择其它配送方式</view>
-
-					<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
-				</view>
-			</template>
-
-			<!-- 虚拟商品展示手机号 -->
-			<view class="mobile-wrap" v-if="orderPaymentData.is_virtual == 1 && orderCreateData.member_address">
-				<view class="tips color-base-text">
-					<text class="iconfont icon-gantanhao"></text>
-					购买虚拟类商品需填写手机号，方便商家与您联系
-				</view>
-				<view class="form-group">
-					<text class="iconfont icon-dianhua2"></text>
-					<text class="text">手机号码</text>
-					<input type="number" maxlength="11" placeholder="请输入您的手机号码" placeholder-class="color-tip placeholder" class="input" v-model="orderCreateData.member_address.mobile" />
-				</view>
-			</view>
-
-			<!-- 店铺 -->
-			<view class="site-wrap" :class="orderPaymentData.exchange_info.type == 2 || orderPaymentData.exchange_info.type == 3 ? 'margin-top' : ''">
-				<view class="site-body">
-					<view class="goods-wrap">
-						<block v-if="orderPaymentData.exchange_info.type == 2">
-							<view class="goods-img">
-								<image :src="orderPaymentData.exchange_info.image ? $util.img(orderPaymentData.exchange_info.image) : $util.img('public/uniapp/point/coupon.png')" @error="imageError()" mode="aspectFill"/>
-							</view>
-						</block>
-						<block v-else-if="orderPaymentData.exchange_info.type == 3">
-							<view class="goods-img">
-								<image :src="orderPaymentData.exchange_info.image ? $util.img(orderPaymentData.exchange_info.image) : $util.img('public/uniapp/point/hongbao.png')" @error="imageError()" mode="aspectFill"/>
-							</view>
-						</block>
-						<block v-else>
-							<view class="goods-img">
-								<image :src="$util.img(orderPaymentData.exchange_info.image)" @error="imageError()" mode="aspectFill"/>
-							</view>
-						</block>
-						<view class="goods-info">
-							<view class="goods-name">{{ orderPaymentData.exchange_info.name }}</view>
-							<view class="goods-sub-section">
-								<view v-if="orderPaymentData.exchange_info.pay_type == 1" class="color-base-text">
-									<text class="goods-price">{{ orderPaymentData.exchange_info.point }}</text>
-									<text class="unit">积分</text>
-									<template v-if="orderPaymentData.exchange_info.price != '0.00'">
-										<text class="unit">+{{ $lang('common.currencySymbol') }}</text>
-										<text class="goods-price">{{ orderPaymentData.exchange_info.price }}</text>
-									</template>
-								</view>
-								<view>
-									<text class="font-size-tag">x</text>
-									<text class="font-size-base">{{ orderPaymentData.goods_num }}</text>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-				<view class="site-footer">
-					<view class="order-cell">
-						<text class="tit">买家留言</text>
-						<view class="box"><input type="text" placeholder="留言前建议先与商家协调一致" placeholder-class="color-tip" v-model="orderCreateData.buyer_message" /></view>
-					</view>
-				</view>
-			</view>
-
-			<!-- 金额 -->
-			<view class="order-money">
-				<view class="order-cell">
-					<text class="tit">所需积分</text>
-					<view class="box">
-						<text class="money">{{ orderPaymentData.point }}</text>
-						<text class="unit">积分</text>
-					</view>
-				</view>
-				<view class="order-cell" v-if="orderPaymentData.exchange_info.type == 1 && orderPaymentData.delivery_money > 0">
-					<text class="tit">运费</text>
-					<view class="box">
-						<text class="unit">{{ $lang('common.currencySymbol') }}</text>
-						<text class="money">{{ orderPaymentData.delivery_money | moneyFormat }}</text>
-					</view>
-				</view>
-
-			</view>
-
-			<view class="error-message" v-if="orderPaymentData.delivery && orderPaymentData.delivery.delivery_type == 'local' && orderPaymentData.delivery && orderPaymentData.delivery.error && orderPaymentData.delivery.error !== ''">
-				{{orderPaymentData.delivery.error_msg}}
-			</view>
-			<view class="order-submit" :class="{ 'bottom-safe-area': isIphoneX }">
-				<view class="order-settlement-info">
-					<text class="font-size-base color-tip margin-right">共{{ orderPaymentData.goods_num }}件</text>
-					<text class="font-size-base">合计：</text>
-					<text class="color-base-text money">{{ orderPaymentData.point }}</text>
-					<text class="color-base-text unit">积分</text>
-					<template v-if="orderPaymentData.exchange_info.type == 1 && orderPaymentData.order_money > 0">
-						<text class="color-base-text unit">+{{ $lang('common.currencySymbol') }}</text>
-						<text class="color-base-text money">{{ orderPaymentData.order_money | moneyFormat }}</text>
-					</template>
-				</view>
-				<view class="submit-btn">
-					<button v-if="createBtn()" type="primary" class="mini" size="mini" @click="openChoosePayment()">提交订单</button>
-					<button v-else class="no-submit mini" size="mini">
-						<block v-if="orderPaymentData.delivery && orderPaymentData.delivery.delivery_type == 'local' && orderPaymentData.delivery && orderPaymentData.delivery.error && orderPaymentData.delivery.start_money > orderPaymentData.price">
-							差{{ orderPaymentData.delivery.start_money-orderPaymentData.price | moneyFormat }}起送
-						</block>
-						<block v-else >提交订单</block>
-					</button>
-				</view>
-			</view>
-			<div class="order-submit-block"></div>
-
-			<!-- 门店列表弹窗 -->
-			<uni-popup ref="deliveryPopup" type="bottom">
-				<view class="delivery-popup popup">
-					<view class="popup-header">
-						<text class="tit">已为您甄选出附近所有相关门店</text>
-						<text class="iconfont icon-close" @click="closePopup('deliveryPopup')"></text>
-					</view>
-					<view class="popup-body store-popup" :class="{ 'safe-area': isIphoneX }">
-						<view class="delivery-content">
-							<view class="item-wrap" v-for="(item, index) in storeInfo.storeList" :key="index" @click="selectPickupPoint(item)">
-								<view class="detail">
-									<view class="name" :class="item.store_id == orderPaymentData.delivery.store_id ? 'color-base-text' : ''">
-										<text>{{ item.store_name }}</text>
-										<text v-if="item.distance">({{ item.distance }}km)</text>
-									</view>
-									<view class="info">
-										<view :class="item.store_id == orderPaymentData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">
-											营业时间：{{ item.open_date }}
-										</view>
-										<view :class="item.store_id == orderPaymentData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">
-											地址：{{ item.full_address }}{{ item.address }}
-										</view>
-									</view>
-								</view>
-								<view class="icon" v-if="item.store_id == orderPaymentData.delivery.store_id"><text class="iconfont icon-yuan_checked color-base-text"></text></view>
-							</view>
-							<view v-if="!storeInfo.storeList" class="empty">所选择收货地址附近没有可以自提的门店</view>
-						</view>
-					</view>
-				</view>
-			</uni-popup>
-
-		</scroll-view>
-
-		<!-- 选择支付方式弹窗 -->
-		<ns-payment ref="choosePaymentPopup" :payMoney="orderPaymentData.order_money" @confirm="orderCreate"></ns-payment>
-
-		<loading-cover ref="loadingCover"></loading-cover>
-
-		<!-- 门店自提、同城配送时间选择 -->
-		<ns-select-time @selectTime='selectTime' ref="TimePopup"></ns-select-time>
-	</view>
-</template>
-
-<script>
-	import payment from './public/js/payment.js';
-	import uniPopup from '@/components/uni-popup/uni-popup.vue';
-
-	export default {
-		components: {
-			uniPopup,
-		},
-		mixins: [payment]
-	};
-</script>
-
-<style lang="scss">
-	@import "@/common/css/order_parment.scss";
-</style>
-<style scoped>
-	/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
-		background: none;
-		max-height: unset !important;
-		overflow-y: hidden !important;
-	}
-
-	>>>.uni-popup__wrapper {
-		border-radius: 20rpx 20rpx 0 0;
-	}
-
-	>>>.uni-popup {
-		z-index: 8;
-	}
+<template>
+	<page-meta :page-style="themeColor"></page-meta>
+	<view class="order-container" :class="{ 'safe-area': isIphoneX }">
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="payment-navbar" :style="{
+				'padding-top': menuButtonBounding.top + 'px',
+				height: menuButtonBounding.height + 'px'
+			}">
+			<view class="nav-wrap">
+				<text class="iconfont icon-back_light" @click="back"></text>
+				<view class="navbar-title">确认订单</view>
+			</view>
+		</view>
+		<view class="payment-navbar-block" :style="{ height: menuButtonBounding.bottom + 'px' }"></view>
+		<!-- #endif -->
+
+		<scroll-view scroll-y="true" class="order-scroll-container">
+			<view class="payment-navbar-block"></view>
+			<!-- 选择地址 -->
+			<template v-if="orderPaymentData.exchange_info.type == 1 && orderPaymentData.is_virtual == 0">
+				<!-- 配送方式 -->
+				<view class="delivery-mode" v-if="orderCreateData.delivery &&orderPaymentData.delivery.express_type.length > 1">
+					<view class="action">
+						<view v-for="(deliveryItem, deliveryIndex) in orderPaymentData.delivery.express_type"
+							:key="deliveryIndex"
+							:class="{active: deliveryItem.name == orderCreateData.delivery.delivery_type}"
+							@click="selectDeliveryType(deliveryItem)">
+							{{ deliveryItem.title }}
+							<!-- 外圆角 -->
+							<view class="out-radio"></view>
+						</view>
+					</view>
+				</view>
+
+				<view class="address-box" :class="{'not-delivery-type': orderPaymentData.delivery.express_type.length <= 1}"
+					v-if="orderPaymentData.delivery.delivery_type != 'store'">
+					<block v-if="storeInfo.storeList.length > 1 && orderPaymentData.delivery.delivery_type == 'local'">
+						<view class="local-delivery-store" v-if="Object.keys(storeInfo.currStore).length" @click="$refs.deliveryPopup.open()">
+							<view class="info">
+								由 <text class="store-name">{{ storeInfo.currStore.store_name }}</text> 提供配送
+							</view>
+							<view class="cell-more">
+								<text>点击切换</text>
+								<text class="iconfont icon-right"></text>
+							</view>
+						</view>
+						<view v-else class="local-delivery-store">
+							<view class="info">
+								<text class="store-name">您的附近没有可配送的门店，请选择其他配送方式</text>
+							</view>
+						</view>
+					</block>
+					<view class="info-wrap" :class="{'local': orderPaymentData.delivery.delivery_type == 'local'}" v-if="orderCreateData.member_address" @click="selectAddress">
+						<view class="content">
+							<text class="name font-size-base">{{ orderCreateData.member_address.name ? orderCreateData.member_address.name : '' }}</text>
+							<text class="font-size-base mobile">{{ orderCreateData.member_address.mobile ? orderCreateData.member_address.mobile : '' }}</text>
+							<text class="cell-more iconfont icon-right"></text>
+							<view class="desc-wrap">
+								{{ orderCreateData.member_address.full_address ? orderCreateData.member_address.full_address : '' }}
+								{{ orderCreateData.member_address.address ? orderCreateData.member_address.address : '' }}
+							</view>
+						</view>
+					</view>
+					<view class="empty-wrap" v-else @click="selectAddress">
+						<view class="info">请设置收货地址</view>
+						<view class="cell-more">
+							<view class="iconfont icon-right"></view>
+						</view>
+					</view>
+
+					<!-- 外卖配送 -->
+					<block v-if="orderPaymentData.delivery.delivery_type == 'local'">
+						<view class="local-box" v-if="orderPaymentData.config.local.is_use && orderPaymentData.delivery.local.info && orderPaymentData.delivery.local.info.time_is_open == 1">
+							<view class="pick-block" @click="localtime">
+								<view class="font-size-base">送达时间</view>
+								<view class="time-picker">
+									<text :class="{'color-tip': !orderCreateData.buyer_ask_delivery_title}">{{ orderCreateData.buyer_ask_delivery_title ? orderCreateData.buyer_ask_delivery_title : '请选择送达时间' }}</text>
+									<text class="iconfont icon-right cell-more"></text>
+								</view>
+							</view>
+						</view>
+					</block>
+					<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
+				</view>
+
+				<view class="store-box" :class="{'not-delivery-type': orderPaymentData.delivery.express_type.length <= 1}" v-if="orderPaymentData.delivery.delivery_type == 'store' && storeInfo.currStore">
+					<block v-if="storeInfo.currStore">
+						<view @click="openSiteDelivery" class="store-info">
+							<view class="store-address-info">
+								<view class="info-wrap">
+									<view class="title">
+										<text>{{ storeInfo.currStore.store_name }}</text>
+										<view class="cell-more iconfont icon-right"></view>
+									</view>
+									<view class="store-detail">
+										<view v-if="storeInfo.currStore.open_date">
+											营业时间：{{ storeInfo.currStore.open_date }}</view>
+										<view>地址：{{ storeInfo.currStore.full_address }}
+											{{ storeInfo.currStore.address }}
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+						<view class="mobile-wrap store-mobile">
+							<view class="form-group">
+								<text class="text">姓名</text>
+								<input type="text" placeholder-class="color-tip placeholder" class="input" v-model="member_address.name" disabled />
+							</view>
+						</view>
+						<view class="mobile-wrap store-mobile">
+							<view class="form-group">
+								<text class="text">预留手机</text>
+								<input type="number" maxlength="11" placeholder="请输入您的手机号码"
+									placeholder-class="color-tip placeholder" class="input" v-model="member_address.mobile" />
+							</view>
+						</view>
+						<view class="store-time">
+							<view class="left">自提时间</view>
+							<view class="right" @click="storetime">
+								{{orderCreateData.buyer_ask_delivery_title}}
+								<text class="iconfont icon-right"></text>
+							</view>
+						</view>
+					</block>
+					<view v-else class="empty">当前无自提门店，请选择其它配送方式</view>
+
+					<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
+				</view>
+			</template>
+
+			<!-- 虚拟商品展示手机号 -->
+			<view class="mobile-wrap" v-if="orderPaymentData.is_virtual == 1 && orderCreateData.member_address">
+				<view class="tips color-base-text">
+					<text class="iconfont icon-gantanhao"></text>
+					购买虚拟类商品需填写手机号，方便商家与您联系
+				</view>
+				<view class="form-group">
+					<text class="iconfont icon-dianhua2"></text>
+					<text class="text">手机号码</text>
+					<input type="number" maxlength="11" placeholder="请输入您的手机号码" placeholder-class="color-tip placeholder" class="input" v-model="orderCreateData.member_address.mobile" />
+				</view>
+			</view>
+
+			<!-- 店铺 -->
+			<view class="site-wrap" :class="orderPaymentData.exchange_info.type == 2 || orderPaymentData.exchange_info.type == 3 ? 'margin-top' : ''">
+				<view class="site-body">
+					<view class="goods-wrap">
+						<block v-if="orderPaymentData.exchange_info.type == 2">
+							<view class="goods-img">
+								<image :src="orderPaymentData.exchange_info.image ? $util.img(orderPaymentData.exchange_info.image) : $util.img('public/uniapp/point/coupon.png')" @error="imageError()" mode="aspectFill"/>
+							</view>
+						</block>
+						<block v-else-if="orderPaymentData.exchange_info.type == 3">
+							<view class="goods-img">
+								<image :src="orderPaymentData.exchange_info.image ? $util.img(orderPaymentData.exchange_info.image) : $util.img('public/uniapp/point/hongbao.png')" @error="imageError()" mode="aspectFill"/>
+							</view>
+						</block>
+						<block v-else>
+							<view class="goods-img">
+								<image :src="$util.img(orderPaymentData.exchange_info.image)" @error="imageError()" mode="aspectFill"/>
+							</view>
+						</block>
+						<view class="goods-info">
+							<view class="goods-name">{{ orderPaymentData.exchange_info.name }}</view>
+							<view class="goods-sub-section">
+								<view v-if="orderPaymentData.exchange_info.pay_type == 1" class="color-base-text">
+									<text class="goods-price">{{ orderPaymentData.exchange_info.point }}</text>
+									<text class="unit">积分</text>
+									<template v-if="orderPaymentData.exchange_info.price != '0.00'">
+										<text class="unit">+{{ $lang('common.currencySymbol') }}</text>
+										<text class="goods-price">{{ orderPaymentData.exchange_info.price }}</text>
+									</template>
+								</view>
+								<view>
+									<text class="font-size-tag">x</text>
+									<text class="font-size-base">{{ orderPaymentData.goods_num }}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="site-footer">
+					<view class="order-cell">
+						<text class="tit">买家留言</text>
+						<view class="box"><input type="text" placeholder="留言前建议先与商家协调一致" placeholder-class="color-tip" v-model="orderCreateData.buyer_message" /></view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 金额 -->
+			<view class="order-money">
+				<view class="order-cell">
+					<text class="tit">所需积分</text>
+					<view class="box">
+						<text class="money">{{ orderPaymentData.point }}</text>
+						<text class="unit">积分</text>
+					</view>
+				</view>
+				<view class="order-cell" v-if="orderPaymentData.exchange_info.type == 1 && orderPaymentData.delivery_money > 0">
+					<text class="tit">运费</text>
+					<view class="box">
+						<text class="unit">{{ $lang('common.currencySymbol') }}</text>
+						<text class="money">{{ orderPaymentData.delivery_money | moneyFormat }}</text>
+					</view>
+				</view>
+
+			</view>
+
+			<view class="error-message" v-if="orderPaymentData.delivery && orderPaymentData.delivery.delivery_type == 'local' && orderPaymentData.delivery && orderPaymentData.delivery.error && orderPaymentData.delivery.error !== ''">
+				{{orderPaymentData.delivery.error_msg}}
+			</view>
+			<view class="order-submit" :class="{ 'bottom-safe-area': isIphoneX }">
+				<view class="order-settlement-info">
+					<text class="font-size-base color-tip margin-right">共{{ orderPaymentData.goods_num }}件</text>
+					<text class="font-size-base">合计：</text>
+					<text class="color-base-text money">{{ orderPaymentData.point }}</text>
+					<text class="color-base-text unit">积分</text>
+					<template v-if="orderPaymentData.exchange_info.type == 1 && orderPaymentData.order_money > 0">
+						<text class="color-base-text unit">+{{ $lang('common.currencySymbol') }}</text>
+						<text class="color-base-text money">{{ orderPaymentData.order_money | moneyFormat }}</text>
+					</template>
+				</view>
+				<view class="submit-btn">
+					<button v-if="createBtn()" type="primary" class="mini" size="mini" @click="openChoosePayment()">提交订单</button>
+					<button v-else class="no-submit mini" size="mini">
+						<block v-if="orderPaymentData.delivery && orderPaymentData.delivery.delivery_type == 'local' && orderPaymentData.delivery && orderPaymentData.delivery.error && orderPaymentData.delivery.start_money > orderPaymentData.price">
+							差{{ orderPaymentData.delivery.start_money-orderPaymentData.price | moneyFormat }}起送
+						</block>
+						<block v-else >提交订单</block>
+					</button>
+				</view>
+			</view>
+			<div class="order-submit-block"></div>
+
+			<!-- 门店列表弹窗 -->
+			<uni-popup ref="deliveryPopup" type="bottom">
+				<view class="delivery-popup popup">
+					<view class="popup-header">
+						<text class="tit">已为您甄选出附近所有相关门店</text>
+						<text class="iconfont icon-close" @click="closePopup('deliveryPopup')"></text>
+					</view>
+					<view class="popup-body store-popup" :class="{ 'safe-area': isIphoneX }">
+						<view class="delivery-content">
+							<view class="item-wrap" v-for="(item, index) in storeInfo.storeList" :key="index" @click="selectPickupPoint(item)">
+								<view class="detail">
+									<view class="name" :class="item.store_id == orderPaymentData.delivery.store_id ? 'color-base-text' : ''">
+										<text>{{ item.store_name }}</text>
+										<text v-if="item.distance">({{ item.distance }}km)</text>
+									</view>
+									<view class="info">
+										<view :class="item.store_id == orderPaymentData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">
+											营业时间：{{ item.open_date }}
+										</view>
+										<view :class="item.store_id == orderPaymentData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">
+											地址：{{ item.full_address }}{{ item.address }}
+										</view>
+									</view>
+								</view>
+								<view class="icon" v-if="item.store_id == orderPaymentData.delivery.store_id"><text class="iconfont icon-yuan_checked color-base-text"></text></view>
+							</view>
+							<view v-if="!storeInfo.storeList" class="empty">所选择收货地址附近没有可以自提的门店</view>
+						</view>
+					</view>
+				</view>
+			</uni-popup>
+
+		</scroll-view>
+
+		<!-- 选择支付方式弹窗 -->
+		<ns-payment ref="choosePaymentPopup" :payMoney="orderPaymentData.order_money" @confirm="orderCreate"></ns-payment>
+
+		<loading-cover ref="loadingCover"></loading-cover>
+
+		<!-- 门店自提、同城配送时间选择 -->
+		<ns-select-time @selectTime='selectTime' ref="TimePopup"></ns-select-time>
+	</view>
+</template>
+
+<script>
+	import payment from './public/js/payment.js';
+	import uniPopup from '@/components/uni-popup/uni-popup.vue';
+
+	export default {
+		components: {
+			uniPopup,
+		},
+		mixins: [payment]
+	};
+</script>
+
+<style lang="scss">
+	@import "@/common/css/order_parment.scss";
+</style>
+<style lang="scss" scoped>
+	/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
+		background: none;
+		max-height: unset !important;
+		overflow-y: hidden !important;
+	}
+
+	>>>.uni-popup__wrapper {
+		border-radius: 20rpx 20rpx 0 0;
+	}
+
+	>>>.uni-popup {
+		z-index: 8;
+	}
 </style>
\ No newline at end of file
diff --git a/pages_tool/cases/index.vue b/pages_tool/cases/index.vue
index 50303ad..9c2f9cd 100644
--- a/pages_tool/cases/index.vue
+++ b/pages_tool/cases/index.vue
@@ -3,7 +3,7 @@
     <view class="about w100">
       <view class="list_cotact padding-top">
         <view class="container">
-          <block v-for="(item, index) in dataList" :key="index">
+          <block v-for="(item, index) in dataList" :key="item.case_id || index">
             <view class="view_ul_100" style="margin-bottom:30rpx;">
               <view class="bl clearfix bor bg-white">
                 <block v-if="item.$orig.case_type === 0">
@@ -312,7 +312,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .item {
   display: flex;
   padding: 30rpx 0;
diff --git a/pages_tool/components/img-cropping/cropping.vue b/pages_tool/components/img-cropping/cropping.vue
index bc32eec..08f00b1 100644
--- a/pages_tool/components/img-cropping/cropping.vue
+++ b/pages_tool/components/img-cropping/cropping.vue
@@ -1360,7 +1360,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 .my-canvas {
 	display: flex;
 	position: fixed !important;
diff --git a/pages_tool/components/myp-one/myp-one.vue b/pages_tool/components/myp-one/myp-one.vue
index 4b97fc6..47be939 100644
--- a/pages_tool/components/myp-one/myp-one.vue
+++ b/pages_tool/components/myp-one/myp-one.vue
@@ -108,7 +108,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 @keyframes twinkling {
 	0% {
 		opacity: 0.2;
diff --git a/pages_tool/components/sx-rate/index.vue b/pages_tool/components/sx-rate/index.vue
index 6f99821..1584f8a 100644
--- a/pages_tool/components/sx-rate/index.vue
+++ b/pages_tool/components/sx-rate/index.vue
@@ -1,218 +1,218 @@
-<template>
-	<view class="rate-box" :class="[{ animation }, containerClass]" @touchmove="ontouchmove" @touchend="touchMoving = false">
-		<view
-			v-for="(val, i) in list"
-			:key="val"
-			class="rate"
-			:style="{ fontSize, paddingLeft: i !== 0 ? rateMargin : 0, paddingRight: i < list.length - 1 ? rateMargin : 0 }"
-			:class="[
-				{ scale: !disabled && val <= rateValue && animation && touchMoving, 'color-base-text': val <= rateValue, defaultColor: val > rateValue },
-				`rate-${i}`,
-				rateClass
-			]"
-			:data-val="val"
-			@click="onItemClick"
-		>
-			<text class="iconfont icon-star"></text>
-		</view>
-	</view>
-</template>
-
-<script>
-import { getClientRect } from './common';
-
-export default {
-	name: 'sx-rate',
-	props: {
-		// 当前值
-		value: {
-			type: [Number, String]
-		},
-		// 最大星星数量
-		max: {
-			type: Number,
-			default: 5
-		},
-		// 禁用
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		// 动画效果
-		animation: {
-			type: Boolean,
-			default: true
-		},
-		// 默认星星颜色
-		defaultColor: {
-			type: String,
-			default: '#ccc'
-		},
-		// 滑选后星星颜色
-		activeColor: {
-			type: String
-			// default: '#FFB700'
-		},
-		// 星星大小
-		fontSize: {
-			type: String,
-			default: 'inherit'
-		},
-		// 星星间距
-		margin: {
-			type: String,
-			default: ''
-		},
-		// 自定义类名-容器
-		containerClass: {
-			type: String,
-			default: ''
-		},
-		// 自定义类名-星星
-		rateClass: {
-			type: String,
-			default: ''
-		},
-		index: {
-			// 如果页面中存在多个该组件，通过该属性区分
-			type: [Number, String]
-		}
-	},
-	data() {
-		return {
-			rateValue: 0,
-			touchMoving: false,
-			startX: [],
-			startW: 30
-		};
-	},
-	computed: {
-		list() {
-			return [...new Array(this.max)].map((_, i) => i + 1);
-		},
-		rateMargin() {
-			let margin = this.margin;
-			if (!margin) return 0;
-
-			switch (typeof margin) {
-				case 'number':
-					margin = margin * 2 + 'rpx';
-				case 'string':
-					break;
-				default:
-					return 0;
-			}
-
-			let reg = /^(\d+)([^\d]*)/;
-			let result = reg.exec(margin);
-			if (!result) return 0;
-
-			let [_, num, unit] = result;
-			return num / 2 + unit;
-		}
-	},
-	watch: {
-		value: {
-			handler(val) {
-				this.rateValue = val;
-			},
-			immediate: true
-		}
-	},
-	methods: {
-		// 计算星星位置
-		async initStartX() {
-			let { max } = this;
-			this.startX = [];
-
-			for (let i = 0; i < max; i++) {
-				let selector = `.rate-${i}`;
-				let { left, width } = await getClientRect(selector, this);
-
-				this.startX.push(left);
-				this.startW = width;
-			}
-		},
-
-		/**
-		 * 手指滑动事件回调
-		 * https://github.com/sunxi1997/uni-app-sx-rate/pull/1
-		 * 原本的触摸处理在自定了样式后可能会出现bug, 已解决
-		 */
-		async ontouchmove(e) {
-			if (!this.touchMoving) {
-				this.touchMoving = true;
-				// 开始手指滑动时重新计算星星位置,防止星星位置意外变化
-				await this.initStartX();
-			}
-
-			let { startX, startW, max } = this;
-			let { touches } = e;
-
-			// 触摸焦点停留的位置
-			let { pageX } = touches[touches.length - 1];
-
-			// 超出最左边, 0 星
-			if (pageX <= startX[0]) return this.toggle(0);
-			// 刚好在第一颗星
-			else if (pageX <= startX[0] + startW) return this.toggle(1);
-			// 超出最右边, 最大星
-			else if (pageX >= startX[max - 1]) return this.toggle(max);
-
-			//计算星星停留的位置
-			let startXHash = startX.concat(pageX).sort((a, b) => a - b);
-			this.toggle(startXHash.indexOf(pageX));
-		},
-		// 点击回调
-		onItemClick(e) {
-			let { val } = e.currentTarget.dataset;
-			this.toggle(val);
-		},
-		// 修改值
-		toggle(val) {
-			let { disabled } = this;
-			if (disabled) return;
-			if (this.rateValue !== val) {
-				this.rateValue = val;
-				this.$emit('update:value', val);
-				let data = {
-					index: this.index,
-					value: val
-				};
-				this.$emit('change', data);
-			}
-		}
-	},
-	mounted() {}
-};
-</script>
-
-<style scoped>
-@import './sx-rate/iconfont.css';
-</style>
-
-<style lang="scss">
-.rate-box {
-	min-height: 1.4em;
-	display: flex;
-	align-items: center;
-}
-
-.rate {
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	width: 1.2em;
-	transition: all 0.15s linear;
-}
-
-.rate.scale {
-	transform: scale(1.1);
-}
-
-.defaultColor {
-	color: #ccc !important;
-}
-.activeColor {
-}
-</style>
+<template>
+	<view class="rate-box" :class="[{ animation }, containerClass]" @touchmove="ontouchmove" @touchend="touchMoving = false">
+		<view
+			v-for="(val, i) in list"
+			:key="val"
+			class="rate"
+			:style="{ fontSize, paddingLeft: i !== 0 ? rateMargin : 0, paddingRight: i < list.length - 1 ? rateMargin : 0 }"
+			:class="[
+				{ scale: !disabled && val <= rateValue && animation && touchMoving, 'color-base-text': val <= rateValue, defaultColor: val > rateValue },
+				`rate-${i}`,
+				rateClass
+			]"
+			:data-val="val"
+			@click="onItemClick"
+		>
+			<text class="iconfont icon-star"></text>
+		</view>
+	</view>
+</template>
+
+<script>
+import { getClientRect } from './common';
+
+export default {
+	name: 'sx-rate',
+	props: {
+		// 当前值
+		value: {
+			type: [Number, String]
+		},
+		// 最大星星数量
+		max: {
+			type: Number,
+			default: 5
+		},
+		// 禁用
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 动画效果
+		animation: {
+			type: Boolean,
+			default: true
+		},
+		// 默认星星颜色
+		defaultColor: {
+			type: String,
+			default: '#ccc'
+		},
+		// 滑选后星星颜色
+		activeColor: {
+			type: String
+			// default: '#FFB700'
+		},
+		// 星星大小
+		fontSize: {
+			type: String,
+			default: 'inherit'
+		},
+		// 星星间距
+		margin: {
+			type: String,
+			default: ''
+		},
+		// 自定义类名-容器
+		containerClass: {
+			type: String,
+			default: ''
+		},
+		// 自定义类名-星星
+		rateClass: {
+			type: String,
+			default: ''
+		},
+		index: {
+			// 如果页面中存在多个该组件，通过该属性区分
+			type: [Number, String]
+		}
+	},
+	data() {
+		return {
+			rateValue: 0,
+			touchMoving: false,
+			startX: [],
+			startW: 30
+		};
+	},
+	computed: {
+		list() {
+			return [...new Array(this.max)].map((_, i) => i + 1);
+		},
+		rateMargin() {
+			let margin = this.margin;
+			if (!margin) return 0;
+
+			switch (typeof margin) {
+				case 'number':
+					margin = margin * 2 + 'rpx';
+				case 'string':
+					break;
+				default:
+					return 0;
+			}
+
+			let reg = /^(\d+)([^\d]*)/;
+			let result = reg.exec(margin);
+			if (!result) return 0;
+
+			let [_, num, unit] = result;
+			return num / 2 + unit;
+		}
+	},
+	watch: {
+		value: {
+			handler(val) {
+				this.rateValue = val;
+			},
+			immediate: true
+		}
+	},
+	methods: {
+		// 计算星星位置
+		async initStartX() {
+			let { max } = this;
+			this.startX = [];
+
+			for (let i = 0; i < max; i++) {
+				let selector = `.rate-${i}`;
+				let { left, width } = await getClientRect(selector, this);
+
+				this.startX.push(left);
+				this.startW = width;
+			}
+		},
+
+		/**
+		 * 手指滑动事件回调
+		 * https://github.com/sunxi1997/uni-app-sx-rate/pull/1
+		 * 原本的触摸处理在自定了样式后可能会出现bug, 已解决
+		 */
+		async ontouchmove(e) {
+			if (!this.touchMoving) {
+				this.touchMoving = true;
+				// 开始手指滑动时重新计算星星位置,防止星星位置意外变化
+				await this.initStartX();
+			}
+
+			let { startX, startW, max } = this;
+			let { touches } = e;
+
+			// 触摸焦点停留的位置
+			let { pageX } = touches[touches.length - 1];
+
+			// 超出最左边, 0 星
+			if (pageX <= startX[0]) return this.toggle(0);
+			// 刚好在第一颗星
+			else if (pageX <= startX[0] + startW) return this.toggle(1);
+			// 超出最右边, 最大星
+			else if (pageX >= startX[max - 1]) return this.toggle(max);
+
+			//计算星星停留的位置
+			let startXHash = startX.concat(pageX).sort((a, b) => a - b);
+			this.toggle(startXHash.indexOf(pageX));
+		},
+		// 点击回调
+		onItemClick(e) {
+			let { val } = e.currentTarget.dataset;
+			this.toggle(val);
+		},
+		// 修改值
+		toggle(val) {
+			let { disabled } = this;
+			if (disabled) return;
+			if (this.rateValue !== val) {
+				this.rateValue = val;
+				this.$emit('update:value', val);
+				let data = {
+					index: this.index,
+					value: val
+				};
+				this.$emit('change', data);
+			}
+		}
+	},
+	mounted() {}
+};
+</script>
+
+<style lang="scss" scoped>
+@import './sx-rate/iconfont.css';
+</style>
+
+<style lang="scss">
+.rate-box {
+	min-height: 1.4em;
+	display: flex;
+	align-items: center;
+}
+
+.rate {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	width: 1.2em;
+	transition: all 0.15s linear;
+}
+
+.rate.scale {
+	transform: scale(1.1);
+}
+
+.defaultColor {
+	color: #ccc !important;
+}
+.activeColor {
+}
+</style>
diff --git a/pages_tool/files/list.vue b/pages_tool/files/list.vue
index d850b08..91101b8 100644
--- a/pages_tool/files/list.vue
+++ b/pages_tool/files/list.vue
@@ -183,7 +183,7 @@
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .search-wrap {
     flex: 0.5;
     padding: 30rpx 30rpx 0;
diff --git a/pages_tool/help/list.vue b/pages_tool/help/list.vue
index 77efc6c..ea10cd6 100644
--- a/pages_tool/help/list.vue
+++ b/pages_tool/help/list.vue
@@ -2,9 +2,9 @@
 	<page-meta :page-style="themeColor"></page-meta>
 	<view class="help">
 		<block v-if="dataList.length">
-			<view class="help-item" v-for="(item, index) in dataList" :key="index">
+			<view class="help-item" v-for="(item, index) in dataList" :key="item.class_id || index">
 				<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_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_item.id || s_index" @click="helpDetail(s_item)">{{ s_item.title }}</view>
 			</view>
 		</block>
 		<block v-else><ns-empty text="暂无帮助信息" :isIndex="false"></ns-empty></block>
diff --git a/pages_tool/index/diy.vue b/pages_tool/index/diy.vue
index ca7371e..0056867 100644
--- a/pages_tool/index/diy.vue
+++ b/pages_tool/index/diy.vue
@@ -1,95 +1,95 @@
-<template>
-	<page-meta :page-style="themeColor"></page-meta>
-	<view :style="{ backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }" class="page-img">
-		<view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }">
-			<ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="true"/>
-		</view>
-
-		<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl" :scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
-			<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" :haveTopCategory="true"/>
-			<ns-copyright v-show="isShowCopyRight"/>
-		</diy-index-page>
-
-		<view v-else class="bg-index" :style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
-			<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"/>
-			<ns-copyright v-show="isShowCopyRight"/>
-		</view>
-
-		<template v-if="diyData.global && diyData.global.popWindow && diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl">
-			<view @touchmove.prevent.stop>
-				<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
-					<view class="image-wrap">
-						<image :src="$util.img(diyData.global.popWindow.imageUrl)" :style="popWindowStyle" @click="uniPopupWindowFn()" mode="aspectFit"/>
-					</view>
-					<text class="iconfont icon-round-close" @click="closePopupWindow"></text>
-				</uni-popup>
-			</view>
-		</template>
-
-		<!-- 底部tabBar -->
-		<view class="page-bottom" v-if="openBottomNav">
-			<diy-bottom-nav @callback="callback" :name="name"/>
-		</view>
-
-		<!-- 收藏 -->
-		<uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
-			<view v-if="showTip" class="collectPopupWindow" :style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }">
-				<image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit"/>
-				<text @click="closeCollectPopupWindow">我知道了</text>
-			</view>
-		</uni-popup>
-
-		<!-- #ifdef MP-WEIXIN -->
-		<!-- 小程序隐私协议 -->
-		<privacy-popup ref="privacyPopup"></privacy-popup>
-		<!-- #endif -->
-	</view>
-</template>
-
-<script>
-	import uniPopup from '@/components/uni-popup/uni-popup.vue';
-	import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
-	import diyJs from '@/common/js/diy.js';
-	import microPageJs from './public/js/diy.js';
-
-	export default {
-		components: {
-			uniPopup,
-			nsNavbar
-		},
-		mixins: [diyJs, microPageJs]
-	};
-</script>
-
-<style lang="scss">
-	@import '@/common/css/diy.scss';
-</style>
-
-<style scoped>
-	.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
-		background: none !important;
-	}
-
-	/deep/.diy-index-page .uni-popup .uni-popup__wrapper-box {
-		border-radius: 0;
-	}
-
-	.choose-store>>>.goodslist-uni-popup-box {
-		width: 80%;
-	}
-
-	/deep/ .placeholder {
-		height: 0;
-	}
-
-	/deep/::-webkit-scrollbar {
-		width: 0;
-		height: 0;
-		background-color: transparent;
-		display: none;
-	}
-
-	/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
-		max-height: unset !important;
-	}
+<template>
+	<page-meta :page-style="themeColor"></page-meta>
+	<view :style="{ backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }" class="page-img">
+		<view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }">
+			<ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="true"/>
+		</view>
+
+		<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl" :scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
+			<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" :haveTopCategory="true"/>
+			<ns-copyright v-show="isShowCopyRight"/>
+		</diy-index-page>
+
+		<view v-else class="bg-index" :style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
+			<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"/>
+			<ns-copyright v-show="isShowCopyRight"/>
+		</view>
+
+		<template v-if="diyData.global && diyData.global.popWindow && diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl">
+			<view @touchmove.prevent.stop>
+				<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
+					<view class="image-wrap">
+						<image :src="$util.img(diyData.global.popWindow.imageUrl)" :style="popWindowStyle" @click="uniPopupWindowFn()" mode="aspectFit"/>
+					</view>
+					<text class="iconfont icon-round-close" @click="closePopupWindow"></text>
+				</uni-popup>
+			</view>
+		</template>
+
+		<!-- 底部tabBar -->
+		<view class="page-bottom" v-if="openBottomNav">
+			<diy-bottom-nav @callback="callback" :name="name"/>
+		</view>
+
+		<!-- 收藏 -->
+		<uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
+			<view v-if="showTip" class="collectPopupWindow" :style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }">
+				<image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit"/>
+				<text @click="closeCollectPopupWindow">我知道了</text>
+			</view>
+		</uni-popup>
+
+		<!-- #ifdef MP-WEIXIN -->
+		<!-- 小程序隐私协议 -->
+		<privacy-popup ref="privacyPopup"></privacy-popup>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	import uniPopup from '@/components/uni-popup/uni-popup.vue';
+	import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
+	import diyJs from '@/common/js/diy.js';
+	import microPageJs from './public/js/diy.js';
+
+	export default {
+		components: {
+			uniPopup,
+			nsNavbar
+		},
+		mixins: [diyJs, microPageJs]
+	};
+</script>
+
+<style lang="scss">
+	@import '@/common/css/diy.scss';
+</style>
+
+<style lang="scss" scoped>
+	.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
+		background: none !important;
+	}
+
+	/deep/.diy-index-page .uni-popup .uni-popup__wrapper-box {
+		border-radius: 0;
+	}
+
+	.choose-store>>>.goodslist-uni-popup-box {
+		width: 80%;
+	}
+
+	/deep/ .placeholder {
+		height: 0;
+	}
+
+	/deep/::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+		background-color: transparent;
+		display: none;
+	}
+
+	/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
+		max-height: unset !important;
+	}
 </style>
\ No newline at end of file
diff --git a/pages_tool/login/login.vue b/pages_tool/login/login.vue
index 175c51e..6a5b160 100644
--- a/pages_tool/login/login.vue
+++ b/pages_tool/login/login.vue
@@ -470,7 +470,7 @@
 	}
 </style>
 
-<style scoped>
+<style lang="scss" scoped>
 	/deep/ .reward-popup .uni-popup__wrapper-box {
 		background: none !important;
 		max-width: unset !important;
diff --git a/pages_tool/member/account.vue b/pages_tool/member/account.vue
index 0d3a084..a555ef8 100644
--- a/pages_tool/member/account.vue
+++ b/pages_tool/member/account.vue
@@ -12,7 +12,7 @@
 						</view>
 					</view>
 					<block v-if="dataList.length > 0">
-						<view class="list-item" v-for="(item, index) in dataList" :key="index">
+						<view class="list-item" v-for="(item, index) in dataList" :key="item.withdraw_type_id || index">
 							<view class="item-top">
 								<view class="item-left">
 									<view class="title-text">{{ item.withdraw_type_name }}</view>
@@ -425,12 +425,12 @@
 		}
 	}
 </style>
-<style>
+<style lang="scss">
 	/deep/ .mescroll-upwarp {
 		padding-bottom: 150rpx;
 	}
 </style>
-<style>
+<style lang="scss">
 	.item-bottom>>>.uni-switch-wrapper .uni-switch-input {
 		height: 48rpx !important;
 		width: 88rpx !important;
diff --git a/pages_tool/member/address.vue b/pages_tool/member/address.vue
index d3cfae4..5e43478 100644
--- a/pages_tool/member/address.vue
+++ b/pages_tool/member/address.vue
@@ -580,7 +580,7 @@
 		height: calc(100vh - 260rpx);
 	}
 </style>
-<style>
+<style lang="scss">
 	.address-item>>>.uni-switch-wrapper .uni-switch-input {
 		height: 48rpx !important;
 		width: 88rpx !important;
diff --git a/pages_tool/member/balance_detail.vue b/pages_tool/member/balance_detail.vue
index 674e0f7..bc4e047 100644
--- a/pages_tool/member/balance_detail.vue
+++ b/pages_tool/member/balance_detail.vue
@@ -27,7 +27,7 @@
 				<!-- 明细列表 -->
 				<block v-if="dataList.length > 0">
 					<view class="detailed-wrap">
-						<view class="balances" v-for="(item, index) in dataList" :key="index">
+						<view class="balances" v-for="(item, index) in dataList" :key="item.balance_id || index">
 							<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>
 							<view class="balances-info" @click="toFromDetail(item)">
diff --git a/pages_tool/member/card.vue b/pages_tool/member/card.vue
index a168fa9..23cfb30 100644
--- a/pages_tool/member/card.vue
+++ b/pages_tool/member/card.vue
@@ -222,7 +222,7 @@
 	}
 </style>
 
-<style scoped>
+<style lang="scss" scoped>
 	/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
 		max-height: unset !important;
 	}
diff --git a/pages_tool/member/collection.vue b/pages_tool/member/collection.vue
index 064edc2..c4910e0 100644
--- a/pages_tool/member/collection.vue
+++ b/pages_tool/member/collection.vue
@@ -79,7 +79,7 @@
 	@import './public/css/collection.scss';
 </style>
 
-<style scoped>
+<style lang="scss" scoped>
 	/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
 		max-height: unset !important;
 	}
diff --git a/pages_tool/member/invite_friends.vue b/pages_tool/member/invite_friends.vue
index 04ba327..7b78904 100644
--- a/pages_tool/member/invite_friends.vue
+++ b/pages_tool/member/invite_friends.vue
@@ -22,7 +22,7 @@
 				<block v-if="inviteList.length > 0">
 					<view class="invitelist_block">
 						<view class="invitelist">
-							<view class="list-item" v-for="(item, index) in inviteList">
+							<view class="list-item" v-for="(item, index) in inviteList" :key="item.invite_id || index">
 								<view class="img color-base-border">
 									<image mode="aspectFit" :src="item.headimg == '' ? $util.img($util.getDefaultImage().head) : $util.img(item.headimg)"/>
 								</view>
@@ -265,7 +265,7 @@
 <style lang="scss">
 	@import './public/css/invite_friends.scss';
 </style>
-<style scoped>
+<style lang="scss" scoped>
 	/deep/ .uni-popup__wrapper.bottom {
 		border-radius: 24rpx 24rpx 0 0;
 	}
diff --git a/pages_tool/member/point_detail.vue b/pages_tool/member/point_detail.vue
index fd52a39..2aea0ae 100644
--- a/pages_tool/member/point_detail.vue
+++ b/pages_tool/member/point_detail.vue
@@ -23,7 +23,7 @@
 				<block v-if="dataList.length">
 					<view class="detailed-wrap">
 						<view class="cont">
-							<view class="detailed-item" v-for="(item, index) in dataList" :key="index">
+							<view class="detailed-item" v-for="(item, index) in dataList" :key="item.point_id || index">
 								<view class="info" @click="toFromDetail(item)">
 									<view class="event">{{ item.type_name }}</view>
 									<view class="time-box">
diff --git a/pages_tool/member/withdrawal.vue b/pages_tool/member/withdrawal.vue
index db6a049..d020c9f 100644
--- a/pages_tool/member/withdrawal.vue
+++ b/pages_tool/member/withdrawal.vue
@@ -6,7 +6,7 @@
 				<block v-if="dataList.length">
 					<view class="detailed-wrap">
 						<view class="cont">
-							<view class="detailed-item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)">
+							<view class="detailed-item" v-for="(item, index) in dataList" :key="item.withdraw_type_id || index" @click="toDetail(item.id)">
 								<view class="info">
 									<view class="event">{{ item.transfer_type_name }}</view>
 									<view>
diff --git a/pages_tool/notice/list.vue b/pages_tool/notice/list.vue
index 76aea2c..e192555 100644
--- a/pages_tool/notice/list.vue
+++ b/pages_tool/notice/list.vue
@@ -4,7 +4,7 @@
 		<mescroll-uni @getData="getData" ref="mescroll">
 			<block slot="list">
 				<view class="notice-list" v-if="dataList.length">
-					<view class="notice-item" @click="jumpDetail(item.id)" v-for="(item, index) in dataList" :key="index">
+					<view class="notice-item" @click="jumpDetail(item.id)" v-for="(item, index) in dataList" :key="item.notice_id || index">
 						<view class="title-info">
 							<view class="title">
 								<text v-if="item.is_top == 1" class="color-base-bg tag">置顶</text>
diff --git a/pages_tool/order/refund.vue b/pages_tool/order/refund.vue
index 7cfd496..d713205 100644
--- a/pages_tool/order/refund.vue
+++ b/pages_tool/order/refund.vue
@@ -291,7 +291,7 @@ export default {
 <style lang="scss">
 @import './public/css/refund.scss';
 </style>
-<style scoped>
+<style lang="scss" scoped>
 /deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
 	background: none;
 	max-height: unset !important;
diff --git a/pages_tool/order/refund_batch.vue b/pages_tool/order/refund_batch.vue
index a9e3084..3f02a6c 100644
--- a/pages_tool/order/refund_batch.vue
+++ b/pages_tool/order/refund_batch.vue
@@ -293,7 +293,7 @@ export default {
 <style lang="scss">
 @import './public/css/refund.scss';
 </style>
-<style scoped>
+<style lang="scss" scoped>
 /deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
 	background: none;
 	max-height: unset !important;
diff --git a/pages_tool/order/refund_type_select.vue b/pages_tool/order/refund_type_select.vue
index 1356ef1..95f2ae8 100644
--- a/pages_tool/order/refund_type_select.vue
+++ b/pages_tool/order/refund_type_select.vue
@@ -99,7 +99,7 @@
 <style lang="scss">
 	@import './public/css/refund.scss';
 </style>
-<style scoped>
+<style lang="scss" scoped>
 	/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
 		background: none;
 		max-height: unset !important;
diff --git a/pages_tool/pay/result.vue b/pages_tool/pay/result.vue
index 818ece9..dd2d5ab 100644
--- a/pages_tool/pay/result.vue
+++ b/pages_tool/pay/result.vue
@@ -337,7 +337,7 @@
 	}
 </style>
 
-<style scoped>
+<style lang="scss" scoped>
 	/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
 		max-height: unset !important;
 	}
diff --git a/pages_tool/seal/medium/detail.vue b/pages_tool/seal/medium/detail.vue
index 5010303..fe76e1b 100644
--- a/pages_tool/seal/medium/detail.vue
+++ b/pages_tool/seal/medium/detail.vue
@@ -125,7 +125,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .content {
   padding: 20rpx;
 }
diff --git a/pages_tool/seal/medium/search.vue b/pages_tool/seal/medium/search.vue
index 38f66e9..17e7292 100644
--- a/pages_tool/seal/medium/search.vue
+++ b/pages_tool/seal/medium/search.vue
@@ -162,7 +162,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .content {
   padding: 20rpx;
   background-color: #f8f8f8;
diff --git a/pages_tool/seal/structure.vue b/pages_tool/seal/structure.vue
index c8b9c03..cd6cbb4 100644
--- a/pages_tool/seal/structure.vue
+++ b/pages_tool/seal/structure.vue
@@ -76,7 +76,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .picker-container {
   padding: 20rpx;
   display: flex;
diff --git a/pages_tool/weapp/order_shipping.vue b/pages_tool/weapp/order_shipping.vue
index f63a3ad..b9a1996 100644
--- a/pages_tool/weapp/order_shipping.vue
+++ b/pages_tool/weapp/order_shipping.vue
@@ -40,7 +40,7 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.error-msg{
 		text-align: center;
 		padding-top: 10vh;
diff --git a/uni_modules/mp-html/components/mp-html/mp-html.vue b/uni_modules/mp-html/components/mp-html/mp-html.vue
index 5d1d36d..f41c237 100644
--- a/uni_modules/mp-html/components/mp-html/mp-html.vue
+++ b/uni_modules/mp-html/components/mp-html/mp-html.vue
@@ -1,498 +1,498 @@
-<template>
-  <view id="_root" :class="(selectable?'_select ':'')+'_root'" :style="containerStyle">
-    <slot v-if="!nodes[0]" />
-    <!-- #ifndef APP-PLUS-NVUE -->
-    <node v-else :childs="nodes" :opts="[lazyLoad,loadingImg,errorImg,showImgMenu,selectable]" name="span" />
-    <!-- #endif -->
-    <!-- #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" />
-    <!-- #endif -->
-  </view>
-</template>
-
-<script>
-/**
- * mp-html v2.5.0
- * @description 富文本组件
- * @tutorial https://github.com/jin-yufeng/mp-html
- * @property {String} container-style 容器的样式
- * @property {String} content 用于渲染的 html 字符串
- * @property {Boolean} copy-link 是否允许外部链接被点击时自动复制
- * @property {String} domain 主域名，用于拼接链接
- * @property {String} error-img 图片出错时的占位图链接
- * @property {Boolean} lazy-load 是否开启图片懒加载
- * @property {string} loading-img 图片加载过程中的占位图链接
- * @property {Boolean} pause-video 是否在播放一个视频时自动暂停其他视频
- * @property {Boolean} preview-img 是否允许图片被点击时自动预览
- * @property {Boolean} scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动
- * @property {Boolean | String} selectable 是否开启长按复制
- * @property {Boolean} set-title 是否将 title 标签的内容设置到页面标题
- * @property {Boolean} show-img-menu 是否允许图片被长按时显示菜单
- * @property {Object} tag-style 标签的默认样式
- * @property {Boolean | Number} use-anchor 是否使用锚点链接
- * @event {Function} load dom 结构加载完毕时触发
- * @event {Function} ready 所有图片加载完毕时触发
- * @event {Function} imgtap 图片被点击时触发
- * @event {Function} linktap 链接被点击时触发
- * @event {Function} play 音视频播放时触发
- * @event {Function} error 媒体加载出错时触发
- */
-// #ifndef APP-PLUS-NVUE
-import node from './node/node'
-// #endif
-import Parser from './parser'
-const plugins=[]
-// #ifdef APP-PLUS-NVUE
-const dom = weex.requireModule('dom')
-// #endif
-export default {
-  name: 'mp-html',
-  data () {
-    return {
-      nodes: [],
-      // #ifdef APP-PLUS-NVUE
-      height: 3
-      // #endif
-    }
-  },
-  props: {
-    containerStyle: {
-      type: String,
-      default: ''
-    },
-    content: {
-      type: String,
-      default: ''
-    },
-    copyLink: {
-      type: [Boolean, String],
-      default: true
-    },
-    domain: String,
-    errorImg: {
-      type: String,
-      default: ''
-    },
-    lazyLoad: {
-      type: [Boolean, String],
-      default: false
-    },
-    loadingImg: {
-      type: String,
-      default: ''
-    },
-    pauseVideo: {
-      type: [Boolean, String],
-      default: true
-    },
-    previewImg: {
-      type: [Boolean, String],
-      default: true
-    },
-    scrollTable: [Boolean, String],
-    selectable: [Boolean, String],
-    setTitle: {
-      type: [Boolean, String],
-      default: true
-    },
-    showImgMenu: {
-      type: [Boolean, String],
-      default: true
-    },
-    tagStyle: Object,
-    useAnchor: [Boolean, Number]
-  },
-  // #ifdef VUE3
-  emits: ['load', 'ready', 'imgtap', 'linktap', 'play', 'error'],
-  // #endif
-  // #ifndef APP-PLUS-NVUE
-  components: {
-    node
-  },
-  // #endif
-  watch: {
-    content (content) {
-      this.setContent(content)
-    }
-  },
-  created () {
-    this.plugins = []
-    for (let i = plugins.length; i--;) {
-      this.plugins.push(new plugins[i](this))
-    }
-  },
-  mounted () {
-    if (this.content && !this.nodes.length) {
-      this.setContent(this.content)
-    }
-  },
-  beforeDestroy () {
-    this._hook('onDetached')
-  },
-  methods: {
-    /**
-     * @description 将锚点跳转的范围限定在一个 scroll-view 内
-     * @param {Object} page scroll-view 所在页面的示例
-     * @param {String} selector scroll-view 的选择器
-     * @param {String} scrollTop scroll-view scroll-top 属性绑定的变量名
-     */
-    in (page, selector, scrollTop) {
-      // #ifndef APP-PLUS-NVUE
-      if (page && selector && scrollTop) {
-        this._in = {
-          page,
-          selector,
-          scrollTop
-        }
-      }
-      // #endif
-    },
-
-    /**
-     * @description 锚点跳转
-     * @param {String} id 要跳转的锚点 id
-     * @param {Number} offset 跳转位置的偏移量
-     * @returns {Promise}
-     */
-    navigateTo (id, offset) {
-      return new Promise((resolve, reject) => {
-        if (!this.useAnchor) {
-          reject(Error('Anchor is disabled'))
-          return
-        }
-        offset = offset || parseInt(this.useAnchor) || 0
-        // #ifdef APP-PLUS-NVUE
-        if (!id) {
-          dom.scrollToElement(this.$refs.web, {
-            offset
-          })
-          resolve()
-        } else {
-          this._navigateTo = {
-            resolve,
-            reject,
-            offset
-          }
-          this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
-        }
-        // #endif
-        // #ifndef APP-PLUS-NVUE
-        let deep = ' '
-        // #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
-        deep = '>>>'
-        // #endif
-        const selector = uni.createSelectorQuery()
-          // #ifndef MP-ALIPAY
-          .in(this._in ? this._in.page : this)
-          // #endif
-          .select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
-        if (this._in) {
-          selector.select(this._in.selector).scrollOffset()
-            .select(this._in.selector).boundingClientRect()
-        } else {
-          // 获取 scroll-view 的位置和滚动距离
-          selector.selectViewport().scrollOffset() // 获取窗口的滚动距离
-        }
-        selector.exec(res => {
-          if (!res[0]) {
-            reject(Error('Label not found'))
-            return
-          }
-          const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
-          if (this._in) {
-            // scroll-view 跳转
-            this._in.page[this._in.scrollTop] = scrollTop
-          } else {
-            // 页面跳转
-            uni.pageScrollTo({
-              scrollTop,
-              duration: 300
-            })
-          }
-          resolve()
-        })
-        // #endif
-      })
-    },
-
-    /**
-     * @description 获取文本内容
-     * @return {String}
-     */
-    getText (nodes) {
-      let text = '';
-      (function traversal (nodes) {
-        for (let i = 0; i < nodes.length; i++) {
-          const node = nodes[i]
-          if (node.type === 'text') {
-            text += node.text.replace(/&amp;/g, '&')
-          } else if (node.name === 'br') {
-            text += '\n'
-          } 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')
-            if (isBlock && text && text[text.length - 1] !== '\n') {
-              text += '\n'
-            }
-            // 递归获取子节点的文本
-            if (node.children) {
-              traversal(node.children)
-            }
-            if (isBlock && text[text.length - 1] !== '\n') {
-              text += '\n'
-            } else if (node.name === 'td' || node.name === 'th') {
-              text += '\t'
-            }
-          }
-        }
-      })(nodes || this.nodes)
-      return text
-    },
-
-    /**
-     * @description 获取内容大小和位置
-     * @return {Promise}
-     */
-    getRect () {
-      return new Promise((resolve, reject) => {
-        uni.createSelectorQuery()
-          // #ifndef MP-ALIPAY
-          .in(this)
-          // #endif
-          .select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject(Error('Root label not found')))
-      })
-    },
-
-    /**
-     * @description 暂停播放媒体
-     */
-    pauseMedia () {
-      for (let i = (this._videos || []).length; i--;) {
-        this._videos[i].pause()
-      }
-      // #ifdef APP-PLUS
-      const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].pause()'
-      // #ifndef APP-PLUS-NVUE
-      let page = this.$parent
-      while (!page.$scope) page = page.$parent
-      page.$scope.$getAppWebview().evalJS(command)
-      // #endif
-      // #ifdef APP-PLUS-NVUE
-      this.$refs.web.evalJs(command)
-      // #endif
-      // #endif
-    },
-
-    /**
-     * @description 设置媒体播放速率
-     * @param {Number} rate 播放速率
-     */
-    setPlaybackRate (rate) {
-      this.playbackRate = rate
-      for (let i = (this._videos || []).length; i--;) {
-        this._videos[i].playbackRate(rate)
-      }
-      // #ifdef APP-PLUS
-      const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].playbackRate=' + rate
-      // #ifndef APP-PLUS-NVUE
-      let page = this.$parent
-      while (!page.$scope) page = page.$parent
-      page.$scope.$getAppWebview().evalJS(command)
-      // #endif
-      // #ifdef APP-PLUS-NVUE
-      this.$refs.web.evalJs(command)
-      // #endif
-      // #endif
-    },
-
-    /**
-     * @description 设置内容
-     * @param {String} content html 内容
-     * @param {Boolean} append 是否在尾部追加
-     */
-    setContent (content, append) {
-      if (!append || !this.imgList) {
-        this.imgList = []
-      }
-      const nodes = new Parser(this).parse(content)
-      // #ifdef APP-PLUS-NVUE
-      if (this._ready) {
-        this._set(nodes, append)
-      }
-      // #endif
-      this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
-
-      // #ifndef APP-PLUS-NVUE
-      this._videos = []
-      this.$nextTick(() => {
-        this._hook('onLoad')
-        this.$emit('load')
-      })
-
-      if (this.lazyLoad || this.imgList._unloadimgs < this.imgList.length / 2) {
-        // 设置懒加载，每 350ms 获取高度，不变则认为加载完毕
-        let height = 0
-        const callback = rect => {
-          if (!rect || !rect.height) rect = {}
-          // 350ms 总高度无变化就触发 ready 事件
-          if (rect.height === height) {
-            this.$emit('ready', rect)
-          } else {
-            height = rect.height
-            setTimeout(() => {
-              this.getRect().then(callback).catch(callback)
-            }, 350)
-          }
-        }
-        this.getRect().then(callback).catch(callback)
-      } else {
-        // 未设置懒加载，等待所有图片加载完毕
-        if (!this.imgList._unloadimgs) {
-          this.getRect().then(rect => {
-            this.$emit('ready', rect)
-          }).catch(() => {
-            this.$emit('ready', {})
-          })
-        }
-      }
-      // #endif
-    },
-
-    /**
-     * @description 调用插件钩子函数
-     */
-    _hook (name) {
-      for (let i = plugins.length; i--;) {
-        if (this.plugins[i][name]) {
-          this.plugins[i][name]()
-        }
-      }
-    },
-
-    // #ifdef APP-PLUS-NVUE
-    /**
-     * @description 设置内容
-     */
-    _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 + ')')
-    },
-
-    /**
-     * @description 接收到 web-view 消息
-     */
-    _onMessage (e) {
-      const message = e.detail.data[0]
-      switch (message.action) {
-        // web-view 初始化完毕
-        case 'onJSBridgeReady':
-          this._ready = true
-          if (this.nodes) {
-            this._set(this.nodes)
-          }
-          break
-        // 内容 dom 加载完毕
-        case 'onLoad':
-          this.height = message.height
-          this._hook('onLoad')
-          this.$emit('load')
-          break
-        // 所有图片加载完毕
-        case 'onReady':
-          this.getRect().then(res => {
-            this.$emit('ready', res)
-          }).catch(() => {
-            this.$emit('ready', {})
-          })
-          break
-        // 总高度发生变化
-        case 'onHeightChange':
-          this.height = message.height
-          break
-        // 图片点击
-        case 'onImgTap':
-          this.$emit('imgtap', message.attrs)
-          if (this.previewImg) {
-            uni.previewImage({
-              current: parseInt(message.attrs.i),
-              urls: this.imgList
-            })
-          }
-          break
-        // 链接点击
-        case 'onLinkTap': {
-          const href = message.attrs.href
-          this.$emit('linktap', message.attrs)
-          if (href) {
-            // 锚点跳转
-            if (href[0] === '#') {
-              if (this.useAnchor) {
-                dom.scrollToElement(this.$refs.web, {
-                  offset: message.offset
-                })
-              }
-            } else if (href.includes('://')) {
-              // 打开外链
-              if (this.copyLink) {
-                plus.runtime.openWeb(href)
-              }
-            } else {
-              uni.navigateTo({
-                url: href,
-                fail () {
-                  uni.switchTab({
-                    url: href
-                  })
-                }
-              })
-            }
-          }
-          break
-        }
-        case 'onPlay':
-          this.$emit('play')
-          break
-        // 获取到锚点的偏移量
-        case 'getOffset':
-          if (typeof message.offset === 'number') {
-            dom.scrollToElement(this.$refs.web, {
-              offset: message.offset + this._navigateTo.offset
-            })
-            this._navigateTo.resolve()
-          } else {
-            this._navigateTo.reject(Error('Label not found'))
-          }
-          break
-        // 点击
-        case 'onClick':
-          this.$emit('tap')
-          this.$emit('click')
-          break
-        // 出错
-        case 'onError':
-          this.$emit('error', {
-            source: message.source,
-            attrs: message.attrs
-          })
-      }
-    }
-    // #endif
-  }
-}
-</script>
-
-<style>
-/* #ifndef APP-PLUS-NVUE */
-/* 根节点样式 */
-._root {
-  padding: 1px 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* 长按复制 */
-._select {
-  user-select: text;
-}
-/* #endif */
-</style>
+<template>
+  <view id="_root" :class="(selectable?'_select ':'')+'_root'" :style="containerStyle">
+    <slot v-if="!nodes[0]" />
+    <!-- #ifndef APP-PLUS-NVUE -->
+    <node v-else :childs="nodes" :opts="[lazyLoad,loadingImg,errorImg,showImgMenu,selectable]" name="span" />
+    <!-- #endif -->
+    <!-- #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" />
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+/**
+ * mp-html v2.5.0
+ * @description 富文本组件
+ * @tutorial https://github.com/jin-yufeng/mp-html
+ * @property {String} container-style 容器的样式
+ * @property {String} content 用于渲染的 html 字符串
+ * @property {Boolean} copy-link 是否允许外部链接被点击时自动复制
+ * @property {String} domain 主域名，用于拼接链接
+ * @property {String} error-img 图片出错时的占位图链接
+ * @property {Boolean} lazy-load 是否开启图片懒加载
+ * @property {string} loading-img 图片加载过程中的占位图链接
+ * @property {Boolean} pause-video 是否在播放一个视频时自动暂停其他视频
+ * @property {Boolean} preview-img 是否允许图片被点击时自动预览
+ * @property {Boolean} scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动
+ * @property {Boolean | String} selectable 是否开启长按复制
+ * @property {Boolean} set-title 是否将 title 标签的内容设置到页面标题
+ * @property {Boolean} show-img-menu 是否允许图片被长按时显示菜单
+ * @property {Object} tag-style 标签的默认样式
+ * @property {Boolean | Number} use-anchor 是否使用锚点链接
+ * @event {Function} load dom 结构加载完毕时触发
+ * @event {Function} ready 所有图片加载完毕时触发
+ * @event {Function} imgtap 图片被点击时触发
+ * @event {Function} linktap 链接被点击时触发
+ * @event {Function} play 音视频播放时触发
+ * @event {Function} error 媒体加载出错时触发
+ */
+// #ifndef APP-PLUS-NVUE
+import node from './node/node'
+// #endif
+import Parser from './parser'
+const plugins=[]
+// #ifdef APP-PLUS-NVUE
+const dom = weex.requireModule('dom')
+// #endif
+export default {
+  name: 'mp-html',
+  data () {
+    return {
+      nodes: [],
+      // #ifdef APP-PLUS-NVUE
+      height: 3
+      // #endif
+    }
+  },
+  props: {
+    containerStyle: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    copyLink: {
+      type: [Boolean, String],
+      default: true
+    },
+    domain: String,
+    errorImg: {
+      type: String,
+      default: ''
+    },
+    lazyLoad: {
+      type: [Boolean, String],
+      default: false
+    },
+    loadingImg: {
+      type: String,
+      default: ''
+    },
+    pauseVideo: {
+      type: [Boolean, String],
+      default: true
+    },
+    previewImg: {
+      type: [Boolean, String],
+      default: true
+    },
+    scrollTable: [Boolean, String],
+    selectable: [Boolean, String],
+    setTitle: {
+      type: [Boolean, String],
+      default: true
+    },
+    showImgMenu: {
+      type: [Boolean, String],
+      default: true
+    },
+    tagStyle: Object,
+    useAnchor: [Boolean, Number]
+  },
+  // #ifdef VUE3
+  emits: ['load', 'ready', 'imgtap', 'linktap', 'play', 'error'],
+  // #endif
+  // #ifndef APP-PLUS-NVUE
+  components: {
+    node
+  },
+  // #endif
+  watch: {
+    content (content) {
+      this.setContent(content)
+    }
+  },
+  created () {
+    this.plugins = []
+    for (let i = plugins.length; i--;) {
+      this.plugins.push(new plugins[i](this))
+    }
+  },
+  mounted () {
+    if (this.content && !this.nodes.length) {
+      this.setContent(this.content)
+    }
+  },
+  beforeDestroy () {
+    this._hook('onDetached')
+  },
+  methods: {
+    /**
+     * @description 将锚点跳转的范围限定在一个 scroll-view 内
+     * @param {Object} page scroll-view 所在页面的示例
+     * @param {String} selector scroll-view 的选择器
+     * @param {String} scrollTop scroll-view scroll-top 属性绑定的变量名
+     */
+    in (page, selector, scrollTop) {
+      // #ifndef APP-PLUS-NVUE
+      if (page && selector && scrollTop) {
+        this._in = {
+          page,
+          selector,
+          scrollTop
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 锚点跳转
+     * @param {String} id 要跳转的锚点 id
+     * @param {Number} offset 跳转位置的偏移量
+     * @returns {Promise}
+     */
+    navigateTo (id, offset) {
+      return new Promise((resolve, reject) => {
+        if (!this.useAnchor) {
+          reject(Error('Anchor is disabled'))
+          return
+        }
+        offset = offset || parseInt(this.useAnchor) || 0
+        // #ifdef APP-PLUS-NVUE
+        if (!id) {
+          dom.scrollToElement(this.$refs.web, {
+            offset
+          })
+          resolve()
+        } else {
+          this._navigateTo = {
+            resolve,
+            reject,
+            offset
+          }
+          this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
+        }
+        // #endif
+        // #ifndef APP-PLUS-NVUE
+        let deep = ' '
+        // #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
+        deep = '>>>'
+        // #endif
+        const selector = uni.createSelectorQuery()
+          // #ifndef MP-ALIPAY
+          .in(this._in ? this._in.page : this)
+          // #endif
+          .select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
+        if (this._in) {
+          selector.select(this._in.selector).scrollOffset()
+            .select(this._in.selector).boundingClientRect()
+        } else {
+          // 获取 scroll-view 的位置和滚动距离
+          selector.selectViewport().scrollOffset() // 获取窗口的滚动距离
+        }
+        selector.exec(res => {
+          if (!res[0]) {
+            reject(Error('Label not found'))
+            return
+          }
+          const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
+          if (this._in) {
+            // scroll-view 跳转
+            this._in.page[this._in.scrollTop] = scrollTop
+          } else {
+            // 页面跳转
+            uni.pageScrollTo({
+              scrollTop,
+              duration: 300
+            })
+          }
+          resolve()
+        })
+        // #endif
+      })
+    },
+
+    /**
+     * @description 获取文本内容
+     * @return {String}
+     */
+    getText (nodes) {
+      let text = '';
+      (function traversal (nodes) {
+        for (let i = 0; i < nodes.length; i++) {
+          const node = nodes[i]
+          if (node.type === 'text') {
+            text += node.text.replace(/&amp;/g, '&')
+          } else if (node.name === 'br') {
+            text += '\n'
+          } 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')
+            if (isBlock && text && text[text.length - 1] !== '\n') {
+              text += '\n'
+            }
+            // 递归获取子节点的文本
+            if (node.children) {
+              traversal(node.children)
+            }
+            if (isBlock && text[text.length - 1] !== '\n') {
+              text += '\n'
+            } else if (node.name === 'td' || node.name === 'th') {
+              text += '\t'
+            }
+          }
+        }
+      })(nodes || this.nodes)
+      return text
+    },
+
+    /**
+     * @description 获取内容大小和位置
+     * @return {Promise}
+     */
+    getRect () {
+      return new Promise((resolve, reject) => {
+        uni.createSelectorQuery()
+          // #ifndef MP-ALIPAY
+          .in(this)
+          // #endif
+          .select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject(Error('Root label not found')))
+      })
+    },
+
+    /**
+     * @description 暂停播放媒体
+     */
+    pauseMedia () {
+      for (let i = (this._videos || []).length; i--;) {
+        this._videos[i].pause()
+      }
+      // #ifdef APP-PLUS
+      const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].pause()'
+      // #ifndef APP-PLUS-NVUE
+      let page = this.$parent
+      while (!page.$scope) page = page.$parent
+      page.$scope.$getAppWebview().evalJS(command)
+      // #endif
+      // #ifdef APP-PLUS-NVUE
+      this.$refs.web.evalJs(command)
+      // #endif
+      // #endif
+    },
+
+    /**
+     * @description 设置媒体播放速率
+     * @param {Number} rate 播放速率
+     */
+    setPlaybackRate (rate) {
+      this.playbackRate = rate
+      for (let i = (this._videos || []).length; i--;) {
+        this._videos[i].playbackRate(rate)
+      }
+      // #ifdef APP-PLUS
+      const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].playbackRate=' + rate
+      // #ifndef APP-PLUS-NVUE
+      let page = this.$parent
+      while (!page.$scope) page = page.$parent
+      page.$scope.$getAppWebview().evalJS(command)
+      // #endif
+      // #ifdef APP-PLUS-NVUE
+      this.$refs.web.evalJs(command)
+      // #endif
+      // #endif
+    },
+
+    /**
+     * @description 设置内容
+     * @param {String} content html 内容
+     * @param {Boolean} append 是否在尾部追加
+     */
+    setContent (content, append) {
+      if (!append || !this.imgList) {
+        this.imgList = []
+      }
+      const nodes = new Parser(this).parse(content)
+      // #ifdef APP-PLUS-NVUE
+      if (this._ready) {
+        this._set(nodes, append)
+      }
+      // #endif
+      this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
+
+      // #ifndef APP-PLUS-NVUE
+      this._videos = []
+      this.$nextTick(() => {
+        this._hook('onLoad')
+        this.$emit('load')
+      })
+
+      if (this.lazyLoad || this.imgList._unloadimgs < this.imgList.length / 2) {
+        // 设置懒加载，每 350ms 获取高度，不变则认为加载完毕
+        let height = 0
+        const callback = rect => {
+          if (!rect || !rect.height) rect = {}
+          // 350ms 总高度无变化就触发 ready 事件
+          if (rect.height === height) {
+            this.$emit('ready', rect)
+          } else {
+            height = rect.height
+            setTimeout(() => {
+              this.getRect().then(callback).catch(callback)
+            }, 350)
+          }
+        }
+        this.getRect().then(callback).catch(callback)
+      } else {
+        // 未设置懒加载，等待所有图片加载完毕
+        if (!this.imgList._unloadimgs) {
+          this.getRect().then(rect => {
+            this.$emit('ready', rect)
+          }).catch(() => {
+            this.$emit('ready', {})
+          })
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 调用插件钩子函数
+     */
+    _hook (name) {
+      for (let i = plugins.length; i--;) {
+        if (this.plugins[i][name]) {
+          this.plugins[i][name]()
+        }
+      }
+    },
+
+    // #ifdef APP-PLUS-NVUE
+    /**
+     * @description 设置内容
+     */
+    _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 + ')')
+    },
+
+    /**
+     * @description 接收到 web-view 消息
+     */
+    _onMessage (e) {
+      const message = e.detail.data[0]
+      switch (message.action) {
+        // web-view 初始化完毕
+        case 'onJSBridgeReady':
+          this._ready = true
+          if (this.nodes) {
+            this._set(this.nodes)
+          }
+          break
+        // 内容 dom 加载完毕
+        case 'onLoad':
+          this.height = message.height
+          this._hook('onLoad')
+          this.$emit('load')
+          break
+        // 所有图片加载完毕
+        case 'onReady':
+          this.getRect().then(res => {
+            this.$emit('ready', res)
+          }).catch(() => {
+            this.$emit('ready', {})
+          })
+          break
+        // 总高度发生变化
+        case 'onHeightChange':
+          this.height = message.height
+          break
+        // 图片点击
+        case 'onImgTap':
+          this.$emit('imgtap', message.attrs)
+          if (this.previewImg) {
+            uni.previewImage({
+              current: parseInt(message.attrs.i),
+              urls: this.imgList
+            })
+          }
+          break
+        // 链接点击
+        case 'onLinkTap': {
+          const href = message.attrs.href
+          this.$emit('linktap', message.attrs)
+          if (href) {
+            // 锚点跳转
+            if (href[0] === '#') {
+              if (this.useAnchor) {
+                dom.scrollToElement(this.$refs.web, {
+                  offset: message.offset
+                })
+              }
+            } else if (href.includes('://')) {
+              // 打开外链
+              if (this.copyLink) {
+                plus.runtime.openWeb(href)
+              }
+            } else {
+              uni.navigateTo({
+                url: href,
+                fail () {
+                  uni.switchTab({
+                    url: href
+                  })
+                }
+              })
+            }
+          }
+          break
+        }
+        case 'onPlay':
+          this.$emit('play')
+          break
+        // 获取到锚点的偏移量
+        case 'getOffset':
+          if (typeof message.offset === 'number') {
+            dom.scrollToElement(this.$refs.web, {
+              offset: message.offset + this._navigateTo.offset
+            })
+            this._navigateTo.resolve()
+          } else {
+            this._navigateTo.reject(Error('Label not found'))
+          }
+          break
+        // 点击
+        case 'onClick':
+          this.$emit('tap')
+          this.$emit('click')
+          break
+        // 出错
+        case 'onError':
+          this.$emit('error', {
+            source: message.source,
+            attrs: message.attrs
+          })
+      }
+    }
+    // #endif
+  }
+}
+</script>
+
+<style lang="scss">
+/* #ifndef APP-PLUS-NVUE */
+/* 根节点样式 */
+._root {
+  padding: 1px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 长按复制 */
+._select {
+  user-select: text;
+}
+/* #endif */
+</style>
diff --git a/uni_modules/mp-html/components/mp-html/node/node.vue b/uni_modules/mp-html/components/mp-html/node/node.vue
index 09252fd..5ad68e9 100644
--- a/uni_modules/mp-html/components/mp-html/node/node.vue
+++ b/uni_modules/mp-html/components/mp-html/node/node.vue
@@ -1,587 +1,587 @@
-<template>
-  <view :id="attrs.id" :class="'_block _'+name+' '+attrs.class" :style="attrs.style">
-    <block v-for="(n, i) in childs" v-bind:key="i">
-      <!-- 图片 -->
-      <!-- 占位图 -->
-      <image v-if="n.name==='img'&&!n.t&&((opts[1]&&!ctrl[i])||ctrl[i]<0)" class="_img" :style="n.attrs.style" :src="ctrl[i]<0?opts[2]:opts[1]" mode="widthFix" />
-      <!-- 显示图片 -->
-      <!-- #ifdef H5 || (APP-PLUS && VUE2) -->
-      <img v-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
-      <!-- #endif -->
-      <!-- #ifndef H5 || (APP-PLUS && VUE2) -->
-      <!-- 表格中的图片，使用 rich-text 防止大小不正确 -->
-      <rich-text v-if="n.name==='img'&&n.t" :style="'display:'+n.t" :nodes="[{attrs:{style:n.attrs.style||'',src:n.attrs.src},name:'img'}]" :data-i="i" @tap.stop="imgTap" />
-      <!-- #endif -->
-      <!-- #ifndef H5 || APP-PLUS || MP-KUAISHOU -->
-      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;height:1px;'+n.attrs.style" :src="n.attrs.src" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :lazy-load="opts[0]" :webp="n.webp" :show-menu-by-longpress="opts[3]&&!n.attrs.ignore" :image-menu-prevent="!opts[3]||n.attrs.ignore" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
-      <!-- #endif -->
-      <!-- #ifdef MP-KUAISHOU -->
-      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src" :lazy-load="opts[0]" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap"></image>
-      <!-- #endif -->
-      <!-- #ifdef APP-PLUS && VUE3 -->
-      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||''))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
-      <!-- #endif -->
-      <!-- 文本 -->
-      <!-- #ifdef MP-WEIXIN -->
-      <text v-else-if="n.text" :user-select="opts[4]=='force'&&isiOS" decode>{{n.text}}</text>
-      <!-- #endif -->
-      <!-- #ifndef MP-WEIXIN || MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
-      <text v-else-if="n.text" decode>{{n.text}}</text>
-      <!-- #endif -->
-      <text v-else-if="n.name==='br'">\n</text>
-      <!-- 链接 -->
-      <view v-else-if="n.name==='a'" :id="n.attrs.id" :class="(n.attrs.href?'_a ':'')+n.attrs.class" hover-class="_hover" :style="'display:inline;'+n.attrs.style" :data-i="i" @tap.stop="linkTap">
-        <node name="span" :childs="n.children" :opts="opts" style="display:inherit" />
-      </view>
-      <!-- 视频 -->
-      <!-- #ifdef APP-PLUS -->
-      <view v-else-if="n.html" :id="n.attrs.id" :class="'_video '+n.attrs.class" :style="n.attrs.style" v-html="n.html" @vplay.stop="play" />
-      <!-- #endif -->
-      <!-- #ifndef APP-PLUS -->
-      <video v-else-if="n.name==='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :object-fit="n.attrs['object-fit']" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
-      <!-- #endif -->
-      <!-- #ifdef H5 || APP-PLUS -->
-      <iframe v-else-if="n.name==='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder" :src="n.attrs.src" />
-      <embed v-else-if="n.name==='embed'" :style="n.attrs.style" :src="n.attrs.src" />
-      <!-- #endif -->
-      <!-- #ifndef MP-TOUTIAO || ((H5 || APP-PLUS) && VUE3) -->
-      <!-- 音频 -->
-      <audio v-else-if="n.name==='audio'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
-      <!-- #endif -->
-      <view v-else-if="(n.name==='table'&&n.c)||n.name==='li'" :id="n.attrs.id" :class="'_'+n.name+' '+n.attrs.class" :style="n.attrs.style">
-        <node v-if="n.name==='li'" :childs="n.children" :opts="opts" />
-        <view v-else v-for="(tbody, x) in n.children" v-bind:key="x" :class="'_'+tbody.name+' '+tbody.attrs.class" :style="tbody.attrs.style">
-          <node v-if="tbody.name==='td'||tbody.name==='th'" :childs="tbody.children" :opts="opts" />
-          <block v-else v-for="(tr, y) in tbody.children" v-bind:key="y">
-            <view v-if="tr.name==='td'||tr.name==='th'" :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
-              <node :childs="tr.children" :opts="opts" />
-            </view>
-            <view v-else :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
-              <view v-for="(td, z) in tr.children" v-bind:key="z" :class="'_'+td.name+' '+td.attrs.class" :style="td.attrs.style">
-                <node :childs="td.children" :opts="opts" />
-              </view>
-            </view>
-          </block>
-        </view>
-      </view>
-      
-      <!-- 富文本 -->
-      <!-- #ifdef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
-      <rich-text v-else-if="!n.c&&!handler.isInline(n.name, n.attrs.style)" :id="n.attrs.id" :style="n.f" :user-select="opts[4]" :nodes="[n]" />
-      <!-- #endif -->
-      <!-- #ifndef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
-      <rich-text v-else-if="!n.c" :id="n.attrs.id" :style="'display:inline;'+n.f" :preview="false" :selectable="opts[4]" :user-select="opts[4]" :nodes="[n]" />
-      <!-- #endif -->
-      <!-- 继续递归 -->
-      <view v-else-if="n.c===2" :id="n.attrs.id" :class="'_block _'+n.name+' '+n.attrs.class" :style="n.f+';'+n.attrs.style">
-        <node v-for="(n2, j) in n.children" v-bind:key="j" :style="n2.f" :name="n2.name" :attrs="n2.attrs" :childs="n2.children" :opts="opts" />
-      </view>
-      <node v-else :style="n.f" :name="n.name" :attrs="n.attrs" :childs="n.children" :opts="opts" />
-    </block>
-  </view>
-</template>
-<script module="handler" lang="wxs">
-// 行内标签列表
-var inlineTags = {
-  abbr: true,
-  b: true,
-  big: true,
-  code: true,
-  del: true,
-  em: true,
-  i: true,
-  ins: true,
-  label: true,
-  q: true,
-  small: true,
-  span: true,
-  strong: true,
-  sub: true,
-  sup: true
-}
-/**
- * @description 判断是否为行内标签
- */
-module.exports = {
-  isInline: function (tagName, style) {
-    return inlineTags[tagName] || (style || '').indexOf('display:inline') !== -1
-  }
-}
-</script>
-<script>
-
-import node from './node'
-export default {
-  name: 'node',
-  options: {
-    // #ifdef MP-WEIXIN
-    virtualHost: true,
-    // #endif
-    // #ifdef MP-TOUTIAO
-    addGlobalClass: false
-    // #endif
-  },
-  data () {
-    return {
-      ctrl: {},
-      // #ifdef MP-WEIXIN
-      isiOS: uni.getSystemInfoSync().system.includes('iOS')
-      // #endif
-    }
-  },
-  props: {
-    name: String,
-    attrs: {
-      type: Object,
-      default () {
-        return {}
-      }
-    },
-    childs: Array,
-    opts: Array
-  },
-  components: {
-
-    // #ifndef (H5 || APP-PLUS) && VUE3
-    node
-    // #endif
-  },
-  mounted () {
-    this.$nextTick(() => {
-      for (this.root = this.$parent; this.root.$options.name !== 'mp-html'; this.root = this.root.$parent);
-    })
-    // #ifdef H5 || APP-PLUS
-    if (this.opts[0]) {
-      let i
-      for (i = this.childs.length; i--;) {
-        if (this.childs[i].name === 'img') break
-      }
-      if (i !== -1) {
-        this.observer = uni.createIntersectionObserver(this).relativeToViewport({
-          top: 500,
-          bottom: 500
-        })
-        this.observer.observe('._img', res => {
-          if (res.intersectionRatio) {
-            this.$set(this.ctrl, 'load', 1)
-            this.observer.disconnect()
-          }
-        })
-      }
-    }
-    // #endif
-  },
-  beforeDestroy () {
-    // #ifdef H5 || APP-PLUS
-    if (this.observer) {
-      this.observer.disconnect()
-    }
-    // #endif
-  },
-  methods:{
-    // #ifdef MP-WEIXIN
-    toJSON () { return this },
-    // #endif
-    /**
-     * @description 播放视频事件
-     * @param {Event} e
-     */
-    play (e) {
-      const i = e.currentTarget.dataset.i
-      const node = this.childs[i]
-      this.root.$emit('play', {
-        source: node.name,
-        attrs: {
-          ...node.attrs,
-          src: node.src[this.ctrl[i] || 0]
-        }
-      })
-      // #ifndef APP-PLUS
-      if (this.root.pauseVideo) {
-        let flag = false
-        const id = e.target.id
-        for (let i = this.root._videos.length; i--;) {
-          if (this.root._videos[i].id === id) {
-            flag = true
-          } else {
-            this.root._videos[i].pause() // 自动暂停其他视频
-          }
-        }
-        // 将自己加入列表
-        if (!flag) {
-          const ctx = uni.createVideoContext(id
-            // #ifndef MP-BAIDU
-            , this
-            // #endif
-          )
-          ctx.id = id
-          if (this.root.playbackRate) {
-            ctx.playbackRate(this.root.playbackRate)
-          }
-          this.root._videos.push(ctx)
-        }
-      }
-      // #endif
-    },
-
-    /**
-     * @description 图片点击事件
-     * @param {Event} e
-     */
-    imgTap (e) {
-      const node = this.childs[e.currentTarget.dataset.i]
-      if (node.a) {
-        this.linkTap(node.a)
-        return
-      }
-      if (node.attrs.ignore) return
-      // #ifdef H5 || APP-PLUS
-      node.attrs.src = node.attrs.src || node.attrs['data-src']
-      // #endif
-      this.root.$emit('imgtap', node.attrs)
-      // 自动预览图片
-      if (this.root.previewImg) {
-        uni.previewImage({
-          // #ifdef MP-WEIXIN
-          showmenu: this.root.showImgMenu,
-          // #endif
-          // #ifdef MP-ALIPAY
-          enablesavephoto: this.root.showImgMenu,
-          enableShowPhotoDownload: this.root.showImgMenu,
-          // #endif
-          current: parseInt(node.attrs.i),
-          urls: this.root.imgList
-        })
-      }
-    },
-
-    /**
-     * @description 图片长按
-     */
-    imgLongTap (e) {
-      // #ifdef APP-PLUS
-      const attrs = this.childs[e.currentTarget.dataset.i].attrs
-      if (this.opts[3] && !attrs.ignore) {
-        uni.showActionSheet({
-          itemList: ['保存图片'],
-          success: () => {
-            const save = path => {
-              uni.saveImageToPhotosAlbum({
-                filePath: path,
-                success () {
-                  uni.showToast({
-                    title: '保存成功'
-                  })
-                }
-              })
-            }
-            if (this.root.imgList[attrs.i].startsWith('http')) {
-              uni.downloadFile({
-                url: this.root.imgList[attrs.i],
-                success: res => save(res.tempFilePath)
-              })
-            } else {
-              save(this.root.imgList[attrs.i])
-            }
-          }
-        })
-      }
-      // #endif
-    },
-
-    /**
-     * @description 图片加载完成事件
-     * @param {Event} e
-     */
-    imgLoad (e) {
-      const i = e.currentTarget.dataset.i
-      /* #ifndef H5 || (APP-PLUS && VUE2) */
-      if (!this.childs[i].w) {
-        // 设置原宽度
-        this.$set(this.ctrl, i, e.detail.width)
-      } else /* #endif */ if ((this.opts[1] && !this.ctrl[i]) || this.ctrl[i] === -1) {
-        // 加载完毕，取消加载中占位图
-        this.$set(this.ctrl, i, 1)
-      }
-      this.checkReady()
-    },
-
-    /**
-     * @description 检查是否所有图片加载完毕
-     */
-    checkReady () {
-      if (this.root && !this.root.lazyLoad) {
-        this.root._unloadimgs -= 1
-        if (!this.root._unloadimgs) {
-          setTimeout(() => {
-            this.root.getRect().then(rect => {
-              this.root.$emit('ready', rect)
-            }).catch(() => {
-              this.root.$emit('ready', {})
-            })
-          }, 350)
-        }
-      }
-    },
-
-    /**
-     * @description 链接点击事件
-     * @param {Event} e
-     */
-    linkTap (e) {
-      const node = e.currentTarget ? this.childs[e.currentTarget.dataset.i] : {}
-      const attrs = node.attrs || e
-      const href = attrs.href
-      this.root.$emit('linktap', Object.assign({
-        innerText: this.root.getText(node.children || []) // 链接内的文本内容
-      }, attrs))
-      if (href) {
-        if (href[0] === '#') {
-          // 跳转锚点
-          this.root.navigateTo(href.substring(1)).catch(() => { })
-        } else if (href.split('?')[0].includes('://')) {
-          // 复制外部链接
-          if (this.root.copyLink) {
-            // #ifdef H5
-            window.open(href)
-            // #endif
-            // #ifdef MP
-            uni.setClipboardData({
-              data: href,
-              success: () =>
-                uni.showToast({
-                  title: '链接已复制'
-                })
-            })
-            // #endif
-            // #ifdef APP-PLUS
-            plus.runtime.openWeb(href)
-            // #endif
-          }
-        } else {
-          // 跳转页面
-          uni.navigateTo({
-            url: href,
-            fail () {
-              uni.switchTab({
-                url: href,
-                fail () { }
-              })
-            }
-          })
-        }
-      }
-    },
-
-    /**
-     * @description 错误事件
-     * @param {Event} e
-     */
-    mediaError (e) {
-      const i = e.currentTarget.dataset.i
-      const node = this.childs[i]
-      // 加载其他源
-      if (node.name === 'video' || node.name === 'audio') {
-        let index = (this.ctrl[i] || 0) + 1
-        if (index > node.src.length) {
-          index = 0
-        }
-        if (index < node.src.length) {
-          this.$set(this.ctrl, i, index)
-          return
-        }
-      } else if (node.name === 'img') {
-        // #ifdef H5 && VUE3
-        if (this.opts[0] && !this.ctrl.load) return
-        // #endif
-        // 显示错误占位图
-        if (this.opts[2]) {
-          this.$set(this.ctrl, i, -1)
-        }
-        this.checkReady()
-      }
-      if (this.root) {
-        this.root.$emit('error', {
-          source: node.name,
-          attrs: node.attrs,
-          // #ifndef H5 && VUE3
-          errMsg: e.detail.errMsg
-          // #endif
-        })
-      }
-    }
-  }
-}
-</script>
-<style>
-/* a 标签默认效果 */
-._a {
-  padding: 1.5px 0 1.5px 0;
-  color: #366092;
-  word-break: break-all;
-}
-
-/* a 标签点击态效果 */
-._hover {
-  text-decoration: underline;
-  opacity: 0.7;
-}
-
-/* 图片默认效果 */
-._img {
-  max-width: 100%;
-  -webkit-touch-callout: none;
-}
-
-/* 内部样式 */
-
-._block {
-  display: block;
-}
-
-._b,
-._strong {
-  font-weight: bold;
-}
-
-._code {
-  font-family: monospace;
-}
-
-._del {
-  text-decoration: line-through;
-}
-
-._em,
-._i {
-  font-style: italic;
-}
-
-._h1 {
-  font-size: 2em;
-}
-
-._h2 {
-  font-size: 1.5em;
-}
-
-._h3 {
-  font-size: 1.17em;
-}
-
-._h5 {
-  font-size: 0.83em;
-}
-
-._h6 {
-  font-size: 0.67em;
-}
-
-._h1,
-._h2,
-._h3,
-._h4,
-._h5,
-._h6 {
-  display: block;
-  font-weight: bold;
-}
-
-._image {
-  height: 1px;
-}
-
-._ins {
-  text-decoration: underline;
-}
-
-._li {
-  display: list-item;
-}
-
-._ol {
-  list-style-type: decimal;
-}
-
-._ol,
-._ul {
-  display: block;
-  padding-left: 40px;
-  margin: 1em 0;
-}
-
-._q::before {
-  content: '"';
-}
-
-._q::after {
-  content: '"';
-}
-
-._sub {
-  font-size: smaller;
-  vertical-align: sub;
-}
-
-._sup {
-  font-size: smaller;
-  vertical-align: super;
-}
-
-._thead,
-._tbody,
-._tfoot {
-  display: table-row-group;
-}
-
-._tr {
-  display: table-row;
-}
-
-._td,
-._th {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-._th {
-  font-weight: bold;
-  text-align: center;
-}
-
-._ul {
-  list-style-type: disc;
-}
-
-._ul ._ul {
-  margin: 0;
-  list-style-type: circle;
-}
-
-._ul ._ul ._ul {
-  list-style-type: square;
-}
-
-._abbr,
-._b,
-._code,
-._del,
-._em,
-._i,
-._ins,
-._label,
-._q,
-._span,
-._strong,
-._sub,
-._sup {
-  display: inline;
-}
-
-/* #ifdef APP-PLUS */
-._video {
-  width: 300px;
-  height: 225px;
-}
-/* #endif */
+<template>
+  <view :id="attrs.id" :class="'_block _'+name+' '+attrs.class" :style="attrs.style">
+    <block v-for="(n, i) in childs" v-bind:key="i">
+      <!-- 图片 -->
+      <!-- 占位图 -->
+      <image v-if="n.name==='img'&&!n.t&&((opts[1]&&!ctrl[i])||ctrl[i]<0)" class="_img" :style="n.attrs.style" :src="ctrl[i]<0?opts[2]:opts[1]" mode="widthFix" />
+      <!-- 显示图片 -->
+      <!-- #ifdef H5 || (APP-PLUS && VUE2) -->
+      <img v-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || (APP-PLUS && VUE2) -->
+      <!-- 表格中的图片，使用 rich-text 防止大小不正确 -->
+      <rich-text v-if="n.name==='img'&&n.t" :style="'display:'+n.t" :nodes="[{attrs:{style:n.attrs.style||'',src:n.attrs.src},name:'img'}]" :data-i="i" @tap.stop="imgTap" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || APP-PLUS || MP-KUAISHOU -->
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;height:1px;'+n.attrs.style" :src="n.attrs.src" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :lazy-load="opts[0]" :webp="n.webp" :show-menu-by-longpress="opts[3]&&!n.attrs.ignore" :image-menu-prevent="!opts[3]||n.attrs.ignore" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- #ifdef MP-KUAISHOU -->
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src" :lazy-load="opts[0]" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap"></image>
+      <!-- #endif -->
+      <!-- #ifdef APP-PLUS && VUE3 -->
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||''))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- 文本 -->
+      <!-- #ifdef MP-WEIXIN -->
+      <text v-else-if="n.text" :user-select="opts[4]=='force'&&isiOS" decode>{{n.text}}</text>
+      <!-- #endif -->
+      <!-- #ifndef MP-WEIXIN || MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
+      <text v-else-if="n.text" decode>{{n.text}}</text>
+      <!-- #endif -->
+      <text v-else-if="n.name==='br'">\n</text>
+      <!-- 链接 -->
+      <view v-else-if="n.name==='a'" :id="n.attrs.id" :class="(n.attrs.href?'_a ':'')+n.attrs.class" hover-class="_hover" :style="'display:inline;'+n.attrs.style" :data-i="i" @tap.stop="linkTap">
+        <node name="span" :childs="n.children" :opts="opts" style="display:inherit" />
+      </view>
+      <!-- 视频 -->
+      <!-- #ifdef APP-PLUS -->
+      <view v-else-if="n.html" :id="n.attrs.id" :class="'_video '+n.attrs.class" :style="n.attrs.style" v-html="n.html" @vplay.stop="play" />
+      <!-- #endif -->
+      <!-- #ifndef APP-PLUS -->
+      <video v-else-if="n.name==='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :object-fit="n.attrs['object-fit']" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
+      <!-- #endif -->
+      <!-- #ifdef H5 || APP-PLUS -->
+      <iframe v-else-if="n.name==='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder" :src="n.attrs.src" />
+      <embed v-else-if="n.name==='embed'" :style="n.attrs.style" :src="n.attrs.src" />
+      <!-- #endif -->
+      <!-- #ifndef MP-TOUTIAO || ((H5 || APP-PLUS) && VUE3) -->
+      <!-- 音频 -->
+      <audio v-else-if="n.name==='audio'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
+      <!-- #endif -->
+      <view v-else-if="(n.name==='table'&&n.c)||n.name==='li'" :id="n.attrs.id" :class="'_'+n.name+' '+n.attrs.class" :style="n.attrs.style">
+        <node v-if="n.name==='li'" :childs="n.children" :opts="opts" />
+        <view v-else v-for="(tbody, x) in n.children" v-bind:key="x" :class="'_'+tbody.name+' '+tbody.attrs.class" :style="tbody.attrs.style">
+          <node v-if="tbody.name==='td'||tbody.name==='th'" :childs="tbody.children" :opts="opts" />
+          <block v-else v-for="(tr, y) in tbody.children" v-bind:key="y">
+            <view v-if="tr.name==='td'||tr.name==='th'" :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
+              <node :childs="tr.children" :opts="opts" />
+            </view>
+            <view v-else :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
+              <view v-for="(td, z) in tr.children" v-bind:key="z" :class="'_'+td.name+' '+td.attrs.class" :style="td.attrs.style">
+                <node :childs="td.children" :opts="opts" />
+              </view>
+            </view>
+          </block>
+        </view>
+      </view>
+      
+      <!-- 富文本 -->
+      <!-- #ifdef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
+      <rich-text v-else-if="!n.c&&!handler.isInline(n.name, n.attrs.style)" :id="n.attrs.id" :style="n.f" :user-select="opts[4]" :nodes="[n]" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
+      <rich-text v-else-if="!n.c" :id="n.attrs.id" :style="'display:inline;'+n.f" :preview="false" :selectable="opts[4]" :user-select="opts[4]" :nodes="[n]" />
+      <!-- #endif -->
+      <!-- 继续递归 -->
+      <view v-else-if="n.c===2" :id="n.attrs.id" :class="'_block _'+n.name+' '+n.attrs.class" :style="n.f+';'+n.attrs.style">
+        <node v-for="(n2, j) in n.children" v-bind:key="j" :style="n2.f" :name="n2.name" :attrs="n2.attrs" :childs="n2.children" :opts="opts" />
+      </view>
+      <node v-else :style="n.f" :name="n.name" :attrs="n.attrs" :childs="n.children" :opts="opts" />
+    </block>
+  </view>
+</template>
+<script module="handler" lang="wxs">
+// 行内标签列表
+var inlineTags = {
+  abbr: true,
+  b: true,
+  big: true,
+  code: true,
+  del: true,
+  em: true,
+  i: true,
+  ins: true,
+  label: true,
+  q: true,
+  small: true,
+  span: true,
+  strong: true,
+  sub: true,
+  sup: true
+}
+/**
+ * @description 判断是否为行内标签
+ */
+module.exports = {
+  isInline: function (tagName, style) {
+    return inlineTags[tagName] || (style || '').indexOf('display:inline') !== -1
+  }
+}
+</script>
+<script>
+
+import node from './node'
+export default {
+  name: 'node',
+  options: {
+    // #ifdef MP-WEIXIN
+    virtualHost: true,
+    // #endif
+    // #ifdef MP-TOUTIAO
+    addGlobalClass: false
+    // #endif
+  },
+  data () {
+    return {
+      ctrl: {},
+      // #ifdef MP-WEIXIN
+      isiOS: uni.getSystemInfoSync().system.includes('iOS')
+      // #endif
+    }
+  },
+  props: {
+    name: String,
+    attrs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    childs: Array,
+    opts: Array
+  },
+  components: {
+
+    // #ifndef (H5 || APP-PLUS) && VUE3
+    node
+    // #endif
+  },
+  mounted () {
+    this.$nextTick(() => {
+      for (this.root = this.$parent; this.root.$options.name !== 'mp-html'; this.root = this.root.$parent);
+    })
+    // #ifdef H5 || APP-PLUS
+    if (this.opts[0]) {
+      let i
+      for (i = this.childs.length; i--;) {
+        if (this.childs[i].name === 'img') break
+      }
+      if (i !== -1) {
+        this.observer = uni.createIntersectionObserver(this).relativeToViewport({
+          top: 500,
+          bottom: 500
+        })
+        this.observer.observe('._img', res => {
+          if (res.intersectionRatio) {
+            this.$set(this.ctrl, 'load', 1)
+            this.observer.disconnect()
+          }
+        })
+      }
+    }
+    // #endif
+  },
+  beforeDestroy () {
+    // #ifdef H5 || APP-PLUS
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+    // #endif
+  },
+  methods:{
+    // #ifdef MP-WEIXIN
+    toJSON () { return this },
+    // #endif
+    /**
+     * @description 播放视频事件
+     * @param {Event} e
+     */
+    play (e) {
+      const i = e.currentTarget.dataset.i
+      const node = this.childs[i]
+      this.root.$emit('play', {
+        source: node.name,
+        attrs: {
+          ...node.attrs,
+          src: node.src[this.ctrl[i] || 0]
+        }
+      })
+      // #ifndef APP-PLUS
+      if (this.root.pauseVideo) {
+        let flag = false
+        const id = e.target.id
+        for (let i = this.root._videos.length; i--;) {
+          if (this.root._videos[i].id === id) {
+            flag = true
+          } else {
+            this.root._videos[i].pause() // 自动暂停其他视频
+          }
+        }
+        // 将自己加入列表
+        if (!flag) {
+          const ctx = uni.createVideoContext(id
+            // #ifndef MP-BAIDU
+            , this
+            // #endif
+          )
+          ctx.id = id
+          if (this.root.playbackRate) {
+            ctx.playbackRate(this.root.playbackRate)
+          }
+          this.root._videos.push(ctx)
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 图片点击事件
+     * @param {Event} e
+     */
+    imgTap (e) {
+      const node = this.childs[e.currentTarget.dataset.i]
+      if (node.a) {
+        this.linkTap(node.a)
+        return
+      }
+      if (node.attrs.ignore) return
+      // #ifdef H5 || APP-PLUS
+      node.attrs.src = node.attrs.src || node.attrs['data-src']
+      // #endif
+      this.root.$emit('imgtap', node.attrs)
+      // 自动预览图片
+      if (this.root.previewImg) {
+        uni.previewImage({
+          // #ifdef MP-WEIXIN
+          showmenu: this.root.showImgMenu,
+          // #endif
+          // #ifdef MP-ALIPAY
+          enablesavephoto: this.root.showImgMenu,
+          enableShowPhotoDownload: this.root.showImgMenu,
+          // #endif
+          current: parseInt(node.attrs.i),
+          urls: this.root.imgList
+        })
+      }
+    },
+
+    /**
+     * @description 图片长按
+     */
+    imgLongTap (e) {
+      // #ifdef APP-PLUS
+      const attrs = this.childs[e.currentTarget.dataset.i].attrs
+      if (this.opts[3] && !attrs.ignore) {
+        uni.showActionSheet({
+          itemList: ['保存图片'],
+          success: () => {
+            const save = path => {
+              uni.saveImageToPhotosAlbum({
+                filePath: path,
+                success () {
+                  uni.showToast({
+                    title: '保存成功'
+                  })
+                }
+              })
+            }
+            if (this.root.imgList[attrs.i].startsWith('http')) {
+              uni.downloadFile({
+                url: this.root.imgList[attrs.i],
+                success: res => save(res.tempFilePath)
+              })
+            } else {
+              save(this.root.imgList[attrs.i])
+            }
+          }
+        })
+      }
+      // #endif
+    },
+
+    /**
+     * @description 图片加载完成事件
+     * @param {Event} e
+     */
+    imgLoad (e) {
+      const i = e.currentTarget.dataset.i
+      /* #ifndef H5 || (APP-PLUS && VUE2) */
+      if (!this.childs[i].w) {
+        // 设置原宽度
+        this.$set(this.ctrl, i, e.detail.width)
+      } else /* #endif */ if ((this.opts[1] && !this.ctrl[i]) || this.ctrl[i] === -1) {
+        // 加载完毕，取消加载中占位图
+        this.$set(this.ctrl, i, 1)
+      }
+      this.checkReady()
+    },
+
+    /**
+     * @description 检查是否所有图片加载完毕
+     */
+    checkReady () {
+      if (this.root && !this.root.lazyLoad) {
+        this.root._unloadimgs -= 1
+        if (!this.root._unloadimgs) {
+          setTimeout(() => {
+            this.root.getRect().then(rect => {
+              this.root.$emit('ready', rect)
+            }).catch(() => {
+              this.root.$emit('ready', {})
+            })
+          }, 350)
+        }
+      }
+    },
+
+    /**
+     * @description 链接点击事件
+     * @param {Event} e
+     */
+    linkTap (e) {
+      const node = e.currentTarget ? this.childs[e.currentTarget.dataset.i] : {}
+      const attrs = node.attrs || e
+      const href = attrs.href
+      this.root.$emit('linktap', Object.assign({
+        innerText: this.root.getText(node.children || []) // 链接内的文本内容
+      }, attrs))
+      if (href) {
+        if (href[0] === '#') {
+          // 跳转锚点
+          this.root.navigateTo(href.substring(1)).catch(() => { })
+        } else if (href.split('?')[0].includes('://')) {
+          // 复制外部链接
+          if (this.root.copyLink) {
+            // #ifdef H5
+            window.open(href)
+            // #endif
+            // #ifdef MP
+            uni.setClipboardData({
+              data: href,
+              success: () =>
+                uni.showToast({
+                  title: '链接已复制'
+                })
+            })
+            // #endif
+            // #ifdef APP-PLUS
+            plus.runtime.openWeb(href)
+            // #endif
+          }
+        } else {
+          // 跳转页面
+          uni.navigateTo({
+            url: href,
+            fail () {
+              uni.switchTab({
+                url: href,
+                fail () { }
+              })
+            }
+          })
+        }
+      }
+    },
+
+    /**
+     * @description 错误事件
+     * @param {Event} e
+     */
+    mediaError (e) {
+      const i = e.currentTarget.dataset.i
+      const node = this.childs[i]
+      // 加载其他源
+      if (node.name === 'video' || node.name === 'audio') {
+        let index = (this.ctrl[i] || 0) + 1
+        if (index > node.src.length) {
+          index = 0
+        }
+        if (index < node.src.length) {
+          this.$set(this.ctrl, i, index)
+          return
+        }
+      } else if (node.name === 'img') {
+        // #ifdef H5 && VUE3
+        if (this.opts[0] && !this.ctrl.load) return
+        // #endif
+        // 显示错误占位图
+        if (this.opts[2]) {
+          this.$set(this.ctrl, i, -1)
+        }
+        this.checkReady()
+      }
+      if (this.root) {
+        this.root.$emit('error', {
+          source: node.name,
+          attrs: node.attrs,
+          // #ifndef H5 && VUE3
+          errMsg: e.detail.errMsg
+          // #endif
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+/* a 标签默认效果 */
+._a {
+  padding: 1.5px 0 1.5px 0;
+  color: #366092;
+  word-break: break-all;
+}
+
+/* a 标签点击态效果 */
+._hover {
+  text-decoration: underline;
+  opacity: 0.7;
+}
+
+/* 图片默认效果 */
+._img {
+  max-width: 100%;
+  -webkit-touch-callout: none;
+}
+
+/* 内部样式 */
+
+._block {
+  display: block;
+}
+
+._b,
+._strong {
+  font-weight: bold;
+}
+
+._code {
+  font-family: monospace;
+}
+
+._del {
+  text-decoration: line-through;
+}
+
+._em,
+._i {
+  font-style: italic;
+}
+
+._h1 {
+  font-size: 2em;
+}
+
+._h2 {
+  font-size: 1.5em;
+}
+
+._h3 {
+  font-size: 1.17em;
+}
+
+._h5 {
+  font-size: 0.83em;
+}
+
+._h6 {
+  font-size: 0.67em;
+}
+
+._h1,
+._h2,
+._h3,
+._h4,
+._h5,
+._h6 {
+  display: block;
+  font-weight: bold;
+}
+
+._image {
+  height: 1px;
+}
+
+._ins {
+  text-decoration: underline;
+}
+
+._li {
+  display: list-item;
+}
+
+._ol {
+  list-style-type: decimal;
+}
+
+._ol,
+._ul {
+  display: block;
+  padding-left: 40px;
+  margin: 1em 0;
+}
+
+._q::before {
+  content: '"';
+}
+
+._q::after {
+  content: '"';
+}
+
+._sub {
+  font-size: smaller;
+  vertical-align: sub;
+}
+
+._sup {
+  font-size: smaller;
+  vertical-align: super;
+}
+
+._thead,
+._tbody,
+._tfoot {
+  display: table-row-group;
+}
+
+._tr {
+  display: table-row;
+}
+
+._td,
+._th {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+._th {
+  font-weight: bold;
+  text-align: center;
+}
+
+._ul {
+  list-style-type: disc;
+}
+
+._ul ._ul {
+  margin: 0;
+  list-style-type: circle;
+}
+
+._ul ._ul ._ul {
+  list-style-type: square;
+}
+
+._abbr,
+._b,
+._code,
+._del,
+._em,
+._i,
+._ins,
+._label,
+._q,
+._span,
+._strong,
+._sub,
+._sup {
+  display: inline;
+}
+
+/* #ifdef APP-PLUS */
+._video {
+  width: 300px;
+  height: 225px;
+}
+/* #endif */
 </style>
\ No newline at end of file
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
index 699aa63..a0ecb6a 100644
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
@@ -1,927 +1,927 @@
-<template>
-	<view class="uni-datetime-picker">
-		<view @click="initTimePicker">
-			<slot>
-				<view class="uni-datetime-picker-timebox-pointer"
-					:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
-					<text class="uni-datetime-picker-text">{{time}}</text>
-					<view v-if="!time" class="uni-datetime-picker-time">
-						<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
-					</view>
-				</view>
-			</slot>
-		</view>
-		<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
-		<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
-			:style="fixNvueBug">
-			<view class="uni-title">
-				<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
-			</view>
-			<view v-if="dateShow" class="uni-datetime-picker__container-box">
-				<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
-					@change="bindDateChange">
-					<picker-view-column>
-						<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
-							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
-						</view>
-					</picker-view-column>
-					<picker-view-column>
-						<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
-							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
-						</view>
-					</picker-view-column>
-					<picker-view-column>
-						<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
-							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
-						</view>
-					</picker-view-column>
-				</picker-view>
-				<!-- 兼容 nvue 不支持伪类 -->
-				<text class="uni-datetime-picker-sign sign-left">-</text>
-				<text class="uni-datetime-picker-sign sign-right">-</text>
-			</view>
-			<view v-if="timeShow" class="uni-datetime-picker__container-box">
-				<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
-					:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
-					<picker-view-column>
-						<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
-							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
-						</view>
-					</picker-view-column>
-					<picker-view-column>
-						<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
-							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
-						</view>
-					</picker-view-column>
-					<picker-view-column v-if="!hideSecond">
-						<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
-							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
-						</view>
-					</picker-view-column>
-				</picker-view>
-				<!-- 兼容 nvue 不支持伪类 -->
-				<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
-				<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
-			</view>
-			<view class="uni-datetime-picker-btn">
-				<view @click="clearTime">
-					<text class="uni-datetime-picker-btn-text">{{clearText}}</text>
-				</view>
-				<view class="uni-datetime-picker-btn-group">
-					<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
-						<text class="uni-datetime-picker-btn-text">{{cancelText}}</text>
-					</view>
-					<view @click="setTime">
-						<text class="uni-datetime-picker-btn-text">{{okText}}</text>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- #ifdef H5 -->
-		<!-- <keypress v-if="visible" @esc="tiggerTimePicker" @enter="setTime" /> -->
-		<!-- #endif -->
-	</view>
-</template>
-
-<script>
-	// #ifdef H5
-	import keypress from './keypress'
-	// #endif
-	import {
-		initVueI18n
-	} from '@dcloudio/uni-i18n'
-	import messages from './i18n/index.js'
-	const {	t	} = initVueI18n(messages)
-
-	/**
-	 * DatetimePicker 时间选择器
-	 * @description 可以同时选择日期和时间的选择器
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
-	 * @property {String} type = [datetime | date | time] 显示模式
-	 * @property {Boolean} multiple = [true|false] 是否多选
-	 * @property {String|Number} value 默认值
-	 * @property {String|Number} start 起始日期或时间
-	 * @property {String|Number} end 起始日期或时间
-	 * @property {String} return-type = [timestamp | string]
-	 * @event {Function} change  选中发生变化触发
-	 */
-
-	export default {
-		name: 'UniDatetimePicker',
-		components: {
-			// #ifdef H5
-			keypress
-			// #endif
-		},
-		data() {
-			return {
-				indicatorStyle: `height: 50px;`,
-				visible: false,
-				fixNvueBug: {},
-				dateShow: true,
-				timeShow: true,
-				title: '日期和时间',
-				// 输入框当前时间
-				time: '',
-				// 当前的年月日时分秒
-				year: 1920,
-				month: 0,
-				day: 0,
-				hour: 0,
-				minute: 0,
-				second: 0,
-				// 起始时间
-				startYear: 1920,
-				startMonth: 1,
-				startDay: 1,
-				startHour: 0,
-				startMinute: 0,
-				startSecond: 0,
-				// 结束时间
-				endYear: 2120,
-				endMonth: 12,
-				endDay: 31,
-				endHour: 23,
-				endMinute: 59,
-				endSecond: 59,
-			}
-		},
-		props: {
-			type: {
-				type: String,
-				default: 'datetime'
-			},
-			value: {
-				type: [String, Number],
-				default: ''
-			},
-			modelValue: {
-				type: [String, Number],
-				default: ''
-			},
-			start: {
-				type: [Number, String],
-				default: ''
-			},
-			end: {
-				type: [Number, String],
-				default: ''
-			},
-			returnType: {
-				type: String,
-				default: 'string'
-			},
-			disabled: {
-				type: [Boolean, String],
-				default: false
-			},
-			border: {
-				type: [Boolean, String],
-				default: true
-			},
-			hideSecond: {
-				type: [Boolean, String],
-				default: false
-			}
-		},
-		watch: {
-			value: {
-				handler(newVal, oldVal) {
-					if (newVal) {
-						this.parseValue(this.fixIosDateFormat(newVal)) //兼容 iOS、safari 日期格式
-						this.initTime(false)
-					} else {
-						this.time = ''
-						this.parseValue(Date.now())
-					}
-				},
-				immediate: true
-			},
-			type: {
-				handler(newValue) {
-					if (newValue === 'date') {
-						this.dateShow = true
-						this.timeShow = false
-						this.title = '日期'
-					} else if (newValue === 'time') {
-						this.dateShow = false
-						this.timeShow = true
-						this.title = '时间'
-					} else {
-						this.dateShow = true
-						this.timeShow = true
-						this.title = '日期和时间'
-					}
-				},
-				immediate: true
-			},
-			start: {
-				handler(newVal) {
-					this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'start') //兼容 iOS、safari 日期格式
-				},
-				immediate: true
-			},
-			end: {
-				handler(newVal) {
-					this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'end') //兼容 iOS、safari 日期格式
-				},
-				immediate: true
-			},
-
-			// 月、日、时、分、秒可选范围变化后，检查当前值是否在范围内，不在则当前值重置为可选范围第一项
-			months(newVal) {
-				this.checkValue('month', this.month, newVal)
-			},
-			days(newVal) {
-				this.checkValue('day', this.day, newVal)
-			},
-			hours(newVal) {
-				this.checkValue('hour', this.hour, newVal)
-			},
-			minutes(newVal) {
-				this.checkValue('minute', this.minute, newVal)
-			},
-			seconds(newVal) {
-				this.checkValue('second', this.second, newVal)
-			}
-		},
-		computed: {
-			// 当前年、月、日、时、分、秒选择范围
-			years() {
-				return this.getCurrentRange('year')
-			},
-
-			months() {
-				return this.getCurrentRange('month')
-			},
-
-			days() {
-				return this.getCurrentRange('day')
-			},
-
-			hours() {
-				return this.getCurrentRange('hour')
-			},
-
-			minutes() {
-				return this.getCurrentRange('minute')
-			},
-
-			seconds() {
-				return this.getCurrentRange('second')
-			},
-
-			// picker 当前值数组
-			ymd() {
-				return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
-			},
-			hms() {
-				return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
-			},
-
-			// 当前 date 是 start
-			currentDateIsStart() {
-				return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
-			},
-
-			// 当前 date 是 end
-			currentDateIsEnd() {
-				return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
-			},
-
-			// 当前年、月、日、时、分、秒的最小值和最大值
-			minYear() {
-				return this.startYear
-			},
-			maxYear() {
-				return this.endYear
-			},
-			minMonth() {
-				if (this.year === this.startYear) {
-					return this.startMonth
-				} else {
-					return 1
-				}
-			},
-			maxMonth() {
-				if (this.year === this.endYear) {
-					return this.endMonth
-				} else {
-					return 12
-				}
-			},
-			minDay() {
-				if (this.year === this.startYear && this.month === this.startMonth) {
-					return this.startDay
-				} else {
-					return 1
-				}
-			},
-			maxDay() {
-				if (this.year === this.endYear && this.month === this.endMonth) {
-					return this.endDay
-				} else {
-					return this.daysInMonth(this.year, this.month)
-				}
-			},
-			minHour() {
-				if (this.type === 'datetime') {
-					if (this.currentDateIsStart) {
-						return this.startHour
-					} else {
-						return 0
-					}
-				}
-				if (this.type === 'time') {
-					return this.startHour
-				}
-			},
-			maxHour() {
-				if (this.type === 'datetime') {
-					if (this.currentDateIsEnd) {
-						return this.endHour
-					} else {
-						return 23
-					}
-				}
-				if (this.type === 'time') {
-					return this.endHour
-				}
-			},
-			minMinute() {
-				if (this.type === 'datetime') {
-					if (this.currentDateIsStart && this.hour === this.startHour) {
-						return this.startMinute
-					} else {
-						return 0
-					}
-				}
-				if (this.type === 'time') {
-					if (this.hour === this.startHour) {
-						return this.startMinute
-					} else {
-						return 0
-					}
-				}
-			},
-			maxMinute() {
-				if (this.type === 'datetime') {
-					if (this.currentDateIsEnd && this.hour === this.endHour) {
-						return this.endMinute
-					} else {
-						return 59
-					}
-				}
-				if (this.type === 'time') {
-					if (this.hour === this.endHour) {
-						return this.endMinute
-					} else {
-						return 59
-					}
-				}
-			},
-			minSecond() {
-				if (this.type === 'datetime') {
-					if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
-						return this.startSecond
-					} else {
-						return 0
-					}
-				}
-				if (this.type === 'time') {
-					if (this.hour === this.startHour && this.minute === this.startMinute) {
-						return this.startSecond
-					} else {
-						return 0
-					}
-				}
-			},
-			maxSecond() {
-				if (this.type === 'datetime') {
-					if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
-						return this.endSecond
-					} else {
-						return 59
-					}
-				}
-				if (this.type === 'time') {
-					if (this.hour === this.endHour && this.minute === this.endMinute) {
-						return this.endSecond
-					} else {
-						return 59
-					}
-				}
-			},
-
-			/**
-			 * for i18n
-			 */
-			selectTimeText() {
-				return t("uni-datetime-picker.selectTime")
-			},
-			okText() {
-				return t("uni-datetime-picker.ok")
-			},
-			clearText() {
-				return t("uni-datetime-picker.clear")
-			},
-			cancelText() {
-				return t("uni-datetime-picker.cancel")
-			}
-		},
-
-		mounted() {
-			// #ifdef APP-NVUE
-			const res = uni.getSystemInfoSync();
-			this.fixNvueBug = {
-				top: res.windowHeight / 2,
-				left: res.windowWidth / 2
-			}
-			// #endif
-		},
-
-		methods: {
-			/**
-			 * @param {Object} item
-			 * 小于 10 在前面加个 0
-			 */
-
-			lessThanTen(item) {
-				return item < 10 ? '0' + item : item
-			},
-
-			/**
-			 * 解析时分秒字符串，例如：00:00:00
-			 * @param {String} timeString
-			 */
-			parseTimeType(timeString) {
-				if (timeString) {
-					let timeArr = timeString.split(':')
-					this.hour = Number(timeArr[0])
-					this.minute = Number(timeArr[1])
-					this.second = Number(timeArr[2])
-				}
-			},
-
-			/**
-			 * 解析选择器初始值，类型可以是字符串、时间戳，例如：2000-10-02、'08:30:00'、 1610695109000
-			 * @param {String | Number} datetime
-			 */
-			initPickerValue(datetime) {
-				let defaultValue = null
-				if (datetime) {
-					defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
-				} else {
-					defaultValue = Date.now()
-					defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
-				}
-				this.parseValue(defaultValue)
-			},
-
-			/**
-			 * 初始值规则：
-			 * - 用户设置初始值 value
-			 * 	- 设置了起始时间 start、终止时间 end，并 start < value < end，初始值为 value， 否则初始值为 start
-			 * 	- 只设置了起始时间 start，并 start < value，初始值为 value，否则初始值为 start
-			 * 	- 只设置了终止时间 end，并 value < end，初始值为 value，否则初始值为 end
-			 * 	- 无起始终止时间，则初始值为 value
-			 * - 无初始值 value，则初始值为当前本地时间 Date.now()
-			 * @param {Object} value
-			 * @param {Object} dateBase
-			 */
-			compareValueWithStartAndEnd(value, start, end) {
-				let winner = null
-				value = this.superTimeStamp(value)
-				start = this.superTimeStamp(start)
-				end = this.superTimeStamp(end)
-
-				if (start && end) {
-					if (value < start) {
-						winner = new Date(start)
-					} else if (value > end) {
-						winner = new Date(end)
-					} else {
-						winner = new Date(value)
-					}
-				} else if (start && !end) {
-					winner = start <= value ? new Date(value) : new Date(start)
-				} else if (!start && end) {
-					winner = value <= end ? new Date(value) : new Date(end)
-				} else {
-					winner = new Date(value)
-				}
-
-				return winner
-			},
-
-			/**
-			 * 转换为可比较的时间戳，接受日期、时分秒、时间戳
-			 * @param {Object} value
-			 */
-			superTimeStamp(value) {
-				let dateBase = ''
-				if (this.type === 'time' && value && typeof value === 'string') {
-					const now = new Date()
-					const year = now.getFullYear()
-					const month = now.getMonth() + 1
-					const day = now.getDate()
-					dateBase = year + '/' + month + '/' + day + ' '
-				}
-				if (Number(value) && typeof value !== NaN) {
-					value = parseInt(value)
-					dateBase = 0
-				}
-				return this.createTimeStamp(dateBase + value)
-			},
-
-			/**
-			 * 解析默认值 value，字符串、时间戳
-			 * @param {Object} defaultTime
-			 */
-			parseValue(value) {
-				if (!value) {
-					return
-				}
-				if (this.type === 'time' && typeof value === "string") {
-					this.parseTimeType(value)
-				} else {
-					let defaultDate = null
-					defaultDate = new Date(value)
-					if (this.type !== 'time') {
-						this.year = defaultDate.getFullYear()
-						this.month = defaultDate.getMonth() + 1
-						this.day = defaultDate.getDate()
-					}
-					if (this.type !== 'date') {
-						this.hour = defaultDate.getHours()
-						this.minute = defaultDate.getMinutes()
-						this.second = defaultDate.getSeconds()
-					}
-				}
-				if (this.hideSecond) {
-					this.second = 0
-				}
-			},
-
-			/**
-			 * 解析可选择时间范围 start、end，年月日字符串、时间戳
-			 * @param {Object} defaultTime
-			 */
-			parseDatetimeRange(point, pointType) {
-				// 时间为空，则重置为初始值
-				if (!point) {
-					if (pointType === 'start') {
-						this.startYear = 1920
-						this.startMonth = 1
-						this.startDay = 1
-						this.startHour = 0
-						this.startMinute = 0
-						this.startSecond = 0
-					}
-					if (pointType === 'end') {
-						this.endYear = 2120
-						this.endMonth = 12
-						this.endDay = 31
-						this.endHour = 23
-						this.endMinute = 59
-						this.endSecond = 59
-					}
-					return
-				}
-				if (this.type === 'time') {
-					const pointArr = point.split(':')
-					this[pointType + 'Hour'] = Number(pointArr[0])
-					this[pointType + 'Minute'] = Number(pointArr[1])
-					this[pointType + 'Second'] = Number(pointArr[2])
-				} else {
-					if (!point) {
-						pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
-						return
-					}
-					if (Number(point) && Number(point) !== NaN) {
-						point = parseInt(point)
-					}
-					// datetime 的 end 没有时分秒, 则不限制
-					const hasTime = /[0-9]:[0-9]/
-					if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
-							point)) {
-						point = point + ' 23:59:59'
-					}
-					const pointDate = new Date(point)
-					this[pointType + 'Year'] = pointDate.getFullYear()
-					this[pointType + 'Month'] = pointDate.getMonth() + 1
-					this[pointType + 'Day'] = pointDate.getDate()
-					if (this.type === 'datetime') {
-						this[pointType + 'Hour'] = pointDate.getHours()
-						this[pointType + 'Minute'] = pointDate.getMinutes()
-						this[pointType + 'Second'] = pointDate.getSeconds()
-					}
-				}
-			},
-
-			// 获取 年、月、日、时、分、秒 当前可选范围
-			getCurrentRange(value) {
-				const range = []
-				for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
-					range.push(i)
-				}
-				return range
-			},
-
-			// 字符串首字母大写
-			capitalize(str) {
-				return str.charAt(0).toUpperCase() + str.slice(1)
-			},
-
-			// 检查当前值是否在范围内，不在则当前值重置为可选范围第一项
-			checkValue(name, value, values) {
-				if (values.indexOf(value) === -1) {
-					this[name] = values[0]
-				}
-			},
-
-			// 每个月的实际天数
-			daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
-				return new Date(year, month, 0).getDate();
-			},
-
-			//兼容 iOS、safari 日期格式
-			fixIosDateFormat(value) {
-				if (typeof value === 'string') {
-					value = value.replace(/-/g, '/')
-				}
-				return value
-			},
-
-			/**
-			 * 生成时间戳
-			 * @param {Object} time
-			 */
-			createTimeStamp(time) {
-				if (!time) return
-				if (typeof time === "number") {
-					return time
-				} else {
-					time = time.replace(/-/g, '/')
-					if (this.type === 'date') {
-						time = time + ' ' + '00:00:00'
-					}
-					return Date.parse(time)
-				}
-			},
-
-			/**
-			 * 生成日期或时间的字符串
-			 */
-			createDomSting() {
-				const yymmdd = this.year +
-					'-' +
-					this.lessThanTen(this.month) +
-					'-' +
-					this.lessThanTen(this.day)
-
-				let hhmmss = this.lessThanTen(this.hour) +
-					':' +
-					this.lessThanTen(this.minute)
-
-				if (!this.hideSecond) {
-					hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
-				}
-
-				if (this.type === 'date') {
-					return yymmdd
-				} else if (this.type === 'time') {
-					return hhmmss
-				} else {
-					return yymmdd + ' ' + hhmmss
-				}
-			},
-
-			/**
-			 * 初始化返回值，并抛出 change 事件
-			 */
-			initTime(emit = true) {
-				this.time = this.createDomSting()
-				if (!emit) return
-				if (this.returnType === 'timestamp' && this.type !== 'time') {
-					this.$emit('change', this.createTimeStamp(this.time))
-					this.$emit('input', this.createTimeStamp(this.time))
-					this.$emit('update:modelValue', this.createTimeStamp(this.time))
-				} else {
-					this.$emit('change', this.time)
-					this.$emit('input', this.time)
-					this.$emit('update:modelValue', this.time)
-				}
-			},
-
-			/**
-			 * 用户选择日期或时间更新 data
-			 * @param {Object} e
-			 */
-			bindDateChange(e) {
-				const val = e.detail.value
-				this.year = this.years[val[0]]
-				this.month = this.months[val[1]]
-				this.day = this.days[val[2]]
-			},
-			bindTimeChange(e) {
-				const val = e.detail.value
-				this.hour = this.hours[val[0]]
-				this.minute = this.minutes[val[1]]
-				this.second = this.seconds[val[2]]
-			},
-
-			/**
-			 * 初始化弹出层
-			 */
-			initTimePicker() {
-				if (this.disabled) return
-				const value = this.fixIosDateFormat(this.value)
-				this.initPickerValue(value)
-				this.visible = !this.visible
-			},
-
-			/**
-			 * 触发或关闭弹框
-			 */
-			tiggerTimePicker(e) {
-				this.visible = !this.visible
-			},
-
-			/**
-			 * 用户点击“清空”按钮，清空当前值
-			 */
-			clearTime() {
-				this.time = ''
-				this.$emit('change', this.time)
-				this.$emit('input', this.time)
-				this.$emit('update:modelValue', this.time)
-				this.tiggerTimePicker()
-			},
-
-			/**
-			 * 用户点击“确定”按钮
-			 */
-			setTime() {
-				this.initTime()
-				this.tiggerTimePicker()
-			}
-		}
-	}
-</script>
-
-<style>
-	.uni-datetime-picker {
-		/* #ifndef APP-NVUE */
-		/* width: 100%; */
-		/* #endif */
-	}
-
-	.uni-datetime-picker-view {
-		height: 130px;
-		width: 270px;
-		/* #ifndef APP-NVUE */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-datetime-picker-item {
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
-		font-size: 14px;
-	}
-
-	.uni-datetime-picker-btn {
-		margin-top: 60px;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		cursor: pointer;
-		/* #endif */
-		flex-direction: row;
-		justify-content: space-between;
-	}
-
-	.uni-datetime-picker-btn-text {
-		font-size: 14px;
-		color: #007AFF;
-	}
-
-	.uni-datetime-picker-btn-group {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-	}
-
-	.uni-datetime-picker-cancel {
-		margin-right: 30px;
-	}
-
-	.uni-datetime-picker-mask {
-		position: fixed;
-		bottom: 0px;
-		top: 0px;
-		left: 0px;
-		right: 0px;
-		background-color: rgba(0, 0, 0, 0.4);
-		transition-duration: 0.3s;
-		z-index: 998;
-	}
-
-	.uni-datetime-picker-popup {
-		border-radius: 8px;
-		padding: 30px;
-		width: 270px;
-		/* #ifdef APP-NVUE */
-		height: 500px;
-		/* #endif */
-		/* #ifdef APP-NVUE */
-		width: 330px;
-		/* #endif */
-		background-color: #fff;
-		position: fixed;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		transition-duration: 0.3s;
-		z-index: 999;
-	}
-
-	.fix-nvue-height {
-		/* #ifdef APP-NVUE */
-		height: 330px;
-		/* #endif */
-	}
-
-	.uni-datetime-picker-time {
-		color: grey;
-	}
-
-	.uni-datetime-picker-column {
-		height: 50px;
-	}
-
-	.uni-datetime-picker-timebox {
-
-		border: 1px solid #E5E5E5;
-		border-radius: 5px;
-		padding: 7px 10px;
-		/* #ifndef APP-NVUE */
-		box-sizing: border-box;
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-datetime-picker-timebox-pointer {
-		/* #ifndef APP-NVUE */
-		cursor: pointer;
-		/* #endif */
-	}
-
-
-	.uni-datetime-picker-disabled {
-		opacity: 0.4;
-		/* #ifdef H5 */
-		cursor: not-allowed !important;
-		/* #endif */
-	}
-
-	.uni-datetime-picker-text {
-		font-size: 14px;
-	}
-
-	.uni-datetime-picker-sign {
-		position: absolute;
-		top: 53px;
-		/* 减掉 10px 的元素高度，兼容nvue */
-		color: #999;
-		/* #ifdef APP-NVUE */
-		font-size: 16px;
-		/* #endif */
-	}
-
-	.sign-left {
-		left: 86px;
-	}
-
-	.sign-right {
-		right: 86px;
-	}
-
-	.sign-center {
-		left: 135px;
-	}
-
-	.uni-datetime-picker__container-box {
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-top: 40px;
-	}
-
-	.time-hide-second {
-		width: 180px;
-	}
-</style>
+<template>
+	<view class="uni-datetime-picker">
+		<view @click="initTimePicker">
+			<slot>
+				<view class="uni-datetime-picker-timebox-pointer"
+					:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
+					<text class="uni-datetime-picker-text">{{time}}</text>
+					<view v-if="!time" class="uni-datetime-picker-time">
+						<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
+					</view>
+				</view>
+			</slot>
+		</view>
+		<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
+		<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
+			:style="fixNvueBug">
+			<view class="uni-title">
+				<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
+			</view>
+			<view v-if="dateShow" class="uni-datetime-picker__container-box">
+				<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
+					@change="bindDateChange">
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+				<!-- 兼容 nvue 不支持伪类 -->
+				<text class="uni-datetime-picker-sign sign-left">-</text>
+				<text class="uni-datetime-picker-sign sign-right">-</text>
+			</view>
+			<view v-if="timeShow" class="uni-datetime-picker__container-box">
+				<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
+					:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!hideSecond">
+						<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
+							<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+				<!-- 兼容 nvue 不支持伪类 -->
+				<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
+				<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
+			</view>
+			<view class="uni-datetime-picker-btn">
+				<view @click="clearTime">
+					<text class="uni-datetime-picker-btn-text">{{clearText}}</text>
+				</view>
+				<view class="uni-datetime-picker-btn-group">
+					<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
+						<text class="uni-datetime-picker-btn-text">{{cancelText}}</text>
+					</view>
+					<view @click="setTime">
+						<text class="uni-datetime-picker-btn-text">{{okText}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- #ifdef H5 -->
+		<!-- <keypress v-if="visible" @esc="tiggerTimePicker" @enter="setTime" /> -->
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	// #ifdef H5
+	import keypress from './keypress'
+	// #endif
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {	t	} = initVueI18n(messages)
+
+	/**
+	 * DatetimePicker 时间选择器
+	 * @description 可以同时选择日期和时间的选择器
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
+	 * @property {String} type = [datetime | date | time] 显示模式
+	 * @property {Boolean} multiple = [true|false] 是否多选
+	 * @property {String|Number} value 默认值
+	 * @property {String|Number} start 起始日期或时间
+	 * @property {String|Number} end 起始日期或时间
+	 * @property {String} return-type = [timestamp | string]
+	 * @event {Function} change  选中发生变化触发
+	 */
+
+	export default {
+		name: 'UniDatetimePicker',
+		components: {
+			// #ifdef H5
+			keypress
+			// #endif
+		},
+		data() {
+			return {
+				indicatorStyle: `height: 50px;`,
+				visible: false,
+				fixNvueBug: {},
+				dateShow: true,
+				timeShow: true,
+				title: '日期和时间',
+				// 输入框当前时间
+				time: '',
+				// 当前的年月日时分秒
+				year: 1920,
+				month: 0,
+				day: 0,
+				hour: 0,
+				minute: 0,
+				second: 0,
+				// 起始时间
+				startYear: 1920,
+				startMonth: 1,
+				startDay: 1,
+				startHour: 0,
+				startMinute: 0,
+				startSecond: 0,
+				// 结束时间
+				endYear: 2120,
+				endMonth: 12,
+				endDay: 31,
+				endHour: 23,
+				endMinute: 59,
+				endSecond: 59,
+			}
+		},
+		props: {
+			type: {
+				type: String,
+				default: 'datetime'
+			},
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			modelValue: {
+				type: [String, Number],
+				default: ''
+			},
+			start: {
+				type: [Number, String],
+				default: ''
+			},
+			end: {
+				type: [Number, String],
+				default: ''
+			},
+			returnType: {
+				type: String,
+				default: 'string'
+			},
+			disabled: {
+				type: [Boolean, String],
+				default: false
+			},
+			border: {
+				type: [Boolean, String],
+				default: true
+			},
+			hideSecond: {
+				type: [Boolean, String],
+				default: false
+			}
+		},
+		watch: {
+			value: {
+				handler(newVal, oldVal) {
+					if (newVal) {
+						this.parseValue(this.fixIosDateFormat(newVal)) //兼容 iOS、safari 日期格式
+						this.initTime(false)
+					} else {
+						this.time = ''
+						this.parseValue(Date.now())
+					}
+				},
+				immediate: true
+			},
+			type: {
+				handler(newValue) {
+					if (newValue === 'date') {
+						this.dateShow = true
+						this.timeShow = false
+						this.title = '日期'
+					} else if (newValue === 'time') {
+						this.dateShow = false
+						this.timeShow = true
+						this.title = '时间'
+					} else {
+						this.dateShow = true
+						this.timeShow = true
+						this.title = '日期和时间'
+					}
+				},
+				immediate: true
+			},
+			start: {
+				handler(newVal) {
+					this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'start') //兼容 iOS、safari 日期格式
+				},
+				immediate: true
+			},
+			end: {
+				handler(newVal) {
+					this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'end') //兼容 iOS、safari 日期格式
+				},
+				immediate: true
+			},
+
+			// 月、日、时、分、秒可选范围变化后，检查当前值是否在范围内，不在则当前值重置为可选范围第一项
+			months(newVal) {
+				this.checkValue('month', this.month, newVal)
+			},
+			days(newVal) {
+				this.checkValue('day', this.day, newVal)
+			},
+			hours(newVal) {
+				this.checkValue('hour', this.hour, newVal)
+			},
+			minutes(newVal) {
+				this.checkValue('minute', this.minute, newVal)
+			},
+			seconds(newVal) {
+				this.checkValue('second', this.second, newVal)
+			}
+		},
+		computed: {
+			// 当前年、月、日、时、分、秒选择范围
+			years() {
+				return this.getCurrentRange('year')
+			},
+
+			months() {
+				return this.getCurrentRange('month')
+			},
+
+			days() {
+				return this.getCurrentRange('day')
+			},
+
+			hours() {
+				return this.getCurrentRange('hour')
+			},
+
+			minutes() {
+				return this.getCurrentRange('minute')
+			},
+
+			seconds() {
+				return this.getCurrentRange('second')
+			},
+
+			// picker 当前值数组
+			ymd() {
+				return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
+			},
+			hms() {
+				return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
+			},
+
+			// 当前 date 是 start
+			currentDateIsStart() {
+				return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
+			},
+
+			// 当前 date 是 end
+			currentDateIsEnd() {
+				return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
+			},
+
+			// 当前年、月、日、时、分、秒的最小值和最大值
+			minYear() {
+				return this.startYear
+			},
+			maxYear() {
+				return this.endYear
+			},
+			minMonth() {
+				if (this.year === this.startYear) {
+					return this.startMonth
+				} else {
+					return 1
+				}
+			},
+			maxMonth() {
+				if (this.year === this.endYear) {
+					return this.endMonth
+				} else {
+					return 12
+				}
+			},
+			minDay() {
+				if (this.year === this.startYear && this.month === this.startMonth) {
+					return this.startDay
+				} else {
+					return 1
+				}
+			},
+			maxDay() {
+				if (this.year === this.endYear && this.month === this.endMonth) {
+					return this.endDay
+				} else {
+					return this.daysInMonth(this.year, this.month)
+				}
+			},
+			minHour() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsStart) {
+						return this.startHour
+					} else {
+						return 0
+					}
+				}
+				if (this.type === 'time') {
+					return this.startHour
+				}
+			},
+			maxHour() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsEnd) {
+						return this.endHour
+					} else {
+						return 23
+					}
+				}
+				if (this.type === 'time') {
+					return this.endHour
+				}
+			},
+			minMinute() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsStart && this.hour === this.startHour) {
+						return this.startMinute
+					} else {
+						return 0
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.startHour) {
+						return this.startMinute
+					} else {
+						return 0
+					}
+				}
+			},
+			maxMinute() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsEnd && this.hour === this.endHour) {
+						return this.endMinute
+					} else {
+						return 59
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.endHour) {
+						return this.endMinute
+					} else {
+						return 59
+					}
+				}
+			},
+			minSecond() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
+						return this.startSecond
+					} else {
+						return 0
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.startHour && this.minute === this.startMinute) {
+						return this.startSecond
+					} else {
+						return 0
+					}
+				}
+			},
+			maxSecond() {
+				if (this.type === 'datetime') {
+					if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
+						return this.endSecond
+					} else {
+						return 59
+					}
+				}
+				if (this.type === 'time') {
+					if (this.hour === this.endHour && this.minute === this.endMinute) {
+						return this.endSecond
+					} else {
+						return 59
+					}
+				}
+			},
+
+			/**
+			 * for i18n
+			 */
+			selectTimeText() {
+				return t("uni-datetime-picker.selectTime")
+			},
+			okText() {
+				return t("uni-datetime-picker.ok")
+			},
+			clearText() {
+				return t("uni-datetime-picker.clear")
+			},
+			cancelText() {
+				return t("uni-datetime-picker.cancel")
+			}
+		},
+
+		mounted() {
+			// #ifdef APP-NVUE
+			const res = uni.getSystemInfoSync();
+			this.fixNvueBug = {
+				top: res.windowHeight / 2,
+				left: res.windowWidth / 2
+			}
+			// #endif
+		},
+
+		methods: {
+			/**
+			 * @param {Object} item
+			 * 小于 10 在前面加个 0
+			 */
+
+			lessThanTen(item) {
+				return item < 10 ? '0' + item : item
+			},
+
+			/**
+			 * 解析时分秒字符串，例如：00:00:00
+			 * @param {String} timeString
+			 */
+			parseTimeType(timeString) {
+				if (timeString) {
+					let timeArr = timeString.split(':')
+					this.hour = Number(timeArr[0])
+					this.minute = Number(timeArr[1])
+					this.second = Number(timeArr[2])
+				}
+			},
+
+			/**
+			 * 解析选择器初始值，类型可以是字符串、时间戳，例如：2000-10-02、'08:30:00'、 1610695109000
+			 * @param {String | Number} datetime
+			 */
+			initPickerValue(datetime) {
+				let defaultValue = null
+				if (datetime) {
+					defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
+				} else {
+					defaultValue = Date.now()
+					defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
+				}
+				this.parseValue(defaultValue)
+			},
+
+			/**
+			 * 初始值规则：
+			 * - 用户设置初始值 value
+			 * 	- 设置了起始时间 start、终止时间 end，并 start < value < end，初始值为 value， 否则初始值为 start
+			 * 	- 只设置了起始时间 start，并 start < value，初始值为 value，否则初始值为 start
+			 * 	- 只设置了终止时间 end，并 value < end，初始值为 value，否则初始值为 end
+			 * 	- 无起始终止时间，则初始值为 value
+			 * - 无初始值 value，则初始值为当前本地时间 Date.now()
+			 * @param {Object} value
+			 * @param {Object} dateBase
+			 */
+			compareValueWithStartAndEnd(value, start, end) {
+				let winner = null
+				value = this.superTimeStamp(value)
+				start = this.superTimeStamp(start)
+				end = this.superTimeStamp(end)
+
+				if (start && end) {
+					if (value < start) {
+						winner = new Date(start)
+					} else if (value > end) {
+						winner = new Date(end)
+					} else {
+						winner = new Date(value)
+					}
+				} else if (start && !end) {
+					winner = start <= value ? new Date(value) : new Date(start)
+				} else if (!start && end) {
+					winner = value <= end ? new Date(value) : new Date(end)
+				} else {
+					winner = new Date(value)
+				}
+
+				return winner
+			},
+
+			/**
+			 * 转换为可比较的时间戳，接受日期、时分秒、时间戳
+			 * @param {Object} value
+			 */
+			superTimeStamp(value) {
+				let dateBase = ''
+				if (this.type === 'time' && value && typeof value === 'string') {
+					const now = new Date()
+					const year = now.getFullYear()
+					const month = now.getMonth() + 1
+					const day = now.getDate()
+					dateBase = year + '/' + month + '/' + day + ' '
+				}
+				if (Number(value) && typeof value !== NaN) {
+					value = parseInt(value)
+					dateBase = 0
+				}
+				return this.createTimeStamp(dateBase + value)
+			},
+
+			/**
+			 * 解析默认值 value，字符串、时间戳
+			 * @param {Object} defaultTime
+			 */
+			parseValue(value) {
+				if (!value) {
+					return
+				}
+				if (this.type === 'time' && typeof value === "string") {
+					this.parseTimeType(value)
+				} else {
+					let defaultDate = null
+					defaultDate = new Date(value)
+					if (this.type !== 'time') {
+						this.year = defaultDate.getFullYear()
+						this.month = defaultDate.getMonth() + 1
+						this.day = defaultDate.getDate()
+					}
+					if (this.type !== 'date') {
+						this.hour = defaultDate.getHours()
+						this.minute = defaultDate.getMinutes()
+						this.second = defaultDate.getSeconds()
+					}
+				}
+				if (this.hideSecond) {
+					this.second = 0
+				}
+			},
+
+			/**
+			 * 解析可选择时间范围 start、end，年月日字符串、时间戳
+			 * @param {Object} defaultTime
+			 */
+			parseDatetimeRange(point, pointType) {
+				// 时间为空，则重置为初始值
+				if (!point) {
+					if (pointType === 'start') {
+						this.startYear = 1920
+						this.startMonth = 1
+						this.startDay = 1
+						this.startHour = 0
+						this.startMinute = 0
+						this.startSecond = 0
+					}
+					if (pointType === 'end') {
+						this.endYear = 2120
+						this.endMonth = 12
+						this.endDay = 31
+						this.endHour = 23
+						this.endMinute = 59
+						this.endSecond = 59
+					}
+					return
+				}
+				if (this.type === 'time') {
+					const pointArr = point.split(':')
+					this[pointType + 'Hour'] = Number(pointArr[0])
+					this[pointType + 'Minute'] = Number(pointArr[1])
+					this[pointType + 'Second'] = Number(pointArr[2])
+				} else {
+					if (!point) {
+						pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
+						return
+					}
+					if (Number(point) && Number(point) !== NaN) {
+						point = parseInt(point)
+					}
+					// datetime 的 end 没有时分秒, 则不限制
+					const hasTime = /[0-9]:[0-9]/
+					if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
+							point)) {
+						point = point + ' 23:59:59'
+					}
+					const pointDate = new Date(point)
+					this[pointType + 'Year'] = pointDate.getFullYear()
+					this[pointType + 'Month'] = pointDate.getMonth() + 1
+					this[pointType + 'Day'] = pointDate.getDate()
+					if (this.type === 'datetime') {
+						this[pointType + 'Hour'] = pointDate.getHours()
+						this[pointType + 'Minute'] = pointDate.getMinutes()
+						this[pointType + 'Second'] = pointDate.getSeconds()
+					}
+				}
+			},
+
+			// 获取 年、月、日、时、分、秒 当前可选范围
+			getCurrentRange(value) {
+				const range = []
+				for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
+					range.push(i)
+				}
+				return range
+			},
+
+			// 字符串首字母大写
+			capitalize(str) {
+				return str.charAt(0).toUpperCase() + str.slice(1)
+			},
+
+			// 检查当前值是否在范围内，不在则当前值重置为可选范围第一项
+			checkValue(name, value, values) {
+				if (values.indexOf(value) === -1) {
+					this[name] = values[0]
+				}
+			},
+
+			// 每个月的实际天数
+			daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
+				return new Date(year, month, 0).getDate();
+			},
+
+			//兼容 iOS、safari 日期格式
+			fixIosDateFormat(value) {
+				if (typeof value === 'string') {
+					value = value.replace(/-/g, '/')
+				}
+				return value
+			},
+
+			/**
+			 * 生成时间戳
+			 * @param {Object} time
+			 */
+			createTimeStamp(time) {
+				if (!time) return
+				if (typeof time === "number") {
+					return time
+				} else {
+					time = time.replace(/-/g, '/')
+					if (this.type === 'date') {
+						time = time + ' ' + '00:00:00'
+					}
+					return Date.parse(time)
+				}
+			},
+
+			/**
+			 * 生成日期或时间的字符串
+			 */
+			createDomSting() {
+				const yymmdd = this.year +
+					'-' +
+					this.lessThanTen(this.month) +
+					'-' +
+					this.lessThanTen(this.day)
+
+				let hhmmss = this.lessThanTen(this.hour) +
+					':' +
+					this.lessThanTen(this.minute)
+
+				if (!this.hideSecond) {
+					hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
+				}
+
+				if (this.type === 'date') {
+					return yymmdd
+				} else if (this.type === 'time') {
+					return hhmmss
+				} else {
+					return yymmdd + ' ' + hhmmss
+				}
+			},
+
+			/**
+			 * 初始化返回值，并抛出 change 事件
+			 */
+			initTime(emit = true) {
+				this.time = this.createDomSting()
+				if (!emit) return
+				if (this.returnType === 'timestamp' && this.type !== 'time') {
+					this.$emit('change', this.createTimeStamp(this.time))
+					this.$emit('input', this.createTimeStamp(this.time))
+					this.$emit('update:modelValue', this.createTimeStamp(this.time))
+				} else {
+					this.$emit('change', this.time)
+					this.$emit('input', this.time)
+					this.$emit('update:modelValue', this.time)
+				}
+			},
+
+			/**
+			 * 用户选择日期或时间更新 data
+			 * @param {Object} e
+			 */
+			bindDateChange(e) {
+				const val = e.detail.value
+				this.year = this.years[val[0]]
+				this.month = this.months[val[1]]
+				this.day = this.days[val[2]]
+			},
+			bindTimeChange(e) {
+				const val = e.detail.value
+				this.hour = this.hours[val[0]]
+				this.minute = this.minutes[val[1]]
+				this.second = this.seconds[val[2]]
+			},
+
+			/**
+			 * 初始化弹出层
+			 */
+			initTimePicker() {
+				if (this.disabled) return
+				const value = this.fixIosDateFormat(this.value)
+				this.initPickerValue(value)
+				this.visible = !this.visible
+			},
+
+			/**
+			 * 触发或关闭弹框
+			 */
+			tiggerTimePicker(e) {
+				this.visible = !this.visible
+			},
+
+			/**
+			 * 用户点击“清空”按钮，清空当前值
+			 */
+			clearTime() {
+				this.time = ''
+				this.$emit('change', this.time)
+				this.$emit('input', this.time)
+				this.$emit('update:modelValue', this.time)
+				this.tiggerTimePicker()
+			},
+
+			/**
+			 * 用户点击“确定”按钮
+			 */
+			setTime() {
+				this.initTime()
+				this.tiggerTimePicker()
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.uni-datetime-picker {
+		/* #ifndef APP-NVUE */
+		/* width: 100%; */
+		/* #endif */
+	}
+
+	.uni-datetime-picker-view {
+		height: 130px;
+		width: 270px;
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-item {
+		height: 50px;
+		line-height: 50px;
+		text-align: center;
+		font-size: 14px;
+	}
+
+	.uni-datetime-picker-btn {
+		margin-top: 60px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		cursor: pointer;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.uni-datetime-picker-btn-text {
+		font-size: 14px;
+		color: #007AFF;
+	}
+
+	.uni-datetime-picker-btn-group {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-datetime-picker-cancel {
+		margin-right: 30px;
+	}
+
+	.uni-datetime-picker-mask {
+		position: fixed;
+		bottom: 0px;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		background-color: rgba(0, 0, 0, 0.4);
+		transition-duration: 0.3s;
+		z-index: 998;
+	}
+
+	.uni-datetime-picker-popup {
+		border-radius: 8px;
+		padding: 30px;
+		width: 270px;
+		/* #ifdef APP-NVUE */
+		height: 500px;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		width: 330px;
+		/* #endif */
+		background-color: #fff;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		transition-duration: 0.3s;
+		z-index: 999;
+	}
+
+	.fix-nvue-height {
+		/* #ifdef APP-NVUE */
+		height: 330px;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-time {
+		color: grey;
+	}
+
+	.uni-datetime-picker-column {
+		height: 50px;
+	}
+
+	.uni-datetime-picker-timebox {
+
+		border: 1px solid #E5E5E5;
+		border-radius: 5px;
+		padding: 7px 10px;
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-timebox-pointer {
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+	}
+
+
+	.uni-datetime-picker-disabled {
+		opacity: 0.4;
+		/* #ifdef H5 */
+		cursor: not-allowed !important;
+		/* #endif */
+	}
+
+	.uni-datetime-picker-text {
+		font-size: 14px;
+	}
+
+	.uni-datetime-picker-sign {
+		position: absolute;
+		top: 53px;
+		/* 减掉 10px 的元素高度，兼容nvue */
+		color: #999;
+		/* #ifdef APP-NVUE */
+		font-size: 16px;
+		/* #endif */
+	}
+
+	.sign-left {
+		left: 86px;
+	}
+
+	.sign-right {
+		right: 86px;
+	}
+
+	.sign-center {
+		left: 135px;
+	}
+
+	.uni-datetime-picker__container-box {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 40px;
+	}
+
+	.time-hide-second {
+		width: 180px;
+	}
+</style>
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
index e844331..bc22617 100644
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
@@ -1,981 +1,981 @@
-<template>
-	<view class="uni-date">
-		<view class="uni-date-editor" @click="show">
-			<slot>
-				<view class="uni-date-editor--x" :class="{'uni-date-editor--x__disabled': disabled,
-		'uni-date-x--border': border}">
-					<view v-if="!isRange" class="uni-date-x uni-date-single">
-						<uni-icons type="calendar" color="#e1e1e1" size="22"></uni-icons>
-						<input class="uni-date__x-input" type="text" v-model="singleVal"
-							:placeholder="singlePlaceholderText" :disabled="true" />
-					</view>
-					<view v-else class="uni-date-x uni-date-range">
-						<uni-icons type="calendar" color="#e1e1e1" size="22"></uni-icons>
-						<input class="uni-date__x-input t-c" type="text" v-model="range.startDate"
-							:placeholder="startPlaceholderText" :disabled="true" />
-						<slot>
-							<view class="">{{rangeSeparator}}</view>
-						</slot>
-						<input class="uni-date__x-input t-c" type="text" v-model="range.endDate"
-							:placeholder="endPlaceholderText" :disabled="true" />
-					</view>
-					<view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear">
-						<uni-icons type="clear" color="#e1e1e1" size="18"></uni-icons>
-					</view>
-				</view>
-			</slot>
-		</view>
-
-		<view v-show="popup" class="uni-date-mask" @click="close"></view>
-		<view v-if="!isPhone" ref="datePicker" v-show="popup" class="uni-date-picker__container">
-			<view v-if="!isRange" class="uni-date-single--x" :style="popover">
-				<view class="uni-popper__arrow"></view>
-				<view v-if="hasTime" class="uni-date-changed popup-x-header">
-					<input class="uni-date__input t-c" type="text" v-model="tempSingleDate"
-						:placeholder="selectDateText" />
-					<time-picker type="time" v-model="time" :border="false" :disabled="!tempSingleDate"
-						:start="reactStartTime" :end="reactEndTime" :hideSecond="hideSecond" style="width: 100%;">
-						<input class="uni-date__input t-c" type="text" v-model="time" :placeholder="selectTimeText"
-							:disabled="!tempSingleDate" />
-					</time-picker>
-				</view>
-				<calendar ref="pcSingle" :showMonth="false"
-					:start-date="caleRange.startDate" :end-date="caleRange.endDate" :date="defSingleDate"
-					@change="singleChange" style="padding: 0 8px;" />
-				<view v-if="hasTime" class="popup-x-footer">
-					<!-- <text class="">此刻</text> -->
-					<text class="confirm" @click="confirmSingleChange">{{okText}}</text>
-				</view>
-				<view class="uni-date-popper__arrow"></view>
-			</view>
-
-			<view v-else class="uni-date-range--x" :style="popover">
-				<view class="uni-popper__arrow"></view>
-				<view v-if="hasTime" class="popup-x-header uni-date-changed">
-					<view class="popup-x-header--datetime">
-						<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate"
-							:placeholder="startDateText" />
-						<time-picker type="time" v-model="tempRange.startTime" :start="reactStartTime" :border="false"
-							:disabled="!tempRange.startDate" :hideSecond="hideSecond">
-							<input class="uni-date__input uni-date-range__input" type="text"
-								v-model="tempRange.startTime" :placeholder="startTimeText"
-								:disabled="!tempRange.startDate" />
-						</time-picker>
-					</view>
-					<uni-icons type="arrowthinright" color="#999" style="line-height: 40px;"></uni-icons>
-					<view class="popup-x-header--datetime">
-						<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endDate"
-							:placeholder="endDateText" />
-						<time-picker type="time" v-model="tempRange.endTime" :end="reactEndTime" :border="false"
-							:disabled="!tempRange.endDate" :hideSecond="hideSecond">
-							<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endTime"
-								:placeholder="endTimeText" :disabled="!tempRange.endDate" />
-						</time-picker>
-					</view>
-				</view>
-				<view class="popup-x-body">
-					<calendar ref="left" :showMonth="false"
-						:start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true"
-						@change="leftChange" :pleStatus="endMultipleStatus" @firstEnterCale="updateRightCale"
-						@monthSwitch="leftMonthSwitch" style="padding: 0 8px;" />
-					<calendar ref="right" :showMonth="false"
-						:start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true"
-						@change="rightChange" :pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale"
-						@monthSwitch="rightMonthSwitch" style="padding: 0 8px;border-left: 1px solid #F1F1F1;" />
-				</view>
-				<view v-if="hasTime" class="popup-x-footer">
-					<text class="" @click="clear">{{clearText}}</text>
-					<text class="confirm" @click="confirmRangeChange">{{okText}}</text>
-				</view>
-			</view>
-		</view>
-		<calendar v-show="isPhone" ref="mobile" :clearDate="false" :date="defSingleDate" :defTime="reactMobDefTime"
-			:start-date="caleRange.startDate" :end-date="caleRange.endDate" :selectableTimes="mobSelectableTime"
-			:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :typeHasTime="hasTime" :insert="false"
-			:hideSecond="hideSecond" @confirm="mobileChange" />
-	</view>
-</template>
-<script>
-	/**
-	 * DatetimePicker 时间选择器
-	 * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
-	 * @property {String} type 选择器类型
-	 * @property {String|Number|Array|Date} value 绑定值
-	 * @property {String} placeholder 单选择时的占位内容
-	 * @property {String} start 起始时间
-	 * @property {String} end 终止时间
-	 * @property {String} start-placeholder 范围选择时开始日期的占位内容
-	 * @property {String} end-placeholder 范围选择时结束日期的占位内容
-	 * @property {String} range-separator 选择范围时的分隔符
-	 * @property {Boolean} border = [true|false] 是否有边框
-	 * @property {Boolean} disabled = [true|false] 是否禁用
-	 * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
-	 * @event {Function} change 确定日期时触发的事件
-	 * @event {Function} show 打开弹出层
-	 * @event {Function} close 关闭弹出层
-	 * @event {Function} clear 清除上次选中的状态和值
-	 **/
-	import calendar from './calendar.vue'
-	import timePicker from './time-picker.vue'
-	import {
-		initVueI18n
-	} from '@dcloudio/uni-i18n'
-	import messages from './i18n/index.js'
-	const {
-		t
-	} = initVueI18n(messages)
-
-	export default {
-		name: 'UniDatetimePicker',
-		components: {
-			calendar,
-			timePicker
-		},
-		data() {
-			return {
-				isRange: false,
-				hasTime: false,
-				mobileRange: false,
-				// 单选
-				singleVal: '',
-				tempSingleDate: '',
-				defSingleDate: '',
-				time: '',
-				// 范围选
-				caleRange: {
-					startDate: '',
-					startTime: '',
-					endDate: '',
-					endTime: ''
-				},
-				range: {
-					startDate: '',
-					// startTime: '',
-					endDate: '',
-					// endTime: ''
-				},
-				tempRange: {
-					startDate: '',
-					startTime: '',
-					endDate: '',
-					endTime: ''
-				},
-				// 左右日历同步数据
-				startMultipleStatus: {
-					before: '',
-					after: '',
-					data: [],
-					fulldate: ''
-				},
-				endMultipleStatus: {
-					before: '',
-					after: '',
-					data: [],
-					fulldate: ''
-				},
-				visible: false,
-				popup: false,
-				popover: null,
-				isEmitValue: false,
-				isPhone: false,
-				isFirstShow: true,
-			}
-		},
-		props: {
-			type: {
-				type: String,
-				default: 'datetime'
-			},
-			value: {
-				type: [String, Number, Array, Date],
-				default: ''
-			},
-			modelValue: {
-				type: [String, Number, Array, Date],
-				default: ''
-			},
-			start: {
-				type: [Number, String],
-				default: ''
-			},
-			end: {
-				type: [Number, String],
-				default: ''
-			},
-			returnType: {
-				type: String,
-				default: 'string'
-			},
-			placeholder: {
-				type: String,
-				default: ''
-			},
-			startPlaceholder: {
-				type: String,
-				default: ''
-			},
-			endPlaceholder: {
-				type: String,
-				default: ''
-			},
-			rangeSeparator: {
-				type: String,
-				default: '-'
-			},
-			border: {
-				type: [Boolean],
-				default: true
-			},
-			disabled: {
-				type: [Boolean],
-				default: false
-			},
-			clearIcon: {
-				type: [Boolean],
-				default: true
-			},
-			hideSecond: {
-				type: [Boolean],
-				default: false
-			}
-		},
-		watch: {
-			type: {
-				immediate: true,
-				handler(newVal, oldVal) {
-					if (newVal.indexOf('time') !== -1) {
-						this.hasTime = true
-					} else {
-						this.hasTime = false
-					}
-					if (newVal.indexOf('range') !== -1) {
-						this.isRange = true
-					} else {
-						this.isRange = false
-					}
-				}
-			},
-			value: {
-				immediate: true,
-				handler(newVal, oldVal) {
-					if (this.isEmitValue) {
-						this.isEmitValue = false
-						return
-					}
-					this.initPicker(newVal)
-				}
-			},
-
-			start: {
-				immediate: true,
-				handler(newVal, oldVal) {
-					if (!newVal) return
-					const {
-						defDate,
-						defTime
-					} = this.parseDate(newVal)
-					this.caleRange.startDate = defDate
-					if (this.hasTime) {
-						this.caleRange.startTime = defTime
-					}
-				}
-			},
-
-			end: {
-				immediate: true,
-				handler(newVal, oldVal) {
-					if (!newVal) return
-					const {
-						defDate,
-						defTime
-					} = this.parseDate(newVal)
-					this.caleRange.endDate = defDate
-					if (this.hasTime) {
-						this.caleRange.endTime = defTime
-					}
-				}
-			},
-		},
-		computed: {
-			reactStartTime() {
-				const activeDate = this.isRange ? this.tempRange.startDate : this.tempSingleDate
-				const res = activeDate === this.caleRange.startDate ? this.caleRange.startTime : ''
-				return res
-			},
-			reactEndTime() {
-				const activeDate = this.isRange ? this.tempRange.endDate : this.tempSingleDate
-				const res = activeDate === this.caleRange.endDate ? this.caleRange.endTime : ''
-				return res
-			},
-			reactMobDefTime() {
-				const times = {
-					start: this.tempRange.startTime,
-					end: this.tempRange.endTime
-				}
-				return this.isRange ? times : this.time
-			},
-			mobSelectableTime() {
-				return {
-					start: this.caleRange.startTime,
-					end: this.caleRange.endTime
-				}
-			},
-			datePopupWidth() {
-				// todo
-				return this.isRange ? 653 : 301
-			},
-
-			/**
-			 * for i18n
-			 */
-			singlePlaceholderText() {
-				return this.placeholder || (this.type === 'date' ? this.selectDateText : t(
-					"uni-datetime-picker.selectDateTime"))
-			},
-			startPlaceholderText() {
-				return this.startPlaceholder || this.startDateText
-			},
-			endPlaceholderText() {
-				return this.endPlaceholder || this.endDateText
-			},
-			selectDateText() {
-				return t("uni-datetime-picker.selectDate")
-			},
-			selectTimeText() {
-				return t("uni-datetime-picker.selectTime")
-			},
-			startDateText() {
-				return this.startPlaceholder || t("uni-datetime-picker.startDate")
-			},
-			startTimeText() {
-				return t("uni-datetime-picker.startTime")
-			},
-			endDateText() {
-				return this.endPlaceholder || t("uni-datetime-picker.endDate")
-			},
-			endTimeText() {
-				return t("uni-datetime-picker.endTime")
-			},
-			okText() {
-				return t("uni-datetime-picker.ok")
-			},
-			clearText() {
-				return t("uni-datetime-picker.clear")
-			},
-			showClearIcon() {
-				const { clearIcon, disabled, singleVal, range } = this
-				const bool = clearIcon && !disabled && (singleVal || (range.startDate && range.endDate))
-				return bool
-			}
-		},
-		created() {
-			this.form = this.getForm('uniForms')
-			this.formItem = this.getForm('uniFormsItem')
-
-			// if (this.formItem) {
-			// 	if (this.formItem.name) {
-			// 		this.rename = this.formItem.name
-			// 		this.form.inputChildrens.push(this)
-			// 	}
-			// }
-		},
-		mounted() {
-			this.platform()
-		},
-		methods: {
-			/**
-			 * 获取父元素实例
-			 */
-			getForm(name = 'uniForms') {
-				let parent = this.$parent;
-				let parentName = parent.$options.name;
-				while (parentName !== name) {
-					parent = parent.$parent;
-					if (!parent) return false
-					parentName = parent.$options.name;
-				}
-				return parent;
-			},
-			initPicker(newVal) {
-				if (!newVal || Array.isArray(newVal) && !newVal.length) {
-					this.$nextTick(() => {
-						this.clear(false)
-					})
-					return
-				}
-				if (!Array.isArray(newVal) && !this.isRange) {
-					const {
-						defDate,
-						defTime
-					} = this.parseDate(newVal)
-					this.singleVal = defDate
-					this.tempSingleDate = defDate
-					this.defSingleDate = defDate
-					if (this.hasTime) {
-						this.singleVal = defDate + ' ' + defTime
-						this.time = defTime
-					}
-				} else {
-					const [before, after] = newVal
-					if (!before && !after) return
-					const defBefore = this.parseDate(before)
-					const defAfter = this.parseDate(after)
-					const startDate = defBefore.defDate
-					const endDate = defAfter.defDate
-					this.range.startDate = this.tempRange.startDate = startDate
-					this.range.endDate = this.tempRange.endDate = endDate
-
-					if (this.hasTime) {
-						this.range.startDate = defBefore.defDate + ' ' + defBefore.defTime
-						this.range.endDate = defAfter.defDate + ' ' + defAfter.defTime
-						this.tempRange.startTime = defBefore.defTime
-						this.tempRange.endTime = defAfter.defTime
-					}
-					const defaultRange = {
-						before: defBefore.defDate,
-						after: defAfter.defDate
-					}
-					this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, {
-						which: 'right'
-					})
-					this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
-						which: 'left'
-					})
-				}
-			},
-			updateLeftCale(e) {
-				const left = this.$refs.left
-				// 设置范围选
-				left.cale.setHoverMultiple(e.after)
-				left.setDate(this.$refs.left.nowDate.fullDate)
-			},
-			updateRightCale(e) {
-				const right = this.$refs.right
-				// 设置范围选
-				right.cale.setHoverMultiple(e.after)
-				right.setDate(this.$refs.right.nowDate.fullDate)
-			},
-			platform() {
-				const systemInfo = uni.getSystemInfoSync()
-				this.isPhone = systemInfo.windowWidth <= 500
-				this.windowWidth = systemInfo.windowWidth
-			},
-			show(event) {
-				if (this.disabled) {
-					return
-				}
-				this.platform()
-				if (this.isPhone) {
-					this.$refs.mobile.open()
-					return
-				}
-				this.popover = {
-					top: '10px'
-				}
-				const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor")
-				dateEditor.boundingClientRect(rect => {
-					if (this.windowWidth - rect.left < this.datePopupWidth) {
-						this.popover.right = 0
-					}
-				}).exec()
-				setTimeout(() => {
-					this.popup = !this.popup
-					if (!this.isPhone && this.isRange && this.isFirstShow) {
-						this.isFirstShow = false
-						const {
-							startDate,
-							endDate
-						} = this.range
-						if (startDate && endDate) {
-							if (this.diffDate(startDate, endDate) < 30) {
-								this.$refs.right.next()
-							}
-						} else {
-							this.$refs.right.next()
-							this.$refs.right.cale.lastHover = false
-						}
-					}
-
-				}, 50)
-			},
-
-			close() {
-				setTimeout(() => {
-					this.popup = false
-					this.$emit('maskClick', this.value)
-				}, 20)
-			},
-			setEmit(value) {
-				if (this.returnType === "timestamp" || this.returnType === "date") {
-					if (!Array.isArray(value)) {
-						if (!this.hasTime) {
-							value = value + ' ' + '00:00:00'
-						}
-						value = this.createTimestamp(value)
-						if (this.returnType === "date") {
-							value = new Date(value)
-						}
-					} else {
-						if (!this.hasTime) {
-							value[0] = value[0] + ' ' + '00:00:00'
-							value[1] = value[1] + ' ' + '00:00:00'
-						}
-						value[0] = this.createTimestamp(value[0])
-						value[1] = this.createTimestamp(value[1])
-						if (this.returnType === "date") {
-							value[0] = new Date(value[0])
-							value[1] = new Date(value[1])
-						}
-					}
-				}
-				this.formItem && this.formItem.setValue(value)
-				this.$emit('change', value)
-				this.$emit('input', value)
-				this.$emit('update:modelValue', value)
-				this.isEmitValue = true
-			},
-			createTimestamp(date) {
-				date = this.fixIosDateFormat(date)
-				return Date.parse(new Date(date))
-			},
-			singleChange(e) {
-				this.tempSingleDate = e.fulldate
-				if (this.hasTime) return
-				this.confirmSingleChange()
-			},
-
-			confirmSingleChange() {
-				if (!this.tempSingleDate) {
-					this.popup = false
-					return
-				}
-				if (this.hasTime) {
-					this.singleVal = this.tempSingleDate + ' ' + (this.time ? this.time : '00:00:00')
-				} else {
-					this.singleVal = this.tempSingleDate
-				}
-				this.setEmit(this.singleVal)
-				this.popup = false
-			},
-
-			leftChange(e) {
-				const {
-					before,
-					after
-				} = e.range
-				this.rangeChange(before, after)
-				const obj = {
-					before: e.range.before,
-					after: e.range.after,
-					data: e.range.data,
-					fulldate: e.fulldate
-				}
-				this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj)
-			},
-
-			rightChange(e) {
-				const {
-					before,
-					after
-				} = e.range
-				this.rangeChange(before, after)
-				const obj = {
-					before: e.range.before,
-					after: e.range.after,
-					data: e.range.data,
-					fulldate: e.fulldate
-				}
-				this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj)
-			},
-
-			mobileChange(e) {
-				if (this.isRange) {
-					const {
-						before,
-						after
-					} = e.range
-					this.handleStartAndEnd(before, after, true)
-					if (this.hasTime) {
-						const {
-							startTime,
-							endTime
-						} = e.timeRange
-						this.tempRange.startTime = startTime
-						this.tempRange.endTime = endTime
-					}
-					this.confirmRangeChange()
-
-				} else {
-					if (this.hasTime) {
-						this.singleVal = e.fulldate + ' ' + e.time
-					} else {
-						this.singleVal = e.fulldate
-					}
-					this.setEmit(this.singleVal)
-				}
-				this.$refs.mobile.close()
-			},
-
-			rangeChange(before, after) {
-				if (!(before && after)) return
-				this.handleStartAndEnd(before, after, true)
-				if (this.hasTime) return
-				this.confirmRangeChange()
-			},
-
-			confirmRangeChange() {
-				if (!this.tempRange.startDate && !this.tempRange.endDate) {
-					this.popup = false
-					return
-				}
-				let start, end
-				if (!this.hasTime) {
-					start = this.range.startDate = this.tempRange.startDate
-					end = this.range.endDate = this.tempRange.endDate
-				} else {
-					start = this.range.startDate = this.tempRange.startDate + ' ' +
-						(this.tempRange.startTime ? this.tempRange.startTime : '00:00:00')
-					end = this.range.endDate = this.tempRange.endDate + ' ' +
-						(this.tempRange.endTime ? this.tempRange.endTime : '00:00:00')
-				}
-				const displayRange = [start, end]
-				this.setEmit(displayRange)
-				this.popup = false
-			},
-
-			handleStartAndEnd(before, after, temp = false) {
-				if (!(before && after)) return
-				const type = temp ? 'tempRange' : 'range'
-				if (this.dateCompare(before, after)) {
-					this[type].startDate = before
-					this[type].endDate = after
-				} else {
-					this[type].startDate = after
-					this[type].endDate = before
-				}
-			},
-
-			/**
-			 * 比较时间大小
-			 */
-			dateCompare(startDate, endDate) {
-				// 计算截止时间
-				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
-				// 计算详细项的截止时间
-				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
-				if (startDate <= endDate) {
-					return true
-				} else {
-					return false
-				}
-			},
-
-			/**
-			 * 比较时间差
-			 */
-			diffDate(startDate, endDate) {
-				// 计算截止时间
-				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
-				// 计算详细项的截止时间
-				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
-				const diff = (endDate - startDate) / (24 * 60 * 60 * 1000)
-				return Math.abs(diff)
-			},
-
-			clear(needEmit = true) {
-				if (!this.isRange) {
-					this.singleVal = ''
-					this.tempSingleDate = ''
-					this.time = ''
-					if (this.isPhone) {
-						this.$refs.mobile && this.$refs.mobile.clearCalender()
-					} else {
-						this.$refs.pcSingle && this.$refs.pcSingle.clearCalender()
-					}
-					if (needEmit) {
-						this.formItem && this.formItem.setValue('')
-						this.$emit('change', '')
-						this.$emit('input', '')
-						this.$emit('update:modelValue', '')
-					}
-				} else {
-					this.range.startDate = ''
-					this.range.endDate = ''
-					this.tempRange.startDate = ''
-					this.tempRange.startTime = ''
-					this.tempRange.endDate = ''
-					this.tempRange.endTime = ''
-					if (this.isPhone) {
-						this.$refs.mobile && this.$refs.mobile.clearCalender()
-					} else {
-						this.$refs.left && this.$refs.left.clearCalender()
-						this.$refs.right && this.$refs.right.clearCalender()
-						this.$refs.right && this.$refs.right.next()
-					}
-					if (needEmit) {
-						this.formItem && this.formItem.setValue([])
-						this.$emit('change', [])
-						this.$emit('input', [])
-						this.$emit('update:modelValue', [])
-					}
-				}
-			},
-
-			parseDate(date) {
-				date = this.fixIosDateFormat(date)
-				const defVal = new Date(date)
-				const year = defVal.getFullYear()
-				const month = defVal.getMonth() + 1
-				const day = defVal.getDate()
-				const hour = defVal.getHours()
-				const minute = defVal.getMinutes()
-				const second = defVal.getSeconds()
-				const defDate = year + '-' + this.lessTen(month) + '-' + this.lessTen(day)
-				const defTime = this.lessTen(hour) + ':' + this.lessTen(minute) + (this.hideSecond ? '' : (':' + this
-					.lessTen(second)))
-				return {
-					defDate,
-					defTime
-				}
-			},
-
-			lessTen(item) {
-				return item < 10 ? '0' + item : item
-			},
-
-			//兼容 iOS、safari 日期格式
-			fixIosDateFormat(value) {
-				if (typeof value === 'string') {
-					value = value.replace(/-/g, '/')
-				}
-				return value
-			},
-
-			leftMonthSwitch(e) {
-				// console.log('leftMonthSwitch 返回:', e)
-			},
-			rightMonthSwitch(e) {
-				// console.log('rightMonthSwitch 返回:', e)
-			}
-		}
-	}
-</script>
-
-<style>
-	.uni-date-x {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		padding: 0 10px;
-		border-radius: 4px;
-		background-color: #fff;
-		color: #666;
-		font-size: 14px;
-	}
-
-	.uni-date-x--border {
-		box-sizing: border-box;
-		border-radius: 4px;
-		border: 1px solid #dcdfe6;
-	}
-
-	.uni-date-editor--x {
-		position: relative;
-	}
-
-	.uni-date-editor--x .uni-date__icon-clear {
-		position: absolute;
-		top: 0;
-		right: 0;
-		display: inline-block;
-		box-sizing: border-box;
-		border: 9px solid transparent;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-date__x-input {
-		padding: 0 8px;
-		height: 40px;
-		width: 100%;
-		line-height: 40px;
-		font-size: 14px;
-	}
-
-	.t-c {
-		text-align: center;
-	}
-
-	.uni-date__input {
-		height: 40px;
-		width: 100%;
-		line-height: 40px;
-		font-size: 14px;
-	}
-
-	.uni-date-range__input {
-		text-align: center;
-		max-width: 142px;
-	}
-
-	.uni-date-picker__container {
-		position: relative;
-		/* 		position: fixed;
-		left: 0;
-		right: 0;
-		top: 0;
-		bottom: 0;
-		box-sizing: border-box;
-		z-index: 996;
-		font-size: 14px; */
-	}
-
-	.uni-date-mask {
-		position: fixed;
-		bottom: 0px;
-		top: 0px;
-		left: 0px;
-		right: 0px;
-		background-color: rgba(0, 0, 0, 0);
-		transition-duration: 0.3s;
-		z-index: 996;
-	}
-
-	.uni-date-single--x {
-		/* padding: 0 8px; */
-		background-color: #fff;
-		position: absolute;
-		top: 0;
-		z-index: 999;
-		border: 1px solid #EBEEF5;
-		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-		border-radius: 4px;
-	}
-
-	.uni-date-range--x {
-		/* padding: 0 8px; */
-		background-color: #fff;
-		position: absolute;
-		top: 0;
-		z-index: 999;
-		border: 1px solid #EBEEF5;
-		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-		border-radius: 4px;
-	}
-
-	.uni-date-editor--x__disabled {
-		opacity: 0.4;
-		cursor: default;
-	}
-
-	.uni-date-editor--logo {
-		width: 16px;
-		height: 16px;
-		vertical-align: middle;
-	}
-
-	/* 添加时间 */
-	.popup-x-header {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		/* justify-content: space-between; */
-	}
-
-	.popup-x-header--datetime {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		flex: 1;
-	}
-
-	.popup-x-body {
-		display: flex;
-	}
-
-	.popup-x-footer {
-		padding: 0 15px;
-		border-top-color: #F1F1F1;
-		border-top-style: solid;
-		border-top-width: 1px;
-		/* background-color: #fff; */
-		line-height: 40px;
-		text-align: right;
-		color: #666;
-	}
-
-	.popup-x-footer text:hover {
-		color: #007aff;
-		cursor: pointer;
-		opacity: 0.8;
-	}
-
-	.popup-x-footer .confirm {
-		margin-left: 20px;
-		color: #007aff;
-	}
-
-	.uni-date-changed {
-		/* background-color: #fff; */
-		text-align: center;
-		color: #333;
-		border-bottom-color: #F1F1F1;
-		border-bottom-style: solid;
-		border-bottom-width: 1px;
-		/* padding: 0 50px; */
-	}
-
-	.uni-date-changed--time text {
-		/* padding: 0 20px; */
-		height: 50px;
-		line-height: 50px;
-	}
-
-	.uni-date-changed .uni-date-changed--time {
-		/* display: flex; */
-		flex: 1;
-	}
-
-	.uni-date-changed--time-date {
-		color: #333;
-		opacity: 0.6;
-	}
-
-	.mr-50 {
-		margin-right: 50px;
-	}
-
-	/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
-	.uni-popper__arrow,
-	.uni-popper__arrow::after {
-		position: absolute;
-		display: block;
-		width: 0;
-		height: 0;
-		border-color: transparent;
-		border-style: solid;
-		border-width: 6px;
-	}
-
-	.uni-popper__arrow {
-		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
-		top: -6px;
-		left: 10%;
-		margin-right: 3px;
-		border-top-width: 0;
-		border-bottom-color: #EBEEF5;
-	}
-
-	.uni-popper__arrow::after {
-		content: " ";
-		top: 1px;
-		margin-left: -6px;
-		border-top-width: 0;
-		border-bottom-color: #fff;
-	}
-</style>
+<template>
+	<view class="uni-date">
+		<view class="uni-date-editor" @click="show">
+			<slot>
+				<view class="uni-date-editor--x" :class="{'uni-date-editor--x__disabled': disabled,
+		'uni-date-x--border': border}">
+					<view v-if="!isRange" class="uni-date-x uni-date-single">
+						<uni-icons type="calendar" color="#e1e1e1" size="22"></uni-icons>
+						<input class="uni-date__x-input" type="text" v-model="singleVal"
+							:placeholder="singlePlaceholderText" :disabled="true" />
+					</view>
+					<view v-else class="uni-date-x uni-date-range">
+						<uni-icons type="calendar" color="#e1e1e1" size="22"></uni-icons>
+						<input class="uni-date__x-input t-c" type="text" v-model="range.startDate"
+							:placeholder="startPlaceholderText" :disabled="true" />
+						<slot>
+							<view class="">{{rangeSeparator}}</view>
+						</slot>
+						<input class="uni-date__x-input t-c" type="text" v-model="range.endDate"
+							:placeholder="endPlaceholderText" :disabled="true" />
+					</view>
+					<view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear">
+						<uni-icons type="clear" color="#e1e1e1" size="18"></uni-icons>
+					</view>
+				</view>
+			</slot>
+		</view>
+
+		<view v-show="popup" class="uni-date-mask" @click="close"></view>
+		<view v-if="!isPhone" ref="datePicker" v-show="popup" class="uni-date-picker__container">
+			<view v-if="!isRange" class="uni-date-single--x" :style="popover">
+				<view class="uni-popper__arrow"></view>
+				<view v-if="hasTime" class="uni-date-changed popup-x-header">
+					<input class="uni-date__input t-c" type="text" v-model="tempSingleDate"
+						:placeholder="selectDateText" />
+					<time-picker type="time" v-model="time" :border="false" :disabled="!tempSingleDate"
+						:start="reactStartTime" :end="reactEndTime" :hideSecond="hideSecond" style="width: 100%;">
+						<input class="uni-date__input t-c" type="text" v-model="time" :placeholder="selectTimeText"
+							:disabled="!tempSingleDate" />
+					</time-picker>
+				</view>
+				<calendar ref="pcSingle" :showMonth="false"
+					:start-date="caleRange.startDate" :end-date="caleRange.endDate" :date="defSingleDate"
+					@change="singleChange" style="padding: 0 8px;" />
+				<view v-if="hasTime" class="popup-x-footer">
+					<!-- <text class="">此刻</text> -->
+					<text class="confirm" @click="confirmSingleChange">{{okText}}</text>
+				</view>
+				<view class="uni-date-popper__arrow"></view>
+			</view>
+
+			<view v-else class="uni-date-range--x" :style="popover">
+				<view class="uni-popper__arrow"></view>
+				<view v-if="hasTime" class="popup-x-header uni-date-changed">
+					<view class="popup-x-header--datetime">
+						<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate"
+							:placeholder="startDateText" />
+						<time-picker type="time" v-model="tempRange.startTime" :start="reactStartTime" :border="false"
+							:disabled="!tempRange.startDate" :hideSecond="hideSecond">
+							<input class="uni-date__input uni-date-range__input" type="text"
+								v-model="tempRange.startTime" :placeholder="startTimeText"
+								:disabled="!tempRange.startDate" />
+						</time-picker>
+					</view>
+					<uni-icons type="arrowthinright" color="#999" style="line-height: 40px;"></uni-icons>
+					<view class="popup-x-header--datetime">
+						<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endDate"
+							:placeholder="endDateText" />
+						<time-picker type="time" v-model="tempRange.endTime" :end="reactEndTime" :border="false"
+							:disabled="!tempRange.endDate" :hideSecond="hideSecond">
+							<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endTime"
+								:placeholder="endTimeText" :disabled="!tempRange.endDate" />
+						</time-picker>
+					</view>
+				</view>
+				<view class="popup-x-body">
+					<calendar ref="left" :showMonth="false"
+						:start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true"
+						@change="leftChange" :pleStatus="endMultipleStatus" @firstEnterCale="updateRightCale"
+						@monthSwitch="leftMonthSwitch" style="padding: 0 8px;" />
+					<calendar ref="right" :showMonth="false"
+						:start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true"
+						@change="rightChange" :pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale"
+						@monthSwitch="rightMonthSwitch" style="padding: 0 8px;border-left: 1px solid #F1F1F1;" />
+				</view>
+				<view v-if="hasTime" class="popup-x-footer">
+					<text class="" @click="clear">{{clearText}}</text>
+					<text class="confirm" @click="confirmRangeChange">{{okText}}</text>
+				</view>
+			</view>
+		</view>
+		<calendar v-show="isPhone" ref="mobile" :clearDate="false" :date="defSingleDate" :defTime="reactMobDefTime"
+			:start-date="caleRange.startDate" :end-date="caleRange.endDate" :selectableTimes="mobSelectableTime"
+			:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :typeHasTime="hasTime" :insert="false"
+			:hideSecond="hideSecond" @confirm="mobileChange" />
+	</view>
+</template>
+<script>
+	/**
+	 * DatetimePicker 时间选择器
+	 * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
+	 * @property {String} type 选择器类型
+	 * @property {String|Number|Array|Date} value 绑定值
+	 * @property {String} placeholder 单选择时的占位内容
+	 * @property {String} start 起始时间
+	 * @property {String} end 终止时间
+	 * @property {String} start-placeholder 范围选择时开始日期的占位内容
+	 * @property {String} end-placeholder 范围选择时结束日期的占位内容
+	 * @property {String} range-separator 选择范围时的分隔符
+	 * @property {Boolean} border = [true|false] 是否有边框
+	 * @property {Boolean} disabled = [true|false] 是否禁用
+	 * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
+	 * @event {Function} change 确定日期时触发的事件
+	 * @event {Function} show 打开弹出层
+	 * @event {Function} close 关闭弹出层
+	 * @event {Function} clear 清除上次选中的状态和值
+	 **/
+	import calendar from './calendar.vue'
+	import timePicker from './time-picker.vue'
+	import {
+		initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {
+		t
+	} = initVueI18n(messages)
+
+	export default {
+		name: 'UniDatetimePicker',
+		components: {
+			calendar,
+			timePicker
+		},
+		data() {
+			return {
+				isRange: false,
+				hasTime: false,
+				mobileRange: false,
+				// 单选
+				singleVal: '',
+				tempSingleDate: '',
+				defSingleDate: '',
+				time: '',
+				// 范围选
+				caleRange: {
+					startDate: '',
+					startTime: '',
+					endDate: '',
+					endTime: ''
+				},
+				range: {
+					startDate: '',
+					// startTime: '',
+					endDate: '',
+					// endTime: ''
+				},
+				tempRange: {
+					startDate: '',
+					startTime: '',
+					endDate: '',
+					endTime: ''
+				},
+				// 左右日历同步数据
+				startMultipleStatus: {
+					before: '',
+					after: '',
+					data: [],
+					fulldate: ''
+				},
+				endMultipleStatus: {
+					before: '',
+					after: '',
+					data: [],
+					fulldate: ''
+				},
+				visible: false,
+				popup: false,
+				popover: null,
+				isEmitValue: false,
+				isPhone: false,
+				isFirstShow: true,
+			}
+		},
+		props: {
+			type: {
+				type: String,
+				default: 'datetime'
+			},
+			value: {
+				type: [String, Number, Array, Date],
+				default: ''
+			},
+			modelValue: {
+				type: [String, Number, Array, Date],
+				default: ''
+			},
+			start: {
+				type: [Number, String],
+				default: ''
+			},
+			end: {
+				type: [Number, String],
+				default: ''
+			},
+			returnType: {
+				type: String,
+				default: 'string'
+			},
+			placeholder: {
+				type: String,
+				default: ''
+			},
+			startPlaceholder: {
+				type: String,
+				default: ''
+			},
+			endPlaceholder: {
+				type: String,
+				default: ''
+			},
+			rangeSeparator: {
+				type: String,
+				default: '-'
+			},
+			border: {
+				type: [Boolean],
+				default: true
+			},
+			disabled: {
+				type: [Boolean],
+				default: false
+			},
+			clearIcon: {
+				type: [Boolean],
+				default: true
+			},
+			hideSecond: {
+				type: [Boolean],
+				default: false
+			}
+		},
+		watch: {
+			type: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (newVal.indexOf('time') !== -1) {
+						this.hasTime = true
+					} else {
+						this.hasTime = false
+					}
+					if (newVal.indexOf('range') !== -1) {
+						this.isRange = true
+					} else {
+						this.isRange = false
+					}
+				}
+			},
+			value: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (this.isEmitValue) {
+						this.isEmitValue = false
+						return
+					}
+					this.initPicker(newVal)
+				}
+			},
+
+			start: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (!newVal) return
+					const {
+						defDate,
+						defTime
+					} = this.parseDate(newVal)
+					this.caleRange.startDate = defDate
+					if (this.hasTime) {
+						this.caleRange.startTime = defTime
+					}
+				}
+			},
+
+			end: {
+				immediate: true,
+				handler(newVal, oldVal) {
+					if (!newVal) return
+					const {
+						defDate,
+						defTime
+					} = this.parseDate(newVal)
+					this.caleRange.endDate = defDate
+					if (this.hasTime) {
+						this.caleRange.endTime = defTime
+					}
+				}
+			},
+		},
+		computed: {
+			reactStartTime() {
+				const activeDate = this.isRange ? this.tempRange.startDate : this.tempSingleDate
+				const res = activeDate === this.caleRange.startDate ? this.caleRange.startTime : ''
+				return res
+			},
+			reactEndTime() {
+				const activeDate = this.isRange ? this.tempRange.endDate : this.tempSingleDate
+				const res = activeDate === this.caleRange.endDate ? this.caleRange.endTime : ''
+				return res
+			},
+			reactMobDefTime() {
+				const times = {
+					start: this.tempRange.startTime,
+					end: this.tempRange.endTime
+				}
+				return this.isRange ? times : this.time
+			},
+			mobSelectableTime() {
+				return {
+					start: this.caleRange.startTime,
+					end: this.caleRange.endTime
+				}
+			},
+			datePopupWidth() {
+				// todo
+				return this.isRange ? 653 : 301
+			},
+
+			/**
+			 * for i18n
+			 */
+			singlePlaceholderText() {
+				return this.placeholder || (this.type === 'date' ? this.selectDateText : t(
+					"uni-datetime-picker.selectDateTime"))
+			},
+			startPlaceholderText() {
+				return this.startPlaceholder || this.startDateText
+			},
+			endPlaceholderText() {
+				return this.endPlaceholder || this.endDateText
+			},
+			selectDateText() {
+				return t("uni-datetime-picker.selectDate")
+			},
+			selectTimeText() {
+				return t("uni-datetime-picker.selectTime")
+			},
+			startDateText() {
+				return this.startPlaceholder || t("uni-datetime-picker.startDate")
+			},
+			startTimeText() {
+				return t("uni-datetime-picker.startTime")
+			},
+			endDateText() {
+				return this.endPlaceholder || t("uni-datetime-picker.endDate")
+			},
+			endTimeText() {
+				return t("uni-datetime-picker.endTime")
+			},
+			okText() {
+				return t("uni-datetime-picker.ok")
+			},
+			clearText() {
+				return t("uni-datetime-picker.clear")
+			},
+			showClearIcon() {
+				const { clearIcon, disabled, singleVal, range } = this
+				const bool = clearIcon && !disabled && (singleVal || (range.startDate && range.endDate))
+				return bool
+			}
+		},
+		created() {
+			this.form = this.getForm('uniForms')
+			this.formItem = this.getForm('uniFormsItem')
+
+			// if (this.formItem) {
+			// 	if (this.formItem.name) {
+			// 		this.rename = this.formItem.name
+			// 		this.form.inputChildrens.push(this)
+			// 	}
+			// }
+		},
+		mounted() {
+			this.platform()
+		},
+		methods: {
+			/**
+			 * 获取父元素实例
+			 */
+			getForm(name = 'uniForms') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			initPicker(newVal) {
+				if (!newVal || Array.isArray(newVal) && !newVal.length) {
+					this.$nextTick(() => {
+						this.clear(false)
+					})
+					return
+				}
+				if (!Array.isArray(newVal) && !this.isRange) {
+					const {
+						defDate,
+						defTime
+					} = this.parseDate(newVal)
+					this.singleVal = defDate
+					this.tempSingleDate = defDate
+					this.defSingleDate = defDate
+					if (this.hasTime) {
+						this.singleVal = defDate + ' ' + defTime
+						this.time = defTime
+					}
+				} else {
+					const [before, after] = newVal
+					if (!before && !after) return
+					const defBefore = this.parseDate(before)
+					const defAfter = this.parseDate(after)
+					const startDate = defBefore.defDate
+					const endDate = defAfter.defDate
+					this.range.startDate = this.tempRange.startDate = startDate
+					this.range.endDate = this.tempRange.endDate = endDate
+
+					if (this.hasTime) {
+						this.range.startDate = defBefore.defDate + ' ' + defBefore.defTime
+						this.range.endDate = defAfter.defDate + ' ' + defAfter.defTime
+						this.tempRange.startTime = defBefore.defTime
+						this.tempRange.endTime = defAfter.defTime
+					}
+					const defaultRange = {
+						before: defBefore.defDate,
+						after: defAfter.defDate
+					}
+					this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, {
+						which: 'right'
+					})
+					this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
+						which: 'left'
+					})
+				}
+			},
+			updateLeftCale(e) {
+				const left = this.$refs.left
+				// 设置范围选
+				left.cale.setHoverMultiple(e.after)
+				left.setDate(this.$refs.left.nowDate.fullDate)
+			},
+			updateRightCale(e) {
+				const right = this.$refs.right
+				// 设置范围选
+				right.cale.setHoverMultiple(e.after)
+				right.setDate(this.$refs.right.nowDate.fullDate)
+			},
+			platform() {
+				const systemInfo = uni.getSystemInfoSync()
+				this.isPhone = systemInfo.windowWidth <= 500
+				this.windowWidth = systemInfo.windowWidth
+			},
+			show(event) {
+				if (this.disabled) {
+					return
+				}
+				this.platform()
+				if (this.isPhone) {
+					this.$refs.mobile.open()
+					return
+				}
+				this.popover = {
+					top: '10px'
+				}
+				const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor")
+				dateEditor.boundingClientRect(rect => {
+					if (this.windowWidth - rect.left < this.datePopupWidth) {
+						this.popover.right = 0
+					}
+				}).exec()
+				setTimeout(() => {
+					this.popup = !this.popup
+					if (!this.isPhone && this.isRange && this.isFirstShow) {
+						this.isFirstShow = false
+						const {
+							startDate,
+							endDate
+						} = this.range
+						if (startDate && endDate) {
+							if (this.diffDate(startDate, endDate) < 30) {
+								this.$refs.right.next()
+							}
+						} else {
+							this.$refs.right.next()
+							this.$refs.right.cale.lastHover = false
+						}
+					}
+
+				}, 50)
+			},
+
+			close() {
+				setTimeout(() => {
+					this.popup = false
+					this.$emit('maskClick', this.value)
+				}, 20)
+			},
+			setEmit(value) {
+				if (this.returnType === "timestamp" || this.returnType === "date") {
+					if (!Array.isArray(value)) {
+						if (!this.hasTime) {
+							value = value + ' ' + '00:00:00'
+						}
+						value = this.createTimestamp(value)
+						if (this.returnType === "date") {
+							value = new Date(value)
+						}
+					} else {
+						if (!this.hasTime) {
+							value[0] = value[0] + ' ' + '00:00:00'
+							value[1] = value[1] + ' ' + '00:00:00'
+						}
+						value[0] = this.createTimestamp(value[0])
+						value[1] = this.createTimestamp(value[1])
+						if (this.returnType === "date") {
+							value[0] = new Date(value[0])
+							value[1] = new Date(value[1])
+						}
+					}
+				}
+				this.formItem && this.formItem.setValue(value)
+				this.$emit('change', value)
+				this.$emit('input', value)
+				this.$emit('update:modelValue', value)
+				this.isEmitValue = true
+			},
+			createTimestamp(date) {
+				date = this.fixIosDateFormat(date)
+				return Date.parse(new Date(date))
+			},
+			singleChange(e) {
+				this.tempSingleDate = e.fulldate
+				if (this.hasTime) return
+				this.confirmSingleChange()
+			},
+
+			confirmSingleChange() {
+				if (!this.tempSingleDate) {
+					this.popup = false
+					return
+				}
+				if (this.hasTime) {
+					this.singleVal = this.tempSingleDate + ' ' + (this.time ? this.time : '00:00:00')
+				} else {
+					this.singleVal = this.tempSingleDate
+				}
+				this.setEmit(this.singleVal)
+				this.popup = false
+			},
+
+			leftChange(e) {
+				const {
+					before,
+					after
+				} = e.range
+				this.rangeChange(before, after)
+				const obj = {
+					before: e.range.before,
+					after: e.range.after,
+					data: e.range.data,
+					fulldate: e.fulldate
+				}
+				this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj)
+			},
+
+			rightChange(e) {
+				const {
+					before,
+					after
+				} = e.range
+				this.rangeChange(before, after)
+				const obj = {
+					before: e.range.before,
+					after: e.range.after,
+					data: e.range.data,
+					fulldate: e.fulldate
+				}
+				this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj)
+			},
+
+			mobileChange(e) {
+				if (this.isRange) {
+					const {
+						before,
+						after
+					} = e.range
+					this.handleStartAndEnd(before, after, true)
+					if (this.hasTime) {
+						const {
+							startTime,
+							endTime
+						} = e.timeRange
+						this.tempRange.startTime = startTime
+						this.tempRange.endTime = endTime
+					}
+					this.confirmRangeChange()
+
+				} else {
+					if (this.hasTime) {
+						this.singleVal = e.fulldate + ' ' + e.time
+					} else {
+						this.singleVal = e.fulldate
+					}
+					this.setEmit(this.singleVal)
+				}
+				this.$refs.mobile.close()
+			},
+
+			rangeChange(before, after) {
+				if (!(before && after)) return
+				this.handleStartAndEnd(before, after, true)
+				if (this.hasTime) return
+				this.confirmRangeChange()
+			},
+
+			confirmRangeChange() {
+				if (!this.tempRange.startDate && !this.tempRange.endDate) {
+					this.popup = false
+					return
+				}
+				let start, end
+				if (!this.hasTime) {
+					start = this.range.startDate = this.tempRange.startDate
+					end = this.range.endDate = this.tempRange.endDate
+				} else {
+					start = this.range.startDate = this.tempRange.startDate + ' ' +
+						(this.tempRange.startTime ? this.tempRange.startTime : '00:00:00')
+					end = this.range.endDate = this.tempRange.endDate + ' ' +
+						(this.tempRange.endTime ? this.tempRange.endTime : '00:00:00')
+				}
+				const displayRange = [start, end]
+				this.setEmit(displayRange)
+				this.popup = false
+			},
+
+			handleStartAndEnd(before, after, temp = false) {
+				if (!(before && after)) return
+				const type = temp ? 'tempRange' : 'range'
+				if (this.dateCompare(before, after)) {
+					this[type].startDate = before
+					this[type].endDate = after
+				} else {
+					this[type].startDate = after
+					this[type].endDate = before
+				}
+			},
+
+			/**
+			 * 比较时间大小
+			 */
+			dateCompare(startDate, endDate) {
+				// 计算截止时间
+				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+				// 计算详细项的截止时间
+				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+				if (startDate <= endDate) {
+					return true
+				} else {
+					return false
+				}
+			},
+
+			/**
+			 * 比较时间差
+			 */
+			diffDate(startDate, endDate) {
+				// 计算截止时间
+				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+				// 计算详细项的截止时间
+				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+				const diff = (endDate - startDate) / (24 * 60 * 60 * 1000)
+				return Math.abs(diff)
+			},
+
+			clear(needEmit = true) {
+				if (!this.isRange) {
+					this.singleVal = ''
+					this.tempSingleDate = ''
+					this.time = ''
+					if (this.isPhone) {
+						this.$refs.mobile && this.$refs.mobile.clearCalender()
+					} else {
+						this.$refs.pcSingle && this.$refs.pcSingle.clearCalender()
+					}
+					if (needEmit) {
+						this.formItem && this.formItem.setValue('')
+						this.$emit('change', '')
+						this.$emit('input', '')
+						this.$emit('update:modelValue', '')
+					}
+				} else {
+					this.range.startDate = ''
+					this.range.endDate = ''
+					this.tempRange.startDate = ''
+					this.tempRange.startTime = ''
+					this.tempRange.endDate = ''
+					this.tempRange.endTime = ''
+					if (this.isPhone) {
+						this.$refs.mobile && this.$refs.mobile.clearCalender()
+					} else {
+						this.$refs.left && this.$refs.left.clearCalender()
+						this.$refs.right && this.$refs.right.clearCalender()
+						this.$refs.right && this.$refs.right.next()
+					}
+					if (needEmit) {
+						this.formItem && this.formItem.setValue([])
+						this.$emit('change', [])
+						this.$emit('input', [])
+						this.$emit('update:modelValue', [])
+					}
+				}
+			},
+
+			parseDate(date) {
+				date = this.fixIosDateFormat(date)
+				const defVal = new Date(date)
+				const year = defVal.getFullYear()
+				const month = defVal.getMonth() + 1
+				const day = defVal.getDate()
+				const hour = defVal.getHours()
+				const minute = defVal.getMinutes()
+				const second = defVal.getSeconds()
+				const defDate = year + '-' + this.lessTen(month) + '-' + this.lessTen(day)
+				const defTime = this.lessTen(hour) + ':' + this.lessTen(minute) + (this.hideSecond ? '' : (':' + this
+					.lessTen(second)))
+				return {
+					defDate,
+					defTime
+				}
+			},
+
+			lessTen(item) {
+				return item < 10 ? '0' + item : item
+			},
+
+			//兼容 iOS、safari 日期格式
+			fixIosDateFormat(value) {
+				if (typeof value === 'string') {
+					value = value.replace(/-/g, '/')
+				}
+				return value
+			},
+
+			leftMonthSwitch(e) {
+				// console.log('leftMonthSwitch 返回:', e)
+			},
+			rightMonthSwitch(e) {
+				// console.log('rightMonthSwitch 返回:', e)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.uni-date-x {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding: 0 10px;
+		border-radius: 4px;
+		background-color: #fff;
+		color: #666;
+		font-size: 14px;
+	}
+
+	.uni-date-x--border {
+		box-sizing: border-box;
+		border-radius: 4px;
+		border: 1px solid #dcdfe6;
+	}
+
+	.uni-date-editor--x {
+		position: relative;
+	}
+
+	.uni-date-editor--x .uni-date__icon-clear {
+		position: absolute;
+		top: 0;
+		right: 0;
+		display: inline-block;
+		box-sizing: border-box;
+		border: 9px solid transparent;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-date__x-input {
+		padding: 0 8px;
+		height: 40px;
+		width: 100%;
+		line-height: 40px;
+		font-size: 14px;
+	}
+
+	.t-c {
+		text-align: center;
+	}
+
+	.uni-date__input {
+		height: 40px;
+		width: 100%;
+		line-height: 40px;
+		font-size: 14px;
+	}
+
+	.uni-date-range__input {
+		text-align: center;
+		max-width: 142px;
+	}
+
+	.uni-date-picker__container {
+		position: relative;
+		/* 		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		box-sizing: border-box;
+		z-index: 996;
+		font-size: 14px; */
+	}
+
+	.uni-date-mask {
+		position: fixed;
+		bottom: 0px;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		background-color: rgba(0, 0, 0, 0);
+		transition-duration: 0.3s;
+		z-index: 996;
+	}
+
+	.uni-date-single--x {
+		/* padding: 0 8px; */
+		background-color: #fff;
+		position: absolute;
+		top: 0;
+		z-index: 999;
+		border: 1px solid #EBEEF5;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+	}
+
+	.uni-date-range--x {
+		/* padding: 0 8px; */
+		background-color: #fff;
+		position: absolute;
+		top: 0;
+		z-index: 999;
+		border: 1px solid #EBEEF5;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+	}
+
+	.uni-date-editor--x__disabled {
+		opacity: 0.4;
+		cursor: default;
+	}
+
+	.uni-date-editor--logo {
+		width: 16px;
+		height: 16px;
+		vertical-align: middle;
+	}
+
+	/* 添加时间 */
+	.popup-x-header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		/* justify-content: space-between; */
+	}
+
+	.popup-x-header--datetime {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+	}
+
+	.popup-x-body {
+		display: flex;
+	}
+
+	.popup-x-footer {
+		padding: 0 15px;
+		border-top-color: #F1F1F1;
+		border-top-style: solid;
+		border-top-width: 1px;
+		/* background-color: #fff; */
+		line-height: 40px;
+		text-align: right;
+		color: #666;
+	}
+
+	.popup-x-footer text:hover {
+		color: #007aff;
+		cursor: pointer;
+		opacity: 0.8;
+	}
+
+	.popup-x-footer .confirm {
+		margin-left: 20px;
+		color: #007aff;
+	}
+
+	.uni-date-changed {
+		/* background-color: #fff; */
+		text-align: center;
+		color: #333;
+		border-bottom-color: #F1F1F1;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+		/* padding: 0 50px; */
+	}
+
+	.uni-date-changed--time text {
+		/* padding: 0 20px; */
+		height: 50px;
+		line-height: 50px;
+	}
+
+	.uni-date-changed .uni-date-changed--time {
+		/* display: flex; */
+		flex: 1;
+	}
+
+	.uni-date-changed--time-date {
+		color: #333;
+		opacity: 0.6;
+	}
+
+	.mr-50 {
+		margin-right: 50px;
+	}
+
+	/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
+	.uni-popper__arrow,
+	.uni-popper__arrow::after {
+		position: absolute;
+		display: block;
+		width: 0;
+		height: 0;
+		border-color: transparent;
+		border-style: solid;
+		border-width: 6px;
+	}
+
+	.uni-popper__arrow {
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+		top: -6px;
+		left: 10%;
+		margin-right: 3px;
+		border-top-width: 0;
+		border-bottom-color: #EBEEF5;
+	}
+
+	.uni-popper__arrow::after {
+		content: " ";
+		top: 1px;
+		margin-left: -6px;
+		border-top-width: 0;
+		border-bottom-color: #fff;
+	}
+</style>