#小程序云开发挑战赛#-情侣券-想做就做
应用场景
灵感源于
[图片]
目标用户
情侣，夫妻
原型图
[图片]
架构图
[图片]
效果截图
主流程
[图片]
模块
模版
[图片]
我的
[图片]
项目演示视频
地址：https://v.qq.com/x/page/v3153g8zs5p.html
功能代码展示
云函数代码（卡券云函数）
[代码]// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
if (event.action && ticketHelper[event.action]) {
const result = await ticketHelper[event.action](wxContext, event)
return result
}
return {
message: 'This action was not found',
error: -1,
}
}
const db = cloud.database();
const ticketHelper = {
// 添加卡券
async addTicket(context, params) {
params.ticket._openid = context.OPENID
let res = await db.collection('tickets').add({
data: params.ticket
})
return res
},
// 查看我的卡券
async queryMyTicket(context, params) {
const {
OPENID
} = context
let res = await db.collection('tickets').where({
_openid: OPENID
}).orderBy('createdAt', 'desc').get()
return res
},
// 查看卡券详情
async queryCurrentTicket(context, params) {
let res = await db.collection('tickets').doc(params.ticketId).get()
return res
},
// 删除卡券
async removeTicket(context, params) {
let res = await db.collection('tickets').doc(params.ticketId).remove()
return res
},
}
[代码]
页面代码（首页）
[代码]<!--index.wxml-->
<view class="container">
<view class="top-img">
<image class="top-img" src="../../images/top_img.png"></image>
</view>
<view class="ticket-list">
<view bindtap="toAdd" class="create">
+ 添加自定义模版
</view>
<view wx:for="{{myTemplates}}" class="custom" style="background-image: url({{item.backgroundurl}});"
bindtap="toInfo" data-item="{{item}}">
<view class="custom-title" style="color:{{item.color}}">{{item.title}}</view>
<view class="custom-info" style="color:{{item.color}}">{{item.info}}</view>
</view>
</view>
<view class="ticket-list">
<view wx:for="{{templates}}" bindtap="toInfo" data-item="{{item}}"
class="ticket-item {{index%2==0?'ticket-pink-bg':'ticket-blue-bg'}}">
<text class="ticket-title">{{item.title}}</text>
<view class="ticket-info {{index%2==0?'ticket-pink-info':'ticket-blue-info'}} ">{{item.info}}</view>
</view>
</view>
</view>
[代码]
逻辑代码（首页）
[代码]
// 首页
const app = getApp()
import {
queryPrivateTemplate,
queryPublicTemplate
} from '../../api/template'
Page({
data: {
},
onLoad: function (opt) {
// 领取路径跳转
if (opt.type == 1) {
wx.navigateTo({
url: '/pages/giveList/giveList?ticket=' + opt.ticket,
})
}
// 查询公用的卡券模版
queryPublicTemplate().then(res => {
this.setData({
templates: res.result.data,
})
});
},
onShow() {
// 查询私有的卡券模版
queryPrivateTemplate().then(res => {
this.setData({
myTemplates: res.result.data,
})
});
},
// 去添加模版
toAdd() {
if (app.authorized !== true) {
wx.navigateTo({
url: '/pages/authorize/authorize'
});
return;
}
wx.navigateTo({
url: '/pages/selectBackground/selectBackground',
})
},
// 查看详情
toInfo(res) {
// 没有授权就先去授权
if (app.authorized !== true) {
wx.navigateTo({
url: '/pages/authorize/authorize'
});
return;
}
let item = res.currentTarget.dataset.item
var templateInfo = JSON.stringify(item);
wx.navigateTo({
url: '/pages/add/add?action=update&templateInfo=' + templateInfo
})
}
})
[代码]
样式代码（app.js）
[代码].container{
width: 100vw;
/* height: 100vh; */
background-color: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
}
page{
background: #f6f6f6;
--color-p: #F58B98;
}
button {
padding-left: 0rpx;
padding-right: 0rpx;
border-radius: 0rpx;
}
button::after {
border: none;
}
/* 底部按钮 */
.next-btn {
position: absolute;
bottom: 0rpx;
left: 0rpx;
width: 750rpx;
height: 120rpx;
background: var(--color-p);
text-align: center;
line-height: 120rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 600;
color: #FFFFFF;
}
/* 已使用样式 */
.image-gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
opacity:0.9;
}
/* 所有输入框，未输入文字的样式 */
.placeholder {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 400;
color: #CCCCCC;
}
/* 卡券样式：主页、添加页、我收到的、我赠送的、详情页 */
.custom {
width: 670rpx;
height: 240rpx;
margin-top: 25rpx;
background: #FFF7F7;
border-radius: 20rpx;
background-size: 100% 100%;
position: relative;
}
.custom-title {
margin-left: 40rpx;
padding-top: 40rpx;
font-size: 40rpx;
font-weight: 600;
color: #FFFFFF;
}
.custom-info {
margin-left: 40rpx;
padding-top: 25rpx;
font-size: 26rpx;
font-weight: 600;
color: #FFFFFF;
}
/* 头部样式：选择背景、添加页、详情页 */
.top {
width: 690rpx;
display: flex;
flex-direction: row;
margin: 20rpx 30rpx;
align-items: center;
justify-content: space-between
}
.top-title {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: 600;
color: #2A2A2A;
}
.top-right-text {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: var(--color-p);
}
[代码]
作品体验二维码
[图片]
团队简介
夫妻档
陈宇明：负责产品与开发
王丝雨：负责设计与交互
觉得不错那就【点赞】支持一下
