微信小程序写一个优惠券详情页面
时间: 2023-12-19 08:06:06 浏览: 31
抱歉,我是AI语言模型,无法展示微信小程序的页面,但是我可以提供一个简单的优惠券详情页面的代码示例,供您参考:
1. wxml代码:
```
<view class="coupon-detail">
<view class="coupon-header">
<image class="coupon-img" src="{{coupon.imgUrl}}"></image>
<view class="coupon-info">
<view class="coupon-title">{{coupon.title}}</view>
<view class="coupon-desc">{{coupon.desc}}</view>
</view>
</view>
<view class="coupon-body">
<view class="coupon-code">{{coupon.code}}</view>
<view class="coupon-time">有效期:{{coupon.startTime}} ~ {{coupon.endTime}}</view>
<view class="coupon-rule">{{coupon.rule}}</view>
</view>
</view>
```
2. wxss代码:
```
.coupon-detail {
padding: 20rpx;
}
.coupon-header {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.coupon-img {
width: 130rpx;
height: 130rpx;
margin-right: 20rpx;
}
.coupon-info {
flex: 1;
}
.coupon-title {
font-size: 32rpx;
color: #333;
margin-bottom: 10rpx;
}
.coupon-desc {
font-size: 28rpx;
color: #666;
}
.coupon-body {
border: 1rpx solid #eee;
padding: 20rpx;
}
.coupon-code {
font-size: 34rpx;
color: #333;
margin-bottom: 10rpx;
}
.coupon-time {
font-size: 28rpx;
color: #666;
margin-bottom: 10rpx;
}
.coupon-rule {
font-size: 28rpx;
color: #666;
}
```
3. js代码:
```
Page({
data: {
coupon: {
imgUrl: 'https://xxx.com/coupon.png',
title: '满100减20元优惠券',
desc: '全场通用',
code: '1234567890',
startTime: '2021-01-01',
endTime: '2021-12-31',
rule: '1. 满100元可用;\n2. 不可与其他优惠券叠加使用;\n3. 仅限线上使用。'
}
}
})
```
以上是一个简单的优惠券详情页面示例,您可以根据实际需求进行修改和优化。