Skip to content

严立 / mini-shimao

Go to a project
Commit 5974eb8f by 袁伟伦
Options

20200908 上传了服务页面 by ywl

parents e25e41a3 667f630d
Expand all
Inline Side-by-side
Showing with 1729 additions and 331 deletions
app.json
...@@ -9,10 +9,11 @@ ...@@ -9,10 +9,11 @@
"pages/home/night-appointment/night-appointment", "pages/home/night-appointment/night-appointment",
"pages/home/guide/guide", "pages/home/guide/guide",
"pages/home/history/history", "pages/home/history/history",
"pages/play/home/home", "pages/play/home/home",
"pages/play/service/service", "pages/play/service/service",
"pages/play/service-detail/service-detail",
"pages/play/service-sell/service-sell", "pages/play/service-sell/service-sell",
"pages/play/service-detail/service-detail",
"pages/play/activity/activity", "pages/play/activity/activity",
"pages/play/activity-detail/activity-detail", "pages/play/activity-detail/activity-detail",
"pages/play/activity-entry/activity-entry", "pages/play/activity-entry/activity-entry",
...@@ -20,6 +21,7 @@ ...@@ -20,6 +21,7 @@
"pages/play/movie-detail/movie-detail", "pages/play/movie-detail/movie-detail",
"pages/play/point-detail/point-detail", "pages/play/point-detail/point-detail",
"pages/play/strategy-detail/strategy-detail", "pages/play/strategy-detail/strategy-detail",
"pages/commodity/home/home", "pages/commodity/home/home",
"pages/commodity/shopping-cart/shopping-cart", "pages/commodity/shopping-cart/shopping-cart",
"pages/commodity/food/food", "pages/commodity/food/food",
...@@ -30,6 +32,7 @@ ...@@ -30,6 +32,7 @@
"pages/commodity/room-appointment/room-appointment", "pages/commodity/room-appointment/room-appointment",
"pages/campsite/home/home", "pages/campsite/home/home",
"pages/campsite/home-mirror/home-mirror", "pages/campsite/home-mirror/home-mirror",
"pages/mine/home/home", "pages/mine/home/home",
"pages/mine/info/info", "pages/mine/info/info",
"pages/mine/order/order", "pages/mine/order/order",
...@@ -42,8 +45,8 @@ ...@@ -42,8 +45,8 @@
"pages/mine/authentication-input/authentication-input", "pages/mine/authentication-input/authentication-input",
"pages/mine/question/question", "pages/mine/question/question",
"pages/mine/question-more/question-more", "pages/mine/question-more/question-more",
"pages/pay/home/home",
"pages/pay/home/home",
"pages/pay/order-input/order-input", "pages/pay/order-input/order-input",
"pages/pay/order-detail/order-detail", "pages/pay/order-detail/order-detail",
"pages/pay/coupon/coupon", "pages/pay/coupon/coupon",
......
image/scan.png 0 → 100644
image/scan.png

261 Bytes
pages/commodity/snacks/snacks.js
...@@ -5,6 +5,7 @@ Page({ ...@@ -5,6 +5,7 @@ Page({
rightTitle: '优惠套餐', rightTitle: '优惠套餐',
showPopup: false, showPopup: false,
showAddSucc: false, showAddSucc: false,
hideAnimation: true,
leftMenuList: [ leftMenuList: [
{ {
id: 0, id: 0,
...@@ -103,6 +104,12 @@ Page({ ...@@ -103,6 +104,12 @@ Page({
goods_now_text: '业主价' goods_now_text: '业主价'
} }
}, },
onLoad() {
this.animationDown = wx.createAnimation({
duration: 400,
timingFunction: 'ease'
})
},
handleItemTap(e) { handleItemTap(e) {
let index = e.currentTarget.dataset.index let index = e.currentTarget.dataset.index
let rightTitle = this.data.leftMenuList[index].tab let rightTitle = this.data.leftMenuList[index].tab
...@@ -125,12 +132,28 @@ Page({ ...@@ -125,12 +132,28 @@ Page({
}) })
}, },
handleAddCart() { handleAddCart() {
let showPopup = false let showPopup = false
let showAddSucc = true let showAddSucc = true
this.setData({ let hideAnimation = false
showPopup, this.animationDown.translateY(180).step()
showAddSucc this.setData({
}) showPopup,
showAddSucc,
hideAnimation,
})
setTimeout(() => {
this.setData({
animationDown: this.animationDown.export()
})
})
setTimeout(() => {
this.animationDown.translateY(0).step()
let hideAnimation = true
this.setData({
hideAnimation,
animationDown: this.animationDown.export()
})
}, 400)
}, },
goToCart() { goToCart() {
wx.navigateTo({ wx.navigateTo({
......
pages/commodity/snacks/snacks.wxml
<view class="cates"> <view class="cates">
<view class="cates-container"> <view class="cates-container">
<!-- 左边菜单 --> <!-- 左边菜单 -->
<scroll-view scroll-y class="left-menu"> <scroll-view scroll-y enhanced="true" show-scrollbar="false" class="left-menu">
<view <view
class="menu-item {{currentIndex === index ? 'active' : ''}}" class="menu-item {{currentIndex === index ? 'active' : ''}}"
wx:for="{{leftMenuList}}" wx:for="{{leftMenuList}}"
...@@ -46,40 +46,41 @@ ...@@ -46,40 +46,41 @@
</view> </view>
</view> </view>
<!-- 购物车按钮 --> <!-- 购物车按钮 -->
<view class="cart-btn row con-c align-c" bindtap="goToCart"> <view class="cart-btn row con-c align-c" bindtap="goToCart">
<view class="cart-num row con-c align-c">{{cart.length}}</view> <view class="cart-num row con-c align-c">{{cart.length}}</view>
<view class="cart-img-wrap"> <view class="cart-img-wrap">
<image src="../../../image/cart.png" mode="widthFix"></image> <image src="../../../image/cart.png" mode="widthFix"></image>
</view>
</view> </view>
</view>
</scroll-view>
<!-- 购物车弹窗 --> <!-- 购物车弹窗 -->
<l-popup show="{{showPopup}}" content-align="center" locked="{{true}}"> <l-popup show="{{showPopup}}" content-align="center" locked="{{true}}">
<view class="popup-wrap"> <view class="popup-wrap">
<view class="popup-img-wrapper"> <view class="popup-img-wrapper">
<image mode="widthFix" src="./image/popup.png"></image> <image mode="widthFix" src="./image/popup.png"></image>
</view> </view>
<view class="popup-info-wrapper"> <view class="popup-info-wrapper">
<view class="popuo-info-title">咖喱蔬菜大虾</view> <view class="popuo-info-title">咖喱蔬菜大虾</view>
<view class="popup-info-text">新鲜可口的大虾，搭配咖喱与蔬菜，口感舒适，这个夏天，有你就够了</view> <view class="popup-info-text">新鲜可口的大虾，搭配咖喱与蔬菜，口感舒适，这个夏天，有你就够了</view>
</view> </view>
<view class="popup-footer-wrapper"> <view class="popup-footer-wrapper">
<view class="popup-price-row row align-c"> <view class="popup-price-row row align-c">
<view class="popup-price-now">￥<text style="font-size: 38rpx">78.00</text></view> <view class="popup-price-now">￥<text style="font-size: 38rpx">78.00</text></view>
<view class="popup-price-discount row con-c align-c {{popupObj.goods_now_text === '业主价' ? 'vipPrice' : ''}}">{{popupObj.goods-now-text}}</view> <view class="popup-price-discount row con-c align-c {{popupObj.goods_now_text === '业主价' ? 'vipPrice' : ''}}">{{popupObj.goods-now-text}}</view>
<view class="popup-price-old">¥68.00</view> <view class="popup-price-old">¥68.00</view>
</view> </view>
<view class="popup-footer-btn row con-c align-c" bindtap="handleAddCart">加入购物车</view> <view class="popup-footer-btn row con-c align-c" bindtap="handleAddCart">加入购物车</view>
</view> </view>
</view> </view>
<view class="popup-close-btn row con-c align-c" bindtap="handleClosePopup"> <view class="popup-close-btn row con-c align-c" bindtap="handleClosePopup">
<view class="popup-close"> <view class="popup-close">
<image mode="widthFix" src="../../../image/icon_close.png"></image> <image mode="widthFix" src="../../../image/icon_close.png"></image>
</view> </view>
</view> </view>
</l-popup> </l-popup>
<!-- 添加成功 --> <!-- 添加成功 -->
<l-toast show="{{showAddSucc}}" l-image-class="toast-image" l-class="toast-bg" image="/image/success.png" title="添加购物车成功" /> <l-toast show="{{showAddSucc}}" l-image-class="toast-image" l-class="toast-bg" image="/image/success.png" title="添加购物车成功" />
<!-- 加入购物车动画 -->
<view class="redPoint {{hideAnimation ? 'animation-hide' : ''}}" animation="{{animationDown}}"></view>
</scroll-view>
</view> </view>
</view> </view>
<Blank></Blank> \ No newline at end of file
pages/commodity/snacks/snacks.wxss
Page { Page {
height: 100%; height: 100%;
} }
.cates { .cates {
height: 100%; height: 100%;
} }
.cates-container { .cates-container {
height: 100vh; height: 100vh;
display: flex; display: flex;
} }
.left-menu { .left-menu {
width: 160rpx; width: 160rpx;
background: #F2F3F5; background: #F2F3F5;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0; width: 0;
height: 0; height: 0;
color: transparent; color: transparent;
} }
.menu-item { .menu-item {
height: 136rpx; height: 136rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 26rpx; font-size: 26rpx;
color: #656E7B; color: #656E7B;
} }
.menu-item.active { .menu-item.active {
color: #5CB5DD; color: #5CB5DD;
font-weight: 600; font-weight: 600;
background: #fff; background: #fff;
border-left: 8rpx solid #86C5E1; border-left: 8rpx solid #86C5E1;
} }
.right-content { .right-content {
position: relative; position: relative;
flex: 1; flex: 1;
padding: 0 32rpx 0 28rpx; padding: 0 32rpx 0 28rpx;
} }
.right-content-title { .right-content-title {
height: 100rpx; height: 100rpx;
padding: 32rpx 0; padding: 32rpx 0;
font-size: 26rpx; font-size: 26rpx;
color: #959DA9; color: #959DA9;
} }
.cart-btn { .cart-btn {
position: fixed; position: fixed;
right: 48rpx; right: 48rpx;
bottom: 160rpx; bottom: 160rpx;
width: 104rpx; width: 104rpx;
height: 104rpx; height: 104rpx;
border-radius: 50%; border-radius: 50%;
background-color: #86C5E1; background-color: #86C5E1;
} }
.cart-num { .cart-num {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
height: 32rpx; height: 32rpx;
padding: 0 12rpx; padding: 0 12rpx;
font-size: 22rpx; font-size: 22rpx;
line-height: 32rpx; line-height: 32rpx;
border: 1px solid #86C5E1; border: 1px solid #86C5E1;
border-radius: 17rpx; border-radius: 17rpx;
color: #86C5E1; color: #86C5E1;
background-color: #fff; background-color: #fff;
} }
.cart-img-wrap { .cart-img-wrap {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
}
.redPoint {
position: fixed;
right: 80rpx;
bottom: 560rpx;
width: 15px;
height: 15px;
background-color: #E66060;
border-radius: 50%;
}
.animation-hide {
display: none;
} }
.item { .item {
width: 100%; width: 100%;
height: 250rpx; height: 250rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.item-img { .item-img {
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
} }
.item-info { .item-info {
flex: 1; flex: 1;
margin-left: 28rpx; margin-left: 28rpx;
} }
.item-info-title { .item-info-title {
font-size: 30rpx; font-size: 30rpx;
color: #15191F; color: #15191F;
font-weight: 600; font-weight: 600;
} }
.item-info-text-wrap { .item-info-text-wrap {
width: 100%; width: 100%;
padding: 16rpx 0 24rpx; padding: 16rpx 0 24rpx;
font-size: 22rpx; font-size: 22rpx;
line-height: 32rpx; line-height: 32rpx;
color: #959DA9; color: #959DA9;
} }
.item-info-content { .item-info-content {
height: 40rpx; height: 40rpx;
} }
.item-info-now-price { .item-info-now-price {
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #15191F; color: #15191F;
} }
.price-symbol { .price-symbol {
font-size: 22rpx; font-size: 22rpx;
} }
.item-now-price-text { .item-now-price-text {
width: 78rpx; width: 78rpx;
height: 32rpx; height: 32rpx;
margin-left: 4px; margin-left: 4px;
font-size: 20rpx; font-size: 20rpx;
font-weight: 500; font-weight: 500;
color: #EF4E4E; color: #EF4E4E;
line-height: 32rpx; line-height: 32rpx;
text-align: center; text-align: center;
background: rgba(213, 107, 82, .12); background: rgba(213, 107, 82, .12);
border-radius: 4rpx; border-radius: 4rpx;
} }
.vipPrice { .vipPrice {
color: #E8D0AF; color: #E8D0AF;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%); background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx; border-radius: 4rpx;
opacity: 1; opacity: 1;
} }
.goods-add-btn-wrap { .goods-add-btn-wrap {
flex: 1; flex: 1;
} }
.l-btn-circle { .l-btn-circle {
border-radius: 50% !important; border-radius: 50% !important;
font-size: 24rpx; font-size: 24rpx;
} }
.item-info-old-price { .item-info-old-price {
margin-top: 4rpx; margin-top: 4rpx;
font-size: 22rpx; font-size: 22rpx;
color: #959DA9; color: #C2C7CF;
text-decoration:line-through text-decoration:line-through
} }
.popup-wrap { .popup-wrap {
position: relative; position: relative;
width: 606rpx; width: 606rpx;
background-color: #fff; background-color: #fff;
border-radius: 4rpx; border-radius: 4rpx;
} }
.popup-img-wrap { .popup-img-wrap {
width: 606rpx; width: 606rpx;
height: 382rpx; height: 382rpx;
} }
.popup-info-wrapper { .popup-info-wrapper {
padding: 48rpx 40rpx; padding: 48rpx 40rpx;
} }
.popuo-info-title { .popuo-info-title {
font-size: 34rpx; font-size: 34rpx;
color: #15191F; color: #15191F;
} }
.popup-info-text { .popup-info-text {
margin-top: 24rpx; margin-top: 24rpx;
font-size: 22rpx; font-size: 22rpx;
line-height: 32rpx; line-height: 32rpx;
color: #959DA9; color: #959DA9;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
} }
.popup-footer-wrapper { .popup-footer-wrapper {
margin: 0 40rpx; margin: 0 40rpx;
padding: 40rpx 0; padding: 40rpx 0;
border-top: 1px solid #E2E7EF; border-top: 1px solid #E2E7EF;
} }
.popup-price-row { .popup-price-row {
padding: 10rpx 0; padding: 10rpx 0;
} }
.popup-price-now { .popup-price-now {
color: #15191F; color: #15191F;
} }
.popup-price-discount { .popup-price-discount {
width: 90rpx; width: 90rpx;
height: 36rpx; height: 36rpx;
margin-left: 10px; margin-left: 10px;
font-size: 22rpx; font-size: 22rpx;
color: #EF4E4E; color: #EF4E4E;
background: rgba(213, 107, 82, .12); background: rgba(213, 107, 82, .12);
border-radius: 4rpx; border-radius: 4rpx;
} }
.vipPrice { .vipPrice {
color: #E8D0AF; color: #E8D0AF;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%); background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx; border-radius: 4rpx;
opacity: 1; opacity: 1;
} }
.popup-price-old { .popup-price-old {
margin-left: 20rpx; margin-left: 20rpx;
font-size: 26rpx; font-size: 26rpx;
color: #959DA9; color: #959DA9;
text-decoration:line-through text-decoration:line-through
} }
.popup-footer-btn { .popup-footer-btn {
width: 526rpx; width: 526rpx;
height: 80rpx; height: 80rpx;
margin-top: 30rpx; margin-top: 30rpx;
font-size: 30rpx; font-size: 30rpx;
color: #fff; color: #fff;
background-color: #86C5E1; background-color: #86C5E1;
border-radius: 4rpx; border-radius: 4rpx;
} }
.popup-close-btn { .popup-close-btn {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
margin: 48rpx auto 0; margin: 48rpx auto 0;
background: rgba(254, 252, 249, 0.5); background: rgba(254, 252, 249, 0.5);
border-radius: 50%; border-radius: 50%;
} }
.popup-close { .popup-close {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
} }
.toast-bg { .toast-bg {
min-width: 262rpx !important; min-width: 262rpx !important;
min-height: 262prx !important; min-height: 262prx !important;
} }
.toast-image { .toast-image {
} }
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
\ No newline at end of file
pages/home/home/home.js
...@@ -334,4 +334,14 @@ Page({ ...@@ -334,4 +334,14 @@ 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
}) })
}, },
onTest4: function (event) {
wx.navigateTo({
url: '/pages/pay/coupon-input/coupon-input'
})
},
onTest5: function (event) {
wx.navigateTo({
url: '/pages/pay/coupon-detail/coupon-detail?type=' + event.currentTarget.dataset.index
})
},
}) })
\ No newline at end of file
pages/home/home/home.wxml
...@@ -94,5 +94,9 @@ ...@@ -94,5 +94,9 @@
<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>
</view> </view>
</view> </view>
\ No newline at end of file
pages/mine/home/home.js
...@@ -6,6 +6,8 @@ Page({ ...@@ -6,6 +6,8 @@ Page({
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
imageBase: App.globalData.appImageBase,
mobile: '', mobile: '',
nickName: '', nickName: '',
avatarUrl: '/pages/mine/home/image/avatar.png', avatarUrl: '/pages/mine/home/image/avatar.png',
...@@ -242,6 +244,18 @@ Page({ ...@@ -242,6 +244,18 @@ Page({
toHide: function (array) { toHide: function (array) {
var mphone = array.substring(0, 3) + '****' + array.substring(7); var mphone = array.substring(0, 3) + '****' + array.substring(7);
return mphone; return mphone;
} },
// 二期代码
onOrder: function () {
console.log('onOrder')
wx.navigateTo({
url: '/pages/mine/order/order'
})
},
}) })
\ No newline at end of file
pages/mine/home/home.wxml
...@@ -61,6 +61,24 @@ ...@@ -61,6 +61,24 @@
</view> </view>
<view class="menu"> <view class="menu">
<view class="order">
<view class="row con-b align-c">
<view class="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>
<view></view>
</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>
......
pages/mine/home/home.wxss
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
.mine-info view:nth-child(2) text { .mine-info view:nth-child(2) text {
font-size: 26rpx; font-size: 26rpx;
color: #959DA9; color: #959da9;
} }
.status { .status {
...@@ -34,20 +34,20 @@ ...@@ -34,20 +34,20 @@
height: 130rpx; height: 130rpx;
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%);
} }
.status-symbol text:nth-child(1) { .status-symbol text:nth-child(1) {
font-size: 30rpx; font-size: 30rpx;
font-weight: bolder; font-weight: bolder;
color:rgba(255,227,195,1); color: rgba(255, 227, 195, 1);
} }
.status-symbol text:nth-child(2) { .status-symbol text:nth-child(2) {
margin-top: 10rpx; margin-top: 10rpx;
font-size: 22rpx; font-size: 22rpx;
font-weight:300; font-weight: 300;
color: #F1DBBD; color: #f1dbbd;
} }
.status-operation { .status-operation {
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
height: 52rpx; height: 52rpx;
border-radius: 4px; border-radius: 4px;
/* border: 1px solid rgba(72, 53, 34, 1) !important; */ /* border: 1px solid rgba(72, 53, 34, 1) !important; */
background:linear-gradient(180deg,rgba(255,243,227,1) 0%,rgba(255,227,195,1) 100%); background: linear-gradient(180deg, rgba(255, 243, 227, 1) 0%, rgba(255, 227, 195, 1) 100%);
color: #282836; color: #282836;
font-size: 26rpx; font-size: 26rpx;
} }
...@@ -65,11 +65,13 @@ ...@@ -65,11 +65,13 @@
font-weight: bolder; font-weight: bolder;
color: #483522; color: #483522;
} }
.status-operation image{
.status-operation image {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
margin-right: 8rpx; margin-right: 8rpx;
} }
.menu { .menu {
width: 750rpx; width: 750rpx;
margin-top: 38rpx; margin-top: 38rpx;
...@@ -88,42 +90,51 @@ ...@@ -88,42 +90,51 @@
font-size: 30rpx; font-size: 30rpx;
border-bottom: none; border-bottom: none;
} }
.listClass{
.listClass {
border-bottom: none !important; border-bottom: none !important;
} }
.my-activities{
.my-activities {
width: 798rpx; width: 798rpx;
overflow-x: scroll; overflow-x: scroll;
height: 300rpx; height: 300rpx;
white-space: nowrap; white-space: nowrap;
} }
.my-activities::-webkit-scrollbar {display:none}
.my-activities-item{ .my-activities::-webkit-scrollbar {
margin-top:15rpx ; display: none;
}
.my-activities-item {
margin-top: 15rpx;
height: 80%; height: 80%;
width: 600rpx; width: 600rpx;
margin-right: 40rpx; margin-right: 40rpx;
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
.my-activities-item:last-child{
width:40rpx !important; .my-activities-item:last-child {
width: 40rpx !important;
background-color: white; background-color: white;
} }
.my-activities-top{
.my-activities-top {
position: absolute; position: absolute;
top: 0; top: 0;
/* width: 350rpx; */ /* width: 350rpx; */
height: 60rpx; height: 60rpx;
background-color: rgb(2, 0, 2); background-color: rgb(2, 0, 2);
color: white; color: white;
line-height:60rpx ; line-height: 60rpx;
z-index: 2; z-index: 2;
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
font-size: 30rpx; font-size: 30rpx;
} }
.my-activities-bottom{
.my-activities-bottom {
width: 100%; width: 100%;
height: 220rpx; height: 220rpx;
position: absolute; position: absolute;
...@@ -131,80 +142,87 @@ ...@@ -131,80 +142,87 @@
background-color: rgb(239, 242, 250); background-color: rgb(239, 242, 250);
border-radius: 3px; border-radius: 3px;
} }
.my-activities-bottom-view{
.my-activities-bottom-view {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
height: 110rpx; height: 110rpx;
margin-top: 70rpx; margin-top: 70rpx;
} }
.my-activities-title{
padding-left:50rpx ; .my-activities-title {
padding-left: 50rpx;
line-height: 2; line-height: 2;
font-size:30rpx; font-size: 30rpx;
font-weight:500; font-weight: 500;
color:rgba(21,25,31,1); color: rgba(21, 25, 31, 1);
} }
.my-activities-content{
.my-activities-content {
font-size: 26rpx; font-size: 26rpx;
font-weight:400; font-weight: 400;
color:rgba(101,110,123,1); color: rgba(101, 110, 123, 1);
padding-left:50rpx ; padding-left: 50rpx;
line-height: 2; line-height: 2;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
word-break: break-all; word-break: break-all;
} }
.subscribe{
.subscribe {
width: 150rpx; width: 150rpx;
height: 70rpx; height: 70rpx;
position: absolute; position: absolute;
border: 1px solid #15191F; border: 1px solid #15191f;
border-radius: 3px; border-radius: 3px;
right: 50rpx; right: 50rpx;
line-height: 70rpx; line-height: 70rpx;
text-align: center; text-align: center;
font-size: 26rpx; font-size: 26rpx;
top:92rpx ; top: 92rpx;
font-weight: 500; font-weight: 500;
color: #15191F; color: #15191f;
} }
.fontImg{
.fontImg {
width: 120rpx; width: 120rpx;
height: 30rpx; height: 30rpx;
} }
.approve{
.approve {
padding-top: 100rpx; padding-top: 100rpx;
} }
.approve-icon{
.approve-icon {
width: 168rpx; width: 168rpx;
height: 103rpx; height: 103rpx;
} }
.rule{
width:148rpx; .rule {
height:64rpx; width: 148rpx;
background:linear-gradient(180deg,rgba(252,239,224,1) 0%,rgba(196,174,151,1) 100%); height: 64rpx;
font-size:26rpx; background: linear-gradient(180deg, rgba(252, 239, 224, 1) 0%, rgba(196, 174, 151, 1) 100%);
font-size: 26rpx;
line-height: 54rpx; line-height: 54rpx;
color:rgba(24,26,35,1); color: rgba(24, 26, 35, 1);
text-align: center; text-align: center;
margin-left: -60rpx; margin-left: -60rpx;
z-index: -1; z-index: -1;
border-radius:4px; border-radius: 4px;
border:1px solid; border: 1px solid;
border-image:linear-gradient(180deg, rgba(255,237,215,1), rgba(113,95,76,1)) 2 2; border-image: linear-gradient(180deg, rgba(255, 237, 215, 1), rgba(113, 95, 76, 1)) 2 2;
margin-top: 10rpx; margin-top: 10rpx;
} }
.mask-content{
.mask-content {
width: 606rpx; width: 606rpx;
height: 974rpx; height: 974rpx;
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%);
} }
.close{ .close {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
background-color: rgb(172, 169, 170); background-color: rgb(172, 169, 170);
...@@ -213,32 +231,48 @@ ...@@ -213,32 +231,48 @@
margin-top: 45rpx; margin-top: 45rpx;
border-radius: 50%; border-radius: 50%;
line-height: 80rpx; line-height: 80rpx;
} }
.mask-img{
width: 274rpx; .mask-img {
height: 52rpx; width: 274rpx;
margin-top: 76rpx; height: 52rpx;
} margin-top: 76rpx;
.mask-icon{ }
width: 33rpx;
height: 33rpx; .mask-icon {
} width: 33rpx;
.mask-font{ height: 33rpx;
font-size: 50rpx; }
color: white;
margin:0 26rpx 0 26rpx; .mask-font {
} font-size: 50rpx;
.mask-items{ color: white;
width: 426rpx; margin: 0 26rpx 0 26rpx;
margin: auto; }
margin-top: 50rpx;
display: flex; .mask-items {
flex-wrap: wrap; width: 426rpx;
justify-content: space-between; margin: auto;
} margin-top: 50rpx;
.maskItem{ display: flex;
font-weight:400; flex-wrap: wrap;
font-size:26rpx; justify-content: space-between;
color:rgba(246,219,191,1); }
.maskItem {
font-weight: 400;
font-size: 26rpx;
color: rgba(246, 219, 191, 1);
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
\ No newline at end of file
/* 二期样式 */
.order {
}
.order image {
width: 32rpx;
height: 32rpx;
}
pages/mine/order/order.js
const App = getApp()
Page({ Page({
data: { data: {
imageBase: App.globalData.appImageBase,
orderTypeTitle: '全部分类',
orderTypeHeight: 0,
statusActive: 0,
statusList: [
{ 'id': 0, 'name': '全部' },
{ 'id': 1, 'name': '待付款' },
{ 'id': 2, 'name': '待使用' },
{ 'id': 3, 'name': '取消/过期' },
],
orderList: [
{
'id': 0,
'logo': '',
'name': '原味舒食',
'status': 0,
'commodity': [{
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 2,
'price': 20
}],
'total': 0,
'amount': '130.30'
}, {
'id': 0,
'logo': '',
'name': '原味舒食',
'status': 1,
'commodity': [{
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 2,
'price': 10
}, {
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 5,
'price': 24
}],
'total': 0,
'amount': '130.30'
}, {
'id': 0,
'logo': '',
'name': '原味舒食',
'status': 2,
'commodity': [{
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 2,
'price': 10
}, {
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 5,
'price': 24
}, {
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 5,
'price': 24
}],
'total': 0,
'amount': '130.30'
}, {
'id': 0,
'logo': '',
'name': '原味舒食',
'status': 3,
'commodity': [{
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 2,
'price': 10
}, {
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 5,
'price': 24
}],
'total': 0,
'amount': '130.30'
}, {
'id': 0,
'logo': '',
'name': '原味舒食',
'status': 4,
'commodity': [{
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 2,
'price': 10
}, {
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 5,
'price': 24
}],
'total': 0,
'amount': '130.30'
}, {
'id': 0,
'logo': '',
'name': '原味舒食',
'status': 5,
'commodity': [{
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 2,
'price': 10
}, {
'cover': '',
'name': '咖喱蔬菜大虾',
'quantity': 5,
'price': 24
}],
'total': 0,
'amount': '130.30'
}
],
winOrderType: false,
}, },
onLoad: function (options) { onLoad: function (options) {
}, },
onOrderType: function () {
this.setData({
winOrderType: !this.data.winOrderType
})
},
onOrderTypeSelection: function (event) {
console.log(event.currentTarget.dataset.id)
this.setData({
orderTypeTitle: event.currentTarget.dataset.id
})
},
onSelectionStatus: function (event) {
console.log(event.currentTarget.dataset.type)
this.setData({
statusActive: Number(event.currentTarget.dataset.type)
})
},
}) })
\ No newline at end of file
pages/mine/order/order.wxml
<!--pages/home/home/home.wxml--> <view class="navigation-order row con-b align-c">
<text>pages/home/home/home.wxml</text> <image src="{{imageBase + 'icon/arrow-l-1.png'}}"></image>
<view class="order-type row con-c align-c" bindtap="onOrderType">
<text>{{orderTypeTitle}}</text>
<image src="{{imageBase + 'icon/arrow-b-2.png'}}"></image>
</view>
<image src=""></image>
</view>
<view class="order-type-selection col" wx:if="{{winOrderType}}" bindtap="onOrderType">
<view>
<view class="order-type-row row con-b align-c">
<view class="order-type-item row con-c align-c {{orderTypeTitle === '全部分类' ? 'order-type-item-active' : ''}}" data-id="全部分类" bindtap="onOrderTypeSelection">
<text>全部分类</text>
</view>
<view class="order-type-item row con-c align-c {{orderTypeTitle === '门票' ? 'order-type-item-active' : ''}}" data-id="门票" bindtap="onOrderTypeSelection">
<text>门票</text>
</view>
<view class="order-type-item row con-c align-c {{orderTypeTitle === '餐饮' ? 'order-type-item-active' : ''}}" data-id="餐饮" bindtap="onOrderTypeSelection">
<text>餐饮</text>
</view>
</view>
<view class="order-type-row row con-b align-c">
<view class="order-type-item row con-c align-c {{orderTypeTitle === '影票' ? 'order-type-item-active' : ''}}" data-id="影票" bindtap="onOrderTypeSelection">
<text>影票</text>
</view>
<view class="order-type-item row con-c align-c {{orderTypeTitle === 'SPA' ? 'order-type-item-active' : ''}}" data-id="SPA" bindtap="onOrderTypeSelection">
<text>SPA</text>
</view>
<view class="order-type-item row con-c align-c {{orderTypeTitle === '文创' ? 'order-type-item-active' : ''}}" data-id="文创" bindtap="onOrderTypeSelection">
<text>文创</text>
</view>
</view>
</view>
</view>
<view class="container-order">
<view class="status row con-b align-c">
<block wx:for="{{statusList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="status-item row con-c align-c {{index === statusActive ? 'status-item-active' : ''}}" data-type="{{index}}" bindtap="onSelectionStatus">
<text>{{item.name}}</text>
</view>
</block>
</view>
<view class="order-list col con-c align-c">
<block wx:for="{{orderList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="order-list-item col align-c">
<view class="order-list-item-title row con-b align-c">
<view class="row align-c">
<image src=""></image>
<text>{{item.name}}</text>
</view>
<view>
<text class="warning" wx:if="{{item.status === 0}}">待付款</text>
<text class="warning" wx:if="{{item.status === 1}}">待使用</text>
<text class="warning" wx:if="{{item.status === 2}}">待评价</text>
<text class="message" wx:if="{{item.status === 3}}">已取消</text>
<text class="message" wx:if="{{item.status === 4}}">已过期</text>
<text class="message" wx:if="{{item.status === 5}}">已评价</text>
</view>
</view>
<view class="order-list-item-service row con-b align-c" wx:if="{{item.commodity.length === 1}}">
<image class="cover" src=""></image>
<text class="name">精灵鸟理想国单人次票精灵鸟理想国单人次票</text>
<text class="total">{{'x ' + item.total}}</text>
</view>
<view class="order-list-item-service row con-b align-c" wx:if="{{item.commodity.length >= 2}}">
<block wx:for="{{item.commodity}}" wx:for-index="commodityIndex" wx:for-item="commodityItem" wx:key="commodityIndex">
<image class="cover" src=""></image>
</block>
<text class="total">{{'共 ' + item.total + ' 件'}}</text>
</view>
<view class="order-list-item-operation row con-b align-c">
<view class="row align-c">
<text class="amount">实付:</text>
<text class="amount">¥20.00</text>
</view>
<view class="row align-c">
<button wx:if="{{item.status === 0}}" class="delete row con-c align-c">取消订单</button>
<button wx:if="{{item.status >= 3}}" class="delete row con-c align-c">删除订单</button>
<button wx:if="{{item.status === 0}}" class="again row con-c align-c">去支付</button>
<button wx:if="{{item.status === 1}}" class="again row con-c align-c">去使用</button>
<button wx:if="{{item.status === 2}}" class="again row con-c align-c">去评价</button>
<button wx:if="{{item.status === 3}}" class="again row con-c align-c">再次下单</button>
</view>
</view>
</view>
</block>
</view>
</view>
\ No newline at end of file
pages/mine/order/order.wxss
/* pages/home/home/home.wxss */ .navigation-order {
\ No newline at end of file z-index: 1700;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
height: 176rpx;
padding: 0 24rpx;
background: #FFFFFF;
}
.navigation-order image {
width: 32rpx;
height: 32rpx;
}
.order-type {
width: 200rpx;
height: 64rpx;
border-radius: 32rpx;
border: 1px solid #E2E7EF;
}
.order-type text {
margin-right: 8rpx;
font-size: 26rpx;
}
/* 订单类型选择 */
.order-type-selection {
z-index: 1700;
position: fixed;
top: 176rpx;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .65);
}
.order-type-selection > view {
width: 750rpx;
height: 240rpx;
padding-top: 10rpx;
border-radius: 0px 0px 24rpx 24rpx;
background: #FFFFFF;
font-size: 26rpx;
font-weight: 500;
line-height: 36rpx;
color: #959DA9;
}
.order-type-row {
height: 64rpx;
margin-bottom: 40rpx;
padding: 0 40rpx;
}
.order-type-item {
width: 192rpx;
height: 64rpx;
border-radius: 32rpx;
background: #F2F3F5;
}
.order-type-item-active {
background: #86C5E1;
color: #FFFFFF;
}
.container {
position: relative;
}
/* 状态筛选菜单 */
.status {
width: 750rpx;
height: 112rpx;
padding: 0 34rpx 1rpx 64rpx;
border-bottom: 1px #E2E7EF solid;
}
.status-item {
height: 112rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
border-bottom: 4px #FFFFFF solid;
color: #959DA9;
}
.status-item-active {
height: 112rpx;
border-bottom: 4px #000000 solid;
color: #000000;
}
/* 订单列表 */
.order-list {
width: 750rpx;
padding-bottom: 120rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%);
}
.order-list-item {
width: 670rpx;
height: 396rpx;
margin-top: 48rpx;
padding: 20rpx 0 40rpx 0;
border-radius: 4rpx;
background: #FFFFFF;
}
.order-list-item > view {
width: 610rpx;
}
.order-list-item-title .warning {
font-weight: 800;
color: #E66060;
}
.order-list-item-title .message {
font-weight: 800;
color: #C2C7CF;
}
.order-list-item-title image {
display: block;
max-width: 100rpx;
height: 60rpx;
margin-right: 20rpx;
background: #999999;
}
.order-list-item-service {
margin: 34rpx 0 48rpx 0;
}
.order-list-item-service .cover {
display: block;
width: 140rpx;
height: 140rpx;
margin-right: 20rpx;
border-radius: 4px;
background: #999999;
}
.order-list-item-service .name {
width: 376rpx;
margin-left: 12rpx;
font-weight: 800;
}
.order-list-item-service .total {
flex-grow: 1;
height: 36rpx;
text-align: right;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #959DA9;
}
.order-list-item-operation .amount {
height: 36rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #15191F;
}
.order-list-item-operation .delete {
width: 120rpx;
height: 56rpx;
border-radius: 4px;
border: 1px solid #C2C7CF;
font-size: 22rpx;
font-weight: 500;
line-height: 32rpx;
color: #656E7B;
}
.order-list-item-operation .again {
width: 120rpx;
height: 56rpx;
margin-left: 20rpx;
border-radius: 4px;
background: #86C5E1;
font-size: 22rpx;
font-weight: 500;
line-height: 32rpx;
color: #FFFFFF;
}
\ No newline at end of file
pages/pay/coupon-detail/coupon-detail.js
Page({ Page({
data: { data: {
orderType: 1, // 1 - 年卡/月卡，2 - 次票， 3 - SPA， 4 - 文创， 5 - 餐品， 6 - 活动， 7 - 观影
couponInfo: {
type: '套票',
store: '儿童营地',
id: '26719921231',
useTime: '2020-11-06'
},
goodsList: [
{
id: 0,
cover: '',
name: '咖喱蔬菜大虾',
quantity: '2',
price: '30.60'
},
{
id: 1,
cover: '',
name: '南瓜坚果汤',
quantity: '3',
price: '30.60'
},
],
orderInfo: {
name: '林有一',
phone: '15802035122',
idNum: '350600366462131',
}
}, },
onLoad: function (options) { onLoad: function (options) {
console.log(options)
if (options.type) options.type = Number(options.type)
let orderType = options.type
this.setData({
orderType
})
this.setView()
}, },
setView() {
let orderType = this.data.orderType
switch (orderType) {
case 4:
this.setData({
goodsList: [
{
cover: '',
name: '《海错图》超级豪华精致古风限量版折扇',
quantity: '1',
price: '30.60'
}
],
note: '身份证号变更为350600366462132'
})
break
case 5:
break
}
}
}) })
\ No newline at end of file
pages/pay/coupon-detail/coupon-detail.json
{ {
"usingComponents": {} "usingComponents": {
"Blank": "../../../component/Blank/Blank"
}
} }
\ No newline at end of file
pages/pay/coupon-detail/coupon-detail.wxml
<!--pages/home/home/home.wxml--> <navigation class="navigation" titleText="券码核销" background="#ffffff" backIcon="/image/back.png"></navigation>
<text>pages/home/home/home.wxml</text>
<view class="container">
<view class="list-wrapper">
<view class="title-wrapper">兑换券信息</view>
<view class="info-wrapper row con-b">
<view class="info-name">商品类型</view>
<view class="info-text">{{couponInfo.type}}</view>
</view>
<view class="info-wrapper row con-b">
<view class="info-name">所属门店</view>
<view class="info-text">{{couponInfo.store}}</view>
</view>
<view class="info-wrapper row con-b">
<view class="info-name">券号</view>
<view class="info-text">{{couponInfo.id}}</view>
</view>
<view class="info-wrapper row con-b">
<view class="info-name">有效期</view>
<view class="info-text">{{couponInfo.useTime}}</view>
</view>
</view>
<view class="list-wrapper">
<view class="title-wrapper">商品详情</view>
<view class="goods-list">
<view class="goods-item row align-c" wx:for="{{goodsList}}" wx:key="id">
<view class="goods-img">
<image mode="widthFix" src="{{item.cover}}"></image>
</view>
<view class="goods-name">{{item.name}}</view>
<view class="goods-price-num col">
<view class="goods-num">{{'共'+item.quantity + '件'}}</view>
<view class="goods-price">
<text class="price-symbol">￥</text>
<text>{{item.price}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="list-wrapper">
<view class="title-wrapper">订单详情</view>
<view class="info-wrapper row con-b">
<view class="info-name">姓名</view>
<view class="info-text">{{orderInfo.name}}</view>
</view>
<view class="info-wrapper row con-b">
<view class="info-name">手机</view>
<view class="info-text">{{orderInfo.phone}}</view>
</view>
<view class="info-wrapper row con-b">
<view class="info-name">身份证</view>
<view class="info-text">{{orderInfo.idNum}}</view>
</view>
</view>
<view class="list-wrapper">
<view class="title-wrapper">订单详情</view>
<view class="info-wrapper row con-b">
<view class="info-name">姓名</view>
<view class="info-text">{{orderInfo.name}}</view>
</view>
<view class="info-wrapper row con-b">
<view class="info-name">手机</view>
<view class="info-text">{{orderInfo.phone}}</view>
</view>
<view class="info-wrapper row con-b">
<view class="info-name">身份证</view>
<view class="info-text">{{orderInfo.idNum}}</view>
</view>
</view>
<view class="list-wrapper" wx:if="{{note}}">
<view class="title-wrapper">备注</view>
<view class="info-wrapper row con-b">
<view class="info-name">{{note}}</view>
</view>
</view>
</view>
<view class="footer-wrapper">
<view class="footer-btn row con-b align-e">
<view class="cancel-btn">取消核销</view>
<view class="confirm-btn">确认核销</view>
</view>
<Blank></Blank>
</view>
pages/pay/coupon-detail/coupon-detail.wxss
/* pages/home/home/home.wxss */ .container {
\ No newline at end of file margin-top: 120rpx;
padding-bottom: 196rpx;
}
.list-wrapper {
width: 750rpx;
}
.title-wrapper {
width: 750rpx;
height: 64rpx;
padding: 0 40rpx;
color: #959DA9;
font-size: 26rpx;
font-weight: 600;
line-height: 64rpx;
background-color: #F7F8FA;
}
.info-wrapper {
width: 670rpx;
height: 96rpx;
margin: 0 auto;
color: #15191F;
font-size: 30rpx;
line-height: 96rpx;
border-bottom: 1px solid #E2E7EF;
}
.info-wrapper:last-child {
border-bottom: none;
}
.goods-list {
padding: 24rpx 40rpx;
}
.goods-item {
height: 188rpx;
}
.goods-img {
width: 140rpx;
height: 140rpx;
background-color: #ccc;
}
.goods-name {
flex: 1;
height: 84rpx;
color: #15191F;
font-size: 30rpx;
font-weight: 600;
line-height: 42rpx;
margin: 0 32rpx;
}
.goods-price-num {
width: 100rpx;
height: 84rpx;
}
.goods-num {
flex: 1;
font-size: 30rpx;
font-weight: 600;
text-align: right;
}
.goods-price {
flex: 1;
text-align: right;
color: #959DA9;
font-size: 26rpx;
}
.price-symbol {
font-size: 22rpx;
}
.footer-wrapper {
position: fixed;
left: 0;
bottom: 0rpx;
}
.footer-btn {
width: 750rpx;
height: 128rpx;
padding: 0 40rpx;
background-color: #fff;
border-top: 1px solid #E2E7EF;
}
.cancel-btn, .confirm-btn {
width: 318rpx;
height: 96rpx;
font-size: 30rpx;
font-weight: 600;
line-height: 96rpx;
text-align: center;
border-radius: 4rpx;
}
.cancel-btn {
color: #656E7B;
background-color: #fff;
border: 1px solid #C2C7CF;
}
.confirm-btn {
color: #fff;
background-color: #86C5E1;
}
image {
width: 100%;
height: 100%;
}
pages/pay/coupon-input/coupon-input.js
Page({ Page({
data: { data: {
avatarUrl: '/pages/mine/home/image/avatar.png',
showDialog: false
}, },
onLoad: function (options) { onLoad: function (options) {
}, },
handleWriteOff() {
let showDialog = true
this.setData({
showDialog
})
},
handleScanCode() {
wx.scanCode({
onlyFromCamera: true,
success: (res) => {
console.log(res)
}
})
}
}) })
\ No newline at end of file
pages/pay/coupon-input/coupon-input.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">
<!-- 头像信息 -->
<view class="header col align-c">
<view class="header-bg">
<image src=""></image>
</view>
<view class="header-avatar">
<l-avatar size="160" src="{{avatarUrl}}"></l-avatar>
</view>
<view class="header-info">
<view class="info-name">文碧海</view>
<view class="info-text col con-b">
<view class="row con-b">
<text class="info-left">工作身份</text>
<text class="info-right">前台核销</text>
</view>
<view class="row con-b">
<text class="info-left">所属门店</text>
<text class="info-right">艺术花坊</text>
</view>
</view>
</view>
</view>
<!-- 核销输入框 -->
<view class="coupon-input-wrapper row con-b">
<input placeholder="请输入券码" placeholder-style="color: #C2C7CF"></input>
<view class="coupon-input-btn" bindtap="handleWriteOff">核销</view>
<l-dialog show="{{showDialog}}" l-class="dialog-wrapper" l-title-class="dialog-title" l-confirm-class="dialog-confirm" title="非本店券码，无法使用">
<view class="dialog-content">所属门店：原味舒食</view>
</l-dialog>
<l-toast show="{{true}}" l-image-class="toast-image" l-class="toast-bg" image="/image/success.png" title="核销成功" />
</view>
<!-- 扫码核销 -->
<view class="coupon-scan-wrapper row con-c align-c" bindtap="handleScanCode">
<view class="scan-icon">
<image mode="widthFix" src="/image/scan.png"></image>
</view>
<view class="scan-text" bindtap="handleCouponScan">扫码核销</view>
<view class="scan-right">
<image mode="widthFix" src="/image/more-g.png"></image>
</view>
</view>
</view>
\ No newline at end of file
pages/pay/coupon-input/coupon-input.wxss
/* pages/home/home/home.wxss */ .header-bg {
\ No newline at end of file width: 750rpx;
height: 774rpx;
background-color: #ccc;
}
.header-avatar {
position: absolute;
top: 264rpx;
width: 160rpx;
height: 160rpx;
}
.header-info {
position: absolute;
top: 472rpx;
width: 232rpx;
height: 205rpx;
}
.info-name {
width: 100%;
height: 116rpx;
text-align: center;
color: #15191F;
font-size: 34rpx;
font-weight: 600;
}
.info-text {
height: 88rpx;
}
.info-left {
color: #959DA9;
font-size: 26rpx;
}
.info-right {
color: #15191F;
font-size: 26rpx;
}
.coupon-input-wrapper {
width: 668rpx;
height: 80rpx;
margin-top: 70rpx;
}
.coupon-input-wrapper input {
width: 480rpx;
height: 80rpx;
padding: 0 22rpx 0 24rpx;
font-size: 30rpx;
line-height: 80rpx;
border: 1px solid #DBDFE5;
border-radius: 4rpx;
}
.coupon-input-btn {
width: 156rpx;
height: 80rpx;
margin-left: 32rpx;
font-size: 30rpx;
color: #fff;
line-height: 80rpx;
text-align: center;
background-color: #86C5E1;
border-radius: 4rpx;
}
.dialog-wrapper {
width: 590rpx !important;
}
.dialog-title {
margin-top: 48rpx !important;
color: #15191F !important;
font-size: 34rpx !important;
font-weight: 600 !important;
}
.dialog-confirm {
height: 94rpx !important;
color: #5DB5DD !important;
font-size: 30rpx !important;
}
.dialog-content {
margin-bottom: 30rpx;
color: #959DA9;
font-size: 30rpx;
}
.toast-bg {
min-width: 262rpx !important;
min-height: 262prx !important;
}
.toast-image {
}
.coupon-scan-wrapper {
width: 668rpx;
height: 160rpx;
margin-top: 64rpx;
padding: 0 48rpx;
background-color: #F2F3F5;
border-radius: 4rpx;
}
.scan-text {
flex: 1;
height: 48rpx;
padding: 0 16rpx;
color: #15191F;
font-size: 34rpx;
font-weight: 600;
}
.scan-icon, .scan-right {
width: 40rpx;
height: 40rpx;
}
image {
width: 100%;
height: 100%;
}
pages/play/service-detail/service-detail.js
...@@ -40,12 +40,28 @@ Page({ ...@@ -40,12 +40,28 @@ Page({
}, },
navigationScroll: 0, navigationScroll: 0,
// 内容类型
contentType: 'evaluate',
// banner 列表数据 // banner 列表数据
banner: [], banner: [],
bannerIndex: 0, bannerIndex: 0,
bannerHeight: 300, bannerHeight: 300,
info: {}, info: {},
detailActivity: [], // 活动
detailCommodity: [], // 商品
detailEvaluate: [], // 评论
isBlack: false, isBlack: false,
sideHeight: 550, sideHeight: 550,
...@@ -53,6 +69,7 @@ Page({ ...@@ -53,6 +69,7 @@ Page({
}, },
onLoad: function (options) { onLoad: function (options) {
options.id = 1
logicData.option = options logicData.option = options
this.queryDetail(Number(options.id)) this.queryDetail(Number(options.id))
}, },
...@@ -77,6 +94,36 @@ Page({ ...@@ -77,6 +94,36 @@ Page({
name: '海错图展馆', name: '海错图展馆',
title: '海错图', title: '海错图',
date: '周一至周日 10:00 - 20:00', date: '周一至周日 10:00 - 20:00',
activity: [
{
cover: '',
title: '亲子自然教育工作坊',
tab: '亲子教育',
time: '7.20-7.25 10:00-11:30',
price: '150',
specialPrice: '100',
}, {
cover: '',
title: '装饰干花工作坊',
tab: '亲子教育',
time: '7.20-7.25 10:00-11:30',
price: '150',
specialPrice: '100',
}
],
commodity: [
{
cover: '',
title: '海错图画册',
price: '150',
specialPrice: '100',
}, {
cover: '',
title: '海错图画册',
price: '150',
specialPrice: '100',
}
],
describe: [ describe: [
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-1.png', App.globalData.appResourcesBase + 'shop/detail/detail-1-1-1.png',
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-2.png', App.globalData.appResourcesBase + 'shop/detail/detail-1-1-2.png',
...@@ -84,6 +131,17 @@ Page({ ...@@ -84,6 +131,17 @@ Page({
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-4.png', App.globalData.appResourcesBase + 'shop/detail/detail-1-1-4.png',
App.globalData.appResourcesBase + 'shop/detail/detail-1-1-5.png', App.globalData.appResourcesBase + 'shop/detail/detail-1-1-5.png',
], ],
evaluate: [
{
avatar: '',
name: '张笑寒',
status: 1,
date: '2020.02.29',
star: 4,
content: '通过数字化形式，运用视频、动画 游戏、交感互动等多种手段，分层呈现画谱中原本二维的文字与图片信息。乾隆挚爱的故宫典藏图谱、清代画师聂璜所著12312313123',
image: [],
}
],
contact: '13316748039' contact: '13316748039'
}, { }, {
id: 2, id: 2,
...@@ -170,6 +228,8 @@ Page({ ...@@ -170,6 +228,8 @@ Page({
} }
] ]
this.setData({ this.setData({
banner: funcDetail[funcIndex].banner, banner: funcDetail[funcIndex].banner,
info: { info: {
...@@ -179,7 +239,10 @@ Page({ ...@@ -179,7 +239,10 @@ Page({
date: funcDetail[funcIndex].date, date: funcDetail[funcIndex].date,
describe: funcDetail[funcIndex].describe, describe: funcDetail[funcIndex].describe,
contact: funcDetail[funcIndex].contact, contact: funcDetail[funcIndex].contact,
} },
detailActivity: funcDetail[funcIndex].activity,
detailCommodity: funcDetail[funcIndex].commodity,
detailEvaluate: funcDetail[funcIndex].evaluate,
}) })
if (this.data.info.id === 6) { if (this.data.info.id === 6) {
...@@ -195,6 +258,29 @@ Page({ ...@@ -195,6 +258,29 @@ Page({
}) })
}, },
/**
* 简介，评价切换
* @function
* @param {object} - event
* @returns
*/
onSelectionContent: function (event) {
let funcContentType = event.currentTarget.dataset.type
switch (funcContentType) {
case 'detail':
this.setData({
contentType: funcContentType
})
break
case 'evaluate':
this.setData({
contentType: funcContentType
})
break
}
},
onContact: function () { onContact: function () {
wx.makePhoneCall({ wx.makePhoneCall({
phoneNumber: this.data.info.contact phoneNumber: this.data.info.contact
......
pages/play/service-detail/service-detail.wxss
...@@ -55,69 +55,10 @@ ...@@ -55,69 +55,10 @@
height: 60rpx; height: 60rpx;
} }
/* 详情样式 */
.detail {
padding-bottom: 160rpx;
}
.detail-black {
background: #1C1C25;
}
.detail-title {
width: 670rpx;
min-height: 76rpx;
margin: 60rpx 40rpx 0 40rpx;
font-size: 54rpx;
font-weight: bold;
color: #15191F;
line-height: 76rpx;
}
.title-black { .title-black {
color: #FFFFFF; color: #FFFFFF;
} }
.detail-other {
margin-top: 32rpx;
padding: 0 40rpx 48rpx 40rpx;
border-bottom: 1px #E2E7EF solid;
}
.detail-other view {
margin-top: 24rpx;
}
.detail-other-time,
.detail-other-location {
width: 36rpx;
height: 36rpx;
margin-right: 12rpx;
}
.detail-other view text:nth-child(2) {
width: 60rpx;
height: 42rpx;
margin-right: 32rpx;
font-size: 30rpx;
font-weight: 300;
color: #959DA9;
line-height: 42rpx;
}
.detail-other view text:nth-child(3) {
height: 40rpx;
font-size: 30rpx;
color: #000000;
line-height: 42rpx;
}
.detail-other-more {
width: 32rpx;
height: 32rpx;
margin-left: 318rpx;
}
.other-black { .other-black {
border-bottom: 1px #3a3a40 solid; border-bottom: 1px #3a3a40 solid;
} }
...@@ -126,12 +67,12 @@ ...@@ -126,12 +67,12 @@
color: #FFFFFF; color: #FFFFFF;
} }
.detail-describe { .commodity-describe {
position: relative; position: relative;
width: 750rpx; width: 750rpx;
} }
.detail-describe image { .commodity-describe image {
display: block; display: block;
width: 750rpx; width: 750rpx;
} }
...@@ -193,4 +134,390 @@ ...@@ -193,4 +134,390 @@
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
margin: 16rpx; margin: 16rpx;
}
/* 二期整理样式 */
.commodity-title {
width: 670rpx;
min-height: 76rpx;
margin: 60rpx 40rpx 0 40rpx;
font-size: 54rpx;
font-weight: bold;
color: #15191F;
line-height: 76rpx;
}
.commodity-title text {
flex-grow: 1;
}
.commodity-title image {
width: 40rpx;
height: 40rpx;
margin-left: 24rpx;
}
.commodity-other {
padding: 50rpx 40rpx;
border-bottom: 1px #E2E7EF solid;
font-size: 30rpx;
font-weight: 400;
line-height: 44rpx;
}
.commodity-other image {
width: 40rpx;
height: 40rpx;
margin-right: 8rpx;
}
.commodity-other text:nth-child(2) {
margin-right: 16rpx;
color: #959DA9;
}
/* 近期活动，文创商品 */
.commodity-card-title {
margin-top: 80rpx;
padding: 0 40rpx;
}
.commodity-card-title text:nth-child(1) {
font-size: 40rpx;
font-weight: 800;
}
.commodity-card-title text:nth-child(2) {
font-size: 26rpx;
color: #959DA9;
}
.commodity-card-list {
width: 710rpx;
margin: 50rpx 0 0 40rpx;
overflow: scroll;
}
.commodity-card-list::-webkit-scrollbar {
width: 0;
}
.commodity-card-item {
width: 562rpx;
margin-right: 24rpx;
padding-bottom: 32rpx;
border-radius: 4px;
background: #F5F6F8;
}
.commodity-card-item > image {
width: 562rpx;
height: 316rpx;
background: #999999;
}
.commodity-card-item-title {
height: 44rpx;
margin-top: 32rpx;
padding: 0 32rpx;
}
.commodity-card-item-title text:nth-child(1) {
font-size: 30rpx;
font-weight: 400;
line-height: 44rpx;
color: #15191F;
}
.commodity-card-item-title text:nth-child(2) {
width: 96rpx;
height: 32rpx;
border-radius: 4px;
border: 1px solid #86C5E1;
background: #EAF0F5;
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 24rpx;
color: #86C5E1;
}
.commodity-card-item-date {
width: 498rpx;
height: 40rpx;
margin-top: 8rpx;
padding: 0 32rpx;
}
.commodity-card-item-date image {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.commodity-card-item-date text {
height: 40rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 40rpx;
color: #656E7B;
}
.commodity-card-item-operation {
margin-top: 16rpx;
padding: 0 32rpx;
}
.commodity-card-item-operation text:nth-child(1) {
width: 78rpx;
height: 32rpx;
margin-right: 12rpx;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4px;
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 28rpx;
color: #E8D0AF;
}
.commodity-card-item-operation text:nth-child(2) {
margin-right: 16rpx;
text-align: center;
font-size: 30rpx;
font-weight: 800;
line-height: 40rpx;
color: #15191F;
}
.commodity-card-item-operation text:nth-child(3) {
text-align: center;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #C2C7CF;
}
.commodity-card-item-operation button {
flex-grow: 1;
width: 132rpx;
height: 56rpx;
border-radius: 4px;
background: #86C5E1;
font-size: 26rpx;
font-weight: 500;
line-height: 36rpx;
color: #FFFFFF;
}
/* 简介，评论 */
.selection-content {
width: 750rpx;
height: 64rpx;
margin-top: 80rpx;
padding: 0 40rpx;
border-bottom: 1px #E2E7EF solid;
}
.selection-content-item {
width: 60rpx;
height: 64rpx;
margin-right: 64rpx;
border-bottom: 4rpx rgba(0, 0, 0, 0) solid;
font-size: 30rpx;
line-height: 44rpx;
color: #656E7B;
}
.selection-content-item-active {
width: 60rpx;
height: 64rpx;
margin-right: 64rpx;
border-bottom: 4rpx #15191F solid;
font-size: 30rpx;
font-weight: 800;
line-height: 44rpx;
color: #15191F;
}
/* 详情 */
.detail {
padding-bottom: 160rpx;
}
.detail image {
display: block;
width: 750rpx;
}
/* 评论 */
.evaluate {
padding-bottom: 160rpx;
}
.evaluate-option {
width: 750rpx;
margin: 62rpx 0 16rpx 0;
padding: 0 40rpx;
}
.evaluate-option-item image {
width: 40rpx;
height: 40rpx;
margin-right: 16rpx;
}
.evaluate-option-item text:nth-child(2) {
width: 44rpx;
height: 32rpx;
margin-right: 8rpx;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #959DA9;
}
.evaluate-option-item text:nth-child(3) {
height: 40rpx;
font-size: 26rpx;
font-weight: 500;
line-height: 40rpx;
color: #15191F;
}
.evaluate-option-item text:nth-child(4) {
height: 40rpx;
font-size: 20rpx;
font-weight: 500;
line-height: 40rpx;
color: #15191F;
}
/* 评论详情 */
.evaluate-item {
width: 670rpx;
min-height: 292rpx;
margin: 48rpx 40rpx 0 40rpx;
}
.evaluate-item-avatar {
width: 80rpx;
height: 80rpx;
margin-right: 16rpx;
border-radius: 50%;
background: #999999;
}
.evaluate-item-info-text {
width: 574rpx;
}
.evaluate-item-info-text text:nth-child(1) {
height: 44rpx;
margin-right: 12rpx;
font-size: 30rpx;
font-weight: 400;
line-height: 44rpx;
color: #15191F;
}
.evaluate-item-info-text text:nth-child(2) {
width: 60rpx;
height: 32rpx;
border-radius: 4px;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
text-align: center;
font-size: 18rpx;
font-weight: 500;
line-height: 28rpx;
color: #E8D0AF;
}
.evaluate-item-info-text text:nth-child(3) {
flex-grow: 1;
height: 32rpx;
text-align: right;
font-size: 22rpx;
font-weight: 400;
line-height: 32rpx;
color: #959DA9;
}
.evaluate-item-info-star image {
width: 28rpx;
height: 28rpx;
margin-right: 4rpx;
}
.evaluate-item-content {
position: relative;
width: 670rpx;
max-height: 132rpx;
margin-top: 32rpx;
overflow: hidden;
font-size: 26rpx;
font-weight: 400;
line-height: 44rpx;
color: #15191F;
}
.evaluate-item-content-more {
position: absolute;
bottom: 0;
right: 18rpx;
width: 106rpx;
height: 44rpx;
background: #FFFFFF;
text-align: right;
font-size: 26rpx;
font-weight: 400;
line-height: 44rpx;
}
.evaluate-item-content-more text:nth-child(1) {
color: #15191F;
}
.evaluate-item-content-more text:nth-child(2) {
color: #86C5E1;
}
.evaluate-item-album {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
padding: 32rpx 0 48rpx 0;
border-bottom: 1px #E2E7EF solid;
}
.evaluate-item-album:last-child {
border: none;
}
.evaluate-item-album image {
width: 160rpx;
height: 160rpx;
margin: 0 10rpx 10rpx 0;
border-radius: 4px;
background: #999999;
}
.evaluate-item-album image:nth-child(4n) {
margin-right: 0;
border: 1px red solid;
} }
\ No newline at end of file
project.config.json
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
}, },
"compileType": "miniprogram", "compileType": "miniprogram",
"libVersion": "2.10.0", "libVersion": "2.10.0",
"appid": "wx4933acc52682049e", "appid": "wx37a9b7a3d92029f2",
"projectname": "%E4%B8%96%E8%8C%82%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BA%8C%E6%9C%9F", "projectname": "%E4%B8%96%E8%8C%82%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BA%8C%E6%9C%9F",
"debugOptions": { "debugOptions": {
"hidedInDevtools": [] "hidedInDevtools": []
...@@ -133,23 +133,34 @@ ...@@ -133,23 +133,34 @@
}, },
{ {
"id": -1, "id": -1,
"name": "pages/home/home/home", "name": "pages/commodity/snacks/snacks",
"pathName": "pages/home/home/home", "pathName": "pages/commodity/snacks/snacks",
"query": "", "query": "",
"scene": null "scene": null
}, },
{ {
"id": -1, "id": -1,
<<<<<<< HEAD
"name": "pages/commodity/snacks/snacks", "name": "pages/commodity/snacks/snacks",
"pathName": "pages/commodity/snacks/snacks", "pathName": "pages/commodity/snacks/snacks",
=======
"name": "pages/pay/coupon-input/coupon-input",
"pathName": "pages/pay/coupon-input/coupon-input",
>>>>>>> 667f630dfecbd067586751628eb240b2f54db267
"query": "", "query": "",
"scene": null "scene": null
}, },
{ {
<<<<<<< HEAD
"id": 11, "id": 11,
"name": "pages/home/service/service", "name": "pages/home/service/service",
"pathName": "pages/home/service/service", "pathName": "pages/home/service/service",
"query": "", "query": "",
=======
"id": -1,
"name": "pages/pay/coupon-detail/coupon-detail",
"pathName": "pages/pay/coupon-detail/coupon-detail",
>>>>>>> 667f630dfecbd067586751628eb240b2f54db267
"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