xt / xcx-book · Commits

Go to a project

Commit e32074fb0af8ddc5f0ebedc73598ee38fe2f5af3

Authored by pengye
1 parent 3160b78f
build: skipped

优惠券扫码购买页

Inline Side-by-side
Showing 5 changed files with 485 additions and 1 deletions
@@ -97,7 +97,8 @@ @@ -97,7 +97,8 @@
97 "pack/subscribeDrawback", 97 "pack/subscribeDrawback",
98 "pack/vipRecharge", 98 "pack/vipRecharge",
99 "pack/seeRecharge", 99 "pack/seeRecharge",
100 - "pack/receiveCoupon" 100 + "pack/receiveCoupon",
  101 + "pack/buyFreeCoupon"
101 ] 102 ]
102 }, 103 },
103 { 104 {
  1 +// pack-activity/pack/buyFreeCoupon.js
  2 +import util from '../../utils/util';
  3 +import App from '../../utils/api';
  4 +Page({
  5 + /**
  6 + * 页面的初始数据
  7 + */
  8 + data: {
  9 + options: {},
  10 + available: '1', //输入金额够优惠券最低消费1 不够0
  11 + couponArr: [], //所有券列表
  12 + dataStr: Date.now() * 1 / 1000,
  13 + },
  14 + couponModal: '',
  15 + /**
  16 + * 生命周期函数--监听页面加载
  17 + */
  18 + onLoad(options) {
  19 + this.couponModal = this.selectComponent("#couponModal");
  20 + this.couponModal.showModal()
  21 + this.setData({
  22 + ...options
  23 + })
  24 + if (options.sid) {
  25 + this.getSellerDetail(options.sid)
  26 + }
  27 + },
  28 + // 打开优惠券弹框
  29 + showCouponModal() {
  30 + this.couponModal.showModal()
  31 + },
  32 + // 关闭优惠券弹框
  33 + closeCouponModal() {
  34 + this.couponModal.closeModal()
  35 + },
  36 + // 获取店铺名称
  37 + getSellerDetail(sid) {
  38 + App.Customer.GetSellerDetail({
  39 + sid
  40 + }).then(res => {
  41 + let data = res.data;
  42 + this.setData({
  43 + seller: {
  44 + seller_image: data.seller_image,
  45 + sellername: data.sellername
  46 +
  47 + }
  48 + })
  49 + this.getCoupon()
  50 + })
  51 + },
  52 + // 点确认选择
  53 + checkCertificate() {
  54 + console.log('1111111111');
  55 + this.closeCouponModal()
  56 + },
  57 + // 获取所有优惠券列表
  58 + getCoupon() {
  59 + App.Activity.ActivityListByOpenid().then(res => {
  60 + if (res.ret == 200 && res.data && res.data.length > 0) {
  61 + let list = res.data.filter(item => {
  62 + return this.data.dataStr < (item.etime * 1) && item.is_open == '1'
  63 + })
  64 + list.forEach(detail => {
  65 + detail.stringifyUse = detail.use ? JSON.stringify(detail.use) : '';
  66 + detail.exp_date = detail.exp_date ? util.determine(detail.exp_date) : '';
  67 + detail.arule = detail.arule ? util.determine(detail.arule) : '';
  68 + if (detail.exp_date && detail.exp_date.week_data) {
  69 + let noon = this.hasConsecutiveSelect(detail.exp_date.week_data, '1').rArr.join('、')
  70 + let nig = this.hasConsecutiveSelect(detail.exp_date.week_data, '2').rArr.join('、')
  71 + if (noon) noon = '午餐：' + noon
  72 + if (nig) nig = '晚餐：' + nig
  73 + detail.noonText = noon;
  74 + detail.nigText = nig;
  75 + }
  76 + detail.checked = false;
  77 + detail.endDateStr = util.unixtoTime(detail.stime, 'YYYY-MM-DD') + '至' + util.unixtoTime(detail.etime, 'YYYY-MM-DD')
  78 + })
  79 + console.log(list);
  80 +
  81 + let couponArr = list
  82 + this.setData({
  83 + couponArr
  84 + })
  85 + }
  86 + })
  87 + },
  88 + checkboxChange(e) {
  89 + console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  90 + },
  91 + // 输入金额
  92 + bindKeyInput(e) {
  93 + this.setData({
  94 + inputValue: e.detail.value
  95 + })
  96 + },
  97 + // 处理优惠券不可用日期数据
  98 + hasConsecutiveSelect(arr, type) {
  99 + let firstTitle = null;
  100 + let lastTitle = null;
  101 + let rArr = []
  102 + let num = 0
  103 + for (let i = 0; i < arr.length; i++) {
  104 + let str = type == '1' ? arr[i].selectNoon : arr[i].selectNig
  105 + if (str) {
  106 + rArr.push(arr[i].title)
  107 + num++
  108 + if (num == 1) {
  109 + firstTitle = arr[i].title
  110 + }
  111 + if (num >= 5) {
  112 + lastTitle = arr[i].title
  113 + }
  114 + if (num >= 5 && i >= (arr.length - 1)) {
  115 + let fi = rArr.findIndex((item) => {
  116 + return item == firstTitle
  117 + })
  118 + rArr.splice(fi, num, firstTitle + '至' + lastTitle)
  119 + num = 0
  120 + }
  121 + } else {
  122 + if (num < 5) {
  123 + num = 0
  124 + firstTitle = null;
  125 + lastTitle = null;
  126 + } else {
  127 + let fi = rArr.findIndex((item) => {
  128 + return item == firstTitle
  129 + })
  130 + rArr.splice(fi, num, firstTitle + '至' + lastTitle)
  131 + num = 0
  132 + }
  133 + }
  134 + }
  135 + return {
  136 + rArr,
  137 + lastTitle,
  138 + firstTitle
  139 + };
  140 + },
  141 + /**
  142 + * 生命周期函数--监听页面初次渲染完成
  143 + */
  144 + onReady() {
  145 +
  146 + },
  147 +
  148 + /**
  149 + * 生命周期函数--监听页面显示
  150 + */
  151 + onShow() {
  152 +
  153 + },
  154 +
  155 + /**
  156 + * 生命周期函数--监听页面隐藏
  157 + */
  158 + onHide() {
  159 +
  160 + },
  161 +
  162 + /**
  163 + * 生命周期函数--监听页面卸载
  164 + */
  165 + onUnload() {
  166 +
  167 + },
  168 +
  169 + /**
  170 + * 页面相关事件处理函数--监听用户下拉动作
  171 + */
  172 + onPullDownRefresh() {
  173 +
  174 + },
  175 +
  176 + /**
  177 + * 页面上拉触底事件的处理函数
  178 + */
  179 + onReachBottom() {
  180 +
  181 + },
  182 +
  183 + /**
  184 + * 用户点击右上角分享
  185 + */
  186 + onShareAppMessage() {
  187 +
  188 + }
  189 +})
  1 +{
  2 + "navigationBarBackgroundColor": "#fff",
  3 + "navigationBarTextStyle": "black",
  4 + "usingComponents": {
  5 + "nav": "/components/nav/nav",
  6 + "my-modal": "/components/modal/modal"
  7 + }
  8 + }
  1 +<!--pack-activity/pack/buyFreeCoupon.wxml-->
  2 +<nav backgroundColor="#f6f6fd">向商家付款</nav>
  3 +<view class="sellInfo">
  4 + <image src="{{seller.seller_image}}" mode="" />
  5 + <view class="font32r">{{seller.sellername}}</view>
  6 +</view>
  7 +<view class="payBox">
  8 + <view class="font32r">付款金额</view>
  9 + <view class="payView">
  10 + <text>￥</text>
  11 + <input type="digit" auto-focus bindinput="bindKeyInput" />
  12 + </view>
  13 + <view bindtap="showCouponModal" class="couponsBox {{available == '1' ? 'colorOrange':'colorNine'}}">
  14 + <view class="couponLeft">可用优惠券</view>
  15 + <view class="couponRight">
  16 + <text>50元代金券(消费满300元可用) </text>
  17 + <view class="more" style="margin-top: 6rpx;"></view>
  18 + </view>
  19 + </view>
  20 + <view class="couponsWrap">
  21 + <view class="couponLeft">抵扣后</view>
  22 + <view class="couponRight">￥0.00</view>
  23 + </view>
  24 + <view class="payBtn font32r">付款</view>
  25 +</view>
  26 +<my-modal id="couponModal" fadeStyle="slideUp" height="{{couponArr.length > '3' ? '80%' : '60%'}}">
  27 + <view slot="modalName" class="titleModal">
  28 + <view class="couponTotal">所有优惠券</view>
  29 + <view bindtap="checkCertificate" class="btn font32r">确认选择</view>
  30 + </view>
  31 + <view slot="modalContent">
  32 + <view class="couponBox">
  33 + <view wx:for="{{couponArr}}" class="couponItems">
  34 + <view class="itemLeft">
  35 + <view class="priceText" wx:if="{{item.price}}">
  36 + <view class="icons font24r">￥</view><text class="priceText">{{item.price}}</text>
  37 + </view>
  38 + <view class="icons font20r" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
  39 + </view>
  40 + <view class="itemRight">
  41 + <view class="anameText">
  42 + <text class="font40r">{{item.aname}}</text>
  43 + <view class="discountText1 font20r" wx:if="{{item.is_type == '3'}}">{{item.arule.is_accumulation == '1' ? '可' : '不可'}}叠加</view>
  44 + </view>
  45 + <view wx:if="{{item.endDateStr}}" class="font20r bottomTitle">有效日期:<view class="bottom font20r">{{item.endDateStr}}</view>
  46 + </view>
  47 + <view wx:if="{{item.noonText || item.noonText}}" class="font20r bottomTitle">不可使用:<view wx:if="{{item.noonText}}" class="bottom font20r">{{item.noonText}}</view>
  48 + </view>
  49 + <view wx:if="{{item.nigText}}" class="bottom font20r nodate">{{item.nigText}}</view>
  50 + <view wx:if="{{item.exp_date.week_show=='无'}}" class="bottom font20r">无使用时间限制</view>
  51 + </view>
  52 + <checkbox-group bindchange="checkboxChange">
  53 + <checkbox value="{{item.checked}}" data-item="{{item}}" checked="{{item.checked}}" />
  54 + </checkbox-group>
  55 + </view>
  56 + </view>
  57 + </view>
  58 +</my-modal>
  1 +/* pack-activity/pack/buyFreeCoupon.wxss */
  2 +.sellInfo {
  3 + padding: 56rpx 0 40rpx 0;
  4 + display: flex;
  5 + flex-direction: column;
  6 + align-items: center;
  7 + justify-content: center;
  8 + background: #f6f6fd;
  9 +}
  10 +
  11 +.sellInfo image {
  12 + width: 200rpx;
  13 + height: 200rpx;
  14 + margin-bottom: 20rpx;
  15 +}
  16 +
  17 +.payBox {
  18 + padding: 30rpx 40rpx 0 40rpx;
  19 + border-radius: 30rpx 30rpx 0rpx 0rpx;
  20 + background: #ffffff;
  21 +}
  22 +
  23 +.payView {
  24 + font-size: 64rpx;
  25 + display: flex;
  26 + height: 82rpx;
  27 + margin-top: 26rpx;
  28 +}
  29 +
  30 +.payView text {
  31 + color: #000;
  32 +}
  33 +
  34 +.payView input {
  35 + color: #515151;
  36 + height: 82rpx;
  37 + line-height: 82rpx;
  38 +}
  39 +
  40 +.couponsBox {
  41 + display: flex;
  42 + align-items: center;
  43 + justify-content: space-between;
  44 + color: #999;
  45 + margin: 26rpx 0;
  46 +}
  47 +
  48 +.couponsBox .more {
  49 + width: 20rpx;
  50 + height: 32rpx;
  51 + margin-left: 10rpx;
  52 +}
  53 +
  54 +.colorNine {
  55 + color: #999;
  56 +}
  57 +
  58 +.colorOrange {
  59 + color: #ED7B2F;
  60 +}
  61 +
  62 +.colorOrange .more {
  63 + background-image: url('https://qn.colorcun.com/chevronRight.png');
  64 + width: 48rpx;
  65 + height: 48rpx;
  66 + margin-left: 0;
  67 +}
  68 +
  69 +.couponsBox .couponRight {
  70 + display: flex;
  71 + align-items: center;
  72 +}
  73 +
  74 +.couponsWrap {
  75 + color: #515151;
  76 + display: flex;
  77 + align-items: center;
  78 + justify-content: space-between;
  79 +}
  80 +
  81 +.payBtn {
  82 + background: #05C160;
  83 + width: 70%;
  84 + border-radius: 10rpx;
  85 + margin: 0 auto;
  86 + color: #fff;
  87 + text-align: center;
  88 + padding: 20rpx 10rpx;
  89 + margin-top: 40rpx;
  90 +}
  91 +
  92 +.titleModal {
  93 + width: 100%;
  94 + display: flex;
  95 + align-items: center;
  96 + justify-content: space-between;
  97 + border-bottom: 2rpx solid #dbdbdb;
  98 +}
  99 +
  100 +.btn {
  101 + background: #05C160;
  102 + border-radius: 10rpx;
  103 + color: #fff;
  104 + text-align: center;
  105 + padding: 10rpx;
  106 + height: 48rpx;
  107 + line-height: 48rpx;
  108 +}
  109 +
  110 +.couponItems {
  111 + border: 2rpx solid #05c160;
  112 + margin-bottom: 16rpx;
  113 + border-radius: 20rpx;
  114 + display: flex;
  115 + padding: 20rpx 10rpx;
  116 +}
  117 +
  118 +.itemLeft {
  119 + width: 25%;
  120 + display: flex;
  121 + align-items: center;
  122 + flex-direction: column;
  123 + justify-content: center;
  124 + border-right: 2rpx dashed #05C160;
  125 + padding-right: 14rpx;
  126 + margin-right: 14rpx;
  127 +}
  128 +
  129 +.couponModal1 {
  130 + height: 50%;
  131 +}
  132 +
  133 +.couponModal2 {
  134 + height: 80%;
  135 +}
  136 +
  137 +.priceText {
  138 + color: #F6231B;
  139 + font-weight: 500;
  140 + font-size: 56rpx;
  141 + margin-top: 6rpx;
  142 + display: flex;
  143 + align-items: baseline;
  144 + justify-content: center;
  145 + font-family: PingFang SC;
  146 +}
  147 +
  148 +.icons {
  149 + color: #F6231B;
  150 + font-size: 20rpx;
  151 + font-family: PingFang SC;
  152 +}
  153 +
  154 +.anameText {
  155 + display: flex;
  156 + align-items: center;
  157 +}
  158 +
  159 +.anameText {
  160 + margin-bottom: 14rpx;
  161 +}
  162 +
  163 +.anameText text {
  164 + font-family: PingFang SC;
  165 + font-weight: 600;
  166 +}
  167 +
  168 +.discountText1 {
  169 + color: #C36607;
  170 + font-family: PingFang SC;
  171 + font-weight: 500;
  172 + margin-left: 40rpx;
  173 +}
  174 +
  175 +.bottomTitle {
  176 + color: #515151;
  177 + font-family: PingFang SC;
  178 + font-weight: 600;
  179 +}
  180 +
  181 +.bottom {
  182 + font-weight: normal;
  183 +}
  184 +
  185 +.priceText {
  186 + font-size: 56rpx;
  187 +}
  188 +
  189 +.btns {
  190 + margin: 24rpx 20rpx 10rpx 0;
  191 + display: flex;
  192 + justify-content: space-between;
  193 + align-items: baseline;
  194 + flex-direction: column;
  195 +}
  196 +
  197 +.btns text {
  198 + color: #0B0805;
  199 +}
  200 +
  201 +.itemRight {
  202 + flex: 1;
  203 +}
  204 +
  205 +.itemRight view {
  206 + display: flex;
  207 + align-items: center;
  208 + line-height: 36rpx;
  209 +}
  210 +
  211 +.nodate {
  212 + margin-left: 20%;
  213 +}
  214 +
  215 +checkbox {
  216 + height: 50rpx;
  217 + width: 50rpx;
  218 + margin-right: 20rpx;
  219 +}
  220 +
  221 +radio::before,
  222 +checkbox::before {
  223 + height: 50rpx;
  224 + top: 32% !important;
  225 + right: 0 !important;
  226 + width: 50rpx;
  227 + content: '' !important;
  228 +}