小程序定义优惠券样式

//wxml
    <view class="lists">
            <van-radio-group value="{{ radio }}" bind:change="onChange">
                <view class="list" id='wrapper' wx:for="{{cartItems}}" wx:key="key" wx:for-index="key">
                    <view class="left" data-key="{{key}}" style="background-color:{{randomColorArr[key]}}; ">{{item.value}}</view>
                    <view class="right" data-index="{{key}}" bindtap="rightit">
                        <view class="right_left ">
                            <view>{{item.title}}</view>
                            <view>{{item.titleThree}}</view>
                            <view>{{item.titleTwo}}</view>
                        </view>
                        <van-radio name="{{item.name}}"></van-radio>
                    </view>
                </view>
            </van-radio-group>
        </view>
//wxss
.lists{
  width: 100vw;
  height: 78vh;
  overflow: scroll;
}
.list{
  display: flex;
  width: 90%;
  margin: 3vh auto;
}
.left{
  width: 250rpx;
  height: 170rpx;
  background-color:  rgb(51, 138, 238); /* 不支持线性的时候显示 */
  background-image: linear-gradient(to right, #6495ed, rgb(85, 198, 226));
  text-align: center;
  line-height: 170rpx;
  color: white;
  font-size: 22px;
  border-radius:10px 30px 30px 10px;
  background: #58a;
  background: radial-gradient(circle at top right, white 5px,transparent 0) top right, radial-gradient(circle at bottom right, white 5px, transparent 0) bottom right;/*优惠券样式*/
  background-size: 100% 60%;
  background-repeat: no-repeat;
  border-radius: 5px 0 0 5px;
  border-right: 1rpx dashed #ccc;
}
.right{
  width: 425rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: solid 2px #F5F5F5;
  border-radius: 30px 10px 10px 30px;
  background: #58a;
  background: radial-gradient(circle at top left, transparent 5px, white 0) top left,radial-gradient(circle at bottom left, transparent 5px, white 0) bottom left;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  border-radius: 0 5px 5px 0; 
}
.right_left :nth-child(1){
  margin-bottom: 10rpx;
}
.right_left :nth-child(2){
  margin-bottom: 10rpx;
  color: rgb(151, 148, 148);
}
//js
Page({
  data: {
    cartItems: [{
      title: "抵扣1",
      titleTwo: "18小时",
      titleThree:'免费充值',
      value: "8小时",
      name:'1'
    },
    {
      title: "抵扣2",
      titleTwo: "剩余数量",
      titleThree:'免费充值',
      value: "20",
      name:'2'
    },
    {
      title: "抵扣2",
      titleTwo: "4小时",
      titleThree:'免费充值',
      value: "8折",
      name:'3'
    },{
      title: "抵扣3",
      titleTwo: "28小时",
      titleThree:'免费充值',
      value: "8小时",
      name:'4'
    },
    {
      title: "抵扣4",
      titleTwo: " 8小时",
      titleThree:'免费充值',
      value: "20元",
      name:'5'
    },
    {
      title: "抵扣5",
      titleTwo: "1小时",
      titleThree:'免费充值',
      value: "1小时",
      name:'6'
    },
    {
      title: "抵扣6",
      titleTwo: "8小时",
      titleThree:'免费充值',
      value: "20元",
      name:'7'
    },
  ],
 // 自定义自己喜欢的颜色
     colorArr: [ "rgb(85, 198, 226)",'#6495ed','rgb(51, 138, 238)' ],
   // 存储随机颜色
   randomColorArr: [],
},
 onLoad: function (options) {
    let that = this,
    labLen = that.data.cartItems.length,
    colorArr = that.data.colorArr,
    colorLen = colorArr.length,
    randomColorArr = [];
    //判断执行
    do{
      let random = colorArr[Math.floor(Math.random() * colorLen)];
      randomColorArr.push(random);
      labLen--;
    } while (labLen > 0)

    that.setData({ 
      randomColorArr: randomColorArr
    });
  },
})
//json vantweapp
 "usingComponents": {
    "van-radio": "/dist/radio/index",
    "van-radio-group": "/dist/radio-group/index",
    "van-overlay": "/dist/overlay/index"
  }