buyFreeCoupon.wxml 14.9 KB
<!--pack-activity/pack/buyFreeCoupon.wxml-->
<nav hasHome>向商家付款</nav>
<wxs module="utils">
  var formatPrice = function(price, multiple) {
    var result = (price * 1 * multiple).toFixed(2);
    return result;
  }
  module.exports.formatPrice = formatPrice;
</wxs>
<view class="sellInfo">
    <image src="{{seller.seller_image}}" mode="aspectFill" />
    <view class="font32r">{{seller.sellername}}</view>
</view>
<view class="payBox">
    <view class="priceTitle font32r">付款金额</view>
    <view class="payView">
        <text>¥</text>
        <input type="digit" value="{{inputValue}}" bindchange="bindKeyInput" />
    </view>
    <view bindtap="showCouponModal" class="couponsBox colorOrange">

        <view class="couponLeft">选择优惠券</view>
        <view class="couponRight">
            <text wx:if="{{discountPrice && discountPrice!='0.00' && couponSwitch}}">-{{discountPrice}}</text>
            <text class="noUse font28r" wx:if="{{couponArr.length == '0'}}">暂无可用</text>
            <text class="noUse font28r" wx:elif="{{coexist == '0' && !couponSwitch}}">不可用</text>
            <view class="more" style="margin-top: 6rpx;"></view>
        </view>
    </view>
    <block wx:if="{{purePhoneNumber}}">
        <view bindtap="showConsumeModal" class="couponsBox colorOrange">
            <view class="couponLeft">使用消费金抵扣</view>
            <view class="couponRight">
                <text wx:if="{{consumeDiscount && consumeDiscount!='0.00' && consumeSwitch}}">-{{consumeDiscount}}</text>
                <text class="noUse font28r" wx:if="{{consumePrice == '0.00'}}">暂无可用</text>
                <text class="noUse font28r" wx:elif="{{coexist == '0' && !consumeSwitch}}">不可用</text>
                <view class="more" style="margin-top: 6rpx;"></view>
            </view>
        </view>
    </block>
    <block wx:else>
        <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumberFun" class="couponsBox colorOrange">
            <view class="couponLeft font28r">使用消费金抵扣</view>
            <view class="couponRight font28r">
                <view class="more" style="margin-top: 6rpx;"></view>
            </view>
        </button>
    </block>
    <view class="couponsWrap">
        <view class="couponLeft">抵扣后</view>
        <view class="couponRight" wx:if="{{actualPrice && inputValue}}">¥{{actualPrice}}</view>
    </view>
    <view wx:if="{{purePhoneNumber && giveConsumePrice && giveConsumePrice>0}}" class="consumeBox">
        <image class="consumeImg" src="https://qn.colorcun.com/myConsume.png" mode=""/>
        <view class="claim font28r" bind:tap="showGiveConsumeModal">免费领取消费金,当餐可用</view>
    </view>
    <button wx:if="{{!purePhoneNumber && giveConsumePrice && giveConsumePrice>0}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumberFun" class="consumeBox">
        <image class="consumeImg" src="https://qn.colorcun.com/myConsume.png" mode=""/>
        <view class="claim font28r">免费领取消费金,当餐可用</view>
    </button>
</view>
<view class="payBox">
    <view class="balanceLeft balanceLeft1">
        <view>
            <image class="balanceImg" src="https://qn.colorcun.com/wxPayIcon.png" mode=""/>
            <text class="texts font28r">微信支付</text>
        </view>
        <image wx:if="{{payType == '2'}}" bind:tap="checkPay" data-type="2" class="checkIcon" src="https://qn.colorcun.com/checkImg1.png" mode=""/>
        <view wx:else class="check" data-type="2" bind:tap="checkPay"></view>
    </view>
    <view class="balanceBox" wx:if="{{purePhoneNumber}}">
        <view class="balanceLeft">
            <view>
                <image class="balanceImg" src="https://qn.colorcun.com/balanceIcon.png" mode=""/>
                <text class="texts font28r">店铺余额支付</text>
            </view>
            <text class="font24r">总余额¥{{myBalance?myBalance:'0.00'}}</text>
        </view>
        <view class="balanceRight">
            <text wx:if="{{payType == '1' && balancePay && balancePay>0}}">-¥{{balancePay}}</text>
            <image wx:if="{{payType == '1'}}" bind:tap="checkPay" data-type="1" class="checkIcon" src="https://qn.colorcun.com/checkImg1.png" mode=""/>
            <view class="check" wx:else data-type="1" bind:tap="checkPay"></view>
        </view>
    </view>
    <button wx:else open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumberFun" class="balanceBox">
        <view class="balanceLeft">
            <view>
                <image class="balanceImg" src="https://qn.colorcun.com/balanceIcon.png" mode=""/>
                <text class="texts font28r">店铺余额支付</text>
            </view>
            <text class="font24r">总余额¥0.00</text>
        </view>
        <view class="balanceRight">
            <view class="check" ></view>
        </view>
    </button>
    <view class="rechargeBox" wx:if="{{purePhoneNumber}}">
        <view class="rechargeItems" wx:for="{{recharge_data}}" bindtap="checkRechargeData" data-id="{{item.id}}">
            <view class="font24r">充<text>{{item.recharge_money}}</text>元</view>
            <view class="font24r" wx:if="{{item.recharge_list.price && item.recharge_list.price*1 > 0}}">送{{item.recharge_list.price}}元</view>
        </view>
    </view>
    <button wx:else open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumberFun" class="rechargeBox">
        <view class="rechargeItems" wx:for="{{recharge_data}}" data-id="{{item.id}}">
            <view class="font24r">充<text>{{item.recharge_money}}</text>元</view>
            <view class="font24r" wx:if="{{item.recharge_list.price && item.recharge_list.price*1 > 0}}">送{{item.recharge_list.price}}元</view>
        </view>
    </button>
    <view class="rechargeItems rechargeItems1" wx:if="{{purePhoneNumber && multiple && multiple > 0 && rechargeList}}" bindtap="checkRechargeData">
        <view class="font24r">
            <block wx:if="{{multiple && multiple > 0 && !actualPrice}}">
                充<text>{{multiple}}</text>倍 <text>当餐免费</text>
            </block>
            <block wx:else>
                充<text>{{utils.formatPrice(actualPrice, multiple)}}</text>元 <text>当餐免费</text>
            </block>
        </view>
        <view class="font24r bottomItem">{{rechargeList.priceInfo}} {{rechargeList.scoreInfo}} {{rechargeList.certificate}}</view>
    </view>
    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumberFun" class="rechargeItems rechargeItems1" wx:if="{{!purePhoneNumber && multiple && multiple > 0 && rechargeList}}">
        <view class="font24r">
            <block wx:if="{{multiple && multiple > 0 && !actualPrice}}">
                充<text>{{multiple}}</text>倍 <text>当餐免费</text>
            </block>
            <block wx:else>
                充<text>{{actualPrice * 1 * multiple}}</text>元 <text>当餐免费</text>
            </block>
        </view>
        <view class="font24r bottomItem">{{rechargeList.priceInfo}} {{rechargeList.scoreInfo}} {{rechargeList.certificate}}</view>
    </button>
    <!-- <view class="infoAgreement font24r">充值即代表同意<text>《用户协议》</text>及<text>《会员充值协议》</text></view> -->
</view>
<view class="bottomBox"></view>
<view class="payBtnBox">
    <view class="total">合计<text>{{soothPrice?'¥' + soothPrice:''}}</text></view>
    <view class="payBtn font32r" bindtap="confirmPayment">支付</view>
</view>
<toast id="myToast"></toast>
<!-- 使用优惠券弹框 -->
<my-modal id="couponModal" fadeStyle="slideUp" height="{{couponArr.length > '3' ? '80%' : '60%'}}">
    <view slot="modalName" class="titleModal">
        <image bind:tap="closeCouponModal" src="https://qn.colorcun.com/closeImg1.png" mode="aspectFit" />
        <view class="couponTotalText font28r">所有优惠券</view>
        <view bindtap="checkCertificate" class="btn font32r">确认</view>
    </view>
    <view slot="modalContent">
        <view class="infoBox">
            <view class="infoTop">
                <view class="info font28r">本单使用优惠券</view>
                <switch checked="{{couponSwitch}}" bindchange="switchChange" data-type="1" color="#09BB07" class="infoSwitch" />
            </view>
            <view class="infoBottom font24r">注意:消费金与优惠券{{coexist == '1'?'可':'不可'}}同时使用</view>
        </view>
        <scroll-view class="couponBox" scroll-y="true">
            <view wx:for="{{couponArr}}" data-aid="{{item.aid}}" class="couponItems {{item.showCpupon == '0' ? 'couponNo' : ''}}">
                <view class="itemLeft">
                    <view class="priceText" wx:if="{{item.price}}">
                        <view class="icons font24r">¥</view><text class="priceText">{{item.price}}</text>
                    </view>
                    <view class="icons font20r" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
                    <view class="icons font20r" wx:if="{{item.desc=='0'}}">无门槛</view>
                </view>
                <view class="itemRight">
                    <view class="anameText">
                        <view class="anameInfo">
                            <view class="names font40r">{{item.aname}}</view>
                            <view class="discountText1 font20r">{{item.accumulationShow == '1' ? '可' : '不可'}}叠加</view>
                        </view>
                    </view>
                    <view wx:if="{{item.endDateStr}}" class="font20r bottomTitle">有效日期:<view class="bottom font20r">{{item.endDateStr}}</view>
                    </view>
                    <!-- <view class="font20r bottom">{{item.arule.is_same_day=='1'?'领取当日可用':'领取当日不可用'}}</view>
                    <view wx:if="{{item.aexpiration>0}}" class="font20r bottom">领取后{{item.aexpiration}}天内使用</view>
                    <view wx:if="{{item.cdateText}}" class="font20r bottom">领取日期:{{item.cdateText}}</view> -->
                    <view wx:if="{{item.morText || item.noonText || item.nigText}}" class="font20r bottomTitle"><text>不可使用:</text>
                        <view class="textBox">
                            <view wx:if="{{item.morText}}" class="bottom font20r">{{item.morText}}</view>
                            <view wx:if="{{item.noonText}}" class="bottom font20r">{{item.noonText}}</view>
                            <view wx:if="{{item.nigText}}" class="bottom font20r">{{item.nigText}}</view>
                        </view>
                    </view>
                    <view wx:if="{{item.exp_date.week_show=='无'}}" class="bottom font20r">无使用时间限制</view>
                </view>
                <view class="rightBox">
                    <view class="ownNum font20r">拥有{{item.num}}张</view>
                    <view class="numBox">
                        <view class="numBtn {{item.checkedNum == 0 ? 'numBtnDisabled' : ''}}" bindtap="changeCouponNum" data-aid="{{item.aid}}" data-type="minus">-</view>
                        <input class="numText" type="number" value="{{item.checkedNum}}" data-aid="{{item.aid}}" disabled="{{item.showCpupon == '0'}}" bindinput="numInputChange" />
                        <view class="numBtn {{item.canAdd != '1' ? 'numBtnDisabled' : ''}}" bindtap="changeCouponNum" data-aid="{{item.aid}}" data-type="plus">+</view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</my-modal>
<!-- 使用消费金弹框 -->
<my-modal id="consumeModal" fadeStyle="slideUp">
    <view slot="modalName" class="titleModal">
        <image bind:tap="closeConsumeModal" src="https://qn.colorcun.com/closeImg1.png" mode="aspectFit" />
        <view class="couponTotalText font28r">消费金抵扣</view>
        <view bindtap="closeConsumeModal" class="btn font32r">确认</view>
    </view>
    <view slot="modalContent">
        <view class="infoBox1">
            <view class="infoTop">
                <view class="info font28r">本单使用消费金抵扣</view>
                <switch disabled="{{noConfiguration == '0'}}" checked="{{consumeSwitch}}" bindchange="switchChange" data-type="2" color="#09BB07" class="infoSwitch" />
            </view>
            <view class="infoBottom font24r">注意:消费金与优惠券{{coexist == '1'?'可':'不可'}}同时使用</view>
        </view>
        <view class="infoTop1">
            <view class="info font28r">本店消费金余额</view>
            <view class="info font28r">¥{{consumePrice}}</view>
        </view>
        <view class="infoTop1">
            <view class="info font28r">本单可抵扣</view>
            <view class="info font28r">¥{{consumeDiscount?consumeDiscount:'0.00'}}</view>
        </view>
        <view class="infoTop1">
            <view class="info font28r">抵扣后剩余</view>
            <view class="info font28r">¥{{remainingConsume?remainingConsume:consumePrice}}</view>
        </view>
    </view>
</my-modal>
<!-- 赠送优惠券/消费金弹框 -->
<!-- <my-modal id="giveCouponModal" fadeStyle="slideUp" height="240px">
    <view slot="modalName" class="titleModal ">
        <image bindtap="closegiveCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>
        <view class="nameInfo">{{seller.sellername}}</view>
        <view class="couponTotal" wx:if="{{totalPrice && totalPrice>0}}">赠送给您<text>{{totalPrice}}元</text>代金券</view>
        <view class="couponTotal" wx:if="{{totalConsumePrice && totalConsumePrice>0}}">为您返还消费金¥{{totalConsumePrice}}</view>
    </view>
	<view slot="modalContent">
        <view class="couponInfo font24r">您到店扫码支付即可自动使用</view>
        <subscribe ids="{{[2]}}">
            <view wx:if="{{totalPrice && totalPrice>0 && totalConsumePrice && totalConsumePrice>0}}" class="btnBoxs">
                <view bindtap="gotoConsumeList" class="couponBtn1 font36r">查看消费金</view>
                <view bindtap="certificate" class="couponBtn1 font36r">查看优惠券</view>
            </view>
            <view wx:else bindtap="closegiveCouponModal" class="couponBtn font36r">开心收下</view>
        </subscribe>
	</view>
</my-modal> -->
<!-- 新用户/老用户赠送消费金弹框 -->
<my-modal id="giveConsume" fadeStyle="center" height="300px">
    <view slot="modalContent" class="contentBox">
        <image bindtap="closeGiveConsumeModal" class="closeImg1" src="https://qn.colorcun.com/closeImg3.png" mode="" />
        <view class="nameInfo">{{seller.sellername}}</view>
        <view class="couponTotal1 font28r">赠送给您消费金</view>
        <view class="counterText1">
            <view class="font36r">¥</view>
            <scroll-number value="{{giveConsumePrice}}"></scroll-number>
        </view>
        <view class="couponInfo1 font24r">您到店扫码支付即可自动抵扣</view>
        <view bindtap="closeGiveConsumeModal" class="couponBtn1 font36r">开心收下</view>
        <view class="closeBox font28r">{{countDown}} 秒后自动关闭</view>
    </view>
</my-modal>