微信小程序优惠券的购买和核销的操作流程设计

商家优惠券、套餐券的购买和核销的操作流程设计

一 . 用户端操作流程

二 . 商家端操作流程

做了个演示小程序, 请扫码查看, 问题交流微信：hype522147

首页前端代码和效果, 需要代码的联系我就行

<view style="margin:23.4rpx 23.4rpx 0 23.4rpx;">
    <view style="margin-bottom: 23.4rpx; color: #4b4a49;">
    <block wx:for="{{navlist}}">
      <view  class="nav" bindtap="setcid" data-id="{{item.id}}">
      <image src="{{item.url}}" style="width: 60%;"  mode="widthFix"></image>
      <view>{{item.title}}</view>
      </view>
    </block>
      <view style="clear:both"></view>
    </view>

      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item">
            <image bindtap="openbanner" data-url="{{item.link}}" src="{{item.url}}" style="width: 100%;"  mode="widthFix"></image>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>


<view style="padding:18.72rpx; background-color: #f4f4f4;">
<block wx:for="{{list}}" wx:key="list">
  <view bindtap="openinfo" data-id="{{item.id}}"  style="border-radius: 10px; box-shadow: 2.34rpx 2.34rpx 4.68rpx #f1f1f1; background-color: #ffffff; padding: 18.72rpx; margin-bottom: 18.72rpx; position: relative">
    <view style="width: 163.8rpx;position: absolute;top:18.72rpx;left:18.72rpx;">
      <image src="{{item.store_icon}}" mode="widthFix" style="width: 163.8rpx;" data-id="{{item.id}}"></image>
    </view>
    <view style="padding-left: 198.9rpx;">
      <view>
        <view style="font-weight: 400;">{{item.store_name}}</view>
      </view>

      <view style="clear:both;  padding-top: 15rpx;">
        <view style="float:left; color:#666; font-size: 26rpx;">{{item.address}}</view>
        <view style="float:right;  color: #666; font-size: 26rpx; text-align: right;">
          已售 {{item.sells}}
        </view>
        <view style="clear:both"></view>
      </view>
      <view style="clear:both;  padding-top: 10rpx; ">
        <view style="float:left; color:#666; font-size: 20rpx; background-color: #f5f5f5; padding:4.68rpx 11.7rpx; border-radius: 10rpx;"> {{item.ad}} </view>
        <view style="float:right;  color: #666; font-size: 26rpx; text-align: right;">
          <image src="/img/local2.png" mode="widthFix" style="width: 22rpx;vertical-align: initial; margin-right: 5rpx;"></image>{{item.distrance}}km
        </view>
        <view style="clear:both"></view>
      </view>

      <view style="font-size:28.08rpx; clear:both; margin-top: 18rpx;padding-top: 12rpx; border-top:1px solid #f5f5f5;">
        
        <block wx:for="{{item.clist}}" wx:for-item="cell">
        <view style=" color:rgb(61, 61, 61); margin-bottom: 11.7rpx;">
          <image src="/img/icon_{{cell.lx < 1 ? 'quan':'hui'}}.png" mode="widthFix" style="width: 36rpx;vertical-align: top; margin-right: 8rpx;"></image>
          <block wx:if="{{cell.price > 0}}">
          <text style="color: #d96f38;">¥{{cell.price}}</text>
          <text style="color: #b9b9b9; text-decoration: line-through;margin-left: 11.7rpx;">¥{{cell.price_market}}</text>
          </block>
          <block wx:else>
            <text style="color: #d96f38;">免费</text>
          </block>
          {{cell.title}}
        </view>
      </block>
        
        <view style="clear:both"></view>
      </view>
    </view>
    <view style="clear:both"></view>
  </view>
</block>

</view>

小程序首页图