init
This commit is contained in:
638
components/common-payment/common-payment - 副本.vue
Normal file
638
components/common-payment/common-payment - 副本.vue
Normal file
@@ -0,0 +1,638 @@
|
||||
<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>
|
||||
658
components/common-payment/common-payment.vue
Normal file
658
components/common-payment/common-payment.vue
Normal file
@@ -0,0 +1,658 @@
|
||||
<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-for="(calculateGoodsData, siteIndex) in shop_goods_list" :key="siteIndex">
|
||||
<view class="site-header">
|
||||
<view class="iconfont icon-dianpu"></view>
|
||||
<text class="site-name">{{calculateGoodsData.site_name}}</text>
|
||||
</view>
|
||||
<view class="site-body">
|
||||
<!-- 商品 -->
|
||||
<view class="goods-item" v-for="(goodsItem, goodsIndex) in goodsSpecFormat(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="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 class="site-wrap buyer-message">
|
||||
|
||||
</view>
|
||||
|
||||
<view class="order-money" style="margin: 0;">
|
||||
<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[calculateGoodsData.merch_id] }}</text>
|
||||
<text class="color-sub" v-else>无留言</text>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
<view class="order-cell coupon" v-if="modules.indexOf('coupon') != -1">
|
||||
<text class="tit">优惠券</text>
|
||||
<view class="box text-overflow"@click="openSiteCoupon(calculateGoodsData.merch_id)">
|
||||
<template v-if="orderCreateData.coupon[calculateGoodsData.merch_id].coupon_id">
|
||||
<text class="money price-font" style="max-width: 100%;">已选择1张优惠券</text>
|
||||
<!-- <text class="unit price-font">优惠</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>
|
||||
<view class="site-wrap buyer-message">
|
||||
<view class="order-cell">
|
||||
<view class="box shop-item">
|
||||
<text class="color-tip goods-num">共{{ calculateGoodsData.goods_num }}件</text>
|
||||
<text class="font-size-base">小计：</text>
|
||||
<text class="color-base-text unit">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text class="color-base-text money">{{ calculateGoodsData.goods_money | moneyFormat }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</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" :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="merchCoupon.data.length > 0">
|
||||
<view class="coupon-item" v-for="(couponItem, couponIndex) in merchCoupon.data" :key="couponIndex" @click="selectCoupon(couponItem,merchCoupon.merch_id)">
|
||||
<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="selectCouponId == 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>
|
||||
1078
components/common-payment/payment.js
Normal file
1078
components/common-payment/payment.js
Normal file
File diff suppressed because it is too large
Load Diff
211
components/diy-components/diy-article.vue
Normal file
211
components/diy-components/diy-article.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<x-skeleton type="list" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="article-wrap" :style="warpCss">
|
||||
<view :class="['list-wrap', value.style]" :style="warpCss">
|
||||
<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :style="itemCss">
|
||||
<view class="article-img">
|
||||
<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" @error="imgError(index)" />
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
<text class="title">{{ item.article_title }}</text>
|
||||
<text class="desc" style="color:#888;font-size: 24rpx; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">{{ item.article_abstract }}</text>
|
||||
<view class="read-wrap">
|
||||
<block v-if="item.category_name">
|
||||
<text class="category-icon"></text>
|
||||
<text>{{ item.category_name }}</text>
|
||||
</block>
|
||||
<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 文章
|
||||
export default {
|
||||
name: 'diy-article',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
loading: true,
|
||||
skeletonConfig: {
|
||||
gridRows: 1,
|
||||
gridRowsGap: '40rpx',
|
||||
headWidth: '160rpx',
|
||||
headHeight: '160rpx',
|
||||
textRows: 2
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function (nval) {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
// 子项样式
|
||||
itemCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.elementBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if (this.value.ornament.type == 'shadow') {
|
||||
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color;
|
||||
}
|
||||
if (this.value.ornament.type == 'stroke') {
|
||||
obj += 'border:' + '2rpx solid ' + this.value.ornament.color;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
var data = {
|
||||
num: this.value.count
|
||||
};
|
||||
if (this.value.sources == 'diy') {
|
||||
data.num = 0;
|
||||
data.article_id_arr = this.value.articleIds.toString();
|
||||
}
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/article/lists',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
let data = res.data;
|
||||
this.list = data;
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(item) {
|
||||
this.$util.redirectTo('/pages_tool/article/detail', {
|
||||
article_id: item.article_id
|
||||
});
|
||||
},
|
||||
imgError(index) {
|
||||
if (this.list[index]) this.list[index].cover_img = this.$util.getDefaultImage().article;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.article-wrap {
|
||||
.list-wrap {
|
||||
&.style-1 {
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
margin-top: 24rpx;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.article-img {
|
||||
margin-right: 20rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.abstract {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.read-wrap {
|
||||
display: flex;
|
||||
color: #999ca7;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
line-height: 1;
|
||||
|
||||
text {
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 36rpx;
|
||||
vertical-align: bottom;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: $base-color;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
444
components/diy-components/diy-audio.vue
Normal file
444
components/diy-components/diy-audio.vue
Normal file
@@ -0,0 +1,444 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="fui-audio style1" :style="{background:value.background}" v-if="value.type == 'style-2'">
|
||||
<view class="content" style="padding-top: 20rpx;">
|
||||
<view class="name" :style="{color:value.textcolor}">{{value.text}}</view>
|
||||
<view class="author" :style="{color:value.subtitlecolor}">{{value.desc}}----{{value.id}}</view>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view class="progressBar" :style="{width:audiowidth}"></view>
|
||||
</view>
|
||||
<view class="time" :style="{color:value.timecolor}">
|
||||
{{audiotime}}
|
||||
</view>
|
||||
<view @click="play()" class="start" :class="status?'iconj icon-07zanting':'iconj icon-bofang'" style="padding-top: 18rpx"></view>
|
||||
</view>
|
||||
<view class="fui-audio style3" :style="{background:value.background}" v-else>
|
||||
<!-- <audio src="/static/audio/bgm.mp3" controls loop></audio> -->
|
||||
<view class="img">
|
||||
<image :src="$util.img(value.imageUrl)"></image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="name" :style="{color:value.textcolor}">{{value.text}}</view>
|
||||
<view class="author" :style="{color:value.subtitlecolor}">{{value.desc}}</view>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view class="progressBar" :style="{width:audiowidth}"></view>
|
||||
</view>
|
||||
<view class="time" :style="{color:value.timecolor}">
|
||||
<!-- {{audios[value.id].audiotime}} -->
|
||||
{{audiotime}}
|
||||
</view>
|
||||
<view @click="play()" class="start" :class="status?'iconj icon-07zanting':'iconj icon-bofang'"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 视频
|
||||
export default {
|
||||
name: 'diy-audio',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
audiosObj:[],
|
||||
audios: {},
|
||||
audioContext:null,
|
||||
audiotime:'00:01',
|
||||
audiowidth:0,
|
||||
status:0,//1播放0停止
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// console.log(this.value)
|
||||
this.audios[this.value.id] = {
|
||||
audiotime:'00:01',
|
||||
audiowidth:0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
computed: {
|
||||
videoWarpCss: function() {
|
||||
var obj = '';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
play(){
|
||||
|
||||
var t = this.value.id, a = this.audiosObj[t] || !1;
|
||||
var e = {
|
||||
audio:this.$util.img(this.value.audioUrl),
|
||||
}
|
||||
if (!a) {
|
||||
a = uni.createInnerAudioContext("audio_" + t);
|
||||
var i = this.audiosObj;
|
||||
i[t] = a, this.audiosObj = i
|
||||
// uni.setStorageSync('audio_list',audio_list)
|
||||
var audio_list = uni.getStorageSync('audio_list')?uni.getStorageSync('audio_list'):[]
|
||||
if(audio_list.includes(t) == false){
|
||||
audio_list.push(t)
|
||||
uni.setStorageSync('audio_list',audio_list)
|
||||
}
|
||||
}
|
||||
console.log(uni.getStorageSync('audio_list'))
|
||||
var n = this;
|
||||
// console.log(a)
|
||||
a.onPlay(function() {
|
||||
var e = setInterval(function() {
|
||||
var i = a.currentTime / a.duration * 100 + "%", s = Math.floor(Math.ceil(a.currentTime) / 60), o = (Math.ceil(a.currentTime) % 60 / 100).toFixed(2).slice(-2), r = Math.ceil(a.currentTime);
|
||||
s < 10 && (s = "0" + s);
|
||||
var u = s + ":" + o, c = n.audios;
|
||||
// console.log(i)
|
||||
c[t].audiowidth = i, c[t].Time = e, c[t].audiotime = u, c[t].seconds = r, n.audios = c;
|
||||
}, 1e3);
|
||||
});
|
||||
|
||||
var s = n.$util.img(n.value.audioUrl), o = n.audios[n.value.id].seconds || 0, r = 0, u = 1;
|
||||
0 == u && a.onEnded(function(e) {
|
||||
c[t].status = !1,n.status=!1,c[t].seconds = 0,console.log(c),n.audios = c;
|
||||
});
|
||||
var c = n.audios;
|
||||
c[t] || (c[t] = {}), a.paused && 0 == o ? (a.src = s, a.play(), 1 == u && (a.loop = !0),
|
||||
c[t].status = !0,n.status=!0, n.pauseOther(t)) : a.paused && o > 0 ? (a.play(), 0 == r ? a.seek(o) : a.seek(0),
|
||||
c[t].status = !0,n.status=!0, n.pauseOther(t)) : (a.pause(), c[t].status = !1,n.status=!1),n.audios = c;
|
||||
console.log(n.audios)
|
||||
},
|
||||
pauseOther: function(e) {
|
||||
var t = this;
|
||||
// console.log(this.audiosObj[this.value.id]);
|
||||
var i = this.audiosObj[this.value.id],a = this.value.id
|
||||
// console.log(i)
|
||||
// console.log(a)
|
||||
// if (a != e) {
|
||||
// i.pause();
|
||||
// var n = t.audios;
|
||||
// n[a] && (n[a].status = !1, this.audios=n);
|
||||
// }
|
||||
var audios = document.getElementsByTagName("audio");
|
||||
// 暂停函数
|
||||
function pauseAll() {
|
||||
var self = this;
|
||||
[].forEach.call(audios, function (i) {
|
||||
// 将audios中其他的audio全部暂停
|
||||
i !== self && i.pause();
|
||||
})
|
||||
}
|
||||
// 给play事件绑定暂停函数
|
||||
[].forEach.call(audios, function (i) {
|
||||
i.addEventListener("play", pauseAll.bind(i));
|
||||
})
|
||||
|
||||
|
||||
// var audio_list = uni.getStorageSync('audio_list')
|
||||
// audio_list.forEach(function(value, index) {
|
||||
// if (value != e) {
|
||||
// console.log(e)
|
||||
// uni.createInnerAudioContext("audio_" + value).pause();
|
||||
// }
|
||||
// });
|
||||
|
||||
// this.audiosObj.forEach(function(value, index) {
|
||||
// console.log(value);
|
||||
// });
|
||||
// this.each(this.audiosObj, function(a, i) {
|
||||
// if (a != e) {
|
||||
// i.pause();
|
||||
// var n = t.data.audios;
|
||||
// n[a] && (n[a].status = !1, t.setData({
|
||||
// audios: n
|
||||
// }));
|
||||
// }
|
||||
// });
|
||||
},
|
||||
|
||||
|
||||
play_bak(){
|
||||
|
||||
var t = this.value.id
|
||||
this.audioContext = uni.createInnerAudioContext("audio_" + this.value.id);
|
||||
this.audioContext.src = this.$util.img(this.value.audioUrl);
|
||||
var that = this
|
||||
if(this.status == 1){
|
||||
this.audioContext.pause();
|
||||
this.status = 0
|
||||
return false
|
||||
}
|
||||
this.audioContext.play();
|
||||
this.status = 1
|
||||
this.audioContext.onCanplay(function(s){
|
||||
var e = setInterval(function() {
|
||||
var i = parseFloat(that.audioContext.currentTime) / parseFloat(that.audioContext.duration) * 100 + "%", s = Math.floor(Math.ceil(that.audioContext.currentTime) / 60), o = (Math.ceil(that.audioContext.currentTime) % 60 / 100).toFixed(2).slice(-2), r = Math.ceil(that.audioContext.currentTime);
|
||||
s < 10 && (s = "0" + s);
|
||||
var u = s + ":" + o, c = that.audios;
|
||||
c[t].audiowidth = i, c[t].Time = e, c[t].audiotime = u, c[t].seconds = r
|
||||
that.audios = c
|
||||
// console.log(c)
|
||||
console.log(that.audios[that.value.id].audiotime)
|
||||
that.audiotime = that.audios[that.value.id].audiotime
|
||||
that.audiowidth = that.audios[that.value.id].audiowidth
|
||||
console.log(i)
|
||||
that.lyg = i
|
||||
}, 1e3);
|
||||
});
|
||||
|
||||
|
||||
this.audioContext.onEnded(() => {
|
||||
console.log('播放结束');
|
||||
this.status = 0
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.fui-audio {
|
||||
width: 100%;
|
||||
border: 1rpx solid #eeeeee;
|
||||
padding: 0 30rpx 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.fui-audio .img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.fui-audio .img image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fui-audio .name {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.fui-audio .author {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.fui-audio .time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.fui-audio .start {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.progressBar {
|
||||
height: 2rpx;
|
||||
width: 0;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.fui-audio.style1 {
|
||||
height: 86rpx;
|
||||
line-height: 82rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style1 .img,.fui-audio.style2 .img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fui-audio.style1 .name,.fui-audio.style2 .name {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 300rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style1 .author,.fui-audio.style2 .author {
|
||||
float: left;
|
||||
margin-left: 12rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 200rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style1 .time,.fui-audio.style4 .time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fui-audio.style1 .start {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: 40rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.fui-audio.style1 .progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fui-audio.style2 {
|
||||
height: 86rpx;
|
||||
line-height: 82rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style2 .img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fui-audio.style2 .time {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style2 .name {
|
||||
margin-left: 70rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style2 .start {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 30rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.fui-audio.style2 .progress,.fui-audio.style3 .progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fui-audio.style3 {
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style3 .start {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
left: 28rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
color: #fff;
|
||||
/* border: 2rpx solid #fff; */
|
||||
border-radius: 50%;
|
||||
text-indent: 18rpx;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style3 .img,.fui-audio.style4 .img {
|
||||
float: left;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style3 .content {
|
||||
width: 468rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style3 .content,.fui-audio.style4 .content {
|
||||
float: left;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fui-audio.style3 .content .name {
|
||||
height: 40rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fui-audio.style3 .content .author {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fui-audio.style3 .time {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style4 {
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style4 .content {
|
||||
padding-bottom: 18rpx;
|
||||
height: 82rpx;
|
||||
width: 500rpx;
|
||||
}
|
||||
|
||||
.fui-audio.style4 .start {
|
||||
position: absolute;
|
||||
top: 32rpx;
|
||||
right: 30rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.fui-audio.style4 .name {
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fui-audio.style4 .author {
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fui-audio.style4 .progress {
|
||||
background: #f5f5f5;
|
||||
height: 4rpx;
|
||||
position: absolute;
|
||||
bottom: 24rpx;
|
||||
left: 130rpx;
|
||||
right: 30rpx;
|
||||
border-radius: 2rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fui-audio.style4 .progressBar {
|
||||
height: 4rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.diy-audio>>>.uni-video-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
723
components/diy-components/diy-bargain.vue
Normal file
723
components/diy-components/diy-bargain.vue
Normal file
@@ -0,0 +1,723 @@
|
||||
<template>
|
||||
<x-skeleton :type="skeletonType" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="diy-bargain" :class="[value.template, value.style]" :style="warpCss">
|
||||
|
||||
<!-- 商品头部 -->
|
||||
<view v-if="value.titleStyle.isShow && list && list.length" :class="[value.titleStyle.style, 'bargain-head']" :style="{ backgroundImage: 'url(' + $util.img(value.titleStyle.backgroundImage) + '), linear-gradient(to right,' + value.titleStyle.bgColorStart + ',' + value.titleStyle.bgColorEnd + ')' }">
|
||||
<view v-if="value.titleStyle.leftStyle == 'text'" class="left-text" :style="{ fontSize: value.titleStyle.fontSize * 2 + 'rpx', color: value.titleStyle.textColor, fontWeight: value.titleStyle.fontWeight ? 'bold' : '' }">
|
||||
{{ value.titleStyle.leftText }}
|
||||
</view>
|
||||
<image v-else class="left-img" :src="$util.img(value.titleStyle.leftImg)" mode="heightFix"></image>
|
||||
<view class="head-content" v-if="value.titleStyle.style == 'style-1'" :style="{ color: value.titleStyle.textColor }">低至0元免费拿</view>
|
||||
<view class="head-right" :style="{ fontSize: value.titleStyle.moreFontSize * 2 + 'rpx', color: value.titleStyle.moreColor }" @click="$util.redirectTo('/pages_promotion/bargain/list')">
|
||||
<text>{{ value.titleStyle.more }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<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="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>
|
||||
<view class="content"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.btnStyle.control">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name" :style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }" :class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="progress" v-if="value.style == 'style-2'">
|
||||
<view class="bg">
|
||||
<view class="curr" :style="{ width: progress(item) * 2 + 'rpx' }">
|
||||
<image class="progress-bar" mode="widthFix" :src="$util.img('public/uniapp/bargain/progress_bar_01.png')"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="num" v-if="item.is_bargaining">
|
||||
已砍
|
||||
<text>￥{{ (item.price - item.curr_price).toFixed(2) }}</text>
|
||||
，仅差
|
||||
<text>￥{{ item.curr_price }}</text>
|
||||
</view>
|
||||
<view class="num" v-else>
|
||||
最低可砍至
|
||||
<text>￥{{ item.floor_price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="progress" v-if="value.style == 'style-3'">
|
||||
最低可砍至
|
||||
<text class="num">￥{{ item.floor_price }}</text>
|
||||
</view>
|
||||
<view class="price-wrap">
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">.{{ item.price.split('.')[1] }}</text>
|
||||
</view>
|
||||
<button v-if="value.btnStyle.control" :style="{
|
||||
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
|
||||
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
|
||||
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
|
||||
}">
|
||||
{{ item.is_bargaining ? '继续砍价' : value.btnStyle.text }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<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="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"/>
|
||||
<view class="num" v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
已砍{{ item.sale_num }}件
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name" :style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }" :class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="discount-price"
|
||||
v-if="value.priceStyle.mainControl && value.template == 'horizontal-slide' && value.style != 'style-2'">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.floor_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.floor_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
¥{{ item.price }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</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', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex" @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(dataIndex)" :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"/>
|
||||
<view class="num" v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
已砍{{ item.sale_num }}件
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name" :style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }" :class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl && value.template == 'horizontal-slide' && value.style != 'style-2'">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.floor_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.floor_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
¥{{ item.price }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-bargain',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
page: 1,
|
||||
loading: true,
|
||||
skeletonType: '',
|
||||
skeletonConfig: {}
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
async created() {
|
||||
this.initSkeleton();
|
||||
if (this.value.template == 'row1-of1' && this.value.style == 'style-2') await this.getDataing();
|
||||
this.getData();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: async function(nval) {
|
||||
if (this.value.template == 'row1-of1' && this.value.style == 'style-2') await this.getDataing();
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
if (this.value.componentBgColor) obj += 'background:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
// 商品项样式
|
||||
goodsItemCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.elementBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if (this.value.ornament.type == 'shadow') {
|
||||
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color + ';';
|
||||
}
|
||||
if (this.value.ornament.type == 'stroke') {
|
||||
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
|
||||
}
|
||||
const screenWidth = uni.getSystemInfoSync().windowWidth;
|
||||
if (this.value.template == 'horizontal-slide') {
|
||||
var width = '';
|
||||
if (this.value.slideMode == 'scroll' && this.value.goodsMarginType == 'diy') width = this.rpxUpPx(this
|
||||
.value.goodsMarginNum * 2);
|
||||
else width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value
|
||||
.margin.both * 2) * 2] / 6;
|
||||
|
||||
obj += 'margin-left:' + width + 'px;';
|
||||
obj += 'margin-right:' + width + 'px;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
swiperHeight() {
|
||||
if (this.value.nameLineMode == 'multiple') {
|
||||
if (this.value.ornament.type == 'shadow') return '420rpx';
|
||||
else return '400rpx';
|
||||
}
|
||||
if (this.value.ornament.type == 'shadow') return '386rpx';
|
||||
else return '378rpx';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initSkeleton() {
|
||||
if (this.value.template == 'row1-of1') {
|
||||
|
||||
// 单列 风格
|
||||
this.skeletonType = 'list';
|
||||
this.skeletonConfig = {
|
||||
textRows: 2
|
||||
};
|
||||
|
||||
} else if (this.value.template == 'horizontal-slide') {
|
||||
|
||||
// 横向滑动 风格
|
||||
this.skeletonType = 'waterfall';
|
||||
this.skeletonConfig = {
|
||||
gridRows: 1,
|
||||
gridColumns: 3,
|
||||
headHeight: '200rpx',
|
||||
textRows: 2,
|
||||
textWidth: ['100%', '80%']
|
||||
};
|
||||
|
||||
}
|
||||
},
|
||||
rpxUpPx(res) {
|
||||
const screenWidth = uni.getSystemInfoSync().windowWidth;
|
||||
var data = (screenWidth * parseInt(res)) / 750;
|
||||
return Math.floor(data);
|
||||
},
|
||||
// 查找自己参与的砍价
|
||||
async getDataing() {
|
||||
var res = await this.$api.sendRequest({
|
||||
url: '/bargain/api/goods/bargainingList',
|
||||
data: {},
|
||||
async: false
|
||||
});
|
||||
|
||||
res.data &&
|
||||
res.data.forEach((item, index) => {
|
||||
item.is_bargaining = 1;
|
||||
});
|
||||
this.list = res.data || [];
|
||||
this.loading = false;
|
||||
},
|
||||
// 查找可砍价的商品
|
||||
getData() {
|
||||
var data = {
|
||||
num: this.value.count,
|
||||
is_exclude_bargaining: 1
|
||||
};
|
||||
if (this.value.sources == 'diy') {
|
||||
data.num = 0;
|
||||
data.id_arr = this.value.goodsId.toString();
|
||||
}
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/bargain/api/goods/lists',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
if (this.value.template == 'row1-of1' && this.value.style == 'style-2') this.list =
|
||||
this.list.concat(res.data).splice(0, this.value.count);
|
||||
else this.list = res.data;
|
||||
|
||||
// 切屏滚动，每页显示固定数量
|
||||
if (this.value.template == 'horizontal-slide' && this.value.slideMode == 'slide') {
|
||||
let size = 3;
|
||||
let temp = [];
|
||||
this.page = Math.ceil(this.list.length / size);
|
||||
for (var i = 0; i < this.page; i++) {
|
||||
temp[i] = [];
|
||||
for (var j = i * size; j < this.list.length; j++) {
|
||||
if (temp[i].length == size) break;
|
||||
temp[i].push(this.list[j]);
|
||||
}
|
||||
}
|
||||
this.list = temp;
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
progress(data) {
|
||||
// 214 表示当前进度条的宽度
|
||||
let progress = (((parseFloat(data.price) - parseFloat(data.curr_price)) / parseFloat(data.price)) * 214)
|
||||
.toFixed();
|
||||
if (progress == 'NaN') {
|
||||
progress = 0;
|
||||
}
|
||||
return progress;
|
||||
},
|
||||
toDetail(e) {
|
||||
this.$util.redirectTo('/pages_promotion/bargain/detail', {
|
||||
b_id: e.bargain_id
|
||||
});
|
||||
},
|
||||
imageError(index) {
|
||||
this.list[index].goods_image = this.$util.getDefaultImage().goods;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.diy-bargain {
|
||||
overflow: hidden;
|
||||
|
||||
// 头部
|
||||
.bargain-head {
|
||||
&.style-1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
|
||||
.left-img {
|
||||
height: 40rpx;
|
||||
width: 156rpx;
|
||||
}
|
||||
|
||||
.head-content {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: $font-size-tag;
|
||||
margin-right: auto;
|
||||
margin-left: 20rpx;
|
||||
line-height: 1;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2rpx;
|
||||
height: 24rpx;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: -12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.head-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $font-size-sub;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
|
||||
.left-img {
|
||||
height: 40rpx;
|
||||
width: 156rpx;
|
||||
}
|
||||
|
||||
.head-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36rpx;
|
||||
background: linear-gradient(270deg, #ffbd5b 0%, #fd882e 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 2rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
position: relative;
|
||||
left: 6rpx;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
padding: 6rpx 4rpx 4rpx;
|
||||
background-color: #fff;
|
||||
color: #ffbd5b;
|
||||
border-radius: 50%;
|
||||
transform: scale(0.6);
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 16rpx;
|
||||
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 6rpx 0 6rpx 20rpx;
|
||||
|
||||
.goods-name {
|
||||
&.multi-hidden {
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
color: var(--price-color);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
color: var(--btn-text-color);
|
||||
background-color: $base-color;
|
||||
color: #fff;
|
||||
min-width: 112rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
font-size: $font-size-tag;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
.discount-price {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10rpx;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.bg {
|
||||
margin-left: 6rpx;
|
||||
width: auto;
|
||||
height: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #ffeadb;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fa1a1a;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: -18rpx;
|
||||
}
|
||||
|
||||
.curr {
|
||||
width: 0;
|
||||
height: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fa1a1a;
|
||||
position: relative;
|
||||
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
right: -20rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
max-width: inherit !important;
|
||||
max-height: inherit !important;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: $font-size-tag;
|
||||
margin-top: 12rpx;
|
||||
line-height: 1;
|
||||
|
||||
text {
|
||||
color: #fa1a1a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
.progress {
|
||||
display: flex;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-sub;
|
||||
|
||||
.num {
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.content {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-slide {
|
||||
.scroll {
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 20rpx;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.item.shadow {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
>image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 180rpx;
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
padding-left: 20rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
color: #ffffff;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&.multi-content {
|
||||
height: 160rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
|
||||
&.multi-hidden {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
margin-top: auto;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
color: var(--price-color);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
|
||||
.original-price {
|
||||
margin-top: 4rpx;
|
||||
font-size: $font-size-tag;
|
||||
color: $color-tip;
|
||||
line-height: 1;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 200rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
293
components/diy-components/diy-bottom-nav.vue
Normal file
293
components/diy-components/diy-bottom-nav.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<view v-if="tabBarList && tabBarList.list">
|
||||
<view class="tab-bar" :style="{ backgroundColor: tabBarList.backgroundColor }">
|
||||
<view class="tabbar-border"></view>
|
||||
<view class="item" v-for="(item, index) in tabBarList.list" :key="item.id" @click="redirectTo(item.link)">
|
||||
<view class="bd">
|
||||
<block v-if="item.link.wap_url == '/pages/goods/cart'">
|
||||
<view class="icon" v-if="tabBarList.type == 1 || tabBarList.type == 2" :animation="cartAnimation" id="tabbarCart">
|
||||
<block v-if="verify(item.link)">
|
||||
<image v-if="item.selected_icon_type == 'img'" :src="$util.img(item.selectedIconPath)" />
|
||||
<diy-icon v-if="item.selected_icon_type == 'icon'" :icon="item.selectedIconPath" :value="item.selected_style ? item.selected_style : null"></diy-icon>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image v-if="item.icon_type == 'img'" :src="$util.img(item.iconPath)" />
|
||||
<diy-icon v-if="item.icon_type == 'icon'" :icon="item.iconPath" :value="item.style ? item.style : null"></diy-icon>
|
||||
</block>
|
||||
<view class="cart-count-mark font-size-activity-tag"
|
||||
:class="{ max: item.link.wap_url == '/pages/goods/cart' && cartNumber > 99 }"
|
||||
:style="{ background: 'var(--price-color)' }" v-if="cartNumber > 0">
|
||||
{{ cartNumber > 99 ? '99+' : cartNumber }}
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="icon" v-if="tabBarList.type == 1 || tabBarList.type == 2">
|
||||
<block v-if="verify(item.link)">
|
||||
<image v-if="item.selected_icon_type == 'img'" :src="$util.img(item.selectedIconPath)" />
|
||||
<diy-icon v-if="item.selected_icon_type == 'icon'" :icon="item.selectedIconPath"
|
||||
:value="item.selected_style ? item.selected_style : null"></diy-icon>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image v-if="item.icon_type == 'img'" :src="$util.img(item.iconPath)" />
|
||||
<diy-icon v-if="item.icon_type == 'icon'" :icon="item.iconPath" :value="item.style ? item.style : null"></diy-icon>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<view class="label" v-if="(tabBarList.type == 1 || tabBarList.type == 3) && tabBarList.theme == 'diy'" :style="{ color: verify(item.link) ? tabBarList.textHoverColor : tabBarList.textColor }">
|
||||
{{ lang =='en-us'?item.en_text:item.text }}
|
||||
</view>
|
||||
<view class="label" v-if="(tabBarList.type == 1 || tabBarList.type == 3) && tabBarList.theme == 'default'" :style="{ color: verify(item.link) ? 'var(--base-color)' : '#333333' }">
|
||||
{{ lang =='en-us'?item.en_text:item.text }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 解决fixed定位后底部导航栏塌陷问题 -->
|
||||
<view class="tab-bar-placeholder"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-bottom-nav',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lang:uni.getStorageSync("lang"),
|
||||
currentRoute: '', //当前页面路径
|
||||
jumpFlag: true, //是否可以跳转，防止重复点击
|
||||
cartAnimation: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let currentPage = getCurrentPages()[getCurrentPages().length - 1];
|
||||
if (currentPage && currentPage.route) {
|
||||
this.currentRoute = currentPage.route;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (!this.$store.state.cartPosition) {
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select('#tabbarCart')
|
||||
.boundingClientRect(data => {
|
||||
if (data) this.$store.commit('setCartPosition', data);
|
||||
}).exec();
|
||||
|
||||
query.select('.tab-bar')
|
||||
.boundingClientRect(data => {
|
||||
if (data) this.$store.commit('setTabBarHeight', data.height +
|
||||
'px');
|
||||
}).exec();
|
||||
}
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
cartChange() {
|
||||
return this.$store.state.cartChange;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
cartChange: function (nval, oval) {
|
||||
if (nval > oval) {
|
||||
let animation = uni.createAnimation({
|
||||
duration: 200,
|
||||
timingFunction: 'ease'
|
||||
});
|
||||
animation.scale(1.2).step();
|
||||
this.cartAnimation = animation.export();
|
||||
setTimeout(() => {
|
||||
animation.scale(1).step();
|
||||
this.cartAnimation = animation.export();
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
redirectTo(link) {
|
||||
this.$emit('callback');
|
||||
this.$util.diyRedirectTo(link);
|
||||
},
|
||||
verify(link) {
|
||||
if (link == null || link == '' || !link.wap_url) return false;
|
||||
if (this.name) {
|
||||
var url = this.currentRoute + '?name=' + this.name;
|
||||
} else {
|
||||
var url = this.currentRoute;
|
||||
}
|
||||
|
||||
// 首页特殊处理
|
||||
if (link.wap_url == '/pages/index/index' && this.name == 'DIY_VIEW_INDEX') {
|
||||
return true;
|
||||
} else if (url && link.wap_url.indexOf(url) != -1) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.placeholder {
|
||||
height: 112rpx;
|
||||
|
||||
&.bluge {
|
||||
height: 180rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.safe-area {
|
||||
padding-bottom: 0;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 998;
|
||||
display: flex;
|
||||
border-top: 2rpx solid #f5f5f5;
|
||||
padding-bottom: 0;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.tabbar-border {
|
||||
background-color: rgba(255, 255, 255, 0.329412);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding-bottom: 10rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bd {
|
||||
position: relative;
|
||||
height: 100rpx;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
font-size: 40rpx;
|
||||
line-height: 40rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
>view {
|
||||
height: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bar-icon {
|
||||
font-size: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 1;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.bulge {
|
||||
.bd {
|
||||
position: relative;
|
||||
height: 100rpx;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
.icon {
|
||||
margin-top: -60rpx;
|
||||
margin-bottom: 4rpx;
|
||||
border-radius: 50%;
|
||||
width: 100rpx;
|
||||
height: 102rpx;
|
||||
padding: 10rpx;
|
||||
border-top: 2rpx solid #f5f5f5;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-count-mark {
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
right: -18rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
padding: 6rpx;
|
||||
border-radius: 50%;
|
||||
z-index: 99;
|
||||
|
||||
&.max {
|
||||
width: 40rpx;
|
||||
border-radius: 24rpx;
|
||||
right: -28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-bar-placeholder {
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 112rpx);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx);
|
||||
}
|
||||
</style>
|
||||
1303
components/diy-components/diy-category-item.vue
Normal file
1303
components/diy-components/diy-category-item.vue
Normal file
File diff suppressed because it is too large
Load Diff
1007
components/diy-components/diy-category.vue
Normal file
1007
components/diy-components/diy-category.vue
Normal file
File diff suppressed because it is too large
Load Diff
23
components/diy-components/diy-comp-extend.vue
Normal file
23
components/diy-components/diy-comp-extend.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<view></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 自定义扩展组件
|
||||
export default {
|
||||
name: 'diy-comp-extend',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
1074
components/diy-components/diy-coupon.vue
Normal file
1074
components/diy-components/diy-coupon.vue
Normal file
File diff suppressed because it is too large
Load Diff
419
components/diy-components/diy-fenxiao-goods-list.vue
Normal file
419
components/diy-components/diy-fenxiao-goods-list.vue
Normal file
@@ -0,0 +1,419 @@
|
||||
<template>
|
||||
<view 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-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>
|
||||
<view class="info-wrap" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
|
||||
<view class="name-wrap">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]"
|
||||
>
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="pro-info">
|
||||
<view class="discount-price">
|
||||
<view class="price-wrap" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">赚 ￥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{ item.commission_money.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{ '.' + item.commission_money.split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="sale-btn" v-if="value.btnStyle.control && item.is_collect == 0"
|
||||
:style="{
|
||||
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
|
||||
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
|
||||
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
|
||||
}"
|
||||
@click.stop="followGoods(item, index)"
|
||||
>
|
||||
关注
|
||||
</view>
|
||||
<view class="sale-btn" v-if="value.btnStyle.control && item.is_collect == 1"
|
||||
:style="{
|
||||
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
|
||||
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
|
||||
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
|
||||
}"
|
||||
@click.stop="delFollowTip(item, index)"
|
||||
>
|
||||
取消关注
|
||||
</view>
|
||||
</view>
|
||||
<view class="delete-price" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
￥{{ item.discount_price }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-fenxiao-goods-list',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
currentRoute: ''
|
||||
};
|
||||
},
|
||||
created() {
|
||||
let currentPage = getCurrentPages()[getCurrentPages().length - 1];
|
||||
this.currentRoute = '/' + currentPage.route;
|
||||
if (!this.storeToken) {
|
||||
this.$util.redirectTo(
|
||||
'/pages_tool/login/login',
|
||||
{
|
||||
back: this.currentRoute
|
||||
},
|
||||
'redirectTo'
|
||||
);
|
||||
}
|
||||
this.getData();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
goodsListWarpCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
// 商品项样式
|
||||
goodsItemCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.elementBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if (this.value.ornament.type == 'shadow') {
|
||||
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color;
|
||||
}
|
||||
if (this.value.ornament.type == 'stroke') {
|
||||
obj += 'border:' + '2rpx solid ' + this.value.ornament.color;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//页面跳转
|
||||
toDetail(e) {
|
||||
this.$util.redirectTo('/pages/goods/detail', { goods_id: e.goods_id });
|
||||
},
|
||||
//关注
|
||||
followGoods(e, index) {
|
||||
let goods_id = e.goods_id;
|
||||
let sku_id = e.sku_id;
|
||||
this.$api.sendRequest({
|
||||
url: '/fenxiao/api/goodscollect/add',
|
||||
data: {
|
||||
goods_id: goods_id,
|
||||
sku_id: sku_id
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.$util.showToast({ title: '关注成功' });
|
||||
this.list[index].is_collect = 1;
|
||||
this.list[index].collect_id = res.data;
|
||||
}
|
||||
this.$forceUpdate();
|
||||
}
|
||||
});
|
||||
},
|
||||
//取消关注
|
||||
delFollowTip(e, index) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认取消关注该商品吗',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.delFollow(e.collect_id, index);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
delFollow(e, f) {
|
||||
this.$api.sendRequest({
|
||||
url: '/fenxiao/api/goodscollect/delete',
|
||||
data: {
|
||||
collect_id: e
|
||||
},
|
||||
success: res => {
|
||||
let msg = '';
|
||||
if (res.code == 0) {
|
||||
msg = '取消成功';
|
||||
} else {
|
||||
msg = res.message;
|
||||
}
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
});
|
||||
|
||||
let arr = this.list;
|
||||
arr[f].is_collect = 0;
|
||||
this.list = arr;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
});
|
||||
},
|
||||
toMore() {
|
||||
this.$util.redirectTo('/pages_promotion/fenxiao/goods_list');
|
||||
},
|
||||
getData() {
|
||||
var data = {
|
||||
page: 1,
|
||||
page_size: this.value.count
|
||||
};
|
||||
if (this.value.sources == 'category') {
|
||||
data.category_id = this.value.categoryId;
|
||||
data.category_level = 1;
|
||||
} else if (this.value.sources == 'diy') {
|
||||
data.page_size = 0;
|
||||
data.goods_id_arr = this.value.goodsId.toString();
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/fenxiao/api/goods/page',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.list = res.data.list;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
imgError(index) {
|
||||
if (this.list[index]) this.list[index].goods_image = this.$util.getDefaultImage().goods;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-fenxiao {
|
||||
}
|
||||
|
||||
// 商品列表单列样式
|
||||
.goods-list.row1-of1 {
|
||||
.goods-item {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: 180rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.name-wrap {
|
||||
flex: 1;
|
||||
margin-bottom: 10rpx;
|
||||
.goods-name {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
&.multi-hidden {
|
||||
height: 72rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pro-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.sale {
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
color: #999;
|
||||
}
|
||||
.discount-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
.price-wrap {
|
||||
white-space: nowrap;
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
color: $base-color;
|
||||
}
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
text {
|
||||
font-weight: bold;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-price {
|
||||
text-decoration: line-through;
|
||||
flex: 1;
|
||||
line-height: 28rpx;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
}
|
||||
.sale-btn {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 26rpx;
|
||||
height: 50rpx;
|
||||
line-height: 52rpx;
|
||||
color: #fff;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表两列样式
|
||||
.goods-list.row1-of2 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.goods-item {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
width: calc(50% - 10rpx);
|
||||
&:nth-child(2n + 2) {
|
||||
width: calc(50% - 11rpx);
|
||||
margin-right: 0;
|
||||
}
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
&.shadow {
|
||||
width: calc(50% - 18rpx);
|
||||
&:nth-child(2n-1) {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2) {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
.goods-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 350rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 49%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
padding: 10rpx 20rpx;
|
||||
|
||||
.name-wrap {
|
||||
margin-bottom: 10rpx;
|
||||
.goods-name {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
&.multi-hidden {
|
||||
height: 72rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pro-info {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.sale {
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
color: #999;
|
||||
}
|
||||
.discount-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.price-wrap {
|
||||
white-space: nowrap;
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
color: $base-color;
|
||||
}
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
text {
|
||||
font-weight: bold;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-price {
|
||||
text-decoration: line-through;
|
||||
flex: 1;
|
||||
line-height: 28rpx;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
}
|
||||
.sale-btn {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 26rpx;
|
||||
height: 50rpx;
|
||||
line-height: 52rpx;
|
||||
color: #fff;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
114
components/diy-components/diy-float-btn.vue
Normal file
114
components/diy-components/diy-float-btn.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<view class="float-btn" :class="{ left_top: value.bottomPosition == 1, right_top: value.bottomPosition == 2, left_bottom: value.bottomPosition == 3, right_bottom: value.bottomPosition == 4 }" :style="style">
|
||||
<block v-for="(item, index) in value.list" :key="index">
|
||||
<view class="button-box" @click="$util.diyRedirectTo(item.link)" :style="{ width: value.imageSize + 'px', height: value.imageSize + 'px', fontSize: value.imageSize + 'px' }">
|
||||
<image v-if="!item.iconType || item.iconType == 'img'" :src="$util.img(item.imageUrl)" mode="aspectFit" :show-menu-by-longpress="true"/>
|
||||
<diy-icon v-else-if="item.iconType && item.iconType == 'icon'" :icon="item.icon"
|
||||
:value="item.style ? item.style : null"></diy-icon>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 获取系统状态栏的高度
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
export default {
|
||||
name: 'diy-float-btn',
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navHeight: 0,
|
||||
statusBarHeight: systemInfo.statusBarHeight
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
components: {},
|
||||
methods: {},
|
||||
computed: {
|
||||
style() {
|
||||
let style = {},
|
||||
height = 54;
|
||||
// #ifdef MP
|
||||
height = systemInfo.platform == 'ios' ? 54 : 58;
|
||||
// #endif
|
||||
switch (parseInt(this.value.bottomPosition)) {
|
||||
case 1:
|
||||
style.top = (this.navHeight + this.statusBarHeight + parseInt(this.value.btnBottom)) * 2 + 'rpx';
|
||||
break;
|
||||
case 2:
|
||||
style.top = (this.navHeight + this.statusBarHeight + parseInt(this.value.btnBottom)) * 2 + 'rpx';
|
||||
break;
|
||||
case 3:
|
||||
style.bottom = (100 + parseInt(this.value.btnBottom)) * 2 + 'rpx';
|
||||
break;
|
||||
case 4:
|
||||
style.bottom = (100 + parseInt(this.value.btnBottom)) * 2 + 'rpx';
|
||||
break;
|
||||
}
|
||||
return this.$util.objToStyle(style);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.float-btn {
|
||||
position: fixed;
|
||||
bottom: 20%;
|
||||
right: 40rpx;
|
||||
z-index: 990;
|
||||
|
||||
&.left_top {
|
||||
top: 100rpx;
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
&.right_top {
|
||||
top: 100rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
&.left_bottom {
|
||||
bottom: 160rpx;
|
||||
left: 30rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/*兼容 IOS<11.2*/
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/*兼容 IOS>11.2*/
|
||||
}
|
||||
|
||||
&.right_bottom {
|
||||
bottom: 160rpx;
|
||||
right: 30rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/*兼容 IOS<11.2*/
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/*兼容 IOS>11.2*/
|
||||
}
|
||||
|
||||
.button-box {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
29
components/diy-components/diy-follow-official-account.vue
Normal file
29
components/diy-components/diy-follow-official-account.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<!-- #ifdef MP -->
|
||||
<view v-if="value.isShow">
|
||||
<official-account></official-account>
|
||||
</view>
|
||||
<!--#endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 关注公众号
|
||||
export default {
|
||||
name: 'diy-follow-official-account',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
110
components/diy-components/diy-form.vue
Normal file
110
components/diy-components/diy-form.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view class="diy-from" :style="style">
|
||||
<view class="fui-cell-group">
|
||||
<view class="fui-cell ">
|
||||
<view class="fui-cell-label ">您的姓名</view>
|
||||
<view class="fui-cell-info">
|
||||
<input v-model="Form.realname" class="fui-input" placeholder="请输入您的姓名" value=""></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-cell ">
|
||||
<view class="fui-cell-label">手机号码</view>
|
||||
<view class="fui-cell-info">
|
||||
<input v-model="Form.mobile" class="fui-input" maxlength="11" placeholder="请输入您的手机号" type="number" ></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-cell ">
|
||||
<view class="fui-cell-label">您的邮箱</view>
|
||||
<view class="fui-cell-info">
|
||||
<input v-model="Form.mailbox" class="fui-input" placeholder="请输入您的邮箱" type="text" ></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-cell">
|
||||
<view class="fui-cell-label">所在城市</view>
|
||||
<view class="fui-cell-info">
|
||||
<input v-model="Form.citys" class="fui-input" placeholder="请输入您的所在地" value=""></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-cell">
|
||||
<view class="fui-cell-label">备注</view>
|
||||
<view class="fui-cell-info">
|
||||
<input v-model="Form.remark" class="fui-input" placeholder="请输入备注" value=""></input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="submitform" class="fui-btn btn-danger block mtop">提交信息</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-from',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
markers:[],
|
||||
Form:{
|
||||
realname:'',
|
||||
mobile:'',
|
||||
mailbox:'',
|
||||
citys:'',
|
||||
remark:'',
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
// this.getDataList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
markerst(){
|
||||
return [{
|
||||
id:1,
|
||||
latitude:this.value.list[0].lat,
|
||||
longitude:this.value.list[0].lng
|
||||
}]
|
||||
},
|
||||
style() {
|
||||
var css = '';
|
||||
css += 'background-color:' + this.value.contentBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return css;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitform(){
|
||||
this.$api.sendRequest({
|
||||
url: '/api/member/information',
|
||||
data: this.Form,
|
||||
success: res => {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-from{
|
||||
background: #fff;
|
||||
padding-bottom: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
</style>
|
||||
158
components/diy-components/diy-goods-brand.vue
Normal file
158
components/diy-components/diy-goods-brand.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<x-skeleton type="waterfall" :loading="loading" :configs="skeletonConfig">
|
||||
<view :class="['brand-wrap', value.ornament.type]" :style="warpCss">
|
||||
<view :class="[value.style]">
|
||||
<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">
|
||||
<image class="brand-pic" :src="$util.img(item.image_url)" mode="aspectFit" @click="toDetail(item)" @error="imgError(index)" :style="itemCss"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 商品品牌
|
||||
import uniGrid from '@/components/uni-grid/uni-grid.vue';
|
||||
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
|
||||
|
||||
export default {
|
||||
name: 'diy-goods-brand',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
components: {
|
||||
uniGrid,
|
||||
uniGridItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
loading: true,
|
||||
skeletonConfig: {
|
||||
gridRows: 2,
|
||||
gridColumns: 4,
|
||||
gridRowsGap: '20rpx',
|
||||
headWidth: '120rpx',
|
||||
headHeight: '120rpx',
|
||||
textShow: false
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getBrandList();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
this.getBrandList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if (this.value.ornament.type == 'shadow') {
|
||||
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color;
|
||||
}
|
||||
if (this.value.ornament.type == 'stroke') {
|
||||
obj += 'border:' + '2rpx solid ' + this.value.ornament.color;
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
// 子项样式
|
||||
itemCss() {
|
||||
var obj = '';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getBrandList() {
|
||||
var data = {
|
||||
page: 1,
|
||||
page_size: this.value.count
|
||||
};
|
||||
if (this.value.sources == 'diy') {
|
||||
data.page_size = 0;
|
||||
data.brand_id_arr = this.value.brandIds.toString();
|
||||
}
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goodsbrand/page',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
let data = res.data;
|
||||
this.list = data.list;
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(item) {
|
||||
this.$util.redirectTo('/pages/goods/list', {
|
||||
brand_id: item.brand_id
|
||||
});
|
||||
},
|
||||
imgError(index) {
|
||||
if (this.list[index]) this.list[index].image_url = this.$util.getDefaultImage().goods;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.brand-wrap {
|
||||
&.shadow {
|
||||
margin-left: 8rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-top: 8rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.style-1 {
|
||||
.title-wrap {
|
||||
text-align: center;
|
||||
padding: 20rpx 0 10rpx;
|
||||
}
|
||||
|
||||
.ul-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 20rpx;
|
||||
|
||||
.li-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(100% / 4 - 20rpx) !important;
|
||||
height: 124rpx;
|
||||
margin: 10rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.brand-pic {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1410
components/diy-components/diy-goods-list.vue
Normal file
1410
components/diy-components/diy-goods-list.vue
Normal file
File diff suppressed because it is too large
Load Diff
599
components/diy-components/diy-goods-recommend.vue
Normal file
599
components/diy-components/diy-goods-recommend.vue
Normal file
@@ -0,0 +1,599 @@
|
||||
<template>
|
||||
<x-skeleton type="waterfall" :loading="loading" :configs="skeletonConfig">
|
||||
<view v-if="list.length" :class="['goods-list', goodsValue.style]" :style="goodsListWarpCss">
|
||||
<view class="top-wrap" v-if="goodsValue.topStyle.support">
|
||||
<text :class="['js-icon', goodsValue.topStyle.icon.value]" :style="{ backgroundColor: goodsValue.topStyle.icon.bgColor, color: goodsValue.topStyle.icon.color }"></text>
|
||||
<text class="title" :style="{ color: goodsValue.topStyle.color }">{{ goodsValue.topStyle.title }}</text>
|
||||
<text class="line" :style="{ color: goodsValue.topStyle.subColor }"></text>
|
||||
<text class="sub" :style="{ color: goodsValue.topStyle.subColor }">{{ goodsValue.topStyle.subTitle }}</text>
|
||||
</view>
|
||||
<swiper :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(item, index) in page" :key="index" :class="['swiper-item', [list[index].length / 3] >= 1 && 'flex-between']">
|
||||
<view class="goods-item" v-for="(dataItem, dataIndex) in list[index]" :key="dataIndex" @click="toDetail(dataItem)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
|
||||
<div class="goods-img-wrap">
|
||||
<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(dataItem.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index,dataIndex)" :lazy-load="true"/>
|
||||
<view class="sell-out" v-if="dataItem.stock <= 0">
|
||||
<text class="iconfont icon-shuqing"></text>
|
||||
</view>
|
||||
</div>
|
||||
<view :class="['info-wrap', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="goodsValue.goodsNameStyle.control || goodsValue.priceStyle.mainControl || goodsValue.priceStyle.lineControl || goodsValue.labelStyle.support">
|
||||
<view v-if="goodsValue.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.goodsNameStyle.color : '', fontWeight: goodsValue.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': goodsValue.nameLineMode == 'single' }, { 'multi-hidden': goodsValue.nameLineMode == 'multiple' }]">
|
||||
{{ dataItem.goods_name }}
|
||||
</view>
|
||||
<view class="pro-info">
|
||||
<view class="label-wrap" v-if="goodsValue.labelStyle.support" :style="{ background: goodsValue.labelStyle.bgColor, color: goodsValue.labelStyle.color }">
|
||||
<image :src="$util.img('app/component/view/goods_recommend/img/label.png')" mode="widthFix"/>
|
||||
<text>{{ goodsValue.labelStyle.title }}</text>
|
||||
</view>
|
||||
<view class="discount-price">
|
||||
<view class="price-wrap" v-if="goodsValue.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">￥</text>
|
||||
<text class="price price-style large" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{ showPrice(dataItem).split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{ '.' + showPrice(dataItem).split('.')[1] }}</text>
|
||||
</view>
|
||||
<view v-if="goodsValue.priceStyle.lineControl && showMarketPrice(dataItem)" class="delete-price price-font" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.lineColor : '' }">￥{{ showMarketPrice(dataItem) }}</view>
|
||||
<view class="sale" v-if="goodsValue.saleStyle.control" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.saleStyle.color : '' }">
|
||||
售{{ dataItem.sale_num }}{{ dataItem.unit ? dataItem.unit : '件' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-goods-recommend',
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
skeletonConfig: {
|
||||
gridRows: 1,
|
||||
gridColumns: 3,
|
||||
headWidth: '200rpx',
|
||||
headHeight: '200rpx',
|
||||
textRows: 2,
|
||||
textWidth: ['100%', '60%'],
|
||||
},
|
||||
list: [],
|
||||
goodsValue: {},
|
||||
page: 1
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.goodsValue = this.value;
|
||||
this.getGoodsList();
|
||||
},
|
||||
watch: {
|
||||
'globalStoreInfo.store_id': {
|
||||
handler(nval, oval) {
|
||||
if (nval != oval) {
|
||||
this.getGoodsList();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
this.getGoodsList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
goodsListWarpCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.goodsValue.componentBgColor + ';';
|
||||
if (this.goodsValue.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.goodsValue.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.goodsValue.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.goodsValue.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.goodsValue.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if (this.goodsValue.bgUrl) {
|
||||
obj += `background-image: url('${this.$util.img(this.goodsValue.bgUrl)}');`;
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
// 商品项样式
|
||||
goodsItemCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.elementBgColor + ';';
|
||||
if (this.goodsValue.elementAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.goodsValue.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.goodsValue.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.goodsValue.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.goodsValue.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if (this.goodsValue.ornament.type == 'shadow') {
|
||||
obj += 'box-shadow:' + '0 0 10rpx ' + this.goodsValue.ornament.color + ';';
|
||||
}
|
||||
if (this.goodsValue.ornament.type == 'stroke') {
|
||||
obj += 'border:' + '2rpx solid ' + this.goodsValue.ornament.color + ';';
|
||||
}
|
||||
const screenWidth = uni.getSystemInfoSync().windowWidth;
|
||||
var width = '';
|
||||
if (this.goodsValue.style != 'style-2') {
|
||||
width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value.margin
|
||||
.both * 2) * 2] / 6;
|
||||
} else {
|
||||
width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this
|
||||
.rpxUpPx(this.value.margin.both * 2) * 2
|
||||
] / 6;
|
||||
}
|
||||
obj += 'margin-left:' + width + 'px;';
|
||||
obj += 'margin-right:' + width + 'px;';
|
||||
return obj;
|
||||
},
|
||||
swiperHeight() {
|
||||
if (this.goodsValue.style == 'style-3') {
|
||||
return '330rpx';
|
||||
} else if (this.goodsValue.style != 'style-2') {
|
||||
if (this.value.nameLineMode == 'multiple') {
|
||||
return '348rpx';
|
||||
}
|
||||
return '312rpx';
|
||||
} else {
|
||||
if (this.value.nameLineMode == 'multiple') {
|
||||
return '360rpx';
|
||||
}
|
||||
return '320rpx';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rpxUpPx(res) {
|
||||
const screenWidth = uni.getSystemInfoSync().windowWidth;
|
||||
var data = (screenWidth * parseInt(res)) / 750;
|
||||
return Math.floor(data);
|
||||
},
|
||||
getGoodsList() {
|
||||
var data = {
|
||||
num: this.goodsValue.count
|
||||
};
|
||||
if (this.goodsValue.sources == 'category') {
|
||||
data.category_id = this.goodsValue.categoryId;
|
||||
data.category_level = 1;
|
||||
} else if (this.goodsValue.sources == 'diy') {
|
||||
data.num = 0;
|
||||
data.goods_id_arr = this.goodsValue.goodsId.toString();
|
||||
}
|
||||
data.order = this.goodsValue.sortWay;
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goodssku/components',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
let data = res.data;
|
||||
this.list = data;
|
||||
|
||||
// 切屏滚动，每页显示固定数量
|
||||
let size = 3;
|
||||
let temp = [];
|
||||
this.page = Math.ceil(this.list.length / size);
|
||||
for (var i = 0; i < this.page; i++) {
|
||||
temp[i] = [];
|
||||
for (var j = i * size; j < this.list.length; j++) {
|
||||
if (temp[i].length == size) break;
|
||||
temp[i].push(this.list[j]);
|
||||
}
|
||||
}
|
||||
this.list = temp;
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(item) {
|
||||
this.$util.redirectTo('/pages/goods/detail', {
|
||||
goods_id: item.goods_id
|
||||
});
|
||||
},
|
||||
imgError(pageIndex, index) {
|
||||
this.list[pageIndex][index].goods_image = this.$util.getDefaultImage().goods;
|
||||
},
|
||||
showPrice(data) {
|
||||
let price = data.discount_price;
|
||||
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
|
||||
return price;
|
||||
},
|
||||
showMarketPrice(item) {
|
||||
let price = this.showPrice(item);
|
||||
if (item.market_price > 0) {
|
||||
return item.market_price;
|
||||
} else if (item.price > price) {
|
||||
return item.price;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-list {
|
||||
.goods-item {
|
||||
line-height: 1;
|
||||
|
||||
.sale {
|
||||
line-height: 1;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
.goods-name {
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
.sell-out{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
text{
|
||||
color: #fff;
|
||||
font-size: 180rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表横向滚动样式
|
||||
.goods-list.style-1 {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
background-repeat: round;
|
||||
|
||||
.top-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.js-icon {
|
||||
border-radius: 50%;
|
||||
font-size: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 28rpx;
|
||||
margin: 0 10rpx;
|
||||
border: 2rpx solid;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 20rpx;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
overflow: hidden;
|
||||
width: 200rpx;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.goods-img, .goods-img-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 196rpx;
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10rpx;
|
||||
|
||||
&.multi-content {
|
||||
height: 130rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: $font-size-sub;
|
||||
|
||||
&.multi-hidden {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.pro-info {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.discount-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.price-wrap {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-price {
|
||||
margin-left: 10rpx;
|
||||
text-decoration: line-through;
|
||||
flex: 1;
|
||||
line-height: 28rpx;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表横向滚动样式
|
||||
.goods-list.style-2 {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
background-repeat: round;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.top-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
|
||||
.js-icon {
|
||||
border-radius: 50%;
|
||||
font-size: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 28rpx;
|
||||
margin: 0 10rpx;
|
||||
border: 2rpx solid;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 20rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
overflow: hidden;
|
||||
width: 200rpx;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.goods-img, .goods-img-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
padding: 10rpx;
|
||||
|
||||
.goods-name {
|
||||
line-height: 1;
|
||||
|
||||
&.multi-hidden {
|
||||
line-height: 1.3;
|
||||
height: 68rpx;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.pro-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.discount-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.price-wrap {
|
||||
line-height: 1.3;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
color: $base-color;
|
||||
|
||||
&:last-of-type {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-price {
|
||||
margin-left: 10rpx;
|
||||
text-decoration: line-through;
|
||||
flex: 1;
|
||||
line-height: 28rpx;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list.style-3 {
|
||||
background-position: bottom;
|
||||
|
||||
.swiper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 20rpx;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
overflow: hidden;
|
||||
width: 200rpx;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.shadow {
|
||||
// margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.goods-img, .goods-img-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10rpx;
|
||||
|
||||
.pro-info {
|
||||
text-align: center;
|
||||
|
||||
.label-wrap {
|
||||
border-radius: 40rpx;
|
||||
display: inline-block;
|
||||
margin: 10rpx 0;
|
||||
position: relative;
|
||||
padding-left: 52rpx;
|
||||
padding-right: 16rpx;
|
||||
line-height: 1.7;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: -2rpx;
|
||||
left: -2rpx;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
.price-wrap {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
304
components/diy-components/diy-graphic-nav.vue
Normal file
304
components/diy-components/diy-graphic-nav.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<view :style="componentStyle">
|
||||
<block v-if="value.showStyle == 'pageSlide'">
|
||||
<swiper :class="['graphic-nav', 'pageSlide', value.carousel.type]" circular :indicator-dots="false" :style="swiperHeight" @change="swiperChange">
|
||||
<swiper-item class="graphic-nav-wrap"
|
||||
v-for="(numItem, numIndex) in Math.ceil(value.list.length / (value.pageCount * value.rowCount))">
|
||||
<!-- #ifdef MP -->
|
||||
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list"
|
||||
: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 -->
|
||||
<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'"
|
||||
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
|
||||
mode="aspectFill"
|
||||
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', borderRadius: value.aroundRadius * 2 + 'rpx' }"
|
||||
:show-menu-by-longpress="true"/>
|
||||
|
||||
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
|
||||
:value="item.style ? item.style : null"
|
||||
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
|
||||
|
||||
<text class="tag" v-if="item.label.control"
|
||||
:style="{ color: item.label.textColor, backgroundImage: 'linear-gradient(' + item.label.bgColorStart + ',' + item.label.bgColorEnd + ')' }">
|
||||
{{ item.label.text }}
|
||||
</text>
|
||||
</view>
|
||||
<text v-if="value.mode != 'img'" class="graphic-text"
|
||||
:style="{ fontSize: value.font.size * 2 + 'rpx', fontWeight: value.font.weight, color: value.font.color }">
|
||||
{{ item.title }}
|
||||
</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="swiper-dot-box" v-if="isIndicatorDots" :class="value.carousel.type">
|
||||
<view v-for="(numItem, numIndex) in Math.ceil(value.list.length / (value.pageCount * value.rowCount))" :key="numIndex">
|
||||
<view class="swiper-dot" :class="{'active':numIndex==swiperCurrent}"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
<scroll-view v-else :scroll-x="value.showStyle == 'singleSlide'" :class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle ]">
|
||||
<!-- #ifdef MP -->
|
||||
<view class="uni-scroll-view-content">
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list" :key="index" :style="{ width: 100 / value.rowCount + '%' }" @click="redirectTo(item.link)">
|
||||
<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'"
|
||||
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
|
||||
mode="aspectFill"
|
||||
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', borderRadius: value.aroundRadius * 2 + 'rpx' }"
|
||||
:show-menu-by-longpress="true"/>
|
||||
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
|
||||
:value="item.style ? item.style : null"
|
||||
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
|
||||
<text :class="['tag', { alone: value.mode == 'text' }]" v-if="item.label.control"
|
||||
:style="{ color: item.label.textColor, backgroundImage: 'linear-gradient(' + item.label.bgColorStart + ',' + item.label.bgColorEnd + ')' }">
|
||||
{{ item.label.text }}
|
||||
</text>
|
||||
</view>
|
||||
<text v-if="value.mode != 'img'" class="graphic-text" :style="{ fontSize: value.font.size * 2 + 'rpx', fontWeight: value.font.weight, color: value.font.color }">
|
||||
{{ item.title }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
</scroll-view>
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-graphic-nav',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageWidth: '',
|
||||
indicatorDots: false,
|
||||
swiperCurrent: 0
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
computed: {
|
||||
componentStyle() {
|
||||
var css = '';
|
||||
css += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
css += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
css += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament
|
||||
.color :
|
||||
'') + ';';
|
||||
css += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color :
|
||||
'') + ';';
|
||||
return css;
|
||||
},
|
||||
// 滑块容器的高度
|
||||
swiperHeight() {
|
||||
var css = '';
|
||||
var height = 0;
|
||||
if (this.value.mode == 'graphic') {
|
||||
height = (21 + 6 + 14 + 8 + this.value.imageSize) * this.value
|
||||
.pageCount; // 21 = 文字高度，8 = 文字上边距，14 = 上下内边距，8 = 外边距
|
||||
} else if (this.value.mode == 'img') {
|
||||
height = (14 + 8 + this.value.imageSize) * this.value.pageCount; // 14 = 上下内边距，8 = 外边距
|
||||
} else if (this.value.mode == 'text') {
|
||||
height = (21 + 14 + 8) * this.value.pageCount; // 21 = 文字高度，14 = 上下内边距，8 = 外边距
|
||||
}
|
||||
css += 'height:' + height * 2 + 'rpx';
|
||||
return css;
|
||||
},
|
||||
// 是否显示轮播点
|
||||
isIndicatorDots() {
|
||||
var bool = true;
|
||||
bool = this.value.carousel.type == 'hide' || Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount)) == 1 ? false : true;
|
||||
return bool;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
redirectTo(link) {
|
||||
|
||||
if (link.wap_url) {
|
||||
if (this.$util.getCurrRoute() == 'pages/member/index' && !this.storeToken) {
|
||||
this.$refs.login.open(link.wap_url);
|
||||
return;
|
||||
}
|
||||
}
|
||||
console.log(link)
|
||||
this.$util.diyRedirectTo(link);
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
/* 固定显示 */
|
||||
.graphic-nav.fixed-layout>>>.uni-scroll-view-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* 单行滑动 */
|
||||
.graphic-nav.singleSlide>>>.uni-scroll-view-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.graphic-nav.pageSlide>>>.uni-swiper-dots-horizontal {
|
||||
bottom: 0rpx;
|
||||
}
|
||||
|
||||
.graphic-nav.pageSlide.straightLine>>>.uni-swiper-dot {
|
||||
width: 30rpx;
|
||||
border-radius: 0;
|
||||
height: 8rpx;
|
||||
}
|
||||
|
||||
.graphic-nav.pageSlide.circle>>>.uni-swiper-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.graphic-nav {
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.singleSlide {
|
||||
.graphic-nav-item {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.pageSlide {
|
||||
position: relative;
|
||||
|
||||
.graphic-nav-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.graphic-nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 14rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.graphic-text {
|
||||
padding-top: 12rpx;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
&.alone {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.text {
|
||||
|
||||
.graphic-text {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.graphic-img {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 90rpx;
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -24rpx;
|
||||
color: #fff;
|
||||
border-radius: 24rpx;
|
||||
border-bottom-left-radius: 0;
|
||||
transform: scale(0.8);
|
||||
padding: 8rpx 16rpx;
|
||||
line-height: 1;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 50rpx;
|
||||
color: $color-sub;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dot-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: -20rpx;
|
||||
padding-bottom: 8rpx;
|
||||
|
||||
.swiper-dot {
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
margin: 8rpx;
|
||||
|
||||
&.active {
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.straightLine {
|
||||
.swiper-dot {
|
||||
width: 30rpx;
|
||||
border-radius: 0;
|
||||
height: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.circle {
|
||||
.swiper-dot {
|
||||
width: 15rpx;
|
||||
border-radius: 50%;
|
||||
height: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
317
components/diy-components/diy-group.vue
Normal file
317
components/diy-components/diy-group.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<view class="diy-group">
|
||||
<view v-for="(item, index) in diyDataArray" :key="index" :style="item.pageStyle">
|
||||
<view v-if="addonIsExist.store && item.componentName == 'StoreShow'">
|
||||
<!-- 门店展示 -->
|
||||
<diy-store :value="item"></diy-store>
|
||||
</view>
|
||||
|
||||
<template v-if="item.componentName == 'Kefu'">
|
||||
<!-- 客服按钮 -->
|
||||
<diy-kefu :value="item"></diy-kefu>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Form'">
|
||||
<!-- 表单组件 -->
|
||||
<diy-form :value="item"></diy-form>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<template v-if="addonIsExist.store && item.componentName == 'StoreLabel'">
|
||||
<!-- 门店标签 -->
|
||||
<diy-store-label :value="item"></diy-store-label>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Picture'">
|
||||
<!-- 单图组组件 -->
|
||||
<diy-picture :value="item"></diy-picture>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Listmenu'">
|
||||
<!-- 列表按钮组件 -->
|
||||
<diy-listmenu :value="item"></diy-listmenu>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Text'">
|
||||
<!-- 文本 -->
|
||||
<diy-text :value="item"></diy-text>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Notice'">
|
||||
<!-- 公告 -->
|
||||
<diy-notice :value="item"></diy-notice>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'GraphicNav'">
|
||||
<!-- 图文导航 -->
|
||||
<diy-graphic-nav :value="item"></diy-graphic-nav>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'ImageAds'">
|
||||
<!-- 图片广告 -->
|
||||
<diy-img-ads :value="item"></diy-img-ads>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Search'">
|
||||
<!-- 搜索 -->
|
||||
<diy-search :value="item" :topNavColor="topNavColor" :global="diyGlobalData.global" :haveTopCategory="haveTopCategory" :followOfficialAccount="followOfficialAccount"></diy-search>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'RichText'">
|
||||
<!-- 富文本 -->
|
||||
<diy-rich-text :value="item"></diy-rich-text>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'HorzLine'">
|
||||
<!-- 辅助线 -->
|
||||
<diy-horz-line :value="item"></diy-horz-line>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'HorzBlank'">
|
||||
<!-- 辅助空白 -->
|
||||
<diy-horz-blank :value="item"></diy-horz-blank>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Coupon' && addonIsExist.coupon">
|
||||
<!-- 优惠券 -->
|
||||
<diy-coupon :value="item"></diy-coupon>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'GoodsList'">
|
||||
<!-- 商品列表 -->
|
||||
<diy-goods-list :value="item"></diy-goods-list>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'ManyGoodsList'">
|
||||
<!-- 多商品组 -->
|
||||
<diy-many-goods-list :value="item" :global="diyGlobalData.global" :scrollTop="scrollTop"></diy-many-goods-list>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'RubikCube'">
|
||||
<!-- 魔方、橱窗 -->
|
||||
<diy-rubik-cube :value="item"></diy-rubik-cube>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Video'">
|
||||
<!-- 视频 -->
|
||||
<diy-video :value="item"></diy-video>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'Seckill' && addonIsExist.seckill">
|
||||
<!-- 秒杀 -->
|
||||
<diy-seckill :value="item"></diy-seckill>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Pintuan' && addonIsExist.pintuan">
|
||||
<!-- 拼团 -->
|
||||
<diy-pintuan :value="item"></diy-pintuan>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Groupbuy' && addonIsExist.groupbuy">
|
||||
<!-- 团购 -->
|
||||
<diy-groupbuy :value="item"></diy-groupbuy>
|
||||
</template>
|
||||
|
||||
<!-- 拼团返利 -->
|
||||
<template v-if="item.componentName == 'Pinfan' && addonIsExist.pinfan">
|
||||
<diy-pinfan :value="item"></diy-pinfan>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Bargain' && addonIsExist.bargain">
|
||||
<!-- 砍价 -->
|
||||
<diy-bargain :value="item"></diy-bargain>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Presale' && addonIsExist.bargain">
|
||||
<!-- 预售 -->
|
||||
<diy-presale :value="item"></diy-presale>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Notes' && addonIsExist.notes">
|
||||
<!-- 店铺笔记 -->
|
||||
<diy-notes :value="item"></diy-notes>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'FloatBtn'">
|
||||
<!-- 浮动按钮 -->
|
||||
<diy-float-btn :value="item"></diy-float-btn>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'LiveInfo'">
|
||||
<!-- 小程序直播 -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<diy-live :value="item"></diy-live>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'FenxiaoGoodsList'">
|
||||
<!-- 分销商品 -->
|
||||
<diy-fenxiao-goods-list :value="item"></diy-fenxiao-goods-list>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'GoodsRecommend'">
|
||||
<!-- 商品推荐 -->
|
||||
<diy-goods-recommend :value="item"></diy-goods-recommend>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'GoodsBrand'">
|
||||
<!-- 商品品牌 -->
|
||||
<diy-goods-brand :value="item"></diy-goods-brand>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Article'">
|
||||
<!-- 文章 -->
|
||||
<diy-article :value="item"></diy-article>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'MerchList'">
|
||||
<!-- 商户列表 -->
|
||||
<diy-merch-list :value="item"></diy-merch-list>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'MemberInfo'">
|
||||
<!-- 自定义会员中心——会员信息 -->
|
||||
<diy-member-info ref="diyMemberIndex" :value="item" :global="diyGlobalData.global"></diy-member-info>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'MemberMyOrder'">
|
||||
<!-- 自定义会员中心——我的订单 -->
|
||||
<diy-member-my-order ref="diyMemberMyOrder" :value="item"></diy-member-my-order>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'QuickNav'">
|
||||
<!-- 快捷导航 -->
|
||||
<diy-quick-nav :value="item"></diy-quick-nav>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'PaymentQrcode'">
|
||||
<!-- 付款码 -->
|
||||
<diy-payment-qrcode :value="item"></diy-payment-qrcode>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'HotArea'">
|
||||
<!-- 热区 -->
|
||||
<diy-hot-area :value="item"></diy-hot-area>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'FollowOfficialAccount'">
|
||||
<!-- 关注公众号 -->
|
||||
<diy-follow-official-account :value="item"></diy-follow-official-account>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Map'">
|
||||
<!-- 地图组件 -->
|
||||
<diy-map :value="item"></diy-map>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'Audio'">
|
||||
<!-- 音频 -->
|
||||
<diy-audio :value="item"></diy-audio>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<!-- 自定义扩展组件 -->
|
||||
<diy-comp-extend :value="item"></diy-comp-extend>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
diyData: {
|
||||
type: Object
|
||||
},
|
||||
scrollTop: {
|
||||
type: [String, Number],
|
||||
default: '0'
|
||||
},
|
||||
haveTopCategory: {
|
||||
type: Boolean
|
||||
},
|
||||
followOfficialAccount: {
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
diyGlobalData: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.diyGlobalData = JSON.parse(JSON.stringify(this.diyData));
|
||||
},
|
||||
computed: {
|
||||
topNavColor() {
|
||||
var color = '';
|
||||
if (this.diyData.global.topNavBg) {
|
||||
color = 'transparent';
|
||||
if (this.scrollTop > 20) {
|
||||
color = this.diyData.global.topNavColor;
|
||||
} else {
|
||||
color = 'transparent';
|
||||
}
|
||||
} else {
|
||||
color = this.diyData.global.topNavColor;
|
||||
}
|
||||
return color;
|
||||
},
|
||||
// 修改属性样式
|
||||
setPagestyle() {
|
||||
this.diyGlobalData.value.forEach((item, index) => {
|
||||
item.pageStyle = '';
|
||||
// 给每个组件增加位置属性，用于定位，搜索、分类导航等定位
|
||||
item.moduleIndex = index + 1;
|
||||
|
||||
// 特殊处理搜索框 当显示位置为滚动至顶部固定时，只设置背景颜色
|
||||
if (item.componentName == 'Search' && item.positionWay == 'fixed') {
|
||||
// item.pageStyle = 'background-color:' + item.pageBgColor + ';';
|
||||
return false;
|
||||
}
|
||||
|
||||
item.pageStyle += 'background-color:' + item.pageBgColor + ';';
|
||||
if (item.margin) {
|
||||
item.pageStyle += 'padding-top:' + item.margin.top * 2 + 'rpx' + ';';
|
||||
item.pageStyle += 'padding-bottom:' + item.margin.bottom * 2 + 'rpx' + ';';
|
||||
item.pageStyle += 'padding-right:' + item.margin.both * 2 + 'rpx' + ';';
|
||||
item.pageStyle += 'padding-left:' + item.margin.both * 2 + 'rpx' + ';';
|
||||
}
|
||||
});
|
||||
|
||||
return this.diyGlobalData.value;
|
||||
},
|
||||
// 过滤组件的渲染
|
||||
diyDataArray() {
|
||||
let data = [],
|
||||
showModuleData = this.$store.state.diyGroupShowModule ? JSON.parse(this.$store.state
|
||||
.diyGroupShowModule) : '';
|
||||
|
||||
if (showModuleData.length) {
|
||||
if (showModuleData.includes('null')) return [];
|
||||
|
||||
let diyDataArr = this.setPagestyle;
|
||||
diyDataArr.forEach((item, index) => {
|
||||
if (showModuleData.includes(item.componentName)) {
|
||||
data.push(item);
|
||||
}
|
||||
});
|
||||
} else data = this.setPagestyle;
|
||||
return data;
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-group {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
462
components/diy-components/diy-groupbuy.vue
Normal file
462
components/diy-components/diy-groupbuy.vue
Normal file
@@ -0,0 +1,462 @@
|
||||
<template>
|
||||
<x-skeleton :type="skeletonType" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="diy-groupbuy" :class="[value.template, value.style]" :style="warpCss">
|
||||
<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="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)">
|
||||
</image>
|
||||
</view>
|
||||
<view class="content"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.groupbuy_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.groupbuy_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
<button v-if="value.btnStyle.control" :style="{
|
||||
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
|
||||
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
|
||||
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
|
||||
}">
|
||||
{{ value.btnStyle.text }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<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="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
<image class="bg" v-if="value.saleStyle.control" :src="$util.img('public/uniapp/groupbuy/bg.png')" mode="widthFix"/>
|
||||
<view class="num" v-if="value.saleStyle.control" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
已团{{ item.sell_num }}件
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.groupbuy_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.groupbuy_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">¥{{ item.price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</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', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex"
|
||||
@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(dataIndex)"/>
|
||||
<image class="bg" v-if="value.saleStyle.control" :src="$util.img('public/uniapp/groupbuy/bg.png')" mode="widthFix"/>
|
||||
<view class="num" v-if="value.saleStyle.control" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">已团{{ item.sell_num }}件</view>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.groupbuy_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.groupbuy_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">¥{{ item.price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-groupbuy',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
skeletonType: '',
|
||||
skeletonConfig: {},
|
||||
list: [],
|
||||
page: 1
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initSkeleton();
|
||||
this.getData();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
// 商品项样式
|
||||
goodsItemCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.elementBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if (this.value.ornament.type == 'shadow') {
|
||||
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color + ';';
|
||||
}
|
||||
if (this.value.ornament.type == 'stroke') {
|
||||
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
|
||||
}
|
||||
const screenWidth = uni.getSystemInfoSync().windowWidth;
|
||||
if (this.value.template == 'horizontal-slide') {
|
||||
var width = '';
|
||||
if (this.value.slideMode == 'scroll' && this.value.goodsMarginType == 'diy') width = this.rpxUpPx(this
|
||||
.value.goodsMarginNum * 2);
|
||||
else width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value
|
||||
.margin.both * 2) * 2] / 6;
|
||||
obj += 'margin-left:' + width + 'px;';
|
||||
obj += 'margin-right:' + width + 'px;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
swiperHeight() {
|
||||
if (this.value.nameLineMode == 'multiple') return this.value.ornament.type == 'shadow' ? '404rpx' :
|
||||
'392rpx';
|
||||
return this.value.ornament.type == 'shadow' ? '376rpx' : '368rpx';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initSkeleton() {
|
||||
if (this.value.template == 'row1-of1') {
|
||||
|
||||
// 单列 风格
|
||||
this.skeletonType = 'list';
|
||||
this.skeletonConfig = {
|
||||
textRows: 2
|
||||
};
|
||||
|
||||
} else if (this.value.template == 'horizontal-slide') {
|
||||
|
||||
// 横向滑动 风格
|
||||
this.skeletonType = 'waterfall';
|
||||
this.skeletonConfig = {
|
||||
gridRows: 1,
|
||||
gridColumns: 3,
|
||||
headHeight: '200rpx',
|
||||
textRows: 2,
|
||||
textWidth: ['100%', '80%']
|
||||
};
|
||||
|
||||
}
|
||||
},
|
||||
rpxUpPx(res) {
|
||||
const screenWidth = uni.getSystemInfoSync().windowWidth;
|
||||
var data = (screenWidth * parseInt(res)) / 750;
|
||||
return Math.floor(data);
|
||||
},
|
||||
getData() {
|
||||
var data = {
|
||||
num: this.value.count
|
||||
};
|
||||
if (this.value.sources == 'diy') {
|
||||
data.num = 0;
|
||||
data.goods_id_arr = this.value.goodsId.toString();
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/groupbuy/api/goods/lists',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.list = res.data;
|
||||
|
||||
// 切屏滚动，每页显示固定数量
|
||||
if (this.value.template == 'horizontal-slide' && this.value.slideMode == 'slide') {
|
||||
let size = 3;
|
||||
let temp = [];
|
||||
this.page = Math.ceil(this.list.length / size);
|
||||
for (var i = 0; i < this.page; i++) {
|
||||
temp[i] = [];
|
||||
for (var j = i * size; j < this.list.length; j++) {
|
||||
if (temp[i].length == size) break;
|
||||
temp[i].push(this.list[j]);
|
||||
}
|
||||
}
|
||||
this.list = temp;
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(e) {
|
||||
this.$util.redirectTo('/pages_promotion/groupbuy/detail', {
|
||||
groupbuy_id: e.groupbuy_id
|
||||
});
|
||||
},
|
||||
imageError(index) {
|
||||
this.list[index].goods_image = this.$util.getDefaultImage().goods;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.diy-groupbuy {
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 16rpx;
|
||||
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
margin-top: 6rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
position: relative;
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 20rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
background-color: $base-color;
|
||||
color: #fff;
|
||||
min-width: 112rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-slide {
|
||||
.scroll {
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 20rpx;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.item.shadow {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 180rpx;
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
padding-left: 20rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
color: #ffffff;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&.multi-content {
|
||||
height: 158rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
|
||||
&.multi-hidden {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
margin-top: auto;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: $font-size-tag;
|
||||
color: $color-tip;
|
||||
line-height: 1;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
40
components/diy-components/diy-horz-blank.vue
Normal file
40
components/diy-components/diy-horz-blank.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<view :style="horzBlankGaugeWrap"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 辅助空白
|
||||
export default {
|
||||
name: 'diy-horz-blank',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
computed: {
|
||||
horzBlankGaugeWrap: function() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
obj += 'height:' + this.value.height * 2 + 'rpx';
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
25
components/diy-components/diy-horz-line.vue
Normal file
25
components/diy-components/diy-horz-line.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<view :style="{ borderTop: '2rpx ' + value.borderStyle + ' ' + value.color }"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 辅助线
|
||||
export default {
|
||||
name: 'diy-horz-line',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
73
components/diy-components/diy-hot-area.vue
Normal file
73
components/diy-components/diy-hot-area.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view :style="hotAreaWarp" class="hot-area-box">
|
||||
<view class="simple-graph-wrap">
|
||||
<image :style="{ height: value.imgHeight }" :src="$util.img(value.imageUrl)" mode="widthFix" :show-menu-by-longpress="true"/>
|
||||
<!-- 热区功能 -->
|
||||
<view class="heat-map" v-for="(mapItem, mapIndex) in value.heatMapData" :key="mapIndex" :style="{
|
||||
width: mapItem.width + '%',
|
||||
height: mapItem.height + '%',
|
||||
left: mapItem.left + '%',
|
||||
top: mapItem.top + '%'
|
||||
}" @click.stop="$util.diyRedirectTo(mapItem.link)"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-hot-area',
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
computed: {
|
||||
hotAreaWarp: function() {
|
||||
var obj = '';
|
||||
obj = 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hot-area-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.simple-graph-wrap {
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heat-map {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
components/diy-components/diy-icon.vue
Normal file
84
components/diy-components/diy-icon.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<view class="diy-icon" :style="iconBgStyle">
|
||||
<text class="js-icon" :class="iconClass" :style="iconStyle"></text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-icon',
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
value: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconClass(){
|
||||
var _class = ' ' + this.icon;
|
||||
if (this.value && this.value.iconColor.length > 1) _class += ' gradient';
|
||||
return _class;
|
||||
},
|
||||
iconBgStyle(){
|
||||
if (!this.value) return {};
|
||||
|
||||
var style = {
|
||||
'border-radius': this.value.bgRadius + '%',
|
||||
'background': ''
|
||||
};
|
||||
|
||||
if (this.value.iconBgImg) style['background'] += 'url('+ this.$util.img(this.value.iconBgImg) +') no-repeat bottom / contain'
|
||||
if (this.value.iconBgColor.length) {
|
||||
if (style.background) style.background += ',';
|
||||
if (this.value.iconBgColor.length == 1) {
|
||||
style.background += this.value.iconBgColor[0];
|
||||
} else {
|
||||
style['background'] += 'linear-gradient('+ this.value.iconBgColorDeg +'deg, '+ this.value.iconBgColor.join(',') +')';
|
||||
}
|
||||
}
|
||||
return this.$util.objToStyle(style);
|
||||
},
|
||||
iconStyle(){
|
||||
if (!this.value) return {};
|
||||
|
||||
var style = {
|
||||
'font-size': this.value.fontSize + '%'
|
||||
}
|
||||
if (this.value.iconColor.length == 1) {
|
||||
style.color = this.value.iconColor[0];
|
||||
} else {
|
||||
style['background'] = 'linear-gradient('+ this.value.iconColorDeg +'deg, '+ this.value.iconColor.join(',') +')';
|
||||
}
|
||||
return this.$util.objToStyle(style);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 100%;
|
||||
color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.js-icon {
|
||||
font-size: 50%;
|
||||
line-height:1;
|
||||
padding: 1rpx;
|
||||
&.gradient {
|
||||
-webkit-background-clip:text!important;
|
||||
-webkit-text-fill-color:transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
301
components/diy-components/diy-img-ads.vue
Normal file
301
components/diy-components/diy-img-ads.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<view class="single-graph">
|
||||
<view :style="imgAdsMarginWarp" class="swiper-box">
|
||||
<block v-if="imgAdsValue.list.length == 1">
|
||||
<view class="simple-graph-wrap" :style="imgAdsSwiper" @click="$util.diyRedirectTo(imgAdsValue.list[0].link)">
|
||||
<image :style="{ height: imgAdsValue.list[0].imgHeight }" :src="$util.img(imgAdsValue.list[0].imageUrl)" mode="widthFix" :show-menu-by-longpress="true"/>
|
||||
</view>
|
||||
</block>
|
||||
<swiper v-else class="swiper" :style="{ height: swiperHeight }" :class="{
|
||||
'swiper-left': imgAdsValue.indicatorLocation == 'left',
|
||||
'swiper-right': imgAdsValue.indicatorLocation == 'right',
|
||||
'ns-indicator-dots': imgAdsValue.carouselStyle == 'line'
|
||||
}" :autoplay="true" :interval="imgAdsValue.interval" circular="true" :indicator-dots="isDots"
|
||||
indicator-color="rgba(130, 130, 130, .5)" :indicator-active-color="imgAdsValue.indicatorColor"
|
||||
@change="swiperChange">
|
||||
<swiper-item class="swiper-item" :style="imgAdsSwiper" v-for="(item, index) in imgAdsValue.list" :key="index" v-if="item.imageUrl" @click="$util.diyRedirectTo(item.link)">
|
||||
<view class="item" :style="imgAdsSwiper + 'height: ' + item.imgHeight">
|
||||
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" :show-menu-by-longpress="true"/>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view v-if="imgAdsValue.list.length > 1 && value.indicatorIsShow" :class="[
|
||||
'swiper-dot-box',
|
||||
{ straightLine: imgAdsValue.carouselStyle == 'line' },
|
||||
{ 'swiper-left': imgAdsValue.indicatorLocation == 'left' },
|
||||
{ 'swiper-right': imgAdsValue.indicatorLocation == 'right' }
|
||||
]">
|
||||
<view v-for="(numItem, numIndex) in imgAdsValue.list.length" :key="numIndex" :class="['swiper-dot', { active: numIndex == swiperIndex }]" :style="[numIndex == swiperIndex && { backgroundColor: imgAdsValue.indicatorColor }]"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-img-ads',
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isDots: true,
|
||||
swiperHeight: 0,
|
||||
imgAdsValue: null, // 深拷贝一遍数据，防止动态计算图片展示尺寸的时候，影响到父级的数据，导致二次渲染的时候，数据错误
|
||||
swiperIndex: 0
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.calcSingleRow();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
computed: {
|
||||
imgAdsMarginWarp: function() {
|
||||
var obj = '';
|
||||
obj = 'background-color:' + this.value.componentBgColor + ';';
|
||||
return obj;
|
||||
},
|
||||
imgAdsSwiper: function() {
|
||||
var obj = '';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
singleGraphBg: function() {
|
||||
var imgArr = [];
|
||||
for (let i = 0; i < this.imgAdsValue.list.length; i++) {
|
||||
let item = this.imgAdsValue.list[i];
|
||||
imgArr[i] = parseFloat(item.imgHeight);
|
||||
}
|
||||
imgArr.sort(function(a, b) {
|
||||
return b - a;
|
||||
});
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.imgAdsValue.backgroundColor + ';';
|
||||
obj += 'height:' + imgArr[0] * (this.imgAdsValue.backgroundHeight / 100) * 2 + 'rpx;';
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
swiperChange(e) {
|
||||
this.swiperIndex = e.detail.current;
|
||||
},
|
||||
calcSingleRow() {
|
||||
let minHeight = 0;
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
// 深拷贝一层数据，防止数据更改越权
|
||||
this.imgAdsValue = JSON.parse(JSON.stringify(this.value));
|
||||
this.imgAdsValue.list.forEach((item, index) => {
|
||||
var ratio = item.imgHeight / item.imgWidth;
|
||||
item.imgWidth = systemInfo.windowWidth;
|
||||
item.imgWidth -= this.value.margin.both * 2;
|
||||
item.imgHeight = item.imgWidth * ratio;
|
||||
|
||||
// 获取最大高度 if (maxHeight == 0 || maxHeight < item.imgHeight) maxHeight = item.imgHeight;
|
||||
if (minHeight == 0 || minHeight > item.imgHeight) minHeight = item.imgHeight;
|
||||
});
|
||||
|
||||
this.imgAdsValue.list.forEach((item, index) => {
|
||||
item.imgHeight = minHeight + 'px';
|
||||
this.swiperHeight = minHeight + 'px';
|
||||
});
|
||||
this.imgAdsValue.indicatorColor = this.imgAdsValue.indicatorColor || '#fff';
|
||||
|
||||
if (this.value.indicatorIsShow === undefined) {
|
||||
this.value.indicatorIsShow = true; // 控制指示点是否展示
|
||||
}
|
||||
|
||||
// 是否显示指示器
|
||||
if (this.imgAdsValue.list.length <= 1) {
|
||||
this.isDots = false;
|
||||
}
|
||||
|
||||
// #ifdef H5
|
||||
this.isDots = this.value.indicatorIsShow;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.isDots = false;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.single-graph {
|
||||
width: 100%;
|
||||
line-height: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.simple-graph-wrap {
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heat-map {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.item.active text {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: #ffffff;
|
||||
font-size: $font-size-tag;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
line-height: 40rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding: 0 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
// position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.heat-map {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dot-box {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 40rpx 8rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.swiper-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&.swiper-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.swiper-dot {
|
||||
background-color: #b2b2b2;
|
||||
width: 15rpx;
|
||||
border-radius: 50%;
|
||||
height: 15rpx;
|
||||
margin: 8rpx;
|
||||
|
||||
&.active {
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.straightLine {
|
||||
.swiper-dot {
|
||||
width: 18rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 4rpx;
|
||||
|
||||
&.active {
|
||||
width: 36rpx;
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
/deep/.uni-scroll-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper /deep/ .uni-swiper-dots-horizontal {
|
||||
bottom: 25rpx;
|
||||
}
|
||||
|
||||
.swiper-left /deep/ .uni-swiper-dots-horizontal {
|
||||
left: 40rpx;
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.swiper-right /deep/ .uni-swiper-dots-horizontal {
|
||||
right: 40rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.carousel-angle /deep/ .uni-swiper-dots-horizontal .uni-swiper-dot {
|
||||
width: 24rpx;
|
||||
border-radius: 0;
|
||||
height: 8rpx;
|
||||
}
|
||||
|
||||
.swiper.ns-indicator-dots /deep/ .uni-swiper-dot {
|
||||
width: 18rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.swiper.ns-indicator-dots /deep/ .uni-swiper-dot-active {
|
||||
width: 36rpx;
|
||||
}
|
||||
</style>
|
||||
830
components/diy-components/diy-index-page.vue
Normal file
830
components/diy-components/diy-index-page.vue
Normal file
@@ -0,0 +1,830 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="bg" :style="warpCss">
|
||||
<view class="index-page-content">
|
||||
<view class="nav-top-category" :style="categoryCss">
|
||||
<scroll-view v-if="value" scroll-with-animation class="diyIndex" scroll-x="true"
|
||||
:scroll-into-view="'a' + pageIndex"
|
||||
:style="{ background: value.backgroundColor ? value.backgroundColor : '', width: 'calc(100% - 48rpx)' }"
|
||||
@touchmove.stop>
|
||||
<view class="item" :id="'a' + index" v-for="(item, index) in cateList" :key="index"
|
||||
@click="changePageIndex(index)" :class="{ fill: value.styleType == 'fill' }"
|
||||
:style="{ background: index == pageIndex && value.styleType == 'fill' ? value.selectColor : '' }">
|
||||
<view class="text-con" :class="index == pageIndex ? 'active' : ''" :style="{
|
||||
color: index == pageIndex ? '' : value.noColor
|
||||
}" v-if="value.styleType == 'fill'">
|
||||
{{ item.short_name ? item.short_name : item.category_name }}
|
||||
</view>
|
||||
<view class="text-con" :class="index == pageIndex ? 'active' : ''" :style="{ color: index == pageIndex ? value.selectColor : value.noColor }" v-else>
|
||||
{{ item.short_name ? item.short_name : item.category_name }}
|
||||
</view>
|
||||
<view class="color-base-bg line" v-if="index == pageIndex && value.styleType != 'fill'" :style="{ background: value.selectColor ? value.selectColor + '!important' : 'rgba(0,0,0,0)' + '!important' }">
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<text class="iconfont icon-unfold unfold-arrows" :style="{ color: value.moreColor }" @click="unfoldMenu"></text>
|
||||
</view>
|
||||
<uni-popup ref="navTopCategoryPop" type="top" :top="uniPopTop">
|
||||
<view class="nav-topcategory-pop">
|
||||
<text v-for="(item, index) in cateList" :key="index" :class="['category-item', { 'color-base-text color-base-border active': pageIndex == index }]" @click="changePageIndex(index)">
|
||||
{{ item.short_name ? item.short_name : item.category_name }}
|
||||
</text>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<view class="nav_top_category-fill" :style="{ height: moduleHeight }"></view>
|
||||
<block v-if="pageIndex == 0">
|
||||
<slot name="components"></slot>
|
||||
<slot></slot>
|
||||
</block>
|
||||
<block v-else>
|
||||
<slot name="components"></slot>
|
||||
<view class="index-category-box">
|
||||
<view class="category-goods" v-show="!isloading">
|
||||
<mescroll-uni :top="uniPopTop" ref="mescroll" @getData="getGoodsList" :background="'url(' + $util.img(bgUrl) + ') 0px -50px / 100% no-repeat'" :paddingBoth="'30rpx'" @touchmove.prevent.stop>
|
||||
<block slot="list">
|
||||
<!-- 二级分类 -->
|
||||
<view class="twoCategorylist" v-if="twoCategorylist != 'undefined' && twoCategorylist && twoCategorylist.length > 0">
|
||||
<view class="twoCategory min" v-if="twoCategorylist.length <= 5">
|
||||
<view class="twoCategory-page">
|
||||
<view class="swiper-item" v-for="(item, index) in twoCategorylist" :key="index" @click="toCateGoodsList(item.category_id_2, 2)">
|
||||
<view class="item-box">
|
||||
<image :src="$util.img(item.image)" v-if="item.image" mode="aspectFill"/>
|
||||
<image :src="$util.getDefaultImage().goods" v-else mode="aspectFill"/>
|
||||
<view>{{ item.category_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="twoCategory base" v-if="twoCategorylist.length > 5 && twoCategorylist.length <= 10">
|
||||
<view class="twoCategory-page">
|
||||
<view class="swiper-item" v-for="(item, index) in twoCategorylist" :key="index" @click="toCateGoodsList(item.category_id_2, 2)">
|
||||
<view class="item-box">
|
||||
<image :src="$util.img(item.image)" v-if="item.image" mode="aspectFill"/>
|
||||
<image :src="$util.getDefaultImage().goods" v-else mode="aspectFill"/>
|
||||
<view>{{ item.category_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<swiper class="twoCategory big" :duration="500" v-if="twoCategorylist.length > 10" @change="swiperTocategoryChange">
|
||||
<swiper-item class="twoCategory-page" v-for="page in maxPage" :key="page">
|
||||
<view class="swiper-item" v-for="(item, index) in twoCategorylist" :key="index" v-if="index >= (page - 1) * 10 && index < page * 10" @click="toCateGoodsList(item.category_id_2, 2)">
|
||||
<view class="item-box">
|
||||
<image :src="item.image" mode="aspectFill"/>
|
||||
<view>{{ item.category_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="dot-box">
|
||||
<view class="dot-item" v-for="page in maxPage" v-if="maxPage > 1" :key="page" :class="twoCategorylistId == page - 1 ? 'active color-base-bg' : ''"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分类广告 -->
|
||||
<image class="category_adv" v-if="cateList[pageIndex].image_adv" :src="$util.img(cateList[pageIndex].image_adv)" mode="widthFix"/>
|
||||
|
||||
<view class="goods-list double-column" v-if="goodsList[pageIndex].list.length">
|
||||
<view class="goods-item" v-for="(item, index) in goodsList[pageIndex].list" :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="value.goodsTag == 'default' && goodsTag(item) != ''">{{ goodsTag(item) }}</view>
|
||||
<view class="goods-tag-img" v-if="value.goodsTag == 'diy'">
|
||||
<image :src="$util.img(value.tagImg.imageUrl)"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
<view class="name-wrap">
|
||||
<view class="goods-name">{{ item.goods_name }}</view>
|
||||
</view>
|
||||
<view class="lineheight-clear">
|
||||
<view class="discount-price">
|
||||
<text class="unit color-base-text font-size-tag">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text class="price color-base-text font-size-toolbar">{{ showPrice(item) }}</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"/>
|
||||
</view>
|
||||
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
|
||||
<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pro-info">
|
||||
<view class="delete-price font-size-activity-tag color-tip" v-if="showMarketPrice(item)">
|
||||
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text>{{ showMarketPrice(item) }}</text>
|
||||
</view>
|
||||
<view class="sale font-size-activity-tag color-tip">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!isloading && goodsList[pageIndex].list.length == 0">
|
||||
<ns-empty text="该分类下暂无商品" :isIndex="false"></ns-empty>
|
||||
</view>
|
||||
</block>
|
||||
</mescroll-uni>
|
||||
|
||||
<!-- <ns-empty v-else-if="!isloading" :isIndex="false" text="该分类下暂无商品"></ns-empty> -->
|
||||
</view>
|
||||
<view class="loading" v-show="isloading"><ns-loading ref="loading"></ns-loading></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsLoading from '@/components/ns-loading/ns-loading.vue';
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
},
|
||||
bgUrl: {
|
||||
type: String
|
||||
},
|
||||
scrollTop: {
|
||||
type: [String, Number],
|
||||
default: '0'
|
||||
},
|
||||
diyGlobal: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
components: {
|
||||
nsLoading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageIndex: 0, //当前选中分类id
|
||||
cateList: [{
|
||||
//header分类
|
||||
category_name: '首页'
|
||||
}],
|
||||
twoCategorylist: [], //二级分类
|
||||
twoCategorylistId: 0, //二级分类所在的swiper
|
||||
goodsList: {},
|
||||
isloading: true,
|
||||
top: 0,
|
||||
isUnfold: true, //是否展开菜单
|
||||
moduleHeight: '' //组件高度
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
obj += (this.bgUrl ? 'background:' + 'url(' + this.$util.img(this.bgUrl) + ') no-repeat 0 0/100%' : '') + ';';
|
||||
return obj;
|
||||
},
|
||||
categoryCss() {
|
||||
var obj = '';
|
||||
obj += 'top:' + this.fixedTop + ';';
|
||||
// obj += 'background-color:' + (this.value.componentBgColor || this.value.pageBgColor) + ';';
|
||||
obj += 'background-color:' + this.topNavColor + ';';
|
||||
return obj;
|
||||
},
|
||||
maxPage() {
|
||||
let num = 0;
|
||||
if (this.twoCategorylist && this.twoCategorylist.length) {
|
||||
num = Math.ceil(this.twoCategorylist.length / 10);
|
||||
}
|
||||
return num;
|
||||
},
|
||||
type() {
|
||||
if (this.value) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
topNavColor() {
|
||||
var color = this.value.componentBgColor || this.value.pageBgColor;
|
||||
if (this.diyGlobal.topNavBg && this.scrollTop > 20) color = this.diyGlobal.topNavColor;
|
||||
return color;
|
||||
},
|
||||
fixedTop() {
|
||||
let diyPositionObj = this.$store.state.diyGroupPositionObj;
|
||||
let data = 0;
|
||||
if (diyPositionObj.diySearch && diyPositionObj.diyIndexPage && diyPositionObj.nsNavbar) {
|
||||
if (diyPositionObj.diySearch.moduleIndex > diyPositionObj.diyIndexPage.moduleIndex) data =
|
||||
diyPositionObj.nsNavbar.originalVal + 'px';
|
||||
else data = diyPositionObj.nsNavbar.originalVal + diyPositionObj.diySearch.originalVal + 'px';
|
||||
} else if (diyPositionObj.diyIndexPage && diyPositionObj.nsNavbar) {
|
||||
data = diyPositionObj.nsNavbar.originalVal + 'px';
|
||||
}
|
||||
return data;
|
||||
},
|
||||
// 分类导航展开菜单的位置
|
||||
uniPopTop() {
|
||||
let diyPositionObj = this.$store.state.diyGroupPositionObj;
|
||||
let data = '0';
|
||||
|
||||
if (this.fixedTop && diyPositionObj.diyIndexPage)
|
||||
data = Number.parseFloat(this.fixedTop) + diyPositionObj.diyIndexPage.originalVal + 'px';
|
||||
return data;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.getCategoryList();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getCategoryList();
|
||||
setTimeout(() => {
|
||||
// 获取组件的高度，默认高度为45（45是在375屏幕上的高度）
|
||||
const query = uni.createSelectorQuery();
|
||||
// #ifdef H5
|
||||
let cssSelect = '.page-header .u-navbar';
|
||||
this.top = 100;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP
|
||||
let cssSelect = '.page-header >>> .u-navbar';
|
||||
this.top = 20;
|
||||
// #endif
|
||||
|
||||
query
|
||||
.select(cssSelect)
|
||||
.boundingClientRect(data => {
|
||||
let height;
|
||||
if (this.diyGlobal.navBarSwitch) {
|
||||
height = data ? data.height : 45;
|
||||
} else {
|
||||
height = data ? data.height : 0;
|
||||
}
|
||||
|
||||
// #ifdef H5
|
||||
this.top += height * 2;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP
|
||||
this.top += height;
|
||||
// #endif
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
|
||||
this.setModuleLocatinoFn();
|
||||
},
|
||||
methods: {
|
||||
initPageIndex() {
|
||||
this.pageIndex = 0;
|
||||
this.showModuleFn();
|
||||
},
|
||||
//请求分类列表
|
||||
getCategoryList() {
|
||||
let url = '/api/goodscategory/tree';
|
||||
let data = {
|
||||
level: 3
|
||||
};
|
||||
this.$api.sendRequest({
|
||||
url: url,
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
let arr = [];
|
||||
let obj = {
|
||||
list: []
|
||||
};
|
||||
obj.category_name = this.value.title ? this.value.title : '首页';
|
||||
arr.push(obj);
|
||||
this.cateList = arr.concat(res.data);
|
||||
Object.keys(this.cateList).forEach((key, index) => {
|
||||
this.goodsList[key] = {
|
||||
page: 1,
|
||||
list: []
|
||||
};
|
||||
});
|
||||
this.twoCategorylist = this.cateList[this.pageIndex].child_list;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//修改当前页面id
|
||||
changePageIndex(e) {
|
||||
this.isloading = true;
|
||||
this.pageIndex = e;
|
||||
this.showModuleFn();
|
||||
if (e == 0) return;
|
||||
this.twoCategorylist = this.cateList[this.pageIndex].child_list;
|
||||
if (this.cateList[this.pageIndex].child_list) {
|
||||
this.twoCategorylist = this.cateList[this.pageIndex].child_list;
|
||||
this.twoCategorylist.forEach(v => {
|
||||
if (v.image) {
|
||||
v.image = this.$util.img(v.image);
|
||||
} else {
|
||||
v.image = this.$util.getDefaultImage().goods;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.twoCategorylist = false;
|
||||
}
|
||||
|
||||
if (this.$refs.mescroll) {
|
||||
this.$refs.mescroll.refresh();
|
||||
this.$refs.mescroll.myScrollTo(0);
|
||||
}
|
||||
},
|
||||
|
||||
//监听二级分类 页面切换
|
||||
swiperTocategoryChange(e) {
|
||||
this.twoCategorylistId = e.detail.current;
|
||||
},
|
||||
|
||||
toDetail(item) {
|
||||
this.$util.redirectTo('/pages/goods/detail', {
|
||||
goods_id: item.goods_id
|
||||
});
|
||||
},
|
||||
getGoodsList(mescroll) {
|
||||
let id = this.pageIndex;
|
||||
var data = {
|
||||
page: mescroll.num,
|
||||
page_size: mescroll.size
|
||||
};
|
||||
data.category_id = this.cateList[this.pageIndex].category_id_1;
|
||||
data.category_level = 1;
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goodssku/page',
|
||||
data: data,
|
||||
success: res => {
|
||||
this.isloading = false;
|
||||
let newArr = [];
|
||||
let msg = res.message;
|
||||
if (res.code == 0 && res.data) {
|
||||
this.count = res.data.count;
|
||||
newArr = res.data.list;
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
});
|
||||
}
|
||||
|
||||
mescroll.endSuccess(newArr.length);
|
||||
//设置列表数据
|
||||
if (mescroll.num == 1) this.goodsList[id].list = []; //如果是第一页需手动制空列表
|
||||
this.goodsList[id].list = this.goodsList[id].list.concat(newArr); //追加新数据
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
|
||||
this.$forceUpdate();
|
||||
}
|
||||
});
|
||||
},
|
||||
toCateGoodsList(e, f) {
|
||||
this.$util.redirectTo('/pages/goods/list', {
|
||||
category_id: e,
|
||||
category_level: f
|
||||
});
|
||||
},
|
||||
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;
|
||||
},
|
||||
showPrice(data) {
|
||||
let price = data.discount_price;
|
||||
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
|
||||
return price;
|
||||
},
|
||||
showMarketPrice(item) {
|
||||
if (item.market_price_show) {
|
||||
let price = this.showPrice(item);
|
||||
if (item.market_price > 0) {
|
||||
return item.market_price;
|
||||
} else if (parseFloat(item.price) > parseFloat(price)) {
|
||||
return item.price;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
},
|
||||
goodsTag(data) {
|
||||
return data.label_name || '';
|
||||
},
|
||||
// 控制菜单展开关闭
|
||||
unfoldMenu() {
|
||||
if (this.isUnfold) this.$refs.navTopCategoryPop.open();
|
||||
else this.$refs.navTopCategoryPop.close();
|
||||
this.isUnfold = !this.isUnfold;
|
||||
},
|
||||
// 向vuex中的diyIndexPositionObj增加分类导航组件定位位置
|
||||
setModuleLocatinoFn() {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.nav-top-category')
|
||||
.boundingClientRect(data => {
|
||||
let diyIndexPage = {
|
||||
originalVal: data.height || 0, //自身高度 px
|
||||
moduleIndex: this.value.moduleIndex //组件在diy-group的位置
|
||||
};
|
||||
this.moduleHeight = (data.height || 0) + 'px';
|
||||
this.$store.commit('setDiyGroupPositionObj', {
|
||||
diyIndexPage: diyIndexPage
|
||||
});
|
||||
}).exec();
|
||||
},
|
||||
showModuleFn() {
|
||||
let searchModule = this.$root.diyData.value.filter((item, index) => {
|
||||
return item.componentName == 'Search';
|
||||
});
|
||||
// setDiyGroupShowModule值为【】表示显示所有组件,为【‘null’】则什么组件也不显示
|
||||
if (this.pageIndex == 0) this.$store.commit('setDiyGroupShowModule', JSON.stringify([]));
|
||||
else {
|
||||
if (searchModule[0].positionWay == 'fixed') this.$store.commit('setDiyGroupShowModule', JSON.stringify(
|
||||
['Search']));
|
||||
else this.$store.commit('setDiyGroupShowModule', JSON.stringify(['null']));
|
||||
}
|
||||
// 特殊处理，切换分类导航导致页面无法上下滚动
|
||||
// #ifdef H5
|
||||
if (this.pageIndex == 0) {
|
||||
// 标记当前页使用了mescroll (需延时,确保page已切换)
|
||||
setTimeout(function() {
|
||||
let uniPageDom = document.getElementsByTagName('uni-page')[0];
|
||||
uniPageDom && uniPageDom.removeAttribute('use_mescroll');
|
||||
}, 30);
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav-top-category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
transition: background 0.3s;
|
||||
width: 100%;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.text-fiexd {
|
||||
.text-con {
|
||||
line-height: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.unfold-arrows {
|
||||
position: relative;
|
||||
margin-left: 4rpx;
|
||||
padding-left: 16rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-topcategory-pop {
|
||||
padding: 0 10rpx 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: #fff;
|
||||
|
||||
.category-item {
|
||||
padding: 0 30rpx;
|
||||
height: 60rpx;
|
||||
text-align: center;
|
||||
line-height: 56rpx;
|
||||
border-radius: 40rpx;
|
||||
background-color: #f0f0f0;
|
||||
margin: 20rpx 10rpx 0;
|
||||
font-size: 24rpx;
|
||||
border: 2rpx solid transparent;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.active {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.diyIndex {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
white-space: nowrap;
|
||||
padding: 20rpx 0 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.widthAuto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
margin-right: 40rpx;
|
||||
display: inline-block;
|
||||
line-height: 80rpx;
|
||||
font-size: $font-size-base;
|
||||
text-align: center;
|
||||
|
||||
.text-con {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
&.active {
|
||||
font-size: $font-size-base;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.text-con.active {
|
||||
font-size: $font-size-base;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
left: calc(50% - 14rpx);
|
||||
width: 28rpx;
|
||||
height: 5rpx;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
|
||||
&.fill {
|
||||
border-radius: 50rpx;
|
||||
padding: 0 10rpx;
|
||||
|
||||
.text-con.active {
|
||||
font-size: $font-size-base;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-page-box {
|
||||
width: 100%;
|
||||
height: calc(100vh - 288rpx);
|
||||
}
|
||||
|
||||
.index-page-content {
|
||||
width: 100%;
|
||||
// height: calc(100vh - 144px);
|
||||
}
|
||||
|
||||
.index-category-box.active {
|
||||
padding-bottom: 160rpx;
|
||||
padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.index-category-box {
|
||||
width: 100%;
|
||||
padding-bottom: 110rpx;
|
||||
padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
|
||||
|
||||
.twoCategorylist {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.twoCategory.min {
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.twoCategory.big {
|
||||
height: 340rpx;
|
||||
}
|
||||
|
||||
.twoCategory {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 15rpx;
|
||||
overflow: hidden;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.twoCategory-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
display: inline-block;
|
||||
margin-right: calc((100% - 120rpx * 5) / 4);
|
||||
overflow: hidden;
|
||||
|
||||
.item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
width: 100%;
|
||||
font-size: 22rpx;
|
||||
line-height: 1;
|
||||
margin-top: 10rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-item:nth-child(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.swiper-item:nth-child(10n + 6) {
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.dot-box {
|
||||
width: calc(100% - 40rpx);
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
left: 20rpx;
|
||||
background: rgba($color: #000000, $alpha: 0);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.dot-item {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #cccccc;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.dot-item.active {
|
||||
width: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.category_adv {
|
||||
width: 100%;
|
||||
margin: 20rpx 0;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.category-goods {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
|
||||
/deep/.uni-scroll-view::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.goods-list.double-column {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: $margin-updown;
|
||||
|
||||
.goods-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
flex-basis: 48%;
|
||||
max-width: calc((100% - 30rpx) / 2);
|
||||
margin-right: $margin-both;
|
||||
margin-bottom: $margin-updown;
|
||||
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;
|
||||
|
||||
.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>
|
||||
71
components/diy-components/diy-kefu.vue
Normal file
71
components/diy-components/diy-kefu.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="diy-kefu" :style="style">
|
||||
<view class="fui-list-group merchgroup" v-for="(item,index) in value.list">
|
||||
<view class="fui-list jump" v-if="index == 0">
|
||||
<view class="fui-list-media">
|
||||
<image class="round" :src="$util.img(item.imageUrl)" style="border-radius:6rpx"></image>
|
||||
</view>
|
||||
<view class="fui-list-inner" >
|
||||
<view class="title" style="color: ;height: 75rpx;">
|
||||
<text style="font-weight:600" :style="{color:item.textColor}">{{item.title}}</text>
|
||||
<view class="subtitle" style="font-size:24rpx" :style="{color:item.textColor}">{{item.desc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-remark jump" style="padding-right: 20rpx; text-align: center; line-height: 140rpx;">
|
||||
<span style="font-size:24rpx;padding: 14rpx 18rpx;border-radius:8rpx" :style="{background:item.BtBgColor,color:item.BtColor}" @click="previewSqs()">立即添加</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-picture',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.getDataList();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
// this.getDataList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
var css = '';
|
||||
css += 'background-color:' + this.value.contentBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return css;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewSqs(){
|
||||
var img = this.$util.img(this.value.list[1].imageUrl)
|
||||
uni.previewImage({
|
||||
current: img,
|
||||
urls: [img]
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
77
components/diy-components/diy-listmenu.vue
Normal file
77
components/diy-components/diy-listmenu.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="diy-picture" :style="style">
|
||||
<view class="fui-cell-group">
|
||||
<!-- <image mode="widthFix" style="width: 100%;" :src="$util.img(item.imageUrl)"></image> -->
|
||||
|
||||
<view v-for="(item,index) in value.list" @click="redirectTo(item.link)" class="fui-cell" :class="item.iconType == 'img'?'img-cell':''">
|
||||
<view class="fui-cell-icon" style="color:diyitem.style.iconcolo">
|
||||
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
|
||||
:value="item.style ? item.style : null"
|
||||
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
|
||||
<image v-if="item.iconType == 'img'" mode="widthFix" :src="$util.img(item.imageUrl)" style="border-radius:6rpx;width: 60rpx;"></image>
|
||||
</view>
|
||||
<view class="fui-cell-text" style="color:#333;">{{item.title}}</view>
|
||||
<view class="fui-cell-remark" style="font-size: 24rpx;">{{lang=='en-us'?'view':'查看'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-listmenu',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
lang:uni.getStorageSync("lang")//en-us 英文
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.getDataList();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
// this.getDataList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
var css = '';
|
||||
css += 'background-color:' + this.value.contentBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
|
||||
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if(this.value.margin.top > 0)css += 'margin-top:' + this.value.margin.top * 2 + 'rpx;';
|
||||
return css;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
redirectTo(link) {
|
||||
if (link.wap_url) {
|
||||
if (this.$util.getCurrRoute() == 'pages/member/index' && !this.storeToken) {
|
||||
this.$refs.login.open(link.wap_url);
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.$util.diyRedirectTo(link);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.img-cell{
|
||||
padding:0 16rpx !important;
|
||||
}
|
||||
</style>
|
||||
241
components/diy-components/diy-live.vue
Normal file
241
components/diy-components/diy-live.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<x-skeleton type="banner" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="live-wrap" @click="entryRoom(liveInfo.roomid)" v-if="liveInfo">
|
||||
<view class="banner-wrap">
|
||||
<image :src="liveInfo.banner != '' ? $util.img(liveInfo.banner) : $util.img('public/uniapp/live/live_default_banner.png')"
|
||||
mode="widthFix" @error="liveInfo.banner = $util.img('public/uniapp/live/live_default_banner.png')"/>
|
||||
<view class="shade"></view>
|
||||
<view class="wrap">
|
||||
<view class="room-name">
|
||||
<text class="status-name font-size-base" :class="{ 'color-base-bg': liveInfo.live_status == '101' }">
|
||||
<text class="iconfont icon-zhibozhong font-size-sub" v-if="liveInfo.live_status == '101'"></text>
|
||||
<text class="iconfont icon-zhibojieshu font-size-sub" v-else></text>
|
||||
{{ liveInfo.status_name }}
|
||||
</text>
|
||||
{{ liveInfo.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="room-info" v-if="value.isShowAnchorInfo || value.isShowLiveGood">
|
||||
<block v-if="value.isShowAnchorInfo">
|
||||
<image :src="liveInfo.anchor_img != '' ? $util.img(liveInfo.anchor_img) : $util.getDefaultImage().head" class="anchor-img" @error="liveInfo.anchor_img = $util.getDefaultImage().head"/>
|
||||
<text class="anchor-name">主播：{{ liveInfo.anchor_name }}</text>
|
||||
</block>
|
||||
<text class="separate" v-if="value.isShowAnchorInfo && value.isShowLiveGood">|</text>
|
||||
<block v-if="value.isShowLiveGood">
|
||||
<text class="goods-text">直播商品：{{ liveInfo.goods.length }}</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 直播
|
||||
export default {
|
||||
components: {},
|
||||
name: 'diy-live',
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
skeletonConfig: {
|
||||
headHeight: '200rpx'
|
||||
},
|
||||
liveInfo: {
|
||||
banner: '',
|
||||
anchor_img: ''
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getLiveInfo();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
this.getLiveInfo();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getLiveInfo() {
|
||||
this.$api.sendRequest({
|
||||
url: '/live/api/live/info',
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.liveInfo = res.data;
|
||||
this.getLiveStatus();
|
||||
} else {
|
||||
this.liveInfo = null;
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
entryRoom(roomId) {
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.navigateTo({
|
||||
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
getLiveStatus() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let livePlayer = requirePlugin('live-player-plugin');
|
||||
|
||||
livePlayer.getLiveStatus({
|
||||
room_id: this.liveInfo.roomid
|
||||
}).then(res => {
|
||||
const liveStatus = res.liveStatus;
|
||||
if (liveStatus && liveStatus != this.liveInfo.live_status) {
|
||||
this.changeLiveStatus(liveStatus);
|
||||
}
|
||||
})
|
||||
.catch(err => {console.log('get live status', err);
|
||||
});
|
||||
|
||||
// 往后间隔1分钟或更慢的频率去轮询获取直播状态
|
||||
var timer = setInterval(() => {
|
||||
livePlayer
|
||||
.getLiveStatus({
|
||||
room_id: this.liveInfo.roomid
|
||||
})
|
||||
.then(res => {
|
||||
const liveStatus = res.liveStatus;
|
||||
if (liveStatus && liveStatus != this.liveInfo.live_status) {
|
||||
this.changeLiveStatus(liveStatus);
|
||||
}
|
||||
if (this.$util.inArray(liveStatus, [103, 104, 106, 107])) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('get live status', err);
|
||||
});
|
||||
}, 60000);
|
||||
// #endif
|
||||
},
|
||||
changeLiveStatus(status) {
|
||||
this.$api.sendRequest({
|
||||
url: '/live/api/live/modifyLiveStatus',
|
||||
data: {
|
||||
room_id: this.liveInfo.roomid,
|
||||
status: status
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.getLiveInfo();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.live-wrap {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-wrap {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shade {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: rgba($color: #888, $alpha: 0.3);
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
padding: 26rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.room-name {
|
||||
font-size: $font-size-toolbar;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.status-name {
|
||||
display: inline-block;
|
||||
font-size: $font-size-activity-tag;
|
||||
color: #fff;
|
||||
padding: 8rpx 12rpx;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 36rpx;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.icon-zhibozhong {
|
||||
font-size: $font-size-activity-tag;
|
||||
color: #fff;
|
||||
margin-right: 9rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.room-info {
|
||||
padding: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
|
||||
.anchor-img {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.anchor-name,
|
||||
.goods-text {
|
||||
font-size: $font-size-base;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.separate {
|
||||
color: #808080;
|
||||
margin: 0 10rpx;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
247
components/diy-components/diy-many-goods-list.vue
Normal file
247
components/diy-components/diy-many-goods-list.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<view class="many-goods-list">
|
||||
<scroll-view scroll-x="true" class="many-goods-list-head" :scroll-into-view="'a' + cateIndex" :style="manyWrapCss">
|
||||
<view v-for="(item, index) in value.list" class="scroll-item" :class="{ active: index == cateIndex }" :id="'a' + index" :key="index" @click="changeCateIndex(item, index)">
|
||||
<view class="split-line" v-if="index > 0"></view>
|
||||
<view class="cate">
|
||||
<view class="name" :style="{ color : value.headStyle.titleColor }">{{ item.title }}</view>
|
||||
<view class="desc" :class="{ 'color-base-bg': index == cateIndex && item.desc }">{{ item.desc }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="many-goods-list-fill" :style="{'height': manyInfo.height}" v-if="fixedTop"></view>
|
||||
<diy-goods-list class="many-goods-list-body" v-if="goodsValue" :value="goodsValue" ref="diyGoodsList"></diy-goods-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-many-goods-list',
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
scrollTop: {
|
||||
type: [Number, String]
|
||||
},
|
||||
global: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cateIndex: 0, // 当前选中的分类id
|
||||
goodsValue: null, // 商品列表数据
|
||||
manyInfo: {
|
||||
bodyHeight: 0,
|
||||
bodyTop: 0,
|
||||
height: 0,
|
||||
top: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.changeCateIndex(this.value.list[0], 0, true);
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
this.changeCateIndex(this.value.list[0], 0, true);
|
||||
},
|
||||
scrollTop: function(nval) {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select('.many-goods-list')
|
||||
.boundingClientRect(data => {
|
||||
if (data) {
|
||||
this.manyInfo.top = data.top;
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
|
||||
query
|
||||
.select('.many-goods-list .many-goods-list-body')
|
||||
.boundingClientRect(data => {
|
||||
if (data) {
|
||||
this.manyInfo.bodyHeight = (data.height || 0);
|
||||
this.manyInfo.bodyTop = (data.top || 0);
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fixedTop() {
|
||||
let diyPositionObj = JSON.parse(JSON.stringify(this.$store.state.diyGroupPositionObj));
|
||||
let positionHeight = 0;
|
||||
let height = 0;
|
||||
|
||||
delete diyPositionObj.diyManyGoodsList;
|
||||
|
||||
if (diyPositionObj) {
|
||||
let arr = Object.values(diyPositionObj);
|
||||
arr.forEach((item, index) => {
|
||||
positionHeight += item.originalVal; //定位的高度【搜索框+导航分类+自定义头部】
|
||||
});
|
||||
}
|
||||
|
||||
if (this.manyInfo.top < positionHeight && (this.manyInfo.bodyTop + this.manyInfo.bodyHeight >
|
||||
positionHeight + Number.parseFloat(this.manyInfo.height))) {
|
||||
height = positionHeight;
|
||||
}
|
||||
return height;
|
||||
},
|
||||
manyWrapCss() {
|
||||
let html = '';
|
||||
html += `position: ${this.fixedTop ? 'fixed' : 'initial'};`
|
||||
html += `top: ${this.fixedTop}px;`
|
||||
if (!this.global.topNavBg)
|
||||
html += `background-color: #fff;`
|
||||
else
|
||||
html += `background-color: ${this.fixedTop ? this.global.topNavColor : 'transparent'};`
|
||||
return html;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select('.many-goods-list .many-goods-list-head')
|
||||
.boundingClientRect(data => {
|
||||
if (data) {
|
||||
this.manyInfo.height = (data.height || 0) + 'px';
|
||||
// 向vuex中的diyIndexPositionObj增加多商品组件定位位置
|
||||
let diyManyGoodsList = {
|
||||
originalVal: data.height || 0 //自身高度 px
|
||||
}
|
||||
this.$store.commit('setDiyGroupPositionObj', {
|
||||
diyManyGoodsList: diyManyGoodsList
|
||||
});
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
methods: {
|
||||
changeCateIndex(item, index, isFirst) {
|
||||
this.cateIndex = index;
|
||||
this.goodsValue = {
|
||||
sources: item.sources,
|
||||
categoryId: item.categoryId,
|
||||
categoryName: item.categoryName,
|
||||
goodsId: item.goodsId,
|
||||
componentBgColor: this.value.componentBgColor,
|
||||
componentAngle: this.value.componentAngle,
|
||||
topAroundRadius: this.value.topAroundRadius,
|
||||
bottomAroundRadius: this.value.bottomAroundRadius,
|
||||
elementBgColor: this.value.elementBgColor,
|
||||
elementAngle: this.value.elementAngle,
|
||||
topElementAroundRadius: this.value.topElementAroundRadius,
|
||||
bottomElementAroundRadius: this.value.bottomElementAroundRadius,
|
||||
count: this.value.count,
|
||||
nameLineMode: this.value.nameLineMode,
|
||||
template: this.value.template,
|
||||
style: this.value.style,
|
||||
ornament: this.value.ornament,
|
||||
sortWay: this.value.sortWay,
|
||||
saleStyle: this.value.saleStyle,
|
||||
tag: this.value.tag,
|
||||
btnStyle: this.value.btnStyle,
|
||||
goodsNameStyle: this.value.goodsNameStyle,
|
||||
theme: this.value.theme,
|
||||
priceStyle: this.value.priceStyle,
|
||||
slideMode: this.value.slideMode,
|
||||
imgAroundRadius: this.value.imgAroundRadius,
|
||||
margin: this.value.margin,
|
||||
goodsMarginType: this.value.goodsMarginType,
|
||||
goodsMarginNum: this.value.goodsMarginNum
|
||||
};
|
||||
|
||||
// 如果是第一次加载，不需要执行下面代码
|
||||
if (isFirst) return;
|
||||
this.$refs.diyGoodsList.goodsValue = this.goodsValue;
|
||||
this.$refs.diyGoodsList.getGoodsList();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.many-goods-list-head {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.scroll-item {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: calc(25% - 40rpx);
|
||||
position: relative;
|
||||
padding: 0 20rpx;
|
||||
|
||||
&:first-child {
|
||||
width: calc(25% - 20rpx);
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.split-line {
|
||||
display: inline-block;
|
||||
width: 1rpx;
|
||||
height: 30rpx;
|
||||
background-color: #e5e5e5;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
color: $color-title;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cate {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: $font-size-tag;
|
||||
color: $color-tip;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
margin-top: 10rpx;
|
||||
min-width: 120rpx;
|
||||
max-width: 220rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
78
components/diy-components/diy-map.vue
Normal file
78
components/diy-components/diy-map.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<view class="diy-map" :style="style">
|
||||
<view class="fui-list-group merchgroup" style="margin-top:0" v-for="(item,index) in value.list">
|
||||
<map
|
||||
id="map"
|
||||
style="width: 100%; height:600rpx"
|
||||
scale="12"
|
||||
:markers="markerst"
|
||||
bindupdated="bindupdated"
|
||||
:longitude="item.lng"
|
||||
:latitude="item.lat"
|
||||
show-location>
|
||||
<cover-view style="position:absolute;right:10px;bottom:30rpx;z-index:99999;background:#4390FF;padding:5px 10px;wxcs_style_padding:10rpx 20rpx;border-radius:8rpx;color: #fff;" @click="tomap(item)">
|
||||
<cover-view style="font-size:24rpx">一键导航</cover-view>
|
||||
</cover-view>
|
||||
</map>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-map',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
markers:[]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
// this.getDataList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
markerst(){
|
||||
return [{
|
||||
id:1,
|
||||
latitude:this.value.list[0].lat,
|
||||
longitude:this.value.list[0].lng
|
||||
}]
|
||||
},
|
||||
style() {
|
||||
var css = '';
|
||||
css += 'background-color:' + this.value.contentBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return css;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tomap(item){
|
||||
uni.openLocation({
|
||||
latitude: parseFloat(item.lat),
|
||||
longitude: parseFloat(item.lng),
|
||||
name:"一键导航",
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
1466
components/diy-components/diy-member-info.vue
Normal file
1466
components/diy-components/diy-member-info.vue
Normal file
File diff suppressed because it is too large
Load Diff
249
components/diy-components/diy-member-my-order.vue
Normal file
249
components/diy-components/diy-member-my-order.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="common-wrap" :style="warpCss">
|
||||
<view class="order-wrap">
|
||||
<view class="status-wrap">
|
||||
<view class="item-wrap" @click="redirect('/pages/order/list?status=waitpay')" style="margin-right: 10rpx;">
|
||||
<view class="icon-block">
|
||||
<template v-if="value.style == 3">
|
||||
<image :src="$util.img('public/uniapp/member/order/wait_pay.png')" mode="widthFix"/>
|
||||
<view class="icon-shade" :style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_pay_shade.png') + ')'"></view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<diy-icon :icon="value.icon.waitPay.icon" v-if="value.icon.waitPay" :value="value.icon.waitPay.style ? value.icon.waitPay.style : null"></diy-icon>
|
||||
</template>
|
||||
<text v-if="orderNum.waitpay > 0" class="order-num color-base-bg price-font">{{ orderNum.waitpay > 99 ? '99+' : orderNum.waitpay }}</text>
|
||||
</view>
|
||||
<view class="title">{{ $lang('waitpay') }}</view>
|
||||
</view>
|
||||
<view class="item-wrap" @click="redirect('/pages/order/list?status=waitsend')" style="margin-right: 10rpx;">
|
||||
<view class="icon-block">
|
||||
<template v-if="value.style == 3">
|
||||
<image :src="$util.img('public/uniapp/member/order/wait_send.png')" mode="widthFix"></image>
|
||||
<view class="icon-shade" :style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_send_shade.png') + ')'"></view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<diy-icon :icon="value.icon.waitSend.icon" v-if="value.icon.waitSend" :value="value.icon.waitSend.style ? value.icon.waitSend.style : null"></diy-icon>
|
||||
</template>
|
||||
<text v-if="orderNum.waitsend > 0" class="order-num color-base-bg price-font">{{ orderNum.waitsend > 99 ? '99+' : orderNum.waitsend }}</text>
|
||||
</view>
|
||||
<view class="title">{{ $lang('waitsend') }}</view>
|
||||
</view>
|
||||
<view class="item-wrap" @click="redirect('/pages/order/list?status=waitconfirm')" style="margin-right: 10rpx;">
|
||||
<view class="icon-block">
|
||||
<template v-if="value.style == 3">
|
||||
<image :src="$util.img('public/uniapp/member/order/wait_confirm.png')" mode="widthFix"/>
|
||||
<view class="icon-shade" :style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_confirm_shade.png') + ')'"></view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<diy-icon :icon="value.icon.waitConfirm.icon" v-if="value.icon.waitConfirm" :value="value.icon.waitConfirm.style ? value.icon.waitConfirm.style : null"></diy-icon>
|
||||
</template>
|
||||
<text v-if="orderNum.waitconfirm > 0" class="order-num color-base-bg price-font">{{ orderNum.waitconfirm > 99 ? '99+' : orderNum.waitconfirm }}</text>
|
||||
</view>
|
||||
<view class="title">{{ $lang('waitconfirm') }}</view>
|
||||
</view>
|
||||
<view class="item-wrap" @click="redirect('/pages/order/list?status=waitrate')" style="margin-right: 10rpx;">
|
||||
<view class="icon-block">
|
||||
<template v-if="value.style == 3">
|
||||
<image :src="$util.img('public/uniapp/member/order/wait_use.png')" mode="widthFix"/>
|
||||
<view class="icon-shade" :style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_rate_shade.png') + ')'"></view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<diy-icon :icon="value.icon.waitUse.icon" v-if="value.icon.waitUse" :value="value.icon.waitUse.style ? value.icon.waitUse.style : null"></diy-icon>
|
||||
</template>
|
||||
<!-- <text v-if="orderNum.wait_use > 0" class="order-num color-base-bg price-font">{{ orderNum.wait_use > 99 ? '99+' : orderNum.wait_use }}</text> -->
|
||||
</view>
|
||||
<view class="title">{{ $lang('completed') }}</view>
|
||||
</view>
|
||||
<view class="item-wrap" @click="redirect('/pages_tool/order/activist')">
|
||||
<view class="icon-block">
|
||||
<template v-if="value.style == 3">
|
||||
<image :src="$util.img('public/uniapp/member/order/refunding.png')" mode="widthFix"/>
|
||||
<view class="icon-shade" :style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/refunding_shade.png') + ')'"></view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<diy-icon :icon="value.icon.refunding.icon" v-if="value.icon.refunding" :value="value.icon.refunding.style ? value.icon.refunding.style : null"></diy-icon>
|
||||
</template>
|
||||
<text v-if="orderNum.refunding > 0" class="order-num color-base-bg price-font">{{ orderNum.refunding > 99 ? '99+' : orderNum.refunding }}</text>
|
||||
</view>
|
||||
<view class="title">{{ $lang('activist') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 自定义会员中心——我的订单
|
||||
export default {
|
||||
name: 'diy-member-my-order',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderNum: {
|
||||
waitpay: 0,
|
||||
waitsend: 0,
|
||||
waitconfirm: 0,
|
||||
refunding: 0,
|
||||
wait_use: 0,
|
||||
waitrate: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
storeToken(nVal, oVal) {
|
||||
this.init();
|
||||
},
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.storeToken) {
|
||||
this.getOrderNum();
|
||||
} else {
|
||||
this.orderNum = {
|
||||
waitpay: 0,
|
||||
waitsend: 0,
|
||||
waitconfirm: 0,
|
||||
refunding: 0,
|
||||
wait_use: 0,
|
||||
waitrate: 0
|
||||
};
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取订单数量
|
||||
*/
|
||||
getOrderNum() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/order/num',
|
||||
data: {
|
||||
order_status: 'waitpay,waitsend,waitconfirm,refunding,wait_use,waitrate'
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.orderNum = res.data;
|
||||
} else {
|
||||
this.orderNum = {
|
||||
waitpay: 0,
|
||||
waitsend: 0,
|
||||
waitconfirm: 0,
|
||||
refunding: 0,
|
||||
wait_use: 0,
|
||||
waitrate: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 跳转
|
||||
* @param {Object} url
|
||||
*/
|
||||
redirect(url) {
|
||||
if (this.storeToken) {
|
||||
this.$util.redirectTo(url);
|
||||
} else {
|
||||
this.$refs.login.open(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.common-wrap {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.order-wrap {
|
||||
.status-wrap {
|
||||
display: flex;
|
||||
padding: 30rpx 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-wrap {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background: #f6f7f9;
|
||||
padding: 20rpx 0;
|
||||
.icon-block {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
font-size: 60rpx;
|
||||
margin: 4rpx auto;
|
||||
position: relative;
|
||||
|
||||
&>image {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.icon-shade {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
background: $base-color;
|
||||
-webkit-mask: no-repeat center / contain;
|
||||
}
|
||||
}
|
||||
|
||||
.order-num {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
box-sizing: border-box;
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
padding: 0 6rpx;
|
||||
min-width: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
height: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
350
components/diy-components/diy-merch-list.vue
Normal file
350
components/diy-components/diy-merch-list.vue
Normal file
@@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<view>
|
||||
<x-skeleton type="list" :loading="loading" :configs="skeletonConfig" v-if="value.ornament.type == 'default'">
|
||||
<view class="merch-wrap" :style="warpCss">
|
||||
<view :class="['list-wrap', value.style]" :style="warpCss">
|
||||
<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index" :style="itemCss" @click="toDetail(item)">
|
||||
<view class="merch-img">
|
||||
<image class="cover-img" :src="$util.img(item.merch_image)" mode="widthFix" @error="imgError(index)" />
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
<text class="title">{{ item.merch_name }}</text>
|
||||
<text class="desc">{{ item.desc }}</text>
|
||||
<view class="read-wrap"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
<view v-else :style="warpCss">
|
||||
<scroll-view :scroll-x="true" :class="['merch-nav', 'singleSlide' ]">
|
||||
<!-- #ifdef MP -->
|
||||
<view class="uni-scroll-view-content">
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="merch-nav-item graphic" v-for="(item, index) in list" :key="index" :style="{ width: 100 / 4 + '%' }" @click="toDetail(item)">
|
||||
<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
|
||||
:src="$util.img(item.merch_image) || $util.img('public/uniapp/default_img/goods.png')"
|
||||
mode="aspectFill"
|
||||
:show-menu-by-longpress="true"
|
||||
style="max-width: 80rpx; max-height: 80rpx; border-radius: 50rpx;"
|
||||
/>
|
||||
</view>
|
||||
<text class="graphic-text" style="font-size: 28rpx; font-weight: normal; color: rgb(48, 49, 51);">
|
||||
{{ item.merch_name }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 文章
|
||||
export default {
|
||||
name: 'diy-article',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
/*{
|
||||
merch_name:'品牌',
|
||||
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
||||
},
|
||||
{
|
||||
merch_name:'品牌',
|
||||
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
||||
},
|
||||
{
|
||||
merch_name:'品牌',
|
||||
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
||||
},
|
||||
{
|
||||
merch_name:'品牌',
|
||||
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
||||
},
|
||||
{
|
||||
merch_name:'品牌',
|
||||
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
||||
},
|
||||
{
|
||||
merch_name:'品牌',
|
||||
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
||||
},
|
||||
{
|
||||
merch_name:'品牌',
|
||||
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
|
||||
}*/
|
||||
],
|
||||
loading: true,
|
||||
skeletonConfig: {
|
||||
gridRows: 1,
|
||||
gridRowsGap: '40rpx',
|
||||
headWidth: '160rpx',
|
||||
headHeight: '160rpx',
|
||||
textRows: 2
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function (nval) {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
console.log(obj)
|
||||
return obj;
|
||||
},
|
||||
// 子项样式
|
||||
itemCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.elementBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if (this.value.ornament.type == 'shadow') {
|
||||
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color;
|
||||
}
|
||||
if (this.value.ornament.type == 'stroke') {
|
||||
obj += 'border:' + '2rpx solid ' + this.value.ornament.color;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
console.log(121)
|
||||
var data = {
|
||||
num: this.value.count
|
||||
};
|
||||
console.log(this.value)
|
||||
if (this.value.sources == 'diy') {
|
||||
data.num = 0;
|
||||
data.merch_id_arr = this.value.merchIds.toString();
|
||||
}
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/merch/api/merch/lists',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
let data = res.data;
|
||||
this.list = data;
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(item) {
|
||||
this.$util.redirectTo('/pages_promotion/merch/detail', {
|
||||
merch_id: item.merch_id
|
||||
});
|
||||
},
|
||||
imgError(index) {
|
||||
if (this.list[index]) this.list[index].merch_image = this.$util.getDefaultImage().article;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
/* 单行滑动 */
|
||||
.merch-nav.singleSlide>>>.uni-scroll-view-content {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
|
||||
.merch-nav {
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.singleSlide {
|
||||
.merch-nav-item {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.pageSlide {
|
||||
position: relative;
|
||||
|
||||
.merch-nav-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.merch-nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 14rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.graphic-text {
|
||||
padding-top: 12rpx;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
&.alone {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.text {
|
||||
|
||||
.graphic-text {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.graphic-img {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -24rpx;
|
||||
color: #fff;
|
||||
border-radius: 24rpx;
|
||||
border-bottom-left-radius: 0;
|
||||
transform: scale(0.8);
|
||||
padding: 8rpx 16rpx;
|
||||
line-height: 1;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 50rpx;
|
||||
color: $color-sub;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.merch-wrap {
|
||||
.list-wrap {
|
||||
&.style-1 {
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
margin-top: 24rpx;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.merch-img {
|
||||
margin-right: 20rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
// flex: 1;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
.desc{
|
||||
color:#888
|
||||
}
|
||||
.title {
|
||||
font-weight: bold;
|
||||
// margin-bottom: 10rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.abstract {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.read-wrap {
|
||||
display: flex;
|
||||
color: #999ca7;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
line-height: 1;
|
||||
|
||||
text {
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 36rpx;
|
||||
vertical-align: bottom;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: $base-color;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
351
components/diy-components/diy-notes.vue
Normal file
351
components/diy-components/diy-notes.vue
Normal file
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<x-skeleton type="list" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="diy-notes" :style="{ backgroundColor: value.componentBgColor }">
|
||||
<view class="diy-notes-top">
|
||||
<view class="notes-title" :style="{ color: value.titleTextColor }">{{ value.title }}</view>
|
||||
<view class="notes-more" @click="toMore()" :style="{ color: value.moreTextColor }">{{ value.more }}</view>
|
||||
</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="toDetail(item.note_id)"
|
||||
:style="notesItemStyle">
|
||||
<view class="notes-item" v-if="item.status == 1">
|
||||
<view class="notes-item-con">
|
||||
<view class="notes-title">{{ item.note_title }}</view>
|
||||
<view class="notes-highlights-list" v-if="value.notesLabel == 1 && item.goods_highlights">
|
||||
<text class="color-base-bg" v-for="(labelItem, labelIndex) in item.label" :key="labelIndex">{{ labelItem }}</text>
|
||||
</view>
|
||||
<view class="notes-intro">
|
||||
<text class="notes-label color-base-text">#{{ item.note_type == 'goods_item' ? '单品介绍' : '掌柜说' }}#</text>
|
||||
{{ item.note_abstract }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="notes-img-wrap" :class="{ 'notes-img-wrap-list': item.cover_type == 1 }">
|
||||
<image v-if="item.cover_type == 0" :src="$util.img(item.img)" @error="imageError(i)" mode="aspectFill" class="notes-item-image"/>
|
||||
<image v-else v-for="(imgItem, imgIndex) in item.img" :key="imgIndex" :src="$util.img(imgItem)" @error="imageError(i)" mode="aspectFit" class="notes-item-image-li"/>
|
||||
</view>
|
||||
|
||||
<view class="notes-item-con">
|
||||
<view class="notes-info" v-if="(value.readNum == 1 && item.is_show_read_num == 1) || (value.uploadTime == 1 && item.is_show_release_time == 1)">
|
||||
<view class="notes-num">
|
||||
<text v-show="value.uploadTime == 1 && item.is_show_release_time == 1">{{ item.update_time_day }}</text>
|
||||
</view>
|
||||
<view class="notes-num">
|
||||
<text v-show="value.readNum == 1 && item.is_show_read_num == 1">阅读 {{ item.initial_read_num + item.read_num }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-notes',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
skeletonConfig: {
|
||||
itemDirection: 'column',
|
||||
headWidth: '100%',
|
||||
headHeight: '320rpx',
|
||||
textRows: 2,
|
||||
textWidth: ['100%', '80%']
|
||||
},
|
||||
dataList: [],
|
||||
giveLikeFlag: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getDataList();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
this.getDataList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
notesItemStyle() {
|
||||
var css = '';
|
||||
css += 'background-color:' + this.value.contentBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return css;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
this.getDataList();
|
||||
},
|
||||
getDataList() {
|
||||
var data = {
|
||||
num: this.value.count
|
||||
};
|
||||
|
||||
if (this.value.sources == 'diy') {
|
||||
data.num = 0;
|
||||
data.note_id_arr = this.value.noteId.toString();
|
||||
}
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/notes/api/notes/lists',
|
||||
data: data,
|
||||
success: res => {
|
||||
var data = res.data;
|
||||
this.dataList = [];
|
||||
if (data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var item = {};
|
||||
item = data[i];
|
||||
if (data[i].cover_type == 1) {
|
||||
item.img = data[i].cover_img.split(',');
|
||||
} else {
|
||||
item.img = data[i].cover_img;
|
||||
}
|
||||
|
||||
if (data[i].upload_time) {
|
||||
item.update_time_day = this.$util.timeStampTurnTime(data[i].upload_time)
|
||||
.split(' ')[0];
|
||||
} else {
|
||||
item.update_time_day = this.$util.timeStampTurnTime(data[i].create_time)
|
||||
.split(' ')[0];
|
||||
}
|
||||
|
||||
item.label = data[i].goods_highlights.split(',');
|
||||
this.dataList.push(item);
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
toMore() {
|
||||
this.$util.redirectTo('/pages_tool/store_notes/note_list');
|
||||
},
|
||||
toDetail(id) {
|
||||
this.$util.redirectTo('/pages_tool/store_notes/note_detail', {
|
||||
note_id: id
|
||||
});
|
||||
},
|
||||
/* 点赞 */
|
||||
giveLike(noteId, index) {
|
||||
if (!this.storeToken) {
|
||||
this.$refs.login.open('/pages/index/index');
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.giveLikeFlag) return false;
|
||||
this.giveLikeFlag = true;
|
||||
|
||||
var url = this.dataList[index].is_dianzan == 1 ? '/notes/api/record/delete' : '/notes/api/record/add';
|
||||
this.$api.sendRequest({
|
||||
url: url,
|
||||
data: {
|
||||
note_id: noteId
|
||||
},
|
||||
success: res => {
|
||||
this.giveLikeFlag = false;
|
||||
if (res.code == 0 && res.data > 0) {
|
||||
if (this.noteType != 'goods_item')
|
||||
this.dataList[index].dianzan_num = this.dataList[index].is_dianzan == 1 ? this.dataList[index].dianzan_num - 1 : this.dataList[index].dianzan_num + 1;
|
||||
else {
|
||||
this.dataList[index].dianzan_num = this.dataList[index].is_dianzan == 1 ? this.dataList[index].dianzan_num - 1 : this.dataList[index].dianzan_num + 1;
|
||||
}
|
||||
this.dataList[index].is_dianzan = this.dataList[index].is_dianzan == 1 ? 0 : 1;
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
imageError(index) {
|
||||
this.dataList[index].img = this.$util.getDefaultImage().goods;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.diy-notes {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.diy-notes-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.notes-title {
|
||||
width: 70%;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notes-more {
|
||||
font-size: $font-size-tag;
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
.notes-more::after {
|
||||
font-family: 'iconfont';
|
||||
content: '\e6a3';
|
||||
font-size: $font-size-tag;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-notes-box {
|
||||
width: 100%;
|
||||
padding: 30rpx 0 20rpx;
|
||||
}
|
||||
|
||||
.notes-box-item {
|
||||
width: calc(100% - 8rpx);
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
-moz-box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.02);
|
||||
-webkit-box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.02);
|
||||
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.notes-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.notes-img-wrap {
|
||||
position: relative;
|
||||
height: 300rpx;
|
||||
|
||||
.notes-item-image {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.notes-label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
bottom: 20rpx;
|
||||
max-width: calc(100vh - 40rpx);
|
||||
background-color: #ffffff;
|
||||
line-height: 36rpx;
|
||||
padding: 0 10rpx 0 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.notes-img-wrap-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
|
||||
image {
|
||||
width: calc((100% - 40rpx) / 3);
|
||||
height: 210rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&:nth-child(-n + 3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: calc((100% - 40rpx) / 3);
|
||||
}
|
||||
}
|
||||
|
||||
.notes-item-con {
|
||||
.notes-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notes-highlights-list {
|
||||
text {
|
||||
display: inline-block;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 4rpx;
|
||||
margin: 0 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.notes-intro {
|
||||
margin: 4rpx 0 8rpx;
|
||||
line-height: 40rpx;
|
||||
overflow: hidden;
|
||||
|
||||
text {
|
||||
float: left;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.notes-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.notes-num {
|
||||
>text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $font-size-tag;
|
||||
color: #969799;
|
||||
|
||||
text.iconfont {
|
||||
font-size: 26rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
300
components/diy-components/diy-notice.vue
Normal file
300
components/diy-components/diy-notice.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<view class="diy-notice">
|
||||
<view :class="['notice', value.contentStyle]" :style="noticeWrapCss">
|
||||
|
||||
<image v-if="value.iconType == 'img'" class="notice-img" :src="$util.img(value.imageUrl)" mode="heightFix"/>
|
||||
<diy-icon v-if="value.iconType == 'icon'" :icon="value.icon" :value="value.style ? value.style : 'null'" :style="{ maxWidth: 30 * 2 + 'rpx', maxHeight: 30 * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
|
||||
<view class="notice-xian"></view>
|
||||
<view class="main-wrap">
|
||||
<!-- 横向滚动 -->
|
||||
<view class="horizontal-wrap" v-if="value.scrollWay == 'horizontal'">
|
||||
<view class="marquee-wrap">
|
||||
<view class="marquee" :style="marqueeStyle">
|
||||
<text v-for="(item, index) in list" :key="index" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="marquee" :style="marqueeAgainStyle">
|
||||
<text v-for="(item, index) in list" :key="index" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 上下滚动 -->
|
||||
<template v-if="value.scrollWay == 'upDown'">
|
||||
<swiper :vertical="true" :duration="500" autoplay="true" circular="true">
|
||||
<swiper-item v-for="(item, index) in list" :key="index" @touchmove.prevent.stop>
|
||||
<text class="beyond-hiding using-hidden" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">
|
||||
{{ item.title }}
|
||||
</text>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view @touchmove.prevent.stop>
|
||||
<uni-popup ref="noticePopup" type="center">
|
||||
<view class="notice-popup">
|
||||
<view class="head-wrap" @click="closeNoticePopup">
|
||||
<text>公告</text>
|
||||
<text class="iconfont icon-close"></text>
|
||||
</view>
|
||||
<view class="content-wrap">{{ notice }}</view>
|
||||
<button type="primary" @click="closeNoticePopup">我知道了</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// 公告
|
||||
export default {
|
||||
name: 'diy-notice',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
notice: '', // 当前点击的弹框内容
|
||||
marqueeWrapWidth: 0, // 容器宽度
|
||||
marqueeWidth: 0, // 公告内容累加宽度
|
||||
marqueeStyle: '', // 横向滚动样式
|
||||
marqueeAgainStyle: '', // 横向滚动复制样式
|
||||
time: 0, // 滚动完成时间
|
||||
delayTime: 1000 // 动画延迟时间
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
if (this.value.sources == 'initial') this.getData();
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// 数据源：公告系统
|
||||
if (this.value.sources == 'initial') {
|
||||
this.getData();
|
||||
} else {
|
||||
this.list = this.value.list;
|
||||
this.bindCrossSlipEvent();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
noticeWrapCss: function() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
var data = {
|
||||
page_size: 0
|
||||
};
|
||||
|
||||
if (this.value.sources == 'initial') {
|
||||
data.page_size = this.value.count;
|
||||
}
|
||||
|
||||
if (this.value.noticeIds.length) {
|
||||
data.id_arr = this.value.noticeIds.toString();
|
||||
data.page_size = 0;
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/api/notice/page',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.list = res.data.list;
|
||||
this.bindCrossSlipEvent();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
toLink(item) {
|
||||
if (this.value.sources == 'initial') {
|
||||
this.$util.redirectTo('/pages_tool/notice/detail', {
|
||||
notice_id: item.id
|
||||
});
|
||||
} else if (!item) {
|
||||
this.$util.redirectTo('/pages_tool/notice/list');
|
||||
} else if (Object.keys(item.link).length > 1) {
|
||||
this.$util.diyRedirectTo(item.link);
|
||||
} else {
|
||||
// 如果不设置跳转链接，则点击弹框展示
|
||||
this.notice = item.title;
|
||||
this.$refs.noticePopup.open();
|
||||
}
|
||||
},
|
||||
closeNoticePopup() {
|
||||
this.$refs.noticePopup.close();
|
||||
},
|
||||
// 绑定横向滚动事件
|
||||
bindCrossSlipEvent() {
|
||||
if (this.value.scrollWay == 'horizontal') {
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
uni.createSelectorQuery()
|
||||
.in(this)
|
||||
.select('.marquee-wrap')
|
||||
.boundingClientRect(res => {
|
||||
this.marqueeWrapWidth = res.width;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select('.marquee')
|
||||
.boundingClientRect(data => {
|
||||
this.marqueeWidth = data.width + 30; // 30px是间距
|
||||
this.time = Math.ceil(this.marqueeWidth * 10);
|
||||
|
||||
if (this.marqueeWrapWidth > this.marqueeWidth) {
|
||||
this.marqueeStyle = `animation: none;`;
|
||||
this.marqueeAgainStyle = 'display:none;';
|
||||
} else {
|
||||
this.marqueeStyle = `
|
||||
width: ${this.marqueeWidth}px;
|
||||
animation-duration: ${this.time}ms;
|
||||
animation-delay: ${this.delayTime}ms;
|
||||
`;
|
||||
this.marqueeAgainStyle = `
|
||||
width: ${this.marqueeWidth}px;
|
||||
left: ${this.marqueeWidth}px;
|
||||
animation-duration: ${this.time}ms;
|
||||
animation-delay: ${this.delayTime}ms;
|
||||
`;
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.notice {
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding: 20rpx 0 20rpx 20rpx;
|
||||
font-size: 70rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.notice-img {
|
||||
width: 44rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.notice-xian {
|
||||
width: 1rpx;
|
||||
height: 26rpx;
|
||||
background-color: #e4e4e4;
|
||||
margin: 0 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrap {
|
||||
display: inline-block;
|
||||
width: calc(100% - 115rpx);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
swiper {
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.beyond-hiding {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notice-popup {
|
||||
padding: 0 30rpx 40rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.head-wrap {
|
||||
font-size: $font-size-toolbar;
|
||||
line-height: 100rpx;
|
||||
height: 100rpx;
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 0;
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
max-height: 600rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-wrap {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.marquee-wrap {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.marquee {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
animation: marquee 0s 0s linear infinite;
|
||||
|
||||
text {
|
||||
margin-left: 40rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
203
components/diy-components/diy-payment-qrcode.vue
Normal file
203
components/diy-components/diy-payment-qrcode.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="payment-qrocde-wrap" :style="warpCss">
|
||||
<view class="payment-qrocde-box">
|
||||
<view class="qrocde-left">
|
||||
<view class="qrocde-desc">
|
||||
<text>门店消费时使用，支付时点击下方展示付款码</text>
|
||||
<!-- <text class="iconfont icon-shuaxin"></text> -->
|
||||
</view>
|
||||
<view class="qrocde-action">
|
||||
<button type="primary" @click="toLink">
|
||||
<text class="iconfont icon-fukuanma"></text>
|
||||
<text class="action-name">付款码</text>
|
||||
</button>
|
||||
<button type="primary" @click="openPaymentPopup">
|
||||
<text class="iconfont icon-saomafu"></text>
|
||||
<text class="action-name">扫码付</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="qrocde-right">
|
||||
<text class="iconfont icon-zhifu"></text>
|
||||
<text class="name">门店支付</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view @touchmove.prevent.stop>
|
||||
<uni-popup ref="paymentPopup" type="center">
|
||||
<view class="payment-popup">
|
||||
<view class="head-wrap" @click="closePaymentPopup">
|
||||
<text>提示</text>
|
||||
<text class="iconfont icon-close"></text>
|
||||
</view>
|
||||
<view class="content-wrap">扫码付请退出程序后直接使用微信扫一扫或返回上一页使用付款码进行支付</view>
|
||||
<button type="primary" @click="closePaymentPopup">我知道了</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 付款码
|
||||
export default {
|
||||
name: 'diy-payment-qrcode',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
methods: {
|
||||
toLink() {
|
||||
this.$util.redirectTo('/pages_tool/store/payment_qrcode');
|
||||
},
|
||||
scanCodeFn() {
|
||||
// #ifdef APP-PLUS
|
||||
this.toLink();
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
// 允许从相机和相册扫码,h5端不起作用
|
||||
uni.scanCode({
|
||||
success: function(res) {
|
||||
console.log('条码类型：' + res.scanType);
|
||||
console.log('条码内容：' + res.result);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
openPaymentPopup() {
|
||||
this.$refs.paymentPopup.open();
|
||||
},
|
||||
closePaymentPopup() {
|
||||
this.$refs.paymentPopup.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.payment-qrocde-box {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
.qrocde-left {
|
||||
flex: 1;
|
||||
.qrocde-desc {
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-tag;
|
||||
.iconfont {
|
||||
margin-left: 10rpx;
|
||||
font-size: $font-size-tag;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.qrocde-action {
|
||||
padding-bottom: 36rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
width: 230rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50rpx;
|
||||
&:first-of-type {
|
||||
margin-right: 46rpx;
|
||||
background-color: $base-color;
|
||||
}
|
||||
&:last-of-type {
|
||||
background-color: #999;
|
||||
}
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.action-name {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.qrocde-right {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 16rpx;
|
||||
width: 90rpx;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
.name {
|
||||
font-size: $font-size-sub;
|
||||
writing-mode: tb-rl;
|
||||
color: #fff;
|
||||
letter-spacing: 6rpx;
|
||||
}
|
||||
.iconfont {
|
||||
color: #fff;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
border-radius: 50%;
|
||||
background-color: $base-color;
|
||||
transform: translateY(-50%);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.payment-popup {
|
||||
padding: 0 30rpx 40rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.head-wrap {
|
||||
font-size: $font-size-toolbar;
|
||||
line-height: 100rpx;
|
||||
height: 100rpx;
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
margin-bottom: 20rpx;
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 0;
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
}
|
||||
.content-wrap {
|
||||
max-height: 600rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
button {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
77
components/diy-components/diy-picture.vue
Normal file
77
components/diy-components/diy-picture.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="diy-picture" :style="style">
|
||||
<view class="fui-picture">
|
||||
<view v-for="(item,index) in value.list" style="line-height: 0;">
|
||||
<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)" v-if="item.link.wap_url" @click="redirectTo(item.link)"></image>
|
||||
<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)" v-else @click="previewImg(item.imageUrl)"></image>
|
||||
</view>
|
||||
<!-- <view wx:if="{{!childitem.linkurl}}" bindtap="previewImg" data-src="{{childitem.imgurl}}" style="padding:{{diyitem.style.paddingtop==0?0:diyitem.style.paddingtop+'rpx'}} {{diyitem.style.paddingleft==0?0:diyitem.style.paddingleft+'rpx'}}" wx:for="{{diyitem.data}}" wx:for-index="childid" wx:for-item="childitem" wx:key="{{childid}}">
|
||||
<image mode="widthFix" src="{{childitem.imgurl}}" style="{{bannerheight?'height:'+bannerheight+'px':'height:auto'}}"></image>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-picture',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.getDataList();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
// this.getDataList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
var css = '';
|
||||
css += 'background-color:' + this.value.contentBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return css;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewImg(img){
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: [this.$util.img(img)],
|
||||
success: function (res) {},
|
||||
fail: function (res) {},
|
||||
complete: function (res) {},
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
redirectTo(link) {
|
||||
if (link.wap_url) {
|
||||
if (this.$util.getCurrRoute() == 'pages/member/index' && !this.storeToken) {
|
||||
this.$refs.login.open(link.wap_url);
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.$util.diyRedirectTo(link);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
540
components/diy-components/diy-pinfan.vue
Normal file
540
components/diy-components/diy-pinfan.vue
Normal file
@@ -0,0 +1,540 @@
|
||||
<template>
|
||||
<x-skeleton :type="skeletonType" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="diy-pinfan" :class="[value.template, value.style]" :style="warpCss">
|
||||
<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="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>
|
||||
<view class="content" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="tag-wrap" v-if="value.groupStyle.control || value.saleStyle.control">
|
||||
<view v-if="value.groupStyle.control" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '', borderColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }">
|
||||
<text class="iconfont icon-yonghu3" :style="{ backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"></text>
|
||||
<text>{{ item.pintuan_num }}人团</text>
|
||||
</view>
|
||||
<view v-if="value.saleStyle.control" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '', borderColor: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
<text>已拼{{ item.order_num }}件</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-wrap">
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">{{ item.pintuan_price.split(".")[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">{{ "."+item.pintuan_price.split(".")[1] }}</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
¥{{ item.price }}
|
||||
</view>
|
||||
<button v-if="value.btnStyle.control" :style="{
|
||||
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
|
||||
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
|
||||
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
|
||||
}">
|
||||
<text class="text">{{ value.btnStyle.text }}</text>
|
||||
<text class="fan" v-if="item.reward_type == 4">返{{ item.reward_type_num }}积分</text>
|
||||
<text class="fan" v-if="item.reward_type == 1 || item.reward_type == 2">返￥{{ item.reward_type_num }}</text>
|
||||
<text class="fan" v-if="item.reward_type == 3">返优惠券</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<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="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>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view v-if="value.groupStyle.control" class="num">
|
||||
<text class="content-tuan-box" :style="{ color: value.theme == 'diy' ? value.groupStyle.color : '', backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }">
|
||||
{{ item.pintuan_num }}人团
|
||||
</text>
|
||||
<text class="content-tuan-price" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }" v-if="item.reward_type == 4">
|
||||
返{{ item.reward_type_num }}积分
|
||||
</text>
|
||||
<text class="content-tuan-price" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }" v-if="item.reward_type == 1 || item.reward_type == 2">
|
||||
返￥{{ item.reward_type_num }}
|
||||
</text>
|
||||
<text class="content-tuan-price" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }" v-if="item.reward_type == 3">返优惠券</text>
|
||||
</view>
|
||||
<view class="price-wrap" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">{{ item.pintuan_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">{{ "."+item.pintuan_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</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',(list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex" @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(dataIndex)"/>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view v-if="value.groupStyle.control" class="num">
|
||||
<text class="content-tuan-box" :style="{ color: value.theme == 'diy' ? value.groupStyle.color : '', backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }">
|
||||
{{ item.pintuan_num }}人团
|
||||
</text>
|
||||
<text class="content-tuan-price" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }" v-if="item.reward_type == 4">
|
||||
返{{ item.reward_type_num }}积分
|
||||
</text>
|
||||
<text class="content-tuan-price" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }" v-if="item.reward_type == 1 || item.reward_type == 2">
|
||||
返￥{{ item.reward_type_num }}
|
||||
</text>
|
||||
<text class="content-tuan-price" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }" v-if="item.reward_type == 3">
|
||||
返优惠券
|
||||
</text>
|
||||
</view>
|
||||
<view class="price-wrap" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">{{ item.pintuan_price.split('.')[1] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">{{ "."+item.pintuan_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-pinfan',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
skeletonType:'',
|
||||
skeletonConfig: {},
|
||||
list: [],
|
||||
page: 1
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initSkeleton();
|
||||
this.getData();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
// 商品项样式
|
||||
goodsItemCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.elementBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if (this.value.ornament.type == 'shadow') {
|
||||
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color + ';';
|
||||
}
|
||||
if (this.value.ornament.type == 'stroke') {
|
||||
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
|
||||
}
|
||||
const screenWidth = uni.getSystemInfoSync().windowWidth;
|
||||
if (this.value.template == 'horizontal-slide') {
|
||||
var width = "";
|
||||
if (this.value.slideMode == 'scroll' && this.value.goodsMarginType == 'diy')
|
||||
width = this.rpxUpPx(this.value.goodsMarginNum * 2);
|
||||
else
|
||||
width = [screenWidth - (this.rpxUpPx(20) * 2) - (this.rpxUpPx(200) * 3) - (this.rpxUpPx(this.value
|
||||
.margin.both * 2) * 2)] / 6;
|
||||
obj += 'margin-left:' + width + "px;";
|
||||
obj += 'margin-right:' + width + "px;";
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
swiperHeight() {
|
||||
if (this.value.nameLineMode == 'multiple')
|
||||
return this.value.ornament.type == 'shadow' ? '444rpx' : '432rpx';
|
||||
return this.value.ornament.type == 'shadow' ? '404rpx' : '396rpx';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initSkeleton() {
|
||||
if (this.value.template == 'row1-of1') {
|
||||
|
||||
// 单列 风格
|
||||
this.skeletonType = 'list';
|
||||
this.skeletonConfig = {
|
||||
textRows: 3
|
||||
};
|
||||
|
||||
} else if (this.value.template == 'horizontal-slide') {
|
||||
|
||||
// 横向滑动 风格
|
||||
this.skeletonType = 'waterfall';
|
||||
this.skeletonConfig = {
|
||||
gridRows: 1,
|
||||
gridColumns: 3,
|
||||
headHeight: '200rpx',
|
||||
textRows: 2,
|
||||
textWidth: ['100%', '80%']
|
||||
};
|
||||
|
||||
}
|
||||
},
|
||||
rpxUpPx(res) {
|
||||
const screenWidth = uni.getSystemInfoSync().windowWidth;
|
||||
var data = screenWidth * parseInt(res) / 750;
|
||||
return Math.floor(data);
|
||||
},
|
||||
getData() {
|
||||
var data = {
|
||||
num: this.value.count
|
||||
};
|
||||
if (this.value.sources == 'diy') {
|
||||
data.num = 0;
|
||||
data.goods_id_arr = this.value.goodsId.toString();
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/pinfan/api/goods/lists',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.list = res.data;
|
||||
|
||||
// 切屏滚动，每页显示固定数量
|
||||
if (this.value.template == 'horizontal-slide' && this.value.slideMode == 'slide') {
|
||||
let size = 3;
|
||||
let temp = [];
|
||||
this.page = Math.ceil(this.list.length / size);
|
||||
for (var i = 0; i < this.page; i++) {
|
||||
temp[i] = [];
|
||||
for (var j = i * size; j < this.list.length; j++) {
|
||||
if (temp[i].length == size) break;
|
||||
temp[i].push(this.list[j]);
|
||||
}
|
||||
}
|
||||
this.list = temp;
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(e) {
|
||||
this.$util.redirectTo('/pages_promotion/pinfan/detail', {
|
||||
pinfan_id: e.pintuan_id
|
||||
});
|
||||
},
|
||||
imageError(index) {
|
||||
this.list[index].goods_image = this.$util.getDefaultImage().goods;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.diy-pinfan {
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 16rpx;
|
||||
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 6rpx 0;
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.tag-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 4rpx;
|
||||
|
||||
>view {
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
border: 2rpx solid $base-color;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 10rpx;
|
||||
font-size: $font-size-activity-tag;
|
||||
color: $base-color;
|
||||
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
font-size: $font-size-activity-tag;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-right: -6rpx;
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
>view:last-of-type {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: $font-size-tag;
|
||||
color: $color-tip;
|
||||
text-decoration: line-through;
|
||||
margin: 0 10rpx 4rpx 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
bottom: 10rpx;
|
||||
height: 90rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
background-color: $base-color;
|
||||
color: #ffffff;
|
||||
|
||||
.text {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.fan {
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-slide {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.scroll {
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 20rpx;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.item.shadow {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(3n+3) {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&.multi-content {
|
||||
height: 188rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
|
||||
&.multi-hidden {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-top: auto;
|
||||
font-size: $font-size-activity-tag;
|
||||
|
||||
.content-tuan-box {
|
||||
border-radius: 4rpx;
|
||||
color: #ffffff;
|
||||
background-color: $base-color;
|
||||
padding: 6rpx;
|
||||
}
|
||||
|
||||
.content-tuan-price {
|
||||
border-radius: 4rpx;
|
||||
padding: 4rpx 6rpx;
|
||||
border: 2rpx solid $base-color;
|
||||
color: $base-color;
|
||||
margin-left: -2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
white-space: nowrap;
|
||||
margin-top: 10rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
height: 32rpx;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
776
components/diy-components/diy-pintuan.vue
Normal file
776
components/diy-components/diy-pintuan.vue
Normal file
@@ -0,0 +1,776 @@
|
||||
<template>
|
||||
<x-skeleton :type="skeletonType" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="diy-pintuan" :class="[value.template, value.style]" :style="warpCss">
|
||||
<view v-if="value.titleStyle.isShow && list && list.length" :class="[value.titleStyle.style, 'pintuan-head']" :style="{
|
||||
backgroundImage:
|
||||
'url(' + $util.img(value.titleStyle.backgroundImage) + '), linear-gradient(to right,' + value.titleStyle.bgColorStart + ',' + value.titleStyle.bgColorEnd + ')'
|
||||
}">
|
||||
<view v-if="value.titleStyle.leftStyle == 'text'" class="left-text" :style="{ fontSize: value.titleStyle.fontSize * 2 + 'rpx', color: value.titleStyle.textColor, fontWeight: value.titleStyle.fontWeight ? 'bold' : '' }">
|
||||
{{ value.titleStyle.leftText }}
|
||||
</view>
|
||||
<image v-else class="left-img" :src="$util.img(value.titleStyle.leftImg)" mode="heightFix"/>
|
||||
<view class="head-content">
|
||||
<view class="img-warp">
|
||||
<block v-if="headData && headData.member_list && headData.member_list.length">
|
||||
<image v-for="(item, index) in headData.member_list" :key="index" :src="$util.img(item.member_img || 'public/static/img/default_img/square.png')" mode="aspectFill" @error="headImageError(index)"/>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image :src="$util.img('public/static/img/default_img/square.png')" mode="aspectFill"/>
|
||||
<image :src="$util.img('public/static/img/default_img/square.png')" mode="aspectFill"/>
|
||||
<image :src="$util.img('public/static/img/default_img/square.png')" mode="aspectFill"/>
|
||||
</block>
|
||||
</view>
|
||||
<view :style="{ color: value.titleStyle.textColor }">
|
||||
<text>{{ value.titleStyle.virtualNum || headData.pintuan_count }}</text>
|
||||
<text>{{ value.titleStyle.style == 'style-2' ? '人参与' : '人拼团成功' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="head-right" :style="{ fontSize: value.titleStyle.moreFontSize * 2 + 'rpx', color: value.titleStyle.moreColor }" @click="$util.redirectTo('/pages_promotion/pintuan/list')">
|
||||
<text>{{ value.titleStyle.more }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<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="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>
|
||||
<view class="content" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="tag-wrap" v-if="value.groupStyle.control || value.saleStyle.control">
|
||||
<view v-if="value.groupStyle.control" :style="{
|
||||
color: value.theme == 'diy' ? value.groupStyle.bgColorStart : '',
|
||||
borderColor: value.theme == 'diy' ? value.groupStyle.bgColorStart : ''
|
||||
}">
|
||||
<text class="iconfont icon-yonghu3" :style="{ backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColorStart : '' }"></text>
|
||||
<text>{{ item.pintuan_num }}人团</text>
|
||||
</view>
|
||||
<view v-if="value.saleStyle.control"
|
||||
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '', borderColor: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
<text>已拼{{ item.order_num }}件</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-wrap">
|
||||
<view class="price-wrap">
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ item.pintuan_price.split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + item.pintuan_price.split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
¥{{ item.price }}
|
||||
</view>
|
||||
</view>
|
||||
<button v-if="value.btnStyle.control" :style="{
|
||||
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
|
||||
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
|
||||
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
|
||||
}">
|
||||
{{ value.btnStyle.text }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<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="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 v-if="value.groupStyle.control && value.style == 'style-1'" class="num" :style="{
|
||||
color: value.theme == 'diy' ? value.groupStyle.color : '',
|
||||
background: value.theme == 'diy' ? 'linear-gradient(to right,' + value.groupStyle.bgColorStart + ',' + value.groupStyle.bgColorEnd + ')' : ''
|
||||
}">
|
||||
{{ item.pintuan_num }}人团
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view
|
||||
v-if="value.goodsNameStyle.control && (value.style == 'style-1' || value.style == 'style-3')"
|
||||
class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="price-wrap" v-if="value.priceStyle.mainControl && value.style != 'style-3'">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ item.pintuan_price.split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + item.pintuan_price.split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="other-info-wrap" v-if="value.style == 'style-3'">
|
||||
<view class="price-wrap" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ item.pintuan_price.split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + item.pintuan_price.split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="sale-action">去参团</view>
|
||||
</view>
|
||||
|
||||
<view class="sale-num" v-if="value.style == 'style-2'">已拼{{ item.sale_num }}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</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', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex" @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(dataIndex)"/>
|
||||
<view v-if="value.groupStyle.control && value.style != 'style-2'" class="num" :style="{
|
||||
color: value.theme == 'diy' ? value.groupStyle.color : '',
|
||||
background: value.theme == 'diy' ? 'linear-gradient(to right,' + value.groupStyle.bgColorStart + ',' + value.groupStyle.bgColorEnd + ')' : ''
|
||||
}">
|
||||
{{ item.pintuan_num }}人团
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view v-if="value.goodsNameStyle.control && value.style != 'style-2'" class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="price-wrap" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ item.pintuan_price.split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + item.pintuan_price.split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="sale-num" v-if="value.style == 'style-2'">已拼{{ item.sale_num }}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-pintuan',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
skeletonType:'',
|
||||
skeletonConfig: {},
|
||||
list: [],
|
||||
page: 1,
|
||||
scrollWidth: 0,
|
||||
headData: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initSkeleton();
|
||||
this.getData();
|
||||
this.getHeadData();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
this.getData();
|
||||
this.getHeadData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
// 商品项样式
|
||||
goodsItemCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.elementBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if (this.value.ornament.type == 'shadow') {
|
||||
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color + ';';
|
||||
}
|
||||
if (this.value.ornament.type == 'stroke') {
|
||||
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
|
||||
}
|
||||
|
||||
const screenWidth = uni.getSystemInfoSync().windowWidth;
|
||||
if (this.value.template == 'horizontal-slide') {
|
||||
var width = '';
|
||||
if (this.value.slideMode == 'scroll' && this.value.goodsMarginType == 'diy') width = this.rpxUpPx(this
|
||||
.value.goodsMarginNum * 2);
|
||||
else if (this.value.template == 'horizontal-slide' && this.value.style == 'style-2')
|
||||
width = [screenWidth - this.rpxUpPx(212) * 3 - this.rpxUpPx(this.value.margin.both * 2) * 2] / 6;
|
||||
else width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value
|
||||
.margin.both * 2) * 2] / 6;
|
||||
obj += 'margin-left:' + width + 'px;';
|
||||
obj += 'margin-right:' + width + 'px;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
swiperHeight() {
|
||||
if (this.value.template == 'horizontal-slide' && this.value.style == 'style-2') {
|
||||
if (this.value.nameLineMode == 'multiple') {
|
||||
if (this.value.ornament.type == 'shadow') return '360rpx';
|
||||
else return '342rpx';
|
||||
}
|
||||
if (this.value.ornament.type == 'shadow') return '324rpx';
|
||||
else return '308rpx';
|
||||
} else {
|
||||
if (this.value.nameLineMode == 'multiple') {
|
||||
if (this.value.ornament.type == 'shadow') return '400rpx';
|
||||
else return '382rpx';
|
||||
}
|
||||
if (this.value.ornament.type == 'shadow') return '364rpx';
|
||||
else return '348rpx';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initSkeleton() {
|
||||
if (this.value.template == 'row1-of1') {
|
||||
|
||||
// 单列 风格
|
||||
this.skeletonType = 'list';
|
||||
this.skeletonConfig = {
|
||||
textRows: 3
|
||||
};
|
||||
|
||||
} else if (this.value.template == 'horizontal-slide') {
|
||||
|
||||
// 横向滑动 风格
|
||||
this.skeletonType = 'waterfall';
|
||||
this.skeletonConfig = {
|
||||
gridRows: 1,
|
||||
gridColumns: 3,
|
||||
headHeight: '200rpx',
|
||||
textRows: 2,
|
||||
textWidth: ['100%', '80%']
|
||||
};
|
||||
|
||||
}
|
||||
},
|
||||
rpxUpPx(res) {
|
||||
const screenWidth = uni.getSystemInfoSync().windowWidth;
|
||||
var data = (screenWidth * parseInt(res)) / 750;
|
||||
return Math.floor(data);
|
||||
},
|
||||
getHeadData() {
|
||||
var data = {
|
||||
num: 3
|
||||
};
|
||||
this.$api.sendRequest({
|
||||
url: '/pintuan/api/order/pintuanmember',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.headData = res.data;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getData() {
|
||||
var data = {
|
||||
num: this.value.count
|
||||
};
|
||||
if (this.value.sources == 'diy') {
|
||||
data.num = 6;
|
||||
data.goods_id_arr = this.value.goodsId.toString();
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/pintuan/api/goods/lists',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.list = res.data;
|
||||
|
||||
// 切屏滚动，每页显示固定数量
|
||||
if (this.value.template == 'horizontal-slide' && this.value.slideMode == 'slide') {
|
||||
let size = 3;
|
||||
let temp = [];
|
||||
this.page = Math.ceil(this.list.length / size);
|
||||
for (var i = 0; i < this.page; i++) {
|
||||
temp[i] = [];
|
||||
for (var j = i * size; j < this.list.length; j++) {
|
||||
if (temp[i].length == size) break;
|
||||
temp[i].push(this.list[j]);
|
||||
}
|
||||
}
|
||||
this.list = temp;
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(e) {
|
||||
this.$util.redirectTo('/pages_promotion/pintuan/detail', {
|
||||
pintuan_id: e.pintuan_id
|
||||
});
|
||||
},
|
||||
imageError(index) {
|
||||
if (this.list[index]) this.list[index].goods_image = this.$util.getDefaultImage().goods;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
headImageError(index) {
|
||||
this.headData.member_list[index].member_img = this.$util.img('public/static/img/default_img/square.png');
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.diy-pintuan {
|
||||
overflow: hidden;
|
||||
|
||||
.pintuan-head {
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
|
||||
.left-img {
|
||||
width: 174rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.head-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 50rpx;
|
||||
margin-right: auto;
|
||||
color: #fff;
|
||||
|
||||
.img-warp {
|
||||
position: relative;
|
||||
margin-right: 8rpx;
|
||||
line-height: 1;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #ff3d3d;
|
||||
margin-left: -14rpx;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 2rpx;
|
||||
height: 28rpx;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -32rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $font-size-sub;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
.head-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36rpx;
|
||||
background: linear-gradient(270deg, #ffbd5b 0%, #fd882e 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 2rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
position: relative;
|
||||
left: 6rpx;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
padding: 6rpx 4rpx 4rpx;
|
||||
background-color: #fff;
|
||||
color: #ffbd5b;
|
||||
border-radius: 50%;
|
||||
transform: scale(0.6);
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 16rpx;
|
||||
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 6rpx 0;
|
||||
|
||||
.tag-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
>view {
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
border: 2rpx solid $base-color;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 10rpx;
|
||||
font-size: $font-size-activity-tag;
|
||||
color: $base-color;
|
||||
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
font-size: $font-size-activity-tag;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-right: -6rpx;
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.bottom-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
overflow: hidden;
|
||||
width: 260rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
|
||||
>view:last-of-type {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
color: var(--price-color);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: $font-size-tag;
|
||||
color: $color-tip;
|
||||
line-height: 1;
|
||||
text-decoration: line-through;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 20rpx;
|
||||
min-width: 112rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 0;
|
||||
color: var(--btn-text-color);
|
||||
background-color: $base-color;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-slide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 20rpx;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.item.shadow {
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 80rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: $font-size-tag;
|
||||
line-height: 1;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
padding: 10rpx;
|
||||
transform: translate(50%);
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10rpx 10rpx 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&.multi-content {
|
||||
height: 142rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
font-size: $font-size-base;
|
||||
|
||||
&.multi-hidden {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
margin-top: 10rpx;
|
||||
font-weight: bold;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
height: 32rpx;
|
||||
color: var(--price-color);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 200rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
.item {
|
||||
width: 212rpx;
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
width: 210rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 212rpx;
|
||||
height: 212rpx;
|
||||
|
||||
>image {
|
||||
width: 212rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
text-align: center;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.sale-num {
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
.other-info-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sale-action {
|
||||
font-size: $font-size-tag;
|
||||
width: 94rpx;
|
||||
height: 44rpx;
|
||||
background: linear-gradient(131deg, #3edb73 0%, #1db576 100%);
|
||||
border-radius: 8rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 44rpx;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
435
components/diy-components/diy-presale.vue
Normal file
435
components/diy-components/diy-presale.vue
Normal file
@@ -0,0 +1,435 @@
|
||||
<template>
|
||||
<x-skeleton :type="skeletonType" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="diy-presale" v-if="list.length" :class="[value.template, value.style]" :style="warpCss">
|
||||
<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="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>
|
||||
<view class="content" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.btnStyle.control">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ showPrice(item).split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + showPrice(item).split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<button v-if="value.btnStyle.control" :style="{
|
||||
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
|
||||
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
|
||||
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
|
||||
}">
|
||||
{{ value.btnStyle.text }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<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="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>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ showPrice(item).split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + showPrice(item).split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</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', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex" @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(dataIndex)"/>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view v-if="value.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ showPrice(item).split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + showPrice(item).split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-presale',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
skeletonType:'',
|
||||
skeletonConfig: {},
|
||||
list: [],
|
||||
page: 1
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initSkeleton();
|
||||
this.getData();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
// 商品项样式
|
||||
goodsItemCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.elementBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if (this.value.ornament.type == 'shadow') {
|
||||
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color + ';';
|
||||
}
|
||||
if (this.value.ornament.type == 'stroke') {
|
||||
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
|
||||
}
|
||||
const screenWidth = uni.getSystemInfoSync().windowWidth;
|
||||
if (this.value.template == 'horizontal-slide') {
|
||||
var width = '';
|
||||
if (this.value.slideMode == 'scroll' && this.value.goodsMarginType == 'diy') width = this.rpxUpPx(this
|
||||
.value.goodsMarginNum * 2);
|
||||
else width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value
|
||||
.margin.both * 2) * 2] / 6;
|
||||
obj += 'margin-right:' + width + 'px;';
|
||||
obj += 'margin-left:' + width + 'px;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
swiperHeight() {
|
||||
if (this.value.nameLineMode == 'multiple') {
|
||||
return this.value.ornament.type == 'shadow' ? '390rpx' : '382rpx';
|
||||
}
|
||||
return this.value.ornament.type == 'shadow' ? '364rpx' : '348rpx';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initSkeleton() {
|
||||
if (this.value.template == 'row1-of1') {
|
||||
|
||||
// 单列 风格
|
||||
this.skeletonType = 'list';
|
||||
this.skeletonConfig = {
|
||||
textRows: 2
|
||||
};
|
||||
|
||||
} else if (this.value.template == 'horizontal-slide') {
|
||||
|
||||
// 横向滑动 风格
|
||||
this.skeletonType = 'waterfall';
|
||||
this.skeletonConfig = {
|
||||
gridRows: 1,
|
||||
gridColumns: 3,
|
||||
headHeight: '200rpx',
|
||||
textRows: 2,
|
||||
textWidth: ['100%', '80%']
|
||||
};
|
||||
|
||||
}
|
||||
},
|
||||
rpxUpPx(res) {
|
||||
const screenWidth = uni.getSystemInfoSync().windowWidth;
|
||||
var data = (screenWidth * parseInt(res)) / 750;
|
||||
return Math.floor(data);
|
||||
},
|
||||
getData() {
|
||||
var data = {
|
||||
num: this.value.count
|
||||
};
|
||||
if (this.value.sources == 'diy') {
|
||||
data.num = 0;
|
||||
data.goods_id_arr = this.value.goodsId.toString();
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/presale/api/goods/lists',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.list = res.data;
|
||||
|
||||
// 切屏滚动，每页显示固定数量
|
||||
if (this.value.template == 'horizontal-slide' && this.value.slideMode == 'slide') {
|
||||
let size = 3;
|
||||
let temp = [];
|
||||
this.page = Math.ceil(this.list.length / size);
|
||||
for (var i = 0; i < this.page; i++) {
|
||||
temp[i] = [];
|
||||
for (var j = i * size; j < this.list.length; j++) {
|
||||
if (temp[i].length == size) break;
|
||||
temp[i].push(this.list[j]);
|
||||
}
|
||||
}
|
||||
this.list = temp;
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(e) {
|
||||
this.$util.redirectTo('/pages_promotion/presale/detail', {
|
||||
id: e.presale_id
|
||||
});
|
||||
},
|
||||
imageError(index) {
|
||||
this.list[index].goods_image = this.$util.getDefaultImage().goods;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
showPrice(data) {
|
||||
let price = data.price;
|
||||
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
|
||||
return price;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.diy-presale {
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 16rpx;
|
||||
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
position: relative;
|
||||
padding: 6rpx 0;
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
left: 0;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 20rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
background-color: $base-color;
|
||||
color: #fff;
|
||||
min-width: 112rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-slide {
|
||||
.scroll {
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 20rpx;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.item.shadow {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&.multi-content {
|
||||
height: 134rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
|
||||
&.multi-hidden {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
margin-top: auto;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
components/diy-components/diy-quick-nav.vue
Normal file
116
components/diy-components/diy-quick-nav.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<view :style="componentStyle">
|
||||
<scroll-view class="quick-nav" scroll-x="true">
|
||||
<!-- #ifdef MP -->
|
||||
<view class="uni-scroll-view-content">
|
||||
<!-- #endif -->
|
||||
<view
|
||||
class="quick-nav-item"
|
||||
v-for="(item, index) in value.list"
|
||||
:key="index"
|
||||
@click="redirectTo(item.link)"
|
||||
:style="{ background: 'linear-gradient(to right,' + item.bgColorStart ? item.bgColorStart : '' + ',' + item.bgColorEnd ? item.bgColorEnd : '' + ')' }"
|
||||
>
|
||||
<view class="quick-img" v-if="item.imageUrl || item.icon">
|
||||
<image v-if="item.iconType == 'img'" :src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')" mode="heightFix" :show-menu-by-longpress="true"></image>
|
||||
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon" :value="item.style ? item.style : null" :style="{ fontSize: '60rpx' }"></diy-icon>
|
||||
</view>
|
||||
<text class="quick-text" :style="{ color: item.textColor }">{{ item.title }}</text>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</scroll-view>
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-quick-nav',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
computed: {
|
||||
componentStyle() {
|
||||
var css = '';
|
||||
css += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
css += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
css += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
|
||||
css += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
|
||||
return css;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
redirectTo(link) {
|
||||
if (link.wap_url) {
|
||||
if (this.$util.getCurrRoute() == 'pages/member/index' && !this.storeToken) {
|
||||
this.$refs.login.open(link.wap_url);
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.$util.diyRedirectTo(link);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.quick-nav >>> .uni-scroll-view-content {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.quick-nav {
|
||||
.quick-nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 18rpx;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
border-radius: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
height: 48rpx;
|
||||
&:first-of-type{
|
||||
padding-left: 12rpx;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.quick-img {
|
||||
margin-right: 6rpx;
|
||||
height: 30rpx;
|
||||
line-height: 1;
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-text {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
56
components/diy-components/diy-rich-text.vue
Normal file
56
components/diy-components/diy-rich-text.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<view class="rich-text-box" :style="richTextWarpCss">
|
||||
<rich-text :nodes="html"></rich-text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 富文本
|
||||
import htmlParser from '@/common/js/html-parser';
|
||||
export default {
|
||||
name: 'diy-rich-text',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
html: ''
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.html = htmlParser(this.value.html);
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
computed: {
|
||||
richTextWarpCss: function() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.rich-text-box {
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
514
components/diy-components/diy-rubik-cube.vue
Normal file
514
components/diy-components/diy-rubik-cube.vue
Normal file
@@ -0,0 +1,514 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 自定义 -->
|
||||
<view v-if="value.mode == 'custom-rubik-cube'">
|
||||
<view style="position: relative;"><rich-text :nodes="customHtml"></rich-text></view>
|
||||
</view>
|
||||
<view v-else :class="['rubik-cube', value.mode]" :style="rubikCubeWrapCss">
|
||||
<!-- 1左2右 -->
|
||||
<template v-if="value.mode == 'row1-lt-of2-rt'">
|
||||
<view class="template-left">
|
||||
<view :class="['item', value.mode]" @click="$util.diyRedirectTo(value.list[0].link)" :style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }">
|
||||
<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'" :style="list[0].pageItemStyle" :show-menu-by-longpress="true"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="template-right">
|
||||
<template v-for="(item, index) in list">
|
||||
<template v-if="index > 0">
|
||||
<view :key="index" :class="['item', value.mode]" @click="$util.diyRedirectTo(item.link)" :style="{ marginBottom: value.imageGap * 2 + 'rpx', width: item.imgWidth, height: item.imgHeight + 'px' }">
|
||||
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" :style="item.pageItemStyle" :show-menu-by-longpress="true"/>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 1左3右 -->
|
||||
<template v-else-if="value.mode == 'row1-lt-of1-tp-of2-bm'">
|
||||
<view class="template-left">
|
||||
<view :class="['item', value.mode]" :style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }" @click="$util.diyRedirectTo(value.list[0].link)">
|
||||
<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'" :style="list[0].pageItemStyle" :show-menu-by-longpress="true"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="template-right">
|
||||
<view :class="['item', value.mode]" :style="{ marginBottom: value.imageGap * 2 + 'rpx', width: list[1].imgWidth, height: list[1].imgHeight + 'px' }" @click="$util.diyRedirectTo(value.list[1].link)">
|
||||
<image :src="$util.img(value.list[1].imageUrl)" :mode="list[1].imageMode || 'scaleToFill'" :style="list[1].pageItemStyle" :show-menu-by-longpress="true"/>
|
||||
</view>
|
||||
<view class="template-bottom">
|
||||
<template v-for="(item, index) in list">
|
||||
<template v-if="index > 1">
|
||||
<view :key="index" :class="['item', value.mode]" @click="$util.diyRedirectTo(item.link)"
|
||||
:style="{
|
||||
marginRight: value.imageGap * 2 + 'rpx',
|
||||
width: item.imgWidth,
|
||||
height: item.imgHeight + 'px'
|
||||
}">
|
||||
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" :style="item.pageItemStyle" :show-menu-by-longpress="true"/>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<view :class="['item', value.mode]" v-for="(item, index) in list" :key="index"
|
||||
@click="$util.diyRedirectTo(item.link)"
|
||||
:style="{ marginRight: value.imageGap * 2 + 'rpx', marginBottom: value.imageGap * 2 + 'rpx', width: item.widthStyle, height: item.imgHeight + 'px' }">
|
||||
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" :style="item.pageItemStyle" :show-menu-by-longpress="true"/>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 魔方、橱窗
|
||||
import htmlParser from '@/common/js/html-parser';
|
||||
export default {
|
||||
name: 'diy-rubik-cube',
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
customHtml: ''
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.value.mode == 'custom-rubik-cube') {
|
||||
this.value.diyHtml = this.value.diyHtml.replace(/"/g, '"');
|
||||
this.customHtml = htmlParser(this.value.diyHtml);
|
||||
} else {
|
||||
var singleRow = {
|
||||
'row1-of2': {
|
||||
ratio: 2,
|
||||
width: 'calc((100% - ' + uni.upx2px(this.value.imageGap * 2) + 'px) / 2)'
|
||||
},
|
||||
'row1-of3': {
|
||||
ratio: 3,
|
||||
width: 'calc((100% - ' + uni.upx2px(this.value.imageGap * 4) + 'px) / 3)'
|
||||
},
|
||||
'row1-of4': {
|
||||
ratio: 4,
|
||||
width: 'calc((100% - ' + uni.upx2px(this.value.imageGap * 6) + 'px) / 4)'
|
||||
}
|
||||
};
|
||||
|
||||
if (singleRow[this.value.mode]) {
|
||||
this.calcSingleRow(singleRow[this.value.mode]);
|
||||
} else if (this.value.mode == 'row2-lt-of2-rt') {
|
||||
this.calcFourSquare();
|
||||
} else if (this.value.mode == 'row1-lt-of2-rt') {
|
||||
this.calcRowOneLeftOfTwoRight();
|
||||
} else if (this.value.mode == 'row1-tp-of2-bm') {
|
||||
this.calcRowOneTopOfTwoBottom();
|
||||
} else if (this.value.mode == 'row1-lt-of1-tp-of2-bm') {
|
||||
this.calcRowOneLeftOfOneTopOfTwoBottom();
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
computed: {
|
||||
list() {
|
||||
var arr = JSON.parse(JSON.stringify(this.value.list));
|
||||
arr.forEach((item, index) => {
|
||||
item.pageItemStyle = this.countBorderRadius(this.value.mode, index);
|
||||
});
|
||||
return arr;
|
||||
},
|
||||
rubikCubeWrapCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 魔方：单行多个，平分宽度
|
||||
* 公式：
|
||||
* 宽度：屏幕宽度/2，示例：375/2=187.5
|
||||
* 比例：原图高/原图宽，示例：322/690=0.46
|
||||
* 高度：宽度*比例，示例：187.5*0.46=86.25
|
||||
*/
|
||||
calcSingleRow(params) {
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
let maxHeight = 0;
|
||||
|
||||
this.list.forEach((item, index) => {
|
||||
var ratio = item.imgHeight / item.imgWidth;
|
||||
|
||||
let width = res.windowWidth - uni.upx2px(this.value.margin.both *
|
||||
2); // 减去左右间距
|
||||
if (this.value.imageGap > 0) {
|
||||
width -= uni.upx2px(params.ratio * this.value.imageGap * 2); // 减去间隙
|
||||
}
|
||||
item.imgWidth = width / params.ratio;
|
||||
item.imgHeight = item.imgWidth * ratio;
|
||||
|
||||
if (maxHeight == 0 || maxHeight < item.imgHeight) maxHeight = item
|
||||
.imgHeight;
|
||||
})
|
||||
|
||||
this.list.forEach((item, index) => {
|
||||
item.widthStyle = params.width;
|
||||
item.imgHeight = maxHeight;
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 魔方：四方型，各占50%
|
||||
*/
|
||||
calcFourSquare() {
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
let maxHeightFirst = 0;
|
||||
let maxHeightTwo = 0;
|
||||
this.list.forEach((item, index) => {
|
||||
var ratio = item.imgHeight / item.imgWidth;
|
||||
item.imgWidth = res.windowWidth;
|
||||
item.imgWidth -= uni.upx2px(this.value.margin.both * 4);
|
||||
if (this.value.imageGap > 0) {
|
||||
item.imgWidth -= uni.upx2px(this.value.imageGap * 2);
|
||||
}
|
||||
item.imgWidth = item.imgWidth / 2;
|
||||
item.imgHeight = item.imgWidth * ratio;
|
||||
|
||||
|
||||
// 获取每行最大高度
|
||||
if (index <= 1) {
|
||||
if (maxHeightFirst == 0 || maxHeightFirst < item.imgHeight) {
|
||||
maxHeightFirst = item.imgHeight;
|
||||
}
|
||||
} else if (index > 1) {
|
||||
if (maxHeightTwo == 0 || maxHeightTwo < item.imgHeight) {
|
||||
maxHeightTwo = item.imgHeight;
|
||||
}
|
||||
}
|
||||
});
|
||||
this.list.forEach((item, index) => {
|
||||
item.imgWidth = 'calc((100% - ' + uni.upx2px(this.value.imageGap * 2) +
|
||||
'px) / 2)';
|
||||
item.widthStyle = item.imgWidth;
|
||||
if (index <= 1) {
|
||||
item.imgHeight = maxHeightFirst;
|
||||
} else if (index > 1) {
|
||||
item.imgHeight = maxHeightTwo;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 魔方：1左2右
|
||||
*/
|
||||
calcRowOneLeftOfTwoRight() {
|
||||
let rightHeight = 0; // 右侧两图平分高度
|
||||
let divide = 'left'; // 划分规则，left：左，right：右
|
||||
if (this.list[1].imgWidth === this.list[2].imgWidth) divide = 'right';
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
this.list.forEach((item, index) => {
|
||||
if (index == 0) {
|
||||
var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
|
||||
item.imgWidth = res.windowWidth - uni.upx2px(this.value.margin.both * 4) - uni.upx2px(this.value.imageGap * 2);
|
||||
item.imgWidth = item.imgWidth / 2;
|
||||
item.imgHeight = item.imgWidth * ratio;
|
||||
rightHeight = (item.imgHeight - uni.upx2px(this.value.imageGap * 2)) / 2;
|
||||
item.imgWidth += 'px';
|
||||
} else {
|
||||
item.imgWidth = this.list[0].imgWidth;
|
||||
item.imgHeight = rightHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 魔方：1上2下
|
||||
*/
|
||||
calcRowOneTopOfTwoBottom() {
|
||||
var maxHeight = 0;
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
this.list.forEach((item, index) => {
|
||||
|
||||
var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
|
||||
if (index == 0) {
|
||||
item.imgWidth = res.windowWidth - uni.upx2px(this.value.margin.both * 4);
|
||||
} else if (index > 0) {
|
||||
item.imgWidth = res.windowWidth - uni.upx2px(this.value.margin.both * 4) - uni.upx2px(this.value.imageGap * 2);
|
||||
item.imgWidth = item.imgWidth / 2;
|
||||
}
|
||||
|
||||
item.imgHeight = item.imgWidth * ratio;
|
||||
|
||||
// 获取最大高度
|
||||
if (index > 0 && (maxHeight == 0 || maxHeight < item.imgHeight))
|
||||
maxHeight = item.imgHeight;
|
||||
|
||||
});
|
||||
this.list.forEach((item, index) => {
|
||||
item.imgWidth += 'px';
|
||||
item.widthStyle = item.imgWidth;
|
||||
if (index > 0) item.imgHeight = maxHeight;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 魔方：1左3右
|
||||
*/
|
||||
calcRowOneLeftOfOneTopOfTwoBottom() {
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
this.list.forEach((item, index) => {
|
||||
// 左图
|
||||
if (index == 0) {
|
||||
var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
|
||||
item.imgWidth = res.windowWidth - uni.upx2px(this.value.margin.both * 4) - uni.upx2px(this.value.imageGap * 2);
|
||||
item.imgWidth = item.imgWidth / 2;
|
||||
item.imgHeight = item.imgWidth * ratio;
|
||||
} else if (index == 1) {
|
||||
item.imgWidth = this.list[0].imgWidth;
|
||||
item.imgHeight = (this.list[0].imgHeight - uni.upx2px(this.value.imageGap * 2)) / 2;
|
||||
} else if (index > 1) {
|
||||
item.imgWidth = (this.list[0].imgWidth - uni.upx2px(this.value.imageGap * 2)) / 2;
|
||||
item.imgHeight = this.list[1].imgHeight;
|
||||
}
|
||||
});
|
||||
|
||||
this.list.forEach((item, index) => {
|
||||
item.imgWidth += 'px';
|
||||
item.imgHeight;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
countBorderRadius(type, index) {
|
||||
var obj = '';
|
||||
if (this.value.elementAngle == 'right') {
|
||||
return obj;
|
||||
}
|
||||
var defaultData = {
|
||||
'row1-lt-of2-rt': [
|
||||
['border-top-right-radius', 'border-bottom-right-radius'],
|
||||
['border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
|
||||
['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
|
||||
],
|
||||
'row1-lt-of1-tp-of2-bm': [
|
||||
['border-top-right-radius', 'border-bottom-right-radius'],
|
||||
['border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
|
||||
['border-radius'],
|
||||
['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
|
||||
],
|
||||
'row1-tp-of2-bm': [
|
||||
['border-bottom-left-radius', 'border-bottom-right-radius'],
|
||||
['border-top-left-radius', 'border-bottom-right-radius', 'border-top-right-radius'],
|
||||
['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
|
||||
],
|
||||
'row2-lt-of2-rt': [
|
||||
['border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
|
||||
['border-top-left-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'],
|
||||
['border-top-left-radius', 'border-bottom-right-radius', 'border-top-right-radius'],
|
||||
['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
|
||||
],
|
||||
'row1-of4': [
|
||||
['border-top-right-radius', 'border-bottom-right-radius'],
|
||||
['border-radius'],
|
||||
['border-radius'],
|
||||
['border-top-left-radius', 'border-bottom-left-radius']
|
||||
],
|
||||
'row1-of3': [
|
||||
['border-top-right-radius', 'border-bottom-right-radius'],
|
||||
['border-radius'],
|
||||
['border-top-left-radius', 'border-bottom-left-radius']
|
||||
],
|
||||
'row1-of2': [
|
||||
['border-top-right-radius', 'border-bottom-right-radius'],
|
||||
['border-top-left-radius', 'border-bottom-left-radius']
|
||||
]
|
||||
};
|
||||
|
||||
defaultData[type][index].forEach((item, index) => {
|
||||
// obj += item + ':' + this.value.aroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
});
|
||||
return obj;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.rubik-cube {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.rubik-cube .item {
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rubik-cube .item image {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 一行两个
|
||||
.rubik-cube .item.row1-of2 {
|
||||
box-sizing: border-box;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-of2:nth-child(1) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-of2:nth-child(2) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
// 一行三个
|
||||
.rubik-cube .item.row1-of3 {
|
||||
box-sizing: border-box;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-of3:nth-child(1) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-of3:nth-child(3) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
// 一行四个
|
||||
.rubik-cube .item.row1-of4 {
|
||||
box-sizing: border-box;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-of4:nth-child(1) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-of4:nth-child(4) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
// 两左两右
|
||||
.rubik-cube .item.row2-lt-of2-rt {
|
||||
// width: 50%;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rubik-cube .item.row2-lt-of2-rt:nth-child(1) {
|
||||
margin-left: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.rubik-cube .item.row2-lt-of2-rt:nth-child(2) {
|
||||
margin-right: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.rubik-cube .item.row2-lt-of2-rt:nth-child(3) {
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.rubik-cube .item.row2-lt-of2-rt:nth-child(4) {
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
// 一左两右
|
||||
.rubik-cube .template-left,
|
||||
.rubik-cube .template-right {
|
||||
// width: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rubik-cube .template-left .item.row1-lt-of2-rt:nth-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.rubik-cube .template-right .item.row1-lt-of2-rt:nth-child(2) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.rubik-cube.row1-lt-of2-rt .template-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// 一上两下
|
||||
.rubik-cube .item.row1-tp-of2-bm:nth-child(1) {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-tp-of2-bm:nth-child(2) {
|
||||
// width: 50%;
|
||||
box-sizing: border-box;
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-tp-of2-bm:nth-child(3) {
|
||||
// width: 50%;
|
||||
box-sizing: border-box;
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
// 一左三右
|
||||
.rubik-cube .template-left .item.row1-lt-of1-tp-of2-bm {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rubik-cube .template-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.rubik-cube .template-bottom .item:nth-child(2) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
</style>
|
||||
336
components/diy-components/diy-search.vue
Normal file
336
components/diy-components/diy-search.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<view class="diy-search">
|
||||
<view class="diy-search-wrap" :class="value.positionWay" :style="fixedCss">
|
||||
<view :class="['search-box','search-box-'+value.searchStyle]" :style="searchWrapCss" @click="search()">
|
||||
<block v-if="[1,2].includes(value.searchStyle)">
|
||||
<view class="img" v-if="value.searchStyle == 2 && value.iconType == 'img'">
|
||||
<image :src="$util.img(value.imageUrl)" mode="heightFix"/>
|
||||
</view>
|
||||
<diy-icon class="icon" v-if="value.searchStyle == 2 && value.iconType == 'icon'" :icon="value.icon"
|
||||
:value="value.style ? value.style : 'null'"
|
||||
:style="{ maxWidth: 30 * 2 + 'rpx', maxHeight: 30 * 2 + 'rpx' }"></diy-icon>
|
||||
<view class="search-content" :style="inputStyle">
|
||||
<input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title" v-model="searchText" @confirm="search()" disabled="true" :placeholderStyle="placeholderStyle" />
|
||||
<text class="iconfont icon-sousuo3" @click.stop="search()" :style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="value.searchStyle == 3">
|
||||
<view class="search-content" :style="inputStyle" @click.stop="search()">
|
||||
<text class="iconfont icon-sousuo3" :style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
|
||||
<input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title" v-model="searchText" @confirm="search()" disabled="true" @click.stop="search()" :placeholderStyle="placeholderStyle" />
|
||||
<text class="search-content-btn" @click.stop="search()" :style="{ 'backgroundColor': value.pageBgColor ? value.pageBgColor : 'rgba(0,0,0,0)' }">搜索</text>
|
||||
</view>
|
||||
<view class="img" v-if="value.iconType == 'img'" @click.stop="redirectTo(value.searchLink)"><image :src="$util.img(value.imageUrl)" mode="heightFix"/>
|
||||
</view>
|
||||
<diy-icon class="icon" v-if="value.iconType == 'icon'" :icon="value.icon"
|
||||
:value="value.style ? value.style : 'null'"
|
||||
:style="{ maxWidth: 30 * 2 + 'rpx', maxHeight: 30 * 2 + 'rpx' }"
|
||||
@click.stop="redirectTo(value.searchLink)"></diy-icon>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 解决fixed定位后导航栏塌陷的问题 -->
|
||||
<view v-if="value.positionWay == 'fixed'" class="u-navbar-placeholder" :style="{ width: '100%', paddingTop: moduleHeight }"></view>
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 获取系统状态栏的高度
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
let menuButtonInfo = {};
|
||||
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
||||
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
|
||||
// 搜索
|
||||
export default {
|
||||
name: 'diy-search',
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
topNavColor: String,
|
||||
global: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
haveTopCategory: {
|
||||
type: Boolean
|
||||
},
|
||||
followOfficialAccount: {
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchText: '',
|
||||
menuButtonInfo: menuButtonInfo,
|
||||
height: 0,
|
||||
placeholderHeight: 0,
|
||||
moduleHeight: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
fixedCss() {
|
||||
var obj = '';
|
||||
if (this.value.positionWay == 'fixed') {
|
||||
let top = this.fixedTop;
|
||||
// 固定定位
|
||||
if (this.global.topNavBg)
|
||||
obj += 'background-color:' + (this.topNavColor == 'transparent' ? this.value.pageBgColor : this
|
||||
.topNavColor) + ';';
|
||||
else
|
||||
obj += 'background-color:' + this.value.pageBgColor + ';';
|
||||
obj += 'top:' + top + ';';
|
||||
obj += 'padding-top:' + this.value.margin.top * 2 + 'rpx;';
|
||||
obj += 'padding-left:' + this.value.margin.both * 2 + 'rpx;';
|
||||
obj += 'padding-right:' + this.value.margin.both * 2 + 'rpx;';
|
||||
obj += 'padding-bottom:' + this.value.margin.bottom * 2 + 'rpx;';
|
||||
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
searchWrapCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
obj += 'text-align:' + this.value.textAlign + ';';
|
||||
return obj;
|
||||
},
|
||||
inputStyle() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.elementBgColor + ';';
|
||||
if (this.value.borderType == 2) {
|
||||
obj += 'border-radius:' + '40rpx;';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
placeholderStyle() {
|
||||
var obj = '';
|
||||
if (this.value.textColor) {
|
||||
obj += 'color:' + this.value.textColor;
|
||||
} else {
|
||||
obj += 'color: rgba(0,0,0,0)';
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
fixedTop() {
|
||||
let diyPositionObj = this.$store.state.diyGroupPositionObj;
|
||||
let data = 0
|
||||
if (diyPositionObj.diySearch && diyPositionObj.diyIndexPage && diyPositionObj.nsNavbar) {
|
||||
if (diyPositionObj.diySearch.moduleIndex > diyPositionObj.diyIndexPage.moduleIndex) {
|
||||
data = diyPositionObj.nsNavbar.originalVal + diyPositionObj.diyIndexPage.originalVal;
|
||||
} else {
|
||||
data = diyPositionObj.nsNavbar.originalVal;
|
||||
}
|
||||
} else if (diyPositionObj.diySearch && diyPositionObj.nsNavbar) {
|
||||
data = diyPositionObj.nsNavbar.originalVal;
|
||||
}
|
||||
|
||||
data += 'px';
|
||||
return data;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function (nval) {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
// 获取组件的高度，默认高度为45（45是在375屏幕上的高度）
|
||||
const query = uni.createSelectorQuery();
|
||||
// #ifdef H5
|
||||
let cssSelect = '.page-header .u-navbar';
|
||||
// #endif
|
||||
|
||||
// #ifdef MP
|
||||
let cssSelect = '.page-header >>> .u-navbar';
|
||||
// #endif
|
||||
query
|
||||
.select(cssSelect)
|
||||
.boundingClientRect(data => {
|
||||
if (this.global.navBarSwitch) {
|
||||
this.height = data ? data.height : 45;
|
||||
} else {
|
||||
this.height = data ? data.height : 0;
|
||||
}
|
||||
// 如果存在分类导航组件，则追加该组件的高度
|
||||
if (this.haveTopCategory) {
|
||||
this.height += 49;
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
if (this.value.positionWay == 'fixed') this.navbarPlaceholderHeight();
|
||||
},
|
||||
mounted() {
|
||||
if (this.value.positionWay == 'fixed')
|
||||
this.setModuleLocatinoFn();
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.$util.redirectTo('/pages_tool/goods/search');
|
||||
},
|
||||
redirectTo(link) {
|
||||
if (link.wap_url) {
|
||||
if (this.$util.getCurrRoute() == 'pages/member/index' && !this.storeToken) {
|
||||
this.$refs.login.open(link.wap_url);
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.$util.diyRedirectTo(link);
|
||||
},
|
||||
navbarPlaceholderHeight() {
|
||||
let height = 0;
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.diy-search-wrap')
|
||||
.boundingClientRect(data => {
|
||||
// 获取搜索框自身高度
|
||||
this.placeholderHeight = data.height;
|
||||
// 通过搜索框自身高度 - 定位模式下的多出的padding-bottom高度
|
||||
if (this.placeholderHeight) this.placeholderHeight -= this.value.margin.bottom;
|
||||
}).exec();
|
||||
});
|
||||
},
|
||||
// 向vuex中的diyIndexPositionObj增加搜索组件定位位置
|
||||
setModuleLocatinoFn() {
|
||||
this.$nextTick(() => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.diy-search-wrap')
|
||||
.boundingClientRect(data => {
|
||||
let diySearch = {
|
||||
originalVal: data.height || 0, //自身高度 px
|
||||
currVal: 0, //定位高度
|
||||
moduleIndex: this.value.moduleIndex //组件在diy-group的位置
|
||||
};
|
||||
this.moduleHeight = (data.height || 0) + 'px';
|
||||
this.$store.commit('setDiyGroupPositionObj', {
|
||||
'diySearch': diySearch
|
||||
});
|
||||
}).exec();
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/ .uni-input-placeholder {
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.diy-search-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 991;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 170rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box-3 {
|
||||
.search-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 68rpx;
|
||||
|
||||
.iconfont {
|
||||
position: initial;
|
||||
transform: translateY(0);
|
||||
width: auto;
|
||||
margin-left: 26rpx;
|
||||
margin-right: 12rpx;
|
||||
font-size: $font-size-base;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
flex: 1;
|
||||
padding-left: 0;
|
||||
height: 68rpx;
|
||||
}
|
||||
|
||||
.search-content-btn {
|
||||
margin-right: 8rpx;
|
||||
width: 116rpx;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-icon {
|
||||
margin-left: 20rpx;
|
||||
margin-right: 0;
|
||||
width: auto;
|
||||
font-size: 74rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
margin-left: 20rpx;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-content input {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
height: 64rpx;
|
||||
width: 100%;
|
||||
padding: 0 20rpx 0 40rpx;
|
||||
color: #333333;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.search-content .iconfont {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 4rpx;
|
||||
transform: translateY(-50%);
|
||||
font-size: 30rpx;
|
||||
z-index: 10;
|
||||
width: 80rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
1182
components/diy-components/diy-seckill.vue
Normal file
1182
components/diy-components/diy-seckill.vue
Normal file
File diff suppressed because it is too large
Load Diff
170
components/diy-components/diy-store-label.vue
Normal file
170
components/diy-components/diy-store-label.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<x-skeleton type="banner" :loading="loading" :configs="skeletonConfig">
|
||||
<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']">
|
||||
<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>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<scroll-view scroll-x="true" :class="[value.contentStyle, { between: list.length == 3 }]" :style="storeLabelWrapCss" :enable-flex="true">
|
||||
<view v-for="(item, index) in list" :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.label_name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
<script>
|
||||
// 门店标签
|
||||
export default {
|
||||
name: 'diy-store-label',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
skeletonConfig: {
|
||||
gridRows: 1,
|
||||
gridRowsGap: '20rpx',
|
||||
headHeight: '40rpx',
|
||||
headBorderRadius: '0'
|
||||
},
|
||||
list: [],
|
||||
notice: '',
|
||||
storeLabel: [],
|
||||
businessConfig: ""
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
this.getStoreConfig();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
storeLabelWrapCss: function() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
var data = {
|
||||
page: 1,
|
||||
page_size: 0
|
||||
};
|
||||
|
||||
if (this.value.sources == 'initial') {
|
||||
data.page_size = this.value.count;
|
||||
} else if (this.value.sources == 'diy') {
|
||||
data.label_id_arr = this.value.labelIds.toString();
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/store/api/store/labelPage',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.list = res.data.list;
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
getStoreConfig() {
|
||||
this.$api.sendRequest({
|
||||
url: '/store/api/config/config',
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.businessConfig = res.data.business_config;
|
||||
if (res.data.business_config.store_business == "store") {
|
||||
this.getStoreInfo();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getStoreInfo() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/store/info',
|
||||
success: res => {
|
||||
if (res.data) {
|
||||
let label_arr = res.data.label_name.split(",");
|
||||
let label_count = 3;
|
||||
if (this.value.sources == 'initial') label_count = this.value.count;
|
||||
for (let i = 0; i < label_arr.length; i++) {
|
||||
if (this.storeLabel.length < label_count && label_arr[i] != '') {
|
||||
this.storeLabel.push(label_arr[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-store-label {
|
||||
.style-1 {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
/deep/ .uni-scroll-view-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.between {
|
||||
justify-content: space-between;
|
||||
|
||||
/deep/.uni-scroll-view-content {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 20rpx;
|
||||
|
||||
.icon-box {
|
||||
font-size: 50rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.label-name {
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
273
components/diy-components/diy-store.vue
Normal file
273
components/diy-components/diy-store.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<view class="store-wrap">
|
||||
<block v-if="value.style == 1">
|
||||
<view class="store-box store-one">
|
||||
<view class="store-info">
|
||||
<view class="info-box" :style="{ color: value.textColor }" @click="toStoreList()">
|
||||
<block v-if="globalStoreInfo && globalStoreInfo.store_id">
|
||||
<text class="title">{{ globalStoreInfo.store_name }}</text>
|
||||
<text>
|
||||
<text class="change margin-left">切换</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</text>
|
||||
</block>
|
||||
<text class="title" v-else>定位中...</text>
|
||||
</view>
|
||||
<view class="address-wrap" :style="{ color: value.textColor }">
|
||||
<text class="iconfont icon-dizhi"></text>
|
||||
<text v-if="globalStoreInfo && globalStoreInfo.store_id" @click="mapRoute" class="address">{{ globalStoreInfo.show_address }}</text>
|
||||
<text v-else>获取当前位置...</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="store-image" @click="selectStore()">
|
||||
<image :src="$util.img(globalStoreInfo.store_image)" v-if="globalStoreInfo && globalStoreInfo.store_image" mode="aspectFill"></image>
|
||||
<image :src="$util.getDefaultImage().store" v-else mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block v-if="value.style == 2">
|
||||
<view class="store-box store-three" @click="toStoreList()">
|
||||
<view class="store-info">
|
||||
<view class="store-image" @click="selectStore()">
|
||||
<image :src="$util.img(globalStoreInfo.store_image)" v-if="globalStoreInfo && globalStoreInfo.store_image" mode="aspectFill"></image>
|
||||
<image :src="$util.getDefaultImage().store" v-else mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="info-box" :style="{ color: value.textColor }">
|
||||
<block v-if="globalStoreInfo && globalStoreInfo.store_id">
|
||||
<text class="title">{{ globalStoreInfo.store_name }}</text>
|
||||
<text>
|
||||
<text class="change margin-left">切换</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</text>
|
||||
</block>
|
||||
<text class="title" v-else>定位中...</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="store-icon" @click.stop="search()"><text class="iconfont icon-sousuo3" :style="{ color: value.textColor }"></text></view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block v-if="value.style == 3">
|
||||
<view class="store-box store-four" @click="toStoreList()">
|
||||
<view class="store-left-wrap">
|
||||
<block v-if="globalStoreInfo && globalStoreInfo.store_id">
|
||||
<text class="iconfont icon-weizhi" :style="{ color: value.textColor }"></text>
|
||||
<text class="title" :style="{ color: value.textColor }">{{ globalStoreInfo.store_name }}</text>
|
||||
<text class="iconfont icon-unfold" :style="{ color: value.textColor }"></text>
|
||||
</block>
|
||||
<text class="title" v-else>定位中...</text>
|
||||
</view>
|
||||
<view class="store-right-search">
|
||||
<input type="text" class="uni-input font-size-tag" disabled placeholder="商品搜索" @click.stop="search()" />
|
||||
<text class="iconfont icon-sousuo3" @click.stop="search()"></text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 门店展示
|
||||
import Map from '@/common/js/map/openMap.js';
|
||||
export default {
|
||||
name: 'diy-store',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
//跳转至门店列表
|
||||
toStoreList() {
|
||||
this.$util.redirectTo('/pages_tool/store/list');
|
||||
},
|
||||
selectStore() {
|
||||
if (this.globalStoreInfo) {
|
||||
this.$util.redirectTo('/pages_tool/store/detail', { store_id: this.globalStoreInfo.store_id });
|
||||
}
|
||||
},
|
||||
search() {
|
||||
this.$util.redirectTo('/pages_tool/goods/search');
|
||||
},
|
||||
mapRoute() {
|
||||
if (!isNaN(Number(this.globalStoreInfo.latitude)) && !isNaN(Number(this.globalStoreInfo.longitude))) {
|
||||
Map.openMap(Number(this.globalStoreInfo.latitude), Number(this.globalStoreInfo.longitude), this.globalStoreInfo.store_name, 'gcj02');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.store-wrap {
|
||||
.store-box {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.store-info {
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 6rpx;
|
||||
|
||||
text {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.title {
|
||||
max-width: 480rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: $font-size-toolbar;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.change {
|
||||
font-size: $font-size-goods-tag;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: $font-size-goods-tag;
|
||||
}
|
||||
}
|
||||
.address-wrap {
|
||||
line-height: 1.2;
|
||||
font-size: $font-size-goods-tag;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
font-size: $font-size-goods-tag;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.address {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.store-image {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.store-one,
|
||||
.store-three {
|
||||
// padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.store-two {
|
||||
.store-image {
|
||||
align-self: flex-start;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
.info-box {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.store-info {
|
||||
height: 106rpx;
|
||||
}
|
||||
.switchover {
|
||||
display: flex;
|
||||
width: 120rpx;
|
||||
}
|
||||
}
|
||||
.store-three {
|
||||
.store-info {
|
||||
height: auto;
|
||||
justify-content: flex-start;
|
||||
flex-direction: inherit;
|
||||
align-items: center;
|
||||
}
|
||||
.info-box {
|
||||
margin-left: 18rpx;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.store-icon text {
|
||||
font-size: 36rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.store-four {
|
||||
padding: 0 !important;
|
||||
|
||||
.store-left-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
.icon-weizhi {
|
||||
margin-right: 6rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.icon-unfold {
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
max-width: 160rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.store-right-search {
|
||||
width: calc(100% - 260rpx);
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 72rpx;
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon-sousuo3 {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
981
components/diy-components/diy-text.vue
Normal file
981
components/diy-components/diy-text.vue
Normal file
@@ -0,0 +1,981 @@
|
||||
<template>
|
||||
<view class="diy-text" @click="$util.diyRedirectTo(value.link)" :style="warpCss">
|
||||
<view :class="value.style == 'style-8' ? 'title2' : 'title'" :style="{ fontSize: value.fontSize * 2 + 'rpx', color: value.textColor }">
|
||||
<block v-if="value.style == 'style-0'" style="height: 40rpx; line-height: 40rpx;">
|
||||
<text :style="{ fontWeight: value.fontWeight}">{{ value.text }}</text>
|
||||
</block>
|
||||
<block v-if="value.style == 'style-1'" style="height: 40rpx; line-height: 40rpx;">
|
||||
<view class="text-left" :style="{ color: value.textColor}"><text>───</text></view>
|
||||
<text :style="{ fontWeight: value.fontWeight}">{{ value.text }}</text>
|
||||
<view class="text-right" :style="{ color: value.textColor}"><text>───</text></view>
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-2'">
|
||||
<view class="style2">
|
||||
<text :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ value.text }}</text>
|
||||
<view class="xian" :style="{ background: value.textColor }">
|
||||
<view class="line-triangle" :style="{ borderColor: value.textColor }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-3'">
|
||||
<view class="style3">
|
||||
<text :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx' ,fontWeight: value.fontWeight}">{{ value.text }}</text>
|
||||
<view class="inner-line" :style="{ background: value.textColor }"><view class="line-short" :style="{ background: value.textColor }"></view></view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-4'">
|
||||
<view class="style4">
|
||||
<text :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx',fontWeight: value.fontWeight }">{{ value.text }}</text>
|
||||
<view class="line-box">
|
||||
<view class="line-left" :style="{ background: value.textColor }"></view>
|
||||
<view class="line-center" :style="{ borderColor: value.textColor }"></view>
|
||||
<view class="line-right" :style="{ background: value.textColor }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-5'">
|
||||
<view class="style5">
|
||||
<view class="style5-box" :style="{ color: value.textColor }">
|
||||
<text class="style5-title" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx' ,fontWeight: value.fontWeight}">{{ value.text }}</text>
|
||||
<view class="line-left" :style="{ background: value.textColor }"></view>
|
||||
<view class="line-right" :style="{ background: value.textColor }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-6'">
|
||||
<view class="style6">
|
||||
<view class="style6-box" :style="{ color: value.textColor }">
|
||||
<text class="style6-title" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx',fontWeight: value.fontWeight }">{{ value.text }}</text>
|
||||
<view class="style6-wrap" :style="{ color: value.textColor }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-7'">
|
||||
<view class="style7">
|
||||
<view class="style7-box" :style="{ color: value.textColor }">
|
||||
<text class="style7-title" :style="{ background: value.textColor, fontSize: value.fontSize * 2 + 'rpx',fontWeight: value.fontWeight }">{{ value.text }}</text>
|
||||
<view class="style7-wrap" :style="{ color: value.textColor }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-8'">
|
||||
<view class="style8">
|
||||
<view class="style8-box" :style="{ color: value.textColor }">
|
||||
<text class="style8-title" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx',fontWeight: value.fontWeight }">{{ value.text }}</text>
|
||||
<view class="style8-wrap" :style="{ background: value.textColor, height: value.fontSize * 2 + 'rpx' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-9'">
|
||||
<view class="style9">
|
||||
<view class="style9-box">
|
||||
<view class="style9-center">
|
||||
<view class="left-img"><image :src="$util.img('public/uniapp/diy/style9-1.png')"/></view>
|
||||
<text class="style9-title" :style="{ fontSize: value.fontSize * 2 + 'rpx', color: value.textColor, fontWeight: value.fontWeight }">
|
||||
{{ value.text }}
|
||||
</text>
|
||||
<view class="right-img"><image :src="$util.img('public/uniapp/diy/style9-2.png')"/></view>
|
||||
<view class="style9-more" v-if="value.more.isShow" :style="{ color: value.more.color }" @click.stop="$util.diyRedirectTo(value.more.link)">
|
||||
{{ value.more.text }}
|
||||
<view class="iconfont icon-right" :style="{ color: value.more.color }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="sub-title" :style="{ color: value.subTitle.color }">{{ value.subTitle.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-10'">
|
||||
<view class="style10">
|
||||
<view class="style10-box">
|
||||
<view class="style10-center">
|
||||
<view class="left-img"><image :src="$util.img('public/uniapp/diy/style10-1.png')"></image></view>
|
||||
<text
|
||||
class="style10-title"
|
||||
v-if="$util.img('public/uniapp/diy/style10-3.png')"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + $util.img('public/uniapp/diy/style10-3.png') + ')',
|
||||
backgroundSize: 100 + '%',
|
||||
backgroundPositionY: 93 + '%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
fontSize: value.fontSize * 2 + 'rpx',
|
||||
color: value.textColor,
|
||||
fontWeight: value.fontWeight
|
||||
}"
|
||||
>
|
||||
{{ value.text }}
|
||||
</text>
|
||||
<view class="right-img"><image :src="$util.img('public/uniapp/diy/style10-2.png')"></image></view>
|
||||
<view class="style10-more" v-if="value.more.isShow" :style="{ color: value.more.color }" @click.stop="$util.diyRedirectTo(value.more.link)">
|
||||
{{ value.more.text }}
|
||||
<view class="iconfont icon-right" :style="{ color: value.more.color }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="sub-title" :style="{ color: value.subTitle.color }">{{ value.subTitle.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-11'">
|
||||
<view class="style11" :style="{ backgroundColor: value.backgroundColor }">
|
||||
<view class="style11-box">
|
||||
<view class="style11-conter">
|
||||
<view class="style11-conter-box">
|
||||
<view class="left">
|
||||
<view class="style11-title"
|
||||
:style="{
|
||||
fontSize: value.fontSize * 2 + 'rpx',
|
||||
color: value.textColor,
|
||||
fontWeight: value.fontWeight
|
||||
}"
|
||||
>
|
||||
{{ value.text }}
|
||||
</view>
|
||||
<view class="style11-sub" :style="{ color: value.subTitle.color }">{{ value.subTitle.text }}</view>
|
||||
</view>
|
||||
<view class="style11-more" v-if="value.more.isShow" :style="{ color: value.more.color }" @click.stop="$util.diyRedirectTo(value.more.link)">
|
||||
{{ value.more.text }}
|
||||
<view class="iconfont icon-right" :style="{ color: value.more.color }"></view>
|
||||
</view>
|
||||
|
||||
<image class="center-img" :src="$util.img('public/uniapp/diy/style11-1.png')" mode="widthFix"></image>
|
||||
|
||||
<image class="right-img" :src="$util.img('public/uniapp/diy/style11-2.png')" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="style12" v-if="value.style == 'style-12'">
|
||||
<view class="style12-title"
|
||||
:style="{
|
||||
fontSize: value.fontSize * 2 + 'rpx',
|
||||
color: value.textColor,
|
||||
fontWeight: value.fontWeight
|
||||
}"
|
||||
>
|
||||
{{ value.text }}
|
||||
</view>
|
||||
<text class="style12-sub-title" :style="{ color: value.subTitle.color }">{{ value.subTitle.text }}</text>
|
||||
<view class="style12-more" v-if="value.more.isShow" :style="{ color: value.more.color }" @click.stop="$util.diyRedirectTo(value.more.link)">
|
||||
<text>{{ value.more.text }}</text>
|
||||
<view class="iconfont icon-right" :style="{ color: value.more.color }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="style13" v-else-if="value.style == 'style-13'">
|
||||
<image class="left-img" :src="$util.img('public/uniapp/diy/style13-1.png')" mode="widthFix"></image>
|
||||
<view
|
||||
class="style13-title"
|
||||
:style="{
|
||||
fontSize: value.fontSize * 2 + 'rpx',
|
||||
color: value.textColor,
|
||||
fontWeight: value.fontWeight
|
||||
}"
|
||||
>
|
||||
{{ value.text }}
|
||||
</view>
|
||||
<image class="right-img" :src="$util.img('public/uniapp/diy/style13-1.png')" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="style14" v-else-if="value.style == 'style-14'">
|
||||
<view class="title-wrap">
|
||||
<view class="text">
|
||||
<text :style="{ fontSize: value.fontSize * 2 + 'rpx', color: value.textColor, fontWeight: value.fontWeight }">
|
||||
{{ value.text }}
|
||||
</text>
|
||||
<text class="zone" :style="{ fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">专区</text>
|
||||
</view>
|
||||
<text class="iconfont icon-danxuan-xuanzhong" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="iconfont icon-danxuan-xuanzhong" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="iconfont icon-danxuan-xuanzhong" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<view
|
||||
class="sub-title"
|
||||
v-show="value.subTitle.text"
|
||||
:style="{ fontSize: value.subTitle.fontSize * 2 + 'rpx', color: value.subTitle.color }"
|
||||
>
|
||||
{{ value.subTitle.text }}
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="value.more.isShow == 1" class="more" :style="{ color: value.more.color }">
|
||||
<text>{{ value.more.text }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图十五 -->
|
||||
<view class="style15" v-else-if="value.style == 'style-15'">
|
||||
<view class="title-wrap">
|
||||
<view class="ornament" style="margin-right: 40rpx;">
|
||||
<text class="line" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="line" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="my">
|
||||
<text class="yuan" :style="{ backgroundColor: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="vertical" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
</text>
|
||||
</view>
|
||||
<text :style="{ fontSize: value.fontSize * 2 + 'rpx', color: value.textColor, fontWeight: value.fontWeight }">
|
||||
{{ value.text }}
|
||||
</text>
|
||||
<view class="ornament" style="margin-left: 40rpx;">
|
||||
<text class="line" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="line" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="my">
|
||||
<text class="yuan" :style="{ backgroundColor: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="vertical" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="sub-title"
|
||||
v-show="value.subTitle.text"
|
||||
:style="{ fontSize: value.subTitle.fontSize * 2 + 'rpx', color: value.subTitle.color }"
|
||||
>
|
||||
{{ value.subTitle.text }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图十六 -->
|
||||
<view class="style16" v-if="value.style == 'style-16'">
|
||||
<view
|
||||
class="style16-title"
|
||||
:style="{
|
||||
fontSize: value.fontSize * 2 + 'rpx',
|
||||
color: value.textColor,
|
||||
fontWeight: value.fontWeight
|
||||
}"
|
||||
>
|
||||
{{ value.text }}
|
||||
</view>
|
||||
<view class="style16-sub-title" v-show="value.subTitle.text" :style="{ color: value.subTitle.color, backgroundColor: value.subTitle.bgColor }">
|
||||
<text :class="['js-icon', value.subTitle.icon]" :style="{ backgroundColor: value.subTitle.bgColor }"></text>
|
||||
<text :style="{ fontWeight: value.subTitle.fontWeight }">{{ value.subTitle.text }}</text>
|
||||
</view>
|
||||
<view class="style16-more" v-if="value.more.isShow" :style="{ color: value.more.color }" @click.stop="$util.diyRedirectTo(value.more.link)">
|
||||
<text>{{ value.more.text }}</text>
|
||||
<view class="iconfont icon-right" :style="{ color: value.more.color }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 标题
|
||||
export default {
|
||||
name: 'diy-text',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-text {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.diy-text .title {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.diy-text .title2 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.diy-text .title > text {
|
||||
padding: 0 15rpx;
|
||||
}
|
||||
|
||||
.left {
|
||||
transform: translateY(0%);
|
||||
width: 30rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
transform: translateY(0%);
|
||||
width: 30rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.style2 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.xian {
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.line-triangle {
|
||||
background: transparent !important;
|
||||
position: absolute;
|
||||
border: 12rpx solid #000;
|
||||
border-top-color: transparent !important;
|
||||
border-left-color: transparent !important;
|
||||
left: 50%;
|
||||
bottom: -10rpx;
|
||||
margin-left: -12rpx;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.style3 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.inner-line {
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.line-short {
|
||||
width: 324rpx;
|
||||
height: 6rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -162rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.style4 {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
.line-box {
|
||||
height: 5rpx;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-top: 5rpx;
|
||||
width: 100%;
|
||||
|
||||
.line-left {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: calc((100% - 44rpx) / 2);
|
||||
height: 2rpx;
|
||||
}
|
||||
|
||||
.line-center {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border: 2rpx solid;
|
||||
display: inline-block;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
margin-left: -6rpx;
|
||||
}
|
||||
|
||||
.line-right {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: calc((100% - 44rpx) / 2);
|
||||
height: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style5 {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.style5-box {
|
||||
display: inline-block;
|
||||
padding: 10rpx !important;
|
||||
border: 1rpx solid;
|
||||
position: relative;
|
||||
|
||||
.style5-title {
|
||||
display: inline-block;
|
||||
padding: 10rpx 30rpx;
|
||||
border: 1rpx solid;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.line-left {
|
||||
height: 10rpx;
|
||||
position: absolute;
|
||||
width: 80rpx;
|
||||
top: 50%;
|
||||
margin-top: -4rpx;
|
||||
left: 0;
|
||||
margin-left: -60rpx;
|
||||
}
|
||||
|
||||
.line-right {
|
||||
height: 10rpx;
|
||||
position: absolute;
|
||||
width: 80rpx;
|
||||
top: 50%;
|
||||
margin-top: -4rpx;
|
||||
right: 0;
|
||||
margin-right: -60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style6 {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.style6-box {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
.style6-title {
|
||||
display: inline-block;
|
||||
padding: 6rpx 50rpx;
|
||||
border: 1rpx solid;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: rgb(255, 255, 255);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.style6-wrap {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
top: 10rpx;
|
||||
right: 4rpx;
|
||||
bottom: -10rpx;
|
||||
left: 10rpx;
|
||||
border: 1rpx solid;
|
||||
z-index: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style7 {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.style7-box {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
.style7-title {
|
||||
display: inline-block;
|
||||
padding: 0rpx 50rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-bottom: 6rpx;
|
||||
color: rgb(255, 255, 255);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.style7-wrap {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 4rpx;
|
||||
bottom: -10rpx;
|
||||
left: 10rpx;
|
||||
border: 1rpx solid;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style8 {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
|
||||
.style8-box {
|
||||
text-align: left !important;
|
||||
.style8-title{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.style8-wrap {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
width: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style9 {
|
||||
width: 100%;
|
||||
|
||||
.style9-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.style9-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(100% - 264rpx);
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.left-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.style9-more {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: -140rpx;
|
||||
/* #ifdef MP-WEIXIN */
|
||||
right: -120rpx;
|
||||
/* #endif */
|
||||
top: 14rpx;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style10 {
|
||||
width: 100%;
|
||||
|
||||
.style10-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.style10-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(100% - 264rpx);
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding-bottom: 8rpx;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.left-img {
|
||||
padding-bottom: 13rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.center-img {
|
||||
width: 198rpx;
|
||||
height: 18rpx;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
bottom: 26rpx;
|
||||
z-index: 5;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right-img {
|
||||
padding-bottom: 13rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.style10-more {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: -140rpx;
|
||||
/* #ifdef MP-WEIXIN */
|
||||
right: -120rpx;
|
||||
/* #endif */
|
||||
top: 14rpx;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style11 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.style11-box {
|
||||
width: 100%;
|
||||
margin: 10rpx 0;
|
||||
|
||||
.style11-conter {
|
||||
.style11-conter-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
width: 70%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
margin: 15rpx 0;
|
||||
padding-left: 34rpx;
|
||||
z-index: 9;
|
||||
|
||||
.style11-title {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.style11-sub {
|
||||
letter-spacing: 14rpx;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.style11-more {
|
||||
display: flex;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.center-img {
|
||||
width: 61rpx;
|
||||
position: absolute;
|
||||
bottom: -26rpx;
|
||||
left: 16rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.right-img {
|
||||
width: 35rpx;
|
||||
position: absolute;
|
||||
top: -14rpx;
|
||||
left: 172rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style12 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
|
||||
.style12-title {
|
||||
text-align: left;
|
||||
max-width: 200rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.style12-sub-title {
|
||||
text-align: left;
|
||||
max-width: 300rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.style12-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
|
||||
text {
|
||||
padding: 0;
|
||||
max-width: 160rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.iconfont{
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style13 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.style13-title {
|
||||
max-width: 420rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
height: 50rpx;
|
||||
width: 76rpx;
|
||||
}
|
||||
|
||||
.right-img {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
.style14 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: initial;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 0 20rpx;
|
||||
text {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.title-wrap {
|
||||
.text {
|
||||
display: inline-block;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
&:nth-of-type(1) {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
.sub-title {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.more {
|
||||
text:first-child {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.style15 {
|
||||
flex: 1;
|
||||
text {
|
||||
padding: 0 !important;
|
||||
line-height: 1;
|
||||
}
|
||||
.title-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.ornament {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.line {
|
||||
border-left: 8rpx solid;
|
||||
transform: rotate(40deg);
|
||||
border-radius: 40rpx;
|
||||
height: 28rpx;
|
||||
display: block;
|
||||
margin-right: 12rpx;
|
||||
&:nth-of-type(2) {
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
position: relative;
|
||||
top: 4rpx;
|
||||
}
|
||||
}
|
||||
.my {
|
||||
transform: rotate(40deg);
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
top: 4rpx;
|
||||
.yuan {
|
||||
font-size: 100rpx;
|
||||
border-radius: 50%;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
.vertical {
|
||||
border-left: 8rpx solid;
|
||||
height: 20rpx;
|
||||
margin-top: 4rpx;
|
||||
display: inline-block;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub-title {
|
||||
opacity: 0.6;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.style16 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
.style16-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
& > text {
|
||||
max-width: 200rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.style16-title {
|
||||
text-align: left;
|
||||
max-width: 200rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.style16-sub-title {
|
||||
margin-left: 20rpx;
|
||||
text-align: left;
|
||||
max-width: 300rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
border-radius: 34rpx;
|
||||
background-image: radial-gradient(transparent 60%, #fff);
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
position: relative;
|
||||
&> .js-icon {
|
||||
padding: 8rpx;
|
||||
background-image: radial-gradient(transparent 30%, #fff);
|
||||
border-radius: 50%;
|
||||
margin-left: -20rpx;
|
||||
margin-right: 6rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
46
components/diy-components/diy-video.vue
Normal file
46
components/diy-components/diy-video.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<video class="diy-video" :src="$util.img(value.videoUrl)" :poster="$util.img(value.imageUrl)" :style="videoWarpCss" objectFit="cover"></video>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 视频
|
||||
export default {
|
||||
name: 'diy-video',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
},
|
||||
computed: {
|
||||
videoWarpCss: function() {
|
||||
var obj = '';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.diy-video>>>.uni-video-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
465
components/goods-detail-view/detail.js
Normal file
465
components/goods-detail-view/detail.js
Normal file
@@ -0,0 +1,465 @@
|
||||
// 商品详情业务
|
||||
import {
|
||||
Weixin
|
||||
} from '@/common/js/wx-jssdk.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
skuId: 0,
|
||||
goodsId: 0,
|
||||
isIphoneX: false, //判断手机是否是iphoneX以上
|
||||
whetherCollection: 0,
|
||||
|
||||
//是否开启预览，0：不开启，1：开启
|
||||
preview: 0,
|
||||
videoContext: '',
|
||||
|
||||
// 媒体,图片,视频
|
||||
|
||||
// 解决每个商品SKU图片数量不同时，无法切换到第一个，导致轮播图显示不出来
|
||||
swiperInterval: 1,
|
||||
swiperAutoplay: false,
|
||||
swiperCurrent: 1,
|
||||
switchMedia: 'img',
|
||||
|
||||
//评价
|
||||
goodsEvaluate: [{
|
||||
member_headimg: '',
|
||||
member_name: '',
|
||||
content: '',
|
||||
images: [],
|
||||
create_time: 0,
|
||||
sku_name: ''
|
||||
}],
|
||||
evaluateConfig: {
|
||||
evaluate_audit: 1,
|
||||
evaluate_show: 0,
|
||||
evaluate_status: 1
|
||||
},
|
||||
|
||||
// 是否可分享到好物圈
|
||||
goodsCircle: false,
|
||||
service: null,
|
||||
shareUrl: '', // 分享链接
|
||||
source_member: 0, //分享人的id
|
||||
isCommunity: false, //社群弹窗
|
||||
|
||||
poster: "-1", //海报
|
||||
posterMsg: "", //海报错误信息
|
||||
posterHeight: 0,
|
||||
posterParams: {}, //海报所需参数
|
||||
goodsRoute: '',
|
||||
posterApi: '',
|
||||
goodsAttrShow: false, // 商品属性是否展开
|
||||
|
||||
//门店列表
|
||||
storeList: {
|
||||
data: [],
|
||||
page: 1,
|
||||
page_size: 10
|
||||
},
|
||||
isShowStore: false,
|
||||
latitude: null, // 纬度
|
||||
longitude: null, // 经度
|
||||
evaluateCount: 0, // 商品评论数量
|
||||
deliveryType: null, // 配送方式
|
||||
isVirtual: 0 //是否为虚拟商品
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.isIphoneX = this.$util.uniappIsIPhoneX();
|
||||
|
||||
if (this.location) {
|
||||
this.latitude = this.location.latitude;
|
||||
this.longitude = this.location.longitude;
|
||||
} else {
|
||||
this.$util.getLocation();
|
||||
}
|
||||
this.getStoreData();
|
||||
},
|
||||
watch: {
|
||||
location: function (nVal) {
|
||||
if (nVal) {
|
||||
this.latitude = nVal.latitude;
|
||||
this.longitude = nVal.longitude;
|
||||
this.getStoreData();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(params) {
|
||||
this.skuId = params.sku_id;
|
||||
this.goodsId = params.goods_id;
|
||||
this.preview = params.preview;
|
||||
this.source_member = params.source_member;
|
||||
this.whetherCollection = params.whetherCollection;
|
||||
this.posterParams = params.posterParams;
|
||||
|
||||
this.shareUrl = params.shareUrl;
|
||||
this.goodsRoute = params.goodsRoute;
|
||||
this.posterApi = params.posterApi;
|
||||
this.isVirtual = params.isVirtual;
|
||||
this.deliveryType = params.deliveryType;
|
||||
this.evaluateConfig = params.evaluateConfig;
|
||||
|
||||
if (this.evaluateConfig.evaluate_show == 1) {
|
||||
//商品评论
|
||||
this.getGoodsEvaluate(params.evaluateList);
|
||||
this.evaluateCount = params.evaluateCount;
|
||||
}
|
||||
|
||||
for (let k in this.deliveryType) {
|
||||
if (k == 'store') {
|
||||
this.isShowStore = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.getService();
|
||||
|
||||
this.videoContext = uni.createVideoContext('goodsVideo');
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.goodsSyncToGoodsCircle();
|
||||
// #endif
|
||||
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current + 1;
|
||||
},
|
||||
|
||||
//-------------------------------------服务-------------------------------------
|
||||
|
||||
openMerchantsServicePopup() {
|
||||
this.$refs.merchantsServicePopup.open();
|
||||
},
|
||||
closeMerchantsServicePopup() {
|
||||
this.$refs.merchantsServicePopup.close();
|
||||
},
|
||||
|
||||
//-------------------------------------门店列表-------------------------------------
|
||||
openStoreListPopup() {
|
||||
this.$refs.storeListPopup.open();
|
||||
},
|
||||
closeStoreListPopup() {
|
||||
this.$refs.storeListPopup.close();
|
||||
},
|
||||
getStoreData() {
|
||||
//门店列表
|
||||
let data = {
|
||||
page: this.storeList.page,
|
||||
page_size: this.storeList.page_size
|
||||
};
|
||||
if (this.latitude && this.longitude) {
|
||||
data.latitude = this.latitude;
|
||||
data.longitude = this.longitude;
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/api/store/page',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (this.storeList.page == 1) this.storeList.data == [];
|
||||
if (res.code >= 0 && res.data) {
|
||||
this.storeList.data = this.storeList.data.concat(res.data.list);
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
selectStore(item) {
|
||||
this.$util.redirectTo('/pages_tool/store/detail', {
|
||||
store_id: item.store_id
|
||||
});
|
||||
this.closeStoreListPopup();
|
||||
},
|
||||
//-------------------------------------属性-------------------------------------
|
||||
|
||||
switchGoodsAttr() {
|
||||
this.goodsAttrShow = !this.goodsAttrShow;
|
||||
},
|
||||
//-------------------------------------评价-------------------------------------
|
||||
//商品评论列表
|
||||
getGoodsEvaluate(list) {
|
||||
if (list) {
|
||||
this.goodsEvaluate = list;
|
||||
this.goodsEvaluate.forEach((item, index) => {
|
||||
if (this.goodsEvaluate[index].images) this.goodsEvaluate[index].images = this.goodsEvaluate[index].images.split(",");
|
||||
if (this.goodsEvaluate[index].is_anonymous == 1) this.goodsEvaluate[index].member_name = this.goodsEvaluate[index].member_name.replace(this.goodsEvaluate[index].member_name.substring(1, this.goodsEvaluate[index].member_name.length - 1), '***')
|
||||
})
|
||||
// if (this.goodsEvaluate.images) this.goodsEvaluate.images = this.goodsEvaluate.images.split(",");
|
||||
// if (this.goodsEvaluate.is_anonymous == 1) this.goodsEvaluate.member_name = this.goodsEvaluate.member_name.replace(
|
||||
// this.goodsEvaluate.member_name.substring(1, this.goodsEvaluate.member_name.length - 1), '***')
|
||||
}
|
||||
},
|
||||
// 预览评价图片
|
||||
previewEvaluate(index, img_index, field) {
|
||||
var paths = [];
|
||||
for (let i = 0; i < this.goodsEvaluate[index][field].length; i++) {
|
||||
paths.push(this.$util.img(this.goodsEvaluate[index][field][i]));
|
||||
}
|
||||
uni.previewImage({
|
||||
current: img_index,
|
||||
urls: paths
|
||||
});
|
||||
},
|
||||
//-------------------------------------关注-------------------------------------
|
||||
async collection() {
|
||||
if (this.preview) return; // 开启预览，禁止任何操作和跳转
|
||||
|
||||
if (this.storeToken) {
|
||||
|
||||
//未关注添加关注
|
||||
if (this.whetherCollection == 0) {
|
||||
let res = await this.$api.sendRequest({
|
||||
url: "/api/goodscollect/add",
|
||||
data: {
|
||||
sku_id: this.skuId,
|
||||
goods_id: this.goodsSkuDetail.goods_id,
|
||||
sku_name: this.goodsSkuDetail.sku_name,
|
||||
sku_price: this.goodsSkuDetail.show_price,
|
||||
sku_image: this.goodsSkuDetail.sku_image
|
||||
},
|
||||
async: false,
|
||||
});
|
||||
var data = res.data;
|
||||
if (data > 0) {
|
||||
this.whetherCollection = 1;
|
||||
}
|
||||
} else {
|
||||
//已关注取消关注
|
||||
let res = await this.$api.sendRequest({
|
||||
url: "/api/goodscollect/delete",
|
||||
data: {
|
||||
goods_id: this.goodsSkuDetail.goods_id
|
||||
},
|
||||
async: false,
|
||||
});
|
||||
var data = res.data;
|
||||
if (data > 0) {
|
||||
this.whetherCollection = 0;
|
||||
}
|
||||
}
|
||||
return this.whetherCollection;
|
||||
} else {
|
||||
if (this.source_member) {
|
||||
this.$refs.login.open(this.shareUrl + '&source_member=' + this.source_member);
|
||||
} else {
|
||||
this.$refs.login.open(this.shareUrl);
|
||||
}
|
||||
}
|
||||
},
|
||||
//-------------------------------------分享-------------------------------------
|
||||
// 打开分享弹出层
|
||||
openSharePopup() {
|
||||
this.$refs.sharePopup.open();
|
||||
},
|
||||
// 关闭分享弹出层
|
||||
closeSharePopup() {
|
||||
this.$refs.sharePopup.close();
|
||||
},
|
||||
copyUrl() {
|
||||
let text = this.$config.h5Domain + this.shareUrl;
|
||||
if (this.memberInfo && this.memberInfo.member_id) text += '&source_member=' + this.memberInfo.member_id;
|
||||
this.$util.copy(text, () => {
|
||||
this.closeSharePopup();
|
||||
});
|
||||
},
|
||||
|
||||
//-------------------------------------海报-------------------------------------
|
||||
// 打开海报弹出层
|
||||
openPosterPopup() {
|
||||
this.getGoodsPoster();
|
||||
this.$refs.sharePopup.close();
|
||||
},
|
||||
// 关闭海报弹出层
|
||||
closePosterPopup() {
|
||||
this.$refs.posterPopup.close();
|
||||
this.poster = ''
|
||||
},
|
||||
//生成海报
|
||||
getGoodsPoster() {
|
||||
uni.showLoading({
|
||||
'title': '海报生成中...'
|
||||
})
|
||||
//活动海报信息
|
||||
if (this.memberInfo && this.memberInfo.member_id) this.posterParams.source_member = this.memberInfo.member_id;
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: this.posterApi,
|
||||
data: {
|
||||
page: this.goodsRoute,
|
||||
qrcode_param: JSON.stringify(this.posterParams)
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.$refs.posterPopup.open();
|
||||
this.poster = res.data.path + "?time=" + new Date().getTime();
|
||||
} else {
|
||||
this.posterMsg = res.message;
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
})
|
||||
}
|
||||
uni.hideLoading();
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 预览图片
|
||||
previewMedia(index) {
|
||||
var paths = [];
|
||||
for (let i = 0; i < this.goodsSkuDetail.sku_images.length; i++) {
|
||||
paths.push(this.$util.img(this.goodsSkuDetail.sku_images[i], {
|
||||
size: 'big'
|
||||
}));
|
||||
}
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: paths,
|
||||
// longPressActions: {
|
||||
// itemList: ['发送给朋友', '保存图片', '关注'],
|
||||
// success: function(data) {
|
||||
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
||||
// },
|
||||
// fail: function(err) {
|
||||
// console.log(err.errMsg);
|
||||
// }
|
||||
// }
|
||||
});
|
||||
},
|
||||
swiperImageError(index) {
|
||||
this.goodsSkuDetail.sku_images[index] = this.$util.getDefaultImage().goods;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// #ifdef MP || APP-PLUS
|
||||
//小程序中保存海报
|
||||
saveGoodsPoster() {
|
||||
let url = this.$util.img(this.poster);
|
||||
uni.downloadFile({
|
||||
url: url,
|
||||
success: (res) => {
|
||||
if (res.errMsg == "downloadFile:ok") {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
this.$util.showToast({
|
||||
title: "保存成功"
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
this.$util.showToast({
|
||||
title: "保存失败，请稍后重试"
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
this.$util.showToast({
|
||||
title: "保存失败，请稍后重试"
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// #endif
|
||||
//售后保障查询
|
||||
getService() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goods/aftersale',
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.service = res.data;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
/**
|
||||
* 将商品同步到微信圈子
|
||||
*/
|
||||
goodsSyncToGoodsCircle() {
|
||||
this.$api.sendRequest({
|
||||
url: '/goodscircle/api/goods/sync',
|
||||
data: {
|
||||
goods_id: this.goodsSkuDetail.goods_id
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.goodsCircle = true;
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 将商品推荐到微信圈子
|
||||
*/
|
||||
openBusinessView() {
|
||||
if (wx.openBusinessView) {
|
||||
wx.openBusinessView({
|
||||
businessType: 'friendGoodsRecommend',
|
||||
extraData: {
|
||||
product: {
|
||||
item_code: this.goodsSkuDetail.goods_id,
|
||||
title: this.goodsSkuDetail.sku_name,
|
||||
image_list: this.goodsSkuDetail.sku_images.map((ele) => {
|
||||
return this.$util.img(ele);
|
||||
})
|
||||
}
|
||||
},
|
||||
success: function (res) {
|
||||
console.log('success', res);
|
||||
},
|
||||
fail: function (res) {
|
||||
console.log('fail', res);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
toEvaluateDetail(id) {
|
||||
this.$util.redirectTo('/pages_tool/goods/evaluate', {
|
||||
goods_id: id
|
||||
});
|
||||
},
|
||||
showImg(e) {
|
||||
//拿到图片的路径里面的内容放在我们数组中
|
||||
let contentimg = e.target.dataset.nodes;
|
||||
let arrImg = [];
|
||||
for (var i = 0; i < contentimg.length; i++) {
|
||||
var img = contentimg[i].children;
|
||||
if (Array.isArray(img)) {
|
||||
for (var j = 0; j < img.length; j++) {
|
||||
if (img[j].attrs && img[j].name == "img") {
|
||||
if (img[j].attrs.src) {
|
||||
arrImg.push(img[j].attrs.src)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//最后一步就是把我们的所有图片放在预览的api中就可以了
|
||||
uni.previewImage({
|
||||
current: arrImg,
|
||||
urls: arrImg,
|
||||
})
|
||||
},
|
||||
|
||||
//-------------------------------------社群-------------------------------------
|
||||
|
||||
//添加福利群
|
||||
onCommunity() {
|
||||
this.isCommunity = true
|
||||
},
|
||||
onCloseCommunity() {
|
||||
this.isCommunity = false
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
455
components/goods-detail-view/goods-detail-view.vue
Normal file
455
components/goods-detail-view/goods-detail-view.vue
Normal file
@@ -0,0 +1,455 @@
|
||||
<template>
|
||||
<view>
|
||||
<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
|
||||
<view class="goods-container">
|
||||
<!-- 弹幕 -->
|
||||
<pengpai-fadein-out v-if="goodsSkuDetail.barrage_show && goodsSkuDetail.barrageData" ref="pengpai" :duration="1600" :wait="1900" :top="200" :left="0" :radius="60" :loop="true" :info="goodsSkuDetail.barrageData"/>
|
||||
|
||||
<!-- 商品媒体信息 -->
|
||||
<view class="goods-media" :style="{height: goodsSkuDetail.swiperHeight}">
|
||||
<!-- 商品图片 -->
|
||||
<view class="goods-img" :class="{ show: switchMedia == 'img' }">
|
||||
<swiper class="swiper" @change="swiperChange" :interval="swiperInterval" :autoplay="swiperAutoplay" autoplay="true" interval="4000" circular="true">
|
||||
<swiper-item v-for="(item, index) in goodsSkuDetail.sku_images" :key="index" :item-id="'goods_id_' + index">
|
||||
<view class="item" @click="previewMedia(index)">
|
||||
<image :src="$util.img(item, { size: 'big' })" @error="swiperImageError(index)" mode="aspectFit" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="img-indicator-dots">
|
||||
<text>{{ swiperCurrent }}</text>
|
||||
<text v-if="goodsSkuDetail.sku_images">/{{ goodsSkuDetail.sku_images.length }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品视频 -->
|
||||
<view class="goods-video" :class="{ show: switchMedia == 'video' }">
|
||||
<video id="goodsVideo" :src="$util.img(goodsSkuDetail.video_url)" :poster="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" objectFit="cover"></video>
|
||||
</view>
|
||||
|
||||
<!-- 切换视频、图片 -->
|
||||
<view class="media-mode" v-if="goodsSkuDetail.video_url != ''">
|
||||
<text :class="{ 'color-base-bg': switchMedia == 'video' }" @click="switchMedia = 'video'">{{ $lang('video') }}</text>
|
||||
<text :class="{ 'color-base-bg': switchMedia == 'img' }" @click="(switchMedia = 'img'), videoContext.pause()">{{ $lang('image') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 价格区域 -->
|
||||
<view class="goods-gression">
|
||||
<slot name="price"></slot>
|
||||
</view>
|
||||
|
||||
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.isinformation == 0">
|
||||
|
||||
<!-- 入口区域 -->
|
||||
<slot name="entrance"></slot>
|
||||
|
||||
<!-- 配送 -->
|
||||
<!-- @click="$refs.deliveryType.open()" -->
|
||||
<view class="item delivery-type" v-if="goodsSkuDetail.is_virtual == 0" >
|
||||
<view class="label">{{$lang('send')}}</view>
|
||||
<block v-if="deliveryType">
|
||||
<view class="box">
|
||||
<block v-for="(item, index) in deliveryType" :key="index">
|
||||
<text v-if="goodsSkuDetail.support_trade_type.indexOf(index) != -1">{{$lang('express')}}</text>
|
||||
<!-- {{ item.name }} -->
|
||||
</block>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="box">未配置</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 门店 -->
|
||||
<!-- <view class="item store-wrap" @click="openStoreListPopup()" v-if="addonIsExist.store && globalStoreInfo && isShowStore">
|
||||
<view class="label">门店</view>
|
||||
<view class="list-wrap">
|
||||
<view class="name-wrap">
|
||||
<text class="icondiy icon-system-shop"></text>
|
||||
<text class="name">{{globalStoreInfo.store_name}}</text>
|
||||
</view>
|
||||
<view class="other-wrap">
|
||||
<text class="distance" v-if="parseFloat(globalStoreInfo.distance)">距离{{ globalStoreInfo.distance > 1 ? globalStoreInfo.distance + 'km' : globalStoreInfo.distance * 1000 + 'm' }}</text>
|
||||
<text class="decorate" v-if="parseFloat(globalStoreInfo.distance)">.</text>
|
||||
<view class="address">{{ globalStoreInfo.full_address + globalStoreInfo.address }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view> -->
|
||||
|
||||
<view class="item service" @click="openMerchantsServicePopup()" v-if="goodsSkuDetail.goods_service.length">
|
||||
<view class="label">服务</view>
|
||||
<view class="list-wrap">
|
||||
<view class="item-wrap" v-for="(item, index) in goodsSkuDetail.goods_service" :key="index" v-if="index < 3">
|
||||
<view class="item-wrap-box">
|
||||
<view class="item-wrap-icon">
|
||||
<text class="iconfont icon-dui" v-if="!item.icon || (!item.icon.imageUrl && !item.icon.icon)"></text>
|
||||
<image class="icon-img" v-else-if="item.icon.iconType == 'img'" :src=" $util.img(item.icon.imageUrl)" />
|
||||
<diy-icon class="icon-box" v-else-if="item.icon.iconType == 'icon'" :icon="item.icon.icon" :value="item.icon.style ? item.icon.style : null"></diy-icon>
|
||||
</view>
|
||||
<text>{{ item.service_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!--多规格区域-->
|
||||
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.sku_spec_format">
|
||||
<!-- 入口区域 -->
|
||||
<slot name="skuspec"></slot>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.merch_id > 0">
|
||||
<!-- 入口区域 -->
|
||||
<slot name="entrance"></slot>
|
||||
<!-- 商家 -->
|
||||
<view class="item store-wrap" @click="$util.redirectTo('/pages_promotion/merch/detail', { merch_id: goodsSkuDetail.merch_id })">
|
||||
<view class="list-wrap" style="display: flex;">
|
||||
<view class="name-wrap">
|
||||
<image :src="$util.img(goodsSkuDetail.merchinfo.merch_image)" mode="widthFix" style="width: 100rpx;height: 100rpx;border-radius: 50rpx;"></image>
|
||||
</view>
|
||||
<view class="other-wrap">
|
||||
<view class="address" style="margin-left: 30rpx;">
|
||||
<view>{{goodsSkuDetail.merchinfo.merch_name}}</view>
|
||||
<view style="font-size: 24rpx;color: #888;">官方认证商家，值得信赖！</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 配送方式 -->
|
||||
<view @touchmove.prevent.stop>
|
||||
<uni-popup ref="deliveryType" type="bottom">
|
||||
<view class="deliverytype-popup-layer popup-layer">
|
||||
<view class="head-wrap" @click="$refs.deliveryType.close()">
|
||||
<text>配送</text>
|
||||
<text class="iconfont icon-close"></text>
|
||||
</view>
|
||||
<scroll-view scroll-y class="type-body">
|
||||
<block v-for="(item, index) in deliveryType" :key="index">
|
||||
<view class="type-item" :class="{ 'not-support': goodsSkuDetail.support_trade_type.indexOf(index) == -1 }">
|
||||
<text class="iconfont" :class="item.icon"></text>
|
||||
<view class="content">
|
||||
<view class="title">{{ item.name }}</view>
|
||||
<view class="desc">{{ item.desc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-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 goodsSkuDetail.goods_service" :key="index">
|
||||
<view class="item-icon" :class="{'empty-desc':!item.desc}">
|
||||
<text class="iconfont icon-dui color-base-text" v-if="!item.icon || (!item.icon.imageUrl && !item.icon.icon)"></text>
|
||||
<image class="icon-img" v-else-if="item.icon.iconType == 'img'" :src=" $util.img(item.icon.imageUrl)" />
|
||||
<diy-icon class="icon-box" v-else-if="item.icon.iconType == 'icon'" :icon="item.icon.icon" :value="item.icon.style ? item.icon.style : null"></diy-icon>
|
||||
</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>
|
||||
|
||||
<!-- 门店列表 -->
|
||||
<view @touchmove.prevent.stop>
|
||||
<uni-popup ref="storeListPopup" type="bottom">
|
||||
<view class="goods-merchants-service-popup-layer popup-layer store-list-wrap">
|
||||
<view class="head-wrap" @click="closeStoreListPopup()">
|
||||
<text>门店列表</text>
|
||||
<text class="iconfont icon-close"></text>
|
||||
</view>
|
||||
<scroll-view scroll-y>
|
||||
<view class="store-list-content">
|
||||
<view class="list-item" v-for="(item, index) in storeList.data" :key="index" @click="selectStore(item)">
|
||||
<view class="item-box">
|
||||
<view class="item-image">
|
||||
<image :src="$util.img(item.store_image)" v-if="item.store_image"/>
|
||||
<image :src="$util.getDefaultImage().store" v-else/>
|
||||
</view>
|
||||
<view class="item-info">
|
||||
<view class="item-title">
|
||||
<text class="title">{{ item.store_name }}</text>
|
||||
<text class="distance color-base-text" v-if="item.distance">
|
||||
距离{{ item.distance > 1 ? item.distance + 'km' : item.distance * 1000 + 'm' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="item-time" v-if="item.open_date">营业时间：{{ item.open_date }}
|
||||
</view>
|
||||
<view class="item-address">{{ item.full_address + item.address }}</view>
|
||||
</view>
|
||||
<view class="item-right"><text class="iconfont icon-right"></text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<!-- 业务区域 -->
|
||||
<slot name="business"></slot>
|
||||
|
||||
<view class="detail-community" v-if="goodsSkuDetail.qr_data && goodsSkuDetail.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">{{ goodsSkuDetail.qr_data.qr_name }}</view>
|
||||
<view class="community-txt">{{ goodsSkuDetail.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="goodsSkuDetail.qr_data && goodsSkuDetail.qr_data.qr_img">
|
||||
<image :src="goodsSkuDetail.qr_data.qr_img != '' && goodsSkuDetail.qr_data.qr_state == 1 ? $util.img(goodsSkuDetail.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> -->
|
||||
|
||||
<!-- 参与流程 -->
|
||||
<slot name="articipation"></slot>
|
||||
|
||||
<!-- 商品评价 -->
|
||||
<view class="group-wrap" v-if="evaluateConfig.evaluate_show == 1 && goodsSkuDetail.isinformation == 0" style="display: none;">
|
||||
<view class="goods-evaluate" @click="toEvaluateDetail(goodsSkuDetail.goods_id)">
|
||||
<view class="tit">
|
||||
<!-- <view class="tit" :class="{ active: goodsEvaluate.content }"> -->
|
||||
<view>
|
||||
<text class="color-title font-size-base">
|
||||
评价
|
||||
<text class="font-size-base">({{ evaluateCount }})</text>
|
||||
</text>
|
||||
<text class="evaluate-item-empty" v-if="!evaluateCount">暂无评价</text>
|
||||
<view class="evaluate-item-empty" v-else>
|
||||
<text class="font-size-tag">查看全部</text>
|
||||
<text class="iconfont icon-right font-size-tag"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="evaluate-item" v-for="(item, index) in goodsEvaluate" :key="index"
|
||||
v-if="item.content">
|
||||
<view class="evaluator">
|
||||
<view class="evaluator-info">
|
||||
<view class="evaluator-face">
|
||||
<image v-if="item.member_headimg" :src="$util.img(item.member_headimg)" @error="item.member_headimg = $util.getDefaultImage().head" mode="aspectFill" />
|
||||
<image v-else :src="$util.getDefaultImage().head" @error="item.member_headimg = $util.getDefaultImage().head" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="evaluator-name-wrap">
|
||||
<text class="evaluator-name using-hidden" v-if="item.member_name.length > 2 && item.is_anonymous == 1">
|
||||
{{ item.member_name[0] }}***{{ item.member_name[item.member_name.length - 1] }}
|
||||
</text>
|
||||
<text class="evaluator-name using-hidden" v-else>{{ item.member_name }}</text>
|
||||
<view v-if="item.scores" class="evaluator-xing">
|
||||
<xiaoStarComponent :starCount="item.scores * 2"></xiaoStarComponent>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="time color-tip">{{ $util.timeStampTurnTime(item.create_time) }}</text>
|
||||
</view>
|
||||
<view class="cont margin-top">{{ item.content }}</view>
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="evaluate-img" v-if="item.images">
|
||||
<view class="img-box" v-for="(img, img_index) in item.images" :key="img_index" @click="previewEvaluate(index, img_index, 'images')">
|
||||
<image :src="$util.img(img)" mode="aspectFill" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="goods-attr" v-if="goodsSkuDetail.goods_attr_format && goodsSkuDetail.goods_attr_format.length > 0">
|
||||
<view class="title">规格属性</view>
|
||||
<view class="attr-wrap">
|
||||
<block v-for="(item, index) in goodsSkuDetail.goods_attr_format" :key="index">
|
||||
<view class="item" v-if="goodsAttrShow || (!goodsAttrShow && index < 4)">
|
||||
<text class="attr-name">{{ item.attr_name }}</text>
|
||||
<text class="value-name">{{ item.attr_value_name }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<view class="attr-action" v-if="goodsSkuDetail.goods_attr_format.length > 4" @click="switchGoodsAttr">
|
||||
<block v-if="!goodsAttrShow">
|
||||
展开<text class="iconfont icon-iconangledown"></text>
|
||||
</block>
|
||||
<block v-else>
|
||||
收起<text class="iconfont icon-iconangledown-copy"></text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 详情 -->
|
||||
<view class="goods-detail-tab">
|
||||
<view class="detail-tab">
|
||||
<view class="tab-item">{{$lang('details')}}</view>
|
||||
</view>
|
||||
<view class="detail-content active">
|
||||
<view class="detail-content-item">
|
||||
<view class="goods-details" v-if="goodsSkuDetail.goods_content">
|
||||
<!-- <rich-text :nodes="goodsSkuDetail.goods_content" @click="showImg($event)" :data-nodes="goodsSkuDetail.goods_content"></rich-text> -->
|
||||
<!-- {{goodsSkuDetail.goods_content}} -->
|
||||
<mp-html :content="goodsSkuDetail.goods_content" />
|
||||
<!-- :loading="loading" @preview="preview" @navigate="navigate" -->
|
||||
</view>
|
||||
<view class="goods-details active" v-else></view>
|
||||
<view class="goods-details" v-if="service && service.is_display == 1 && service.content">
|
||||
<rich-text :nodes="service.content" @click="showImg($event)" :data-nodes="service.content"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品推荐 -->
|
||||
<ns-goods-recommend ref="goodrecommend" route="goods_detail"></ns-goods-recommend>
|
||||
|
||||
<ns-copyright></ns-copyright>
|
||||
|
||||
<!-- 海报 -->
|
||||
<view @touchmove.prevent.stop class="poster-layer">
|
||||
<uni-popup ref="posterPopup" type="center">
|
||||
<template v-if="poster != '-1'">
|
||||
<view class="poster-wrap">
|
||||
<view class="image-wrap">
|
||||
<image :src="$util.img(poster)" :show-menu-by-longpress="true" mode="widthFix" />
|
||||
<view class="close iconfont icon-close" @click="closePosterPopup()"></view>
|
||||
</view>
|
||||
<!-- #ifdef MP || APP-PLUS -->
|
||||
<view class="save-btn" @click="saveGoodsPoster()">保存图片</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="save-btn">长按图片进行保存</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<!-- 分享弹窗 -->
|
||||
<view @touchmove.prevent.stop>
|
||||
<uni-popup ref="sharePopup" type="bottom" class="share-popup">
|
||||
<view>
|
||||
<view class="share-title">分享</view>
|
||||
<view class="share-content">
|
||||
<!-- #ifdef MP -->
|
||||
<view class="share-box">
|
||||
<button class="share-btn" :plain="true" open-type="share">
|
||||
<view class="iconfont icon-share-friend"></view>
|
||||
<text>分享给好友</text>
|
||||
</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="share-box" v-if="goodsCircle">
|
||||
<button class="share-btn" :plain="true" @click="openBusinessView">
|
||||
<view class="iconfont icon-haowuquan"></view>
|
||||
<text>分享到好物圈</text>
|
||||
</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="share-box" @click="openPosterPopup">
|
||||
<button class="share-btn" :plain="true">
|
||||
<view class="iconfont icon-pengyouquan"></view>
|
||||
<text>生成分享海报</text>
|
||||
</button>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="share-box" @click="copyUrl">
|
||||
<button class="share-btn" :plain="true">
|
||||
<view class="iconfont icon-fuzhilianjie"></view>
|
||||
<text>复制链接</text>
|
||||
</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<slot name="fixedbtn"></slot>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作区域 -->
|
||||
<slot name="action"></slot>
|
||||
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 商品详情视图
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
|
||||
import pengpaiFadeinOut from '@/components/pengpai-fadein-out/pengpai-fadein-out.vue';
|
||||
import xiaoStarComponent from '@/components/xiao-star-component/xiao-star-component.vue';
|
||||
import scroll from '@/common/js/scroll-view.js';
|
||||
import toTop from '@/components/toTop/toTop.vue';
|
||||
import detail from './detail.js';
|
||||
|
||||
export default {
|
||||
name: 'goods-detail-view',
|
||||
props: {
|
||||
goodsSkuDetail: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
uniPopup,
|
||||
nsGoodsRecommend,
|
||||
pengpaiFadeinOut,
|
||||
toTop,
|
||||
xiaoStarComponent
|
||||
},
|
||||
mixins: [scroll, detail]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/common/css/goods_detail.scss';
|
||||
</style>
|
||||
<style scoped></style>
|
||||
142
components/hover-nav/hover-nav.vue
Normal file
142
components/hover-nav/hover-nav.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<!-- 悬浮按钮 -->
|
||||
<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? '330rpx' : '120rpx' }">
|
||||
<!-- <view class="btn-item" v-if="fixBtnShow" @click="$util.redirectTo('/pages/index/index')"> -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="btn-item" v-if="fixBtnShow" hoverClass="none" openType="contact" sessionFrom="weapp" showMessageCard="true" :style="{backgroundImage:'url('+(kefuimg?kefuimg:'')+')',backgroundSize:'100% 100%'}">
|
||||
<text class="icox icox-kefu" v-if="!kefuimg"></text>
|
||||
<!-- <view>首页</view> -->
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<view class="btn-item" v-if="fixBtnShow" @click="call()" :style="{backgroundImage:'url('+(phoneimg?phoneimg:'')+')',backgroundSize:'100% 100%'}">
|
||||
<text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
|
||||
<!-- <view>我的</view> -->
|
||||
</view>
|
||||
|
||||
<!-- <view class="btn-item icon-xiala" v-if="fixBtnShow" @click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
|
||||
<text class="iconfont icon-unfold"></text>
|
||||
</view>
|
||||
<view class="btn-item switch" v-else :class="{ show: fixBtnShow }"
|
||||
@click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
|
||||
<view class="">快捷</view>
|
||||
<view>导航</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'hover-nav',
|
||||
props: {
|
||||
need: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageCount: 0,
|
||||
fixBtnShow: true,
|
||||
tel:'',
|
||||
kefuimg:'',
|
||||
phoneimg:''
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.kefuimg = this.$util.getDefaultImage().kefu
|
||||
this.phoneimg = this.$util.getDefaultImage().phone
|
||||
this.pageCount = getCurrentPages().length;
|
||||
var that = this
|
||||
uni.getStorage({
|
||||
key:'shopInfo',
|
||||
success(e){
|
||||
that.tel = e.data.mobile
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
//拨打电话
|
||||
call(){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber:this.tel+''
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container-box {
|
||||
width: 100%;
|
||||
|
||||
.item-wrap {
|
||||
border-radius: 10rpx;
|
||||
|
||||
.image-box {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//悬浮按钮
|
||||
.fixed-box {
|
||||
position: fixed;
|
||||
right: 0rpx;
|
||||
bottom: 200rpx;
|
||||
z-index: 10;
|
||||
// background: #fff;
|
||||
// box-shadow: 2rpx 2rpx 22rpx rgba(0, 0, 0, 0.3);
|
||||
border-radius: 120rpx;
|
||||
padding: 20rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100rpx;
|
||||
box-sizing: border-box;
|
||||
transition: 0.3s;
|
||||
overflow: hidden;
|
||||
|
||||
.btn-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
line-height: 1;
|
||||
margin: 14rpx 0;
|
||||
transition: 0.1s;
|
||||
background: #fff;
|
||||
border-radius: 50rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
padding: 0;
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.show {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&.switch {}
|
||||
|
||||
&.icon-xiala {
|
||||
margin: 0;
|
||||
margin-top: 0.1rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
components/loading-cover/loading-cover.vue
Normal file
115
components/loading-cover/loading-cover.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<view class="loading-layer" v-if="isShow">
|
||||
<view class="loading-anim" v-if="themeStyle">
|
||||
<view class="box item">
|
||||
<view class="border out item" :style="{'border-left-color':themeStyle.main_color, 'border-top-color':themeStyle.main_color}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading-cover',
|
||||
props: {
|
||||
initShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: true
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
created() {
|
||||
this.isShow = this.initShow;
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.loading-layer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 997;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.loading-anim {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.loading-anim > .item {
|
||||
position: relative;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
perspective: 1600rpx;
|
||||
transform-style: preserve-3d;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.loading-anim .border {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 6rpx solid;
|
||||
}
|
||||
|
||||
.loading-anim .out {
|
||||
top: 15%;
|
||||
left: 15%;
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
border-left-color: #FF4646;
|
||||
border-right-color: #C5C5C5 !important;
|
||||
// border-right-color: rgba($color: #000000, $alpha: 0) !important;
|
||||
border-top-color: #FF4646 ;
|
||||
border-bottom-color: #C5C5C5 !important;
|
||||
// border-bottom-color: rgba($color: #000000, $alpha: 0) !important;
|
||||
animation: spin 0.6s linear normal infinite;
|
||||
}
|
||||
|
||||
.loading-anim .in {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.loading-anim .mid {
|
||||
top: 40%;
|
||||
left: 40%;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
</style>
|
||||
55
components/mescroll/components/mescroll-down.css
Normal file
55
components/mescroll/components/mescroll-down.css
Normal file
@@ -0,0 +1,55 @@
|
||||
/* 下拉刷新区域 */
|
||||
.mescroll-downwarp {
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 下拉刷新--内容区,定位于区域底部 */
|
||||
.mescroll-downwarp .downwarp-content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 60rpx;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 下拉刷新--提示文本 */
|
||||
.mescroll-downwarp .downwarp-tip {
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
color: gray;
|
||||
vertical-align: middle;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
/* 下拉刷新--旋转进度条 */
|
||||
.mescroll-downwarp .downwarp-progress {
|
||||
display: inline-block;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid gray;
|
||||
border-bottom-color: transparent;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 旋转动画 */
|
||||
.mescroll-downwarp .mescroll-rotate {
|
||||
animation: mescrollDownRotate 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes mescrollDownRotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
52
components/mescroll/components/mescroll-down.vue
Normal file
52
components/mescroll/components/mescroll-down.vue
Normal file
@@ -0,0 +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>
|
||||
90
components/mescroll/components/mescroll-empty.vue
Normal file
90
components/mescroll/components/mescroll-empty.vue
Normal file
@@ -0,0 +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>
|
||||
81
components/mescroll/components/mescroll-top.vue
Normal file
81
components/mescroll/components/mescroll-top.vue
Normal file
@@ -0,0 +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>
|
||||
47
components/mescroll/components/mescroll-up.css
Normal file
47
components/mescroll/components/mescroll-up.css
Normal file
@@ -0,0 +1,47 @@
|
||||
/* 上拉加载区域 */
|
||||
.mescroll-upwarp {
|
||||
min-height: 60rpx;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/*提示文本 */
|
||||
.mescroll-upwarp .upwarp-tip,
|
||||
.mescroll-upwarp .upwarp-nodata {
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
color: #b1b1b1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mescroll-upwarp .upwarp-tip {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
/*旋转进度条 */
|
||||
.mescroll-upwarp .upwarp-progress {
|
||||
display: inline-block;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #b1b1b1;
|
||||
border-bottom-color: transparent;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 旋转动画 */
|
||||
.mescroll-upwarp .mescroll-rotate {
|
||||
animation: mescrollUpRotate 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes mescrollUpRotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
39
components/mescroll/components/mescroll-up.vue
Normal file
39
components/mescroll/components/mescroll-up.vue
Normal file
@@ -0,0 +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>
|
||||
15
components/mescroll/mescroll-body.css
Normal file
15
components/mescroll/mescroll-body.css
Normal file
@@ -0,0 +1,15 @@
|
||||
page {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
/* 使iOS滚动流畅 */
|
||||
}
|
||||
|
||||
.mescroll-body {
|
||||
position: relative;
|
||||
/* 下拉刷新区域相对自身定位 */
|
||||
height: auto;
|
||||
/* 不可固定高度,否则overflow: hidden, 可通过设置最小高度使列表不满屏仍可下拉*/
|
||||
overflow: hidden;
|
||||
/* 遮住顶部下拉刷新区域 */
|
||||
box-sizing: border-box;
|
||||
/* 避免设置padding出现双滚动条的问题 */
|
||||
}
|
||||
298
components/mescroll/mescroll-body.vue
Normal file
298
components/mescroll/mescroll-body.vue
Normal file
@@ -0,0 +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>
|
||||
60
components/mescroll/mescroll-mixins.js
Normal file
60
components/mescroll/mescroll-mixins.js
Normal file
@@ -0,0 +1,60 @@
|
||||
// mescroll-body 和 mescroll-uni 通用
|
||||
|
||||
// import MescrollUni from "./mescroll-uni.vue";
|
||||
// import MescrollBody from "./mescroll-body.vue";
|
||||
|
||||
const MescrollMixin = {
|
||||
// components: { // 非H5端无法通过mixin注册组件, 只能在main.js中注册全局组件或具体界面中注册
|
||||
// MescrollUni,
|
||||
// MescrollBody
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
mescroll: null //mescroll实例对象
|
||||
}
|
||||
},
|
||||
// 注册系统自带的下拉刷新 (配置down.native为true时生效, 还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
|
||||
onPullDownRefresh() {
|
||||
this.mescroll && this.mescroll.onPullDownRefresh();
|
||||
},
|
||||
// 注册列表滚动事件,用于判定在顶部可下拉刷新,在指定位置可显示隐藏回到顶部按钮 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
|
||||
onPageScroll(e) {
|
||||
this.mescroll && this.mescroll.onPageScroll(e);
|
||||
},
|
||||
// 注册滚动到底部的事件,用于上拉加载 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
|
||||
onReachBottom() {
|
||||
this.mescroll && this.mescroll.onReachBottom();
|
||||
},
|
||||
methods: {
|
||||
// mescroll组件初始化的回调,可获取到mescroll对象
|
||||
mescrollInit(mescroll) {
|
||||
this.mescroll = mescroll;
|
||||
this.mescrollInitByRef(); // 兼容字节跳动小程序
|
||||
},
|
||||
// 以ref的方式初始化mescroll对象 (兼容字节跳动小程序: http://www.mescroll.com/qa.html?v=20200107#q26)
|
||||
mescrollInitByRef() {
|
||||
if (!this.mescroll || !this.mescroll.resetUpScroll) {
|
||||
let mescrollRef = this.$refs.mescrollRef;
|
||||
if (mescrollRef) this.mescroll = mescrollRef.mescroll
|
||||
}
|
||||
},
|
||||
// 下拉刷新的回调
|
||||
downCallback() {
|
||||
// mixin默认resetUpScroll
|
||||
this.mescroll.resetUpScroll()
|
||||
},
|
||||
// 上拉加载的回调
|
||||
upCallback() {
|
||||
// mixin默认延时500自动结束加载
|
||||
setTimeout(() => {
|
||||
this.mescroll.endErr();
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mescrollInitByRef(); // 兼容字节跳动小程序, 避免未设置@init或@init此时未能取到ref的情况
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default MescrollMixin;
|
||||
35
components/mescroll/mescroll-uni-option.js
Normal file
35
components/mescroll/mescroll-uni-option.js
Normal file
@@ -0,0 +1,35 @@
|
||||
// 全局配置
|
||||
// mescroll-body 和 mescroll-uni 通用
|
||||
const GlobalOption = {
|
||||
down: {
|
||||
// 其他down的配置参数也可以写,这里只展示了常用的配置:
|
||||
textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
|
||||
textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
|
||||
textLoading: '加载中 ...', // 加载中的提示文本
|
||||
offset: 80, // 在列表顶部,下拉大于80px,松手即可触发下拉刷新的回调
|
||||
native: false // 是否使用系统自带的下拉刷新; 默认false; 仅在mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
|
||||
},
|
||||
up: {
|
||||
// 其他up的配置参数也可以写,这里只展示了常用的配置:
|
||||
textLoading: '加载中 ...', // 加载中的提示文本
|
||||
textNoMore: '', // 没有更多数据的提示文本
|
||||
// textNoMore: '— 我是有底线的 —', // 没有更多数据的提示文本
|
||||
offset: 80, // 距底部多远时,触发upCallback
|
||||
isBounce: false, // 默认禁止橡皮筋的回弹效果, 必读事项: http://www.mescroll.com/qa.html?v=190725#q25
|
||||
toTop: {
|
||||
// 回到顶部按钮,需配置src才显示
|
||||
src: "http://www.mescroll.com/img/mescroll-totop.png?v=1", // 图片路径 (建议放入static目录, 如 /static/img/mescroll-totop.png )
|
||||
offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000px
|
||||
right: 20, // 到右边的距离, 默认20 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
|
||||
bottom: 120, // 到底部的距离, 默认120 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
|
||||
width: 72 // 回到顶部图标的宽度, 默认72 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
|
||||
},
|
||||
empty: {
|
||||
use: true, // 是否显示空布局
|
||||
icon: "http://www.mescroll.com/img/mescroll-empty.png?v=1", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
|
||||
tip: '~ 暂无相关数据 ~' // 提示
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default GlobalOption
|
||||
33
components/mescroll/mescroll-uni.css
Normal file
33
components/mescroll/mescroll-uni.css
Normal file
@@ -0,0 +1,33 @@
|
||||
page {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
/* 避免设置padding出现双滚动条的问题 */
|
||||
}
|
||||
|
||||
.mescroll-uni-warp {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mescroll-uni {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 200rpx;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
/* 避免设置padding出现双滚动条的问题 */
|
||||
}
|
||||
|
||||
/* 定位的方式固定高度 */
|
||||
.mescroll-uni-fixed {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: auto;
|
||||
/* 使right生效 */
|
||||
height: auto;
|
||||
/* 使bottom生效 */
|
||||
}
|
||||
841
components/mescroll/mescroll-uni.js
Normal file
841
components/mescroll/mescroll-uni.js
Normal file
@@ -0,0 +1,841 @@
|
||||
/* mescroll
|
||||
* version 1.2.3
|
||||
* 2020-02-18 wenju
|
||||
* http://www.mescroll.com
|
||||
*/
|
||||
|
||||
export default function MeScroll(options, isScrollBody) {
|
||||
let me = this;
|
||||
me.version = '1.2.3'; // mescroll版本号
|
||||
me.options = options || {}; // 配置
|
||||
me.isScrollBody = isScrollBody || false; // 滚动区域是否为原生页面滚动; 默认为scroll-view
|
||||
|
||||
me.isDownScrolling = false; // 是否在执行下拉刷新的回调
|
||||
me.isUpScrolling = false; // 是否在执行上拉加载的回调
|
||||
let hasDownCallback = me.options.down && me.options.down.callback; // 是否配置了down的callback
|
||||
|
||||
// 初始化下拉刷新
|
||||
me.initDownScroll();
|
||||
// 初始化上拉加载,则初始化
|
||||
me.initUpScroll();
|
||||
|
||||
// 自动加载
|
||||
setTimeout(function() { // 待主线程执行完毕再执行,避免new MeScroll未初始化,在回调获取不到mescroll的实例
|
||||
// 自动触发下拉刷新 (只有配置了down的callback才自动触发下拉刷新)
|
||||
if (me.optDown.use && me.optDown.auto && hasDownCallback) {
|
||||
if (me.optDown.autoShowLoading) {
|
||||
me.triggerDownScroll(); // 显示下拉进度,执行下拉回调
|
||||
} else {
|
||||
me.optDown.callback && me.optDown.callback(me); // 不显示下拉进度,直接执行下拉回调
|
||||
}
|
||||
}
|
||||
// 自动触发上拉加载
|
||||
setTimeout(function() { // 延时确保先执行down的callback,再执行up的callback,因为部分小程序emit是异步,会导致isUpAutoLoad判断有误
|
||||
me.optUp.use && me.optUp.auto && !me.isUpAutoLoad && me.triggerUpScroll();
|
||||
}, 100)
|
||||
}, 30); // 需让me.optDown.inited和me.optUp.inited先执行
|
||||
}
|
||||
|
||||
/* 配置参数:下拉刷新 */
|
||||
MeScroll.prototype.extendDownScroll = function(optDown) {
|
||||
// 下拉刷新的配置
|
||||
MeScroll.extend(optDown, {
|
||||
use: true, // 是否启用下拉刷新; 默认true
|
||||
auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
|
||||
native: false, // 是否使用系统自带的下拉刷新; 默认false; 仅mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
|
||||
autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
|
||||
isLock: false, // 是否锁定下拉刷新,默认false;
|
||||
offset: 80, // 在列表顶部,下拉大于80px,松手即可触发下拉刷新的回调
|
||||
startTop: 100, // scroll-view滚动到顶部时,此时的scroll-top不一定为0, 此值用于控制最大的误差
|
||||
fps: 80, // 下拉节流 (值越大每秒刷新频率越高)
|
||||
inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
|
||||
outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
|
||||
bottomOffset: 20, // 当手指touchmove位置在距离body底部20px范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
|
||||
minAngle: 45, // 向下滑动最少偏移的角度,取值区间 [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
|
||||
textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
|
||||
textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
|
||||
textLoading: '加载中 ...', // 加载中的提示文本
|
||||
inited: null, // 下拉刷新初始化完毕的回调
|
||||
inOffset: null, // 下拉的距离进入offset范围内那一刻的回调
|
||||
outOffset: null, // 下拉的距离大于offset那一刻的回调
|
||||
onMoving: null, // 下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度
|
||||
beforeLoading: null, // 准备触发下拉刷新的回调: 如果return true,将不触发showLoading和callback回调; 常用来完全自定义下拉刷新, 参考案例【淘宝 v6.8.0】
|
||||
showLoading: null, // 显示下拉刷新进度的回调
|
||||
afterLoading: null, // 准备结束下拉的回调. 返回结束下拉的延时执行时间,默认0ms; 常用于结束下拉之前再显示另外一小段动画,才去隐藏下拉刷新的场景, 参考案例【dotJump】
|
||||
endDownScroll: null, // 结束下拉刷新的回调
|
||||
callback: function(mescroll) {
|
||||
// 下拉刷新的回调;默认重置上拉加载列表为第一页
|
||||
mescroll.resetUpScroll();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* 配置参数:上拉加载 */
|
||||
MeScroll.prototype.extendUpScroll = function(optUp) {
|
||||
// 上拉加载的配置
|
||||
MeScroll.extend(optUp, {
|
||||
use: true, // 是否启用上拉加载; 默认true
|
||||
auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
|
||||
isLock: false, // 是否锁定上拉加载,默认false;
|
||||
isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
|
||||
isBounce: false, // 默认禁止橡皮筋的回弹效果, 必读事项: http://www.mescroll.com/qa.html?v=190725#q25
|
||||
callback: null, // 上拉加载的回调;function(page,mescroll){ }
|
||||
page: {
|
||||
num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
|
||||
size: 10, // 每页数据的数量
|
||||
time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
|
||||
},
|
||||
noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
|
||||
offset: 80, // 距底部多远时,触发upCallback
|
||||
textLoading: '加载中 ...', // 加载中的提示文本
|
||||
textNoMore: '-- END --', // 没有更多数据的提示文本
|
||||
inited: null, // 初始化完毕的回调
|
||||
showLoading: null, // 显示加载中的回调
|
||||
showNoMore: null, // 显示无更多数据的回调
|
||||
hideUpScroll: null, // 隐藏上拉加载的回调
|
||||
errDistance: 60, // endErr的时候需往上滑动一段距离,使其往下滑动时再次触发onReachBottom,仅mescroll-body生效
|
||||
toTop: {
|
||||
// 回到顶部按钮,需配置src才显示
|
||||
src: null, // 图片路径,默认null (绝对路径或网络图)
|
||||
offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
|
||||
duration: 300, // 回到顶部的动画时长,默认300ms (当值为0或300则使用系统自带回到顶部,更流畅; 其他值则通过step模拟,部分机型可能不够流畅,所以非特殊情况不建议修改此项)
|
||||
btnClick: null, // 点击按钮的回调
|
||||
onShow: null, // 是否显示的回调
|
||||
zIndex: 9990, // fixed定位z-index值
|
||||
left: null, // 到左边的距离, 默认null. 此项有值时,right不生效. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
|
||||
right: 20, // 到右边的距离, 默认20 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
|
||||
bottom: 120, // 到底部的距离, 默认120 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
|
||||
safearea: false, // bottom的偏移量是否加上底部安全区的距离, 默认false, 需要适配iPhoneX时使用 (具体的界面如果不配置此项,则取本vue的safearea值)
|
||||
width: 72, // 回到顶部图标的宽度, 默认72 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
|
||||
radius: "50%" // 圆角, 默认"50%" (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
|
||||
},
|
||||
empty: {
|
||||
use: true, // 是否显示空布局
|
||||
icon: null, // 图标路径
|
||||
tip: '~ 暂无相关数据 ~', // 提示
|
||||
btnText: '', // 按钮
|
||||
btnClick: null, // 点击按钮的回调
|
||||
onShow: null, // 是否显示的回调
|
||||
fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
|
||||
top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
|
||||
zIndex: 99 // fixed定位z-index值
|
||||
},
|
||||
onScroll: false // 是否监听滚动事件
|
||||
})
|
||||
}
|
||||
|
||||
/* 配置参数 */
|
||||
MeScroll.extend = function(userOption, defaultOption) {
|
||||
if (!userOption) return defaultOption;
|
||||
for (let key in defaultOption) {
|
||||
if (userOption[key] == null) {
|
||||
let def = defaultOption[key];
|
||||
if (def != null && typeof def === 'object') {
|
||||
userOption[key] = MeScroll.extend({}, def); // 深度匹配
|
||||
} else {
|
||||
userOption[key] = def;
|
||||
}
|
||||
} else if (typeof userOption[key] === 'object') {
|
||||
MeScroll.extend(userOption[key], defaultOption[key]); // 深度匹配
|
||||
}
|
||||
}
|
||||
return userOption;
|
||||
}
|
||||
|
||||
/* -------初始化下拉刷新------- */
|
||||
MeScroll.prototype.initDownScroll = function() {
|
||||
let me = this;
|
||||
// 配置参数
|
||||
me.optDown = me.options.down || {};
|
||||
me.extendDownScroll(me.optDown);
|
||||
|
||||
// 如果是mescroll-body且配置了native,则禁止自定义的下拉刷新
|
||||
if (me.isScrollBody && me.optDown.native) {
|
||||
me.optDown.use = false
|
||||
} else {
|
||||
me.optDown.native = false // 仅mescroll-body支持,mescroll-uni不支持
|
||||
}
|
||||
|
||||
me.downHight = 0; // 下拉区域的高度
|
||||
|
||||
// 在页面中加入下拉布局
|
||||
if (me.optDown.use && me.optDown.inited) {
|
||||
// 初始化完毕的回调
|
||||
setTimeout(function() { // 待主线程执行完毕再执行,避免new MeScroll未初始化,在回调获取不到mescroll的实例
|
||||
me.optDown.inited(me);
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表touchstart事件 */
|
||||
MeScroll.prototype.touchstartEvent = function(e) {
|
||||
if (!this.optDown.use) return;
|
||||
|
||||
this.startPoint = this.getPoint(e); // 记录起点
|
||||
this.startTop = this.getScrollTop(); // 记录此时的滚动条位置
|
||||
this.lastPoint = this.startPoint; // 重置上次move的点
|
||||
this.maxTouchmoveY = this.getBodyHeight() - this.optDown.bottomOffset; // 手指触摸的最大范围(写在touchstart避免body获取高度为0的情况)
|
||||
this.inTouchend = false; // 标记不是touchend
|
||||
}
|
||||
|
||||
/* 列表touchmove事件 */
|
||||
MeScroll.prototype.touchmoveEvent = function(e) {
|
||||
if (!this.optDown.use) return;
|
||||
if (!this.startPoint) return;
|
||||
let me = this;
|
||||
|
||||
// 节流
|
||||
let t = new Date().getTime();
|
||||
if (me.moveTime && t - me.moveTime < me.moveTimeDiff) { // 小于节流时间,则不处理
|
||||
return;
|
||||
} else {
|
||||
me.moveTime = t
|
||||
if (!me.moveTimeDiff) me.moveTimeDiff = 1000 / me.optDown.fps
|
||||
}
|
||||
|
||||
let scrollTop = me.getScrollTop(); // 当前滚动条的距离
|
||||
let curPoint = me.getPoint(e); // 当前点
|
||||
|
||||
let moveY = curPoint.y - me.startPoint.y; // 和起点比,移动的距离,大于0向下拉,小于0向上拉
|
||||
|
||||
// 向下拉 && 在顶部
|
||||
// mescroll-body,直接判定在顶部即可
|
||||
// scroll-view在滚动时不会触发touchmove,当触顶/底/左/右时,才会触发touchmove
|
||||
// scroll-view滚动到顶部时,scrollTop不一定为0; 在iOS的APP中scrollTop可能为负数,不一定和startTop相等
|
||||
if (moveY > 0 && (
|
||||
(me.isScrollBody && scrollTop <= 0) ||
|
||||
(!me.isScrollBody && (scrollTop <= 0 || (scrollTop <= me.optDown.startTop && scrollTop === me.startTop)))
|
||||
)) {
|
||||
// 可下拉的条件
|
||||
if (!me.inTouchend && !me.isDownScrolling && !me.optDown.isLock && (!me.isUpScrolling || (me.isUpScrolling &&
|
||||
me.optUp.isBoth))) {
|
||||
|
||||
// 下拉的角度是否在配置的范围内
|
||||
let angle = me.getAngle(me.lastPoint, curPoint); // 两点之间的角度,区间 [0,90]
|
||||
if (angle < me.optDown.minAngle) return; // 如果小于配置的角度,则不往下执行下拉刷新
|
||||
|
||||
// 如果手指的位置超过配置的距离,则提前结束下拉,避免Webview嵌套导致touchend无法触发
|
||||
if (me.maxTouchmoveY > 0 && curPoint.y >= me.maxTouchmoveY) {
|
||||
me.inTouchend = true; // 标记执行touchend
|
||||
me.touchendEvent(); // 提前触发touchend
|
||||
return;
|
||||
}
|
||||
|
||||
me.preventDefault(e); // 阻止默认事件
|
||||
|
||||
let diff = curPoint.y - me.lastPoint.y; // 和上次比,移动的距离 (大于0向下,小于0向上)
|
||||
|
||||
// 下拉距离 < 指定距离
|
||||
if (me.downHight < me.optDown.offset) {
|
||||
if (me.movetype !== 1) {
|
||||
me.movetype = 1; // 加入标记,保证只执行一次
|
||||
me.optDown.inOffset && me.optDown.inOffset(me); // 进入指定距离范围内那一刻的回调,只执行一次
|
||||
me.isMoveDown = true; // 标记下拉区域高度改变,在touchend重置回来
|
||||
}
|
||||
me.downHight += diff * me.optDown.inOffsetRate; // 越往下,高度变化越小
|
||||
|
||||
// 指定距离 <= 下拉距离
|
||||
} else {
|
||||
if (me.movetype !== 2) {
|
||||
me.movetype = 2; // 加入标记,保证只执行一次
|
||||
me.optDown.outOffset && me.optDown.outOffset(me); // 下拉超过指定距离那一刻的回调,只执行一次
|
||||
me.isMoveDown = true; // 标记下拉区域高度改变,在touchend重置回来
|
||||
}
|
||||
if (diff > 0) { // 向下拉
|
||||
me.downHight += Math.round(diff * me.optDown.outOffsetRate); // 越往下,高度变化越小
|
||||
} else { // 向上收
|
||||
me.downHight += diff; // 向上收回高度,则向上滑多少收多少高度
|
||||
}
|
||||
}
|
||||
|
||||
let rate = me.downHight / me.optDown.offset; // 下拉区域当前高度与指定距离的比值
|
||||
me.optDown.onMoving && me.optDown.onMoving(me, rate, me.downHight); // 下拉过程中的回调,一直在执行
|
||||
}
|
||||
}
|
||||
|
||||
me.lastPoint = curPoint; // 记录本次移动的点
|
||||
}
|
||||
|
||||
/* 列表touchend事件 */
|
||||
MeScroll.prototype.touchendEvent = function(e) {
|
||||
if (!this.optDown.use) return;
|
||||
// 如果下拉区域高度已改变,则需重置回来
|
||||
if (this.isMoveDown) {
|
||||
if (this.downHight >= this.optDown.offset) {
|
||||
// 符合触发刷新的条件
|
||||
this.triggerDownScroll();
|
||||
} else {
|
||||
// 不符合的话 则重置
|
||||
this.downHight = 0;
|
||||
this.optDown.endDownScroll && this.optDown.endDownScroll(this);
|
||||
}
|
||||
this.movetype = 0;
|
||||
this.isMoveDown = false;
|
||||
} else if (!this.isScrollBody && this.getScrollTop() === this.startTop) { // scroll-view到顶/左/右/底的滑动事件
|
||||
let isScrollUp = this.getPoint(e).y - this.startPoint.y < 0; // 和起点比,移动的距离,大于0向下拉,小于0向上拉
|
||||
// 上滑
|
||||
if (isScrollUp) {
|
||||
// 需检查滑动的角度
|
||||
let angle = this.getAngle(this.getPoint(e), this.startPoint); // 两点之间的角度,区间 [0,90]
|
||||
if (angle > 80) {
|
||||
// 检查并触发上拉
|
||||
this.triggerUpScroll(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 根据点击滑动事件获取第一个手指的坐标 */
|
||||
MeScroll.prototype.getPoint = function(e) {
|
||||
if (!e) {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
if (e.touches && e.touches[0]) {
|
||||
return {
|
||||
x: e.touches[0].pageX,
|
||||
y: e.touches[0].pageY
|
||||
}
|
||||
} else if (e.changedTouches && e.changedTouches[0]) {
|
||||
return {
|
||||
x: e.changedTouches[0].pageX,
|
||||
y: e.changedTouches[0].pageY
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 计算两点之间的角度: 区间 [0,90]*/
|
||||
MeScroll.prototype.getAngle = function(p1, p2) {
|
||||
let x = Math.abs(p1.x - p2.x);
|
||||
let y = Math.abs(p1.y - p2.y);
|
||||
let z = Math.sqrt(x * x + y * y);
|
||||
let angle = 0;
|
||||
if (z !== 0) {
|
||||
angle = Math.asin(y / z) / Math.PI * 180;
|
||||
}
|
||||
return angle
|
||||
}
|
||||
|
||||
/* 触发下拉刷新 */
|
||||
MeScroll.prototype.triggerDownScroll = function() {
|
||||
if (this.optDown.beforeLoading && this.optDown.beforeLoading(this)) {
|
||||
//return true则处于完全自定义状态
|
||||
} else {
|
||||
this.showDownScroll(); // 下拉刷新中...
|
||||
this.optDown.callback && this.optDown.callback(this); // 执行回调,联网加载数据
|
||||
}
|
||||
}
|
||||
|
||||
/* 显示下拉进度布局 */
|
||||
MeScroll.prototype.showDownScroll = function() {
|
||||
this.isDownScrolling = true; // 标记下拉中
|
||||
if (this.optDown.native) {
|
||||
uni.startPullDownRefresh(); // 系统自带的下拉刷新
|
||||
this.optDown.showLoading && this.optDown.showLoading(this, 0); // 仍触发showLoading,因为上拉加载用到
|
||||
} else {
|
||||
this.downHight = this.optDown.offset; // 更新下拉区域高度
|
||||
this.optDown.showLoading && this.optDown.showLoading(this, this.downHight); // 下拉刷新中...
|
||||
}
|
||||
}
|
||||
|
||||
/* 显示系统自带的下拉刷新时需要处理的业务 */
|
||||
MeScroll.prototype.onPullDownRefresh = function() {
|
||||
this.isDownScrolling = true; // 标记下拉中
|
||||
this.optDown.showLoading && this.optDown.showLoading(this, 0); // 仍触发showLoading,因为上拉加载用到
|
||||
this.optDown.callback && this.optDown.callback(this); // 执行回调,联网加载数据
|
||||
}
|
||||
|
||||
/* 结束下拉刷新 */
|
||||
MeScroll.prototype.endDownScroll = function() {
|
||||
if (this.optDown.native) { // 结束原生下拉刷新
|
||||
this.isDownScrolling = false;
|
||||
this.optDown.endDownScroll && this.optDown.endDownScroll(this);
|
||||
uni.stopPullDownRefresh();
|
||||
return
|
||||
}
|
||||
let me = this;
|
||||
// 结束下拉刷新的方法
|
||||
let endScroll = function() {
|
||||
me.downHight = 0;
|
||||
me.isDownScrolling = false;
|
||||
me.optDown.endDownScroll && me.optDown.endDownScroll(me);
|
||||
!me.isScrollBody && me.setScrollHeight(0) // scroll-view重置滚动区域,使数据不满屏时仍可检查触发翻页
|
||||
}
|
||||
// 结束下拉刷新时的回调
|
||||
let delay = 0;
|
||||
if (me.optDown.afterLoading) delay = me.optDown.afterLoading(me); // 结束下拉刷新的延时,单位ms
|
||||
if (typeof delay === 'number' && delay > 0) {
|
||||
setTimeout(endScroll, delay);
|
||||
} else {
|
||||
endScroll();
|
||||
}
|
||||
}
|
||||
|
||||
/* 锁定下拉刷新:isLock=ture,null锁定;isLock=false解锁 */
|
||||
MeScroll.prototype.lockDownScroll = function(isLock) {
|
||||
if (isLock == null) isLock = true;
|
||||
this.optDown.isLock = isLock;
|
||||
}
|
||||
|
||||
/* 锁定上拉加载:isLock=ture,null锁定;isLock=false解锁 */
|
||||
MeScroll.prototype.lockUpScroll = function(isLock) {
|
||||
if (isLock == null) isLock = true;
|
||||
this.optUp.isLock = isLock;
|
||||
}
|
||||
|
||||
/* -------初始化上拉加载------- */
|
||||
MeScroll.prototype.initUpScroll = function() {
|
||||
let me = this;
|
||||
// 配置参数
|
||||
me.optUp = me.options.up || {
|
||||
use: false
|
||||
};
|
||||
me.extendUpScroll(me.optUp);
|
||||
|
||||
if (!me.optUp.isBounce) me.setBounce(false); // 不允许bounce时,需禁止window的touchmove事件
|
||||
|
||||
if (me.optUp.use === false) return; // 配置不使用上拉加载时,则不初始化上拉布局
|
||||
me.optUp.hasNext = true; // 如果使用上拉,则默认有下一页
|
||||
me.startNum = me.optUp.page.num + 1; // 记录page开始的页码
|
||||
|
||||
// 初始化完毕的回调
|
||||
if (me.optUp.inited) {
|
||||
setTimeout(function() { // 待主线程执行完毕再执行,避免new MeScroll未初始化,在回调获取不到mescroll的实例
|
||||
me.optUp.inited(me);
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
|
||||
/*滚动到底部的事件 (仅mescroll-body生效)*/
|
||||
MeScroll.prototype.onReachBottom = function() {
|
||||
if (this.isScrollBody && !this.isUpScrolling) { // 只能支持下拉刷新的时候同时可以触发上拉加载,否则滚动到底部就需要上滑一点才能触发onReachBottom
|
||||
if (!this.optUp.isLock && this.optUp.hasNext) {
|
||||
this.triggerUpScroll();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*列表滚动事件 (仅mescroll-body生效)*/
|
||||
MeScroll.prototype.onPageScroll = function(e) {
|
||||
if (!this.isScrollBody) return;
|
||||
|
||||
// 更新滚动条的位置 (主要用于判断下拉刷新时,滚动条是否在顶部)
|
||||
this.setScrollTop(e.scrollTop);
|
||||
|
||||
// 顶部按钮的显示隐藏
|
||||
if (e.scrollTop >= this.optUp.toTop.offset) {
|
||||
this.showTopBtn();
|
||||
} else {
|
||||
this.hideTopBtn();
|
||||
}
|
||||
}
|
||||
|
||||
/*列表滚动事件*/
|
||||
MeScroll.prototype.scroll = function(e, onScroll) {
|
||||
// 更新滚动条的位置
|
||||
this.setScrollTop(e.scrollTop);
|
||||
// 更新滚动内容高度
|
||||
this.setScrollHeight(e.scrollHeight);
|
||||
|
||||
// 向上滑还是向下滑动
|
||||
if (this.preScrollY == null) this.preScrollY = 0;
|
||||
this.isScrollUp = e.scrollTop - this.preScrollY > 0;
|
||||
this.preScrollY = e.scrollTop;
|
||||
|
||||
// 上滑 && 检查并触发上拉
|
||||
this.isScrollUp && this.triggerUpScroll(true);
|
||||
|
||||
// 顶部按钮的显示隐藏
|
||||
if (e.scrollTop >= this.optUp.toTop.offset) {
|
||||
this.showTopBtn();
|
||||
} else {
|
||||
this.hideTopBtn();
|
||||
}
|
||||
|
||||
// 滑动监听
|
||||
this.optUp.onScroll && onScroll && onScroll()
|
||||
}
|
||||
|
||||
/* 触发上拉加载 */
|
||||
MeScroll.prototype.triggerUpScroll = function(isCheck) {
|
||||
if (!this.isUpScrolling && this.optUp.use && this.optUp.callback) {
|
||||
// 是否校验在底部; 默认不校验
|
||||
if (isCheck === true) {
|
||||
let canUp = false;
|
||||
// 还有下一页 && 没有锁定 && 不在下拉中
|
||||
if (this.optUp.hasNext && !this.optUp.isLock && !this.isDownScrolling) {
|
||||
if (this.getScrollBottom() <= this.optUp.offset) { // 到底部
|
||||
canUp = true; // 标记可上拉
|
||||
}
|
||||
}
|
||||
if (canUp === false) return;
|
||||
}
|
||||
this.showUpScroll(); // 上拉加载中...
|
||||
this.optUp.page.num++; // 预先加一页,如果失败则减回
|
||||
this.isUpAutoLoad = true; // 标记上拉已经自动执行过,避免初始化时多次触发上拉回调
|
||||
this.num = this.optUp.page.num; // 把最新的页数赋值在mescroll上,避免对page的影响
|
||||
this.size = this.optUp.page.size; // 把最新的页码赋值在mescroll上,避免对page的影响
|
||||
this.time = this.optUp.page.time; // 把最新的页码赋值在mescroll上,避免对page的影响
|
||||
this.optUp.callback(this); // 执行回调,联网加载数据
|
||||
}
|
||||
}
|
||||
|
||||
/* 显示上拉加载中 */
|
||||
MeScroll.prototype.showUpScroll = function() {
|
||||
this.isUpScrolling = true; // 标记上拉加载中
|
||||
this.optUp.showLoading && this.optUp.showLoading(this); // 回调
|
||||
}
|
||||
|
||||
/* 显示上拉无更多数据 */
|
||||
MeScroll.prototype.showNoMore = function() {
|
||||
this.optUp.hasNext = false; // 标记无更多数据
|
||||
this.optUp.showNoMore && this.optUp.showNoMore(this); // 回调
|
||||
}
|
||||
|
||||
/* 隐藏上拉区域**/
|
||||
MeScroll.prototype.hideUpScroll = function() {
|
||||
this.optUp.hideUpScroll && this.optUp.hideUpScroll(this); // 回调
|
||||
}
|
||||
|
||||
/* 结束上拉加载 */
|
||||
MeScroll.prototype.endUpScroll = function(isShowNoMore) {
|
||||
if (isShowNoMore != null) { // isShowNoMore=null,不处理下拉状态,下拉刷新的时候调用
|
||||
if (isShowNoMore) {
|
||||
this.showNoMore(); // isShowNoMore=true,显示无更多数据
|
||||
} else {
|
||||
this.hideUpScroll(); // isShowNoMore=false,隐藏上拉加载
|
||||
}
|
||||
}
|
||||
this.isUpScrolling = false; // 标记结束上拉加载
|
||||
}
|
||||
|
||||
/* 重置上拉加载列表为第一页
|
||||
*isShowLoading 是否显示进度布局;
|
||||
* 1.默认null,不传参,则显示上拉加载的进度布局
|
||||
* 2.传参true, 则显示下拉刷新的进度布局
|
||||
* 3.传参false,则不显示上拉和下拉的进度 (常用于静默更新列表数据)
|
||||
*/
|
||||
MeScroll.prototype.resetUpScroll = function(isShowLoading) {
|
||||
if (this.optUp && this.optUp.use) {
|
||||
let page = this.optUp.page;
|
||||
this.prePageNum = page.num; // 缓存重置前的页码,加载失败可退回
|
||||
this.prePageTime = page.time; // 缓存重置前的时间,加载失败可退回
|
||||
page.num = this.startNum; // 重置为第一页
|
||||
page.time = null; // 重置时间为空
|
||||
if (!this.isDownScrolling && isShowLoading !== false) { // 如果不是下拉刷新触发的resetUpScroll并且不配置列表静默更新,则显示进度;
|
||||
if (isShowLoading == null) {
|
||||
this.removeEmpty(); // 移除空布局
|
||||
this.showUpScroll(); // 不传参,默认显示上拉加载的进度布局
|
||||
} else {
|
||||
this.showDownScroll(); // 传true,显示下拉刷新的进度布局,不清空列表
|
||||
}
|
||||
}
|
||||
this.isUpAutoLoad = true; // 标记上拉已经自动执行过,避免初始化时多次触发上拉回调
|
||||
this.num = page.num; // 把最新的页数赋值在mescroll上,避免对page的影响
|
||||
this.size = page.size; // 把最新的页码赋值在mescroll上,避免对page的影响
|
||||
this.time = page.time; // 把最新的页码赋值在mescroll上,避免对page的影响
|
||||
this.optUp.callback && this.optUp.callback(this); // 执行上拉回调
|
||||
}
|
||||
}
|
||||
|
||||
/* 设置page.num的值 */
|
||||
MeScroll.prototype.setPageNum = function(num) {
|
||||
this.optUp.page.num = num - 1;
|
||||
}
|
||||
|
||||
/* 设置page.size的值 */
|
||||
MeScroll.prototype.setPageSize = function(size) {
|
||||
this.optUp.page.size = size;
|
||||
}
|
||||
|
||||
/* 联网回调成功,结束下拉刷新和上拉加载
|
||||
* dataSize: 当前页的数据量(必传)
|
||||
* totalPage: 总页数(必传)
|
||||
* systime: 服务器时间 (可空)
|
||||
*/
|
||||
MeScroll.prototype.endByPage = function(dataSize, totalPage, systime) {
|
||||
let hasNext;
|
||||
if (this.optUp.use && totalPage != null) hasNext = this.optUp.page.num < totalPage; // 是否还有下一页
|
||||
this.endSuccess(dataSize, hasNext, systime);
|
||||
}
|
||||
|
||||
/* 联网回调成功,结束下拉刷新和上拉加载
|
||||
* dataSize: 当前页的数据量(必传)
|
||||
* totalSize: 列表所有数据总数量(必传)
|
||||
* systime: 服务器时间 (可空)
|
||||
*/
|
||||
MeScroll.prototype.endBySize = function(dataSize, totalSize, systime) {
|
||||
let hasNext;
|
||||
if (this.optUp.use && totalSize != null) {
|
||||
let loadSize = (this.optUp.page.num - 1) * this.optUp.page.size + dataSize; // 已加载的数据总数
|
||||
hasNext = loadSize < totalSize; // 是否还有下一页
|
||||
}
|
||||
this.endSuccess(dataSize, hasNext, systime);
|
||||
}
|
||||
|
||||
/* 联网回调成功,结束下拉刷新和上拉加载
|
||||
* dataSize: 当前页的数据个数(不是所有页的数据总和),用于上拉加载判断是否还有下一页.如果不传,则会判断还有下一页
|
||||
* hasNext: 是否还有下一页,布尔类型;用来解决这个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据dataSize判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
|
||||
* systime: 服务器时间(可空);用来解决这个小问题:当准备翻下一页时,数据库新增了几条记录,此时翻下一页,前面的几条数据会和上一页的重复;这里传入了systime,那么upCallback的page.time就会有值,把page.time传给服务器,让后台过滤新加入的那几条记录
|
||||
*/
|
||||
MeScroll.prototype.endSuccess = function(dataSize, hasNext, systime) {
|
||||
let me = this;
|
||||
// 结束下拉刷新
|
||||
if (me.isDownScrolling) me.endDownScroll();
|
||||
|
||||
// 结束上拉加载
|
||||
if (me.optUp.use) {
|
||||
let isShowNoMore; // 是否已无更多数据
|
||||
if (dataSize != null) {
|
||||
let pageNum = me.optUp.page.num; // 当前页码
|
||||
let pageSize = me.optUp.page.size; // 每页长度
|
||||
// 如果是第一页
|
||||
if (pageNum === 1) {
|
||||
if (systime) me.optUp.page.time = systime; // 设置加载列表数据第一页的时间
|
||||
}
|
||||
if (dataSize < pageSize || hasNext === false) {
|
||||
// 返回的数据不满一页时,则说明已无更多数据
|
||||
me.optUp.hasNext = false;
|
||||
if (dataSize === 0 && pageNum === 1) {
|
||||
// 如果第一页无任何数据且配置了空布局
|
||||
isShowNoMore = false;
|
||||
me.showEmpty();
|
||||
} else {
|
||||
// 总列表数少于配置的数量,则不显示无更多数据
|
||||
let allDataSize = (pageNum - 1) * pageSize + dataSize;
|
||||
if (allDataSize < me.optUp.noMoreSize) {
|
||||
isShowNoMore = false;
|
||||
} else {
|
||||
isShowNoMore = true;
|
||||
}
|
||||
me.removeEmpty(); // 移除空布局
|
||||
}
|
||||
} else {
|
||||
// 还有下一页
|
||||
isShowNoMore = false;
|
||||
me.optUp.hasNext = true;
|
||||
me.removeEmpty(); // 移除空布局
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏上拉
|
||||
me.endUpScroll(isShowNoMore);
|
||||
}
|
||||
}
|
||||
|
||||
/* 回调失败,结束下拉刷新和上拉加载 */
|
||||
MeScroll.prototype.endErr = function(errDistance) {
|
||||
// 结束下拉,回调失败重置回原来的页码和时间
|
||||
if (this.isDownScrolling) {
|
||||
let page = this.optUp.page;
|
||||
if (page && this.prePageNum) {
|
||||
page.num = this.prePageNum;
|
||||
page.time = this.prePageTime;
|
||||
}
|
||||
this.endDownScroll();
|
||||
}
|
||||
// 结束上拉,回调失败重置回原来的页码
|
||||
if (this.isUpScrolling) {
|
||||
this.optUp.page.num--;
|
||||
this.endUpScroll(false);
|
||||
// 如果是mescroll-body,则需往回滚一定距离
|
||||
if (this.isScrollBody && errDistance !== 0) { // 不处理0
|
||||
if (!errDistance) errDistance = this.optUp.errDistance; // 不传,则取默认
|
||||
this.scrollTo(this.getScrollTop() - errDistance, 0) // 往上回滚的距离
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 显示空布局 */
|
||||
MeScroll.prototype.showEmpty = function() {
|
||||
this.optUp.empty.use && this.optUp.empty.onShow && this.optUp.empty.onShow(true)
|
||||
}
|
||||
|
||||
/* 移除空布局 */
|
||||
MeScroll.prototype.removeEmpty = function() {
|
||||
this.optUp.empty.use && this.optUp.empty.onShow && this.optUp.empty.onShow(false)
|
||||
}
|
||||
|
||||
/* 显示回到顶部的按钮 */
|
||||
MeScroll.prototype.showTopBtn = function() {
|
||||
if (!this.topBtnShow) {
|
||||
this.topBtnShow = true;
|
||||
this.optUp.toTop.onShow && this.optUp.toTop.onShow(true);
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏回到顶部的按钮 */
|
||||
MeScroll.prototype.hideTopBtn = function() {
|
||||
if (this.topBtnShow) {
|
||||
this.topBtnShow = false;
|
||||
this.optUp.toTop.onShow && this.optUp.toTop.onShow(false);
|
||||
}
|
||||
}
|
||||
|
||||
/* 获取滚动条的位置 */
|
||||
MeScroll.prototype.getScrollTop = function() {
|
||||
return this.scrollTop || 0
|
||||
}
|
||||
|
||||
/* 记录滚动条的位置 */
|
||||
MeScroll.prototype.setScrollTop = function(y) {
|
||||
this.scrollTop = y;
|
||||
}
|
||||
|
||||
/* 滚动到指定位置 */
|
||||
MeScroll.prototype.scrollTo = function(y, t) {
|
||||
this.myScrollTo && this.myScrollTo(y, t) // scrollview需自定义回到顶部方法
|
||||
}
|
||||
|
||||
/* 自定义scrollTo */
|
||||
MeScroll.prototype.resetScrollTo = function(myScrollTo) {
|
||||
this.myScrollTo = myScrollTo
|
||||
}
|
||||
|
||||
/* 滚动条到底部的距离 */
|
||||
MeScroll.prototype.getScrollBottom = function() {
|
||||
return this.getScrollHeight() - this.getClientHeight() - this.getScrollTop()
|
||||
}
|
||||
|
||||
/* 计步器
|
||||
star: 开始值
|
||||
end: 结束值
|
||||
callback(step,timer): 回调step值,计步器timer,可自行通过window.clearInterval(timer)结束计步器;
|
||||
t: 计步时长,传0则直接回调end值;不传则默认300ms
|
||||
rate: 周期;不传则默认30ms计步一次
|
||||
* */
|
||||
MeScroll.prototype.getStep = function(star, end, callback, t, rate) {
|
||||
let diff = end - star; // 差值
|
||||
if (t === 0 || diff === 0) {
|
||||
callback && callback(end);
|
||||
return;
|
||||
}
|
||||
t = t || 300; // 时长 300ms
|
||||
rate = rate || 30; // 周期 30ms
|
||||
let count = t / rate; // 次数
|
||||
let step = diff / count; // 步长
|
||||
let i = 0; // 计数
|
||||
let timer = setInterval(function() {
|
||||
if (i < count - 1) {
|
||||
star += step;
|
||||
callback && callback(star, timer);
|
||||
i++;
|
||||
} else {
|
||||
callback && callback(end, timer); // 最后一次直接设置end,避免计算误差
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, rate);
|
||||
}
|
||||
|
||||
/* 滚动容器的高度 */
|
||||
MeScroll.prototype.getClientHeight = function(isReal) {
|
||||
let h = this.clientHeight || 0
|
||||
if (h === 0 && isReal !== true) { // 未获取到容器的高度,可临时取body的高度 (可能会有误差)
|
||||
h = this.getBodyHeight()
|
||||
}
|
||||
return h
|
||||
}
|
||||
MeScroll.prototype.setClientHeight = function(h) {
|
||||
this.clientHeight = h;
|
||||
}
|
||||
|
||||
/* 滚动内容的高度 */
|
||||
MeScroll.prototype.getScrollHeight = function() {
|
||||
return this.scrollHeight || 0;
|
||||
}
|
||||
MeScroll.prototype.setScrollHeight = function(h) {
|
||||
this.scrollHeight = h;
|
||||
}
|
||||
|
||||
/* body的高度 */
|
||||
MeScroll.prototype.getBodyHeight = function() {
|
||||
return this.bodyHeight || 0;
|
||||
}
|
||||
MeScroll.prototype.setBodyHeight = function(h) {
|
||||
this.bodyHeight = h;
|
||||
}
|
||||
|
||||
/* 阻止浏览器默认滚动事件 */
|
||||
MeScroll.prototype.preventDefault = function(e) {
|
||||
// 小程序不支持e.preventDefault
|
||||
// app的bounce只能通过配置pages.json的style.app-plus.bounce为"none"来禁止
|
||||
// cancelable:是否可以被禁用; defaultPrevented:是否已经被禁用
|
||||
if (e && e.cancelable && !e.defaultPrevented) e.preventDefault()
|
||||
}
|
||||
|
||||
/* 是否允许下拉回弹(橡皮筋效果); true或null为允许; false禁止bounce */
|
||||
MeScroll.prototype.setBounce = function(isBounce) {
|
||||
// #ifdef H5
|
||||
if (isBounce === false) {
|
||||
this.optUp.isBounce = false; // 禁止
|
||||
// 标记当前页使用了mescroll (需延时,确保page已切换)
|
||||
setTimeout(function() {
|
||||
let uniPageDom = document.getElementsByTagName('uni-page')[0];
|
||||
uniPageDom && uniPageDom.setAttribute('use_mescroll', true)
|
||||
}, 30);
|
||||
// 避免重复添加事件
|
||||
if (window.isSetBounce) return;
|
||||
window.isSetBounce = true;
|
||||
// 需禁止window的touchmove事件才能有效的阻止bounce
|
||||
window.bounceTouchmove = function(e) {
|
||||
let el = e.target;
|
||||
// 当前touch的元素及父元素是否要拦截touchmove事件
|
||||
let isPrevent = true;
|
||||
while (el !== document.body && el !== document) {
|
||||
if (el.tagName === 'UNI-PAGE') { // 只扫描当前页
|
||||
if (!el.getAttribute('use_mescroll')) {
|
||||
isPrevent = false; // 如果当前页没有使用mescroll,则不阻止
|
||||
}
|
||||
break;
|
||||
}
|
||||
let cls = el.classList;
|
||||
if (cls) {
|
||||
if (cls.contains('mescroll-touch')) { // 采用scroll-view 此处不能过滤mescroll-uni,否则下拉仍然有回弹
|
||||
isPrevent = false; // mescroll-touch无需拦截touchmove事件
|
||||
break;
|
||||
} else if (cls.contains('mescroll-touch-x') || cls.contains('mescroll-touch-y')) {
|
||||
// 如果配置了水平或者垂直滑动
|
||||
let curX = e.touches ? e.touches[0].pageX : e.clientX; // 当前第一个手指距离列表顶部的距离x
|
||||
let curY = e.touches ? e.touches[0].pageY : e.clientY; // 当前第一个手指距离列表顶部的距离y
|
||||
if (!this.preWinX) this.preWinX = curX; // 设置上次移动的距离x
|
||||
if (!this.preWinY) this.preWinY = curY; // 设置上次移动的距离y
|
||||
// 计算两点之间的角度
|
||||
let x = Math.abs(this.preWinX - curX);
|
||||
let y = Math.abs(this.preWinY - curY);
|
||||
let z = Math.sqrt(x * x + y * y);
|
||||
this.preWinX = curX; // 记录本次curX的值
|
||||
this.preWinY = curY; // 记录本次curY的值
|
||||
if (z !== 0) {
|
||||
let angle = Math.asin(y / z) / Math.PI * 180; // 角度区间 [0,90]
|
||||
if ((angle <= 45 && cls.contains('mescroll-touch-x')) || (angle > 45 && cls.contains('mescroll-touch-y'))) {
|
||||
isPrevent = false; // 水平滑动或者垂直滑动,不拦截touchmove事件
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
el = el.parentNode; // 继续检查其父元素
|
||||
}
|
||||
// 拦截touchmove事件:是否可以被禁用&&是否已经被禁用 (这里不使用me.preventDefault(e)的方法,因为某些情况下会报找不到方法的异常)
|
||||
if (isPrevent && e.cancelable && !e.defaultPrevented && typeof e.preventDefault === "function") e.preventDefault();
|
||||
}
|
||||
window.addEventListener('touchmove', window.bounceTouchmove, {
|
||||
passive: false
|
||||
});
|
||||
} else {
|
||||
this.optUp.isBounce = true; // 允许
|
||||
if (window.bounceTouchmove) {
|
||||
window.removeEventListener('touchmove', window.bounceTouchmove);
|
||||
window.bounceTouchmove = null;
|
||||
window.isSetBounce = false;
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
429
components/mescroll/mescroll-uni.vue
Normal file
429
components/mescroll/mescroll-uni.vue
Normal file
@@ -0,0 +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';
|
||||
</style>
|
||||
23
components/mescroll/mixins/mescroll-comp.js
Normal file
23
components/mescroll/mixins/mescroll-comp.js
Normal file
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* mescroll-body写在子组件时,需通过mescroll的mixins补充子组件缺少的生命周期:
|
||||
* 当一个页面只有一个mescroll-body写在子组件时, 则使用mescroll-comp.js (参考 mescroll-comp 案例)
|
||||
* 当一个页面有多个mescroll-body写在子组件时, 则使用mescroll-more.js (参考 mescroll-more 案例)
|
||||
*/
|
||||
const MescrollCompMixin = {
|
||||
// 因为子组件无onPageScroll和onReachBottom的页面生命周期，需在页面传递进到子组件
|
||||
onPageScroll(e) {
|
||||
let item = this.$refs["mescrollItem"];
|
||||
if (item && item.mescroll) item.mescroll.onPageScroll(e);
|
||||
},
|
||||
onReachBottom() {
|
||||
let item = this.$refs["mescrollItem"];
|
||||
if (item && item.mescroll) item.mescroll.onReachBottom();
|
||||
},
|
||||
// 当down的native: true时, 还需传递此方法进到子组件
|
||||
onPullDownRefresh() {
|
||||
let item = this.$refs["mescrollItem"];
|
||||
if (item && item.mescroll) item.mescroll.onPullDownRefresh();
|
||||
}
|
||||
}
|
||||
|
||||
export default MescrollCompMixin;
|
||||
48
components/mescroll/mixins/mescroll-more-item.js
Normal file
48
components/mescroll/mixins/mescroll-more-item.js
Normal file
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* mescroll-more-item的mixins, 仅在多个 mescroll-body 写在子组件时使用 (参考 mescroll-more 案例)
|
||||
*/
|
||||
const MescrollMoreItemMixin = {
|
||||
props: {
|
||||
i: Number, // 每个tab页的专属下标
|
||||
index: { // 当前tab的下标
|
||||
type: Number,
|
||||
default () {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
downOption: {
|
||||
auto: false // 不自动加载
|
||||
},
|
||||
upOption: {
|
||||
auto: false // 不自动加载
|
||||
},
|
||||
isInit: false // 当前tab是否已初始化
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听下标的变化
|
||||
index(val) {
|
||||
if (this.i === val && !this.isInit) {
|
||||
this.isInit = true; // 标记为true
|
||||
this.mescroll && this.mescroll.triggerDownScroll();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// mescroll组件初始化的回调,可获取到mescroll对象
|
||||
mescrollInit(mescroll) {
|
||||
this.mescroll = mescroll;
|
||||
this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序 (mescroll-mixins.js)
|
||||
// 自动加载当前tab的数据
|
||||
if (this.i === this.index) {
|
||||
this.isInit = true; // 标记为true
|
||||
this.mescroll.triggerDownScroll();
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default MescrollMoreItemMixin;
|
||||
56
components/mescroll/mixins/mescroll-more.js
Normal file
56
components/mescroll/mixins/mescroll-more.js
Normal file
@@ -0,0 +1,56 @@
|
||||
/**
|
||||
* mescroll-body写在子组件时,需通过mescroll的mixins补充子组件缺少的生命周期:
|
||||
* 当一个页面只有一个mescroll-body写在子组件时, 则使用mescroll-comp.js (参考 mescroll-comp 案例)
|
||||
* 当一个页面有多个mescroll-body写在子组件时, 则使用mescroll-more.js (参考 mescroll-more 案例)
|
||||
*/
|
||||
const MescrollMoreMixin = {
|
||||
data() {
|
||||
return {
|
||||
tabIndex: 0 // 当前tab下标
|
||||
}
|
||||
},
|
||||
// 因为子组件无onPageScroll和onReachBottom的页面生命周期，需在页面传递进到子组件
|
||||
onPageScroll(e) {
|
||||
let mescroll = this.getMescroll(this.tabIndex);
|
||||
mescroll && mescroll.onPageScroll(e);
|
||||
},
|
||||
onReachBottom() {
|
||||
let mescroll = this.getMescroll(this.tabIndex);
|
||||
mescroll && mescroll.onReachBottom();
|
||||
},
|
||||
// 当down的native: true时, 还需传递此方法进到子组件
|
||||
onPullDownRefresh() {
|
||||
let mescroll = this.getMescroll(this.tabIndex);
|
||||
mescroll && mescroll.onPullDownRefresh();
|
||||
},
|
||||
methods: {
|
||||
// 根据下标获取对应子组件的mescroll
|
||||
getMescroll(i) {
|
||||
if (!this.mescrollItems) this.mescrollItems = [];
|
||||
if (!this.mescrollItems[i]) {
|
||||
// v-for中的refs
|
||||
let vForItem = this.$refs["mescrollItem"];
|
||||
if (vForItem) {
|
||||
this.mescrollItems[i] = vForItem[i]
|
||||
} else {
|
||||
// 普通的refs,不可重复
|
||||
this.mescrollItems[i] = this.$refs["mescrollItem" + i];
|
||||
}
|
||||
}
|
||||
let item = this.mescrollItems[i]
|
||||
return item ? item.mescroll : null
|
||||
},
|
||||
// 切换tab,恢复滚动条位置
|
||||
tabChange(i) {
|
||||
let mescroll = this.getMescroll(i);
|
||||
if (mescroll) {
|
||||
// 延时(比$nextTick靠谱一些),确保元素已渲染
|
||||
setTimeout(() => {
|
||||
mescroll.scrollTo(mescroll.getScrollTop(), 0)
|
||||
}, 30)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default MescrollMoreMixin;
|
||||
113
components/mescroll/my-list-mescroll.vue
Normal file
113
components/mescroll/my-list-mescroll.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
|
||||
<mescroll
|
||||
v-if="isInit"
|
||||
:top="top"
|
||||
:down="downOption"
|
||||
:fixed="fixed"
|
||||
:topbar="topbar"
|
||||
:background="background"
|
||||
:paddingBoth="paddingBoth"
|
||||
@down="downCallback"
|
||||
:up="upOption"
|
||||
@up="upCallback"
|
||||
@emptyclick="emptyClick"
|
||||
@init="mescrollInit"
|
||||
>
|
||||
<!-- 数据列表 -->
|
||||
<slot name="list"></slot>
|
||||
</mescroll>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Mescroll from './mescroll-uni.vue';
|
||||
export default {
|
||||
components: {
|
||||
Mescroll
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mescroll: null, //mescroll实例对象
|
||||
downOption: {
|
||||
auto: false // 不自动加载
|
||||
},
|
||||
upOption: {
|
||||
auto: false, // 不自动加载
|
||||
page: {
|
||||
num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
|
||||
size: 10 // 每页数据的数量
|
||||
},
|
||||
noMoreSize: 2, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
||||
empty: {
|
||||
tip: '~ 空空如也 ~', // 提示
|
||||
btnText: '去看看'
|
||||
},
|
||||
onScroll: true
|
||||
},
|
||||
scrollY: 0,
|
||||
isInit: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
top: [String, Number],
|
||||
size: [String, Number],
|
||||
fixed: {
|
||||
// 是否通过fixed固定mescroll的高度, 默认true
|
||||
type: Boolean,
|
||||
default() {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
background: String,
|
||||
topbar: Boolean,
|
||||
paddingBoth: {
|
||||
type: [String, Number],
|
||||
default() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.size) this.upOption.page.size = this.size;
|
||||
this.isInit = true;
|
||||
},
|
||||
mounted() {
|
||||
this.mescroll.resetUpScroll();
|
||||
this.listenRefresh();
|
||||
},
|
||||
methods: {
|
||||
// mescroll组件初始化的回调,可获取到mescroll对象
|
||||
mescrollInit(mescroll) {
|
||||
this.mescroll = mescroll;
|
||||
},
|
||||
/*下拉刷新的回调 */
|
||||
downCallback() {
|
||||
// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
|
||||
// loadSwiper();
|
||||
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
|
||||
this.mescroll.resetUpScroll();
|
||||
this.listenRefresh();
|
||||
},
|
||||
/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
|
||||
upCallback() {
|
||||
//联网加载数据
|
||||
this.$emit('getData', this.mescroll);
|
||||
},
|
||||
//点击空布局按钮的回调
|
||||
emptyClick() {
|
||||
this.$emit('emptytap', this.mescroll);
|
||||
},
|
||||
//刷新
|
||||
refresh() {
|
||||
this.mescroll.resetUpScroll();
|
||||
this.listenRefresh();
|
||||
},
|
||||
myScrollTo(y, t) {
|
||||
this.mescroll.myScrollTo(y, t);
|
||||
},
|
||||
listenRefresh() {
|
||||
this.$emit('listenRefresh', true);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
120
components/ns-adv/ns-adv.vue
Normal file
120
components/ns-adv/ns-adv.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<view v-if="advList.length" :class="['container-box',className]">
|
||||
<swiper :indicator-dots="advList.length > 1" indicator-active-color="#ffffff" :autoplay="true" :interval="3000" :duration="1000" v-if="advList.length > 1" @change="changeSwiper" :current="currentIndex" :style="{ height: swiperHeight + 'px' }" class="item-wrap">
|
||||
<swiper-item v-for="(item, index) in advList" :key="index" @click="jumppage(item.adv_url)">
|
||||
<view class="image-box">
|
||||
<image :src="$util.img(item.adv_image)" mode="widthFix" :id="'content-wrap' + index"/>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view v-else class="container-box item-wrap">
|
||||
<image :src="$util.img(advList[0]['adv_image'])" mode="widthFix" lazy-load="true" @load="imageLoad" @click="jumppage(advList[0].adv_url)"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-advert',
|
||||
props: {
|
||||
keyword: {
|
||||
type: String
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
advList: [],
|
||||
isImage: false,
|
||||
//滑块的高度(单位px)
|
||||
swiperHeight: 150,
|
||||
//当前索引
|
||||
currentIndex: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getAdvList();
|
||||
},
|
||||
methods: {
|
||||
//获取广告位
|
||||
getAdvList() {
|
||||
var item = {
|
||||
adv_image: '',
|
||||
adv_url: ''
|
||||
};
|
||||
this.$api.sendRequest({
|
||||
url: '/api/adv/detail',
|
||||
data: {
|
||||
keyword: this.keyword
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
var data = res.data.adv_list;
|
||||
for (var index in data) {
|
||||
if (data[index].adv_url) data[index].adv_url = JSON.parse(data[index].adv_url);
|
||||
}
|
||||
this.advList = res.data.adv_list;
|
||||
|
||||
//动态设置swiper的高度
|
||||
this.$nextTick(() => {
|
||||
this.setSwiperHeight();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
jumppage(e) {
|
||||
this.$util.diyRedirectTo(e);
|
||||
},
|
||||
imageLoad(data) {
|
||||
this.isImage = true;
|
||||
},
|
||||
//手动切换题目
|
||||
changeSwiper(e) {
|
||||
this.currentIndex = e.detail.current;
|
||||
//动态设置swiper的高度，使用nextTick延时设置
|
||||
this.$nextTick(() => {
|
||||
this.setSwiperHeight();
|
||||
});
|
||||
},
|
||||
//动态设置swiper的高度
|
||||
setSwiperHeight() {
|
||||
if (this.advList.length > 1) {
|
||||
setTimeout(() => {
|
||||
let element = "#content-wrap" + this.currentIndex;
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select(element).boundingClientRect();
|
||||
query.exec((res) => {
|
||||
if (res && res[0]) {
|
||||
this.swiperHeight = res[0].height;
|
||||
}
|
||||
});
|
||||
}, 10);
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container-box {
|
||||
width: 100%;
|
||||
|
||||
.item-wrap {
|
||||
border-radius: 10rpx;
|
||||
|
||||
.image-box {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
336
components/ns-birthday-gift/ns-birthday-gift.vue
Normal file
336
components/ns-birthday-gift/ns-birthday-gift.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<view>
|
||||
<view @touchmove.prevent.stop v-if="birthday" class="reward-popup">
|
||||
<uni-popup ref="birthdayGift" type="center" :maskClick="false">
|
||||
<view class="reward-wrap">
|
||||
<view class="wrap" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/birthday_gift/birthday_gift_bg.png') + ')' }">
|
||||
<view class="birthday-title-name" v-if="memberInfo">Dear {{ memberInfo.nickname }}</view>
|
||||
<view class="birthday-title-desc" v-if="birthday.blessing_content">
|
||||
{{ birthday.blessing_content }}
|
||||
</view>
|
||||
<view class="birthday-title-desc" v-else>感谢您一直以来的支持，在您生日到来之际，特为您送上最真诚的祝福！</view>
|
||||
<view class="birthday-title-hint">
|
||||
<image :src="$util.img('public/uniapp/birthday_gift/birthday_gift_left.png')" mode="" class="birthday-img-all"/>
|
||||
<view class="font-size-toolbar">生日贺礼</view>
|
||||
<image :src="$util.img('public/uniapp/birthday_gift/birthday_gift_right.png')" mode="" class="birthday-img-all"/>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" class="register-box">
|
||||
<view class="reward-content">
|
||||
<view class="content" v-if="birthday.point > 0">
|
||||
<view class="info">
|
||||
<text class="num">
|
||||
{{ parseFloat(birthday.point) }}
|
||||
<text class="type">积分</text>
|
||||
</text>
|
||||
<view class="desc">用于下单时抵现或兑换商品等</view>
|
||||
</view>
|
||||
<view class="tip" @click="closeRewardPopup('1')">立即查看</view>
|
||||
</view>
|
||||
<view class="content" v-if="birthday.balance_type == 0 && birthday.balance > 0">
|
||||
<view class="info">
|
||||
<text class="num">
|
||||
{{ parseFloat(birthday.balance) }}
|
||||
<text class="type">元红包</text>
|
||||
</text>
|
||||
<view class="desc">不可提现红包</view>
|
||||
</view>
|
||||
<view class="tip" @click="closeRewardPopup('2')">立即查看</view>
|
||||
</view>
|
||||
<view class="content" v-if="birthday.balance_type == 1 && birthday.balance_money > 0">
|
||||
<view class="info">
|
||||
<text class="num">
|
||||
{{ parseFloat(birthday.balance_money) }}
|
||||
<text class="type">元红包</text>
|
||||
</text>
|
||||
<view class="desc">可提现红包</view>
|
||||
</view>
|
||||
<view class="tip" @click="closeRewardPopup('2')">立即查看</view>
|
||||
</view>
|
||||
|
||||
<block v-if="birthday.coupon_list.length > 0">
|
||||
<block v-for="(item, index) in birthday.coupon_list" :key="index">
|
||||
<view class="content">
|
||||
<view class="info">
|
||||
<block v-if="item.type == 'reward'">
|
||||
<text class="num">
|
||||
{{ parseFloat(item.money) }}
|
||||
<text class="type">元优惠劵</text>
|
||||
</text>
|
||||
</block>
|
||||
<block v-else-if="item.type == 'discount'">
|
||||
<text class="num">
|
||||
{{ item.discount }}
|
||||
<text class="type">折</text>
|
||||
</text>
|
||||
</block>
|
||||
<view class="desc">用于下单时抵现或兑换商品等</view>
|
||||
</view>
|
||||
<view class="tip" @click="closeRewardPopup('3')">立即查看</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="close-btn" @click="cancel()"><text class="iconfont icon-close btn"></text></view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '../uni-popup/uni-popup.vue';
|
||||
|
||||
// 注册奖励弹出层
|
||||
export default {
|
||||
name: 'ns-birthday-gift',
|
||||
components: {
|
||||
uniPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
birthday: {
|
||||
flag: false,
|
||||
coupon_list: {}
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
introduction() {
|
||||
let bytesCount = 0;
|
||||
if (this.birthday.blessing_content) {
|
||||
for (let i = 0, n = this.birthday.blessing_content.length; i < n; i++) {
|
||||
let c = this.birthday.blessing_content.charCodeAt(i);
|
||||
if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
|
||||
bytesCount += 1;
|
||||
} else {
|
||||
bytesCount += 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
return bytesCount;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.storeToken) return;
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getBirthdayGift();
|
||||
},
|
||||
cancel() {
|
||||
this.$refs.birthdayGift.close();
|
||||
},
|
||||
/**
|
||||
* 获取生日礼配置
|
||||
*/
|
||||
getBirthdayGift() {
|
||||
this.$api.sendRequest({
|
||||
url: '/birthdaygift/api/Config/config',
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
if (res.data) {
|
||||
this.birthday = res.data;
|
||||
this.getReceiveGift();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 领取
|
||||
getReceiveGift() {
|
||||
if (this.birthday.flag == true) {
|
||||
this.$refs.birthdayGift.open();
|
||||
this.$api.sendRequest({
|
||||
url: '/birthdaygift/api/Config/receive',
|
||||
data: {
|
||||
id: this.birthday.id
|
||||
},
|
||||
success: res => {}
|
||||
});
|
||||
}
|
||||
},
|
||||
closeRewardPopup(type) {
|
||||
if (type == 1) {
|
||||
this.$util.redirectTo('/pages_tool/member/point_detail', {});
|
||||
} else if (type == 2) {
|
||||
this.$util.redirectTo('/pages_tool/member/balance_detail', {});
|
||||
} else {
|
||||
this.$util.redirectTo('/pages_tool/member/coupon', {});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.register-box /deep/ .uni-scroll-view {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
.register-box {
|
||||
max-height: 300rpx;
|
||||
overflow-y: scroll;
|
||||
/* margin-top:350rpx; */
|
||||
}
|
||||
|
||||
/deep/ .uni-popup__wrapper-box {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/deep/ .birthday-title-hint uni-image {
|
||||
width: 113rpx !important;
|
||||
height: 24rpx !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.reward-wrap {
|
||||
width: 85vw;
|
||||
height: auto;
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding-bottom: 40rpx;
|
||||
|
||||
.birthday-title-name {
|
||||
font-size: $font-size-toolbar;
|
||||
font-weight: bold;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
padding-top: 350rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.birthday-title-desc {
|
||||
font-weight: 500;
|
||||
margin: 30rpx 70rpx 20rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.birthday-title-hint {
|
||||
font-size: $font-size-toolbar;
|
||||
font-weight: bold;
|
||||
font-family: BDZongYi-A001;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 0 40rpx;
|
||||
line-height: 1;
|
||||
|
||||
.birthday-img-all {
|
||||
width: 100rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
&>view {
|
||||
margin: 0 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reward-content {
|
||||
margin: 0 40rpx;
|
||||
}
|
||||
|
||||
.head {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
& .content:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 26rpx;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: #fa5b14;
|
||||
padding: 10rpx 0 10rpx 20rpx;
|
||||
width: 60rpx;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 2rpx;
|
||||
border-left: 2rpx dashed #e5e5e5;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 48rpx;
|
||||
color: #fa5b14;
|
||||
font-weight: bolder;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
max-width: 300rpx;
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: $font-size-base;
|
||||
margin-left: 10rpx;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 8rpx;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-tag;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
|
||||
.btn {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
border: 4rpx solid #fff;
|
||||
border-radius: 50%;
|
||||
padding: 10rpx;
|
||||
font-weight: bold;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin: 0 auto;
|
||||
line-height: 40rpx;
|
||||
/* margin: 20rpx 140rpx;
|
||||
border: none;
|
||||
background: linear-gradient(90deg, #FF6A00, #FF3C00);
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; */
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
171
components/ns-contact/ns-contact.vue
Normal file
171
components/ns-contact/ns-contact.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<view class="contact-wrap">
|
||||
<slot></slot>
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view class="contact-button" @click="contactServicer">
|
||||
<contact-button :tnt-inst-id="config.instid" :scene="config.scene" size="1000rpx" v-if="config.type == 'aliapp'"/>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<button
|
||||
type="default"
|
||||
hover-class="none"
|
||||
:open-type="openType"
|
||||
class="contact-button"
|
||||
@click="contactServicer"
|
||||
:send-message-title="sendMessageTitle"
|
||||
:send-message-path="sendMessagePath"
|
||||
:send-message-img="sendMessageImg"
|
||||
:show-message-card="true"></button>
|
||||
<!-- #endif -->
|
||||
<uni-popup ref="servicePopup" type="center">
|
||||
<view class="service-popup-wrap">
|
||||
<view class="head-wrap" @click="$refs.servicePopup.close()">
|
||||
<text>联系客服</text>
|
||||
<text class="iconfont icon-close"></text>
|
||||
</view>
|
||||
<view class="body-wrap">{{ siteInfo.site_tel ? '请联系客服，客服电话是' + siteInfo.site_tel : '抱歉，商家暂无客服，请线下联系' }}</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 客服组件 -->
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-contact',
|
||||
props: {
|
||||
niushop: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
sendMessageTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
sendMessagePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
sendMessageImg: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: null,
|
||||
openType: ''
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.servicerConfig) {
|
||||
// #ifdef H5
|
||||
this.config = this.servicerConfig.h5;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.config = this.servicerConfig.weapp;
|
||||
if (this.config.type == 'weapp') this.openType = 'contact';
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
this.config = this.servicerConfig.aliapp;
|
||||
if (this.config.type == 'aliapp') this.openType = 'contact';
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 联系客服
|
||||
*/
|
||||
contactServicer() {
|
||||
if (this.config.type == 'none') {
|
||||
this.$refs.servicePopup.open();
|
||||
}
|
||||
if (this.openType == 'contact') return;
|
||||
|
||||
switch (this.config.type) {
|
||||
case 'wxwork':
|
||||
// #ifdef H5
|
||||
location.href = this.config.wxwork_url;
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.openCustomerServiceChat({
|
||||
extInfo: { url: this.config.wxwork_url },
|
||||
corpId: this.config.corpid,
|
||||
showMessageCard: true,
|
||||
sendMessageTitle: this.sendMessageTitle,
|
||||
sendMessagePath: this.sendMessagePath,
|
||||
sendMessageImg: this.sendMessageImg
|
||||
});
|
||||
// #endif
|
||||
break;
|
||||
case 'third':
|
||||
location.href = this.config.third_url;
|
||||
break;
|
||||
case 'niushop':
|
||||
this.$util.redirectTo('/pages_tool/chat/room', this.niushop);
|
||||
break;
|
||||
default:
|
||||
this.makePhoneCall();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 店铺联系方式
|
||||
*/
|
||||
makePhoneCall() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/site/shopcontact',
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data.mobile) uni.makePhoneCall({
|
||||
phoneNumber: res.data
|
||||
.mobile
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.contact-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.contact-button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.service-popup-wrap {
|
||||
width: 600rpx;
|
||||
|
||||
.head-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.body-wrap {
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
components/ns-copyright/ns-copyright.vue
Normal file
142
components/ns-copyright/ns-copyright.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<view class="copyrigt-wrap" v-if="copyright && (showLogo || showBeian)">
|
||||
<!-- <view class="copyright-info" v-if="showLogo">
|
||||
<view class="copyright-pic" v-if="copyright.logo" @click="link(copyright.copyright_link)">
|
||||
<image :src="$util.img(copyright.logo)" @error="error" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-info" v-if="showBeian">
|
||||
<view class="icp" v-if="copyright && copyright.icp" @click="toHref('https://beian.miit.gov.cn')">备案号：{{ copyright.icp }}
|
||||
</view>
|
||||
|
||||
<view v-if="copyright && copyright.gov_record" class="gov-wrap" @click="toHref(copyright.gov_url)" target="_blank">
|
||||
<image :src="$util.img('public/uniapp/common/gov_record.png')" alt="公安备案" />
|
||||
<text>{{ copyright.gov_record }}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showLogo: true,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
showBeian() {
|
||||
// 如果都为空，则隐藏
|
||||
if (this.copyright && (!this.copyright.icp && !this.copyright.gov_record)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
link(url) {
|
||||
if (url) {
|
||||
this.$util.redirectTo('/pages_tool/webview/webview', {
|
||||
src: encodeURIComponent(url)
|
||||
});
|
||||
}
|
||||
},
|
||||
toHref(url) {
|
||||
location.href = url;
|
||||
},
|
||||
error() {
|
||||
this.showLogo = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.copyrigt-wrap {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
>view {
|
||||
font-size: $font-size-tag;
|
||||
color: #666666;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.copyright-pic {
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: $font-size-goods-tag;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
color: $color-tip !important;
|
||||
}
|
||||
|
||||
.copyright-desc {
|
||||
color: lighten($color-tip, 30%);
|
||||
font-size: $font-size-goods-tag;
|
||||
text-shadow: 0 0 2rpx lighten($color-tip, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
.record-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 10rpx;
|
||||
|
||||
text {
|
||||
color: #666666;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: $font-size-tag;
|
||||
color: #666666;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gov-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
95
components/ns-empty/ns-empty.vue
Normal file
95
components/ns-empty/ns-empty.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<view class="empty" :class="{ fixed: fixed }">
|
||||
<view class="empty_img"><image :src="$util.img('public/uniapp/common/common-empty.png')" mode="aspectFit"></image></view>
|
||||
<view class="color-tip margin-top title" :style="{ color: textColor + ' !important' }">{{ text }}</view>
|
||||
<view class="color-tip margin-bottom font-size-sub">{{ subText }}</view>
|
||||
<button type="primary" size="mini" class="button mini" @click="goIndex()" v-if="isIndex">{{ emptyBtn.text }}</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: '暂无相关数据'
|
||||
},
|
||||
subText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isIndex: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
emptyBtn: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return { text: '去逛逛' };
|
||||
}
|
||||
},
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goIndex() {
|
||||
if (this.emptyBtn.url) {
|
||||
this.$util.redirectTo(this.emptyBtn.url, {}, 'redirectTo');
|
||||
} else {
|
||||
this.$util.redirectTo('/pages/index/index');
|
||||
}
|
||||
},
|
||||
re(text) {
|
||||
this.text = text;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.empty {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.empty_img {
|
||||
width: 50%;
|
||||
height: 450rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
}
|
||||
button {
|
||||
min-width: 300rpx;
|
||||
margin-top: 100rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx !important;
|
||||
font-size: $font-size-base;
|
||||
font-weight: bold;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 20vh;
|
||||
}
|
||||
</style>
|
||||
867
components/ns-form/ns-form.vue
Normal file
867
components/ns-form/ns-form.vue
Normal file
@@ -0,0 +1,867 @@
|
||||
<template>
|
||||
<view class="form-wrap form-component">
|
||||
<block v-for="(item, index) in formData">
|
||||
<view class="order-wrap" v-if="item.controller == 'Text'">
|
||||
<view class="order-cell">
|
||||
<view class="name">
|
||||
<text class="tit">{{ item.value.title }}</text>
|
||||
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view class="box">
|
||||
<input type="text" :placeholder="item.value.placeholder" placeholder-class="placeholder color-tip" v-model="item.val" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-wrap" v-if="item.controller == 'Textarea'">
|
||||
<view class="order-cell flex-box textarea">
|
||||
<view class="name">
|
||||
<text class="tit">{{ item.value.title }}</text>
|
||||
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view class="box">
|
||||
<textarea :placeholder="item.value.placeholder" placeholder-class="placeholder color-tip" v-model="item.val"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<picker mode="selector" :range="item.value.options" v-if="item.controller == 'Select'" @change="pickerChange($event, index)">
|
||||
<view class="order-wrap">
|
||||
<view class="order-cell">
|
||||
<view class="name">
|
||||
<text class="tit">{{ item.value.title }}</text>
|
||||
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view class="box">
|
||||
<text v-if="item.val != ''">{{ item.val }}</text>
|
||||
<text v-else class="color-tip">请选择</text>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
|
||||
<view class="order-wrap" v-if="item.controller == 'Checkbox'">
|
||||
<view class="order-cell">
|
||||
<view class="name">
|
||||
<text class="tit">{{ item.value.title }}</text>
|
||||
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view class="box check-group-box">
|
||||
<checkbox-group @change="checkboxChange($event, index)">
|
||||
<label v-for="(v, k) in item.option_lists" :key="k">
|
||||
<checkbox :value="v.value" :checked="v.checked" />
|
||||
<view class="checkbox">
|
||||
<text class="iconfont" :class="{ 'icon-fuxuankuang2': !v.checked, 'icon-fuxuankuang1 color-base-text': v.checked }"></text>
|
||||
{{ v.value }}
|
||||
</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-wrap" v-if="item.controller == 'Radio'">
|
||||
<view class="order-cell">
|
||||
<view class="name">
|
||||
<text class="tit">{{ item.value.title }}</text>
|
||||
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view class="box radio-group-box">
|
||||
<radio-group @change="radioChange($event, index)">
|
||||
<label v-for="(v, k) in item.option_lists" :key="k">
|
||||
<radio :value="v.value" :checked="item.val == v.value" />
|
||||
<view class="radio-box">
|
||||
<text class="iconfont" :class="{ 'icon-yuan_checkbox': item.val != v.value, 'icon-yuan_checked color-base-text': item.val == v.value }"></text>
|
||||
{{ v.value }}
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-wrap" v-if="item.controller == 'Img'">
|
||||
<view class="order-cell flex-box">
|
||||
<view class="name">
|
||||
<text class="tit">{{ item.value.title }}</text>
|
||||
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view class="box img-boxs">
|
||||
<view class="img-box" v-for="(v, k) in item.img_lists" :key="k" @click="uploadImg(index)">
|
||||
<image :src="$util.img(v)" mode="aspectFill"></image>
|
||||
<text class="iconfont icon-guanbi" @click.stop="delImg(k, index)"></text>
|
||||
</view>
|
||||
<view class="img-box" @click="addImg(index)"><text class="iconfont icon-add1"></text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-wrap" v-if="item.controller == 'Date'">
|
||||
<view class="order-cell">
|
||||
<view class="name">
|
||||
<text class="tit">{{ item.value.title }}</text>
|
||||
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view class="box box-flex">
|
||||
<picker mode="date" :value="item.val" @change="bindDateChange($event, index)">
|
||||
<view class="uni-input" :class="{ 'color-tip': !item.val }">{{ item.val ? item.val : item.value.placeholder }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-wrap" v-if="item.controller == 'Datelimit'">
|
||||
<view class="order-cell flex-box">
|
||||
<view class="name">
|
||||
<text class="tit">{{ item.value.title }}</text>
|
||||
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view class="box date-boxs">
|
||||
<view class="date-box">
|
||||
<picker mode="date" :value="item.start_date" @change="bindStartDateChange($event, index)">
|
||||
<view class="picker-box">
|
||||
<view class="uni-input" :class="{ 'color-tip': !item.start_date }">{{ item.start_date ? item.start_date : item.value.placeholder_start }}</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="interval iconfont icon-jian"></view>
|
||||
<view class="date-box">
|
||||
<picker mode="date" :value="item.end_date" @change="bindEndDateChange($event, index)">
|
||||
<view class="picker-box">
|
||||
<view class="uni-input" :class="{ 'color-tip': !item.end_date }">{{ item.end_date ? item.end_date : item.value.placeholder_end }}</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-wrap" v-if="item.controller == 'Time'">
|
||||
<view class="order-cell">
|
||||
<view class="name">
|
||||
<text class="tit">{{ item.value.title }}</text>
|
||||
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view class="box box-flex">
|
||||
<picker mode="time" :value="item.val" @change="bindTimeChange($event, index)">
|
||||
<view class="uni-input" :class="{ 'color-tip': !item.val }">{{ item.val ? item.val : item.value.placeholder }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-wrap" v-if="item.controller == 'Timelimit'">
|
||||
<view class="order-cell flex-box">
|
||||
<view class="name">
|
||||
<text class="tit">{{ item.value.title }}</text>
|
||||
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view class="box date-boxs">
|
||||
<view class="date-box">
|
||||
<picker mode="time" :value="item.start_time" @change="bindStartTimeChange($event, index)">
|
||||
<view class="picker-box">
|
||||
<view class="uni-input" :class="{ 'color-tip': !item.start_time }">{{ item.start_time ? item.start_time : item.value.placeholder_start }}</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="interval iconfont icon-jian"></view>
|
||||
<view class="date-box">
|
||||
<picker mode="time" :value="item.end_time" @change="bindEndTimeChange($event, index)">
|
||||
<view class="picker-box">
|
||||
<view class="uni-input" :class="{ 'color-tip': !item.end_time }">{{ item.end_time ? item.end_time : item.value.placeholder_end }}</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-wrap" v-if="item.controller == 'City'">
|
||||
<view class="order-cell box-flex">
|
||||
<view class="name">
|
||||
<text class="tit">{{ item.value.title }}</text>
|
||||
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
||||
</view>
|
||||
<view class="box">
|
||||
<pick-regions :default-regions="item.default_regions" :select-arr="item.select_arr" @getRegions="handleGetRegions($event, index)">
|
||||
<view class="select-address " :class="{ empty: !item.val, 'color-tip': !item.val }">
|
||||
{{ item.val ? item.val : item.select_arr == '2' ? '请选择省市' : '请选择省市区/县' }}
|
||||
</view>
|
||||
</pick-regions>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pickRegions from '@/components/pick-regions/pick-regions.vue';
|
||||
export default {
|
||||
name: 'ns-form',
|
||||
components: {
|
||||
pickRegions
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: {}
|
||||
},
|
||||
customAttr: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: this.data
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.setFormData();
|
||||
},
|
||||
watch: {
|
||||
data: function() {
|
||||
this.setFormData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setFormData() {
|
||||
this.formData = this.data;
|
||||
|
||||
this.formData.forEach(item => {
|
||||
if (!item.val) item.val = item.value.default ? item.value.default : '';
|
||||
|
||||
if (item.value.options) {
|
||||
item.option_lists = [];
|
||||
item.value.options.forEach((v, k) => {
|
||||
var obj = {};
|
||||
obj.value = v;
|
||||
obj.checked = false;
|
||||
if (item.controller == 'Radio' && ((!item.val && k == 0) || (item.val &&
|
||||
item.val == v))) {
|
||||
obj.checked = true;
|
||||
item.val = v;
|
||||
}
|
||||
if (item.controller == 'Checkbox' && item.val) {
|
||||
let val = item.val.split(',');
|
||||
obj.checked = val.indexOf(v) != -1;
|
||||
}
|
||||
item.option_lists.push(obj);
|
||||
});
|
||||
}
|
||||
|
||||
if (item.controller == 'Img') {
|
||||
item.img_lists = item.val ? item.val.split(',') : [];
|
||||
}
|
||||
|
||||
if (item.controller == 'Date' && !item.val) {
|
||||
if (item.value.is_show_default) {
|
||||
if (item.value.is_current) {
|
||||
item.val = this.getDate();
|
||||
} else {
|
||||
item.val = item.value.default;
|
||||
}
|
||||
} else {
|
||||
item.val = '';
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'Datelimit') {
|
||||
if (item.val) {
|
||||
let date = item.val.split(' - ');
|
||||
item.start_date = date[0];
|
||||
item.end_date = date[1];
|
||||
} else {
|
||||
item.val = '';
|
||||
|
||||
if (item.value.is_show_default_start) {
|
||||
if (item.value.is_current_start) {
|
||||
item.start_date = this.getDate();
|
||||
} else {
|
||||
item.start_date = item.value.default_start;
|
||||
}
|
||||
} else {
|
||||
item.start_date = '';
|
||||
}
|
||||
|
||||
if (item.value.is_show_default_end) {
|
||||
if (item.value.is_current_end) {
|
||||
item.end_date = this.getDate();
|
||||
} else {
|
||||
item.end_date = item.value.default_end;
|
||||
}
|
||||
} else {
|
||||
item.end_date = '';
|
||||
}
|
||||
if (item.start_date && item.end_date) {
|
||||
item.val = item.start_date + ' - ' + item.end_date;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'Time' && !item.val) {
|
||||
if (item.value.is_show_default) {
|
||||
if (item.value.is_current) {
|
||||
item.val = this.getTime();
|
||||
} else {
|
||||
item.val = item.value.default;
|
||||
}
|
||||
} else {
|
||||
item.val = '';
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'Timelimit') {
|
||||
if (item.val) {
|
||||
let time = item.val.split(' - ');
|
||||
item.start_time = time[0];
|
||||
item.end_time = time[1];
|
||||
} else {
|
||||
item.val = '';
|
||||
|
||||
if (item.value.is_show_default_start) {
|
||||
if (item.value.is_current_start) {
|
||||
item.start_time = this.getTime();
|
||||
} else {
|
||||
item.start_time = item.value.default_start;
|
||||
}
|
||||
} else {
|
||||
item.start_time = '';
|
||||
}
|
||||
|
||||
if (item.value.is_show_default_end) {
|
||||
if (item.value.is_current_end) {
|
||||
item.end_time = this.getTime();
|
||||
} else {
|
||||
item.end_time = item.value.default_end;
|
||||
}
|
||||
} else {
|
||||
item.end_time = '';
|
||||
}
|
||||
|
||||
if (item.start_time && item.end_time) {
|
||||
item.val = item.start_time + ' - ' + item.end_time;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'City') {
|
||||
item.full_address = '';
|
||||
item.select_arr = item.value.default_type == 1 ? '2' : '3';
|
||||
if (item.val) item.default_regions = item.val.split('-');
|
||||
else item.default_regions = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
verify() {
|
||||
let verify = true;
|
||||
|
||||
for (let i = 0; i < this.formData.length; i++) {
|
||||
let item = this.formData[i];
|
||||
if (item.controller == 'Text') {
|
||||
if (item.value.required && !item.val) {
|
||||
verify = false;
|
||||
this.$util.showToast({
|
||||
title: '请输入' + item.value.title
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
|
||||
if (item.name == 'ID_CARD' && reg.test(item.val) === false) {
|
||||
verify = !item.value.required;
|
||||
if (verify == false) {
|
||||
this.$util.showToast({
|
||||
title: '身份证输入不合法'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (verify == true && item.val != '') {
|
||||
this.$util.showToast({
|
||||
title: '身份证输入不合法'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 验证手机号
|
||||
if (item.name == 'MOBILE' && this.$util.verifyMobile(item.val) === false) {
|
||||
verify = !item.value.required;
|
||||
if (verify == false) {
|
||||
this.$util.showToast({
|
||||
title: '手机号输入不合法'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (verify == true && item.val != '') {
|
||||
this.$util.showToast({
|
||||
title: '手机号输入不合法'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'Textarea') {
|
||||
if (item.value.required && !item.val) {
|
||||
verify = false;
|
||||
this.$util.showToast({
|
||||
title: '请输入' + item.value.title
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'Select') {
|
||||
if (item.value.required && !item.val) {
|
||||
verify = false;
|
||||
this.$util.showToast({
|
||||
title: '请选择' + item.value.title
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'Checkbox') {
|
||||
if (item.value.required && !item.val) {
|
||||
verify = false;
|
||||
this.$util.showToast({
|
||||
title: '请至少选择一个' + item.value.title
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'Img') {
|
||||
if (item.value.required && !item.val) {
|
||||
verify = false;
|
||||
this.$util.showToast({
|
||||
title: '请至少上传一张' + item.value.title
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'Date') {
|
||||
if (item.value.required && !item.val) {
|
||||
verify = false;
|
||||
this.$util.showToast({
|
||||
title: '请选择' + item.value.title
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'Datelimit') {
|
||||
if (item.value.required && !item.val) {
|
||||
verify = false;
|
||||
this.$util.showToast({
|
||||
title: '请选择' + item.value.title
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
if (this.$util.timeTurnTimeStamp(item.start_date) > this.$util.timeTurnTimeStamp(item.end_date)) {
|
||||
verify = false;
|
||||
this.$util.showToast({
|
||||
title: '结束日期不能小于开始日期'
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'Time') {
|
||||
if (item.value.required && !item.val) {
|
||||
verify = false;
|
||||
this.$util.showToast({
|
||||
title: '请选择' + item.value.title
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'Timelimit') {
|
||||
if (item.value.required && !item.val) {
|
||||
verify = false;
|
||||
this.$util.showToast({
|
||||
title: '请选择' + item.value.title
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
if (item.start_time >= item.end_time) {
|
||||
verify = false;
|
||||
this.$util.showToast({
|
||||
title: '结束时间必须大于开始时间'
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'City') {
|
||||
if (item.value.required && !item.val) {
|
||||
verify = false;
|
||||
this.$util.showToast({
|
||||
title: '请选择' + item.value.title
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (verify) {
|
||||
return this.formData;
|
||||
} else return verify;
|
||||
},
|
||||
pickerChange(e, index) {
|
||||
this.formData[index].val = this.data[index].value.options[e.detail.value];
|
||||
this.$forceUpdate();
|
||||
},
|
||||
checkboxChange: function(e, index) {
|
||||
this.formData[index].val = e.detail.value.toString();
|
||||
this.formData[index].option_lists.forEach(item => {
|
||||
item.checked = e.detail.value.indexOf(item.value) != -1;
|
||||
});
|
||||
this.$forceUpdate();
|
||||
},
|
||||
radioChange: function(e, index) {
|
||||
this.formData[index].val = e.detail.value;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 修改图片
|
||||
uploadImg(index) {
|
||||
this.$util.upload(
|
||||
Number(this.formData[index].value.max_count), {
|
||||
path: 'evaluateimg'
|
||||
},
|
||||
res => {
|
||||
if (res.length > 0) {
|
||||
res.forEach(v => {
|
||||
if (this.formData[index].img_lists.length >= Number(this.formData[index].value.max_count)) {
|
||||
this.$util.showToast({
|
||||
title: '最多上传' + this.formData[index].value.max_count + '张图片'
|
||||
});
|
||||
return false;
|
||||
} else {
|
||||
this.formData[index].img_lists.push(v);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.formData[index].val = this.formData[index].img_lists.toString();
|
||||
this.$forceUpdate();
|
||||
}
|
||||
);
|
||||
},
|
||||
// 添加图片
|
||||
addImg(index) {
|
||||
if (this.formData[index].img_lists.length >= Number(this.formData[index].value.max_count)) {
|
||||
this.$util.showToast({
|
||||
title: '最多上传' + this.formData[index].value.max_count + '张图片'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.$util.upload(
|
||||
Number(this.formData[index].value.max_count), {
|
||||
path: 'evaluateimg'
|
||||
},
|
||||
res => {
|
||||
if (res.length > 0) {
|
||||
res.forEach(v => {
|
||||
this.formData[index].img_lists.push(v);
|
||||
});
|
||||
}
|
||||
this.formData[index].val = this.formData[index].img_lists.toString();
|
||||
this.$forceUpdate();
|
||||
}
|
||||
);
|
||||
},
|
||||
// index 当前数据的下标 k 当前图片的下标
|
||||
delImg(k, index) {
|
||||
this.formData[index].img_lists.splice(k, 1);
|
||||
this.formData[index].val = this.formData[index].img_lists.toString();
|
||||
this.$forceUpdate();
|
||||
},
|
||||
getDate() {
|
||||
const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
month = month > 9 ? month : '0' + month;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
getTime() {
|
||||
const date = new Date();
|
||||
let hour = date.getHours(); //得到小时
|
||||
let min = date.getMinutes(); //得到分钟
|
||||
|
||||
hour = hour > 9 ? hour : '0' + hour;
|
||||
min = min > 9 ? min : '0' + min;
|
||||
return `${hour}:${min}`;
|
||||
},
|
||||
bindDateChange(e, index) {
|
||||
this.formData[index].val = e.detail.value;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
bindStartDateChange(e, index) {
|
||||
this.$set(this.formData[index], 'start_date', e.detail.value);
|
||||
this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
bindEndDateChange(e, index) {
|
||||
this.$set(this.formData[index], 'end_date', e.detail.value);
|
||||
this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
bindTimeChange(e, index) {
|
||||
this.formData[index].val = e.detail.value;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
bindStartTimeChange(e, index) {
|
||||
this.formData[index].start_time = e.detail.value;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
bindEndTimeChange(e, index) {
|
||||
this.formData[index].end_time = e.detail.value;
|
||||
this.formData[index].val = this.formData[index].start_time + ' - ' + this.formData[index].end_time;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 获取选择的地区
|
||||
handleGetRegions(e, index) {
|
||||
this.formData[index].val = '';
|
||||
this.formData[index].val += e[0] != undefined ? e[0].label : '';
|
||||
this.formData[index].val += e[1] != undefined ? '-' + e[1].label : '';
|
||||
this.formData[index].val += e[2] != undefined ? '-' + e[2].label : '';
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.order-wrap {
|
||||
padding: 20rpx 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.order-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
|
||||
&.textarea {
|
||||
align-items: unset;
|
||||
}
|
||||
|
||||
&.clear-flex {
|
||||
display: block;
|
||||
|
||||
.box {
|
||||
margin-top: 16rpx;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: solid 1px #eee;
|
||||
}
|
||||
|
||||
&.align-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 160rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tit {
|
||||
text-align: left;
|
||||
font-size: $font-size-base;
|
||||
|
||||
text {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
font-size: 28rpx;
|
||||
margin-left: 4rpx;
|
||||
width: 14rpx;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.box {
|
||||
flex: 1;
|
||||
padding: 0 10rpx;
|
||||
line-height: inherit;
|
||||
text-align: left;
|
||||
|
||||
input {
|
||||
font-size: $font-size-base;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-size: $font-size-base;
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 44rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
radio-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
&.img-boxs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
margin: 10rpx 20rpx 10rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border: 1rpx solid $color-line;
|
||||
border-radius: 4rpx;
|
||||
position: relative;
|
||||
|
||||
.icon-guanbi {
|
||||
position: absolute;
|
||||
top: -14rpx;
|
||||
right: -14rpx;
|
||||
display: inline-block;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
color: $color-tip;
|
||||
}
|
||||
|
||||
.icon-add1 {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.box-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&.date-boxs {
|
||||
padding: 0 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.interval {
|
||||
margin: 0 12rpx;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.date-box {
|
||||
.picker-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-group-box {
|
||||
radio {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radio-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
|
||||
.iconfont {
|
||||
font-size: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.check-group-box {
|
||||
checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
|
||||
.iconfont {
|
||||
font-size: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: $color-tip;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.box-flex picker {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
line-height: 1;
|
||||
position: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
96
components/ns-goods-action-button/ns-goods-action-button.vue
Normal file
96
components/ns-goods-action-button/ns-goods-action-button.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<view class="action-buttom-wrap disabled" v-if="disabled" @click="clickEvent">{{ disabledText }}</view>
|
||||
<view class="action-buttom-wrap"
|
||||
:class="[backgroundClass, textPrice ? 'has-second' : '', background ? 'color-join-cart' : 'color-base-bg']"
|
||||
:style="{background:backgroundColor+'!important', 'color':textColor ? textColor : '#ffffff'}" v-else
|
||||
@click="clickEvent">
|
||||
<text class="price-font">{{ textPrice }}</text>
|
||||
<text>{{ text }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-goods-action-button',
|
||||
props: {
|
||||
// 商品底部按钮文字
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 商品底部按钮价格文字
|
||||
textPrice: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景色
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景色样式
|
||||
backgroundClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 禁用文字提示
|
||||
disabledText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 文字颜色
|
||||
textColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.action-buttom-wrap {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
line-height: 70rpx;
|
||||
border: none;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.action-buttom-wrap.has-second {
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.action-buttom-wrap.has-second text {
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.action-buttom-wrap:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.action-buttom-wrap.disabled {
|
||||
background: $color-disabled;
|
||||
}
|
||||
</style>
|
||||
146
components/ns-goods-action-icon/ns-goods-action-icon.vue
Normal file
146
components/ns-goods-action-icon/ns-goods-action-icon.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<view>
|
||||
<block v-if="text == '客服'">
|
||||
<!-- <ns-contact :niushop="chatParam" :send-message-title="sendData.title" :send-message-path="sendData.path" :send-message-img="sendData.img"> -->
|
||||
<button hoverClass="none" openType="contact" sessionFrom="weapp" showMessageCard="true" class="action-icon-wrap" style="background: transparent;padding: 0;margin: 0;">
|
||||
<view class="iconfont color-title" :class="icon"></view>
|
||||
<text>{{ text }}</text>
|
||||
<view class="corner-mark color-base-bg" v-if="cornerMark.length" :style="{ background: cornerMarkBg+'!important', color: cornerMarkColor }">{{ cornerMark }}</view>
|
||||
</button>
|
||||
<!-- </ns-contact> -->
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="action-icon-wrap" @click="clickEvent">
|
||||
<view class="iconfont " :class="icon"></view>
|
||||
<text>{{ text }}</text>
|
||||
<view class="corner-mark color-base-bg" :class="{'max' : parseInt(cornerMark)>99}" v-if="cornerMark.length" :style="{ background: cornerMarkBg+'!important', color: cornerMarkColor }">{{ cornerMark > 99 ? '99+' : cornerMark }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsContact from '@/components/ns-contact/ns-contact.vue';
|
||||
export default {
|
||||
name: 'ns-goods-action-icon',
|
||||
props: {
|
||||
// 商品底部icon导航icon图标
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 商品底部icon导航文字
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 角标文字
|
||||
cornerMark: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 角标背景色
|
||||
cornerMarkBg: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 角标文字颜色
|
||||
cornerMarkColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
// 开放能力
|
||||
openType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 发送内容 openType="contact"时有效
|
||||
sendData: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
title: '',
|
||||
path: '',
|
||||
img: ''
|
||||
};
|
||||
}
|
||||
},
|
||||
chatParam: {
|
||||
type: Object,
|
||||
default: function(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
components:{
|
||||
nsContact
|
||||
},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.action-icon-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100rpx;
|
||||
min-width: 90rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
.action-icon-wrap button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
border: none;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.action-icon-wrap button::after {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.action-icon-wrap .iconfont {
|
||||
margin: 0 auto 10rpx;
|
||||
line-height: 1;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.action-icon-wrap .corner-mark {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
font-size: $font-size-activity-tag;
|
||||
top: 4rpx;
|
||||
right: 12rpx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
padding: 6rpx;
|
||||
border-radius: 50%;
|
||||
&.max{
|
||||
right:-4rpx;
|
||||
width: 40rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.action-icon-wrap text {
|
||||
font-size: $font-size-tag;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
33
components/ns-goods-action/ns-goods-action.vue
Normal file
33
components/ns-goods-action/ns-goods-action.vue
Normal file
@@ -0,0 +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>
|
||||
125
components/ns-goods-promotion/ns-goods-promotion.vue
Normal file
125
components/ns-goods-promotion/ns-goods-promotion.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<!-- 当前商品参与的营销活动入口 -->
|
||||
<view class="ns-goods-promotion" v-if="goodsPromotion.length">
|
||||
<view v-for="(item, index) in goodsPromotion" v-if="promotion != item.promotion_type" :key="index">
|
||||
<view v-if="item.promotion_type == 'discount'" class="item" @click="redirectTo('/pages/goods/detail', { goods_id: item.goods_id })">
|
||||
<text class="promotion-mark ">限时折扣</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||
</view>
|
||||
<view v-else-if="item.promotion_type == 'groupbuy'" class="item" @click="redirectTo('/pages_promotion/groupbuy/detail', { groupbuy_id: item.groupbuy_id })">
|
||||
<!-- <view v-else-if="item.promotion_type == 'groupbuy'" class="item" @click="redirectTo('/pages_promotion/groupbuy/detail', { id: item.groupbuy_id })"> -->
|
||||
<text class="promotion-mark ">团购</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||
</view>
|
||||
<view v-else-if="item.promotion_type == 'pintuan'" class="item" @click="redirectTo('/pages_promotion/pintuan/detail', { pintuan_id: item.pintuan_id })">
|
||||
<text class="promotion-mark ">拼团</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||
</view>
|
||||
<view v-else-if="item.promotion_type == 'seckill'" class="item" @click="redirectTo('/pages_promotion/seckill/detail', { seckill_id: item.id })">
|
||||
<text class="promotion-mark ">秒杀</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||
</view>
|
||||
<view v-else-if="item.promotion_type == 'topic'" class="item" @click="redirectTo('/pages_promotion/topics/goods_detail', { id: item.id })">
|
||||
<text class="promotion-mark ">专题活动</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||
</view>
|
||||
<view v-else-if="item.promotion_type == 'bargain'" class="item" @click="redirectTo('/pages_promotion/bargain/detail', { b_id: item.bargain_id })">
|
||||
<text class="promotion-mark ">砍价</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||
</view>
|
||||
<view v-else-if="item.promotion_type == 'pinfan'" class="item" @click="redirectTo('/pages_promotion/pinfan/detail', { pinfan_id: item.pintuan_id })">
|
||||
<text class="promotion-mark ">拼团返利</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-goods-promotion',
|
||||
props: {
|
||||
promotion: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsPromotion: {
|
||||
type: Array
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
refresh(goodsPromotion) {
|
||||
this.goodsPromotion = goodsPromotion;
|
||||
},
|
||||
redirectTo(path, param) {
|
||||
this.$util.redirectTo(path, param);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ns-goods-promotion {
|
||||
background-color: #fff;
|
||||
& > view {
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
font-size: $font-size-base;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.promotion-mark {
|
||||
padding: 12rpx 14rpx;
|
||||
margin-right: 16rpx;
|
||||
line-height: 1;
|
||||
color: var(--main-color);
|
||||
border-radius: 6rpx;
|
||||
font-size: $font-size-tag;
|
||||
font-weight: bold;
|
||||
background-color: var(--main-color-shallow);
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: $color-tip;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
401
components/ns-goods-recommend/ns-goods-recommend.vue
Normal file
401
components/ns-goods-recommend/ns-goods-recommend.vue
Normal file
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<view></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsLoading from '@/components/ns-loading/ns-loading.vue';
|
||||
import nsGoodsSkuIndex from '@/components/ns-goods-sku/ns-goods-sku-index.vue';
|
||||
|
||||
// 商品推荐
|
||||
export default {
|
||||
name: 'ns-goods-recommend',
|
||||
components: {
|
||||
nsLoading,
|
||||
nsGoodsSkuIndex
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
config: {
|
||||
title: '猜你喜欢',
|
||||
sources: 'sort',
|
||||
supportPage: [],
|
||||
goodsIds: [],
|
||||
fontWeight: false,
|
||||
padding: 0,
|
||||
cartEvent: 'detail',
|
||||
text: '购买',
|
||||
textColor: '#FFFFFF',
|
||||
theme: 'default',
|
||||
aroundRadius: 25,
|
||||
control: true,
|
||||
bgColor: '#FF6A00',
|
||||
style: 'button',
|
||||
iconDiy: {
|
||||
iconType: 'icon',
|
||||
icon: '',
|
||||
style: {
|
||||
fontSize: '60',
|
||||
iconBgColor: [],
|
||||
iconBgColorDeg: 0,
|
||||
iconBgImg: '',
|
||||
bgRadius: 0,
|
||||
iconColor: ['#000000'],
|
||||
iconColorDeg: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
page: 1,
|
||||
isAll: true,
|
||||
isClick: true,
|
||||
showLoading: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
isLike: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 10
|
||||
},
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
load: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
route: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.auto) {
|
||||
this.getLikeList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.list = [];
|
||||
this.page = 1;
|
||||
},
|
||||
toDetail(e) {
|
||||
let data = {
|
||||
goods_id: e.goods_id
|
||||
};
|
||||
this.$util.redirectTo('/pages/goods/detail', data);
|
||||
},
|
||||
getLikeList(size) {
|
||||
let that = this;
|
||||
if (!this.isClick) return;
|
||||
if (!this.isAll) return;
|
||||
this.isClick = false;
|
||||
if (this.page > 1) this.showLoading = true;
|
||||
return new Promise((resolve, reject) => {
|
||||
that.$api.sendRequest({
|
||||
url: '/api/goodssku/recommend',
|
||||
data: {
|
||||
page: this.page,
|
||||
page_size: this.auto ? this.size : size,
|
||||
route: this.route
|
||||
},
|
||||
success: res => {
|
||||
this.showLoading = false;
|
||||
this.isClick = true;
|
||||
if (res.code == 0) {
|
||||
if (this.page == 1) {
|
||||
this.list = [];
|
||||
}
|
||||
this.config = res.data.config;
|
||||
this.list = this.list.concat(res.data.list);
|
||||
if (this.list.length == res.data.count) this.isAll = false;
|
||||
this.page += 1;
|
||||
resolve(res.data.list);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
goodsImg(imgStr) {
|
||||
let imgs = imgStr.split(',');
|
||||
return imgs[0] ? this.$util.img(imgs[0], {
|
||||
size: 'mid'
|
||||
}) : this.$util.getDefaultImage().goods;
|
||||
},
|
||||
imgError(index) {
|
||||
this.list[index].goods_image = this.$util.getDefaultImage().goods;
|
||||
},
|
||||
showPrice(data) {
|
||||
let price = data.discount_price;
|
||||
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
|
||||
return price;
|
||||
},
|
||||
showMarketPrice(item) {
|
||||
if (item.market_price_show) {
|
||||
let price = this.showPrice(item);
|
||||
if (item.market_price > 0) {
|
||||
return item.market_price;
|
||||
} else if (parseFloat(item.price) > parseFloat(price)) {
|
||||
return item.price;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
},
|
||||
goodsTag(data) {
|
||||
return data.label_name || '';
|
||||
},
|
||||
// 监听加入购物车变化
|
||||
cartListChange(e) {
|
||||
if (this.route == 'cart' && this.storeToken) {
|
||||
this.$root.getCartData();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 添加购物车回调
|
||||
*/
|
||||
addCart(id) {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.goods-recommend {
|
||||
margin-top: 74rpx;
|
||||
width: 100vw;
|
||||
|
||||
.goods-recommend-title {
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
color: #333;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 80rpx;
|
||||
border-top: 2rpx solid #969696;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
transform: translateX(-130%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
transform: translateX(130%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hr-view {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
box-sizing: content-box;
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
|
||||
.hr-view .hr {
|
||||
width: 36%;
|
||||
height: 2rpx;
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
.hr-view .title {
|
||||
padding: 0 $padding;
|
||||
}
|
||||
|
||||
// 商品列表双列样式
|
||||
.goods-list.double-column {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 24rpx;
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
width: calc(50% - 10rpx);
|
||||
margin-bottom: $margin-updown;
|
||||
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%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 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: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.lineheight-clear {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: var(--price-color);
|
||||
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pro-info {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
align-items: center;
|
||||
|
||||
.block-wrap {
|
||||
flex: 1;
|
||||
line-height: 1;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.sale {
|
||||
font-size: $font-size-tag !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-action-wrap {
|
||||
position: relative;
|
||||
|
||||
.shopping-cart-btn {
|
||||
font-size: 36rpx;
|
||||
border: 2rpx solid $base-color;
|
||||
border-radius: 50%;
|
||||
padding: 10rpx;
|
||||
color: $base-color;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
text-align: center;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.plus-sign-btn {
|
||||
font-size: 36rpx;
|
||||
border: 2rpx solid $base-color;
|
||||
border-radius: 50%;
|
||||
padding: 10rpx;
|
||||
color: $base-color;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
text-align: center;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
background-color: $base-color;
|
||||
color: var(--btn-text-color);
|
||||
border-radius: 50rpx;
|
||||
font-size: $font-size-tag;
|
||||
padding: 12rpx 30rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.icon-diy {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-price {
|
||||
display: inline-block;
|
||||
margin-left: 6rpx;
|
||||
float: right;
|
||||
text-decoration: line-through;
|
||||
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
line-height: 1;
|
||||
font-size: $font-size-tag !important;
|
||||
}
|
||||
}
|
||||
|
||||
.member-price-tag {
|
||||
display: inline-block;
|
||||
width: 60rpx;
|
||||
line-height: 1;
|
||||
margin-left: 6rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
852
components/ns-goods-sku/ns-goods-sku-category.vue
Normal file
852
components/ns-goods-sku/ns-goods-sku-category.vue
Normal file
@@ -0,0 +1,852 @@
|
||||
<template>
|
||||
<view class="goods-sku" @touchmove.prevent.stop>
|
||||
<uni-popup ref="skuPopup" :type="popupType">
|
||||
<view class="sku-layer">
|
||||
<view class="sku-content">
|
||||
<view class="sku-info" :style="{ height: systemInfo.windowHeight * 2 + 'rpx' }">
|
||||
<view class="header">
|
||||
<view class="img-wrap" @click="previewMedia()">
|
||||
<image :src="$util.img(goodsDetail.sku_image, { size: 'mid' })" @error="imageError()" />
|
||||
</view>
|
||||
<view class="main">
|
||||
<view class="goodname">{{ goodsDetail.goods_name }}</view>
|
||||
<view class="other-info">
|
||||
<view class="stock color-tip" v-if="goodsDetail.stock_show">
|
||||
库存{{ goodsDetail.stock }}{{ goodsDetail.unit }}</view>
|
||||
<view class="starting-num" v-if="parseFloat(goodsDetail.min_buy)">
|
||||
起售{{goodsDetail.min_buy}}件
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body-item">
|
||||
<scroll-view scroll-y class="wrap">
|
||||
<view class="sku-list-wrap" v-for="(item, index) in goodsDetail.goods_spec_format" :key="index">
|
||||
<text class="title font-size-tag">{{ item.spec_name }}</text>
|
||||
<view class="sku-list_item">
|
||||
<view v-for="(item_value, index_value) in item.value" :key="index_value" :class="{
|
||||
selected: item_value['selected'] || skuId == item_value.sku_id,
|
||||
disabled: item_value['disabled'] || (!item_value['selected'] && disabled)
|
||||
}" class="items color-line-border font-size-tag"
|
||||
@click="change(item_value.sku_id, item_value.spec_id)">
|
||||
<image v-if="item_value.image" :src="$util.img(item_value.image, { size: 'small' })" @error="valueImageError(index, index_value)" />
|
||||
<text>{{ item_value.spec_value_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="sku-name font-size-goods-tag">
|
||||
<template v-if="goodsDetail.sku_spec_format" class="color-tip">
|
||||
已选择：
|
||||
<text class="color-tip" v-for="(item, index) in goodsDetail.sku_spec_format" :key="index">{{ item.spec_value_name }}</text>
|
||||
</template>
|
||||
</view>
|
||||
<view class="footer-bottom">
|
||||
<view class="footer-left">
|
||||
<view class="price-wrap">
|
||||
<text class="price price-font">￥{{ goodsDetail.show_price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-right">
|
||||
<view class="change_num" v-if="number > 0">
|
||||
<view class="num-action" @click="changeNum('-')">
|
||||
<text class="desc iconfont icon-jianshao color-base-text"></text>
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
<input type="number" class="uni-input" @blur="blur" v-model="number" placeholder="0" @input="keyInput(false)" />
|
||||
<view class="num-action" :id="'select-sku-num-' + goodsDetail.goods_id" @click="changeNum('+', $event)">
|
||||
<text class="add iconfont icon-add-fill color-base-text change_hover"></text>
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="number == 0 && isLoad">
|
||||
<view class="num-action">
|
||||
<button type="primary" v-if="goodsDetail.stock && goodsDetail.stock != 0" @click="confirm($event)">加入购物车</button>
|
||||
<button type="primary" disabled="true" v-else>确定</button>
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sku-close iconfont icon-close-guanbi" @click="closeSkuPopup()"></view>
|
||||
</uni-popup>
|
||||
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup-sku-new.vue';
|
||||
// 商品SKU
|
||||
export default {
|
||||
name: 'ns-goods-sku-category',
|
||||
components: {
|
||||
uniPopup
|
||||
},
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pointLimit: {
|
||||
type: [Number, String]
|
||||
},
|
||||
popupType: {
|
||||
type: String,
|
||||
default: "center"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
systemInfo: {}, //系统信息
|
||||
number: 0,
|
||||
btnSwitch: false, //提交按钮防止重复提交
|
||||
goodsId: 0,
|
||||
skuId: 0,
|
||||
limitNumber: 0, // 限购
|
||||
goodsDetail: {},
|
||||
goodsSkuList: {}, // 商品规格项集合
|
||||
maxBuy: 0,
|
||||
minBuy: 0,
|
||||
isLoad: false,
|
||||
timeout: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.systemInfo = uni.getSystemInfoSync();
|
||||
},
|
||||
watch: {
|
||||
pointLimit(newNum, oldNum) {
|
||||
this.limitNumber = Number(newNum);
|
||||
},
|
||||
minBuy(newData, oldData) {
|
||||
if (this.minBuy > 1) {
|
||||
this.number = Number(this.minBuy);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(data) {
|
||||
this.isLoad = true;
|
||||
this.goodsDetail = data;
|
||||
this.goodsId = this.goodsDetail.goods_id;
|
||||
this.skuId = this.goodsDetail.sku_id;
|
||||
this.maxBuy = this.goodsDetail.max_buy;
|
||||
this.minBuy = this.goodsDetail.min_buy;
|
||||
this.getGoodsSkuList(this.goodsId);
|
||||
this.keyInput(false);
|
||||
if (this.getCurrentCart()) {
|
||||
this.number = this.getCurrentCart().num;
|
||||
}
|
||||
this.$refs.skuPopup.open();
|
||||
},
|
||||
hide() {
|
||||
if(this.$refs.skuPopup) this.$refs.skuPopup.close();
|
||||
},
|
||||
change(skuId, spec_id) {
|
||||
if (this.disabled) return;
|
||||
this.btnSwitch = false;
|
||||
this.skuId = skuId;
|
||||
|
||||
// 清空选择
|
||||
for (var i = 0; i < this.goodsDetail.goods_spec_format.length; i++) {
|
||||
var sku = this.goodsDetail.goods_spec_format[i];
|
||||
for (var j = 0; j < sku.value.length; j++) {
|
||||
// 排除当前点击的规格值
|
||||
if (spec_id == this.goodsDetail.goods_spec_format[i].value[j].spec_id) {
|
||||
this.goodsDetail.goods_spec_format[i].value[j].selected = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.isLoad = true;
|
||||
if (this.goodsSkuList['sku_' + skuId]) {
|
||||
this.goodsDetail = Object.assign({}, this.goodsDetail, this.goodsSkuList['sku_' + skuId]);
|
||||
}
|
||||
|
||||
if (this.getCurrentCart()) {
|
||||
this.number = this.getCurrentCart().num;
|
||||
} else {
|
||||
this.number = 0;
|
||||
}
|
||||
},
|
||||
//查看规格图片
|
||||
previewMedia() {
|
||||
var paths = [];
|
||||
paths.push(
|
||||
this.$util.img(this.goodsDetail.sku_image, {
|
||||
size: 'big'
|
||||
})
|
||||
);
|
||||
uni.previewImage({
|
||||
current: 1,
|
||||
urls: paths
|
||||
});
|
||||
},
|
||||
// 获取普通商品规格集合
|
||||
getGoodsSkuList(goods_id) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goodssku/goodsSkuByCategory',
|
||||
data: {
|
||||
goods_id
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
let data = res.data,
|
||||
obj = {};
|
||||
|
||||
res.data.forEach((item, index) => {
|
||||
// 当前商品SKU规格
|
||||
if (item.sku_spec_format) item.sku_spec_format = JSON.parse(item.sku_spec_format);
|
||||
|
||||
// 商品SKU格式
|
||||
if (item.goods_spec_format) item.goods_spec_format = JSON.parse(item.goods_spec_format);
|
||||
|
||||
// 限时折扣
|
||||
if (item.promotion_type == 1) {
|
||||
item.discountTimeMachine = this.$util.countDown(item.end_time - res.timestamp);
|
||||
}
|
||||
|
||||
if (item.promotion_type == 1 && item.discountTimeMachine) {
|
||||
if (item.member_price > 0 && Number(item.member_price) <= Number(item.discount_price)) {
|
||||
item.show_price = item.member_price;
|
||||
} else {
|
||||
item.show_price = item.discount_price;
|
||||
}
|
||||
} else if (item.member_price > 0) {
|
||||
item.show_price = item.member_price;
|
||||
} else {
|
||||
item.show_price = item.price;
|
||||
}
|
||||
|
||||
obj['sku_' + item.sku_id] = item;
|
||||
});
|
||||
this.goodsSkuList = obj;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
changeNum(tag, event) {
|
||||
if (this.goodsDetail.stock == 0 || this.btnSwitch) return;
|
||||
|
||||
var stock = this.goodsDetail.stock;
|
||||
var min = 1;
|
||||
|
||||
if (this.goodsDetail.is_limit == 1 && this.maxBuy > 0 && this.maxBuy < stock) stock = this.maxBuy;
|
||||
|
||||
if (this.goodsDetail.is_limit == 1 && this.goodsDetail.limit_type == 2 && this.maxBuy > 0 && this
|
||||
.goodsDetail.purchased_num > 0) {
|
||||
let maxBuy = this.maxBuy - this.goodsDetail.purchased_num;
|
||||
stock = maxBuy < this.goodsDetail.stock ? maxBuy : this.goodsDetail.stock;
|
||||
}
|
||||
|
||||
if (this.minBuy > 1) {
|
||||
min = this.minBuy;
|
||||
}
|
||||
if (tag == '+') {
|
||||
// 加
|
||||
if (this.number < stock) {
|
||||
this.number++;
|
||||
} else {
|
||||
if (this.number >= this.goodsDetail.stock) {
|
||||
this.$util.showToast({
|
||||
title: '库存不足'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.goodsDetail.is_limit == 1 && this.maxBuy > 0) {
|
||||
if (this.goodsDetail.limit_type == 1) {
|
||||
this.$util.showToast({
|
||||
title: '该商品每次最多购买' + this.maxBuy + this.goodsDetail.unit
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.goodsDetail.limit_type == 2) {
|
||||
let message = '该商品每人限购' + this.maxBuy + this.goodsDetail.unit;
|
||||
message += this.goodsDetail.purchased_num > 0 ? '，您已购买了' + this.goodsDetail.purchased_num + this.goodsDetail.unit : '';
|
||||
this.$util.showToast({
|
||||
title: message
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#' + event.currentTarget.id + ' .click-event')
|
||||
.boundingClientRect(data => {
|
||||
if (data) {
|
||||
this.$emit('addCart', data.left, data.top);
|
||||
}
|
||||
}).exec();
|
||||
} else if (tag == '-') {
|
||||
// 减
|
||||
if (this.number > min) {
|
||||
this.number -= 1;
|
||||
} else {
|
||||
this.number = 0;
|
||||
}
|
||||
}
|
||||
if (this.number > this.limitNumber && this.limitNumber) {
|
||||
this.number = this.limitNumber;
|
||||
}
|
||||
if (this.number) {
|
||||
this.cartNumChange(this.number);
|
||||
} else {
|
||||
this.deleteCart();
|
||||
}
|
||||
},
|
||||
blur() {
|
||||
if (!this.number) {
|
||||
this.number = 1;
|
||||
}
|
||||
if (this.number > this.limitNumber && this.limitNumber) {
|
||||
this.number = this.limitNumber;
|
||||
}
|
||||
if (this.goodsDetail.is_limit && this.maxBuy > 0) {
|
||||
let maxBuy = this.maxBuy - this.goodsDetail.purchased_num;
|
||||
if (this.number > maxBuy) this.number = maxBuy;
|
||||
}
|
||||
if (this.number < this.minBuy && this.minBuy > 0) {
|
||||
this.number = this.minBuy;
|
||||
}
|
||||
|
||||
if (this.number <= 0) {
|
||||
this.number = 1;
|
||||
}
|
||||
|
||||
let newNumber = parseInt(this.number);
|
||||
|
||||
this.isLoad = false;
|
||||
setTimeout(() => {
|
||||
this.number = newNumber;
|
||||
this.cartNumChange(this.number);
|
||||
}, 0);
|
||||
},
|
||||
//输入数量
|
||||
keyInput(flag, callback) {
|
||||
setTimeout(() => {
|
||||
var stock = this.goodsDetail.stock;
|
||||
|
||||
// 库存为0
|
||||
if (this.goodsDetail.stock == 0) {
|
||||
this.number = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// 防止空
|
||||
if (flag && this.number.length == 0) this.number = 1;
|
||||
|
||||
// 防止输入0和负数、非法输入
|
||||
if (flag && (this.number <= 0 || isNaN(this.number))) this.number = 1;
|
||||
|
||||
if (this.number > stock) {
|
||||
this.number = stock;
|
||||
}
|
||||
// 商品起售数
|
||||
if (this.minBuy > 1 && this.number < this.minBuy) {
|
||||
this.number = this.minBuy;
|
||||
}
|
||||
|
||||
if (flag) this.number = parseInt(this.number);
|
||||
|
||||
if (callback) callback();
|
||||
}, 0);
|
||||
},
|
||||
|
||||
//提交
|
||||
confirm(event) {
|
||||
if (!this.storeToken) {
|
||||
this.$refs.login.open();
|
||||
return;
|
||||
}
|
||||
if (this.goodsDetail.goods_state == 0) {
|
||||
this.$util.showToast({
|
||||
title: '商品已下架'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.number = 1;
|
||||
//纠正数量
|
||||
this.keyInput(true, () => {
|
||||
if (this.goodsDetail.stock == 0) {
|
||||
this.$util.showToast({
|
||||
title: '商品已售罄'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.number > this.goodsDetail.stock) {
|
||||
this.$util.showToast({
|
||||
title: '库存不足'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.goodsDetail.is_limit == 1 && this.goodsDetail.limit_type == 1 && this.maxBuy > 0 &&
|
||||
this.number > this.maxBuy) {
|
||||
this.$util.showToast({
|
||||
title: '该商品每次最多购买' + this.maxBuy + this.goodsDetail.unit
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.goodsDetail.is_limit == 1 && this.goodsDetail.limit_type == 2 && this.maxBuy > 0 &&
|
||||
this.number + this.goodsDetail.purchased_num > this.maxBuy) {
|
||||
let message = '该商品每人限购' + this.maxBuy + this.goodsDetail.unit;
|
||||
message += this.goodsDetail.purchased_num > 0 ? '，您已购买了' + this.goodsDetail.purchased_num + this.goodsDetail.unit : '';
|
||||
this.$util.showToast({
|
||||
title: message
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('addCart', event.detail.x, event.detail.y);
|
||||
|
||||
if (this.btnSwitch) return;
|
||||
this.btnSwitch = true;
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/cart/add',
|
||||
data: {
|
||||
sku_id: this.skuId,
|
||||
num: this.number
|
||||
},
|
||||
success: res => {
|
||||
var data = res.data;
|
||||
if (data > 0) {
|
||||
|
||||
if (this.getCurrentCart()) {
|
||||
this.cartList['goods_' + this.goodsId]['sku_' + this.skuId].num = this.number;
|
||||
} else {
|
||||
|
||||
// 如果商品第一次添加，则初始化数据
|
||||
if (!this.cartList['goods_' + this.goodsId]) {
|
||||
this.cartList['goods_' + this.goodsId] = {};
|
||||
}
|
||||
|
||||
let discount_price = this.goodsDetail.discount_price;
|
||||
if (this.goodsDetail.member_price > 0 && Number(this.goodsDetail.member_price) <= Number(this.goodsDetail.discount_price)) {
|
||||
discount_price = this.goodsDetail.member_price;
|
||||
}
|
||||
|
||||
this.cartList['goods_' + this.goodsId]['sku_' + this.skuId] = {
|
||||
cart_id: data,
|
||||
goods_id: this.goodsId,
|
||||
sku_id: this.skuId,
|
||||
num: this.number,
|
||||
discount_price
|
||||
};
|
||||
}
|
||||
|
||||
this.$store.dispatch('cartCalculate');
|
||||
this.$emit('refresh');
|
||||
this.$util.showToast({
|
||||
title: '加入购物车成功'
|
||||
});
|
||||
}
|
||||
this.btnSwitch = false;
|
||||
},
|
||||
fail: res => {
|
||||
if(this.$refs.skuPopup) this.$refs.skuPopup.close();
|
||||
this.btnSwitch = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
closeSkuPopup() {
|
||||
if(this.$refs.skuPopup) this.$refs.skuPopup.close();
|
||||
},
|
||||
imageError() {
|
||||
this.goodsDetail.sku_image = this.$util.getDefaultImage().goods;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
valueImageError(index, index_value) {
|
||||
this.goodsDetail.goods_spec_format[index].value[index_value].image = this.$util.getDefaultImage().goods;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
/**
|
||||
* 变更购物车数量
|
||||
* @param {Object} num
|
||||
*/
|
||||
cartNumChange(num) {
|
||||
if (num < 1) num = 1;
|
||||
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
|
||||
this.timeout = setTimeout(() => {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/cart/edit',
|
||||
data: {
|
||||
num,
|
||||
cart_id: this.getCurrentCart().cart_id
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.cartList['goods_' + this.goodsId]['sku_' + this.skuId].num = num;
|
||||
this.$store.dispatch('cartCalculate');
|
||||
this.$emit('refresh');
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 800)
|
||||
},
|
||||
/**
|
||||
* 删除购物车
|
||||
*/
|
||||
deleteCart() {
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/cart/delete',
|
||||
data: {
|
||||
cart_id: this.getCurrentCart().cart_id
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
delete this.cartList['goods_' + this.goodsId]['sku_' + this.skuId];
|
||||
if (Object.keys(this.cartList['goods_' + this.goodsId]).length == 2) {
|
||||
delete this.cartList['goods_' + this.goodsId];
|
||||
}
|
||||
this.$store.dispatch('cartCalculate');
|
||||
this.$emit('refresh');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getCurrentCart() {
|
||||
let goods = this.cartList['goods_' + this.goodsId];
|
||||
let cart = null;
|
||||
if (goods && goods['sku_' + this.skuId]) {
|
||||
cart = goods['sku_' + this.skuId];
|
||||
}
|
||||
return cart;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.sku-content {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.sku-close {
|
||||
color: #fff;
|
||||
width: 50rpx;
|
||||
text-align: center;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin: 40rpx auto 0;
|
||||
}
|
||||
|
||||
.sku-layer .sku-info {
|
||||
width: 600rpx;
|
||||
height: 60vh !important;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.sku-layer .sku-info .header {
|
||||
// padding: 30rpx 0 30rpx 300rpx;
|
||||
/* #ifdef MP-ALIPAY */
|
||||
// padding: 50rpx 0 50rpx 300rpx;
|
||||
/* #endif */
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sku-layer .sku-info .header .img-wrap {
|
||||
width: 114rpx;
|
||||
height: 114rpx;
|
||||
margin-right: 20rpx;
|
||||
// position: absolute;
|
||||
// top: -56rpx;
|
||||
/* #ifdef MP-ALIPAY */
|
||||
// top: 20rpx;
|
||||
/* #endif */
|
||||
// left: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
border: 2rpx solid rgba(0, 0, 0, 0.1);
|
||||
padding: 2rpx;
|
||||
background-color: #fff;
|
||||
line-height: 208rpx;
|
||||
}
|
||||
|
||||
.sku-layer .sku-info .header .img-wrap image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sku-layer .sku-info .main {
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
flex: 1;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sku-layer .sku-info .main .goodname {
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.sku-layer .sku-info .main .other-info {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sku-layer .sku-info .main .starting-num {
|
||||
color: $color-tip;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.footer-left .price {
|
||||
word-wrap: break-word;
|
||||
font-size: $font-size-toolbar;
|
||||
color: var(--price-color);
|
||||
}
|
||||
|
||||
.sku-layer .sku-info .main .stock {
|
||||
line-height: 1;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.sku-layer .sku-info .main .sku-name {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
height: 90rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sku-layer .sku-info .main .sku-name text {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.sku-layer .sku-info .sku-close {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
width: 40rpx;
|
||||
height: 80rpx;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.sku-layer .body-item {
|
||||
padding: 0 30rpx 30rpx 30rpx;
|
||||
height: calc(100% - 282rpx);
|
||||
box-sizing: border-box;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .wrap {
|
||||
height: calc(100% - 116rpx);
|
||||
}
|
||||
|
||||
.sku-layer .body-item .sku-list-wrap {}
|
||||
|
||||
.sku-layer .body-item .sku-list-wrap .title {
|
||||
font-weight: 400;
|
||||
padding: 20rpx 0;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .sku-list-wrap .sku-list_item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .sku-list-wrap .items {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border: 2rpx solid $color-line;
|
||||
padding: 4rpx 30rpx;
|
||||
border-radius: 8rpx;
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .sku-list-wrap .items.disabled {
|
||||
border: 2rpx dashed;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .sku-list-wrap .items image {
|
||||
height: 48rpx;
|
||||
width: 48rpx;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 10rpx;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .number-wrap .number-line {
|
||||
padding: 20rpx 0;
|
||||
line-height: 72rpx;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .number-wrap .title {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .number-wrap .limit-txt {}
|
||||
|
||||
.sku-layer .body-item .number-wrap .number {
|
||||
height: 72rpx;
|
||||
border-radius: 6rpx;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .number-wrap .number button {
|
||||
display: inline-block;
|
||||
line-height: 64rpx;
|
||||
height: 68rpx;
|
||||
width: 60rpx;
|
||||
font-size: 48rpx;
|
||||
box-sizing: content-box;
|
||||
border: 2rpx solid;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .number-wrap .number button.decrease {
|
||||
border-right: 2rpx solid #fff !important;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .number-wrap .number button.increase {
|
||||
border-left: 2rpx solid #fff !important;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .number-wrap .number button:after {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sku-layer .body-item .number-wrap .number input {
|
||||
display: inline-block;
|
||||
line-height: 64rpx;
|
||||
height: 68rpx;
|
||||
width: 72rpx;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
border: 2rpx solid;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sku-layer .footer {
|
||||
width: calc(100% - 60rpx);
|
||||
position: absolute;
|
||||
bottom: 26rpx;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
border-top: 1rpx solid $color-line;
|
||||
padding: 30rpx 30rpx 0;
|
||||
background-color: #fff;
|
||||
|
||||
// button {
|
||||
// width: 100%;
|
||||
// }
|
||||
.sku-name {
|
||||
text {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sku-layer .footer .footer-bottom {
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
justify-content: be;
|
||||
align-items: center;
|
||||
|
||||
.footer-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
width: 238rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.footer-right button {
|
||||
margin-right: 0;
|
||||
width: 210rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.position-bottom {
|
||||
bottom: 98rpx !important;
|
||||
}
|
||||
|
||||
// 数量加减样式
|
||||
.change_num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.change_num>text,
|
||||
.change_num .iconfont {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.change_num input {
|
||||
width: 70rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.change_num .num-action {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.change_num .num-action .click-event {
|
||||
position: absolute;
|
||||
width: 2rpx;
|
||||
height: 2rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/deep/ .uni-popup__wrapper {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
background: transparent !important;
|
||||
}
|
||||
</style>
|
||||
236
components/ns-goods-sku/ns-goods-sku-index.vue
Normal file
236
components/ns-goods-sku/ns-goods-sku-index.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<view class="goods-sku">
|
||||
<ns-login ref="login"></ns-login>
|
||||
<!-- sku选择 -->
|
||||
<ns-goods-sku v-if="goodsDetail.goods_id" ref="goodsSku" :goods-id="goodsDetail.goods_id" :goods-detail="goodsDetail" :max-buy="goodsDetail.max_buy" :min-buy="goodsDetail.min_buy" @refresh="refreshGoodsSkuDetail"></ns-goods-sku>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
|
||||
// 商品SKU
|
||||
export default {
|
||||
name: 'ns-goods-sku-index',
|
||||
components: {
|
||||
nsGoodsSku
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timeout: {},
|
||||
isRepeat: false,
|
||||
goodsDetail: {}
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
/**
|
||||
* 添加购物车
|
||||
* @param {Object} config 购物车事件（detail-详情，cart-加入购物车）
|
||||
* @param {Object} data 商品项
|
||||
*/
|
||||
addCart(config, data, event) {
|
||||
if (!this.storeToken) {
|
||||
this.$refs.login.open('/pages/index/index')
|
||||
return;
|
||||
}
|
||||
if (config == "detail" || data.is_virtual) {
|
||||
this.$util.redirectTo('/pages/goods/detail', {
|
||||
goods_id: data.goods_id
|
||||
});
|
||||
return false;
|
||||
}
|
||||
// 多规格
|
||||
if (data.goods_spec_format) {
|
||||
this.multiSpecificationGoods(data);
|
||||
} else {
|
||||
this.singleSpecificationGoods(data, event);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 单规格
|
||||
* @param {Object} data 商品项
|
||||
*/
|
||||
singleSpecificationGoods(data, event) {
|
||||
let cart =
|
||||
this.cartList['goods_' + data.goods_id] && this.cartList['goods_' + data.goods_id]['sku_' + data
|
||||
.sku_id
|
||||
] ?
|
||||
this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id] :
|
||||
null;
|
||||
|
||||
let cartNum = cart ? cart.num : 0;
|
||||
let api = cart && cart.cart_id ? '/api/cart/edit' : '/api/cart/add';
|
||||
let minBuy = data.min_buy > 0 ? data.min_buy : 1;
|
||||
let num = cartNum >= minBuy ? cartNum : minBuy;
|
||||
let _num = num;
|
||||
if(cart && cart.cart_id){
|
||||
_num = _num + (data.min_buy > 0 ? data.min_buy : 1)
|
||||
}
|
||||
let cart_id = cart ? cart.cart_id : 0;
|
||||
if (_num > parseInt(data.stock)) {
|
||||
this.$util.showToast({
|
||||
title: '商品库存不足'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (data.is_limit && data.max_buy && _num > parseInt(data.max_buy)) {
|
||||
this.$util.showToast({
|
||||
title: `该商品每人限购${data.max_buy}${data.unit || '件'}`
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (cart) {
|
||||
this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id].num = _num;
|
||||
} else {
|
||||
|
||||
// 如果商品第一次添加，则初始化数据
|
||||
if (!this.cartList['goods_' + data.goods_id]) {
|
||||
this.cartList['goods_' + data.goods_id] = {};
|
||||
}
|
||||
|
||||
let discount_price = data.discount_price;
|
||||
if (data.member_price > 0 && Number(data.member_price) <= Number(data.discount_price)) {
|
||||
discount_price = data.member_price;
|
||||
}
|
||||
|
||||
this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id] = {
|
||||
cart_id,
|
||||
goods_id: data.goods_id,
|
||||
sku_id: data.sku_id,
|
||||
num: _num,
|
||||
discount_price
|
||||
};
|
||||
}
|
||||
|
||||
if (this.isRepeat) return;
|
||||
this.isRepeat = true;
|
||||
|
||||
this.$emit('addCart', event.currentTarget.id);
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: api,
|
||||
data: {
|
||||
cart_id,
|
||||
sku_id: data.sku_id,
|
||||
num: _num
|
||||
},
|
||||
success: res => {
|
||||
this.isRepeat = false;
|
||||
if (res.code == 0) {
|
||||
if (cart_id == 0) {
|
||||
this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id].cart_id =
|
||||
res.data;
|
||||
}
|
||||
this.$util.showToast({
|
||||
title: "商品添加购物车成功"
|
||||
});
|
||||
this.$store.commit('setCartChange');
|
||||
this.$store.dispatch('cartCalculate');
|
||||
this.$emit("cartListChange", this.cartList);
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 多规格
|
||||
* @param {Object} data 商品项
|
||||
*/
|
||||
multiSpecificationGoods(data) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goodssku/getInfoForCategory',
|
||||
data: {
|
||||
sku_id: data.sku_id
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
let item = res.data;
|
||||
item.unit = item.unit || '件';
|
||||
|
||||
if (item.sku_images) item.sku_images = item.sku_images.split(',');
|
||||
else item.sku_images = [];
|
||||
|
||||
// 多规格时合并主图
|
||||
if (item.goods_spec_format && item.goods_image) {
|
||||
item.goods_image = item.goods_image.split(',');
|
||||
item.sku_images = item.goods_image.concat(item.sku_images);
|
||||
}
|
||||
|
||||
// 当前商品SKU规格
|
||||
if (item.sku_spec_format) item.sku_spec_format = JSON.parse(item.sku_spec_format);
|
||||
|
||||
// 商品SKU格式
|
||||
if (item.goods_spec_format) item.goods_spec_format = JSON.parse(item.goods_spec_format);
|
||||
|
||||
// 限时折扣
|
||||
if (item.promotion_type == 1) {
|
||||
item.discountTimeMachine = this.$util.countDown(item.end_time - res.timestamp);
|
||||
}
|
||||
|
||||
if (item.promotion_type == 1 && item.discountTimeMachine) {
|
||||
if (item.member_price > 0 && Number(item.member_price) <= Number(item.discount_price)) {
|
||||
item.show_price = item.member_price;
|
||||
} else {
|
||||
item.show_price = item.discount_price;
|
||||
}
|
||||
} else if (item.member_price > 0) {
|
||||
item.show_price = item.member_price;
|
||||
} else {
|
||||
item.show_price = item.price;
|
||||
}
|
||||
this.goodsDetail = item;
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.goodsSku) {
|
||||
this.$refs.goodsSku.show("join_cart", (res) => {
|
||||
|
||||
let goods = this.cartList['goods_' + res.goods_id];
|
||||
let cart = null;
|
||||
if (goods && goods['sku_' + res.sku_id]) {
|
||||
cart = goods['sku_' + res.sku_id];
|
||||
}
|
||||
|
||||
if (cart) {
|
||||
this.cartList['goods_' + res.goods_id]['sku_' + res.sku_id].num = res.num;
|
||||
} else {
|
||||
|
||||
// 如果商品第一次添加，则初始化数据
|
||||
if (!this.cartList['goods_' + res.goods_id]) {
|
||||
this.cartList['goods_' + res.goods_id] = {};
|
||||
}
|
||||
|
||||
this.cartList['goods_' + res.goods_id]['sku_' + res.sku_id] = {
|
||||
cart_id: res.cart_id,
|
||||
goods_id: res.goods_id,
|
||||
sku_id: res.sku_id,
|
||||
num: res.num,
|
||||
discount_price: res.discount_price
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
this.$store.dispatch('cartCalculate');
|
||||
this.$emit("cartListChange", this.cartList);
|
||||
|
||||
// 加入购物车动效
|
||||
setTimeout(() => {
|
||||
this.$store.commit('setCartChange');
|
||||
}, 100);
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
refreshGoodsSkuDetail(data) {
|
||||
this.goodsDetail = Object.assign({}, this.goodsDetail, data);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
1545
components/ns-goods-sku/ns-goods-sku.vue
Normal file
1545
components/ns-goods-sku/ns-goods-sku.vue
Normal file
File diff suppressed because it is too large
Load Diff
89
components/ns-loading/ns-loading.vue
Normal file
89
components/ns-loading/ns-loading.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="mescroll-downwarp">
|
||||
<view class="downwarp-content">
|
||||
<view class="downwarp-progress mescroll-rotate" style="transform" v-if="isRotate"></view>
|
||||
<view class="downwarp-tip">{{ downText }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-loading',
|
||||
props: {
|
||||
downText: {
|
||||
type: String,
|
||||
default: '加载中'
|
||||
},
|
||||
isRotate: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 下拉刷新区域 */
|
||||
.mescroll-downwarp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 下拉刷新--内容区,定位于区域底部 */
|
||||
.mescroll-downwarp .downwarp-content {
|
||||
width: 100%;
|
||||
min-height: 60rpx;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 下拉刷新--提示文本 */
|
||||
.mescroll-downwarp .downwarp-tip {
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
color: gray;
|
||||
vertical-align: middle;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
/* 下拉刷新--旋转进度条 */
|
||||
.mescroll-downwarp .downwarp-progress {
|
||||
display: inline-block;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid gray;
|
||||
border-bottom-color: transparent;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 旋转动画 */
|
||||
.mescroll-downwarp .mescroll-rotate {
|
||||
animation: mescrollDownRotate 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes mescrollDownRotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
784
components/ns-login/ns-login.vue
Normal file
784
components/ns-login/ns-login.vue
Normal file
@@ -0,0 +1,784 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 完善会员资料 -->
|
||||
<view @touchmove.prevent.stop class="complete-info-popup">
|
||||
<uni-popup ref="completeInfoPopup" type="bottom" :maskClick="false">
|
||||
<view class="complete-info-wrap">
|
||||
<!-- #ifdef H5 -->
|
||||
<template v-if="forceBindingMobileControl">
|
||||
<view class="head">
|
||||
<text class="title">检测到您还未绑定手机号</text>
|
||||
<text class="color-tip tips">为了方便您接收订单等信息，需要绑定手机号</text>
|
||||
<text class="iconfont icon-close color-tip" @click="cancelCompleteInfo"></text>
|
||||
</view>
|
||||
<view class="item-wrap">
|
||||
<text class="label">手机号</text>
|
||||
<input type="number" placeholder="请输入手机号" v-model="formData.mobile" maxlength="11" />
|
||||
</view>
|
||||
<view class="item-wrap" v-if="isOpenCaptcha">
|
||||
<text class="label">验证码</text>
|
||||
<input type="number" placeholder="请输入验证码" v-model="formData.vercode" maxlength="4" />
|
||||
<image :src="captcha.img" class="captcha" @click="getCaptcha"></image>
|
||||
</view>
|
||||
<view class="item-wrap">
|
||||
<text class="label">动态码</text>
|
||||
<input type="number" placeholder="请输入动态码" v-model="formData.dynacode" maxlength="4" />
|
||||
<view class="send color-base-text" @click="sendMobileCode">{{ dynacodeData.codeText }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<button type="default" class="save-btn" @click="saveH5" :disabled="isDisabled">保存</button>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
<view class="head">
|
||||
<text class="title">
|
||||
获取您的昵称、头像
|
||||
<template v-if="forceBindingMobileControl">
|
||||
、手机号
|
||||
</template>
|
||||
</text>
|
||||
<text class="color-tip tips">
|
||||
获取用户头像、昵称
|
||||
<template v-if="forceBindingMobileControl">
|
||||
、手机号
|
||||
</template>
|
||||
完善个人资料，主要用于向用户提供具有辨识度的用户中心界面
|
||||
</text>
|
||||
<text class="iconfont icon-close color-tip" @click="cancelCompleteInfo"></text>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="item-wrap">
|
||||
<text class="label">头像</text>
|
||||
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||||
<image :src="avatarUrl ? avatarUrl : $util.getDefaultImage().head" @error="avatarUrl = $util.getDefaultImage().head" mode="aspectFill"/>
|
||||
<text class="iconfont icon-right color-tip"></text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="item-wrap">
|
||||
<text class="label">昵称</text>
|
||||
<input type="nickname" placeholder="请输入昵称" v-model="nickName" @blur="blurNickName" maxlength="50" />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view class="item-wrap">
|
||||
<text class="label">头像</text>
|
||||
<button open-type="getAuthorize" scope="userInfo" @getAuthorize="aliappGetUserinfo" :plain="true" class="border-0">
|
||||
<image :src="avatarUrl ? avatarUrl : $util.getDefaultImage().head" @error="avatarUrl = $util.getDefaultImage().head" mode="aspectFill"/>
|
||||
<text class="iconfont icon-right color-tip"></text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="item-wrap">
|
||||
<text class="label">昵称</text>
|
||||
<input type="nickname" placeholder="请输入昵称" v-model="nickName" @blur="blurNickName" maxlength="50" />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="item-wrap" v-if="forceBindingMobileControl">
|
||||
<text class="label">手机号</text>
|
||||
<button open-type="getPhoneNumber" :plain="true" class="auth-login border-0" @getphonenumber="getPhoneNumber">
|
||||
<text class="mobile" v-if="formData.mobile">{{ formData.mobile }}</text>
|
||||
<text class="color-base-text" v-else>获取手机号</text>
|
||||
</button>
|
||||
</view>
|
||||
<button type="default" class="save-btn" @click="saveMp" :disabled="isDisabled">保存</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- 小程序隐私协议 -->
|
||||
<privacy-popup ref="privacyPopup"></privacy-popup>
|
||||
<!-- #endif -->
|
||||
|
||||
<register-reward ref="registerReward"></register-reward>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
import registerReward from '@/components/register-reward/register-reward.vue';
|
||||
import auth from 'common/js/auth.js';
|
||||
import validate from 'common/js/validate.js';
|
||||
|
||||
export default {
|
||||
mixins: [auth],
|
||||
name: 'ns-login',
|
||||
components: {
|
||||
uniPopup,
|
||||
registerReward
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: '',
|
||||
registerConfig: {},
|
||||
avatarUrl: '', // 头像预览路径
|
||||
headImg: '', // 头像上传路径
|
||||
nickName: '', // 昵称
|
||||
isSub: false,
|
||||
|
||||
// 绑定手机号
|
||||
isOpenCaptcha: 0, // 前台登录验证码，0：关闭，1：开启
|
||||
captcha: {
|
||||
id: '',
|
||||
img: ''
|
||||
},
|
||||
formData: {
|
||||
key: '',
|
||||
mobile: '',
|
||||
vercode: '',
|
||||
dynacode: ''
|
||||
},
|
||||
dynacodeData: {
|
||||
seconds: 120,
|
||||
timer: null,
|
||||
codeText: '获取动态码',
|
||||
isSend: false
|
||||
},
|
||||
// 小程序获取手机号所需数据
|
||||
authMobileData: {
|
||||
iv: '',
|
||||
encryptedData: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
options: {
|
||||
styleIsolation: 'shared'
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
'dynacodeData.seconds': {
|
||||
handler(newValue, oldValue) {
|
||||
if (newValue == 0) {
|
||||
this.refreshDynacodeData();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 控制按钮是否禁用
|
||||
isDisabled() {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (this.nickName.length == 0) return true;
|
||||
// #endif
|
||||
|
||||
// 强制绑定手机号验证
|
||||
if (this.forceBindingMobileControl) {
|
||||
if (this.formData.mobile.length == 0) return true;
|
||||
|
||||
// #ifdef H5
|
||||
|
||||
// 验证码
|
||||
if (this.isOpenCaptcha == 1 && this.formData.vercode.length == 0) return true;
|
||||
|
||||
// 动态码
|
||||
if (this.formData.dynacode.length == 0) return true;
|
||||
|
||||
// #endif
|
||||
}
|
||||
return false;
|
||||
},
|
||||
forceBindingMobileControl() {
|
||||
if (this.registerConfig && this.registerConfig.third_party == 1 && this.registerConfig.bind_mobile == 1)
|
||||
return true;
|
||||
else return false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取注册配置
|
||||
getRegisterConfig(callback = null) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/register/config',
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.registerConfig = res.data.value;
|
||||
if (callback) callback();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
open(url) {
|
||||
if (url) this.url = url;
|
||||
// #ifdef MP
|
||||
this.getCode(authData => {
|
||||
this.authLogin(authData, 'authOnlyLogin');
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
if (this.$util.isWeiXin()) {
|
||||
let authData = uni.getStorageSync('authInfo');
|
||||
if (authData) this.authLogin(authData);
|
||||
else this.getCode();
|
||||
} else {
|
||||
this.toLogin();
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef MP || H5
|
||||
this.toLogin();
|
||||
// #endif
|
||||
},
|
||||
// 跳转去登录页
|
||||
toLogin() {
|
||||
if (this.url) this.$util.redirectTo('/pages_tool/login/login', {
|
||||
back: encodeURIComponent(this.url)
|
||||
});
|
||||
else this.$util.redirectTo('/pages_tool/login/login');
|
||||
},
|
||||
cancelCompleteInfo() {
|
||||
if (this.$refs.completeInfoPopup) this.$refs.completeInfoPopup.close();
|
||||
this.$store.commit('setBottomNavHidden', false); // 显示底部导航
|
||||
},
|
||||
blurNickName(e) {
|
||||
if (e.detail.value) this.nickName = e.detail.value;
|
||||
},
|
||||
onChooseAvatar(e) {
|
||||
this.avatarUrl = e.detail.avatarUrl;
|
||||
uni.getFileSystemManager().readFile({
|
||||
filePath: this.avatarUrl, //选择图片返回的相对路径
|
||||
encoding: 'base64', //编码格式
|
||||
success: res => {
|
||||
let base64 = 'data:image/jpeg;base64,' + res.data; //不加上这串字符，在页面无法显示的哦
|
||||
|
||||
this.$api.uploadBase64({
|
||||
base64,
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.headImg = res.data.pic_path;
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
this.$util.showToast({
|
||||
title: '上传失败'
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
openCompleteInfoPop() {
|
||||
this.getRegisterConfig();
|
||||
|
||||
// #ifdef H5
|
||||
if (!this.storeToken) this.getCaptchaConfig();
|
||||
// #endif
|
||||
|
||||
this.$refs.completeInfoPopup.open(() => {
|
||||
this.$store.commit('setBottomNavHidden', false); //显示底部导航
|
||||
});
|
||||
this.$store.commit('setBottomNavHidden', true); //隐藏底部导航
|
||||
},
|
||||
// 获取前台登录验证码开关配置
|
||||
getCaptchaConfig() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/config/getCaptchaConfig',
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.isOpenCaptcha = res.data.shop_reception_login;
|
||||
if (this.isOpenCaptcha) this.getCaptcha();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取验证码
|
||||
getCaptcha() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/captcha/captcha',
|
||||
data: {
|
||||
captcha_id: this.captcha.id
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.captcha = res.data;
|
||||
this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 发送手机动态码
|
||||
sendMobileCode() {
|
||||
if (this.dynacodeData.seconds != 120 || this.dynacodeData.isSend) return;
|
||||
var data = {
|
||||
mobile: this.formData.mobile,
|
||||
captcha_id: this.captcha.id,
|
||||
captcha_code: this.formData.vercode
|
||||
};
|
||||
var rule = [{
|
||||
name: 'mobile',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入手机号'
|
||||
}, {
|
||||
name: 'mobile',
|
||||
checkType: 'phoneno',
|
||||
errorMsg: '请输入正确的手机号'
|
||||
}];
|
||||
if (this.isOpenCaptcha == 1) {
|
||||
rule.push({
|
||||
name: 'captcha_code',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入验证码'
|
||||
});
|
||||
}
|
||||
var checkRes = validate.check(data, rule);
|
||||
if (!checkRes) {
|
||||
this.$util.showToast({
|
||||
title: validate.error
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.dynacodeData.isSend = true;
|
||||
|
||||
if (this.dynacodeData.seconds == 120) {
|
||||
this.dynacodeData.timer = setInterval(() => {
|
||||
this.dynacodeData.seconds--;
|
||||
this.dynacodeData.codeText = this.dynacodeData.seconds + 's后可重新获取';
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/tripartite/mobileCode',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.formData.key = res.data.key;
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
this.refreshDynacodeData();
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
this.$util.showToast({
|
||||
title: 'request:fail'
|
||||
});
|
||||
this.refreshDynacodeData();
|
||||
}
|
||||
});
|
||||
},
|
||||
refreshDynacodeData() {
|
||||
this.getCaptcha();
|
||||
clearInterval(this.dynacodeData.timer);
|
||||
this.dynacodeData = {
|
||||
seconds: 120,
|
||||
timer: null,
|
||||
codeText: '获取动态码',
|
||||
isSend: false
|
||||
};
|
||||
},
|
||||
// 表单验证
|
||||
verify(data) {
|
||||
let rule = [{
|
||||
name: 'mobile',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入手机号'
|
||||
}, {
|
||||
name: 'mobile',
|
||||
checkType: 'phoneno',
|
||||
errorMsg: '请输入正确的手机号'
|
||||
}];
|
||||
if (this.isOpenCaptcha == 1) {
|
||||
if (this.captcha.id != '') rule.push({
|
||||
name: 'captcha_code',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入验证码'
|
||||
});
|
||||
}
|
||||
rule.push({
|
||||
name: 'code',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入动态码'
|
||||
});
|
||||
|
||||
var checkRes = validate.check(data, rule);
|
||||
if (checkRes) {
|
||||
return true;
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: validate.error
|
||||
});
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// 微信公众号强制绑定手机号
|
||||
forceBindMobile() {
|
||||
let authData = uni.getStorageSync('authInfo');
|
||||
let data = {
|
||||
mobile: this.formData.mobile,
|
||||
key: this.formData.key,
|
||||
code: this.formData.dynacode
|
||||
};
|
||||
if (this.captcha.id != '') {
|
||||
data.captcha_id = this.captcha.id;
|
||||
data.captcha_code = this.formData.vercode;
|
||||
}
|
||||
|
||||
if (authData) Object.assign(data, authData);
|
||||
if (authData.avatarUrl) data.headimg = authData.avatarUrl;
|
||||
if (authData.nickName) data.nickname = authData.nickName;
|
||||
|
||||
if (uni.getStorageSync('source_member')) data.source_member = uni.getStorageSync('source_member');
|
||||
|
||||
if (this.isSub) return;
|
||||
this.isSub = true;
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/tripartite/mobile',
|
||||
data,
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.$store.commit('setToken', res.data.token);
|
||||
this.getMemberInfo();
|
||||
this.$store.dispatch('getCartNumber');
|
||||
this.$refs.completeInfoPopup.close();
|
||||
this.$store.commit('setBottomNavHidden', false); // 显示底部导航
|
||||
if (res.data.is_register) this.$refs.registerReward.open(this.url);
|
||||
} else {
|
||||
this.isSub = false;
|
||||
this.getCaptcha();
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
this.isSub = false;
|
||||
this.getCaptcha();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 微信小程序获取手机号
|
||||
getPhoneNumber(e) {
|
||||
console.log(e)
|
||||
if (e.detail.errMsg == 'getPhoneNumber:ok') {
|
||||
let authData = uni.getStorageSync('authInfo');
|
||||
if (authData) Object.assign(this.authMobileData, authData, e.detail);
|
||||
if (uni.getStorageSync('source_member')) this.authMobileData.source_member = uni.getStorageSync('source_member');
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/tripartite/getPhoneNumber',
|
||||
data: this.authMobileData,
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.formData.mobile = res.data.mobile;
|
||||
} else {
|
||||
this.formData.mobile = '';
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: e.detail.errMsg
|
||||
})
|
||||
}
|
||||
},
|
||||
// 微信小程序强制绑定手机号
|
||||
bindMobile() {
|
||||
let data = this.authMobileData;
|
||||
let authData = uni.getStorageSync('authInfo');
|
||||
if (authData) Object.assign(data, authData);
|
||||
if (authData.avatarUrl) data.headimg = authData.avatarUrl;
|
||||
if (authData.nickName) data.nickname = authData.nickName;
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/tripartite/mobileauth',
|
||||
data,
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.$store.commit('setToken', res.data.token);
|
||||
this.getMemberInfo();
|
||||
this.$store.dispatch('getCartNumber');
|
||||
this.cancelCompleteInfo();
|
||||
if (res.data.is_register) this.$refs.registerReward.open(this.url);
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
this.$util.showToast({
|
||||
title: 'request:fail'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 授权登录
|
||||
*/
|
||||
authLogin(data, type = 'authLogin') {
|
||||
uni.showLoading({
|
||||
title: '登录中'
|
||||
});
|
||||
uni.setStorageSync('authInfo', data);
|
||||
if (uni.getStorageSync('source_member')) data.source_member = uni.getStorageSync('source_member');
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: type == 'authLogin' ? '/api/login/auth' : '/api/login/authonlylogin',
|
||||
data,
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.$store.commit('setToken', res.data.token);
|
||||
this.getMemberInfo();
|
||||
this.$store.dispatch('getCartNumber');
|
||||
if (res.data.is_register) this.$refs.registerReward.open(this
|
||||
.url);
|
||||
this.cancelCompleteInfo();
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
}, 1000);
|
||||
} else if (res.data == 'MEMBER_NOT_EXIST') {
|
||||
this.getRegisterConfig(() => {
|
||||
uni.hideLoading();
|
||||
if (this.registerConfig.third_party == 1 && this.registerConfig.bind_mobile == 1) {
|
||||
this.openCompleteInfoPop();
|
||||
} else if (this.registerConfig.third_party == 0) {
|
||||
this.toLogin();
|
||||
} else {
|
||||
this.openCompleteInfoPop();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading();
|
||||
this.$util.showToast({
|
||||
title: '登录失败'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 微信公众号，强制绑定手机号，验证
|
||||
saveH5() {
|
||||
if (this.$util.isWeiXin() && this.forceBindingMobileControl) {
|
||||
let data = {
|
||||
mobile: this.formData.mobile,
|
||||
key: this.formData.key,
|
||||
code: this.formData.dynacode
|
||||
};
|
||||
if (this.captcha.id != '') {
|
||||
data.captcha_id = this.captcha.id;
|
||||
data.captcha_code = this.formData.vercode;
|
||||
}
|
||||
if (!this.verify(data)) return;
|
||||
}
|
||||
this.forceBindMobile();
|
||||
},
|
||||
// 微信小程序保存数据
|
||||
saveMp() {
|
||||
if (this.nickName.length == 0) {
|
||||
this.$util.showToast({
|
||||
title: '请输入昵称'
|
||||
});
|
||||
return;
|
||||
}
|
||||
let authData = uni.getStorageSync('authInfo');
|
||||
if (authData) Object.assign(authData, {
|
||||
nickName: this.nickName,
|
||||
avatarUrl: this.headImg
|
||||
});
|
||||
uni.setStorageSync('authInfo', authData);
|
||||
|
||||
if (this.forceBindingMobileControl) this.bindMobile();
|
||||
else this.authLogin(authData);
|
||||
},
|
||||
// #ifdef MP-ALIPAY
|
||||
aliappGetUserinfo() {
|
||||
my.getOpenUserInfo({
|
||||
success: (res) => {
|
||||
let userInfo = JSON.parse(res.response).response
|
||||
if (userInfo.code && userInfo.code == '10000') {
|
||||
if (userInfo.avatar) {
|
||||
this.avatarUrl = userInfo.avatar;
|
||||
this.$api.pullImage({
|
||||
path: this.avatarUrl,
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.headImg = res.data.pic_path;
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
this.$util.showToast({
|
||||
title: '头像拉取失败'
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
this.nickName = userInfo.nickName
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: userInfo.subMsg
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
this.$util.showToast({
|
||||
title: err.subMsg
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
// #endif
|
||||
getMemberInfo() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/member/info',
|
||||
success: (res) => {
|
||||
if (res.code >= 0) {
|
||||
// 登录成功，存储会员信息
|
||||
this.$store.commit('setMemberInfo', res.data);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.complete-info-popup {
|
||||
.complete-info-wrap {
|
||||
background: #fff;
|
||||
padding: 50rpx 40rpx 40rpx;
|
||||
|
||||
.head {
|
||||
position: relative;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: $font-size-toolbar;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: $font-size-base;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -30rpx;
|
||||
display: inline-block;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: right;
|
||||
font-size: $font-size-toolbar;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.item-wrap {
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
|
||||
.label {
|
||||
font-size: $font-size-toolbar;
|
||||
margin-right: 40rpx;
|
||||
width: 100rpx;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $font-size-toolbar;
|
||||
border: none;
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
|
||||
.send {
|
||||
border: 2rpx solid $base-color;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 60rpx;
|
||||
font-size: $font-size-tag;
|
||||
text-align: center;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.captcha {
|
||||
height: 80rpx;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.auth-login {
|
||||
width: calc(100% - 100rpx);
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 280rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #07c160;
|
||||
color: #fff;
|
||||
margin: 40rpx auto 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/deep/ .reward-popup .uni-popup__wrapper-box {
|
||||
background: none !important;
|
||||
max-width: unset !important;
|
||||
max-height: unset !important;
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
||||
.complete-info-popup /deep/ .uni-popup__wrapper.bottom,
|
||||
.complete-info-popup /deep/ .uni-popup__wrapper.bottom .uni-popup__wrapper-box {
|
||||
border-top-left-radius: 30rpx !important;
|
||||
border-top-right-radius: 30rpx !important;
|
||||
}
|
||||
</style>
|
||||
404
components/ns-navbar/ns-navbar.vue
Normal file
404
components/ns-navbar/ns-navbar.vue
Normal file
@@ -0,0 +1,404 @@
|
||||
<template>
|
||||
<!-- <view class="ns-navbar-wrap" :class="'style-' + data.navStyle">
|
||||
|
||||
<view class="u-navbar" :style="{ backgroundColor: bgColor, paddingTop: navbarHeight + 'px' }">
|
||||
<view class="navbar-inner" :style="navbarInnerStyle">
|
||||
<view class="back-wrap" v-if="isBack && isBackShow" @tap="goBack">
|
||||
<text class="iconfont icon-back_light" :style="{ color: titleColor }"></text>
|
||||
</view>
|
||||
|
||||
<view v-if="data.navStyle == 1" class="content-wrap" :class="[data.textImgPosLink, isBack && isBackShow ? 'have-back' : '']" @click="toLink(data.moreLink.wap_url)">
|
||||
<view class="title-wrap" :style="{ fontSize: '14px', color: data.textNavColor, textAlign: data.textImgPosLink }">
|
||||
{{ data.title }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="data.navStyle == 2" class="content-wrap" @click="toLink(data.moreLink.wap_url)">
|
||||
<view class="title-wrap" :style="{ color: data.textNavColor }">
|
||||
<view>
|
||||
<image :src="$util.img(data.topNavImg)" mode="heightFix"></image>
|
||||
</view>
|
||||
<view :style="{ color: data.textNavColor }">{{ data.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="data.navStyle == 3" class="content-wrap">
|
||||
<view class="title-wrap" @click="toLink(data.moreLink.wap_url)">
|
||||
<image :src="$util.img(data.topNavImg)" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="search" @click="$util.redirectTo('/pages_tool/goods/search')" :style="{ height: menuButtonInfo.height - 2 + 'px', lineHeight: menuButtonInfo.height - 2 + 'px' }">
|
||||
<text class="iconfont icon-sousuo3"></text>
|
||||
<text>请输入商品名称</text>
|
||||
</view>
|
||||
<view :style="{ 'width': capsuleWidth }"></view>
|
||||
</view>
|
||||
|
||||
<view v-if="data.navStyle == 4" class="content-wrap" :class="{ 'have-back': isBack && isBackShow }" @click="chooseOtherStore()">
|
||||
<text class="iconfont icon-dizhi" :style="{ color: data.textNavColor }"></text>
|
||||
<view v-if="globalStoreInfo && globalStoreInfo.store_id" class="title-wrap" :style="{ color: data.textNavColor }">{{ globalStoreInfo.store_name }}</view>
|
||||
<view v-else class="title-wrap" :style="{ color: data.textNavColor }">定位中...</view>
|
||||
<text class="iconfont icon-right" :style="{ color: data.textNavColor }"></text>
|
||||
<view class="nearby-store-name" :style="{ color: data.textNavColor }">附近门店</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-navbar-placeholder" :style="{ width: '100%', paddingTop: placeholderHeight + 'px' }"></view>
|
||||
|
||||
</view> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 获取系统状态栏的高度
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
let menuButtonInfo = {};
|
||||
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
||||
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
|
||||
// 自定义导航栏
|
||||
export default {
|
||||
name: 'ns-navbar',
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 标题的颜色
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// 自定义返回逻辑
|
||||
customBack: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
scrollTop: {
|
||||
type: [String, Number],
|
||||
default: '0'
|
||||
},
|
||||
// 是否显示导航栏左边返回图标和辅助文字
|
||||
isBack: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuButtonInfo: menuButtonInfo,
|
||||
isBackShow: false,
|
||||
placeholderHeight: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 导航栏内部盒子的样式
|
||||
navbarInnerStyle() {
|
||||
let style = '';
|
||||
// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
|
||||
style += 'height:' + menuButtonInfo.height * 2 + 'rpx;';
|
||||
return style;
|
||||
},
|
||||
// 转换字符数值为真正的数值
|
||||
navbarHeight() {
|
||||
// #ifdef APP-PLUS || H5
|
||||
return 25;
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
|
||||
let height = menuButtonInfo.top;
|
||||
return height;
|
||||
// #endif
|
||||
},
|
||||
bgColor() {
|
||||
var color = '';
|
||||
if (this.data.topNavBg) {
|
||||
// 顶部透明
|
||||
color = 'transparent';
|
||||
let top = 0;
|
||||
|
||||
if (this.data.navStyle == 4) {
|
||||
// #ifdef H5
|
||||
top = 15;
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
top = this.navbarHeight - 25;
|
||||
// #endif
|
||||
}
|
||||
|
||||
if (this.scrollTop > top) {
|
||||
color = this.data.topNavColor;
|
||||
} else {
|
||||
color = 'transparent';
|
||||
}
|
||||
} else {
|
||||
color = this.data.topNavColor;
|
||||
}
|
||||
return color;
|
||||
},
|
||||
capsuleWidth() {
|
||||
let width = `calc(100vw - ${this.menuButtonInfo.right}px + ${this.menuButtonInfo.width}px + 10px)`;
|
||||
return width;
|
||||
}
|
||||
},
|
||||
created(e) {
|
||||
// var pages = getCurrentPages();
|
||||
// if (pages.length > 1) {
|
||||
// this.isBackShow = true;
|
||||
// }
|
||||
// this.navbarPlaceholderHeight();
|
||||
},
|
||||
mounted() {
|
||||
// this.setModuleLocatinoFn();
|
||||
},
|
||||
methods: {
|
||||
toLink(val) {
|
||||
if (val) this.$util.redirectTo(val);
|
||||
},
|
||||
goBack() {
|
||||
// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
|
||||
if (typeof this.customBack === 'function') {
|
||||
this.customBack();
|
||||
} else {
|
||||
uni.navigateBack();
|
||||
}
|
||||
},
|
||||
// 选择其他门店
|
||||
chooseOtherStore() {
|
||||
if (this.globalStoreConfig && this.globalStoreConfig.is_allow_change == 1) {
|
||||
this.$util.redirectTo('/pages_tool/store/list');
|
||||
} else if (this.globalStoreInfo) {
|
||||
// 禁止切换门店，进入门店详情
|
||||
this.$util.redirectTo('/pages_tool/store/detail', {
|
||||
store_id: this.globalStoreInfo.store_id
|
||||
});
|
||||
}
|
||||
},
|
||||
navbarPlaceholderHeight() {
|
||||
let height = 0;
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select('.ns-navbar-wrap .u-navbar')
|
||||
.boundingClientRect(data => {
|
||||
// 获取公告自身高度
|
||||
this.placeholderHeight = data.height;
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
},
|
||||
// 向vuex中的diyIndexPositionObj增加公告导航组件定位位置
|
||||
setModuleLocatinoFn() {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.ns-navbar-wrap .u-navbar')
|
||||
.boundingClientRect(data => {
|
||||
let diyIndexPage = {
|
||||
originalVal: data.height || 0, //自身高度 px
|
||||
currVal: 0 //定位高度
|
||||
};
|
||||
this.$store.commit('setDiyGroupPositionObj', {
|
||||
'nsNavbar': diyIndexPage
|
||||
});
|
||||
}).exec();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* #ifdef H5 */
|
||||
.style-1,
|
||||
.style-2,
|
||||
.style-3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.u-navbar {
|
||||
width: 100%;
|
||||
transition: background 0.3s;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 991;
|
||||
}
|
||||
|
||||
.navbar-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
padding-bottom: 20rpx;
|
||||
/* #ifdef H5 */
|
||||
padding-bottom: 40rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.back-wrap {
|
||||
padding: 0 14rpx 0 24rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 60rpx;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
line-height: 1;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.ns-navbar-wrap {
|
||||
|
||||
&.style-1 {
|
||||
.content-wrap {
|
||||
.title-wrap {
|
||||
font-size: 27rpx;
|
||||
}
|
||||
|
||||
&.left {
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
&.center {
|
||||
left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&.have-back {
|
||||
left: 90rpx;
|
||||
padding-right: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
.content-wrap {
|
||||
.title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
|
||||
>view {
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
max-width: 300rpx;
|
||||
margin-left: 30rpx;
|
||||
font-size: 27rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //用省略号显示
|
||||
white-space: nowrap; //不换行
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
.content-wrap {
|
||||
.title-wrap {
|
||||
height: 60rpx;
|
||||
width: 170rpx;
|
||||
max-width: 170rpx;
|
||||
margin-left: 30rpx;
|
||||
flex: initial;
|
||||
text-align: center;
|
||||
margin-right: 10rpx;
|
||||
|
||||
image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
flex: 1;
|
||||
padding: 0 20rpx;
|
||||
background-color: #fff;
|
||||
text-align: left;
|
||||
border-radius: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border: 1px solid #eeeeee;
|
||||
color: rgb(102, 102, 102);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10rpx;
|
||||
|
||||
.iconfont {
|
||||
color: #909399;
|
||||
font-size: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-4 {
|
||||
.icon-dizhi{
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.content-wrap {
|
||||
top: initial;
|
||||
text-align: left;
|
||||
padding-left: 30rpx;
|
||||
|
||||
&.have-back {
|
||||
left: 60rpx;
|
||||
right: 190rpx;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
flex: none;
|
||||
margin: 0 10rpx;
|
||||
max-width: 360rpx;
|
||||
font-size: 27rpx;
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.nearby-store-name {
|
||||
margin: 0 10rpx;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
font-size: 22rpx;
|
||||
border-radius: 40rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
349
components/ns-new-gift/ns-new-gift.vue
Normal file
349
components/ns-new-gift/ns-new-gift.vue
Normal file
@@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<view>
|
||||
<view @touchmove.prevent.stop v-if="newgift" class="reward-popup">
|
||||
<uni-popup ref="nsNewGift" type="center" :maskClick="false">
|
||||
<view class="reward-wrap">
|
||||
<view class="newgift-content" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/new_gift/holiday_polite-bg.png') + ')' }">
|
||||
<view class="content-title-holiday">
|
||||
<image :src="$util.img('public/uniapp/new_gift/holiday_polite_left.png')" mode="" class="birthday-img-all"/>
|
||||
<view class="font-size-toolbar activity-name">{{ newgift.activity_name }}</view>
|
||||
<image :src="$util.img('public/uniapp/new_gift/holiday_polite_right.png')" mode="" class="birthday-img-all"/>
|
||||
</view>
|
||||
<view class="content-title-name" v-if="memberInfo">Dear {{ memberInfo.nickname }}</view>
|
||||
<view class="content-title-hint" v-if="newgift.remark">{{ newgift.remark }}</view>
|
||||
<view class="content-title-hint" v-else>感谢您一直以来的支持，为回馈会员，商城{{ newgift.activity_name ? newgift.activity_name : 'xx' }}节日，为您提供以下福利</view>
|
||||
<scroll-view scroll-y="true" class="register-box">
|
||||
<view :class="introduction > 38 ? 'reward-content' : 'reward-content-two'">
|
||||
<view class="content" v-if="newgift.award_list.point > 0">
|
||||
<view class="info">
|
||||
<text class="num">
|
||||
{{ newgift.award_list.point }}
|
||||
<text class="type">积分</text>
|
||||
</text>
|
||||
<view class="desc">用于参与活动购买商品时抵扣</view>
|
||||
</view>
|
||||
<view class="tip" @click="closeRewardPopup('1')">立即查看</view>
|
||||
</view>
|
||||
<view class="content" v-if="newgift.award_list.balance_type == 0 && newgift.award_list.balance > 0">
|
||||
<view class="info">
|
||||
<text class="num">
|
||||
{{ newgift.award_list.balance | int }}
|
||||
<text class="type">元红包</text>
|
||||
</text>
|
||||
<view class="desc">不可提现红包</view>
|
||||
</view>
|
||||
<view class="tip" @click="closeRewardPopup('2')">立即查看</view>
|
||||
</view>
|
||||
<view class="content" v-if="newgift.award_list.balance_type == 1 && newgift.award_list.balance_money > 0">
|
||||
<view class="info">
|
||||
<text class="num">
|
||||
{{ newgift.award_list.balance_money | int }}
|
||||
<text class="type">元红包</text>
|
||||
</text>
|
||||
<view class="desc">可提现红包</view>
|
||||
</view>
|
||||
<view class="tip" @click="closeRewardPopup('2')">立即查看</view>
|
||||
</view>
|
||||
<block v-if="newgift.award_list.coupon_list.length > 0">
|
||||
<block v-for="(item, index) in newgift.award_list.coupon_list" :key="index">
|
||||
<view class="content">
|
||||
<view class="info">
|
||||
<text v-if="item.type == 'reward'" class="num">
|
||||
{{ parseFloat(item.money) }}
|
||||
<text class="type">元优惠劵</text>
|
||||
</text>
|
||||
<text v-else-if="item.type == 'discount'" class="num">
|
||||
{{ item.discount | int }}
|
||||
<text class="type">折</text>
|
||||
</text>
|
||||
<view class="desc">用于下单时抵现或兑换商品等</view>
|
||||
</view>
|
||||
<view class="tip" @click="closeRewardPopup('3')">立即查看</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="close-btn" @click="cancel()">
|
||||
<text class="iconfont icon-close btn"></text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '../uni-popup/uni-popup.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newgift: {
|
||||
flag: false,
|
||||
award_list: {
|
||||
point: 0,
|
||||
coupon_list: {}
|
||||
},
|
||||
remark: {}
|
||||
},
|
||||
bgHight: '940rpx !important',
|
||||
bytesCount: null,
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
int(val) {
|
||||
var str = String(val);
|
||||
var arr = str.split('.');
|
||||
if (parseInt(arr[1]) > 0) {
|
||||
return str;
|
||||
} else {
|
||||
return arr[0];
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
introduction() {
|
||||
let bytesCount = 0;
|
||||
for (let i = 0, n = this.newgift.remark.length; i < n; i++) {
|
||||
let c = this.newgift.remark.charCodeAt(i);
|
||||
if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
|
||||
bytesCount += 1;
|
||||
} else {
|
||||
bytesCount += 2;
|
||||
}
|
||||
}
|
||||
return bytesCount;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.storeToken) return;
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getHolidayGift();
|
||||
},
|
||||
// 查询节日有礼设置
|
||||
getHolidayGift() {
|
||||
this.$api.sendRequest({
|
||||
url: '/scenefestival/api/config/config',
|
||||
success: res => {
|
||||
if (res.data && res.data[0]) {
|
||||
this.newgift = res.data[0];
|
||||
if (this.newgift.award_list.award_type.length <= 1) {
|
||||
this.bgHight = '800rpx !important';
|
||||
}
|
||||
this.getGift();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.$refs.nsNewGift.close();
|
||||
},
|
||||
getGift() {
|
||||
if (this.newgift.flag == true) {
|
||||
this.$refs.nsNewGift.open();
|
||||
this.$api.sendRequest({
|
||||
url: '/scenefestival/api/config/receive',
|
||||
data: {
|
||||
festival_id: this.newgift.festival_id
|
||||
},
|
||||
success: res => {}
|
||||
});
|
||||
}
|
||||
},
|
||||
closeRewardPopup(type) {
|
||||
if (type == 1) {
|
||||
this.$util.redirectTo('/pages_tool/member/point_detail', {});
|
||||
} else if (type == 2) {
|
||||
this.$util.redirectTo('/pages_tool/member/balance_detail', {});
|
||||
} else if (type == 3) {
|
||||
this.$util.redirectTo('/pages_tool/member/coupon', {});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/deep/ .newgift-content uni-image {
|
||||
width: 113rpx !important;
|
||||
height: 24rpx !important;
|
||||
}
|
||||
|
||||
/deep/ .reward-popup .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
|
||||
max-height: unset !important;
|
||||
overflow-y: unset;
|
||||
}
|
||||
|
||||
.register-box /deep/ .uni-scroll-view {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
.register-box {
|
||||
max-height: 300rpx;
|
||||
overflow-y: scroll;
|
||||
/* margin-top: 610rpx; */
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.reward-wrap {
|
||||
width: 85vw;
|
||||
height: auto;
|
||||
|
||||
.newgift-content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.content-title-holiday {
|
||||
font-size: $font-size-toolbar;
|
||||
font-weight: bold;
|
||||
font-family: BDZongYi-A001;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// margin-bottom: 20rpx;
|
||||
padding-top: 320rpx;
|
||||
line-height: 1;
|
||||
|
||||
.birthday-img-all {
|
||||
width: 100rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
&>view {
|
||||
margin: 0 20rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.content-title-name {
|
||||
font-size: $font-size-toolbar;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin: 30rpx 0 40rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.content-title-hint {
|
||||
margin: 0 70rpx 40rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.reward-content {
|
||||
max-height: 300rpx;
|
||||
margin: 0 56rpx;
|
||||
}
|
||||
|
||||
.reward-content-two {
|
||||
max-height: 360rpx;
|
||||
margin: 0 56rpx;
|
||||
}
|
||||
|
||||
.head {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
& .content:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 26rpx;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: #fa5b14;
|
||||
padding: 10rpx 0 10rpx 20rpx;
|
||||
width: 60rpx;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 2rpx;
|
||||
border-left: 2rpx dashed #e5e5e5;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 48rpx;
|
||||
color: #fa5b14;
|
||||
font-weight: bolder;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 300rpx;
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: $font-size-tag;
|
||||
margin-left: 10rpx;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 8rpx;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-tag;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
z-index: 500;
|
||||
|
||||
.btn {
|
||||
/* margin: 0 50rpx;
|
||||
background: linear-gradient(90deg,#ff4100,#ff6a00) ;
|
||||
border: none; */
|
||||
color: #fff;
|
||||
font-size: 40rpx;
|
||||
// padding: 100px;
|
||||
border: 4rpx solid #fff;
|
||||
border-radius: 50%;
|
||||
padding: 10rpx;
|
||||
font-weight: bold;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin: 0 auto;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
647
components/ns-payment/ns-payment.vue
Normal file
647
components/ns-payment/ns-payment.vue
Normal file
@@ -0,0 +1,647 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 选择支付方式弹窗 -->
|
||||
<uni-popup ref="choosePaymentPopup" type="center" :mask-click="false">
|
||||
<view class="choose-payment-popup popup" @touchmove.prevent.stop>
|
||||
<view class="popup-header">
|
||||
<text class="tit">支付方式</text>
|
||||
<text class="iconfont icon-close" @click="close()"></text>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
|
||||
<view class="pay-money">
|
||||
<!-- <text class="unit">{{ $lang('common.currencySymbol') }}</text> -->
|
||||
<text class="money">支付金额{{ payMoney | moneyFormat }}元</text>
|
||||
</view>
|
||||
<view class="payment-item" v-if="balanceDeduct > 0 && balanceConfig == 1 && sale">
|
||||
<view class="iconfont icon-yue"></view>
|
||||
<view class="info-wrap">
|
||||
<text class="name">余额抵扣</text>
|
||||
<view class="money">可用¥{{ balanceDeduct }}</view>
|
||||
</view>
|
||||
<ns-switch class="balance-switch" @change="useBalance" :checked="isBalance == 1"></ns-switch>
|
||||
</view>
|
||||
<block v-if="payMoney > 0">
|
||||
<block v-if="payTypeList.length">
|
||||
<view class="payment-item" v-for="(item, index) in payTypeList" :key="index" @click="payIndex = index">
|
||||
<view class="iconfont" :class="item.icon"></view>
|
||||
<text class="name">{{ item.name }}</text>
|
||||
<text class="iconfont" :class="payIndex == index ? 'icon-yuan_checked color-base-text' : 'icon-checkboxblank'"></text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="empty">平台尚未配置支付方式！</view>
|
||||
</block>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<view class="popup-footer" :class="{ 'bottom-safe-area': isIphoneX }">
|
||||
<view class="confirm-btn color-base-bg" @click="confirm()">确认支付</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 旧版支付组件 订单表不为order表 的订单支付时使用该组件 -->
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
import nsSwitch from '@/components/ns-switch/ns-switch.vue';
|
||||
|
||||
// #ifdef H5
|
||||
import { Weixin } from 'common/js/wx-jssdk.js';
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
name: 'ns-payment',
|
||||
components: {
|
||||
uniPopup,
|
||||
nsSwitch
|
||||
},
|
||||
props: {
|
||||
balanceDeduct: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
isBalance: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
payMoney: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isIphoneX: false,
|
||||
payIndex: 0,
|
||||
// #ifdef H5
|
||||
payTypeList: [{
|
||||
name: '支付宝支付',
|
||||
icon: 'icon-zhifubaozhifu-',
|
||||
type: 'alipay'
|
||||
},
|
||||
{
|
||||
name: '微信支付',
|
||||
icon: 'icon-weixin1',
|
||||
type: 'wechatpay'
|
||||
}
|
||||
],
|
||||
timer: null,
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
payTypeList: [{
|
||||
name: '微信支付',
|
||||
provider: 'wxpay',
|
||||
icon: 'icon-weixin1',
|
||||
type: 'wechatpay'
|
||||
}],
|
||||
isMatched: 0, // 支付是否需要校验
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
payTypeList: [{
|
||||
name: '支付宝支付',
|
||||
icon: 'icon-zhifubaozhifu-',
|
||||
type: 'alipay',
|
||||
provider: 'alipay'
|
||||
}],
|
||||
// #endif
|
||||
payInfo: {},
|
||||
balanceConfig: 0,
|
||||
// 预售页面判断
|
||||
sale: true
|
||||
};
|
||||
},
|
||||
created(e) {
|
||||
// #ifdef H5
|
||||
let url = window.location.href
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
let url = getCurrentPages()[getCurrentPages().length - 1].route
|
||||
// #endif
|
||||
let list = url.match('presale/order_list/order_list')
|
||||
let detail = url.match('presale/order_detail/order_detail')
|
||||
if (list || detail) {
|
||||
this.sale = false
|
||||
}
|
||||
this.isIphoneX = this.$util.uniappIsIPhoneX();
|
||||
this.getPayType();
|
||||
this.getBalanceConfig();
|
||||
// #ifdef MP-WEIXIN
|
||||
if (uni.getStorageSync('paySource') == '') this.payIsMatched();
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// #ifdef MP-WEIXIN
|
||||
payIsMatched() {
|
||||
if (uni.getStorageSync('is_test')) {
|
||||
this.isMatched = 1;
|
||||
return;
|
||||
}
|
||||
let options = wx.getLaunchOptionsSync();
|
||||
this.$api.sendRequest({
|
||||
url: '/shopcomponent/api/weapp/scenecheck',
|
||||
data: {
|
||||
scene: options.scene
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) this.isMatched = res.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
open() {
|
||||
this.$refs.choosePaymentPopup.open();
|
||||
},
|
||||
close() {
|
||||
this.$refs.choosePaymentPopup.close();
|
||||
},
|
||||
// 使用余额
|
||||
useBalance() {
|
||||
this.$emit('useBalance');
|
||||
},
|
||||
confirm() {
|
||||
if (this.payTypeList.length == 0 && this.payMoney > 0) {
|
||||
this.$util.showToast({
|
||||
title: '请选择支付方式！'
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '支付中...',
|
||||
mask: true
|
||||
});
|
||||
this.$refs.choosePaymentPopup.close();
|
||||
this.$emit('confirm');
|
||||
uni.setStorageSync('pay_flag', 1);
|
||||
},
|
||||
getPayInfo(out_trade_no) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/info',
|
||||
data: {
|
||||
out_trade_no
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0 && res.data) {
|
||||
this.payInfo = res.data;
|
||||
this.pay();
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: '未获取到支付信息！'
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo('/pages/index/index');
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getBalanceConfig() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/getBalanceConfig',
|
||||
data: {},
|
||||
success: res => {
|
||||
this.balanceConfig = res.data.balance_show;
|
||||
}
|
||||
});
|
||||
},
|
||||
getPayType() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/type',
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
if (res.data.pay_type == '') {
|
||||
this.payTypeList = [];
|
||||
} else {
|
||||
this.payTypeList.forEach((val, key) => {
|
||||
if (res.data.pay_type.indexOf(val.type) == -1) {
|
||||
this.payTypeList.splice(key, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// #ifdef H5
|
||||
pay() {
|
||||
var payType = this.payTypeList[this.payIndex];
|
||||
if (!payType) return;
|
||||
var return_url = '';
|
||||
if (this.payInfo.event == 'BlindboxGoodsOrderPayNotify') {
|
||||
return_url = '/pages_promotion/blindbox/index?outTradeNo=';
|
||||
} else {
|
||||
return_url = '/pages_tool/pay/result?code=';
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/pay',
|
||||
data: {
|
||||
out_trade_no: this.payInfo.out_trade_no,
|
||||
pay_type: payType.type,
|
||||
return_url: encodeURIComponent(this.$config.h5Domain + return_url + this.payInfo.out_trade_no)
|
||||
},
|
||||
success: res => {
|
||||
uni.hideLoading();
|
||||
if (res.code >= 0) {
|
||||
switch (payType.type) {
|
||||
case 'alipay':
|
||||
if (this.$util.isWeiXin()) {
|
||||
var wx_alipay = encodeURIComponent(res.data.data);
|
||||
this.$util.redirectTo(
|
||||
'/pages_tool/pay/wx_pay', {
|
||||
wx_alipay: wx_alipay,
|
||||
out_trade_no: this.payInfo.out_trade_no
|
||||
}, '',
|
||||
'redirectTo');
|
||||
} else {
|
||||
location.href = res.data.data;
|
||||
this.checkPayStatus();
|
||||
}
|
||||
break;
|
||||
case 'wechatpay':
|
||||
if (this.$util.isWeiXin()) {
|
||||
if (uni.getSystemInfoSync().platform == 'ios') {
|
||||
var url = uni.getStorageSync('initUrl');
|
||||
} else {
|
||||
var url = location.href;
|
||||
}
|
||||
// 获取jssdk配置
|
||||
this.$api.sendRequest({
|
||||
url: '/wechat/api/wechat/jssdkconfig',
|
||||
data: { url: url },
|
||||
success: jssdkRes => {
|
||||
var wxJS = new Weixin(),
|
||||
payData = res.data.data;
|
||||
wxJS.init(jssdkRes.data);
|
||||
wxJS.pay({
|
||||
timestamp: payData.timestamp ? payData.timestamp : payData.timeStamp,
|
||||
nonceStr: payData.nonceStr,
|
||||
package: payData.package,
|
||||
signType: payData.signType,
|
||||
paySign: payData.paySign
|
||||
},
|
||||
res => {
|
||||
if (res.errMsg == 'chooseWXPay:ok') {
|
||||
if (this.payInfo.event == 'BlindboxGoodsOrderPayNotify') {
|
||||
this.$util.redirectTo('/pages_promotion/blindbox/index', {
|
||||
outTradeNo: this.payInfo.out_trade_no
|
||||
}, '', 'redirectTo');
|
||||
} else {
|
||||
this.$util.redirectTo('/pages_tool/pay/result', {
|
||||
code: this.payInfo.out_trade_no
|
||||
}, '', 'redirectTo');
|
||||
}
|
||||
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.errMsg
|
||||
});
|
||||
}
|
||||
},
|
||||
res => {
|
||||
this.$util.showToast({
|
||||
title: '您已取消支付'
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo('/pages_tool/pay/result', {
|
||||
code: this.payInfo.out_trade_no
|
||||
}, 'redirectTo');
|
||||
}, 2000);
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
location.href = res.data.url;
|
||||
this.checkPayStatus();
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
this.$util.showToast({ title: res.message });
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
uni.hideLoading();
|
||||
this.$util.showToast({ title: 'request:fail' });
|
||||
}
|
||||
});
|
||||
},
|
||||
checkPayStatus() {
|
||||
this.timer = setInterval(() => {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/status',
|
||||
data: { out_trade_no: this.payInfo.out_trade_no },
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
if (res.data.pay_status == 2) {
|
||||
clearInterval(this.timer);
|
||||
this.$util.redirectTo('/pages_tool/pay/result', {
|
||||
code: this.payInfo.out_trade_no
|
||||
}, '', 'redirectTo');
|
||||
}
|
||||
} else {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
pay() {
|
||||
var payType = this.payTypeList[this.payIndex];
|
||||
if (!payType) return;
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/pay',
|
||||
data: {
|
||||
out_trade_no: this.payInfo.out_trade_no,
|
||||
pay_type: payType.type,
|
||||
is_matched: this.isMatched,
|
||||
scene: uni.getStorageSync('is_test') ? 1175 : wx.getLaunchOptionsSync().scene
|
||||
},
|
||||
success: res => {
|
||||
uni.hideLoading();
|
||||
if (res.code >= 0) {
|
||||
var payData = res.data.data;
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
var scene = uni.getStorageSync('is_test') ? 1175 : wx.getLaunchOptionsSync()
|
||||
.scene;
|
||||
if ([1175, 1176, 1177, 1191, 1195].indexOf(scene) != -1) {
|
||||
uni.requestOrderPayment({
|
||||
timeStamp: payData.timeStamp,
|
||||
nonceStr: payData.nonceStr,
|
||||
package: payData.package,
|
||||
signType: payData.signType,
|
||||
paySign: payData.paySign,
|
||||
// orderInfo: payData.orderInfo,
|
||||
success: res => {
|
||||
uni.removeStorage({key: 'is_test'})
|
||||
if (this.payInfo.event == 'BlindboxGoodsOrderPayNotify') {
|
||||
this.$util.redirectTo(
|
||||
'/pages_promotion/blindbox/index', {
|
||||
outTradeNo: this
|
||||
.payInfo.out_trade_no
|
||||
}, '',
|
||||
'redirectTo');
|
||||
} else {
|
||||
this.$util.redirectTo(
|
||||
'/pages_tool/pay/result', {
|
||||
code: this
|
||||
.payInfo.out_trade_no
|
||||
}, '',
|
||||
'redirectTo');
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
this.flag = false;
|
||||
if (res.errMsg == 'requestOrderPayment:fail cancel') {
|
||||
this.$util.showToast({title: '您已取消支付'});
|
||||
} else {
|
||||
uni.showModal({
|
||||
content: '支付失败,失败原因: ' + res.errMsg,
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.removeStorage({key: 'is_test'})
|
||||
if (this.payInfo.event == 'BlindboxGoodsOrderPayNotify') {
|
||||
this.$util.redirectTo('/pages_promotion/blindbox/index', {
|
||||
outTradeNo: this.payInfo.out_trade_no
|
||||
}, '', 'redirectTo');
|
||||
} else {
|
||||
this.$util.redirectTo('/pages_tool/pay/result', {
|
||||
code: this.payInfo.out_trade_no
|
||||
}, '', 'redirectTo');
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
|
||||
uni.requestPayment({
|
||||
provider: payType.provider,
|
||||
...payData,
|
||||
success: res => {
|
||||
this.$util.redirectTo('/pages_tool/pay/result', {
|
||||
code: this.payInfo.out_trade_no
|
||||
}, '', 'redirectTo');
|
||||
},
|
||||
fail: res => {
|
||||
this.flag = false;
|
||||
if (res.errMsg == 'requestPayment:fail cancel') {
|
||||
this.$util.showToast({title: '您已取消支付'});
|
||||
} else {
|
||||
uni.showModal({
|
||||
content: '支付失败,失败原因: ' + res.errMsg,
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo('/pages_tool/pay/result', {
|
||||
code: this.payInfo.out_trade_no
|
||||
},
|
||||
'redirectTo');
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
this.$util.showToast({ title: res.message });
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo('/pages_tool/pay/result', {
|
||||
code: this.payInfo.out_trade_no
|
||||
}, 'redirectTo');
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
uni.hideLoading();
|
||||
this.$util.showToast({ title: 'request:fail' });
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
// #ifdef H5
|
||||
deactivated() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
// #endif
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.popup {
|
||||
width: 75vw;
|
||||
background: #fff;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
position: relative;
|
||||
padding: 40rpx;
|
||||
|
||||
.tit {
|
||||
flex: 1;
|
||||
font-size: $font-size-toolbar;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
color: $color-tip;
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
height: calc(100% - 250rpx);
|
||||
|
||||
&.safe-area {
|
||||
height: calc(100% - 270rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
height: 100rpx;
|
||||
|
||||
.confirm-btn {
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin: 20rpx 30rpx 0;
|
||||
border-radius: $border-radius;
|
||||
font-size: $font-size-base;
|
||||
|
||||
}
|
||||
|
||||
&.bottom-safe-area {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choose-payment-popup {
|
||||
.payment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 90rpx;
|
||||
margin: 0 30rpx;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
padding: 20rpx 0;
|
||||
|
||||
&:nth-child(2) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
.icon-yue {
|
||||
color: #faa218;
|
||||
}
|
||||
|
||||
.icon-weixin1 {
|
||||
color: #24af41;
|
||||
}
|
||||
|
||||
.icon-zhifubaozhifu- {
|
||||
color: #00a0e9;
|
||||
}
|
||||
|
||||
.icon-checkboxblank {
|
||||
font-size: 40rpx;
|
||||
color: $color-line;
|
||||
}
|
||||
|
||||
.icon-yuan_checked {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 20rpx;
|
||||
font-size: $font-size-base;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.name {
|
||||
margin-left: 0;
|
||||
font-size: $font-size-base;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.money {
|
||||
color: $color-tip;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
flex: 1;
|
||||
padding: 0 10rpx;
|
||||
line-height: inherit;
|
||||
text-align: right;
|
||||
|
||||
input {
|
||||
font-size: $font-size-tag !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.set-pay-password {
|
||||
height: initial;
|
||||
|
||||
.box {
|
||||
font-size: $font-size-tag !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-money {
|
||||
text-align: center;
|
||||
padding: 20rpx 0 40rpx 0;
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
margin-top: 30rpx;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
margin-right: 4rpx;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
color: $color-sub;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
</style>
|
||||
369
components/ns-select-time/ns-select-time.vue
Normal file
369
components/ns-select-time/ns-select-time.vue
Normal file
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<view class="ns-time">
|
||||
<uni-popup type="bottom" ref="selectTime">
|
||||
<view class="box">
|
||||
<view class="title">
|
||||
<block v-if="obj.delivery && obj.delivery.delivery_type == 'local'">选择送达时间</block>
|
||||
<block v-if="obj.delivery && obj.delivery.delivery_type == 'store'">选择自提时间</block>
|
||||
<text class="iconfont icon-close" @click="close"></text>
|
||||
</view>
|
||||
<view class="body">
|
||||
<!-- 左侧日期选择 -->
|
||||
<scroll-view :scroll-y="true" class="left">
|
||||
<view class="item" :class="index == keyJudge ? 'itemDay' : ''" v-for="(item, index) in dayData" :key="index" @click="selectTime('days', index, 'yes')">
|
||||
<block v-if="item.title">{{ item.title }}</block>
|
||||
<block v-else>{{ item.month }}</block>
|
||||
<text class="itemtext">{{ item.Day }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 右侧时间选择 -->
|
||||
<scroll-view :scroll-y="true" class="right">
|
||||
<view class="item" :class="key == keyJudge && index == keys ? 'itemTime' : ''" v-for="(item, index) in timeData" :key="index" @click="selectTime('time', index, 'yes')">
|
||||
{{ item }}
|
||||
<text v-if="key == keyJudge && index == keys" class="iconfont icon-yuan_checked color-base-text"></text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
export default {
|
||||
name: "nsSelectTime",
|
||||
components: {
|
||||
uniPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//选中日期的键值
|
||||
key: 0,
|
||||
//选中时间的键值
|
||||
keys: 0,
|
||||
//渲染用数据
|
||||
obj: {},
|
||||
//左侧渲染时间
|
||||
dayData: [],
|
||||
// 右侧渲染数据
|
||||
timeData: [],
|
||||
//判断弹窗打开
|
||||
judge: false,
|
||||
//判断左侧列表是否为日期选中列表
|
||||
keyJudge: 0,
|
||||
//当前时间时间戳
|
||||
dayTime: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
refresh(){
|
||||
this.key = 0;
|
||||
this.keys = 0;
|
||||
this.keyJudge = 0;
|
||||
},
|
||||
/**
|
||||
* 弹窗打开
|
||||
*/
|
||||
open(obj, type) {
|
||||
this.dayData = [];
|
||||
this.timeData = [];
|
||||
this.obj = obj;
|
||||
this.toDay(obj.dataTime.time_type, obj.dataTime.time_week);
|
||||
if (this.judge) {
|
||||
if (type == 'no') {
|
||||
this.selectTime('', '', type);
|
||||
} else {
|
||||
this.$refs.selectTime.open();
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 时间选择
|
||||
*/
|
||||
selectTime(type, index, judge) {
|
||||
if (type == 'days') {
|
||||
this.keyJudge = index;
|
||||
this.toTime();
|
||||
} else if (type == 'time') {
|
||||
this.keys = index;
|
||||
this.key = this.keyJudge;
|
||||
let obj = this.dayData[this.key];
|
||||
obj.time = this.timeData[this.keys];
|
||||
let time = obj.time.replace('立即配送（','').replace('）','');
|
||||
|
||||
var dateTime = new Date();
|
||||
var format = time.split('-');
|
||||
var startHours = format[0].split(':');
|
||||
var endHours = format[1].split(':');
|
||||
|
||||
let timeData = obj.month.split('月');
|
||||
let month = timeData[0];
|
||||
let date = timeData[1].split('日')[0];
|
||||
|
||||
// 开始时间戳
|
||||
dateTime.setHours(startHours[0],startHours[1],0,0);
|
||||
obj.start_time = dateTime.getTime()/1000;
|
||||
obj.start_date = dateTime.getFullYear() + '-' + month + '-' + date + ' ' + format[0];
|
||||
|
||||
// 结束时间戳
|
||||
dateTime.setHours(endHours[0],endHours[1],0,0);
|
||||
obj.end_time = dateTime.getTime()/1000;
|
||||
obj.end_date = dateTime.getFullYear() + '-' + month + '-' + date + ' ' + format[1];
|
||||
|
||||
this.$emit('selectTime', { data: obj, type: judge });
|
||||
this.$refs.selectTime.close();
|
||||
}
|
||||
|
||||
if (judge == 'no') {
|
||||
this.toTime(judge);
|
||||
let obj = this.dayData[0];
|
||||
obj.time = this.timeData[0];
|
||||
this.$emit('selectTime', { data: obj, type: judge });
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
/**
|
||||
* 弹窗关闭
|
||||
*/
|
||||
close() {
|
||||
this.$refs.selectTime.close();
|
||||
},
|
||||
/**
|
||||
* 左侧数据处理
|
||||
*/
|
||||
toDay(type, obj) {
|
||||
let today = new Date();
|
||||
if (this.obj.dataTime.advance_day) {
|
||||
today = new Date(today.getTime() + (this.obj.dataTime.advance_day * 86400000));
|
||||
}
|
||||
let nowYear = today.getFullYear(); //当前年
|
||||
let nowMonth = today.getMonth() + 1; //当前月
|
||||
let nowDate = today.getDate(); //当前日
|
||||
let nowDay = today.getDay(); //当前星期几
|
||||
let endDay = new Date(nowYear, nowMonth, 0).getDate(); //当月多少天
|
||||
let Hours = today.getHours();
|
||||
let Minutes = today.getMinutes();
|
||||
this.dayTime = this.obj.dataTime.advance_day ? 0 : Number(Hours) * 3600 + Number(Minutes) * 60; //获取到当前时分秒的时间戳
|
||||
let judge = false;
|
||||
let num = 1; //记录循环执行过的次数
|
||||
let mostDay = this.obj.dataTime.most_day ? this.obj.dataTime.most_day + 1 : 1; // 最多可预约天数
|
||||
let startTime = parseInt(today.getTime() / 1000);
|
||||
let week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||||
if (obj.time_week && obj.time_week.length == 7) {
|
||||
//判断是否七天全有
|
||||
judge = true;
|
||||
}
|
||||
|
||||
for (let i = 0; i < mostDay; i++) {
|
||||
let objects = {};
|
||||
let dayStr = week[ nowDay ];
|
||||
// 判断最大可预约时间
|
||||
if (this.obj.dataTime.most_day > 0 && ((startTime + num * 86400) > (startTime + this.obj.dataTime.most_day * 86400) ) ) {
|
||||
this.judge = true;
|
||||
break;
|
||||
}
|
||||
//判断当天是否能够配送、自提
|
||||
if (type == 0 || judge || obj.indexOf(nowDay.toString()) != -1) {
|
||||
let endTime = this.obj.dataTime.delivery_time[ (this.obj.dataTime.delivery_time.length - 1) ].end_time;
|
||||
endTime -= this.obj.dataTime.time_interval * 60;
|
||||
switch (num) {
|
||||
case 1:
|
||||
if (i == 0) {
|
||||
if (endTime < this.dayTime) {
|
||||
i = i - 1;
|
||||
} else {
|
||||
objects = {
|
||||
title: this.obj.dataTime.advance_day == 0 ? '今天' : '',
|
||||
type: 'special',
|
||||
month: nowMonth + '月' + nowDate + '日',
|
||||
Day: '(' + dayStr + ')'
|
||||
};
|
||||
this.dayData.push(objects); //左侧日期数据处理
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (i == 0 || i == 1) {
|
||||
objects = {
|
||||
title: this.obj.dataTime.advance_day == 0 ? '明天' : '',
|
||||
month: nowMonth + '月' + nowDate + '日',
|
||||
Day: '(' + dayStr + ')'
|
||||
};
|
||||
this.dayData.push(objects); //左侧日期数据处理
|
||||
}
|
||||
break;
|
||||
default:
|
||||
objects = {
|
||||
title: '',
|
||||
month: nowMonth + '月' + nowDate + '日',
|
||||
Day: '(' + dayStr + ')'
|
||||
};
|
||||
this.dayData.push(objects); //左侧日期数据处理
|
||||
}
|
||||
} else {
|
||||
i = i - 1;
|
||||
}
|
||||
|
||||
if (nowDate != endDay) {
|
||||
nowDate += 1;
|
||||
} else {
|
||||
if (nowMonth != 12) {
|
||||
nowMonth += 1;
|
||||
} else {
|
||||
nowMonth = 1;
|
||||
}
|
||||
nowDate = 1;
|
||||
}
|
||||
|
||||
if (nowDay != 6) {
|
||||
nowDay += 1;
|
||||
} else {
|
||||
nowDay = 0;
|
||||
}
|
||||
num += 1;
|
||||
|
||||
if (this.obj.dataTime.most_day == 0 && i == 0) {
|
||||
this.judge = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.toTime(); //处理右侧时间数据
|
||||
},
|
||||
/**
|
||||
* 处理右侧时间数据
|
||||
*/
|
||||
toTime(judge) {
|
||||
//并非打开弹窗进入时，所有数据置零
|
||||
if (judge == 'no') {
|
||||
this.key = 0;
|
||||
this.keys = 0;
|
||||
this.keyJudge = 0;
|
||||
}
|
||||
|
||||
let timeData = [];
|
||||
|
||||
if (!this.obj.dataTime.delivery_time) {
|
||||
this.obj.dataTime.delivery_time = [ {start_time: this.obj.dataTime.start_time, end_time: this.obj.dataTime.end_time} ]
|
||||
}
|
||||
|
||||
//判断选中是否为当天
|
||||
let remainder = 0;
|
||||
//当天配送自提的话，向后推迟30分钟
|
||||
let newDayTime = JSON.parse(JSON.stringify(this.dayTime));
|
||||
// newDayTime = Math.ceil(this.dayTime / 600) * 600 + 1800;
|
||||
|
||||
//判断选中是否为当天
|
||||
let timeJudage = false;
|
||||
if (this.dayData[this.keyJudge] && this.dayData[this.keyJudge].type && newDayTime > this.obj.dataTime.start_time) timeJudage = true;
|
||||
|
||||
let timeInterval = this.obj.dataTime.time_interval ? this.obj.dataTime.time_interval * 60 : 1200;
|
||||
|
||||
this.obj.dataTime.delivery_time.forEach(item => {
|
||||
item.end_time = item.end_time ? item.end_time : 86400;
|
||||
let num = parseInt((parseInt(item.end_time) - parseInt(item.start_time)) / timeInterval);
|
||||
let time = timeJudage ? parseInt(newDayTime) : parseInt(item.start_time);
|
||||
for (let i = 0; i < num; i++) {
|
||||
if (parseInt(time) + parseInt(timeInterval) > item.end_time) break;
|
||||
if (timeJudage) {
|
||||
if (time >= newDayTime) {
|
||||
if (this.obj.dataTime.time_interval) {
|
||||
if (time <= item.end_time) {
|
||||
let text = '';
|
||||
if (this.obj.delivery.delivery_type == 'local' && i == 0) {
|
||||
text = '立即配送（'+ this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval) + '）';
|
||||
} else {
|
||||
text = this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval);
|
||||
}
|
||||
timeData.push(text);
|
||||
}
|
||||
} else {
|
||||
timeData.push(this.$util.getTimeStr(time));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.obj.dataTime.time_interval) {
|
||||
if (time <= item.end_time) timeData.push(this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval));
|
||||
} else {
|
||||
timeData.push(this.$util.getTimeStr(time));
|
||||
}
|
||||
}
|
||||
time = parseInt(time) + timeInterval;
|
||||
}
|
||||
})
|
||||
this.timeData = timeData;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
height: 728rpx;
|
||||
.title {
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-bottom: 1rpx solid #f7f4f4;
|
||||
.icon-close {
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.body {
|
||||
width: 100%;
|
||||
height: calc(100% - 90rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left {
|
||||
width: 230rpx;
|
||||
background: #f8f8f8;
|
||||
height: 100%;
|
||||
.item {
|
||||
width: 100%;
|
||||
padding: 16rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.itemDay {
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: calc(100% - 230rpx);
|
||||
height: 100%;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
.item {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 72rpx;
|
||||
.icon-yuan_checked {
|
||||
font-size: 38rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
.itemTime {
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
69
components/ns-switch/ns-switch.vue
Normal file
69
components/ns-switch/ns-switch.vue
Normal file
@@ -0,0 +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>
|
||||
654
components/payment/payment.vue
Normal file
654
components/payment/payment.vue
Normal file
@@ -0,0 +1,654 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 选择支付方式弹窗 -->
|
||||
<uni-popup ref="choosePaymentPopup" type="center" v-if="payInfo" :mask-click="false">
|
||||
<view class="choose-payment-popup popup" @touchmove.prevent.stop>
|
||||
<view class="popup-header">
|
||||
<text class="tit">支付方式</text>
|
||||
<text class="iconfont icon-close" @click="close()"></text>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" class="popup-body">
|
||||
<view class="pay-money">
|
||||
<text class="money">支付金额{{ payMoney|moneyFormat }}元</text>
|
||||
</view>
|
||||
|
||||
<view class="payment-item" v-if="balanceDeduct > 0 && balanceUsable && balanceConfig == 1">
|
||||
<view class="iconfont icon-yue"></view>
|
||||
<view class="info-wrap">
|
||||
<text class="name">余额支付</text>
|
||||
<view class="money">可用¥{{ balanceDeduct|moneyFormat }}</view>
|
||||
</view>
|
||||
<ns-switch class="balance-switch" @change="useBalance" :checked="isBalance == 1"></ns-switch>
|
||||
</view>
|
||||
<block v-if="payMoney > 0">
|
||||
<block v-if="payTypeList.length">
|
||||
<view class="payment-item" v-for="(item, index) in payTypeList" :key="index" @click="payIndex = index">
|
||||
<view class="iconfont" :class="item.icon"></view>
|
||||
<text class="name">{{ item.name }}</text>
|
||||
<text class="iconfont" :class="payIndex == index ? 'icon-yuan_checked color-base-text' : 'icon-checkboxblank'"></text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="empty">平台尚未配置支付方式！</view>
|
||||
</block>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<view class="popup-footer">
|
||||
<view class="confirm-btn color-base-bg" @click="confirm()">确认支付</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 新版支付组件 订单表为order表 的订单支付时使用该组件 -->
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
import nsSwitch from '@/components/ns-switch/ns-switch.vue';
|
||||
|
||||
// #ifdef H5
|
||||
import {
|
||||
Weixin
|
||||
} from 'common/js/wx-jssdk.js';
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
name: 'payment',
|
||||
components: {
|
||||
uniPopup,
|
||||
nsSwitch
|
||||
},
|
||||
props: {
|
||||
// 是否可用余额支付
|
||||
balanceUsable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
payIndex: 0,
|
||||
// #ifdef H5
|
||||
payTypeList: [{
|
||||
name: '支付宝支付',
|
||||
icon: 'icon-zhifubaozhifu-',
|
||||
type: 'alipay'
|
||||
},
|
||||
{
|
||||
name: '微信支付',
|
||||
icon: 'icon-weixin1',
|
||||
type: 'wechatpay'
|
||||
}
|
||||
],
|
||||
timer: null,
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
payTypeList: [{
|
||||
name: '微信支付',
|
||||
provider: 'wxpay',
|
||||
icon: 'icon-weixin1',
|
||||
type: 'wechatpay'
|
||||
}],
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
payTypeList: [{
|
||||
name: '支付宝支付',
|
||||
icon: 'icon-zhifubaozhifu-',
|
||||
type: 'alipay',
|
||||
provider: 'alipay'
|
||||
}],
|
||||
// #endif
|
||||
payInfo: null,
|
||||
balanceConfig: 0,
|
||||
// 预售页面判断
|
||||
sale: true,
|
||||
isBalance: 0,
|
||||
balance: 0
|
||||
};
|
||||
},
|
||||
created(e) {
|
||||
this.getPayType();
|
||||
if (this.balanceUsable) this.getBalanceConfig();
|
||||
},
|
||||
computed: {
|
||||
balanceDeduct() {
|
||||
let money = 0;
|
||||
if (this.payInfo && this.balance) {
|
||||
money = this.balance > this.payInfo.pay_money ? this.payInfo.pay_money : this.balance;
|
||||
}
|
||||
return money;
|
||||
},
|
||||
payMoney() {
|
||||
let money = 0;
|
||||
if (this.payInfo) {
|
||||
money = this.payInfo.pay_money;
|
||||
if (this.balanceDeduct && this.isBalance && this.balanceUsable) {
|
||||
money = this.payInfo.pay_money - this.balanceDeduct;
|
||||
}
|
||||
}
|
||||
return money;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.$refs.choosePaymentPopup.close();
|
||||
},
|
||||
// 使用余额
|
||||
useBalance() {
|
||||
this.isBalance = this.isBalance ? 0 : 1;
|
||||
this.$emit('useBalance', this.isBalance)
|
||||
},
|
||||
confirm() {
|
||||
if (this.payTypeList.length == 0 && this.payMoney > 0) {
|
||||
this.$util.showToast({
|
||||
title: '请选择支付方式！'
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '支付中...',
|
||||
mask: true
|
||||
});
|
||||
this.pay();
|
||||
uni.setStorageSync('pay_flag', 1);
|
||||
},
|
||||
getPayInfo(out_trade_no) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/info',
|
||||
data: {
|
||||
out_trade_no
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0 && res.data) {
|
||||
this.payInfo = res.data;
|
||||
if (this.balanceConfig && this.balanceUsable) this.getMemberBalance();
|
||||
setTimeout(() => {
|
||||
this.$refs.choosePaymentPopup.open();
|
||||
})
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: '未获取到支付信息！'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取余额配置
|
||||
*/
|
||||
getBalanceConfig() {
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/getBalanceConfig',
|
||||
data: {},
|
||||
success: res => {
|
||||
this.balanceConfig = res.data.balance_show;
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取用户余额
|
||||
*/
|
||||
getMemberBalance() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/memberaccount/usablebalance',
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.balance = parseFloat(res.data.usable_balance);
|
||||
//余额不足以抵扣整个订单时不显示
|
||||
if(parseFloat(this.payMoney) > this.balance){
|
||||
this.balanceConfig = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 查询支付方式
|
||||
*/
|
||||
getPayType() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/type',
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
if (res.data.pay_type == '') {
|
||||
this.payTypeList = [];
|
||||
} else {
|
||||
this.payTypeList.forEach((val, key) => {
|
||||
if (res.data.pay_type.indexOf(val.type) == -1) {
|
||||
this.payTypeList.splice(key, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// #ifdef H5
|
||||
pay() {
|
||||
var payType = this.payTypeList[this.payIndex];
|
||||
var return_url = '';
|
||||
if (this.payInfo.event == 'BlindboxGoodsOrderPayNotify') {
|
||||
return_url = '/pages_promotion/blindbox/index?outTradeNo=';
|
||||
} else {
|
||||
return_url = '/pages_tool/pay/result?code=';
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/pay',
|
||||
data: {
|
||||
out_trade_no: this.payInfo.out_trade_no,
|
||||
pay_type: payType ? payType.type : '',
|
||||
return_url: encodeURIComponent(this.$config.h5Domain + return_url + this.payInfo
|
||||
.out_trade_no),
|
||||
is_balance: this.isBalance
|
||||
},
|
||||
success: res => {
|
||||
uni.hideLoading();
|
||||
if (res.code >= 0) {
|
||||
if (res.data.pay_success) {
|
||||
this.paySuccess();
|
||||
return;
|
||||
}
|
||||
switch (payType.type) {
|
||||
case 'alipay':
|
||||
if (this.$util.isWeiXin()) {
|
||||
var wx_alipay = encodeURIComponent(res.data.data);
|
||||
this.$util.redirectTo('/pages_tool/pay/wx_pay', {
|
||||
wx_alipay: wx_alipay,
|
||||
out_trade_no: this.payInfo.out_trade_no
|
||||
}, '', 'redirectTo');
|
||||
} else {
|
||||
location.href = res.data.data;
|
||||
this.checkPayStatus();
|
||||
}
|
||||
break;
|
||||
case 'wechatpay':
|
||||
if (this.$util.isWeiXin()) {
|
||||
if (uni.getSystemInfoSync().platform == 'ios') {
|
||||
var url = uni.getStorageSync('initUrl');
|
||||
} else {
|
||||
var url = location.href;
|
||||
}
|
||||
// 获取jssdk配置
|
||||
this.$api.sendRequest({
|
||||
url: '/wechat/api/wechat/jssdkconfig',
|
||||
data: {
|
||||
url: url
|
||||
},
|
||||
success: jssdkRes => {
|
||||
var wxJS = new Weixin(),
|
||||
payData = res.data.data;
|
||||
wxJS.init(jssdkRes.data);
|
||||
wxJS.pay({
|
||||
timestamp: payData.timestamp ? payData.timestamp : payData.timeStamp,
|
||||
nonceStr: payData.nonceStr,
|
||||
package: payData.package,
|
||||
signType: payData.signType,
|
||||
paySign: payData.paySign
|
||||
},
|
||||
res => {
|
||||
if (res.errMsg == 'chooseWXPay:ok') {
|
||||
this.paySuccess();
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.errMsg
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.close();
|
||||
}, 1500)
|
||||
}
|
||||
},
|
||||
res => {
|
||||
this.$util.showToast({
|
||||
title: '您已取消支付'
|
||||
});
|
||||
this.resetpay();
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
location.href = res.data.url;
|
||||
this.checkPayStatus();
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
uni.hideLoading();
|
||||
this.$util.showToast({
|
||||
title: 'request:fail'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
checkPayStatus() {
|
||||
this.timer = setInterval(() => {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/status',
|
||||
data: {
|
||||
out_trade_no: this.payInfo.out_trade_no
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
if (res.data.pay_status == 2) {
|
||||
clearInterval(this.timer);
|
||||
this.paySuccess();
|
||||
}
|
||||
} else {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
pay() {
|
||||
var payType = this.payTypeList[this.payIndex];
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/pay',
|
||||
data: {
|
||||
out_trade_no: this.payInfo.out_trade_no,
|
||||
pay_type: payType ? payType.type : '',
|
||||
scene: uni.getStorageSync('is_test') ? 1175 : wx.getLaunchOptionsSync().scene,
|
||||
is_balance: this.isBalance
|
||||
},
|
||||
success: res => {
|
||||
uni.hideLoading();
|
||||
if (res.code >= 0) {
|
||||
if (res.data.pay_success) {
|
||||
this.paySuccess();
|
||||
return;
|
||||
}
|
||||
var payData = res.data.data;
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
var scene = uni.getStorageSync('is_test') ? 1175 : wx.getLaunchOptionsSync().scene;
|
||||
if ([1175, 1176, 1177, 1191, 1195].indexOf(scene) != -1) {
|
||||
uni.requestOrderPayment({
|
||||
timeStamp: payData.timeStamp,
|
||||
nonceStr: payData.nonceStr,
|
||||
package: payData.package,
|
||||
signType: payData.signType,
|
||||
paySign: payData.paySign,
|
||||
success: res => {
|
||||
this.paySuccess();
|
||||
},
|
||||
fail: res => {
|
||||
this.flag = false;
|
||||
if (res.errMsg == 'requestOrderPayment:fail cancel') {
|
||||
this.$util.showToast({
|
||||
title: '您已取消支付'
|
||||
});
|
||||
this.resetpay();
|
||||
} else {
|
||||
uni.showModal({
|
||||
content: '支付失败,失败原因: ' + res.errMsg,
|
||||
showCancel: false
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.close();
|
||||
}, 1500)
|
||||
}
|
||||
}
|
||||
});
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
|
||||
uni.requestPayment({
|
||||
provider: payType.provider,
|
||||
...payData,
|
||||
success: res => {
|
||||
this.paySuccess();
|
||||
},
|
||||
fail: res => {
|
||||
this.flag = false;
|
||||
if (res.errMsg == 'requestPayment:fail cancel') {
|
||||
this.$util.showToast({
|
||||
title: '您已取消支付'
|
||||
});
|
||||
this.resetpay();
|
||||
} else {
|
||||
uni.showModal({
|
||||
content: '支付失败,失败原因: ' + res.errMsg,
|
||||
showCancel: false
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.close();
|
||||
}, 1500)
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
uni.hideLoading();
|
||||
this.$util.showToast({
|
||||
title: 'request:fail'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// #endif
|
||||
/**
|
||||
* 支付成功之后跳转
|
||||
*/
|
||||
paySuccess() {
|
||||
if (this.payInfo.event == 'BlindboxGoodsOrderPayNotify') {
|
||||
this.$util.redirectTo('/pages_promotion/blindbox/index', {
|
||||
outTradeNo: this.payInfo.out_trade_no
|
||||
}, 'redirectTo');
|
||||
} else if (this.payInfo.return_url) {
|
||||
if (this.payInfo.return_url.indexOf('http://') != -1 || this.payInfo.return_url.indexOf('https://') != -1) location.replace(this.payInfo.return_url);
|
||||
else this.$util.redirectTo(this.payInfo.return_url, {}, 'redirectTo');
|
||||
} else {
|
||||
this.$util.redirectTo('/pages_tool/pay/result', {
|
||||
code: this.payInfo.out_trade_no
|
||||
}, 'redirectTo');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 重置支付单据
|
||||
*/
|
||||
resetpay() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/pay/resetpay',
|
||||
data: {
|
||||
out_trade_no: this.payInfo.out_trade_no,
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) this.getPayInfo(res.data);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// #ifdef H5
|
||||
deactivated() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
// #endif
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popup {
|
||||
width: 75vw;
|
||||
background: #fff;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
position: relative;
|
||||
padding: 40rpx;
|
||||
|
||||
.tit {
|
||||
flex: 1;
|
||||
font-size: $font-size-toolbar;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
color: $color-tip;
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
height: calc(100% - 250rpx);
|
||||
|
||||
&.safe-area {
|
||||
height: calc(100% - 270rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
height: 100rpx;
|
||||
|
||||
.confirm-btn {
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin: 20rpx 30rpx 0;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.bottom-safe-area {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choose-payment-popup {
|
||||
.payment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 90rpx;
|
||||
margin: 0 30rpx;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
padding: 20rpx 0;
|
||||
|
||||
&:nth-child(2) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
.icon-yue {
|
||||
color: #faa218;
|
||||
}
|
||||
|
||||
.icon-weixin1 {
|
||||
color: #24af41;
|
||||
}
|
||||
|
||||
.icon-zhifubaozhifu- {
|
||||
color: #00a0e9;
|
||||
}
|
||||
|
||||
.icon-checkboxblank {
|
||||
font-size: 40rpx;
|
||||
color: $color-line;
|
||||
}
|
||||
|
||||
.icon-yuan_checked {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 20rpx;
|
||||
font-size: $font-size-base;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.name {
|
||||
margin-left: 0;
|
||||
font-size: $font-size-base;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.money {
|
||||
color: $color-tip;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
flex: 1;
|
||||
padding: 0 10rpx;
|
||||
line-height: inherit;
|
||||
text-align: right;
|
||||
|
||||
input {
|
||||
font-size: $font-size-tag !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.set-pay-password {
|
||||
height: initial;
|
||||
|
||||
.box {
|
||||
font-size: $font-size-tag !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-money {
|
||||
text-align: center;
|
||||
padding: 20rpx 0 40rpx 0;
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
margin-top: 30rpx;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
margin-right: 4rpx;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
color: $color-sub;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
</style>
|
||||
269
components/pengpai-fadein-out/pengpai-fadein-out.vue
Normal file
269
components/pengpai-fadein-out/pengpai-fadein-out.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<view v-if="isShow">
|
||||
<view ref="ani" :animation="animationData" class="message" :style="{ top: top + 'px', left: left + 'px' }" v-if="show">
|
||||
<view class="round bg-gradual-orange flex justify-start shadow" style="padding: 3px;">
|
||||
<view class="cu-avatar cu-a-sm round" :style="{ backgroundImage: 'url(' + $util.img(penpaiData.img) + ')' }">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<!-- <image :src="penpaiData.img" class="avatarimg"></image> -->
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="padding-lr-sm flex align-center">
|
||||
<text class="text-sm">{{ penpaiData.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
// #endif
|
||||
export default {
|
||||
name: 'pengpai-fadein-out',
|
||||
props: {
|
||||
//持续时间
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
//停留时间
|
||||
wait: {
|
||||
type: Number,
|
||||
default: 3500
|
||||
},
|
||||
//顶部距离px
|
||||
top: {
|
||||
type: Number,
|
||||
default: 350
|
||||
},
|
||||
//左边距离px
|
||||
left: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
//动画半径
|
||||
radius: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
//数据
|
||||
info: {
|
||||
type: [Array, Object],
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
animationData: {},
|
||||
animationNumber: {},
|
||||
show: true,
|
||||
index: 0,
|
||||
penpaiData: {},
|
||||
timeIndex: 0
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
isShow(){
|
||||
return this.penpaiData && Object.keys(this.penpaiData).length;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
// 初始化执行第一次
|
||||
this.penpaiData = this.info[this.index];
|
||||
this.donghua();
|
||||
// 开启时间函数，轮询推值
|
||||
clearInterval(this.timeIndex);
|
||||
this.timeIndex = setInterval(() => {
|
||||
if (this.index == this.info.length - 1) {
|
||||
this.index = 0;
|
||||
} else {
|
||||
this.index++;
|
||||
}
|
||||
this.penpaiData = this.info[this.index];
|
||||
// 执行动画
|
||||
this.donghua();
|
||||
}, this.duration + this.wait);
|
||||
},
|
||||
donghua() {
|
||||
//进入
|
||||
// #ifndef APP-NVUE
|
||||
this.animationData = uni
|
||||
.createAnimation({
|
||||
duration: this.duration / 2,
|
||||
timingFunction: 'ease'
|
||||
})
|
||||
.top(this.top - this.radius)
|
||||
.opacity(0.9)
|
||||
.step()
|
||||
.export();
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
if (!this.$refs['ani']) return;
|
||||
animation.transition(this.$refs['ani'].ref, {
|
||||
styles: {
|
||||
transform: `translateY(-${this.radius / 2}px)`,
|
||||
opacity: 1
|
||||
},
|
||||
duration: this.duration / 2,
|
||||
timingFunction: 'linear',
|
||||
needLayout: false,
|
||||
delay: 0
|
||||
});
|
||||
// #endif
|
||||
|
||||
//停留
|
||||
setTimeout(() => {
|
||||
//消失
|
||||
// #ifndef APP-NVUE
|
||||
this.animationData = uni
|
||||
.createAnimation({
|
||||
duration: this.duration / 2,
|
||||
timingFunction: 'ease'
|
||||
})
|
||||
.top(this.top - this.radius * 2)
|
||||
.opacity(0)
|
||||
.step()
|
||||
.export();
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
if (!this.$refs['ani']) return;
|
||||
animation.transition(this.$refs['ani'].ref, {
|
||||
styles: {
|
||||
transform: `translateY(-${this.radius}px)`,
|
||||
opacity: 0
|
||||
},
|
||||
duration: this.duration / 2,
|
||||
timingFunction: 'linear',
|
||||
needLayout: false,
|
||||
delay: 0
|
||||
});
|
||||
// #endif
|
||||
}, this.wait);
|
||||
|
||||
// console.log('this.top', this.top);
|
||||
// console.log('this.radius', this.radius);
|
||||
|
||||
setTimeout(() => {
|
||||
this.animationData = uni
|
||||
.createAnimation({
|
||||
duration: this.duration / 2,
|
||||
timingFunction: 'ease'
|
||||
})
|
||||
.top(this.top)
|
||||
.opacity(0)
|
||||
.step()
|
||||
.export();
|
||||
}, 2800);
|
||||
},
|
||||
closeTimer() {
|
||||
clearInterval(this.timeIndex); //关闭弹幕定时器
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message {
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.round {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.bg-gradual-orange {
|
||||
background-color: rgba($color: #000, $alpha: 0.4);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 40rpx 40rpx 50rpx rgba(217, 109, 26, 0.2);
|
||||
}
|
||||
|
||||
.flex {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cu-avatar {
|
||||
/* #ifndef APP-NVUE */
|
||||
font-variant: small-caps;
|
||||
display: inline-flex;
|
||||
white-space: nowrap;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
vertical-align: middle;
|
||||
/* #endif */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ccc;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
font-size: 300rpx;
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.avatarimg {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.cu-a-sm {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.padding-lr-sm {
|
||||
padding-left: 20upx;
|
||||
padding-right: 20upx;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.margin-left-xs {
|
||||
margin-left: 10upx;
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.margin-lr-sm {
|
||||
margin-left: 20upx;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: $font-size-tag;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
305
components/pick-regions/pick-regions.vue
Normal file
305
components/pick-regions/pick-regions.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<view class="pick-regions">
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="handleValueChange" @columnchange="handleColumnChange">
|
||||
<slot></slot>
|
||||
</picker>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view @click="$refs.regionsRef.open()">
|
||||
<slot></slot>
|
||||
</view>
|
||||
|
||||
<uni-popup type="bottom" ref="regionsRef">
|
||||
<view class="regions-picker-container">
|
||||
<view class="picker-header">
|
||||
<view class="picker-action cancel" @click="$refs.regionsRef.close()">取消</view>
|
||||
<view class="picker-action confirm" @click="confirmRegions">完成</view>
|
||||
</view>
|
||||
<picker-view :value="multiIndex" @change="pickerViewColumnChange" class="picker-view">
|
||||
<picker-view-column v-if="multiArray[0]">
|
||||
<view class="item" v-for="(item,index) in multiArray[0]" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="multiArray[1]">
|
||||
<view class="item" v-for="(item,index) in multiArray[1]" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="multiArray[2]">
|
||||
<view class="item" v-for="(item,index) in multiArray[2]" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
defaultRegions: {
|
||||
type: Array
|
||||
},
|
||||
selectArr: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pickerValueArray: [],
|
||||
cityArr: [],
|
||||
districtArr: [],
|
||||
multiIndex: [0, 0, 0],
|
||||
isInitMultiArray: false,
|
||||
// 是否加载完默认地区
|
||||
isLoadDefaultAreas: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
defaultRegions: {
|
||||
handler(arr, oldArr = []) {
|
||||
// 避免传的是字面量的时候重复触发
|
||||
if (arr.length != this.selectArr || arr.join('') === oldArr.join('')) return;
|
||||
this.isInitMultiArray = false;
|
||||
this.handleDefaultRegions();
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
multiArray() {
|
||||
if (!this.isLoadDefaultAreas) return;
|
||||
var arr = this.pickedArr.map(arr => arr.map(item => item.label));
|
||||
return arr;
|
||||
},
|
||||
pickedArr() {
|
||||
// 进行初始化
|
||||
if (this.isInitMultiArray) {
|
||||
if (this.selectArr == '2') {
|
||||
return [this.pickerValueArray[0], this.pickerValueArray[1]];
|
||||
} else {
|
||||
return [this.pickerValueArray[0], this.pickerValueArray[1], this.pickerValueArray[2]];
|
||||
}
|
||||
}
|
||||
|
||||
if (this.selectArr == '2') {
|
||||
return [this.pickerValueArray[0], this.cityArr];
|
||||
} else {
|
||||
return [this.pickerValueArray[0], this.cityArr, this.districtArr];
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDefaultAreas(0, { level: 0 });
|
||||
},
|
||||
methods: {
|
||||
async pickerViewColumnChange(e) {
|
||||
var value = e.detail.value;
|
||||
if (value[0] != this.multiIndex[0]) {
|
||||
await this.handleColumnChange({ detail: { column: 0, value: value[0] } })
|
||||
this.multiIndex[1] = e.detail.value[1] || 0;
|
||||
await this.handleColumnChange({ detail: { column: 1, value: value[1] } })
|
||||
this.multiIndex[2] = e.detail.value[2] || 0;
|
||||
} else if (value[1] != this.multiIndex[1]) {
|
||||
await this.handleColumnChange({ detail: { column: 1, value: value[1] } })
|
||||
this.multiIndex[2] = e.detail.value[2] || 0;
|
||||
} else {
|
||||
this.multiIndex = value
|
||||
}
|
||||
},
|
||||
confirmRegions() {
|
||||
this.handleValueChange({ detail: { value: this.multiIndex } })
|
||||
this.$refs.regionsRef.close()
|
||||
},
|
||||
async handleColumnChange(e) {
|
||||
this.isInitMultiArray = false;
|
||||
let col = e.detail.column;
|
||||
let row = e.detail.value;
|
||||
this.multiIndex[col] = row;
|
||||
switch (col) {
|
||||
case 0:
|
||||
//选择省，加载市、区县
|
||||
this.cityArr = await this.getAreasAsync(this.pickerValueArray[0][this.multiIndex[col]].value);
|
||||
this.districtArr = await this.getAreasAsync(this.cityArr[0].value);
|
||||
break;
|
||||
case 1:
|
||||
//选择市，加载区县
|
||||
this.districtArr = await this.getAreasAsync(this.cityArr[this.multiIndex[col]].value);
|
||||
break;
|
||||
case 2:
|
||||
if (!this.cityArr.length) this.cityArr = await this.getAreasAsync(this.pickerValueArray[0][0].value)
|
||||
if (!this.districtArr.length) this.districtArr = await this.getAreasAsync(this.cityArr[0].value);
|
||||
break;
|
||||
}
|
||||
},
|
||||
handleValueChange(e) {
|
||||
// 结构赋值
|
||||
let [index0, index1, index2] = e.detail.value;
|
||||
let [arr0, arr1, arr2] = this.pickedArr;
|
||||
let address = '';
|
||||
if (this.selectArr == '2') {
|
||||
address = [arr0[index0], arr1[index1]];
|
||||
} else {
|
||||
address = [arr0[index0], arr1[index1], arr2[index2]];
|
||||
}
|
||||
this.$emit('getRegions', address);
|
||||
},
|
||||
handleDefaultRegions() {
|
||||
var time = setInterval(() => {
|
||||
// if (!this.isLoadDefaultAreas) return;
|
||||
// console.log('this.pickerValueArray',this.pickerValueArray)
|
||||
for (let i = 0; i < this.defaultRegions.length; i++) {
|
||||
if(this.pickerValueArray[i] == null) continue;
|
||||
for (let j = 0; j < this.pickerValueArray[i].length; j++) {
|
||||
// 匹配省
|
||||
if ((this.defaultRegions[i] == this.pickerValueArray[i][j].value || this.defaultRegions[i] == this.pickerValueArray[i][j].label) && this.pickerValueArray[i][j].level == 1) {
|
||||
// 设置选中省
|
||||
this.$set(this.multiIndex, i, j);
|
||||
|
||||
// 查询市
|
||||
this.getAreas(this.pickerValueArray[i][j].value, data => {
|
||||
this.cityArr = data;
|
||||
this.$set(this.pickerValueArray, 1, data)
|
||||
for (let k = 0; k < this.cityArr.length; k++) {
|
||||
if (this.defaultRegions[1] == this.cityArr[k].value || this.defaultRegions[1] == this.cityArr[k].label) {
|
||||
// 设置选中市
|
||||
this.$set(this.multiIndex, 1, k);
|
||||
|
||||
// 查询区县
|
||||
this.getAreas(this.cityArr[k].value, data => {
|
||||
this.districtArr = data;
|
||||
this.$set(this.pickerValueArray, 2, data)
|
||||
|
||||
// 设置选中区县
|
||||
for (let u = 0; u < this.districtArr
|
||||
.length; u++) {
|
||||
if (this.defaultRegions[2] == this.districtArr[u].value || this.defaultRegions[2] == this.districtArr[u].label) {
|
||||
this.$set(this.multiIndex, 2, u);
|
||||
this.handleValueChange({
|
||||
detail: {
|
||||
value: [j, k, u]
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.isLoadDefaultAreas) clearInterval(time);
|
||||
}, 100);
|
||||
},
|
||||
getDefaultAreas(pid, obj) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/address/lists',
|
||||
data: { pid: pid },
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
var data = [];
|
||||
var selected = undefined;
|
||||
res.data.forEach((item, index) => {
|
||||
if (obj != undefined) {
|
||||
if (obj.level == 0 && obj.province_id != undefined) {
|
||||
selected = obj.province_id;
|
||||
} else if (obj.level == 1 && obj.city_id != undefined) {
|
||||
selected = obj.city_id;
|
||||
} else if (obj.level == 2 && obj.district_id != undefined) {
|
||||
selected = obj.district_id;
|
||||
}
|
||||
}
|
||||
|
||||
if (selected == undefined && index == 0) {
|
||||
selected = item.id;
|
||||
}
|
||||
data.push({
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
level: item.level
|
||||
});
|
||||
});
|
||||
|
||||
this.pickerValueArray[obj.level] = data;
|
||||
if (obj.level + 1 < 3) {
|
||||
obj.level++;
|
||||
this.getDefaultAreas(selected, obj);
|
||||
} else {
|
||||
this.isInitMultiArray = true;
|
||||
this.isLoadDefaultAreas = true;
|
||||
this.handleDefaultRegions()
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 同步获取地区
|
||||
async getAreasAsync(pid) {
|
||||
let res = await this.$api.sendRequest({
|
||||
url: '/api/address/lists',
|
||||
data: { pid: pid },
|
||||
async: false
|
||||
});
|
||||
if (res.code == 0) {
|
||||
var data = [];
|
||||
res.data.forEach((item, index) => {
|
||||
data.push({
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
level: item.level
|
||||
});
|
||||
});
|
||||
return data;
|
||||
}
|
||||
},
|
||||
// 异步获取地区
|
||||
getAreas(pid, callback) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/address/lists',
|
||||
data: { pid: pid },
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
var data = [];
|
||||
res.data.forEach((item, index) => {
|
||||
data.push({
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
level: item.level
|
||||
});
|
||||
});
|
||||
if (callback) callback(data);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.regions-picker-container {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.picker-header {
|
||||
display: flex;
|
||||
height: 45px;
|
||||
align-items: center;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
justify-content: space-between;
|
||||
|
||||
.picker-action {
|
||||
padding: 0 28rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
color: #007aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
297
components/register-reward/register-reward.vue
Normal file
297
components/register-reward/register-reward.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<view>
|
||||
<view @touchmove.prevent.stop class="reward-popup" v-if="reward">
|
||||
<uni-popup ref="registerReward" type="center" :maskClick="false">
|
||||
<view class="reward-wrap">
|
||||
<image :src="$util.img('public/uniapp/register_reward/register_reward_img.png')" mode="widthFix" class="bg-img-head"/>
|
||||
<image :src="$util.img('public/uniapp/register_reward/register_reward_money.png')" mode="widthFix" class="bg-img-money"/>
|
||||
<image :src="$util.img('public/uniapp/register_reward/register_reward_head.png')" mode="widthFix" class="bg-img"/>
|
||||
<view class="wrap">
|
||||
<view>
|
||||
<scroll-view scroll-y="true" class="register-box">
|
||||
<view class="reward-content">
|
||||
<view class="reward-item" v-if="reward.point > 0">
|
||||
<view class="head">积分奖励</view>
|
||||
<view class="content">
|
||||
<view class="info">
|
||||
<view>
|
||||
<text class="num">{{ reward.point }}</text>
|
||||
<text class="type">积分</text>
|
||||
</view>
|
||||
<view class="desc">用于下单时抵现或兑换商品等</view>
|
||||
</view>
|
||||
<view class="tip" @click="closeRewardPopup('point')">立即查看</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="reward-item" v-if="reward.growth > 0">
|
||||
<view class="head">成长值</view>
|
||||
<view class="content">
|
||||
<view class="info">
|
||||
<view>
|
||||
<text class="num">{{ reward.growth }}</text>
|
||||
<text class="type">成长值</text>
|
||||
</view>
|
||||
<view class="desc">用于提升会员等级</view>
|
||||
</view>
|
||||
<view class="tip" @click="closeRewardPopup('growth')">立即查看</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="reward-item" v-if="reward.balance > 0">
|
||||
<view class="head">红包奖励</view>
|
||||
<view class="content">
|
||||
<view class="info">
|
||||
<view>
|
||||
<text class="num">{{ reward.balance }}</text>
|
||||
<text class="type">元</text>
|
||||
</view>
|
||||
<view class="desc">不可提现下单时可用</view>
|
||||
</view>
|
||||
<view class="tip" @click="closeRewardPopup('balance')">立即查看</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="reward-item" v-if="reward.coupon_list.length > 0">
|
||||
<view class="head">优惠券奖励</view>
|
||||
<view class="content" v-for="(item, index) in reward.coupon_list" :key="index">
|
||||
<view class="info">
|
||||
<view>
|
||||
<text class="num coupon-name">{{ item.coupon_name }}</text>
|
||||
</view>
|
||||
<view class="desc" v-if="item.at_least > 0">
|
||||
满{{ item.at_least }}{{ item.type == 'discount' ? '打' + item.discount + '折' : '减' + item.money }}
|
||||
</view>
|
||||
<view class="desc" v-else>
|
||||
无门槛，{{ item.type == 'discount' ? '打' + item.discount + '折' : '减' + item.money }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tip" @click="closeRewardPopup('coupon')">立即查看</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="close-btn" @click="closeRewardPopup()"><text class="iconfont icon-close"></text></view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
|
||||
// 注册奖励弹出层
|
||||
export default {
|
||||
name: 'register-reward',
|
||||
components: {
|
||||
uniPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
reward: null,
|
||||
back: ''
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
open(back) {
|
||||
if (back) this.back = back;
|
||||
if (this.addonIsExist.memberregister) {
|
||||
this.getRegisterReward();
|
||||
} else {
|
||||
this.closeRewardPopup();
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.$refs.registerReward.close();
|
||||
},
|
||||
/**
|
||||
* 获取新人礼配置
|
||||
*/
|
||||
getRegisterReward() {
|
||||
this.$api.sendRequest({
|
||||
url: '/memberregister/api/Config/Config',
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
let data = res.data;
|
||||
if (data.is_use == 1 && (data.value.point > 0 || data.value.balance > 0 || data
|
||||
.value.growth > 0 || data.value.coupon_list.length > 0)) {
|
||||
this.reward = data.value;
|
||||
this.$nextTick(() => {
|
||||
if(this.$refs.registerReward) this.$refs.registerReward.open();
|
||||
});
|
||||
}
|
||||
}
|
||||
this.closeRewardPopup();
|
||||
}
|
||||
});
|
||||
},
|
||||
closeRewardPopup(type) {
|
||||
if (this.$refs.registerReward) this.$refs.registerReward.close();
|
||||
switch (type) {
|
||||
case 'point':
|
||||
this.$util.redirectTo('/pages_tool/member/point_detail', {});
|
||||
break;
|
||||
case 'balance':
|
||||
this.$util.redirectTo('/pages_tool/member/balance_detail', {});
|
||||
break;
|
||||
case 'growth':
|
||||
this.$util.redirectTo('/pages_tool/member/level', {});
|
||||
break;
|
||||
case 'coupon':
|
||||
this.$util.redirectTo('/pages_tool/member/coupon', {});
|
||||
break;
|
||||
default:
|
||||
if (this.back) this.$util.redirectTo(decodeURIComponent(this.back), {}, 'redirectTo');
|
||||
else this.$util.redirectTo('/pages/index/index');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.register-box /deep/ .uni-scroll-view {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
.register-box {
|
||||
max-height: 630rpx;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.register-box /deep/.uni-popup__wrapper-box {
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
||||
.reward-popup /deep/.uni-popup__wrapper {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-popup__wrapper-box {
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.iconfont {
|
||||
color: #fff;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.reward-wrap {
|
||||
width: 80vw;
|
||||
height: auto;
|
||||
position: relative;
|
||||
// padding-top: 150rpx;
|
||||
|
||||
&>uni-image,
|
||||
.bg-img {
|
||||
width: 100%;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.bg-img-head {
|
||||
position: absolute;
|
||||
top: -150rpx;
|
||||
width: 100vw;
|
||||
left: -10vw;
|
||||
}
|
||||
|
||||
.bg-img-money {
|
||||
position: absolute;
|
||||
width: 93vw;
|
||||
left: -48rpx;
|
||||
top: 100rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: calc(100% - 2rpx);
|
||||
height: 100%;
|
||||
background-color: #ef3030;
|
||||
margin-top: -80rpx;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom-left-radius: 10rpx;
|
||||
border-bottom-right-radius: 10rpx;
|
||||
|
||||
&>view {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.reward-content {
|
||||
margin: 0 50rpx 0 50rpx;
|
||||
}
|
||||
|
||||
.reward-item {
|
||||
.head {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
padding: 16rpx 26rpx;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: #ff222d;
|
||||
padding: 10rpx 0 10rpx 30rpx;
|
||||
width: 70rpx;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 2rpx;
|
||||
border-left: 2rpx dashed #e5e5e5;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 52rpx;
|
||||
color: #ff222d;
|
||||
font-weight: bolder;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: $font-size-base;
|
||||
margin-left: 10rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 8rpx;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-tag;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
width: calc(100% - 100rpx);
|
||||
bottom: 40rpx;
|
||||
left: 50rpx;
|
||||
|
||||
.btn-img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
58
components/toTop/toTop.vue
Normal file
58
components/toTop/toTop.vue
Normal file
@@ -0,0 +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>
|
||||
105
components/uni-badge/uni-badge.vue
Normal file
105
components/uni-badge/uni-badge.vue
Normal file
@@ -0,0 +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>
|
||||
252
components/uni-count-down/uni-count-down.vue
Normal file
252
components/uni-count-down/uni-count-down.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<view class="uni-countdown">
|
||||
<view
|
||||
v-if="showDay && d > 0"
|
||||
:style="{ borderColor: borderColor, color: color, background: backgroundColor }"
|
||||
class="uni-countdown__number "
|
||||
:class="[backgroundColorClass, colorClass, borderColorClass]"
|
||||
>
|
||||
{{ d }}
|
||||
</view>
|
||||
<view v-if="showDay && d > 0" :style="{ color: splitorColor }" class="uni-countdown__splitor day" :class="splitorColorClass">{{ showColon ? '天' : '天' }}</view>
|
||||
<view
|
||||
:style="{ borderColor: borderColor, color: color, background: backgroundColor }"
|
||||
class="uni-countdown__number "
|
||||
:class="[backgroundColorClass, colorClass, borderColorClass]"
|
||||
>
|
||||
{{ h }}
|
||||
</view>
|
||||
<view :style="{ color: splitorColor }" class="uni-countdown__splitor" :class="splitorColorClass">{{ showColon ? ':' : '时' }}</view>
|
||||
<view
|
||||
:style="{ borderColor: borderColor, color: color, background: backgroundColor }"
|
||||
class="uni-countdown__number "
|
||||
:class="[backgroundColorClass, colorClass, borderColorClass]"
|
||||
>
|
||||
{{ i }}
|
||||
</view>
|
||||
<view :style="{ color: splitorColor }" class="uni-countdown__splitor" :class="splitorColorClass">{{ showColon ? ':' : '分' }}</view>
|
||||
<view
|
||||
:style="{ borderColor: borderColor, color: color, background: backgroundColor }"
|
||||
class="uni-countdown__number "
|
||||
:class="[backgroundColorClass, colorClass, borderColorClass]"
|
||||
>
|
||||
{{ s }}
|
||||
</view>
|
||||
<view v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor" :class="splitorColorClass">秒</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'UniCountDown',
|
||||
props: {
|
||||
showDay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showColon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
backgroundColorClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
borderColorClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
colorClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
splitorColor: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
splitorColorClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
day: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
hour: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
minute: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
second: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
d: '00',
|
||||
h: '00',
|
||||
i: '00',
|
||||
s: '00',
|
||||
leftTime: 0,
|
||||
seconds: 0
|
||||
};
|
||||
},
|
||||
mounted: function(e) {
|
||||
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second);
|
||||
this.countDown();
|
||||
this.timer = setInterval(() => {
|
||||
this.seconds--;
|
||||
if (this.seconds < 0) {
|
||||
this.timeUp();
|
||||
return;
|
||||
}
|
||||
this.countDown();
|
||||
}, 1000);
|
||||
},
|
||||
watch: {
|
||||
day: function(newVal) {
|
||||
this.timeUp();
|
||||
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second);
|
||||
this.countDown();
|
||||
this.timer = setInterval(() => {
|
||||
this.seconds--;
|
||||
if (this.seconds < 0) {
|
||||
this.timeUp();
|
||||
return;
|
||||
}
|
||||
this.countDown();
|
||||
}, 1000);
|
||||
},
|
||||
hour: function(newVal) {
|
||||
this.timeUp();
|
||||
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second);
|
||||
this.countDown();
|
||||
this.timer = setInterval(() => {
|
||||
this.seconds--;
|
||||
if (this.seconds < 0) {
|
||||
this.timeUp();
|
||||
return;
|
||||
}
|
||||
this.countDown();
|
||||
}, 1000);
|
||||
},
|
||||
minute: function(newVal) {
|
||||
this.timeUp();
|
||||
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second);
|
||||
this.countDown();
|
||||
this.timer = setInterval(() => {
|
||||
this.seconds--;
|
||||
if (this.seconds < 0) {
|
||||
this.timeUp();
|
||||
return;
|
||||
}
|
||||
this.countDown();
|
||||
}, 1000);
|
||||
},
|
||||
second: function(newVal) {
|
||||
this.timeUp();
|
||||
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second);
|
||||
this.countDown();
|
||||
this.timer = setInterval(() => {
|
||||
this.seconds--;
|
||||
if (this.seconds < 0) {
|
||||
this.timeUp();
|
||||
return;
|
||||
}
|
||||
this.countDown();
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
methods: {
|
||||
toSeconds(day, hours, minutes, seconds) {
|
||||
day = Number(day);
|
||||
hours = Number(hours);
|
||||
minutes = Number(minutes);
|
||||
seconds = Number(seconds);
|
||||
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds;
|
||||
},
|
||||
timeUp() {
|
||||
clearInterval(this.timer);
|
||||
this.$emit('timeup');
|
||||
},
|
||||
countDown() {
|
||||
let seconds = this.seconds;
|
||||
let [day, hour, minute, second] = [0, 0, 0, 0];
|
||||
if (seconds > 0) {
|
||||
day = Math.floor(seconds / (60 * 60 * 24));
|
||||
hour = Math.floor(seconds / (60 * 60)) - day * 24;
|
||||
minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60;
|
||||
second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
|
||||
} else {
|
||||
this.timeUp();
|
||||
}
|
||||
if (day < 10) {
|
||||
day = '0' + day;
|
||||
}
|
||||
if (hour < 10) {
|
||||
hour = '0' + hour;
|
||||
}
|
||||
if (minute < 10) {
|
||||
minute = '0' + minute;
|
||||
}
|
||||
if (second < 10) {
|
||||
second = '0' + second;
|
||||
}
|
||||
this.d = day;
|
||||
this.h = hour;
|
||||
this.i = minute;
|
||||
this.s = second;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
.uni-countdown {
|
||||
padding: 2rpx 0;
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-countdown__splitor {
|
||||
justify-content: center;
|
||||
line-height: 44rpx;
|
||||
padding: 0 5rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.uni-countdown__splitor.day {
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.uni-countdown__number {
|
||||
line-height: 44rpx;
|
||||
justify-content: center;
|
||||
height: 44rpx;
|
||||
border-radius: 6rpx;
|
||||
margin: 0 5rpx;
|
||||
border: 2rpx solid #000;
|
||||
font-size: 24rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user