业余选手, 没事写着玩的, 参考了网上的一些写法。
用到了
ColorUI
, 一个比较好看的小程序框架
首先将colorui的样式mian.css放到你习惯的目录去(我就随便放在了config目录中了), 然后在app.wxss引入样式
@import "config/main.wxss";然后coupon.wxml
<view class="bg-white padding-sm">
<view class="base-coupons flex align-center" style="margin-top: 8rpx;" wx:for="{{couponList}}" wx:key="id">
<view class="flex justify-center align-center" style="width:60%">
<view>
<view class="text-center text-lg text-shadow text-white" wx:if="{{item.goodsType == 1}}">{{item.desc}}</view>
<view class="text-center text-sm text-shadow text-white" wx:if="{{item.goodsType == 2}}">{{item.desc}}</view>
<view class="m-menu" wx:if="{{item.goodsType == 2}}">
<navigator class="m-menu-item" url="../goods/goods?id={{item.id}}" wx:for="{{item.goodsList}}" wx:key="id">
<image src="{{item.iconUrl}}" background-size="cover"></image>
<text class="text-price text-grey">{{item.price}}</text>
</navigator>
</view>
</view>
</view>
<view class="flex align-center justify-center" style="width:40%; padding-left: 12px">
<view>
<view class="text-center text-bold text-xxl text-shadow text-price text-red" wx:if="{{item.couponType == 1}}">{{item.discount}}</view>
<view class="text-center text-bold text-xxl text-shadow text-price text-red" wx:elif="{{item.couponType == 2}}">{{item.discount}}
<text class="text-df text-red">折</text>
</view>
<view class="text-center text-sm text-shadow text-red">满{{item.fullReduction}}元可用</view>
<view class="text-center">
<button class="margin-top-xs cu-btn round bg-red shadow text-white sm" wx:if="{{item.collectSign == 'N'}}">立即领取</button>
<button class="margin-top-xs cu-btn round shadow line-red text-red sm" wx:elif="{{item.collectSign == 'Y'}}">去使用</button>
</view>
</view>
</view>
<view class="light-back"></view>
</view>
</view>然后是样式代码coupon.wxss
.base-coupons {
height: 200rpx;
position: relative;
background: radial-gradient(circle at right top, transparent 20rpx, #50ADD3 0) top left / 60% 51% no-repeat,
radial-gradient(circle at right bottom, transparent 20rpx, #50ADD3 0) bottom left /60% 51% no-repeat,
radial-gradient(circle at left top, transparent 20rpx, #eeeeee 0) top right /40% 51% no-repeat,
radial-gradient(circle at left bottom, transparent 20rpx, #eeeeee 0) bottom right /40% 51% no-repeat;
filter: drop-shadow(0 0 0.2rem rgba(0,0,0,.3));
}
.light-back {
position: absolute;
top: 50rpx;
border-bottom: 150rpx solid rgba(255,255,255,.18);
border-left: 710rpx solid transparent;
}
/* 虚线 */
.base-coupons::before {
content: '';
height: 160rpx;
border: 2rpx dashed #fff;
position: absolute;
left: 60%;
top: 0;
bottom: 0;
margin: auto;
}
.base-coupons::after {
content: '';
position: absolute;
height: 100%;
width: 10rpx;
top: 0;
right: -10rpx;
background-image: linear-gradient(to bottom, #eeeeee 10rpx, transparent 10rpx, transparent),
radial-gradient(20rpx circle at 10rpx 20rpx, transparent 10rpx, #eeeeee 10rpx);
background-size: 10rpx 30rpx;
}
.m-menu {
display: flex;
padding-top: 16rpx;
}
.m-menu .m-menu-item {
width: 150rpx;
height: 126rpx;
margin: 8rpx 0 -20rpx;
}
.m-menu image {
display: block;
width: 58rpx;
height: 58rpx;
margin: 0 auto;
margin-bottom: 12rpx;
}
.m-menu text {
display: block;
font-size: 24rpx;
text-align: center;
margin: 0 auto;
line-height: 1;
color: #333;
}接下来是coupon.js文件
const mockData = require('../../config/mock.js');
var app = getApp();
Page({
data: {
couponList: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getCouponList();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
getCouponList: function () {
// 使用mock数据
this.setData({
couponList: mockData.coupon,
});
}
})最后mock.js数据, 放在config目录下, 做测试数据用的
module.exports = {
coupon: [{
"id": 1,
"desc": "全类商品",
"goodsType": 1,
"couponType": 1,
"discount": 30,
"fullReduction": 100,
"collectSign": "N",
"goodsList": []
}, {
"id": 2,
"desc": "仅可购买指定类平板电脑商品",
"goodsType": 2,
"couponType": 1,
"discount": 100,
"fullReduction": 2000,
"collectSign": "N",
"goodsList": [{
"iconUrl": "../../static/temp/menuIcon/chenshan.png",
"id": 1181000,
"name": "衬衫",
"price": 199
}, {
"iconUrl": "../../static/temp/menuIcon/wumaoweiyi.png",
"id": 1006002,
"name": "无帽卫衣",
"price": 129
}, {
"iconUrl": "../../static/temp/menuIcon/lianmaoweiyi.png",
"id": 1006002,
"name": "连帽卫衣",
"price": 88
}]
}, {
"id": 3,
"desc": "仅可购买居家日用部分商品",
"goodsType": 2,
"couponType": 1,
"discount": 100,
"fullReduction": 500,
"collectSign": "Y",
"goodsList": [{
"iconUrl": "../../static/temp/menuIcon/chenshan.png",
"id": 1181000,
"name": "衬衫",
"price": 199
}, {
"iconUrl": "../../static/temp/menuIcon/wumaoweiyi.png",
"id": 1006002,
"name": "无帽卫衣",
"price": 129
}, {
"iconUrl": "../../static/temp/menuIcon/lianmaoweiyi.png",
"id": 1006002,
"name": "连帽卫衣",
"price": 88
}]
}, {
"id": 4,
"desc": "仅可购买居家日用部分商品",
"goodsType": 2,
"couponType": 2,
"discount": 8.8,
"fullReduction": 299,
"collectSign": "Y",
"goodsList": [{
"iconUrl": "../../static/temp/menuIcon/chenshan.png",
"id": 1181000,
"name": "衬衫",
"price": 199
}, {
"iconUrl": "../../static/temp/menuIcon/wumaoweiyi.png",
"id": 1006002,
"name": "无帽卫衣",
"price": 129
}, {
"iconUrl": "../../static/temp/menuIcon/lianmaoweiyi.png",
"id": 1006002,
"name": "连帽卫衣",
"price": 88
}]
}]
}
版权声明：本文为xb895465169原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。