chore(build): 调整个别组件的位置，减少对主包尺寸的影响
This commit is contained in:
@@ -1,660 +0,0 @@
|
||||
<template>
|
||||
<view class="order-container" :class="{ 'safe-area': isIphoneX }">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="payment-navbar" :style="{ 'padding-top': menuButtonBounding.top + 'px', height: menuButtonBounding.height + 'px' }">
|
||||
<view class="nav-wrap">
|
||||
<text class="iconfont icon-back_light" @click="back"></text>
|
||||
<view class="navbar-title">确认订单</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="payment-navbar-block" :style="{ height: menuButtonBounding.bottom + 'px' }"></view>
|
||||
<!-- #endif -->
|
||||
|
||||
<scroll-view scroll-y="true" class="order-scroll-container">
|
||||
<view class="payment-navbar-block"></view>
|
||||
<template v-if="paymentData">
|
||||
<template v-if="paymentData.is_virtual">
|
||||
<!-- 虚拟商品联系方式 -->
|
||||
<view class="mobile-wrap">
|
||||
<view class="tips color-base-text">
|
||||
<text class="iconfont icongantanhao"></text>
|
||||
购买虚拟类商品需填写手机号，方便商家与您联系
|
||||
</view>
|
||||
<view class="form-group">
|
||||
<text class="icon">
|
||||
<image :src="$util.img('public/uniapp/order/icon-mobile.png')" mode="widthFix"></image>
|
||||
</text>
|
||||
<text class="text">手机号码</text>
|
||||
<input type="number" maxlength="11" placeholder="请输入您的手机号码" placeholder-class="color-tip placeholder" class="input" v-model="orderCreateData.member_address.mobile" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 配送方式 -->
|
||||
<view class="delivery-mode" v-if="goodsData.delivery.express_type.length > 1">
|
||||
<view class="action">
|
||||
<view :class="{ active: item.name == orderCreateData.delivery.delivery_type }" v-for="(item, index) in goodsData.delivery.express_type" :key="index" @click="selectDeliveryType(item)">
|
||||
{{ item.title }}
|
||||
<!-- 外圆角 -->
|
||||
<view class="out-radio"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="address-box" :class="{ 'not-delivery-type': goodsData.delivery.express_type.length <= 1 }" v-if="orderCreateData.delivery.delivery_type == 'express'">
|
||||
<view class="info-wrap" v-if="memberAddress" @click="selectAddress">
|
||||
<view class="content">
|
||||
<text class="name">{{ memberAddress.name ? memberAddress.name : '' }}</text>
|
||||
<text class="mobile">{{ memberAddress.mobile ? memberAddress.mobile : '' }}</text>
|
||||
<view class="desc-wrap">
|
||||
{{ memberAddress.full_address ? memberAddress.full_address : '' }}
|
||||
{{ memberAddress.address ? memberAddress.address : '' }}
|
||||
</view>
|
||||
</view>
|
||||
<text class="cell-more iconfont icon-right"></text>
|
||||
</view>
|
||||
<view class="empty-wrap" v-else @click="selectAddress">
|
||||
<view class="info">请设置收货地址</view>
|
||||
<view class="cell-more">
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
|
||||
</view>
|
||||
|
||||
<view class="address-box" :class="{ 'not-delivery-type': goodsData.delivery.express_type.length <= 1 }" v-if="orderCreateData.delivery.delivery_type == 'local'">
|
||||
<view v-if="localMemberAddress">
|
||||
<block v-if="storeList && Object.keys(storeList).length > 1">
|
||||
<view class="local-delivery-store" v-if="storeInfo" @click="openPopup('deliveryPopup')">
|
||||
<view class="info">
|
||||
由
|
||||
<text class="store-name">{{ storeInfo.store_name }}</text>
|
||||
提供配送
|
||||
</view>
|
||||
<view class="cell-more">
|
||||
<text>点击切换</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="local-delivery-store">
|
||||
<view class="info">
|
||||
<text class="store-name">您的附近没有可配送的门店，请选择其他配送方式</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="info-wrap local" @click="selectAddress">
|
||||
<view class="content">
|
||||
<text class="name">{{ localMemberAddress.name ? localMemberAddress.name : '' }}
|
||||
</text>
|
||||
<text class="mobile">{{ localMemberAddress.mobile ? localMemberAddress.mobile : '' }}
|
||||
</text>
|
||||
<view class="desc-wrap">
|
||||
{{ localMemberAddress.full_address ? localMemberAddress.full_address : '' }}
|
||||
{{ localMemberAddress.address ? localMemberAddress.address : '' }}
|
||||
</view>
|
||||
</view>
|
||||
<text class="cell-more iconfont icon-right"></text>
|
||||
</view>
|
||||
<view class="local-box" v-if="calculateGoodsData.config.local && calculateGoodsData.delivery.local.info.time_is_open == 1">
|
||||
<view class="pick-block" @click="localtime('')">
|
||||
<view class="title font-size-base">送达时间</view>
|
||||
<view class="time-picker">
|
||||
<text :class="{ 'color-tip': !deliveryTime }">{{ deliveryTime ? deliveryTime : '请选择送达时间' }}</text>
|
||||
<text class="iconfont icon-right cell-more"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty-wrap" v-else @click="selectAddress">
|
||||
<view class="info">请设置收货地址</view>
|
||||
<view class="cell-more">
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
|
||||
</view>
|
||||
|
||||
<!-- 门店信息 -->
|
||||
<view class="store-box" :class="{ 'not-delivery-type': goodsData.delivery.express_type.length <= 1 }" v-if="orderCreateData.delivery.delivery_type == 'store'">
|
||||
<block v-if="storeInfo">
|
||||
<view @click="openPopup('deliveryPopup')" class="store-info">
|
||||
<view class="store-address-info">
|
||||
<view class="info-wrap">
|
||||
<view class="title">
|
||||
<text>{{ storeInfo.store_name }}</text>
|
||||
</view>
|
||||
<view class="store-detail">
|
||||
<view v-if="storeInfo.open_date">营业时间：{{ storeInfo.open_date }}</view>
|
||||
<view class="address">{{ storeInfo.full_address }} {{ storeInfo.address }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell-more iconfont icon-right" v-if="storeList && Object.keys(storeList).length > 1"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mobile-wrap store-mobile" v-if="orderCreateData.member_address">
|
||||
<view class="form-group">
|
||||
<text class="text">姓名</text>
|
||||
<input type="text" placeholder-class="color-tip placeholder" class="input" disabled v-model="orderCreateData.member_address.name" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="mobile-wrap store-mobile" v-if="orderCreateData.member_address">
|
||||
<view class="form-group">
|
||||
<text class="text">预留手机</text>
|
||||
<input type="number" maxlength="11" placeholder="请输入您的手机号码" placeholder-class="color-tip placeholder" class="input" v-model="orderCreateData.member_address.mobile" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="store-time" @click="storetime('')">
|
||||
<view class="left">提货时间</view>
|
||||
<view class="right">
|
||||
{{ deliveryTime }}
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view v-else class="empty">当前无自提门店，请选择其它配送方式</view>
|
||||
<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 店铺 -->
|
||||
|
||||
<view class="site-wrap order-goods" v-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" :key="index" class="card-item" @click="selectGoodsCard.click(item.item_id)">
|
||||
<view class="content">
|
||||
<view class="title">{{ isEnEnv ? item.en_goods_name : 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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,465 +0,0 @@
|
||||
// 商品详情业务
|
||||
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
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,443 +0,0 @@
|
||||
<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 scroll from '@/common/js/scroll-view.js';
|
||||
import detail from './detail.js';
|
||||
|
||||
export default {
|
||||
name: 'goods-detail-view',
|
||||
props: {
|
||||
goodsSkuDetail: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [scroll, detail]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/common/css/goods_detail.scss';
|
||||
</style>
|
||||
<style scoped></style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,234 +0,0 @@
|
||||
<template>
|
||||
<view class="code-box">
|
||||
<view class="flex-box">
|
||||
<input :value="inputValue" type="number" :focus="autoFocus" :maxlength="maxlength" class="hide-input" @input="getVal" />
|
||||
<block v-for="(item, index) in ranges" :key="index">
|
||||
<view :class="['item', { active: codeIndex === item, middle: type === 'middle', bottom: type === 'bottom', box: type === 'box' }]">
|
||||
<view class="line" v-if="type !== 'middle'"></view>
|
||||
<view v-if="type === 'middle' && codeIndex <= item" class="bottom-line"></view>
|
||||
<block v-if="isPwd && codeArr.length >= item"><text class="dot">●</text></block>
|
||||
<block v-else>
|
||||
<text class="number">{{ codeArr[index] ? codeArr[index] : '' }}</text>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 支持使用 v-model
|
||||
// 支持使用refs
|
||||
export default {
|
||||
name: 'mypOneInput',
|
||||
props: {
|
||||
// 支持外部提供，支持使用v-model
|
||||
// 支持通过value来做清空
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 4/6
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: 4
|
||||
},
|
||||
autoFocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isPwd: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// middle-middle line, bottom-bottom line, box-square box
|
||||
type: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
maxlength: {
|
||||
immediate: true,
|
||||
handler: function(newV) {
|
||||
if (newV === 6) {
|
||||
this.ranges = [1, 2, 3, 4, 5, 6];
|
||||
} else {
|
||||
this.ranges = [1, 2, 3, 4];
|
||||
}
|
||||
}
|
||||
},
|
||||
value: {
|
||||
immediate: true,
|
||||
handler: function(newV) {
|
||||
if (newV !== this.inputValue) {
|
||||
this.inputValue = newV;
|
||||
this.toMakeAndCheck(newV);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: '',
|
||||
codeIndex: 1,
|
||||
codeArr: [],
|
||||
ranges: [1, 2, 3, 4]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getVal(e) {
|
||||
const val = e.detail.value;
|
||||
this.inputValue = val;
|
||||
this.$emit('input', val);
|
||||
this.toMakeAndCheck(val);
|
||||
},
|
||||
toMakeAndCheck(val) {
|
||||
const arr = val.split('');
|
||||
this.codeIndex = arr.length + 1;
|
||||
this.codeArr = arr;
|
||||
if (this.codeIndex > Number(this.maxlength)) {
|
||||
this.$emit('finish', this.codeArr.join(''));
|
||||
}
|
||||
},
|
||||
// refs 时不再提供 v-model 支持
|
||||
// 支持使用refs来设置value
|
||||
// 没有提供数据保护与检测，自己在外面对数据进行检测保护
|
||||
set(val) {
|
||||
this.inputValue = val;
|
||||
this.toMakeAndCheck(val);
|
||||
},
|
||||
// 支持使用refs来清空
|
||||
clear() {
|
||||
this.inputValue = '';
|
||||
this.codeArr = [];
|
||||
this.codeIndex = 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes twinkling {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.code-box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flex-box .hide-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
z-index: 9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.flex-box .item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
margin-right: 18rpx;
|
||||
font-size: 70rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
|
||||
.flex-box .item::before {
|
||||
content: '';
|
||||
padding-top: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flex-box .item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.flex-box .middle {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.flex-box .box {
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #cccccc;
|
||||
border-width: 2rpx 0 2rpx 2rpx;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.flex-box .box:first-of-type {
|
||||
border-top-left-radius: 8rpx;
|
||||
border-bottom-left-radius: 8rpx;
|
||||
}
|
||||
|
||||
.flex-box .box:last-child {
|
||||
border-right: 2rpx solid #cccccc;
|
||||
border-top-right-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx;
|
||||
}
|
||||
|
||||
.flex-box .bottom {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2rpx solid #ddd;
|
||||
}
|
||||
|
||||
.flex-box .active {
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.flex-box .active .line {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flex-box .line {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 2rpx;
|
||||
height: 40rpx;
|
||||
background: #333333;
|
||||
animation: twinkling 1s infinite ease;
|
||||
}
|
||||
|
||||
.flex-box .dot,
|
||||
.flex-box .number {
|
||||
line-height: 40rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.flex-box .bottom-line {
|
||||
height: 8rpx;
|
||||
background: #000000;
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
border-radius: 4rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
@@ -1,332 +0,0 @@
|
||||
<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>
|
||||
|
||||
// 注册奖励弹出层
|
||||
export default {
|
||||
name: 'ns-birthday-gift',
|
||||
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>
|
||||
@@ -1,125 +0,0 @@
|
||||
<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>
|
||||
@@ -1,345 +0,0 @@
|
||||
<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>
|
||||
|
||||
export default {
|
||||
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>
|
||||
@@ -1,928 +0,0 @@
|
||||
<template>
|
||||
<view class="form-wrap form-component">
|
||||
<view v-for="(item, index) in formData" :key="index">
|
||||
<!-- 文本输入框 -->
|
||||
<view v-if="item.controller == 'Text'" 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">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="item.value.placeholder"
|
||||
placeholder-class="placeholder color-tip"
|
||||
v-model="item.val"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 多行文本输入框 -->
|
||||
<view v-if="item.controller == 'Textarea'" class="order-wrap">
|
||||
<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>
|
||||
|
||||
<!-- 下拉选择器 -->
|
||||
<view v-if="item.controller == 'Select'" class="order-wrap">
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="item.value.options"
|
||||
@change="pickerChange($event, index)"
|
||||
>
|
||||
<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>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 复选框 -->
|
||||
<view v-if="item.controller == 'Checkbox'" 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 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"></checkbox>
|
||||
<view class="checkbox">
|
||||
<text
|
||||
:class="[
|
||||
'iconfont',
|
||||
!v.checked ? 'icon-fuxuankuang2' : '',
|
||||
v.checked ? 'icon-fuxuankuang1 color-base-text' : ''
|
||||
]"
|
||||
></text>
|
||||
{{ v.value }}
|
||||
</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 单选框 -->
|
||||
<view v-if="item.controller == 'Radio'" 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 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"></radio>
|
||||
<view class="radio-box">
|
||||
<text
|
||||
:class="[
|
||||
'iconfont',
|
||||
item.val != v.value ? 'icon-yuan_checkbox' : '',
|
||||
item.val == v.value ? 'icon-yuan_checked color-base-text' : ''
|
||||
]"
|
||||
></text>
|
||||
{{ v.value }}
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<view v-if="item.controller == 'Img'" class="order-wrap">
|
||||
<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 v-for="(v, k) in item.img_lists" :key="k" class="img-box" @tap="uploadImg(index)">
|
||||
<image :src="$util.img(v)" mode="aspectFill"></image>
|
||||
<text class="iconfont icon-guanbi" @tap.stop="delImg(k, index)"></text>
|
||||
</view>
|
||||
<view class="img-box" @tap="addImg(index)">
|
||||
<text class="iconfont icon-add1"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期选择器 -->
|
||||
<view v-if="item.controller == 'Date'" 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 box-flex">
|
||||
<picker
|
||||
mode="date"
|
||||
:value="item.val"
|
||||
@change="bindDateChange($event, index)"
|
||||
>
|
||||
<view :class="['uni-input', !item.val ? 'color-tip' : '']">
|
||||
{{ item.val ? item.val : item.value.placeholder }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期范围选择器 -->
|
||||
<view v-if="item.controller == 'Datelimit'" class="order-wrap">
|
||||
<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', !item.start_date ? 'color-tip' : '']">
|
||||
{{ 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', !item.end_date ? 'color-tip' : '']">
|
||||
{{ item.end_date ? item.end_date : item.value.placeholder_end }}
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 时间选择器 -->
|
||||
<view v-if="item.controller == 'Time'" 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 box-flex">
|
||||
<picker
|
||||
mode="time"
|
||||
:value="item.val"
|
||||
@change="bindTimeChange($event, index)"
|
||||
>
|
||||
<view :class="['uni-input', !item.val ? 'color-tip' : '']">
|
||||
{{ item.val ? item.val : item.value.placeholder }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 时间范围选择器 -->
|
||||
<view v-if="item.controller == 'Timelimit'" class="order-wrap">
|
||||
<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', !item.start_time ? 'color-tip' : '']">
|
||||
{{ 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', !item.end_time ? 'color-tip' : '']">
|
||||
{{ item.end_time ? item.end_time : item.value.placeholder_end }}
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 城市选择器 -->
|
||||
<view v-if="item.controller == 'City'" class="order-wrap">
|
||||
<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
|
||||
:defaultRegions="item.default_regions"
|
||||
:selectArr="item.select_arr"
|
||||
@getRegions="handleGetRegions($event, index)"
|
||||
>
|
||||
<view :class="['select-address', !item.val ? 'empty' : '', !item.val ? 'color-tip' : '']">
|
||||
{{ item.val ? item.val : (item.select_arr == '2' ? '请选择省市' : '请选择省市区/县') }}
|
||||
</view>
|
||||
</pick-regions>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-form',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => ({})
|
||||
},
|
||||
customAttr: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: this.data
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setFormData();
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler() {
|
||||
this.setFormData();
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
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((option, index) => {
|
||||
let optionItem = {};
|
||||
optionItem.value = option;
|
||||
optionItem.checked = false;
|
||||
|
||||
if (item.controller == 'Radio') {
|
||||
if ((!item.val && index == 0) || (item.val && item.val == option)) {
|
||||
optionItem.checked = true;
|
||||
item.val = option;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.controller == 'Checkbox' && item.val) {
|
||||
let valArray = item.val.split(',');
|
||||
optionItem.checked = valArray.indexOf(option) != -1;
|
||||
}
|
||||
|
||||
item.option_lists.push(optionItem);
|
||||
});
|
||||
}
|
||||
|
||||
// 处理图片列表
|
||||
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 dateArray = item.val.split(' - ');
|
||||
item.start_date = dateArray[0];
|
||||
item.end_date = dateArray[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 timeArray = item.val.split(' - ');
|
||||
item.start_time = timeArray[0];
|
||||
item.end_time = timeArray[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() {
|
||||
for (let i = 0; i < this.formData.length; i++) {
|
||||
let item = this.formData[i];
|
||||
|
||||
// 文本验证
|
||||
if (item.controller == 'Text') {
|
||||
if (item.value.required && !item.val) {
|
||||
this.$util.showToast({ title: '请输入' + item.value.title });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (item.name == 'ID_CARD' && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(item.val)) {
|
||||
if (!item.value.required) {
|
||||
this.$util.showToast({ title: '身份证输入不合法' });
|
||||
return false;
|
||||
}
|
||||
if (item.val != '') {
|
||||
this.$util.showToast({ title: '身份证输入不合法' });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.name == 'MOBILE' && !this.$util.verifyMobile(item.val)) {
|
||||
if (!item.value.required) {
|
||||
this.$util.showToast({ title: '手机号输入不合法' });
|
||||
return false;
|
||||
}
|
||||
if (item.val != '') {
|
||||
this.$util.showToast({ title: '手机号输入不合法' });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 多行文本验证
|
||||
if (item.controller == 'Textarea' && item.value.required && !item.val) {
|
||||
this.$util.showToast({ title: '请输入' + item.value.title });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 下拉选择验证
|
||||
if (item.controller == 'Select' && item.value.required && !item.val) {
|
||||
this.$util.showToast({ title: '请选择' + item.value.title });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 复选框验证
|
||||
if (item.controller == 'Checkbox' && item.value.required && !item.val) {
|
||||
this.$util.showToast({ title: '请至少选择一个' + item.value.title });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 图片上传验证
|
||||
if (item.controller == 'Img' && item.value.required && !item.val) {
|
||||
this.$util.showToast({ title: '请至少上传一张' + item.value.title });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 日期验证
|
||||
if (item.controller == 'Date' && item.value.required && !item.val) {
|
||||
this.$util.showToast({ title: '请选择' + item.value.title });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 日期范围验证
|
||||
if (item.controller == 'Datelimit') {
|
||||
if (item.value.required && !item.val) {
|
||||
this.$util.showToast({ title: '请选择' + item.value.title });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.$util.timeTurnTimeStamp(item.start_date) > this.$util.timeTurnTimeStamp(item.end_date)) {
|
||||
this.$util.showToast({ title: '结束日期不能小于开始日期' });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 时间验证
|
||||
if (item.controller == 'Time' && item.value.required && !item.val) {
|
||||
this.$util.showToast({ title: '请选择' + item.value.title });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 时间范围验证
|
||||
if (item.controller == 'Timelimit') {
|
||||
if (item.value.required && !item.val) {
|
||||
this.$util.showToast({ title: '请选择' + item.value.title });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (item.start_time >= item.end_time) {
|
||||
this.$util.showToast({ title: '结束时间必须大于开始时间' });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 城市选择验证
|
||||
if (item.controller == 'City' && item.value.required && !item.val) {
|
||||
this.$util.showToast({ title: '请选择' + item.value.title });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return this.formData;
|
||||
},
|
||||
|
||||
// 下拉选择改变
|
||||
pickerChange(event, index) {
|
||||
this.formData[index].val = this.data[index].value.options[event.detail.value];
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 复选框改变
|
||||
checkboxChange(event, index) {
|
||||
this.formData[index].val = event.detail.value.toString();
|
||||
this.formData[index].option_lists.forEach((option) => {
|
||||
option.checked = event.detail.value.indexOf(option.value) != -1;
|
||||
});
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 单选框改变
|
||||
radioChange(event, index) {
|
||||
this.formData[index].val = event.detail.value;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
uploadImg(index) {
|
||||
let self = this;
|
||||
this.$util.upload(Number(this.formData[index].value.max_count), { path: 'evaluateimg' }, function(res) {
|
||||
if (res.length > 0) {
|
||||
res.forEach(function(img) {
|
||||
if (self.formData[index].img_lists.length >= Number(self.formData[index].value.max_count)) {
|
||||
self.$util.showToast({ title: '最多上传' + self.formData[index].value.max_count + '张图片' });
|
||||
return false;
|
||||
}
|
||||
self.formData[index].img_lists.push(img);
|
||||
});
|
||||
self.formData[index].val = self.formData[index].img_lists.toString();
|
||||
self.$forceUpdate();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 添加图片
|
||||
addImg(index) {
|
||||
let self = this;
|
||||
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' }, function(res) {
|
||||
if (res.length > 0) {
|
||||
res.forEach(function(img) {
|
||||
self.formData[index].img_lists.push(img);
|
||||
});
|
||||
self.formData[index].val = self.formData[index].img_lists.toString();
|
||||
self.$forceUpdate();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 删除图片
|
||||
delImg(imgIndex, formIndex) {
|
||||
this.formData[formIndex].img_lists.splice(imgIndex, 1);
|
||||
this.formData[formIndex].val = this.formData[formIndex].img_lists.toString();
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 获取当前日期
|
||||
getDate() {
|
||||
let 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() {
|
||||
let date = new Date();
|
||||
let hours = date.getHours();
|
||||
let minutes = date.getMinutes();
|
||||
hours = hours > 9 ? hours : '0' + hours;
|
||||
minutes = minutes > 9 ? minutes : '0' + minutes;
|
||||
return `${hours}:${minutes}`;
|
||||
},
|
||||
|
||||
// 日期改变
|
||||
bindDateChange(event, index) {
|
||||
this.formData[index].val = event.detail.value;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 开始日期改变
|
||||
bindStartDateChange(event, index) {
|
||||
this.$set(this.formData[index], 'start_date', event.detail.value);
|
||||
this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 结束日期改变
|
||||
bindEndDateChange(event, index) {
|
||||
this.$set(this.formData[index], 'end_date', event.detail.value);
|
||||
this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 时间改变
|
||||
bindTimeChange(event, index) {
|
||||
this.formData[index].val = event.detail.value;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 开始时间改变
|
||||
bindStartTimeChange(event, index) {
|
||||
this.formData[index].start_time = event.detail.value;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 结束时间改变
|
||||
bindEndTimeChange(event, index) {
|
||||
this.formData[index].end_time = event.detail.value;
|
||||
this.formData[index].val = this.formData[index].start_time + ' - ' + this.formData[index].end_time;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 处理地区选择
|
||||
handleGetRegions(regions, index) {
|
||||
this.formData[index].val = '';
|
||||
this.formData[index].val += regions[0] != undefined ? regions[0].label : '';
|
||||
this.formData[index].val += regions[1] != undefined ? '-' + regions[1].label : '';
|
||||
this.formData[index].val += regions[2] != undefined ? '-' + regions[2].label : '';
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-wrap {
|
||||
padding: 20rpx 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.order-cell {
|
||||
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: 28rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 160rpx;
|
||||
margin-bottom: 10rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.tit {
|
||||
text-align: left;
|
||||
font-size: 32rpx;
|
||||
color: #888;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
font-size: 28rpx;
|
||||
margin-left: 4rpx;
|
||||
width: 14rpx;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
flex: 1;
|
||||
padding: 0 0rpx;
|
||||
line-height: inherit;
|
||||
text-align: left;
|
||||
|
||||
input {
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
height: 70rpx;
|
||||
border: solid 2rpx #eee;
|
||||
line-height: 70rpx;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-size: 28rpx;
|
||||
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 #eee;
|
||||
border-radius: 4rpx;
|
||||
position: relative;
|
||||
|
||||
.icon-guanbi {
|
||||
position: absolute;
|
||||
top: -14rpx;
|
||||
right: -14rpx;
|
||||
display: inline-block;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.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: 700;
|
||||
}
|
||||
|
||||
.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: #909399;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.box-flex {
|
||||
picker {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
line-height: 1;
|
||||
position: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,269 +0,0 @@
|
||||
<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>
|
||||
@@ -1,6 +0,0 @@
|
||||
export function getClientRect(selector, component) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let query = component ? uni.createSelectorQuery().in(component) : uni.createSelectorQuery();
|
||||
return query.select(selector).boundingClientRect(resolve).exec()
|
||||
})
|
||||
}
|
||||
@@ -1,218 +0,0 @@
|
||||
<template>
|
||||
<view class="rate-box" :class="[{ animation }, containerClass]" @touchmove="ontouchmove" @touchend="touchMoving = false">
|
||||
<view
|
||||
v-for="(val, i) in list"
|
||||
:key="val"
|
||||
class="rate"
|
||||
:style="{ fontSize, paddingLeft: i !== 0 ? rateMargin : 0, paddingRight: i < list.length - 1 ? rateMargin : 0 }"
|
||||
:class="[
|
||||
{ scale: !disabled && val <= rateValue && animation && touchMoving, 'color-base-text': val <= rateValue, defaultColor: val > rateValue },
|
||||
`rate-${i}`,
|
||||
rateClass
|
||||
]"
|
||||
:data-val="val"
|
||||
@click="onItemClick"
|
||||
>
|
||||
<text class="iconfont icon-star"></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getClientRect } from './common';
|
||||
|
||||
export default {
|
||||
name: 'sx-rate',
|
||||
props: {
|
||||
// 当前值
|
||||
value: {
|
||||
type: [Number, String]
|
||||
},
|
||||
// 最大星星数量
|
||||
max: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
// 禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 动画效果
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 默认星星颜色
|
||||
defaultColor: {
|
||||
type: String,
|
||||
default: '#ccc'
|
||||
},
|
||||
// 滑选后星星颜色
|
||||
activeColor: {
|
||||
type: String
|
||||
// default: '#FFB700'
|
||||
},
|
||||
// 星星大小
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: 'inherit'
|
||||
},
|
||||
// 星星间距
|
||||
margin: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 自定义类名-容器
|
||||
containerClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 自定义类名-星星
|
||||
rateClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
index: {
|
||||
// 如果页面中存在多个该组件，通过该属性区分
|
||||
type: [Number, String]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rateValue: 0,
|
||||
touchMoving: false,
|
||||
startX: [],
|
||||
startW: 30
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
list() {
|
||||
return [...new Array(this.max)].map((_, i) => i + 1);
|
||||
},
|
||||
rateMargin() {
|
||||
let margin = this.margin;
|
||||
if (!margin) return 0;
|
||||
|
||||
switch (typeof margin) {
|
||||
case 'number':
|
||||
margin = margin * 2 + 'rpx';
|
||||
case 'string':
|
||||
break;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
|
||||
let reg = /^(\d+)([^\d]*)/;
|
||||
let result = reg.exec(margin);
|
||||
if (!result) return 0;
|
||||
|
||||
let [_, num, unit] = result;
|
||||
return num / 2 + unit;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.rateValue = val;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 计算星星位置
|
||||
async initStartX() {
|
||||
let { max } = this;
|
||||
this.startX = [];
|
||||
|
||||
for (let i = 0; i < max; i++) {
|
||||
let selector = `.rate-${i}`;
|
||||
let { left, width } = await getClientRect(selector, this);
|
||||
|
||||
this.startX.push(left);
|
||||
this.startW = width;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 手指滑动事件回调
|
||||
* https://github.com/sunxi1997/uni-app-sx-rate/pull/1
|
||||
* 原本的触摸处理在自定了样式后可能会出现bug, 已解决
|
||||
*/
|
||||
async ontouchmove(e) {
|
||||
if (!this.touchMoving) {
|
||||
this.touchMoving = true;
|
||||
// 开始手指滑动时重新计算星星位置,防止星星位置意外变化
|
||||
await this.initStartX();
|
||||
}
|
||||
|
||||
let { startX, startW, max } = this;
|
||||
let { touches } = e;
|
||||
|
||||
// 触摸焦点停留的位置
|
||||
let { pageX } = touches[touches.length - 1];
|
||||
|
||||
// 超出最左边, 0 星
|
||||
if (pageX <= startX[0]) return this.toggle(0);
|
||||
// 刚好在第一颗星
|
||||
else if (pageX <= startX[0] + startW) return this.toggle(1);
|
||||
// 超出最右边, 最大星
|
||||
else if (pageX >= startX[max - 1]) return this.toggle(max);
|
||||
|
||||
//计算星星停留的位置
|
||||
let startXHash = startX.concat(pageX).sort((a, b) => a - b);
|
||||
this.toggle(startXHash.indexOf(pageX));
|
||||
},
|
||||
// 点击回调
|
||||
onItemClick(e) {
|
||||
let { val } = e.currentTarget.dataset;
|
||||
this.toggle(val);
|
||||
},
|
||||
// 修改值
|
||||
toggle(val) {
|
||||
let { disabled } = this;
|
||||
if (disabled) return;
|
||||
if (this.rateValue !== val) {
|
||||
this.rateValue = val;
|
||||
this.$emit('update:value', val);
|
||||
let data = {
|
||||
index: this.index,
|
||||
value: val
|
||||
};
|
||||
this.$emit('change', data);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './sx-rate/iconfont.css';
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.rate-box {
|
||||
min-height: 1.4em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rate {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 1.2em;
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.rate.scale {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.defaultColor {
|
||||
color: #ccc !important;
|
||||
}
|
||||
.activeColor {
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +0,0 @@
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('~@/components/sx-rate/sx-rate/iconfont.eot?t=1574760464482'); /* IE9 */
|
||||
src: url('~@/components/sx-rate/sx-rate/iconfont.eot?t=1574760464482#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK8AAsAAAAABnAAAAJwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp8gQgBNgIkAwgLBgAEIAWEbQcuG6wFyA4lTcHACOEZBUg8fL/2O3f3fTHEkoh28SSayCSxkkgQG6Uz3UvYITu9Qr5K0Vh6Ij6f+8CXKzVBHDvWa6d0lSfK57mc3gQ6kGt8oBz3ojUG9QLqxYEU6B4YRVYqecPYBS7hMYG6QWF0dlOycoGxxFoViFuxkALGuYAksXRVKNccTOJdSTV7zbSAt/D78Y8XxmRKOavq5CZZAOK+7u2svLVode0TggR0vIQc84BEXNQmjugJxumpJ/SNAvsqD77ui8K3i71aBPvrrNIm6IfSe5K58ltNZ3BbU40Blkf9OmKsIW/Un1qddc4dcSma3ArIX7PPXdlxK5l2zJ+aD6TXnQqmu330wqpeWkYN/OnNm/0trU+YvqNR4UN99f+x/tApIFTfR7u39X4gKPnb9pOX5RAQB6DYyc/zOKCD4OUp6KiiPeqnapbAp56NdegrdhLo5wKq+3UG/0fWcyDpCsuWJVVWO5oZO29bXR0FwJ4uV2ONvTeTCVW9I1wVAylyVeNkYudR0rCOsqoN1M1JPd7QDdMTqYZZXQChwwYybT6Q63BIJvYSJX1eUNYReqi7CrsLGyZDbJqIEUWQAPLroJhWKhjHQUyj8mwkrJJROKsI+XyENeIw5LI4xXQqUiA8xxZNtZBHCAMZrJTDFPAcksmUUIWVEkQTlogQVQSbzdS9iUUr5cDUDgyhEIgAxFcHEqMpKTD+eMK09PlsiFAVGQpu6atJ5kMwDfHsEBcLpweZqlX06ruXVzSqCfEQBANiYEpyUAqYh8jIKEGq+nkSCI1gEY2IqURg28OYvlrW+nr5152AOsuUhV2fSy+EwgAAAA==') format('woff2'),
|
||||
url('~@/components/sx-rate/sx-rate/iconfont.woff?t=1574760464482') format('woff'),
|
||||
url('~@/components/sx-rate/sx-rate/iconfont.ttf?t=1574760464482') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||
url('~@/components/sx-rate/sx-rate/iconfont.svg?t=1574760464482#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: inherit;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-star:before {
|
||||
content: "\e6e3";
|
||||
}
|
||||
|
||||
Binary file not shown.
@@ -1,29 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<!--
|
||||
2013-9-30: Created.
|
||||
-->
|
||||
<svg>
|
||||
<metadata>
|
||||
Created by iconfont
|
||||
</metadata>
|
||||
<defs>
|
||||
|
||||
<font id="iconfont" horiz-adv-x="1024" >
|
||||
<font-face
|
||||
font-family="iconfont"
|
||||
font-weight="500"
|
||||
font-stretch="normal"
|
||||
units-per-em="1024"
|
||||
ascent="896"
|
||||
descent="-128"
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="star" unicode="" d="M544.256 812.032l117.248-237.568c5.12-10.752 15.36-17.92 27.136-19.456l262.144-37.888c29.696-4.096 41.472-40.448 19.968-61.44l-189.44-184.832c-8.704-8.192-12.288-19.968-10.24-31.744l44.544-261.12c5.12-29.184-25.6-51.712-52.224-37.888l-234.496 123.392c-10.24 5.632-23.04 5.632-33.28 0L261.12-59.904c-26.112-13.824-57.344 8.704-52.224 37.888l44.544 261.12c2.048 11.776-2.048 23.552-10.24 31.744L53.76 455.68C32.256 476.16 44.032 512.512 73.728 517.12l262.144 37.888c11.776 1.536 22.016 9.216 27.136 19.456l117.248 237.568C493.056 838.656 530.944 838.656 544.256 812.032z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
||||
</font>
|
||||
</defs></svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user