seahorsesShop_miniapp/packageMemberIntegral/components/raffleWheel/raffleWheel.wxml

<!-- 抽奖转盘组件 -->
<!--components/raffleWheel/raffleWheel.wxml-->
<view class="canvas-container">
  <image src="../../images/icon/zhuanpan@2x.png" class="pan-bg" mode="widthFix"></image>
  <view animation="{{animationData}}" class="gb-wheel-content" style='width:{{size+2}}rpx;height:{{size}}rpx;'>
    <!-- 扇形颜色背景 当选项长度等于2或者3时做了特殊处理 -->
    <view class="canvas-list">
      <view class="canvas-item2" wx:for="{{awardsConfig.awards}}" wx:key="key" style="transform: rotate({{item.item2Deg}});background-color:{{awardsConfig.awards.length==2?item.color:''}};opacity:{{awardsConfig.awards.length==2?item.opacity:awardsConfig.awards.length==3?item.opacity:''}};width:{{size}}rpx;height:{{size/2-2}}rpx;transform-origin:{{size/2}}rpx {{size/2}}rpx">
        <view class="canvas-item2-after" style="background-color:{{item.color}};transform: rotate({{item.afterDeg}});opacity:{{awardsConfig.awards.length==3?'':item.opacity}};width:{{size/2}}rpx;height:{{size/2}}rpx;transform-origin: {{size/2}}rpx {{size/2}}rpx"></view>
        <view wx:if='{{awardsConfig.awards.length==3}}' class="canvas-item2-after" style="background-color:{{item.color}};width:{{size/2}}rpx;height:{{size/2}}rpx;transform-origin: {{size/2}}rpx {{size/2}}rpx"></view>
      </view>
    </view>

    <!-- 选项内容 -->
    <view class="gb-wheel-list">
      <view class="gb-wheel-item" data-index="{{index}}" wx:for="{{awardsConfig.awards}}" wx:key='key'>
        <view class="gb-wheel-icontent" style="width:170rpx;overflow:hidden;font-size:26rpx;line-height:26rpx;padding-top:5%;transform: rotate({{index*turnNum}}turn);transform-origin: 50% {{size/2-1}}rpx">
          <view class="item-text">{{item.prizeName}}</view>
          <view class="item-img">
            <image wx:if="{{item.prizeType==3}}" src="../../images/icon/youhuiq@2x.png" data-type="优惠券" style="width:102rpx;margin-top:20rpx;" mode="widthFix"></image>
            <image wx:if="{{item.prizeType==0}}" src="../../images/icon/nanguo@2x.png" data-type="谢谢惠顾" style="width:46rpx;margin-top:20rpx;" mode="widthFix"></image>
            <!-- <image  wx:if="{{item.index%2!==0}}"src="../../images/icon/nanguo_h@2x.png" data-type="谢谢惠顾-黄" style="width:46rpx;margin-top:20rpx;" mode="widthFix"></image> -->
            <image wx:if="{{item.prizeType==1}}" src="../../images/icon/jinbi@2x.png" data-type="积分" style="width:46rpx;margin-top:20rpx;" mode="widthFix"></image>
            <image wx:if="{{item.prizeType==2}}" src="{{item.pic}}" data-type="物品" style="width:65rpx;margin-top:20rpx;" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="img-container" style='width:100%;height:{{size}}rpx;'>
    <!-- 转盘中间的按钮 -->
    <image src='../../images/icon/dianjichoujiang@2x.png' style='width:{{size/3.5}}rpx;' mode='widthFix'></image>
    <view class="btn-text" bindtap="_zhuan" wx:if="{{!zhuanflg}}">点击抽奖</view>
    <!-- <image src='../../images/icon/dianjichoujiang@2x.png' style='width:{{size/3.5}}rpx;display:{{block2}};' mode='widthFix'></image> -->
    <!-- <image bindtap="reset" src='../../images/icon/dianjichoujiang@2x.png' style='width:{{size/3.5}}rpx;display:{{block3}};' mode='widthFix'></image> -->
    <!-- <image src='../../images/icon/dianjichoujiang@2x.png' style='width:{{size/3.5}}rpx;display:{{block4}};' mode='widthFix'></image> -->
  </view>
  <!-- 装饰图片 -->
  <image class="lucky-decorate" src="../../images/icon/people.png" mode="widthFix"></image>
  <!-- 抽奖说明 -->
  <view class="desc">
    <text class="orange-text">300积分</text> 抽一次奖
  </view>
</view>