Skip to content

严立 / mini-shimao

Go to a project
Commit 9ccd285c by 严立
Options

LL - 我的静态

parents 23943668 12631291
Inline Side-by-side
Showing with 2159 additions and 55 deletions
app.json
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"pages/commodity/home/home", "pages/commodity/home/home",
"pages/commodity/shopping-cart/shopping-cart", "pages/commodity/shopping-cart/shopping-cart",
"pages/commodity/project/project", "pages/commodity/project/project",
"pages/commodity/project-detail/project-detail",
"pages/commodity/menu-art/menu-art", "pages/commodity/menu-art/menu-art",
"pages/commodity/menu-food/menu-food", "pages/commodity/menu-food/menu-food",
"pages/commodity/menu-snacks/menu-snacks", "pages/commodity/menu-snacks/menu-snacks",
...@@ -50,7 +51,7 @@ ...@@ -50,7 +51,7 @@
"pages/pay/order-input/order-input", "pages/pay/order-input/order-input",
"pages/pay/order-state/order-state", "pages/pay/order-state/order-state",
"pages/pay/order-detail/order-detail", "pages/pay/order-detail/order-detail",
"pages/pay/order-comment/order-comment",
"pages/pay/coupon/coupon", "pages/pay/coupon/coupon",
"pages/pay/coupon-input/coupon-input", "pages/pay/coupon-input/coupon-input",
"pages/pay/coupon-detail/coupon-detail", "pages/pay/coupon-detail/coupon-detail",
...@@ -81,7 +82,9 @@ ...@@ -81,7 +82,9 @@
"l-collapse-item": "../miniprogram_npm/lin-ui/collapse-item/index", "l-collapse-item": "../miniprogram_npm/lin-ui/collapse-item/index",
"l-textarea": "../miniprogram_npm/lin-ui/textarea/index", "l-textarea": "../miniprogram_npm/lin-ui/textarea/index",
"l-notice-bar": "../miniprogram_npm/lin-ui/notice-bar/index", "l-notice-bar": "../miniprogram_npm/lin-ui/notice-bar/index",
"l-popup": "./miniprogram_npm/lin-ui/popup/index" "l-popup": "./miniprogram_npm/lin-ui/popup/index",
"l-image-picker": "./miniprogram_npm/lin-ui/image-picker/index",
"l-rate": "./miniprogram_npm/lin-ui/rate/index"
}, },
"window": { "window": {
"navigationStyle": "custom", "navigationStyle": "custom",
......
image/up.png 0 → 100644
image/up.png

318 Bytes
pages/commodity/project-detail/project-detail.js 0 → 100644
// pages/commodity/project-detail/project-detail.js
Page({
data: {
projectType: 3, // 1 儿童营地，2 - SPA，3 - 文创
titleText: '',
bgColor: '',
backgroundImg: '',
projectList: []
},
onLoad: function (options) {
let { projectType } = this.data
switch (projectType) {
case 1:
this.setData({
titleText: '儿童营地',
backgroundImg: '',
bgColor: 'linear-gradient(180deg, rgba(246, 218, 218, 0) 0%, #F6DADA 100%)',
projectList: [
{
id: 0,
cover: '',
name: '儿童营地日票（次票）',
priceSpecial: '10',
price: '49',
unit: '次',
btn: '购买门票',
isSpecial: true
},
{
id: 1,
cover: '',
name: '儿童营地日票（套票）',
priceSpecial: '80',
price: '100',
unit: '次',
btn: '购买门票',
isSpecial: true
},
{
id: 2,
cover: '',
name: '儿童营地月卡',
priceSpecial: '300',
price: '500',
unit: '人',
btn: '购买门票',
isSpecial: true
},
{
id: 3,
cover: '',
name: '儿童营地年卡',
priceSpecial: '1680',
price: '2680',
unit: '人',
btn: '购买门票',
isSpecial: true
}
]
})
break
case 2:
this.setData({
titleText: '元养水韵SPA服务',
backgroundImg: '',
bgColor: '#8FC3CB',
projectList: [
{
id: 0,
cover: '',
name: '泰国皇室经典SPA芳香精油理疗套餐',
msg: '保湿补水，深层清洁，提亮肤色',
priceSpecial: '120',
price: '180',
btn: '购买',
isSpecial: true
},
{
id: 1,
cover: '',
name: '全身舒缓释压芳香SPA护理',
msg: '保湿补水，深层清洁，提亮肤色',
priceSpecial: '120',
price: '180',
btn: '购买',
isSpecial: false
},
]
})
break
case 3:
this.setData({
titleText: '海错图购票',
backgroundImg: '',
bgColor: '#F5ECD8',
projectList: [
{
id: 0,
cover: '',
name: '海错图平日票',
priceSpecial: '42',
price: '49',
unit: '人',
btn: '购买门票',
isSpecial: true
},
{
id: 1,
cover: '',
name: '海错图周末票',
priceSpecial: '60',
price: '80',
unit: '人',
btn: '购买门票',
isSpecial: true
}
]
})
break
}
},
})
\ No newline at end of file
pages/commodity/project-detail/project-detail.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/commodity/project-detail/project-detail.wxml 0 → 100644
<navigation class="navigation" titleText="{{titleText}}" backIcon="/image/back.png"></navigation>
<view class="container con-s" style="background: {{bgColor}}">
<view class="background-img">
<image src="{{backgroundImg}}"></image>
</view>
<block wx:for="{{projectList}}" wx:key="id">
<view class="project-wrapper col">
<view class="project-cover">
<image src=""></image>
</view>
<view class="project-info">
<view class="project-name">
<text>{{item.name}}</text>
</view>
<view class="project-msg" wx:if="{{item.msg}}">
<text>{{item.msg}}</text>
</view>
<view class="project-price-wrapper row align-c">
<view class="price-special-msg" wx:if="{{item.isSpecial}}">
<text>业主价</text>
</view>
<view class="price-special">
<text class="price-symbol">￥</text>
<text>{{item.priceSpecial}}</text>
<text class="price-unit" wx:if="{{item.unit}}">{{'/' + item.unit}}</text>
</view>
<view class="price-old">
<text>{{'￥' + item.price}}</text>
<text class="price-old-unit" wx:if="{{item.unit}}">{{'/' + item.unit}}</text>
</view>
</view>
<view class="project-btn">
<text>{{item.btn}}</text>
</view>
</view>
</view>
</block>
</view>
\ No newline at end of file
pages/commodity/project-detail/project-detail.wxss 0 → 100644
.container {
height: 100%;
padding-bottom: 96rpx;
}
.background-img {
width: 750rpx;
height: 700rpx;
background-color: pink;
}
.project-wrapper {
margin-bottom: 48rpx;
border-radius: 4rpx;
}
.project-cover {
width: 670rpx;
height: 376rpx;
background-color: lightpink;
}
.project-info {
position: relative;
padding: 32rpx;
background-color: #fff;
}
.project-name {
color: #15191F;
font-size: 34rpx;
font-weight: 600;
line-height: 48rpx;
}
.project-msg {
margin-top: 16rpx;
color: #959DA9;
font-size: 26rpx;
line-height: 36rpx;
}
.project-price-wrapper {
height: 64rpx;
margin-top: 40rpx;
line-height: 64rpx;
}
.price-special-msg {
width: 78rpx;
height: 32rpx;
margin-right: 12rpx;
color: #E8D0AF;
font-size: 18rpx;
text-align: center;
line-height: 32rpx;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
}
.price-special {
margin-right: 12rpx;
color: #EF4E4E;
font-size: 34rpx;
line-height: 34rpx;
font-weight: 600;
}
.price-symbol {
font-size: 24rpx;
}
.price-unit {
font-size: 20rpx;
}
.price-old {
margin-top: 10rpx;
color: #959DA9;
font-size: 22rpx;
line-height: 32rpx;
letter-spacing: 1rpx;
text-decoration: line-through;
}
.price-old-unit {
font-size: 18rpx;
}
.project-btn {
position: absolute;
right: 32rpx;
bottom: 32rpx;
width: 152rpx;
height: 64rpx;
color: #fff;
font-size: 26rpx;
line-height: 64rpx;
text-align: center;
background-color: #86C5E1;
border-radius: 4rpx;
}
image {
width: 100%;
height: 100%;
}
\ No newline at end of file
pages/commodity/project/project.js
Page({ Page({
data: { data: {
projectType: 1, // 1 儿童营地，2 - SPA，3 - 文创， 5 - 餐品， 6 - 活动， 7 - 观影
bannerIndex: 0,
banner: [
{
id: 0,
img: ''
},
{
id: 1,
img: ''
},
{
id: 2,
img: ''
}
],
projectAll: {
projectArt: {
projectType: 3,
btn: '购买门票',
titleImg: '',
list: [
{
id: 0,
cover: '',
name: '海错图平日票',
msg: {
0: '周一至周五'
},
priceSpecial: '42',
price: '49',
unit: '人'
},
{
id: 1,
cover: '',
name: '海错图平日票',
msg: {
0: '周六至周日'
},
priceSpecial: '42',
price: '49',
unit: '人'
}
]
},
projectSpa: {
projectType: 2,
btn: '查看服务',
list: [
{
id: '0',
name: 'SPA套餐',
cover: '',
priceSpecial: '298 - 698',
price: '300 - 900',
unit: '人'
}
]
},
projectChild: {
projectType: 1,
btn: '购买门票',
list: [
{
id: 0,
name: '日票（次票）',
priceSpecial: '10',
price: '49',
unit: '次',
msg: {
0: '单次进园',
1: '室外游乐设备免费',
2: '室内场馆及马场需单独收费'
}
},
{
id: 1,
name: '日票（套票）',
priceSpecial: '80',
price: '100',
unit: '次',
msg: {
0: '单次进园',
1: '室外游乐设备免费',
2: '室内场馆及马场均免费'
}
},
{
id: 2,
name: '儿童营地月卡',
priceSpecial: '300',
price: '500',
unit: '人',
msg: {
0: '一个月内无限次进园',
1: '室外游乐设备免费',
2: '室内场馆及马场均免费'
}
},
{
id: 3,
name: '儿童营地年卡',
priceSpecial: '1680',
price: '2680',
unit: '人',
msg: {
0: '一年内无限次进园',
1: '室外游乐设备免费',
2: '室内场馆及马场均免费'
}
}
]
}
}
}, },
onLoad: function (options) { onLoad: function (options) {
}, },
/**
* banner 切换图片同步自定义标识组件
* @function
* @param {object} - funcEvent
* @returns
*/
onSwiperChange: function (funcEvent) {
this.setData({
bannerIndex: funcEvent.detail.current
})
},
}) })
\ No newline at end of file
pages/commodity/project/project.wxml
<!--pages/home/home/home.wxml--> <navigation class="navigation" titleText="所有项目服务" color="#FFFFFF" backIcon="/image/back-w.png"></navigation>
<text>pages/home/home/home.wxml</text>
<view class="container">
<view class="banner">
<swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="5000" duration="500" bindchange="onSwiperChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="banner-swiper-item" data-item="{{item}}" bindtap="bannerClick">
{{item.id}}
<image class="banner-swiper-image" src="{{item.img}}"></image>
</swiper-item>
</block>
</swiper>
<view class="banner-swiper-point">
<swiper-point bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</view>
</view>
<block wx:for="{{projectAll}}" wx:for-index="key" wx:for-item="value">
<view class="project-wrapper">
<view class="project-title">
<image src="{{value.titleImg}}"></image>
</view>
<block wx:for="{{value.list}}">
<view class="project-item row">
<view class="project-cover">
<image src="{{item.cover}}"></image>
</view>
<view class="project-content row">
<view class="project-info">
<view class="project-name">
<text>{{item.name}}</text>
</view>
<view class="project-msg col">
<block wx:for="{{item.msg}}" wx:for-index="k" wx:for-item="msg">
<text>{{msg}}</text>
</block>
</view>
</view>
<view class="project-price-wrapper col align-e">
<view class="project-price-special row align-c">
<view class="price-wrap">
<text class="price-symbol">￥</text>
<text class="price-special">{{item.priceSpecial}}</text>
<text class="price-symbol">{{'/' + item.unit}}</text>
</view>
<view class="price-special-msg">
<text>业主价</text>
</view>
</view>
<view class="project-price-old">
<text class="price-old">{{'￥' + item.price}}</text>
<text class="price-symbol-old">/人</text>
</view>
<view class="project-buy-wrapper col align-e">
<view class="project-buy-btn">
<text>{{value.btn}}</text>
</view>
</view>
</view>
</view>
</view>
</block>
</view>
</block>
</view>
pages/commodity/project/project.wxss
/* pages/home/home/home.wxss */ .container {
\ No newline at end of file padding-bottom: 160rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%, #F3F4F6 100%, #F3F4F6 100%);
}
.banner {
z-index: 9;
position: relative;
width: 750rpx;
height: 800rpx;
background-color: #ccc;
}
.banner-swiper,
.banner-swiper-item,
.banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx;
height: 800rpx;
}
.banner-swiper-point {
position: relative;
top: 723rpx;
left: 0;
}
.project-wrapper {
width: 670rpx;
margin-top: 48rpx;
padding: 36rpx 32rpx 14rpx;
background-color: #fff;
}
.project-title {
height: 88rpx;
background-color: #ccc;
}
.project-item {
margin-top: 48rpx;
padding-bottom: 50rpx;
border-bottom: 1px solid #E2E7EF;
}
.project-item:last-child {
border-bottom: none;
}
.project-cover {
width: 128rpx;
height: 128rpx;
background-color: #ccc;
}
.project-content {
margin-left: 24rpx;
flex: 1;
}
.project-info {
}
.project-name {
height: 46rpx;
color: #15191F;
font-size: 30rpx;
font-weight: 600;
}
.project-msg text {
margin-top: 8rpx;
color: #959DA9;
font-size: 22rpx;
}
.project-price-wrapper {
flex: 1;
height: 100%;
width: 100%;
}
.project-price-special {
}
.price-wrap {
color: #EF4E4E;
letter-spacing: 2rpx;
display: table-cell;
vertical-align: bottom;
}
.price-symbol {
font-size: 24rpx;
}
.price-special {
font-size: 34rpx;
}
.price-special-msg {
width: 78rpx;
height: 32rpx;
color: #E8D0AF;
font-size: 18rpx;
text-align: center;
line-height: 32rpx;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
}
.project-price-old {
height: 32rpx;
color: #959DA9;
line-height: 32rpx;
text-decoration: line-through;
}
.price-old {
font-size: 22rpx;
}
.price-symbol-old {
font-size: 20rpx;
}
.project-buy-wrapper {
flex: 1;
}
.project-buy-btn {
width: 120rpx;
height: 56rpx;
margin-top: 24rpx;
color: #fff;
font-size: 22rpx;
line-height: 56rpx;
text-align: center;
background-color: #86C5E1;
border-radius: 4rpx;
}
image {
width: 100%;
height: 100%;
}
pages/home/home/home.js
...@@ -342,4 +342,10 @@ Page({ ...@@ -342,4 +342,10 @@ Page({
url: '/pages/pay/order-detail/order-detail?type=' + event.currentTarget.dataset.index url: '/pages/pay/order-detail/order-detail?type=' + event.currentTarget.dataset.index
}) })
}, },
onTest6: function (event) {
wx.navigateTo({
url: '/pages/pay/order-comment/order-comment',
});
}
}) })
\ No newline at end of file
pages/home/home/home.wxml
...@@ -86,11 +86,16 @@ ...@@ -86,11 +86,16 @@
<button class="test-button" data-index="{{5}}" bindtap="onTest">餐品</button> <button class="test-button" data-index="{{5}}" bindtap="onTest">餐品</button>
<button class="test-button" data-index="{{6}}" bindtap="onTest">活动</button> <button class="test-button" data-index="{{6}}" bindtap="onTest">活动</button>
<button class="test-button" data-index="{{7}}" bindtap="onTest">观影</button> <button class="test-button" data-index="{{7}}" bindtap="onTest">观影</button>
<button class="test-button" bindtap="onTest2">餐品列表</button>
<button class="test-button" data-index="{{0}}" bindtap="onTest3">订单 未使用</button> <button class="test-button" data-index="{{0}}" bindtap="onTest3">订单 未使用</button>
<button class="test-button" data-index="{{1}}" bindtap="onTest3">订单 待评价</button> <button class="test-button" data-index="{{1}}" bindtap="onTest3">订单 待评价</button>
<button class="test-button" data-index="{{2}}" bindtap="onTest3">订单 已过期</button> <button class="test-button" data-index="{{2}}" bindtap="onTest3">订单 已过期</button>
<button class="test-button" data-index="{{3}}" bindtap="onTest3">订单 已取消</button> <button class="test-button" data-index="{{3}}" bindtap="onTest3">订单 已取消</button>
<button class="test-button" data-index="{{4}}" bindtap="onTest3">订单 已评价</button> <button class="test-button" data-index="{{4}}" bindtap="onTest3">订单 已评价</button>
<button class="test-button" data-index="{{5}}" bindtap="onTest3">订单 待付款</button> <button class="test-button" data-index="{{5}}" bindtap="onTest3">订单 待付款</button>
<button class="test-button" bindtap="onTest4">券码核销</button>
<button class="test-button" data-index="{{4}}" bindtap="onTest5">券码详情 普通</button>
<button class="test-button" data-index="{{5}}" bindtap="onTest5">券码详情 餐品</button>
<button class="test-button" bindtap="onTest6">评价订单</button>
</view> </view>
</view> </view>
\ No newline at end of file
pages/mine/card/card.js
const App = getApp()
Page({ Page({
data: { data: {
imageBase: App.globalData.appImageBase,
passListType: 0, // 0为单张卡 1为多张卡
privateStatus: true,
swiperCurrent: 0,
passList: [
{
id: 0,
title: '精灵鸟理想国年卡',
name: '文碧海',
privateName: '文*海',
phone: '17633564488',
privatePhone: '176****4455',
idNum: '211222009900990090',
privateIdNum: '211222****0090',
codeNum: '2719 7092 0925',
codeImg: '',
useTime: '2019.09.30 - 2020.12.30'
}
]
}, },
onLoad: function (options) { onLoad: function (options) {
// if (options.type) options.type = Number(options.type)
// this.setData({
// passListType: options.type
// })
this.setView()
},
setView: function () {
switch (this.data.passListType) {
case 0:
this.setData({
passList: [
{
id: 0,
title: '精灵鸟理想国年卡',
name: '文碧海',
privateName: '文*海',
phone: '17633564488',
privatePhone: '176****4455',
idNum: '211222009900990090',
privateIdNum: '211222****0090',
codeNum: '2719 7092 0925',
codeImg: '',
useTime: '2019.09.30 - 2020.12.30'
}
]
})
break
case 1:
this.setData({
passList: [
{
id: 0,
title: '精灵鸟理想国年卡',
name: '文碧海',
privateName: '文*海',
phone: '17633564488',
privatePhone: '176****4455',
idNum: '211222009900990090',
privateIdNum: '211222****0090',
codeNum: '2719 7092 0925',
codeImg: '',
useTime: '2019.09.30 - 2020.12.30'
},
{
id: 0,
title: '精灵鸟理想国年卡',
name: '文碧海',
privateName: '文*海',
phone: '17633564488',
privatePhone: '176****4455',
idNum: '211222009900990090',
privateIdNum: '211222****0090',
codeNum: '2719 7092 0925',
codeImg: '',
useTime: '2019.09.30 - 2020.12.30'
},
{
id: 0,
title: '精灵鸟理想国年卡',
name: '文碧海',
privateName: '文*海',
phone: '17633564488',
privatePhone: '176****4455',
idNum: '211222009900990090',
privateIdNum: '211222****0090',
codeNum: '2719 7092 0925',
codeImg: '',
useTime: '2019.09.30 - 2020.12.30'
}
]
})
break
}
},
// 滑动swiper
eventSwiperChange: function(e) {
let swiperCurrent = e.detail.current
this.setData({
swiperCurrent
})
}, },
//点击信息是否加密
onShowPrivate: function () {
let privateStatus = !this.data.privateStatus
this.setData({
privateStatus
})
}
}) })
\ No newline at end of file
pages/mine/card/card.wxml
<!--pages/home/home/home.wxml--> <navigation class="navigation" titleText="我的年卡/月卡" backIcon="/image/back.png"></navigation>
<text>pages/home/home/home.wxml</text>
<view class="container con-s">
<!-- 单张卡 -->
<view class="card-wrapper" wx:if="{{passListType === 0}}">
<view class="card-header">
<view class="use-notice row align-c">
<text>使用须知</text>
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
<view class="card-header-title">
<text>{{passList[0].title}}</text>
</view>
<view class="card-header-info">
<view class="row align-c">
<view class="card-header-info-left row con-b">
<text>姓</text>
<text>名</text>
</view>
<view class="card-header-info-right">
<text wx:if="{{privateStatus}}">{{passList[0].privateName}}</text>
<text wx:else>{{passList[0].name}}</text>
</view>
<view class="card-info-visible">
<image wx:if="{{privateStatus}}"></image>
<image wx:else></image>
</view>
</view>
<view class="row align-c">
<view class="card-header-info-left row con-b">
<text>手</text>
<text>机</text>
<text>号</text>
</view>
<view class="card-header-info-right">
<text wx:if="{{privateStatus}}">{{passList[0].privatePhone}}</text>
<text wx:else>{{passList[0].phone}}</text>
</view>
</view>
<view class="row align-c">
<view class="card-header-info-left row con-b align-c">
<text>身</text>
<text>份</text>
<text>证</text>
<text>号</text>
</view>
<view class="card-header-info-right">
<text wx:if="{{privateStatus}}">{{passList[0].privateIdNmu}}</text>
<text wx:else>{{passList[0].privateIdNmu}}</text>
</view>
</view>
</view>
</view>
<view class="card-main col align-c">
<view class="code-num-wrapper row align-c con-c">
<text class="code-num-title">券码：</text>
<text class="code-num">{{passList[0].codeNum}}</text>
<text class="code-copy">复制</text>
</view>
<view class="QRcode">
<image src="{{passList[0].codeImg}}"></image>
</view>
<view class="code-use-time">
<text>{{passList[0].useTime}}</text>
</view>
<view class="look-order row align-c con-c">
<text>查看订单</text>
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
</view>
</view>
<!-- 多张卡 -->
<swiper class="card-list" wx:else indicator-dots indicator-color="#fff" indicator-active-color="#E57C99" next-margin="44rpx" bindchange="eventSwiperChange">
<block wx:for="{{passList}}" wx:key="id">
<swiper-item>
<view class="card-wrapper {{index === swiperCurrent ? 'item-right' : ''}} {{swiperCurrent === passList.length-1 ? 'item-center' : ''}}">
<view class="card-header">
<view class="use-notice row align-c">
<text>使用须知</text>
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
<view class="card-header-title">
<text>{{item.title}}</text>
</view>
<view class="card-header-info">
<view class="row align-c">
<view class="card-header-info-left row con-b">
<text>姓</text>
<text>名</text>
</view>
<view class="card-header-info-right">
<text wx:if="{{privateStatus}}">{{item.privateName}}</text>
<text wx:else>{{item.name}}</text>
</view>
<view class="card-info-visible" bindtap="onShowPrivate">
<image wx:if="{{true}}"></image>
<image wx:else></image>
</view>
</view>
<view class="row align-c">
<view class="card-header-info-left row con-b">
<text>手</text>
<text>机</text>
<text>号</text>
</view>
<view class="card-header-info-right">
<text wx:if="{{privateStatus}}">{{item.privatePhone}}</text>
<text wx:else>{{item.phone}}</text>
</view>
</view>
<view class="row align-c">
<view class="card-header-info-left row con-b align-c">
<text>身</text>
<text>份</text>
<text>证</text>
<text>号</text>
</view>
<view class="card-header-info-right">
<text wx:if="{{privateStatus}}">{{item.privateIdNum}}</text>
<text wx:else>{{item.idNum}}</text>
</view>
</view>
</view>
</view>
<view class="card-main col align-c">
<view class="code-num-wrapper row align-c con-c">
<text class="code-num-title">券码：</text>
<text class="code-num">{{item.codeNum}}</text>
<text class="code-copy">复制</text>
</view>
<view class="QRcode">
<image src="{{item.codeImg}}"></image>
</view>
<view class="code-use-time">
<text>{{item.useTime}}</text>
</view>
<view class="look-order row align-c con-c">
<text>查看订单</text>
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
\ No newline at end of file
pages/mine/card/card.wxss
/* pages/home/home/home.wxss */ .container {
\ No newline at end of file height: 100vh;
padding-top: 232rpx;
background: linear-gradient(180deg, #FFFCFC 0%, #F6DADA 100%);
}
.card-list {
width: 750rpx;
height: 1062rpx;
}
.card-wrapper {
width: 626rpx;
height: 992rpx;
}
.item-right {
margin: 0 40rpx;
}
.item-center {
margin-left: 62rpx;
}
.card-header {
position: relative;
height: 326rpx;
padding: 48rpx 32rpx;
color: #fff;
background: linear-gradient(137deg, #BEDAF9 0%, #7BB2F0 100%);
border-radius: 4rpx;
}
.use-notice {
position: absolute;
top: 61rpx;
right: 34rpx;
font-size: 26rpx;
}
.use-notice image {
width: 32rpx;
height: 32rpx;
}
.card-header-title {
font-size: 42rpx;
font-weight: 600;
}
.card-header-info {
margin-top: 23rpx;
font-size: 26rpx;
}
.card-header-info-left {
width: 104rpx;
height: 52rpx;
line-height: 52rpx;
}
.card-header-info-right {
margin-left: 24rpx;
height: 52rpx;
line-height: 52rpx;
}
.card-info-visible {
width: 36rpx;
height: 20rpx;
margin-left: 18rpx;
background-color: #ccc;
}
.card-main {
height: 666rpx;
background-color: #fff;
border-radius: 0 0 4rpx 4rpx;
}
.code-num-wrapper {
margin-top: 57rpx;
}
.code-num-title {
color: #959DA9;
font-size: 26rpx;
line-height: 36rpx;
font-weight: 600;
}
.code-num {
color: #15191F;
font-size: 30rpx;
line-height: 42rpx;
}
.code-copy {
margin-left: 24rpx;
color: #86C5E1;
font-size: 26rpx;
font-weight: 600;
line-height: 36rpx;
}
.QRcode {
width: 296rpx;
height: 296rpx;
margin: 57rpx 0;
background-color: #ccc;
}
.code-use-time {
color: #959DA9;
font-size: 26rpx;
}
.look-order {
margin-top: 32rpx;
}
.look-order image{
margin-left: 8rpx;
width: 32rpx;
height: 32rpx;
}
image {
width: 100%;
height: 100%;
}
\ No newline at end of file
pages/mine/home/home.js
...@@ -8,6 +8,8 @@ Page({ ...@@ -8,6 +8,8 @@ Page({
data: { data: {
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
orderType: 1, // 1 - 年卡/月卡，2 - 次票， 3 - SPA， 4 - 文创， 5 - 餐品， 6 - 活动， 7 - 观影
mobile: '', mobile: '',
nickName: '', nickName: '',
avatarUrl: '/pages/mine/home/image/avatar.png', avatarUrl: '/pages/mine/home/image/avatar.png',
...@@ -16,8 +18,61 @@ Page({ ...@@ -16,8 +18,61 @@ Page({
type: 0, //判断是否是认证的了 type: 0, //判断是否是认证的了
approveList: ['园区门票优惠', '餐厅价格优惠', 'SPA服务优惠', '免费观看电影', '无须预约入园', '尽享多重特权'], approveList: ['园区门票优惠', '餐厅价格优惠', 'SPA服务优惠', '免费观看电影', '无须预约入园', '尽享多重特权'],
activityList: [], activityList: [],
appointmentList: [], isRegister: false, // 是否注册,
isRegister: false, // 是否注册
// 右上角消息
passBadge: 0,
foodBadge: 22 ,
movieBadge: 1,
spaBadge: 0,
artBadge: 101,
showMoreOrder: false, // 查看更多订单
showMoreActivity: false, // 查看更多活动
myOrder: {
passOrder: [
{
id: 0,
logo: '',
store: '儿童营地',
title: '精灵鸟理想国年卡',
time: '有效期至 2020.09.30',
name: '文*海',
idNum: '211222****08080090'
},
{
id: 0,
logo: '',
store: '儿童营地',
title: '精灵鸟理想国年卡',
time: '有效期至 2020.09.30',
name: '文*海',
idNum: '211222****08080090'
},
],
artOrder: {
logo: '',
orderList: [
{
id: 0,
store: '海错图展馆',
cover: '../../pay/order-detail/image/goods_item.png',
title: '《海错图》展览单人门票',
time: '有效期至 2020.09.30',
quantity: '共1张门票'
},
]
}
},
appointmentList: [
{
time: '8月15日-7月15日 10:00-12:00',
img: '',
title: '日落观光游船体验活动之船行碧波共赏美景',
num: 3
}
]
}, },
close() { close() {
this.setData({ this.setData({
...@@ -258,4 +313,23 @@ Page({ ...@@ -258,4 +313,23 @@ Page({
url: '/pages/mine/order/order' url: '/pages/mine/order/order'
}) })
}, },
handleToCard: function () {
console.log('onOrder')
wx.navigateTo({
url: '/pages/mine/card/card'
})
},
//查看更多
onShowMoreOrder: function () {
let showMoreOrder = !this.data.showMoreOrder
this.setData({
showMoreOrder
})
},
onShowMoreActivity: function () {
let showMoreActivity = !this.data.showMoreActivity
this.setData({
showMoreActivity
})
}
}) })
\ No newline at end of file
pages/mine/home/home.wxml
<navigation class="navigation" titleText="我的" color="{{type == 1? '#FFFFFF' :''}}"></navigation> <navigation class="navigation" titleText="我的" color="{{type == 1? '#FFFFFF' :''}}"></navigation>
<view class="container" > <view class="container">
<view class="mine" wx:if="{{type == 0}}"> <view class="mine" wx:if="{{type == 0}}">
<image class="background-image" src="./image/mine.png"></image> <image class="background-image" src="./image/mine.png"></image>
<view class="row align-c"> <view class="row align-c">
...@@ -47,6 +47,16 @@ ...@@ -47,6 +47,16 @@
</view> </view>
</view> </view>
<view class="coupon row align-c">
<view class="cpopon-info col">
<text>券码核销</text>
<text>所属门店：拾光花坊</text>
</view>
<view class="">
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
</view>
<view class="status row con-b align-c" wx:if="{{type == 0}}"> <view class="status row con-b align-c" wx:if="{{type == 0}}">
<view class="status-symbol col"> <view class="status-symbol col">
...@@ -61,9 +71,10 @@ ...@@ -61,9 +71,10 @@
</view> </view>
<view class="menu"> <view class="menu">
<view class="order"> <!-- 订单 -->
<view class="row con-b align-c"> <view class="order-activity">
<view class="row align-c"> <view class="order-activity-title-wrapper row con-b align-c">
<view class="order-activity-title row align-c">
<text>我的订单</text> <text>我的订单</text>
</view> </view>
<view class="row align-c" bindtap="onOrder"> <view class="row align-c" bindtap="onOrder">
...@@ -71,21 +82,202 @@ ...@@ -71,21 +82,202 @@
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image> <image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view> </view>
</view> </view>
<view></view> <!-- 订单分类icno -->
</view> <view class="order-activity-icon-list row con-b">
<view class="order-activity-icon-wrapper col align-c">
<view class="order-activity-icon row con-c align-c">
<image src="/image/audit-err.png"></image>
<view class="order-activity-badge {{ passBadge > 9 ? 'badge-widen' : ''}}" wx:if="{{passBadge > 0}}">{{passBadge > 99 ? '···' : passBadge}}</view>
</view>
<text>门票</text>
</view>
<view class="order-activity-icon-wrapper col align-c">
<view class="order-activity-icon row con-c align-c">
<image src="/image/audit-err.png"></image>
<view class="order-activity-badge {{ foodBadge > 9 ? 'badge-widen' : ''}}" wx:if="{{foodBadge > 0}}">{{foodBadge > 99 ? '···' : foodBadge}}</view>
</view>
<text>餐饮</text>
</view>
<view class="order-activity-icon-wrapper col align-c">
<view class="order-activity-icon row con-c align-c">
<image src="/image/audit-err.png"></image>
<view class="order-activity-badge {{ movieBadge > 9 ? 'badge-widen' : ''}}" wx:if="{{movieBadge > 0}}">{{movieBadge > 99 ? '···' : movieBadge}}</view>
</view>
<text>影票</text>
</view>
<view class="order-activity-icon-wrapper col align-c">
<view class="order-activity-icon row con-c align-c">
<image src="/image/audit-err.png"></image>
<view class="order-activity-badge {{ spaBadge > 9 ? 'badge-widen' : ''}}" wx:if="{{spaBadge > 0}}">{{spaBadge > 99 ? '···' : spaBadge}}</view>
</view>
<text>SPA</text>
</view>
<view class="order-activity-icon-wrapper col align-c">
<view class="order-activity-icon row con-c align-c">
<image src="/image/audit-err.png"></image>
<view class="order-activity-badge {{ artBadge > 9 ? 'badge-widen' : ''}}" wx:if="{{artBadge > 0}}">{{artBadge > 99 ? '···' : artBadge}}</view>
</view>
<text>文创</text>
</view>
</view>
<view class="more-wrapper" wx:if="{{myOrder}}}">
<!-- 订单卡片 -->
<!-- 年卡 -->
<view class="pass-wrapper" wx:if="{{myOrder.passOrder}}" bindtap="handleToCard">
<view class="pass-bg-one" wx:if="{{myOrder.passOrder.length > 1}}"></view>
<view class="pass-bg-two" wx:if="{{myOrder.passOrder.length > 1}}"></view>
<view class="pass-logo-wrapper row align-c">
<image src="{{myOrder.passOrder[0].logo}}"></image>
<text>{{myOrder.passOrder[0].store}}</text>
</view>
<view class="pass-title">
<text>{{myOrder.passOrder[0].title}}</text>
</view>
<view class="pass-time">
<text>{{myOrder.passOrder[0].time}}</text>
</view>
<view class="pass-name">
<text>{{myOrder.passOrder[0].name}}</text>
</view>
<view class="pass-idNum">
<text>{{myOrder.passOrder[0].idNum}}</text>
</view>
</view>
<!-- 商品 -->
<view class="goods-wrapper">
<view class="goods-logo-wrapper row align-c">
<view class="art-logo">
<image src="{{myOrder.artOrder.logo}}"></image>
</view>
<text>{{myOrder.artOrder.orderList[0].store}}</text>
</view>
<view class="goods-content row align-c">
<image src="{{item.cover}}" wx:for="{{myOrder.artOrder.orderList}}" wx:key="id"></image>
<text wx:if="{{myOrder.artOrder.orderList.length === 1}}">{{myOrder.artOrder.orderList[0].title}}</text>
</view>
<view class="goods-footer row align-c con-b">
<text>{{myOrder.artOrder.orderList[0].time}}</text>
<text>{{myOrder.artOrder.orderList[0].quantity}}</text>
</view>
</view>
<!-- more -->
<view class="more row align-c con-c" bindtap="onShowMoreOrder">
<text wx:if="{{!showMoreOrder}}">展开更多</text>
<text wx:else>收起</text>
<image wx:if="{{!showMoreOrder}}" src="{{imageBase + 'icon/arrow-b-2.png'}}"></image>
<image wx:else src="{{imageBase + 'up.png'}}"></image>
</view>
</view>
</view>
<!-- 预约 -->
<view class="order-activity">
<view class="order-activity-title-wrapper row con-b align-c">
<view class="order-activity-title row align-c">
<text>我的预约</text>
</view>
<view class="row align-c" bindtap="onOrder">
<text>查看全部</text>
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
</view>
<!-- 预约分类icno -->
<view class="order-activity-icon-list row con-b">
<view class="order-activity-icon-wrapper col align-c">
<view class="order-activity-icon row con-c align-c">
<image src="/image/audit-err.png"></image>
<view class="order-activity-badge {{ badge > 9 ? 'badge-widen' : ''}}" wx:if="{{badge}}">{{badge}}</view>
</view>
<text>主题活动</text>
</view>
<view class="order-activity-icon-wrapper col align-c">
<view class="order-activity-icon row con-c align-c">
<image src="/image/audit-err.png"></image>
<view class="order-activity-badge {{ badge > 9 ? 'badge-widen' : ''}}" wx:if="{{badge}}">{{badge}}</view>
</view>
<text>夜间入园预约</text>
</view>
<view class="order-activity-icon-wrapper col align-c">
<view class="order-activity-icon row con-c align-c">
<image src="/image/audit-err.png"></image>
<view class="order-activity-badge {{ badge > 9 ? 'badge-widen' : ''}}" wx:if="{{badge}}">{{badge}}</view>
</view>
<text>看房预约</text>
</view>
</view>
<!-- 预约卡片 -->
<view class="appintment">
<!-- 主题活动 -->
<view class="appointment-wrapper">
<view class="appointment-time">8月15日-7月15日 10:00-12:00</view>
<view class="appointment-activity-content row">
<view class="appointment-activity-img">
<image src=""></image>
</view>
<view class="appointment-activity-info col con-a">
<view class="appointment-activity-title">
<text>日落观光游船体验活动</text>
</view>
<view class="appointment-activity-num">
<text>报名人数 3人</text>
</view>
</view>
</view>
</view>
<view class="appointment-wrapper">
<view class="appointment-time">
<text>8月15日-7月15日 10:00-12:00</text>
</view>
<view class="appointment-activity-content row">
<view class="appointment-activity-img">
<image src=""></image>
</view>
<view class="appointment-activity-info col con-a">
<view class="appointment-activity-title">
<text>日落观光游船体验活动之船行碧波共赏美景</text>
</view>
<view class="appointment-activity-num">
<text>报名人数 3人</text>
</view>
</view>
</view>
</view>
<!-- 夜间入园预约 -->
<!-- <view class="appointment-wrapper">
<view class="appointment-time"></view>
</view> -->
<!-- 看房预约 -->
<!-- <view class="appointment-wrapper">
<view class="appointment-time"></view>
</view> -->
</view>
<!-- more -->
<view class="more row align-c con-c" bindtap="onShowMoreActivity">
<text wx:if="{{!showMoreActivity}}">展开更多</text>
<text wx:else>收起</text>
<image wx:if="{{!showMoreActivity}}" src="{{imageBase + 'icon/arrow-b-2.png'}}"></image>
<image wx:else src="{{imageBase + 'up.png'}}"></image>
</view>
</view>
<!-- 客服中心 -->
<view class="service row con-b align-c">
<text>客服中心</text>
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
<l-list l-content-class="menu-title" l-class="listClass" bind:lintap="myActivity"> <!-- <l-list l-content-class="menu-title" l-class="listClass" bind:lintap="myActivity">
<view slot="left-section"> <view slot="left-section">
<image class="fontImg" src="./image/myactive.png"></image> <image class="fontImg" src="./image/myactive.png"></image>
</view> </view>
</l-list> </l-list> -->
<!-- 我的活动 --> <!-- 我的活动 -->
<view class="my-activities" wx:if="{{activityList.length > 0}}"> <!-- <view class="my-activities" wx:if="{{activityList.length > 0}}">
<view class="my-activities-item" data-enrollid="{{item.enrollId}}" wx:for="{{activityList}}" wx:for-index="index" wx:for-item="item" wx:key="index" bindtap="activityDetail"> <view class="my-activities-item" data-enrollid="{{item.enrollId}}" wx:for="{{activityList}}" wx:for-index="index" wx:for-item="item" wx:key="index" bindtap="activityDetail">
<view class="my-activities-top"> <view class="my-activities-top">
<text decode="{{true}}">&nbsp;&nbsp;{{item.time}}&nbsp;&nbsp;</text> <text decode="{{true}}">&nbsp;&nbsp;{{item.time}}&nbsp;&nbsp;</text>
...@@ -96,14 +288,14 @@ ...@@ -96,14 +288,14 @@
</view> </view>
</view> </view>
<view class="my-activities-item"></view> <view class="my-activities-item"></view>
</view> </view> -->
<l-list l-content-class="menu-title" l-class="listClass" bind:lintap="myAppointment"> <!-- <l-list l-content-class="menu-title" l-class="listClass" bind:lintap="myAppointment">
<view slot="left-section"> <view slot="left-section">
<image class="fontImg" src="./image/myappion.png"></image> <image class="fontImg" src="./image/myappion.png"></image>
</view> </view>
</l-list> </l-list> -->
<!-- 我的预约 --> <!-- 我的预约 -->
<view class="my-activities" wx:if="{{appointmentList.length > 0}}"> <!-- <view class="my-activities" wx:if="{{appointmentList.length > 0}}">
<view class="my-activities-item" wx:for="{{appointmentList}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <view class="my-activities-item" wx:for="{{appointmentList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="my-activities-top"> <view class="my-activities-top">
<view class="my-activities-top"> <view class="my-activities-top">
...@@ -119,13 +311,13 @@ ...@@ -119,13 +311,13 @@
</view> </view>
</view> </view>
<view class="my-activities-item"></view> <view class="my-activities-item"></view>
</view> </view> -->
<l-list l-content-class="menu-title" l-class="listClass" bind:lintap="customerService"> <!-- <l-list l-content-class="menu-title" l-class="listClass" bind:lintap="customerService">
<view slot="left-section"> <view slot="left-section">
<image class="fontImg" src="./image/mycustom@2x.png"></image> <image class="fontImg" src="./image/mycustom@2x.png"></image>
</view> </view>
</l-list> </l-list> -->
</view> </view>
</view> </view>
......
pages/mine/home/home.wxss
.container {
background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%);
}
.navigation {
z-index: 2;
}
.background-image {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mine { .mine {
position: relative; position: relative;
width: 750rpx; width: 750rpx;
...@@ -6,32 +21,64 @@ ...@@ -6,32 +21,64 @@
} }
.mine-avatar { .mine-avatar {
z-index: 11;
margin-right: 32rpx; margin-right: 32rpx;
} }
.mine-info view:nth-child(1) text { .mine-info view:nth-child(1) text {
z-index: 11;
margin-right: 20rpx; margin-right: 20rpx;
font-size: 42rpx; font-size: 42rpx;
font-weight: bolder; font-weight: bolder;
} }
.mine-info view:nth-child(1) image { .mine-info view:nth-child(1) image {
z-index: 11;
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
} }
.mine-info view:nth-child(2) { .mine-info view:nth-child(2) {
z-index: 11;
margin-top: 0rpx; margin-top: 0rpx;
} }
.mine-info view:nth-child(2) text { .mine-info view:nth-child(2) text {
z-index: 11;
font-size: 26rpx; font-size: 26rpx;
color: #959da9; color: #959da9;
} }
.coupon {
width: 670rpx;
height: 176rpx;
padding: 41rpx 32rpx;
background-color: #fff;
border-radius: 4rpx;
}
.cpopon-info {
flex: 1;
}
.cpopon-info text:nth-child(1) {
font-size: 34rpx;
font-weight: 600;
color: #15191F;
}
.cpopon-info text:nth-child(2) {
margin-top: 12rpx;
font-size: 26rpx;
color: #161A1F;
}
.coupon image {
width: 32rpx;
height: 32rpx;
}
.status { .status {
width: 654rpx; width: 670rpx;
height: 130rpx; height: 130rpx;
margin-top: 48rpx;
padding: 24rpx 32rpx 24rpx 40rpx; padding: 24rpx 32rpx 24rpx 40rpx;
border-radius: 4px; border-radius: 4px;
background: linear-gradient(180deg, rgba(63, 67, 87, 1) 0%, rgba(37, 37, 50, 1) 100%); background: linear-gradient(180deg, rgba(63, 67, 87, 1) 0%, rgba(37, 37, 50, 1) 100%);
...@@ -74,7 +121,7 @@ ...@@ -74,7 +121,7 @@
.menu { .menu {
width: 750rpx; width: 750rpx;
margin-top: 38rpx; margin-top: 16rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
padding: 0 48rpx; padding: 0 48rpx;
overflow-x: hidden; overflow-x: hidden;
...@@ -268,11 +315,260 @@ ...@@ -268,11 +315,260 @@
/* 二期样式 */ /* 二期样式 */
.order { .order-activity {
width: 670rpx;
margin-top: 48rpx;
padding: 40rpx 32rpx;
background-color: #fff;
border-radius: 4rpx;
}
.order-activity image {
width: 32rpx;
height: 32rpx;
}
.order-activity-title-wrapper {
height: 48rpx;
}
.order-activity-title {
font-size: 34rpx;
color: #15191F;
font-weight: 600;
}
.order-activity-icon-list {
margin-top: 56rpx;
}
.order-activity-icon-wrapper {
flex: 1;
}
.order-activity-icon {
position: relative;
width: 80rpx;
height: 80rpx;
background-color: #F5F6F8;
border-radius: 50%;
}
.order-activity-icon image{
width: 48rpx;
height: 48rpx;
}
.order-activity-badge {
position: absolute;
top: -10rpx;
left: 48rpx;
width: 32rpx;
height: 32rpx;
font-size: 22rpx;
color: #fff;
text-align: center;
line-height: 32rpx;
background-color: #E66060;
border-radius: 16rpx;
}
.badge-widen {
width: 48rpx;
}
.order-activity-icon-wrapper text {
margin-top: 16rpx;
font-size: 22rpx;
color: #15191F;
}
.more-wrapper {
padding-top: 16rpx;
} }
.order image { .pass-wrapper {
position: relative;
width: 606rpx;
height: 338rpx;
margin-top: 41rpx;
padding: 26rpx 32rpx;
color: #fff;
background: linear-gradient(141deg, #F4D5C1 0%, #FA99CE 100%);
border-radius: 4rpx;
opacity: 0.81;
}
.pass-bg-one {
position: absolute;
left: 0;
right: 0;
top: -16rpx;
width: 574rpx;
height: 16rpx;
margin: 0 auto;
background: rgba(247, 179, 197, 0.5);
border-radius: 4rpx 4rpx 0 0;
}
.pass-bg-two {
position: absolute;
left: 0;
right: 0;
top: -30rpx;
width: 542rpx;
height: 16rpx;
margin: 0 auto;
background-color: blue;
background: rgba(247, 179, 197, 0.3);
border-radius: 4rpx 4rpx 0 0;
}
.pass-logo-wrapper {
height: 50rpx;
}
.pass-logo-wrapper image {
width: 64rpx;
height: 50rpx;
background-color: #ccc;
}
.pass-logo-wrapper text {
height: 50rpx;
margin-left: 20rpx;
font-size: 26rpx;
line-height: 50rpx;
}
.pass-title {
margin-top: 24rpx;
font-size: 42rpx;
font-weight: 600;
}
.pass-time {
margin-top: 8rpx;
font-size: 26rpx;
}
.pass-name {
margin-top: 32rpx;
font-size: 22rpx;
}
.pass-idNum {
margin-top: 8rpx;
font-size: 22rpx;
}
.goods-wrapper {
width: 606rpx;
height: 328rpx;
padding: 0 32rpx 8rpx;
background-color: #F5F6F8;
border-radius: 4rpx;
}
.goods-logo-wrapper {
height: 100rpx;
margin-top: 40rpx;
}
.goods-logo-wrapper text {
height: 100rpx;
margin-left: 20rpx;
font-size: 26rpx;
color: #15191F;
line-height: 100rpx;
}
.goods-content {
height: 136rpx;
}
.goods-content image{
width: 140rpx;
height: 136rpx;
margin-right: 32rpx;
background-color: #ccc;
}
.goods-content text {
font-size: 30rpx;
color: #15191F;
font-weight: 600;
line-height: 42rpx;
}
.goods-footer {
height: 84rpx;
}
.goods-footer text {
font-size: 26rpx;
color: #959DA9;
}
.art-logo {
width: 32rpx;
height: 60rpx;
background-color: #ccc;
}
.appointment {
margin-top: 16rpx;
}
.appointment-wrapper {
position: relative;
width: 606rpx;
height: 248rpx;
margin-top: 68rpx;
padding: 72rpx 32rpx 0;
background-color: #F5F6F8;
border-radius: 4rpx;
}
.appointment-time {
position: absolute;
left: 0;
top: -28rpx;
height: 56rpx;
padding: 0 24rpx;
font-size: 26rpx;
color: #fff;
line-height: 56rpx;
font-weight: 600;
background-color: #000;
border-radius: 4rpx;
}
.appointment-activity-content {
}
.appointment-activity-img {
width: 140rpx;
height: 136rpx;
background-color: #ccc;
}
.appointment-activity-info {
flex: 1;
margin-left: 32rpx;
}
.appointment-activity-title {
color: #15191F;
font-size: 30rpx;
font-weight: 600;
line-height: 42rpx;
}
.appointment-activity-num {
margin-top: 16rpx;
color: #959DA9;
font-size: 26rpx;
}
.more {
margin-top: 32rpx;
}
.more text {
font-size: 26rpx;
color: #15191F;
}
.more image {
margin-left: 8rpx;
}
.service {
width: 670rpx;
height: 128rpx;
margin-top: 48rpx;
padding: 0 32rpx;
background-color: #fff;
border-radius: 4rpx;
}
.service text {
font-size: 34rpx;
color: #15191F;
font-weight: 600;
}
.service image {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
} }
image {
width: 100%;
height: 100%;
}
pages/pay/order-comment/order-comment.js 0 → 100644
let App = getApp()
Page({
data: {
imageBase: App.globalData.appImageBase,
scoreServe: 0, // 服务分数
scoreServeText: '0.0',
scoreProduct: 0, // 产品分数
scoreProductText: '0.0',
scoreEnvironment: 0, // 环境分数
scoreEnvironmentText: '0.0',
orderInfo: {
name: '精灵鸟理想国年卡',
price: '1680.00',
quantity: 4,
coverList: [
{
id: 0,
imgUrl: ''
},
// {
// id: 1,
// imgUrl: ''
// },
// {
// id: 2,
// imgUrl: ''
// }
]
}
},
/**
* 评价分数
* @function
* @param
* @returns
*/
onChangeScore: function (event) {
const { index, type } = event.currentTarget.dataset
console.log(index, type)
let { scoreServe, scoreProduct, scoreEnvironment } = this.data
switch (type) {
case 1:
scoreServe = index + 1
break
case 2:
scoreProduct = index + 1
break
case 3:
scoreEnvironment = index + 1
break
}
this.setData({
scoreServe,
scoreServeText: scoreServe.toFixed(1),
scoreProduct,
scoreProductText: scoreProduct.toFixed(1),
scoreEnvironment,
scoreEnvironmentText: scoreEnvironment.toFixed(1),
})
},
/**
* 输入框完成
* @function
* @param
* @returns
*/
eventInputDone: function (event) {
// console.log(event.detail.value)
}
})
\ No newline at end of file
pages/pay/order-comment/order-comment.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/pay/order-comment/order-comment.wxml 0 → 100644
<navigation class="navigation" titleText="订单评价" background="#ffffff" backIcon="/image/back.png"></navigation>
<view class="container con-s">
<view class="order-wrapper">
<view class="order-title">
<text>购买商品</text>
</view>
<view class="row align-c">
<block wx:for="{{orderInfo.coverList}}" wx:key="id">
<view class="order-cover">
<image src="{{item.imgUrl}}"></image>
</view>
</block>
<view class="order-name" wx:if="{{orderInfo.coverList.length === 1}}">
<text>{{orderInfo.name}}</text>
</view>
<view class="order-price-wrapper col align-e">
<view class="order-price">
<text class="price-symbol">￥</text>
<text>{{orderInfo.price}}</text>
</view>
<view class="order-quantity">
<text>{{'共' + orderInfo.quantity + '件'}}</text>
</view>
</view>
</view>
</view>
<view class="order-comment-wrapper">
<view class="order-comment-title">
<text>订单评价</text>
</view>
<view class="score-wrapper row align-c">
<view class="score-left">
<text>服务评价</text>
</view>
<view class="score-star row">
<block wx:for="{{5}}" wx:key="index">
<view class="star" bindtap="onChangeScore" data-index="{{index}}" data-type="{{1}}">
<image wx:if="{{scoreServe >= index + 1}}" src="{{imageBase + 'star-yellow.png'}}"></image>
<image wx:elif="{{scoreServe < index + 1}}" src="{{imageBase + 'star-gray.png'}}"></image>
</view>
</block>
</view>
<view class="score">
<text>{{scoreServeText + '星'}}</text>
</view>
</view>
<view class="score-wrapper row align-c">
<view class="score-left">
<text>产品评价</text>
</view>
<view class="score-star row">
<block wx:for="{{5}}" wx:key="index">
<view class="star" bindtap="onChangeScore" data-index="{{index}}" data-type="{{2}}">
<image wx:if="{{scoreProduct >= index + 1}}" src="{{imageBase + 'star-yellow.png'}}"></image>
<image wx:elif="{{scoreProduct < index + 1}}" src="{{imageBase + 'star-gray.png'}}"></image>
</view>
</block>
</view>
<view class="score">
<text>{{scoreProductText + '星'}}</text>
</view>
</view>
<view class="score-wrapper row align-c">
<view class="score-left">
<text>环境评价</text>
</view>
<view class="score-star row">
<block wx:for="{{5}}" wx:key="index">
<view class="star" bindtap="onChangeScore" data-index="{{index}}" data-type="{{3}}">
<image wx:if="{{scoreEnvironment >= index + 1}}" src="{{imageBase + 'star-yellow.png'}}"></image>
<image wx:elif="{{scoreEnvironment < index + 1}}" src="{{imageBase + 'star-gray.png'}}"></image>
</view>
</block>
</view>
<view class="score">
<text>{{scoreEnvironmentText + '星'}}</text>
</view>
</view>
<view class="order-comment">
<l-textarea placeholder="您的评价与建议，会让园区做的更好" placeholder-style="color: #C2C7CF" maxlength="200" l-class="l-textarea" border="{{false}}" bind:linblur="eventInputDone" />
<view class="order-picker">
<l-image-picker l-item-class="l-image-item" l-class="l-picker" count="9" size="3" size-type="compressed" custom="{{true}}">
<view class="col con-c align-c">
<image class="icon-img"></image>
<text>添加图片</text>
</view>
</l-image-picker>
</view>
</view>
</view>
<view class="footer-wrapper">
<view class="comment-btn">
<text>提交评价</text>
</view>
</view>
</view>
\ No newline at end of file
pages/pay/order-comment/order-comment.wxss 0 → 100644
.container {
padding-top: 232rpx;
padding-bottom: 260rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%);
}
.order-wrapper {
width: 670rpx;
height: 288rpx;
padding: 40rpx 32rpx;
background-color: #FFFFFF;
border-radius: 4rpx;
}
.order-title {
height: 88rpx;
color: #15191F;
font-size: 34rpx;
font-weight: 600;
}
.order-cover {
width: 124rpx;
height: 120rpx;
margin-right: 16rpx;
background-color: #ccc;
}
.order-name {
width: 274rpx;
margin-left: 16rpx;
color: #15191F;
font-size: 30rpx;
font-weight: 600;
line-height: 40rpx;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.order-price-wrapper {
flex: 1;
height: 86rpx;
}
.order-price {
color: #15191F;
font-size: 30rpx;
font-weight: 600;
line-height: 42rpx;
}
.price-symbol {
font-size: 22rpx;
}
.order-quantity {
color: #959DA9;
font-size: 26rpx;
line-height: 36rpx;
letter-spacing: 2rpx;
}
.order-comment-wrapper {
width: 670rpx;
margin-top: 64rpx;
padding: 40rpx 32rpx;
background-color: #fff;
border-radius: 4rpx;
}
.order-comment-title {
height: 77rpx;
color: #15191F;
font-size: 34rpx;
font-weight: 600;
}
.score-wrapper {
height: 68rpx;
}
.score-left {
width: 120rpx;
color: #15191F;
font-size: 30rpx;
font-weight: 600;
}
.score-star {
width: 320rpx;
padding: 0 32rpx;
}
.star {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
.score {
color: #959DA9;
font-size: 26rpx;
letter-spacing: 2rpx;
}
.order-comment {
margin-top: 27rpx;
background-color: #F5F6F8;
border-radius: 4rpx;
}
.l-textarea {
height: 320rpx;
}
.l-textarea > view {
color: #C2C7CF !important;
}
.order-picker {
padding: 19rpx 12rpx 8rpx;
}
.l-picker {
width: 504rpx !important;
}
.l-image-item {
width: 144rpx !important;
height: 144rpx !important;
border: 1px dashed #959DA9 !important;
margin-bottom: 24rpx !important;
}
.l-image-item > view {
right: -20rpx;
top: -20rpx;
}
.l-image-item > image {
width: 144rpx !important;
height: 144rpx !important;
border: none !important;
}
.l-image-item text{
color: #959DA9;
font-size: 22rpx;
}
.icon-img {
width: 48rpx;
height: 48rpx;
background-color: #ccc;
}
.footer-wrapper {
position: fixed;
left: 0;
bottom: 0;
width: 750rpx;
height: 194rpx;
padding: 30rpx 40rpx 0;
background-color: #fff;
border-top: 1px solid #E2E7EF;
}
.comment-btn {
width: 670rpx;
height: 96rpx;
color: #fff;
font-size: 30rpx;
line-height: 96rpx;
text-align: center;
background-color: #86C5E1;
border-radius: 4rpx;
}
image {
width: 100%;
height: 100%;
}
\ No newline at end of file
pages/play/service-sell/service-sell.js
Page({ Page({
data: { data: {
bannerIndex: 0,
bannerStyle: 1,
banner: [
{
id: 0,
img: ''
},
{
id: 1,
img: ''
},
{
id: 2,
img: ''
}
],
serviceInfo: {
name: '竹子热油放松SPA',
time: '90 mins',
address: '元养水韵SPA',
content: '适合肌肉酸痛，容易疲乏、忧郁症、运动型等人群。竹子是生命能量的一种象征，此疗程是结合ADS舒压芳香精油特殊的气体对人体进行一种温暖放松的理疗，通过竹子在人体肌肉上的滚动，压按，深层反射肌肉，舒缓神经，有效改善睡眠，提高健康质量。',
priceSpecial: '880',
price: '890',
}
}, },
onLoad: function (options) { onLoad: function (options) {
}, },
onLocation: function () {
console.log('点了位置')
}
}) })
\ No newline at end of file
pages/play/service-sell/service-sell.wxml
<!--pages/home/home/home.wxml--> <navigation class="navigation" titleText="服务详情" color="#ffffff"></navigation>
<text>pages/home/home/home.wxml</text>
<view class="container">
<view class="banner">
<swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="5000" duration="500" bindchange="onSwiperChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="banner-swiper-item" data-item="{{item}}" bindtap="bannerClick">
{{item.id}}
<image class="banner-swiper-image" src="{{item.img}}"></image>
</swiper-item>
</block>
</swiper>
<view class="banner-swiper-point">
<swiper-point bannerActiveIndex="{{bannerIndex}}" bannerStyle="{{bannerStyle}}"></swiper-point>
</view>
<view class="banner-wave">
<image src="/image/ornament-2.png" mode="widthFix"></image>
</view>
</view>
<view class="service-wrapper">
<view class="service-name">
<text>{{serviceInfo.name}}</text>
</view>
<view class="time-address-wrapper row align-c">
<view class="service-icon">
<image src="/image/icon/g-time.png"></image>
</view>
<view class="time-address-title">
<text>时长</text>
</view>
<view class="time-address">
<text>{{serviceInfo.time}}</text>
</view>
</view>
<view class="time-address-wrapper row align-c" bindtap="onLocation">
<view class="service-icon">
<image src="/image/icon/g-location.png"></image>
</view>
<view class="time-address-title">
<text>地址</text>
</view>
<view class="time-address row con-b">
<text>{{serviceInfo.address}}</text>
<image class="service-icon" src="/image/more.png"></image>
</view>
</view>
</view>
<view class="service-content">
<text>{{serviceInfo.content}}</text>
</view>
<view class="footer-wrapper row align-c">
<view class="special-msg">
<text>业主价</text>
</view>
<view class="price-special">
<text class="price-special-symbol">￥</text>
<text>{{serviceInfo.priceSpecial}}</text>
</view>
<view class="price-special-unit">
<text>/人</text>
</view>
<view class="price-old">
<text>{{'￥' + serviceInfo.price}}</text>
<text class="price-old-unit">/人 </text>
</view>
<view class="footer-btn">
<text>立即购买</text>
</view>
</view>
</view>
pages/play/service-sell/service-sell.wxss
/* pages/home/home/home.wxss */ .container {
\ No newline at end of file padding-bottom: 196rpx;
}
.banner {
z-index: 9;
position: relative;
width: 750rpx;
height: 814rpx;
background-color: #ccc;
}
.banner-swiper,
.banner-swiper-item,
.banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx;
height: 800rpx;
}
.banner-swiper-point {
position: relative;
top: 702rpx;
left: 0;
}
.banner-wave {
position: absolute;
top: 754rpx;
left: 0;
width: 750rpx;
height: 60rpx;
}
.service-wrapper {
width: 670rpx;
margin-top: 50rpx;
padding-bottom: 36rpx;
border-bottom: 1px solid #E2E7EF;
}
.service-name {
height: 120rpx;
color: #15191F;
font-size: 54rpx;
font-weight: 600;
}
.time-address-wrapper {
height: 82rpx;
font-size: 30rpx;
}
.time-address-title {
margin-left: 8rpx;
color: #959DA9;
}
.time-address {
flex: 1;
margin-left: 25rpx;
color: #000000;
}
.service-icon {
width: 40rpx;
height: 40rpx;
}
.service-content {
width: 670rpx;
margin: 56rpx 0;
color: #15191F;
font-size: 30rpx;
line-height: 50rpx;
font-weight: 300;
}
.footer-wrapper {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 196rpx;
padding: 32rpx 40rpx 68rpx;
background-color: #fff;
border-top: 1px solid #E2E7EF;
}
.special-msg {
width: 78rpx;
height: 36rpx;
margin-right: 12rpx;
color: #E8D0AF;
font-size: 18rpx;
line-height: 36rpx;
text-align: center;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
}
.price-special {
color: #15191F;
font-size: 38rpx;
}
.price-special-symbol {
font-size: 26rpx;
}
.price-special-unit {
margin-left: 4rpx;
color: #15191F;
font-size: 26rpx;
}
.price-old {
margin-left: 16rpx;
color: #C2C7CF;
font-size: 30rpx;
text-decoration: line-through;
}
.price-old-unit {
font-size: 26rpx;
}
.footer-btn {
position: absolute;
right: 40rpx;
width: 200rpx;
height: 96rpx;
color: #fff;
font-size: 30rpx;
line-height: 96rpx;
text-align: center;
background-color: #86C5E1;
border-radius: 4rpx;
}
image {
width: 100%;
height: 100%;
}
\ No newline at end of file
project.config.json
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
"es6": true, "es6": true,
"enhance": true, "enhance": true,
"postcss": true, "postcss": true,
"preloadBackgroundData": false,
"minified": true, "minified": true,
"newFeature": true, "newFeature": true,
"coverView": true, "coverView": true,
...@@ -19,13 +20,12 @@ ...@@ -19,13 +20,12 @@
"checkInvalidKey": true, "checkInvalidKey": true,
"checkSiteMap": false, "checkSiteMap": false,
"uploadWithSourceMap": true, "uploadWithSourceMap": true,
"compileHotReLoad": false,
"babelSetting": { "babelSetting": {
"ignore": [], "ignore": [],
"disablePlugins": [], "disablePlugins": [],
"outputPath": "" "outputPath": ""
}, },
"preloadBackgroundData": false,
"compileHotReLoad": false,
"useIsolateContext": true, "useIsolateContext": true,
"useCompilerModule": false, "useCompilerModule": false,
"userConfirmedUseCompilerModuleSwitch": false, "userConfirmedUseCompilerModuleSwitch": false,
...@@ -118,37 +118,38 @@ ...@@ -118,37 +118,38 @@
"scene": null "scene": null
}, },
{ {
"id": 7, "id": -1,
"name": "pages/commodity/snacks/snacks", "name": "pages/mine/home/home",
"pathName": "pages/commodity/snacks/snacks", "pathName": "pages/mine/home/home",
"query": "", "query": "",
"scene": null "scene": null
}, },
{ {
"id": -1, "id": -1,
"name": "pages/pay/order-detail/order-detail", "name": "pages/mine/card/card",
"pathName": "pages/pay/order-detail/order-detail", "pathName": "pages/mine/card/card",
"query": "", "query": "",
"scene": null "scene": null
}, },
{ {
"id": -1, "id": -1,
"name": "pages/commodity/snacks/snacks", "name": "pages/pay/order-comment/order-comment",
"pathName": "pages/commodity/snacks/snacks", "pathName": "pages/pay/order-comment/order-comment",
"query": "", "query": "",
"scene": null "scene": null
}, },
{ {
"id": -1, "id": 10,
"name": "pages/pay/coupon-input/coupon-input", "name": "pages/commodity/project-detail/project-detail",
"pathName": "pages/pay/coupon-input/coupon-input", "pathName": "pages/commodity/project-detail/project-detail",
"query": "", "query": "",
"scene": null "scene": null
}, },
{ {
"id": -1, "id": -1,
"name": "pages/pay/coupon-detail/coupon-detail", "name": "pages/play/service-sell/service-sell",
"pathName": "pages/pay/coupon-detail/coupon-detail", "pathName": "pages/play/service-sell/service-sell",
"query": "",
"scene": null "scene": null
} }
] ]
......
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 sign in to comment