应用场景

灵感源于

目标用户

情侣，夫妻

原型图

架构图

效果截图

主流程

模块

模版

我的

项目演示视频

地址：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);
}

作品体验二维码

团队简介

夫妻档

• 陈宇明：负责产品与开发
• 王丝雨：负责设计与交互

觉得不错那就【点赞】支持一下