Commit f9bc81d9 by Jason Zhou

initial commit

parents
require('./commons');wx.webpackJsonp([40],[],[229]);
\ No newline at end of file
{
"pages": [
"pages/index/index",
"pages/blog/blog",
"pages/more/storePhoto",
"pages/comment/storeComments",
"pages/comment/writeComments",
"pages/service/imagePreview",
"pages/service/membership",
"pages/payment/payOrder",
"pages/payment/paySuccess",
"pages/recharge/getMembershipCard",
"pages/recharge/selectAmount",
"pages/recharge/rechargeSuccess",
"pages/mine/mine",
"pages/sxl/sxl",
"pages/coupon/coupon",
"pages/coupon/couponCode",
"pages/member/becomeMember",
"pages/multi/storefrontList",
"pages/tip/getUserInfo",
"pages/recharge/records",
"pages/points/points",
"pages/announcement/announcement",
"pages/ranking/ranking",
"pages/ranking/prerogativeList",
"pages/groupBuy/list",
"pages/groupBuy/center",
"pages/groupBuy/detail",
"pages/groupBuy/storeList",
"pages/groupBuy/graphicDetail",
"pages/groupBuy/share",
"pages/groupBuy/payOrder",
"pages/groupBuy/payOrderSuccess",
"pages/groupBuy/afterSale",
"pages/referrals/referralsIndex/referralsIndex",
"pages/referrals/introduction/introduction",
"pages/referrals/qrcode/qrcode",
"pages/referrals/referralsList/referralsList",
"pages/payment/preferentialRule",
"pages/luckyWheel/luckyWheel",
"pages/coupon/couponCheck",
"pages/common/refreshPage/refreshPage"
],
"window": {
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#344590",
"navigationBarTextStyle": "#000000",
"backgroundColor": "#ffffff"
},
"style": {
"mainBackground": "#344590"
},
"tabBar": {
"selectedColor": "#222222",
"backgroundColor": "#ffffff",
"list": [{
"iconPath": "assets/icons/iconset-home.png",
"selectedIconPath": "assets/icons/iconset-home-selected_1.png",
"pagePath": "pages/index/index",
"text": "主页"
},
{
"iconPath": "assets/icons/iconset-reading.png",
"selectedIconPath": "assets/icons/iconset-reading-selected_1.png",
"pagePath": "pages/blog/blog",
"text": "文章"
},
{
"iconPath": "assets/icons/icon-mine.png",
"selectedIconPath": "assets/icons/iconset-mine-selected_1.png",
"pagePath": "pages/mine/mine",
"text": "我的"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"plugins": {
"blogPlugin": {
"version": "dev",
"provider": "wx08a306210cff4868"
}
}
}
.like-btn {
z-index: 997;
}
button {
font-size: 32rpx;
}
view {
word-break: break-all;
}
form#formIdGetter {
position: relative;
z-index: -1;
}
form#formIdGetter button.form_button {
padding: 0;
margin: 0;
height: inherit;
display: block;
position: static;
border: 0;
padding-left: 0;
padding-right: 0;
text-align: left;
margin-left: 0;
margin-right: 0;
box-sizing: content-box;
overflow: auto;
border-radius: 0;
line-height: inherit;
-webkit-tap-highlight-color: none;
background-color: transparent;
}
.form_button::after {
content: "";
width: 0;
height: 0;
-webkit-transform: scale(1);
transform: scale(1);
display: none;
background-color: transparent;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
}
.flex-row.flex-start {
align-items: flex-start;
}
.flex-row.space-between {
justify-content: space-between;
}
.flex-row.center-item {
align-items: center;
}
.flex-row.top-align-item {
align-items: flex-start;
}
.flex-row.center-x {
justify-content: center;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-col.top-align-item {
align-items: flex-start;
}
.flex-col.flex-end {
align-items: flex-end;
}
.center-align {
text-align: center;
}
.left-align {
text-align: left;
}
.right-align {
text-align: right;
}
.auto-flex {
flex: 0 0 auto;
}
.normal-flex {
flex: 1 1 0%;
}
.gray-text {
color: #666;
}
.light-text {
color: #999;
}
.lighter-text {
color: #c1c1c1;
}
.price {
color: #f14b7d !important;
font-size: 32rpx;
}
.main-button {
color: #fff;
border-radius: 0;
padding: 0;
height: 100rpx;
line-height: 100rpx;
border: none;
}
.main-button:after {
display: none;
}
.main-button.reverse {
color: #f14b7d;
background: #fff;
border: 2rpx solid #f14b7d;
box-sizing: border-box;
}
text,
view {
font-size: 32rpx;
color: #333;
}
scroll-view {
overflow: scroll;
}
page {
background: #ffffff;
line-height: 1.2;
}
page text,
page view,
page input,
page textarea {
font-family: -apple-system-font, 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif;
}
scroll-view::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.loader {
font-size: 20rpx;
margin: 0;
text-indent: -9999em;
width: 40rpx;
height: 40rpx;
display: inline-block;
border-radius: 50%;
background: #797979;
background: -moz-linear-gradient(left, #797979 10%, rgba(121, 121, 121, 0) 42%);
background: -webkit-linear-gradient(left, #797979 10%, rgba(121, 121, 121, 0) 42%);
background: -o-linear-gradient(left, #797979 10%, rgba(121, 121, 121, 0) 42%);
background: -ms-linear-gradient(left, #797979 10%, rgba(121, 121, 121, 0) 42%);
background: linear-gradient(to right, #797979 10%, rgba(121, 121, 121, 0) 42%);
position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before {
width: 50%;
height: 50%;
background: #797979;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #fff;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.error-message {
position: fixed;
top: 0;
left: 0;
padding: 24rpx;
width: 100vw;
text-align: center;
background: rgba(235, 83, 95, 0.94);
color: #fff;
z-index: 999;
box-sizing: border-box;
justify-content: center;
align-items: center;
}
.error-message icon,
.error-message text {
color: #fff;
}
.error-message icon {
margin-right: 10rpx;
}
/* store boss replay*/
.replay-panel {
border-top: 2rpx solid #f3f3f3;
margin-top: 4rpx;
padding-top: 8rpx;
}
.replay-panel .store-boss {
font-size: 30rpx !important;
line-height: 1.93;
color: #757575 !important;
word-break: break-word;
}
.replay-panel .store-boss text {
font-size: 30rpx !important;
color: #6D8697 !important;
}
/* backToTop */
.backToTop {
padding: 30rpx;
bottom: 0;
position: fixed;
right: 0;
bottom: 86rpx;
}
.backToTop .backToTopContent {
padding: 17rpx 19rpx 10rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.92);
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.18);
}
.backToTop image {
width: 32rpx;
height: 32rpx;
}
text.s-title {
font-size: 38rpx;
color: #222;
}
text.s-text {
color: #666;
font-size: 28rpx;
}
.recharge-page {
padding: 40rpx 40rpx 0;
box-sizing: border-box;
}
/* group buy box */
.group-buy-box {
width: 100%;
height: 128rpx;
display: flex;
}
.group-buy-box.wireless-layout {
margin: 32rpx 0;
}
.group-buy-box.wire-layout {
padding: 32rpx 0;
box-sizing: content-box;
border-bottom: 2rpx solid #F0F0F0;
}
.group-buy-box image {
width: 128rpx;
height: 128rpx;
margin-right: 24rpx;
}
.group-buy-box .description {
width: calc(100% - 152rpx);
}
.group-buy-box .description .des-top {
display: block;
font-size: 32rpx;
overflow: hidden;
color: #444444;
line-height: 80rpx;
white-space: nowrap;
text-overflow: ellipsis;
}
.group-buy-box .description .des-bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.group-buy-box .description .des-bottom .cell {
font-size: 28rpx;
color: #A9AEB2;
}
.group-buy-box .description .price {
display: flex;
align-items: center;
}
.group-buy-box .description .price .current {
font-size: 32rpx;
color: #E64D4F;
font-weight: 500;
margin-right: 18rpx;
}
.group-buy-box .description .price .origin {
font-size: 28rpx;
color: #A9AEB2;
font-weight: 500;
text-decoration: line-through;
}
/* group buy store list */
.group-buy-store-list-box {
height: 132rpx;
background-color: #ffffff;
border-bottom: 2rpx solid #ebebeb;
display: flex;
align-items: center;
justify-content: space-between;
}
.group-buy-store-list-box .address {
width: calc(100% - 98rpx);
}
.group-buy-store-list-box .address text {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
.group-buy-store-list-box .address text:first-child {
font-size: 30rpx;
color: #3a3a3a;
}
.group-buy-store-list-box .address text:last-child {
font-size: 28rpx;
color: #999999;
margin: 14rpx 0 36rpx 0;
}
.group-buy-store-list-box .phone {
height: 74rpx;
width: 90rpx;
display: flex;
align-items: center;
justify-content: center;
border-left: 2rpx solid #f2f2f2;
}
.group-buy-store-list-box .phone image {
height: 36rpx;
width: 36rpx;
}
/* masking */
.mask-variation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.29);
}
.image-banner-wrapper {
width: 100%;
height: 180rpx;
border-top: 8rpx solid #f6f6f6;
overflow: hidden;
}
.image-banner-wrapper image {
width: 100%;
height: 100%;
}
.luckywheel-banner-afterpay-wrapper {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 180rpx;
overflow: hidden;
}
.luckywheel-banner-afterpay-wrapper image {
width: 100%;
height: 100%;
}
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"extEnable": true,
"extAppid": "wx793643a5bc933012",
"ext": {
"attr": {
"name": "知音生活馆",
"appType": "showcase",
"category": "咖啡馆",
"siteId": "863",
"galleryLayout": "a",
"layout": "a",
"phone": "18222283740",
"description": "知音生活馆与“知音们”分享美好设计,并首次推出ziin library知音图书馆,ziin cafe知音咖啡馆和ziin loft,在亲切温暖的空间之中,呈现丰富产品线与全新的体验。",
"businessHours": "",
"address": "上海市杨浦区大学路248号",
"location": {
"lng": "121.50841",
"lat": "31.3037"
},
"showAddressInMP": true,
"showPhoneNumberInMp": true,
"videoUrl": "",
"showBusinessHoursInMp": true
},
"style": {
"mainBackground": "#344590"
}
},
"pages": [
"pages/index/index",
"pages/more/storePhoto",
"pages/comment/storeComments",
"pages/comment/writeComments",
"pages/service/imagePreview",
"pages/service/membership",
"pages/payment/payOrder",
"pages/payment/paySuccess",
"pages/recharge/getMembershipCard",
"pages/recharge/selectAmount",
"pages/recharge/rechargeSuccess",
"pages/mine/mine",
"pages/sxl/sxl",
"pages/coupon/coupon",
"pages/coupon/couponCode",
"pages/member/becomeMember",
"pages/multi/storefrontList",
"pages/tip/getUserInfo",
"pages/recharge/records",
"pages/points/points",
"pages/announcement/announcement",
"pages/ranking/ranking",
"pages/ranking/prerogativeList",
"pages/groupBuy/list",
"pages/groupBuy/center",
"pages/groupBuy/detail",
"pages/groupBuy/storeList",
"pages/groupBuy/graphicDetail",
"pages/groupBuy/share",
"pages/groupBuy/payOrder",
"pages/groupBuy/payOrderSuccess",
"pages/groupBuy/afterSale",
"pages/referrals/referralsIndex/referralsIndex",
"pages/referrals/introduction/introduction",
"pages/referrals/qrcode/qrcode",
"pages/referrals/referralsList/referralsList",
"pages/payment/preferentialRule",
"pages/luckyWheel/luckyWheel",
"pages/coupon/couponCheck",
"pages/common/refreshPage/refreshPage"
],
"window": {
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#344590",
"navigationBarTextStyle": "#000000",
"backgroundColor": "#222222"
},
"tabBar": {
"selectedColor": "#222222",
"backgroundColor": "#ffffff",
"list": [{
"iconPath": "assets/icons/icon-home.png",
"selectedIconPath": "assets/icons/icon-home-selected.png",
"pagePath": "pages/index/index",
"text": "主页"
},
{
"iconPath": "assets/icons/icon-mine.png",
"selectedIconPath": "assets/icons/icon-mine-selected.png",
"pagePath": "pages/mine/mine",
"text": "我的"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"plugins": {
"myPlugin": {
"version": "dev",
"provider": "wx08a306210cff4868"
}
}
}
.like-btn {
z-index: 997;
}
wx.webpackJsonp([1],[],[230]);
\ No newline at end of file
{
"navigationBarTitleText": "公告栏",
"enablePullDownRefresh": true
}
\ No newline at end of file
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="announcement-items">
<block wx:for="{{announcements}}" wx:key="{{id}}">
<view class="announcement-item">{{item.content}}</view>
</block>
</view>
</button>
</form>
page {
background-color: #ffffff;
}
.announcement-items {
margin: 0 48rpx;
}
.announcement-item {
padding: 36rpx 0;
color: #3a3a3a;
border-bottom: 2rpx solid #ebebeb;
font-size: 30rpx;
}
Page({
onLoad() {
console.log(1)
}
})
\ No newline at end of file
{
"navigationBarTitleText": " ",
"enablePullDownRefresh": true,
"disableScroll": false,
"usingComponents": {
"blog": "plugin://blogPlugin/blog"
}
}
<blog />
\ No newline at end of file
/* pages/post/post.wxss */
\ No newline at end of file
wx.webpackJsonp([21],[],[231]);
\ No newline at end of file
{
"navigationBarTitleText": "所有评论",
"enablePullDownRefresh": true,
"onReachBottomDistance": 100
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="../../utils/template/showError.wxml" />
<import src="../../utils/template/commentList.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view>
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<view class="store-comment">
<scroll-view style="height: calc(100vh - 50px);" lower-threshold="80" bindscrolltolower="loadMoreComment" scroll-y="true" upper-threshold="upperThreshold" scroll-top="{{scrollTop}}" bindscroll="handleScroll" enable-back-to-top="true">
<view wx:if="{{comments.length > 0}}" class="comment-wrapper">
<view class="c-hint">
<text>共有{{paginationMeta.totalCount}}条评论</text>
</view>
<view class="c-content">
<block wx:for="{{comments}}" wx:key="item" wx:for-item="item">
<template is="comment-list" data="{{item}}" />
</block>
</view>
</view>
<view style="text-align: center; height: 20px; margin: 10px 0 10px; position: relative;">
<view wx:if="{{comments.length > 0 && paginationMeta.nextPage}}" class="loader" />
<text wx:if="{{comments.length > 6 && !isFetching && paginationMeta.nextPage === null}}" style="line-height: 20px; font-size: 12px; color: #999; padding-bottom: 20px;">- 无更多评论 -</text>
</view>
<view wx:if="{{showBackToTop}}" class="backToTop" bindtap="backToTop">
<view class="backToTopContent">
<image src="/assets/icons/icon-backtotop.png"></image>
</view>
</view>
</scroll-view>
</view>
<view class="bottom auto-flex flex-row">
<button class="main-button normal-flex" bindtap="navigateToWriteCommentPage" hover-class="none" style="background-color: {{isWhite ? '#6D8697' : mainBackground}}; color:'#ffffff';">
<image src="/assets/icons/icon-write-comment.png" style="width: 38rpx; height: 38rpx; margin-right: 10px;" mode="aspectFill"></image>
发表评论
</button>
</view>
</view>
</button>
</form>
.store-comment .comment-wrapper {
overflow: hidden;
margin-top: 30rpx;
padding: 0 30rpx;
}
.store-comment .c-hint {
display: flex;
justify-content: flex-start;
align-items: center;
}
.store-comment .c-hint text {
font-size: 26rpx;
color: #cdcdcd;
}
.store-comment .c-content {
margin-top: 18.10rpx;
}
.store-comment .c-content .comment-list {
margin-bottom: 50rpx;
display: flex;
}
.store-comment .c-content .comment-list .logo-icon {
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin-right: 20rpx;
}
.store-comment .c-content .comment-list .logo-icon image {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
}
.store-comment .c-content .comment-list .comment-text .t-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6rpx;
width: 560rpx;
}
.store-comment .c-content .comment-list .comment-text .t-header .name {
font-size: 32rpx;
color: #292929;
font-weight: 500;
}
.store-comment .c-content .comment-list .comment-text .t-header .time {
font-size: 24rpx;
color: #b1b1b1;
}
.store-comment .c-content .comment-list .comment-text .t-body .seller-payment {
font-size: 30rpx;
line-height: 1.79;
color: #757575;
display: block;
}
.store-comment .c-content .comment-list .comment-text .t-body text {
font-size: 26rpx;
color: #a9aeb2;
display: inline-flex;
justify-content: flex-end;
}
.bottom {
width: 100vw;
}
.bottom .main-button {
display: flex;
align-items: center;
justify-content: center;
}
.comment-img-box .comment-picture {
display: flex;
flex-grow: 30%;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 10rpx;
align-items: flex-start;
overflow: hidden;
}
.comment-img-box .comment-picture .comment-img {
display: flex;
align-items: center;
margin-bottom: 12rpx;
}
.comment-img-box .comment-picture li:empty {
height: 0;
border: none;
}
.comment-img-box .more-image {
position: relative;
}
.comment-img-box .more-image .overlay {
background: rgba(0, 0, 0, 0.8);
position: absolute;
border-radius: 15rpx;
right: 10rpx;
bottom: 20rpx;
z-index: 500;
color: #ffffff;
font-size: 22rpx;
text-align: center;
line-height: 33rpx;
}
wx.webpackJsonp([2],[],[232]);
\ No newline at end of file
{
"navigationBarTitleText": "撰写评论"
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="../../utils/template/writeCommentImgList.wxml" />
<import src="../../utils/template/showError.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<template name="img-box">
<view class="comment-img">
<image style="width: 165rpx; height: 165rpx;"></image>
</view>
</template>
<view class="write-comment-wrapper">
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<view class="form-content">
<view class="form-item">
<textarea name="message" placeholder="评论审核后可展示" placeholder-class="form-item-label" bindinput="onContent" maxlength="200" auto-height="true">
<span class="count-hint">{{count}}/200</span>
</textarea>
</view>
</view>
<view class="comment-img-list">
<view class="comment-picture">
<view wx:for="{{uploadImage || []}}" wx:key="{{item}}" wx:for-item="item">
<template is="write-comment-img-list" data="{{item}}" />
</view>
<view wx:if="{{uploadImage && uploadImage.length !== 9}}" class="comment-img add-image" bindtap="addImage">
<image style="width: 165rpx; height: 165rpx;" mode="aspectFill" src="/assets/icons/icon-upload-img.png"></image>
</view>
<block wx:if="{{uploadImage && uploadImage.length ===1 }}">
<template is="img-box" />
<template is="img-box" />
</block>
<block wx:if="{{uploadImage && uploadImage.length ===2 }}">
<template is="img-box" />
</block>
<block wx:if="{{uploadImage && uploadImage.length ===5 }}">
<template is="img-box" />
<template is="img-box" />
</block>
<block wx:if="{{uploadImage && uploadImage.length ===6 }}">
<template is="img-box" />
</block>
</view>
</view>
<view class="bottom auto-flex flex-row">
<form bindsubmit="formSubmit" report-submit="true" style="width:100vw;">
<button formType="submit" class="main-button normal-flex" hover-class="none" style="background-color: {{isWhite ? '#6D8697' : mainBackground}}; color:'#ffffff';" loading="{{submitting}}">
发表评论
</button>
</form>
</view>
</view>
</button>
</form>
.write-comment-wrapper {
overflow: hidden;
background-color: #F8F8F8;
height: 100vh;
}
.write-comment-wrapper .form-content {
background: #fff;
}
.write-comment-wrapper .form-item {
padding: 20rpx 30rpx;
border-bottom: 2rpx solid #F1F1F1;
display: flex;
align-items: center;
}
.write-comment-wrapper .form-item .form-item-label {
min-width: 140rpx;
padding-right: 20rpx;
color: #cdcdcd;
flex: 0 0 auto;
font-size: 32rpx;
}
.write-comment-wrapper .form-item textarea {
color: #000;
font-size: 34rpx;
flex: 1 1 0%;
min-height: 300rpx;
position: relative;
padding-bottom: 36rpx;
}
.write-comment-wrapper .form-item textarea .count-hint {
position: absolute;
right: 8rpx;
bottom: 0rpx;
color: #cdcdcd;
font-size: 26rpx;
}
.comment-img-list {
padding: 30rpx;
}
.comment-img-list .comment-picture {
display: flex;
flex-grow: 25%;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 10rpx;
align-items: flex-start;
overflow: hidden;
}
.comment-img-list .comment-picture .comment-img {
display: flex;
position: relative;
align-items: center;
margin-bottom: 12rpx;
}
.comment-img-list .comment-picture .comment-img .delete-img {
position: absolute;
border-radius: 4rpx;
padding: 5rpx;
right: 5rpx;
top: 5rpx;
display: flex;
justify-content: center;
align-items: center;
z-index: 400;
}
.bottom {
width: 100vw;
position: fixed;
bottom: 0;
}
wx.webpackJsonp([3],[],[233]);
\ No newline at end of file
{"navigationBarTitleText":""}
\ No newline at end of file
<view class="refresh-page">
<image class="icon-wifi-warning" src="/assets/common/icon_wifiwarning_fill128.png" />
<text style="padding-top: 8px;">Oops, 当前网络连接不稳定</text>
<view wx:if="{{isRealodingRequests}}" style="padding-top: 8px;">
<text>正在尝试连接</text>
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else bindtap="onClickBack" style="padding-top: 8px">请<text style="color: #15bbfc">重新加载</text></text>
</view>
.reload-bar {
display: none !important;
}
.refresh-page {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #79818b;
}
.refresh-page .icon-wifi-warning {
width: 146rpx;
height: 150rpx;
}
wx.webpackJsonp([4],[],[234]);
\ No newline at end of file
{
"navigationBarTitleText": "优惠券中心"
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="./templates/couponList.wxml" />
<import src="./templates/availableCoupon.wxml" />
<import src="../../utils/template/showError.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="coupon-wrapper">
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<scroll-view style="height: 100vh;" lower-threshold="20" bindscrolltolower="loadMoreDisabledCoupon" scroll-y="true" scroll-top="{{scrollTop}}" bindscroll="handleScroll" enable-back-to-top="true">
<view wx:if="{{showNotUseCheckbox === 'true' && enabledCouponList.length > 0}}" class="not-use-coupon-panel">
<view class="not-use-coupon-box">
<text>不使用优惠券</text>
<checkbox-group name="notUseCoupon" bindchange="onChangeCouponCheckbox">
<label>
<checkbox value="true" />
</label>
</checkbox-group>
</view>
</view>
<view class="coupon-header">
<view style="visibility:{{ enabledCouponList.length > 0 ? 'visible' : 'hidden'}}" class="number">
{{isWept ? couponListInPreview.length : canBeUsedCouponList.length}}张可用
</view>
<view class="setting-bar">
<view class="icon-btn" bindtap="exchangeCoupon">
<image src="/assets/icons/icon-coupon-code.png" mode="aspectFill" style="width: 18px; height: 18px" />
<text>兑换优惠券</text>
</view>
<view class="icon-btn" bindtap="useCouponHint">
<image src="/assets/icons/icon-coupon-info.png" mode="aspectFill" style="width: 18px; height: 18px" />
<text>使用说明</text>
</view>
</view>
</view>
<block wx:if="{{isWept}}">
<view class="coupon-content">
<template wx:if="{{editingCoupon}}" is="coupon-list" data="{{item: editingCoupon, isWechatPayEnabled}}" />
<view wx:if="{{!editingCoupon}}" wx:for="{{couponListInPreview}}" wx:key="{{id}}">
<template is="coupon-list" data="{{item, isWechatPayEnabled}}" />
</view>
</view>
</block>
<block wx:if="{{!isWept}}">
<view class="coupon-content">
<block wx:if="{{availableCouponList.length > 0}}">
<view wx:for="{{availableCouponList}}" wx:key="{{item}}" wx:for-item="item">
<template is="available-coupon-list" data="{{item}}" />
</view>
</block>
<block wx:if="{{availableMoreCouponList.length > 0}}">
<view class="expand-btn" bindtap="expandCoupon" wx:if="{{!isExpandAllCoupons}}">
<text>展开更多</text>
<image style="width:28rpx; height: 28rpx; margin-left: 6rpx;" src="/assets/icons/Artboard-down.png" />
</view>
<block wx:else>
<view wx:for="{{availableMoreCouponList}}" wx:key="{{item}}" wx:for-item="item">
<template is="available-coupon-list" data="{{item}}" />
</view>
</block>
</block>
<block wx:if="{{enabledCouponList.length > 0}}">
<block wx:if="{{canBeUsedCouponList.length > 0 || canNotBeUsedCouponList.length > 0}}">
<view wx:for="{{canBeUsedCouponList}}" wx:key="{{item}}" wx:for-item="item">
<template is="coupon-list" data="{{item, outsideEntry, isWechatPayEnabled}}" />
</view>
<view wx:for="{{canNotBeUsedCouponList}}" wx:key="{{item}}" wx:for-item="item">
<template is="coupon-list" data="{{item, outsideEntry, isOpenPromotionRule, isWechatPayEnabled}}" />
</view>
</block>
<block wx:else>
<view wx:for="{{enabledCouponList}}" wx:key="{{item}}" wx:for-item="item">
<template is="coupon-list" data="{{item, outsideEntry, isWechatPayEnabled}}" />
</view>
</block>
</block>
<block wx:if="{{enabledCouponList.length === 0 && avaliableMoreCouponList.length === 0}}">
<view class="empty-coupon">
<image src="/assets/icons/no-coupon.png" mode="aspectFill" style="width: 142px; height: 300px;" />
<text>当前无可用优惠券</text>
</view>
</block>
</view>
<view wx:if="{{!showDisabledCoupon && disabledCouponList.length > 0}}" class="disabled-coupon-btn" bindtap="showDisabledCoupon">
<image src="/assets/icons/icon-disabled-coupon.png" mode="aspectFill" style="width: 16px; height: 16px;" />
<text>查看不可用的优惠券</text>
</view>
<block wx:if="{{showDisabledCoupon}}">
<view class="disabled-line {{canBeUsedCouponList.length > 0 || canNotBeUsedCouponList.length > 0 ? 'line-top' : ''}}">
<text class="inline inline-left"></text>
<text>以下优惠券不可用</text>
<text class="inline inline-right"></text>
</view>
<view class="coupon-content">
<view wx:for="{{usedCouponList}}" wx:key="{{item}}" wx:for-item="item">
<template is="coupon-list" data="{{item, isWechatPayEnabled}}" />
</view>
</view>
<view class="coupon-content">
<view wx:for="{{expiredCouponList}}" wx:key="{{item}}" wx:for-item="item">
<template is="coupon-list" data="{{item, isWechatPayEnabled}}" />
</view>
</view>
<view style="text-align: center; height: 20px; margin: 10px 0 10px; position: relative;">
<view wx:if="{{disabledCouponList.length > 0 && disabledCouponPaginationMeta.nextPage}}" class="loader" />
<text wx:if="{{disabledCouponList.length > 8 && !isDisabledCouponFetching && disabledCouponPaginationMeta.nextPage === null}}" style="line-height: 20px; font-size: 12px; color: #999; padding-bottom: 20px;">- 无更多优惠券 -</text>
</view>
</block>
</block>
<view class="bottom-skip"></view>
<view wx:if="{{showBackToTop}}" class="backToTop" bindtap="backToTop">
<view class="backToTopContent">
<image src="/assets/icons/icon-backtotop.png"></image>
</view>
</view>
</scroll-view>
</view>
</button>
</form>
.like-btn {
z-index: 997;
}
page {
background: #f7f7f7;
}
.coupon-wrapper {
width: 100vw;
background-color: #f7f7f7;
}
.coupon-wrapper .not-use-coupon-panel {
padding: 40rpx 40rpx 0 40rpx;
}
.coupon-wrapper .not-use-coupon-panel .not-use-coupon-box {
display: flex;
align-items: center;
justify-content: space-between;
height: 92rpx;
border-radius: 6rpx;
background-color: #ffffff;
box-shadow: 0 2rpx 2rpx 0 rgba(0, 0, 0, 0.12);
padding: 0 40rpx;
font-size: 28rpx;
color: #222222;
}
.coupon-wrapper .coupon-header {
padding: 40rpx;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.coupon-wrapper .coupon-header .number {
color: #3a3a3a;
}
.coupon-wrapper .coupon-header .setting-bar {
display: flex;
align-items: center;
justify-content: center;
}
.coupon-wrapper .coupon-header .setting-bar .icon-btn {
margin-left: 48rpx;
display: flex;
}
.coupon-wrapper .coupon-header .setting-bar .icon-btn text {
margin-left: 8rpx;
color: #6d8697;
}
.coupon-wrapper .coupon-content {
padding: 0 40rpx;
}
.coupon-wrapper .disabled-line {
margin: 60rpx 0rpx;
padding: 0 40rpx;
display: flex;
align-items: center;
justify-content: space-around;
}
.coupon-wrapper .disabled-line text {
font-size: 28rpx;
color: #8a8a8a;
}
.coupon-wrapper .disabled-line .inline {
display: inline-block;
width: 206rpx;
height: 2rpx;
}
.coupon-wrapper .disabled-line .inline-left {
background-image: linear-gradient(to right, #f7f7f7, #8a8a8a);
}
.coupon-wrapper .disabled-line .inline-right {
background-image: linear-gradient(to right, #8a8a8a, #f7f7f7);
}
.coupon-wrapper .line-top {
margin-top: 100rpx;
}
.coupon-wrapper .disabled-coupon-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 60rpx 0;
}
.coupon-wrapper .disabled-coupon-btn text {
font-size: 28rpx;
color: #8a8a8a;
margin-left: 8rpx;
}
.coupon-wrapper .bottom-skip {
width: 100%;
margin-top: 60rpx;
height: 2rpx;
}
.empty-coupon {
height: 80vh;
text-align: center;
padding-top: 160rpx;
box-sizing: border-box;
}
.empty-coupon text {
font-size: 40rpx;
font-weight: 400;
color: #666666;
padding: 40rpx;
display: block;
}
.coupon-list {
width: 100%;
height: 240rpx;
background-color: #ffffff;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 2rpx 0 rgba(0, 0, 0, 0.12);
}
.coupon-list.available {
background: #fa8c3a;
}
.coupon-list.available .header .information .amount text,
.coupon-list.available .header .information .condition text:first-child,
.coupon-list.available .header .information .condition text:last-child {
color: #fff;
}
.coupon-list.available .line text:first-child {
background-color: #ef7e2a;
}
.coupon-list.available .data {
display: flex;
justify-content: space-between;
}
.coupon-list.available .data text {
color: #fff;
}
.coupon-list.available .header .button {
border: 2rpx solid #fff;
color: #fff;
}
.coupon-list .header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
box-sizing: content-box;
height: 172rpx;
}
.coupon-list .header .information {
display: flex;
align-items: center;
}
.coupon-list .header .information .amount {
width: 152rpx;
}
.coupon-list .header .information .amount text {
color: #e84c4b;
font-weight: 400;
}
.coupon-list .header .information .amount text:first-child {
font-size: 36rpx;
margin-right: 4rpx;
}
.coupon-list .header .information .amount text:last-child {
font-size: 56rpx;
}
.coupon-list .header .information .disabled-amount {
width: 152rpx;
}
.coupon-list .header .information .disabled-amount text {
color: #8a8a8a;
}
.coupon-list .header .information .condition {
margin-left: 10rpx;
width: 300rpx;
}
.coupon-list .header .information .condition text {
display: block;
font-size: 28rpx;
}
.coupon-list .header .information .condition text:first-child {
font-weight: 500;
color: #3a3a3a;
line-height: 36rpx;
}
.coupon-list .header .information .condition text:last-child {
color: #8a8a8a;
line-height: 52rpx;
}
.coupon-list .header .button {
width: 112rpx;
height: 60rpx;
border: 2rpx solid #6d8697;
color: #6d8697;
text-align: center;
line-height: 60rpx;
font-size: 28rpx;
font-weight: 400;
border-radius: 6rpx;
}
.coupon-list .header .can-not-used {
font-size: 28rpx;
color: #8a8a8a;
}
.coupon-list .line {
padding: 0 34rpx;
position: relative;
}
.coupon-list .line text:first-child {
height: 2rpx;
border-radius: 8rpx;
background-color: #f3f3f3;
display: block;
width: 100%;
}
.coupon-list .line .circle {
width: 16rpx;
height: 16rpx;
display: block;
border: 2rpx solid #f7f7f7;
border-radius: 100%;
position: absolute;
background-color: #f7f7f7;
}
.coupon-list .line .left-icon {
left: -10rpx;
bottom: -10rpx;
box-shadow: 2rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.12);
}
.coupon-list .line .right-icon {
right: -10rpx;
bottom: -10rpx;
box-shadow: -2rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.12);
}
.coupon-list .data {
height: 66rpx;
padding: 0 40rpx;
}
.coupon-list .data text {
font-size: 24rpx;
color: #8a8a8a;
line-height: 66rpx;
}
.coupon-list .can-not-used-text {
display: block;
font-size: 24rpx;
color: #8a8a8a;
margin: 12rpx 0;
}
.coupon-list .check-coupon-code {
display: inline-block;
float: right;
height: 66rpx;
font-size: 24rpx;
color: #8a8a8a;
line-height: 66rpx;
}
.can-not-used-coupon {
margin-bottom: 70rpx;
}
.flex-row-center {
display: flex;
align-items: center;
}
.expand-btn {
display: flex;
justify-content: center;
margin-bottom: 40rpx;
}
.expand-btn text {
font-size: 28rpx;
color: #8a8a8a;
}
wx.webpackJsonp([5],[],[235]);
\ No newline at end of file
{
"navigationBarTitleText": "优惠券"
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<form >
<view class="coupon-wrapper">
<view class="coupon-content">
<view class="coupon-check-content">
<view class="check-head">
<text class="title">{{ coupon.couponName }}</text>
<text class="desc">{{ coupon.condition }}</text>
</view>
<view class="line"></view>
<view class="select-store">
<view class="select-title">选择你所在的门店</view>
<view class="select-handle" bindtap="gotoStorefrontListPage">
<text class="store-name">{{ storefrontName }}</text>
<view class="icon-right" wx:if="{{settings.isMultiSf}}">
<view class="icon-arrow"></view>
</view>
</view>
</view>
<view class="line"></view>
<view class="check">
<button class="check-btn" type="primary" bindtap="confirmCheckCoupon" loading="{{submitting}}" hover-class="other-button-hover" size="default" >
确认核销
</button>
<text class="tips">卡券核销后将失效,请与商家确认后使用</text>
</view>
</view>
</view>
</view>
</form>
.like-btn {
z-index: 997;
}
page {
background: #f7f7f7;
}
.coupon-wrapper {
width: 100vw;
background-color: #f7f7f7;
}
.coupon-wrapper .coupon-content {
padding: 0 40rpx;
}
.coupon-check-content {
background-color: #fff;
height: 580rpx;
margin-top: 60rpx;
padding: 0 50rpx;
box-shadow: 0 2rpx 2rpx 0 rgba(0, 0, 0, 0.12);
border-radius: 16rpx;
}
.coupon-check-content .check-head {
height: 178rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.coupon-check-content .check-head .title {
color: #3a3a3a;
font-size: 36rpx;
line-height: 64rpx;
}
.coupon-check-content .check-head .desc {
font-size: 28rpx;
color: #8a8a8a;
}
.coupon-check-content .line {
height: 2rpx;
background-color: #f3f3f3;
display: block;
}
.coupon-check-content .select-store {
height: 192rpx;
display: flex;
justify-content: center;
flex-direction: column;
}
.coupon-check-content .select-title {
color: #9298a0;
font-size: 36rpx;
line-height: 64rpx;
}
.coupon-check-content .select-handle {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 76rpx;
}
.coupon-check-content .store-name {
color: #3a3a3a;
}
.coupon-check-content .icon-right {
text-align: right;
}
.coupon-check-content .icon-arrow {
width: 20rpx;
height: 20rpx;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border: solid 2rpx #979797;
border-width: 2rpx 2rpx 0 0;
display: inline-block;
border-color: #3a3a3a;
}
.coupon-check-content .check {
display: flex;
height: 200rpx;
align-items: center;
justify-content: center;
flex-direction: column;
}
.coupon-check-content .check-btn {
width: 100%;
}
.coupon-check-content .tips {
font-size: 28rpx;
color: #a9aeb2;
line-height: 72rpx;
}
wx.webpackJsonp([6],[],[236]);
\ No newline at end of file
{
"navigationBarTitleText": "兑换优惠券"
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="../../utils/template/showError.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="exchange-coupon-wrapper">
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<form bindsubmit="formSubmit">
<view class="exchange-input">
<input name="code" placeholder="请输入优惠码" value="{{couponCode}}" bindinput="onChangeCouponCodeInput" maxlength="16" placeholder-style="font-size: 16px;color:#dcdcdc;" type="text" cursor="100" confirm-type="done" />
</view>
<button type="primary" disabled="{{isSaving}}" loading="{{isSaving}}" size="default" formType="submit" style="background-color: #6f8695; color: #ffffff; opacity: {{false ? 0.5 : 1}}">
{{ isSaving ? '兑换中···' : '兑换'}}
</button>
</form>
</view>
</button>
</form>
.like-btn {
z-index: 997;
}
page {
background-color: #f7f7f7;
}
.exchange-coupon-wrapper {
padding: 40rpx;
}
.exchange-coupon-wrapper .exchange-input input {
height: 100rpx;
border-radius: 12rpx;
background-color: #ffffff;
box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.12);
padding: 0 40rpx;
font-size: 36rpx;
}
.exchange-coupon-wrapper button {
height: 88rpx;
color: #ffffff;
margin-top: 40rpx;
font-size: 28rpx;
line-height: 88rpx;
background-color: #68869c;
}
<template name="available-coupon-list">
<view
class="coupon-list available"
bindtap="receiveCoupon"
data-event-id="{{item.id}}"
data-event-sendmethod="{{item.sendMethod}}"
data-event-orderover="{{item.receivedWhenOrderOver}}"
>
<view class="header">
<view class="information">
<view class="amount">
<text>¥</text>
<text>{{item.amount}}</text>
</view>
<view class="condition">
<text>{{item.couponName}}</text>
<text>{{item.condition}}</text>
</view>
</view>
<text class="button">领取</text>
</view>
<view class="line">
<text></text>
<text class="circle left-icon"></text>
<text class="circle right-icon"></text>
</view>
<view class="data">
<block wx:if="{{item.endsAt}}">
<view class="flex-row-center">
<text>有效期至:</text>
<text>{{item.endsAt}}</text>
</view>
</block>
<block wx:elif="{{item.effectiveInDays > 0}}">
<text>领券后{{item.effectiveInDays}}天过期</text>
</block>
<view class="flex-row-center">
<block wx:if="{{item.isReceivedWhenOrderPlaced}}">
<icon type="info" size="12" color="#fff" style="margin-right: 10rpx;"/>
<text>消费满{{item.receivedWhenOrderOver / 100}}元可获得</text>
</block>
<block wx:elif="{{item.receivedWhenBeingMember}}">
<icon type="info" size="12" color="#fff" style="margin-right: 10rpx;"/>
<text>成为会员后可获得</text>
</block>
</view>
</view>
</view>
</template>
<template name="coupon-list">
<view class="coupon-list {{item.status === 'canNotUsed' ? 'can-not-used-coupon' : ''}}" >
<view class="header">
<view class="information">
<block wx:if="{{item.status === 'enabled'}}">
<view class="amount">
<text>¥</text>
<text>{{item.amount}}</text>
</view>
</block>
<block wx:else>
<view class="amount disabled-amount">
<text>¥</text>
<text>{{item.amount}}</text>
</view>
</block>
<view class="condition">
<text>{{item.couponName}}</text>
<text>{{item.condition}}</text>
</view>
</view>
<block wx:if="{{item.status == 'enabled' && isWechatPayEnabled}}">
<text class="button" bindtap="{{item.status === 'enabled' ? 'useCoupon' : ''}}" data-event-id="{{item.id}}" data-event-amount="{{item.amount}}">{{outsideEntry === 'true' ? '买单' : '使用'}}</text>
</block>
<block wx:if="{{item.status == 'canNotUsed'}}">
<text class="can-not-used">不可用</text>
</block>
<block wx:if="{{item.status == 'used'}}">
<image src="/assets/icons/icon-used.png" modal="aspectFill" style="width: 120rpx; height: 120rpx;" />
</block>
<block wx:if="{{item.status == 'expired'}}">
<image src="/assets/icons/icon-expired.png" modal="aspectFill" style="width: 120rpx; height: 120rpx;" />
</block>
</view>
<view class="line">
<text></text>
<text class="circle left-icon"></text>
<text class="circle right-icon"></text>
</view>
<view class="data">
<block wx:if="{{item.endsAt}}">
<text>有效期至:</text>
<text>{{item.endsAt}}</text>
</block>
<block wx:elif="{{item.effectiveInDays > 0}}">
<text>领券后{{item.effectiveInDays}}天过期</text>
</block>
<block wx:if="{{ item.status == 'enabled' }}">
<view class="check-coupon-code" bindtap="checkCoupon" data-event-coupon="{{item}}" >立即使用优惠券
<image style="width:34rpx; height: 34rpx;vertical-align:middle;" src="/assets/icons/icon-arrow.png"></image>
</view>
</block>
</view>
<block wx:if="{{isOpenPromotionRule === 'true'}}">
<text class="can-not-used-text">不可用原因:满减后消费金额未满{{item.orderOverAmount}}元</text>
</block>
<block wx:elif="{{item.status === 'canNotUsed'}}">
<text class="can-not-used-text">不可用原因:消费金额未满{{item.orderOverAmount}}元</text>
</block>
</view>
</template>
wx.webpackJsonp([7],[],[237]);
\ No newline at end of file
{
"navigationBarTitleText": "商品订单"
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="../../utils/template/showError.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="groupon-after-sale-wrapper">
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<view wx:if="{{status !== 'refunded'}}" class="groupon-code-info" style="margin-top: {{ status === 'enabled' || status === 'expired' ? '0' : '236rpx;' }}">
<view wx:if="{{status !== 'refund_pending'}}" class="state">
<text class="used" wx:if="{{status === 'used'}}">已核销</text>
<text class="notUsed" wx:if="{{status === 'enabled'}}">未使用</text>
<text class="expired" wx:if="{{status === 'expired'}}">已过期</text>
</view>
<block wx:if="{{status !== 'disabled'}}">
<view class="name">{{name}}</view>
<image wx:if="{{status === 'enabled' || status === 'expired'}}" style="width: 400rpx; height: 400rpx;" src="{{qrCodeUrl}}" />
<view class="code">{{code}}</view>
<view class="hint">请在店里向店员出示该券码使用</view>
</block>
</view>
<view wx:if="{{status === 'refund_pending'}}" class="refund-info">
<image src="{{iconPath.iconRefunding}}" mode="aspectFill" />
<text>退款处理中</text>
<text>等待商家处理,如有疑问请联系商家。</text>
</view>
<view wx:if="{{status === 'refunded'}}" class="groupon-info refund-success-info">
<view class="name">{{name}}</view>
<view class="code">{{code}}</view>
<image src="{{iconPath.iconRefundSuccess}}" mode="aspectFill" />
<view class="info">
<text>退款成功</text>
<text>我们将与你协商具体的退款方式</text>
</view>
</view>
<view wx:if="{{status === 'disabled'}}" class="groupon-info groupon-disabled-info">
<view class="name">{{name}}</view>
<view class="code">{{code}}</view>
<image src="{{iconPath.iconInvalid}}" mode="aspectFill" />
<view class="info">
<text>请注意</text>
<text>很抱歉我们停止了该订单的服务</text>
<text>请联系我们进行售后处理</text>
</view>
</view>
<view class="bottom-config">
<view wx:if="{{status !== 'disabled'}}" class="detail" bindtap="navigateToGroupBuyDetailPage" data-event-id="{{grouponProductId}}">
查看商品详情
</view>
<view class="line"></view>
<view class="phone-refund">
<view class="service" bindtap="makePhoneCall">
<image src="{{iconPath.iconCallPhone}}" mode="aspectFill" />
<text>联系商家</text>
</view>
<view wx:if="{{ !!refund && !!enableRefund && (status === 'enabled' || status === 'expired') || status === 'disabled'}}" class="service" bindtap="askForRefund">
<image src="{{iconPath.iconRefund}}" mode="aspectFill" />
<text>申请退款</text>
</view>
</view>
</view>
<view class="mask-variation" wx:if="{{showRefundVariation}}" bindtap="hideRefundVariation" />
</view>
</button>
</form>
.groupon-after-sale-wrapper {
padding: 64rpx;
}
.groupon-code-info {
margin-top: 236rpx;
text-align: center;
}
.groupon-code-info .state text {
height: 54rpx;
width: 120rpx;
padding: 10rpx;
font-size: 32rpx;
text-align: center;
line-height: 54rpx;
border-radius: 8rpx;
}
.groupon-code-info .state text.notUsed {
color: #15bbfc;
border: 2rpx solid #15bbfc;
}
.groupon-code-info .state text.used {
color: #92bb00;
border: 2rpx solid #92bb00;
}
.groupon-code-info .state text.expired,
.groupon-code-info .state text.disabled {
color: #8A8A8A;
border: 2rpx solid #8a8a8a;
}
.groupon-code-info .name {
margin-top: 70rpx;
font-size: 32rpx;
color: #222222;
}
.groupon-code-info .code {
width: 624rpx;
height: 142rpx;
font-size: 56rpx;
color: #222222;
margin-top: 24rpx;
text-align: center;
line-height: 142rpx;
border-radius: 12rpx;
background-color: #fff9e1;
}
.groupon-code-info .hint {
font-size: 28rpx;
color: #8a8a8a;
margin-top: 48rpx;
}
.refund-info {
text-align: center;
margin-top: 74rpx;
/* test code (need remove)*/
}
.refund-info image {
width: 40rpx;
height: 40rpx;
margin-bottom: 28rpx;
}
.refund-info text {
display: block;
color: #F4AC43;
font-size: 28rpx;
line-height: 1.7;
}
.refund-info .test-code-button {
height: 54rpx;
width: 300rpx;
padding: 10rpx;
margin: 20rpx auto;
font-size: 32rpx;
text-align: center;
line-height: 54rpx;
border-radius: 8rpx;
color: #31C97D;
border: 2rpx solid #31C97D;
}
.groupon-info {
text-align: center;
}
.groupon-info .name {
font-size: 32rpx;
font-weight: 500;
color: #3a3a3a;
}
.groupon-info .code {
width: 624rpx;
height: 142rpx;
font-size: 56rpx;
color: #222222;
margin-top: 40rpx;
text-align: center;
line-height: 142rpx;
border-radius: 12rpx;
background-color: #fff9e1;
}
.groupon-info image {
width: 120rpx;
height: 120rpx;
margin: 24rpx 0 20rpx 0;
}
.groupon-info .info text {
display: block;
font-size: 28rpx;
line-height: 1.7;
}
.groupon-info.refund-success-info {
margin-top: 236rpx;
}
.groupon-info.refund-success-info.info text {
color: #8E8E8E;
}
.groupon-info.groupon-disabled-info .info text {
color: #E65153;
}
.bottom-config {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 600;
text-align: center;
background-color: #ffffff;
}
.bottom-config .detail {
font-size: 28rpx;
color: #7F94A1;
padding: 42rpx;
}
.bottom-config .line {
height: 2rpx;
background-color: #ebebeb;
}
.bottom-config .phone-refund {
display: flex;
align-items: center;
justify-content: center;
}
.bottom-config .phone-refund .service {
padding: 36rpx 100rpx;
display: flex;
align-items: center;
}
.bottom-config .phone-refund text {
font-size: 28rpx;
color: #7F94A1;
}
.bottom-config .phone-refund image {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
wx.webpackJsonp([8],[],[238]);
\ No newline at end of file
{
"navigationBarTitleText": "我的订单",
"enablePullDownRefresh": true,
"onReachBottomDistance": 100
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="../../utils/template/groupBuyCenterTemplate.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<block wx:if="{{!isFetching}}">
<view class="group-buy-list-wrapper">
<view class="can-be-used-groupon">
<block wx:if="{{effectiveUserGrouponList.length > 0}}">
<block wx:if="{{refundPendingGrouponsList.length > 0}}" wx:for="{{refundPendingGrouponsList}}" wx:key="item" wx:for-item="item">
<template is="group-buy-center-list" data="{{item, iconPath}}" />
</block>
<block wx:if="{{enabledGrouponsList.length > 0}}" wx:for="{{enabledGrouponsList}}" wx:key="item" wx:for-item="item">
<template is="group-buy-center-list" data="{{item, iconPath}}" />
</block>
</block>
<block wx:else>
<view class="empty-groupon">
<image src="{{iconPath.iconEmpty}}" mode="aspectFill" />
<text>当前无可用订单</text>
</view>
</block>
</view>
<view wx:if="{{!isShowIneffectiveGroupon && ineffectiveUserGrouponList.length > 0}}" class="disabled-groupon-btn" bindtap="onShowDisabledGroupon">
<image src="{{iconPath.iconCouponTime}}" mode="aspectFill" />
<text>查看不可用的订单</text>
</view>
<block wx:if="{{!!isShowIneffectiveGroupon}}">
<view class="ineffective-groupon-header {{effectiveUserGrouponList.length > 0 || ineffectiveUserGrouponList.length > 0 ? 'line-top' : ''}}">
<text class="inline inline-left"></text>
<text>以下订单不可用</text>
<text class="inline inline-right"></text>
</view>
<view class="groupon-content">
<view wx:if="{{disabledGrouponsList.length > 0}}" wx:for="{{disabledGrouponsList}}" wx:key="{{item}}" wx:for-item="item">
<template is="group-buy-center-list" data="{{item}}" />
</view>
</view>
<view class="groupon-content">
<view wx:if="{{expiredGrouponsList.length > 0}}" wx:for="{{expiredGrouponsList}}" wx:key="{{item}}" wx:for-item="item">
<template is="group-buy-center-list" data="{{item}}" />
</view>
</view>
<view class="groupon-content">
<view wx:if="{{refundedGrouponsList.length > 0}}" wx:for="{{refundedGrouponsList}}" wx:key="{{item}}" wx:for-item="item">
<template is="group-buy-center-list" data="{{item}}" />
</view>
</view>
<view class="groupon-content">
<view wx:if="{{usedGrouponsList.length > 0}}" wx:for="{{usedGrouponsList}}" wx:key="{{item}}" wx:for-item="item">
<template is="group-buy-center-list" data="{{item}}" />
</view>
</view>
<view class="groupon-bottom">
<view class="loader" wx:if="{{ineffectiveUserGrouponList.length > 0 && ineffectivePaginationMeta.nextPage}}"></view>
<text class="no-groupons" wx:if="{{ineffectiveUserGrouponList.length > 8 && !ineffectiveGrouponsIsFetching && ineffectivePaginationMeta.nextPage === null}}">- 无更多订单 -</text>
</view>
</block>
</view>
</block>
<block wx:else>
<view class="loader-box">
<text class="loader" />
</view>
</block>
</button>
</form>
page {
background-color: #F4F4F4;
}
.group-buy-list-wrapper {
padding: 0 30rpx;
}
/* groupon box */
.groupon-box {
height: 340rpx;
margin: 20rpx 0;
position: relative;
background-color: #ffffff;
box-shadow: 0 2rpx 2rpx 0 #0000000f;
}
.groupon-box .top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 27rpx;
}
.groupon-box .top text {
font-size: 26rpx;
}
.groupon-box .top text.used,
.groupon-box .top text.expired,
.groupon-box .top text.disabled,
.groupon-box .top text.refunded {
color: #999999;
}
.groupon-box .top text.enabled {
color: #29BCF9;
}
.groupon-box .top text.refundPending {
color: #FDA232;
}
.groupon-box .content {
display: flex;
align-items: center;
padding: 0 27rpx;
}
.groupon-box .content .avatar image {
width: 128rpx;
height: 128rpx;
}
.groupon-box .content .description {
margin-left: 20rpx;
width: calc(100% - 148rpx);
}
.groupon-box .content .description .des-top {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.groupon-box .content .description .des-top text {
font-size: 28rpx;
font-weight: 500;
line-height: 56rpx;
color: #444444;
}
.groupon-box .content .description .des-bottom text {
color: #ADADAD;
font-size: 28rpx;
line-height: 60rpx;
}
.groupon-box .content .description .des-bottom text:first-child {
margin-right: 20rpx;
}
.groupon-box .line {
width: 100%;
height: 2rpx;
background-color: #F5F5F5;
margin: 28rpx 0;
}
.groupon-box .bottom {
padding: 0 27rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.groupon-box .bottom .price text:first-child {
font-size: 26rpx;
color: #545454;
}
.groupon-box .bottom .price text:last-child {
font-size: 32rpx;
color: #ec5360;
}
.groupon-box .bottom .navigate {
display: flex;
align-items: center;
}
.groupon-box .bottom .navigate text {
font-size: 28rpx;
color: #545454;
}
.groupon-box .bottom .navigate image {
width: 35rpx;
height: 35rpx;
}
/* disabled groupon */
.ineffective-groupon-header {
margin: 60rpx 0rpx;
display: flex;
align-items: center;
justify-content: space-around;
}
.ineffective-groupon-header text {
font-size: 28rpx;
color: #8a8a8a;
}
.ineffective-groupon-header .inline {
height: 2rpx;
width: 206rpx;
display: inline-block;
}
.ineffective-groupon-header .inline-left {
background-image: linear-gradient(to right, #f7f7f7, #8a8a8a);
}
.ineffective-groupon-header .inline-right {
background-image: linear-gradient(to right, #8a8a8a, #f7f7f7);
}
.line-top {
margin-top: 76rpx;
}
.disabled-groupon-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 130rpx 0 30rpx 0;
}
.disabled-groupon-btn image {
width: 32rpx;
height: 32rpx;
}
.disabled-groupon-btn text {
font-size: 28rpx;
color: #8a8a8a;
margin-left: 8rpx;
}
.groupon-bottom {
height: 40rpx;
text-align: center;
margin: 20rpx 0 20rpx 0;
position: relative;
}
.groupon-bottom .no-groupons {
line-height: 40rpx;
font-size: 24rpx;
color: #999;
padding-bottom: 40rpx;
}
/* empty groupon */
.empty-groupon {
height: 80vh;
text-align: center;
padding-top: 300rpx;
box-sizing: border-box;
}
.empty-groupon image {
width: 200rpx;
height: 200rpx;
}
.empty-groupon text {
font-size: 40rpx;
font-weight: 400;
color: #7D7D7D;
padding: 40rpx;
display: block;
}
/* masking */
.masking-box {
height: 340rpx;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
opacity: 0.4;
z-index: 400;
background-color: #ffffff;
}
/* loader */
.loader-box {
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.loader-box .loader:after {
background: #F4F4F4;
}
wx.webpackJsonp([9],[],[239]);
\ No newline at end of file
{
"navigationBarTitleText": ""
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="../../utils/template/showError.wxml" />
<import src="../../utils/template/topBarTemplate.wxml" />
<import src="../../utils/template/storeListTemplate.wxml" />
<import src="../../utils/template/popup/popup.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="group-buy-detail-wrapper">
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<block wx:if="{{!isDeleted}}">
<block wx:if="{{!isFetching}}">
<view class="group-buy-content">
<view class="slider-wrapper">
<swiper class="image-slider" autoplay="{{true}}" circular="{{true}}" bindchange="onSliderChange">
<swiper-item class="slide-item" wx:for="{{banner || []}}" wx:key="url">
<image src="{{item}}" mode="aspectFill" data-index="{{index}}" bindtap="openImagePreview" />
</swiper-item>
</swiper>
<view wx:if="{{banner.length > 1}}" class="slider-dots">
<view wx:for="{{banner || []}}" wx:key="index" class="{{'dot ' + (dotPosition === index ? 'selected' : '')}}" />
</view>
</view>
<view class="group-buy-description">
<view class="header">
<view>
<view class="title">{{name}}</view>
<view class="price">
<text class="current">{{price}}</text>
<text class="origin" wx:if="{{originalPrice !== '¥--' && originalPrice !== '¥0'}}">{{originalPrice}}</text>
</view>
</view>
<view class="share" bindtap="bindShareTap">
<image src="{{iconPath.iconShare}}" />
<text class="share-text">分享</text>
</view>
</view>
<view class="content">
<view class="approve">{{description}}</view>
<view class="center">
<view class="hint">
<view class="choice">
<image mode="aspectFill" src="{{iconPath.iconCheckMark}}" />
<text wx:if="{{booking === 0}}">无需预约</text>
<text wx:else>提前预约</text>
</view>
<view class="choice" wx:if="{{!!refund}}">
<image mode="aspectFill" src="{{iconPath.iconCheckMark}}" />
<text>支持退款</text>
</view>
</view>
<block wx:if="{{sales && sales > 0}}">
<view class="sales">已售{{sales}}份</view>
</block>
</view>
<view wx:if="{{!!contentArray && contentArray.length > 0}}" class="menu">
<view class="title">
<text>·</text>
<text>内容包含</text>
<text>·</text>
</view>
<view class="dish">
<block wx:for="{{contentArray}}" wx:key="item" wx:for-item="item">
<text>{{item}}</text>
</block>
</view>
</view>
</view>
<view wx:if="{{!!detailEnabled}}" class="bottom" bindtap="navigateToGraphicDetailPage">
<text>查看图文详情</text>
<image mode="aspectFill" src="{{iconPath.iconBlueArrow}}" />
</view>
</view>
<block wx:if="{{storefronts.length > 0}}">
<view class="dividing-line"></view>
<view class="store-list">
<view class="header">适用门店</view>
<view class="line"></view>
<block wx:for="{{firstTwoStores}}" wx:key="item" wx:for-item="item">
<template is="group-buy-store-list" data="{{item, iconPath}}" />
</block>
<view wx:if="{{storefronts.length > 2}}" class="link" bindtap="navigateToGroupBuyStoreListPage">
<text>查看所有适用门店({{storefronts.length}})</text>
<image mode="aspectFill" src="{{iconPath.iconArrow}}" />
</view>
</view>
</block>
<view class="dividing-line"></view>
<view>
<view class="top-bar-panel">
<template is="groupBuyTopBar" data="{{ tabState, switchToHintTab, switchToQuestionTab }}"></template>
</view>
<view class="group-buy-tap-bar-content" wx:if="{{tabState == 'hint'}}">
<view class="text-item">
<text>有效期</text>
<text>至{{endsAt}}</text>
<text>{{disabledTimesText}}</text>
</view>
<view class="text-item">
<text>使用时段</text>
<text>每日{{availableStartHour}} - {{availableEndHour}}</text>
</view>
<view class="text-item">
<text>预约</text>
<text wx:if="{{booking === 0}}">无需预约,高峰时期可能需要排队。</text>
<text wx:else>请提前拨打电话预约</text>
</view>
<view class="text-item">
<text>购买限制</text>
<text>{{ (availableBuyTimes && availableBuyTimes !== -1) ? '每人仅可购买一份' : '每人购买数量无限制' }}</text>
</view>
<block wx:if="{{remarkEnabled}}">
<view class="text-item">
<text>补充说明</text>
<text>{{remark}}</text>
</view>
</block>
</view>
<view class="group-buy-tap-bar-content" wx:if="{{tabState == 'question'}}">
<view class="text-item">
<text>如何兑换门店商品/服务/券?</text>
<text>购买完商品后,在可用日期内前往线下门店进行兑换。</text>
<text>兑换时请出示订单核销码,店员进行核销后确认。</text>
</view>
<view class="text-item">
<text>关于退款及售后处理</text>
<text>仅带支持退款标签的门店商品/服务/券可在订单页进行退款。</text>
<text>支持随时退、过期退。</text>
<text>如有售后相关问题请直接联系商家处理。</text>
</view>
</view>
</view>
<include src="./templates/shareChooser.wxml" />
<include src="./templates/variationSelector.wxml" />
<view class="mask-variation" wx:if="{{isShowShareVariation || isShowQuantityVariation}}" bindtap="hideVariation" />
<view class="flex-row bottom-bar">
<button wx:if="{{enableCustomerService}}" class="main-button live-chat-button" open-type="contact">
<image src="/assets/icons/icon-livechat.png" style="width: 28px; height: 28px; vertical-align: middle;" />
</button>
<button wx:if="{{!isDefaultOverTimes}}" class="pay-button pay-immediately-button" open-type="getUserInfo" bindgetuserinfo="addToOrder">
<text>立即购买</text>
</button>
<button wx:else class="pay-button pay-immediately-button pay-button-disabled">
<text>该订单每人限购一次</text>
</button>
</view>
</view>
</block>
<block wx:else>
<view class="loader-box">
<text class="loader" />
</view>
</block>
</block>
<block wx:if="{{isDeleted}}">
<view class="empty-groupon-wrapper">
<image src="{{iconPath.iconBrokenLink}}" mode="aspectFill" />
<text>该门店商品已失效</text>
<text>请联系商家了解更多信息</text>
</view>
</block>
<template is="popup" data="{{ ...components['popup']['1'], componentName: 'components.popup.1'}}" />
</view>
</button>
</form>
.center-item {
display: flex;
align-items: center;
justify-content: center;
}
.popup-title {
margin: 60rpx auto 0 auto;
text-align: center;
max-width: 510rpx;
}
.popup-title text {
font-weight: 600;
font-size: 40rpx;
}
.popup-content {
margin: 8rpx auto 0 auto;
max-width: 510rpx;
text-align: center;
}
.popup-content text {
font-size: 28rpx;
}
.right-cornor-close {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 40rpx;
height: 40rpx;
}
.popup-shadow {
background-color: rgba(0, 0, 0, 0.5);
}
.popup-fullscreen {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.popup-fullscreen text,
.popup-fullscreen view {
color: #fff;
}
.popup-fullscreen .poster {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.popup-fullscreen .poster .poster-image {
overflow: hidden;
border-radius: 16rpx;
width: 602rpx;
height: 692rpx;
}
.popup-fullscreen .poster .poster-image image {
width: 100%;
height: 100%;
}
.popup-fullscreen .poster .close-icon {
margin-top: 60rpx;
}
.popup-fullscreen .poster .close-icon image {
width: 84rpx;
height: 84rpx;
}
.popup-fullscreen .membercard {
width: 602rpx;
border-radius: 20rpx;
background-color: #ffffff;
overflow: hidden;
position: relative;
}
.popup-fullscreen .membercard text {
color: black;
}
.popup-fullscreen .membercard .title {
margin: 60rpx auto 0 auto;
text-align: center;
max-width: 510rpx;
}
.popup-fullscreen .membercard .title text {
font-weight: 600;
font-size: 40rpx;
}
.popup-fullscreen .membercard .content {
margin: 8rpx auto 0 auto;
max-width: 510rpx;
text-align: center;
}
.popup-fullscreen .membercard .content text {
font-size: 28rpx;
}
.popup-fullscreen .membercard .membership-image {
display: flex;
align-items: center;
justify-content: center;
background-size: 100%;
width: 494rpx;
height: 296rpx;
border-radius: 10rpx;
margin: 56rpx auto 0;
position: relative;
}
.popup-fullscreen .membercard .membership-image .card-logo {
position: absolute;
width: 86rpx;
height: 86rpx;
border-radius: 50%;
left: 56rpx;
top: 40rpx;
}
.popup-fullscreen .membercard .membership-image .card-qrcode {
display: block;
position: absolute;
width: 50rpx;
height: 50rpx;
right: 70rpx;
top: 46rpx;
}
.popup-fullscreen .membercard .membership-image .card-text {
position: absolute;
left: 56rpx;
bottom: 40rpx;
color: #fff;
font-size: 32rpx;
}
.popup-fullscreen .membercard .goto-btn {
display: flex;
align-items: center;
justify-content: center;
margin-top: 74rpx;
margin-bottom: 42rpx;
color: white;
width: 530rpx;
height: 88rpx;
background-color: #3a3a3a;
border-radius: 8rpx;
}
.popup-fullscreen .membercard .close-icon {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 40rpx;
height: 40rpx;
}
.popup-fullscreen .coupons {
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.popup-fullscreen .coupons view {
overflow: visible;
}
.popup-fullscreen .coupons .wrapper {
position: relative;
}
.popup-fullscreen .coupons .wrapper .redpocket {
width: 320rpx;
height: 320rpx;
position: absolute;
top: -180rpx;
left: 140rpx;
}
.popup-fullscreen .coupons .wrapper .title {
margin: 60rpx auto 0 auto;
text-align: center;
max-width: 510rpx;
z-index: 100;
margin-top: 54rpx;
}
.popup-fullscreen .coupons .wrapper .title text {
font-weight: 600;
font-size: 40rpx;
}
.popup-fullscreen .coupons .wrapper .content {
margin: 8rpx auto 0 auto;
max-width: 510rpx;
text-align: center;
}
.popup-fullscreen .coupons .wrapper .content text {
font-size: 28rpx;
}
.popup-fullscreen .coupons .wrapper .center-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
width: 600rpx;
background-color: #d74d42;
border-radius: 16rpx;
color: white;
}
.popup-fullscreen .coupons .wrapper .close-icon {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 40rpx;
height: 40rpx;
width: 30rpx;
height: 30rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 32rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list {
height: 184rpx;
background-color: #ffffff;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 2rpx 0 rgba(0, 0, 0, 0.12);
border-radius: 12rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
box-sizing: content-box;
height: 120rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information {
display: flex;
align-items: center;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .amount {
width: 120rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .amount .decorator {
font-size: 28rpx;
margin: 0rpx 4rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .amount text {
color: #e84c4b;
font-weight: 400;
font-size: 50rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .condition {
margin-left: 10rpx;
width: 300rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .condition text {
display: block;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .condition text:first-child {
font-weight: 500;
color: #3a3a3a;
line-height: 36rpx;
font-size: 26rpx;
margin-bottom: 10rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .condition text:last-child {
color: #8a8a8a;
line-height: 34rpx;
font-size: 26rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line {
padding: 0 34rpx;
position: relative;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line text:first-child {
height: 2rpx;
border-radius: 8rpx;
background-color: #f3f3f3;
display: block;
width: 100%;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line .circle {
width: 12rpx;
height: 12rpx;
display: block;
border: 2rpx solid #e84c4b;
border-radius: 100%;
position: absolute;
background-color: #e84c4b;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line .left-icon {
left: -10rpx;
bottom: -10rpx;
box-shadow: 2rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.12);
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line .right-icon {
right: -10rpx;
bottom: -10rpx;
box-shadow: -2rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.12);
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .data {
height: 60rpx;
padding: 0 40rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .data text {
font-size: 22rpx;
color: #8a8a8a;
line-height: 66rpx;
}
.popup-fullscreen .coupons .wrapper .coupon-count {
text-align: center;
margin-top: -10rpx;
}
.popup-fullscreen .coupons .wrapper .coupon-count text {
font-size: 24rpx;
letter-spacing: 0.12rpx;
}
.popup-fullscreen .coupons .wrapper .bottom-text {
margin-top: 32rpx;
margin-bottom: 26rpx;
text-align: center;
}
.popup-fullscreen .coupons .wrapper .bottom-text text {
font-size: 24rpx;
letter-spacing: 0.12rpx;
}
.popup-fullscreen .coupons .wrapper .bottom-text .underline {
text-decoration: underline;
}
.luckywheel-popup-theme .luckywheel-popup {
position: relative;
width: 584rpx;
height: 592rpx;
border-radius: 20rpx;
background-color: #fff;
}
.luckywheel-popup-theme .luckywheel-popup .luckywheel-popup-closebtn {
position: absolute;
top: 12rpx;
right: 32rpx;
}
.luckywheel-popup-theme .luckywheel-popup .luckywheel-popup-closebtn image {
width: 46rpx;
height: 46rpx;
}
.luckywheel-popup-theme .luckywheel-popup-header {
margin: 0 auto;
width: 561rpx;
height: 290rpx;
}
.luckywheel-popup-theme .luckywheel-popup-header image {
width: 100%;
height: 100%;
}
.luckywheel-popup-theme .luckywheel-popup-title {
margin-top: 72rpx;
font-size: 32rpx;
color: #000;
line-height: 45rpx;
text-align: center;
}
.luckywheel-popup-theme .luckywheel-popup-btn {
margin: 0 auto;
margin-top: 39rpx;
width: 430rpx;
height: 108rpx;
border-radius: 6rpx;
text-align: center;
line-height: 108rpx;
font-size: 36rpx;
color: #fff;
background-color: #6c34c5;
}
.referrals-popup {
position: relative;
}
.referrals-popup .luckywheel-popup-closebtn {
position: absolute;
top: 0rpx;
right: 10rpx;
width: 60rpx;
height: 60rpx;
}
.referrals-popup .luckywheel-popup-closebtn image {
width: 100%;
height: 100%;
}
.referrals-popup .referral-background {
display: block;
width: 720rpx;
height: 812rpx;
}
.referrals-popup .referrals-text {
position: absolute;
top: 60rpx;
left: 50%;
text-align: center;
transform: translateX(-50%);
}
.referrals-popup .referrals-text .referrals-title {
font-size: 36rpx;
color: #8a572a;
font-weight: bold;
}
.referrals-popup .referrals-text .referrals-persent-number {
font-size: 130rpx;
color: #df5549;
vertical-align: middle;
font-weight: bold;
}
.referrals-popup .referrals-text .percent-sign {
vertical-align: top;
font-size: 80rpx;
color: #df5549;
font-weight: bold;
margin-left: 15rpx;
}
.referrals-popup .navigate-referrals-page {
position: absolute;
bottom: 200rpx;
left: 50%;
box-shadow: 0 0 10rpx 0 #ce4a37;
transform: translateX(-50%);
}
.referrals-popup .navigate-referrals-page button {
width: 480rpx;
height: 88rpx;
color: #8a572a;
line-height: 88rpx;
background-color: #ffdd8d;
box-shadow: inset 0 7rpx 10rpx 0 #f7e9c9;
}
.referrals-popup .navigate-referrals-page button::after {
border: 0;
}
.group-buy-detail-wrapper {
width: 100vw;
}
.group-buy-detail-wrapper .group-buy-content {
overflow: auto;
padding-bottom: 80rpx;
}
/* dividing line */
.dividing-line {
width: 100vw;
height: 12rpx;
background-color: #f4f4f4;
}
/* swiper wrapper */
.slider-wrapper {
height: 480rpx;
width: 100%;
position: relative;
}
.slider-wrapper .image-slider {
height: 480rpx;
}
.slider-wrapper .slide-item image {
width: 100%;
height: 480rpx;
}
.slider-dots {
width: 100vw;
bottom: 10rpx;
position: absolute;
text-align: center;
}
.dot {
width: 16rpx;
height: 16rpx;
display: inline-block;
margin-right: 16rpx;
border-radius: 20rpx;
border: 2rpx solid #fff;
}
.dot.selected {
background: #fff;
}
/* group buy description */
.group-buy-description {
padding: 32rpx;
}
.group-buy-description .header {
display: flex;
align-items: center;
justify-content: space-between;
}
.group-buy-description .title {
font-size: 36rpx;
font-weight: 500;
color: #3a3a3a;
}
.group-buy-description .price {
margin-top: 14rpx;
}
.group-buy-description .price text {
margin-right: 15rpx;
}
.group-buy-description .price text.current {
font-size: 36rpx;
color: #e84c4b;
}
.group-buy-description .price text.origin {
font-size: 32rpx;
color: #959595;
text-decoration: line-through;
}
.group-buy-description .share {
width: 140rpx;
height: 100rpx;
text-align: center;
}
.group-buy-description .share image {
width: 50rpx;
height: 50rpx;
}
.group-buy-description .share-text {
font-size: 28rpx;
color: #5b5959;
display: block;
text-align: center;
}
.group-buy-description .content {
margin: 14rpx 0;
}
.group-buy-description .content .approve {
font-size: 28rpx;
line-height: 1.5;
color: #8a8a8a;
}
.group-buy-description .content .center {
padding: 24rpx 0;
display: block;
margin-bottom: 80rpx;
}
.group-buy-description .content .hint {
float: left;
}
.group-buy-description .content .hint .choice {
display: inline-flex;
align-items: center;
margin-right: 38rpx;
}
.group-buy-description .content .hint image {
width: 30rpx;
height: 30rpx;
margin-right: 5rpx;
}
.group-buy-description .content .hint text {
font-size: 28rpx;
color: #E8B84F;
}
.group-buy-description .content .sales {
font-size: 28rpx;
float: right;
color: #B2B6BA;
}
.group-buy-description .menu {
margin: 36rpx 0;
display: block;
min-height: 100rpx;
border: 2rpx solid #e6e6e6;
border-radius: 12rpx;
padding-bottom: 32rpx;
}
.group-buy-description .menu .title {
height: 40rpx;
width: 200rpx;
margin: 0 auto;
text-align: center;
position: relative;
top: -21rpx;
background-color: #ffffff;
}
.group-buy-description .menu .title text:nth-child(2n) {
font-size: 32rpx;
font-weight: 500;
color: #3a3a3a;
}
.group-buy-description .menu .title text:nth-child(2n+1) {
color: #d8d8d8;
padding: 0 10rpx;
}
.group-buy-description .menu .dish {
padding: 0 36rpx;
}
.group-buy-description .menu .dish text {
display: block;
font-size: 28rpx;
color: #8a8a8a;
line-height: 1.75;
text-align: center;
word-break: break-word;
}
.group-buy-description .bottom {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 0 30rpx 0;
}
.group-buy-description .bottom text {
font-size: 28rpx;
color: #15bbfc;
}
.group-buy-description .bottom image {
width: 28rpx;
height: 28rpx;
}
/* store list */
.store-list {
padding: 32rpx 32rpx 0 32rpx;
}
.store-list .header {
font-size: 32rpx;
font-weight: 500;
color: #4B4746;
margin-bottom: 28rpx;
}
.store-list .line {
height: 2rpx;
background-color: #ebebeb;
}
.store-list .link {
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx 0;
}
.store-list .link text {
font-size: 28rpx;
color: #9F9F9F;
}
.store-list .link image {
width: 30rpx;
height: 30rpx;
}
.store-list .store-box {
margin-bottom: 40rpx;
}
/* tap bar */
.top-bar {
width: 100vw;
height: 108rpx;
display: flex;
align-items: center;
justify-content: space-around;
border-bottom: 2rpx solid #EEEEEE;
}
.top-bar .nav-item {
height: 100rpx;
width: 208rpx;
font-size: 32rpx;
font-weight: 400;
text-align: center;
line-height: 100rpx;
color: #3a3a3a;
border-bottom: 4rpx solid transparent;
}
.top-bar .nav-item.selected {
font-weight: 500;
color: #4b4746;
border-bottom: 4rpx solid #4b4746;
}
.group-buy-tap-bar-content {
padding: 32rpx;
}
.group-buy-tap-bar-content .text-item {
margin-bottom: 40rpx;
}
.group-buy-tap-bar-content .text-item text {
font-size: 28rpx;
line-height: 1.71;
color: #8a8a8a;
display: block;
}
.group-buy-tap-bar-content .text-item text:first-child {
font-size: 30rpx;
color: #3a3a3a;
margin-bottom: 4rpx;
}
.pay-button {
flex: 1 0 auto;
height: 96rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
background-color: #e8b84f;
}
.pay-button::after {
border: none;
}
.pay-button.pay-button-disabled {
background-color: #8D949C;
}
.pay-button text {
font-size: 28rpx;
font-weight: 600;
color: #ffffff;
}
.bottom-bar {
position: fixed;
left: 0;
bottom: 0;
z-index: 300;
width: 100%;
}
.bottom-bar .live-chat-button {
flex: 0 1 120rpx;
background-color: #fff;
}
/* share groupon */
.share-groupon-view {
transform: translateY(100%);
-webkit-transform: translateY(100%);
background-color: #fff;
position: fixed;
bottom: 0;
z-index: 999;
left: 0;
width: 100%;
}
.share-groupon-view .share-choose {
height: 204rpx;
}
.share-groupon-view .share-choose .share-choose-item {
width: 50%;
display: inline-block;
text-align: center;
margin: 40rpx 0;
box-sizing: border-box;
background-color: #fff;
padding: 0;
border: 0;
border-radius: 0;
line-height: 40rpx;
}
.share-groupon-view .share-choose .share-choose-item.send-friend {
border-right: 2rpx solid #f2f2f2;
}
.share-groupon-view .share-choose .share-choose-item::after {
border: 0;
}
.share-groupon-view .share-choose .share-choose-item .share-image {
width: 85rpx;
height: 85rpx;
}
.share-groupon-view .share-choose .share-choose-item .share-text {
font-size: 28rpx;
color: #292940;
font-family: PingFangSC;
display: block;
margin-top: 10rpx;
}
.share-groupon-view .cancel-share {
color: #292940;
background-color: #f9f9f9;
}
/* add groupon to order */
.add-to-order {
transform: translateY(100%);
-webkit-transform: translateY(100%);
background: #ffffff;
position: fixed;
bottom: 0;
z-index: 999;
left: 0;
width: 100%;
}
.add-to-order .add-to-order-row {
display: flex;
flex-direction: row;
padding: 30rpx 0;
color: #919191;
font-size: 34rpx;
align-items: center;
padding: 40rpx 40rpx;
}
.add-to-order .add-to-order-row .left {
min-width: 100rpx;
flex: 0 0 auto;
text-align: left;
}
.add-to-order .add-to-order-row .right {
flex: 1 1 0;
text-align: right;
}
.add-to-order .quantity {
margin: 0 26rpx;
}
.add-to-order .quantity-btn {
width: 50rpx;
height: 50rpx;
display: inline-block;
line-height: 60rpx;
text-align: center;
vertical-align: middle;
color: #c7c7c7;
}
.add-to-order .quantity-btn.disabled {
opacity: 0.2;
}
.add-to-order.no-variation .last {
padding: 0;
border-top: none;
}
/* empty groupon detail */
.empty-groupon-wrapper {
height: 100vh;
text-align: center;
padding-top: 360rpx;
box-sizing: border-box;
}
.empty-groupon-wrapper image {
width: 140rpx;
height: 140rpx;
margin-bottom: 20rpx;
}
.empty-groupon-wrapper text {
font-size: 32rpx;
font-weight: 400;
color: #A9AEB2;
padding: 10rpx;
display: block;
}
/* loader */
.loader-box {
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.referrals-entrance-content {
text-align: center;
padding: 15rpx 0;
border-bottom: 2rpx solid #e6e6e6;
}
.referrals-entrance-content .referrals-icon {
width: 22rpx;
height: 26rpx;
vertical-align: middle;
}
.referrals-entrance-content .arrow-icon {
width: 50rpx;
height: 50rpx;
vertical-align: middle;
}
.referrals-entrance-content text {
margin-left: 10rpx;
vertical-align: middle;
}
.referrals-entrance-content .referrals-persent-number {
color: #d74d42;
}
wx.webpackJsonp([10],[],[240]);
\ No newline at end of file
{
"navigationBarTitleText": "商品详情"
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="../../utils/template/textNodeTemplate.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="groupon-detail-wrapper" wx:if="{{detailEnabled && graphicDetail}}">
<view wx:for="{{graphicDetail}}" wx:key="index">
<view wx:if="{{item.type === 'RichText'}}" class="richText">
<template is="text-node" data="{{...item.jsonValue}}" />
</view>
<view wx:if="{{item.type === 'Image'}}">
<image src="{{item.url}}" mode="aspectFill" style="width: 100%; height: {{ 690 * item.h / item.w}}rpx;" />
</view>
</view>
<include src="./templates/variationSelector.wxml" />
<view class="mask-variation" wx:if="{{isShowQuantityVariation}}" bindtap="hideVariation" />
<view class="pay-button pay-immediately-button" bindtap="addToOrder">
<text>立即购买</text>
</view>
</view>
</button>
</form>
.groupon-detail-wrapper {
padding: 23rpx 23rpx 92rpx 23rpx;
background: #ffffff;
}
.groupon-detail-wrapper text {
font-size: 28rpx;
line-height: 1.5;
text-align: left;
color: #8a8a8a;
margin: 32rpx 0;
word-break: break-word;
}
.groupon-detail-wrapper image {
margin: 20rpx 0;
}
.pay-button {
height: 96rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #e8b84f;
}
.pay-button text {
font-size: 28rpx;
font-weight: 600;
color: #ffffff;
}
.pay-immediately-button {
position: fixed;
left: 0;
bottom: 0;
z-index: 300;
}
/* add groupon to order */
.add-to-order {
transform: translateY(100%);
-webkit-transform: translateY(100%);
background: #ffffff;
position: fixed;
bottom: 0;
z-index: 999;
left: 0;
width: 100%;
}
.add-to-order .add-to-order-row {
display: flex;
flex-direction: row;
padding: 30rpx 0;
color: #919191;
font-size: 34rpx;
align-items: center;
padding: 10rpx 40rpx;
}
.add-to-order .add-to-order-row .left {
min-width: 100rpx;
flex: 0 0 auto;
text-align: left;
}
.add-to-order .add-to-order-row .right {
flex: 1 1 0;
text-align: right;
}
.add-to-order .quantity {
margin: 0 26rpx;
}
.add-to-order .quantity-btn {
width: 50rpx;
height: 50rpx;
display: inline-block;
line-height: 60rpx;
text-align: center;
vertical-align: middle;
color: #c7c7c7;
}
.add-to-order .quantity-btn.disabled {
opacity: 0.2;
}
.add-to-order.no-variation .last {
padding: 0;
border-top: none;
}
wx.webpackJsonp([11],[],[241]);
\ No newline at end of file
{
"navigationBarTitleText": "店长推荐"
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="../../utils/template/groupBuyListTemplate.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="group-buy-list-wrapper">
<block wx:if="{{storeGrouponsList.length > 0}}">
<block wx:for="{{storeGrouponsList}}" wx:key="item" wx:for-item="item">
<template is="group-buy-list-wire-layout" data="{{item}}" />
</block>
</block>
<block wx:else>
<view class="empty-groupon">
<image src="{{iconPath.iconEmpty}}" mode="aspectFill" />
<text>当前无订单</text>
</view>
</block>
</view>
</button>
</form>
.group-buy-list-wrapper {
overflow: auto;
padding: 0 40rpx;
}
/* empty groupon */
.empty-groupon {
height: 80vh;
text-align: center;
padding-top: 300rpx;
box-sizing: border-box;
}
.empty-groupon image {
width: 200rpx;
height: 200rpx;
}
.empty-groupon text {
font-size: 40rpx;
font-weight: 400;
color: #7D7D7D;
padding: 40rpx;
display: block;
}
wx.webpackJsonp([12],[],[242]);
\ No newline at end of file
{
"navigationBarTitleText": "订单"
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="../../utils/template/showError.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="pay-order-wrapper">
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<form bindsubmit="formSubmit">
<view class="pay-order-box">
<view class="header">
<image src="{{avatar}}" mode="aspectFill" />
<view class="info">
<text>{{name}}</text>
<text>{{price}}</text>
</view>
</view>
<view class="line"></view>
<view class="bottom">
<text>数量</text>
<text>{{currentQuantity}}张</text>
</view>
</view>
<view class="form-block pay-userinfo-box">
<text class="title">顾客信息</text>
<view class="form-content">
<view class="flex-row form-field" bindtap="focusName">
<text class="auto-flex label">姓名</text>
<input bindinput="bindNameInput" focus="{{focus.userName}}" value="{{payUserInfo.userName}}" class="normal-flex" type="text" />
</view>
<view class="flex-row form-field" bindtap="focusPhone">
<text class="auto-flex label">电话</text>
<input bindinput="bindPhoneInput" focus="{{focus.userPhone}}" value="{{payUserInfo.userPhone}}" class="normal-flex" type="digit" />
</view>
</view>
<text class="title">填写顾客信息有利于商家及时联系到你</text>
</view>
<view class="actual-payment">
<text>实际支付</text>
<text>¥{{totalAmount}}</text>
</view>
<view class="pay-button" wx:if="{{paymentGateway === PAYMENT_GATEWAY.BALANCE && balance > 0}}">
<button class="balance-button" type="primary" disabled="{{balance < totalAmount}}" loading="{{submitting}}" size="default" form-type="submit" style="background-color: #6f8695; opacity: {{balance < totalAmount ? 0.5 : 1}}">
<view class="flex-row center-item balance-box">
<view class="flex-row center-item account">
<image src="{{iconPath.iconBalancePay}}" mode="aspectFill" />
<block wx:if="{{balance < totalAmount && isWechatPayEnabled}}">
余额充值不足,请使用微信支付
</block>
<block wx:else>使用账号余额</block>
</view>
<view class="account-balance">(账户余额{{balance}}元)</view>
</view>
</button>
</view>
<view class="pay-button wechat" wx:if="{{isWechatPayEnabled && (paymentGateway === PAYMENT_GATEWAY.WECHAT || balance <= 0)}}">
<button type="primary" loading="{{submitting}}" hover-class="other-button-hover" size="default" form-type="submit">
<image src="{{iconPath.iconWechatPay}}" mode="aspectFill" />
确认支付{{ totalAmount ? totalAmount + '元' : ''}}
</button>
</view>
<view wx:if="{{isWechatPayEnabled && paymentGateway === PAYMENT_GATEWAY.WECHAT && balance > 0}}" class="pay-link" data-payment-gateway="{{PAYMENT_GATEWAY.BALANCE}}" bindtap="changePaymentGateway">
转为使用余额支付
</view>
<view wx:if="{{isWechatPayEnabled && paymentGateway === PAYMENT_GATEWAY.BALANCE && balance > 0}}" class="pay-link" data-payment-gateway="{{PAYMENT_GATEWAY.WECHAT}}" bindtap="changePaymentGateway">
转为使用微信支付
</view>
</form>
</view>
</button>
</form>
.like-btn {
z-index: 997;
}
page {
background-color: #F4F4F4;
}
.pay-order-wrapper {
padding: 28rpx 28rpx;
}
/* pay order panel */
.pay-order-box {
padding: 32rpx;
border-radius: 6rpx;
background-color: #ffffff;
box-shadow: 0 2rpx 2rpx 0 #0000000f;
}
.pay-order-box .header {
display: flex;
align-items: center;
justify-content: flex-start;
}
.pay-order-box .header image {
width: 128rpx;
height: 128rpx;
margin-right: 20rpx;
}
.pay-order-box .header .info text {
display: block;
}
.pay-order-box .header .info text:first-child {
font-size: 32rpx;
font-weight: 500;
color: #444444;
}
.pay-order-box .header .info text:last-child {
font-size: 36rpx;
color: #e84c4b;
margin-top: 10rpx;
}
.pay-order-box .line {
height: 1rpx;
margin: 32rpx 0;
background-color: #dfdfdf;
}
.pay-order-box .bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.pay-order-box .bottom text {
font-size: 28rpx;
color: #3A3A3A;
}
.actual-payment {
margin: 20rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.actual-payment text:first-child {
font-size: 30rpx;
color: #222222;
}
.actual-payment text:last-child {
font-size: 52rpx;
color: #ec5360;
}
/* payment panel */
.pay-button {
position: relative;
}
.pay-button .balance-button {
color: #ffffff;
}
.pay-button .balance-box {
display: inline-block;
}
.pay-button .balance-box .account {
color: #ffffff;
font-size: 32rpx;
line-height: 32rpx;
margin-bottom: 10rpx;
}
.pay-button .balance-box image {
width: 40rpx;
height: 40rpx;
margin-right: 8rpx;
background-color: #6f8695;
}
.pay-button .account-balance {
color: #ffffff;
font-size: 24rpx;
line-height: 24rpx;
}
.wechat image {
width: 40rpx;
height: 40rpx;
margin-right: 8rpx;
}
button {
margin-top: 40rpx;
height: 100rpx;
line-height: 100rpx;
display: flex;
font-size: 32rpx;
align-items: center;
justify-content: center;
}
.pay-link {
color: #00b9ff;
text-align: center;
margin-top: 56rpx;
font-size: 28rpx;
}
/* userinfo panel */
.form-block {
margin: 30rpx 0;
}
.form-block .title {
margin: 10rpx;
display: block;
font-size: 30rpx;
color: #999;
}
.form-block .form-content {
background: #fff;
border-radius: 6rpx;
box-shadow: 0 2rpx 2rpx 0 #0000000f;
}
.form-block .form-field {
padding: 31rpx;
border-bottom: 2rpx solid #e5e5e5;
font-size: 28rpx;
}
.form-block .form-field .label {
font-size: 28rpx;
min-width: 85rpx;
color: #999;
}
.form-block .form-field.last {
border-bottom: 0rpx;
}
wx.webpackJsonp([13],[],[243]);
\ No newline at end of file
{
"navigationBarTitleText": "订单"
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="../../utils/template/luckyWheelBanner.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="pay-order-success-wrapper">
<view class="pay-success-icon">
<image src="{{iconPath.iconPaySuccess}}" mode="aspectFill" />
</view>
<view class="hint">
<text>购买成功</text>
<block wx:if="{{!!increaseBonus}}">
<text wx:if="{{isPreviewLuckyWheel}}">,获得1620积分</text>
<text wx:else>,获得{{increaseBonus}}积分</text>
<text>,获得{{increaseBonus}}积分</text>
</block>
</view>
<view class="groupon-title">订单核销码</view>
<view class="groupon-code-box">
<block wx:if="{{!isFetching || isPreviewLuckyWheel}}">
<text wx:if="{{isPreviewLuckyWheel}}">2829 2839 2830</text>
<block wx:if="{{firstTwoGrouponTokens.length > 0 && !isShowMoreCode}}" wx:for="{{firstTwoGrouponTokens}}" wx:key="item" wx:for-item="item">
<text>{{item}}</text>
</block>
<block wx:if="{{grouponTokensList.length > 2 && !!isShowMoreCode}}" wx:for="{{grouponTokensList}}" wx:key="item" wx:for-item="item">
<text>{{item}}</text>
</block>
<block wx:if="{{grouponTokensList.length > 2}}">
<view wx:if="{{!isShowMoreCode}}" class="option" bindtap="onShowMoreCode">
<image src="{{iconPath.iconArtboardDown}}" mode="aspectFill" />
<view class="cusp">展开更多</view>
</view>
<view wx:if="{{!!isShowMoreCode}}" class="option" bindtap="onHideMoreCode">
<image src="{{iconPath.iconArtboardUp}}" mode="aspectFill" />
<view class="cusp">收起</view>
</view>
</block>
</block>
<block wx:else>
<view class="loader-box">
<text class="loader" />
</view>
</block>
</view>
<view class="prompt">请在店里向店员出示该券码使用</view>
<view class="navigate-btn">
<text class="order" bindtap="navigateToCenterPage">查看订单</text>
<text class="success" bindtap="navigateToIndexPage">完成</text>
</view>
<view class="classified" style="{{entryPolicies.afterPayment ? 'margin-bottom: 180rpx' : ''}}">
前往“我的”>“订单”可查看
</view>
<view class="luckywheel-banner-afterpay-wrapper" wx:if="{{entryPolicies.afterPayment}}" bindtap='navigateToLuckyWheel'>
<template is="luckywheel-banner-layout" data="{{luckyWheelBannerPic}}"></template>
</view>
</view>
</button>
</form>
.pay-order-success-wrapper {
padding: 58rpx;
text-align: center;
}
.pay-order-success-wrapper .pay-success-icon {
margin-top: 103rpx;
}
.pay-order-success-wrapper .pay-success-icon image {
width: 140rpx;
height: 140rpx;
}
.pay-order-success-wrapper .hint {
margin: 27rpx;
}
.pay-order-success-wrapper .hint text {
font-size: 36rpx;
color: #333333;
}
.pay-order-success-wrapper .groupon-title {
font-size: 32rpx;
color: #222222;
margin: 70rpx 0 24rpx 0;
}
.pay-order-success-wrapper .groupon-code-box {
padding: 30rpx 0;
border-radius: 12rpx;
background-color: #fff9e1;
}
.pay-order-success-wrapper .groupon-code-box text {
display: block;
font-size: 56rpx;
color: #222222;
padding: 10rpx 0;
width: 100%;
}
.pay-order-success-wrapper .groupon-code-box .option {
display: flex;
align-items: center;
justify-content: center;
}
.pay-order-success-wrapper .groupon-code-box .option image {
width: 24rpx;
height: 24rpx;
}
.pay-order-success-wrapper .groupon-code-box .option .cusp {
font-size: 28rpx;
color: #AAA8A5;
margin-left: 10rpx;
display: inline-block;
}
.pay-order-success-wrapper .groupon-code-box .loader-box {
display: flex;
justify-content: center;
}
.pay-order-success-wrapper .groupon-code-box .loader-box .loader {
width: 40rpx;
height: 40rpx;
display: block;
padding: 0;
}
.pay-order-success-wrapper .prompt {
font-size: 28rpx;
color: #8a8a8a;
margin: 52rpx 0;
}
.pay-order-success-wrapper .navigate-btn {
margin-top: 120rpx;
}
.pay-order-success-wrapper .navigate-btn text {
display: inline-block;
width: 216rpx;
text-align: center;
font-size: 28rpx;
border-radius: 6rpx;
margin: 0 20rpx;
}
.pay-order-success-wrapper .navigate-btn .order {
height: 68rpx;
color: #ffffff;
line-height: 68rpx;
background-color: #4b4746;
}
.pay-order-success-wrapper .navigate-btn .success {
height: 64rpx;
line-height: 64rpx;
color: #4b4746;
background-color: #ffffff;
border: 2rpx solid #4b4746;
}
.pay-order-success-wrapper .classified {
font-size: 28rpx;
color: #989898;
margin-top: 60rpx;
}
wx.webpackJsonp([14],[],[244]);
\ No newline at end of file
{
"navigationBarTitleText": " ",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#252538",
"navigationBarTextStyle": "#fff",
"backgroundTextStyle": "light"
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="canvas" style="height:{{height}}">
<canvas class="canvas_item" canvas-id="share-card" style="height:{{height}};z-index:1"></canvas>
</view>
<view class="bottom">
<view class="save-button" hover-class="hoverclass" bindtap="saveGrouponShare">
<image src="{{iconPath.iconDownLoadImage}}" style="width:38rpx; height:38rpx;" />
<text class="share-text">保存图片</text>
</view>
</view>
</button>
</form>
page {
background-color: #252538;
}
.canvas {
margin: 40rpx 50rpx;
display: flex;
align-items: center;
justify-content: center;
}
.canvas .canvas_item {
width: 100%;
height: 100%;
border-radius: 20rpx;
overflow: hidden;
}
.bottom {
display: flex;
justify-content: center;
}
.bottom .save-button {
width: 664rpx;
height: 96rpx;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 10rpx;
border: solid 2rpx rgba(255, 255, 255, 0.37);
background-color: rgba(255, 255, 255, 0.18);
}
.bottom .share-text {
margin-left: 10rpx;
font-size: 32rpx;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
wx.webpackJsonp([15],[],[245]);
\ No newline at end of file
{
"navigationBarTitleText": "适用门店"
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="../../utils/template/storeListTemplate.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="store-list-wrapper">
<view class="store-list">
<block wx:for="{{storeList}}" wx:key="item" wx:for-item="item">
<template is="group-buy-store-list" data="{{item, iconPath}}" />
</block>
</view>
</view>
</button>
</form>
.store-list-wrapper {
padding: 0 23rpx;
}
<view animation="{{shareAnimation}}" class="share-groupon-view">
<view wx:if="{{isReferralsEnabled}}" class="referrals-entrance" bindtap="navigateToReferrals">
<view class="referrals-entrance-content">
<image src="/assets/icons/red-envelope.png" class="referrals-icon" />
<text>分享后好友下单成功,立获</text><text class="referrals-persent-number">{{(cashbackPercentage*100)+'%返利'}}</text>
<image src="/assets/icons/icon-arrow.png" class="arrow-icon" />
</view>
</view>
<view class="share-choose">
<button class="share-choose-item send-friend" open-type="share">
<image src="{{iconPath.iconShareMessage}}" class="share-image" />
<text class="share-text">发送给朋友</text>
</button>
<button class="share-choose-item" bindtap="onShareGroupon" data-product-id="{{currentProduct.id}}">
<image src="{{isShareLoading ? iconPath.iconLoading : iconPath.iconShareImage}}" class="share-image" />
<text class="share-text">{{isShareLoading? '生成中' : '生成分享图片'}}</text>
</button>
</view>
<button wx:if="{{isShowShareVariation}}" class="main-button normal-flex cancel-share" bindtap="cancelShare" hover-class="none">取消</button>
</view>
<view animation="{{quantityAnimation}}" class="{{'add-to-order ' + ( currentVariations.length <= 1 ? 'no-variation' : '' ) }}">
<view class="add-to-order-row last">
<text class="left">购买张数</text>
<view class="right">
<image src="{{iconPath.iconMinus}}" class="{{'quantity-btn ' + ( currentQuantity >= 2 ? '' : 'disabled' ) }}" bindtap="decreaseQuantity" />
<text class="quantity">{{currentQuantity}}</text>
<image src="{{iconPath.iconAdd}}" class="{{'quantity-btn ' + ((quantityErrorMessage || isOverTimes) ? 'disabled' : '') }}" bindtap="increaseQuantity" />
</view>
</view>
<view class="pay-button" wx:if="{{!isShowShareVariation}}" bindtap="onCreateGrouponOrder">
<text>确定</text>
</view>
</view>
wx.webpackJsonp([16],[],[246]);
\ No newline at end of file
{
"navigationBarTitleText": " ",
"enablePullDownRefresh": true,
"disableScroll": false
}
<view class="reload-bar" style="display:flex; justify-content:center; align-items: center; position: fixed; z-index: 100; width: 100%; text-align: center; background: #212121; padding: 6px 0; color: #eee;" wx:if="{{showReloadBar}}">
<image src="/assets/common/icon_wifiwarning_fill32.png" style="width: 32rpx; height: 32rpx; padding-right: 5px;" />
<text style="font-size: 12px; color: #eee;">当前网络不稳定,</text>
<view wx:if="{{isRealodingRequests}}" style="font-size: 12px; color: #eee;">正在尝试连接
<image src="/assets/common/loading.gif" style="width: 20rpx; height: 20rpx; padding-left: 5px;" />
</view>
<text wx:else style="font-size: 12px; color: #eee;" bindtap="reload">点击重新加载</text>
<image bindtap="hideReloadBar" src="/assets/common/close.png" style="position: absolute; width: 16px; height: 16px; right: 30rpx" />
</view>
<import src="../../utils/template/showError.wxml" />
<import src="../../utils/template/commentList.wxml" />
<import src="../../utils/template/groupBuyListTemplate.wxml" />
<import src="../../utils/template/couponItem.wxml" />
<import src="../../utils/template/popup/popup.wxml" />
<import src="../../utils/template/imageBanner.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<template name="img-content">
<view class="store-img" bindtap="previewImage" data-event-src="{{item.url}}" data-event-index="{{index}}">
<image style="width: 216rpx; height:216rpx;" mode="aspectFill" src="{{item.url}}"></image>
</view>
</template>
<!-- <import src="../../../../src/components/likeBtn/likeBtn.wxml" /> is not working, this can be fixed after showcase is refactored to the mix, now just copy the likeBtn template over. -->
<template name="likeBtn">
<view class="like-btn flex-row" bindtap="{{componentName + '.onLike'}}" style="padding:4px 10px; font-size:12px; background-color:rgba(0,0,0,0.21); border-top-left-radius:18px; border-bottom-left-radius:18px; color:#fff; position: absolute; right: 0px; top: 40px;">
<image src="/assets/icons/ic-like.png" style="width: 32rpx; height: 32rpx; margin-right: 2px;" />
<view>
<text style="color: #fff; font-size: 12px; position: relative; top: -1px;">{{isLiked ? '已赞' : '赞'}}</text>
<text style="color: #fff; font-size: 12px; position: relative; top: -1px;">({{formatedAmount}})</text>
</view>
</view>
</template>
<block wx:if="{{isFetched}}">
<view wx:if="{{announcements.length > 0}}" class="announcement-bar flex-row" bindtap="navigateToAnnouncements">
<image src="/assets/icons/bullhorn.png" class="announcement-icon" style="width:16px; height: 16px;" />
<view class="announcement-text" animation="{{animationData}}">{{announcementString}}</view>
<view class="announcement-button">更多</view>
</view>
<view style="{{announcements.length > 0 ? 'margin-top: 30px;' : ''}}" class="{{showRedPackageModel ? 'no-srap' : ''}}">
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<template wx:if="{{enableLikes}}" is="likeBtn" data="{{ ...components['likeBtn']['0'], componentName: 'components.likeBtn.0' }}"></template>
<block wx:if="{{setting.coverStyle === 'single' || setting.coverCarouselImages.length < 1}}">
<view class="slider-wrapper-{{setting.layout}}">
<image class="picture" src="{{setting.coverImage}}" mode="aspectFill" />
</view>
</block>
<block wx:else>
<view class="slider">
<swiper class="slider-{{setting.layout}}" indicator-dots="{{false}}" autoplay="{{true}}" circular="{{true}}" bindchange="handleSliderChange">
<block wx:for="{{setting.coverCarouselImages}}" wx:key="url" wx:for-item="url">
<swiper-item class="slide-item">
<view class="slider-wrapper-{{setting.layout}}">
<image class="picture" src="{{url}}" mode="aspectFill" />
</view>
</swiper-item>
</block>
</swiper>
<view wx:if="{{setting.layout !== 'b'}}" class="slider-dots">
<view wx:for="{{setting.coverCarouselImages || []}}" wx:key="index" class="{{'slider-dot ' + (dotPosition === index ? 'selected' : '')}}" />
</view>
</view>
</block>
<view class="header-wrapper">
<view class="title-box-{{setting.layout}}">
<image class="avatar" src="{{setting.avatar}}" mode="aspectFill" />
<view class="title" bindtap="gotoStorefrontListPage">
<text>{{storefrontName}}</text>
<image wx:if="{{setting.isMultiSf}}" src="/assets/icons/ic-dropdown.png" />
</view>
<view class="sub-title">{{category}}</view>
</view>
<view wx:if="{{actionButtons.length > 0}}" class="showcase-action-buttons">
<view wx:for="{{actionButtons}}" class="showcase-action-button" wx:key="{{item}}" style="{{item.buttonStyle}}" bindtap="{{item.bindtap}}">
<!-- use navigator jump to miniProgram by item.appId -->
<block wx:if="{{item.appId}}">
<navigator target="miniProgram" open-type="navigate" app-id="{{item.appId}}" style="height: 32rpx">
<image mode="widthFix" src="{{item.iconUrl}}" style="{{item.iconStyle}}; width:32rpx; height:32rpx; vertical-align:middle" class="icon-left" />
{{item.text}}
</navigator>
</block>
<block wx:else>
<image mode="widthFix" src="{{item.iconUrl}}" style="{{item.iconStyle}}; width:32rpx; height:32rpx;" class="icon-left" />
{{item.text}}
</block>
</view>
</view>
<view class="setting-info{{firstTwoStoreGrouponsList.length > 0 ? ' innerPadding' : ''}}">
<view wx:if="{{showAddressInMp}}" class="event-info flex-row space-between" bindtap="navigation">
<view class="left">
<image src="/assets/icons/icon-location.png" class="icon-detail" />
<text class="omit-text">{{address}}</text>
</view>
<view wx:if="{{longitude && latitude}}" class="icon-right">
<image style="width:34rpx; height: 34rpx;" src="/assets/icons/icon-arrow.png"></image>
</view>
</view>
<view wx:if="{{showPhoneNumberInMp}}" class="event-info flex-row space-between" bindtap="onClickPhoneNumber">
<view class="left">
<image src="/assets/icons/icon-phone.png" class="icon-detail" />
<text class="omit-text" style="white-space: nowrap;">{{phone}}</text>
</view>
<view class="icon-right">
<image style="width:34rpx; height: 34rpx;" src="/assets/icons/icon-arrow.png"></image>
</view>
</view>
<view wx:if="{{showBusinessHoursInMp}}" class="event-info flex-row space-between">
<view class="left">
<image src="/assets/icons/icon-service-hours.png" class="icon-detail" />
<text class="business-hours">{{ isBusinessHourArr ? (businessHours[0]+':00 - '+ businessHours[1]+":00") : businessHours}}</text>
</view>
<view class="icon-right"></view>
</view>
<view wx:if="{{setting.isMultiSf && storefrontsSize > 1}}" class="event-info flex-row space-between" bindtap="gotoStorefrontListPage">
<view class="left">
<image src="/assets/icons/ic-chainstore.png" class="icon-detail" />
<text class="omit-text">查看其他 {{storefrontsSize - 1}} 家店</text>
</view>
<view class="icon-right">
<image style="width:34rpx; height: 34rpx;" src="/assets/icons/icon-arrow.png"></image>
</view>
</view>
<view wx:if="{{!!showAmenitiesInMp}}" class="amenities-info-item">
<view class="detail-content-item-view" wx:if="{{amenities.wifi}}">
<image class="icon-amenity" src="{{icon.iconWifi}}" />
<text>WIFI</text>
</view>
<view class="detail-content-item-view" wx:if="{{amenities.noSmoking}}">
<image class="icon-amenity" src="{{icon.iconNoSmoking}}" />
<text>无烟区</text>
</view>
<view class="detail-content-item-view" wx:if="{{amenities.parking}}">
<image class="icon-amenity" src="{{icon.iconParking}}" />
<text>停车位</text>
</view>
<view class="detail-content-item-view" wx:if="{{amenities.payment}}">
<image class="icon-amenity" src="{{icon.iconPayment}}" />
<text>刷卡</text>
</view>
<view class="detail-content-item-view" wx:if="{{amenities.room}}">
<image class="icon-amenity" src="{{icon.iconRoom}}" />
<text>包间</text>
</view>
</view>
</view>
</view>
<view class="index-banner" wx:for="{{indexBannerList}}" wx:key="item" wx:for-item="item">
<template is="image-banner-layout" data="{{item}}"></template>
</view>
<view wx:if="{{expandedAvailiableCouponList.length > 0}}" class="coupon-panel">
<view class="header">
<view class="title">
<image mode="aspectFill" src="{{icon.iconHomeCoupon}}" />
<text>优惠券</text>
</view>
<view style="display:flex;" bindtap="navigateToCouponListPage">
<text class="more-coupons">查看更多</text>
<image style="width:34rpx; height: 34rpx; margin-left:-2px;" src="/assets/icons/icon-arrow.png"></image>
</view>
</view>
<scroll-view scroll-x="true" style="height: 200rpx;">
<view style="display: flex;">
<block wx:for="{{expandedAvailiableCouponList}}" wx:key="item" wx:for-item="item">
<template is="coupon-item" data="{{item}}" />
</block>
</view>
</scroll-view>
</view>
<view wx:if="{{firstTwoStoreGrouponsList.length > 0}}" class="group-buy-panel">
<view class="header">
<image mode="aspectFill" src="{{icon.iconHomeGroupbuy}}" />
<text>店长推荐</text>
</view>
<block wx:for="{{firstTwoStoreGrouponsList}}" wx:key="item" wx:for-item="item">
<template is="group-buy-list-wireless-layout" data="{{item}}" />
</block>
<view class="line"></view>
<view wx:if="{{storeGrouponsList.length > 2}}" class="link" bindtap="navigateToGroupBuyListPage">
<text>查看所有</text>
<image mode="aspectFill" src="{{icon.iconArrow}}" />
</view>
</view>
<view class="content-wrapper">
<view wx:if="{{description}}" class="description">
<view wx:if="{{description.length > 82}}">
<block wx:if="{{isExtend}}">
<text class="store-des">{{longWords}}</text>
<text class="setting" bindtap="showMore">更多</text>
</block>
<block wx:else>
<text class="store-des">{{description}}</text>
<text class="setting" bindtap="hideMore">收起</text>
</block>
</view>
<view wx:else>
<text class="store-des">{{shortWords}}</text>
</view>
</view>
<view wx:if="{{videoUrl}}">
<video style="width: 100%;" src="{{videoUrl}}"></video>
</view>
<view wx:if="{{setting.galleryLayout === 'a' || setting.galleryLayout === null }}" class="img-box">
<view class="store-picture">
<view wx:for="{{lessImg || []}}" wx:key="{{item}}" wx:for-item="item">
<template is="img-content" data="{{item, index}}" />
</view>
<view wx:if="{{galleryImages.length > 9}}" class="store-img more-image" bindtap="gotoStorePhotoPage">
<image style="width: 216rpx; height: 216rpx;" mode="aspectFill" src="{{moreImg[0].url}}"></image>
<view style="width: 216rpx; height: 216rpx;" class="overlay"></view>
<view class="overlay-des">
<text class="check-all">查看全部</text>
<text class="line-skip"></text>
<text class="galleryImage-number">{{galleryImages.length}} 张</text>
</view>
</view>
<view wx:if="{{galleryImages.length ===2 || galleryImages.length === 5 || galleryImages.length === 8}}">
<view class="store-img">
<image style="width: 216rpx; height: 216rpx;"></image>
</view>
</view>
</view>
</view>
<view wx:if="{{setting.galleryLayout === 'b'}}" class="img-carousel">
<scroll-view scroll-x class="carousel-container">
<block wx:for="{{canShowImg || []}}" wx:key="{{item}}">
<view class="store-img" bindtap="previewImage" data-event-src="{{item.url}}" data-event-index="{{index}}" class="carousel-item">
<image class="carousel-image" mode="aspectFill" src="{{item.url}}"></image>
<view wx:if="{{item.description}}" class="image-description">
<text>{{item.description}}</text>
</view>
</view>
</block>
<block wx:if="{{galleryImages.length > 9}}">
<view bindtap="gotoStorePhotoPage" class="carousel-more">
<text>显示全部</text>
</view>
</block>
</scroll-view>
</view>
<view class="comment" wx:if="{{setting.enableComments}}">
<view class="c-header">
<view class="count">
<image mode="aspectFill" style="width: 24px; height: 24px;" src="/assets/icons/icon-comments.png"></image>
<text>顾客评价</text>
<text wx:if="{{comments && comments.length > 0}}">{{paginationMeta.totalCount}})</text>
</view>
<view wx:if="{{comments && comments.length > 0}}" style="{{'border: 1px solid ' + (isWhite ? '#000000' : mainBackground)}}" class="write-btn" bindtap="goWriteComment">
<image mode="aspectFill" style="{{'width: 18px; height: 18px;' +'background-color:' + (isWhite ? '#000000' : mainBackground)}}" src="/assets/icons/icon-write-comment-empty.png"></image>
<text style="{{'color:' + (isWhite ? '#000000' : mainBackground)}}">发表评论</text>
</view>
</view>
<view class="c-body" wx:if="{{comments && comments.length > 0}}">
<block wx:for="{{lessComments}}" wx:key="item" wx:for-item="item">
<template is="comment-list" data="{{item}}" />
</block>
</view>
<view wx:if="{{comments && comments.length > 6}}" class="c-footer">
<view class="check-more-comment" bindtap="goStoreComment">
查看所有评论
<image src="/assets/icons/icon-more.png" style="width: 38rpx; height: 38rpx;" mode="aspectFill"></image>
</view>
</view>
<view wx:if="{{comments && comments.length === 0}}" class="empty-comment-wrapper" mode="aspectFill">
<image style="width: 100%; height: 220px;" src="/assets/icons/comment-empty-bg.png"></image>
<view class="add-comment-enter">
<text>暂无评论</text>
<text>快成为第一个评论的顾客。</text>
<view class="write-btn" bindtap="goWriteComment">
<image mode="aspectFill" style="width: 20px; height: 20px;" src="/assets/icons/icon-write-comment.png"></image>
发表评论
</view>
</view>
</view>
</view>
</view>
<view class="footer" style="{{'background-color:'+((comments && comments.length === 0) ? '#ffffff' : '#f8f8f8')}};">
<image src="/assets/icons/footer-logo.png" mode="aspectFill" />
</view>
</view>
<template is="popup" data="{{ ...components['popup']['1'], componentName: 'components.popup.1'}}" />
</block>
<block wx:else>
<view class="flex-row flex-col center-align-item" style="height: 100vh;">
<!-- <view class="loader"/> -->
<image src="/assets/icons/I-am-loading.gif" mode="aspectFill" style="width:140px; height:140px;" />
</view>
</block>
<view class="shadow-view" wx:if="{{showRedPackageModel}}"></view>
<view class="referrals-package-model" wx:if="{{showRedPackageModel}}">
<view class="package-panel">
<view class="top-panel">
<image class="close" src="{{icon.iconClose}}" bindtap="closeRedPocket"></image>
<image src="{{referrals.photo}}" style="width: 112rpx; height: 112rpx;" />
<text>{{referrals.nickname}}邀请你光临</text>
<text>{{storefrontName}}</text>
</view>
<view class="content-panel">
<view class="bonus-price">
¥
<text wx:if="{{referrals.bonus}}">{{referrals.bonus / 100}}</text>
<image wx:else src="{{icon.iconLoading}}" />
</view>
<text class="bonus-tip">现金已存入账户余额,可在小程序内“优惠买单”时使用。</text>
</view>
<view wx:if="{{referrals.hasMembercard}}" class="content-bottom">
<text bindtap="navigateToMine">前往“我的余额”查看</text>
<image src="{{icon.iconMore}}" style="width: 20px; height: 18px; margin-left:5px;" />
</view>
<view wx:else class="archive-button" bindtap="navigateToMine" data-type="getCard">
<text>领取会员卡可获得红包</text>
</view>
</view>
</view>
<view class="phone-selector" animation="{{phoneSelectorAnimation}}">
<view class="phone-selector-item-wrapper">
<view class="phone-selector-item" wx:for="{{phoneList}}" wx:key="*this" data-phoneNumber="{{item}}" bindtap="onClickPhoneNumber">
{{item}}
</view>
</view>
<view class="phone-selector-cancel-btn" bindtap="hidePhoneSelector">取消</view>
</view>
<view class="mask-variation" wx:if="{{isShowPhoneSelector}}" bindtap="hidePhoneSelector" />
</button>
</form>
.like-btn {
z-index: 997;
}
.center-item {
display: flex;
align-items: center;
justify-content: center;
}
.popup-title {
margin: 60rpx auto 0 auto;
text-align: center;
max-width: 510rpx;
}
.popup-title text {
font-weight: 600;
font-size: 40rpx;
}
.popup-content {
margin: 8rpx auto 0 auto;
max-width: 510rpx;
text-align: center;
}
.popup-content text {
font-size: 28rpx;
}
.right-cornor-close {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 40rpx;
height: 40rpx;
}
.popup-shadow {
background-color: rgba(0, 0, 0, 0.5);
}
.popup-fullscreen {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.popup-fullscreen text,
.popup-fullscreen view {
color: #fff;
}
.popup-fullscreen .poster {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.popup-fullscreen .poster .poster-image {
overflow: hidden;
border-radius: 16rpx;
width: 602rpx;
height: 692rpx;
}
.popup-fullscreen .poster .poster-image image {
width: 100%;
height: 100%;
}
.popup-fullscreen .poster .close-icon {
margin-top: 60rpx;
}
.popup-fullscreen .poster .close-icon image {
width: 84rpx;
height: 84rpx;
}
.popup-fullscreen .membercard {
width: 602rpx;
border-radius: 20rpx;
background-color: #ffffff;
overflow: hidden;
position: relative;
}
.popup-fullscreen .membercard text {
color: black;
}
.popup-fullscreen .membercard .title {
margin: 60rpx auto 0 auto;
text-align: center;
max-width: 510rpx;
}
.popup-fullscreen .membercard .title text {
font-weight: 600;
font-size: 40rpx;
}
.popup-fullscreen .membercard .content {
margin: 8rpx auto 0 auto;
max-width: 510rpx;
text-align: center;
}
.popup-fullscreen .membercard .content text {
font-size: 28rpx;
}
.popup-fullscreen .membercard .membership-image {
display: flex;
align-items: center;
justify-content: center;
background-size: 100%;
width: 494rpx;
height: 296rpx;
border-radius: 10rpx;
margin: 56rpx auto 0;
position: relative;
}
.popup-fullscreen .membercard .membership-image .card-logo {
position: absolute;
width: 86rpx;
height: 86rpx;
border-radius: 50%;
left: 56rpx;
top: 40rpx;
}
.popup-fullscreen .membercard .membership-image .card-qrcode {
display: block;
position: absolute;
width: 50rpx;
height: 50rpx;
right: 70rpx;
top: 46rpx;
}
.popup-fullscreen .membercard .membership-image .card-text {
position: absolute;
left: 56rpx;
bottom: 40rpx;
color: #fff;
font-size: 32rpx;
}
.popup-fullscreen .membercard .goto-btn {
display: flex;
align-items: center;
justify-content: center;
margin-top: 74rpx;
margin-bottom: 42rpx;
color: white;
width: 530rpx;
height: 88rpx;
background-color: #3a3a3a;
border-radius: 8rpx;
}
.popup-fullscreen .membercard .close-icon {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 40rpx;
height: 40rpx;
}
.popup-fullscreen .coupons {
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.popup-fullscreen .coupons view {
overflow: visible;
}
.popup-fullscreen .coupons .wrapper {
position: relative;
}
.popup-fullscreen .coupons .wrapper .redpocket {
width: 320rpx;
height: 320rpx;
position: absolute;
top: -180rpx;
left: 140rpx;
}
.popup-fullscreen .coupons .wrapper .title {
margin: 60rpx auto 0 auto;
text-align: center;
max-width: 510rpx;
z-index: 100;
margin-top: 54rpx;
}
.popup-fullscreen .coupons .wrapper .title text {
font-weight: 600;
font-size: 40rpx;
}
.popup-fullscreen .coupons .wrapper .content {
margin: 8rpx auto 0 auto;
max-width: 510rpx;
text-align: center;
}
.popup-fullscreen .coupons .wrapper .content text {
font-size: 28rpx;
}
.popup-fullscreen .coupons .wrapper .center-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
width: 600rpx;
background-color: #d74d42;
border-radius: 16rpx;
color: white;
}
.popup-fullscreen .coupons .wrapper .close-icon {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 40rpx;
height: 40rpx;
width: 30rpx;
height: 30rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 32rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list {
height: 184rpx;
background-color: #ffffff;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 2rpx 0 rgba(0, 0, 0, 0.12);
border-radius: 12rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
box-sizing: content-box;
height: 120rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information {
display: flex;
align-items: center;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .amount {
width: 120rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .amount .decorator {
font-size: 28rpx;
margin: 0rpx 4rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .amount text {
color: #e84c4b;
font-weight: 400;
font-size: 50rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .condition {
margin-left: 10rpx;
width: 300rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .condition text {
display: block;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .condition text:first-child {
font-weight: 500;
color: #3a3a3a;
line-height: 36rpx;
font-size: 26rpx;
margin-bottom: 10rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .condition text:last-child {
color: #8a8a8a;
line-height: 34rpx;
font-size: 26rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line {
padding: 0 34rpx;
position: relative;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line text:first-child {
height: 2rpx;
border-radius: 8rpx;
background-color: #f3f3f3;
display: block;
width: 100%;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line .circle {
width: 12rpx;
height: 12rpx;
display: block;
border: 2rpx solid #e84c4b;
border-radius: 100%;
position: absolute;
background-color: #e84c4b;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line .left-icon {
left: -10rpx;
bottom: -10rpx;
box-shadow: 2rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.12);
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line .right-icon {
right: -10rpx;
bottom: -10rpx;
box-shadow: -2rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.12);
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .data {
height: 60rpx;
padding: 0 40rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .data text {
font-size: 22rpx;
color: #8a8a8a;
line-height: 66rpx;
}
.popup-fullscreen .coupons .wrapper .coupon-count {
text-align: center;
margin-top: -10rpx;
}
.popup-fullscreen .coupons .wrapper .coupon-count text {
font-size: 24rpx;
letter-spacing: 0.12rpx;
}
.popup-fullscreen .coupons .wrapper .bottom-text {
margin-top: 32rpx;
margin-bottom: 26rpx;
text-align: center;
}
.popup-fullscreen .coupons .wrapper .bottom-text text {
font-size: 24rpx;
letter-spacing: 0.12rpx;
}
.popup-fullscreen .coupons .wrapper .bottom-text .underline {
text-decoration: underline;
}
.luckywheel-popup-theme .luckywheel-popup {
position: relative;
width: 584rpx;
height: 592rpx;
border-radius: 20rpx;
background-color: #fff;
}
.luckywheel-popup-theme .luckywheel-popup .luckywheel-popup-closebtn {
position: absolute;
top: 12rpx;
right: 32rpx;
}
.luckywheel-popup-theme .luckywheel-popup .luckywheel-popup-closebtn image {
width: 46rpx;
height: 46rpx;
}
.luckywheel-popup-theme .luckywheel-popup-header {
margin: 0 auto;
width: 561rpx;
height: 290rpx;
}
.luckywheel-popup-theme .luckywheel-popup-header image {
width: 100%;
height: 100%;
}
.luckywheel-popup-theme .luckywheel-popup-title {
margin-top: 72rpx;
font-size: 32rpx;
color: #000;
line-height: 45rpx;
text-align: center;
}
.luckywheel-popup-theme .luckywheel-popup-btn {
margin: 0 auto;
margin-top: 39rpx;
width: 430rpx;
height: 108rpx;
border-radius: 6rpx;
text-align: center;
line-height: 108rpx;
font-size: 36rpx;
color: #fff;
background-color: #6c34c5;
}
.referrals-popup {
position: relative;
}
.referrals-popup .luckywheel-popup-closebtn {
position: absolute;
top: 0rpx;
right: 10rpx;
width: 60rpx;
height: 60rpx;
}
.referrals-popup .luckywheel-popup-closebtn image {
width: 100%;
height: 100%;
}
.referrals-popup .referral-background {
display: block;
width: 720rpx;
height: 812rpx;
}
.referrals-popup .referrals-text {
position: absolute;
top: 60rpx;
left: 50%;
text-align: center;
transform: translateX(-50%);
}
.referrals-popup .referrals-text .referrals-title {
font-size: 36rpx;
color: #8a572a;
font-weight: bold;
}
.referrals-popup .referrals-text .referrals-persent-number {
font-size: 130rpx;
color: #df5549;
vertical-align: middle;
font-weight: bold;
}
.referrals-popup .referrals-text .percent-sign {
vertical-align: top;
font-size: 80rpx;
color: #df5549;
font-weight: bold;
margin-left: 15rpx;
}
.referrals-popup .navigate-referrals-page {
position: absolute;
bottom: 200rpx;
left: 50%;
box-shadow: 0 0 10rpx 0 #ce4a37;
transform: translateX(-50%);
}
.referrals-popup .navigate-referrals-page button {
width: 480rpx;
height: 88rpx;
color: #8a572a;
line-height: 88rpx;
background-color: #ffdd8d;
box-shadow: inset 0 7rpx 10rpx 0 #f7e9c9;
}
.referrals-popup .navigate-referrals-page button::after {
border: 0;
}
.slider {
position: relative;
}
.slider .slider-dots {
position: absolute;
bottom: 12rpx;
text-align: center;
width: 100vw;
}
.slider .slider-dot {
margin: 0 8rpx;
display: inline-block;
width: 12rpx;
height: 12rpx;
border-radius: 20rpx;
border: 2rpx solid #ABABAB;
}
.slider .slider-dot.selected {
background: #fff;
border: 2rpx solid #fff;
}
.slider-a {
height: 480rpx;
}
.slider-b {
height: 480rpx;
}
.slider-c {
height: 800rpx;
}
.slider-wrapper-a {
height: 480rpx;
}
.slider-wrapper-a .picture {
width: 100%;
}
.slider-wrapper-b {
height: 480rpx;
}
.slider-wrapper-b .picture {
width: 100%;
border-bottom-left-radius: 1200rpx 200rpx;
border-bottom-right-radius: 1200rpx 200rpx;
}
.slider-wrapper-c {
height: 800rpx;
}
.slider-wrapper-c .picture {
height: 100%;
width: 100%;
}
/* header wrapper */
.header-wrapper {
box-sizing: border-box;
padding: 40rpx 40rpx 0 40rpx;
}
.header-wrapper .title-box-a {
position: relative;
}
.header-wrapper .title-box-a .avatar {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
overflow: hidden;
position: absolute;
right: 0rpx;
top: -120rpx;
background-color: #ffffff;
box-shadow: 0 2rpx 8rpx #d8d8d8;
}
.header-wrapper .title-box-a .title {
display: inline-flex;
align-items: center;
width: 512rpx;
position: relative;
}
.header-wrapper .title-box-a .title text {
font-size: 42rpx;
font-weight: 600;
color: #292929;
max-width: 420rpx;
word-wrap: break-word;
}
.header-wrapper .title-box-a .title image {
width: 28rpx;
height: 28rpx;
margin-left: 18rpx;
margin-bottom: 10rpx;
}
.header-wrapper .title-box-a .sub-title {
font-size: 32rpx;
color: #838383;
line-height: 64rpx;
}
.header-wrapper .title-box-b {
position: relative;
margin-top: 80rpx;
text-align: center;
}
.header-wrapper .title-box-b .avatar {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
overflow: hidden;
position: absolute;
left: 50%;
top: -200rpx;
margin-left: -80rpx;
background-color: #ffffff;
box-shadow: 0 2rpx 8rpx #d8d8d8;
}
.header-wrapper .title-box-b .title {
display: inline-flex;
align-items: center;
position: relative;
}
.header-wrapper .title-box-b .title text {
font-size: 42rpx;
font-weight: 600;
color: #292929;
max-width: 600rpx;
word-wrap: break-word;
}
.header-wrapper .title-box-b .title image {
width: 28rpx;
height: 28rpx;
margin-left: 18rpx;
margin-bottom: 10rpx;
}
.header-wrapper .title-box-b .sub-title {
font-size: 32rpx;
color: #838383;
line-height: 64rpx;
}
.header-wrapper .title-box-c {
position: relative;
margin: -12rpx 0 0 140rpx;
}
.header-wrapper .title-box-c .avatar {
width: 116rpx;
height: 116rpx;
border-radius: 50%;
overflow: hidden;
position: absolute;
left: -140rpx;
top: 0;
background-color: #ffffff;
box-shadow: 0 2rpx 8rpx #d8d8d8;
}
.header-wrapper .title-box-c .title {
display: inline-flex;
align-items: center;
width: 512rpx;
}
.header-wrapper .title-box-c .title text {
font-size: 42rpx;
font-weight: 600;
color: #292929;
max-width: 420rpx;
word-wrap: break-word;
}
.header-wrapper .title-box-c .title image {
width: 28rpx;
height: 28rpx;
margin-left: 18rpx;
margin-bottom: 10rpx;
}
.header-wrapper .title-box-c .sub-title {
font-size: 32rpx;
color: #838383;
line-height: 64rpx;
}
.header-wrapper .showcase-action-buttons {
display: flex;
margin-top: 30rpx;
}
.header-wrapper .showcase-action-buttons .showcase-action-button {
flex: 1;
text-align: center;
padding: 28rpx 0rpx;
border-radius: 10rpx;
font-size: 28rpx;
margin-right: 10rpx;
display: flex;
align-items: center;
justify-content: center;
max-height: 100rpx;
}
.header-wrapper .showcase-action-buttons .showcase-action-button image {
margin-right: 8rpx;
position: relative;
top: -2rpx;
}
.header-wrapper .showcase-action-buttons .showcase-action-button:last-child {
margin-right: 0rpx;
}
.header-wrapper .card-token {
margin-top: 30rpx;
border-radius: 8rpx;
}
.header-wrapper .card-token .membership-card {
height: 78rpx;
border-radius: 10rpx;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
}
.header-wrapper .card-token .membership-card image {
width: 50rpx;
height: 30rpx;
margin-right: 10rpx;
}
.header-wrapper .setting-info {
margin-top: 30rpx;
}
.header-wrapper .setting-info .event-info {
min-height: 76rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-wrapper .setting-info .event-info .left {
display: flex;
align-items: center;
}
.header-wrapper .setting-info .event-info .omit-text {
font-size: 30rpx;
color: #757575;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
width: 75vw;
}
.header-wrapper .setting-info .event-info .business-hours {
width: 75vw;
font-size: 30rpx;
color: #757575;
word-break: break-word;
}
.header-wrapper .setting-info .event-info .icon-right {
text-align: right;
}
.header-wrapper .setting-info.innerPadding {
margin-bottom: 20rpx;
}
/* content wrapper */
.content-wrapper {
box-sizing: border-box;
padding: 0 40rpx 0 40rpx;
}
.content-wrapper .description {
letter-spacing: 0.16rpx;
line-height: 1.71;
margin-top: 32rpx;
margin-bottom: 40rpx;
font-weight: 400;
word-break: break-word;
}
.content-wrapper .description .store-des {
font-size: 30rpx;
color: #292929 !important;
}
.content-wrapper .description .content {
font-size: 30rpx;
color: #757575;
}
.content-wrapper .description .setting {
font-size: 28rpx;
color: #a9aeb2;
display: inline-flex;
justify-content: flex-end;
}
.content-wrapper .video {
width: 100%;
}
.icon-detail {
width: 45rpx;
height: 45rpx;
margin-right: 20rpx;
}
.img-box .store-picture {
display: flex;
flex-grow: 30%;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20rpx;
align-items: flex-start;
overflow: hidden;
}
.img-box .store-picture .store-img {
display: flex;
align-items: center;
margin-bottom: 12rpx;
}
.img-box .store-picture li:empty {
height: 0;
border: none;
}
.img-box .more-image {
position: relative;
}
.img-box .more-image .overlay {
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0rpx;
left: 0rpx;
z-index: 500;
}
.img-box .more-image .overlay-des {
position: absolute;
left: 54rpx;
top: 64rpx;
z-index: 600;
}
.img-box .more-image .check-all {
font-size: 28rpx;
color: #ffffff;
text-align: center;
display: block;
line-height: 50rpx;
}
.img-box .more-image .line-skip {
color: #ffffff;
width: 114rpx;
height: 2rpx;
background-color: #ffffff;
display: block;
}
.img-box .more-image .galleryImage-number {
font-size: 22rpx;
color: #ffffff;
text-align: center;
display: block;
line-height: 48rpx;
}
/* comment panel */
.comment {
margin-top: 60rpx;
}
.comment .c-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.comment .c-header .count {
height: 80rpx;
color: #636972;
font-size: 28rpx;
display: flex;
align-items: center;
}
.comment .c-header .write-btn {
padding: 16rpx;
border-radius: 6rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
}
.comment .c-header .write-btn text {
color: #6D8697;
}
.comment .c-body {
margin-top: 18.10rpx;
}
.comment .c-body .comment-list {
margin-bottom: 50rpx;
display: flex;
}
.comment .c-body .comment-list .logo-icon {
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin-right: 20rpx;
}
.comment .c-body .comment-list .logo-icon image {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
}
.comment .c-body .comment-list .comment-text .t-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6rpx;
width: 560rpx;
}
.comment .c-body .comment-list .comment-text .t-header .name {
font-size: 30rpx;
color: #292929;
font-weight: 500;
}
.comment .c-body .comment-list .comment-text .t-header .time {
font-size: 24rpx;
color: #b1b1b1;
}
.comment .c-body .comment-list .comment-text .t-body .seller-payment {
font-size: 30rpx;
line-height: 1.79;
color: #757575;
display: block;
word-break: break-word;
}
.comment .c-body .comment-list .comment-text .t-body text {
font-size: 26rpx;
color: #a9aeb2;
display: inline-flex;
justify-content: flex-end;
}
.comment .c-footer {
margin-bottom: 74rpx;
}
.comment .c-footer .check-more-comment {
height: 86rpx;
display: flex;
align-items: center;
justify-content: center;
border: 2rpx solid #6D8697;
border-radius: 12rpx;
color: #6D8697;
font-size: 32rpx;
font-weight: 500;
}
.empty-comment-wrapper {
position: relative;
}
.empty-comment-wrapper .add-comment-enter {
height: 280rpx;
text-align: center;
position: absolute;
top: 120rpx;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.empty-comment-wrapper .add-comment-enter text {
display: block;
font-size: 28rpx;
line-height: 1.64;
color: #999999;
}
.empty-comment-wrapper .add-comment-enter .write-btn {
width: 328rpx;
height: 80rpx;
border-radius: 12rpx;
background-color: #6D8697;
border: solid 2rpx #6D8697;
margin: 30rpx auto;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
.comment-img-box .comment-picture {
display: flex;
flex-grow: 30%;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 10rpx;
align-items: flex-start;
overflow: hidden;
}
.comment-img-box .comment-picture .comment-img {
display: flex;
align-items: center;
margin-bottom: 12rpx;
}
.comment-img-box .comment-picture li:empty {
height: 0;
border: none;
}
.comment-img-box .more-image {
position: relative;
}
.comment-img-box .more-image .overlay {
background: rgba(0, 0, 0, 0.8);
position: absolute;
border-radius: 15rpx;
right: 10rpx;
bottom: 20rpx;
z-index: 500;
color: #ffffff;
font-size: 22rpx;
text-align: center;
line-height: 33rpx;
}
.center-align-item {
display: flex;
justify-content: center;
align-items: center;
}
.footer {
text-align: center;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
height: 140rpx;
}
.footer image {
width: 320rpx;
height: 32rpx;
}
.img-carousel .carousel-container {
width: 100vw;
white-space: nowrap;
margin-left: -40rpx;
}
.img-carousel .carousel-container .carousel-item {
display: inline-block;
margin-right: 20rpx;
height: 368rpx;
box-sizing: border-box;
position: relative;
border-radius: 6rpx;
}
.img-carousel .carousel-container .carousel-item:first-child {
margin-left: 40rpx;
}
.img-carousel .carousel-container .carousel-item:last-child {
margin-right: 40rpx;
}
.img-carousel .carousel-container .carousel-item .carousel-image {
width: 654rpx;
height: 368rpx;
border: 2rpx solid #ccc;
box-sizing: border-box;
border-radius: 6rpx;
}
.img-carousel .carousel-container .carousel-item .image-description {
position: absolute;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.32));
width: 654rpx;
height: 140rpx;
line-height: 154rpx;
padding: 0 20rpx;
box-sizing: border-box;
color: #fff;
border-radius: 6rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.img-carousel .carousel-container .carousel-item .image-description text {
color: #fff;
font-size: 28rpx;
font-weight: 500;
text-shadow: rgba(0, 0, 0, 0.5) 0 2rpx 0rpx;
}
.img-carousel .carousel-container .carousel-more {
display: inline-flex;
align-items: center;
height: 368rpx;
vertical-align: text-bottom;
margin: 0 40rpx 0 20rpx;
}
.img-carousel .carousel-container .carousel-more text {
display: inline-block;
color: #636972;
font-size: 28rpx;
border-bottom: 2rpx solid #d8d8d8;
padding-bottom: 6rpx;
}
/* amenities info layout */
.flex-left-layout,
.amenities-info-item,
.amenities-info-item .detail-content-item-view {
display: flex;
align-items: center;
justify-content: flex-start;
}
.amenities-info-item {
flex-wrap: wrap;
}
.amenities-info-item .detail-content-item-view {
height: 80rpx;
padding-right: 24rpx;
}
.amenities-info-item .detail-content-item-view .icon-amenity {
width: 48rpx;
height: 48rpx;
margin-right: 12rpx;
}
.amenities-info-item .detail-content-item-view text {
font-size: 30rpx;
color: #708693;
}
.announcement-bar {
position: fixed;
top: 0;
left: 0;
transform: translateX(0);
line-height: 60rpx;
height: 60rpx;
background: #fff;
font-size: 28rpx !important;
width: 100%;
overflow: hidden;
z-index: 998;
}
.announcement-bar .announcement-icon {
z-index: 1;
flex: 0 0 auto;
background: #fff;
padding: 14rpx 6rpx 14rpx 16rpx;
position: relative;
left: -2rpx;
}
.announcement-bar .announcement-text {
flex: 0 1 auto;
display: inline-block;
white-space: nowrap;
transform: translateX(0);
font-size: 28rpx !important;
}
.announcement-bar .announcement-button {
flex: 0 0 auto;
position: absolute;
top: 0;
right: 0rpx;
background: #fff;
color: #6e8696;
padding: 0rpx 16rpx 0rpx 6rpx;
font-size: 28rpx;
}
/* group buy panel */
.group-buy-panel {
padding: 40rpx 40rpx 0 40rpx;
border-top: 8rpx solid #f6f6f6;
border-bottom: 8rpx solid #f6f6f6;
}
.group-buy-panel .header {
display: flex;
}
.group-buy-panel .header image {
width: 38rpx;
height: 38rpx;
}
.group-buy-panel .header text {
margin-left: 6rpx;
font-size: 32rpx;
font-weight: 500;
}
.group-buy-panel .line {
height: 2rpx;
width: 100%;
background-color: #F6F6F6;
}
.group-buy-panel .link {
width: 100%;
height: 48rpx;
display: flex;
align-items: center;
margin: 28rpx 0;
justify-content: center;
}
.group-buy-panel .link text {
font-size: 28rpx;
color: #797979;
}
.group-buy-panel .link image {
width: 35rpx;
height: 35rpx;
}
.coupon-panel {
padding: 40rpx 40rpx 10rpx 40rpx;
border-top: 8rpx solid #f6f6f6;
}
.coupon-panel .header {
display: flex;
align-items: center;
justify-content: space-between;
}
.coupon-panel .header .title {
display: flex;
}
.coupon-panel .header text.more-coupons {
font-size: 28rpx;
color: #919394;
font-weight: normal;
}
.coupon-panel .header image {
width: 38rpx;
height: 38rpx;
}
.coupon-panel .header text {
margin-left: 6rpx;
font-size: 32rpx;
font-weight: 500;
}
.coupon-panel .coupon-item {
flex: 0 0 auto;
justify-content: center;
border: 2rpx solid #eee;
margin: 30rpx 0rpx;
border-radius: 6rpx;
padding: 0rpx 25rpx;
margin-right: 20rpx;
}
.coupon-panel .coupon-item .header {
height: 80rpx;
justify-content: center;
}
.coupon-panel .coupon-item .header text {
color: #e84c4b;
font-weight: normal;
}
.coupon-panel .coupon-item .header .currency {
font-size: 28rpx;
margin-top: 10rpx;
}
.coupon-panel .coupon-item .header .amount {
font-size: 44rpx;
}
.coupon-panel .coupon-item .line {
height: 2rpx;
border-bottom: 2rpx dashed #ddd;
position: relative;
}
.coupon-panel .coupon-item .line .circle {
width: 16rpx;
height: 16rpx;
display: block;
border: 2rpx solid #fff;
border-radius: 100%;
position: absolute;
background-color: #fff;
}
.coupon-panel .coupon-item .line .left-icon {
left: -38rpx;
bottom: -10rpx;
box-shadow: 2rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.12);
}
.coupon-panel .coupon-item .line .right-icon {
right: -38rpx;
bottom: -10rpx;
box-shadow: -2rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.12);
}
.coupon-panel .coupon-item .condition {
text-align: center;
margin: 10rpx 0rpx;
}
.coupon-panel .coupon-item .condition text {
font-size: 24rpx;
color: #8a8a8a;
}
.shadow-view {
position: absolute;
top: 0;
width: 100%;
height: 100vh;
background-color: #000;
z-index: 999;
opacity: 0.5;
}
.referrals-package-model {
position: absolute;
top: 0;
width: 100%;
height: 100vh;
display: flex;
z-index: 9999;
align-items: center;
justify-content: center;
}
.referrals-package-model .package-panel {
width: 80%;
height: 80%;
background-color: #ffffff;
border-radius: 20rpx;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.referrals-package-model .package-panel .top-panel {
background-color: #d05f55;
text-align: center;
position: relative;
height: 36%;
border-radius: 0 0 50% 50%;
width: 120%;
left: -10%;
padding-top: 14%;
}
.referrals-package-model .package-panel .top-panel .close {
position: absolute;
top: 10%;
right: 13%;
width: 40rpx;
height: 40rpx;
}
.referrals-package-model .package-panel .top-panel text {
margin-top: 20rpx;
display: block;
color: #ffffff;
}
.referrals-package-model .package-panel .content-panel {
text-align: center;
margin-top: 40rpx;
padding: 0 60rpx;
}
.referrals-package-model .package-panel .content-panel text {
display: block;
}
.referrals-package-model .package-panel .content-panel .bonus-price {
font-weight: 500;
font-size: 48rpx;
margin-bottom: 20rpx;
}
.referrals-package-model .package-panel .content-panel .bonus-price text {
display: inline;
font-size: 88rpx;
font-weight: 500;
}
.referrals-package-model .package-panel .content-panel .bonus-price image {
width: 32rpx;
height: 32rpx;
margin-left: 16rpx;
}
.referrals-package-model .package-panel .content-panel .bonus-tip {
color: #999;
font-size: 28rpx;
}
.referrals-package-model .package-panel .content-bottom {
height: 100rpx;
width: 70%;
margin-left: 15%;
border-top: 2rpx solid #e5e5e5;
display: flex;
align-items: center;
justify-content: center;
}
.referrals-package-model .package-panel .content-bottom text {
color: #80909C;
font-size: 28rpx;
}
.referrals-package-model .package-panel .archive-button {
width: 80%;
margin-left: 10%;
margin-bottom: 10%;
height: 80rpx;
background-color: #d05f55;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
}
.referrals-package-model .package-panel .archive-button text {
font-size: 28rpx;
color: #ffffff;
}
.no-srap {
height: 100vh;
overflow: hidden;
}
.phone-selector {
transform: translateY(100%);
-webkit-transform: translateY(100%);
background: #ffffff;
position: fixed;
bottom: 0;
z-index: 999;
left: 0;
width: 100%;
text-align: center;
}
.phone-selector-item-wrapper {
background: #fff;
padding: 20rpx 0;
}
.phone-selector-item {
padding: 16rpx 0;
}
.phone-selector-cancel-btn {
padding: 20rpx 0;
border-top: 8rpx solid #eee;
}
wx.webpackJsonp([17],[],[247]);
\ No newline at end of file
{
"navigationBarTitleText": "幸运大转盘",
"enablePullDownRefresh": false,
"disableScroll": false,
"navigationBarBackgroundColor": "#8D00C3"
}
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<block wx:if="{{isFetched}}">
<view class="luckywheel-page-wrapper theme-simple" style="{{ isTurning ? 'touch-action: none;' : '' }}">
<view
style="height:{{windowHeight}}px;"
class="luckywheel-page-bg">
<image src="{{luckyWheelPageBgUrl}}"></image>
<view
wx:if="{{globalData.isFromSharedLuckyWheel}}"
class="back-to-home"
bindtap="goToHome"
>
<image src="/assets/icons/icon-home.png"></image>
</view>
</view>
<view class="luckywheel-page">
<view class="luckywheel-page-title">
<image src="{{luckyWheelPageTitle}}"></image>
<text>{{ campaign.name }}</text>
</view>
<view class="luckywheel-page-main">
<view class="luckywheel-page-wheel" animation="{{animationData}}" ></view>
<view class="luckywheel-page-main-pointer">
<image wx:if="{{campaign.dailyLimitPerPerson > 0 }}" src="/assets/images/wheel-point.png" bindtap="beginCampagin"></image>
<image wx:else src="/assets/images/wheel-point-invalid.png"></image>
</view>
</view>
<view class="luckywheel-page-footer">
<view wx:if="{{campaign.dailyLimitPerPerson > 0}}" class="luckywheel-page-footer-title">今日还可抽<text>{{campaign.dailyLimitPerPerson}}</text>次</view>
<view wx:else class="luckywheel-page-footer-title">今日抽奖机会已用完</view>
<view class="luckywheel-page-rule">
<view class="luckywheel-page-rule-title">活动规则</view>
<view class="luckywheel-page-rule-content">结束日期 {{campaign.endsAt}}</view>
<view class="luckywheel-page-rule-content">{{campaign.description}}</view>
</view>
</view>
</view>
<view
wx:if="{{!isTurning && isGetLotteryData}}"
class="luckywheel-page-result-wrapper"
style="height:{{windowHeight}}px;"
catchtouchmove="true"
catchtap="clearPreviousResult"
>
<view class="luckywheel-page-result" catchtap="preventClose">
<view class="lucky-page-result-close" bindtap="clearPreviousResult"><image src="{{closeBtn}}"></image></view>
<view class="luckywheel-page-result-top">
<image class="withPrize" wx:if="{{prize}}" src="{{luckyWheelPageResult}}"></image>
<image class="withoutPrize" wx:else src="{{luckyWheelPageResultWithoutPrize}}"></image>
</view>
<view class="luckywheel-page-result-content">
<view class="prize-content">
<block wx:if="{{prize}}">
恭喜获得
<text class="prize-size">{{prize.amount}}</text>
<text class="prize-unit">{{prize.unit}}</text>
<text class="prize-name">{{prize.name}}</text>
<view class="prize-belong-to" wx:if="{{isMember || prize.name === PRIZE_TYPE_COUPON}}">
已为您自动添加到 {{prize.beLong}}
</view>
</block>
<block wx:else>
<text class="without-prize">真遗憾</text>
<view class="prize-belong-to">
只差一点!您就可以拥抱大奖
</view>
</block>
</view>
<view class="prize-operate" wx:if="{{updated}}">
<block wx:if="{{ prize }}">
<block wx:if="{{isMember}}">
<block wx:if="{{prize.name === PRIZE_TYPE_COUPON}}">
<block wx:if="{{campaign.dailyLimitPerPerson === 0}}">
<view class="prize-operate-btn-big" bindtap="goToPrize" data-type="{{prize.name}}">查看奖品</view>
</block>
<block wx:else>
<view class="prize-operate-btn watch-prize" bindtap="goToPrize" data-type="{{prize.name}}">查看奖品</view>
<view class="prize-operate-btn play-again" bindtap="clearPreviousResult">再玩一次</view>
</block>
</block>
<block wx:else>
<block wx:if="{{card.memberStatus === 'actived'}}">
<block wx:if="{{campaign.dailyLimitPerPerson === 0}}">
<view class="prize-operate-btn-big" bindtap="goToPrize" data-type="{{prize.name}}">查看奖品</view>
</block>
<block wx:else>
<view class="prize-operate-btn watch-prize" bindtap="goToPrize" data-type="{{prize.name}}">查看奖品</view>
<view class="prize-operate-btn play-again" bindtap="clearPreviousResult">再玩一次</view>
</block>
</block>
<block wx:else>
<view class="prize-operate-btn-big" bindtap="OnMembership">激活会员卡后立即到账</view>
</block>
</block>
</block>
<block wx:else>
<block wx:if="{{prize.name === PRIZE_TYPE_BONUS || prize.name === PRIZE_TYPE_RECHARGE}}">
<view class="prize-operate-btn-big" bindtap="getCard">领会员卡后立即到账</view>
</block>
<block wx:else>
<block wx:if="{{campaign.dailyLimitPerPerson > 0}}">
<view class="prize-operate-btn watch-prize" bindtap="goToPrize" data-type="{{prize.name}}">查看奖品</view>
<view class="prize-operate-btn play-again" bindtap="clearPreviousResult">再玩一次</view>
</block>
<block wx:else>
<view class="prize-operate-btn-big" bindtap="goToPrize" data-type="{{prize.name}}">查看奖品</view>
</block>
</block>
</block>
</block>
<block wx:else>
<block wx:if="{{campaign.dailyLimitPerPerson > 0}}">
<view class="prize-operate-btn-big" bindtap="clearPreviousResult">再玩一次</view>
</block>
<block wx:if="{{campaign.dailyLimitPerPerson === 0}}">
</block>
</block>
</view>
</view>
</view>
</view>
</view>
</block>
<block wx:else>
<view class="loading-wrapper">
<view
class="flex-row flex-col center-align-item"
style="height: 100vh;">
<!-- <view class="loader"/> -->
<image src="/assets/icons/I-am-loading.gif" mode="aspectFill" style="width:140px; height:140px;"/>
</view>
</view>
</block>
</button>
</form>
.applet-version {
width: 100%;
height: 50rpx;
font-size: 24rpx;
color: #c6c9cd;
padding: 40rpx 0 60rpx 0;
display: flex;
align-items: center;
justify-content: center;
}
.center-item {
display: flex;
align-items: center;
justify-content: center;
}
.center-align-item {
display: flex;
justify-content: center;
align-items: center;
}
.luckywheel-page-wrapper {
width: 100%;
height: auto;
overflow-x: hidden;
background: linear-gradient(#8023bb, #3f0e52);
}
.loading-wrapper {
width: 100%;
height: auto;
overflow-x: hidden;
background-color: #fff;
}
.theme-simple .luckywheel-page-bg {
position: fixed;
left: 0;
top: 0;
z-index: 0;
width: 100%;
color: #8023bb;
}
.theme-simple .luckywheel-page-bg image {
width: 100%;
height: 100%;
}
.theme-simple .luckywheel-page-bg .back-to-home {
position: absolute;
left: 40rpx;
top: 80rpx;
z-index: 1001;
width: 80rpx;
height: 80rpx;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 2rpx 8rpx #d8d8d8;
}
.theme-simple .luckywheel-page-bg .back-to-home image {
width: 100%;
height: 100%;
}
.theme-simple .luckywheel-page {
display: flex;
width: 100%;
height: auto;
flex-direction: column;
align-items: center;
}
.theme-simple .luckywheel-page-title {
position: relative;
width: 483rpx;
height: 319rpx;
margin-top: 34rpx;
text-align: center;
}
.theme-simple .luckywheel-page-title image {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.theme-simple .luckywheel-page-title text {
position: absolute;
left: 0;
right: 0;
bottom: 12rpx;
width: 100%;
height: auto;
line-height: 56rpx;
font-size: 36rpx;
color: #fff;
font-weight: bold;
}
.theme-simple .luckywheel-page-main {
position: relative;
width: 616rpx;
height: 616rpx;
margin-top: 24rpx;
}
.theme-simple .luckywheel-page-wheel {
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg width='616' height='616' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3CradialGradient fx='50%25' fy='50%25' r='58.391%25' id='c'%3E%3Cstop stop-color='%23BA77FF' offset='0%25'/%3E%3Cstop stop-color='%236614C2' offset='100%25'/%3E%3C/radialGradient%3E%3Ccircle id='b' cx='278' cy='278' r='278'/%3E%3Cfilter x='-8.1%25' y='-8.1%25' width='116.2%25' height='116.2%25' filterUnits='objectBoundingBox' id='a'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur stdDeviation='15' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 0.239928784 0 0 0 0 0.0218637755 0 0 0 0 0.0218637755 0 0 0 0.5 0' in='shadowBlurOuter1'/%3E%3C/filter%3E%3ClinearGradient x1='53.471%25' y1='-6.202%25' x2='50%25' y2='96.476%25' id='d'%3E%3Cstop stop-color='%236C26E0' offset='0%25'/%3E%3Cstop stop-color='%237D30AE' offset='100%25'/%3E%3C/linearGradient%3E%3Cpath d='M380.808 20.119L278.177 264 177 20.344c67.922-28.065 140.803-26.097 203.808-.225z' id='e'/%3E%3Cfilter x='-6.1%25' y='-4.7%25' width='112.3%25' height='109.5%25' filterUnits='objectBoundingBox' id='f'%3E%3CfeGaussianBlur stdDeviation='10.5' in='SourceAlpha' result='shadowBlurInner1'/%3E%3CfeOffset dy='-4' in='shadowBlurInner1' result='shadowOffsetInner1'/%3E%3CfeComposite in='shadowOffsetInner1' in2='SourceAlpha' operator='arithmetic' k2='-1' k3='1' result='shadowInnerInner1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0' in='shadowInnerInner1'/%3E%3C/filter%3E%3Cpath d='M525.808 165.119L423.177 409 322 165.344c67.922-28.065 140.803-26.097 203.808-.225z' id='g'/%3E%3Cfilter x='-6.1%25' y='-4.7%25' width='112.3%25' height='109.5%25' filterUnits='objectBoundingBox' id='h'%3E%3CfeGaussianBlur stdDeviation='10.5' in='SourceAlpha' result='shadowBlurInner1'/%3E%3CfeOffset dy='-4' in='shadowBlurInner1' result='shadowOffsetInner1'/%3E%3CfeComposite in='shadowOffsetInner1' in2='SourceAlpha' operator='arithmetic' k2='-1' k3='1' result='shadowInnerInner1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0' in='shadowInnerInner1'/%3E%3C/filter%3E%3Cpath d='M380.808 312.119L278.177 556 177 312.344c67.922-28.065 140.803-26.097 203.808-.225z' id='i'/%3E%3Cfilter x='-6.1%25' y='-4.7%25' width='112.3%25' height='109.5%25' filterUnits='objectBoundingBox' id='j'%3E%3CfeGaussianBlur stdDeviation='10.5' in='SourceAlpha' result='shadowBlurInner1'/%3E%3CfeOffset dy='-4' in='shadowBlurInner1' result='shadowOffsetInner1'/%3E%3CfeComposite in='shadowOffsetInner1' in2='SourceAlpha' operator='arithmetic' k2='-1' k3='1' result='shadowInnerInner1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0' in='shadowInnerInner1'/%3E%3C/filter%3E%3Cpath d='M234.808 165.119L132.177 409 31 165.344c67.922-28.065 140.803-26.097 203.808-.225z' id='k'/%3E%3Cfilter x='-6.1%25' y='-4.7%25' width='112.3%25' height='109.5%25' filterUnits='objectBoundingBox' id='l'%3E%3CfeGaussianBlur stdDeviation='10.5' in='SourceAlpha' result='shadowBlurInner1'/%3E%3CfeOffset dy='-4' in='shadowBlurInner1' result='shadowOffsetInner1'/%3E%3CfeComposite in='shadowOffsetInner1' in2='SourceAlpha' operator='arithmetic' k2='-1' k3='1' result='shadowInnerInner1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0' in='shadowInnerInner1'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(30 30)'%3E%3Cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3E%3Cuse fill='url(%23c)' xlink:href='%23b'/%3E%3C/g%3E%3Cg transform='translate(30 30)'%3E%3Cuse fill='url(%23d)' xlink:href='%23e'/%3E%3Cuse fill='%23000' filter='url(%23f)' xlink:href='%23e'/%3E%3C/g%3E%3Cg transform='rotate(90 423.904 307)'%3E%3Cuse fill='url(%23d)' xlink:href='%23g'/%3E%3Cuse fill='%23000' filter='url(%23h)' xlink:href='%23g'/%3E%3C/g%3E%3Cg transform='rotate(-180 293.904 439)'%3E%3Cuse fill='url(%23d)' xlink:href='%23i'/%3E%3Cuse fill='%23000' filter='url(%23j)' xlink:href='%23i'/%3E%3C/g%3E%3Cg transform='rotate(-90 162.904 277)'%3E%3Cuse fill='url(%23d)' xlink:href='%23k'/%3E%3Cuse fill='%23000' filter='url(%23l)' xlink:href='%23k'/%3E%3C/g%3E%3Cg fill-rule='nonzero'%3E%3Cpath d='M151.2 173.03l22.063-22.061c3.48-3.481 9.092-3.515 12.532-.075l17.65 17.65c3.44 3.44 3.407 9.052-.074 12.533l-22.062 22.062c-3.481 3.481-9.093 3.514-12.533.074l-17.65-17.65c-3.44-3.44-3.407-9.051.075-12.532z' fill='%23FFC937'/%3E%3Cpath d='M168.924 178.148l9.456-9.456 18.688 18.688-9.456 9.456-18.688-18.688zm-9.861-21.285s-1.416-14.417 1.137-15.673c0 0 1.468-5.491 15.635 5.13l1.038 1.038-5.253 5.253s-6.575-8.349-8.33-4.128l-.05 8.355-.024 4.178-4.153-4.153zm-2.3 2.393l4.106 4.106-4.154.048-8.309.096c-4.207 1.769 4.058 8.26 4.058 8.26l-5.252 5.254-1.027-1.027c-10.482-14.027-5.013-15.518-5.013-15.518 1.263-2.546 15.59-1.22 15.59-1.22z' fill='%23F8AD17'/%3E%3Cpath d='M176.94 147.292c3.19-3.191 8.335-3.222 11.488-.069 3.154 3.154 3.123 8.298-.068 11.489l-29.416 29.416c-3.19 3.19-8.335 3.222-11.488.068-3.154-3.153-3.123-8.297.068-11.488l29.416-29.416z' fill='%23F6E867'/%3E%3Cpath d='M166.93 157.3l.03-.028 11.42 11.42-9.456 9.456-11.42-11.42.029-.03c-2.075-2.597-1.888-6.418.546-8.851 2.433-2.434 6.254-2.62 8.851-.546z' fill='%23FFC937'/%3E%3C/g%3E%3Cg fill-rule='nonzero'%3E%3Cpath d='M443.47 151.7l22.061 22.063c3.481 3.48 3.515 9.092.075 12.532l-17.65 17.65c-3.44 3.44-9.052 3.407-12.533-.074l-22.062-22.062c-3.481-3.481-3.514-9.093-.074-12.533l17.65-17.65c3.44-3.44 9.051-3.407 12.532.075z' fill='%23FFC937'/%3E%3Cpath d='M438.352 169.424l9.456 9.456-18.688 18.688-9.456-9.456 18.688-18.688zm21.285-9.861s14.417-1.416 15.673 1.137c0 0 5.491 1.468-5.13 15.635l-1.038 1.038-5.253-5.253s8.349-6.575 4.128-8.33l-8.355-.05-4.178-.024 4.153-4.153zm-2.393-2.3l-4.106 4.106-.048-4.154-.096-8.309c-1.769-4.207-8.26 4.058-8.26 4.058l-5.254-5.252 1.027-1.027c14.027-10.482 15.518-5.013 15.518-5.013 2.546 1.263 1.22 15.59 1.22 15.59z' fill='%23F8AD17'/%3E%3Cpath d='M469.208 177.44c3.191 3.19 3.222 8.335.069 11.488-3.154 3.154-8.298 3.123-11.489-.068l-29.416-29.416c-3.19-3.19-3.222-8.335-.068-11.488 3.153-3.154 8.297-3.123 11.488.068l29.416 29.416z' fill='%23F6E867'/%3E%3Cpath d='M459.2 167.43l.028.03-11.42 11.42-9.456-9.456 11.42-11.42.03.029c2.597-2.075 6.418-1.888 8.851.546 2.434 2.433 2.62 6.254.546 8.851z' fill='%23FFC937'/%3E%3C/g%3E%3Cg fill-rule='nonzero'%3E%3Cpath d='M151.2 442.97l22.063 22.061c3.48 3.481 9.092 3.515 12.532.075l17.65-17.65c3.44-3.44 3.407-9.052-.074-12.533l-22.062-22.062c-3.481-3.481-9.093-3.514-12.533-.074l-17.65 17.65c-3.44 3.44-3.407 9.051.075 12.532z' fill='%23FFC937'/%3E%3Cpath d='M168.924 437.852l9.456 9.456 18.688-18.688-9.456-9.456-18.688 18.688zm-9.861 21.285s-1.416 14.417 1.137 15.673c0 0 1.468 5.491 15.635-5.13l1.038-1.038-5.253-5.253s-6.575 8.349-8.33 4.128l-.05-8.355-.024-4.178-4.153 4.153zm-2.3-2.393l4.106-4.106-4.154-.048-8.309-.096c-4.207-1.769 4.058-8.26 4.058-8.26l-5.252-5.254-1.027 1.027c-10.482 14.027-5.013 15.518-5.013 15.518 1.263 2.546 15.59 1.22 15.59 1.22z' fill='%23F8AD17'/%3E%3Cpath d='M176.94 468.708c3.19 3.191 8.335 3.222 11.488.069 3.154-3.154 3.123-8.298-.068-11.489l-29.416-29.416c-3.19-3.19-8.335-3.222-11.488-.068-3.154 3.153-3.123 8.297.068 11.488l29.416 29.416z' fill='%23F6E867'/%3E%3Cpath d='M166.93 458.7l.03.028 11.42-11.42-9.456-9.456-11.42 11.42.029.03c-2.075 2.597-1.888 6.418.546 8.851 2.433 2.434 6.254 2.62 8.851.546z' fill='%23FFC937'/%3E%3C/g%3E%3Cg fill-rule='nonzero'%3E%3Cpath d='M443.47 464.3l22.061-22.063c3.481-3.48 3.515-9.092.075-12.532l-17.65-17.65c-3.44-3.44-9.052-3.407-12.533.074l-22.062 22.062c-3.481 3.481-3.514 9.093-.074 12.533l17.65 17.65c3.44 3.44 9.051 3.407 12.532-.075z' fill='%23FFC937'/%3E%3Cpath d='M438.352 446.576l9.456-9.456-18.688-18.688-9.456 9.456 18.688 18.688zm21.285 9.861s14.417 1.416 15.673-1.137c0 0 5.491-1.468-5.13-15.635l-1.038-1.038-5.253 5.253s8.349 6.575 4.128 8.33l-8.355.05-4.178.024 4.153 4.153zm-2.393 2.3l-4.106-4.106-.048 4.154-.096 8.309c-1.769 4.207-8.26-4.058-8.26-4.058l-5.254 5.252 1.027 1.027c14.027 10.482 15.518 5.013 15.518 5.013 2.546-1.263 1.22-15.59 1.22-15.59z' fill='%23F8AD17'/%3E%3Cpath d='M469.208 438.56c3.191-3.19 3.222-8.335.069-11.488-3.154-3.154-8.298-3.123-11.489.068l-29.416 29.416c-3.19 3.19-3.222 8.335-.068 11.488 3.153 3.154 8.297 3.123 11.488-.068l29.416-29.416z' fill='%23F6E867'/%3E%3Cpath d='M459.2 448.57l.028-.03-11.42-11.42-9.456 9.456 11.42 11.42.03-.029c2.597 2.075 6.418 1.888 8.851-.546 2.434-2.433 2.62-6.254.546-8.851z' fill='%23FFC937'/%3E%3C/g%3E%3Cg fill-rule='nonzero'%3E%3Cpath d='M87.375 322.338V290.61c0-5.006 3.944-9.066 8.81-9.066h24.96c4.865 0 8.81 4.06 8.81 9.066v31.73c0 5.006-3.945 9.065-8.81 9.065h-24.96c-4.866 0-8.81-4.06-8.81-9.066z' fill='%23E33A13'/%3E%3Cpath d='M103.526 313.273v-13.599h26.429v13.599h-26.43zm-22.024-8.215s-11.196-9.349-10.278-12.087c0 0-2.845-5.005 14.683-7.555h1.468v7.555s-10.553-1.275-8.81 3.022l5.873 6.044 2.937 3.021h-5.873zm.066 3.375h5.807l-2.904 3.022-5.807 6.044c-1.724 4.296 8.711 3.022 8.711 3.022v7.554h-1.452c-17.33-2.55-14.518-7.554-14.518-7.554-.907-2.739 10.163-12.088 10.163-12.088z' fill='%23FFB400'/%3E%3Cpath d='M87.375 327.627V285.32c0-4.59 3.615-8.31 8.075-8.31 4.46 0 8.076 3.72 8.076 8.31v42.306c0 4.588-3.616 8.31-8.076 8.31-4.46 0-8.075-3.722-8.075-8.31z' fill='%23FF5831'/%3E%3Cpath d='M87.375 299.716v-.042h16.15v13.599h-16.15v-.042c-3.304-.375-5.873-3.258-5.873-6.757 0-3.5 2.57-6.382 5.873-6.758z' fill='%23FFC937'/%3E%3C/g%3E%3Cg fill-rule='nonzero'%3E%3Cpath d='M529.625 291.662v31.729c0 5.006-3.944 9.066-8.81 9.066h-24.96c-4.865 0-8.81-4.06-8.81-9.066v-31.73c0-5.006 3.945-9.065 8.81-9.065h24.96c4.866 0 8.81 4.06 8.81 9.066z' fill='%23E33A13'/%3E%3Cpath d='M513.474 300.727v13.599h-26.429v-13.599h26.43zm22.024 8.215s11.196 9.349 10.278 12.087c0 0 2.845 5.005-14.683 7.555h-1.468v-7.555s10.553 1.275 8.81-3.022l-5.873-6.044-2.937-3.021h5.873zm-.066-3.375h-5.807l2.904-3.022 5.807-6.044c1.724-4.296-8.711-3.022-8.711-3.022v-7.554h1.452c17.33 2.55 14.518 7.554 14.518 7.554.907 2.739-10.163 12.088-10.163 12.088z' fill='%23FFB400'/%3E%3Cpath d='M529.625 286.373v42.306c0 4.59-3.615 8.31-8.075 8.31-4.46 0-8.076-3.72-8.076-8.31v-42.306c0-4.588 3.616-8.31 8.076-8.31 4.46 0 8.075 3.722 8.075 8.31z' fill='%23FF5831'/%3E%3Cpath d='M529.625 314.284v.042h-16.15v-13.599h16.15v.042c3.304.375 5.873 3.258 5.873 6.757 0 3.5-2.57 6.382-5.873 6.758z' fill='%23FFC937'/%3E%3C/g%3E%3Cg fill-rule='nonzero'%3E%3Cpath d='M293.662 518.625h31.729c5.006 0 9.066-3.944 9.066-8.81v-24.96c0-4.865-4.06-8.81-9.066-8.81h-31.73c-5.006 0-9.065 3.945-9.065 8.81v24.96c0 4.866 4.06 8.81 9.066 8.81z' fill='%23E33A13'/%3E%3Cpath d='M302.727 502.474h13.599v-26.429h-13.599v26.43zm8.215 22.024s9.349 11.196 12.087 10.278c0 0 5.005 2.845 7.555-14.683v-1.468h-7.555s1.275 10.553-3.022 8.81l-6.044-5.873-3.021-2.937v5.873zm-3.375-.066v-5.807l-3.022 2.904-6.044 5.807c-4.296 1.724-3.022-8.711-3.022-8.711h-7.554v1.452c2.55 17.33 7.554 14.518 7.554 14.518 2.739.907 12.088-10.163 12.088-10.163z' fill='%23FFB400'/%3E%3Cpath d='M288.373 518.625h42.306c4.59 0 8.31-3.615 8.31-8.075 0-4.46-3.72-8.076-8.31-8.076h-42.306c-4.588 0-8.31 3.616-8.31 8.076 0 4.46 3.722 8.075 8.31 8.075z' fill='%23FF5831'/%3E%3Cpath d='M316.284 518.625h.042v-16.15h-13.599v16.15h.042c.375 3.304 3.258 5.873 6.757 5.873 3.5 0 6.382-2.57 6.758-5.873z' fill='%23FFC937'/%3E%3C/g%3E%3Cg fill-rule='nonzero'%3E%3Cpath d='M293.417 86.375h31.2c4.924 0 8.915 3.944 8.915 8.81v24.96c0 4.865-3.991 8.81-8.914 8.81h-31.2c-4.924 0-8.915-3.945-8.915-8.81v-24.96c0-4.866 3.991-8.81 8.914-8.81z' fill='%23E33A13'/%3E%3Cpath d='M302.332 102.526h13.372v26.429h-13.372v-26.43zm8.077-22.024s9.193-11.196 11.886-10.278c0 0 4.922-2.845 7.429 14.683v1.468h-7.429s1.254-10.553-2.971-8.81l-5.943 5.873-2.972 2.937v-5.873zm-3.318.066v5.807l-2.972-2.904-5.943-5.807c-4.225-1.724-2.971 8.711-2.971 8.711h-7.429v-1.452c2.507-17.33 7.429-14.518 7.429-14.518 2.693-.907 11.886 10.163 11.886 10.163z' fill='%23FFB400'/%3E%3Cpath d='M288.217 86.375h41.601c4.512 0 8.172 3.615 8.172 8.075 0 4.46-3.66 8.076-8.172 8.076h-41.6c-4.513 0-8.172-3.616-8.172-8.076 0-4.46 3.659-8.075 8.171-8.075z' fill='%23FF5831'/%3E%3Cpath d='M315.663 86.375h.04v16.15h-13.371v-16.15h.04c.37-3.304 3.204-5.873 6.646-5.873 3.441 0 6.275 2.57 6.645 5.873z' fill='%23FFC937'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-position: 0 0;
background-size: cover;
background-repeat: no-repeat;
}
.theme-simple .luckywheel-page-main-pointer {
position: absolute;
width: 218rpx;
height: 252rpx;
left: 50%;
top: 160rpx;
margin-left: -109rpx;
}
.theme-simple .luckywheel-page-main-pointer image {
width: 100%;
height: 100%;
}
.theme-simple .luckywheel-page-footer {
position: relative;
width: 100%;
height: auto;
margin-top: 20rpx;
padding-bottom: 20rpx;
}
.theme-simple .luckywheel-page-footer-title {
width: 100%;
height: auto;
text-align: center;
line-height: 56rpx;
font-size: 40rpx;
color: #fff;
font-weight: bold;
}
.theme-simple .luckywheel-page-footer-title text {
padding: 0 17rpx;
font-size: 48rpx;
color: #f5c852;
}
.theme-simple .luckywheel-page-rule {
display: flex;
width: 100%;
height: auto;
margin-top: 40rpx;
flex-direction: column;
align-items: center;
}
.theme-simple .luckywheel-page-rule-title {
text-align: center;
font-size: 26rpx;
color: #fff;
margin-bottom: 10rpx;
}
.theme-simple .luckywheel-page-rule-content {
width: 520rpx;
height: auto;
text-align: center;
font-size: 26rpx;
color: #d1c6d6;
line-height: 36rpx;
}
.theme-simple .luckywheel-page-result-wrapper {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.4);
}
.theme-simple .luckywheel-page-result {
position: relative;
width: 602rpx;
height: 610rpx;
background-color: #fff;
border-radius: 24rpx;
overflow: hidden;
}
.theme-simple .lucky-page-result-close {
position: absolute;
top: 0;
right: 0;
width: 100rpx;
height: 100rpx;
}
.theme-simple .lucky-page-result-close image {
position: absolute;
top: 12rpx;
right: 32rpx;
width: 46rpx;
height: 46rpx;
}
.theme-simple .luckywheel-page-result-top {
width: 100%;
height: auto;
}
.theme-simple .luckywheel-page-result-top .withoutPrize {
width: 100%;
height: 230rpx;
}
.theme-simple .luckywheel-page-result-top .withPrize {
width: 100%;
height: 256rpx;
}
.theme-simple .luckywheel-page-result-content {
width: 100%;
height: auto;
}
.theme-simple .prize-content {
text-align: center;
font-size: 32rpx;
color: #000;
}
.theme-simple .without-prize {
color: #000;
font-size: 60rpx;
font-weight: bold;
}
.theme-simple .prize-size {
color: #ed6341;
font-size: 80rpx;
font-weight: bold;
}
.theme-simple .prize-unit {
color: #ed6341;
font-size: 32rpx;
padding-right: 10rpx;
}
.theme-simple .prize-unit {
color: #000;
font-size: 32rpx;
}
.theme-simple .prize-belong-to {
margin-top: 24rpx;
text-align: center;
color: #000;
font-size: 24rpx;
}
.theme-simple .prize-operate {
width: 490rpx;
height: 90rpx;
padding: 0 56rpx;
margin-top: 54rpx;
}
.theme-simple .prize-operate-btn {
text-align: center;
line-height: 90rpx;
border-radius: 6rpx;
font-size: 38rpx;
width: 232rpx;
height: 100%;
background-color: #fff;
}
.theme-simple .prize-operate-btn-big {
text-align: center;
line-height: 90rpx;
border-radius: 6rpx;
font-size: 38rpx;
width: 402rpx;
height: 100%;
background-color: #6c34c5;
margin: 0 auto;
color: #fff;
}
.theme-simple .watch-prize {
float: left;
height: 84rpx;
width: 228rpx;
line-height: 84rpx;
border: 4rpx solid #572576;
color: #572576;
}
.theme-simple .play-again {
float: right;
color: #fff;
background-color: #6c34c5;
}
wx.webpackJsonp([18],[],[248]);
\ No newline at end of file
{
"navigationBarTitleText": "会员卡"
}
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="become-member-wrapper">
<view class="member-box">
<block wx:if="{{autoActivate || (wxActivate && card.memberStatus === 'actived')}}">
<image src="{{iconPath.iconDiamond}}" mode="aspectFill" style="width: 100px; height: 100px;"></image>
<text class="title">恭喜成为会员</text>
<text wx:if="{{couponList.length > 0}}" class="content">初次见面,送你{{couponList.length}}张优惠券</text>
<block wx:if="{{couponList.length > 0}}">
<view class="navigator-btn" bindtap="navigateToCoupon" style="{{'background-color:' + backgroundColor}}">
<text style="{{'color:' + textColor}}">查看优惠券</text>
</view>
</block>
<block wx:if="{{couponList.length === 0}}">
<view class="navigator-btn" bindtap="navigateToIndex" style="{{'background-color:' + backgroundColor}}">
<text style="{{'color:' + textColor}}">返回首页</text>
</view>
</block>
</block>
<block wx:else>
<image src="{{iconPath.iconMembershipCard}}" mode="aspectFill" style="width: 100px; height: 80px;"></image>
<text class="title">仅剩一步,激活会员卡</text>
<text class="content">激活后可享受会员权益</text>
<view class="navigator-btn" bindtap="openMembershipCard" style="{{'background-color:' + backgroundColor}}">
<text style="{{'color:' + textColor}}">激活会员卡</text>
</view>
</block>
</view>
</view>
</button>
</form>
.like-btn {
z-index: 997;
}
.become-member-wrapper {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
}
.become-member-wrapper .member-box {
width: 100%;
padding: 60rpx;
text-align: center;
}
.become-member-wrapper .member-box text {
display: block;
}
.become-member-wrapper .member-box .title {
font-size: 38rpx;
color: #222222;
margin-top: 38rpx;
}
.become-member-wrapper .member-box .content {
font-size: 28rpx;
color: #666666;
margin-top: 14rpx;
}
.become-member-wrapper .member-box .navigator-btn {
width: 580rpx;
height: 86rpx;
display: inline-block;
border-radius: 6rpx;
font-size: 28rpx;
line-height: 86rpx;
font-weight: 500;
margin-top: 60rpx;
}
wx.webpackJsonp([19],[],[249]);
\ No newline at end of file
{
"navigationBarTitleText": "我的"
}
\ No newline at end of file
<import src="../../utils/template/showError.wxml" />
<!-- <import src="../../../../src/components/signInBtn/signInBtn.wxml" /> is not working, this can be fixed after showcase is refactored to the mix, now just copy the signInBtn template over. -->
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<template name="signInBtn">
<view class="sign-in-btn flex-row" bindtap="{{componentName + '.onSignIn'}}" style="border-radius:80px; border:solid 1px {{textColor}}; padding:4px 10px; font-size:12px; color:{{textColor}}; margin-top: 5px; width: fit-content;">
<image src="/assets/icons/ic-checkin{{textColor === '#ffffff' ? '-white' : ''}}.png" style="width: 32rpx; height: 32rpx; margin-right: 2px;" />
{{isSignedIn ? '已签到' : '每日签到'}}
</view>
</template>
<view class="more flex-col gray-bg">
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<view class="user-info" style="background-color: {{bgColor}}">
<block wx:if="{{globalData.userInfo}}">
<image class="avatar" src="{{globalData.userInfo && globalData.userInfo.avatarUrl}}" />
<view>
<text style="color: {{textColor}};">{{globalData.userInfo ? globalData.userInfo.nickName : ' '}}</text>
<template wx:if="{{isMemberCardEnabled && enableCheckIn}}" is="signInBtn" data="{{ ...components['signInBtn']['0'], componentName: 'components.signInBtn.0', textColor }}"></template>
</view>
</block>
<block wx:if="{{!globalData.userInfo}}">
<button class="get-userInfo-button" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
<image src="{{iconPath.wechatIcon}}" />
微信登录
</button>
</block>
</view>
<view class="links">
<view class="flex-row link-item" style="margin-bottom: 42rpx" wx:if="{{userHasMemberCard && isMemberCardEnabled}}">
<view class="membership-text">
<view class="membership-title">
<text class="title">我的{{cardData.title || '尊享会员卡'}}</text>
</view>
<view class="membership-description">
<view wx:if="{{enableMemberRanking && memberRanking}}" class="membership-ranking" catchtap="navigateToRanking">
<image src="/assets/icons/icon-mine-level.png" style="width: 32rpx; height: 32rpx; background: {{memberRanking.color || bgColor}}" />
<text style="margin-left: 7px; font-size: 14px; color: {{memberRanking.color || bgColor}}">{{memberRanking.name}}</text>
</view>
<view wx:if="{{enableMemberRanking && memberRanking}}" style="border-right:1px solid #ececec; height:32rpx;"></view>
<text catchtap="navigateToPoints" class="membership-points" style="padding-left: {{enableMemberRanking && memberRanking ? '18rpx' : '0'}}">积分{{points || 0}}</text>
</view>
</view>
<view class="flex-row normal-flex center" bindtap="viewMyCards" style="padding-bottom:20rpx;">
<view class="membership-card">
<image class="background-img" src="{{cardData.backgroundUrl}}" style="{{cardData.backgroudColor && 'background: ' + cardData.backgroudColor }}" mode="aspectFill" />
<image class="brand-logo" src="{{cardData.logoUrl}}" mode="aspectFill" />
<view class="card-des">
<text class="title">{{cardData.brandName || '手工商品'}}</text>
<text class="sub-title">{{cardData.title || '会员卡'}}</text>
</view>
<image class="qr" src="/assets/icons/qr-code-white.png" mode="aspectFill" />
<text class="card-number">{{cardData.cardCode || '2748 3228 8776'}}</text>
</view>
</view>
</view>
<view style="height: 96px; margin-bottom: 42rpx" class="flex-row link-item space-between" wx:if="{{userHasMemberCard || (isMemberCardEnabled && isRechargeEnabled)}}">
<view class="flex-col">
<block wx:if="{{globalData.userInfo}}">
<view>
<text style="font-size: 20px;">{{balance}}</text>
</view>
</block>
<block wx:if="{{!globalData.userInfo}}">
<view>
<text style="font-size: 20px;">--</text>
</view>
</block>
<text>账户余额</text>
</view>
<view class="flex-col flex-end">
<view>
<button class="charge-btn" open-type="getUserInfo" bindgetuserinfo="navigateToRecharge" wx:if="{{(userHasMemberCard || isMemberCardEnabled) && isRechargeEnabled && enabledWechatPay}}">
充值
</button>
</view>
<view wx:if="{{maxDiscount && (userHasMemberCard || isMemberCardEnabled) && isRechargeEnabled && enabledWechatPay}}" class="charge-tip flex-row">
<image src="/assets/icons/icon-pre-paid.png" />
<text style="color: #ff9800;">充值最高赠送{{maxDiscount}}元</text>
</view>
</view>
</view>
<view class="flex-row link-item space-between" wx:if="{{inviteConfig}}" bindtap="navigateToReferrals">
<view class="flex-col userInfo-referrals-container">
<text>邀请有利计划 <text class="icon"></text></text>
<view class="userInfo-referrals-tip">
<text>推荐立获</text>
<text class="userInfo-referrals-rebateText"> {{inviteConfig.rebate}}% </text>
<text>返利!</text>
</view>
</view>
<view class="flex-col flex-end userInfo-referrals-container">
<image class="userInfo-referrals-sectionIcon" src="/assets/icons/invalid-name.png" />
</view>
</view>
<view style="margin-top: 42rpx; padding:0 40rpx; background:#fff; width: calc(100vw - 80rpx)">
<view class="flex-row link-item link-item-small" wx:for="{{linkItems}}" bindtap="{{item.bindtap}}" wx:key="{{item}}">
<view class="text">
<image src="{{item.iconPath}}" style="width: 25px; height: 25px; margin-right: 7px;" />
<text class="item-text">{{item.text}}</text>
</view>
<view class="flex-row normal-flex center">
<text wx:if="{{item.title}}" class="item-tip">{{item.title != 0 ? item.title + '张可用' : ''}}</text>
<text wx:if="{{item.tip}}" class="{{item.className}}">{{item.tip}}</text>
<view class="icon"></view>
</view>
</view>
<button open-type="contact" class="flex-row link-item link-item-small main-button" wx:if="{{enableCustomerService}}" style="height: auto; line-height: 0; background: none;" bindtap="showWeptTip">
<view class="text">
<image src="/assets/icons/icon-chat.png" style="width: 25px; height: 25px; margin-right: 7px;" />
<text class="item-text">在线客服</text>
</view>
<view class="flex-row normal-flex center" style="margin-right: 2px;">
<view class="icon"></view>
</view>
</button>
</view>
<image class="logo" bindtap="navigateToSxl" src="/assets/icons/sxl-logo.png" style="logo" mode="widthFix" />
</view>
</view>
</button>
</form>
.like-btn {
z-index: 997;
}
page {
background-color: #f7f7f7;
}
.more {
align-items: center;
padding: 60rpx;
box-sizing: border-box;
padding-top: 0;
}
.get-userInfo-button {
width: 45%;
display: flex;
margin: 0 auto;
color: #ffffff;
border-radius: 46rpx;
align-items: center;
justify-content: center;
background-color: #04AE69;
position: relative;
top: 60rpx;
margin-bottom: 140rpx;
}
.get-userInfo-button image {
width: 60rpx;
height: 56rpx;
margin-right: 10rpx;
}
.user-info {
width: 100vw;
height: 240rpx;
display: flex;
align-items: center;
}
.user-info .avatar {
width: 108rpx;
height: 108rpx;
border-radius: 50%;
box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.12);
margin: 0 30rpx 0 60rpx;
}
.user-info text {
font-size: 40rpx;
font-weight: 500;
}
.user-info .my-record-list {
display: flex;
align-items: center;
justify-content: space-around;
padding: 30rpx 0 36rpx 0;
width: 100%;
}
.user-info .my-record-list .record-box text {
display: block;
text-align: center;
}
.user-info .my-record-list .record-box text:first-child {
font-size: 32rpx;
font-weight: 500;
}
.user-info .my-record-list .record-box text:last-child {
font-size: 24rpx;
font-weight: 300;
padding-top: 12rpx;
}
.charge-btn {
height: 60rpx;
min-width: 120rpx;
color: #6d8697;
line-height: 60rpx;
border-radius: 8rpx;
border: solid 2rpx #6e8696;
font-size: 28rpx;
background-color: #ffffff;
}
.charge-btn::after {
border: none;
}
.charge-tip {
margin-top: 10rpx;
}
.charge-tip image {
margin-right: 8rpx;
color: #ff9800;
width: 32rpx;
height: 32rpx;
}
.logo {
width: 300rpx;
margin: 62rpx auto;
display: block;
}
.links .link-item {
width: 100vw;
box-sizing: border-box;
padding: 26rpx 40rpx 0;
background: #fff;
align-items: top;
}
.links .link-item text {
line-height: 60rpx;
}
.links .link-item text {
color: #292929;
font-size: 28rpx;
}
.links .link-item .normal-flex {
text-align: right;
align-items: center;
justify-content: flex-end;
}
.links .link-item .item-tip {
font-size: 28rpx;
color: #8a8a8a;
}
.links .link-item .item-text {
font-size: 28rpx;
color: #3a3a3a;
}
.links .link-item .icon {
width: 20rpx;
height: 20rpx;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border: solid 2rpx #979797;
border-width: 2rpx 2rpx 0 0;
display: inline-block;
}
.links .link-item .location {
flex: 0 0 420rpx;
text-align: right;
line-height: 1.5;
margin: 14rpx 0;
}
.links .link-item .membership-text .membership-title {
line-height: 53rpx;
margin-top: 10rpx;
display: inline-flex;
align-items: center;
}
.links .link-item .membership-text .membership-title .title {
font-size: 38rpx;
color: #3a3a3a;
font-weight: 500;
margin-right: 16rpx;
}
.links .link-item .membership-text .membership-title .card-link {
width: 36rpx;
height: 36rpx;
margin-right: 20rpx;
}
.links .link-item .membership-text .membership-description {
line-height: 40rpx;
display: flex;
align-items: center;
}
.links .link-item .membership-text .membership-description .membership-ranking {
display: flex;
align-items: center;
padding: 18rpx 18rpx 18rpx 0;
}
.links .link-item .membership-text .membership-description text {
font-size: 24rpx;
color: #a1a8af;
}
.links .link-item .membership-text .membership-description .membership-points {
padding: 18rpx;
font-size: 28rpx;
color: #6d8697;
}
.links .link-item .membership-card {
position: relative;
width: 200rpx;
height: 125rpx;
border-radius: 10rpx;
font-weight: 100;
overflow: hidden;
background-color: #63b359;
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.2);
}
.links .link-item .membership-card .background-img {
width: 200rpx;
height: 125rpx;
border-radius: 10rpx;
box-shadow: 0 0rpx 10rpx 0 rgba(0, 0, 0, 0.12);
}
.links .link-item .membership-card .brand-logo {
width: 30rpx;
height: 30rpx;
border-radius: 50%;
position: absolute;
left: 18rpx;
top: 20rpx;
background-color: #fff;
}
.links .link-item .membership-card .card-des {
position: absolute;
left: 40rpx;
top: 20rpx;
}
.links .link-item .membership-card .card-des .title {
color: #fff;
font-size: 24rpx;
text-align: left;
line-height: 28rpx;
display: inline-block;
transform: scale(0.5);
position: relative;
bottom: 12rpx;
left: -16rpx;
}
.links .link-item .membership-card .card-des .sub-title {
font-size: 20rpx;
color: #fff;
display: block;
text-align: left;
line-height: 10rpx;
transform: scale(0.5);
position: relative;
bottom: 20rpx;
left: -15rpx;
}
.links .link-item .membership-card .qr {
position: absolute;
right: 20rpx;
top: 25rpx;
height: 25rpx;
width: 25rpx;
}
.links .link-item .membership-card .card-number {
position: absolute;
left: -20rpx;
bottom: 10rpx;
line-height: 20rpx;
font-size: 24rpx;
transform: scale(0.5);
color: #fff;
}
.links .link-item-small {
width: 100%;
padding: 20rpx 0;
border-bottom: 2rpx solid #ebebeb;
}
.links .link-item-small .text {
display: flex;
align-items: center;
}
.links .link-item-small:last-child {
border: none;
}
.userInfo-referrals-sectionIcon {
width: 147rpx;
height: 147rpx;
}
.userInfo-referrals-tip {
font-size: 28rpx;
color: #616161;
}
.userInfo-referrals-container {
padding-bottom: 26rpx;
}
.userInfo-referrals-rebateText {
color: #e84c4b !important;
}
wx.webpackJsonp([20],[],[250]);
\ No newline at end of file
{
"navigationBarTitleText": "门店照片"
}
<import src="../../utils/template/showError.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="photo-wrapper">
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<block wx:for="{{photos}}" wx:key="item" wx:for-item="item">
<image src="{{item.url}}" class="photo-img" mode="aspectFill" data-event-src="{{item.url}}" data-event-index="{{index}}" bindtap="previewImage" />
</block>
<view wx:if="{{photos && (photos % 2 !== 0)}}">
<image class="photo-img" mode="aspectFill" />
</view>
</view>
</button>
</form>
.photo-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 30rpx;
}
.photo-img {
width: 320rpx;
height: 230rpx;
margin: 10rpx;
}
wx.webpackJsonp([0],[],[251]);
\ No newline at end of file
{
"navigationBarTitleText": ""
}
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="storefrontList">
<view class="operation flex-container">
<view>
<text class="store-count">共有{{storeList.length}}家店</text>
</view>
<view>
<view bindtap="switchTab" data-tab="list" class="operation-item inline-flex-container">
<image src="{{currentTab === 'list' ? icons.iconListActive : icons.iconList}}" />
<text class="{{currentTab === 'list' && 'active'}}">列表</text>
</view>
<view bindtap="switchTab" data-tab="map" class="operation-item inline-flex-container">
<image src="{{currentTab === 'map' ? icons.iconMapActive : icons.iconMap}}" />
<text class="{{currentTab === 'map' && 'active'}}">地图</text>
</view>
</view>
</view>
<view class="store-list-container" wx:if="{{currentTab === 'list'}}">
<scroll-view class="list-scroll-view" scroll-y>
<view wx:for="{{storeList}}" bindtap="changeStorefront" data-storefront-id="{{item.id}}" wx:for-index="idx" wx:key="item" class="list-item">
<view class="flex-container">
<view class="inline-flex-container">
<text class="store-name">{{item.storefrontName}}</text>
<image src="/assets/icons/ic-arrow.png" style="width: 32rpx; height: 32rpx; margin-left: 8rpx;" />
</view>
<text class="neareast-btn" wx:if="{{idx === 0 && item.distance}}">距离最近</text>
</view>
<view style="margin-top: 16rpx;" class="flex-container">
<text class="gray-font">{{item.address}}</text>
<text wx:if="{{item.distance}}" class="gray-font">{{item.distance}}</text>
</view>
<scroll-view scroll-x class="image-scroll-container" wx:if="{{idx === 0 && item.galleryImages.length > 0}}">
<block wx:for="{{item.galleryImages}}" wx:for-item="image" wx:key="*this">
<view class="scroll-item" catchtap="previewImage" data-event-index="{{index}}">
<image class="scroll-image" src="{{image.url}}" />
</view>
</block>
</scroll-view>
</view>
</scroll-view>
</view>
<view wx:else>
<view>
<swiper current="{{current}}" class="map-scroll-container" bindchange="onSwiperChange">
<block wx:for="{{storeList}}" wx:key="item" wx:index="index">
<swiper-item bindtap="changeStorefront" data-storefront-id="{{item.id}}">
<view class="scroll-item">
<view class="flex-container">
<view class="inline-flex-container">
<text class="store-name">{{item.lessStorefrontName}}</text>
<image src="/assets/icons/ic-arrow.png" style="width: 32rpx; height: 32rpx;" />
</view>
</view>
<view style="margin-top: 24rpx;" class="flex-container">
<text class="gray-font">{{item.address}}</text>
<text wx:if="{{item.distance}}" class="gray-font">{{item.distance}}</text>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
<map id="map" class="store-content" latitude="31.309385" longitude="121.515008" scale="11" bindcallouttap="onCallouttap" show-location="true" markers="{{markers}}"></map>
</view>
</view>
</button>
</form>
.storefrontList {
box-sizing: border-box;
height: 100vh;
background: #ffffff;
}
.flex-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.inline-flex-container {
display: inline-flex;
align-items: center;
}
.operation {
text-align: center;
height: 100rpx;
padding: 0 20rpx;
background: #fafafa;
}
.operation .store-count {
color: #999999;
font-size: 28rpx;
}
.operation .operation-item {
margin-left: 20rpx;
}
.operation .operation-item text {
color: #cecece;
font-size: 28rpx;
margin-left: 4rpx;
}
.operation .operation-item image {
width: 56rpx;
height: 56rpx;
}
.operation .operation-item .active {
color: #48b800;
}
.store-list-container .list-scroll-view {
height: calc(100vh - 100rpx);
}
.store-list-container .list-scroll-view .list-item {
padding: 32rpx 0 40rpx;
border-bottom: 2rpx solid #e8e8e8;
margin: 0 40rpx;
box-sizing: border-box;
}
.store-list-container .list-scroll-view .list-item .store-name {
font-size: 34rpx;
color: #3a3a3a;
word-wrap: break-word;
max-width: 500rpx;
}
.store-list-container .list-scroll-view .list-item .gray-font {
font-size: 24rpx;
color: #999999;
}
.store-list-container .list-scroll-view .list-item .neareast-btn {
color: #4cb617;
font-size: 22rpx;
border-radius: 6rpx;
border: 2rpx solid #4cb617;
padding: 5rpx 10rpx;
}
.store-list-container .list-scroll-view .list-item .image-scroll-container {
width: 100vw;
white-space: nowrap;
margin: 23rpx 0 0 -40rpx;
}
.store-list-container .list-scroll-view .list-item .image-scroll-container .scroll-item {
display: inline-block;
margin-right: 15rpx;
height: 174rpx;
box-sizing: border-box;
}
.store-list-container .list-scroll-view .list-item .image-scroll-container .scroll-item:first-child {
margin-left: 40rpx;
}
.store-list-container .list-scroll-view .list-item .image-scroll-container .scroll-item:last-child {
margin-right: 40rpx;
}
.store-list-container .list-scroll-view .list-item .image-scroll-container .scroll-item .scroll-image {
width: 174rpx;
height: 174rpx;
box-sizing: border-box;
}
.map-scroll-container {
height: 180rpx;
width: 100vw;
position: fixed;
bottom: 22rpx;
white-space: nowrap;
z-index: 999;
}
.map-scroll-container .scroll-item {
display: inline-block;
width: 100vw;
height: 176rpx;
padding: 45rpx 60rpx 0;
box-sizing: border-box;
background: #fff;
}
.map-scroll-container .scroll-item .store-name {
font-size: 34rpx;
color: #3a3a3a;
}
.map-scroll-container .scroll-item .gray-font {
font-size: 28rpx;
color: #999999;
}
#map {
width: 100vw;
height: calc(100vh - 320rpx);
}
wx.webpackJsonp([22],[],[252]);
\ No newline at end of file
{
"navigationBarTitleText": "优惠买单",
"navigationBarBackgroundColor": "#f7f7f7",
"navigationBarTextStyle": "black"
}
<import src="../../utils/template/showError.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="payment-wrapper">
<view class="payment-box">
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<form bindsubmit="formSubmit">
<view class="payment-cost-input">
<input name="costAmount" placeholder="询问店员后输入" value="{{costAmountWithRmbPrefix}}" bindinput="onChangeCostAmountInput" maxlength="16" placeholder-style="font-size: 16px;color:#dcdcdc;text-align:right;" type="digit" cursor="100" confirm-type="done" />
<view class="payment-hint">消费金额</view>
</view>
<view class="amount-without-discount">
<checkbox-group name="isNotDiscountAmount" bindchange="onChangeDiscountCheckbox">
<label>
<checkbox value="true" />
输入不参与优惠金额
</label>
</checkbox-group>
<view>
<image style="width:35rpx; height: 35rpx; margin-left: 4rpx;" src="/assets/icons/icon-discount-info.png" bindtap="showNoDiscountPopup" mode="aspectFill" />
</view>
</view>
<block wx:if="{{isNoDiscountCheckBoxChecked}}">
<view class="payment-without-discount-amount-input">
<input name="noDiscountAmount" placeholder="询问店员后输入" value="{{noDiscountAmountWithRmbPrefix}}" bindinput="onChangeNoDiscountAmountInput" maxlength="16" placeholder-style="font-size: 16px;color:#dcdcdc;text-align:right;" type="digit" cursor="100" confirm-type="done" />
<view class="payment-hint">不参与优惠金额</view>
</view>
</block>
<block wx:if="{{isOpenPromotionRule}}">
<view wx:if="{{!isNoDiscountCheckBoxChecked}}"></view>
<view class="promotion-info flex-between">
<view class="promotion-rule">
<image style="width: 35rpx; height: 35rpx; margin-right: 5px;" src="/assets/icons/icon-discount.png" mode="aspectFill" />
<view class="rule">{{ruleText}}</view>
</view>
<block wx:if="{{enableBothPromotionAndCoupon}}">
<view wx:if="{{promotionDiscountAmount > 0}}" class="discount-amount">
已减¥{{promotionDiscountAmount}}
</view>
</block>
<block wx:else>
<block wx:if="{{!currentCoupon}}">
<view wx:if="{{promotionDiscountAmount > 0}}" class="discount-amount">
已减¥{{promotionDiscountAmount}}
</view>
</block>
<block wx:else>
<view class="both-share-conditions">不与优惠券同享</view>
</block>
</block>
</view>
</block>
<block wx:if="{{enabledCouponList && costAmount > 0}}">
<view class="coupon flex-between" bindtap="navigateToCoupon">
<view class="coupon-left">
<image style="width: 35rpx; height: 35rpx; margin-right: 5px;" src="/assets/icons/ic-coupon.png" mode="aspectFill" />
<text>优惠券</text>
</view>
<view class="navigate-btn">
<block wx:if="{{currentCoupon && canBeUsedCouponList.length > 0}}">
<text class="discount-text">已减{{currentCoupon.amount}}元</text>
</block>
<block wx:else>
<text wx:if="{{costAmount != ''}}">
<text wx:if="{{canBeUsedCouponList.length > 0}}" class="coupon-number">{{canBeUsedCouponList.length}}张可用</text>
<text wx:else style="color: #969696;">暂无可用</text>
</text>
<text wx:else class="coupon-number">{{enabledCouponList.length}}张可用</text>
</block>
<image class="icon-right" src="/assets/icons/icon-arrow.png" style="width: 20px; height: 20px;"></image>
</view>
</view>
</block>
<block wx:if="{{enableMemberRanking && memberRanking}}">
<view class="member-ranking flex-between">
<view class="ranking-rule">
<view class="user-ranking" style="background: {{memberRanking.color}}">
<image src="/assets/icons/icon-level.png" style="width: 18px; height: 18px;" />
<text style="font-size: 12px; color: #ffffff">{{memberRanking.name}}</text>
</view>
<view class="rule">会员{{memberRanking.discountRate / 10}}折</view>
</view>
<view wx:if="{{memberDiscountAmount != '' && memberDiscountAmount != 0}}" class="discount-amount">
已减¥{{memberDiscountAmount}}
</view>
</view>
</block>
<block wx:if="{{ !!isOpenDeductiblePoint && costAmount > 0 && !isWept}}">
<view class="point flex-between">
<view class="point-left">
<image style="width: 34rpx; height: 34rpx; margin-right: 5px;" src="/assets/icons/ic-point.png" mode="aspectFill" />
<text style="width: 60rpx;">积分</text>
<text wx:if="{{!points}}">(暂无积分)</text>
<text wx:else>(可用{{usePoints}}积分抵扣{{pointsDeductibleAmout}}元)</text>
</view>
<view wx:if="{{!!points && points >= 0}}" class="point-right">
<text wx:if="{{pointsDeductibleAmout > 0 && isPointCheckboxChecked}}">已减{{pointsDeductibleAmout}}元</text>
<checkbox-group name="isNotDiscountAmount" bindchange="onChangePointCheckbox">
<label>
<checkbox value="true" checked="{{isPointCheckboxChecked}}" />
</label>
</checkbox-group>
</view>
</view>
</block>
<block wx:if="{{pointsRuleStatus === 'active' && !!isWept}}">
<view class="point flex-between">
<view class="point-left">
<image style="width: 34rpx; height: 34rpx; margin-right: 5px;" src="/assets/icons/ic-point.png" mode="aspectFill" />
<text style="width: 60rpx;">积分</text>
<text>(可用{{pointsRules.costBonusUnit || 0}}积分抵扣{{pointsRules.reduceMoney / 100 || 0}}元)</text>
</view>
<view class="point-right">
<checkbox-group name="isNotDiscountAmount" bindchange="onChangePointCheckbox">
<label>
<checkbox value="true" checked="{{false}}" />
</label>
</checkbox-group>
</view>
</view>
</block>
<block wx:if="{{realPayAmount !== null}}">
<view class="confirm-amount">
<view class="preferential-rule" bindtap="navigateToPreferentialRulePage">
<text>优惠规则</text>
<image style="width:35rpx; height: 35rpx; margin-left: 6rpx;" src="/assets/icons/icon-discount-info.png" bindtap="showWithoutDiscountPopup" mode="aspectFill" />
</view>
<view class="pay-real">
<text>实付</text>
<text>¥{{realPayAmount}}</text>
</view>
</view>
</block>
<view class="pay-button" wx:if="{{paymentGateway === PAYMENT_GATEWAY.BALANCE && balance > 0}}">
<button type="primary" disabled="{{balance < realPayAmount}}" loading="{{submitting}}" size="default" form-type="submit" style="background-color: #6f8695; color: #ffffff; opacity: {{balance < realPayAmount ? 0.5 : 1}}">
<view class="flex-row center-item" style="display:inline-block;">
<view class="flex-row center-item" style="color: #ffffff; font-size: 16px; line-height: 16px; margin-bottom: 5px;">
<image style="width:20px; height: 20px; margin-right: 4px; background-color: #6f8695;" src="/assets/icons/icon-checkout-pre-paid.png" mode="aspectFill" />
<block wx:if="{{balance < realPayAmount && isWechatPayEnabled}}">
余额充值不足,请使用微信支付
</block>
<block wx:else>使用账号余额</block>
</view>
<view style="color: #ffffff; font-size: 12px; line-height: 12px;">
(账户余额{{balance}}元)
</view>
</view>
</button>
</view>
<view class="pay-button" wx:if="{{isWechatPayEnabled && (paymentGateway === PAYMENT_GATEWAY.WECHAT || balance <= 0)}}">
<button type="primary" loading="{{submitting}}" hover-class="other-button-hover" size="default" form-type="submit">
<image style="width:20px; height: 20px; margin-right: 4px;" src="/assets/icons/logo-wechatpay-white.png" mode="aspectFill" />
确认支付{{ realPayAmount ? realPayAmount + '元' : ''}}
</button>
<view wx:if="{{isShowMask}}" class="pay-cover"></view>
</view>
<view wx:if="{{isWechatPayEnabled && paymentGateway === PAYMENT_GATEWAY.WECHAT && balance > 0}}" class="pay-link" data-payment-gateway="{{PAYMENT_GATEWAY.BALANCE}}" bindtap="changePaymentGateway">
转为使用余额支付
</view>
<view wx:if="{{isWechatPayEnabled && paymentGateway === PAYMENT_GATEWAY.BALANCE && balance > 0}}" class="pay-link" data-payment-gateway="{{PAYMENT_GATEWAY.WECHAT}}" bindtap="changePaymentGateway">
转为使用微信支付
</view>
</form>
</view>
</view>
</button>
</form>
.payment-wrapper {
width: 100vw;
min-height: 100vh;
background-color: #f7f7f7;
}
.payment-wrapper .payment-box {
padding: 40rpx 0;
}
.payment-wrapper .payment-box .flex-between {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 30rpx 40rpx;
background: #fff;
}
.payment-wrapper .payment-box .payment-cost-input {
padding: 0 40rpx;
}
.payment-wrapper .payment-box .payment-cost-input input {
height: 128rpx;
border-radius: 12rpx;
background-color: #ffffff;
box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.12);
padding: 0 40rpx;
font-size: 36rpx;
text-align: right;
}
.payment-wrapper .payment-box .payment-cost-input .payment-hint {
font-size: 28rpx;
color: #222222;
position: relative;
bottom: 78rpx;
left: 30rpx;
z-index: 100;
width: 200rpx;
}
.payment-wrapper .payment-box .payment-without-discount-amount-input {
margin-top: 30rpx;
padding: 0 40rpx;
}
.payment-wrapper .payment-box .payment-without-discount-amount-input input {
height: 128rpx;
border-radius: 12rpx;
background-color: #ffffff;
box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.12);
padding: 0 40rpx;
font-size: 36rpx;
text-align: right;
}
.payment-wrapper .payment-box .payment-without-discount-amount-input .payment-hint {
font-size: 28rpx;
color: #222222;
position: relative;
bottom: 78rpx;
left: 30rpx;
z-index: 600;
width: 260rpx;
}
.payment-wrapper .payment-box .amount-without-discount {
display: flex;
align-items: center;
padding: 0 40rpx;
margin-bottom: 40rpx;
}
.payment-wrapper .payment-box .amount-without-discount label {
font-size: 28rpx;
color: #969696;
}
.payment-wrapper .payment-box .divider-top {
height: 2rpx;
background-color: #dfdfdf;
margin-bottom: 30rpx;
}
.payment-wrapper .payment-box .divider {
height: 2rpx;
background-color: #dfdfdf;
margin: 30rpx 0;
}
.payment-wrapper .payment-box .promotion-rule {
display: flex;
}
.payment-wrapper .payment-box .promotion-info {
border-bottom: 2rpx solid #f5f5f5;
}
.payment-wrapper .payment-box .promotion-info .rule {
font-size: 28rpx;
color: #222222;
word-break: break-all;
float: right;
line-height: 38rpx;
}
.payment-wrapper .payment-box .promotion-info .discount-amount {
font-size: 28rpx;
color: #ed7701;
width: 240rpx;
text-align: right;
}
.payment-wrapper .payment-box .promotion-info .both-share-conditions {
font-size: 28rpx;
color: #8a8a8a;
width: 240rpx;
text-align: right;
}
.payment-wrapper .payment-box .member-ranking {
align-items: center;
}
.payment-wrapper .payment-box .member-ranking .user-ranking {
display: flex;
align-items: center;
margin-right: 16rpx;
padding: 6rpx 8rpx;
border-radius: 10rpx;
}
.payment-wrapper .payment-box .member-ranking .ranking-rule {
display: flex;
align-items: center;
}
.payment-wrapper .payment-box .member-ranking .rule {
font-size: 28rpx;
color: #222222;
word-break: break-all;
float: right;
line-height: 38rpx;
}
.payment-wrapper .payment-box .member-ranking .discount-amount {
font-size: 28rpx;
color: #ed7701;
width: 240rpx;
text-align: right;
}
.payment-wrapper .payment-box .coupon {
border-bottom: 2rpx solid #f5f5f5;
}
.payment-wrapper .payment-box .coupon text {
font-size: 28rpx;
color: #222222;
}
.payment-wrapper .payment-box .coupon .coupon-left {
display: flex;
align-items: center;
}
.payment-wrapper .payment-box .coupon .navigate-btn {
display: flex;
align-items: center;
}
.payment-wrapper .payment-box .coupon .navigate-btn .coupon-number {
display: block;
width: 108rpx;
height: 40rpx;
font-size: 24rpx;
line-height: 40rpx;
text-align: center;
color: #ffffff;
background-color: #fa8c3a;
border-radius: 6rpx;
margin-right: 8rpx;
}
.payment-wrapper .payment-box .coupon .navigate-btn .discount-text {
font-size: 28rpx;
color: #fa8c3a;
}
.payment-wrapper .payment-box .confirm-amount {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
margin: 20rpx 0 110rpx 0;
}
.payment-wrapper .payment-box .confirm-amount .preferential-rule {
display: flex;
align-items: center;
}
.payment-wrapper .payment-box .confirm-amount .preferential-rule text {
font-size: 28rpx;
color: #969696;
}
.payment-wrapper .payment-box .confirm-amount .pay-real {
display: flex;
align-items: center;
}
.payment-wrapper .payment-box .confirm-amount .pay-real text:first-child {
font-size: 28rpx;
color: #222222;
margin-right: 14rpx;
}
.payment-wrapper .payment-box .confirm-amount .pay-real text:last-child {
font-size: 40rpx;
color: #ea4a46;
}
.payment-wrapper .payment-box .pay-button {
position: relative;
padding: 0 40rpx;
}
.payment-wrapper .payment-box button {
margin-top: 40rpx;
height: 100rpx;
line-height: 100rpx;
display: flex;
font-size: 32rpx;
align-items: center;
justify-content: center;
}
.payment-wrapper .payment-box .pay-cover {
width: calc(100vw - 80rpx);
height: 100rpx;
position: absolute;
border-radius: 8rpx;
background-color: rgba(231, 228, 228, 0.5);
z-index: 500;
top: 0;
left: 40rpx;
}
.payment-wrapper .payment-box .pay-link {
color: #00b9ff;
text-align: center;
margin-top: 56rpx;
font-size: 28rpx;
}
.payment-wrapper .payment-box .point {
display: flex;
align-items: center;
margin: 40rpx 0;
}
.payment-wrapper .payment-box .point text {
font-size: 28rpx;
color: #222222;
}
.payment-wrapper .payment-box .point .point-left {
display: flex;
float: left;
}
.payment-wrapper .payment-box .point .point-right {
display: flex;
align-items: center;
}
.payment-wrapper .payment-box .point .point-right text {
font-size: 28rpx;
color: #fa8c3a;
margin-right: 10rpx;
}
wx.webpackJsonp([23],[],[253]);
\ No newline at end of file
{
"navigationBarTitleText": "优惠买单",
"navigationBarBackgroundColor": "#f7f7f7",
"navigationBarTextStyle": "black"
}
<import src="../../utils/template/luckyWheelBanner.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="payment-success-wrapper">
<view class="payment-box">
<image style="width:80px; height: 80px;" src="/assets/icons/icon-pay-success.jpg" mode="aspectFill" />
<view class="pay-money">
成功支付{{costAmount}}元{{increaseBonus > 0 ? ',获得' + increaseBonus + '积分' : '' }}
</view>
<view class="pay-hint">将该支付凭证页面出示给店员即可。</view>
<block wx:if="{{couponList.length > 0}}">
<view class="coupon-panel" bindtap="navigateToCoupon">
<view class="coupon-info">
<image src="/assets/icons/icon-membership-coupon.png" mode="aspectFill" style="width: 46px; height: 36px;" />
<view class="use-hint">
<text>送你{{couponList.length}}张优惠券</text>
<block wx:if="{{settings.isMultiSf}}">
<text>已放至适用门店,在相应门店的“优惠券中心”查看</text>
</block>
<block wx:else>
<text>下次买单时可使用</text>
</block>
</view>
</view>
<image class="icon-right" src="/assets/icons/icon-arrow.png" style="width: 30px; height: 32px;"></image>
</view>
</block>
<view class="navigator-btn">
<view class="btn store-btn" bindtap="navigateToComment">评价</view>
<view class="btn index-btn" bindtap="navigateToIndex">完成</view>
</view>
</view>
<view class="luckywheel-banner-afterpay-wrapper" wx:if="{{entryPolicies.afterPayment}}" bindtap='navigateToLuckyWheel'>
<template
is="luckywheel-banner-layout"
data="{{luckyWheelBannerPic}}"
>
</template>
</view>
</view>
</button>
</form>
.payment-success-wrapper {
width: 100vw;
}
.payment-success-wrapper .payment-box {
padding: 40rpx;
margin-top: 230rpx;
text-align: center;
}
.payment-success-wrapper .payment-box .pay-money {
font-size: 38rpx;
color: #222222;
margin-top: 36rpx;
}
.payment-success-wrapper .payment-box .pay-hint {
font-size: 28rpx;
color: #666666;
margin-top: 24rpx;
}
.payment-success-wrapper .payment-box .coupon-panel {
height: 152rpx;
border-radius: 12rpx;
padding: 0 48rpx;
margin: 60rpx 0;
border: 2rpx solid #ebebeb;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
}
.payment-success-wrapper .payment-box .coupon-panel .coupon-info {
display: flex;
align-items: center;
}
.payment-success-wrapper .payment-box .coupon-panel .coupon-info .use-hint {
margin-left: 44rpx;
line-height: 48rpx;
}
.payment-success-wrapper .payment-box .coupon-panel .coupon-info .use-hint text {
display: block;
}
.payment-success-wrapper .payment-box .coupon-panel .coupon-info .use-hint text:first-child {
font-size: 30rpx;
color: #3a3a3a;
}
.payment-success-wrapper .payment-box .coupon-panel .coupon-info .use-hint text:last-child {
font-size: 26rpx;
color: #8a8a8a;
line-height: 1.4;
}
.payment-success-wrapper .payment-box .navigator-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
margin-top: 60rpx;
}
.payment-success-wrapper .payment-box .navigator-btn .btn {
width: 216rpx;
height: 68rpx;
line-height: 68rpx;
border-radius: 12rpx;
margin: 0 8rpx;
font-size: 28rpx;
font-weight: 500;
border: 2rpx solid #708694;
}
.payment-success-wrapper .payment-box .navigator-btn .store-btn {
background-color: #708694;
color: #ffffff;
}
.payment-success-wrapper .payment-box .navigator-btn .index-btn {
background-color: #ffffff;
color: #708694;
}
wx.webpackJsonp([24],[],[254]);
\ No newline at end of file
{
"navigationBarTitleText": "优惠规则说明"
}
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<template name="sub-hint">
<view class="hint">
<text>{{item}}</text>
</view>
</template>
<template name="preferential-hint">
<view class="preferential-box">
<view class="title">
<text>{{data.title}}</text>
</view>
<view wx:if="{{!!data.content && data.content.length > 0}}" wx:for="{{data.content}}" wx:key="{{item}}" wx:for-item="item">
<template is="sub-hint" data="{{item}}" />
</view>
<view wx:if="{{!!powerOfInterpretation}}" class="interpretation">
<text>{{powerOfInterpretation}}</text>
</view>
</view>
</template>
<view class="preferential-rule-hint-wrapper">
<template is="preferential-hint" data="{{data: CALCULATE_RULE_HINT}}" />
<template is="preferential-hint" data="{{data: SHARE_RULE_HINT}}" />
<template is="preferential-hint" data="{{data: OTHER_HINT, powerOfInterpretation}}" />
</view>
</button>
</form>
page {
background-color: #ffffff;
}
.preferential-rule-hint-wrapper {
padding: 54rpx;
}
.preferential-rule-hint-wrapper text {
color: #4A4A4A;
font-weight: 300;
}
.preferential-rule-hint-wrapper .preferential-box {
margin-bottom: 68rpx;
}
.preferential-rule-hint-wrapper .preferential-box .title {
margin-bottom: 30rpx;
}
.preferential-rule-hint-wrapper .preferential-box .title text {
font-size: 46rpx;
}
.preferential-rule-hint-wrapper .preferential-box .hint {
margin-bottom: 20rpx;
}
.preferential-rule-hint-wrapper .preferential-box .hint text {
font-size: 32rpx;
line-height: 52rpx;
}
.preferential-rule-hint-wrapper .preferential-box .interpretation text {
font-size: 32rpx;
line-height: 52rpx;
}
wx.webpackJsonp([25],[],[255]);
\ No newline at end of file
{
"navigationBarTitleText": "积分",
"enablePullDownRefresh": true,
"onReachBottomDistance": 100
}
<import src="../../utils/template/topBarTemplate.wxml" />
<import src="../../utils/template/pointsListTemplate.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="points-wrapper">
<view class="points-header" style="background-color: {{bgColor}}">
<view class="points">
<text style="color: {{bgColor === '#ffffff' ? '#000000' : '#ffffff'}}">{{points}}</text>
<text style="color: {{bgColor === '#ffffff' ? '#000000' : '#ffffff'}}">当前积分</text>
</view>
</view>
<view class="tap-bar">
<template is="topBar" data="{{ tabState, switchToHintTab, switchToRecordTab, bgColor }}"></template>
</view>
<view class="points-bar" wx:if="{{tabState == 'hint'}}">
<view wx:if="{{enableDecreaseBonus || enableIncreaseBonus}}" class="text-item">
<text>积攒与使用</text>
<text wx:if="{{enableIncreaseBonus}}">每消费1元,赠送{{pointsRules.increaseBonus}}积分。</text>
<text wx:if="{{enableDecreaseBonus}}">
买单时可使用积分抵扣,{{pointsRules.costBonusUnit}}积分抵扣1元。
</text>
<text>积分可与优惠券、满减同享。</text>
</view>
<view class="text-item">
<text>有效期</text>
<text>积分永久有效,不自动清零。</text>
</view>
</view>
<view wx:if="{{tabState == 'record'}}" class="points-lists">
<block wx:if="{{pointRecordsList && pointRecordsList.length > 0}}">
<block wx:for="{{pointRecordsList}}" wx:key="item" wx:for-item="item">
<template is="points-list" data="{{item}}" />
</block>
<view style="text-align: center; height: 20px; margin: 10px 0 10px; position: relative;">
<view wx:if="{{pointRecordsList.length > 0 && paginationMeta.nextPage}}" class="loader" />
<text wx:if="{{pointRecordsList.length > 6 && !isFetching && paginationMeta.nextPage === null}}" style="line-height: 20px; font-size: 12px; color: #999; padding-bottom: 20px;">- 无更多记录 -</text>
</view>
</block>
<block wx:else>
<text class="empty-points">暂无记录</text>
</block>
</view>
</view>
</button>
</form>
.like-btn {
z-index: 997;
}
page {
background-color: #ffffff;
}
.points-wrapper {
min-height: 100vh;
padding-top: 0;
align-items: center;
box-sizing: border-box;
}
.points-header {
width: 100vw;
height: 400rpx;
display: flex;
align-items: center;
justify-content: center;
}
.points-header .points {
text-align: center;
}
.points-header .points text {
display: block;
}
.points-header .points text:first-child {
font-size: 92rpx;
}
.points-header .points text:last-child {
font-size: 28rpx;
margin-top: 20rpx;
}
.top-bar {
width: 100vw;
height: 108rpx;
display: flex;
align-items: center;
justify-content: space-around;
}
.top-bar .nav-item {
height: 100rpx;
width: 208rpx;
font-size: 32rpx;
font-weight: 500;
text-align: center;
line-height: 100rpx;
border-bottom: 4rpx solid transparent;
}
.top-bar .nav-item.selected {
border-bottom: 4rpx solid #ffffff;
}
.points-bar {
padding: 40rpx;
}
.points-bar .text-item {
margin: 20rpx 40rpx 40rpx 0;
}
.points-bar .text-item text {
display: block;
font-size: 30rpx;
font-weight: 600rpx;
line-height: 52rpx;
color: #333333;
}
.points-bar .text-item text:first-child {
font-size: 30rpx;
font-weight: 500;
color: #3a3a3a;
margin-bottom: 20rpx;
}
.points-lists {
display: block;
padding: 0 40rpx;
}
.point-item {
width: 100%;
height: 152rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #ebebeb;
}
.point-item .content-left text {
display: block;
text-align: left;
line-height: 52rpx;
}
.point-item .content-left text:first-child {
font-size: 32rpx;
color: #3a3a3a;
}
.point-item .content-left text:last-child {
font-size: 30rpx;
color: #8a8a8a;
}
.point-item .content-right {
font-size: 32rpx;
text-align: right;
}
.point-item .content-right .point-plus {
color: #90b50d;
}
.point-item .content-right .point-minus {
color: #e84c4b;
}
.empty-points {
height: 520rpx;
display: flex;
align-items: center;
justify-content: center;
color: #666666;
font-size: 32rpx;
}
wx.webpackJsonp([26],[],[256]);
\ No newline at end of file
{
"navigationBarTitleText": "等级特权对比"
}
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="ranking-prerogative-container">
<view wx:for="{{rankingList}}" wx:key="{{item.id}}" class="ranking-item">
<text class="ranking-title">{{item.name}}特权</text>
<text class="ranking-title">{{item.name}}特权</text>
<text class="ranking-hint" wx:if="{{item.experienceThreshold > 0}}">历史积分需达到{{item.experienceThreshold}}分</text>
<view class="prerogative-item">
<image src="/assets/icons/icon-benfit-coupon.png" style="width: 30px; height: 30px; border-radius: 50%; background: {{item.color || mainBackground}}" />
<text wx:if="{{item.discountRate !== 100}}">买单可享受<text style="color: #e84c4b">{{item.discountRate / 10}}</text> 折</text>
<text wx:else>暂无特权</text>
</view>
<view class="prerogative-item" wx:for="{{item.customPrerogative}}" wx:key="{{prerogative}}" wx:for-item="prerogative" wx:for-index="idx">
<image src="/assets/icons/icon-benfit-present.png" style="flex:0 0 30px; height: 30px; border-radius: 50%; background: {{item.color || mainBackground}}" />
<text>{{prerogative}}</text>
</view>
</view>
</view>
</button>
</form>
.ranking-prerogative-container {
margin: 0 48rpx;
}
.ranking-prerogative-container .ranking-item {
padding: 52rpx 0;
border-bottom: 2rpx solid #ebebeb;
}
.ranking-prerogative-container .ranking-item:last-child {
border: none;
}
.ranking-prerogative-container .ranking-item .ranking-title {
display: block;
font-weight: 500;
color: #3a3a3a;
font-size: 32rpx;
margin-bottom: 16rpx;
}
.ranking-prerogative-container .ranking-item .ranking-hint {
font-size: 28rpx;
color: #8a8a8a;
}
.ranking-prerogative-container .ranking-item .prerogative-item {
display: flex;
align-items: center;
margin-top: 40rpx;
}
.ranking-prerogative-container .ranking-item .prerogative-item text {
font-size: 28rpx;
color: #4b5056;
margin-left: 12rpx;
}
wx.webpackJsonp([27],[],[257]);
\ No newline at end of file
{
"navigationBarTitleText": "会员等级"
}
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view>
<view class="ranking-header">
<view wx:if="{{!isWept}}" class="ranking-wept" style="background: {{ currentUserRank.color || mainBackground }}">
<view class="row-center">
<image src="/assets/icons/icon-level.png" />
</view>
<view class="row-center">
<text class="ranking-name">{{currentUserRank.name || '会员等级'}}</text>
</view>
<view class="row-center">
<text class="ranking-description">{{userRankingDescription}}</text>
</view>
<view class="row-center">
<view class="ranking-process-container">
<view class="ranking-circle circle-mask-left" style="background: {{ currentUserRank.color || mainBackground }};"></view>
<view class="ranking-circle circle-left" style="background: {{ userExperienceProportion > 0 ? '#ffffff' : 'rgba(0, 0, 0, 0.2)' }}"></view>
<view class="ranking-process"></view>
<view class="ranking-circle circle-right" style="background: {{ userExperienceProportion == 1 ? '#ffffff' : 'rgba(0, 0, 0, 0.2)' }}"></view>
<view class="ranking-circle circle-mask-right" style="background: {{ currentUserRank.color || mainBackground }};"></view>
<view class="ranking-user-process" style="width: {{ userExperienceProportion * 520 + 'rpx' }}"></view>
<view class="ranking-process-name" wx:if="{{nextUserRank}}">
<text>{{currentUserRank.name}}</text>
<text>{{nextUserRank.name}}</text>
</view>
<view class="ranking-process-name" wx:else>
<text>{{penultimateRank.name}}</text>
<text>{{currentUserRank.name}}</text>
</view>
</view>
</view>
</view>
<view wx:else class="ranking-wept" style="background: {{ currentUserRank.color || mainBackground }}">
<view class="row-center">
<image src="/assets/icons/icon-level.png" />
</view>
<view class="row-center">
<text class="ranking-name">{{currentUserRank.name || '会员等级'}}</text>
</view>
<view class="row-center">
<text class="ranking-tip">提示:预览模式暂不显示用户的等级进度条</text>
</view>
</view>
</view>
<view class="ranking-content">
<view class="nav-bar">
<view bindtap="switchTab" data-tab="prerogative" class="nav-item" style="border-bottom-color: {{tabState === 'prerogative' ? currentUserRank.color || mainBackground : ''}}">
<text style="color: {{tabState === 'prerogative' ? currentUserRank.color || mainBackground : '#3a3a3a'}}">专享特权</text>
</view>
<view bindtap="switchTab" data-tab="constitution" class="nav-item" style="border-bottom-color: {{tabState === 'constitution' ? currentUserRank.color || mainBackground : ''}}">
<text style="color: {{tabState === 'constitution' ? currentUserRank.color || mainBackground : '#3a3a3a'}}">等级说明</text>
</view>
</view>
<view class="hint-container">
<block wx:if="{{tabState === 'prerogative'}}">
<view class="prerogative-header">
<text>{{currentUserRank.name || ''}}特权</text>
<view bindtap="navigationToPrerogativeList">
<text>对比等级特权</text>
<view class="icon"></view>
</view>
</view>
<view class="prerogative-content">
<view class="prerogative-item">
<image src="/assets/icons/icon-benfit-coupon.png" style="width: 30px; height: 30px; border-radius: 50%; background: {{ currentUserRank.color || mainBackground }}" />
<text wx:if="{{currentUserRank.discountRate < 100}}">买单可享受<text style="color: #e84c4b">{{currentUserRank.discountRate / 10.0}}</text>折</text>
<text wx:else>暂无特权</text>
</view>
<view class="prerogative-item" wx:for="{{currentUserRank.customPrerogative || []}}" wx:key="{{item}}">
<image src="/assets/icons/icon-benfit-present.png" style="flex:0 0 30px; height: 30px; border-radius: 50%; background: {{ currentUserRank.color }}" />
<text>{{item}}</text>
</view>
</view>
</block>
<block wx:else>
<view class="hint-item">
<text class="hint-title">会员体系概述</text>
<text class="hint">会员体系包含{{rankingList.length}}个等级:{{allRankName}}。</text>
<text class="hint">会员等级由积分决定,历史积分越高,等级越高。可享受的权益也更尊贵。</text>
</view>
<view class="hint-item">
<text class="hint-title">特权使用</text>
<text class="hint">买单优惠特权可在使用优惠买单时使用。</text>
<text class="hint">其他特权你需要在线下店使用,我们将为你核对特权。</text>
</view>
<view class="hint-item">
<text class="hint-title">如何升级</text>
<text class="hint">买单可获得积分,根据历史积分升级会员等级。</text>
<text class="hint">注意:使用积分不影响历史积分。</text>
</view>
<view class="hint-item">
<text class="hint-title">会员有效期</text>
<text class="hint">永久有效,会员等级不降级。</text>
</view>
<view class="hint-item">
<text class="hint-title">其他</text>
<text class="hint">{{memberRankingRemark || ''}}</text>
</view>
</block>
</view>
</view>
</view>
</button>
</form>
.like-btn {
z-index: 997;
}
.ranking-header {
width: 100vw;
}
.row-center {
display: flex;
justify-content: center;
}
.ranking-wept {
width: 100vw;
height: 500rpx;
}
.ranking-wept image {
width: 152rpx;
height: 152rpx;
margin-top: 30rpx;
}
.ranking-wept .ranking-name {
color: #ffffff;
font-size: 44rpx;
margin-top: 30rpx;
}
.ranking-wept .ranking-description {
color: #ffffff;
font-size: 28rpx;
width: 600rpx;
text-align: center;
line-height: 40rpx;
margin-top: 30rpx;
}
.ranking-wept .ranking-process-container {
position: relative;
top: 30rpx;
}
.ranking-wept .ranking-process-container .ranking-process {
position: relative;
width: 520rpx;
height: 10rpx;
background: rgba(0, 0, 0, 0.2);
display: inline-block;
}
.ranking-wept .ranking-process-container .ranking-user-process {
position: absolute;
height: 10rpx;
background: #ffffff;
display: inline-block;
left: 38rpx;
top: 20rpx;
}
.ranking-wept .ranking-process-container .ranking-circle {
width: 20rpx;
height: 20rpx;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
position: relative;
display: inline-block;
top: 4rpx;
z-index: 999;
}
.ranking-wept .ranking-process-container .circle-left {
left: 4rpx;
}
.ranking-wept .ranking-process-container .circle-right {
right: 4rpx;
}
.ranking-wept .ranking-process-container .circle-mask-right {
right: 24rpx;
z-index: 1;
}
.ranking-wept .ranking-process-container .circle-mask-left {
left: 24rpx;
z-index: 1;
}
.ranking-wept .ranking-process-container .ranking-process-name {
display: flex;
justify-content: space-between;
margin-top: 10rpx;
}
.ranking-wept .ranking-process-container .ranking-process-name text {
font-size: 24rpx;
color: #ffffff;
}
.ranking-wept .ranking-tip {
position: absolute;
top: 364rpx;
color: #ffffff;
font-size: 28rpx;
}
.nav-bar {
width: 100vw;
height: 108rpx;
display: flex;
justify-content: space-around;
border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
}
.nav-bar .nav-item {
width: 216rpx;
height: 108rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 4rpx solid transparent;
}
.hint-container {
padding: 0 50rpx 40rpx;
}
.hint-container .icon {
width: 20rpx;
height: 20rpx;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border: solid 2rpx #979797;
border-width: 2rpx 2rpx 0 0;
display: inline-block;
width: 12rpx;
height: 12rpx;
}
.hint-container .prerogative-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40rpx;
}
.hint-container .prerogative-header text {
font-size: 32rpx;
font-weight: 500;
color: #3a3a3a;
}
.hint-container .prerogative-header view {
display: flex;
align-items: center;
}
.hint-container .prerogative-header view text {
font-size: 28rpx;
color: #a9aeb2;
}
.hint-container .prerogative-content .prerogative-item {
display: flex;
align-items: center;
margin-top: 40rpx;
}
.hint-container .prerogative-content .prerogative-item text {
font-size: 28rpx;
color: #4b5056;
margin-left: 12rpx;
}
.hint-container .hint-item {
margin: 48rpx 0 0;
}
.hint-container .hint-item .hint-title {
display: block;
font-size: 32rpx;
font-weight: 600;
color: #3a3a3a;
margin-bottom: 16rpx;
}
.hint-container .hint-item .hint {
display: block;
font-size: 28rpx;
color: #8a8a8a;
line-height: 40rpx;
padding: 8rpx 0;
}
wx.webpackJsonp([28],[],[258]);
\ No newline at end of file
{
"navigationBarTitleText": "余额充值"
}
<import src="../../utils/template/showError.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="get-membership-card-page">
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<view>
<image src="/assets/icons/icon-get-membership-card.png" style="width: 158rpx; margin-bottom: 35rpx;" mode="widthFix"></image>
<view style="margin-bottom: 14rpx;">
<text wx:if="{{lastPageFrom === 'recharge'}}" class="s-title">成为会员即可储值</text>
<text wx:if="{{lastPageFrom === 'referrals'}}" class="s-title">成为会员即可邀请好友</text>
</view>
<view>
<text wx:if="{{lastPageFrom === 'recharge'}}" class="s-text">还有累积积分,获得尊享权益!</text>
<text wx:if="{{lastPageFrom === 'referrals'}}" class="s-text">还可积攒积分,获得尊享权益!</text>
</view>
<button style="margin-top: 60rpx; background-color: {{bgColor}}; color: {{textColor}};" bindtap="getCard">
领取会员卡
</button>
</view>
</view>
</button>
</form>
.get-membership-card-page {
padding: 300rpx 85rpx 0;
box-sizing: border-box;
text-align: center;
}
wx.webpackJsonp([29],[],[259]);
\ No newline at end of file
{
"navigationBarTitleText": "余额充值"
}
<import src="../../utils/template/luckyWheelBanner.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="recharge-success-page">
<view>
<image mode="widthFix" src="/assets/icons/icon-pre-paid-success.png" style="width: 158rpx;margin-bottom: 35rpx;"></image>
<view style="margin-bottom: 14rpx;">
<text class="s-title">已成功充值{{amount}}元</text>
</view>
<view>
<text class="s-text">买单时即可使用余额支付</text>
</view>
<button bindtap="navigateBack" style="margin-top: 60rpx; background-color: {{bgColor}}; color: {{textColor}}">
返回首页
</button>
</view>
<view class="luckywheel-banner-afterpay-wrapper" wx:if="{{entryPolicies.afterPayment}}" bindtap='navigateToLuckyWheel'>
<template is="luckywheel-banner-layout" data="{{luckyWheelBannerPic}}"></template>
</view>
</view>
</button>
</form>
.recharge-success-page {
padding: 300rpx 85rpx 0;
box-sizing: border-box;
text-align: center;
}
wx.webpackJsonp([30],[],[260]);
\ No newline at end of file
{
"navigationBarTitleText": "充值消费记录",
"enablePullDownRefresh": true,
"onReachBottomDistance": 100
}
\ No newline at end of file
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<template name="recordItem-recharge">
<view class="record-item flex-row record-item-recharge">
<view class="record-item-info">
<view>
充值{{rechargeAmount}}元
<text wx:if="{{giftAmount > 0}}">,赠送{{giftAmount}}元</text>
<text wx:if="{{isMultiSf}}">({{storefrontName}})</text>
</view>
<view class="record-item-date">{{date}}</view>
</view>
<view class="record-item-amount">+{{increaseAmount}}元</view>
</view>
</template>
<template name="recordItem-payment">
<view class="record-item flex-row record-item-payment">
<view class="record-item-info">
<view>
<text wx:if="{{gateway === 'stored_value_card'}}">使用余额</text>
<text wx:if="{{gateway === 'mini_program_wechatpay'}}">使用微信支付</text>
<text wx:if="{{category === 'sales_order'}}">买单支付{{decreaseAmount}}元</text>
<text wx:if="{{category === 'groupon_order'}}">购买"{{productName}}"</text>
<text wx:if="{{isMultiSf}}">({{storefrontName}})</text>
</view>
<view class="record-item-date">{{date}}</view>
</view>
<view class="record-item-amount">-{{decreaseAmount}}元</view>
</view>
</template>
<view class="record-items">
<block wx:for="{{records}}" wx:key="{{id}}">
<template is="recordItem-{{item.type}}" data="{{...item, isMultiSf}}" />
</block>
</view>
<view wx:if="{{pagination.nextPage === null}}" class="all-records-fetched-hint">无更多记录</view>
</button>
</form>
page {
background-color: #f7f7f7;
}
.record-items {
margin: 0 56rpx;
}
.record-item {
padding: 28rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
color: #3a3a3a;
border-bottom: 4rpx solid #ebebeb;
font-size: 28rpx;
}
.record-item-info {
flex: 0 1 auto;
margin-right: 40rpx;
word-break: break-all;
}
.record-item-date {
margin-top: 12rpx;
color: #8a8a8a;
}
.record-item-amount {
font-size: 32rpx;
white-space: nowrap;
}
.record-item-payment .record-item-amount {
color: #e84c4b;
}
.record-item-recharge .record-item-amount {
color: #90b50d;
}
.all-records-fetched-hint {
font-size: 28rpx;
margin: 56rpx 0;
color: #8a8a8a;
text-align: center;
}
wx.webpackJsonp([31],[],[261]);
\ No newline at end of file
{
"navigationBarTitleText": "余额充值"
}
<import src="../../utils/template/showError.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view wx:if="{{hasFetchedBalance || isWept}}" class="recharge-page">
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<view class="flex-row space-between">
<text>选择充值金额</text>
<view class="flex-row space-between" bindtap="showInstruction">
<text class="light-text" style="margin-right: 10rpx;">充值说明</text>
<image src="/assets/icons/icon-discount-info.png" style="width: 16px;height: 16px" />
</view>
</view>
<view style="display: none;">
<text>{{chargeOptions && chargeOptions.length}}</text>
<text>{{selectedOption && selectedOption.id}}</text>
</view>
<view class="flex-row charge-options">
<block wx:for="{{chargeOptions}}" wx:key="id" wx:for-item="option">
<view class="flex-row charge-option {{(selectedOption && option.id === selectedOption.id) ? 'selected' : ''}} column-{{columnsInOneRow}}" data-id="{{option.id}}" bindtap="selectOption">
<text class="charge-option-amount">{{option.settings.rechargeAmount}}</text>
<text class="charge-option-discount" wx:if="{{option.settings.giftAmount > 0}}">送{{option.settings.giftAmount}}元</text>
<view class="triangle"></view>
</view>
</block>
</view>
<view wx:if="{{selectedOption}}" class="light-text">
支付{{selectedOption.settings.rechargeAmount}}元,实际到账{{selectedOption.settings.rechargeAmount + selectedOption.settings.giftAmount}}元。
</view>
<button type="primary" disabled="{{!selectedOption}}" bindtap="onRecharge" loading="{{recharging}}" class="flex-row" style="margin-top: 80rpx; justify-content: center; opacity: {{selectedOption ? 1 : 0.5}}">
<image src="/assets/icons/logo-wechatpay-white.png" style="width:20px; height: 20px; margin-right: 12rpx;" />
使用微信支付充值
</button>
</view>
<view wx:else class="flex-row center-x" style="height: 100vh;">
<view class="loader" />
</view>
</button>
</form>
.recharge-page {
padding: 40rpx 40rpx 0;
box-sizing: border-box;
}
.charge-options {
flex-wrap: wrap;
margin: 0 -10rpx 10rpx;
}
.charge-option {
border-radius: 12rpx;
background-color: #ffffff;
box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.12);
margin: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.charge-option.column-2 {
width: 325rpx;
min-height: 160rpx;
}
.charge-option.column-3 {
min-height: 120rpx;
width: 210rpx;
}
.charge-option .triangle {
display: none;
}
.charge-option.selected {
box-shadow: inset 0 0 0 4rpx #3ab84f;
}
.charge-option.selected .triangle {
display: block;
position: absolute;
bottom: 4rpx;
right: 4rpx;
width: 0;
height: 0;
border-left: 27rpx solid white;
border-bottom: 25rpx solid #3fb754;
border-bottom-right-radius: 6rpx;
}
.charge-option-amount {
font-size: 32rpx;
margin-bottom: 6rpx;
color: #29293c;
}
.charge-option-discount {
font-size: 24rpx;
color: #ec5360;
}
wx.webpackJsonp([32],[],[262]);
\ No newline at end of file
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="paragraph">
<text class="title">如何使用?</text>
<text class="content">第一步:通过分享或扫码方式邀请好友。</text>
<text class="content">第二步:对方进入你分享的小程序,将获得好礼。</text>
<text class="content">
第三步:对方首次成功使用优惠买单后,你将获得他实际消费金额的{{cashbackPercentage * 100}}%作为返利奖励。返利将直接存入你的余额里,你可以在小程序内消费使用。
</text>
</view>
<view class="paragraph">
<text class="title">规则</text>
<text class="content">1.被邀请人必须是有效邀请才会发放奖励</text>
<text class="content">2.被邀请人定义为:首次使用买单</text>
<text class="content">3.若发生恶意刷单等作弊行为,本小程序有权利清除奖励。</text>
</view>
</button>
</form>
.like-btn {
z-index: 997;
}
.paragraph {
padding: 0 40rpx;
margin-top: 60rpx;
}
.paragraph .title {
font-weight: 600;
}
.paragraph .content {
font-size: 28rpx;
color: #999;
display: block;
margin-top: 20rpx;
line-height: 50rpx;
}
wx.webpackJsonp([33],[],[263]);
\ No newline at end of file
{
"navigationBarTitleText": "出示二维码"
}
\ No newline at end of file
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="share-panel">
<image class="qrcode" src="{{qrcodeUrl}}" />
<text class="share-title">邀请好友扫码</text>
<text class="share-content">你还可以保存小程序码发送给好友</text>
</view>
<view class="share-button" bindtap="saveQrcode">
<image src="{{icon.iconReferralsDownload}}" style="width: 20px;height: 20px;" />
保存小程序码
</view>
</button>
</form>
.like-btn {
z-index: 997;
}
.share-panel {
text-align: center;
padding: 200rpx 100rpx;
}
.share-panel .qrcode {
width: 520rpx;
height: 520rpx;
}
.share-panel .share-title {
display: block;
margin-top: 60rpx;
margin-bottom: 20rpx;
font-size: 40rpx;
font-weight: 500;
}
.share-panel .share-content {
font-size: 28rpx;
color: #999;
}
.share-button {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
bottom: 100rpx;
width: 80%;
height: 96rpx;
border-radius: 10rpx;
color: #ffffff;
background-color: #C3655A;
margin-left: 10%;
}
.share-button image {
margin-right: 8rpx;
}
wx.webpackJsonp([34],[],[264]);
\ No newline at end of file
{
"navigationBarTitleText": "邀请有礼"
}
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="referrals-panel">
<image src="{{icon.iconReferralsImg}}" style="width: 180px; height: 180px;{{isReferralsActive?'':'margin-top: 50px;'}}" />
<view wx:if="{{isReferralsActive}}">
<view class="referrals-content">
<text class="title">邀请好友得<text class="referrals-price">{{referrals.cashbackPercentage * 100}}%</text>红包返利</text>
<text class="intro">TA首次使用小程序买单后,你可以获得实际消费金额的{{referrals.cashbackPercentage * 100}}%作为返现奖励,上不封顶。</text>
</view>
<view class="action-buttons-panel">
<button class="action-button active" open-type="share">
<image mode="widthFix" src="{{icon.iconReferralsShare}}" style="width:16px; height:16px;" class="icon-left" />
分享小程序
</button>
<view class="action-button" bindtap="navigateToShare">
<image mode="widthFix" src="{{icon.iconReferralsQrcode}}" style="width:16px; height:16px;" class="icon-left" />
分享二维码
</view>
</view>
<text class="bonus-text">对方将获得{{referrals.bonus / 100}}元红包</text>
</view>
<view wx:else class="end-tip">
<text>活动已中止</text>
<text>你在此之前的奖励依然有效</text>
</view>
</view>
<view class="bottom">
<view class="action-panel">
<view class="action-item" bindtap="navigateToInfo">
<image src="{{icon.iconReferralsInfo}}" />
<text>使用说明</text>
</view>
<view class="action-item" bindtap="navigateToList">
<image src="{{icon.iconReferralsHistory}}" />
<text>邀请记录</text>
</view>
</view>
<view class="amount-panel">
<text>累计{{amountData.length}}人获得返利<text class="referrals-price"> ¥{{amountData.cashbackAmount / 100}} </text><text class="extra">(已存入余额)</text></text>
</view>
</view>
</button>
</form>
.like-btn {
z-index: 997;
}
.referrals-panel {
text-align: center;
padding: 60rpx 40rpx;
}
.referrals-panel .end-tip {
margin-top: 100rpx;
}
.referrals-panel .end-tip text {
color: #999;
display: block;
margin-top: 10rpx;
font-size: 28rpx;
}
.referrals-panel .referrals-content {
margin-top: 40rpx;
}
.referrals-panel .referrals-content .title {
display: block;
font-size: 40rpx;
font-weight: 500;
margin-bottom: 20rpx;
}
.referrals-panel .referrals-content .title .referrals-price {
font-size: 40rpx;
color: #C3655A;
}
.referrals-panel .referrals-content .intro {
font-size: 28rpx;
color: #999;
}
.referrals-panel .action-buttons-panel {
margin-top: 40rpx;
display: flex;
margin-bottom: 40rpx;
}
.referrals-panel .action-buttons-panel .action-button {
flex: 1;
text-align: center;
padding: 28rpx 0rpx;
border-radius: 10rpx;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
max-height: 100rpx;
border: 2rpx solid #C3655A;
color: #C3655A;
}
.referrals-panel .action-buttons-panel .action-button image {
margin-right: 8rpx;
position: relative;
top: -2rpx;
}
.referrals-panel .action-buttons-panel .action-button.active {
background-color: #C3655A;
color: #ffffff;
margin-right: 20rpx;
}
.referrals-panel .bonus-text {
font-size: 28rpx;
color: #999;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
.bottom .action-panel {
margin: 0 60rpx;
display: flex;
}
.bottom .action-panel .action-item {
border-top: 2rpx solid #e5e5e5;
width: 50%;
height: 100rpx;
line-height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
}
.bottom .action-panel .action-item image {
width: 28rpx;
height: 28rpx;
margin-right: 10rpx;
}
.bottom .action-panel .action-item text {
color: #666;
font-size: 28rpx;
}
.bottom .amount-panel {
height: 110rpx;
line-height: 110rpx;
background-color: #f4f4f4;
}
.bottom .amount-panel text {
font-size: 28rpx;
}
.bottom .amount-panel .referrals-price {
color: #C3655A;
}
.bottom .amount-panel .extra {
color: #999;
}
wx.webpackJsonp([35],[],[265]);
\ No newline at end of file
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="referrals-list-panel">
<view wx:if="{{referralsList.length === 0}}" class="no-order">- 还没有返利记录,快去邀请吧。 -</view>
<view wx:if="{{referralsList.length > 0}}" class="list-item" wx:for="{{referralsList}}" wx:key="">
<view class="list-title">
<text class="name">{{item.nickname}}</text>
<text class="time">{{item.createTime}}</text>
</view>
<text class="content">消费{{item.orderCost / 100}}元,获得返利<text class="referrals-price">{{item.cashback / 100}}</text>元</text>
</view>
</view>
</button>
</form>
.like-btn {
z-index: 997;
}
.referrals-list-panel {
padding: 0 40rpx;
}
.referrals-list-panel .list-item {
padding: 30rpx 0;
border-bottom: 2rpx solid #ebebeb;
}
.referrals-list-panel .list-item .list-title {
display: flex;
justify-content: space-between;
margin-bottom: 10rpx;
}
.referrals-list-panel .list-item .list-title .name {
font-weight: 600;
}
.referrals-list-panel .list-item .list-title .time {
font-size: 28rpx;
color: #999;
}
.referrals-list-panel .list-item .content {
font-size: 28rpx;
color: #999;
}
.referrals-list-panel .list-item .content .referrals-price {
color: #C3655A;
font-size: 28rpx;
}
.referrals-list-panel .no-order {
height: 80rpx;
color: #a9aeb2;
text-align: center;
line-height: 80rpx;
font-size: 0.7em;
}
wx.webpackJsonp([36],[],[266]);
\ No newline at end of file
{
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"disableScroll": true
}
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<view class="image-preview-slider-wrapper">
<swiper class="image-slider" bindchange="onSliderChange" circular="false" duration="{{slideDuration}}" current="{{imgPosition}}">
<swiper-item class="slide-item" wx:for="{{ galleryImages || [] }}" wx:key="item">
<image bindtap="redirectToPage" data-path="{{item.url}}" src="{{item.url}}" mode="aspectFit" />
<view wx:if="{{item.description}}" class="img-description">
<view wx:if="{{isExtend}}" class="des-content">{{item.description}}</view>
<view wx:if="{{isExtend}}" class="des-extend" bindtap="closeExtend">
<image style="width:14px; height:9px;" src="/assets/icons/Artboard-down.png" mode="aspectFill" />
收起
</view>
<view wx:if="{{!isExtend}}" class="des-extend" bindtap="openExtend">
<image style="width:14px; height:9px;" src="/assets/icons/Artboard-up.png" mode="aspectFill" />
展开
</view>
</view>
</swiper-item>
</swiper>
<view class="slide-page">{{imgPosition + 1}} / {{galleryImages.length}}</view>
</view>
</button>
</form>
.like-btn {
z-index: 997;
}
.image-preview-slider-wrapper {
position: relative;
background-color: #000000;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
}
.image-slider {
width: 100vw;
height: 100vh;
}
.slide-item {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
position: relative;
}
.slide-item image {
width: 100%;
height: 99vh;
}
.slide-item .img-description {
display: block;
bottom: 0;
left: 0;
width: 100vw;
position: absolute;
}
.slide-item .img-description .des-content {
padding: 20rpx 40rpx 0 40rpx;
font-size: 28rpx;
color: #ffffff;
line-height: 1.5;
background-color: rgba(0, 0, 0, 0.6);
}
.slide-item .img-description .des-extend {
padding: 20rpx 40rpx;
font-size: 28rpx;
text-align: left;
color: #969696;
line-height: 1.5;
background-color: rgba(0, 0, 0, 0.6);
}
.slide-page {
display: block;
color: #ffffff;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 600;
text-align: center;
width: 100vw;
}
wx.webpackJsonp([37],[],[267]);
\ No newline at end of file
{
"navigationBarTitleText": "会员卡",
"enablePullDownRefresh": true,
"disableScroll": false
}
<import src="../../utils/template/showError.wxml" />
<form report-submit="true" bindsubmit="getFormId" id="formIdGetter">
<button form-type="submit" class="form_button">
<scroll-view scroll-y>
<view wx:if="{{errorMessage}}">
<template is="show-error" data="{{errorMessage}}" />
</view>
<view class="content-wrapper">
<view class="membership-card">
<image class="background-img" src="{{card.cardBackground}}" mode="aspectFill" />
<image class="logo" src="{{card.logoUrlPicComponent}}" mode="aspectFill" />
<view class="card-des">
<text class="title">{{card.brandName}}</text>
<text class="sub-title">{{card.title}}</text>
</view>
<image class="qr" src="/assets/icons/qr-code-black.png" mode="aspectFill" />
<text class="card-number">{{card.cardId}}</text>
</view>
</view>
</scroll-view>
</button>
</form>
.like-btn {
z-index: 997;
}
scroll-view {
height: 100vh;
flex: 1 1 0;
}
.content-wrapper {
padding: 20rpx 40rpx 0 40rpx;
}
.content-wrapper .membership-card {
position: relative;
height: 360rpx;
border-radius: 20rpx;
}
.content-wrapper .membership-card .background-img {
height: 360rpx;
border-radius: 20rpx;
box-shadow: 0 0rpx 30rpx 0 rgba(0, 0, 0, 0.12);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 100;
}
.content-wrapper .membership-card .logo {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
position: absolute;
left: 56rpx;
top: 40rpx;
z-index: 200;
background-color: #000000;
}
.content-wrapper .membership-card .card-des {
position: absolute;
left: 162rpx;
top: 40rpx;
z-index: 200;
}
.content-wrapper .membership-card .card-des .title {
font-size: 32rpx;
color: #000000;
font-weight: 600;
}
.content-wrapper .membership-card .card-des .sub-title {
font-size: 24rpx;
color: #333333;
display: block;
}
.content-wrapper .membership-card .qr {
position: absolute;
right: 70rpx;
top: 46rpx;
z-index: 200;
height: 50rpx;
width: 50rpx;
}
.content-wrapper .membership-card .card-number {
position: absolute;
left: 56rpx;
bottom: 40rpx;
font-size: 32rpx;
z-index: 200;
}
wx.webpackJsonp([38],[],[268]);
\ No newline at end of file
{
"navigationBarTitleText": " ",
"navigationBarBackgroundColor": "#9067b5",
"navigationBarTextStyle": "#fff",
"backgroundColor": "#9067b5"
}
<scroll-view scroll-y scroll-with-animation bindscroll="onScrollChanged" scroll-into-view="{{formView}}" style="height: 100vh; background-color: #9067b5;">
<view style="margin-bottom: -12px;">
<image mode="widthFix" src="http://nzr2ybsda.qnssl.com/images/24978/FgTxiPNK-SdzJWiJu_SKsNYuqN5o.jpg?imageMogr2/strip/thumbnail/1920x9000%3E/quality/90!/interlace/1/format/jpeg" class="first" />
<image mode="widthFix" src="http://nzr2ybsda.qnssl.com/images/24978/FnIWlhX0G677IvJVyP_9waFhCrVv.jpg?imageMogr2/strip/thumbnail/1920x9000%3E/quality/90!/interlace/1/format/jpeg"/>
<image mode="widthFix" src="http://nzr2ybsda.qnssl.com/images/24978/Ftz7CuR5rS5RT8K7Xz4T-Vjq-sAj.jpg?imageMogr2/strip/thumbnail/1920x9000%3E/interlace/1/format/jpeg"/>
<image mode="widthFix" src="http://nzr2ybsda.qnssl.com/images/24978/Ft-GoqvoCGKVGkQjQHOG5p_PXrCf.jpg?imageMogr2/strip/thumbnail/1920x9000%3E/interlace/1/format/jpeg"/>
<image bindtap="makePhoneCall" mode="widthFix" src="http://nzr2ybsda.qnssl.com/images/24978/FpX-7IMu--DT7wOg6iTrQt2DWkhi.jpg?imageMogr2/strip/thumbnail/1920x9000%3E/quality/90!/interlace/1/format/jpeg"/>
</view>
<view class="form">
<view class="center-align" style="margin-bottom: 26px;">
<view style="margin-bottom: 6px;">
<text style=" font-size: 18px; font-weight: 600;">立即咨询\n</text>
</view>
<text style="font-size: 15px;">为你的生意提供最有价值的方案。</text>
</view>
<view id="formView">
<input bindinput="nameInputChanged" placeholder="你的称呼" confirm-type="done" style="margin-bottom: 14px"></input>
<input bindinput="mobileInputChanged" placeholder="手机号" type="number" confirm-type="done" style="margin-bottom: 8px;"></input>
<text style="font-size: 13px;">我们会电话联系你以进一步了解需求</text>
<button bindtap="submit" hover-class="button-hover" disabled="{{!submitEnabled}}">提交信息</button>
</view>
<view class="center-align" style="margin-top: 27px;">
<text bindtap="makePhoneCall" style="font-size: 13px;">你还可以通过官方电话了解我们\n400-100-8181</text>
</view>
</view>
<view style="opacity: {{alpha}};" hidden="{{hiddenBottom}}" class="footer-wrap" bindtap="scrollToBottom">
<a class="footer" hover-class="none">立即咨询</a>
</view>
</scroll-view>
image.first {
min-height: 100vh;
margin-top: 0;
}
image {
width: 100%;
margin-top: -12rpx;
}
input {
height: 88rpx;
padding-left: 24rpx;
box-shadow: rgba(0, 0, 0, 0.18);
border-radius: 8rpx;
background-color: #ffffff;
}
button {
margin-top: 44rpx;
background-color: #f1c35d;
color: white;
border-radius: 6rpx;
box-shadow: rgba(0, 0, 0, 0.11);
height: 88rpx;
}
.form button[disabled] {
background-color: #f1c35d;
color: white;
opacity: 0.6;
}
.footer-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.footer {
text-align: center;
display: block;
font-size: 28rpx;
background: #895AB6;
color: #fff;
line-height: 110rpx;
height: 110rpx;
}
.form {
background-color: #9067b5;
padding: 60rpx 60rpx 50rpx 60rpx;
}
.form text {
color: white;
}
.button-hover {
background-color: #E0B148;
color: white;
}
.placeholder {
margin-left: 24rpx;
font-size: 30rpx;
font-family: PingFangSC;
}
wx.webpackJsonp([39],[],[269]);
\ No newline at end of file
{
"navigationBarTitleText": "微信登录"
}
<view class="auth-view">
<image mode="aspectFill" class="background-image" src="{{iconPath.userInfoBackground}}" />
<view class="tips">
登录后享受更多权益
</view>
<button class="button" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
<image src="{{iconPath.wechatIcon}}" />
微信登录
</button>
</view>
.auth-view {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.auth-view .background-image {
display: float;
position: fixed;
width: 100%;
height: 100%;
}
.auth-view .tips {
margin-bottom: 40rpx;
z-index: 6;
}
.auth-view .button {
background-color: #02b029;
display: flex;
justify-content: center;
align-items: center;
width: 45%;
color: #ffffff;
border-radius: 46rpx;
margin-bottom: 140rpx;
}
.auth-view .button image {
width: 60rpx;
height: 56rpx;
margin-right: 10rpx;
}
.auth-view .button::after {
border: none;
}
<template name="img-content">
<view class="comment-img" style="border:1px solid #f5f5f5;" bindtap="previewCommentImage" data-event-src="{{pictures}}" data-event-image="{{item.pictures}}">
<image style="width: 180rpx; height:180rpx;" mode="aspectFill" src="{{pictures}}"></image>
</view>
</template>
<template name="comment-list">
<view class="comment-list">
<view class="logo-icon">
<image src="{{item.avatarPhoto[0]}}" mode="aspectFill"></image>
</view>
<view class="comment-text">
<view class="t-header">
<text class="name">{{item.nickname}}</text>
<text class="time">{{item.createdAt}}</text>
</view>
<view class="t-body">
<view class="seller-payment">
<block wx:if="{{item.content.length > 82}}">
<block wx:if="{{item.isExtend}}">
{{item.shortContent}}
<text bindtap="onIsExtend" data-event-id="{{item.id}}">更多</text>
</block>
<block wx:else>
{{item.content}}
<text bindtap="onIsExtend" data-event-id="{{item.id}}">收起</text>
</block>
</block>
<block wx:else>
{{item.content}}
</block>
</view>
<view class="comment-img-box">
<view class="comment-picture">
<view wx:for="{{item.lessCommentImg || []}}" wx:key="{{item}}" wx:for-item="pictures">
<template is="img-content" data="{{pictures, item}}"/>
</view>
<view wx:if="{{item && item.pictures.length > 3}}" class="more-image" data-event-src="{{item.moreCommentImg[0]}}" data-event-image="{{item.pictures}}" bindtap="previewCommentImage">
<image style="width: 180rpx; height: 180rpx;" mode="aspectFill" src="{{item.moreCommentImg}}"></image>
<view style="width: 45rpx; height: 33rpx;" class="overlay">
{{item.pictures.length || 0}}
</view>
</view>
<view wx:if="{{item && item.pictures.length === 2 }}">
<view class="store-img">
<image style="width: 180rpx; height: 180rpx;"></image>
</view>
</view>
</view>
<view class="replay-panel" wx:if="{{item.replyStatus === 'visible'}}">
<view class="store-boss">
<text>商家回复:</text>
{{item.reply}}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<template name="coupon-item">
<view
class="coupon-item"
bindtap="receiveCoupon"
data-event-id="{{item.id}}"
data-event-sendmethod="{{item.sendMethod}}"
data-event-orderover="{{item.receivedWhenOrderOver}}"
>
<view class="header">
<text class="currency">¥</text>
<text class="amount">{{item.amount}}</text>
</view>
<view class="line">
<text></text>
<text class="circle left-icon"></text>
<text class="circle right-icon"></text>
</view>
<view class="condition">
<text>{{item.condition}}</text>
</view>
</view>
</template>
<template name="group-buy-center-list">
<view class="groupon-box" bindtap="{{(item.status === 'used' || item.status === 'expired' || item.status === 'disabled' || item.status === 'refunded'|| item.status === 'not_process_refunded') ? '' : 'navigateToGroupBuyAfterSalePage' }}" data-event-groupon="{{item}}">
<view class="top">
<text>{{item.applicableStoreScopeText}}</text>
<view>
<text class="used" wx:if="{{item.status === 'used'}}">已核销</text>
<text class="enabled" wx:if="{{item.status === 'enabled' || item.status === 'can_not_refunded'}}">未使用</text>
<text class="expired" wx:if="{{item.status === 'expired'}}">已过期</text>
<text class="disabled" wx:if="{{item.status === 'disabled'}}">已失效</text>
<text class="refunded" wx:if="{{item.status === 'refunded' || item.status === 'not_process_refunded'}}">已退款</text>
<text class="refundPending" wx:if="{{item.status === 'refund_pending'}}">退款中</text>
</view>
</view>
<view class="content">
<view class="avatar">
<image mode="aspectFill" src="{{item.avatar}}" />
</view>
<view class="description">
<view class="des-top">
<text>{{item.name}}</text>
</view>
<view class="des-bottom">
<text>{{item.booking === 0 ? '无需预约' : '提前预约'}}</text>
<text>有效期至:{{item.endsAt}}</text>
</view>
</view>
</view>
<view class="line"></view>
<view class="bottom">
<view class="price">
<text>共计:</text>
<text>{{item.price}}</text>
</view>
<view class="navigate">
<text>订单核销码</text>
<image mode="aspectFill" src="{{iconPath.iconArrow}}" />
</view>
</view>
<view wx:if="{{item.status === 'used' || item.status === 'expired' || item.status === 'disabled' || item.status === 'refunded'|| item.status === 'not_process_refunded'}}" class="masking-box" data-event-groupon="{{item}}" bindtap="navigateToGroupBuyAfterSalePage"></view>
</view>
</template>
<template name="group-buy-list-wireless-layout">
<view class="group-buy-box wireless-layout" data-event-id="{{item.id}}" bindtap="navigateToGroupBuyDetailPage">
<image mode="aspectFill" src="{{item.picture[0].thumbnailUrl}}" />
<view class="description">
<view class="des-top">{{item.name}}</view>
<view class="des-bottom">
<view class="price">
<view class="current">
{{item.price}}
</view>
<view wx:if="{{item.originalPrice !== '¥--' && item.originalPrice !== '¥0'}}" class="origin">
{{item.originalPrice}}
</view>
</view>
<text wx:if="{{!!item.sales}}" class="cell">已售{{item.sales}}份</text>
</view>
</view>
</view>
</template>
<template name="group-buy-list-wire-layout">
<view class="group-buy-box wire-layout" data-event-id="{{item.id}}" bindtap="navigateToGroupBuyDetailPage">
<image mode="aspectFill" src="{{item.picture[0].thumbnailUrl}}" />
<view class="description">
<text class="des-top">{{item.name}}</text>
<view class="des-bottom">
<view class="price">
<view class="current">
{{item.price}}
</view>
<view wx:if="{{item.originalPrice !== '¥--' && item.originalPrice !== '¥0'}}" class="origin">
{{item.originalPrice}}
</view>
</view>
<text wx:if="{{!!item.sales}}" class="cell">已售{{item.sales}}份</text>
</view>
</view>
</view>
</template>
<template name="image-banner-layout">
<view class="image-banner-wrapper" bindtap="{{item.bannerBindTap}}">
<image src="{{item.bannerPic}}"></image>
</view>
</template>
<template name="luckywheel-banner-simple-layout">
<view class="luckywheel-entrance-simple" bindtap='navigateToLuckyWheel'>
<image ></image>
</view>
</template>
<template name="luckywheel-banner-joyful-layout">
<view class="luckywheel-entrance-joyful">
<image ></image>
</view>
</template>
<template name="luckywheel-banner-layout">
<image src="{{luckyWheelBannerPic}}"></image>
</template>
<template name="points-list">
<view class="point-item">
<view class="content-left">
<text>{{item.name}}</text>
<text>{{item.date}}</text>
</view>
<view class="content-right">
<block wx:if="{{item.type === 'increase'}}">
<text class="point-plus">+{{item.points}}分</text>
</block>
<block wx:if="{{item.type === 'decrease'}}">
<text class="point-minus">-{{item.points}}分</text>
</block>
</view>
</view>
</template>
<template name="received-coupon-list">
<view class="coupon-list">
<form report-submit="true" bindsubmit="getFormId" class="formIdGetter">
<button form-type="submit" class="form_button">
<view class="header">
<view class="information">
<view class="amount">
<block wx:if="{{item.category === 'flat'}}">
<text class="decorator">¥</text>
<text>{{ item.amount }}</text>
</block>
</view>
<view class="condition">
<text>{{item.categoryName}}</text>
<text>{{item.condition}}</text>
</view>
</view>
</view>
<view class="line">
<text></text>
<text class="circle left-icon"></text>
<text class="circle right-icon"></text>
</view>
<view class="data">
<text class="ecommerce-coupon-item-expire">{{ item.startsAt }} - {{ item.endsAt }}</text>
</view>
</button>
</form>
</view>
</template>
<template name="popup">
<view wx:if="{{shouldPopup}}" class="popup-fullscreen popup-shadow" catchtouchmove="{{componentName + '.preventdefault'}}">
<form report-submit="true" bindsubmit="getFormId" class="formIdGetter">
<button form-type="submit" class="form_button">
<view animation="{{popupAnimation}}" style="width:100vh;height:100vh;">
<view class="popup-fullscreen" bindtap="{{ componentName + '.hidePopup' }}">
<view wx:if="{{type === 'poster'}}" class="poster" catchtap="{{ componentName + '.hidePopup' }}">
<view class="poster-image" catchtap="{{ componentName + '.ignoreTap' }}">
<image mode="aspectFill" src="{{picture}}"></image>
</view>
<view class="close-icon">
<image mode="aspectFill" src="/assets/icons/icon-circle-close.png"></image>
</view>
</view>
<view wx:if="{{type === 'member_card'}}" class="membercard" catchtap="{{ componentName + '.ignoreTap' }}">
<image src="/assets/icons/icon-gray-close.png" class="close-icon" bindtap="{{ componentName + '.hidePopup' }}" />
<view class="title">
<text>{{title}}</text>
</view>
<view class="content">
<text>{{content}}</text>
</view>
<view wx:if="{{isShowDefaultCardPicture}}" class="membership-image">
<image src="/assets/images/membership-card.png" />
</view>
<view wx:else class="membership-image card-image" style="background-image: url({{backgroundPicture}})">
<image class="card-logo" src="{{logoPicture}}" />
<image class="card-qrcode" src="/assets/icons/icon-qrcode-card.png" />
<text class="card-text">2748 3228 8776</text>
</view>
<button class="goto-btn" bindtap="{{ componentName + '.getMemberCard' }}">
领取会员卡
</button>
</view>
<view wx:if="{{type === 'coupons'}}" class="coupons" catchtap="{{ componentName + '.ignoreTap' }}">
<view class="wrapper">
<image src="/assets/images/img-redpocket.png" class="redpocket" />
<image src="/assets/icons/icon-close.png" class="close-icon" bindtap="{{ componentName + '.hidePopup' }}" />
<view class="center-content">
<view class="title">
<text>{{title}}</text>
</view>
<view class="content">
<text>{{content}}</text>
</view>
<view class="coupons-content">
<view wx:for="{{receivedCoupons}}" wx:key="{{item}}" wx:for-item="item">
<template is="received-coupon-list" data="{{item}}" />
</view>
</view>
<view class="coupon-count">
<text>已领 {{couponCount}} 张优惠券</text>
</view>
<view class="bottom-text">
<text>已放入优惠券中心,</text>
<text class="underline" bindtap="{{ componentName + '.navigateToCoupons' }}">
前往查看
</text>
</view>
</view>
</view>
</view>
<view wx:if="{{type === 'wheelCampaign'}}">
<view class="luckywheel-popup-theme">
<view class="luckywheel-popup">
<view class="luckywheel-popup-closebtn" bindtap="{{ componentName + '.hidePopup' }}">
<image src="{{closeBtn}}"></image>
</view>
<view class="luckywheel-popup-header">
<image src="{{luckyWheelHeaderPic}}"></image>
</view>
<view class="luckywheel-popup-title">
{{title || '幸运大转盘'}}
</view>
<view class="luckywheel-popup-btn" bindtap="{{ componentName + '.navigateToLuckyWheel' }}">
立即抽奖
</view>
</view>
</view>
</view>
<view wx:if="{{type === 'referrals'}}">
<view class="referrals-popup-content">
<view class="referrals-popup">
<view class="luckywheel-popup-closebtn" bindtap="{{ componentName + '.hidePopup' }}">
<image src="{{closeBtn}}"></image>
</view>
<image src="{{referralsPopup}}" class="referral-background" />
<view class="referrals-text">
<view class="referrals-title">邀请好友可拿返利</view>
<view>
<text class="referrals-persent-number">{{cashbackPercentage}}</text>
<text class="percent-sign">%</text>
</view>
</view>
<view class="navigate-referrals-page" bindtap="{{componentName + '.navigateToReferrals'}}">
<button>立即邀请</button>
</view>
</view>
</view>
</view>
</view>
</view>
</button>
</form>
</view>
</template>
.center-item {
display: flex;
align-items: center;
justify-content: center;
}
.popup-title {
margin: 60rpx auto 0 auto;
text-align: center;
max-width: 510rpx;
}
.popup-title text {
font-weight: 600;
font-size: 40rpx;
}
.popup-content {
margin: 8rpx auto 0 auto;
max-width: 510rpx;
text-align: center;
}
.popup-content text {
font-size: 28rpx;
}
.right-cornor-close {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 40rpx;
height: 40rpx;
}
.popup-shadow {
background-color: rgba(0, 0, 0, 0.5);
}
.popup-fullscreen {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.popup-fullscreen text,
.popup-fullscreen view {
color: #fff;
}
.popup-fullscreen .poster {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.popup-fullscreen .poster .poster-image {
overflow: hidden;
border-radius: 16rpx;
width: 602rpx;
height: 692rpx;
}
.popup-fullscreen .poster .poster-image image {
width: 100%;
height: 100%;
}
.popup-fullscreen .poster .close-icon {
margin-top: 60rpx;
}
.popup-fullscreen .poster .close-icon image {
width: 84rpx;
height: 84rpx;
}
.popup-fullscreen .membercard {
width: 602rpx;
border-radius: 20rpx;
background-color: #ffffff;
overflow: hidden;
position: relative;
}
.popup-fullscreen .membercard text {
color: black;
}
.popup-fullscreen .membercard .title {
margin: 60rpx auto 0 auto;
text-align: center;
max-width: 510rpx;
}
.popup-fullscreen .membercard .title text {
font-weight: 600;
font-size: 40rpx;
}
.popup-fullscreen .membercard .content {
margin: 8rpx auto 0 auto;
max-width: 510rpx;
text-align: center;
}
.popup-fullscreen .membercard .content text {
font-size: 28rpx;
}
.popup-fullscreen .membercard .membership-image {
display: flex;
align-items: center;
justify-content: center;
background-size: 100%;
width: 494rpx;
height: 296rpx;
border-radius: 10rpx;
margin: 56rpx auto 0;
position: relative;
}
.popup-fullscreen .membercard .membership-image .card-logo {
position: absolute;
width: 86rpx;
height: 86rpx;
border-radius: 50%;
left: 56rpx;
top: 40rpx;
}
.popup-fullscreen .membercard .membership-image .card-qrcode {
display: block;
position: absolute;
width: 50rpx;
height: 50rpx;
right: 70rpx;
top: 46rpx;
}
.popup-fullscreen .membercard .membership-image .card-text {
position: absolute;
left: 56rpx;
bottom: 40rpx;
color: #fff;
font-size: 32rpx;
}
.popup-fullscreen .membercard .goto-btn {
display: flex;
align-items: center;
justify-content: center;
margin-top: 74rpx;
margin-bottom: 42rpx;
color: white;
width: 530rpx;
height: 88rpx;
background-color: #3a3a3a;
border-radius: 8rpx;
}
.popup-fullscreen .membercard .close-icon {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 40rpx;
height: 40rpx;
}
.popup-fullscreen .coupons {
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.popup-fullscreen .coupons view {
overflow: visible;
}
.popup-fullscreen .coupons .wrapper {
position: relative;
}
.popup-fullscreen .coupons .wrapper .redpocket {
width: 320rpx;
height: 320rpx;
position: absolute;
top: -180rpx;
left: 140rpx;
}
.popup-fullscreen .coupons .wrapper .title {
margin: 60rpx auto 0 auto;
text-align: center;
max-width: 510rpx;
z-index: 100;
margin-top: 54rpx;
}
.popup-fullscreen .coupons .wrapper .title text {
font-weight: 600;
font-size: 40rpx;
}
.popup-fullscreen .coupons .wrapper .content {
margin: 8rpx auto 0 auto;
max-width: 510rpx;
text-align: center;
}
.popup-fullscreen .coupons .wrapper .content text {
font-size: 28rpx;
}
.popup-fullscreen .coupons .wrapper .center-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
width: 600rpx;
background-color: #d74d42;
border-radius: 16rpx;
color: white;
}
.popup-fullscreen .coupons .wrapper .close-icon {
position: absolute;
top: 30rpx;
right: 30rpx;
width: 40rpx;
height: 40rpx;
width: 30rpx;
height: 30rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 32rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list {
height: 184rpx;
background-color: #ffffff;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 2rpx 0 rgba(0, 0, 0, 0.12);
border-radius: 12rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
box-sizing: content-box;
height: 120rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information {
display: flex;
align-items: center;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .amount {
width: 120rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .amount .decorator {
font-size: 28rpx;
margin: 0rpx 4rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .amount text {
color: #e84c4b;
font-weight: 400;
font-size: 50rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .condition {
margin-left: 10rpx;
width: 300rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .condition text {
display: block;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .condition text:first-child {
font-weight: 500;
color: #3a3a3a;
line-height: 36rpx;
font-size: 26rpx;
margin-bottom: 10rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .header .information .condition text:last-child {
color: #8a8a8a;
line-height: 34rpx;
font-size: 26rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line {
padding: 0 34rpx;
position: relative;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line text:first-child {
height: 2rpx;
border-radius: 8rpx;
background-color: #f3f3f3;
display: block;
width: 100%;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line .circle {
width: 12rpx;
height: 12rpx;
display: block;
border: 2rpx solid #e84c4b;
border-radius: 100%;
position: absolute;
background-color: #e84c4b;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line .left-icon {
left: -10rpx;
bottom: -10rpx;
box-shadow: 2rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.12);
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .line .right-icon {
right: -10rpx;
bottom: -10rpx;
box-shadow: -2rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.12);
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .data {
height: 60rpx;
padding: 0 40rpx;
}
.popup-fullscreen .coupons .wrapper .coupons-content .coupon-list .data text {
font-size: 22rpx;
color: #8a8a8a;
line-height: 66rpx;
}
.popup-fullscreen .coupons .wrapper .coupon-count {
text-align: center;
margin-top: -10rpx;
}
.popup-fullscreen .coupons .wrapper .coupon-count text {
font-size: 24rpx;
letter-spacing: 0.12rpx;
}
.popup-fullscreen .coupons .wrapper .bottom-text {
margin-top: 32rpx;
margin-bottom: 26rpx;
text-align: center;
}
.popup-fullscreen .coupons .wrapper .bottom-text text {
font-size: 24rpx;
letter-spacing: 0.12rpx;
}
.popup-fullscreen .coupons .wrapper .bottom-text .underline {
text-decoration: underline;
}
.luckywheel-popup-theme .luckywheel-popup {
position: relative;
width: 584rpx;
height: 592rpx;
border-radius: 20rpx;
background-color: #fff;
}
.luckywheel-popup-theme .luckywheel-popup .luckywheel-popup-closebtn {
position: absolute;
top: 12rpx;
right: 32rpx;
}
.luckywheel-popup-theme .luckywheel-popup .luckywheel-popup-closebtn image {
width: 46rpx;
height: 46rpx;
}
.luckywheel-popup-theme .luckywheel-popup-header {
margin: 0 auto;
width: 561rpx;
height: 290rpx;
}
.luckywheel-popup-theme .luckywheel-popup-header image {
width: 100%;
height: 100%;
}
.luckywheel-popup-theme .luckywheel-popup-title {
margin-top: 72rpx;
font-size: 32rpx;
color: #000;
line-height: 45rpx;
text-align: center;
}
.luckywheel-popup-theme .luckywheel-popup-btn {
margin: 0 auto;
margin-top: 39rpx;
width: 430rpx;
height: 108rpx;
border-radius: 6rpx;
text-align: center;
line-height: 108rpx;
font-size: 36rpx;
color: #fff;
background-color: #6c34c5;
}
.referrals-popup {
position: relative;
}
.referrals-popup .luckywheel-popup-closebtn {
position: absolute;
top: 0rpx;
right: 10rpx;
width: 60rpx;
height: 60rpx;
}
.referrals-popup .luckywheel-popup-closebtn image {
width: 100%;
height: 100%;
}
.referrals-popup .referral-background {
display: block;
width: 720rpx;
height: 812rpx;
}
.referrals-popup .referrals-text {
position: absolute;
top: 60rpx;
left: 50%;
text-align: center;
transform: translateX(-50%);
}
.referrals-popup .referrals-text .referrals-title {
font-size: 36rpx;
color: #8a572a;
font-weight: bold;
}
.referrals-popup .referrals-text .referrals-persent-number {
font-size: 130rpx;
color: #df5549;
vertical-align: middle;
font-weight: bold;
}
.referrals-popup .referrals-text .percent-sign {
vertical-align: top;
font-size: 80rpx;
color: #df5549;
font-weight: bold;
margin-left: 15rpx;
}
.referrals-popup .navigate-referrals-page {
position: absolute;
bottom: 200rpx;
left: 50%;
box-shadow: 0 0 10rpx 0 #ce4a37;
transform: translateX(-50%);
}
.referrals-popup .navigate-referrals-page button {
width: 480rpx;
height: 88rpx;
color: #8a572a;
line-height: 88rpx;
background-color: #ffdd8d;
box-shadow: inset 0 7rpx 10rpx 0 #f7e9c9;
}
.referrals-popup .navigate-referrals-page button::after {
border: 0;
}
<template name="show-error">
<view class="error-message flex-row">
<icon type="info" size="16" color="#fff" style="vertical-align: middle;" />
<text>{{errorMessage}}</text>
</view>
</template>
<template name="group-buy-store-list">
<view class="group-buy-store-list-box">
<view class="address" data-event-address="{{item}}" bindtap="navigateToInnerMap">
<text>
{{item.name}}({{item.brand}})
</text>
<text>{{item.address}}</text>
</view>
<view class="phone" data-event-phone="{{item.phone}}" bindtap="makePhoneCall">
<image mode="aspectFill" src="{{iconPath.iconStorePhone}}" />
</view>
</view>
</template>
<template name="text-node">
<block wx:for="{{child}}" wx:key="index">
<text wx:if="{{item.node === 'text'}}">{{item.text}}</text>
<block wx:if="{{item.node !== 'text'}}">
<block wx:for="{{item.child}}" wx:for-item="item2" wx:key="index">
<text wx:if="{{item2.node === 'text'}}">{{item2.text}}</text>
<block wx:if="{{item2.node !== 'text'}}">
<block wx:for="{{item2.child}}" wx:for-item="item2" wx:key="index">
<text wx:if="{{item3.node === 'text'}}">{{item3.text}}</text>
<block wx:if="{{item3.node !== 'text'}}">
</block>
</block>
</block>
</block>
</block>
</block>
</template>
<template name="topBar">
<view class="top-bar" style="background-color:{{bgColor}}; opacity: 0.85;">
<view class="{{'nav-item ' + (tabState == 'hint' ? 'selected' : '')}}" bindtap="switchToHintTab">
<view style="color:{{ bgColor === '#ffffff' ? '#000000' : '#ffffff'}};">使用说明</view>
</view>
<view class="{{'nav-item ' + (tabState == 'record' ? 'selected' : '')}}" bindtap="switchToRecordTab">
<view style="color:{{ bgColor === '#ffffff' ? '#000000' : '#ffffff'}};">积分记录</view>
</view>
</view>
</template>
<template name="groupBuyTopBar">
<view class="top-bar">
<view class="{{'nav-item ' + (tabState == 'hint' ? 'selected' : '')}}" bindtap="switchToHintTab">
<view>使用说明</view>
</view>
<view class="{{'nav-item ' + (tabState == 'question' ? 'selected' : '')}}" bindtap="switchToQuestionTab">
<view>常见问题</view>
</view>
</view>
</template>
<template name="write-comment-img-list">
<view class="comment-img" bindtap="previewImage" data-event-src="{{item.image}}">
<image style="width: 165rpx; height:165rpx;" mode="aspectFill" src="{{item.image}}" data-index="{{index}}"></image>
<view class="delete-img" data-index="{{item.hash}}" catchtap="deleteImg">
<image style="width: 26rpx; height:26rpx;" mode="aspectFill" src="/assets/icons/artboard.png"></image>
</view>
</view>
</template>
\ No newline at end of file
var data = 'init data'
function getData() {
return data
}
function setData(value) {
data = value
}
module.exports = {
getData: getData,
setData: setData
}
\ No newline at end of file
// import { connect } from 'root/wmp-redux'
// import { fetchPosts, likePost } from 'root/actions/blog/post'
import urls from '/constants/blog/urls'
// import mixinUrls from '/constants/ecommerceMixinBlog/urls'
import iconPaths from '/constants/blog/iconPaths'
// import { setComments } from 'root/actions/blog/comment'
// import { fetchPostSharing } from 'root/actions/blog/sharing'
// import { setError } from 'root/actions/common/error'
// import { getError } from 'root/selectors/common/error'
// import { getCategories } from 'root/selectors/blog/category'
// import { getPosts } from 'root/selectors/blog/post'
// import { getBanners, getShortcuts } from 'root/selectors/blog/setting'
// import { getUserInfo } from 'root/selectors/common/global'
// import {
// getStyle,
// getAttr,
// getNavigationBar,
// } from 'root/selectors/common/global'
// import { getMixLayout } from 'root/utils/helpers/helper'
// import { getComponents } from 'root/selectors/common/componentsSelector'
// import {
// login,
// bindGetUserInfoHandler
// } from 'wechat_common/utils/wrappedWXTool'
// import { trackUI } from 'wechat_common/tracker/index.bs'
// // // import shareView from 'root/templates/shareView/shareView'
// import { getTeamMemberId } from 'root/selectors/presentation/teamMemberSelector'
const { iconComment, iconLike, iconSearch, iconSearchWhite } = iconPaths
const component = {
properties: {
showSlider: {
type: Boolean,
value: false
},
showShortcuts: {
type: Boolean,
value: false
},
showBlogPosts: {
type: Boolean,
value: true
}
},
data: {
currentTab: 'post',
dotPosition: 0,
iconComment: '/assets/blog/icon-comment.png',
iconLike: '/assets/blog/icon-like.png',
iconSearch: '/assets/blog/icon-search.png',
iconSearchWhite: '/assets/blog/icon-white-search.png',
shareLoading: false,
selectedPostId: '',
currentComment: '',
isCommenting: false,
posts: [
{
postedToWechat: false,
publishedAt: '1 个月前',
settings: {
hideBlogDate: null,
},
relativeUrl: '/blog/96789f79667',
approvedCommentsCount: 0,
pendingCommentsCount: 0,
publicUrl: 'http://site-376580-3028-5672.sxl.cn/blog/96789f79667',
updatedAt: '2018-07-07T02:04:29.037-07:00',
headerImage: {
storageKey: null,
backgroundVariation: null,
noCompression: null,
videoHtml: null,
h: null,
linkTarget: null,
url: '//res.cloudinary.com/hrscywv4p/image/upload/c_limit,fl_progressive,h_1200,q_90,w_2000/wxewyckdmotqycwfb8pk.jpg',
defaultValue: null,
linkInputEnabled: null,
s: null,
descriptionInputEnabled: null,
useImage: null,
videoUrl: null,
linkUrl: null,
textColor: 'light',
w: null,
format: null,
userClassName: null,
type: 'Blog.BackgroundImage',
id: 'f_0e58f04a-374f-47d0-a5f6-93205fa418c9',
storage: null,
sizing: 'cover',
},
state: 'published',
firstContentImage: null,
iconUrl: 'https://res.cloudinary.com/hrscywv4p/image/upload/c_limit,fl_progressive,h_1200,q_90,w_2000/wxewyckdmotqycwfb8pk.jpg',
allTagsList: [
'及',
],
title: '添加博客标题',
pinned: false,
icon: {
storageKey: null,
backgroundVariation: null,
noCompression: null,
videoHtml: null,
h: null,
linkTarget: null,
url: '//res.cloudinary.com/hrscywv4p/image/upload/c_limit,fl_progressive,h_1200,q_90,w_2000/wxewyckdmotqycwfb8pk.jpg',
defaultValue: null,
linkInputEnabled: null,
s: null,
descriptionInputEnabled: null,
useImage: null,
videoUrl: null,
linkUrl: null,
textColor: 'light',
w: null,
format: null,
userClassName: null,
type: 'Blog.BackgroundImage',
id: 'f_0e58f04a-374f-47d0-a5f6-93205fa418c9',
storage: null,
sizing: 'cover',
},
blurb: '',
id: 1622941,
createdAt: '2018-06-27T05:53:29.801-07:00',
likesString: '',
},
{
postedToWechat: false,
publishedAt: '1 个月前',
settings: {
hideBlogDate: null,
},
relativeUrl: '/blog/5671fc1179e',
approvedCommentsCount: 0,
pendingCommentsCount: 0,
publicUrl: 'http://site-376580-3028-5672.sxl.cn/blog/5671fc1179e',
updatedAt: '2018-07-07T02:04:07.562-07:00',
headerImage: {
storageKey: null,
backgroundVariation: null,
noCompression: null,
videoHtml: null,
h: null,
linkTarget: null,
url: '//assets.strikingly.com/static/backgrounds/blur/1.jpg',
defaultValue: null,
linkInputEnabled: null,
s: null,
descriptionInputEnabled: null,
useImage: null,
videoUrl: null,
linkUrl: null,
textColor: 'light',
w: null,
format: null,
userClassName: null,
type: 'Blog.BackgroundImage',
id: 'f_f163553c-fe33-451c-b8b8-4e11c7beffbc',
storage: null,
sizing: 'cover',
},
state: 'published',
firstContentImage: null,
iconUrl: 'https://assets.strikingly.com/static/backgrounds/blur/1.jpg',
allTagsList: [],
title: '添加博客标题',
pinned: false,
icon: {
storageKey: null,
backgroundVariation: null,
noCompression: null,
videoHtml: null,
h: null,
linkTarget: null,
url: '//assets.strikingly.com/static/backgrounds/blur/1.jpg',
defaultValue: null,
linkInputEnabled: null,
s: null,
descriptionInputEnabled: null,
useImage: null,
videoUrl: null,
linkUrl: null,
textColor: 'light',
w: null,
format: null,
userClassName: null,
type: 'Blog.BackgroundImage',
id: 'f_f163553c-fe33-451c-b8b8-4e11c7beffbc',
storage: null,
sizing: 'cover',
},
blurb: '',
id: 1694849,
createdAt: '2018-07-07T02:03:29.403-07:00',
likesString: '',
},
],
isFetchingPosts: false,
paginationPosts: {
currentPage: 1,
previousPage: null,
nextPage: null,
perPage: 8,
totalPages: 1,
totalCount: 2,
},
enableComments: true,
isLikingPost: false,
categories: [
{
name: '及',
count: 1,
id: 28066,
url: 'https://assets.sxlcdn.com/images/ecommerce/ecommerce-default-image.png',
},
],
isFetchingCategories: false,
siteId: '11417761',
layout: 'a',
searchEnable: false,
background: '#fff',
isWhiteBackground: true,
companyName: '',
name: '',
logoUrl: 'https://user-assets.sxlcdn.com/images/796/FrHBzlUnK-Gt018qFnq8-DKwvrc3.jpg?imageMogr2/strip/thumbnail/500x1000>/quality/90!/interlace/1/format/jpg',
errorMessage: '',
nickName: '',
avatarUrl: '',
shortcuts: [
{
iconType: 'square',
id: 'cc7e704a-b47d-4bdf-9c7f-ae40e1de4fd3',
type: 'page',
url: 'https://user-assets.sxlcdn.com/images/376562/Frj2f53OLrwiz2ArUZCnt1SExckY.png?imageMogr2/strip/thumbnail/800x450>/format/png',
name: 'A',
value: '/pages/ecommerce/about/about',
linkError: false,
},
{
iconType: 'square',
id: 'a8b6d2dd-9e6b-45b3-aa09-04a6609f6ffa',
type: 'page',
url: 'https://user-assets.sxlcdn.com/images/376562/Fsr-ix0nhHO9UJpWMqJxm86l6ZCA.png?imageMogr2/strip/thumbnail/800x450>/format/png',
name: 'B',
value: '/pages/ecommerce/about/about',
linkError: false,
},
{
iconType: 'square',
id: 'e36d9873-0bac-48aa-abbf-5029946945d9',
type: 'page',
url: 'https://user-assets.sxlcdn.com/images/376562/FmfiJDD_rafmiMhEGUey1352Wze4.jpg?imageMogr2/strip/thumbnail/800x450>/interlace/1/format/jpg',
name: 'C',
value: '/pages/ecommerce/about/about',
linkError: false,
},
],
shortcutsFirstLine: [],
shortcutsSecondLine: [],
shortcutsSecondLineWrapperClass: ' ',
banners: [
{
type: '',
url: 'https://uploads.sxlcdn.com/static/backgrounds/patterns/26.jpg',
},
{
type: '',
url: 'https://user-assets.sxlcdn.com/images/376562/Frj2f53OLrwiz2ArUZCnt1SExckY.png?imageMogr2/strip/thumbnail/800x450>/format/png',
},
{
type: '',
url: 'https://uploads.sxlcdn.com/static/backgrounds/patterns/24.jpg',
},
{
type: '',
url: 'https://uploads.sxlcdn.com/static/backgrounds/patterns/16.jpg',
},
],
tabs: [
{
id: 'post',
name: '文章',
},
{
id: 'category',
name: '分类',
},
],
mix: [
'store',
'blog',
],
navigationBar: {},
showContactBtn: false,
showSlider: true,
showShortcuts: true,
showBlogPosts: true,
ifInPageDesign: true,
isWept: false,
showShareVariation: false,
shareAnimation: {
actions: [
{
animates: [
{
type: 'translateY',
args: [
'100%',
],
},
],
option: {
transformOrigin: '50% 50% 0',
transition: {
duration: 400,
timingFunction: 'ease',
delay: 0,
},
},
},
],
},
},
ready() {
wx.setNavigationBarTitle({ title: this.data.name })
},
handleTab(event) {
this.setData({
currentTab: event.currentTarget.dataset.id
})
},
handleSearch() {
// let { mix } = this.data,
url = urls.PAGES.POST_SEARCH
// if (mix && mix.length == 2) {
// if (mix[0] == 'store') {
// switch (mix[1]) {
// case 'blog':
// url = mixinUrls.PAGES.SEARCH
// break
// default:
// break
// }
// }
// }
wx.navigateTo({ url })
},
handlePost(e) {
const { id } = e.currentTarget.dataset
wx.navigateTo({ url: `${urls.PAGES.POST_DETAIL}?postId=${id}` })
},
handleProduct(e) {
this.handlePost(e)
},
handleCategory(e) {
const { id, name } = e.currentTarget.dataset
wx.navigateTo({
url: `${urls.PAGES.POST_LIST}?category=${name}&categoryId=${id}`
})
},
handlePage(e) {
const { id } = e.currentTarget.dataset
const navigateUrl = [
'/pages/blog/about/about',
'/pages/ecommerce/about/about'
]
if (navigateUrl.includes(id)) {
wx.navigateTo({ url: id })
} else {
wx.switchTab({ url: id })
}
},
handleSliderChange(e) {
this.setData({
dotPosition: e.detail.current
})
},
makePhoneCall(e) {
if (wx.isWept) {
this.setError('预览模式下暂不支持拨打电话,请手机预览')
} else {
const { phone = '' } = e.currentTarget.dataset
wx.makePhoneCall({
phoneNumber: phone
})
}
},
liveChat() {
if (wx.isWept) {
this.setError('预览模式下暂不支持客服功能,请手机预览')
}
},
share() {
if (wx.isWept) {
this.setError('预览模式下暂不支持分享功能,请手机预览')
}
},
navigation(e) {
const addressDetail = e.currentTarget.dataset.address
const addressLocation = e.currentTarget.dataset.coordinate
if (addressLocation) {
const latitude = addressLocation.lat
const longitude = addressLocation.lng
wx.openLocation({
latitude,
longitude,
scale: 18,
address: addressDetail
})
}
},
loadMorePosts() {
const { paginationPosts, siteId } = this.data
if (paginationPosts.nextPage) {
this.fetchPosts(siteId, 'all', paginationPosts.nextPage)
}
},
handleCard(e) {
const { post } = e.currentTarget.dataset
this.setData({ currentPost: post })
},
onShareAppMessage() {
const { currentPost = {}, showShareVariation } = this.data
const { title, id } = currentPost
if (id && showShareVariation) {
return {
title,
path: `${urls.PAGES.POST_DETAIL}?postId=${id}`
}
} else {
return {
path: `${urls.PAGES.POST_INDEX}`
}
}
},
sharePicture() {
const { siteId, currentPost } = this.data
const { id: postId } = currentPost
this.setData({
shareLoading: true
})
// this.fetchPostSharing(siteId, {
// scene: postId.toString(),
// page: 'pages/blog/postDetail/postDetail'
// }).then(res => {
// trackUI(
// 'shareImageBlogPost',
// postId,
// JSON.stringify({
// team_member_id: this.data.teamMemberId || -1,
// key: `shareImageBlogPost${postId}`
// })
// )
// this.setData({
// shareLoading: false
// })
// if (res.success) {
// wx.navigateTo({
// url: `${urls.PAGES.POST_SHARE}?postId=${postId}`
// })
// } else {
// wx.showModal({
// title: '网络错误',
// content: '请稍后重试',
// showCancel: false,
// success: res => {
// if (res.confirm) {
this.closeShareView()
// }
// }
// })
// }
// })
},
handleLike(e) {
const { isLikingPost } = this.data
const { postId, isLiked } = e.currentTarget.dataset
const cb = userInfo => {
const { nickName, avatarUrl } = userInfo
this.setData({
selectedPostId: ''
})
if (!isLikingPost) {
this.likePost(!isLiked, postId, nickName, avatarUrl)
if (!isLiked) {
trackUI(
'likeBlogPost',
postId,
JSON.stringify({
team_member_id: this.data.teamMemberId || -1,
key: `likeBlogPost${postId}`
})
)
}
}
}
bindGetUserInfoHandler(e, cb)
},
switchOperation(e) {
const { post } = e.currentTarget.dataset
const { selectedPostId } = this.data
this.setData({
isCommenting: false,
currentComment: '',
selectedPostId:
selectedPostId && selectedPostId == post.id ? '' : post.id,
currentPost: post
})
},
handleComment(e) {
const cb = () => {
this.setData({ isCommenting: true, selectedPostId: '' })
}
bindGetUserInfoHandler(e, cb)
},
handleInputComment(e) {
this.setData({ currentComment: e.detail.value })
},
handleSendComment(e) {
const { currentComment } = this.data
if (!currentComment || !currentComment.trim()) {
this.setError('评论内容不能为空')
} else if (wx.isWept) {
this.setError('预览模式下暂不支持,请手机预览')
} else {
this.setData({ isCommenting: false })
this.createComment(e.detail.formId)
}
},
createComment(formId) {
const { nickName, avatarUrl, currentPost, currentComment } = this.data
const that = this
this.setData({
submitting: true
})
const sendData = {
content: currentComment,
nickname: nickName,
wechat_photo: [avatarUrl],
settings: {
form_id: formId
}
}
login({
success: loginRes => {
sendData.code = loginRes.code
that.setComments(
currentPost.id,
sendData,
() => {
that.setData({
submitting: false,
currentComment: ''
})
wx.showToast({
title: '评论成功,审核通过后显示在留言列表',
icon: 'none',
duration: 2000
})
trackUI(
'commentBlogPost',
currentPost.id,
JSON.stringify({
team_member_id: this.data.teamMemberId || -1,
key: `commentBlogPost${currentPost.id}`
})
)
},
() => {
that.setData({ submitting: false })
}
)
},
fail() {
wx.showModal({
content: '请求失败,请重试'
})
that.setData({
submitting: false
})
}
})
},
handleGlobalTab() {
this.setData({
selectedPostId: '',
isCommenting: false,
currentComment: ''
})
},
onPullDownRefresh() {
this.fetchPosts(this.data.siteId, 'all', 1).then(res =>
wx.stopPullDownRefresh()
)
}
}
// function mapStateToProps(state) {
// const { list: categories, isFetching: isFetchingCategories } = getCategories(
// state,
// ),
// {
// list: posts,
// isFetching: isFetchingPosts,
// pagination: paginationPosts,
// isLikingPost,
// } = getPosts(state, urls.PAGES.POST_INDEX),
// { mainBackground: background, isWhiteBackground } = getStyle(state),
// { siteId, layout, searchEnable, mix, companyName, name, logoUrl } = getAttr(
// state,
// ),
// { nickName, avatarUrl } = getUserInfo(state),
// { navigationBar } = getNavigationBar(state),
// {
// shortcuts,
// shortcutsFirstLine,
// shortcutsSecondLine,
// shortcutsSecondLineWrapperClass,
// } = getShortcuts(state),
// { errorMessage } = getError(state),
// tabs = [{ id: 'post', name: '文章' }]
// if (categories && categories.length) {
// tabs.push({ id: 'category', name: '分类' })
// }
// const showContactBtn = state.getIn(['globalData', 'attr', 'showContactBtn'])
// let blogLayout = getMixLayout(mix, layout, 'blog')
// let ifInPageDesign = false
// let components = []
// let shortcutsLayout = ''
// if (state.get('components') !== null) {
// components = getComponents(state, 'blog')
// ifInPageDesign = true
// const blogAndCategoryComp = components.find(
// comp => comp.type === 'blogAndCategory',
// )
// const shortcutsComp = components.find(comp => comp.type === 'shortcuts')
// if (blogAndCategoryComp && blogAndCategoryComp.settings) {
// blogLayout = blogAndCategoryComp.settings.layout || 'a'
// }
// if (shortcutsComp && shortcutsComp.settings) {
// shortcutsLayout = shortcutsComp.settings.layout || 'circle'
// }
// }
// // hack temporarily, will be removed in v2
// if (Array.isArray(mix) && mix[0] === 'presentation') {
// ifInPageDesign = false
// }
// const enableComments = state.getIn([
// 'blog',
// 'setting',
// 'settings',
// 'enableComments',
// ])
// const teamMemberId = getTeamMemberId(state)
// return
// }
// function mapDispatchToProps(dispatch) {
// return {
// fetchPosts: (siteId, category, pageNum) =>
// dispatch(fetchPosts(urls.PAGES.POST_INDEX, siteId, category, pageNum)),
// setError: errorMessage => dispatch(setError(errorMessage)),
// fetchPostSharing: (siteId, data) =>
// dispatch(fetchPostSharing(siteId, data)),
// setComments: (postId, setData, successCb, failCb) =>
// dispatch(setComments(postId, setData, successCb, failCb)),
// likePost: (status, postId, nickName, avatarUrl) =>
// dispatch(likePost(status, postId, nickName, avatarUrl)),
// }
// }
// const enhance = (shareView, connect(mapStateToProps, mapDispatchToProps))
Component(component)
{
"enablePullDownRefresh": true
}
<import src="/templates/postCard/postCard.wxml"/>
<import src="/templates/categoryCard/categoryCard.wxml"/>
<import src="/templates/tabs/tabs.wxml"/>
<import src="/templates/loaderPage/loaderPage.wxml"/>
<import src="/templates/loaderBar/loaderBar.wxml"/>
<import src="/templates/slider/slider.wxml"/>
<import src="/templates/shortcuts/shortcuts.wxml"/>
<import src="/templates/messageModal/messageModal.wxml"/>
<import src="/templates/shareView/shareView.wxml"/>
<view class="post-index">
<block wx:if="{{showBlogPosts}}">
<template
is='tabs'
data="{{background, isWhiteBackground, currentTab, hasSearch: searchEnable, iconSearchWhite, iconSearch, tabs, handleTab, handleSearch}}"
/>
</block>
<scroll-view
wx:if="{{!isFetchingPosts || posts.length > 0}}"
style="height: {{categories.length ? 'calc(100vh - 80rpx)' : '100vh'}}; box-sizing: border-box; background-color: {{layout === 'd' ? 'white': '#f4f4f4'}}"
scroll-y="true" hidden="{{currentTab == 'category'}}" lower-threshold="80"
bindscrolltolower="loadMorePosts"
bindtap="handleGlobalTab"
>
<block wx:if="{{showSlider && banners && banners.length}}">
<template is="slider" data="{{ sliders: banners, dotPosition, hasVideoBanner, handleProduct, handleCategory, handlePage, handleSliderChange }}" />
</block>
<block wx:if="{{shortcuts && shortcuts.length}}">
<template
is="shortcuts"
data="{{ shortcuts, shortcutsFirstLine, shortcutsSecondLine, shortcutsSecondLineWrapperClass, handleProduct, handleCategory, handlePage, makePhoneCall, showContactBtn }}"
/>
</block>
<block wx:if="{{showBlogPosts}}">
<view class="posts">
<block wx:for="{{posts}}" wx:key="id" wx:for-item="item">
<template wx:if="{{layout === 'a'}}" is="post-card-a" data="{{...item, handlePost}}"/>
<template wx:if="{{layout === 'b'}}" is="post-card-b" data="{{...item, handlePost}}"/>
<template wx:if="{{layout === 'c'}}" is="post-card-c" data="{{...item, handlePost}}"/>
<template wx:if="{{layout === 'd'}}" is="post-card-moment" data="{{item, index, companyName, logoUrl, name, handleCard, handlePost, handleLike, handleComment, openShareView, selectedPostId, enableComments}}"/>
</block>
</view>
<template
is='loader-bar'
data="{{isLoading: posts.length > 0 && paginationPosts.nextPage, emptyText: posts && posts.length === 0 && '- 暂无文章 -', noMoreText:posts && posts.length !== 0 && paginationPosts.currentPage === paginationPosts.totalPages && '- 无更多文章 -', style:'margin: 0 0 40rpx 0'}}"
/>
</block>
</scroll-view>
<template wx:else is='loader-page'/>
<scroll-view
style="height: {{categories.length ? 'calc(100vh - 80rpx)' : '100vh'}}; box-sizing: border-box;"
scroll-y="true" hidden="{{currentTab == 'post'}}" bindtap="handleGlobalTab">
<view class="categories">
<block wx:for="{{categories}}" wx:key="id" wx:for-item="item">
<template is="category-card" data="{{...item, handleCategory}}"/>
</block>
</view>
</scroll-view>
<form bindsubmit="handleSendComment">
<view class="comment-form" wx:if="{{isCommenting}}">
<input placeholder-class="comment-placeholder" class="comment-input" placeholder="评论" value="{{currentComment}}" bindinput="handleInputComment" cursor-spacing="8" focus="{{true}}"/>
<button class="comment-btn {{currentComment ? '' : 'disabled'}}" formType="submit">发送</button>
</view>
</form>
</view>
<view wx:if="{{errorMessage}}">
<template is="message-modal" data="{{message: errorMessage}}" />
</view>
<template is="share-view" data="{{shareLoading, sharePicture, shareAnimation, showShareVariation, closeShareView, openShareView}}"/>
@import '/templates/tabs/tabs.wxss'
@import '/templates/slider/slider.wxss'
@import '/templates/shortcuts/shortcuts.wxss'
@import '/templates/shareView/shareView.wxss'
@import '/templates/postCard/postCard.wxss'
@import '/templates/messageModal/messageModal.wxss'
@import '/templates/loaderPage/loaderPage.wxss'
@import '/templates/loaderBar/loaderBar.wxss'
@import '/templates/categoryCard/categoryCard.wxss'
.post-index {
display: flex;
flex-direction: column;
height: 100vh;
}
.post-index text {
font-size: 34rpx;
color: #fff;
}
.post-index scroll-view {
height: 100vh;
flex: 1 1 0%;
}
.post-index .posts {
padding: 26rpx;
}
.post-index .categories {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
padding: 30rpx 18rpx;
background: #f4f4f4;
}
.comment-form {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 15rpx 30rpx;
border: 2rpx solid #e2e4e7;
background-color: #f4f4f4;
}
.comment-form .component-placeholder {
font-size: 28rpx;
color: #c6c9cd;
}
.comment-form .comment-input {
width: 100%;
height: 68rpx;
line-height: 70rpx;
padding-left: 18rpx;
font-size: 28rpx;
color: black;
border: 2rpx solid #e2e4e7;
border-radius: 8rpx;
background-color: white;
}
.comment-form .comment-btn {
display: inline-block;
height: 70rpx;
width: 150rpx;
line-height: 70rpx;
margin-left: 15rpx;
font-size: 28rpx;
text-align: center;
color: white;
background-color: #62b900;
}
.comment-form .comment-btn.disabled {
background-color: #f6f6f6;
color: #e2e4e7;
}
const base_path = 'blog/'
export default {
//post
FETCH_POSTS_REQUEST: base_path + 'fetch_posts_request',
FETCH_POSTS_SUCCESS: base_path + 'fetch_posts_success',
FETCH_POSTS_FAIL: base_path + 'fetch_posts_fail',
CLEAR_POSTS_DATA: base_path + 'clear_posts_data',
//postDetail
FETCH_POST_DETAIL_REQUEST: base_path + 'fetch_post_detail_request',
FETCH_POST_DETAIL_SUCCESS: base_path + 'fetch_post_detail_success',
FETCH_POST_DETAIL_FAIL: base_path + 'fetch_post_detail_fail',
CLEAR_POST_DETAIL_DATA: base_path + 'clear_post_detail_data',
//postSearch
FETCH_POSTS_SEARCH_REQUEST: base_path + 'fetch_posts_search_request',
FETCH_POSTS_SEARCH_SUCCESS: base_path + 'fetch_posts_search_success',
FETCH_POSTS_SEARCH_FAIL: base_path + 'fetch_posts_search_fail',
CLEAR_POSTS_SEARCH_DATA: base_path + 'clear_posts_search_data',
//category
FETCH_CATEGORIES_REQUEST: base_path + 'fetch_categories_request',
FETCH_CATEGORIES_SUCCESS: base_path + 'fetch_categories_success',
FETCH_CATEGORIES_FAIL: base_path + 'fetch_categories_fail',
CLEAR_CATEGORIES_DATA: base_path + 'clear_categories_data',
UPDATE_CURRENT_CATEGORY: base_path + 'update_current_category',
//comment
FETCH_COMMENTS_REQUEST: base_path + 'fetch_comments_request',
FETCH_COMMENTS_SUCCESS: base_path + 'fetch_comments_success',
FETCH_COMMENTS_FAIL: base_path + 'fetch_comments_fail',
CLEAR_COMMENTS_DATA: base_path + 'clear_comments_data',
SET_COMMENTS_REQUEST: base_path + 'set_comments_request',
SET_COMMENTS_SUCCESS: base_path + 'set_comments_success',
SET_COMMENTS_FAIL: base_path + 'set_comments_fail',
ON_IS_EXTEND: base_path + 'on_is_extend',
ON_IS_REPLY_EXTEND: base_path + 'on_is_reply_extend',
//setting
FETCH_SETTINGS_REQUEST: base_path + 'fetch_settings_request',
FETCH_SETTINGS_SUCCESS: base_path + 'fetch_settings_success',
FETCH_SETTINGS_FAIL: base_path + 'fetch_settings_fail',
CLEAR_SETTINGS_DATA: base_path + 'clear_settings_data',
FETCH_SHORTCUTS_SUCCESS: 'app/blog/fetch_shortcuts_success',
FETCH_SLIDER_SUCCESS: 'app/blog/fetch_slider_success',
UPDATE_SETTINGS_SUCCESS: 'app/blog/update_settings_success',
//sharing
FETCH_SHARING_BASICINFO_REQUEST: base_path + 'fetch_sharing_basicinfo_request',
FETCH_SHARING_BASICINFO_SUCCESS: base_path + 'fetch_sharing_basicinfo_success',
FETCH_SHARING_BASICINFO_FAIL: base_path + 'fetch_sharing_basicinfo_fail',
FETCH_POST_SHARING_REQUEST: base_path + 'fetch_post_sharing_request',
FETCH_POST_SHARING_SUCCESS: base_path + 'fetch_post_sharing_success',
FETCH_POST_SHARING_FAIL: base_path + 'fetch_post_sharing_fail',
LIKE_POST_REQUEST: `${base_path}like_post_request`,
LIKE_POST_SUCCESS: `${base_path}like_post_success`,
LIKE_POST_FAIL: `${base_path}like_post_fail`,
}
const base_path = '/assets/blog/'
export default {
iconReading: base_path + 'icon-reading.png',
iconReadingSelected: base_path + 'icon-reading-selected.png',
iconMine: base_path + 'icon-mine.png',
iconMineSelected: base_path + 'icon-mine-selected.png',
iconBookmark: base_path + 'icon-bookmark.png',
iconBookmarked: base_path + 'icon-bookmarked.png',
iconComment: base_path + 'icon-comment.png',
iconLike: base_path + 'icon-like.png',
iconLock: base_path + 'icon-lock.png',
iconWechat: base_path + 'icon-wechat.png',
wechatWhite: base_path + 'icon-wechat-white.png',
iconSearch: base_path + 'icon-search.png',
iconSearchWhite: base_path + 'icon-white-search.png',
iconNoResult: base_path + 'icon-no-result.png',
iconClear: base_path + 'icon-clear.png',
iconClearWhite: base_path + 'icon-white-clear.png',
iconLink: base_path + 'icon-arrow.png',
imgAvatar: base_path + 'img-avatar.jpg',
iconShare: base_path + 'ic-share.png',
iconShareMessage: base_path + 'icon-share-message.png',
iconShareImage: base_path + 'icon-share-image.png',
iconLoadingGif: base_path + 'loading.gif',
iconDownload: base_path + 'icon-download-image.png',
iconShareTransform: base_path + 'icon-share-transform.png',
homeBtn: base_path + 'icon-home-btn.png',
iconMomentLike: `${base_path}icon-moment-like.png`,
iconMomentLikeGrey: `${base_path}icon-moment-like-grey.png`,
iconMomentLikeWhite: `${base_path}icon-moment-like-white.png`,
iconMomentLikeTotal: `${base_path}icon-moment-like-total.png`,
}
export default {
REQUESTS: {
// post.js
GET_POST: (code, productId) =>
`/r/v1/blog_posts/${productId}?code=${code}&v=${new Date().getTime()}`,
GET_POSTS: (siteId, code, category, pageNum = 1) => category === 'all'
? `/r/v1/sites/${siteId}/mini_program/blog?limit=8&page=${pageNum}&code=${code}&expand=blogPosts&exclude_content=true&v=${new Date().getTime()}`
: `/r/v1/sites/${siteId}/mini_program/blog?expand=blogPosts&limit=8&page=${pageNum}&tag=${encodeURI(`${category}`)}&code=${code}&exclude_content=true&v=${new Date().getTime()}`,
GET_POSTS_SEARCH: siteId =>
`/r/v1/mini_program/apps/${siteId}/search_blog_posts?v=${new Date().getTime()}`,
// category
GET_CATEGORIES: pageId =>
`/r/v1/sites/${pageId}/blog/tags?v=${new Date().getTime()}`,
// comment
GET_COMMENTS: (postId, pageNum) =>
`/r/v1/mini_program/blog/blog_posts/${postId}/user_comments?per=9999&page=${pageNum}`,
SET_COMMENTS: postId =>
`/r/v1/mini_program/blog/blog_posts/${postId}/user_comments`,
// sharing
GET_SHARING_BASICINFO: siteId => `/r/v1/sites/${siteId}/mp/basic_info`,
SET_SHARING_SCENECODE: siteId => `/r/v1/sites/${siteId}/mp/scene_codes`,
// setting
GET_SETTINGS: pageId =>
`/r/v1/sites/${pageId}/blog_settings?v=${new Date().getTime()}`,
SET_LIKE_POST: postId => `/r/v1/mini_program/blog/blog_posts/${postId}/likes`,
DELETE_LIKE_POST: postId => `/r/v1/mini_program/blog/likes/${postId}`
},
METHODS: {
// post
GET_POSTS: () => 'GET',
GET_POST: () => 'GET',
GET_POSTS_SEARCH: () => 'POST',
// category
GET_CATEGORIES: () => 'GET',
// comment
GET_COMMENTS: () => 'GET',
SET_COMMENTS: () => 'POST',
// setting
GET_SETTINGS: () => 'GET',
// sharing
GET_SHARING_BASICINFO: () => 'GET',
SET_SHARING_SCENECODE: () => 'POST',
},
PAGES: {
POST_INDEX: '/pages/blog/postIndex/postIndex',
POST_DETAIL: '/pages/blog/postDetail/postDetail',
POST_LIST: '/pages/blog/postList/postList',
POST_SEARCH: '/pages/blog/postSearch/postSearch',
MORE: '/pages/blog/more/more',
ABOUT: '/pages/blog/about/about',
SXL: '/pages/blog/sxl/sxl',
POST_SHARE: '/pages/blog/postShare/postShare',
WMP_SHARE: '/pages/blog/wmpShare/wmpShare',
},
NAVIGATION: {
POST_INDEX: 'pages#blog#more#more',
ABOUT: 'pages#blog#about#about',
},
}
var data = require('./api/data.js')
module.exports = {
getData: data.getData,
setData: data.setData
}
\ No newline at end of file
{
"publicComponents": {
"blog": "components/blog/blog"
},
"main": "index.js"
}
\ No newline at end of file
Page()
export const data = {
id: '',
name: '',
url: '',
}
export function handleCategory() {}
<template name="category-card">
<view class="category-card" bindtap="handleCategory" data-name="{{name}}" data-id="{{id}}">
<image wx:if="{{url}}" mode="aspectFill" src="{{url}}"/>
<text>{{name}}</text>
<view wx:if="{{url}}" class="overlay"></view>
</view>
</template>
.category-card {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 350rpx;
height: 350rpx;
position: relative;
margin-bottom: 14rpx;
text-align: center;
background: #636972;
}
.category-card .overlay {
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.category-card image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.category-card text {
position: relative;
z-index: 100;
}
\ No newline at end of file
Page()
export const data = {
isLoading: false,
emptyText: '',
moreText: '',
noMoreText: '',
style: '',
}
<template name="loader-bar">
<view class="loader-bar" style="{{style || ''}}">
<view wx:if="{{isLoading}}" class="loader"/>
<text wx:if="{{emptyText}}" class="item empty">{{emptyText}}</text>
<text wx:if="{{moreText}}" class="item more">{{moreText}}</text>
<text wx:if="{{noMoreText}}" class="item noMore">{{noMoreText}}</text>
</view>
</template>
.loader {
font-size: 10px;
margin: 0;
text-indent: -9999em;
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
background: #797979;
background: -moz-linear-gradient(left, #797979 10%, rgba(121, 121, 121, 0) 42%);
background: -webkit-linear-gradient(left, #797979 10%, rgba(121, 121, 121, 0) 42%);
background: -o-linear-gradient(left, #797979 10%, rgba(121, 121, 121, 0) 42%);
background: -ms-linear-gradient(left, #797979 10%, rgba(121, 121, 121, 0) 42%);
background: linear-gradient(to right, #797979 10%, rgba(121, 121, 121, 0) 42%);
position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before {
width: 50%;
height: 50%;
background: #797979;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #f4f4f4;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loader-bar {
text-align: center;
padding: 30rpx 0;
position: relative;
}
.loader-bar .item {
font-size: 24rpx;
color: #999;
}
\ No newline at end of file
Page()
export const data = {
height: '100vh',
}
<template name="loader-page">
<view class="loader-page" style="height: {{height || '100vh'}}">
<view class="loader"/>
</view>
</template>
.loader {
font-size: 10px;
margin: 0;
text-indent: -9999em;
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
background: #797979;
background: -moz-linear-gradient(left, #797979 10%, rgba(121, 121, 121, 0) 42%);
background: -webkit-linear-gradient(left, #797979 10%, rgba(121, 121, 121, 0) 42%);
background: -o-linear-gradient(left, #797979 10%, rgba(121, 121, 121, 0) 42%);
background: -ms-linear-gradient(left, #797979 10%, rgba(121, 121, 121, 0) 42%);
background: linear-gradient(to right, #797979 10%, rgba(121, 121, 121, 0) 42%);
position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before {
width: 50%;
height: 50%;
background: #797979;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #f4f4f4;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loader-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<template name="message-modal">
<view class="message-modal flex-row">
<icon type="info" size="16" color="#fff" style="vertical-align: middle;" />
<text>{{message}}</text>
</view>
</template>
.message-modal {
position: fixed;
top: 0;
left: 0;
padding: 12px;
width: 100vw;
text-align: center;
background: rgba(235, 83, 95, 0.94);
color: #fff;
z-index: 500;
box-sizing: border-box;
justify-content: center;
align-items: center;
}
.message-modal icon,
.message-modal text {
color: #fff;
}
.message-modal icon {
margin-right: 5px;
}
\ No newline at end of file
<template name="post-card-a">
<view class="post-card-a" bindtap="handlePost" data-id="{{id}}">
<view class="tags" wx:if="{{!isHiddenTag && allTagsList.length}}">{{currentCategory || allTagsList[0] || ''}}
</view>
<view wx:if="{{iconUrl}}" class="post-image">
<image wx:if="{{type === 'moment'}}" mode="aspectFill" src="{{iconUrl}}" style="height: 185px;" />
<image wx:else mode="aspectFill" src="{{iconUrl}}" />
</view>
<view class="card-text-wrapper">
<text class="card-title">{{title}}</text>
<view class="card-bottom">
<text>{{publishedAt}}</text>
</view>
</view>
</view>
</template>
<template name="post-card-b">
<view class="post-card-b" bindtap="handlePost" data-id="{{id}}">
<view class="post-image">
<image mode="aspectFill" src="{{iconUrl}}"/>
</view>
<view class="card-text-wrapper">
<text class="card-title">{{title}}</text>
<view class="card-bottom">
<text>{{publishedAt}}</text>
</view>
</view>
</view>
</template>
<template name="post-card-c">
<view class="post-card-c" bindtap="handlePost" data-id="{{id}}">
<view class="card-text-wrapper">
<text class="card-title">{{title}}</text>
<text class="card-blurb">{{blurb}}</text>
<view class="card-bottom">
<text>{{publishedAt}}</text>
</view>
</view>
</view>
</template>
<template name="post-card-d">
<view class="post-card-d" bindtap="handlePost" data-id="{{id}}">
<view class="content-text">
<text>{{titleColor[0]}}</text>
<text style="color:#ED8653">{{titleColor[1]}}</text>
<text>{{titleColor[2]}}</text>
</view>
<image class="content-icon" src="{{icon}}" mode="aspectFit"/>
</view>
</template>
<template name="post-card-e">
<view class="post-card-e" bindtap="handlePost" data-id="{{id}}">
<view class="post-image">
<image mode="aspectFill" src="{{iconUrl}}"/>
</view>
<view class="card-text-wrapper">
<text class="card-title">{{title}}</text>
<view class="card-bottom">
<text>{{publishedAt}}</text>
</view>
</view>
</view>
</template>
<template name="post-card-moment">
<view class="post-card-moment" bindtap="handleCard" data-post="{{item}}">
<image class="logo-image" mode="aspectFill" src="{{logoUrl}}"/>
<view class="card-text-wrapper">
<view class="single-row-wrapper logo-wrapper">
<text class="row-text logo-title">{{companyName || name}}</text>
<image class="row-image share-image" src="/assets/blog/icon-moment-share.png" bindtap="openShareView"/>
</view>
<template is="post-card-a" data="{{...item, handlePost, type: 'moment'}}"/>
<view class="single-row-wrapper time-wrapper" style="{{item.likesString || (enableComments && item.userComments && item.userComments.length > 0) ? 'margin-bottom: 20rpx;' : 'margin-bottom: 50rpx;'}}">
<text class="row-text time-title">{{item.publishedAt}}</text>
<image class="row-image comment-image" src="/assets/blog/icon-moment-comment.png" data-post="{{item}}" catchtap="switchOperation"/>
<view class="operation-wrapper" wx:if="{{selectedPostId == item.id}}">
<button
class="operation-btn like-btn"
data-post-id="{{item.id}}"
data-is-liked="{{item.isLiked}}"
data-index="{{index}}"
open-type="getUserInfo"
bindgetuserinfo="handleLike"
>
<image src="/assets/blog/icon-moment-like-white.png"/>
<text>{{item.isLiked ? '取消' : '赞'}}</text>
</button>
<block wx:if="{{enableComments}}">
<view class="separator"/>
<button
class="operation-btn comment-btn"
open-type="getUserInfo"
bindgetuserinfo="handleComment"
>
<image src="/assets/blog/icon-moment-comment-white.png"/>
<text>评论</text>
</button>
</block>
</view>
</view>
<view class="comment-wrapper" wx:if="{{item.likesString || (enableComments && item.userComments && item.userComments.length > 0)}}">
<view class="top-triangle"/>
<view class="like-wrapper" wx:if="{{item.likesString}}">
<view>
<image class="like-image" src="/assets/blog/icon-moment-like.png"/>
<text class="like-text">{{item.likesString}}</text>
</view>
</view>
<view class="comment-container {{item.likesString ? '' : 'empty-like'}}" wx:if="{{enableComments && item.userComments && item.userComments.length > 0}}">
<block wx:for="{{item.userComments}}" wx:key="{{item.id}}">
<view class="comment-item">
<text class="green-text">{{item.nickname}}</text>
<text class="separator">:</text>
<text>{{item.content}}</text>
</view>
<view class="comment-item" wx:if="{{item.replyStatus == 'visible'}}">
<text class="green-text">{{companyName || name}}</text>
<text >回复</text>
<text class="green-text">{{item.nickname}}</text>
<text class="separator">:</text>
<text>{{item.reply}}</text>
</view>
</block>
</view>
</view>
</view>
</view>
</template>
.card-bottom-content-mix image {
margin-right: 6rpx;
}
.card-bottom-content-mix image,
.card-bottom-content-mix text {
vertical-align: middle;
}
.card-bottom-mix {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
}
.card-bottom-mix image {
margin-right: 6rpx;
}
.card-bottom-mix image,
.card-bottom-mix text {
vertical-align: middle;
}
.post-card-a {
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.11);
background: #fff;
border-radius: 4rpx;
margin-bottom: 30rpx;
overflow: hidden;
position: relative;
}
.post-card-a .post-image {
width: 100%;
height: 284rpx;
overflow: hidden;
}
.post-card-a .post-image image {
width: 100%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.post-card-a .card-text-wrapper {
padding: 24rpx 26rpx;
}
.post-card-a .card-text-wrapper text,
.post-card-a .card-text-wrapper view {
color: #888;
font-size: 12px;
}
.post-card-a .card-text-wrapper .card-title {
color: #222;
font-size: 16px;
font-weight: bold;
}
.post-card-a .card-text-wrapper .card-bottom image {
margin-right: 6rpx;
}
.post-card-a .card-text-wrapper .card-bottom image,
.post-card-a .card-text-wrapper .card-bottom text {
vertical-align: middle;
}
.post-card-a .tags {
z-index: 100;
color: #fff;
font-size: 12px;
position: absolute;
top: 28rpx;
left: 28rpx;
line-height: 46rpx;
padding: 0 16rpx;
border-radius: 4rpx;
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
}
.post-card-b {
display: flex;
margin-bottom: 28rpx;
}
.post-card-b .post-image {
width: 200rpx;
height: 200rpx;
border-radius: 4rpx;
overflow: hidden;
flex: 0 0 auto;
}
.post-card-b .post-image image {
width: 100%;
height: 100%;
}
.post-card-b .card-text-wrapper {
padding: 24rpx 36rpx;
line-height: 1.5;
}
.post-card-b .card-text-wrapper text,
.post-card-b .card-text-wrapper view {
color: #888;
font-size: 12px;
}
.post-card-b .card-text-wrapper .card-title {
color: #222;
font-size: 16px;
font-weight: bold;
}
.post-card-b .card-text-wrapper image {
margin-right: 6rpx;
}
.post-card-b .card-text-wrapper image,
.post-card-b .card-text-wrapper text {
vertical-align: middle;
}
.post-card-c .card-text-wrapper {
padding: 30rpx 0;
margin: 0 26rpx;
border-bottom: 1px solid #d0d0d0;
}
.post-card-c .card-text-wrapper text,
.post-card-c .card-text-wrapper view {
color: #888;
font-size: 12px;
}
.post-card-c .card-text-wrapper .card-title {
display: block;
color: #222;
font-size: 16px;
font-weight: bold;
line-height: 48rpx;
}
.post-card-c .card-text-wrapper .card-blurb {
display: block;
margin-top: 10rpx;
font-size: 26rpx;
color: #666666;
line-height: 1.6;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.post-card-c .card-text-wrapper image {
margin-right: 6rpx;
}
.post-card-c .card-text-wrapper image,
.post-card-c .card-text-wrapper text {
vertical-align: middle;
}
.post-card-d {
display: flex;
justify-content: space-between;
padding: 42rpx 16rpx 41rpx 40rpx;
background-color: #ffffff;
border-bottom: solid 2rpx #eeeeee;
}
.post-card-d .content-text {
width: 100%;
height: 45rpx;
line-height: 45rpx;
font-size: 32rpx;
color: #616161;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.post-card-d .content-icon {
width: 36rpx;
height: 36rpx;
padding: 6rpx 24rpx 10rpx 16rpx;
}
.post-card-e {
display: flex;
padding-bottom: 28rpx;
}
.post-card-e .post-image {
width: 160rpx;
height: 160rpx;
border-radius: 4rpx;
overflow: hidden;
flex: 0 0 auto;
}
.post-card-e .post-image image {
width: 100%;
height: 100%;
}
.post-card-e .card-text-wrapper {
margin-left: 24rpx;
}
.post-card-e .card-text-wrapper text,
.post-card-e .card-text-wrapper view {
color: #888;
font-size: 12px;
}
.post-card-e .card-text-wrapper .card-title {
display: block;
padding-top: 12rpx;
margin-bottom: 16rpx;
color: #636363;
font-size: 14px;
}
.post-card-e .card-text-wrapper image {
margin-right: 6rpx;
}
.post-card-e .card-text-wrapper image,
.post-card-e .card-text-wrapper text {
vertical-align: middle;
}
.post-card-moment {
display: flex;
padding-bottom: 38rpx;
margin-bottom: 32rpx;
position: relative;
}
.post-card-moment::after {
display: block;
position: absolute;
content: '';
width: 200%;
height: 2rpx;
left: -50%;
bottom: 0;
background-color: #f4f4f4;
z-index: 1;
}
.post-card-moment:last-child::after {
display: none;
}
.post-card-moment .logo-image {
width: 88rpx;
height: 88rpx;
flex-shrink: 0;
margin-right: 24rpx;
}
.post-card-moment .post-card-a {
background-color: #f4f4f4;
padding: 20rpx;
}
.post-card-moment .post-card-a .card-text-wrapper {
padding: 18rpx 0;
}
.post-card-moment .post-card-a .card-text-wrapper .card-title {
font-size: 28rpx;
font-weight: 600;
color: #333333;
}
.post-card-moment .post-card-a .card-text-wrapper .card-bottom {
display: none;
}
.post-card-moment .single-row-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 580rpx;
}
.post-card-moment .single-row-wrapper .row-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 480rpx;
}
.post-card-moment .single-row-wrapper .row-image {
flex-shrink: 0;
}
.post-card-moment .card-text-wrapper {
overflow: hidden;
}
.post-card-moment .card-text-wrapper .logo-wrapper {
margin-bottom: 20rpx;
line-height: 40rpx;
height: 40rpx;
}
.post-card-moment .card-text-wrapper .logo-wrapper .logo-title {
color: #586a92;
font-size: 32rpx;
font-weight: 500;
}
.post-card-moment .card-text-wrapper .logo-wrapper .share-image {
width: 40rpx;
height: 40rpx;
}
.post-card-moment .card-text-wrapper .time-wrapper {
margin-bottom: 20rpx;
line-height: 40rpx;
height: 40rpx;
position: relative;
}
.post-card-moment .card-text-wrapper .time-wrapper .time-title {
font-size: 24rpx;
color: #808080;
}
.post-card-moment .card-text-wrapper .time-wrapper .comment-image {
width: 40rpx;
height: 40rpx;
}
.post-card-moment .card-text-wrapper .time-wrapper .operation-wrapper {
position: absolute;
top: 8rpx;
right: 50rpx;
height: 78rpx;
border-radius: 6rpx;
background-color: #586a92;
cursor: pointer;
z-index: 99;
}
.post-card-moment .card-text-wrapper .time-wrapper .operation-wrapper image {
width: 40rpx;
height: 40rpx;
vertical-align: middle;
padding: 8rpx;
}
.post-card-moment .card-text-wrapper .time-wrapper .operation-wrapper text {
font-size: 28rpx;
color: #fff;
}
.post-card-moment .card-text-wrapper .time-wrapper .operation-wrapper .operation-btn {
display: inline-block;
line-height: 78rpx;
width: 198rpx;
text-align: center;
background: transparent;
padding: 0;
overflow: auto;
}
.post-card-moment .card-text-wrapper .time-wrapper .operation-wrapper .separator {
width: 4rpx;
height: 78rpx;
background: #465880;
display: inline-block;
vertical-align: top;
}
.post-card-moment .comment-wrapper {
background-color: #f4f4f4;
padding: 20rpx;
border-radius: 4rpx;
position: relative;
}
.post-card-moment .comment-wrapper .top-triangle {
position: absolute;
display: inline-block;
content: '';
width: 0;
height: 0;
border-left: 16rpx solid transparent;
border-right: 16rpx solid transparent;
border-bottom: 16rpx solid #f4f4f4;
left: 16rpx;
top: -14rpx;
}
.post-card-moment .comment-wrapper .like-wrapper {
display: flex;
flex-direction: row;
position: relative;
padding-bottom: 20rpx;
}
.post-card-moment .comment-wrapper .like-wrapper .like-image {
width: 35rpx;
height: 35rpx;
margin-right: 4rpx;
position: relative;
top: 10rpx;
left: -4rpx;
}
.post-card-moment .comment-wrapper .like-wrapper .like-text {
font-size: 24rpx;
color: #586a92;
line-height: 30rpx;
}
.post-card-moment .comment-wrapper .comment-container {
position: relative;
padding-top: 10rpx;
}
.post-card-moment .comment-wrapper .comment-container::before {
position: absolute;
display: inline-block;
content: '';
width: 200%;
height: 1rpx;
left: -50%;
top: 0;
background-color: #e1e1e1;
}
.post-card-moment .comment-wrapper .comment-container.empty-like::before {
display: none;
}
.post-card-moment .comment-wrapper .comment-container .comment-item {
padding: 2rpx 0;
}
.post-card-moment .comment-wrapper .comment-container .comment-item text {
font-size: 24rpx;
color: #333;
}
.post-card-moment .comment-wrapper .comment-container .comment-item .green-text {
color: #586a92;
}
.post-card-moment .comment-wrapper .comment-container .comment-item .separator {
margin-right: 8rpx;
}
\ No newline at end of file
import { extendMethod } from 'root/utils/helpers/helper'
function shareView(app) {
app.onLoad = extendMethod(app.onLoad, function() {
this.setData({
showShareVariation: false,
shareAnimation: {},
})
})
app.onShow = extendMethod(app.onShow, function() {
this.closeShareView()
})
// hack the onShareAppMessage whose options always is undefined
app.closeShareView = extendMethod(function() {
wx.showShareMenu()
const animation = wx.createAnimation({
duration: 400,
timingFunction: 'ease',
})
this.setData({
showShareVariation: false,
shareAnimation: animation
.translateY('100%')
.step()
.export(),
})
})
app.openShareView = extendMethod(function() {
wx.hideShareMenu()
const animation = wx.createAnimation({
duration: 400,
timingFunction: 'ease',
})
this.setData({
showShareVariation: true,
shareAnimation: animation
.translateY(0)
.step()
.export(),
})
})
return app
}
export default shareView
<template name="share-view">
<block>
<view animation="{{shareAnimation}}" class="share-view">
<view class="share-choose">
<button class="share-choose-item" style="border-right: 1px solid #f2f2f2" open-type="share">
<image src="/assets/blog/icon-share-message.png" class="share-image" />
<text class="share-text">发送给朋友</text>
</button>
<button class="share-choose-item" bindtap="sharePicture">
<image src="{{shareLoading ? '/assets/blog/loading.gif' : '/assets/blog/icon-share-image.png'}}" class="share-image" />
<text class="share-text">{{shareLoading? '生成中' : '生成分享图片'}}</text>
</button>
</view>
<button wx:if="{{showShareVariation}}" class="main-button normal-flex" bindtap="closeShareView" hover-class="none" style="background-color: #f9f9f9;color:#292940">取消</button>
</view>
<view class="mask-variation" wx:if="{{showShareVariation}}" bindtap="closeShareView" />
</block>
</template>
.share-view {
transform: translateY(100%);
-webkit-transform: translateY(100%);
background-color: #fff;
position: fixed;
bottom: 0;
z-index: 999;
left: 0;
width: 100%;
}
.share-view .share-choose {
height: 204rpx;
}
.share-view .share-choose .share-choose-item {
width: 50%;
display: inline-block;
text-align: center;
margin: 40rpx 0;
box-sizing: border-box;
background-color: #fff;
padding: 0;
border: 0;
border-radius: 0;
line-height: 40rpx;
}
.share-view .share-choose .share-choose-item::after {
border: 0;
}
.share-view .share-choose .share-choose-item .share-image {
width: 85rpx;
height: 85rpx;
}
.share-view .share-choose .share-choose-item .share-text {
font-size: 28rpx;
color: #292940;
font-family: PingFangSC;
display: block;
margin-top: 5px;
}
.share-view button::after {
border: none;
}
\ No newline at end of file
Page()
export const data = {
shortcuts: [],
shortcutsSecondLineWrapperClass: '',
shortcutsSecondLine: [],
shortcutsFirstLine: [],
}
export function makePhoneCall(e) {}
export function handleProduct(e) {}
export function handleCategory(e) {}
export function handlePage(e) {}
<import src="root/templates/shortcut/shortcut.wxml"/>
<template name="shortcuts">
<view wx:if="{{shortcuts.length !== 0}}" class="shortcuts">
<block wx:if="{{shortcuts.length <= 5}}">
<view class="shortcut-wrapper">
<block wx:for="{{shortcuts}}" wx:key="id" wx:for-item="item">
<template is="shortcut" data="{{ ...item, handleProduct, handleCategory, makePhoneCall, handleProduct, showContactBtn }}"/>
</block>
</view>
</block>
<block wx:else>
<view class="shortcut-wrapper">
<block wx:for="{{shortcutsFirstLine}}" wx:key="id" wx:for-item="item">
<template is="shortcut" data="{{ ...item, handleProduct, handleCategory, makePhoneCall, handleProduct, showContactBtn }}"/>
</block>
</view>
<view class="{{'shortcut-wrapper shortcut-wrapper-second ' + shortcutsSecondLineWrapperClass}}" >
<block wx:for="{{shortcutsSecondLine}}" wx:key="id" wx:for-item="item">
<template is="shortcut" data="{{ ...item, handleProduct, handleCategory, makePhoneCall, handleProduct, showContactBtn }}"/>
</block>
</view>
</block>
</view>
</template>
.shortcut {
text-align: center;
}
.shortcut .shortcut-image {
height: 120rpx;
width: 120rpx;
display: block;
}
.shortcut .shortcut-button {
height: 120rpx;
width: 120rpx;
display: block;
padding: 0;
}
.shortcut .shortcut-image-text {
color: #333;
font-size: 15px;
}
.shortcut-container {
text-align: center;
}
.shortcut-square {
border-radius: 3px;
}
.shortcut-circle .shortcut-image,
.shortcut-circle .shortcut-button {
border-radius: 50%;
overflow: hidden;
}
.shortcut-circle button::after {
border: 0;
}
.shortcuts .shortcut-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 30rpx;
}
.shortcuts .shortcut-wrapper-second {
padding-top: 0;
}
.shortcuts .shortcut-placeholder-junior {
margin: 0 100rpx;
}
.shortcuts .shortcut-placeholder-senior {
margin: 0 70rpx;
}
\ No newline at end of file
Page()
export const data = {
sliders: [
{
type: 'product' || 'category' || 'page' || 'video',
url: '',
value: '' || { id: '', name: '' },
},
],
dotPosition: 0,
hasVideoBanner: true || false,
}
export function handleSliderChange(e) {
// this.setData({
// dotPosition: e.detail.current,
// })
}
export function handleProduct(e) {
// const { id, name } = e.currentTarget.dataset
// if (id) {
// wx.navigateTo({
// url: ``,
// })
// }
}
export function handleCategory(e) {
// const { id, name } = e.currentTarget.dataset
// if (id) {
// wx.navigateTo({
// url: ``,
// })
// }
}
export function handlePage(e) {
// const { id, name } = e.currentTarget.dataset
// if (id) {
// wx.navigateTo({
// url: ``,
// })
// }
}
<template name="slider">
<view wx:if="{{sliders && sliders.length}}" class="slider">
<swiper
class="image-slider"
indicator-dots="{{false}}"
autoplay="{{true}}"
circular="{{true}}"
bindchange="handleSliderChange"
wx:if="{{!hasVideoBanner}}"
>
<block wx:for="{{sliders}}" wx:key="id" wx:for-item="item">
<swiper-item class="slide-item">
<block wx:if="{{!item.type}}">
<image class="slide-image"
mode="widthFix"
src="{{item.url}}"
/>
</block>
<block wx:if="{{item.type == 'product'}}">
<image class="slide-image"
mode="widthFix"
bindtap="handleProduct"
data-id="{{item.value}}"
src="{{item.url}}"
/>
</block>
<block wx:if="{{item.type == 'category'}}">
<image class="slide-image"
mode="widthFix"
bindtap="handleCategory"
data-id="{{item.value.id}}"
data-name="{{item.value.name}}"
src="{{item.url}}"
/>
</block>
<block wx:if="{{item.type == 'blogPost'}}">
<image class="slide-image"
mode="widthFix"
bindtap="handlePost"
data-id="{{item.value}}"
src="{{item.url}}"
/>
</block>
<block wx:if="{{item.type == 'page'}}">
<image class="slide-image"
mode="widthFix"
bindtap="handlePage"
data-id="{{item.value}}"
src="{{item.url}}"
/>
</block>
</swiper-item>
</block>
</swiper>
<view wx:if="{{!hasVideoBanner && sliders.length >= 2}}" class="slider-dots">
<view wx:for="{{sliders || []}}" wx:key="index"
class="{{'slider-dot ' + (dotPosition === index ? 'selected' : '')}}"
/>
</view>
<view wx:if="{{hasVideoBanner}}">
<block wx:for="{{sliders}}" wx:key="id" wx:for-item="item">
<block wx:if="{{item.type == 'video'}}">
<video src="{{item.url}}"/>
</block>
</block>
</view>
</view>
</template>
.slider,
.image-slider {
position: relative;
height: 420rpx;
}
.slider video,
.image-slider video {
height: 420rpx;
width: 750rpx;
}
.slide-image {
width: 100%;
}
.slider-wrapper {
position: relative;
}
.slider-dots {
position: absolute;
bottom: 12rpx;
text-align: center;
width: 100vw;
}
.slider-dot {
margin: 0 8rpx;
display: inline-block;
width: 12rpx;
height: 12rpx;
border-radius: 10px;
border: 1px solid #ABABAB;
}
.slider-dot.selected {
background: #fff;
border: 1px solid #fff;
}
\ No newline at end of file
Page()
export const data = {
currentTab: 'post',
tabs: [{ id: 'post', name: '文章' }, { id: 'category', name: '分类' }],
hasSearch: true,
background: '#ffffff',
isWhiteBackground: true,
isForeground: false,
iconSearchWhite: '',
iconSearch: '',
}
export function handleTab(event) {
this.setData({
currentTab: event.currentTarget.dataset.id,
})
}
export function handleSearch() {}
<template name="tabs">
<view wx:if="{{isForeground}}" class="top-bar">
<view class="nav-items">
<block wx:for="{{tabs}}" wx:key="id" wx:for-item="tab">
<view class="nav-item"
style="{{!isWhiteBackground && currentTab == tab.id ? 'border-bottom-color: ' + background : 'border-bottom-color: #fff'}}"
data-id="{{tab.id}}"
bindtap="handleTab">
<view
style="{{!isWhiteBackground && currentTab == tab.id ? 'color: ' + background : 'color: #222222'}}"
>
{{tab.name}}
</view>
</view>
</block>
</view>
<image wx:if="{{hasSearch}}"
class="nav-search"
src="{{iconSearch}}"
bindtap="handleSearch"
/>
</view>
<view wx:else class="top-bar" style="{{background && 'background: ' + background}}">
<view class="{{'nav-items ' + (isWhiteBackground ? '' : 'non-white-theme')}}">
<block wx:for="{{tabs}}" wx:key="id" wx:for-item="tab">
<view class="{{'nav-item ' + (currentTab == tab.id ? 'selected' : '')}}"
data-id="{{tab.id}}"
bindtap="handleTab">
<view>{{tab.name}}</view>
</view>
</block>
</view>
<image wx:if="{{hasSearch}}"
class="nav-search"
src="{{isWhiteBackground ? iconSearch : iconSearchWhite}}"
bindtap="handleSearch"
/>
</view>
</template>
.top-bar {
flex: 0 0 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100vw;
height: 95rpx;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);
background: #fff;
}
.top-bar .nav-items {
display: flex;
flex-direction: row;
align-items: center;
max-width: 200rpx;
padding: 0 30rpx;
}
.top-bar .nav-items.non-white-theme .nav-item view {
color: #fff;
}
.top-bar .nav-items.non-white-theme .nav-item.selected {
border-color: #fff;
}
.top-bar .nav-items .nav-item {
flex: 0 0 auto;
text-align: center;
opacity: 0.6;
border-bottom: 4rpx solid transparent;
}
.top-bar .nav-items .nav-item image {
width: 32rpx;
height: 32rpx;
margin-right: 5rpx;
vertical-align: middle;
}
.top-bar .nav-items .nav-item view {
padding: 0 30rpx;
font-size: 16px;
color: #292929;
line-height: 88rpx;
}
.top-bar .nav-items .nav-item.selected {
border-bottom: 4rpx solid #222222;
opacity: 1;
}
.top-bar .nav-search {
width: 32rpx;
height: 32rpx;
padding-right: 30rpx;
}
\ No newline at end of file
{
"description": "项目配置文件。",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": false,
"es6": true,
"postcss": false,
"minified": false,
"newFeature": true
},
"compileType": "plugin",
"libVersion": "2.2.2",
"appid": "wx08a306210cff4868",
"projectname": "%E9%97%A8%E5%BA%97%E5%8D%9A%E5%AE%A2",
"svr": "",
"client": "",
"qcloudRoot": "",
"miniprogramRoot": "./miniprogram",
"pluginRoot": "./plugin",
"scripts": {},
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"plugin": {
"current": -1,
"list": []
},
"game": {
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment