Skip to content

M
mallapp
Commit 47808a3c authored by 罗超's avatar 罗超
Browse files
Options

新增咖啡页面

parent 9551a9be
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2267 additions and 0 deletions
pages.json
View file @ 47808a3c
......@@ -840,6 +840,24 @@
"navigationStyle": "custom"
}
}]
},
// 咖啡
{
"root": "pages/coffee",
"pages": [
{
"path": "index", //咖啡首页
"style": {
"navigationStyle": "custom"
}
},
{
"path": "buy", //购买页
"style": {
"navigationStyle": "custom"
}
}
]
}
],
"globalStyle": {
......
pages/coffee/buy.vue 0 → 100644
View file @ 47808a3c
<template>
<view class="coffeeBuy">
<view class="topBox" :style="{paddingTop:`${statusNavBar}px`}">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/banner2.png"
mode="widthFix" class="bg"></image>
<view class="nav">
<u-icon name="arrow-left" size="40" color="#fff"></u-icon>
<view class="title">
购买
</view>
</view>
</view>
<view class="con">
<view v-for="(item,index) in pageData.GiveAwayList" :key="index" class="item">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup2.png"
style="width: 130rpx;height: 130rpx;"></image>
<view class="itemInfo">
<view class="BuyNum">
星巴克咖啡{{item.BuyNum}}杯
</view>
<view class="GiveAway">
买{{item.BuyNum}}杯赠{{item.GiveAwayNum}}杯
</view>
<view class="validate">
购入有限期9个月
</view>
</view>
<view class="itemInfo2">
<view class="money">
<text class="icon">￥</text>
<text>{{item.BuyNum*pageData.SellingPrice}}</text>
</view>
<view class="buyBtn">
立即购买
</view>
</view>
</view>
</view>
<view class="menu">
<view class="menuTitle">咖啡菜单</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusNavBar: 0,
pageData: {},
}
},
methods: {
getData() {
this.request2({
url: '/api/AppletCoffee/GetMyCoffeeCouponsInfo',
data: {}
},
res => {
this.pageData = res.data
}
);
},
},
mounted() {
this.statusNavBar = uni.getSystemInfoSync().statusBarHeight
this.getData()
},
}
</script>
<style lang="scss" scoped>
.coffeeBuy {
box-sizing: border-box;
min-height: 100vh;
background-color: #FFFFFF;
}
.topBox {
height: 489rpx;
position: relative;
.bg {
width: 100vw;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.nav {
height: 80rpx;
padding: 0 30rpx;
display: flex;
align-items: center;
.title {
font-size: 30rpx;
font-weight: 500;
color: #FFFFFF;
margin-left: 275rpx;
z-index: 5;
}
}
}
.con {
padding: 40rpx;
.item {
height: 214rpx;
background-color: #FBF5E9;
border: 3rpx solid;
border-radius: 10rpx;
border-image: -webkit-linear-gradient(left, #f3edda, #eadfbc, #ece0bd) 3 3;
margin-bottom: 36rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx 40rpx;
.itemInfo {
width: 230rpx;
.BuyNum {
font-size: 32rpx;
font-weight: 500;
color: #000000;
margin-bottom: 20rpx;
}
.GiveAway {
padding: 4rpx 10rpx;
background-color: #F65C10;
border-radius: 4rpx;
text-align: center;
font-size: 20rpx;
font-weight: 500;
color: #FFFFFF;
display: inline-block;
margin-bottom: 15rpx;
}
.validate {
font-size: 20rpx;
font-weight: 400;
color: #C2B499;
}
}
.itemInfo2 {
// width: 200rpx;
.money {
text-align: center;
font-size: 48rpx;
font-weight: bold;
color: #F65C10;
.icon {
font-size: 28rpx;
}
}
.buyBtn {
width: 200rpx;
height: 78rpx;
background-color: #3E766E;
border-radius: 39rpx;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 78rpx;
}
}
}
}
.menu {
width: 670rpx;
height: 270rpx;
background-color: #F4F4F5;
border-radius: 10rpx;
margin: 0 auto;
padding: 25rpx 40rpx;
.menuTitle {
margin: 20rpx 150rpx;
line-height: 2rpx;
border-left: 70rpx solid #000;
border-right: 70rpx solid #000;
text-align: center;
font-size: 28rpx;
font-weight: bold;
color: #101010;
}
}
</style>
pages/coffee/index.vue 0 → 100644
View file @ 47808a3c
<template>
<view class="coffeeIndex">
<view class="topBox" :style="{paddingTop:`${statusNavBar}px`}">
<view class="bg1"></view>
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/bg.png"
mode="widthFix" style="width: 100vw;height: auto;" class="bg2"></image>
<view class="nav">
<u-icon name="arrow-left" size="40"></u-icon>
</view>
<view class="welcomeText">
你好,同学
</view>
<view class="scanBtn" @click="showPopup">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/ScanCode.png"
mode="heightFix" style="height: 37rpx; width: auto;margin-right: 10px;"></image>
<text>消费码</text>
</view>
</view>
<view class="goods">
<view class="goodsItem goodsItem1">
<view class="num">
<text>{{pageData.SurplusBugNum||0}}</text>
<text class="unit">杯</text>
</view>
<view class="goodsinfo">
<view class="left">
<view class="goodsinfoTitle">
剩余已购
</view>
<view class="validate">
有效期:2022.12.25
</view>
</view>
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup.png"
mode="heightFix" style="height: 90rpx;width: auto;"></image>
</view>
</view>
<view class="goodsItem goodsItem2">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/free.png"
mode="heightFix" class="freeLogo"></image>
<view class="num">
<text>{{pageData.FreeNum||0}}</text>
<text class="unit">杯</text>
</view>
<view class="goodsinfo">
<view class="left">
<view class="goodsinfoTitle">
剩余已购
</view>
<view class="validate">
有效期:2022.12.25
</view>
</view>
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup.png"
mode="heightFix" style="height: 90rpx;width: auto;"></image>
</view>
</view>
</view>
<view class="buyBtn" @click="jump('/coffee/buy')">
<text>立即购买</text>
<view class="tipBox" v-if="pageData.GiveAwayList&&pageData.GiveAwayList.length>0">
<view class="tipText">
买{{pageData.GiveAwayList[0].BuyNum}}赠{{pageData.GiveAwayList[0].GiveAwayNum}}
</view>
<view class="tipIcon">
</view>
</view>
</view>
<view class="logBtn">
<view class="logitem buy">
购买记录
</view>
<view class="logitem spend">
消费记录
</view>
</view>
<u-popup v-model="isShowQrcode" mode="center">
<view style="margin: 60rpx;">
<Qrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :width="300" :height="300" themeColor="#44766E" is_themeImg :h_w_img="80" :themeImg="headImg"/>
</view>
</u-popup>
</view>
</template>
<script>
import Qrcode from "./qrcode/ay-qrcode.vue"
export default {
components: {
Qrcode
},
data() {
return {
statusNavBar: 0,
modal_qr: false,
url: 'http://baidu.com/s', // 要生成的二维码值
isShowQrcode: false,
headImg:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup.png",
pageData:{}
}
},
onLoad() {
this.statusNavBar = uni.getSystemInfoSync().statusBarHeight
if(uni.getStorageSync('mall_UserInfo').Photo){
this.headImg=uni.getStorageSync('mall_UserInfo').Photo
}
this.showQrcode(); //一加载生成二维码
this.getData()
},
methods: {
showPopup(){
this.isShowQrcode=true
},
// 展示二维码
showQrcode() {
let _this = this;
this.modal_qr = true;
setTimeout(function() {
_this.$refs.qrcode.crtQrCode()
}, 50)
},
//传入组件的方法
hideQrcode() {
this.modal_qr = false;
},
jump(url){
uni.navigateTo({
url:"/pages"+url,
})
},
getData(){
this.request2({
url: '/api/AppletCoffee/GetMyCoffeeCouponsInfo',
data: {}
},
res => {
this.pageData=res.data
}
);
},
}
}
</script>
<style lang="scss" scoped>
.coffeeIndex {
box-sizing: border-box;
min-height: 100vh;
background-color: #F5F5F5;
}
.topBox {
height: 725rpx;
position: relative;
}
.bg1 {
width: 600rpx;
height: 420rpx;
border-radius: 50%;
background-color: #EFE9DA;
position: absolute;
top: -190rpx;
left: -195rpx;
}
.bg2 {
position: absolute;
bottom: 0rpx;
left: 0rpx;
}
.nav {
height: 80rpx;
padding: 0 30rpx;
display: flex;
align-items: center;
}
.welcomeText {
font-size: 46rpx;
font-family: PingFang SC;
font-weight: bold;
color: #232323;
position: absolute;
top: 150rpx;
left: 65rpx;
}
.scanBtn {
width: 185rpx;
height: 78rpx;
background-color: #3E766E;
border-radius: 39rpx;
position: absolute;
top: 235rpx;
left: 65rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
font-family: PingFang SC;
// font-weight: 500;
color: #FFFFFF;
}
.goods {
position: relative;
.goodsItem {
width: 320rpx;
height: 216rpx;
background: linear-gradient(90deg, #F7F7F7, #FFFFFF);
box-shadow: 0px 27rpx 40rpx 0rpx rgba(76, 76, 76, 0.1);
border-radius: 20rpx;
position: absolute;
top: -40rpx;
padding: 40rpx 25rpx 30rpx 30rpx;
.num {
font-size: 50rpx;
font-family: PingFang SC;
font-weight: 800;
color: #000000;
margin-bottom: 15rpx;
line-height: 40rpx;
.unit {
font-size: 28rpx;
margin-left: 10px;
font-weight: 500;
}
}
}
.goodsinfo {
display: flex;
justify-content: space-between;
.goodsinfoTitle {
font-size: 28rpx;
font-weight: 500;
color: #000000;
margin: 10rpx 0;
}
.validate {
font-size: 20rpx;
font-weight: 500;
color: #CCCCCC;
}
}
.goodsItem1 {
left: 40rpx;
}
.goodsItem2 {
right: 40rpx;
overflow: hidden;
.freeLogo {
height: 80rpx;
width: auto;
position: absolute;
top: 0;
right: 0;
border-top-right-radius: 20rpx;
}
}
}
.buyBtn {
width: 656rpx;
height: 90rpx;
background-color: #3E766E;
border-radius: 45rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 295rpx auto 0;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
position: relative;
.tipBox {
position: absolute;
top: -20rpx;
left: 390rpx;
.tipText {
width: 146rpx;
height: 45rpx;
background-color: #F3ED4A;
border-radius: 22.5rpx;
font-size: 24rpx;
font-weight: 600;
color: #484501;
display: flex;
justify-content: center;
align-items: center;
}
.tipIcon {
width: 0;
height: 0;
border-top: 15rpx solid #F3ED4A;
border-right: 10rpx solid transparent;
border-left: 6rpx solid transparent;
margin-left: 20rpx;
}
}
}
.logBtn {
display: flex;
justify-content: center;
align-items: center;
margin-top: 90rpx;
.logitem {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #3E766E;
}
.buy {
margin-right: 130rpx;
}
}
</style>
pages/coffee/qrcode/ay-qrcode.vue 0 → 100644
View file @ 47808a3c
<template>
<view :class="modal?'show-qrcode':'hide-qrcode'">
<view class="box-qrcode" :style="{'margin-left': marginLeft + 'px'}" @longtap="longtapCode">
<!-- style="width: 550rpx;height: 550rpx;" -->
<canvas class="canvas-qrcode" :style="style_w_h" :canvas-id="qrcode_id">
<!-- #ifndef MP -->
<view v-if="modal&&is_themeImg" :style="style_w_h" class="box-img-qrcode">
<image :style="style_w_h_img" mode="scaleToFill" :src="themeImg"></image>
</view>
<!-- #endif -->
</canvas>
<!-- <image mode="scaleToFill" :src="imagePath"></image> -->
</view>
</view>
</template>
<script>
var qr_we = require("./qrcode_wx.js");
const qrCode = require('./weapp-qrcode.js')
export default {
data() {
return {
isAndroid : false ,
show: true,
imagePath: '',
// qrcode_id: 'qrcode_id',
marginLeft: 0,
//一般的安卓app只需加30就能显示全
//苹果app的不加就能显示全，加了就要弄margin-left
//有些安卓app显示不全
add_num : 30 ,
add_num_key : 'rectify_code_key',
}
},
props: {
modal: {
type: Boolean,
default: false
},
url: {
type: String,
default: ''
},
height: {
type: Number,
default: 260
},
width: {
type: Number,
default: 260
},
themeColor: {
type: String,
default: '#333333',
},
qrcode_id: {
type: String,
default: 'qrcode_id',
},
is_themeImg: {
type: Boolean,
default: false,
},
themeImg: {
type: String,
default: 'https://cdn.pixabay.com/photo/2016/11/29/13/24/balloons-1869816__340.jpg',
},
h_w_img: {
type: Number,
default: 30
},
},
watch:{
},
computed: {
style_w_h() {
return this.set_style_w_h();
},
style_w_h_img() {
let that = this;
var height = parseInt(that.h_w_img);
var width = parseInt(that.h_w_img);
var style = '';
if (height > 0) {
style = `height:${height*2}rpx;`;
}
if (width > 0) {
style += `width:${width*2}rpx;z-index: 2;`;
}
return style;
},
},
created: function() {
let that = this;
try {
//app苹果二维码不居中
//#ifndef MP
let isAndroid = false ;
const res = uni.getSystemInfoSync();
if(res.platform == 'android'){
isAndroid = true ;
}else{
isAndroid = false ;
}
if (!isAndroid) {
that.marginLeft = 46;
}
that.isAndroid = isAndroid ;
try {
const add_num = uni.getStorageSync(that.add_num_key);
if (add_num) {
that.add_num = add_num;
}
} catch (e) {
// error
}
// #endif
} catch (e) {
// error
}
//#ifdef MP
//that.marginLeft = 40;
// #endif
},
methods: {
set_style_w_h(){
let that = this;
var height = parseInt(that.height);
var width = parseInt(that.width);
var style = '';
var height = height*2 ;
var width = width*2 ;
//#ifndef MP
var add = that.add_num ;
height += add;
width += add;
// #endif
if (height > 0) {
style = `height:${height}rpx;`;
}
if (width > 0) {
style += `width:${width}rpx;`;
}
return style;
},
hideQrcode() {
this.$emit("hideQrcode")
},
// 二维码生成工具
crtQrCode() {
let that = this;
//#ifndef MP
new qrCode(that.qrcode_id, {
text: this.url,
width: that.width,
height: that.height,
colorDark: that.themeColor,//#333333
colorLight: "#FFFFFF",
correctLevel: qrCode.CorrectLevel.H,
})
// #endif
//#ifdef MP
that.createQrCode(this.url, that.qrcode_id, that.width, that.height,that.themeColor,that.is_themeImg,that.themeImg,that.h_w_img);
// #endif
//that.createQrCode(this.url, that.qrcode_id, that.width, that.height);
},
//#ifdef MP
createQrCode: function(url, canvasId, cavW, cavH,cavColor,haveImg,imgurl,imgsize) {
//调用插件中的draw方法，绘制二维码图片
qr_we.api.draw(url, canvasId, cavW, cavH,cavColor,haveImg,imgurl,imgsize, this, this.canvasToTempImage);
// setTimeout(() => { this.canvasToTempImage();},100);
},
// #endif
//获取临时缓存照片路径，存入data中
canvasToTempImage: function() {
var that = this;
},
saveImage: function() {
var that = this;
uni.canvasToTempFilePath({
canvasId: that.qrcode_id,
success: function(res) {
var tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.imagePath = tempFilePath;
//保存到相册
// uni.saveFile({
// tempFilePath: tempFilePath,
// success: function (res2) {
// var savedFilePath = res2.savedFilePath;
// }
// });
uni.saveImageToPhotosAlbum({
filePath : tempFilePath ,
success: function (res3) {
uni.showModal({
title: '提示',
content: '保存成功',
confirmText: '确定',
showCancel: false,
confirmColor: '#33CCCC',
success(res4) {
}
})
},
});
},
fail: function(res) {
console.log(res);
}
}, that);
},
//微信小程序支持：长按二维码，提示是否保存相册
//安卓APP长按校正二维码
longtapCode(){
var that = this;
//#ifndef MP
uni.showModal({
title: '校正二维码',
content: '二维码是否异常',
confirmText: '确定',
confirmColor: '#33CCCC',
success(res) {
if (res.confirm) {
that.rectify_code();
}
}
})
// #endif
//#ifdef MP-WEIXIN
uni.showModal({
title: '提示',
content: '是否保存到相册',
confirmText: '确定',
confirmColor: '#33CCCC',
success(res) {
if (res.confirm) {
that.saveImage();
}
}
})
// #endif
},
//安卓有些手机不正常，长按可选择矫正
rectify_code(){
var that = this;
let add_num = that.add_num ;
add_num += 30 ;
that.add_num = add_num;
that.crtQrCode();//重新生成才会立即覆盖
try {
//第一次长按校正设置了就不用在设置
uni.setStorage({
key: that.add_num_key,
data: add_num,
success: function() {
}
});
} catch (e) {
// error
}
},
},
mounted() {}
}
</script>
<style scoped lang="scss">
// .qrcode-box {
// position: fixed;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// height: 100vh;
// width: 100vw;
// background-color: rgba(59, 59, 59, 0.6);
// // opacity: 0.8;
// text-align: center;
// display: flex;
// align-items: center;
// display: none;
// .qrcode-item {
// flex: 1;
// position: relative;
// text-align: center;
// .item-box {
// width: 90%;
// margin: auto;
// display: inline-block;
// margin-top: 30%;
// padding-bottom: 30rpx;
// // animation: show 0.7s;
// .title {
// font-size: 46rpx;
// text-align: center;
// margin-bottom: 24rpx;
// }
// .canvas {
// margin: auto;
// display: inline-block;
// margin: auto;
// }
// background-color: #FFFFFF;
// }
// }
// }
.box-qrcode{
text-align: center;
position: relative;
.box-img-qrcode{
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
}
}
image{
width: 60upx;
height: 60upx;
border-radius: 50%;
}
.canvas-qrcode {
margin: auto;
display: inline-block;
float: left;
}
.opacity-qrcode {
opacity: 0;
display: block;
}
.show-qrcode {
display: block;
animation: fade 0.7s;
// -moz-animation: fade 0.5s; /* Firefox */
// -webkit-animation: fade 0.5s; /* Safari 和 Chrome */
// -o-animation: fade 0.5s;
}
.hide-qrcode {
animation: hide 0.7s;
}
@keyframes fade {
from {
opacity: 0.8;
}
to {
opacity: 1;
}
}
@keyframes hide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
pages/coffee/qrcode/qrcode_wx.js 0 → 100644
View file @ 47808a3c
This diff is collapsed.
pages/coffee/qrcode/weapp-qrcode.js 0 → 100644
View file @ 47808a3c
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment