Skip to content

M
mallapp
Commit 19f253de authored by 罗超's avatar 罗超
Browse files
Options

2

parent c60122b8
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1151 additions and 33 deletions
pages.json
View file @ 19f253de
......@@ -852,10 +852,22 @@
}
},
{
"path": "buy", //购买页
"path": "buy",
//购买页
"style": {
"navigationStyle": "custom"
}
},{
"path": "confirmOrder"
},
{
"path": "myOrder"
},
{
"path": "orderDetail"
},
{
"path": "mySpend"
}
]
}
......
pages/coffee/buy.vue
View file @ 19f253de
......@@ -3,12 +3,15 @@
<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>
<u-sticky :offset-top="statusNavBar">
<view class="nav">
<u-icon name="arrow-left" size="40" color="#fff"></u-icon>
<u-icon name="arrow-left" size="40" color="#fff" @click="back"></u-icon>
<view class="title">
购买
</view>
</view>
</u-sticky>
</view>
<view class="con">
<view v-for="(item,index) in pageData.GiveAwayList" :key="index" class="item">
......@@ -27,17 +30,25 @@
</view>
<view class="itemInfo2">
<view class="money">
<text class="icon">￥</text>
<text class="icon">¥</text>
<text>{{item.BuyNum*pageData.SellingPrice}}</text>
</view>
<view class="buyBtn">
<view class="buyBtn" @click="buy(item)">
立即购买
</view>
</view>
</view>
</view>
<view class="menu">
<view class="menuTitle">咖啡菜单</view>
<u-divider bg-color="#F4F4F5" color="#101010" use-slot>
<text class="menuTitle">咖啡菜单</text>
</u-divider>
<view class="menubox">
<view v-for="(item,index) in menuList" :key="index" class="menuItem">
<text class="name">{{item.name}}</text>
<text class="english">{{item.english}}</text>
</view>
</view>
</view>
</view>
</template>
......@@ -48,6 +59,35 @@
return {
statusNavBar: 0,
pageData: {},
menuList: [{
name: "馥芮白 ",
english: "Flat White"
},
{
name: "卡布奇诺",
english: "Cappucino"
},
{
name: "拿铁",
english: "Cafte Lafte"
},
{
name: "美式",
english: "Cafte Americano"
},
{
name: "摩卡",
english: "Mocha"
},
{
name: "拿铁玛奇朵",
english: "Latte Macchiato"
},
{
name: "巧克力饮品",
english: "Classic Chocolate"
},
]
}
},
methods: {
......@@ -61,6 +101,21 @@
}
);
},
buy(item) {
let obj = {
addr: this.pageData.Address,
price: this.pageData.SellingPrice,
GoodsId: this.pageData.GoodsId,
SpecificationSort: this.pageData.SpecificationSort,
...item
}
uni.navigateTo({
url: "/pages/coffee/confirmOrder?item=" + encodeURIComponent(JSON.stringify(obj))
})
},
back() {
uni.navigateBack()
}
},
mounted() {
this.statusNavBar = uni.getSystemInfoSync().statusBarHeight
......@@ -74,6 +129,7 @@
box-sizing: border-box;
min-height: 100vh;
background-color: #FFFFFF;
padding-bottom: 50rpx;
}
.topBox {
......@@ -110,7 +166,6 @@
padding: 40rpx;
.item {
height: 214rpx;
background-color: #FBF5E9;
border: 3rpx solid;
border-radius: 10rpx;
......@@ -123,6 +178,7 @@
.itemInfo {
width: 230rpx;
margin-left: 30rpx;
.BuyNum {
font-size: 32rpx;
......@@ -151,16 +207,16 @@
}
.itemInfo2 {
// width: 200rpx;
.money {
text-align: center;
font-size: 48rpx;
font-weight: bold;
color: #F65C10;
margin-bottom: 10rpx;
.icon {
font-size: 28rpx;
font-weight: 400;
}
}
......@@ -182,21 +238,34 @@
.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;
}
.menubox {
display: flex;
flex-wrap: wrap;
}
.menuItem {
min-width: 50%;
margin: 10rpx 0;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 400;
color: #666666;
.english {
font-size: 20rpx;
margin-left: 4rpx;
}
}
}
</style>
pages/coffee/confirmOrder.vue 0 → 100644
View file @ 19f253de
This diff is collapsed.
pages/coffee/index.vue
View file @ 19f253de
......@@ -71,17 +71,39 @@
</view>
</view>
<view class="logBtn">
<view class="logitem buy">
<view class="logitem buy" @click="jump('/coffee/myOrder')">
购买记录
</view>
<view class="logitem spend">
<view class="logitem spend" @click="jump('/coffee/mySpend')">
消费记录
</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"/>
<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>
<u-popup v-model="isShowSuccess" :maskCloseAble="false" mode="center">
<view style="margin: 60rpx;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup3.png"
mode="widthFix" style="width:546rpx;height:auto;display: block;"></image>
<view class="viewBox">
<view class="cup">
1杯
</view>
<view class="successText">
核销成功
</view>
<view class="user">
小猪
</view>
</view>
<view class="closeIcon" @click="isShowSuccess=false">
<u-icon name="close" color="#fefefe" size="60"></u-icon>
</view>
</view>
</u-popup>
</view>
......@@ -99,22 +121,23 @@
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:{}
headImg: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup.png",
pageData: {},
isShowSuccess: false,
}
},
onLoad() {
this.statusNavBar = uni.getSystemInfoSync().statusBarHeight
if(uni.getStorageSync('mall_UserInfo').Photo){
this.headImg=uni.getStorageSync('mall_UserInfo').Photo
if (uni.getStorageSync('mall_UserInfo').Photo) {
this.headImg = uni.getStorageSync('mall_UserInfo').Photo
}
this.showQrcode(); //一加载生成二维码
this.getData()
},
methods: {
showPopup(){
this.isShowQrcode=true
showPopup() {
this.isShowSuccess = true
},
// 展示二维码
showQrcode() {
......@@ -129,18 +152,18 @@
hideQrcode() {
this.modal_qr = false;
},
jump(url){
jump(url) {
uni.navigateTo({
url:"/pages"+url,
url: "/pages" + url,
})
},
getData(){
getData() {
this.request2({
url: '/api/AppletCoffee/GetMyCoffeeCouponsInfo',
data: {}
},
res => {
this.pageData=res.data
this.pageData = res.data
}
);
},
......@@ -337,4 +360,38 @@
margin-right: 130rpx;
}
}
.viewBox {
width: 546rpx;
height: 286rpx;
background-color: #FFFFFF;
border-radius: 0rpx 0rpx 24rpx 24rpx;
padding-top: 40rpx;
.cup{
font-size: 40rpx;
font-weight: 800;
color: #3E766E;
text-align: center;
margin-bottom: 6rpx;
}
.successText{
font-size: 32rpx;
color: #111111;
font-weight: 700;
text-align: center;
margin-bottom: 40rpx;
}
.user{
font-size: 28rpx;
font-weight: 500;
color: #888888;
text-align: center;
}
}
.closeIcon{
margin: 35rpx auto 0;
display: flex;
justify-content: center;
}
</style>
pages/coffee/myOrder.vue 0 → 100644
View file @ 19f253de
<template>
<view class="myOrder">
<view v-for="(item,index) in list2" :key="index" class="item" @click="goDetail(0)">
<view class="top">
<view class="orderNo">
{{item.OrderNo}}
</view>
<view class="orderStatus">
{{item.OrderStatus}}
</view>
</view>
<view class="itemInfoBox">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup2.png" mode="heightFix" style="width: auto;height: 130rpx;"></image>
<view class="itemInfo">
<view class="itemName">
星巴克咖啡10杯
</view>
<view class="CreateDate">
{{item.CreateDate}}
</view>
</view>
<view class="price">
<text class="icon">¥ </text> {{item.PreferPrice}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list2: [{
OrderNo:'000',
PreferPrice:200,
OrderStatus:"已完成",
CreateDate:"2020-03-01"
},{
OrderNo:'000',
PreferPrice:200,
OrderStatus:"已完成",
CreateDate:"2020-03-01"
},{
OrderNo:'000',
PreferPrice:200,
OrderStatus:"已完成",
CreateDate:"2020-03-01"
}],
list: [],
msg:{
pageIndex:1,
pageSize:10,
OrderStatus:0,
OrderNo:"",
},
pageCount:0,
}
},
methods:{
getData() {
this.request2({
url: '/api/AppletCoffee/GetMyCofeeOrderPageList',
data: this.msg
},
res => {
this.pageCount=res.pageCount
if(this.msg.pageIndex===1){
this.list = res.data.pageData
}else{
this.list=this.list.concat(res.data.pageData)
}
}
);
},
goDetail(id){
uni.navigateTo({
url:'/pages/coffee/orderDetail?id='+id
})
}
},
onLoad() {
this.getData()
uni.setNavigationBarTitle({
title: "我的订单"
})
}
}
</script>
<style lang="scss" scoped>
.myOrder {
min-height: 100vh;
background-color: #F5F5F5;
padding-top: 35rpx;
}
.item{
width: 684rpx;
background-color: #FFFFFF;
border-radius: 4rpx;
margin: 0 auto;
padding: 0rpx 40rpx;
margin-bottom: 35rpx;
.top{
height: 84rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e8e8e8;
.orderNo{
font-size: 28rpx;
font-weight: 500;
color: #000000;
}
.orderStatus{
font-size: 24rpx;
font-weight: 400;
color: #666666;
}
}
.itemInfoBox{
display: flex;
flex-wrap: nowrap;
align-items: center;
padding-bottom: 30rpx;
.itemInfo{
flex-grow: 1;
padding:0 20rpx;
.itemName{
font-size: 28rpx;
font-weight: bold;
color: #000000;
margin-top: 20rpx ;
margin-bottom: 15rpx;
}
.CreateDate{
font-size: 24rpx;
font-weight: 400;
color: #666666;
}
}
.price{
font-size: 48rpx;
font-weight: bold;
color: #F65C10;
.icon{
font-size: 28rpx;
font-weight:400;
margin-right: 4rpx;
}
}
}
}
</style>
pages/coffee/mySpend.vue 0 → 100644
View file @ 19f253de
<template>
<view class="myOrder">
<view v-for="(item,index) in list2" :key="index" class="item">
<view class="top">
<view class="name">
{{item.name}}
</view>
<view class="Number">
-{{item.Number}}
</view>
</view>
<view class="top">
<view class="CreateDate">
{{item.CreateDate}}
</view>
<view class="Remark">
{{item.Remark}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list2: [{
name:'星巴克咖啡',
Number:1,
Type:"已完成",
CreateDate:"2020-03-01",
Remark:"余12杯"
},{
name:'星巴克咖啡',
Number:1,
Type:"已完成",
CreateDate:"2020-03-01",
Remark:"余12杯"
},{
name:'星巴克咖啡',
Number:1,
Type:"已完成",
CreateDate:"2020-03-01",
Remark:"余12杯"
}],
list: [],
msg:{
pageIndex:1,
pageSize:10,
Type:0,
},
pageCount:0,
}
},
methods:{
getData() {
this.request2({
url: '/api/AppletCoffee/GetMyCoffeeCouponsPageList',
data: this.msg
},
res => {
this.pageCount=res.pageCount
if(this.msg.pageIndex===1){
this.list = res.data.pageData
}else{
this.list=this.list.concat(res.data.pageData)
}
}
);
},
},
onLoad() {
this.getData()
uni.setNavigationBarTitle({
title: "我的消费"
})
}
}
</script>
<style lang="scss" scoped>
.myOrder {
min-height: 100vh;
background-color: #F5F5F5;
padding-top: 35rpx;
}
.item{
width: 684rpx;
background-color: #FFFFFF;
border-radius: 4rpx;
margin: 0 auto;
padding: 16rpx 40rpx;
margin-bottom: 24rpx;
.top{
display: flex;
justify-content: space-between;
align-items: center;
margin: 10rpx 0;
.name{
font-size: 28rpx;
font-weight: 500;
color: #000000;
}
.orderStatus{
font-size: 30rpx;
color: #000000;
}
.CreateDate{
font-size: 24rpx;
color: #666666;
}
.Remark{
font-size: 20rpx;
color: #CFCFCF;
}
}
}
</style>
pages/coffee/orderDetail.vue 0 → 100644
View file @ 19f253de
<template>
<view class="confirmOrder">
<view class="status">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/starbuckslogo.png"
mode="widthFix" style="width: 190rpx;height: auto;"></image>
<view class="orderStatus">
已完成
</view>
</view>
<view class="addr">
<view class="info">
<text class="store">阳光新业店</text>
<text class="type">到店消费</text>
</view>
<view class="addrText">{{item.addr}}</view>
</view>
<view class="orderDetail">
<view class="row1">
<view class="row1Sub">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup2.png"
mode="" style="width: 150rpx;height: 150rpx;"></image>
<view class="coffeeInfo">
<view class="num">
星巴克咖啡{{item.BuyNum||0}}杯
</view>
<view class="give">
买{{item.BuyNum||0}}杯赠送{{item.GiveAwayNum||0}}杯
</view>
<view class="tip">
(赠送咖啡可随意选择)
</view>
</view>
</view>
<view class="price">
<text class="icon">¥</text>{{detailData.total_price}}
</view>
</view>
<view class="row2">
<view class="label">购买数量</view>
<view class="value">{{item.BuyNum||0}} 杯</view>
</view>
<view class="row2">
<view class="label">赠送数量</view>
<view class="value">{{item.GiveAwayNum||0}} 杯</view>
</view>
<view class="row2">
<view class="label">使用期限</view>
<view class="value">6个月</view>
</view>
<view class="row3">
<text class="name">应付</text>
<text class="totalPrice"> ¥{{detailData.total_price}}</text>
</view>
<view class="row4">
下单时间：2022-02-28 15:49
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
item: {},
detailData: {},
msg:{
OrderId:0
},
}
},
onLoad(options) {
uni.setNavigationBarTitle({
title: "订单详情"
})
},
methods: {
getInfo() {
this.request2({
url: '/api/AppletOrder/GetMyCoffeeOrderInfo',
data: this.msg
},
res => {
if (res.resultCode == 1) {
}
}
);
},
}
}
</script>
<style lang="scss" scoped>
.confirmOrder {
min-height: 100vh;
background-color: #F5F5F5;
padding-top: 30rpx;
}
.status{
height: 340rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
.orderStatus{
width: 100%;
font-size: 34rpx;
font-weight: bold;
color: #000000;
text-align: center;
margin-top: 26rpx;
}
}
.addr {
width: 684rpx;
background-color: #FFFFFF;
border-radius: 4rpx;
margin: 0 auto;
padding: 30rpx 40rpx;
margin-bottom: 36rpx;
.info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.store {
font-size: 28rpx;
font-weight: bold;
color: #000000;
}
.type {
font-size: 24rpx;
font-weight: 400;
color: #BABABA;
}
}
.addrText {
font-size: 24rpx;
font-weight: 400;
color: #999999;
}
}
.orderDetail {
width: 684rpx;
background-color: #FFFFFF;
border-radius: 4rpx;
margin: 0 auto;
padding: 0rpx 30rpx;
.row1 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40rpx;
.row1Sub {
display: flex;
justify-content: space-between;
align-items: center;
}
.coffeeInfo {
margin-left: 48rpx;
padding-top: 20rpx;
.num {
font-size: 28rpx;
font-weight: bold;
color: #000000;
margin: 10rpx 0;
}
.give {
font-size: 24rpx;
font-weight: 400;
color: #666666;
margin-bottom: 10rpx;
}
.tip {
font-size: 24rpx;
font-weight: 400;
color: #999999;
}
}
.price {
font-size: 34rpx;
font-weight: bold;
color: #F65C10;
.icon {
font-size: 28rpx;
font-weight: 400;
}
}
}
.row2 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15rpx;
.label {
font-size: 28rpx;
color: #000000;
}
.value {
font-size: 24rpx;
font-weight: 500;
color: #000000;
}
}
.row3 {
height: 106rpx;
display: flex;
justify-content: flex-end;
align-items: center;
.name {
font-size: 24rpx;
font-weight: 800;
color: #666666;
}
.totalPrice {
font-size: 28rpx;
color: #000000;
margin-left: 8rpx;
}
}
.row4{
line-height:80rpx;
font-size: 24rpx;
color: #999999;
border-top:1px solid #E8E8E8;
}
}
</style>
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