评论

#小程序云开发挑战赛#-情侣券-想做就做

恋爱必备

应用场景

灵感源于

目标用户

情侣,夫妻

原型图

架构图

效果截图

主流程

模块

模版

我的

项目演示视频

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

作品体验二维码

团队简介

夫妻档

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

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

最后一次编辑于  09-20  
点赞 135
收藏
评论

19 个评论

  • 留心丶
    留心丶
    09-23

    情侣福音吗,刚好需要

    09-23
    赞同 3
    回复 1
  • 易鹏
    易鹏
    09-23

    按摩券多一点

    09-23
    赞同 4
    回复 1
    • 陈宇明
      陈宇明
      09-23
      可以自定义,要多少有多少😂
      09-23
      3
      回复
  • 杨阿杨阿阳
    杨阿杨阿阳
    09-24

    能不能不公开情侣信息,这样我就可以拥有好多个了。 嘻嘻(#^.^#)

    09-24
    赞同 1
    回复
  • 赵圣杰
    赵圣杰
    09-23

    这是把狗骗进来,然后在吧狗杀掉?

    09-23
    赞同 1
    回复 1
    • 陈宇明
      陈宇明
      09-23
      借此神器,你可以找一个
      09-23
      回复
  • handley
    handley
    09-27

    有意思

    09-27
    赞同
    回复
  • 小肥羊
    小肥羊
    09-25
    业内良心呀
    09-25
    赞同
    回复
  • 弱水三千换你倾城一笑
    弱水三千换你倾城一笑
    09-24

    学习一波大佬的代码风格

    09-24
    赞同
    回复
  • 红袖添香
    红袖添香
    09-24

    群主,洗脚券可以多给点吗,哈哈。

    09-24
    赞同
    回复
  • 水
    09-24

    有意思~

    09-24
    赞同
    回复
  • Kayle
    Kayle
    09-24
    我觉得使用流程有点简单了,最好是点击使用,推送消息给对方,对方同意了,就才算使用了。或者面对面的时候可以扫个码才算使用了。要不然点下使用就用了,对方没空下次又少一张…
    09-24
    赞同
    回复 4
    • 陈宇明
      陈宇明
      09-24
      这个检查的流程有思考过,这种事很常见的优惠券的流程。
      当时我的思考是这样的,考虑对方是情侣,那么肯定关系很好,那么检查的流程就少一步了。如果真的有这种情况,那么肯定会补一张。
      09-24
      回复
    • 陈宇明
      陈宇明
      09-24
      这里面其实就是考虑到了商家与客户的关系和情侣之间的关系的差异性。
      09-24
      回复
    • Kayle
      Kayle
      09-24回复陈宇明
      嗯,简单情侣间确实可以直接使用。 要是能增加一些有限数量的卡,感觉会更珍惜这些机会。 期待大佬的产品~
      09-24
      回复
    • 陈宇明
      陈宇明
      09-25回复Kayle
      嗯,感谢支持,后续会持续更新。
      09-25
      回复

正在加载...

登录 后发表内容